/* Tap-a-score scoring breakdown (2026-09-09) — see scoring_note.js.

   A bottom sheet in the player mini-card's shape, because it is opened the
   same way from the same rows and a second sheet idiom on one screen would
   be one too many. z-order sits just above the mini-card (64/65) so a stray
   double-open is deterministic, and still under the trade board's picker
   (80). */

.scnote-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 66;
  background: rgba(2, 6, 23, 0.6);
}
.scnote-backdrop.open { display: block; }

.scnote {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 67;
  max-width: 480px; margin: 0 auto;
  background: var(--bg-sunken);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  box-shadow: 0 -10px 30px rgba(2, 6, 23, 0.6);
}
.scnote.open { display: block; }
.scnote:focus { outline: none; }        /* it takes focus on open, silently */
.scnote-body { max-height: 72vh; overflow-y: auto; }

/* 44pt hit box out of a 1.3rem glyph, bought with padding and paid back
   with negative margin so it costs the header no layout — the AI dock's
   trick (design-review part two). */
.scnote-close {
  position: absolute; top: 0.4rem; right: 0.5rem;
  box-sizing: border-box; min-width: 44px; min-height: 44px;
  width: auto; margin: -12px; padding: 12px;
  background: none; border: none; color: var(--ink-muted);
  font-size: 1.3rem; line-height: 20px; text-align: center; cursor: pointer;
}
.scnote-close:hover { color: var(--ink); background: none; }

.scnote-head {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding-right: 2rem;                  /* clear of the close button */
  margin-bottom: 0.5rem;
}
.scnote-id { flex: 1; min-width: 0; }
.scnote-name { font-size: var(--fs-title); font-weight: 800; }
.scnote-sub {
  font-size: var(--fs-caption); color: var(--ink-muted); margin-top: 2px;
}
.scnote-total { flex: none; text-align: right; line-height: 1.1; }
.scnote-total b {
  display: block; font-size: var(--fs-display); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scnote-total small {
  font-size: var(--fs-caption); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* The same terse line the row shows, repeated here in full — the row
   only had room for the first couple of items. */
.scnote-stats {
  font-size: var(--fs-small); color: var(--ink-2); font-weight: 600;
  padding: 0.4rem 0.55rem; margin-bottom: 0.6rem;
  background: var(--bg-card); border-radius: 8px;
}

.scnote-msg {
  font-size: var(--fs-small); color: var(--ink-muted);
  margin: 0.6rem 0 0.2rem;
}

.scnote-tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}
.scnote-tbl caption {
  text-align: left; font-size: var(--fs-caption); color: var(--ink-muted);
  padding-bottom: 0.3rem;
}
.scnote-tbl th, .scnote-tbl td {
  padding: 0.4rem 0.2rem; text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--line-soft);
}
.scnote-tbl thead th {
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
/* The header cell for "#" is a one-character column, so it carries a
   title— which needs the underline suppressed or it reads as a link. */
.scnote-tbl abbr { text-decoration: none; border: none; }
/* Rule names are the wide column; the three number columns are pinned so
   they line up down the sheet no matter how long a rule name runs. */
.scnote-tbl tbody th, .scnote-tbl tfoot th {
  color: var(--ink-2); font-weight: 400; padding-right: 0.4rem;
}
.scnote-tbl .n { text-align: right; width: 3.2em; white-space: nowrap; }
.scnote-tbl .v { color: var(--ink); font-weight: 800; }
.scnote-tbl .v.neg { color: var(--bad); }
.scnote-abbr {
  color: var(--ink-muted); font-size: var(--fs-caption);
  margin-left: 0.25em; white-space: nowrap;
}
.scnote-tbl tfoot th, .scnote-tbl tfoot td {
  border-bottom: none; border-top: 1px solid var(--line);
  font-weight: 800; color: var(--ink);
}

.scnote-foot {
  font-size: var(--fs-caption); color: var(--ink-muted);
  margin: 0.6rem 0 0; line-height: 1.45;
}

/* ── The trigger, and the terse line beside it ────────────────────────
   The points number becomes a button on every live-scoring surface. It
   has to shed the UA button look completely: these numbers sit in dense
   rows where a chrome-drawn border or the trade board's global
   `button { width: 100% }` would wreck the column. */
.plr-pts[data-scoring-player], .mx-pts[data-scoring-player] {
  -webkit-appearance: none; appearance: none;
  background: none; border: none; border-radius: 6px;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; text-align: inherit;
}
/* The tappable number is underlined with a dotted rule rather than tinted:
   this column already spends colour on live / yet-to-play / bench state,
   and an accent here would collide with all three. */
.plr-pts[data-scoring-player] { text-decoration: underline dotted var(--line-mid); }
.mx-pts[data-scoring-player] { text-decoration: underline dotted var(--line-mid); }
.plr-pts[data-scoring-player]:hover, .mx-pts[data-scoring-player]:hover {
  background: var(--bg-raised); text-decoration-color: var(--accent);
}

/* Live position-relevant stats under a player's name ("66 PASS YDS · 1
   PASS TD"). It is a SIBLING of the name cell, not a child of it, and
   takes a full line of its own (.plr wraps): inside the name cell it had
   ~134px once the live tag and the three number columns took their share,
   and a three-item line came out as "84 PASS YDS · 1 PASS TD · 36 …".
   Out here it gets the row's full ~306px and fits four.
   The left padding parks it under the name rather than under the slot
   label: 3em slot column + the row's 0.3rem gap. */
.plr-stats {
  flex-basis: 100%; padding-left: calc(3em + 0.3rem);
  color: var(--ink-2); font-size: var(--fs-caption); font-weight: 600;
  line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.plr.bench .plr-stats { color: var(--ink-muted); }