/* player_ranking_sheet_ui_v4.css — Ranking Sheet editor (see player_ranking_sheet_ui_v4.js)
   Shell mirrors projections_report_v4.css so the editor sits in the app's modal
   family rather than inventing a third look. */

#rankingSheetModal .rse-backdrop {
    position: fixed; inset: 0; z-index: 1999;
    background: var(--jt-overlay-bg); backdrop-filter: var(--jt-overlay-blur);
}
#rankingSheetModal .rse-shell {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#rankingSheetModal .rse-modal {
    pointer-events: auto; position: relative;
    display: flex; flex-direction: column;
    background: var(--jt-modal-bg); border: 1px solid var(--jt-modal-border);
    border-radius: 12px; box-shadow: var(--jt-modal-shadow);
    width: min(1080px, 95vw); height: min(820px, 92vh);
    overflow: hidden;
}

/* ── header ── */
#rankingSheetModal .rse-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
    cursor: grab;
}
#rankingSheetModal .rse-title  { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#rankingSheetModal .rse-league {
    font-size: .7rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#rankingSheetModal .rse-spacer { flex: 1; }
#rankingSheetModal .rse-status {
    font-size: .68rem; color: var(--jt-text-muted); white-space: nowrap;
}
#rankingSheetModal .rse-status--err { color: var(--jt-accent-red); }
#rankingSheetModal .rse-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jt-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#rankingSheetModal .rse-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions/minimize chrome ships on-dark; this header is a plain surface,
   so flip the toolbar in light theme. Same fix as projections/transactions. */
[data-theme="light"] #rankingSheetModal .rse-header .ra-btn,
[data-theme="light"] #rankingSheetModal .rse-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}

/* ── control rows ── */
#rankingSheetModal .rse-ctrl,
#rankingSheetModal .rse-posbar {
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    padding: 8px 14px; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
}
#rankingSheetModal .rse-posbar { background: var(--jt-bg-secondary); padding: 6px 14px; }
/* Row label — the thing that makes the split legible. Fixed width so "Sheet"
   and "View" line up and the two rows read as a pair. */
#rankingSheetModal .rse-lbl {
    font-size: .58rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--jt-text-disabled-grey);
    min-width: 42px;
}
/* Inline label for a control inside a row (Draft type, Ranking). */
#rankingSheetModal .rse-lbl2 {
    font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--jt-text-muted);
}
/* The sheet's own name is the menu — management verbs hang off the thing they
   act on rather than sitting in the bar permanently. */
#rankingSheetModal .rse-sheetbtn {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 3px 10px; font-size: .74rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; max-width: 230px;
}
#rankingSheetModal .rse-sheetbtn:hover { background: var(--jt-bg-elevated); }
#rankingSheetModal .rse-car { color: var(--jt-text-muted); font-size: .6rem; }
#rankingSheetModal .rse-sel {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 3px 7px; font-size: .7rem; font-weight: 600; cursor: pointer;
}
#rankingSheetModal .rse-sheetmenu { min-width: 208px; }
#rankingSheetModal .rse-sep {
    width: 1px; height: 18px; background: var(--jt-border-primary);
}
#rankingSheetModal .rse-count {
    font-size: .68rem; color: var(--jt-text-secondary); white-space: nowrap;
}

#rankingSheetModal .rse-btn,
#rankingSheetModal .rse-tgl,
#rankingSheetModal .rse-picker,
#rankingSheetModal .rse-seg button {
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 3px 9px; font-size: .7rem; font-weight: 600; cursor: pointer;
}
#rankingSheetModal .rse-btn:hover,
#rankingSheetModal .rse-tgl:hover { background: var(--jt-bg-elevated); color: var(--jt-text-primary); }
#rankingSheetModal .rse-btn-pri {
    background: var(--jt-accent-blue); border-color: var(--jt-accent-blue); color: #fff;
}
#rankingSheetModal .rse-picker { max-width: 200px; }

#rankingSheetModal .rse-seg { display: inline-flex; border-radius: 6px; overflow: hidden; }
#rankingSheetModal .rse-seg button { border-radius: 0; border-right-width: 0; }
#rankingSheetModal .rse-seg button:last-child  { border-right-width: 1px; }
#rankingSheetModal .rse-seg button.on {
    background: var(--jt-accent-purple); border-color: var(--jt-accent-purple); color: #fff;
}

/* Drafted = green, Rostered = amber — the semantics the Depth Chart teaches.
   Keeping the same two colours means a user only learns them once. */
#rankingSheetModal .rse-tgl-d.on {
    background: rgba(16, 185, 129, .18); color: var(--jt-accent-green-hover);
    border-color: var(--jt-accent-green);
}
#rankingSheetModal .rse-tgl-r.on {
    background: rgba(245, 158, 11, .18); color: var(--jt-accent-amber-hover);
    border-color: var(--jt-accent-amber);
}

/* ── position chips ── */
#rankingSheetModal .rse-pchip {
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: 1px solid var(--jt-border-secondary); border-radius: 5px;
    padding: 2px 8px; font-size: .66rem; font-weight: 700; cursor: pointer;
}
#rankingSheetModal .rse-pchip.on {
    background: var(--jt-accent-blue); border-color: var(--jt-accent-blue); color: #fff;
}
#rankingSheetModal .rse-pchip .n { opacity: .65; font-weight: 600; margin-left: 4px; }
#rankingSheetModal .rse-topup-note { font-size: .66rem; color: var(--jt-text-muted); }

/* ── panes ── */
#rankingSheetModal .rse-panes { display: flex; flex: 1; min-height: 0; }
#rankingSheetModal .rse-pane-l { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
#rankingSheetModal .rse-pane-r {
    width: 250px; flex: none; display: flex; flex-direction: column;
    border-left: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
}
#rankingSheetModal .rse-pane-h {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 10px; font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--jt-text-muted); border-bottom: 1px solid var(--jt-border-primary);
}
#rankingSheetModal .rse-wpl {
    margin-left: auto; text-transform: none; letter-spacing: 0;
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 2px 8px; font-size: .66rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
#rankingSheetModal .rse-wpl:hover { background: var(--jt-bg-elevated); color: var(--jt-text-primary); }
#rankingSheetModal .rse-search {
    margin: 7px 8px; padding: 4px 8px; font-size: .7rem;
    background: var(--jt-bg-deep); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-primary); border-radius: 6px;
}
#rankingSheetModal .rse-browser { flex: 1; overflow-y: auto; }

/* ── Best available (§33.6) ──
   A live-draft view, not a change to the sheet. It hides who's gone; it never
   renumbers, so a row that still says #7 is telling you six players you ranked
   above him are off the board. */
#rankingSheetModal .rse-tgl-ba.on {
    background: var(--jt-accent-blue-bg);
    border-color: var(--jt-accent-blue-border);
    color: var(--jt-accent-blue-text);
}
/* Sticky: on the clock you scroll the list and still need this line. */
#rankingSheetModal .rse-nextup {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 10px;
    background: var(--jt-bg-deep);
    border-bottom: 1px solid var(--jt-accent-blue-border);
}
#rankingSheetModal .rse-nu-lbl {
    font-size: .58rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--jt-accent-blue-text);
}
#rankingSheetModal .rse-nu-rk {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; color: var(--jt-text-muted);
}
#rankingSheetModal .rse-nu-nm { font-weight: 700; font-size: .84rem; }
#rankingSheetModal .rse-nu-pos {
    font-size: .58rem; font-weight: 700; color: var(--jt-text-muted); margin-left: 3px;
}
#rankingSheetModal .rse-nu-then {
    margin-left: auto; font-size: .62rem; color: var(--jt-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── tier bands ── */
#rankingSheetModal .rse-band {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 10px; cursor: grab;
    background: var(--jt-bg-deep);
    border-top: 1px solid var(--jt-border-primary);
    border-bottom: 1px solid var(--jt-border-primary);
    font-size: .62rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--jt-text-secondary);
}
#rankingSheetModal .rse-band-grip { color: var(--jt-text-disabled); letter-spacing: -1px; }
#rankingSheetModal .rse-band-l { cursor: text; }
#rankingSheetModal .rse-band-l:hover { text-decoration: underline dotted; }
#rankingSheetModal .rse-band-n {
    margin-left: auto; font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--jt-text-muted);
}
#rankingSheetModal .rse-band-x {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    color: var(--jt-text-disabled); font-size: .7rem;
}
#rankingSheetModal .rse-band-x:hover { color: var(--jt-accent-red); }

/* ── rows ── */
#rankingSheetModal .rse-row,
#rankingSheetModal .rse-brow {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 6px;
    border-top: 1px solid var(--jt-border-muted);
    border-left: 3px solid transparent;
}
#rankingSheetModal .rse-row { cursor: default; }
#rankingSheetModal .rse-row:hover { background: var(--jt-bg-hover); }
#rankingSheetModal .rse-row.rse-dragging { opacity: .35; }
#rankingSheetModal .rse-row.rse-dragover { box-shadow: inset 0 2px 0 var(--jt-accent-blue); }

/* Tier spine — colour on 3px, never behind text, so no band needs a contrast
   check in either theme. Cycles so a 12-tier sheet still reads as blocks. */
#rankingSheetModal .rse-t0 { border-left-color: var(--jt-accent-blue); }
#rankingSheetModal .rse-t1 { border-left-color: var(--jt-accent-green); }
#rankingSheetModal .rse-t2 { border-left-color: var(--jt-accent-amber); }
#rankingSheetModal .rse-t3 { border-left-color: var(--jt-accent-purple); }
#rankingSheetModal .rse-t4 { border-left-color: var(--jt-accent-red); }
#rankingSheetModal .rse-t5 { border-left-color: var(--jt-text-muted); }

#rankingSheetModal .rse-grip {
    color: var(--jt-text-disabled); font-size: .68rem; cursor: grab; letter-spacing: -1px;
}
#rankingSheetModal .rse-rk {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; font-weight: 600; min-width: 26px; text-align: right;
    color: var(--jt-text-secondary); cursor: text;
}
#rankingSheetModal .rse-rk:hover {
    color: var(--jt-accent-blue-hover);
    text-decoration: underline dotted; text-underline-offset: 2px;
}
#rankingSheetModal .rse-rk--edit {
    width: 42px; padding: 0 3px; text-align: center; cursor: text;
    background: var(--jt-bg-deep); color: var(--jt-text-primary);
    border: 1px solid var(--jt-accent-blue); border-radius: 4px;
}
#rankingSheetModal .rse-rk2 {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6rem; color: var(--jt-text-muted); min-width: 32px;
}

/* Headshot — 22px, not WPL's 28: the sheet row carries more columns and this
   buys back name width. ESPN busts are portrait on transparent, so cover +
   top framing keeps the face in the circle. */
#rankingSheetModal .rse-hs {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; object-position: top center;
    background: var(--jt-bg-elevated);
    border: .5px solid rgba(255, 255, 255, .18);
}

/* Position chips use the app's canonical --jt-pos-* fills and their PAIRED
   --jt-pos-*-on ink. Never a local palette and never a blanket color:#fff —
   that pairing is exactly what the Aug 25 a11y pass removed app-wide, because
   the right ink differs per fill (QB takes dark, RB takes light). A private
   copy here would also make a QB chip a different red than every other surface. */
#rankingSheetModal .rse-pos {
    font-size: .58rem; font-weight: 800; padding: 1px 4px; border-radius: 3px;
    min-width: 26px; text-align: center;
    background: var(--jt-pos-default); color: var(--jt-pos-default-on);
}
#rankingSheetModal .rse-pos-QB  { background: var(--jt-pos-qb);  color: var(--jt-pos-qb-on); }
#rankingSheetModal .rse-pos-RB  { background: var(--jt-pos-rb);  color: var(--jt-pos-rb-on); }
#rankingSheetModal .rse-pos-WR  { background: var(--jt-pos-wr);  color: var(--jt-pos-wr-on); }
#rankingSheetModal .rse-pos-TE  { background: var(--jt-pos-te);  color: var(--jt-pos-te-on); }
#rankingSheetModal .rse-pos-K   { background: var(--jt-pos-k);   color: var(--jt-pos-k-on); }
#rankingSheetModal .rse-pos-DST { background: var(--jt-pos-def); color: var(--jt-pos-def-on); }
#rankingSheetModal .rse-pos-DL,
#rankingSheetModal .rse-pos-LB,
#rankingSheetModal .rse-pos-DB  { background: var(--jt-pos-dt);  color: var(--jt-pos-dt-on); }

#rankingSheetModal .rse-nm {
    font-weight: 600; font-size: .74rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#rankingSheetModal .rse-tm { font-size: .62rem; color: var(--jt-text-muted); white-space: nowrap; }
#rankingSheetModal .rse-by {
    /* --jt-accent-amber-text, not -hover: the hover alias is amber-400, which
       reads on dark (8.76) and fails on light (2.15). This token is amber-400
       in dark and amber-800 in light — it exists for exactly this. */
    font-size: .62rem; color: var(--jt-accent-amber-text); white-space: nowrap;
}
#rankingSheetModal .rse-mets { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#rankingSheetModal .rse-met {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .62rem; color: var(--jt-text-muted); white-space: nowrap; min-width: 26px; text-align: right;
}
#rankingSheetModal .rse-met b { color: var(--jt-text-primary); font-weight: 600; }
#rankingSheetModal .rse-step {
    display: inline-flex; flex-direction: column; line-height: .8;
    font-size: .5rem; color: var(--jt-text-disabled); cursor: pointer; user-select: none;
}
#rankingSheetModal .rse-step:hover { color: var(--jt-text-secondary); }
#rankingSheetModal .rse-ovf,
#rankingSheetModal .rse-x,
#rankingSheetModal .rse-add {
    background: none; border: 0; cursor: pointer; padding: 0 3px;
    color: var(--jt-text-disabled); font-size: .8rem; font-weight: 700;
}
#rankingSheetModal .rse-ovf:hover,
#rankingSheetModal .rse-add:hover { color: var(--jt-text-primary); }
#rankingSheetModal .rse-x:hover { color: var(--jt-accent-red); }
#rankingSheetModal .rse-added { color: var(--jt-accent-green); font-size: .7rem; }

/* ── auction money columns ── */
#rankingSheetModal .rse-sugg { min-width: 30px; }
#rankingSheetModal .rse-bid {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .64rem; font-weight: 600; min-width: 34px; text-align: right;
    padding: 0 4px; cursor: text; border-radius: 4px;
    background: var(--jt-bg-deep); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary);
}
#rankingSheetModal .rse-bid:hover { border-color: var(--jt-accent-blue); }
/* A typed max reads as the user's own number, distinct from the suggestion
   it replaced. --jt-accent-green-hover is the TEXT-safe green (the base is a
   fill colour); measured 8.4:1 dark / 4.9:1 light on this surface. */
#rankingSheetModal .rse-bid--own { color: var(--jt-accent-green-hover); }
#rankingSheetModal .rse-bid--edit {
    width: 46px; border-color: var(--jt-accent-blue); text-align: center;
}
#rankingSheetModal .rse-rst {
    font-size: .68rem; color: var(--jt-text-muted); cursor: pointer; user-select: none;
}
#rankingSheetModal .rse-rst:hover { color: var(--jt-text-primary); }
#rankingSheetModal .rse-rst--off { opacity: .25; cursor: default; }

/* ── Do Not Draft ──
   Hidden entirely below Elite (the markup isn't emitted), so this styles only
   the states a user can actually reach. Off by default at low opacity — a row
   of loud red 🚫 on every unmarked player would be noise. */
#rankingSheetModal .rse-dnd {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    font-size: .74rem; opacity: .28; line-height: 1;
}
#rankingSheetModal .rse-dnd:hover { opacity: .75; }
#rankingSheetModal .rse-dnd.on { opacity: 1; }
/* A marked player stays in place and stays legible — the mark is advice, not a
   removal. Muted + struck, the same treatment (and the same token) the
   off-board rows use, so the two read as one visual language. */
#rankingSheetModal .rse-row.rse-dnd-row .rse-nm {
    color: var(--jt-text-muted); text-decoration: line-through;
}

/* ── off the board ──
   The Depth Chart's .dc-off-board treatment — strike + italic + de-emphasis —
   with ONE deliberate divergence: the colour.
   .dc-off-board uses --jt-text-disabled-grey (slate-600 dark / gray-400 light).
   Measured on this modal's surface that lands at 1.93:1 in dark and 2.54:1 in
   light, and the struck name is still information the user has to read — it's
   the answer to "who is this and why is he crossed out?". --jt-text-muted is
   the token tuned to clear AA on the app's surfaces, so the name uses that and
   the strike + italic carry the "off the board" meaning on their own.
   (check-theme-tokens cannot see this: its own docblock lists cross-rule
   pairings — surface on the parent, colour on a child — as unchecked.)
   No row-level opacity: it compounded with the colour and dimmed the name twice. */
#rankingSheetModal .rse-row.rse-off .rse-nm {
    color: var(--jt-text-muted);
    text-decoration: line-through;
    font-style: italic;
}
#rankingSheetModal .rse-row.rse-off .rse-hs { filter: grayscale(1); opacity: .55; }
#rankingSheetModal .rse-row.rse-off .rse-met,
#rankingSheetModal .rse-row.rse-off .rse-rk { color: var(--jt-text-muted); }
#rankingSheetModal .rse-row.rse-off .rse-pos { opacity: .6; }

#rankingSheetModal .rse-row--ghost .rse-nm {
    color: var(--jt-text-muted); font-style: italic; font-weight: 500;
}

/* ── ⋯ menu ── */
#rankingSheetModal .rse-menu {
    position: absolute; z-index: 10; min-width: 176px; padding: 4px;
    background: var(--jt-bg-deep); border: 1px solid var(--jt-border-secondary);
    border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
#rankingSheetModal .rse-menu button {
    display: block; width: 100%; text-align: left;
    padding: 4px 8px; border: 0; border-radius: 4px; cursor: pointer;
    background: none; color: var(--jt-text-primary); font-size: .7rem;
}
#rankingSheetModal .rse-menu button:hover { background: var(--jt-accent-blue); color: #fff; }
#rankingSheetModal .rse-menu-h {
    padding: 5px 8px 2px; font-size: .58rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--jt-text-muted);
}
#rankingSheetModal .rse-menu-sep {
    height: 1px; margin: 4px 6px; background: var(--jt-border-primary);
}
#rankingSheetModal .rse-menu-del { color: var(--jt-accent-red); }
#rankingSheetModal .rse-menu-del:hover { background: var(--jt-accent-red); color: #fff; }

/* ── browser rows + empty state ── */
#rankingSheetModal .rse-colhead {
    display: flex; align-items: center; gap: 8px; padding: 3px 10px;
    background: var(--jt-bg-deep); border-bottom: 1px solid var(--jt-border-primary);
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--jt-text-muted);
}
#rankingSheetModal .rse-colhead-nm { flex: 1; }
#rankingSheetModal .rse-brow:hover { background: var(--jt-bg-hover); }

#rankingSheetModal .rse-more {
    display: block; width: calc(100% - 20px); margin: 10px;
    padding: 6px; font-size: .7rem; font-weight: 600; cursor: pointer;
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
}
#rankingSheetModal .rse-none {
    padding: 26px 18px; text-align: center;
    font-size: .74rem; color: var(--jt-text-muted);
}

#rankingSheetModal .rse-empty { width: 100%; padding: 20px 18px; text-align: center; }
#rankingSheetModal .rse-empty-ico { font-size: 1.6rem; margin-bottom: 6px; }
#rankingSheetModal .rse-empty-h {
    font-weight: 700; font-size: .82rem; color: var(--jt-text-primary); margin-bottom: 3px;
}
#rankingSheetModal .rse-empty-p { font-size: .72rem; color: var(--jt-text-muted); }
#rankingSheetModal .rse-empty-row {
    display: flex; gap: 10px; align-items: flex-end;
    justify-content: center; flex-wrap: wrap; margin: 14px 0 10px;
}
#rankingSheetModal .rse-empty-row label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--jt-text-muted); text-align: left;
}
#rankingSheetModal .rse-empty-row select {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 4px 8px; font-size: .72rem; font-weight: 600; text-transform: none;
}
#rankingSheetModal .rse-empty-note { font-size: .68rem; color: var(--jt-text-muted); }

/* ── narrow: the browser becomes a bottom drawer ──
   Below ~900px the side-by-side split starves the sheet, and on touch the
   drag handles don't fire at all — the rank field and ▲▼ carry the interaction
   there, which is why they're not optional affordances. */
@media (max-width: 900px) {
    #rankingSheetModal .rse-panes { flex-direction: column; }
    #rankingSheetModal .rse-pane-r {
        width: auto; border-left: 0;
        border-top: 1px solid var(--jt-border-primary);
        max-height: 38%;
    }
    #rankingSheetModal .rse-modal { width: 96vw; height: 94vh; }
}