/* _content/Dashboard/Components/Pages/BotTimeline.razor.rz.scp.css */
/* Lane colours: the reference categorical palette without its green and red (the rows use those for
   Done and Missed), in its fixed order, stepped separately for the light and the dark surface. The
   theme is the dashboard's own toggle, so the page sets the class rather than a media query. */
.timeline--light[b-mtdxiv2x9o] {
    --lane-0: #2a78d6; /* blue    */
    --lane-1: #eb6834; /* orange  */
    --lane-2: #1baf7a; /* aqua    */
    --lane-3: #eda100; /* yellow  */
    --lane-4: #e87ba4; /* magenta */
    --lane-5: #4a3aa7; /* violet  */
    --lane-neutral: #9aa3ad;
}

.timeline--dark[b-mtdxiv2x9o] {
    --lane-0: #3987e5;
    --lane-1: #d95926;
    --lane-2: #199e70;
    --lane-3: #c98500;
    --lane-4: #d55181;
    --lane-5: #9085e9;
    --lane-neutral: #5d6b7a;
}

/* One step per row, full width, the way the list always read — the threads are drawn in the gutter
   beside them, like the graph beside a commit list. */
.timeline-row[b-mtdxiv2x9o] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 0 4px;
    min-height: 52px;
    border-bottom: 1px solid var(--line-1, color-mix(in srgb, var(--fg-on-media) 5%, transparent));
    border-radius: 6px;
    transition: background-color 120ms ease;
}

.timeline-row > :not(.timeline-gutter)[b-mtdxiv2x9o] {
    align-self: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

.timeline-row:hover[b-mtdxiv2x9o] {
    background-color: var(--bg-hover);
}

.timeline-row--cursor[b-mtdxiv2x9o] {
    align-items: center;
    border-bottom: none;
    min-height: 28px;
}

.timeline-row--cursor:hover[b-mtdxiv2x9o] {
    background-color: transparent;
}

[b-mtdxiv2x9o] .timeline-time {
    min-width: 3.25rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Title, detail and reason are three lines, not three sentences. They used to run together —
   "Post the daily reviewHow today's matches wentNo matches today" — because the title is
   inline-block (below) and the two captions are spans, so all three sat on one line with nothing
   between them. A column of flex items puts each on its own line whatever element MudText picks. */
.timeline-text[b-mtdxiv2x9o] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

[b-mtdxiv2x9o] .timeline-sub {
    line-height: 1.4;
}

[b-mtdxiv2x9o] .timeline-sub--reason {
    color: var(--status-warning);
}

/* The tooltip's anchor: only as wide as the title, so the tooltip sits beside the row instead of
   under the cursor. */
[b-mtdxiv2x9o] .timeline-title {
    display: inline-block;
    font-weight: 600;
    cursor: help;
}

[b-mtdxiv2x9o] .timeline-now {
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.timeline-now-line[b-mtdxiv2x9o] {
    flex: 1;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* ── The lane gutter ── */

.timeline-gutter[b-mtdxiv2x9o] {
    display: flex;
    flex-shrink: 0;
    align-self: stretch;
}

.lane[b-mtdxiv2x9o] {
    position: relative;
    width: 16px;
    --lane-color: var(--lane-neutral);
}

/* The day's own lane, on the left of every match lane and drawn on every row — including the "now"
   row and a day that has no matches at all. */
.lane--spine[b-mtdxiv2x9o] { --lane-color: var(--lane-neutral); }

.lane--slot0[b-mtdxiv2x9o] { --lane-color: var(--lane-0); }
.lane--slot1[b-mtdxiv2x9o] { --lane-color: var(--lane-1); }
.lane--slot2[b-mtdxiv2x9o] { --lane-color: var(--lane-2); }
.lane--slot3[b-mtdxiv2x9o] { --lane-color: var(--lane-3); }
.lane--slot4[b-mtdxiv2x9o] { --lane-color: var(--lane-4); }
.lane--slot5[b-mtdxiv2x9o] { --lane-color: var(--lane-5); }

.lane-line[b-mtdxiv2x9o] {
    position: absolute;
    left: 7px;
    width: 2px;
    background: var(--lane-color);
}

.lane-line--full[b-mtdxiv2x9o] { top: 0; bottom: 0; }
.lane-line--above[b-mtdxiv2x9o] { top: 0; height: 50%; }
.lane-line--below[b-mtdxiv2x9o] { top: 50%; bottom: 0; }

/* A step: a dot in the match's colour, ringed in the surface so a line running into it stays apart. */
.lane-dot[b-mtdxiv2x9o] {
    position: absolute;
    left: 3px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--lane-color);
    box-shadow: 0 0 0 2px var(--bg-panel);
}

/* ── The hover details ── */

.timeline-tip[b-mtdxiv2x9o] {
    text-align: left;
    max-width: 340px;
    padding: 2px 0;
}

.timeline-tip__head[b-mtdxiv2x9o] {
    font-weight: 700;
    margin-bottom: 4px;
}

.timeline-tip__line[b-mtdxiv2x9o] {
    display: flex;
    gap: 8px;
    line-height: 1.4;
}

.timeline-tip__label[b-mtdxiv2x9o] {
    min-width: 92px;
    flex-shrink: 0;
    opacity: 0.7;
}
/* _content/Dashboard/Components/Pages/Broadcasts.razor.rz.scp.css */
/* The composer and the Sent list. MudBlazor components render their own elements, so anything
   styled inside one is reached through ::deep from a plain element this page renders. */

.broadcast-layout[b-r2qtu7o0pw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 1280px) {
    .broadcast-layout[b-r2qtu7o0pw] {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

@media (min-width: 960px) {
    .broadcast-layout--sent[b-r2qtu7o0pw] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.broadcast-picklist[b-r2qtu7o0pw] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-1) var(--space-2);
}

.broadcast-picklist__group[b-r2qtu7o0pw] {
    font-family: var(--font-display);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fg-2);
    padding: var(--space-2) 0 0;
}

.broadcast-chip-count[b-r2qtu7o0pw] {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    margin-left: 6px;
    opacity: 0.8;
}

.broadcast-toolbar-gap[b-r2qtu7o0pw] {
    width: 1px;
    height: 20px;
    background: var(--line-1);
    margin: 0 var(--space-1);
}

.broadcast-text[b-r2qtu7o0pw]  textarea {
    resize: vertical;
    min-height: 10rem;
}

.broadcast-sub[b-r2qtu7o0pw] {
    border: 1px dashed var(--line-1);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-3);
    margin: var(--space-2) 0 0 var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.broadcast-preview-column[b-r2qtu7o0pw] {
    position: sticky;
    top: var(--space-4);
}

.broadcast-small[b-r2qtu7o0pw] {
    font-size: var(--text-body-sm);
}

.broadcast-item[b-r2qtu7o0pw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--line-1);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-panel);
    color: var(--fg-1);
    text-decoration: none;
}

.broadcast-item:hover[b-r2qtu7o0pw] {
    border-color: var(--accent, var(--accent));
}

.broadcast-item--selected[b-r2qtu7o0pw] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}

.broadcast-item__name[b-r2qtu7o0pw] {
    font-weight: 600;
}

.broadcast-item__meta[b-r2qtu7o0pw] {
    font-size: var(--text-body-sm);
    color: var(--fg-2);
}

@media (max-width: 1279px) {
    .broadcast-preview-column[b-r2qtu7o0pw] {
        position: static;
    }
}
/* _content/Dashboard/Components/Pages/Cases.razor.rz.scp.css */

/* Search and the two filters share the toolbar's row. */
[b-m6a8q61tkt] .case-search { flex: 1 1 260px; max-width: 360px; }
[b-m6a8q61tkt] .case-filter { flex: 0 0 170px; }
/* _content/Dashboard/Components/Pages/Commands.razor.rz.scp.css */
/* Command toggles as a responsive card grid instead of full-width stacked rows, so a handful of
   commands fill the width instead of leaving a large empty area to the right (whitespace audit). */
.command-grid[b-m6mnzxicjp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 12px;
}
/* _content/Dashboard/Components/Pages/DivisionStandings.razor.rz.scp.css */
/* Public division-standings page — genuinely new styling only; everything else reuses the shared
   hs-panel / .row-clickable patterns (STYLE.md §4.4). */

/* Standings + the withdrawn list: hold the numeric columns to the width of their figures so they
   cluster at the right, and let the team column take all the slack. Without this the browser shares
   the leftover width out over six columns, and in a division with a couple of rows each number ends
   up marooned in the middle of a column far from anything else in its row.

   ::deep because ThSortable renders the <th> elements: they carry its scope attribute, not this
   page's, so a plain `.league-standings th` would be rewritten to a selector no head ever matches.
   The same goes for the cells once TeamLink or anything else renders one, so both go through it. */
.league-standings[b-t7ddqtenxu]  th.replay-stats-num,
.league-standings[b-t7ddqtenxu]  td.replay-stats-num {
    width: 1%;
    white-space: nowrap;
}

/* Round/Recent/Upcoming match rows: three-column layout (home | score | away[, date]) inside the
   shared .detail-stats-table, header-less. */
.league-match-table td[b-t7ddqtenxu] {
    vertical-align: middle;
}

.league-match-team[b-t7ddqtenxu] {
    width: 40%;
}

.league-match-team--home[b-t7ddqtenxu] {
    text-align: right;
}

/* In the wide main column (round navigator), push each team to its own side — scoreboard style — so a
   "Team vs Team" row fills the width instead of both teams clustering around the centre. The compact
   rail (--compact) keeps its centred look. */
.league-match-table:not(.league-match-table--compact) .league-match-team--home[b-t7ddqtenxu] {
    text-align: left;
}

.league-match-table:not(.league-match-table--compact) .league-match-team:not(.league-match-team--home)[b-t7ddqtenxu] {
    text-align: right;
}

/* Score/"vs" column — centered, not right-aligned like .replay-stats-num (a plain reuse of that
   class here would fight this rule at equal specificity, so it gets its own small class instead). */
.league-match-score[b-t7ddqtenxu] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    /* DS reserves the mono face for scores; tabular figures keep 1:0 and 3:2 the same width. */
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    /* The result reads a touch larger than the surrounding names/rows. */
    font-size: 14px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ── Two-column page layout: wide main column (standings + rounds) + a fixed-width right rail
   (last 5 + upcoming). The rail collapses under the main column on narrow viewports. ── */
.league-layout[b-t7ddqtenxu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

/* No rail content → main column spans the full width. */
.league-layout--single[b-t7ddqtenxu] {
    grid-template-columns: minmax(0, 1fr);
}

/* min-width:0 lets the table/tab tracks shrink inside the grid instead of overflowing. */
.league-main[b-t7ddqtenxu],
.league-rail[b-t7ddqtenxu] {
    min-width: 0;
}

/* Below this width the rail can't hold match rows comfortably → stack it under the main column. */
@media (max-width: 1100px) {
    .league-layout[b-t7ddqtenxu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact "Last 5" rows in the narrow rail: smaller text + tighter score padding, names may wrap. */
.league-match-table--compact td[b-t7ddqtenxu] {
    font-size: var(--text-micro, 0.6875rem);
}

.league-match-table--compact .league-match-score[b-t7ddqtenxu] {
    /* Compact rows shrink to 11px; the result stays a hair larger so it still stands out. */
    font-size: 13px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Upcoming matches are grouped by day: a weekday header caps each day's cluster, and every match sits
   in its own inset box so matches on the same day read as distinct from one another. */
.league-upcoming-day + .league-upcoming-day[b-t7ddqtenxu] {
    margin-top: 1rem;
}

.league-upcoming-day-header[b-t7ddqtenxu] {
    font-weight: var(--weight-semibold);
    color: var(--fg-2);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-1);
}

/* Individual match box. The shared .row-clickable hover only targets .detail-stats-table rows, so these
   need their own affordance. */
.league-upcoming-match[b-t7ddqtenxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-raised);
    border: 1px solid var(--line-1);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.league-upcoming-match:hover[b-t7ddqtenxu] {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.league-upcoming-match-time[b-t7ddqtenxu] {
    flex: 0 0 auto;
    min-width: 3rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    color: var(--fg-2);
}

.league-upcoming-match .league-upcoming-pairing[b-t7ddqtenxu] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .league-upcoming-match[b-t7ddqtenxu] {
        transition: none;
    }
}

/* Upcoming pairing: fixed centre column for "vs" so it lines up across rows regardless of team-name
   length; each team hugs the centre from its own side (home right-aligned, away left-aligned). */
.league-upcoming-pairing[b-t7ddqtenxu] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.375rem;
}

.league-upcoming-pairing > :first-child[b-t7ddqtenxu] { text-align: right; }
.league-upcoming-pairing > :last-child[b-t7ddqtenxu]  { text-align: left; }
/* _content/Dashboard/Components/Pages/HeroicTicketConfig.razor.rz.scp.css */
/* HeroicTickets settings — the per-field editor row.
   Deliberately not a MudGrid: these rows live inside a MudItem already, and MudGrid's negative
   margins do not nest, which knocked the delete button out of alignment with its row. */

.field-row[b-684seni9o5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.field-row__label[b-684seni9o5] {
    flex: 1 1 12rem;
    min-width: 8rem;
}

.field-row__type[b-684seni9o5] {
    flex: 0 0 10rem;
}

.field-row__required[b-684seni9o5] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Channel picker in the publish bar — wide enough for a readable channel name, narrow enough
   that it stays on one line next to the buttons. */
.publish-target[b-684seni9o5] {
    width: 15rem;
    max-width: 100%;
}

/* Emoji field: the input, then a preview of what it resolves to and the picker button.
   Aligned to the top rather than centred — the input carries helper text below it, and centring on the
   whole block put the button lower than the input it belongs to. The fixed height matches a dense
   outlined input, so the button lines up with its middle. */
.emoji-field[b-684seni9o5] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.emoji-field__actions[b-684seni9o5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.5rem;
    flex: 0 0 auto;
}

/* Server emoji picker. A grid rather than a list: these are pictures, and a few dozen of them are
   recognisable at a glance in a way their names are not. */
.emoji-picker[b-684seni9o5] {
    width: 16rem;
    padding: 0.25rem;
}

.emoji-picker__grid[b-684seni9o5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.125rem;
    max-height: 13rem;
    overflow-y: auto;
}

.emoji-picker__item[b-684seni9o5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.emoji-picker__item:hover[b-684seni9o5] {
    background: var(--bg-hover);
}

.emoji-picker__item img[b-684seni9o5] {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* Stack on narrow screens so nothing is squeezed to an unusable width. */
@media (max-width: 700px) {
    .field-row[b-684seni9o5] {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line-1);
    }

    .field-row__label[b-684seni9o5],
    .field-row__type[b-684seni9o5] {
        flex: 1 1 100%;
    }
}
/* _content/Dashboard/Components/Pages/HeroicTicketDetail.razor.rz.scp.css */
/* HeroicTickets detail — moderator sidebar. The conversation itself is styled by
   TicketConversation.razor.css, which the shared component brings with it.
   All colours come from the design system's semantic tokens (STYLE.md §2). */

.ticket-facts[b-m7douhupa8] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 1rem;
    align-items: baseline;
}

.ticket-facts dt[b-m7douhupa8] {
    color: var(--fg-2);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-facts dd[b-m7douhupa8] {
    margin: 0;
    word-break: break-word;
}

/* Paragraph answers keep their line breaks. */
.ticket-form-value[b-m7douhupa8] {
    white-space: pre-wrap;
}
/* _content/Dashboard/Components/Pages/HeroicTickets.razor.rz.scp.css */
/* The search takes the room the status filter leaves it. */
[b-xjj2lly6w5] .ticket-search { flex: 1 1 280px; max-width: 420px; }
/* _content/Dashboard/Components/Pages/League.razor.rz.scp.css */
/* Public league landing — genuinely new styling only; the header/empty-state panels reuse the
   shared hs-panel (STYLE.md §4.1). */

/* Responsive division-card grid. Columns are wide enough to fit a standings table without a
   horizontal scrollbar; auto-fill lets every division sit side by side on wide screens (the page
   uses the full content width — see MainLayout's IsFullWidthPage) and wrap on narrow ones. */
.league-division-grid[b-jrhtselps5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

/* The division title is the link into the detailed view; the card itself is not clickable. */
.league-division-card[b-jrhtselps5] {
    min-width: 0;
}
/* _content/Dashboard/Components/Pages/Logs.razor.rz.scp.css */
/* The log table reads like a terminal on purpose: fixed pitch, tight rows, and a level colour that
   can be picked out down a long column without reading a word of it. */

.log-table-wrap[b-3l5vx6dap5] {
    max-height: 70vh;
    overflow: auto;
}

/* Below 960 px the other columns do not shrink, so left alone the message gets what is left of the
   table (83 px) and breaks letter by letter. Give it room; the table scrolls sideways for the rest. */
@media (max-width: 959.98px) {
    .log-table td.log-message[b-3l5vx6dap5],
    .log-table th:last-child[b-3l5vx6dap5] {
        min-width: 32ch;
    }
}

/* On a phone a row is a block instead of a table row: time and level on top, the message below it
   over the full width, so it can be read without swiping. The page scrolls (the wrap's own scroll
   box would compete with it); only the select-all box is left of the column headings. */
@media (max-width: 599.98px) {
    .log-table-wrap[b-3l5vx6dap5] {
        max-height: none;
    }

    .log-table[b-3l5vx6dap5],
    .log-table tbody[b-3l5vx6dap5] {
        display: block;
    }

    .log-table thead th:not(:first-child)[b-3l5vx6dap5] {
        display: none;
    }

    .log-table tr[b-3l5vx6dap5] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--line-1);
    }

    .log-table th[b-3l5vx6dap5],
    .log-table td[b-3l5vx6dap5] {
        display: block;
        padding: 0;
        border: 0;
        width: auto;
        height: auto;
    }

    .log-table .log-time-cell[b-3l5vx6dap5] { order: 1; }
    .log-table .log-level-cell[b-3l5vx6dap5] { order: 2; }
    .log-table .log-app-cell[b-3l5vx6dap5] { order: 3; }
    .log-table .log-source-cell[b-3l5vx6dap5] { order: 4; }

    .log-table td.log-message[b-3l5vx6dap5],
    .log-table th:last-child[b-3l5vx6dap5] {
        order: 5;
        flex: 1 1 100%;
        min-width: 0;
    }

    .log-table .log-detail-row > td[b-3l5vx6dap5] {
        flex: 1 1 100%;
        min-width: 0;
        padding: var(--space-3);
    }
}

.log-table[b-3l5vx6dap5] {
    width: 100%;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace);
    font-size: 0.8125rem;
}

/* The header has to stay put while a few hundred lines scroll under it. */
.log-table thead th[b-3l5vx6dap5] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-panel);
}

.log-table td[b-3l5vx6dap5] {
    vertical-align: top;
    padding-top: 4px;
    padding-bottom: 4px;
}

.log-time[b-3l5vx6dap5],
.log-source[b-3l5vx6dap5] {
    color: var(--fg-2);
    white-space: nowrap;
}

.log-app[b-3l5vx6dap5] {
    white-space: nowrap;
}

.log-level[b-3l5vx6dap5] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label, 0.04em);
}

.log-level-info[b-3l5vx6dap5] { color: var(--fg-2); }
.log-level-warning[b-3l5vx6dap5] { color: var(--status-warning); }
.log-level-error[b-3l5vx6dap5] { color: var(--status-loss); }

/* Long messages wrap rather than stretching the table sideways — the message column is the one that
   is allowed to be tall. */
.log-message[b-3l5vx6dap5] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-row-selected[b-3l5vx6dap5] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.log-detail-row > td[b-3l5vx6dap5] {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    padding: 12px 16px;
}

.log-detail-label[b-3l5vx6dap5] {
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.04em);
    color: var(--fg-2);
    margin-top: 8px;
}

.log-detail-label:first-child[b-3l5vx6dap5] {
    margin-top: 0;
}

/* The cell is a table cell and would inherit nowrap from .hs-table td, which keeps a long source or template from wrapping. */
.log-detail-value[b-3l5vx6dap5] {
    white-space: normal;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
}

.log-property[b-3l5vx6dap5] {
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: 0.75rem;
}

/* A stack trace is the one thing here that may scroll on its own rather than making the page do it. */
.log-exception[b-3l5vx6dap5] {
    margin: 4px 0 0;
    padding: 8px 12px;
    max-height: 320px;
    overflow: auto;
    border-radius: 6px;
    background: var(--bg-raised);
    font-size: 0.75rem;
    white-space: pre;
    max-width: 100%;
}

.logs-col-time[b-3l5vx6dap5] { width: 150px; }
.logs-col-app[b-3l5vx6dap5] { width: 90px; }
.logs-col-level[b-3l5vx6dap5] { width: 100px; }
.logs-col-source[b-3l5vx6dap5] { width: 200px; }
/* _content/Dashboard/Components/Pages/MatchDetail.razor.rz.scp.css */
/* Game tiles: number, map, who won in how long, the winner's side. */
.md-games[b-b64wij3o8b] { display: flex; flex-wrap: wrap; gap: 8px; }

.md-game[b-b64wij3o8b] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    color: var(--fg-1);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
}
.md-game:hover[b-b64wij3o8b] { background: var(--bg-hover); }
.md-game[aria-selected="true"][b-b64wij3o8b] { border-color: var(--accent); }
.md-game:focus-visible[b-b64wij3o8b] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.md-game__text[b-b64wij3o8b] { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.md-game__map[b-b64wij3o8b] { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.md-game__sub[b-b64wij3o8b] { font-size: var(--text-caption); color: var(--fg-3); }

.md-won[b-b64wij3o8b] { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); color: var(--fg-2); }

.md-game-panel[b-b64wij3o8b] { overflow: hidden; }
.md-game-panel__draft[b-b64wij3o8b] { padding: 12px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--line-1); }
/* _content/Dashboard/Components/Pages/Matches.razor.rz.scp.css */
/* The season and view controls are the page's main switches, a size up from the segmented filters
   inside panels. */
.matches-seg[b-rg76b9yph7] {
    height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-body-sm);
}

/* Day or round strip: one tile per day (weekday over date) or round (number over its state). */
.matches-strip[b-rg76b9yph7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.matches-strip__tile[b-rg76b9yph7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-1);
    font-family: var(--font-sans);
    cursor: pointer;
}

.matches-strip__tile:hover[b-rg76b9yph7] { background: var(--bg-hover); }

.matches-strip__tile[aria-pressed="true"][b-rg76b9yph7] {
    border-color: transparent;
    background: var(--accent);
    color: var(--fg-on-accent);
}

.matches-strip__tile:focus-visible[b-rg76b9yph7] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.matches-strip__top[b-rg76b9yph7] { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); line-height: 1.2; }

.matches-strip__bottom[b-rg76b9yph7] { font-family: var(--font-mono); font-size: var(--text-caption); opacity: 0.8; }

[b-rg76b9yph7] .matches-search { flex: 1; min-width: 240px; max-width: 420px; margin: 0; }

/* The cards, two to a row where there is room for two line-ups side by side. */
.matches-grid[b-rg76b9yph7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: var(--space-3);
}

.matches-count[b-rg76b9yph7] { font-size: var(--text-caption); color: var(--fg-3); }

.matches-jump[b-rg76b9yph7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: transparent;
    font: var(--weight-medium) var(--text-caption)/1 var(--font-sans);
    color: var(--fg-2);
    cursor: pointer;
}
.matches-jump:hover[b-rg76b9yph7] { background: var(--bg-hover); color: var(--fg-1); }

/* A division's heading, which also folds it away. */
.matches-group[b-rg76b9yph7] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin: 8px 0 12px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line-1);
    background: transparent;
    color: var(--fg-1);
    text-align: left;
    cursor: pointer;
}
/* _content/Dashboard/Components/Pages/PlayerDetail.razor.rz.scp.css */
/* Public player profile — colours stay on the semantic tokens (STYLE.md), except the single
   team-derived accent below, which is documented as a §1.3 exception. */

/* Team accent: --profile-accent is injected inline as a dynamic, logo-derived value
   (STYLE.md §1.3 exception); without it the palette primary keeps full theming. */
.profile-header[b-tvuvr5fhcu] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--profile-accent, var(--accent)) 18%, var(--bg-panel)),
        var(--bg-panel) 65%);
    border: 1px solid var(--line-1);
    border-top: 3px solid var(--profile-accent, var(--accent));
}

.profile-avatar[b-tvuvr5fhcu] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md, 8px);
}

.profile-role-icon[b-tvuvr5fhcu] {
    width: 20px;
    height: 20px;
}

.profile-hero-bar[b-tvuvr5fhcu] {
    width: 5.625rem; /* 90px on the 16px root */
}

/* Match-history result accents; text colours stay on surface for contrast (STYLE.md). */
.profile-result-w[b-tvuvr5fhcu] { color: var(--status-win); font-weight: var(--weight-bold); }
.profile-result-l[b-tvuvr5fhcu] { color: var(--status-loss);   font-weight: var(--weight-bold); }
.profile-row-w[b-tvuvr5fhcu]    { box-shadow: inset 3px 0 0 var(--status-win); }
.profile-row-l[b-tvuvr5fhcu]    { box-shadow: inset 3px 0 0 var(--status-loss); }

/* Career section — three responsive columns that collapse to one on narrow viewports. */
.career-grid[b-tvuvr5fhcu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.career-season[b-tvuvr5fhcu] { font-weight: var(--weight-semibold, 600); }
.career-sep[b-tvuvr5fhcu]    { color: var(--fg-2); }

/* ── The rosters in the header ──────────────────────────────────────────────────
   A player can be on several teams at once — seasons overlap — so this is a list, and it has to stay
   readable at one and at four. Each team keeps its season beside it: without one, two team names in a
   row look like a transfer rather than like two things that are both true. */
.profile-rosters[b-tvuvr5fhcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.profile-roster[b-tvuvr5fhcu] {
    display: inline-flex;
    /* Centred, not baseline: the team link carries a logo, and aligning an image's baseline with text
       drops the season label below the line it belongs on. */
    align-items: center;
    gap: 6px;
}

.profile-roster__season[b-tvuvr5fhcu] {
    font-size: 0.75rem;
    color: var(--fg-2);
    white-space: nowrap;
}
/* _content/Dashboard/Components/Pages/PlayoffDetail.razor.rz.scp.css */
.bracket-outer[b-1eut68aoe4] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-canvas);
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar {
    height: 8px;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar-track {
    background: transparent;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

.bracket-scale-wrapper[b-1eut68aoe4] {
    transform-origin: top left;
    will-change: transform;
}

.bracket-container[b-1eut68aoe4] {
    position: relative;
    user-select: none;
    background: transparent;
}

/* ─── SVG Lines ───
   The lines and the nodes are two layers over the same canvas. */
.bracket-links[b-1eut68aoe4] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: visible;
}

.bracket-nodes[b-1eut68aoe4] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.bracket-line[b-1eut68aoe4] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: drawLine-b-1eut68aoe4 1.2s ease-out forwards;
    opacity: 0.5;
}

.bracket-line.bracket-winners[b-1eut68aoe4] {
    stroke: var(--accent);
}

.bracket-line.bracket-losers[b-1eut68aoe4] {
    stroke: var(--status-warning);
}

.bracket-line.bracket-finals[b-1eut68aoe4] {
    stroke: var(--gold);
    opacity: 0.7;
}

@keyframes drawLine-b-1eut68aoe4 {
    to {
        stroke-dashoffset: 0;
    }
}

/* ─── Bracket Headers ─── */
.bracket-header[b-1eut68aoe4] {
    position: absolute;
    font-size: var(--text-body-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeIn-b-1eut68aoe4 0.6s ease forwards;
    white-space: nowrap;
    pointer-events: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.bracket-header.bracket-winners[b-1eut68aoe4] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.bracket-header.bracket-losers[b-1eut68aoe4] {
    color: var(--status-warning);
    border-bottom-color: var(--status-warning);
}

.bracket-header.bracket-finals[b-1eut68aoe4] {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

@keyframes fadeIn-b-1eut68aoe4 {
    to {
        opacity: 0.85;
    }
}

/* ─── Nodes ─── */
.bracket-node[b-1eut68aoe4] {
    z-index: 2;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: nodeEnter-b-1eut68aoe4 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes nodeEnter-b-1eut68aoe4 {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── Match Card ─── */
.match-card[b-1eut68aoe4] {
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--bg-panel);
    color: var(--fg-1);
    font-size: var(--text-body-sm);
    padding: 5px 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shade) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.match-card:hover[b-1eut68aoe4] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--shade) 15%, transparent), 0 4px 8px color-mix(in srgb, var(--shade) 10%, transparent);
}

/* subtle shine sweep on hover */
.match-card[b-1eut68aoe4]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg-on-media) 8%, transparent), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.match-card:hover[b-1eut68aoe4]::after {
    left: 150%;
}

.match-card.played[b-1eut68aoe4] {
    border-color: var(--line-1);
}

.match-card.upcoming[b-1eut68aoe4] {
    border-style: dashed;
    border-color: var(--fg-2);
    opacity: 0.85;
}

/* ─── Teams ─── */
.team-row[b-1eut68aoe4] {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.team-name[b-1eut68aoe4] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.team-name.winner[b-1eut68aoe4] {
    font-weight: 800;
    color: var(--status-win);
}

.team-name.loser[b-1eut68aoe4] {
    color: var(--fg-2);
}

.score[b-1eut68aoe4] {
    font-weight: 800;
    min-width: 20px;
    text-align: right;
    font-size: var(--text-body-sm);
    color: var(--fg-1);
}

.match-time[b-1eut68aoe4] {
    font-size: var(--text-micro);
    color: var(--fg-2);
    text-align: center;
    margin-top: 2px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ─── Bracket-specific accent borders ─── */
.bracket-winners .match-card[b-1eut68aoe4] {
    border-left: 3px solid var(--accent);
}

.bracket-losers .match-card[b-1eut68aoe4] {
    border-left: 3px solid var(--status-warning);
}

.bracket-finals .match-card[b-1eut68aoe4] {
    border-color: var(--gold);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent), 0 4px 10px color-mix(in srgb, var(--shade) 10%, transparent);
    animation: goldPulse-b-1eut68aoe4 3s ease-in-out infinite;
}

@keyframes goldPulse-b-1eut68aoe4 {
    0%, 100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent), 0 4px 10px color-mix(in srgb, var(--shade) 10%, transparent);
    }
    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 45%, transparent), 0 4px 10px color-mix(in srgb, var(--shade) 10%, transparent);
    }
}

/* The referee a moderator assigned to the match, under the time; the node is small, so one line. */
.match-referee[b-1eut68aoe4] {
    font-size: var(--text-micro);
    color: var(--fg-2);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/Dashboard/Components/Pages/ReplayAnalyzer.razor.rz.scp.css */
.ra-tip[b-x0gv711wth] { max-width: 300px; padding: 4px; }
.ra-tip__icon[b-x0gv711wth] { width: 28px; height: 28px; border-radius: var(--radius-sm); }

/* XP chart: the plot on a darker ground, the scale's ends in its corners, a swatch per team. */
.ra-chart[b-x0gv711wth] { position: relative; height: 300px; padding: 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--shade) 20%, transparent); }
.ra-chart__svg[b-x0gv711wth] { height: 100%; overflow: visible; }
.ra-chart__max[b-x0gv711wth] { position: absolute; top: 12px; left: 4px; }
.ra-chart__min[b-x0gv711wth] { position: absolute; bottom: 12px; left: 4px; }
.ra-swatch[b-x0gv711wth] { width: 16px; height: 3px; border-radius: 2px; }
.ra-swatch--home[b-x0gv711wth] { background: var(--accent); }
.ra-swatch--away[b-x0gv711wth] { background: var(--status-loss); }

/* A player's popover. */
.ra-pop[b-x0gv711wth] { padding: 8px; min-width: 180px; }
.ra-pop__name[b-x0gv711wth] { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--fg-1); }
.ra-pop__sub[b-x0gv711wth] { font-size: var(--text-caption); color: var(--fg-2); }
.ra-pop__label[b-x0gv711wth] { font-size: var(--text-micro); color: var(--fg-3); }
.ra-pop__team[b-x0gv711wth] { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--accent); }
/* _content/Dashboard/Components/Pages/SeasonSetup.razor.rz.scp.css */
/* The per-round overrides keep their pickers readable on a narrow table. */
.season-setup-col-format[b-lfr6st2oy7] { min-width: 140px; }
.season-setup-col-bans[b-lfr6st2oy7] { min-width: 120px; }
/* _content/Dashboard/Components/Pages/SeasonStatsTabs/HeroDetailView.razor.rz.scp.css */
.hdv-portrait[b-3niahf1uw8] { width: 56px; height: 56px; border-radius: var(--radius-md); }
/* _content/Dashboard/Components/Pages/SeasonStatsTabs/PlayerDetailView.razor.rz.scp.css */
/* The row a match opens under it. */
.pdv-expand[b-ryywmuzgrj] { padding: 8px 8px 12px 32px; background: var(--bg-raised); }
/* _content/Dashboard/Components/Pages/Settings.razor.rz.scp.css */
/* Automatic posts: one row per post — what, when, where, whether — and a row under it for a post's
   own further settings when opened. */
.auto-posts td[b-flsg23e6a8] { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.auto-posts__title[b-flsg23e6a8] { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); color: var(--fg-1); }
.auto-posts__purpose[b-flsg23e6a8] { margin-top: 2px; font-size: var(--text-caption); color: var(--fg-3); white-space: normal; }
.auto-posts__cadence[b-flsg23e6a8] { font-size: var(--text-body-sm); color: var(--fg-2); white-space: normal; }
.auto-posts[b-flsg23e6a8]  .auto-posts__time { width: 96px; margin: 0; }
.auto-posts__on[b-flsg23e6a8], .auto-posts__more[b-flsg23e6a8] { width: 1%; text-align: right; white-space: nowrap; }
.auto-posts__row--off td:not(.auto-posts__on):not(.auto-posts__more)[b-flsg23e6a8] { opacity: 0.55; }
.auto-posts__note td[b-flsg23e6a8] { padding-top: 0; border-top: 0; }
.auto-posts__extra td[b-flsg23e6a8] { padding: 4px 16px 16px; border-top: 0; background: var(--bg-raised); }
.auto-posts__foot[b-flsg23e6a8] { padding: 10px 0 0; font-size: var(--text-caption); color: var(--fg-3); }

/* On a phone the table scrolls sideways; the post, its command and its hint must not be cut off at
   the edge of the first column, so they wrap there. */
@media (max-width: 599.98px) {
    .auto-posts td:first-child[b-flsg23e6a8] { min-width: 200px; white-space: normal; }
    .auto-posts .hs-setting__cmd[b-flsg23e6a8] { overflow-wrap: anywhere; }
}

/* The table is wider than its box up to the desktop width, so the hint holds to the same bounds on
   a tablet. */
@media (max-width: 959.98px) {
    /* The hint spans every column, so it is as wide as the whole table. Hold it to the part of the
       table that is in view (the wrap's width) and keep it there while the table scrolls. */
    .auto-posts-wrap[b-flsg23e6a8] { container-type: inline-size; }
    .auto-posts__note td[b-flsg23e6a8] >  * {
        position: sticky;
        left: var(--cell-x);
        width: calc(100cqw - 2 * var(--cell-x));
        white-space: normal;
    }
}

/* The flag table needs the whole width, so it sits under label and help instead of in the narrow control column. */
[b-flsg23e6a8] .hs-setting:has(.casts-flags) { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
[b-flsg23e6a8] .hs-setting:has(.casts-flags) .hs-setting__control { justify-content: flex-start; }
.casts-flags[b-flsg23e6a8] { width: 100%; }
.casts-flags td:first-child[b-flsg23e6a8] { min-width: 12rem; }
/* _content/Dashboard/Components/Pages/TeamDetail.razor.rz.scp.css */
/* Public team profile — colours stay on the semantic tokens (STYLE.md), except the single
   team-derived accent below, documented as a §1.3 exception. */

/* Team accent: --profile-accent is injected inline as a dynamic, logo-derived value; without it the
   palette primary keeps full theming. Header owns its surface, so it does NOT carry .hs-panel. */
.profile-header[b-8xggjykkib] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--profile-accent, var(--accent)) 18%, var(--bg-panel)),
        var(--bg-panel) 65%);
    border: 1px solid var(--line-1);
    border-top: 3px solid var(--profile-accent, var(--accent));
}

.team-logo-lg[b-8xggjykkib] {
    border-radius: var(--radius-md, 8px);
}

.profile-hero-bar[b-8xggjykkib] {
    width: 5.625rem; /* 90px on the 16px root */
}

/* Match-history result accents; text colours stay on surface for contrast (STYLE.md). */
.profile-result-w[b-8xggjykkib] { color: var(--status-win); font-weight: var(--weight-bold, 700); }
.profile-result-l[b-8xggjykkib] { color: var(--status-loss);   font-weight: var(--weight-bold, 700); }
.profile-row-w[b-8xggjykkib]    { box-shadow: inset 3px 0 0 var(--status-win); }
.profile-row-l[b-8xggjykkib]    { box-shadow: inset 3px 0 0 var(--status-loss); }

/* History section — three responsive columns that collapse to one on narrow viewports. */
.career-grid[b-8xggjykkib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.career-season[b-8xggjykkib] { font-weight: var(--weight-semibold, 600); }
.career-sep[b-8xggjykkib]    { color: var(--fg-2); }

/* Narrow secondary tables (Top Heroes + Map Performance) sit side by side on wide screens and stack on
   narrow ones, instead of two half-empty full-width cards (whitespace audit). */
.detail-two-col[b-8xggjykkib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}
/* _content/Dashboard/Components/Pages/UserStatistics.razor.rz.scp.css */
/* Charts drawn in the app's own tokens rather than a charting library's, same as GameXpChart: what
   these need is a bar and a tooltip, and a component suite would bring a second theming system to
   fight over both. */

.usage-chart[b-rg3y5i8tqp] {
    width: 100%;
    overflow: hidden;
}

.usage-chart--trend[b-rg3y5i8tqp] {
    height: 140px;
}

.usage-chart svg[b-rg3y5i8tqp] {
    width: 100%;
    height: 100%;
    display: block;
}

/* preserveAspectRatio="none" stretches the bars horizontally, which is what makes a fixed 0-100
   viewBox work at any width. It would stretch a stroke too, so the bars are fills only. */
.usage-bar[b-rg3y5i8tqp] {
    fill: var(--accent);
    opacity: .85;
}

.usage-bar:hover[b-rg3y5i8tqp] {
    opacity: 1;
}

/* The two cyclical charts. Flex rather than SVG: the buckets are few and each carries a label, and
   laying text out in SVG to save one element is a trade in the wrong direction. */
.usage-buckets[b-rg3y5i8tqp] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 130px;
    margin-top: .5rem;
}

.usage-bucket[b-rg3y5i8tqp] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.usage-bucket__bar[b-rg3y5i8tqp] {
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    /* An empty hour still gets a hairline, so a gap reads as measured rather than as missing. */
    min-height: 2px;
    opacity: .85;
    transition: opacity .12s ease;
}

.usage-bucket:hover .usage-bucket__bar[b-rg3y5i8tqp] {
    opacity: 1;
}

.usage-bucket__label[b-rg3y5i8tqp] {
    margin-top: .25rem;
    font-size: var(--text-micro);
    line-height: 1;
    text-align: center;
    color: var(--fg-2);
    white-space: nowrap;
}

/* The proportion bar in a table cell. Narrow on purpose — it is there to be scanned down a column,
   not read as a value; the number it comes from is in the cell beside it. */
.usage-split[b-rg3y5i8tqp] {
    width: 84px;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-hover);
    overflow: hidden;
}

.usage-split__fill[b-rg3y5i8tqp] {
    height: 100%;
    background: var(--accent);
}

.usage-route[b-rg3y5i8tqp] {
    font-family: var(--mud-typography-body1-family, monospace);
    font-size: .8rem;
    color: var(--fg-2);
    word-break: break-all;
}
/* _content/Dashboard/Components/Pages/Watchlist.razor.rz.scp.css */
.watch-card__head[b-6ddn9wtzyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.watch-card__title[b-6ddn9wtzyc] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.watch-card__actions[b-6ddn9wtzyc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.watch-card__toggle[b-6ddn9wtzyc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--line-1);
    border-radius: 6px;
    color: var(--fg-2);
    font: var(--weight-medium) var(--text-body-sm)/1.45 var(--font-sans);
    cursor: pointer;
}

.watch-card__toggle:hover[b-6ddn9wtzyc] {
    background: var(--bg-hover);
    color: var(--fg-1);
}

.watch-card__toggle:focus-visible[b-6ddn9wtzyc] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.watch-card__list[b-6ddn9wtzyc] {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.hs-filter-gap[b-6ddn9wtzyc] {
    width: var(--space-3);
}

/* The archive's "ended" column is hidden on a phone; the same words then stand under the name. The class sits on a plain div, so this scoped rule reaches it. */
.watch-ended-inline[b-6ddn9wtzyc] {
    display: none;
}

@media (max-width: 599.98px) {
    .watch-ended-inline[b-6ddn9wtzyc] {
        display: block;
    }
}
/* _content/Dashboard/Components/Shared/Broadcasts/BroadcastPreview.razor.rz.scp.css */
/* Discord's dark look, in both themes on purpose: it is what the team sees. Only DS primitives — the
   ink scale for the surfaces, the semantic hues for the buttons — so no colour here is a raw value.
   The text inside .dc-text is rendered markup, which scoped CSS only reaches through ::deep. */

.dc-preview[b-gpdow9tzn2] {
    background: var(--hl-ink-900);
    color: var(--hl-gray-100);
    border-radius: var(--radius-lg);
    padding: 12px 14px 16px;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.4;
    overflow: hidden;
}

.dc-channel[b-gpdow9tzn2] {
    color: var(--hl-gray-400);
    font-weight: 600;
    font-size: var(--text-body-sm);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hl-ink-700);
}

.dc-message[b-gpdow9tzn2] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
}

.dc-avatar[b-gpdow9tzn2] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hl-green-600);
    color: var(--hl-white);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
}

.dc-body[b-gpdow9tzn2] {
    min-width: 0;
}

.dc-head[b-gpdow9tzn2] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.dc-author[b-gpdow9tzn2] {
    color: var(--hl-white);
    font-weight: 600;
}

.dc-app[b-gpdow9tzn2] {
    background: var(--hl-violet-600);
    color: var(--hl-white);
    font-size: var(--text-micro);
    font-weight: 600;
    border-radius: 3px;
    padding: 0 4px;
}

.dc-stamp[b-gpdow9tzn2],
.dc-muted[b-gpdow9tzn2] {
    color: var(--hl-gray-400);
    font-size: 12px;
}

.dc-text[b-gpdow9tzn2] {
    overflow-wrap: anywhere;
}

.dc-text[b-gpdow9tzn2]  p {
    margin: 0;
}

.dc-text[b-gpdow9tzn2]  .dc-gap {
    min-height: 0.7em;
}

.dc-text[b-gpdow9tzn2]  h3,
.dc-text[b-gpdow9tzn2]  h4,
.dc-text[b-gpdow9tzn2]  h5 {
    color: var(--hl-white);
    font-family: var(--font-sans);
    font-weight: 700;
    margin: 6px 0 2px;
    text-transform: none;
    letter-spacing: 0;
}

.dc-text[b-gpdow9tzn2]  h3 { font-size: var(--text-title-2); }
.dc-text[b-gpdow9tzn2]  h4 { font-size: 19px; }
.dc-text[b-gpdow9tzn2]  h5 { font-size: 16px; }

.dc-text[b-gpdow9tzn2]  small {
    display: block;
    color: var(--hl-gray-400);
    font-size: 12px;
}

.dc-text[b-gpdow9tzn2]  ul,
.dc-text[b-gpdow9tzn2]  ol {
    margin: 2px 0;
    padding-left: 22px;
}

.dc-text[b-gpdow9tzn2]  blockquote {
    margin: 2px 0;
    padding-left: 10px;
    border-left: 4px solid var(--hl-ink-600);
}

.dc-text[b-gpdow9tzn2]  code {
    background: var(--hl-ink-800);
    border-radius: 3px;
    padding: 0 3px;
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
}

.dc-text[b-gpdow9tzn2]  a {
    color: var(--hl-blue-400);
    text-decoration: none;
}

.dc-text[b-gpdow9tzn2]  .dc-mention,
.dc-mention[b-gpdow9tzn2] {
    background: color-mix(in srgb, var(--hl-violet-500) 30%, transparent);
    color: var(--hl-blue-100);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 500;
}

.dc-text[b-gpdow9tzn2]  .dc-time {
    background: var(--hl-ink-800);
    border-radius: 3px;
    padding: 0 3px;
}

.dc-embed[b-gpdow9tzn2] {
    margin-top: 4px;
    background: var(--hl-ink-850);
    border-left: 4px solid var(--hl-violet-500);
    border-radius: 4px;
    padding: 10px 14px 12px;
    display: grid;
    gap: 6px;
}

/* The card's accent is one of the bot's embed kinds (EmbedKind: Info, Success, Danger, Neutral). */
.dc-embed[b-gpdow9tzn2] { border-left-color: var(--hl-blue-500); }
.dc-embed.dc-green[b-gpdow9tzn2] { border-left-color: var(--hl-green-500); }
.dc-embed.dc-red[b-gpdow9tzn2] { border-left-color: var(--hl-red-500); }
.dc-embed.dc-grey[b-gpdow9tzn2] { border-left-color: var(--hl-gray-500); }

.dc-embed-title[b-gpdow9tzn2] {
    color: var(--hl-white);
    font-weight: 600;
}

.dc-embed-footer[b-gpdow9tzn2] {
    color: var(--hl-gray-400);
    font-size: 12px;
}

.dc-buttons[b-gpdow9tzn2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dc-button[b-gpdow9tzn2] {
    color: var(--hl-white);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    background: var(--hl-violet-600);
}

.dc-button.dc-green[b-gpdow9tzn2] { background: var(--hl-green-600); }
.dc-button.dc-red[b-gpdow9tzn2] { background: var(--hl-red-600); }
.dc-button.dc-grey[b-gpdow9tzn2] { background: var(--hl-gray-600); }

.dc-thread[b-gpdow9tzn2] {
    margin-top: 8px;
    background: var(--hl-ink-850);
    border-radius: 6px;
    padding: 8px 12px;
    display: grid;
    gap: 2px;
    font-size: 14px;
}

.dc-thread-name[b-gpdow9tzn2] {
    color: var(--hl-white);
    font-weight: 600;
}
/* _content/Dashboard/Components/Shared/Broadcasts/BroadcastResults.razor.rz.scp.css */
/* A broadcast's results. The answer colours are Discord's button colours, drawn from the same DS
   primitives the preview uses, so a dot here matches the button the team pressed. */

.broadcast-stats[b-q1sojxh8pb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.broadcast-state[b-q1sojxh8pb] {
    font-family: var(--font-display);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 10px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.broadcast-state--open[b-q1sojxh8pb] { color: var(--status-win); }
.broadcast-state--pending[b-q1sojxh8pb] { color: var(--status-pending); }
.broadcast-state--closed[b-q1sojxh8pb] { color: var(--fg-2); }

.broadcast-answer[b-q1sojxh8pb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.broadcast-dot[b-q1sojxh8pb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: var(--hl-violet-600);
}

.broadcast-dot.dc-green[b-q1sojxh8pb] { background: var(--hl-green-600); }
.broadcast-dot.dc-red[b-q1sojxh8pb] { background: var(--hl-red-600); }
.broadcast-dot.dc-grey[b-q1sojxh8pb] { background: var(--hl-gray-500); }

.broadcast-dot--none[b-q1sojxh8pb] {
    background: transparent;
    border: 2px solid var(--fg-2);
}

.broadcast-bar[b-q1sojxh8pb] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-raised);
}

.broadcast-bar__part[b-q1sojxh8pb] {
    display: block;
    flex-basis: 0;
    background: var(--hl-violet-600);
}

.broadcast-bar__part.dc-green[b-q1sojxh8pb] { background: var(--hl-green-600); }
.broadcast-bar__part.dc-red[b-q1sojxh8pb] { background: var(--hl-red-600); }
.broadcast-bar__part.dc-grey[b-q1sojxh8pb] { background: var(--hl-gray-500); }

.broadcast-table-scroll[b-q1sojxh8pb] {
    overflow-x: auto;
}

/* On a phone the table scrolls sideways rather than squeezing a reply into one word per line. */
.broadcast-table-scroll > table[b-q1sojxh8pb] {
    min-width: 640px;
}

.broadcast-num[b-q1sojxh8pb] {
    text-align: right;
}

.broadcast-small[b-q1sojxh8pb] {
    font-size: var(--text-body-sm);
}

.broadcast-error[b-q1sojxh8pb] {
    color: var(--status-loss);
}

.broadcast-quote[b-q1sojxh8pb] {
    color: var(--fg-2);
    font-size: var(--text-body-sm);
    max-width: 42ch;
}

.broadcast-thread[b-q1sojxh8pb] {
    background: var(--bg-raised);
}

.broadcast-reply[b-q1sojxh8pb] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line-1);
}

.broadcast-reply:last-child[b-q1sojxh8pb] {
    border-bottom: 0;
}

.broadcast-reply__text[b-q1sojxh8pb] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.broadcast-staff[b-q1sojxh8pb] {
    font-size: var(--text-micro);
    border: 1px solid var(--line-1);
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 4px;
    color: var(--fg-2);
}
/* _content/Dashboard/Components/Shared/Broadcasts/ColourPicker.razor.rz.scp.css */
.colour-picker[b-2dgngj9ko2] {
    display: inline-flex;
    gap: 4px;
    flex: none;
}

.colour-picker__swatch[b-2dgngj9ko2] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm, 4px);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: var(--hl-violet-600);
}

.colour-picker__swatch.dc-green[b-2dgngj9ko2] { background: var(--hl-green-600); }
.colour-picker__swatch.dc-red[b-2dgngj9ko2] { background: var(--hl-red-600); }
.colour-picker__swatch.dc-grey[b-2dgngj9ko2] { background: var(--hl-gray-500); }

.colour-picker__swatch[aria-pressed="true"][b-2dgngj9ko2] {
    border-color: var(--fg-1);
    box-shadow: 0 0 0 2px var(--bg-panel) inset;
}

.colour-picker__swatch:focus-visible[b-2dgngj9ko2] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* _content/Dashboard/Components/Shared/GameStatsTabs.razor.rz.scp.css */
.gst-empty[b-tkro8vpbcn] { margin: 0; padding: 16px; font-size: var(--text-body-sm); color: var(--fg-2); }

/* Tabs on the left, row density on the right, one rule under both. */
.gst-bar[b-tkro8vpbcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line-1);
}

.gst-tabs[b-tkro8vpbcn] { display: flex; gap: 4px; }

.gst-tab[b-tkro8vpbcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--fg-2);
    font: var(--weight-semibold) var(--text-body-sm)/1 var(--font-sans);
    cursor: pointer;
}
.gst-tab:hover[b-tkro8vpbcn] { color: var(--fg-1); }
.gst-tab[aria-selected="true"][b-tkro8vpbcn] { color: var(--fg-1); border-bottom-color: var(--accent); }
.gst-tab:focus-visible[b-tkro8vpbcn] { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.gst-none[b-tkro8vpbcn] { color: var(--fg-3); font-size: var(--text-body-sm); }
.gst-none[b-tkro8vpbcn]  .mud-icon-root { vertical-align: middle; margin-right: 6px; }

.gst-talent-cell[b-tkro8vpbcn] { padding-top: 4px; padding-bottom: 4px; }
.gst-talent[b-tkro8vpbcn] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gst-talent__icon[b-tkro8vpbcn] { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line-2); }
.gst-talent__icon--text[b-tkro8vpbcn] {
    display: grid;
    place-items: center;
    box-shadow: none;
    border: 1px dashed var(--line-2);
    background: var(--bg-raised);
    font: var(--weight-bold) 10px/1 var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-2);
}
.gst-talent__name[b-tkro8vpbcn] {
    white-space: normal;
    max-width: 96px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--text-caption);
    line-height: 1.25;
    color: var(--fg-2);
}

.gst-tip[b-tkro8vpbcn] { max-width: 300px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
/* _content/Dashboard/Components/Shared/LeagueStandingsTable.razor.rz.scp.css */
/* Compact standings table inside a division card: numeric columns stay tight, the team name wraps.

   These rules used to live in League.razor.css, where they never applied to anything. CSS isolation
   stamps the scope attribute onto the elements written in that file, and the table below is written
   here — so `.league-standings-table td` was rewritten to a selector no element ever matched, and the
   table quietly fell back to the .detail-stats-table defaults. */
.league-standings-table[b-ieg0ssddr9] {
    table-layout: auto;
}

/* The team cell has to be able to give.

   The old rule said `word-break: break-word`, which reads like it does that, and for a line already
   being laid out it does — but it leaves the cell's *min-content* width at the longest unbreakable
   token. A name such as "WhoNeedsAHeropool" therefore set a floor for the column that a 320px card
   could not meet, and the table drew its row rules straight through the card's border.
   `overflow-wrap: anywhere` is the one that lowers the floor as well as wrapping the line.

   The min-width goes with it: TeamLink puts the logo and the name in an inline flex row, and a flex
   item defaults to min-width:auto — the same min-content floor, reinstated one level further in.
   ::deep for the descendants, since TeamLink renders them and they carry its scope, not this one —
   the same trap the rules in League.razor.css fell into, one level further down. The logo is left
   out on purpose: it is the one thing in the row that should not give, and its reserved box is what
   keeps the table from reflowing as the images land. */
.league-standings-table td[b-ieg0ssddr9],
.league-standings-table td[b-ieg0ssddr9]  span,
.league-standings-table td[b-ieg0ssddr9]  a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.league-standings-table td[b-ieg0ssddr9] {
    padding: 6px 8px;
    white-space: normal;
}

/* Head and cell have to agree on the width, or auto table layout sizes the column to whichever of
   the two is wider and the tight `width: 1%` on the cell alone does nothing.

   ::deep on the head for the reason this file already documents one rule up: ThSortable renders the
   <th>, so it carries ThSortable's scope and a bare `.league-standings-table th` would match no
   element at all. */
.league-standings-table[b-ieg0ssddr9]  th.replay-stats-num {
    white-space: nowrap;
    width: 1%;
}

.league-standings-table td.replay-stats-num[b-ieg0ssddr9] {
    white-space: nowrap;
    width: 1%;
    font-variant-numeric: tabular-nums;
}
/* _content/Dashboard/Components/Shared/MatchCard/MatchCard.razor.rz.scp.css */
/* Match card (reference Matches): header line, one row per team, games, footer. */
.mc[b-9z5vdk1de0] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--line-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: border-color 0.15s ease;
}

.mc:hover[b-9z5vdk1de0] { border-color: var(--accent); }

/* The whole card opens the match; links and buttons inside it are lifted above that overlay. */
.mc__click[b-9z5vdk1de0] { position: absolute; inset: 0; z-index: 1; }
.mc__lift[b-9z5vdk1de0], [b-9z5vdk1de0] .mc__lift { position: relative; z-index: 2; }

.mc__header[b-9z5vdk1de0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line-1);
}

.mc__time[b-9z5vdk1de0] { font-size: var(--text-caption); color: var(--fg-2); }
.mc__meta[b-9z5vdk1de0] { font-size: var(--text-caption); color: var(--fg-3); }
.mc__id[b-9z5vdk1de0] { font-size: var(--text-caption); color: var(--fg-2); }
.mc__id:hover[b-9z5vdk1de0] { color: var(--accent-fg); }

.mc__error[b-9z5vdk1de0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 14px;
    font-size: var(--text-body-sm);
    color: var(--fg-2);
}

.mc__sides[b-9z5vdk1de0] { display: flex; flex-direction: column; padding: 6px 14px; }

.mc__side[b-9z5vdk1de0] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

/* Initials under the logo: the team's colour band on top, the logo covering the letters when it loads. */
.mc__crest[b-9z5vdk1de0] {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    border-top: 3px solid;
    font: var(--weight-bold) var(--text-body-sm)/1 var(--font-display);
}
.mc__crest--home[b-9z5vdk1de0] { background: var(--team-home-soft); border-top-color: var(--team-home); color: var(--team-home-fg); }
.mc__crest--away[b-9z5vdk1de0] { background: var(--team-away-soft); border-top-color: var(--team-away); color: var(--team-away-fg); }
.mc__crest img[b-9z5vdk1de0] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg-raised); }

.mc__team[b-9z5vdk1de0] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.mc__name[b-9z5vdk1de0] {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc__name--won[b-9z5vdk1de0] { font-weight: var(--weight-bold); }
.mc__name[b-9z5vdk1de0]  a { color: inherit; }

.mc__players[b-9z5vdk1de0] { display: flex; flex-wrap: wrap; gap: 4px; }

.mc__score[b-9z5vdk1de0] { font-size: 24px; font-weight: var(--weight-semibold); color: var(--fg-3); }
.mc__score--won[b-9z5vdk1de0] { color: var(--fg-1); }

.mc__games[b-9z5vdk1de0] { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }

.mc__game[b-9z5vdk1de0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding-right: 8px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
    font-size: var(--text-caption);
    color: var(--fg-2);
    text-decoration: none;
}
.mc__game:hover[b-9z5vdk1de0] { color: var(--fg-1); text-decoration: none; }
.mc__game-side[b-9z5vdk1de0] { align-self: stretch; width: 3px; background: var(--line-2); }
.mc__game-side--home[b-9z5vdk1de0] { background: var(--team-home); }
.mc__game-side--away[b-9z5vdk1de0] { background: var(--team-away); }

.mc__bans[b-9z5vdk1de0] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 12px; }

.mc__footer[b-9z5vdk1de0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 6px 14px;
    border-top: 1px solid var(--line-1);
}

.mc__note[b-9z5vdk1de0] { font-size: var(--text-caption); color: var(--fg-3); }

.mc__link[b-9z5vdk1de0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--fg-2);
    text-decoration: none;
}
.mc__link:hover[b-9z5vdk1de0] { background: var(--bg-hover); color: var(--fg-1); text-decoration: none; }
.mc__link--accent[b-9z5vdk1de0] { color: var(--accent-fg); }
.mc__link--accent:hover[b-9z5vdk1de0] { background: var(--accent-soft); color: var(--accent-fg); }
.mc__link[b-9z5vdk1de0]  .mc__link-icon { font-size: 16px; }

/* Preview: the fixture a case or a match change is about — the same card, tighter. */
.mc--preview .mc__header[b-9z5vdk1de0] { padding: 8px 12px; }
.mc--preview .mc__sides[b-9z5vdk1de0] { padding: 4px 12px; }
.mc--preview .mc__side[b-9z5vdk1de0] { padding: 6px 0; }
.mc--preview .mc__footer[b-9z5vdk1de0] { padding: 4px 12px; }
/* _content/Dashboard/Components/Shared/MatchCard/MatchCardLegend.razor.rz.scp.css */
.match-legend[b-2va1e0c01p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 14px;
    font-size: var(--text-caption);
    color: var(--fg-2);
}

.match-legend__item[b-2va1e0c01p] { display: inline-flex; align-items: center; gap: 6px; }

.match-legend__side[b-2va1e0c01p] { width: 3px; height: 14px; }
.match-legend__side--home[b-2va1e0c01p] { background: var(--team-home); }
.match-legend__side--away[b-2va1e0c01p] { background: var(--team-away); }
/* _content/Dashboard/Components/Shared/MatchCard/MatchCardSkeleton.razor.rz.scp.css */
.match-skeleton[b-8vkxpi3fcl] { display: flex; flex-direction: column; overflow: hidden; }
.match-skeleton__header[b-8vkxpi3fcl] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-raised); border-bottom: 1px solid var(--line-1); }
.match-skeleton__side[b-8vkxpi3fcl] { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.match-skeleton__footer[b-8vkxpi3fcl] { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; border-top: 1px solid var(--line-1); }
/* _content/Dashboard/Components/Shared/NameHistoryBlock.razor.rz.scp.css */
.nh[b-fq8812vja4] {
    font-size: var(--text-body-sm);
    color: var(--fg-2);
}

.nh__summary[b-fq8812vja4] {
    cursor: pointer;
    /* A fixed height of a finger, so the line opens with a thumb at 390 px. */
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* The disclosure triangle goes with display:flex; the chevron says the line opens, and turns when it has. */
.nh__summary[b-fq8812vja4]::-webkit-details-marker {
    display: none;
}

.nh__summary[b-fq8812vja4]::marker {
    content: "";
}

[b-fq8812vja4] .nh__chevron {
    margin-left: var(--space-1);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.nh[open][b-fq8812vja4]  .nh__chevron {
    transform: rotate(180deg);
}

.nh__arrow[b-fq8812vja4] {
    margin: 0 var(--space-1);
}

.nh__summary strong[b-fq8812vja4] {
    color: var(--fg-1);
    font-weight: 600;
    margin-left: var(--space-1);
    overflow-wrap: anywhere;
}

.nh__group[b-fq8812vja4] {
    margin-top: var(--space-2);
}

.nh__title[b-fq8812vja4] {
    margin: 0 0 var(--space-1);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.nh__list[b-fq8812vja4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nh__row[b-fq8812vja4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-1) 0;
    border-top: 1px solid var(--line-1);
}

.nh__change[b-fq8812vja4] {
    color: var(--fg-1);
    overflow-wrap: anywhere;
}

.nh__date[b-fq8812vja4] {
    white-space: nowrap;
}
/* _content/Dashboard/Components/Shared/PlayerHeroCell.razor.rz.scp.css */
.php[b-l2oz9aoeci] { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.php__img[b-l2oz9aoeci] { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.php__text[b-l2oz9aoeci] { display: flex; flex-direction: column; line-height: 1.25; }
.php__name[b-l2oz9aoeci] { font-weight: var(--weight-semibold); color: var(--fg-1); }
.php__hero[b-l2oz9aoeci] { font-size: var(--text-caption); color: var(--fg-3); }
/* _content/Dashboard/Components/Shared/ProfileFilterBar.razor.rz.scp.css */
/* ProfileFilterBar.razor.css — context filter toolbar. Sticks just below the global MudAppBar
   (Dense ≈ 48px) so it stays reachable while scrolling; a low z-index keeps it under the app bar
   (Mud app bar is 1300) so it never reads as a second global nav. Surface + bottom border, no
   elevation, deliberately distinct from .app-appbar. */
.profile-filter-bar[b-3svhyqahre] {
    position: sticky;
    top: 48px; /* global Dense MudAppBar height — verify against the rendered app bar */
    z-index: 3;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line-1);
    margin-bottom: 1rem;
}

.profile-filter-bar__inner[b-3svhyqahre] {
    padding: 0.5rem 0.25rem;
    min-height: 44px;
}

/* NOTE: .profile-filter-bar__popover lives in the GLOBAL app.css, not here. MudPopover portals its
   panel to MudPopoverProvider at the app root — outside this component's DOM subtree — so a scoped
   selector (or ::deep) can never reach it. The panel carries the plain class via MudPopover Class=. */
/* _content/Dashboard/Components/Shared/RosterChangeCard.razor.rz.scp.css */
/* The card's lines are Discord markdown rendered to paragraphs; each line is one block, so the
   paragraphs carry no margin of their own. A blank line is a gap. */

.roster-line[b-mozglwbnjx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.roster-text[b-mozglwbnjx]  p {
    margin: 0;
    word-break: break-word;
}

.roster-text[b-mozglwbnjx]  p.dc-gap {
    height: var(--space-2);
}

/* The status parts wrap inside their own column, so a second part sits under the first and not
   under the label. */
.roster-status[b-mozglwbnjx] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.roster-status-label[b-mozglwbnjx] {
    flex-shrink: 0;
}

.roster-status-parts[b-mozglwbnjx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    min-width: 0;
}
/* _content/Dashboard/Components/Shared/SettingsPanelTitle.razor.rz.scp.css */
.spt[b-uy1aps6e4l] { display: flex; align-items: center; gap: 12px; }
.spt[b-uy1aps6e4l]  .spt__icon { color: var(--fg-2); }
.spt__text[b-uy1aps6e4l] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spt__title[b-uy1aps6e4l] { font: var(--weight-semibold) var(--text-title-2)/var(--leading-title-2) var(--font-display); color: var(--fg-1); }
.spt__sub[b-uy1aps6e4l] { font-size: var(--text-caption); color: var(--fg-3); }
/* _content/Dashboard/Components/Shared/TeamChannels/TeamChannelWorkspace.razor.rz.scp.css */
/* The message column follows the reader down a long team table. Only from the width where the two
   columns sit side by side — stacked, a sticky block would cover the table it is meant to sit beside. */
@media (min-width: 1280px) {
    .team-channel-side[b-o9gb5n2d6u] {
        position: sticky;
        top: 80px;
    }
}

/* Always in reach, however long the table: the count and the buttons are what the page is for. */
[b-o9gb5n2d6u] .team-channel-actions {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.team-channel-badge[b-o9gb5n2d6u] {
    margin-left: 8px;
    font-size: 0.75rem;
    opacity: 0.9;
}

.team-channel-badge[b-o9gb5n2d6u]::before {
    content: "·";
    margin-right: 6px;
}

.team-channel-badge--on-primary[b-o9gb5n2d6u] {
    color: inherit;
}
/* _content/Dashboard/Components/Shared/TeamChannels/TeamMessageEditor.razor.rz.scp.css */
/* The message box is a whole Discord post — ten lines is a starting point, not a verdict. A textarea
   resizes for free; MudBlazor only turns it off. Vertical only, so a drag cannot push the column out
   of shape. ::deep sits after the class: the scope attribute lands on the wrapping div. */
.team-message-box[b-0v5ldexb3d]  textarea {
    resize: vertical;
    min-height: 10rem;
}

[b-0v5ldexb3d] .team-message-preview {
    white-space: pre-wrap;
    max-height: 60vh;
    overflow-y: auto;
}
/* _content/Dashboard/Components/Shared/TeamGroupRow.razor.rz.scp.css */
.tgr td[b-l8hxql4cip] { padding-top: 14px; padding-bottom: 6px; border-top: 0; background: transparent; }
.tgr__name[b-l8hxql4cip] { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body); font-weight: var(--weight-semibold); }
/* _content/Dashboard/Components/Shared/TicketConversation.razor.rz.scp.css */
/* Ticket conversation — Discord-like message layout on the dashboard's own surfaces.
   Shared by the moderator ticket page and the Personal area (see TicketConversation.razor).
   All colours come from the design system's semantic tokens, so light and dark both work (STYLE.md §2). */

.ticket-facts[b-bcrmyedm7i] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 1rem;
    align-items: baseline;
}

.ticket-facts dt[b-bcrmyedm7i] {
    color: var(--fg-2);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-facts dd[b-bcrmyedm7i] {
    margin: 0;
    word-break: break-word;
}

/* Paragraph answers keep their line breaks. */
.ticket-form-value[b-bcrmyedm7i] {
    white-space: pre-wrap;
}

/* ── History ────────────────────────────────────────────── */

.ticket-history[b-bcrmyedm7i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 70vh;
    overflow-y: auto;
}

.ticket-entry[b-bcrmyedm7i] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.ticket-entry.is-message[b-bcrmyedm7i] {
    background: var(--bg-raised);
}

/* System events are quieter than chat, but still part of the same timeline. */
.ticket-entry.is-system[b-bcrmyedm7i] {
    border-left: 2px solid var(--line-1);
    border-radius: 0;
    color: var(--fg-2);
    font-size: var(--text-body-sm);
}

.ticket-entry-head[b-bcrmyedm7i] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-entry-author[b-bcrmyedm7i] {
    font-weight: 600;
    color: var(--accent);
}

.ticket-entry.is-system .ticket-entry-author[b-bcrmyedm7i] {
    color: var(--fg-2);
    font-weight: 500;
}

.ticket-entry-time[b-bcrmyedm7i] {
    color: var(--fg-2);
    font-size: var(--text-micro);
}

.ticket-entry-tag[b-bcrmyedm7i] {
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-2);
    border: 1px solid var(--line-1);
    border-radius: 999px;
    padding: 0 0.45rem;
}

.ticket-entry-body[b-bcrmyedm7i] {
    margin-top: 0.15rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Attachments ────────────────────────────────────────── */

.ticket-attachments[b-bcrmyedm7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.ticket-thumb img[b-bcrmyedm7i] {
    max-width: 260px;
    max-height: 200px;
    border-radius: 6px;
    display: block;
}

.ticket-file[b-bcrmyedm7i] {
    display: inline-block;
    background: var(--bg-raised);
    border: 1px solid var(--line-1);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    color: var(--fg-1);
    text-decoration: none;
    font-size: var(--text-body-sm);
}

.ticket-file:hover[b-bcrmyedm7i] {
    border-color: var(--accent);
}

.ticket-file em[b-bcrmyedm7i] {
    color: var(--fg-2);
    font-style: normal;
    font-size: var(--text-body-sm);
}

.ticket-file.is-missing[b-bcrmyedm7i] {
    opacity: 0.7;
    cursor: default;
}

/* _content/Dashboard/Components/Shared/WatchButton.razor.rz.scp.css */
.wb[b-o44c4oefwz] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    max-width: 100%;
}

.wb__reason[b-o44c4oefwz] {
    font-size: var(--text-body-sm);
    color: var(--fg-2);
    min-width: 0;
    overflow-wrap: anywhere;
}