/* /Components/Codex/RaidAbilityTable.razor.rz.scp.css */
/* Scoped to RaidAbilityTable. Same row grammar as RaidMeterTable so the two read as one family. */

.at-head[b-cho1de42mx],
.at-row[b-cho1de42mx] {
    display: grid;
    grid-template-columns: minmax(120px, 1.5fr) 78px 56px 66px 72px 66px minmax(90px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 4px 8px;
}

.at-head[b-cho1de42mx] {
    margin-top: 10px;
    border-bottom: 1px solid var(--cx-bd-4);
    padding-bottom: 6px;
}

    .at-head span[b-cho1de42mx] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.r[b-cho1de42mx] {
    text-align: right;
}

.at-row[b-cho1de42mx] {
    border-bottom: 1px solid #201810;
}

    .at-row:last-child[b-cho1de42mx] {
        border-bottom: none;
    }

    .at-row:hover[b-cho1de42mx] {
        background: rgba(224,165,38,.045);
    }

.at-name[b-cho1de42mx] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 3px 6px;
    overflow: hidden;
}

.at-bar[b-cho1de42mx] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    opacity: .18;
    pointer-events: none;
}

.at-label[b-cho1de42mx] {
    position: relative;
    font: 500 13px 'EB Garamond', serif;
    color: var(--cx-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* ★A row still showing a raw id must not look like a row that resolved.★ Every OTHER cell on this
       page uses dimming to mean "unknown, not zero"; an id we could not name is the same statement about
       a label, so it wears the same colour and a mono face that says "this is a number, not a word". */
    .at-label.unnamed[b-cho1de42mx] {
        color: var(--cx-muted);
        font: 500 12.5px ui-monospace, monospace;
    }

.at-num[b-cho1de42mx] {
    font: 600 12.5px ui-monospace, monospace;
    color: var(--cx-cream);
}

.at-dim[b-cho1de42mx] {
    font: 400 12px ui-monospace, monospace;
    color: var(--cx-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-empty[b-cho1de42mx] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

@media (max-width: 900px) {
    .at-head[b-cho1de42mx],
    .at-row[b-cho1de42mx] {
        grid-template-columns: minmax(100px, 1.4fr) 70px 52px 60px 66px;
        gap: 7px;
    }

        /* MAX and the counterpart drop; average and the hit split stay, because those two are what the
           amount-optional caveat is about. */
        .at-head span:nth-child(6)[b-cho1de42mx],
        .at-head span:nth-child(7)[b-cho1de42mx],
        .at-row > :nth-child(6)[b-cho1de42mx],
        .at-row > :nth-child(7)[b-cho1de42mx] {
            display: none;
        }
}
/* /Components/Codex/RaidActivityPanel.razor.rz.scp.css */
/* Scoped to RaidActivityPanel. */

.ap-caveat[b-rpe63h15t0] {
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid var(--cx-bd-4);
    border-radius: 3px;
    background: rgba(224,165,38,.05);
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
}

.ap-head[b-rpe63h15t0],
.ap-row[b-rpe63h15t0] {
    display: grid;
    grid-template-columns: minmax(110px, 1.3fr) 76px 62px 66px 66px 82px 76px;
    gap: 10px;
    align-items: center;
    padding: 5px 8px;
}

.ap-head[b-rpe63h15t0] {
    margin-top: 12px;
    border-bottom: 1px solid var(--cx-bd-4);
    padding-bottom: 6px;
    padding-left: 11px;
}

    .ap-head span[b-rpe63h15t0] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.r[b-rpe63h15t0] {
    text-align: right;
}

.ap-row[b-rpe63h15t0] {
    border-left: 3px solid transparent;
    border-bottom: 1px solid #201810;
}

    .ap-row:last-child[b-rpe63h15t0] {
        border-bottom: none;
    }

    /* A silent raider gets a wash as well as a colour: this row is the finding, and a small red word in a
       forty-row table is a small red word. */
    .ap-row.loud[b-rpe63h15t0] {
        background: rgba(190,70,60,.06);
    }

.ap-name[b-rpe63h15t0] {
    font: 500 13px 'EB Garamond', serif;
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.ap-guest[b-rpe63h15t0] {
    flex: none;
    font: italic 400 10.5px 'EB Garamond', serif;
    color: var(--cx-muted);
}

.ap-verdict[b-rpe63h15t0] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.ap-num[b-rpe63h15t0] {
    font: 600 12px ui-monospace, monospace;
    color: var(--cx-cream);
    white-space: nowrap;
}

.ap-dim[b-rpe63h15t0] {
    font: 400 11.5px ui-monospace, monospace;
    color: var(--cx-dim);
    white-space: nowrap;
}

.ap-verdict-line[b-rpe63h15t0] {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--cx-bd-5);
    color: var(--cx-red);
    font: 400 13px 'EB Garamond', serif;
}

.ap-empty[b-rpe63h15t0] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

@media (max-width: 900px) {
    .ap-head[b-rpe63h15t0],
    .ap-row[b-rpe63h15t0] {
        grid-template-columns: minmax(90px, 1.2fr) 70px 58px 74px;
        gap: 7px;
    }

        /* ACTIVE s, OF WINDOW and the death mark drop; EVENTS and LONGEST GAP stay, because those two are
           what separate a silent raider from a busy one. */
        .ap-head span:nth-child(4)[b-rpe63h15t0],
        .ap-head span:nth-child(5)[b-rpe63h15t0],
        .ap-head span:nth-child(7)[b-rpe63h15t0],
        .ap-row > :nth-child(4)[b-rpe63h15t0],
        .ap-row > :nth-child(5)[b-rpe63h15t0],
        .ap-row > :nth-child(7)[b-rpe63h15t0] {
            display: none;
        }
}
/* /Components/Codex/RaidBuffInspector.razor.rz.scp.css */
/* The Buff Inspector's own chrome. The SQUARES are RaidReadinessGrid's — CSS isolation scopes each
   component's sheet, and the cell semantics stay single-sourced in RaidBuffBoard.Mark.Css, which is
   the half a test can hold. Everything here is layout around that grid. */

.bi[b-m2hu7zfqvv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bi-head[b-m2hu7zfqvv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cx-bd-5);
}

.bi-prov[b-m2hu7zfqvv] {
    color: var(--cx-dim);
    font: italic 11px 'EB Garamond', serif;
}

.bi-bands[b-m2hu7zfqvv],
.bi-lens[b-m2hu7zfqvv] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bi-band[b-m2hu7zfqvv] {
    background: transparent;
    border: 1px solid var(--cx-bd-3);
    color: var(--cx-muted);
    cursor: pointer;
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .07em;
    padding: 3px 8px;
}

.bi-band:hover[b-m2hu7zfqvv] {
    border-color: var(--cx-bd);
    color: var(--cx-cream);
}

/* ★Off is a STATE, not a disappearance.★ A hidden band stays on screen so the operator can see what
   they took away — a column silently absent is a column nobody goes looking for. */
.bi-band.off[b-m2hu7zfqvv] {
    color: var(--cx-faint);
    border-style: dashed;
}

.bi-groups[b-m2hu7zfqvv] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.bi-group[b-m2hu7zfqvv] {
    border: 1px solid var(--cx-bd-4);
    color: var(--cx-dim);
    font: 11px ui-monospace, monospace;
    padding: 2px 6px;
}

.bi-group.short[b-m2hu7zfqvv] {
    border-color: var(--cx-red);
    color: var(--cx-red);
}

.bi-group.unread[b-m2hu7zfqvv] {
    border-style: dashed;
}

.bi-section[b-m2hu7zfqvv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 8px;
    flex-wrap: wrap;
}

.bi-row[b-m2hu7zfqvv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bi-abbr[b-m2hu7zfqvv] {
    color: var(--cx-gilt-dim);
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .06em;
    min-width: 44px;
}

.bi-line[b-m2hu7zfqvv] {
    color: var(--cx-body);
    font: 12px 'EB Garamond', serif;
    flex: 1;
}

.bi-verdict[b-m2hu7zfqvv] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .07em;
    color: var(--cx-dim);
}

.bi-verdict.on[b-m2hu7zfqvv] { color: var(--cx-green); }
.bi-verdict.fading[b-m2hu7zfqvv] { color: #e0a526; }
.bi-verdict.unread[b-m2hu7zfqvv] { color: var(--cx-muted); }
.bi-verdict.quiet[b-m2hu7zfqvv] { color: var(--cx-faint); }

.bi-quiet[b-m2hu7zfqvv] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
}
/* /Components/Codex/RaidBuffPanel.razor.rz.scp.css */
/* Scoped to RaidBuffPanel — the raid-readiness board.
 *
 * ★THE STATE TREATMENTS ARE THE WHOLE POINT OF THIS FILE, AND THEY ARE NOT COLOUR ALONE.★
 * Six states share one 20px square, and roughly one man in twelve cannot separate the red one from the
 * grey one by hue. So each state differs in FILL as well: solid, half-solid, hollow, diagonally hatched,
 * dotted-field, and empty-with-a-dotted-edge. Print the page in black and white and the squares still say
 * six different things — which matters because the state a raid leader must never misread ("we did not
 * read this seat") sits next to the one they act on ("this raider has no Fortitude"). */

.bb-controls[b-73k4f0cer3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.bb-busy[b-73k4f0cer3] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
}

/* ── The headline. One line, and it is the thing the operator reads before pulling. ─────────────── */

.bb-head[b-73k4f0cer3] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid var(--cx-bd-4);
    border-radius: 4px;
    background: rgba(0, 0, 0, .18);
}

    /* ★Two headlines, and each one says which axis it is scoring.★ An unlabelled "READY" over a board
       that also holds consumable columns is the merged number the contract forbids. */
    .bb-head .k[b-73k4f0cer3] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .14em;
        color: var(--cx-dim);
        min-width: 62px;
    }

    .bb-head .v[b-73k4f0cer3] {
        font: 700 17px 'Cinzel', serif;
        letter-spacing: .1em;
    }

    .bb-head .d[b-73k4f0cer3] {
        font: 400 12.5px 'EB Garamond', serif;
        color: var(--cx-muted);
        flex: 1;
        min-width: 240px;
    }

/* ── Band toggles ───────────────────────────────────────────────────────────────────────────────── */

.bb-band-toggle[b-73k4f0cer3] {
    font: 500 11px 'EB Garamond', serif;
    border: 1px solid var(--cx-bd-4);
    border-radius: 99px;
    padding: 3px 11px;
    background: rgba(224, 165, 38, .07);
    color: var(--cx-body);
    cursor: pointer;
}

    .bb-band-toggle:hover[b-73k4f0cer3] {
        border-color: #7a5e22;
        color: var(--cx-head);
    }

    .bb-band-toggle.off[b-73k4f0cer3] {
        background: none;
        color: var(--cx-dim);
        text-decoration: line-through;
    }

/* ── The grid ───────────────────────────────────────────────────────────────────────────────────── */

.bb-scroll[b-73k4f0cer3] {
    margin-top: 12px;
    overflow: auto;
    max-height: 74vh;
    border: 1px solid var(--cx-bd-5);
    border-radius: 4px;
}

.bb-grid[b-73k4f0cer3] {
    border-collapse: separate;
    border-spacing: 0;
    font: 12px 'EB Garamond', serif;
}

    /* The header row and the name column both pin, so a scroll in either axis never loses the labels —
       at 40 rows that is the difference between a board and a wall. */
    .bb-grid thead th[b-73k4f0cer3] {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #1c150c;
        border-bottom: 1px solid var(--cx-bd-3);
        padding: 5px 3px 4px;
        vertical-align: bottom;
    }

    .bb-grid .bb-name[b-73k4f0cer3] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #1c150c;
        text-align: left;
        padding: 2px 10px 2px 8px;
        white-space: nowrap;
        border-right: 1px solid var(--cx-bd-4);
    }

    .bb-grid thead .bb-name[b-73k4f0cer3] {
        z-index: 4;
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.bb-h[b-73k4f0cer3] {
    width: 32px;
    /* ★Space for power.js's injected icon is RESERVED, not discovered.★ The icon arrives from a CDN
       some milliseconds (or never) after render; without a floor here, thirteen column heads grow by
       eighteen pixels at once and the whole board jumps under the reader's cursor. With it, a blocked
       CDN costs one row of empty space and nothing else. */
    min-height: 42px;
}

    /* A consumable column is a different measurement from a buff column and the head says so before
       the reader has hovered anything. */
    .bb-h.stock[b-73k4f0cer3] {
        border-bottom: 1px solid #4a3a5a;
    }

.bb-hl[b-73k4f0cer3] {
    display: block;
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .04em;
    color: var(--cx-muted);
    text-decoration: none;
    text-align: center;
}

    .bb-hl:hover[b-73k4f0cer3] {
        color: var(--cx-gilt-bright);
    }

    /* power.js injects its icon as an element inside the anchor; centre it over the abbreviation
       instead of letting it sit inline and push the text out of the 32px column. */
    .bb-hl ins[b-73k4f0cer3],
    .bb-hl > span[b-73k4f0cer3] {
        display: block;
        margin: 0 auto 2px;
    }

/* The column's own health, as a 3px rule under its head. A glance down the strip finds the bad column
   before the eye has parsed a single square. */
.bb-bar[b-73k4f0cer3] {
    display: block;
    height: 3px;
    margin: 3px 1px 0;
    border-radius: 2px;
}

    .bb-bar.on[b-73k4f0cer3] { background: var(--cx-green-hi); }
    .bb-bar.fading[b-73k4f0cer3] { background: #e0a526; }
    .bb-bar.gap[b-73k4f0cer3] { background: var(--cx-red); }
    .bb-bar.quiet[b-73k4f0cer3] { background: var(--cx-bd-3); }

/* ── A subgroup band ────────────────────────────────────────────────────────────────────────────── */

.bb-sub td[b-73k4f0cer3] {
    padding: 7px 8px 3px;
    border-top: 1px solid var(--cx-bd-4);
}

.bb-sub-label[b-73k4f0cer3] {
    display: inline-block;
    position: sticky;
    left: 8px;
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .13em;
    color: var(--cx-dim);
}

    .bb-sub-label .n[b-73k4f0cer3] {
        color: var(--cx-head);
    }

/* ── A raider row ───────────────────────────────────────────────────────────────────────────────── */

.bb-row:hover .bb-name[b-73k4f0cer3],
.bb-row:hover td[b-73k4f0cer3] {
    background-color: rgba(224, 165, 38, .05);
}

.bb-who[b-73k4f0cer3] {
    font: 600 12.5px 'EB Garamond', serif;
    text-decoration: none;
}

    .bb-who:hover[b-73k4f0cer3] {
        text-decoration: underline;
    }

.bb-empty-seat[b-73k4f0cer3] {
    color: var(--cx-dim);
}

.bb-v[b-73k4f0cer3] {
    margin-left: 7px;
    font: 500 10.5px 'EB Garamond', serif;
}

    .bb-v.on[b-73k4f0cer3] { color: var(--cx-green-hi); }
    .bb-v.fading[b-73k4f0cer3] { color: #e0a526; }
    .bb-v.carried[b-73k4f0cer3] { color: #8fb0d4; }
    .bb-v.gap[b-73k4f0cer3] { color: var(--cx-red); }
    .bb-v.reach[b-73k4f0cer3] { color: #b9892a; }
    .bb-v.unread[b-73k4f0cer3] { color: var(--cx-muted); }
    .bb-v.theirs[b-73k4f0cer3] { color: var(--cx-faint); }
    .bb-v.alien[b-73k4f0cer3] { color: var(--cx-ai); }
    .bb-v.quiet[b-73k4f0cer3] { color: var(--cx-dimmer); }

/* ── THE SQUARE ─────────────────────────────────────────────────────────────────────────────────── */

.bb-cell[b-73k4f0cer3] {
    padding: 1px 2px;
    text-align: center;
}

.bb-tile[b-73k4f0cer3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    box-sizing: border-box;
}

    /* SOLID — has it. The only fully painted square, so a covered raid reads as a wall of colour. */
    .bb-tile.on[b-73k4f0cer3] {
        background: rgba(127, 207, 107, .88);
        border: 1px solid #7fcf6b;
        color: #12200c;
    }

    /* HALF SOLID — the fill is literally draining away. Distinct from `on` by SHAPE, not only by hue. */
    .bb-tile.fading[b-73k4f0cer3] {
        background: linear-gradient(135deg, #f0c662 0 50%, rgba(240, 198, 98, .12) 50% 100%);
        border: 1px solid #e0a526;
        color: #2a1e08;
    }

    /* ★OUTLINED IN BLUE, NOT RED — and the contract insists on it.★ "Carried but not up" describes a
       correctly-stocked raider, because nothing in the engine drinks a flask; painting it as a gap
       would redden forty rows on a good night and teach an operator that this page is noise. It is
       still visibly NOT the solid square, because the raider is not running it. */
    .bb-tile.carried[b-73k4f0cer3] {
        background: rgba(143, 176, 212, .10);
        border: 1px solid #4a6a8a;
        color: #8fb0d4;
    }

    /* HOLLOW — measured, absent, actionable. An empty box with a hard edge and a hard mark. */
    .bb-tile.gap[b-73k4f0cer3] {
        background: none;
        border: 1.5px solid var(--cx-red);
        color: var(--cx-red);
        font-weight: 700;
    }

    /* DOTTED FIELD + DASHED EDGE — absent, and attributed to reach by a model this page cannot verify.
       ★Deliberately not a bare dash.★ A dash reads as "not applicable", and this square is an absence. */
    .bb-tile.reach[b-73k4f0cer3] {
        background-color: rgba(224, 165, 38, .05);
        background-image: radial-gradient(circle at 50% 50%, rgba(224, 165, 38, .55) .8px, transparent 1px);
        background-size: 4px 4px;
        border: 1px dashed #7a5e22;
        color: #b9892a;
    }

    /* DIAGONAL HATCH — ★we never read this seat.★ The state this whole page exists to keep separate from
       a measured miss, so it gets the loudest non-colour texture on the board. */
    .bb-tile.unread[b-73k4f0cer3] {
        background-image: repeating-linear-gradient(45deg,
                rgba(169, 140, 90, .40) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
        border: 1px solid var(--cx-bd-3);
        color: var(--cx-muted);
        font-weight: 700;
    }

    /* EMPTY, DOTTED EDGE — a person's character. Nothing was attempted and nothing ever will be. */
    .bb-tile.theirs[b-73k4f0cer3] {
        background: none;
        border: 1px dotted var(--cx-bd-2);
        color: var(--cx-faint);
    }

    /* SOLID PURPLE — the coverage model said something this page does not understand. Impossible to
       mistake for any of the six above, which is the point: it means the page is behind the contract. */
    .bb-tile.alien[b-73k4f0cer3] {
        background: var(--cx-ai);
        border: 1px solid #c7a4ec;
        color: #1a1224;
        font-weight: 700;
    }

/* ── Legend + tails ─────────────────────────────────────────────────────────────────────────────── */

.bb-legend[b-73k4f0cer3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 11px;
    color: var(--cx-dim);
    font: 11.5px 'EB Garamond', serif;
    align-items: center;
}

    .bb-legend > span[b-73k4f0cer3] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.bb-note[b-73k4f0cer3] {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--cx-bd-5);
    color: var(--cx-muted);
    font: 12.5px 'EB Garamond', serif;
}

    .bb-note .n[b-73k4f0cer3] {
        color: var(--cx-cream-hi);
        font-weight: 600;
    }

    .bb-note .q[b-73k4f0cer3] {
        color: var(--cx-dim);
    }

.bb-legend .q[b-73k4f0cer3] {
    color: var(--cx-dimmer);
    font-style: italic;
}

.bb-alarm-rows[b-73k4f0cer3] {
    margin-top: 6px;
    color: var(--cx-dim);
    font-size: 12px;
}

    .bb-alarm-rows .n[b-73k4f0cer3] {
        color: var(--cx-cream-hi);
        font-weight: 600;
    }

.bb-alarm[b-73k4f0cer3] {
    margin-top: 11px;
    padding: 9px 12px;
    border: 1px solid #7a3a2a;
    border-left: 3px solid var(--cx-red);
    border-radius: 3px;
    background: rgba(221, 138, 106, .07);
    color: var(--cx-body);
    font: 12.5px 'EB Garamond', serif;
}

.bb-caveat[b-73k4f0cer3] {
    margin-top: 11px;
    padding: 8px 12px;
    border: 1px dashed #7a5e22;
    border-radius: 3px;
    background: rgba(224, 165, 38, .05);
    color: var(--cx-muted);
    font: 12px 'EB Garamond', serif;
}

/* ═══ ICON CELLS — the art says WHICH BUFF; the tile still says WHAT STATE. ═══
   ⚠★THE FIRST CUT OF THIS BLOCK ERASED THE STATE.★ It opened with `background: transparent` and a
   grouped rule that gave reach/unread/theirs/alien one identical dashed square, so four states that
   this file's own header insists must never look alike became pixel-for-pixel the same, and the
   other four differed only by hue — in a component whose stated rule is "separated by FILL, not
   hue". It also carried the state on `box-shadow: inset`, which paints inside the padding box and
   BELOW content, so an opaque icon hides it entirely.

   So the state now rides three channels that survive an opaque icon, and the art is inset INSIDE
   them rather than laid over them:
     1. THE OUTER BORDER — style and width, not just colour: solid / thick / dashed / dotted /
        double. It paints outside the content box, so nothing can cover it.
     2. A 2px COLLAR of the tile's own background, left visible by shrinking the art to 14px inside
        an 18px content box. Every texture the base rules already define — the hatch, the dot field,
        the draining half-gradient — reappears as a ring around the icon.
     3. THE ART ITSELF, dimmed or greyed. That is the WoW client's own convention for "you do not
        have this", and unlike the other two it is legible at a glance across forty rows.
   Nothing here re-declares a background, so the eight base rules above remain the single source of
   what each state looks like, and the LEGEND (which draws the same tiles without art) keeps
   explaining the same visual language instead of a second one. */
.bb-tile.bb-ico[b-73k4f0cer3] {
    position: relative;
    overflow: hidden;
}

/* The glyph, behind the art. A working CDN covers it with an opaque 14px icon; a blocked one leaves
   the mark set visible, which is what the legend documents. It is the fallback the first cut
   promised in a comment and never rendered — that version emitted an EMPTY anchor, so a blocked CDN
   produced forty rows of blank boxes. */
.bb-glyph[b-73k4f0cer3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

.bb-cell-link[b-73k4f0cer3] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 14px;
    height: 14px;
    text-decoration: none;
}

    /* power.js injects the art as an <ins> inside the anchor and sizes it for `small` (18px); the
       anchor is 14px so the collar survives, and the art is scaled to fit rather than clipped. */
    .bb-tile.bb-ico[b-73k4f0cer3]  ins,
    .bb-tile.bb-ico[b-73k4f0cer3]  del {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        background-size: cover !important;
    }

/* ── per state: an edge you can tell apart in greyscale, and an art treatment ──────────────────── */

/* HAS IT — full-colour art in a solid green edge. The only cell that looks "finished". */
.bb-tile.bb-ico.on[b-73k4f0cer3] { border-width: 1px; border-style: solid; }

/* EXPIRING — thick gold edge, art still full colour: it is UP, it just will not survive the fight. */
.bb-tile.bb-ico.fading[b-73k4f0cer3] { border-width: 2px; border-style: solid; }

/* CARRIED, NOT DRUNK — solid blue edge, art desaturated: stocked, not running. */
.bb-tile.bb-ico.carried[b-73k4f0cer3] { border-width: 1px; border-style: solid; }
    .bb-tile.bb-ico.carried .bb-cell-link[b-73k4f0cer3] { filter: saturate(.4) brightness(.85); }

/* ★MEASURED AND ABSENT — the one cell to act on.★ Thick red edge, art greyed to near-monochrome. */
.bb-tile.bb-ico.gap[b-73k4f0cer3] { border-width: 2px; border-style: solid; }
    .bb-tile.bb-ico.gap .bb-cell-link[b-73k4f0cer3] { filter: grayscale(.95) brightness(.5); }

/* OUT OF REACH — dashed edge over the dot-field collar. Absent, blamed on geometry. */
.bb-tile.bb-ico.reach[b-73k4f0cer3] { border-width: 1px; border-style: dashed; }

/* NEVER READ — solid edge over the 45° hatch collar, the loudest texture on the board, because this
   is the state the whole panel exists to keep separate from a measured miss. */
.bb-tile.bb-ico.unread[b-73k4f0cer3] { border-width: 1px; border-style: solid; }

/* SOMEBODY'S CHARACTER — dotted edge, nothing attempted, nothing ever will be. */
.bb-tile.bb-ico.theirs[b-73k4f0cer3] { border-width: 1px; border-style: dotted; }

/* ★THE PAGE IS BEHIND THE CONTRACT.★ Double edge over the solid purple collar — the one square that
   must be impossible to mistake for any of the seven above. */
.bb-tile.bb-ico.alien[b-73k4f0cer3] { border-width: 3px; border-style: double; }

/* The three "this cell tells you nothing" states share ART dimming — but never an edge, which is
   what separates them from each other and from `gap`. */
.bb-tile.bb-ico.reach .bb-cell-link[b-73k4f0cer3],
.bb-tile.bb-ico.unread .bb-cell-link[b-73k4f0cer3],
.bb-tile.bb-ico.theirs .bb-cell-link[b-73k4f0cer3] { filter: grayscale(1) brightness(.45) opacity(.65); }
/* /Components/Codex/RaidCoveragePanel.razor.rz.scp.css */
/* Scoped to RaidCoveragePanel. */

/* ★The contradiction banner.★ Loud on purpose and it should never be seen: a caption denying a channel a
   table is drawing is the page telling an operator to distrust a real number. */
.cp-lie[b-4p3wfsbm91] {
    margin: 10px 0 4px;
    padding: 8px 11px;
    border-left: 3px solid var(--cx-red);
    background: rgba(190,60,50,.08);
    color: var(--cx-red);
    font: 600 12.5px 'EB Garamond', serif;
}

/* One row per channel: the state chip, the name, and the evidence that produced the state. The evidence
   is not a tooltip — a reader has to be able to scan the reasons, not hunt for them. */
.cp-channels[b-4p3wfsbm91] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-ch[b-4p3wfsbm91] {
    display: grid;
    grid-template-columns: 138px minmax(150px, 220px) 1fr;
    gap: 4px 12px;
    align-items: baseline;
}

    .cp-ch .s[b-4p3wfsbm91] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        white-space: nowrap;
    }

    .cp-ch .n[b-4p3wfsbm91] {
        font: 500 12.5px 'EB Garamond', serif;
        color: var(--cx-cream);
    }

        .cp-ch .n .d[b-4p3wfsbm91] {
            margin-left: 6px;
            font: 600 9px 'Cinzel', serif;
            letter-spacing: .08em;
            color: var(--cx-gilt-bright);
        }

    .cp-ch .e[b-4p3wfsbm91] {
        font: 400 12px 'EB Garamond', serif;
        color: var(--cx-muted);
    }

@media (max-width: 900px) {
    /* The evidence wraps under the name rather than squeezing to a column nobody can read. */
    .cp-ch[b-4p3wfsbm91] {
        grid-template-columns: 130px 1fr;
    }

        .cp-ch .e[b-4p3wfsbm91] {
            grid-column: 2;
        }
}

.cp-section[b-4p3wfsbm91] {
    margin-top: 15px;
    padding-top: 11px;
    border-top: 1px solid var(--cx-bd-5);
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-muted);
}

.cp-counts[b-4p3wfsbm91] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 16px;
}

    .cp-counts > div[b-4p3wfsbm91] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cp-counts .k[b-4p3wfsbm91] {
        font: 600 9px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

    .cp-counts .v[b-4p3wfsbm91] {
        font: 700 16px 'Cinzel', serif;
        color: var(--cx-cream);
    }

        .cp-counts .v.bad[b-4p3wfsbm91] {
            color: var(--cx-red);
        }

        .cp-counts .v.ok[b-4p3wfsbm91] {
            color: var(--cx-green-hi);
        }

.cp-notes[b-4p3wfsbm91] {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--cx-bd-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 400 12.5px 'EB Garamond', serif;
}

.cp-missing[b-4p3wfsbm91] {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--cx-bd-5);
}

    .cp-missing .h[b-4p3wfsbm91] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-muted);
        margin-bottom: 7px;
    }

    .cp-missing .m[b-4p3wfsbm91] {
        font: 400 12.5px 'EB Garamond', serif;
        color: var(--cx-muted);
        margin-bottom: 5px;
    }

    .cp-missing .n[b-4p3wfsbm91] {
        color: var(--cx-head);
        font-weight: 600;
    }
/* /Components/Codex/RaidDeathLog.razor.rz.scp.css */
/* Scoped to RaidDeathLog. */

.dl-death[b-ffigj2bxok] {
    border-bottom: 1px solid #201810;
}

    .dl-death:last-child[b-ffigj2bxok] {
        border-bottom: none;
    }

.dl-top[b-ffigj2bxok] {
    display: grid;
    grid-template-columns: 24px 52px minmax(110px, 1fr) 128px 96px minmax(140px, 1.4fr);
    gap: 10px;
    align-items: baseline;
    padding: 6px 4px;
}

.dl-toggle[b-ffigj2bxok] {
    background: none;
    border: 1px solid var(--cx-bd-4);
    border-radius: 3px;
    color: var(--cx-dim);
    cursor: pointer;
    font: 11px 'Cinzel', serif;
    padding: 1px 4px;
}

    .dl-toggle:hover[b-ffigj2bxok] {
        color: var(--cx-gilt-bright);
        border-color: var(--cx-gilt-deep);
    }

.dl-t[b-ffigj2bxok] {
    font: 600 12px ui-monospace, monospace;
    color: var(--cx-muted);
}

.dl-name[b-ffigj2bxok] {
    font: 500 13px 'EB Garamond', serif;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-gap[b-ffigj2bxok] {
    font: 600 11.5px 'Cinzel', serif;
    letter-spacing: .05em;
    white-space: nowrap;
}

.dl-taken[b-ffigj2bxok] {
    font: 400 12px ui-monospace, monospace;
    color: var(--cx-dim);
    white-space: nowrap;
    text-align: right;
}

.dl-blow[b-ffigj2bxok] {
    font: 400 12.5px 'EB Garamond', serif;
    color: var(--cx-body);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* An unattributed blow reads as unknown, never as a blank cell. */
    .dl-blow.unk[b-ffigj2bxok] {
        font-style: italic;
        color: var(--cx-muted);
    }

.dl-window[b-ffigj2bxok] {
    margin: 0 0 6px 34px;
    font: italic 400 11.5px 'EB Garamond', serif;
    color: var(--cx-muted);
}

.dl-cut[b-ffigj2bxok] {
    margin: 0 0 7px 34px;
    color: #e0a526;
    font: 400 12px 'EB Garamond', serif;
}

.dl-none[b-ffigj2bxok] {
    margin: 0 0 9px 34px;
    color: var(--cx-red);
    font: 400 12.5px 'EB Garamond', serif;
}

.dl-events[b-ffigj2bxok] {
    margin: 0 0 10px 34px;
    border-left: 2px solid var(--cx-bd-4);
    padding-left: 10px;
}

.dl-event[b-ffigj2bxok] {
    display: grid;
    grid-template-columns: 50px 46px 46px minmax(90px, 1fr) minmax(90px, 1.2fr) 72px;
    gap: 9px;
    align-items: baseline;
    padding: 2px 0;
    font: 400 11.5px ui-monospace, monospace;
    color: var(--cx-dim);
}

.dl-et[b-ffigj2bxok] {
    color: var(--cx-muted);
}

.dl-eg[b-ffigj2bxok] {
    color: var(--cx-muted);
    text-align: right;
}

.dl-ek[b-ffigj2bxok] {
    color: var(--cx-muted);
}

.dl-es[b-ffigj2bxok] {
    color: var(--cx-cream);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-ea[b-ffigj2bxok] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* An id the vendored extract could not name. Dimmed like every other unknown on this page so a reader
       never mistakes a raw id for a name the realm actually uses. */
    .dl-ea.unnamed[b-ffigj2bxok] {
        color: var(--cx-muted);
    }

.dl-ev[b-ffigj2bxok] {
    text-align: right;
    color: var(--cx-red);
    font-weight: 600;
}

/* A heal inside the death log is the good news in a red list, and it must not be mistaken for a hit. */
.dl-ek.heal[b-ffigj2bxok],
.dl-ev.heal[b-ffigj2bxok] {
    color: var(--cx-green-hi);
}

@media (max-width: 900px) {
    .dl-top[b-ffigj2bxok] {
        grid-template-columns: 22px 48px minmax(90px, 1fr) 112px;
        gap: 8px;
    }

        /* Damage taken and the killing blow drop; both reappear the moment the row is expanded. */
        .dl-top > :nth-child(5)[b-ffigj2bxok],
        .dl-top > :nth-child(6)[b-ffigj2bxok] {
            display: none;
        }

    .dl-event[b-ffigj2bxok] {
        grid-template-columns: 46px 42px minmax(80px, 1fr) 66px;
    }

        .dl-event > :nth-child(3)[b-ffigj2bxok],
        .dl-event > :nth-child(5)[b-ffigj2bxok] {
            display: none;
        }
}

/* The empty state. ★Was USED and never DEFINED★ (RaidDeathLog.razor:28), so while all five sibling
   panels rendered their "nothing here" note in muted italic, the death log rendered raw 16px browser
   default -- the loudest text on a card that is reporting the ABSENCE of deaths. Matches .mt-empty,
   .fl-empty, .at-empty, .ap-empty and .tl-empty verbatim. */
.dl-empty[b-ffigj2bxok] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}
/* /Components/Codex/RaidDeckDrawer.razor.rz.scp.css */
/* THE FULL DECK, inside the inspector drawer. Codex layer: .cx-* for shared chrome, .dk-* for this
   body, tokens from app.css :root.

   ★A disabled action is dimmed AND struck at its edge, never dimmed alone★ — the same rule the buff
   board's fills follow, for the same reader: roughly one man in twelve cannot separate the grey button
   from the live one by colour, and "this verb is refused right now" is the most load-bearing state in
   here. The reason sentence renders on the page besides, because a tooltip is not readable on a touch
   screen and a control that is merely grey teaches nothing. */

.dk[b-dnsjud9oux] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dk-says[b-dnsjud9oux] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
}

.dk-refusal[b-dnsjud9oux] {
    border-left: 2px solid var(--cx-red);
    color: var(--cx-red);
    font: 13px 'EB Garamond', serif;
    padding: 6px 10px;
}

.dk-flash[b-dnsjud9oux] {
    border-left: 2px solid var(--cx-green-hi);
    color: var(--cx-muted);
    font: 13px 'EB Garamond', serif;
    padding: 6px 10px;
    white-space: pre-wrap;
}

.dk-flash.bad[b-dnsjud9oux] {
    border-left-color: var(--cx-red);
    color: var(--cx-red);
}

/* ── lanes ── */

.dk-lane[b-dnsjud9oux] {
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 10px;
}

.dk-lane-head[b-dnsjud9oux] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.dk-lane-label[b-dnsjud9oux] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .1em;
    color: var(--cx-gilt-bright);
}

.dk-lane-link[b-dnsjud9oux] {
    color: var(--cx-faint);
    font: 11px 'EB Garamond', serif;
    text-decoration: none;
}

.dk-lane-link:hover[b-dnsjud9oux] {
    color: var(--cx-gilt-bright);
}

.dk-lane-note[b-dnsjud9oux] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
    margin-bottom: 4px;
}

/* ── one action ── */

.dk-act[b-dnsjud9oux] {
    border-left: 1px solid var(--cx-bd-5);
    margin-top: 8px;
    padding: 2px 0 2px 8px;
}

/* Fill AND edge, so "refused right now" survives a monochrome reading. */
.dk-act.off[b-dnsjud9oux] {
    border-left-style: dashed;
    border-left-color: var(--cx-bd-3);
    opacity: .72;
}

.dk-act-row[b-dnsjud9oux] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dk-pick[b-dnsjud9oux] {
    font-size: 11px;
    padding: 2px 4px;
    width: 86px;
}

.dk-pick.wide[b-dnsjud9oux] {
    width: 148px;
}

.dk-act-says[b-dnsjud9oux] {
    color: var(--cx-body);
    font: 12px 'EB Garamond', serif;
    margin-top: 4px;
}

/* The disabled sentence is red because it is a REFUSAL, not a decoration. */
.dk-act-reason[b-dnsjud9oux] {
    color: var(--cx-red);
    font: 12px 'EB Garamond', serif;
    margin-top: 3px;
}

/* An advisory is not a refusal: the control still works, and this is the limit or the answer the realm
   is about to give. It gets the warning hue and never the red one. */
.dk-act-advisory[b-dnsjud9oux] {
    color: #e0a526;
    font: italic 12px 'EB Garamond', serif;
    margin-top: 3px;
}

.dk-foot[b-dnsjud9oux] {
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 10px;
}

.dk-foot-note[b-dnsjud9oux] {
    color: var(--cx-dim);
    display: block;
    font: italic 12px 'EB Garamond', serif;
    margin-top: 6px;
}
/* /Components/Codex/RaidFeedPanel.razor.rz.scp.css */
/* Scoped to RaidFeedPanel. */

.fp-note[b-mhu13ulqe1] {
    margin-top: 10px;
    color: #e0a526;
    font: 400 12.5px 'EB Garamond', serif;
}

.fp-empty[b-mhu13ulqe1] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

.fp-rows[b-mhu13ulqe1] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.fp-row[b-mhu13ulqe1] {
    display: grid;
    grid-template-columns: 68px 74px 62px 1fr;
    gap: 4px 10px;
    align-items: baseline;
    padding: 4px 6px;
    border-bottom: 1px solid #201810;
}

    .fp-row:last-child[b-mhu13ulqe1] {
        border-bottom: none;
    }

    .fp-row .t[b-mhu13ulqe1] {
        font: 600 11.5px ui-monospace, monospace;
        color: var(--cx-faint);
    }

    .fp-row .k[b-mhu13ulqe1] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
    }

    /* ★Three warranties, three looks.★ A model's sentence must never be able to pass for the realm's. */
    .fp-row .p[b-mhu13ulqe1] {
        font: 700 9px 'Cinzel', serif;
        letter-spacing: .08em;
        opacity: .9;
    }

        .fp-row .p.rule[b-mhu13ulqe1] {
            color: var(--cx-gilt-bright);
        }

        .fp-row .p.wire[b-mhu13ulqe1] {
            color: var(--cx-green-hi);
        }

        .fp-row .p.ai[b-mhu13ulqe1] {
            color: #9a86d8;
        }

    .fp-row .s[b-mhu13ulqe1] {
        font: 400 12.5px 'EB Garamond', serif;
        color: var(--cx-body);
        min-width: 0;
    }

    .fp-row .w[b-mhu13ulqe1] {
        color: var(--cx-muted);
    }

    .fp-row .d[b-mhu13ulqe1] {
        margin-top: 2px;
        color: var(--cx-muted);
        font: 400 11.5px 'EB Garamond', serif;
        white-space: pre-wrap;
        word-break: break-word;
    }

@media (max-width: 820px) {
    .fp-row[b-mhu13ulqe1] {
        grid-template-columns: 62px 70px 1fr;
    }

        /* The provenance rides above the sentence rather than squeezing it; it is never dropped. */
        .fp-row .p[b-mhu13ulqe1] {
            grid-column: 3;
        }

        .fp-row .s[b-mhu13ulqe1] {
            grid-column: 1 / -1;
        }
}
/* /Components/Codex/RaidFightList.razor.rz.scp.css */
/* Scoped to RaidFightList. */

.fl-head[b-15nbfps1hj],
.fl-row[b-15nbfps1hj] {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 124px 62px 58px 70px 66px 70px 84px 66px;
    gap: 9px;
    align-items: center;
    padding: 7px 10px;
}

.fl-head[b-15nbfps1hj] {
    margin-top: 10px;
    border-bottom: 1px solid var(--cx-bd-4);
    padding-bottom: 6px;
    padding-left: 13px;
}

    .fl-head span[b-15nbfps1hj] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.r[b-15nbfps1hj] {
    text-align: right;
}

/* The coloured left edge is the third carrier of kill-vs-wipe, after the word and the glyph. Somebody
   scanning twenty attempts reads the edge before they read anything else. */
.fl-row[b-15nbfps1hj] {
    border-left: 3px solid transparent;
    border-bottom: 1px solid #201810;
    text-decoration: none;
}

    .fl-row:last-child[b-15nbfps1hj] {
        border-bottom: none;
    }

    .fl-row:hover[b-15nbfps1hj] {
        background: rgba(224,165,38,.05);
    }

    .fl-row.sel[b-15nbfps1hj] {
        background: rgba(224,165,38,.09);
    }

.fl-enc[b-15nbfps1hj] {
    font: 500 13.5px 'EB Garamond', serif;
    color: var(--cx-cream);
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.fl-short[b-15nbfps1hj] {
    flex: none;
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .06em;
    color: #e0a526;
}

.fl-verdict[b-15nbfps1hj] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.fl-num[b-15nbfps1hj] {
    font: 600 12.5px ui-monospace, monospace;
    color: var(--cx-cream);
    white-space: nowrap;
}

    .fl-num.bad[b-15nbfps1hj] {
        color: var(--cx-red);
    }

.fl-disagree[b-15nbfps1hj] {
    color: #e0a526;
    font-size: 11px;
}

.fl-dim[b-15nbfps1hj] {
    font: 400 11.5px ui-monospace, monospace;
    color: var(--cx-dim);
}

.fl-empty[b-15nbfps1hj] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

/* What a filter removed, inside the filtered card. Dim, because a hidden reset is an operator's own
   choice rather than bad news — but never absent, because a list that hides silently reads as complete. */
.fl-hidden[b-15nbfps1hj] {
    margin-top: 8px;
    padding-left: 13px;
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
}

@media (max-width: 1150px) {
    .fl-head[b-15nbfps1hj],
    .fl-row[b-15nbfps1hj] {
        grid-template-columns: minmax(100px, 1.3fr) 108px 56px 52px 66px 80px;
        gap: 7px;
    }

        /* ★DPS, HEALING and ENTRIES drop; NOT MEASURED does not.★ The narrow view keeps the honesty column
           because it is the one number on this row that cannot be recovered by opening the fight — every
           other column is restated in full on the fight page, and a sideways-scrolling comparison table is
           one nobody compares anything in. */
        .fl-head span:nth-child(6)[b-15nbfps1hj],
        .fl-head span:nth-child(7)[b-15nbfps1hj],
        .fl-head span:nth-child(9)[b-15nbfps1hj],
        .fl-row > :nth-child(6)[b-15nbfps1hj],
        .fl-row > :nth-child(7)[b-15nbfps1hj],
        .fl-row > :nth-child(9)[b-15nbfps1hj] {
            display: none;
        }
}
/* /Components/Codex/RaidFightTimeline.razor.rz.scp.css */
/* Scoped to RaidFightTimeline. Three tracks, one axis, one deaths ruler. */

.tl-wrap[b-1pgr8khpny] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-track-row[b-1pgr8khpny] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.tl-label[b-1pgr8khpny] {
    flex: none;
    width: 66px;
    align-self: center;
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .11em;
    text-align: right;
}

.tl-track[b-1pgr8khpny],
.tl-deaths[b-1pgr8khpny] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    border-bottom: 1px solid var(--cx-bd-4);
    background: linear-gradient(180deg,#14100a,#1b140c);
}

.tl-track[b-1pgr8khpny] {
    height: 52px;
}

.tl-deaths[b-1pgr8khpny] {
    height: 18px;
    align-items: center;
    justify-content: flex-start;
    background: none;
    border-bottom: none;
}

.tl-col[b-1pgr8khpny] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.tl-fill[b-1pgr8khpny] {
    width: 100%;
    /* A column that is a real, non-zero measurement must be visible: without a floor, a second at 0.4% of
       peak renders as nothing at all and reads as a gap in the recording. */
    min-height: 1px;
    border-radius: 1px 1px 0 0;
}

.tl-death[b-1pgr8khpny] {
    font: 11px 'Cinzel', serif;
    color: var(--cx-red);
    line-height: 1;
}

.tl-rez[b-1pgr8khpny] {
    font: 10px 'Cinzel', serif;
    color: var(--cx-green-hi);
    line-height: 1;
}

.tl-axis[b-1pgr8khpny] {
    display: flex;
    justify-content: space-between;
    margin-left: 76px;
    font: 400 10.5px ui-monospace, monospace;
    color: var(--cx-muted);
}

.tl-empty[b-1pgr8khpny] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

.tl-note[b-1pgr8khpny] {
    margin-top: 9px;
    color: var(--cx-muted);
    font: italic 400 12px 'EB Garamond', serif;
}

@media (max-width: 700px) {
    /* ⚠THE LABEL WIDTH AND THE AXIS MARGIN ARE ONE NUMBER, TWICE. The axis must start where the
       track starts: label width + the .tl-track-row 10px gap. Changing one without the other slides
       the shared ruler out of line with the bars it is measuring. */
    .tl-label[b-1pgr8khpny] {
        width: 62px;
        font-size: 9.5px;      /* was 8.5 — below the house floor, and the words still did not fit */
        letter-spacing: .06em;
        overflow: hidden;      /* a future long label clips instead of escaping the column */
    }

    .tl-axis[b-1pgr8khpny] {
        margin-left: 72px;     /* 62 + 10 */
    }
}
/* /Components/Codex/RaidLibraryDoctrine.razor.rz.scp.css */
/* Scoped to RaidLibraryDoctrine — the parchment and its quill. */

.ld-shelf[b-5zemc3iz6v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
}

    .ld-shelf .cx-chip.ld-on[b-5zemc3iz6v] {
        border-color: var(--cx-gilt);
        color: var(--cx-cream-hi);
        background: rgba(224,165,38,.16);
    }

.ld-none[b-5zemc3iz6v] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.5;
}

.ld-head[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid var(--cx-bd);
    border-radius: 5px;
    background: var(--cx-hero);
}

.ld-name[b-5zemc3iz6v] {
    font: 700 20px 'Cinzel', serif;
    width: 320px;
    max-width: 100%;
}

.ld-title[b-5zemc3iz6v] {
    font: 700 22px 'Cinzel', serif;
    color: var(--cx-cream-hi);
}

.ld-sub[b-5zemc3iz6v] {
    color: var(--cx-dim);
    font: 12px 'EB Garamond', serif;
    margin-top: 6px;
}

.ld-verdict[b-5zemc3iz6v] {
    font-size: 26px;
}

.ld-card[b-5zemc3iz6v] {
    margin-top: 18px;
    padding: 18px 20px;
}

/* ── entry rules ─────────────────────────────────────────────────────────────────────────────── */

.ld-rule[b-5zemc3iz6v] {
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-bd-4);
    border-radius: 3px;
    padding: 9px 11px;
    margin-bottom: 8px;
    background: rgba(0,0,0,.14);
}

.ld-rulehead[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ld-rulehead b[b-5zemc3iz6v] {
        font: 600 14px 'EB Garamond', serif;
        color: var(--cx-head);
    }

.ld-tools[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-left: auto;
}

.ld-del[b-5zemc3iz6v] {
    color: var(--cx-red);
}

.ld-clause[b-5zemc3iz6v] {
    margin-top: 7px;
    padding: 6px 9px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    background: rgba(0,0,0,.1);
}

    /* ★A clause this build cannot compile is MARKED, never hidden and never quietly dropped.★ */
    .ld-clause.alien[b-5zemc3iz6v] {
        border-color: rgba(224,165,38,.4);
        background: rgba(224,165,38,.06);
    }

.ld-prose[b-5zemc3iz6v] {
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
    line-height: 1.5;
}

.ld-args[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ld-arg[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 600 10px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-dim);
}

.ld-kind[b-5zemc3iz6v] {
    min-width: 150px;
}

.ld-num[b-5zemc3iz6v] {
    width: 92px;
}

.ld-text[b-5zemc3iz6v] {
    width: 160px;
}

.ld-note[b-5zemc3iz6v] {
    flex: 1;
    min-width: 180px;
}

.ld-wide[b-5zemc3iz6v] {
    flex: 1;
    min-width: 220px;
}

.ld-entry[b-5zemc3iz6v] {
    min-width: 200px;
}

.ld-add[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cx-bd-5);
}

/* ── the blessing grid ───────────────────────────────────────────────────────────────────────── */

.ld-gridwrap[b-5zemc3iz6v] {
    overflow-x: auto;
}

.ld-grid[b-5zemc3iz6v] {
    border-collapse: collapse;
    width: 100%;
}

    .ld-grid th[b-5zemc3iz6v], .ld-grid td[b-5zemc3iz6v] {
        border: 1px solid var(--cx-bd-5);
        padding: 5px 8px;
        text-align: left;
        font: 400 13px 'EB Garamond', serif;
        color: var(--cx-body);
    }

    .ld-grid thead th[b-5zemc3iz6v] {
        font: 600 10px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.ld-class[b-5zemc3iz6v] {
    font: 600 11px 'Cinzel', serif !important;
    letter-spacing: .08em;
    color: var(--cx-head) !important;
    white-space: nowrap;
}

.ld-cell[b-5zemc3iz6v] {
    width: 118px;
}

.ld-empty[b-5zemc3iz6v] {
    color: var(--cx-dimmer);
}

.ld-exception[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
}

/* ── the sixteen slots ───────────────────────────────────────────────────────────────────────── */

.ld-slot[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-bd-4);
    border-radius: 3px;
    background: rgba(0,0,0,.12);
}

    /* ★Banned reads differently from held-open, because it IS different.★ */
    .ld-slot.banned[b-5zemc3iz6v] {
        border-left-color: var(--cx-red);
    }

    .ld-slot.locked[b-5zemc3iz6v] {
        border-left-color: var(--cx-gilt);
    }

.ld-slotline[b-5zemc3iz6v] {
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
    min-width: 260px;
}

.ld-lock[b-5zemc3iz6v] {
    font-size: 12px;
}

/* ── icons and rotations ─────────────────────────────────────────────────────────────────────── */

.ld-icon[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
}

.ld-glyph[b-5zemc3iz6v] {
    font-size: 15px;
    color: var(--cx-gilt-bright);
    width: 20px;
    text-align: center;
}

.ld-rot[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    padding: 5px 9px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
}

.ld-rotline[b-5zemc3iz6v] {
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
    min-width: 240px;
}

.ld-count[b-5zemc3iz6v] {
    font: 700 13px 'Cinzel', serif;
    color: var(--cx-cream);
    min-width: 18px;
    text-align: center;
}

.ld-flagon[b-5zemc3iz6v] {
    border-color: #2f5a23;
    color: #eaf6e4;
    background: rgba(58,107,47,.25);
}

/* ── findings, the confirm, the log ──────────────────────────────────────────────────────────── */

.ld-finding[b-5zemc3iz6v] {
    margin-top: 7px;
    padding: 6px 10px;
    border-radius: 3px;
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .ld-finding b[b-5zemc3iz6v] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        margin-right: 7px;
    }

    .ld-finding.err[b-5zemc3iz6v] {
        color: var(--cx-red);
        background: rgba(221,138,106,.1);
        border: 1px solid rgba(221,138,106,.35);
    }

    .ld-finding.warn[b-5zemc3iz6v] {
        color: #e0a526;
        background: rgba(224,165,38,.07);
        border: 1px solid rgba(224,165,38,.28);
    }

.ld-confirm[b-5zemc3iz6v] {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #7a5e22;
    border-radius: 4px;
    background: rgba(224,165,38,.06);
}

.ld-diff[b-5zemc3iz6v] {
    margin-top: 5px;
    font: 400 12.5px 'EB Garamond', serif;
    color: var(--cx-body);
    line-height: 1.5;
}

.ld-publish[b-5zemc3iz6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-bd-5);
}

.ld-rev[b-5zemc3iz6v] {
    padding: 5px 9px;
    margin-top: 6px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
}

    .ld-rev.on[b-5zemc3iz6v] {
        border-color: #7a5e22;
        color: var(--cx-head);
        background: rgba(224,165,38,.06);
    }
/* /Components/Codex/RaidLibraryRoutes.razor.rz.scp.css */
/* Scoped to RaidLibraryRoutes — the Library's routes shelf. */

.lr-shelf[b-qgl9ypz86v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
}

    .lr-shelf .cx-chip.lr-on[b-qgl9ypz86v] {
        border-color: var(--cx-gilt);
        color: var(--cx-cream-hi);
        background: rgba(224,165,38,.16);
    }

.lr-classic[b-qgl9ypz86v] {
    margin-left: auto;
}

.lr-map[b-qgl9ypz86v] {
    max-width: 220px;
}

.lr-none[b-qgl9ypz86v] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.5;
}

.lr-head[b-qgl9ypz86v] {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid var(--cx-bd);
    border-radius: 5px;
    background: var(--cx-hero);
}

.lr-name[b-qgl9ypz86v] {
    font: 700 20px 'Cinzel', serif;
    width: 320px;
    max-width: 100%;
}

.lr-sub[b-qgl9ypz86v] {
    color: var(--cx-dim);
    font: 12px 'EB Garamond', serif;
    margin-top: 6px;
}

.lr-verdict[b-qgl9ypz86v] {
    font-size: 26px;
}

.lr-tools[b-qgl9ypz86v] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 12px 0 10px;
}

/* ★What the last click actually did.★ A tool that places a point in silence is one an operator cannot
   tell apart from a tool that missed. */
.lr-place[b-qgl9ypz86v] {
    padding: 7px 11px;
    margin-bottom: 10px;
    border: 1px solid var(--cx-bd-4);
    border-radius: 3px;
    background: rgba(224,165,38,.05);
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

/* ★The live pack-geometry warning.★ It sits beside the map because that is where the click was; the
   `ok` variant is the SAME warning going away, which has to be as visible as its arrival or removing
   the mob reads as having done nothing. */
.lr-alert[b-qgl9ypz86v] {
    padding: 7px 11px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid rgba(224,165,38,.4);
    background: rgba(224,165,38,.1);
    color: #e0a526;
    font: 600 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .lr-alert.ok[b-qgl9ypz86v] {
        border-color: rgba(122,183,106,.35);
        background: rgba(122,183,106,.08);
        color: var(--cx-green-hi);
    }

.lr-finding[b-qgl9ypz86v] {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .lr-finding b[b-qgl9ypz86v] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        margin-right: 7px;
    }

    .lr-finding.err[b-qgl9ypz86v] {
        color: var(--cx-red);
        background: rgba(221,138,106,.1);
        border: 1px solid rgba(221,138,106,.35);
    }

    .lr-finding.warn[b-qgl9ypz86v] {
        color: #e0a526;
        background: rgba(224,165,38,.07);
        border: 1px solid rgba(224,165,38,.28);
    }

.lr-publish[b-qgl9ypz86v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-bd-5);
}

.lr-stage[b-qgl9ypz86v] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 7px;
    padding: 6px 10px;
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-green-hi);
    border-radius: 3px;
    background: rgba(0,0,0,.12);
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
    cursor: pointer;
}

    .lr-stage.tight[b-qgl9ypz86v] {
        border-left-color: #e0a526;
        color: #e0a526;
        background: rgba(224,165,38,.07);
    }

    .lr-stage b[b-qgl9ypz86v] {
        font: 700 11px 'Cinzel', serif;
        color: var(--cx-head);
    }

.lr-src[b-qgl9ypz86v] {
    margin-left: auto;
    font: italic 11px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    white-space: nowrap;
}

.lr-rev[b-qgl9ypz86v] {
    padding: 5px 9px;
    margin-top: 6px;
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
}

    .lr-rev.on[b-qgl9ypz86v] {
        border-color: #7a5e22;
        color: var(--cx-head);
        background: rgba(224,165,38,.06);
    }

.lr-text[b-qgl9ypz86v] {
    width: 100%;
    height: 120px;
    font: 12px ui-monospace, monospace;
}

.lr-exported[b-qgl9ypz86v] {
    margin-top: 8px;
    font: 400 12px 'EB Garamond', serif;
    color: var(--cx-green-hi);
    line-height: 1.45;
}
/* /Components/Codex/RaidLiveMap.razor.rz.scp.css */
/* Scoped to RaidLiveMap — the live raid page's tactical map. The stack/blend rules mirror
   RaidRouteMap's (scoped CSS cannot be shared across components): opaque geometry canvases, active
   floor at the bottom, other storeys lighten-blended above so their dark ground vanishes. */

.lm-note[b-rnuccwue1d] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 13px 'EB Garamond', serif;
}

.lm-floors[b-rnuccwue1d] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 10px 0 8px;
}

.lm-scroll[b-rnuccwue1d] {
    overflow: auto;
    max-width: 100%;
    padding-bottom: 4px;
}

.lm-box[b-rnuccwue1d] {
    position: relative;
    flex: none;
    background: radial-gradient(circle at 50% 50%, #1a120b, #120c07);
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    overflow: hidden;
    user-select: none;
}

.lm-art[b-rnuccwue1d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .9;
}

    .lm-art-under[b-rnuccwue1d] {
        mix-blend-mode: lighten;
        opacity: .55;
        filter: saturate(.55) brightness(.85);
    }

.lm-grid[b-rnuccwue1d] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--cx-bd-5) 1px, transparent 1px),
        linear-gradient(90deg, var(--cx-bd-5) 1px, transparent 1px);
    background-size: 12.5% 12.5%;
    opacity: .3;
}

/* ★The transition is the "real time".★ The poll delivers a new sample every ~2.5s; gliding the dot
   there over 1.4s reads as the member WALKING. It only works because @key pins each dot's DOM node
   to its member across renders — a recreated node snaps instead of gliding. */
.lm-dot[b-rnuccwue1d] {
    position: absolute;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid #160e08;
    border-radius: 1px;
    pointer-events: auto;
    transition: left 1.4s linear, top 1.4s linear;
    z-index: 3;
}

    .lm-dot.dead[b-rnuccwue1d] {
        opacity: .22;
    }

    /* Standing on a storey other than the one shown: visibly elsewhere, never hidden. */
    .lm-dot.off-floor[b-rnuccwue1d] {
        opacity: .18;
    }

/* Enemies: round and red where members are square and role-coloured — the two populations must
   never be confusable at a glance. Size carries hp (the Encounter page's convention). */
.lm-enemy[b-rnuccwue1d] {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 99px;
    background: #d65a5a;
    border: 1px solid #160e08;
    box-shadow: 0 0 6px rgba(214, 90, 90, .5);
    pointer-events: auto;
    transition: left 1.4s linear, top 1.4s linear, width .6s linear, height .6s linear;
    z-index: 2;
}

    .lm-enemy.boss[b-rnuccwue1d] {
        background: #7a2417;
        border: 2px solid #f0623a;
        box-shadow: 0 0 10px rgba(240, 98, 58, .6);
        z-index: 3;
    }

    .lm-enemy.off-floor[b-rnuccwue1d] {
        opacity: .18;
    }

.lm-enemy-name[b-rnuccwue1d] {
    position: absolute;
    transform: translate(-50%, 13px);
    font: 600 10px 'Cinzel', serif;
    letter-spacing: .06em;
    color: #f0916a;
    text-shadow: 0 0 6px #120c07, 0 0 3px #120c07;
    white-space: nowrap;
    pointer-events: none;
    transition: left 1.4s linear, top 1.4s linear;
    z-index: 4;
}

.lm-aggro[b-rnuccwue1d] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

    .lm-aggro line[b-rnuccwue1d] {
        stroke: rgba(214, 90, 90, .45);
        stroke-width: 1px;
    }

.lm-skull[b-rnuccwue1d] {
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--cx-red);
    font: 13px 'Cinzel', serif;
    opacity: .8;
    pointer-events: none;
    transition: left 1.4s linear, top 1.4s linear;
    z-index: 4;
}

.lm-legend[b-rnuccwue1d] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font: 11px 'Cinzel', serif;
    color: var(--cx-dim);
    align-items: center;
}

    .lm-legend span[b-rnuccwue1d] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .lm-legend i[b-rnuccwue1d] {
        width: 9px;
        height: 9px;
        display: inline-block;
        flex: none;
        transform: rotate(45deg);
    }

    .lm-legend em.skull[b-rnuccwue1d] {
        font-style: normal;
        color: var(--cx-red);
    }

    .lm-legend i.enemy[b-rnuccwue1d] {
        transform: none;
        border-radius: 99px;
        background: #d65a5a;
    }

        .lm-legend i.enemy.boss[b-rnuccwue1d] {
            background: #7a2417;
            border: 2px solid #f0623a;
        }

    .lm-legend i.aggro[b-rnuccwue1d] {
        width: 16px;
        height: 0;
        border-top: 1px solid rgba(214, 90, 90, .7);
    }

    .lm-legend .warn[b-rnuccwue1d] {
        color: var(--cx-amber, #e0a526);
        font: italic 12px 'EB Garamond', serif;
    }

    .lm-legend .note[b-rnuccwue1d] {
        font: italic 12px 'EB Garamond', serif;
        color: var(--cx-dimmer);
        margin-left: auto;
    }
/* /Components/Codex/RaidMeterTable.razor.rz.scp.css */
/*
   Scoped to RaidMeterTable. Isolation is used here rather than inline styles (the house default) for one
   reason: a ranked meter has to survive a narrow window, and a media query cannot be written inline. A
   40-row table that overflows sideways on a laptop is a table nobody reads.
*/

.mt-head[b-7i7dbri9pg],
.mt-row[b-7i7dbri9pg] {
    display: grid;
    /* Column 3 is 92px, not 78: "DAMAGE TAKEN" wraps to two lines at 78 and doubles this table's
       header height, so a report showing damage-done above damage-taken has two headers that do not
       line up. Widened rather than renamed — ValueLabel is dual-purpose (the silence footer renders
       it as "did no @ValueLabel"), so shortening the label there would read "did no taken". */
    grid-template-columns: 26px minmax(120px, 1fr) 92px 58px 74px 62px minmax(96px, 150px);
    gap: 10px;
    align-items: center;
    padding: 4px 8px;
}

.mt-head[b-7i7dbri9pg] {
    margin-top: 10px;
    border-bottom: 1px solid var(--cx-bd-4);
    padding-bottom: 6px;
}

    .mt-head span[b-7i7dbri9pg] {
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.r[b-7i7dbri9pg] {
    text-align: right;
}

.mt-rows[b-7i7dbri9pg] {
    display: flex;
    flex-direction: column;
}

.mt-row[b-7i7dbri9pg] {
    border-bottom: 1px solid #201810;
}

    .mt-row:last-child[b-7i7dbri9pg] {
        border-bottom: none;
    }

    .mt-row:hover[b-7i7dbri9pg] {
        background: rgba(224,165,38,.045);
    }

.mt-rank[b-7i7dbri9pg] {
    font: 600 10px ui-monospace, monospace;
    color: var(--cx-muted);
    text-align: right;
}

/* The name cell is the bar's track: the bar sits BEHIND the name so the row reads as one object. */
.mt-name[b-7i7dbri9pg] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 3px 6px;
    overflow: hidden;
}

.mt-bar[b-7i7dbri9pg] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    /* Faint on purpose: this is a background quantity, not a foreground one. The number to the right is
       the measurement; the bar only has to make the SHAPE of the ranking readable in one glance. */
    opacity: .20;
    pointer-events: none;
}

.mt-who[b-7i7dbri9pg] {
    position: relative;
    font: 500 13px 'EB Garamond', serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* ★An id we could not name must not read like a name.★ Same treatment as every other unknown on this
       page: a mono face so the eye reads it as the number it is. ⚠The DIMMING lives in the row's inline
       style, not here — mt-who carries an inline colour and inline wins, so a colour rule in this file
       would be silently overridden and the cell would look resolved. */
    .mt-who.unnamed[b-7i7dbri9pg] {
        font: 500 12.5px ui-monospace, monospace;
    }

.mt-role[b-7i7dbri9pg] {
    position: relative;
    flex: none;
    font: 700 9px 'Cinzel', serif;
    letter-spacing: .06em;
    opacity: .85;
}

/* This raider against their OWN history on this encounter. It rides inside the name cell rather than
   claiming a column of its own, because on a raid with no recorded history every row would be a column of
   refusals — and a column of "not enough history" reads as forty bad parses at a glance. */
.mt-pct[b-7i7dbri9pg] {
    position: relative;
    flex: none;
    margin-left: 8px;
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .05em;
    white-space: nowrap;
}

    /* The sample size, dimmer than the rank but never hidden — see the markup's comment. */
    .mt-pct .n[b-7i7dbri9pg] {
        font: 400 10px 'EB Garamond', serif;
        letter-spacing: 0;
        color: var(--cx-faint);
    }

.mt-num[b-7i7dbri9pg] {
    font: 600 12.5px ui-monospace, monospace;
    color: var(--cx-cream);
}

.mt-dim[b-7i7dbri9pg] {
    font: 400 12px ui-monospace, monospace;
    color: var(--cx-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ★Never zero, never blank.★ An un-measurable cell has its own look so the eye files it as "we were not
   told" rather than as a small number it failed to read. */
.mt-unknown[b-7i7dbri9pg] {
    font: italic 400 11.5px 'EB Garamond', serif;
    color: var(--cx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-caveat[b-7i7dbri9pg] {
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid #6e5a1d;
    border-radius: 3px;
    background: rgba(224,165,38,.08);
    color: #e0a526;
    font: 400 12.5px 'EB Garamond', serif;
}

.mt-empty[b-7i7dbri9pg] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

.mt-cut[b-7i7dbri9pg] {
    margin-top: 8px;
    color: #e0a526;
    font: 400 12px 'EB Garamond', serif;
}

.mt-silence[b-7i7dbri9pg] {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--cx-bd-5);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font: 400 12px 'EB Garamond', serif;
}

    /* Unknown shouts. It is the finding, not the footnote. */
    .mt-silence .u[b-7i7dbri9pg] {
        color: var(--cx-red);
    }

    .mt-silence .z[b-7i7dbri9pg] {
        color: var(--cx-dim);
    }

    .mt-silence .g[b-7i7dbri9pg] {
        color: var(--cx-green-hi);
    }

@media (max-width: 900px) {
    .mt-head[b-7i7dbri9pg],
    .mt-row[b-7i7dbri9pg] {
        grid-template-columns: 22px minmax(90px, 1fr) 66px 50px 62px;
        gap: 7px;
    }

        /* Events and the metric-specific cell fall away first: both are secondary to amount / share / rate,
           and dropping them is better than a table that scrolls sideways. The values are still in the
           title attributes and in the full-width view. */
        .mt-head span:nth-child(6)[b-7i7dbri9pg],
        .mt-head span:nth-child(7)[b-7i7dbri9pg],
        .mt-row > :nth-child(6)[b-7i7dbri9pg],
        .mt-row > :nth-child(7)[b-7i7dbri9pg] {
            display: none;
        }
}
/* /Components/Codex/RaidPlayerPanel.razor.rz.scp.css */
/* Scoped to RaidPlayerPanel. */

/* The frozen-bot answer. It is the most valuable thing this route returns and it must not look like a
   page that failed to load, so it is loud and it is at the top. */
.pp-silent[b-w00cy4ddup] {
    margin-top: 10px;
    margin-bottom: 12px;
    padding: 10px 13px;
    border: 1px solid #6e2f1d;
    border-radius: 3px;
    background: rgba(190,70,60,.09);
    color: var(--cx-red);
    font: 400 13px 'EB Garamond', serif;
}

.pp-activity[b-w00cy4ddup] {
    margin-top: 13px;
    padding: 8px 0 8px 11px;
    border-left: 3px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font: 400 12.5px 'EB Garamond', serif;
    color: var(--cx-muted);
}

    .pp-activity .d[b-w00cy4ddup] {
        font: 400 11.5px ui-monospace, monospace;
        color: var(--cx-dim);
    }

.pp-note[b-w00cy4ddup],
.pp-cut[b-w00cy4ddup] {
    margin-top: 11px;
    font: 400 12.5px 'EB Garamond', serif;
    color: var(--cx-muted);
}
/* /Components/Codex/RaidPrescribedStrip.razor.rz.scp.css */
/* Scoped to RaidPrescribedStrip. */

.ps-refusal[b-400kidwdjx] {
    margin-top: 10px;
    color: #e0a526;
    font: 400 12.5px 'EB Garamond', serif;
}

.ps-absence[b-400kidwdjx] {
    margin-top: 10px;
    color: var(--cx-muted);
    font: italic 400 13px 'EB Garamond', serif;
}

.ps-pick[b-400kidwdjx] {
    margin-top: 11px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

    .ps-pick .l[b-400kidwdjx] {
        font: 600 9px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

    .ps-pick select[b-400kidwdjx] {
        background: #14100b;
        color: var(--cx-cream);
        border: 1px solid var(--cx-bd-4);
        padding: 3px 6px;
        font: 400 12.5px 'EB Garamond', serif;
        max-width: 320px;
    }

    .ps-pick .n[b-400kidwdjx] {
        font: 400 11.5px 'EB Garamond', serif;
        color: var(--cx-muted);
        flex: 1 1 240px;
    }

.ps-head[b-400kidwdjx],
.ps-row[b-400kidwdjx] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1.2fr) 116px;
    gap: 4px 12px;
    align-items: baseline;
    padding: 6px 6px;
}

.ps-head[b-400kidwdjx] {
    margin-top: 12px;
    border-bottom: 1px solid var(--cx-bd-4);
    padding-bottom: 5px;
}

    .ps-head span[b-400kidwdjx] {
        font: 600 9px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

.ps-row[b-400kidwdjx] {
    border-bottom: 1px solid #201810;
}

    .ps-row:last-child[b-400kidwdjx] {
        border-bottom: none;
    }

    .ps-row .s[b-400kidwdjx] {
        font: 500 12.5px 'EB Garamond', serif;
        color: var(--cx-cream);
    }

    .ps-row .d[b-400kidwdjx],
    .ps-row .o[b-400kidwdjx] {
        font: 400 12.5px 'EB Garamond', serif;
        color: var(--cx-body);
    }

    .ps-row .v[b-400kidwdjx] {
        font: 700 10px 'Cinzel', serif;
        letter-spacing: .08em;
        white-space: nowrap;
    }

    /* The missing-half sentence spans the whole row, under it. It is the row's actual content whenever a
       comparison could not be made, and burying it in a tooltip would recreate the silent dash. */
    .ps-row .w[b-400kidwdjx] {
        grid-column: 1 / -1;
        margin-top: 3px;
        font: 400 11.5px 'EB Garamond', serif;
        color: var(--cx-muted);
    }

        .ps-row .w strong[b-400kidwdjx] {
            color: #e0a526;
            font: 600 9.5px 'Cinzel', serif;
            letter-spacing: .08em;
        }

@media (max-width: 980px) {
    .ps-head[b-400kidwdjx] {
        display: none;
    }

    .ps-row[b-400kidwdjx] {
        grid-template-columns: 1fr 100px;
    }

        .ps-row .d[b-400kidwdjx],
        .ps-row .o[b-400kidwdjx] {
            grid-column: 1 / -1;
        }
}
/* /Components/Codex/RaidReadinessGrid.razor.rz.scp.css */
/* ★The eight states differ in FILL, not only in hue★ — the same doctrine RaidBuffPanel.razor.css
   opens with, held here for the reusable grid's glyph cells: roughly one man in twelve cannot
   separate the red square from the grey one, and the pair that must never merge is "we could not
   read this seat" against "this raider is missing Fortitude". Every state below carries a
   non-colour distinction (border style, background texture, or opacity treatment) beside its hue. */

.rg[b-ceyuziczur] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rg-head[b-ceyuziczur] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rg-verdict[b-ceyuziczur] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid var(--cx-bd-3);
    color: var(--cx-muted);
}

.rg-verdict.on[b-ceyuziczur] { color: var(--cx-green-hi); border-color: var(--cx-green-hi); }
.rg-verdict.gap[b-ceyuziczur] { color: var(--cx-red); border-color: var(--cx-red); }
.rg-verdict.fading[b-ceyuziczur] { color: #e0a526; border-color: #e0a526; }
.rg-verdict.unread[b-ceyuziczur] { color: var(--cx-muted); border-style: dashed; }
.rg-verdict.reach[b-ceyuziczur] { color: var(--cx-muted); border-style: dotted; }
.rg-verdict.alien[b-ceyuziczur] { color: var(--cx-red); border-style: double; }
.rg-verdict.quiet[b-ceyuziczur] { color: var(--cx-dim); }
.rg-verdict.carried[b-ceyuziczur] { color: var(--cx-gilt-bright); }
.rg-verdict.theirs[b-ceyuziczur] { color: var(--cx-dim); border-style: dotted; }

.rg-resweep[b-ceyuziczur] {
    font-size: 11px;
    padding: 2px 10px;
}

.rg-hostnote[b-ceyuziczur],
.rg-note[b-ceyuziczur] {
    color: var(--cx-muted);
    font: 12px 'EB Garamond', serif;
}

.rg-note[b-ceyuziczur] {
    border-left: 2px solid var(--cx-bd-3);
    padding: 4px 10px;
}

.rg-note.rg-warn[b-ceyuziczur] {
    border-left-color: var(--cx-red);
}

.rg-legend[b-ceyuziczur] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--cx-dim);
    font: 11px 'EB Garamond', serif;
}

.rg-key[b-ceyuziczur] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rg-group-head[b-ceyuziczur] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 4px;
}

.rg-group-name[b-ceyuziczur] {
    font: 700 12px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-bright);
}

/* Wide content scrolls in its own box; the page never scrolls sideways. */
.rg-scroll[b-ceyuziczur] {
    overflow-x: auto;
}

.rg-table[b-ceyuziczur] {
    border-collapse: collapse;
}

.rg-table th.rg-col[b-ceyuziczur] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-muted);
    padding: 2px 4px;
    text-align: center;
}

.rg-table th.rg-col.on[b-ceyuziczur] { color: var(--cx-green-hi); }
.rg-table th.rg-col.gap[b-ceyuziczur] { color: var(--cx-red); }
.rg-table th.rg-col.fading[b-ceyuziczur] { color: #e0a526; }

.rg-table td.rg-name[b-ceyuziczur],
.rg-table th.rg-name[b-ceyuziczur] {
    font: 13px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
    padding: 1px 10px 1px 0;
    white-space: nowrap;
    text-align: left;
}

.rg-table td.rg-name a[b-ceyuziczur] {
    color: var(--cx-gilt-bright);
    text-decoration: none;
    border-bottom: 1px dotted var(--cx-bd-3);
}

.rg-table td[b-ceyuziczur] {
    padding: 1px 2px;
    text-align: center;
}

/* ── the eight squares ── */

.rg-cell[b-ceyuziczur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 2px;
    border: 1px solid var(--cx-bd-3);
}

/* up — solid fill, solid border */
.rg-cell.on[b-ceyuziczur] {
    color: #0f1408;
    background: var(--cx-green-hi);
    border-style: solid;
}

/* expiring — half-drained gradient: the same green, visibly running out */
.rg-cell.fading[b-ceyuziczur] {
    color: #16100a;
    background: linear-gradient(180deg, #e0a526 55%, rgba(224, 165, 38, .18) 55%);
    border-style: solid;
}

/* carried — hollow diamond on a faint gilt wash: stocked, not up, not a gap */
.rg-cell.carried[b-ceyuziczur] {
    color: var(--cx-gilt-bright);
    background: rgba(205, 184, 140, .12);
    border-style: solid;
}

/* missing — the one to act on: filled alarm, doubled edge */
.rg-cell.gap[b-ceyuziczur] {
    color: #1a0d08;
    background: var(--cx-red);
    border-style: double;
    border-width: 3px;
}

/* out of reach — hatched: modelled, unverified */
.rg-cell.reach[b-ceyuziczur] {
    color: var(--cx-muted);
    background: repeating-linear-gradient(45deg,
        rgba(160, 150, 130, .25) 0 3px, transparent 3px 6px);
    border-style: solid;
}

/* unread — dashed outline, no fill: this square says NOTHING */
.rg-cell.unread[b-ceyuziczur] {
    color: var(--cx-muted);
    background: transparent;
    border-style: dashed;
}

/* not ours — dotted outline, dimmed: policy, not an outage */
.rg-cell.theirs[b-ceyuziczur] {
    color: var(--cx-dim);
    background: transparent;
    border-style: dotted;
    opacity: .75;
}

/* unrecognised — loud outline: the wire moved ahead of this page */
.rg-cell.alien[b-ceyuziczur] {
    color: var(--cx-red);
    background: transparent;
    border-style: solid;
    outline: 1px dashed var(--cx-red);
    outline-offset: 1px;
}
/* /Components/Codex/RaidRouteMap.razor.rz.scp.css */
/* Scoped to RaidRouteMap. The box is a fixed pixel size (see RaidRouteUi.BoxSize — square in
   coordinate space, the art's own aspect when a calibrated floor renders); the wrapper is what
   makes a narrow screen scroll instead of scaling the box out from under the click maths. */

.rr-scroll[b-95scz6ev8q] {
    overflow: auto;
    max-width: 100%;
    padding-bottom: 4px;
}

    /* ★Only a ZOOMED map is a viewport.★ At 1x the box already fits the column, so bounding it would
       change a view nobody asked to change. Above 1x it does not: a 4x Molten Core box is 3040x2608px,
       and without a height cap the PAGE scrolls instead of the map -- the zoom controls, the legend and
       the step rail all leave the screen, and "pan" becomes "lose the toolbar". The cap turns the
       wrapper into the window the scrollbars pan inside, which is the only reason this class exists.
       overscroll-behavior keeps a pan that hits the edge from carrying on into the page scroll. */
    .rr-scroll.zoomed[b-95scz6ev8q] {
        max-height: 78vh;
        overscroll-behavior: contain;
        border: 1px solid var(--cx-bd-5);
        border-radius: 3px;
    }

/* The current factor, printed on the reset button. Tabular-ish fixed width so stepping 1x -> 1.5x -> 2x
   does not shuffle the + button sideways under the cursor that is clicking it. */
.rr-zoomlabel[b-95scz6ev8q] {
    min-width: 44px;
    text-align: center;
}

.rr-box[b-95scz6ev8q] {
    position: relative;
    flex: none;
    background: radial-gradient(circle at 50% 50%, #1a120b, #120c07);
    border: 1px solid var(--cx-bd-5);
    border-radius: 3px;
    overflow: hidden;
    user-select: none;
}

/* The floor art STACK. Each floor's PNG holds only its own WMO groups, so every floor sharing the
   rect layers underneath and the active one paints last on top — together they are the whole
   instance. Fills the box exactly (the box's aspect IS the image's, BoxSize), no letterboxing. */
.rr-art[b-95scz6ev8q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .9;
}

    /* A storey other than the one being edited: present so the map is whole, dimmed so the eye
       still knows which level is live. ★Lighten-blended ABOVE the active floor★ — the geometry PNG
       ships an OPAQUE dark canvas, so stacked normally the top layer blankets the bottom; lighten
       keeps whichever pixel is brighter, which makes the dark canvas effectively transparent and
       lets this storey read only where the active one has nothing of its own. */
    .rr-art-under[b-95scz6ev8q] {
        mix-blend-mode: lighten;
        opacity: .55;
        filter: saturate(.55) brightness(.85);
    }

    /* An inactive storey's TILE overlay: already transparent, so plain dimming — lighten would
       double-brighten where it crosses the active floor's geometry. */
    .rr-art-faint[b-95scz6ev8q] {
        opacity: .35;
        filter: saturate(.55) brightness(.85);
    }

.rr-floors[b-95scz6ev8q] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.rr-grid[b-95scz6ev8q] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--cx-bd-5) 1px, transparent 1px),
        linear-gradient(90deg, var(--cx-bd-5) 1px, transparent 1px);
    background-size: 12.5% 12.5%;
    opacity: .3;
}

/* ── patrols ──────────────────────────────────────────────────────────────────────────────────── */

/* The patrol SVG stretches a 0..100 unit square over the box, so its points ARE the dots' percent
   values; non-scaling-stroke on the polylines keeps the line width in screen pixels. */
.rr-patrols[b-95scz6ev8q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.rr-patrol[b-95scz6ev8q] {
    fill: none;
    stroke: rgba(224, 165, 38, .5);
    stroke-width: 1.5px;
    stroke-dasharray: 5 3;
    stroke-linejoin: round;
}

    /* Walking another storey: visibly elsewhere, never gone — the off-floor dot rule. */
    .rr-patrol.off[b-95scz6ev8q] {
        stroke: rgba(224, 165, 38, .14);
    }

/* ── route legs ───────────────────────────────────────────────────────────────────────────────── */

.rr-leg[b-95scz6ev8q],
.rr-pullback[b-95scz6ev8q] {
    position: absolute;
    height: 1px;
    transform-origin: 0 50%;
    pointer-events: none;
}

.rr-leg[b-95scz6ev8q] {
    background: linear-gradient(90deg, rgba(205,184,140,.55), rgba(205,184,140,.18));
}

/* The pack → tanks line. Dashed, because it is not a path anybody walks: it is the direction the pack
   travels when it is pulled back, and drawing it solid would read as a route leg. */
.rr-pullback[b-95scz6ev8q] {
    height: 0;
    border-top: 1px dashed rgba(224,165,38,.45);
}

/* ── spawns ───────────────────────────────────────────────────────────────────────────────────── */

.rr-dot[b-95scz6ev8q] {
    position: absolute;
    width: 9px;
    height: 9px;
    padding: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid #160e08;
    border-radius: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rr-dot:hover[b-95scz6ev8q] {
        outline: 1px solid var(--cx-gilt-bright);
        outline-offset: 2px;
        z-index: 6;
    }

    /* A boss is bigger, rounder and glows: it is the landmark the whole map is read against. */
    .rr-dot.boss[b-95scz6ev8q] {
        width: 15px;
        height: 15px;
        border-radius: 99px;
        transform: translate(-50%, -50%);
        border-color: #7a5e22;
        box-shadow: 0 0 10px rgba(240,198,98,.55);
        z-index: 4;
    }

    /* Already claimed by some pull — carries its number. */
    .rr-dot.taken[b-95scz6ev8q] {
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%);
        border-radius: 2px;
        z-index: 5;
    }

        .rr-dot.taken.boss[b-95scz6ev8q] {
            width: 18px;
            height: 18px;
            border-radius: 99px;
        }

    /* In the step being edited. The ring is what makes the active pull readable where the twelve-colour
       palette has wrapped and two pulls share a hue. */
    .rr-dot.mine[b-95scz6ev8q] {
        outline: 2px solid var(--cx-cream-hi);
        outline-offset: 2px;
        z-index: 7;
    }

    .rr-dot > .n[b-95scz6ev8q] {
        font: 700 9px 'Cinzel', serif;
        color: #160e08;
        pointer-events: none;
        line-height: 1;
    }

    /* A script-summoned boss: no creature row, no guid, nothing to pull — a dashed hollow ring
       where a boss WILL stand, deliberately not the filled dot of a spawn that exists right now. */
    .rr-dot.summoned[b-95scz6ev8q] {
        background: rgba(240, 198, 98, .12);
        border: 2px dashed #c9a44a;
        box-shadow: none;
        cursor: help;
    }

    /* Standing on a floor other than the one being shown. Dimmed, never hidden: a hidden dot is a
       pack the operator cannot select; a dimmed one is a pack that is visibly elsewhere. */
    .rr-dot.off-floor[b-95scz6ev8q] {
        opacity: .22;
    }

        .rr-dot.off-floor:hover[b-95scz6ev8q] {
            opacity: .8;
        }

.rr-bossname[b-95scz6ev8q] {
    position: absolute;
    transform: translate(-50%, 14px);
    font: 600 10px 'Cinzel', serif;
    letter-spacing: .06em;
    color: var(--cx-gilt-bright);
    text-shadow: 0 0 6px #120c07, 0 0 3px #120c07;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}

/* ── stage points and tank anchors ────────────────────────────────────────────────────────────── */

/* Where the RAID gathers: a hollow ring, parchment. Hollow on purpose — it is a place to stand, not a
   thing to fight, and it must not read as another mob. */
.rr-stage[b-95scz6ev8q] {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border: 2px solid #cdb88c;
    border-radius: 99px;
    background: rgba(18,12,7,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 8;
}

    .rr-stage > span[b-95scz6ev8q] {
        font: 700 11px 'Cinzel', serif;
        color: #f7e9c2;
    }

    .rr-stage.active[b-95scz6ev8q] {
        border-color: var(--cx-cream-hi);
        box-shadow: 0 0 12px rgba(247,233,194,.45);
    }

/* Where the TANKS hold: filled, amber, and a different SHAPE. Colour alone would be a distinction
   roughly one man in twelve cannot make — the same reason the buff board does not rely on it. */
.rr-anchor[b-95scz6ev8q] {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 2px 7px;
    border: 1px solid #7a5e22;
    border-radius: 2px;
    background: linear-gradient(180deg, #e6b94a, #b07d1f);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
    pointer-events: none;
    z-index: 9;
}

    .rr-anchor > span[b-95scz6ev8q] {
        font: 700 10px 'Cinzel', serif;
        color: #160e08;
        letter-spacing: .04em;
    }

    .rr-anchor.active[b-95scz6ev8q] {
        box-shadow: 0 0 12px rgba(224,165,38,.7);
    }

/* ── legend ───────────────────────────────────────────────────────────────────────────────────── */

.rr-legend[b-95scz6ev8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font: 11px 'Cinzel', serif;
    color: var(--cx-dim);
    align-items: center;
}

    .rr-legend span[b-95scz6ev8q] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .rr-legend .note[b-95scz6ev8q] {
        font: italic 12px 'EB Garamond', serif;
        color: var(--cx-dimmer);
        margin-left: auto;
    }

    .rr-legend i[b-95scz6ev8q] {
        width: 10px;
        height: 10px;
        display: inline-block;
        flex: none;
    }

.k-boss[b-95scz6ev8q] {
    border-radius: 99px;
    background: #f0c662;
}

.k-free[b-95scz6ev8q] {
    transform: rotate(45deg);
    background: #6e5a33;
}

.k-pull[b-95scz6ev8q] {
    border-radius: 2px;
}

.k-stage[b-95scz6ev8q] {
    border-radius: 99px;
    border: 2px solid #cdb88c;
    background: transparent;
}

.k-anchor[b-95scz6ev8q] {
    background: linear-gradient(180deg, #e6b94a, #b07d1f);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

.k-line[b-95scz6ev8q] {
    height: 0;
    border-top: 1px dashed rgba(224,165,38,.7);
    width: 18px;
}

.k-summoned[b-95scz6ev8q] {
    border-radius: 99px;
    border: 2px dashed #c9a44a;
    background: rgba(240,198,98,.12);
}

.k-patrol[b-95scz6ev8q] {
    height: 0;
    border-top: 1.5px dashed rgba(224,165,38,.6);
    width: 18px;
}
/* /Components/Codex/RaidRouteRun.razor.rz.scp.css */
/* Scoped to RaidRouteRun. */

.rr-run-head[b-g5vw99oc9g] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}

.rr-live[b-g5vw99oc9g] {
    font: 700 13px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-bright);
}

    .rr-live .done[b-g5vw99oc9g] {
        color: var(--cx-green-hi);
    }

    .rr-live .none[b-g5vw99oc9g] {
        color: var(--cx-dimmer);
        font-style: italic;
    }

.rr-tally[b-g5vw99oc9g] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    margin-left: auto;
}

.rr-step[b-g5vw99oc9g] {
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-bd-4);
    border-radius: 3px;
    padding: 8px 11px;
    margin-bottom: 7px;
    background: rgba(0,0,0,.14);
}

    /* The step the run is ON. Loud, because the single most useful fact this panel carries is where the
       raid actually is. */
    .rr-step.live[b-g5vw99oc9g] {
        border-left-color: var(--cx-gilt);
        background: rgba(224,165,38,.06);
        box-shadow: inset 0 0 24px rgba(224,165,38,.05);
    }

.rr-step-top[b-g5vw99oc9g] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rr-ord[b-g5vw99oc9g] {
    width: 21px;
    height: 21px;
    flex: none;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px 'Cinzel', serif;
    color: #160e08;
}

.rr-title[b-g5vw99oc9g] {
    font: 600 13px 'EB Garamond', serif;
    color: var(--cx-head);
    flex: 1;
    min-width: 0;
}

.rr-state[b-g5vw99oc9g] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .12em;
    flex: none;
}

.rr-action[b-g5vw99oc9g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
    padding-left: 30px;
}

.rr-verb[b-g5vw99oc9g] {
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
    flex: none;
    width: 62px;
}

.rr-what[b-g5vw99oc9g] {
    font: 400 12.5px 'EB Garamond', serif;
    color: var(--cx-body);
    flex: 1;
    min-width: 140px;
}

.rr-none[b-g5vw99oc9g] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
}

/* The state chip carries its colour TWICE — text and border — because the chip sits on a faint gilt
   wash that swallows a single coloured word at a glance. Same reasoning as the director counts. */
.rr-badge[b-g5vw99oc9g] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .08em;
    border: 1px solid;
    border-radius: 99px;
    padding: 2px 9px;
    flex: none;
    white-space: nowrap;
}

.rr-recover[b-g5vw99oc9g] {
    color: var(--cx-red);
    border-color: rgba(221,138,106,.4);
}

/* Deck level, once — the command has one destination and had forty buttons. */
.rr-recover-row[b-g5vw99oc9g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
}

.rr-recover-note[b-g5vw99oc9g] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.45;
}

.rr-note[b-g5vw99oc9g] {
    /* 100px = .rr-action's 30px padding-left + .rr-verb's 62px column + the row's 8px gap. At 92 the
       note hung eight pixels to the LEFT of the text it explains, which reads as a second column
       rather than a continuation. Hand-summed on purpose: deriving it from a shared custom property
       would have to be applied to .rr-action's padding too, which moves the verb and breaks the row. */
    margin: 4px 0 0 100px;
    font: italic 12px 'EB Garamond', serif;
    line-height: 1.45;
    opacity: .95;
}
/* /Components/Codex/RaidRouteSteps.razor.rz.scp.css */
/* Scoped to RaidRouteSteps. */

.rs-head[b-ng1hdrjhoq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rs-count[b-ng1hdrjhoq] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    margin-right: auto;
}

.rs-empty[b-ng1hdrjhoq] {
    padding: 14px 16px;
    border: 1px dashed var(--cx-bd-4);
    border-radius: 3px;
    color: var(--cx-muted);
    font: 400 13px 'EB Garamond', serif;
    line-height: 1.5;
}

.rs-row[b-ng1hdrjhoq] {
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-bd-4);
    border-radius: 3px;
    padding: 9px 11px;
    margin-bottom: 8px;
    background: rgba(0,0,0,.14);
    cursor: pointer;
}

    .rs-row.active[b-ng1hdrjhoq] {
        border-color: #7a5e22;
        border-left-color: var(--cx-gilt);
        background: rgba(224,165,38,.06);
    }

    /* A step the validator refuses. ★Loud on the row, not only in a banner★ — "3 errors" at the top of
       the page is a number, not a location. */
    .rs-row.broken[b-ng1hdrjhoq] {
        border-left-color: var(--cx-red);
    }

.rs-top[b-ng1hdrjhoq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rs-ord[b-ng1hdrjhoq] {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px 'Cinzel', serif;
    color: #160e08;
}

/* The kind SELECT. Sized to the longest label so a row does not reflow when the kind changes. */
.rs-kind[b-ng1hdrjhoq] {
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
    flex: none;
    width: 78px;
    padding: 3px 4px;
}

.rs-label[b-ng1hdrjhoq] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 4px 8px;
}

/* ★The example labels are INSTRUCTION, and instruction repeated 24 times reads as content.★ A plan of
   27 steps showed `label — 'Lucifron trash', 'second bridge'` on every unlabelled row, so the column
   scanned as a wall of Lucifron. The hint belongs to the input the operator is typing in, so it is
   revealed on focus and hidden everywhere else — an empty row then says nothing, which is the truth
   about it. CSS only: no JS, and the placeholder attribute stays for screen readers and for the
   accessibility tree. */
.rs-label[b-ng1hdrjhoq]::placeholder {
    color: transparent;
}

.rs-label:focus[b-ng1hdrjhoq]::placeholder {
    color: var(--cx-dim);
}

.rs-note[b-ng1hdrjhoq] {
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    padding: 3px 8px;
    font-style: italic;
}

.rs-tools[b-ng1hdrjhoq] {
    display: flex;
    gap: 4px;
    flex: none;
}

.rs-del[b-ng1hdrjhoq] {
    color: var(--cx-red);
}

/* ── the pack ─────────────────────────────────────────────────────────────────────────────────── */

.rs-pack[b-ng1hdrjhoq] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.rs-none[b-ng1hdrjhoq] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
}

.rs-target[b-ng1hdrjhoq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 11.5px 'EB Garamond', serif;
    color: var(--cx-body);
    background: rgba(224,165,38,.08);
    border: 1px solid var(--cx-bd-4);
    border-radius: 99px;
    padding: 2px 9px;
    white-space: nowrap;
}

    .rs-target:hover[b-ng1hdrjhoq] {
        border-color: #7a5e22;
        color: var(--cx-head);
    }

/* ── the mark picker, on the chip ─────────────────────────────────────────────────────────────── */

.rs-icons[b-ng1hdrjhoq] {
    display: inline-flex;
    gap: 1px;
}

.rs-icon[b-ng1hdrjhoq] {
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--cx-dimmer);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 1px 2px;
}

    .rs-icon:hover[b-ng1hdrjhoq] {
        color: var(--cx-gilt-bright);
        border-color: var(--cx-bd-4);
    }

    /* ★The bound mark is the only one that is not dim.★ Eight equally-lit glyphs on a chip say which
       icons exist, not which one this spawn wears. */
    .rs-icon.on[b-ng1hdrjhoq] {
        color: var(--cx-gilt-bright);
        border-color: var(--cx-gilt-dim);
        background: rgba(224,165,38,.14);
    }

    .rs-target.boss[b-ng1hdrjhoq] {
        color: var(--cx-gilt-bright);
        border-color: #7a5e22;
    }

    /* ★A summoned encounter — designated by ENTRY, with no dot on the map to pair with.★ Dashed on
       purpose: the chip is a promise that resolves live, not a spawn the catalog can point at, and it
       must read differently from both a normal chip and an unknown-guid one. */
    .rs-target.summoned[b-ng1hdrjhoq] {
        border-style: dashed;
        font-style: italic;
    }

    /* ★A guid the catalog has never heard of.★ It is drawn as damage, not as a chip with a slightly
       different word in it, because it is the single failure that turns a stored plan into a run that
       stops halfway. */
    .rs-target.unknown[b-ng1hdrjhoq] {
        color: var(--cx-red);
        border-color: var(--cx-red);
        background: rgba(221,138,106,.12);
        text-decoration: line-through;
    }

    .rs-target .x[b-ng1hdrjhoq] {
        opacity: .45;
        margin-left: 3px;
    }

    /* Deletion is its own control now — the whole chip used to be the delete button, so there was
       nowhere on it to put anything else and a mis-click on a name destroyed the target. */
    .rs-target .rs-del[b-ng1hdrjhoq] {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 1px;
        font-size: 11px;
        line-height: 1;
    }

/* ── the wait's window ────────────────────────────────────────────────────────────────────────── */

.rs-wait[b-ng1hdrjhoq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.rs-waitlabel[b-ng1hdrjhoq] {
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
}

.rs-window[b-ng1hdrjhoq] {
    width: 82px;
    font-size: 12px;
    padding: 3px 8px;
}

.rs-measured[b-ng1hdrjhoq] {
    flex: 1;
    min-width: 140px;
    font-size: 12px;
    font-style: italic;
    padding: 3px 8px;
}

/* ── step overrides, read-only ────────────────────────────────────────────────────────────────── */

.rs-over[b-ng1hdrjhoq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 7px;
    padding: 6px 9px;
    border: 1px dashed var(--cx-bd-4);
    border-radius: 3px;
}

.rs-overhead[b-ng1hdrjhoq] {
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
}

.rs-overline[b-ng1hdrjhoq] {
    font: 400 12px ui-monospace, monospace;
    color: var(--cx-body);
}

.rs-overnote[b-ng1hdrjhoq] {
    font: italic 11.5px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.45;
}

/* ── the two places ───────────────────────────────────────────────────────────────────────────── */

.rs-points[b-ng1hdrjhoq] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 7px;
}

.rs-point[b-ng1hdrjhoq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 12px 'EB Garamond', serif;
    color: var(--cx-body);
}

    /* An absent point is stated, never omitted. A row that simply lacks the line reads as "not
       applicable"; this reads as "nothing says where", which is what it means. */
    .rs-point.off[b-ng1hdrjhoq] {
        color: var(--cx-dimmer);
        font-style: italic;
    }

    .rs-point i[b-ng1hdrjhoq] {
        width: 10px;
        height: 10px;
        flex: none;
        display: inline-block;
    }

.k-stage[b-ng1hdrjhoq] {
    border-radius: 99px;
    border: 2px solid #cdb88c;
    background: transparent;
}

.k-anchor[b-ng1hdrjhoq] {
    background: linear-gradient(180deg, #e6b94a, #b07d1f);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

.rs-point.off i[b-ng1hdrjhoq] {
    opacity: .35;
}

.rs-clear[b-ng1hdrjhoq] {
    background: none;
    border: none;
    color: var(--cx-dimmer);
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
}

    .rs-clear:hover[b-ng1hdrjhoq] {
        color: var(--cx-red);
    }

/* ── findings ─────────────────────────────────────────────────────────────────────────────────── */

.rs-finding[b-ng1hdrjhoq] {
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 3px;
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .rs-finding b[b-ng1hdrjhoq] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        margin-right: 7px;
    }

    .rs-finding.err[b-ng1hdrjhoq] {
        color: var(--cx-red);
        background: rgba(221,138,106,.1);
        border: 1px solid rgba(221,138,106,.35);
    }

    .rs-finding.warn[b-ng1hdrjhoq] {
        color: #e0a526;
        background: rgba(224,165,38,.07);
        border: 1px solid rgba(224,165,38,.28);
    }
/* /Components/Codex/RaidSeatInspector.razor.rz.scp.css */
.si[b-ebce6ea9gm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 13px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
}

.si-line[b-ebce6ea9gm] {
    line-height: 1.5;
}

.si-quiet[b-ebce6ea9gm] {
    color: var(--cx-muted);
    font-style: italic;
}

.si-bad[b-ebce6ea9gm] {
    color: var(--cx-red);
}

.si-kit[b-ebce6ea9gm],
.si-badge[b-ebce6ea9gm] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .06em;
    padding: 1px 7px;
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    color: var(--cx-gilt-bright);
}

.si-badge[b-ebce6ea9gm] {
    color: var(--cx-muted);
    margin-right: 4px;
}

.si-badge.on[b-ebce6ea9gm] {
    color: var(--cx-green-hi);
    border-color: var(--cx-green-hi);
}

/* ── the piloting seam ───────────────────────────────────────────────────────────────────────────
   Set apart by a rule rather than by colour: everything above this line is a READING of the seat,
   everything below it can change somebody's character. The separation is the affordance. */
.si-seam[b-ebce6ea9gm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--cx-bd-4);
}

.si-seam-head[b-ebce6ea9gm] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-gilt-bright);
    margin-top: 4px;
}

.si-seam-row[b-ebce6ea9gm] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.si-pick[b-ebce6ea9gm],
.si-confirm[b-ebce6ea9gm] {
    font-size: 12px;
    padding: 2px 5px;
    min-width: 0;
    flex: 1 1 120px;
}

.si-opt[b-ebce6ea9gm] {
    display: block;
    line-height: 1.5;
}

.si-plan[b-ebce6ea9gm],
.si-ledger[b-ebce6ea9gm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.45;
}

.si-indent[b-ebce6ea9gm] {
    padding-left: 16px;
}

/* The consent enumeration: what a press WILL do, and what it deliberately will not. The negative
   half is the load-bearing one, so it is never dimmer than the positive half. */
.si-will[b-ebce6ea9gm] {
    color: var(--cx-green-hi);
}

.si-wont[b-ebce6ea9gm] {
    color: var(--cx-red);
}

.si-warn[b-ebce6ea9gm] {
    color: #e0a526;
}

.si-outcome[b-ebce6ea9gm] {
    padding: 6px 8px;
    border-left: 2px solid var(--cx-bd-3);
    line-height: 1.5;
}

.si-outcome.ok[b-ebce6ea9gm] {
    border-left-color: var(--cx-green-hi);
    color: var(--cx-green-hi);
}

.si-outcome.bad[b-ebce6ea9gm] {
    border-left-color: var(--cx-red);
    color: var(--cx-red);
}

/* The hand-back is its own line and never shares a colour with the pass's verdict: a failed pass
   normally still hands the character back, and a green pass with no hand-back is the incident. */
.si-hand.ok[b-ebce6ea9gm] {
    color: var(--cx-green-hi);
}

.si-hand.bad[b-ebce6ea9gm] {
    color: var(--cx-red);
    font-weight: 600;
}

.si-hand.quiet[b-ebce6ea9gm] {
    color: var(--cx-muted);
    font-style: italic;
}
/* /Components/Codex/RaidThreatInspector.razor.rz.scp.css */
/* The threat drawer. Rows, not a re-aggregation — the styling exists to keep forty numbers readable,
   not to add a second opinion about them. */

.ti[b-qyarcbm0ko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ti-enemy[b-qyarcbm0ko] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ti-name[b-qyarcbm0ko] {
    color: var(--cx-cream);
    font: 700 13px 'Cinzel', serif;
    letter-spacing: .05em;
}

.ti-hp[b-qyarcbm0ko] {
    color: var(--cx-gilt-bright);
    font: 700 13px 'Cinzel', serif;
}

.ti-flag[b-qyarcbm0ko] {
    border: 1px solid var(--cx-bd-3);
    color: var(--cx-gilt);
    font: 700 9px 'Cinzel', serif;
    letter-spacing: .08em;
    padding: 1px 5px;
}

.ti-over[b-qyarcbm0ko] {
    color: var(--cx-red);
    font: 700 9px 'Cinzel', serif;
    letter-spacing: .08em;
}

.ti-id[b-qyarcbm0ko] {
    color: var(--cx-faint);
    font: 10px ui-monospace, monospace;
    margin-left: auto;
}

.ti-table[b-qyarcbm0ko] {
    border-collapse: collapse;
    width: 100%;
}

.ti-table th[b-qyarcbm0ko] {
    color: var(--cx-dim);
    font: 10px 'Cinzel', serif;
    letter-spacing: .08em;
    text-align: left;
    padding: 2px 4px;
    border-bottom: 1px solid var(--cx-bd-5);
}

.ti-table td[b-qyarcbm0ko] {
    color: var(--cx-body);
    font: 12px 'EB Garamond', serif;
    padding: 2px 4px;
}

.ti-table tr.tanking td[b-qyarcbm0ko] {
    color: var(--cx-cream);
}

.ti-num[b-qyarcbm0ko] {
    font: 12px ui-monospace, monospace;
    text-align: right;
}

.ti-note[b-qyarcbm0ko] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-komwh1pz47] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-komwh1pz47] {
    flex: 1;
}

.sidebar[b-komwh1pz47] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-komwh1pz47] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-komwh1pz47]  a, .top-row[b-komwh1pz47]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-komwh1pz47]  a:hover, .top-row[b-komwh1pz47]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-komwh1pz47]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-komwh1pz47] {
        justify-content: space-between;
    }

    .top-row[b-komwh1pz47]  a, .top-row[b-komwh1pz47]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-komwh1pz47] {
        flex-direction: row;
    }

    .sidebar[b-komwh1pz47] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-komwh1pz47] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-komwh1pz47]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-komwh1pz47], article[b-komwh1pz47] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-komwh1pz47] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-komwh1pz47] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lhf7rem7gc] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-lhf7rem7gc] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-lhf7rem7gc] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-lhf7rem7gc] {
    font-size: 1.1rem;
}

.bi[b-lhf7rem7gc] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-lhf7rem7gc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-lhf7rem7gc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-lhf7rem7gc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-lhf7rem7gc] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-lhf7rem7gc] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-lhf7rem7gc] {
        padding-bottom: 1rem;
    }

    .nav-item[b-lhf7rem7gc]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-lhf7rem7gc]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-lhf7rem7gc]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-lhf7rem7gc] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-lhf7rem7gc] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-lhf7rem7gc] {
        display: none;
    }

    .nav-scrollable[b-lhf7rem7gc] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uv36d4pc6o],
.components-reconnect-repeated-attempt-visible[b-uv36d4pc6o],
.components-reconnect-failed-visible[b-uv36d4pc6o],
.components-pause-visible[b-uv36d4pc6o],
.components-resume-failed-visible[b-uv36d4pc6o],
.components-rejoining-animation[b-uv36d4pc6o] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-retrying[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-failed[b-uv36d4pc6o],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-uv36d4pc6o] {
    display: block;
}


#components-reconnect-modal[b-uv36d4pc6o] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-uv36d4pc6o 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-uv36d4pc6o 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-uv36d4pc6o 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-uv36d4pc6o]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-uv36d4pc6o 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-uv36d4pc6o {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-uv36d4pc6o {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-uv36d4pc6o {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-uv36d4pc6o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-uv36d4pc6o] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-uv36d4pc6o] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-uv36d4pc6o] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-uv36d4pc6o] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-uv36d4pc6o] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-uv36d4pc6o] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-uv36d4pc6o 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-uv36d4pc6o] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-uv36d4pc6o {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/RaidHall.razor.rz.scp.css */
/* THE HALL (N5). Codex layer: .cx-* for shared chrome, .rh-* for this page, tokens from app.css
   :root. Nothing here decides anything — every rule with a failure mode is in RaidHallUi, which the
   web suite pins; this sheet only draws what that file decided. */

.rh-sub[b-i21r57xrd9] {
    color: var(--cx-dim);
    font: 13px 'EB Garamond', serif;
    margin-top: 6px;
    max-width: 62ch;
}

.rh-quiet[b-i21r57xrd9] {
    color: var(--cx-dim);
    font: italic 12.5px 'EB Garamond', serif;
    margin-top: 6px;
}

/* the two columns: the raids, and the shelf they came from */
.rh-columns[b-i21r57xrd9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1080px) {
    .rh-columns[b-i21r57xrd9] {
        grid-template-columns: 1fr;
    }
}

.rh-count[b-i21r57xrd9] {
    font: 700 12px 'EB Garamond', serif;
    color: var(--cx-gilt-dim);
    font-variant-numeric: tabular-nums;
}

/* ── raid cards ── */

.rh-cards[b-i21r57xrd9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.rh-card[b-i21r57xrd9] {
    padding: 13px 16px;
}

.rh-name[b-i21r57xrd9] {
    font: 700 16px 'EB Garamond', serif;
    color: var(--cx-cream-hi);
    text-decoration: none;
}

.rh-name:hover[b-i21r57xrd9] {
    color: var(--cx-gilt-bright);
}

.rh-meta[b-i21r57xrd9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    color: var(--cx-muted);
    font: 12.5px 'EB Garamond', serif;
    margin-top: 4px;
}

.rh-chips[b-i21r57xrd9] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

/* A pin, as pinned. */
.rh-chip[b-i21r57xrd9] {
    font: 600 9px 'Cinzel', serif;
    letter-spacing: .07em;
    color: var(--cx-muted);
    border: 1px solid var(--cx-bd-4);
    background: rgba(0, 0, 0, .18);
    border-radius: 2px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* The shelf has published past this pin. Gold ADVISES — drift is not a fault. */
.rh-chip.drift[b-i21r57xrd9] {
    color: #f0c662;
    border-color: #7a5e22;
    background: rgba(224, 165, 38, .1);
}

/* Nothing pinned, said out loud rather than left blank. */
.rh-chip.absent[b-i21r57xrd9] {
    color: var(--cx-dimmer);
    border-style: dashed;
}

.rh-actions[b-i21r57xrd9] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ── the archive ── */

.rh-arow[b-i21r57xrd9] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1fr) 76px;
    gap: 12px;
    align-items: baseline;
    padding: 9px 16px;
    border-bottom: 1px solid #241b10;
    text-decoration: none;
}

.rh-arow:last-child[b-i21r57xrd9] {
    border-bottom: none;
}

.rh-arow:hover[b-i21r57xrd9] {
    background: rgba(224, 165, 38, .04);
}

.rh-aname[b-i21r57xrd9] {
    font: 600 14px 'EB Garamond', serif;
    color: var(--cx-cream-hi);
}

.rh-ameta[b-i21r57xrd9] {
    color: var(--cx-dim);
    font: 12px 'EB Garamond', serif;
}

.rh-ago[b-i21r57xrd9] {
    text-align: right;
    font: 600 10px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-dim);
}

/* "the scribe keeps everything" — why there is no Forget on this page. */
.rh-scribe[b-i21r57xrd9] {
    margin-top: 14px;
    border-left: 2px solid var(--cx-bd-3);
    padding: 6px 12px;
    color: var(--cx-dimmer);
    font: italic 12.5px 'EB Garamond', serif;
}

/* ── THE LIBRARY side panel ── */

.rh-lib[b-i21r57xrd9] {
    padding: 14px 16px;
}

.rh-shelf[b-i21r57xrd9] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: 'n l' 'n note';
    column-gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cx-bd-5);
    text-decoration: none;
}

.rh-shelf:last-of-type[b-i21r57xrd9] {
    border-bottom: none;
}

.rh-shelf:hover .rh-shelf-l[b-i21r57xrd9] {
    color: var(--cx-gilt-bright);
}

.rh-shelf-n[b-i21r57xrd9] {
    grid-area: n;
    align-self: center;
    text-align: right;
    font: 700 22px 'Cinzel', serif;
    color: var(--cx-cream-hi);
    font-variant-numeric: tabular-nums;
}

/* ★The dash is not a small number.★ An unread shelf is dimmed and dashed so the eye never files it
   beside a real count. */
.rh-shelf-n.unread[b-i21r57xrd9] {
    color: var(--cx-dimmer);
}

.rh-shelf-l[b-i21r57xrd9] {
    grid-area: l;
    font: 600 11px 'Cinzel', serif;
    letter-spacing: .1em;
    color: var(--cx-muted);
}

.rh-shelf-note[b-i21r57xrd9] {
    grid-area: note;
    color: var(--cx-dimmer);
    font: italic 11.5px 'EB Garamond', serif;
}

.rh-unread[b-i21r57xrd9] {
    margin-top: 10px;
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--cx-horde-hi);
    font: 11.5px 'EB Garamond', serif;
}
/* /Components/Pages/RaidLibrary.razor.rz.scp.css */
/* THE LIBRARY (N5). Codex layer: .cx-* for shared chrome, .rl-* for this page, tokens from app.css
   :root. Every rule with a failure mode lives in RaidLibraryUi / RaidLibraryMounts, which the web
   suite pins; this sheet only draws what those files decided. */

.rl-sub[b-jkptnx178d] {
    color: var(--cx-muted);
    font: 13.5px 'EB Garamond', serif;
    margin-top: 6px;
}

.rl-quiet[b-jkptnx178d] {
    color: var(--cx-dim);
    font: italic 12.5px 'EB Garamond', serif;
    margin-top: 5px;
    max-width: 78ch;
}

/* ── shelf cards ── */

.rl-cards[b-jkptnx178d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 12px;
}

.rl-card[b-jkptnx178d] {
    padding: 13px 16px;
}

.rl-head[b-jkptnx178d] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.rl-name[b-jkptnx178d] {
    font: 700 16px 'EB Garamond', serif;
    color: var(--cx-cream-hi);
}

.rl-rev[b-jkptnx178d] {
    margin-left: auto;
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .06em;
    color: var(--cx-gilt-dim);
    font-variant-numeric: tabular-nums;
}

.rl-meta[b-jkptnx178d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    color: var(--cx-muted);
    font: 12.5px 'EB Garamond', serif;
    margin-top: 4px;
}

.rl-shape[b-jkptnx178d] {
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    margin-top: 6px;
}

/* Gold ADVISES — a warning never blocks a publish, and it must not read as a refusal. */
.rl-warn[b-jkptnx178d] {
    color: #f0c662;
    font: 12.5px 'EB Garamond', serif;
    margin-top: 6px;
}

.rl-actions[b-jkptnx178d] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ── the per-card drawer (revisions · history · kit contents) ── */

.rl-drawer[b-jkptnx178d] {
    margin-top: 10px;
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 9px;
}

.rl-dlabel[b-jkptnx178d] {
    font: 600 10px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
}

.rl-rev-row[b-jkptnx178d] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: 1px solid #241b10;
}

.rl-rev-row:last-of-type[b-jkptnx178d] {
    border-bottom: none;
}

.rl-rev-n[b-jkptnx178d] {
    font: 700 12px 'Cinzel', serif;
    color: var(--cx-cream-hi);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
}

.rl-hrow[b-jkptnx178d] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 4px 0;
    text-decoration: none;
}

.rl-hrow:hover .rl-hname[b-jkptnx178d] {
    color: var(--cx-gilt-bright);
}

.rl-hname[b-jkptnx178d] {
    font: 600 13px 'EB Garamond', serif;
    color: var(--cx-cream-hi);
}

.rl-target[b-jkptnx178d] {
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    padding: 3px 0 3px 10px;
    border-left: 2px solid var(--cx-bd-4);
    margin-top: 4px;
}

/* ── the demand / provisioning split, which is the whole point of the Kits tab ── */

.rl-split[b-jkptnx178d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}

.rl-def[b-jkptnx178d] {
    padding: 13px 16px;
}

.rl-defbody[b-jkptnx178d] {
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    margin: 6px 0 4px;
    max-width: 70ch;
}

/* ── profile state chips ── */

.rl-legend[b-jkptnx178d] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin: 10px 0 4px;
}

.rl-st[b-jkptnx178d] {
    font: 700 9px 'Cinzel', serif;
    letter-spacing: .08em;
    border: 1px solid;
    border-radius: 3px;
    padding: 2px 8px;
    white-space: nowrap;
    flex: none;
}

.rl-st.ok[b-jkptnx178d] {
    color: #9fe08a;
    border-color: #2f5a2a;
    background: rgba(121, 194, 103, .1);
}

.rl-st.warn[b-jkptnx178d] {
    color: #f0c662;
    border-color: #7a5e22;
    background: rgba(224, 165, 38, .1);
}

/* ★An ungraded profile is dim and dashed, never green.★ VALID is the state the pin rule keys off. */
.rl-st.unread[b-jkptnx178d] {
    color: var(--cx-dimmer);
    border-color: var(--cx-bd-3);
    border-style: dashed;
    background: transparent;
}

.rl-cite[b-jkptnx178d] {
    display: flex;
    gap: 9px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 3px 0;
    text-decoration: none;
}

.rl-ckind[b-jkptnx178d] {
    font: 600 9px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-dim);
}

.rl-cname[b-jkptnx178d] {
    font: 600 13px 'EB Garamond', serif;
    color: var(--cx-cream-hi);
}

.rl-cite:hover .rl-cname[b-jkptnx178d] {
    color: var(--cx-gilt-bright);
}

.rl-footnote[b-jkptnx178d] {
    margin-top: 14px;
    border-left: 2px solid var(--cx-bd-3);
    padding: 6px 12px;
    color: var(--cx-dimmer);
    font: italic 12.5px 'EB Garamond', serif;
}

/* ── a tab whose body has not shipped ── */

.rl-absent[b-jkptnx178d] {
    padding: 18px 20px;
    border-style: dashed;
}

/* ── the raise confirm (centered modal — confirmations only, ledger §3) ── */

.rl-scrim[b-jkptnx178d] {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(8, 5, 2, .62);
}

.rl-modal[b-jkptnx178d] {
    position: fixed;
    z-index: 71;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    background: #171008;
    border: 1px solid var(--cx-bd);
    border-radius: 5px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
    padding: 20px 22px;
}

.rl-mtitle[b-jkptnx178d] {
    font: 700 15px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-bright);
}

.rl-mbody[b-jkptnx178d] {
    color: var(--cx-body);
    font: 13.5px 'EB Garamond', serif;
    margin-top: 10px;
}

.rl-mcaution[b-jkptnx178d] {
    color: #f0c662;
    font: 13px 'EB Garamond', serif;
    margin-top: 10px;
    border-left: 2px solid #7a5e22;
    padding-left: 10px;
}

.rl-mactions[b-jkptnx178d] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
/* /Components/Pages/RaidLivePage.razor.rz.scp.css */
/* LIVE — the raid read NOW (N3). Codex layer: .cx-* for shared chrome, .rl-* for this page, tokens
   from app.css :root. ★The three gauge states are separated by CLASS, not by hue alone★ — the same
   rule the buff board's fills follow, for the same reader: about one man in twelve cannot tell the
   red card from the grey one, and BLIND versus MEASURED is the most load-bearing pair on the page. */

.rl-sub[b-1q3wuw4py3] {
    color: var(--cx-dim);
    font: 13px 'EB Garamond', serif;
    margin-top: 6px;
}

.rl-card[b-1q3wuw4py3] {
    padding: 16px 20px;
    margin-bottom: 16px;
}

.rl-quiet[b-1q3wuw4py3] {
    color: var(--cx-dim);
    font: italic 12px 'EB Garamond', serif;
    margin-top: 4px;
}

.rl-flash[b-1q3wuw4py3] {
    border-left: 2px solid var(--cx-green-hi);
    color: var(--cx-muted);
    font: 13px 'EB Garamond', serif;
    padding: 6px 12px;
    margin-bottom: 12px;
}

.rl-flash.bad[b-1q3wuw4py3] {
    border-left-color: var(--cx-red);
    color: var(--cx-red);
}

/* ── the disband banner ── */

.rl-gone[b-1q3wuw4py3] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    margin: 14px 0;
    border-color: var(--cx-red);
}

.rl-gone-title[b-1q3wuw4py3] {
    font: 700 15px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-red);
}

.rl-gone-line[b-1q3wuw4py3] {
    color: var(--cx-muted);
    font: 13px 'EB Garamond', serif;
    flex: 1;
}

/* ── the cursor rail ── */

.rl-rail[b-1q3wuw4py3] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 10px 0;
}

.rl-step[b-1q3wuw4py3] {
    background: transparent;
    border: 1px solid var(--cx-bd-4);
    color: var(--cx-dim);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
    padding: 3px 4px;
}

.rl-step:hover[b-1q3wuw4py3] {
    border-color: var(--cx-bd);
}

.rl-step-glyph[b-1q3wuw4py3] {
    font-size: 11px;
    line-height: 1;
}

.rl-step-ord[b-1q3wuw4py3] {
    font: 9px ui-monospace, monospace;
}

/* Fill AND colour, so the four states survive a monochrome reading. */
.rl-step.done[b-1q3wuw4py3] { color: var(--cx-green); border-color: var(--cx-bd-3); }
.rl-step.skipped[b-1q3wuw4py3] { color: var(--cx-muted); border-style: dashed; }
.rl-step.pending[b-1q3wuw4py3] { color: var(--cx-faint); }
.rl-step.current[b-1q3wuw4py3] { color: var(--cx-gilt-bright); border-color: var(--cx-gilt); }
.rl-step.on[b-1q3wuw4py3] { background: rgba(240, 198, 98, .10); border-color: var(--cx-gilt-dim); }

.rl-stepline[b-1q3wuw4py3] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.rl-stepname[b-1q3wuw4py3] {
    font: 700 13px 'Cinzel', serif;
    letter-spacing: .06em;
    color: var(--cx-cream);
}

.rl-halt[b-1q3wuw4py3] {
    border-left: 2px solid var(--cx-red);
    color: var(--cx-red);
    font: 13px 'EB Garamond', serif;
    padding: 6px 12px;
    margin: 8px 0;
}

/* ── the arming gate: its own sentence, at full length ── */

.rl-gate[b-1q3wuw4py3] {
    border-left: 2px solid var(--cx-bd-3);
    margin: 10px 0;
    padding: 8px 12px;
}

.rl-gate.armed[b-1q3wuw4py3] { border-left-color: var(--cx-green-hi); }
.rl-gate.refused[b-1q3wuw4py3] { border-left-color: var(--cx-red); }
.rl-gate.quiet[b-1q3wuw4py3] { border-left-color: var(--cx-bd-4); }

.rl-gate-label[b-1q3wuw4py3] {
    display: block;
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .09em;
    color: var(--cx-gilt-bright);
}

.rl-gate.refused .rl-gate-label[b-1q3wuw4py3] { color: var(--cx-red); }
.rl-gate.quiet .rl-gate-label[b-1q3wuw4py3] { color: var(--cx-dim); }

.rl-gate-says[b-1q3wuw4py3] {
    display: block;
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    margin-top: 3px;
}

/* ★A refusal the GATE cannot see, kept as its own line.★ Folding it into the sentence above would edit
   the server's words, which is the one thing this block is not allowed to do. */
.rl-gate-blocker[b-1q3wuw4py3] {
    display: block;
    color: var(--cx-red);
    font: 13px 'EB Garamond', serif;
    margin-top: 5px;
}

/* The run rail sits under the verbs: what a press of START RUN would pin, before it is pressed. */
.rl-runline[b-1q3wuw4py3] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.5;
    margin-top: 6px;
}

/* ── the pre-pull check ── */

.rl-check[b-1q3wuw4py3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.rl-chip[b-1q3wuw4py3] {
    border: 1px solid var(--cx-bd-3);
    color: var(--cx-cream);
    font: 12px 'EB Garamond', serif;
    padding: 3px 9px;
    text-decoration: none;
}

a.rl-chip:hover[b-1q3wuw4py3] {
    border-color: var(--cx-gilt-dim);
    color: var(--cx-gilt-bright);
}

.rl-chip.flat[b-1q3wuw4py3] {
    color: var(--cx-muted);
}

.rl-chip.covered[b-1q3wuw4py3] { border-color: var(--cx-bd-3); }
.rl-chip.advisory[b-1q3wuw4py3] { border-color: #e0a526; color: #e0a526; }
.rl-chip.blocking[b-1q3wuw4py3] { border-color: var(--cx-red); color: var(--cx-red); }

.rl-refusal[b-1q3wuw4py3] {
    border-left: 2px solid var(--cx-red);
    color: var(--cx-red);
    font: 13px 'EB Garamond', serif;
    padding: 6px 12px;
}

.rl-verbs[b-1q3wuw4py3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

/* ── the five gauges ── */

.rl-gauges[b-1q3wuw4py3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.rl-gauge[b-1q3wuw4py3] {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
}

.rl-gauge:hover[b-1q3wuw4py3] {
    border-color: var(--cx-gilt-dim);
}

.rl-gauge-head[b-1q3wuw4py3] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rl-gauge-label[b-1q3wuw4py3] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .09em;
    color: var(--cx-gilt-dim);
    flex: 1;
}

.rl-gauge-value[b-1q3wuw4py3] {
    font: 700 26px 'Cinzel', serif;
    color: var(--cx-cream-hi);
    line-height: 1.2;
}

/* ★A blind gauge does not get a number's typography.★ Its em-dash is quiet and hollow, so the eye
   never mistakes it for a reading of zero from across a room. */
.rl-gauge.blind .rl-gauge-value[b-1q3wuw4py3] {
    color: var(--cx-faint);
    font-weight: 400;
}

.rl-gauge.blind[b-1q3wuw4py3] {
    border-style: dashed;
}

.rl-gauge-says[b-1q3wuw4py3] {
    color: var(--cx-muted);
    font: 12px 'EB Garamond', serif;
    margin-top: 6px;
}

.rl-gauge-est[b-1q3wuw4py3] {
    color: var(--cx-body);
    font: 12px 'EB Garamond', serif;
    margin-top: 4px;
}

.rl-badge[b-1q3wuw4py3] {
    border: 1px solid var(--cx-bd-3);
    font: 700 8px 'Cinzel', serif;
    letter-spacing: .1em;
    padding: 1px 4px;
}

.rl-badge.blind[b-1q3wuw4py3] {
    border-style: dashed;
    color: var(--cx-muted);
}

.rl-badge.est[b-1q3wuw4py3] {
    color: #e0a526;
    border-color: #b9892a;
}

.rl-bar[b-1q3wuw4py3] {
    background: var(--cx-bd-5);
    height: 4px;
    margin-top: 6px;
    width: 100%;
}

.rl-bar > span[b-1q3wuw4py3] {
    background: var(--cx-gilt);
    display: block;
    height: 100%;
}

/* ── alerts ── */

.rl-alert[b-1q3wuw4py3] {
    border-left: 2px solid var(--cx-bd-3);
    margin-top: 10px;
    padding: 6px 12px;
}

.rl-alert.critical[b-1q3wuw4py3] { border-left-color: var(--cx-red); }
.rl-alert.warn[b-1q3wuw4py3] { border-left-color: #e0a526; }
.rl-alert.silenced[b-1q3wuw4py3] { border-left-style: dashed; border-left-color: var(--cx-bd); }
.rl-alert.cannot[b-1q3wuw4py3] { border-left-style: dotted; border-left-color: var(--cx-bd); }

.rl-alert-head[b-1q3wuw4py3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.rl-alert-rule[b-1q3wuw4py3] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-bright);
}

.rl-alert.cannot .rl-alert-rule[b-1q3wuw4py3],
.rl-alert.silenced .rl-alert-rule[b-1q3wuw4py3] {
    color: var(--cx-muted);
}

.rl-alert-says[b-1q3wuw4py3] {
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    margin-top: 3px;
}

.rl-actions[b-1q3wuw4py3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ★A refused action looks refused.★ It stays on screen carrying its reason in the title, because a
   button that is simply absent teaches an operator nothing about why the realm cannot do it. */
.rl-refused[b-1q3wuw4py3] {
    border-style: dashed;
    text-decoration: line-through;
}

/* ── the deck ── */

.rl-deck[b-1q3wuw4py3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rl-console[b-1q3wuw4py3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 10px;
}

.rl-chips[b-1q3wuw4py3] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rl-offpost[b-1q3wuw4py3] {
    color: #e0a526;
    font: 13px 'EB Garamond', serif;
    margin-top: 3px;
}

/* ── the feed ── */

.rl-feed[b-1q3wuw4py3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid var(--cx-bd-5);
    padding: 4px 0;
}

.rl-feed-kind[b-1q3wuw4py3] {
    font: 700 9px 'Cinzel', serif;
    letter-spacing: .09em;
    color: var(--cx-dim);
    min-width: 62px;
}

.rl-feed.alert .rl-feed-kind[b-1q3wuw4py3] { color: var(--cx-red); }
.rl-feed.directive .rl-feed-kind[b-1q3wuw4py3] { color: var(--cx-gilt); }
.rl-feed.death .rl-feed-kind[b-1q3wuw4py3] { color: var(--cx-red); }
.rl-feed.phase .rl-feed-kind[b-1q3wuw4py3] { color: var(--cx-rule); }

.rl-feed-prov[b-1q3wuw4py3] {
    font: 9px ui-monospace, monospace;
    color: var(--cx-faint);
    min-width: 34px;
}

.rl-feed-text[b-1q3wuw4py3] {
    color: var(--cx-body);
    font: 13px 'EB Garamond', serif;
    flex: 1;
    text-decoration: none;
}

.rl-feed-text:hover[b-1q3wuw4py3] {
    color: var(--cx-gilt-bright);
}

.rl-feed-when[b-1q3wuw4py3] {
    color: var(--cx-faint);
    font: 10px ui-monospace, monospace;
}

.rl-feed-detail[b-1q3wuw4py3] {
    color: var(--cx-muted);
    font: italic 12px 'EB Garamond', serif;
    padding: 0 0 4px 104px;
    white-space: pre-wrap;
}
/* /Components/Pages/RaidPlanPage.razor.rz.scp.css */
/* PLAN — the route walk (N2). Codex layer: .cx-* vocabulary for shared chrome, .rp-* for this
   page, tokens from app.css :root. The eight projection-cell states repeat the readiness grid's
   fills because CSS isolation scopes each component's sheet — the SEMANTICS stay single-sourced
   in RaidBuffBoard.Mark.Css, which is the half a test can hold. */

.rp-sub[b-n0efpheglm] {
    color: var(--cx-dim);
    font: 13px 'EB Garamond', serif;
    margin-top: 6px;
}

.rp-flash[b-n0efpheglm] {
    border-left: 2px solid var(--cx-green-hi);
    color: var(--cx-muted);
    font: 13px 'EB Garamond', serif;
    padding: 6px 12px;
    margin-bottom: 12px;
}

.rp-flash.bad[b-n0efpheglm] {
    border-left-color: var(--cx-red);
    color: var(--cx-red);
}

/* ── header cards ── */

.rp-cards[b-n0efpheglm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.rp-card[b-n0efpheglm] {
    padding: 14px 18px;
}

.rp-pin[b-n0efpheglm] {
    font: 700 14px 'Cinzel', serif;
    letter-spacing: .06em;
    color: var(--cx-gilt-bright);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rp-drift[b-n0efpheglm] {
    color: #e0a526;
    font: 13px 'EB Garamond', serif;
    margin-top: 6px;
}

.rp-quiet[b-n0efpheglm] {
    color: var(--cx-dim);
    font: italic 13px 'EB Garamond', serif;
    margin-top: 4px;
}

.rp-actions[b-n0efpheglm] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

.rp-diff[b-n0efpheglm] {
    margin-top: 8px;
    border-top: 1px solid var(--cx-bd-5);
    padding-top: 6px;
}

.rp-diff-summary[b-n0efpheglm] {
    font: 700 12px 'Cinzel', serif;
    color: var(--cx-muted);
    letter-spacing: .04em;
}

.rp-diff-row[b-n0efpheglm] {
    font: 13px 'EB Garamond', serif;
    color: var(--cx-muted);
    padding: 1px 0;
}

.rp-blockers[b-n0efpheglm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ember blocks — the chip wears the alarm, because clicking it is the operator's next move */
.rp-blocker[b-n0efpheglm] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-red);
    background: rgba(200, 60, 40, .08);
    border: 1px solid var(--cx-red);
    border-radius: 2px;
    padding: 3px 9px;
    cursor: pointer;
}

/* ── tabs ── */

.rp-tabs[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
}

.rp-tabs .rule[b-n0efpheglm] {
    flex: 1;
    border-top: 1px solid var(--cx-bd-5);
}

.rp-tab[b-n0efpheglm] {
    font: 700 13px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-muted);
    background: transparent;
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    padding: 5px 14px;
    cursor: pointer;
}

.rp-tab.on[b-n0efpheglm] {
    color: var(--cx-gilt-bright);
    border-color: var(--cx-gilt-bright);
}

/* ── the walk ── */

.rp-walk[b-n0efpheglm] {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .rp-walk[b-n0efpheglm] {
        grid-template-columns: 1fr;
    }
}

.rp-rail[b-n0efpheglm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-step[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font: 13px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
    background: transparent;
    border: 1px solid var(--cx-bd-5);
    border-radius: 2px;
    padding: 5px 10px;
    cursor: pointer;
}

.rp-step.on[b-n0efpheglm] {
    border-color: var(--cx-gilt-bright);
    background: rgba(205, 184, 140, .07);
}

.rp-ord[b-n0efpheglm] {
    font: 700 11px 'Cinzel', serif;
    color: var(--cx-dim);
    min-width: 18px;
}

.rp-kind[b-n0efpheglm] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-muted);
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    padding: 0 5px;
}

.rp-label[b-n0efpheglm] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-count[b-n0efpheglm] {
    color: var(--cx-dim);
    font-size: 11px;
}

.rp-gaps[b-n0efpheglm] {
    font: 11px 'EB Garamond', serif;
    color: #e0a526;
}

.rp-railnote[b-n0efpheglm] {
    color: var(--cx-dim);
    font: italic 11px 'EB Garamond', serif;
    margin-top: 6px;
}

/* ★gold advises, ember blocks★ — the dot is the rule made visible, with a non-colour
   distinction per state (fill vs hollow vs dashed) beside the hue. */
.rp-dot[b-n0efpheglm] {
    font-size: 12px;
    line-height: 1;
}

.rp-dot.gold[b-n0efpheglm] { color: #e0a526; }
.rp-dot.ember[b-n0efpheglm] { color: var(--cx-red); text-shadow: 0 0 6px rgba(220, 80, 50, .6); }
.rp-dot.clear[b-n0efpheglm] { color: var(--cx-green-hi); }
.rp-dot.unread[b-n0efpheglm] { color: var(--cx-dim); }

/* ── the sheet ── */

.rp-sheet[b-n0efpheglm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rp-prose[b-n0efpheglm] {
    font: italic 14px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
    padding: 2px 0;
}

.rp-line[b-n0efpheglm] {
    font: 13px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
    padding: 2px 0;
}

.rp-line.rp-tight[b-n0efpheglm] {
    color: var(--cx-red);
}

.rp-line.rp-advice[b-n0efpheglm] {
    color: #e0a526;
}

.rp-fresh[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rp-req[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 3px 0;
    border-bottom: 1px dotted var(--cx-bd-5);
}

.rp-req.rp-raidwide[b-n0efpheglm] {
    opacity: .85;
}

.rp-prov[b-n0efpheglm] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-muted);
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    padding: 1px 6px;
    white-space: nowrap;
}

.rp-states[b-n0efpheglm] {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
}

/* ── marks ── */

.rp-markrow[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 3px 0;
    border-bottom: 1px dotted var(--cx-bd-5);
}

.rp-mark[b-n0efpheglm] {
    font: 700 11px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-gilt-bright);
    border: 1px solid var(--cx-gilt-bright);
    border-radius: 2px;
    padding: 1px 7px;
}

.rp-icons[b-n0efpheglm] {
    display: inline-flex;
    gap: 3px;
}

.rp-icon[b-n0efpheglm] {
    width: 22px;
    height: 22px;
    font-size: 12px;
    color: var(--cx-muted);
    background: transparent;
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    cursor: pointer;
}

.rp-icon.on[b-n0efpheglm] {
    color: var(--cx-gilt-bright);
    border-color: var(--cx-gilt-bright);
}

/* ── seats ── */

.rp-subgroup[b-n0efpheglm] {
    font: 700 12px 'Cinzel', serif;
    letter-spacing: .08em;
    color: var(--cx-gilt-bright);
    margin: 10px 0 4px;
}

.rp-seat[b-n0efpheglm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font: 13px 'EB Garamond', serif;
    color: var(--cx-ink, #d8cbb0);
    padding: 3px 0;
    border-bottom: 1px dotted var(--cx-bd-5);
}

.rp-seatname[b-n0efpheglm] {
    color: var(--cx-gilt-bright);
    text-decoration: none;
    border-bottom: 1px dotted var(--cx-bd-3);
}

.rp-kit[b-n0efpheglm] {
    font: 700 10px 'Cinzel', serif;
    letter-spacing: .05em;
    color: var(--cx-gilt-bright);
    border: 1px solid var(--cx-bd-3);
    border-radius: 2px;
    padding: 1px 6px;
}

/* ── the piloting seam's door ────────────────────────────────────────────────────────────────────
   Pushed to the end of the row and never conditionally hidden: this chip is the only door a PLAYER
   has on this page, and a door that appears and disappears with the reader's account state is how a
   brain hiccup and an empty account came to look identical. */
.rp-seam[b-n0efpheglm] {
    margin-left: auto;
}

.rp-seamline[b-n0efpheglm] {
    flex-basis: 100%;
    font-size: 12px;
}

.rp-kitpick[b-n0efpheglm] {
    font-size: 12px;
    max-width: 220px;
}

/* ── the eight projection cells (semantics single-sourced in RaidBuffBoard.Mark.Css) ── */

.rp-cell[b-n0efpheglm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 2px;
    border: 1px solid var(--cx-bd-3);
}

.rp-cell.on[b-n0efpheglm] { color: #0f1408; background: var(--cx-green-hi); border-style: solid; }
.rp-cell.fading[b-n0efpheglm] { color: #16100a; background: linear-gradient(180deg, #e0a526 55%, rgba(224, 165, 38, .18) 55%); border-style: solid; }
.rp-cell.carried[b-n0efpheglm] { color: var(--cx-gilt-bright); background: rgba(205, 184, 140, .12); border-style: solid; }
.rp-cell.gap[b-n0efpheglm] { color: #1a0d08; background: var(--cx-red); border-style: double; border-width: 3px; }
.rp-cell.reach[b-n0efpheglm] { color: var(--cx-muted); background: repeating-linear-gradient(45deg, rgba(160, 150, 130, .25) 0 3px, transparent 3px 6px); border-style: solid; }
.rp-cell.unread[b-n0efpheglm] { color: var(--cx-muted); background: transparent; border-style: dashed; }
.rp-cell.theirs[b-n0efpheglm] { color: var(--cx-dim); background: transparent; border-style: dotted; opacity: .75; }
.rp-cell.alien[b-n0efpheglm] { color: var(--cx-red); background: transparent; border-style: solid; outline: 1px dashed var(--cx-red); outline-offset: 1px; }
/* /Components/Pages/RaidReport.razor.rz.scp.css */
/* Scoped to RaidReport.

   The page's own chrome only — every table on it belongs to a component with its own scoped sheet, and
   keeping it that way is what stops a rule written for the session list from silently restyling a fight. */

/* The resets toggle. It sits ABOVE the list rather than inside its header, because what it hides is
   reported inside the list's own card and the two must not read as one control with two opinions. */
.rr-toggle[b-hm2cy3hat0] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 0 2px;
}

    .rr-toggle label[b-hm2cy3hat0] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font: 600 9.5px 'Cinzel', serif;
        letter-spacing: .12em;
        color: var(--cx-dim);
    }

    .rr-toggle input[b-hm2cy3hat0] {
        accent-color: #e0a526;
        cursor: pointer;
    }

    .rr-toggle .n[b-hm2cy3hat0] {
        font: 400 12px 'EB Garamond', serif;
        color: var(--cx-muted);
    }
/* /Components/Pages/RaidRoutes.razor.rz.scp.css */
/* Scoped to RaidRoutes. */

/* ★The map column rides with the steps.★ The left column ends level with step ~6 of 27, so scrolling
   the run list put the operator in a dead zone with the instance out of sight — while every card they
   were reading names a point ON it. Sticky works here because .cx-grid-main is `align-items: start`:
   the grid AREA is as tall as the taller (steps) column, so there is room inside it to travel.
   `max-height` keeps a tall instance from outgrowing the viewport and pinning itself uselessly. */
.rp-mapcol[b-ulxqy7h1eu] {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow: auto;
}

/* Below the breakpoint the grid collapses to ONE column: the map is stacked above the steps, and a
   sticky map there would cover the very cards it is meant to accompany. */
@media (max-width: 1340px) {
    .rp-mapcol[b-ulxqy7h1eu] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.rp-tools[b-ulxqy7h1eu] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 12px 0 10px;
}

/* ★What the last click actually did.★ Every placement answers in words — which spawns went in, or where
   the height came from and how far away the sample was. A tool that places a point in silence is one an
   operator cannot tell apart from a tool that missed. */
.rp-place[b-ulxqy7h1eu] {
    padding: 7px 11px;
    margin-bottom: 10px;
    border: 1px solid var(--cx-bd-4);
    border-radius: 3px;
    background: rgba(224,165,38,.05);
    color: var(--cx-muted);
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

.rp-finding[b-ulxqy7h1eu] {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .rp-finding b[b-ulxqy7h1eu] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        margin-right: 7px;
    }

    .rp-finding.err[b-ulxqy7h1eu] {
        color: var(--cx-red);
        background: rgba(221,138,106,.1);
        border: 1px solid rgba(221,138,106,.35);
    }

    .rp-finding.warn[b-ulxqy7h1eu] {
        color: #e0a526;
        background: rgba(224,165,38,.07);
        border: 1px solid rgba(224,165,38,.28);
    }

.rp-save[b-ulxqy7h1eu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-bd-5);
}

.rp-exported[b-ulxqy7h1eu] {
    margin-top: 8px;
    font: 400 12px 'EB Garamond', serif;
    color: var(--cx-green-hi);
    line-height: 1.45;
}

.rp-readonly[b-ulxqy7h1eu] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.5;
}

    .rp-readonly code[b-ulxqy7h1eu] {
        font: 11px ui-monospace, monospace;
        color: var(--cx-muted);
    }
/* /Components/Pages/RequirementKits.razor.rz.scp.css */
/* Scoped to RequirementKits. Deliberately the route planner's step-rail vocabulary in a different
   prefix: a demand row and a run step are read the same way — an identity, its arguments, and the
   findings that belong to it, on the row rather than in a banner. */

.rk-empty[b-b6j78cf876] {
    padding: 14px 16px;
    border: 1px dashed var(--cx-bd-4);
    border-radius: 3px;
    color: var(--cx-muted);
    font: 400 13px 'EB Garamond', serif;
    line-height: 1.5;
}

.rk-row[b-b6j78cf876] {
    border: 1px solid var(--cx-bd-5);
    border-left: 3px solid var(--cx-bd-4);
    border-radius: 3px;
    padding: 9px 11px;
    margin-bottom: 8px;
    background: rgba(0,0,0,.14);
}

    /* A demand the validator refuses. ★Loud on the row★ — "3 errors" at the top of a page is a number,
       not a location. */
    .rk-row.broken[b-b6j78cf876] {
        border-left-color: var(--cx-red);
    }

.rk-top[b-b6j78cf876] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rk-kind[b-b6j78cf876] {
    flex: none;
    width: 132px;
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .1em;
    color: var(--cx-dim);
    padding: 3px 4px;
}

.rk-line[b-b6j78cf876] {
    flex: 1;
    min-width: 0;
    font: 400 13px 'EB Garamond', serif;
    color: var(--cx-body);
}

.rk-del[b-b6j78cf876] {
    flex: none;
    color: var(--cx-red);
}

.rk-args[b-b6j78cf876] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.rk-arg[b-b6j78cf876] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rk-argname[b-b6j78cf876] {
    font: 600 9.5px 'Cinzel', serif;
    letter-spacing: .12em;
    color: var(--cx-dim);
}

.rk-num[b-b6j78cf876] {
    width: 96px;
    font-size: 12px;
    padding: 3px 8px;
}

.rk-school[b-b6j78cf876] {
    width: 104px;
    font-size: 12px;
    padding: 3px 6px;
}

.rk-note[b-b6j78cf876] {
    flex: 1;
    min-width: 160px;
    font-size: 12px;
    font-style: italic;
    padding: 3px 8px;
}

.rk-finding[b-b6j78cf876] {
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 3px;
    font: 400 12px 'EB Garamond', serif;
    line-height: 1.45;
}

    .rk-finding b[b-b6j78cf876] {
        font: 700 9.5px 'Cinzel', serif;
        letter-spacing: .1em;
        margin-right: 7px;
    }

    .rk-finding.err[b-b6j78cf876] {
        color: var(--cx-red);
        background: rgba(221,138,106,.1);
        border: 1px solid rgba(221,138,106,.35);
    }

    .rk-finding.warn[b-b6j78cf876] {
        color: #e0a526;
        background: rgba(224,165,38,.07);
        border: 1px solid rgba(224,165,38,.28);
    }

.rk-save[b-b6j78cf876] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cx-bd-5);
}

.rk-readonly[b-b6j78cf876] {
    font: italic 12px 'EB Garamond', serif;
    color: var(--cx-dimmer);
    line-height: 1.5;
}