/* Desktop Trade workspace: the deal strip and paired packages echo the
     approved reference; all palette/type choices use Neon Arcade tokens. */
  @media (min-width: 761px) {
    .desktop-trade { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
    .tw-heading { display: flex; align-items: flex-start; gap: 28px; padding: 10px 0; }
    .tw-heading-title { flex: 0 0 auto; align-self: flex-start; }
    .home-screen .pagehead .eyebrow, .tw-heading .eyebrow { margin: 0 0 5px; } /* type: the shared pixel eyebrow rule */
    .home-screen .pagehead .ptitle, .tw-heading .ptitle { font-family: var(--display); font-weight: 700;
      margin: 0; font-size: clamp(28px, 2.2vw, 38px); line-height: 1; color: #f7fbff;
      text-shadow: 3px 3px 0 var(--header-title-shade);
      filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--header-title-shade) 55%, var(--bg))); }
    .tw-heading .ptitle { white-space: nowrap; }
    .tw-finances.hstrip { flex: 0 1 auto; min-width: 0;
      grid-template-columns: minmax(250px, 310px) minmax(200px, 220px) minmax(180px, 195px) minmax(125px, 145px);
      justify-content: end; width: 100%; gap: 6px; }
    .tw-finances.hstrip .tw-readout { min-width: 0; border: 0; border-top: 2px solid var(--pink);
      background: var(--panel); box-shadow: none; }
    .tw-finances.hstrip .tw-readout .lbl { color: var(--pink); }
    .tw-finances.hstrip .tw-readout .lbl, .tw-finances.hstrip .tw-readout .sub { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    .tw-finances.hstrip .tw-cap-warning { color: var(--orange); font-weight: 700; }
    .tw-strip { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: minmax(160px, 1fr) auto auto auto; gap: 9px 24px; align-items: center; padding: 14px 18px; background: var(--panel); border: 1px solid var(--violet); border-left: 4px solid var(--cyan); box-shadow: 0 5px 18px #0008; }
    .tw-strip h2 { color: var(--gold); font: 700 15px/1.6 var(--display); margin: 0 0 5px; }
    .tw-strip small { display: block; color: var(--cyan); text-transform: uppercase; font-size: 11px; }
    .tw-strip b { display: block; font-size: 20px; }
    .tw-strip span { font-size: 12px; color: var(--dim); }
    .tw-strip .commit { min-height: 42px; }
    .tw-strip .commit:disabled { background: var(--panel-sel); color: var(--text-dim); box-shadow: none; }
    .tw-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tw-legality { grid-column: 1 / 4; font-size: 12px; color: var(--dim); margin: 0; overflow-wrap: anywhere; }
    .tw-legal { color: var(--good); }
    .tw-illegal { color: var(--bad); }
    .tw-exact { grid-column: 4; font-size: 10px; }
    .tw-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    .tw-package, .tw-assets { min-width: 0; border: 1px solid var(--border-strong); border-top: 2px solid var(--cyan); background: var(--panel); padding: 12px; }
    .tw-package > header, .tw-assets > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .tw-assets > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 46%); min-height: 52px; }
    .tw-assets-heading { display: grid; gap: 4px; }
    .tw-assets-heading > span, .tw-partner-field > span { color: var(--dim); font-size: 11px; }
    .tw-partner-field { display: grid; gap: 4px; min-width: 0; }
    .tw-partner-field select { width: 100%; min-width: 0; font-size: 12px; }
    .tw-package > header > b { margin-left: auto; }
    .desktop-trade h2 { font: 700 13px/1.6 var(--display); color: var(--cyan); margin: 0; }
    .desktop-trade .tw-assets-heading h2 { color: var(--pink); }
    .desktop-trade .tw-strip h2, .tw-stage-title h2 { color: var(--gold); }
    /* Match the original compact summary. Only the submission footer sticks
       when scrolling down to browse assets. */
    .tw-staged-body { padding: 12px; border: 1px solid color-mix(in srgb, var(--good) 55%, var(--border)); border-bottom: 0;
      background: color-mix(in srgb, var(--gold) 5%, var(--panel2)); }
    .tw-staged-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
      padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--good) 25%, var(--border)); }
    .tw-staged-header .eyebrow { color: var(--cyan); font: 600 12px/1.2 var(--body); letter-spacing: .12em; }
    .desktop-trade .tw-staged-header h2 { margin: 2px 0 3px; } /* type: shared with .stage-summary-head h3 */
    .tw-staged-header p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.4; }
    .tw-staged-header > button { flex-shrink: 0; }
    .tw-offer-expiry { color: var(--text-dim); }
    .tw-deal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
    .tw-deal-actions .ghost { font-size: 11px; }
    .tw-staged-body > .tw-columns { margin-top: 10px; gap: 12px; }
    .tw-staged-body > .tw-deal-columns { grid-template-columns: minmax(0, 1fr) 47px minmax(0, 1fr); }
    .tw-trade-chevron { width: 47px; height: 21px; align-self: center; fill: var(--violet); }
    .tw-staged-body .tw-package { border: 0; background: none; padding: 0; }
    .tw-package > header { margin-bottom: 7px; gap: 8px; flex-wrap: nowrap; font: 700 12px/1.2 var(--display); letter-spacing: .08em; }
    .desktop-trade .tw-package h2 { color: var(--cyan); font: inherit; text-transform: uppercase; }
    .tw-staged-body > .tw-notice, .tw-staged-body > .verdict { margin-bottom: 12px; }
    .tw-strip.tw-staged-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: -14px; padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--good) 55%, var(--border)); border-top: 1px solid color-mix(in srgb, var(--good) 25%, var(--border));
      background: color-mix(in srgb, var(--gold) 5%, var(--panel2)); box-shadow: none; }
    .tw-staged-footer .tw-legality { margin-top: 4px; }
    .tw-staged-footer strong { color: var(--text); }
    .tw-package > header > span, .tw-assets > header > span { color: var(--dim); font-size: 11px; }
    .tw-package .stage-asset { padding: 8px; gap: 8px; margin-bottom: 7px; }
    .tw-package .stage-asset-copy { min-width: 0; }
    .tw-package .stage-asset-copy b { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
    .tw-package .stage-player-link { white-space: normal; overflow-wrap: anywhere; }
    .tw-package .stage-asset-copy > span { font-size: 13px; line-height: 1.4; }
    .tw-package .stage-asset-copy .pill { font-size: 12px; }
    .tw-package .stage-asset-actions button { font-size: 11px; }
    .desktop-trade .qcard { border-radius: 0; }
    .desktop-trade .qcard .qline { font-size: 15px; }
    .desktop-trade .qcard .qline .pill { font-size: 12px; }
    .tw-package .stage-asset-kind { font-size: 11px; }
    .tw-package .stage-asset-actions { flex-wrap: nowrap; }
    .tw-package .tw-add { padding: 3px 0; border: 0; font-size: 11px; color: var(--violet); text-transform: none; }
    .tw-stage-title, .tw-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .tw-stage-title small { color: var(--dim); font-size: 12px; }
    .tw-browser-head { display: block; margin: 0; }
    .tw-browser-head > .tw-terms { margin: 0; padding: 0; border: 0; background: none; }
    .tw-browser-head > .tw-terms > summary { width: max-content; padding: 9px 12px; border: 1px solid var(--violet); color: var(--violet); font-size: 12px; font-weight: 700; text-transform: uppercase; }
    .tw-browser-head > .tw-terms > .tw-columns { margin-top: 12px; padding: 12px; border: 1px solid var(--border-strong); background: var(--panel); }
    .tw-tabs { display: flex; gap: 4px; }
    .tw-tabs button { border: 1px solid var(--violet); padding: 8px 10px; font-size: 11px; }
    .tw-tabs button[aria-pressed=true] { background: var(--accent); color: #fff; border-color: var(--accent); }
    .tw-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .tw-filters select, .tw-filters input { min-width: 0; font: 12px var(--body); padding: 7px; }
    .tw-filters input { flex: 1; width: 130px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); }
    .tw-table { width: 100%; table-layout: auto; font-size: 15px; }
    .tw-table th, .tw-table td { padding: 9px 4px; font-size: 15px; }
    .tw-table td:nth-child(2) { overflow-wrap: anywhere; }
    .tw-table th { position: relative; font-size: 12px; color: var(--dim); }
    .tw-table .pill { padding: 2px 4px; font-size: 13px; white-space: nowrap; }
    .tw-table input[type=checkbox] { width: 15px; height: 15px; margin: 0; }
    .tw-table .tw-player { background: none; border: 0; color: var(--text); padding: 0; text-align: left; font: 600 16px/1.5 var(--body); text-transform: none; letter-spacing: 0; white-space: normal; }
    .tw-table .tw-player:hover { color: var(--cyan); text-decoration: underline; }
    .tw-asset-row[aria-disabled=false] { cursor: pointer; }
    .tw-asset-row[aria-disabled=false]:hover { background: var(--panel-sel); }
    .tw-asset-row[aria-disabled=true] { cursor: not-allowed; }
    .tw-selected { background: var(--panel-sel); }
    .tw-unavailable { display: block; color: var(--orange); font-size: 12px; }
    .tw-notice { padding: 12px; margin: 0; border: 1px solid var(--border-strong); background: var(--panel2); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
    .tw-notice button { margin-left: 8px; }
    .tw-incoming p { margin: 0 0 10px; }
    .tw-incoming-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .tw-incoming-actions button { margin: 0; }
    .tw-empty { padding: 14px; color: var(--dim); font-size: 13px; }
    .tw-changes ul { margin: 8px 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
    .tw-changes { border-left: 3px solid var(--orange); padding: 12px; margin-bottom: 10px; font-size: 13px; }
    .tw-added { border-left: 3px solid var(--orange); }
    .tw-change-tag { display: block; color: var(--orange); font-size: 10px; padding: 4px 8px; }
    .tw-terms { margin-top: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--border-strong); font-size: 12px; }
    .tw-terms summary { cursor: pointer; color: var(--dim); padding: 3px; }
    .tw-terms h3 { font-size: 13px; }
    .tw-terms input[type=number] { width: 90px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); padding: 7px; }
    .tw-term-choice, .tw-protection { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
    .tw-terms .asset-form { flex-wrap: wrap; }
    .desktop-trade #tradeProposalSummary, .tw-assets, #workspaceOffers { scroll-margin-top: 140px; }
    .desktop-trade :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
  }
  @media (min-width: 761px) {
    @container (max-width: 1384px) {
      /* Same rule as Home: cards (Payroll's share trimmed) share the title's row
         behind a wide gap, shrinking to their content, else wrap full-width. */
      .tw-heading { flex-wrap: wrap; gap: 10px 56px; }
      .tw-finances.hstrip { flex: 1 1 0; min-width: min-content;
        grid-template-columns: minmax(min-content, 250fr) minmax(min-content, 220fr) minmax(min-content, 195fr) minmax(min-content, 145fr);
        justify-content: stretch; }
      .tw-finances.hstrip .tw-readout .lbl, .tw-finances.hstrip .tw-readout .sub { overflow-wrap: normal; }
    }
  }
  @media (min-width: 761px) and (max-width: 900px) {
    .tw-finances.hstrip { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 761px) and (max-width: 1100px) {
    .tw-strip { gap: 8px 12px; padding: 12px; }
    .desktop-trade #tradeProposalSummary, .tw-assets, #workspaceOffers { scroll-margin-top: 120px; }
    .tw-staged-header { flex-wrap: wrap; }
    .tw-assets { padding: 8px; }
    .tw-table th, .tw-table td { padding: 8px 2px; font-size: 13px; }
    .tw-table th { font-size: 11px; }
    .tw-table .pill { font-size: 12px; }
    .tw-table .tw-player { font-size: 14px; }
    .tw-package .stage-asset { grid-template-columns: auto minmax(0, 1fr); }
    .tw-package .stage-asset-kind { grid-row: 1 / 3; }
    .tw-package .stage-asset-actions { grid-column: 2; justify-content: flex-start; }
  }
  :root {
    /* Palette = the Neon Arcade token sheet (docs/DESIGN-LANGUAGE-SYSTEMS.md — the
       tokens source of truth): a near-black cabinet base, BLUE as the primary UI
       accent, CYAN/VIOLET as the arcade structure accents, and GOLD reserved for
       elite ratings, money, and the moment of commitment. Green/red stay
       positive/negative. */
    --canvas: #111318; /* Solid page background only; component surfaces stay navy. */
    --bg: #020619; --bg-elev: #0b1536; --panel: #07102a; --panel2: #0b1536;
    --panel-sel: #14204a; --border: #14204a; --border-strong: #2a3f7a;
    --text: #f5f3ff; --dim: #b7c8e8; --text-dim: #7081a8;
    --accent: #087bff; --accent-bright: #3c8bff; /* primary/interactive/selected (blue); bright = hover tier */
    --accent-dim: #1257cc; /* pressed — derived darker step of --accent */
    --gold: #ffb000;   /* RESERVED: selection, the commit action, elite (90+ OVR, contender) */
    --good: #58f06a; --bad: #ff284d;
    --cyan: #00e5ff; --violet: #a044ff; /* arcade structure accents — nav/frames/focus */
    --orange: #ff5a00; /* cap heat / warnings — frees gold to stay a selection-and-commit color */
    --magenta: #f03bff; /* rare high-energy accent: Home dashboard instrument titles only */
    --pink: #dc53ed; /* section/asset-heading accent: mobile boards + desktop trade workspace headings */
    /* Phone header shades (DESIGN.md §42). The app shell overrides both per franchise from
       TEAM_HEADER_SHADES (Roster's name line from the viewed team); these violet values are the
       fallback. name: edge under the team-name line. title: both page-title shadow layers and
       the header divider. */
    --header-name-shade-fallback: #a044ff;
    --header-title-shade-fallback: #59216f;
    --header-name-shade: var(--header-name-shade-fallback);
    --header-title-shade: var(--header-title-shade-fallback);
    /* CRT scanline recipe (design-system sync): faint white lines, blended, behind content */
    --scanline: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
    --notch: 9px; /* stepped-corner bevel size — the cabinet-chassis geometry */
    /* Embedded display face (Press Start 2P, OFL) for headings and arcade emphasis —
       no external/webfont request, preserving the offline single-file architecture.
       Readable body copy uses the local Inter --body stack below. */
    --display: "PixelArcade", "Lucida Console", monospace;
    --body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--body); background: var(--canvas); color: var(--text); }
  button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
  /* brightness() so the same hover works on every button variant's background (primary,
     ghost, tcard, qlink…) — swapping primaries to --accent-bright is the step-4 pass */
  button:hover { filter: brightness(1.1); }
  button:disabled { background: #3a4552; color: var(--dim); cursor: not-allowed; }
  button.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
  nav { display: flex; gap: 4px; padding: 8px 20px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
  nav .tab { background: none; border: none; color: var(--dim); padding: 8px 14px; border-radius: 6px 6px 0 0; font-size: 14px; }
  nav .tab.active { background: var(--bg); color: var(--text); font-weight: 700; }
  nav .tab:disabled { opacity: .35; }
  main { padding: 16px 20px 60px; max-width: 1100px; margin: 0 auto; }
  main h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
  th { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
  th.sortable { cursor: pointer; }
  th.sortable:hover { color: var(--text); }
  tr.user-row { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .num { text-align: right; }
  .pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; background: var(--panel2); border: 1px solid var(--border); }
  .renounce-note { font-size: 12px; color: var(--orange); } /* on-screen consequence for the two-step renounce (D28) */
  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
  /* opt-in, not the .panel default (issue #32): overflow-x: auto forces overflow-y to
     auto too (one CSS overflow axis can't stay visible once the other isn't), so setting
     it on every panel would clip any future dropdown/popover/tooltip at the panel edge.
     Applied only to panels that actually wrap a wide table needing horizontal scroll. */
  .panel-scroll { overflow-x: auto; }
  .panel h2 { margin: 0 0 10px; font-size: 17px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  /* Ordinary panel titles have no universal generated tick; major card headers
     opt into their own keyline when hierarchy needs it (DESIGN.md §3). */
  .retire-season { font: 700 11px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); margin: 10px 0 4px; }
  .retire-season:first-child { margin-top: 0; }
  main table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 800px) { .row2 { grid-template-columns: 1fr; } }
  select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 14px; }
  /* theme the native form controls so checkboxes/radios/selects match the dark palette
     instead of rendering in the OS default (blue-on-white) accent */
  input[type=checkbox], input[type=radio], select { accent-color: var(--cyan); }
  ::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--text); }
  /* live trade-legality match bar (updates on every asset/cash change, not just Propose) */
  .tlegal { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 11px 14px;
    border-radius: 8px; background: var(--panel2); border: 1px solid var(--border); font-size: 13px; }
  .tlegal .ts { color: var(--dim); white-space: nowrap; }
  .tlegal .ts b { color: var(--text); font-variant-numeric: tabular-nums; }
  .tlegal .ts.r { text-align: right; }
  .tlegal .tstate { flex: 1; text-align: center; font-weight: 700; }
  .tlegal.none .tstate { color: var(--dim); font-weight: 400; }
  .tlegal.legal { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); background: color-mix(in srgb, var(--good) 8%, transparent); }
  .tlegal.legal .tstate { color: var(--good); text-transform: uppercase; letter-spacing: .05em; }
  .tlegal.illegal { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad) 7%, transparent); }
  .tlegal.illegal .tstate { color: var(--bad); }
  .trade-actionbar { position: sticky; top: 0; z-index: 8; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 16px;
    padding: 8px 12px; background: var(--panel);
    border-bottom: 1px solid color-mix(in srgb, var(--violet) 45%, var(--border));
    box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
  .trade-actionbar .tlegal { margin: 0; min-width: 0; }
  .trade-actionbar button { white-space: nowrap; }
  .trade-actionbar button.counter { background: var(--orange); }
  .trade-side { min-width: 0; }
  /* Heading is a two-row lockup ("You send" over the team) so the label and the team
     name/partner select can't wrap into each other in a narrow column. */
  .trade-side h2 { margin-bottom: 4px; }
  /* Both sides' team lines share one height — the left is plain text and the right is a
     select, and without this the taller select pushes the partner's asset list ~18px
     below the user's, so no two facing rows line up. */
  .trade-side-team { font-size: 14px; color: var(--text); margin: 0 0 4px 12px; min-width: 0;
    min-height: 32px; display: flex; align-items: center; }
  .trade-side-team select { max-width: 100%; }
  .trade-side-meta { display: none; } /* phone-only summary; desktop keeps the full cap-status boxes */
  .asset-group { margin-top: 8px; border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border));
    background: color-mix(in srgb, var(--panel2) 36%, transparent); }
  .asset-group > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 12px; color: var(--cyan); font: 700 12px/1.3 var(--display);
    letter-spacing: .05em; text-transform: uppercase; list-style: none; }
  .asset-group > summary::-webkit-details-marker { display: none; }
  .asset-group > summary::after { content: "+"; color: var(--violet); font-size: 14px; }
  .asset-group[open] > summary::after { content: "−"; }
  .asset-group > .asset-body { padding: 4px 8px 8px; border-top: 1px solid color-mix(in srgb, var(--violet) 22%, var(--border)); }

  /* ── rotation panel ── */
  .rot-panel { margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border));
    background: var(--panel); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
  .rot-panel > .rot-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
  .rot-panel .rot-title { margin: 0; font: 700 13px/1.3 var(--display); text-transform: uppercase;
    letter-spacing: .05em; color: var(--text); }
  .rot-panel .rot-style-label { font: 700 11px/1.3 var(--display); text-transform: uppercase;
    letter-spacing: .05em; color: var(--gold); }
  .rot-panel .rot-sel { margin-left: auto; font-size: 12px; padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--violet) 50%, var(--border));
    background: var(--panel2); color: var(--text); }
  .rot-body { padding: 8px 14px 14px; border-top: 1px solid color-mix(in srgb, var(--violet) 22%, var(--border)); }
  .rot-body table { width: 100%; }
  .rot-body th { font-size: 11px; padding: 4px 8px; }
  .rot-body td { padding: 5px 8px; font-size: 13px; }
  .rot-row-inj td { opacity: .45; }
  .rot-row-dnp td { opacity: .65; }
  .rot-status { display: inline-block; padding: 1px 6px; font-size: 11px; font-family: var(--display);
    text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
  .rot-status-inj { border: 1px solid var(--orange, #ff8c00); color: var(--orange, #ff8c00); }
  .rot-status-dnp { border: 1px solid var(--border); color: var(--text-dim); }
  .rot-slider-cell { display: flex; align-items: center; gap: 6px; min-width: 140px; }
  .rot-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 6px;
    background: var(--panel2); border: 1px solid var(--border); border-radius: 0; outline: none; cursor: pointer; }
  .rot-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px;
    background: var(--cyan); border: none; border-radius: 0; cursor: pointer; }
  .rot-slider::-moz-range-thumb { width: 10px; height: 18px;
    background: var(--cyan); border: none; border-radius: 0; cursor: pointer; }
  .rot-slider:disabled { opacity: .3; cursor: not-allowed; }
  .rot-slider:disabled::-webkit-slider-thumb { background: var(--text-dim); }
  .rot-min-val { min-width: 20px; text-align: right; font-family: var(--display); font-size: 13px; }
  .rot-override-mark { color: var(--cyan); font-size: 10px; margin-left: 2px; }
  .rot-clear { background: none; border: none; color: var(--text-dim); font-size: 13px;
    cursor: pointer; padding: 0 4px; min-width: 18px; }
  .rot-clear:hover { color: var(--text); }
  .rot-footer { display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border)); }
  .rot-budget { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; color: var(--cyan); font-size: 14px; }
  .rot-help { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
  .rot-scale-note { font-size: 12px; color: var(--text-dim); }
  .rot-reset { background: none; border: 1px solid color-mix(in srgb, var(--orange, #ff8c00) 60%, var(--border));
    color: var(--orange, #ff8c00); font-size: 11px; padding: 4px 10px; cursor: pointer;
    text-transform: uppercase; letter-spacing: .04em; font-family: var(--display); }
  .rot-reset:hover { background: color-mix(in srgb, var(--orange, #ff8c00) 12%, transparent); }
  @media (max-width: 760px) {
    .rot-body th.rot-col-p3, .rot-body td.rot-col-p3 { display: none; }
    .rot-slider-cell { min-width: 100px; }
    .rot-slider { height: 44px; border: none;
      background: linear-gradient(to bottom, transparent 19px, var(--border) 19px 20px,
        var(--panel2) 20px 24px, var(--border) 24px 25px, transparent 25px); }
    .rot-panel .rot-style-label { font-size: 10px; }
    .rot-panel > .rot-head { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
    .rot-panel .rot-sel { font-size: 11px; min-height: 44px; }
    /* Auto layout gave OVR's two digits ~100px and wrapped every name onto two lines;
       fix the columns so names get the room and ellipsize (the card link still opens). */
    .rot-body table { table-layout: fixed; }
    .rot-body th:first-child, .rot-body td:first-child { width: 38%; }
    .rot-body .rot-slider-cell { min-width: 0; }
    .rot-body .rot-slider { min-width: 0; width: 0; } /* a range input will not shrink below ~129px on its own */
    .rot-body th:nth-child(3), .rot-body td:nth-child(3) { width: 40px; text-align: center; }
    .rot-body td:first-child .pname { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; vertical-align: middle; }
  }
  .asset-season { margin-top: 8px; padding: 4px 0; color: var(--text-dim); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border)); }
  @media (max-width: 760px) { /* was 720 — harmonized with the phone-shell breakpoint (D28) */
    .trade-actionbar { grid-template-columns: 1fr; gap: 8px; padding: 6px 8px; }
    .trade-actionbar button { width: 100%; }
    .trade-actionbar .tlegal { font-size: 13px; flex-wrap: wrap; gap: 6px; }
    .cap-summary { flex-direction: column; }
    .stage-replace select { max-width: 100%; }
  }
  .verdict { padding: 10px 12px; border-radius: 6px; margin-top: 10px; font-size: 14px; }
  .verdict.accept { background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid var(--good); }
  .verdict.reject { background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid var(--bad); }
  .verdict.counter { background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid var(--orange); }
  .verdict .counter-ask { margin-left: 8px; }
  .trade-action-feedback { grid-column: 1 / -1; }
  .trade-action-feedback .verdict { margin-top: 0; }
  .proposal-summary { padding: 10px 14px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border)); background: var(--panel2); }
  .proposal-summary-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .proposal-summary-side > span { display: block; margin-bottom: 4px; color: var(--dim); font: 700 11px/1.2 var(--display); text-transform: uppercase; letter-spacing: .07em; }
  .proposal-summary-side b { font-size: 13px; line-height: 1.4; }
  @media (max-width: 760px) { .proposal-summary-sides { grid-template-columns: 1fr; gap: 8px; } }
  .win { color: var(--good); font-weight: 700; }
  .val.heat { color: var(--orange); font-weight: 700; } /* over-cap readout: cap-heat token, not the green of positive cap space */
  /* Three columns — box, identity, value pill. The identity column stacks name over meta
     so a long name can never wrap into the middle of "· 28y · 79 ovr ·" and the pills on
     every row stay aligned down the right edge regardless of name length. */
  /* Top-aligned, not centered: a row whose meta wraps to two lines is taller than one
     that doesn't, and centering would then float its checkbox and pill down beside the
     meta instead of the name. Every row's box, name and pill now sit on the same
     baseline row regardless of how the meta below them wraps. */
  .checkline { display: grid; grid-template-columns: 16px minmax(0, 1fr) 4.6em; gap: 8px;
    align-items: start; padding: 5px 2px; font-size: 14px; }
  .checkline > input { margin: 3px 0 0; }
  .checkline > .pill { justify-self: end; margin-top: 1px; }
  .checkline .asset-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .checkline .asset-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    min-width: 0; line-height: 1.25; }
  .checkline .sub { color: var(--dim); font-size: 12px; line-height: 1.3; }
  .ctotal { color: var(--dim); font-size: 12px; white-space: nowrap; }
  /* Roster salary column: same idiom, stacked, since the cell is narrow. */
  .ctotal-stack { text-align: right; white-space: nowrap; }
  .ctotal-stack .ctotal { display: block; }
  /* Small dim unit/qualifier text next to a figure or input ("/yr", "(MLE)"). */
  .unit { color: var(--dim); font-size: 12px; }
  .checkline .protectSel { grid-column: 2 / -1; max-width: 100%; }
  .asset-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 6px 2px; font-size: 14px; }
  .asset-form select { min-width: 0; }
  .banner { background: var(--panel2); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
  .log-line { font-size: 13px; line-height: 1.45; padding: 8px 12px; color: var(--dim);
    border-left: 2px solid color-mix(in srgb, var(--violet) 35%, var(--border));
    background: color-mix(in srgb, var(--panel2) 42%, transparent); }
  .log-line b { color: var(--text); }
  /* transaction logs read as one tall ragged column with a dead right half; flow them
     into balanced columns instead (news/signings) — grouped by day where the data has it */
  .loglist { column-count: 2; column-gap: 12px; }
  .loglist .log-line { break-inside: avoid; }
  @media (max-width: 720px) { .loglist { column-count: 1; } }
  .loggrp + .loggrp { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
  .loggrp-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin: 0 0 7px; }
  .event-log { display: grid; gap: 4px; margin-top: 12px; padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border)); }
  .event-log::before { content: "League updates"; color: var(--cyan); font-size: 12px;
    letter-spacing: .1em; text-transform: uppercase; }
  .event-log .log-line.injury { border-left-color: var(--bad); }
  .event-log .log-line.transaction { border-left-color: var(--cyan); }
  .event-log .log-line.return { border-left-color: var(--good); }
  .onclock { color: var(--accent); font-weight: 700; }
  .pill.inj { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
  .pill.bird { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
  .pill.warn { border-color: color-mix(in srgb, var(--orange) 45%, transparent); color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
  /* FA summary: a target the user bid on signed elsewhere (issue #175) — louder than a log line */
  .fa-lost { border: 1px solid var(--orange); border-left-width: 4px; background: color-mix(in srgb, var(--orange) 10%, var(--panel));
    padding: 12px 16px; margin-bottom: 16px; }
  .fa-lost h2 { color: var(--orange); margin: 0 0 8px; font-size: 15px; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; }
  .fa-lost-row { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
  .pill.dev { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
  .mor-hi { color: var(--good); } .mor-lo { color: var(--bad); }
  input[type=number] { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; width: 72px; font-size: 13px; }
  .cap-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--dim); margin: 0 0 10px; }
  .cap-summary b { color: var(--text); }
  /* Player card + head-to-head compare (console-feel #1) — grounded in the 2K rating-card
     vernacular: an OVR badge + scouting meters, not generic KPI tiles. Extends the existing
     slate/amber tokens; the badge is the one signature element. */
  /* Always-visible link affordance (D28, all widths): player names are the app's primary
     route to the card, and touch has no hover to reveal it. */
  .pname { cursor: pointer; border-bottom: 1px dotted color-mix(in srgb, var(--gold) 40%, transparent); }
  .pname:hover, .pname:focus-visible { color: var(--gold); border-bottom-color: var(--gold);
    text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 45%, transparent); outline: none; } /* link hover = amber (design-system sync) */
  .overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
  .pcard { position: relative; background: color-mix(in srgb, var(--panel2) 62%, var(--panel)); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 64px rgba(0,0,0,.55); }
  @media (prefers-reduced-motion: no-preference) { .pcard { animation: cardin .14s ease-out; } }
  @keyframes cardin { from { opacity: 0; transform: translateY(8px); } }
  .pcard-x { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--dim); font-size: 17px; line-height: 1; padding: 4px 9px; border-radius: 6px; }
  .pcard-x:hover { color: var(--text); background: var(--panel2); }
  .trade-popup { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; padding: 24px; box-shadow: 0 20px 64px rgba(0,0,0,.55); text-align: center; }
  @media (prefers-reduced-motion: no-preference) { .trade-popup { animation: cardin .14s ease-out; } }
  .trade-popup-hd { margin-bottom: 16px; }
  .trade-popup-hd .pill { font-size: 14px; padding: 4px 14px; }
  .trade-popup-sides { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; text-align: left; }
  .trade-popup-side { flex: 1; min-width: 0; }
  .trade-popup-side .eyebrow { margin-bottom: 6px; }
  .trade-popup-side ul { list-style: none; padding: 0; margin: 0; }
  .trade-popup-side li { padding: 4px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); }
  .trade-popup-side li:last-child { border-bottom: none; }
  .trade-popup-msg { font-size: 13px; color: var(--dim); padding: 10px 0; border-top: 1px solid var(--border); margin-bottom: 12px; }
  .trade-popup .commit { width: 100%; }
  @media (max-width: 760px) { .trade-popup { max-width: 360px; padding: 18px; } .trade-popup-sides { flex-direction: column; gap: 12px; } }
  .pcard-hd { display: flex; gap: 14px; align-items: flex-start; padding: 18px 44px 15px 18px; border-bottom: 1px solid var(--border); }
  .ovr-badge { flex: none; width: 66px; height: 66px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid; background: var(--panel2); }
  .pcard .ovr-badge { width: 80px; height: 80px; }
  .ovr-badge .n { font: 700 32px/1 var(--display); font-variant-numeric: tabular-nums; }
  .ovr-badge .k { font-size: 9px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
  .pcard-hd .who { min-width: 0; }
  .pcard-hd .nm { font-size: 22px; font-weight: 700; line-height: 1.1; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
  .pcard-hd .sub { color: var(--dim); font-size: 13px; margin-top: 3px; letter-spacing: .02em; }
  .pcard-hd .chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
  .pcard-body { padding: 16px 18px; }
  .meter-row { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 11px; margin: 10px 0; }
  .meter-row .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
  .meter-row .val { font: 600 14px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
  .meter { height: 8px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
  .meter > i { display: block; height: 100%; border-radius: 5px; }
  .pcard-sec { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
  .pcard-sec h4 { margin: 0 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
  /* even columns so each number sits over its own label (a wrapping flex row sized each
     cell to its number, drifting labels); numbers in the body face, not the pixel display */
  .statline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; }
  .statline b { font: 700 18px/1.1 var(--body); font-variant-numeric: tabular-nums; color: var(--text); }
  .statline span { display: block; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
  .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
  .kv > span { color: var(--dim); }
  .attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .attr-grid .kv b { font-variant-numeric: tabular-nums; }
  .pcard-ft { display: flex; gap: 8px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--border); }
  .pcard-ft.mgmt { flex-wrap: wrap; } /* two-step waive confirm carries long labels */
  /* Deep player card: header, tabs and action footer are fixed while exactly the
     body scrolls. Career owns the card's only intentional horizontal scroll. */
  .pcard-detail { max-width: 760px; max-height: min(90vh, 760px); overflow: hidden; display: flex; flex-direction: column; }
  .pcard-detail .pcard-hd, .pcard-detail .pcard-tabs, .pcard-detail .pcard-ft { flex: none; }
  .pcard-detail .pcard-body { overflow-y: auto; overflow-x: hidden; min-height: 0; }
  .pcard-portrait { width: 58px; flex: none; overflow: hidden; border: 1px solid var(--border-strong); background: var(--panel2); }
  .player-face { display: block; position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; color: var(--dim); }
  .player-face img { position: absolute; height: auto; max-width: none; image-rendering: pixelated; }
  .player-face-fallback { display: block; width: 100%; height: 100%; visibility: hidden; shape-rendering: crispEdges; }
  .face-missing .player-face-fallback { visibility: visible; }
  .pcard-detail .pcard-hd .nm { overflow-wrap: anywhere; }
  @media (max-width: 760px) {
    .pcard-detail .pcard-hd { flex-wrap: wrap; }
    .pcard-detail .pcard-hd .who { flex: 1 0 100%; }
  }
  .pcard-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; overflow: hidden; border-bottom: 1px solid var(--border); }
  .pcard-tabs button.active { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 15%, var(--panel2)); }
  .pcard-attr-group { margin: 12px 0; } .pcard-attr-group h4 { margin-bottom: 5px; }
  .pcard-attr-group small { margin-left: 4px; color: var(--dim); } .pcard-attr-group small.up { color: var(--good); } .pcard-attr-group small.down { color: var(--bad); }
  .pcard-honors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .pcard-honors .pill { cursor: pointer; }
  .pcard-honor-detail { width: 100%; margin: 2px 0 10px; color: var(--dim); font-size: 12px; line-height: 1.4; }
  .pcareer-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); }
  .pcareer-table { min-width: 820px; font-size: 12px; } .pcareer-table th, .pcareer-table td { white-space: nowrap; padding: 7px 8px; text-align: right; }
  .pcareer-table th:first-child, .pcareer-table td:first-child, .pcareer-table th:nth-child(2), .pcareer-table td:nth-child(2) { position: sticky; left: 0; background: var(--panel); text-align: left; z-index: 1; }
  .pcareer-table th:nth-child(2), .pcareer-table td:nth-child(2) { left: 88px; }
  .pcard-finance { width: 100%; font-size: 12px; margin-bottom: 8px; } .pcard-finance th, .pcard-finance td { padding: 6px; text-align: left; }
  .pcard-offer { display: flex; gap: 7px; margin-top: 10px; } .pcard-offer input, .pcard-offer select { min-width: 0; width: 92px; }
  .pcard-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
  .pcard-feedback { margin-top: 12px; padding: 9px; border: 1px solid var(--border); color: var(--dim); font-size: 12px; line-height: 1.4; }
  .fseg { display: flex; gap: 6px; flex-wrap: wrap; }
  .fseg button { font-size: 11px; padding: 6px 12px; }
  .fseg-note { color: var(--dim); font-size: 13px; line-height: 1.45; margin-top: 7px; }
  .panel.guide p, .panel.owner-note p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--dim); }
  .panel.guide p b { color: var(--text); }
  .panel.guide button { margin-top: 8px; }
  .guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .guide-step { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start;
    padding: 12px; border: 1px solid color-mix(in srgb, var(--violet) 36%, var(--border));
    background: color-mix(in srgb, var(--panel2) 55%, transparent); }
  .guide-step .no { display: grid; place-items: center; width: 24px; height: 24px;
    border: 1px solid var(--cyan); } /* type: the shared cyan pixel numeral with .sched-date/.task-no */
  .guide-step b { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; }
  .guide-step span:last-child { color: var(--dim); font-size: 13px; line-height: 1.4; }
  @media (max-width: 900px) { .guide-steps { grid-template-columns: 1fr; } }
  .panel.owner-note p { color: var(--text); }
  /* compare */
  .cmp { max-width: 560px; }
  .cmp-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; padding: 18px 44px 14px 18px; border-bottom: 1px solid var(--border); }
  .cmp-hd .nm { font-size: 18px; font-weight: 700; line-height: 1.1; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
  .cmp-hd .sub { font-size: 12px; color: var(--dim); margin-top: 3px; }
  .cmp-hd .r { text-align: right; }
  .cmp-hd .vs { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 4px; }
  .cmp-body { padding: 6px 18px 8px; }
  .cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .cmp-row:last-child { border-bottom: none; }
  .cmp-row .cv { font: 700 16px/1.1 var(--body); font-variant-numeric: tabular-nums; color: var(--text-dim); } /* body face, like the card's stat line */
  .cmp-row .cv.r { text-align: right; }
  .cmp-row .cv.w { color: var(--gold); }
  .cmp-row .cl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 0 16px; text-align: center; }
  @media (max-width: 760px) {
    /* The close control is absolute. Give it a dedicated top lane on phones instead
       of stealing width from the right player, then let both identity columns shrink
       below their longest unbroken surname rather than pushing through the card edge.
       Spans the whole phone shell (<=760px), not just <=520px: a 521-760px phone
       renders the same overlay and hits the identical clip. */
    .cmp-hd { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 54px 12px 12px; }
    .cmp-hd > div { min-width: 0; }
    .cmp-hd .nm { font-size: 14px; overflow-wrap: anywhere; }
  }
  @media (max-width: 520px) {
    .statline { gap: 12px 8px; }
  }

  /* ---- Step 3: app shell (sidebar + top bar). Replaces the old top tab-bar chrome.
     Tab content generators are unchanged; they render inside main.content. ---- */
  /* height (not min-height) caps the shell to the viewport — .col scrolls its own
     content internally instead of the page growing past 100vh (issue #21). */
  /* 100vh first as the fallback, dvh after: identical on desktop, but on phones dvh
     tracks the real visible viewport as browser chrome collapses (D28). */
  .app { display: grid; grid-template-columns: 60px 1fr; height: 100vh; height: 100dvh; }
  /* The page never scrolls (#21), so a sidebar taller than the viewport would be
     permanently unreachable — it scrolls itself, same pattern as main.content (#33).
     `position: sticky` was inert once the page stopped scrolling. */
  .side { background: var(--bg-elev); border-right: 1px solid var(--border); display: flex;
    flex-direction: column; height: 100vh; height: 100dvh; overflow-y: auto; }
  .side .brand { height: 65px; padding: 12px 22px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; text-align: center; }
  .side .brand .wm { font-family: var(--display); font-weight: 700; font-size: 21px;
    text-transform: none; letter-spacing: .04em; line-height: 1; color: var(--text);
    text-shadow: 2px 2px 0 var(--violet), 4px 4px 0 #000; }
  .side .brand .sub { font-size: 10px; letter-spacing: .22em; color: var(--text-dim);
    text-transform: uppercase; margin-top: 4px; }

  /* Collapsed sidebar rail */
  .side-compact { width: 60px; overflow-x: hidden; overflow-y: auto;
    scrollbar-width: none; }
  .side-compact::-webkit-scrollbar { display: none; }
  .side-full { display: none; }
  .side-rail .side-nav { padding: 4px 4px; overflow: visible; }
  .side-rail .side-nav .grp { font-size: 10px; letter-spacing: .08em; padding: 6px 0 2px;
    text-align: center; white-space: nowrap; overflow: hidden; color: var(--gold);
    border-top: 1px solid color-mix(in srgb, var(--violet) 60%, transparent); margin-top: 6px; padding-top: 8px; }
  .side-rail .side-nav .grp:first-child { border-top: none; margin-top: 0; padding-top: 6px; }
  .rail-toggle { display: flex; align-items: center; justify-content: center; width: 100%;
    height: 65px; border: none; background: none; cursor: pointer; color: var(--cyan);
    font-size: 22px; font-family: var(--display); border-bottom: 1px solid var(--border); }
  .rail-toggle:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
  .rail-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
  .rail-close { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .rnav { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; width: 100%; border: none; background: none; cursor: pointer; color: var(--dim);
    padding: 7px 2px; border-radius: 5px; text-align: center; }
  .rnav .no { font: 700 15px/1 var(--display); color: var(--text-dim); }
  .rnav .rlbl { font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: uppercase;
    color: var(--text-dim); line-height: 1.1; white-space: nowrap; }
  .rnav:hover { background: var(--panel); color: var(--text); }
  .rnav:hover .no, .rnav:hover .rlbl { color: var(--text); }
  .rnav.on { background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
  .rnav.on .no { color: var(--gold); }
  .rnav.on .rlbl { color: var(--gold); }

  /* Expanded sidebar drawer overlay */
  .side-back { display: none; position: fixed; inset: 0; background: rgba(2,6,25,.65);
    z-index: 95; }
  .side-back.open { display: block; }
  .side-drawer { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 232px;
    z-index: 96; background: var(--bg-elev); border-right: 1px solid var(--border);
    flex-direction: column; overflow-y: auto; }
  .side-drawer.open { display: flex; }
  .side-drawer .side-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
  /* Shared brandmark layout — art lives at assets/brand/capkings-logo.png
     for the team picker; the in-game sidebar uses text. */
  .brandmark { display: block; background: center/contain no-repeat; }

  /* Team identity card remains the phone More-sheet header. */
  .side-team { display: flex; align-items: center; gap: 12px; padding: 10px 18px 9px;
    border: none; background: none; cursor: pointer; width: 100%;
    border-bottom: 1px solid var(--border); text-align: left; }
  .side-team:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
  .side-team-crest { width: 44px; height: 44px; flex: none; border-radius: 50%;
    overflow: hidden; background: var(--bg); display: flex; align-items: center;
    justify-content: center; border: 2px solid var(--border-strong);
    box-shadow: 0 0 6px rgba(0,0,0,.4); }
  .side-team-crest .crest-logo { width: 88%; height: 88%; object-fit: contain;
    image-rendering: auto; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
  .side-team-crest .lm { font-size: 14px; font-weight: 700; font-family: var(--display);
    color: var(--text); }
  .side-team-info { min-width: 0; flex: 1; }
  .side-team-name { font-size: 14px; font-weight: 700; color: var(--text);
    font-family: var(--display); letter-spacing: .02em; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-team-detail { font-size: 11px; color: var(--text-dim); margin-top: 2px;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .brand-home { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
  .brand-home:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
  /* Every full-size brand placement shares the main logo asset. */
  :root { --cap-kings-main-logo: url(assets/brand/capkings-logo.png); }
  /* Team picker shares the main logo but retains its responsive marquee sizing. */
  .tpick-top .brand .brandmark { width: clamp(132px, calc(29vh - 70px), 220px); height: clamp(66px, calc(15vh - 36px), 110px); }
  /* Sticker treatment: render only the transparent logo art. The surrounding page
     supplies its own background; no plate, frame, keyline, clipping, or added glow. */
  .tpick-top .brand .brandmark { background-image: var(--cap-kings-main-logo); }
  .side-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
  .side-nav .grp { font-size: 11px; letter-spacing: .16em; color: var(--text-dim);
    text-transform: uppercase; padding: 14px 10px 6px; }
  /* full reset off the global button rule (uppercase/blue-fill) — sidebar items are nav links */
  .snav { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: none; border: none; color: var(--dim); padding: 9px 10px; border-radius: 7px;
    position: relative; font: 600 13px/1.2 inherit; letter-spacing: .02em;
    text-transform: none; cursor: pointer; }
  .snav .no { font: 600 11px/1 var(--display); color: var(--text-dim); min-width: 16px; }
  .snav:hover { background: var(--panel); color: var(--text); }
  .snav.on { background: var(--panel-sel); color: var(--text); }
  .snav.on::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
  .snav.on .no { color: var(--accent); }
  .capwidget { border-top: 1px solid var(--border); padding: 14px 18px 10px; cursor: pointer; }
  .capwidget-hd { display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
  .capwidget-hd b { font-size: 11px; letter-spacing: .04em; }
  .capwidget .capbar.small { margin-top: 0; }
  .capwidget-num { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
  .side .me { border-top: 1px solid var(--border); padding: 14px 18px; display: flex;
    align-items: center; gap: 11px; }
  .side .me .av { width: 34px; height: 34px; border-radius: 0; flex: none; color: var(--bg);
    background: linear-gradient(135deg, var(--cyan), var(--violet)); display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 10px; font-family: var(--display); }
  .side .me .t { font-size: 13px; font-weight: 600; }
  .side .me .s { font-size: 12px; color: var(--text-dim); line-height: 1.35; margin-top: 2px; }

  .col { min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  /* Align the global team identity and advance control with each tab's centered
     1500px .screen frame. On ordinary desktops this remains a 16px gutter. */
  .topbar { display: flex; align-items: center; gap: 14px; padding: 12px max(16px, calc((100% - 1500px) / 2));
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-elev), var(--bg)); flex-wrap: wrap; }
  .topbar .chip { width: 36px; height: 36px; border-radius: 9px; flex: none; display: flex;
    align-items: center; justify-content: center; font-family: var(--display); font-weight: 700;
    font-size: 13px; color: var(--text); background: linear-gradient(135deg, var(--panel2), var(--bg-elev));
    border: 1px solid var(--border-strong); }
  .topbar .who .nm { font-weight: 700; font-size: 15px; }
  .topbar .who .mt { font-size: 12px; color: var(--dim); margin-top: 1px; }
  .topbar-team, .topbar-team-spacer { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
  .home-emblem { display: flex; align-items: center; justify-content: center; flex: none;
    border: 1px solid var(--border-strong); color: var(--text); font-family: var(--display); font-size: 13px; font-weight: 700;
    box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
  .topbar .topbar-team .chip, .topbar .topbar-team-spacer .chip, .home-emblem { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    border-color: color-mix(in srgb, var(--team-accent, var(--border-strong)) 58%, var(--border));
    background: color-mix(in srgb, var(--team-accent, var(--panel2)) 14%, var(--bg)); }
  .topbar-team .chip .crest-logo, .topbar-team-spacer .chip .crest-logo, .home-emblem .crest-logo { width: 88%; height: 88%; object-fit: contain; image-rendering: auto; }
  .topbar-team .who, .topbar-team-spacer .who { min-width: 0; }
  .topbar-team .who .nm, .topbar-team-spacer .who .nm { text-transform: uppercase; display: flex; align-items: baseline; gap: 10px; }
  .topbar-team .who .nm { text-shadow: 2px 2px 0 var(--header-name-shade), 3px 3px 0 color-mix(in srgb, var(--accent) 70%, #000); } /* team identity edged like the headers */
  .topbar .season { font: 600 13px/1 var(--display); color: var(--dim); letter-spacing: .04em; }
  /* Desktop identity plate: a cabinet marquee — cyan outer frame with glow, violet inner
     keyline, gold side ticks, bracketed crest, and the record behind a divider. */
  .topbar-team, .topbar-team-spacer { position: relative; padding: 0 12px 0 8px; gap: 10px;
    border: 2px solid var(--cyan); background: color-mix(in srgb, var(--bg) 86%, var(--violet));
    box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent),
      inset 0 0 0 3px var(--bg), inset 0 0 0 4px color-mix(in srgb, var(--violet) 75%, transparent),
      inset 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); }
  .topbar-team::before, .topbar-team::after, .topbar-team-spacer::before, .topbar-team-spacer::after {
    content: ""; position: absolute; top: 50%; width: 3px; height: 40%; transform: translateY(-50%); background: var(--gold); }
  .topbar-team::before, .topbar-team-spacer::before { left: -2px; }
  .topbar-team::after, .topbar-team-spacer::after { right: -2px; }
  .chip-frame { padding: 0; flex: none; background:
      linear-gradient(var(--accent), var(--accent)) top left / 7px 2px no-repeat,
      linear-gradient(var(--accent), var(--accent)) top left / 2px 7px no-repeat,
      linear-gradient(var(--accent), var(--accent)) top right / 7px 2px no-repeat,
      linear-gradient(var(--accent), var(--accent)) top right / 2px 7px no-repeat,
      linear-gradient(var(--accent), var(--accent)) bottom left / 7px 2px no-repeat,
      linear-gradient(var(--accent), var(--accent)) bottom left / 2px 7px no-repeat,
      linear-gradient(var(--accent), var(--accent)) bottom right / 7px 2px no-repeat,
      linear-gradient(var(--accent), var(--accent)) bottom right / 2px 7px no-repeat; }
  .topbar-record { height: 34px; display: flex; align-items: center; padding-left: 12px; margin-left: 2px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    font: 700 24px/1 var(--body); font-variant-numeric: tabular-nums; color: #e6efff; letter-spacing: .02em;
    text-shadow: none; }
  @media (min-width: 761px) {
    .topbar .topbar-team .chip, .topbar .topbar-team-spacer .chip { width: 48px; height: 48px; }
  }
  .topbar-team .who .mt, .topbar-team-spacer .who .mt { color: #b9cdf2; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
  /* Home: Export Save overlays an invisible identity copy in one grid cell, so the corner is
     exactly as wide as the identity on other tabs and the topbar wraps identically. */
  .topbar-export { display: grid; align-items: center; flex: none; }
  .topbar-export > * { grid-area: 1 / 1; }
  .topbar-team-spacer { visibility: hidden; }
  .topbar-export .ghost { justify-self: start; }
  /* 40px border-box = the .topbar-team crest height, so Home keeps the shared topbar height. */
  .topbar-export .ghost { box-sizing: border-box; height: 40px; min-height: 0; padding: 0 15px; }
  /* The trophy PNG has real alpha, so it renders as a transparent sticker with no
     backing plate or keyline (Conventions; same treatment as the D27 main logo).
     Desktop topbar and phone More-sheet placements share this treatment. */
  .championship-badge { display: flex; align-items: center; gap: 3px; flex: none; min-height: 36px;
    padding: 2px 4px; color: var(--gold); font: 700 11px/1 var(--display); }
  .championship-badge img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
  .topbar .sep { width: 1px; height: 26px; background: var(--border); }
  /* Clock block: phase over season/week, right-aligned so it bookends the team
     identity and sits beside the SIM button that advances it. */
  .topbar-clock { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
  .topbar-clock .clock-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
  .clock-meta .clock-dot, .clock-meta .phase-detail { display: none; } /* desktop: the progress block carries the counter */
  .topbar-side { display: flex; align-items: center; gap: 10px; flex: none; }
  .topbar-side:empty { display: none; }
  /* Phase progress: label over a thin gold meter, beside the advance action it counts toward. */
  .topbar-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; min-width: 96px; }
  .topbar-progress .progress-lbl { font: 600 12px/1 var(--display); color: var(--cyan); letter-spacing: .04em; white-space: nowrap; }
  .topbar-progress .progress-meter { display: block; width: 120px; height: 4px; background: color-mix(in srgb, var(--violet) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 35%, transparent); overflow: hidden; }
  .topbar-progress .progress-meter i { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 60%, transparent); }
  .phase-pill { font: 700 13px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
    color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
    padding: 4px 9px; border-radius: 5px; }
  .phase-pill .phase-mobile { display: none; }
  .topbar .notice { font-size: 12px; font-weight: 600; }
  #save-status:empty { display: none; }
  .topbar .notice.gold { color: var(--gold); } .topbar .notice.bad { color: var(--bad); }
  .sim { transform: skewX(-9deg); letter-spacing: .06em; padding: 10px 20px; border-radius: 4px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
  .sim > span { display: inline-block; transform: skewX(9deg); }
  .playoff-day-hint { min-height: 40px; padding: 6px 11px; flex: none; white-space: nowrap;
    color: var(--cyan); background: color-mix(in srgb, var(--cyan) 7%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--cyan) 58%, var(--border));
    font: 600 10px/1.25 var(--body); letter-spacing: .02em; text-transform: none; }
  .playoff-day-hint b { color: #fff; text-transform: uppercase; letter-spacing: .05em; }
  .playoff-day-hint .hint-short { display: none; }
  /* main.content is the scroll container (issue #21) and must be full-width, or its
     scrollbar renders at the content edge mid-screen on wide monitors (#34). The
     readable measure is carried by the inner .screen wrapper instead — same split
     Home already used via .home-screen, now shared by every tab. */
  main.content { max-width: none; margin: 0; padding: 24px 28px 60px; flex: 1; min-height: 0; overflow-y: auto;
    background-color: var(--canvas); background-image: none; }
  .screen { width: 100%; max-width: 1500px; margin: 0 auto; }

  /* reusable page-header pattern (eyebrow → title → right-aligned meta) — replaces
     the old crammed panel <h2> on screens as they're converted (roster first). */
  .pagehead { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin: 2px 0 18px; flex-wrap: wrap; }
  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); }
  .ptitle { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 28px;
    line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
  .metae { display: flex; gap: 20px; align-items: baseline; font-size: 13px; color: var(--dim);
    flex-wrap: wrap; }
  .metae b { color: var(--text); font-weight: 700; }
  .metae .warn { color: var(--orange); font-weight: 700; }
  .roster-pick-inventory .roster-pick-years,
  .roster-pick-inventory .roster-pick-year { align-items: flex-start; }
  .scope-toggle { display: inline-flex; gap: 2px; }
  .scope-toggle button { font-size: 11px; padding: 2px 10px; border-radius: 3px; }
  .scope-toggle button.on { background: var(--cyan); color: var(--bg); font-weight: 700; }
  .roster-pick-years { display: flex; flex: 1; flex-direction: column; align-items: flex-end; gap: 7px; }
  .roster-pick-year { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  .roster-pick-row { display: flex; align-items: center; white-space: nowrap; }
  .roster-pick { color: var(--text); font-weight: 700; }
  .roster-pick + .roster-pick::before { content: ""; display: inline-block; width: 1px; height: 12px;
    margin: 0 9px; background: color-mix(in srgb, var(--violet) 58%, var(--border)); vertical-align: -2px; }
  .roster-pick-frozen { flex-basis: 100%; color: var(--orange); font-weight: 700; }
  .roster-pick.is-frozen { color: var(--orange); }
  .pick-frozen-tag { margin-left: 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--orange); }
  .roster-picks-mobile { display: none; }
  @media (max-width: 760px) {
    .roster-pick-inventory > .roster-pick-years { display: none; }
    .roster-picks-mobile { display: grid; gap: 14px; min-width: 0; }
    .roster-pick-round { min-width: 0; border: 1px solid #66339a; }
    .roster-pick-round > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #66339a; background: color-mix(in srgb, var(--violet) 10%, var(--panel)); }
    .roster-pick-round h3 { margin: 0; color: var(--cyan); font: 700 12px/1.3 var(--display); text-transform: uppercase; }
    .roster-pick-round > header span { color: var(--text-dim); font-size: 12px; }
    .roster-pick-round ul { list-style: none; margin: 0; padding: 0; }
    .roster-pick-round li { padding: 10px; color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
    .roster-pick-round li + li { border-top: 1px solid var(--border); }
    .roster-pick-round .is-frozen { color: var(--orange); }
    .roster-pick-round .pick-empty { margin: 0; padding: 10px; color: var(--text-dim); font-size: 13px; }
    .roster-pick-years, .roster-pick-year { align-items: flex-start; min-width: 0; width: 100%; }
    .roster-pick-row { flex-wrap: wrap; row-gap: 5px; white-space: normal; }
    .roster-pick { overflow-wrap: anywhere; }
  }

  /* Draft: focused prospect table with phase/resources in one compact context rail.
     Presentation only: rows and controls keep their existing data and handlers. */
  .draft-screen .panel, .draft-screen .banner { border-radius: 0; box-shadow: none; }
  .draft-pagehead { align-items: center; margin: 0 0 10px; padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--violet) 38%, var(--border)); }
  .draft-pagehead .ptitle { margin-top: 3px; }
  .draft-board { min-width: 0; margin-bottom: 12px; padding: 10px 12px; }
  .draft-board-head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; margin-bottom: 6px; }
  .draft-board-title { min-width: 0; }
  .draft-board-title h2 { margin-bottom: 4px; }
  .draft-board-copy { color: var(--dim); font-size: 12px; line-height: 1.35; margin: 0; }
  .draft-board-info { flex: 0 1 590px; display: flex; flex-direction: column; align-items: flex-end;
    gap: 6px; padding-left: 16px; color: var(--dim); font-size: 12px; text-align: right; }
  .draft-board-status { line-height: 1.35; }
  .draft-board-stats { display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; flex-wrap: wrap; }
  .draft-board-stats b { color: var(--text); }
  .draft-board .pill { border-radius: 0; font-family: var(--display); font-size: 10px;
    letter-spacing: .04em; text-transform: uppercase; }
  .draft-board > .scout-t { table-layout: fixed; }
  .draft-board .scout-t th:nth-child(1) { width: 27%; }
  .draft-board .scout-t th:nth-child(2) { width: 7%; }
  .draft-board .scout-t th:nth-child(3) { width: 7%; }
  .draft-board .scout-t th:nth-child(4),
  .draft-board .scout-t th:nth-child(5) { width: 10%; }
  .draft-board .scout-t th:nth-child(6) { width: 11%; }
  .draft-board .scout-t th:nth-child(7) { width: 28%; }
  .draft-board .scout-t th, .draft-board .scout-t td { padding-block: 7px; }
  .draft-board .scout-t th:last-child, .draft-board .scout-t td:last-child {
    text-align: right; white-space: nowrap; }
  .draft-board .scout-t td:last-child button + button { margin-left: 6px; }
  .draft-board .draft-pick-action { min-width: 74px; border: 1px solid var(--cyan);
    font-weight: 800; }
  .draft-live-context { display: grid; grid-template-columns: minmax(250px, auto) minmax(0, 1fr);
    align-items: stretch; gap: 12px; margin-bottom: 10px; }
  .draft-live-context .draft-pagehead { margin: 0; padding: 8px 0; } /* borderless like every page title (DESIGN.md §40); keeps the keyline below */
  .draft-live-status { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-width: 0; padding: 8px 12px; border: 1px solid var(--border);
    background: var(--panel); }
  .draft-live-status .banner { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
  .draft-live-status .metae { justify-content: flex-end; flex-shrink: 0; }
  .draft-live-grid { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(300px, 1.25fr);
    align-items: start; gap: 12px; }
  .draft-live-grid > * { min-width: 0; }
  .draft-lottery { margin-bottom: 12px; padding: 10px 12px; }
  .draft-lottery h2 { margin-bottom: 6px; }
  .draft-lottery .log-line { padding: 5px 8px; font-size: 12px; line-height: 1.3; }
  .draft-log { margin-top: 0; }
  /* D76: pick-by-pick controls + the draft-night side rail */
  .draft-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex-shrink: 0; }
  .draft-side > .panel { margin-bottom: 12px; padding: 10px 12px; }
  .draft-side h2 { margin-bottom: 6px; }
  .draft-side .log-line { padding: 5px 8px; font-size: 12px; line-height: 1.3; }
  .draft-upcoming .draft-mine { color: var(--gold); }
  /* the live log sits beside the prospect board, newest pick first; desktop scrolls it in
     place so the rail stays one screen (the phone keeps one page scroll, D61) */
  @media (min-width: 761px) {
    .draft-log-live, .draft-side .draft-trades { max-height: 300px; overflow-y: auto; }
  }
  .draft-trade-when { margin: 8px 0 2px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  @media (max-width: 1100px) {
    .draft-live-grid { grid-template-columns: 1fr; }
    .draft-live-grid .draft-board { grid-row: 1; }
    .draft-live-grid .draft-side { grid-row: 2; }
  }
  @media (max-width: 900px) {
    .draft-live-context { grid-template-columns: 1fr; }
    .draft-live-status { align-items: flex-start; }
  }
  @media (max-width: 760px) {
    .draft-pagehead { gap: 6px; }
    .draft-board { padding: 9px 8px; }
    .draft-board-head { display: block; }
    .draft-board-info { align-items: flex-start; padding: 8px 0 0; text-align: left; }
    .draft-board-stats { justify-content: flex-start; gap: 8px 12px; }
    .draft-live-status { display: block; }
    .draft-live-status .metae { justify-content: flex-start; gap: 8px 14px; margin-top: 7px; }
    .draft-controls { justify-content: flex-start; margin-top: 8px; }
    .draft-controls button { min-height: 44px; }
    .draft-board > .scout-t { table-layout: auto; min-width: 0; }
    .draft-board .scout-t th:nth-child(n), .draft-board .scout-t td:nth-child(n) { width: auto; }
    .draft-board .scout-t th:last-child, .draft-board .scout-t td:last-child { width: 72px; }
    .draft-board .scout-t td:last-child button + button { margin-left: 0; }
    .draft-board .draft-pick-action { min-width: 64px; }
  }
  .rtoolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px; flex-wrap: wrap; }
  .rtoolbar .l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .coachbar { font-size: 13px; color: var(--dim); }
  .coachbar b { color: var(--text); }
  .coachbar.warn { color: var(--orange); }

  /* ---- Calendar tab ---- */
  .cal-pills { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .cal-pills button { font: 700 12px/1 var(--display); padding: 6px 14px;
    background: var(--panel2); border: 1px solid var(--border); color: var(--dim);
    cursor: pointer; letter-spacing: .04em; }
  .cal-pills button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .cal-hdr { text-align: center; font: 700 11px/1.2 var(--display);
    text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: 6px 0; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-cell { min-height: 72px; background: var(--panel); border: 1px solid var(--border);
    padding: 4px 6px; font-size: 13px; cursor: pointer; position: relative; }
  .cal-cell:hover { border-color: var(--accent); }
  /* Keyboard focus is a core component state (DESIGN-LANGUAGE-SYSTEMS "Implementation
     notes"). The cyan outline matches every other focusable control in the app; the
     offset keeps it clear of the 2px grid gap so it reads on adjacent cells too. */
  .cal-cell:focus-visible { outline: 2px solid var(--cyan); outline-offset: -1px;
    border-color: var(--cyan); }
  .cal-cell.cal-outside { opacity: 0.3; cursor: default; }
  .cal-cell.cal-current { border-color: var(--cyan);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 40%, transparent); }
  .cal-cell.cal-selected { border-color: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }
  /* D50: the next unplayed date — where Sim Day lands. Gold is the commit/select
     hue, and this outranks the week glow so "where am I in the week" reads at a glance. */
  .cal-cell.cal-next { border-color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); }
  .cal-detail .sim-day { display: inline-block; margin-top: 10px; background: var(--gold); color: #1a1200;
    border: 2px solid var(--gold); font: 700 11px var(--display); letter-spacing: .06em; padding: 8px 16px;
    border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); cursor: pointer; }
  .cal-detail .sim-day:hover { filter: brightness(1.08); }
  .cal-detail .sim-day:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  /* Topbar SIM: "Finish Week" mid-week (D50) — the phone topbar gets the short form */
  .sim .cg-short { display: none; }
  .cal-cell .day-num { font: 700 13px var(--display); color: var(--dim); margin-bottom: 2px; }
  /* 13px is the floor of the design system's body/data range. Measured at 1280px:
     a 7-column grid gives 126px of cell content and the worst case ("W 104-108")
     renders 69px, so the scale is affordable here and needs no exception. */
  .cal-game { font-size: 13px; line-height: 1.4; white-space: nowrap; }
  .cal-game.win { color: var(--good); font-weight: 700; }
  .cal-game.loss { color: var(--bad); }
  .cal-game.upcoming { color: var(--text); }
  .cal-game .cg-short { display: none; }
  .cal-detail { margin-top: 12px; }
  .cal-detail .panel { padding: 12px 16px; }
  .cal-detail .matchup { font: 700 15px var(--display); margin-bottom: 8px; }
  .cal-detail .top-line { font-size: 13px; color: var(--dim); margin-bottom: 8px; }
  .cal-toggle { min-height: 44px; font-size: 13px; color: var(--dim); cursor: pointer;
    display: flex; align-items: center; gap: 6px; }
  /* Per-game box toggle inside the league list: a quiet affordance on a scoreline,
     not a primary action — a full-weight button per row swallows the scores. 11px is
     the label floor of the type scale; it stays a label, not shrunken body text. */
  .cal-detail .log-line button.boxbtn { font-size: 11px; padding: 3px 8px; margin-left: 8px;
    vertical-align: middle; box-shadow: none; }
  .cast-replay { margin: 10px 0 4px; border-top: 1px solid var(--border); }
  .cast-period { border-bottom: 1px solid var(--border); }
  .cast-period > summary { min-height: 40px; padding: 8px 4px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: var(--dim); font: 700 12px var(--display); letter-spacing: .04em; }
  .cast-lines { padding: 2px 4px 8px; }
  .cast-action { padding: 5px 0; line-height: 1.4; overflow-wrap: anywhere; }
  .cast-action-text { font-size: 13px; color: var(--text); }
  .cast-meta, .cast-clock, .cast-abbr { font-size: 11px; color: var(--dim); white-space: nowrap; }
  .hero-creation { margin-top: 8px; color: var(--dim); font-size: 12px; }
  @media (max-width: 760px) {
    /* A 7-column grid at 390px leaves 45px of cell content. Measured at 13px: a bare
       "W"/"L" is 13px and "@OKC" is 42px, but a full score ("W 104-108") is 69px and
       does not fit at ANY size — at the old 10px it was still 53px and silently
       overflowed its cell. So the phone grid carries the result and the opponent, and
       the score moves to the detail panel, the same prune-to-the-detail-view contract
       D28 uses for dense tables. Type stays on the scale rather than shrinking off it. */
    .cal-cell { min-height: 56px; padding: 3px 2px; font-size: 13px; }
    .cal-cell .day-num { font-size: 13px; }
    .cal-game .cg-full { display: none; }
    .cal-game .cg-short { display: inline; }
    .sim .cg-full { display: none; }
    .sim .cg-short { display: inline; }
    .cal-pills button { padding: 5px 10px; font-size: 11px; }
    .cast-toggle { min-height: 44px; }
    .cast-period > summary { min-height: 44px; }
    .cast-action { overflow-wrap: anywhere; }
    .cast-action-text { font-size: 13px; }
    .cast-clock, .cast-abbr { font-size: 11px; }
  }

  /* ---- Home/Dashboard tab. Composes existing read-functions only — record/streak/
     seed/cap, upcoming game, weekly off-def trend, cap sheet, owner objectives,
     team alerts, roster summary. No new state. ---- */
  /* The shell above Home is intentionally the same shared topbar as every other tab.
     Home's wider frame and title-over-KPIs composition begin below this chrome. */
  .home-app .snav.on { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 62%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
  .home-app .snav.on::before { display: none; }
  .home-app .snav.on .no { color: var(--gold); }
  .home-screen { width: 100%; max-width: 1640px; margin: 0 auto; position: relative;
    --dash-frame: linear-gradient(135deg, color-mix(in srgb, var(--violet) 88%, var(--border)), color-mix(in srgb, var(--cyan) 44%, var(--border))); }
  .home-screen .pagehead { position: relative; min-height: 72px; margin: 0; padding: 10px 16px 10px 20px;
    align-items: center; flex-wrap: nowrap; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cyan) 74%, var(--border));
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--franchise-primary, var(--cyan)) 18%, var(--panel)) 0%, var(--panel) 42%, color-mix(in srgb, var(--violet) 8%, var(--panel)) 100%);
    box-shadow: inset 4px 0 0 var(--franchise-primary, var(--cyan)), inset 0 0 24px color-mix(in srgb, var(--cyan) 7%, transparent), 4px 4px 0 rgba(0,0,0,.55); }
  .home-screen .pagehead::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0 68%, color-mix(in srgb, var(--franchise-secondary, var(--violet)) 8%, transparent)); }
  .home-screen .pagehead > * { position: relative; z-index: 1; }
  .home-screen .pagehead .ptitle { font-size: clamp(28px, 2.2vw, 38px); color: #f7fbff;
    text-shadow: 3px 3px 0 var(--header-title-shade); } /* team shade, as every desktop title (DESIGN.md §42) */
  .home-screen .pagehead .eyebrow { margin-bottom: 5px; } /* type/color: the shared pixel eyebrow rule */
  .home-screen .pagehead .metae { align-items: center; }
  /* One owner for the Export Save appearance: the phone pagehead and the desktop
     Home topbar corner differ only in sizing (see .topbar-export .ghost). */
  .home-screen .pagehead .ghost, .topbar-export .ghost { border: 2px solid color-mix(in srgb, var(--violet) 78%, var(--border));
    color: #d9c6ff; background: color-mix(in srgb, var(--violet) 10%, var(--panel2));
    box-shadow: 3px 3px 0 rgba(0,0,0,.52); }
  .home-screen .pagehead .ghost { min-height: 42px; padding: 9px 15px; }
  .home-screen .panel { margin-bottom: 0; }
  .home-screen .guide { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: 0; padding: 16px;
    overflow-y: auto; border-color: var(--cyan); box-shadow: 0 0 0 100vmax rgba(2,6,25,.82),
      6px 6px 0 rgba(0,0,0,.7), 0 0 16px color-mix(in srgb, var(--cyan) 22%, transparent); }
  .home-screen .owner-note { display: grid; grid-template-columns: 1fr; align-content: center; gap: 5px;
    min-height: 76px; padding: 9px 14px; margin-top: 0; overflow: hidden;
    border: 0; border-right: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border)); border-radius: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--franchise-primary, var(--cyan)) 13%, var(--panel)), var(--panel));
    box-shadow: inset 3px 0 0 var(--franchise-primary, var(--cyan)); }
  .home-screen .owner-note h2 { margin: 0; font-size: 10px; color: var(--gold); letter-spacing: .12em; white-space: nowrap; }
  .home-screen .owner-note p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.35; }
  /* .home-phone holds the <=760px board (the pre-refresh composition, unchanged);
     .home-desk is the >760px grid (docs/plans/2026-09-09-home-dashboard-refresh.md).
     Same two-representation pattern Roster uses for its phone board + desktop table. */
  .home-phone { display: none; }
  .home-next-preview { display: none; }
  .home-mobile-identity { display: none; }
  /* Phone roster is a purpose-built command board. The desktop table remains the
     complete data surface at wider widths; these elements are intentionally absent
     there rather than letting a second representation leak into desktop. */
  .roster-mobile-team, .roster-mobile-counts, .roster-mobile-header, .roster-mobile-summary, .roster-mobile-board, .roster-mobile-actions { display: none; }
  .home-rail .dash-panel:first-child { flex: 1; }
  .home-rail .loglist { column-count: 1; } /* the rail is too narrow for the 2-col log layout the wider FA tab uses */
  .dash-panel { position: relative; min-width: 0; padding: 12px; overflow: hidden;
    border: 1px solid transparent !important; clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 4%, var(--panel)), var(--panel)) padding-box,
      var(--dash-frame) border-box !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,.12) !important; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.52)); }
  .dash-panel::before { content: ""; position: absolute; inset: 3px; z-index: 1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--violet) 18%, transparent);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .dash-panel::after { content: ""; position: absolute; top: 3px; right: 3px; width: 13px; height: 13px;
    border-top: 2px solid color-mix(in srgb, var(--violet) 74%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--violet) 74%, transparent); pointer-events: none; }
  .dash-hd { min-height: 34px; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    margin: -12px -12px 12px; padding: 0 12px 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--violet) 48%, var(--border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 15%, var(--panel2)), color-mix(in srgb, var(--cyan) 5%, var(--panel))); }
  .dash-hd::before { content: ""; width: 4px; align-self: stretch; margin-left: -16px; background: var(--cyan);
    box-shadow: 2px 0 0 color-mix(in srgb, var(--violet) 68%, transparent); }
  /* Gold is the dashboard panel-heading colour (DESIGN.md §27), stated once here so
     adding a panel needs no palette edit. This used to be magenta plus a second rule
     enumerating all eight panel classes — three edits to add one panel, and marker
     classes that existed only to be listed. There is deliberately no opt-out rule:
     nothing opts out, and an unreachable escape hatch is the §22 dead-CSS trap. */
  .dash-hd h2 { margin: 0 auto 0 0; color: var(--gold); font-size: 12px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .dash-hd .pname { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
  .hrow1 > .dash-panel { min-height: 220px; }
  .hrow2 > .dash-panel { min-height: 205px; }
  .nextup { background: linear-gradient(180deg, color-mix(in srgb, var(--franchise-primary, var(--accent)) 10%, var(--panel)), var(--panel)) padding-box,
      var(--dash-frame) border-box !important; }
  /* D50: the card is a button — click / Enter / Space open the Calendar on that date */
  .nextup .matchup { cursor: pointer; }
  .nextup .matchup:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .nextup .matchup { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: center; gap: 8px; min-height: 160px; margin: 0; padding: 12px 10px; overflow: hidden;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--away-a) 18%, transparent), transparent 42%, transparent 58%, color-mix(in srgb, var(--home-a) 18%, transparent)),
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 34%),
      linear-gradient(color-mix(in srgb, var(--cyan) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--violet) 7%, transparent) 1px, transparent 1px);
    background-size: auto, auto, 20px 20px, 20px 20px; }
  .tchip { width: 42px; height: 42px; border-radius: 9px; flex: none; display: flex; align-items: center;
    justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--text);
    background: linear-gradient(135deg, var(--panel2), var(--bg-elev)); border: 1px solid var(--border-strong);
    overflow: hidden; }
  .tchip .crest-logo { width: 88%; height: 88%; object-fit: contain; image-rendering: auto;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.9)); }
  .nextup .matchup-side { position: relative; z-index: 1; min-width: 0; display: grid; align-items: center; gap: 8px; }
  .nextup .matchup-side.away { grid-template-columns: minmax(68px, 88px) minmax(0, 1fr); }
  .nextup .matchup-side.home { grid-template-columns: minmax(0, 1fr) minmax(68px, 88px); }
  .nextup .matchup-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .nextup .home .matchup-copy { align-items: flex-end; text-align: right; }
  .nextup .matchup-logo { width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--text);
    font: 700 15px/1 var(--display); filter: drop-shadow(0 5px 5px rgba(0,0,0,.72)); }
  .nextup .matchup-logo .crest-logo { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
  .nextup .matchup-city { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--dim);
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .nextup .matchup-nick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text);
    font: 700 14px/1.2 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
  /* Only two nicknames overflow (Trail Blazers, Timberwolves). D28's contract is to
     prune or wrap rather than shrink off the 11px label floor, so the long steps stay
     on scale and buy their room vertically instead. */
  .nextup .matchup-nick.long { font-size: 12px; }
  .nextup .matchup-nick.very-long { font-size: 11px; white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  .nextup .matchup-meta { margin-top: 7px; color: var(--cyan); font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .nextup .matchup-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .nextup .matchup-watermark { position: absolute; top: 50%; width: 180px; aspect-ratio: 1; display: grid; place-items: center;
    opacity: .045; pointer-events: none; transform: translateY(-50%); filter: grayscale(1) contrast(1.2); }
  .nextup .matchup-watermark.away-mark { left: 0; }
  .nextup .matchup-watermark.home-mark { right: 0; }
  .nextup .matchup-watermark .crest-logo { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
  .nextup .matchup-date, .nextup .matchup-week { color: var(--dim); font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .nextup .vs { margin: 7px 0 6px; color: var(--cyan); font-family: var(--display); font-size: 20px; text-transform: uppercase;
    letter-spacing: .08em; text-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 52%, transparent), 2px 2px 0 color-mix(in srgb, var(--violet) 72%, var(--bg)); }
  /* Side-by-side crest+name needs ~100px of copy column, which the two-column
     dashboard only supplies at ≥1500px: measured box widths are 100px at 1500+,
     100px at 1440 (3 nicknames clip), 91px at 1366 (14 clip) and 65px at 1280
     (24 of 30 clip, "Hawks" included). Below that, stack the crest over the name
     — the same composition the phone branch already uses — so the copy gets the
     full side width instead of what's left beside the crest. Kept ahead of the
     ≤420px block so that block's tighter values still win. */
  @media (max-width: 1499px) {
    .nextup .matchup-side.away, .nextup .matchup-side.home { display: flex; flex-direction: column; gap: 5px; }
    .nextup .matchup-side.home { flex-direction: column-reverse; }
    .nextup .matchup-logo { width: 76px; }
    .nextup .matchup-copy, .nextup .home .matchup-copy { align-items: center; text-align: center; }
  }
  @media (max-width: 420px) {
    .nextup .matchup { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 4px; padding-inline: 5px; }
    .nextup .matchup-side.away, .nextup .matchup-side.home { display: flex; flex-direction: column; gap: 3px; }
    .nextup .matchup-side.home { flex-direction: column-reverse; }
    .nextup .matchup-logo { width: 72px; }
    .nextup .matchup-copy, .nextup .home .matchup-copy { align-items: center; text-align: center; }
    .nextup .matchup-nick { font-size: 12px; }
    .nextup .matchup-nick.long, .nextup .matchup-nick.very-long { font-size: 11px; }
  }
  .kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
  .home-summary .kpirow { margin-top: 0; gap: 0; }
  .home-screen .kpi { min-height: 76px; padding: 9px 12px; overflow: hidden;
    border: 0; border-left: 1px solid color-mix(in srgb, var(--gold) 24%, var(--border)); border-radius: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 8%, var(--panel)), var(--panel));
    box-shadow: none; }
  .kpirow.fin { grid-template-columns: repeat(3, 1fr); } /* Finances: 6 tiles read better at 3 cols x 2 rows */
  @media (max-width: 700px) { .kpirow, .kpirow.fin { grid-template-columns: 1fr 1fr; } }
  .kpi .lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
  .home-summary .kpi .lbl { color: var(--gold); }
  .kpi .val { font: 700 24px/1.1 var(--display); margin-top: 5px; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
  .kpi .val.win { color: var(--good); } .kpi .val.loss { color: var(--bad); }
  .kpi .sub { font-size: 10px; color: var(--dim); margin-top: 3px; }
  /* ---- Desktop Home grid (2026-09-09 refresh). Content-sized cabinet panels on a
     3 / 2 / 1 column grid; main.content scrolls, nothing is forced onto one viewport. ---- */
  .home-desk { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
  .hstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .hstrip .kpi { min-height: 94px; padding: 11px 15px 10px; border: 2px solid color-mix(in srgb, var(--cyan) 82%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 11%, var(--panel)) 0%, var(--panel) 72%);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cyan) 46%, transparent), 3px 3px 0 rgba(0,0,0,.5); }
  .hstrip .kpi-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .hstrip .kpi .lbl { color: var(--gold); font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hstrip .kpi-icon { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: #d6a8ff; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--violet) 55%, transparent)); }
  .hstrip .kpi-streak .kpi-icon { fill: color-mix(in srgb, #d6a8ff 22%, transparent); }
  .kpi-help { position: relative; z-index: 5; display: inline-grid; flex: 0 0 auto; place-items: center; cursor: help; outline: none; }
  .kpi-help:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
  .kpi-tooltip { position: absolute; z-index: 40; top: calc(100% + 9px); right: -4px; width: max-content; max-width: min(270px, 72vw);
    padding: 9px 11px; border: 1px solid var(--cyan); background: #03091f; box-shadow: 3px 3px 0 #000a, 0 0 12px color-mix(in srgb, var(--cyan) 22%, transparent);
    color: var(--text); font: 600 11px/1.4 var(--body); letter-spacing: 0; text-align: left; text-transform: none;
    opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .12s ease, transform .12s ease, visibility .12s; }
  .kpi-tooltip::before { content: ""; position: absolute; top: -5px; right: 8px; width: 8px; height: 8px;
    border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); background: #03091f; transform: rotate(45deg); }
  .kpi-help:hover .kpi-tooltip, .kpi-help:focus-visible .kpi-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
  .hstrip .kpi:hover, .hstrip .kpi:focus-within { z-index: 20; }
  @media (prefers-reduced-motion: reduce) { .kpi-tooltip { transition: none; } }
  .hstrip .kpi .val { margin-top: 6px; font-size: clamp(24px, 1.75vw, 31px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hstrip .kpi-game .val { font-size: clamp(23px, 1.6vw, 29px); letter-spacing: -.025em; text-overflow: clip; }
  .hstrip .kpi-cap .val { font-size: clamp(20px, 1.35vw, 24px); letter-spacing: -.02em; text-overflow: clip; }
  .hstrip .kpi .sub { margin-top: 3px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .hgrid .span-all { grid-column: 1 / -1; }
  .home-desk .nextup { container-type: inline-size; }
  @container (max-width: 560px) {
    .home-desk .nextup .matchup-side { display: flex; flex-direction: column; gap: 5px; }
    .home-desk .nextup .matchup-side.home { flex-direction: column-reverse; }
    .home-desk .nextup .matchup-logo { width: 76px; }
    .home-desk .nextup .matchup-copy { align-items: center; text-align: center; }
    .home-desk .nextup .matchup-nick { white-space: normal; overflow-wrap: anywhere; }
    /* A single-word nickname can't wrap at a space, and anywhere-wrapping split it mid-word
       ("TIMBERWOLVE / S") at ~1200-1310px, where its stacked column is up to ~10px short.
       At the 11px floor it can't shrink, so it keeps its full width and centers, spilling
       at most ~5px per side into the 8px grid gap. */
    .home-desk .nextup .matchup-nick.one-word { width: max-content; max-width: none; overflow: visible; overflow-wrap: normal; }
  }
  .hgrid .dash-panel { padding: 14px; }
  .hgrid .dash-hd { min-height: 48px; margin: -14px -14px 12px; padding: 0 12px 0 18px; }
  .hgrid .dash-hd::before { margin-left: -18px; }
  .hgrid .dash-hd h2 { font-size: 17px; }
  .dash-empty { margin: 4px 0 0; color: var(--dim); font-size: 13px; line-height: 1.45; }
  .dash-note { margin: 8px 0 0; color: var(--text-dim); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .dash-note.top { margin: 0 0 8px; }
  .dash-link { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
  .hgrid button.dash-link { min-height: 0; padding: 4px 8px; font-size: 10px; }
  .tp-panel { container-type: inline-size; }
  .tp-panel .dash-hd h2 { font-size: 17px; text-shadow: 2px 2px 0 color-mix(in srgb, var(--orange) 38%, transparent); }
  /* Home review references: exact pink titles and square violet-topped boxes. */
  .home-screen .hstrip .kpi .lbl, .home-screen .home-summary .kpi .lbl { color: var(--pink); }
  .home-screen .dash-hd h2, .home-screen .owner-note h2 { color: var(--pink); text-shadow: none; }
  .home-screen .panel.dash-panel, .home-screen .panel.kpi {
    border: 1px solid #1d2d5b !important; border-top: 2px solid var(--violet) !important;
    border-radius: 0; clip-path: none; background: var(--panel) !important;
    box-shadow: none !important; filter: none;
  }
  .home-screen .dash-panel::before, .home-screen .dash-panel::after { display: none; }
  .home-screen .dash-hd { background: var(--panel); border-bottom-color: #1d2d5b; }
  .tp-panel .dash-hd { gap: 8px; }
  .tp-period { flex: 0 0 auto; padding: 5px 4px; color: var(--bg); background: var(--cyan); border: 1px solid var(--cyan);
    font: 700 9px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 72%, transparent); }
  .tp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 10px; }
  .tp-qualifier { color: var(--text-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .seg { display: inline-flex; gap: 4px; }
  .seg-btn { min-height: 30px; padding: 4px 10px; font: 700 10px/1.2 var(--body); letter-spacing: .06em; border-radius: 0;
    color: var(--text-dim); background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border)); box-shadow: 2px 2px 0 #0007; }
  .seg-btn:hover { color: var(--cyan); border-color: var(--cyan); }
  .seg-btn.on { background: var(--cyan); border-color: var(--cyan); color: var(--bg); box-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 72%, transparent); }
  .tp-columns, .tp-row { display: grid; grid-template-columns: 34px 38px minmax(86px, 1fr) repeat(5, minmax(38px, 48px)); align-items: center; gap: 6px; }
  .tp-columns { min-height: 30px; padding: 0 2px 6px; color: var(--text-dim); border-bottom: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
    font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
  .tp-columns span:nth-child(3) { text-align: left; }
  /* purple hairlines divide rows inside a panel; the frame stays cyan/violet */
  .hgrid :is(.tp-row, .sched-row, .task-row, .alert-row, .ms-row) { border-top: 1px solid color-mix(in srgb, var(--violet) 55%, transparent); }
  .hgrid :is(.tp-row, .sched-row, .task-row, .alert-row, .ms-row):first-child { border-top: 0; }
  .tp-row { min-height: 64px; padding: 10px 2px; }
  .tp-rank { display: grid; place-items: center; width: 30px; height: 36px; border: 2px solid var(--gold);
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
    font: 700 14px/1 var(--display); color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); text-align: center; }
  .tp-row:nth-child(3) .tp-rank { color: #cbd8ff; border-color: #91a6d7; background: color-mix(in srgb, #91a6d7 8%, transparent); }
  .tp-row:nth-child(4) .tp-rank { color: #ff9d62; border-color: #ff8648; background: color-mix(in srgb, #ff8648 8%, transparent); }
  .tp-crest { display: grid; place-items: center; width: 36px; height: 36px; }
  .tp-crest .crest-logo { max-width: 34px; max-height: 34px; filter: drop-shadow(0 2px 2px #0009); }
  .tp-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tp-who .pname { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-who small { color: #8ea5dc; font-size: 11px; letter-spacing: .04em; }
  .tp-stat { min-width: 0; text-align: right; }
  .tp-stat b { font: 800 13px/1.1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #cbd8ff; white-space: nowrap; }
  .tp-stat.on b { color: var(--cyan); font-size: 16px; text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 28%, transparent); }
  @container (max-width: 455px) {
    .tp-columns, .tp-row { grid-template-columns: 32px 34px minmax(80px, 1fr) repeat(3, minmax(38px, 48px)); gap: 5px; }
    .tp-extra { display: none; }
    .tp-qualifier { display: none; }
  }
  .sched-list, .task-list, .ms-list { display: flex; flex-direction: column; }
  .sched-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
    min-height: 40px; padding: 7px 4px; border-radius: 0; background: transparent; color: var(--text); text-align: left;
    text-transform: none; letter-spacing: 0; font: 400 13px/1.3 var(--body); box-shadow: none; }
  .sched-row:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
  /* One cyan pixel numeral for the guide steps, schedule dates and task numbers. */
  .guide-step .no, .sched-date, .task-no { font: 700 12px/1 var(--display); color: var(--cyan); }
  .sched-date { white-space: nowrap; }
  .sched-opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
  .sched-opp small { color: var(--text-dim); font-weight: 400; }
  .sched-loc { color: var(--text-dim); font-weight: 400; margin-inline-end: 4px; }
  .sched-rec { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 12px; }
  .ms-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
  .ms-row .lbl, .ms-next .lbl { color: var(--text-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .ms-meter { height: 6px; margin: 4px 0 10px; background: color-mix(in srgb, var(--violet) 40%, var(--border)); overflow: hidden; }
  .ms-meter i { display: block; height: 100%; background: var(--gold); }
  .ms-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 10px;
    text-align: left; text-transform: none; letter-spacing: 0; border-radius: 0; font: 400 13px/1.3 var(--body); color: var(--text);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 6%, transparent); box-shadow: none; }
  .ms-next b { display: block; }
  .ms-next i { grid-row: 1 / span 2; align-self: center; color: var(--gold); font-style: normal; font-size: 18px; }
  .task-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 7px 4px; border-radius: 0; background: transparent; color: var(--text); text-align: left; text-transform: none; letter-spacing: 0;
    font: 400 13px/1.3 var(--body); box-shadow: none; }
  .task-row:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
  .task-no { text-align: center; }
  .task-row.required .task-no { color: var(--orange); }
  .task-lbl { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .task-lbl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-lbl small { color: var(--text-dim); font-size: 11px; }
  .task-row i { color: var(--cyan); font-style: normal; font-size: 18px; }
  .atl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
  .atl-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 4px 0; }
  .atl-date { grid-row: 1 / span 2; font: 700 11px/1.2 var(--display); color: var(--cyan); white-space: nowrap; }
  .atl-line { font-size: 13px; font-variant-numeric: tabular-nums; }
  .atl-line b { color: var(--text); }
  .atl-line.dim { color: var(--text-dim); }
  @media (max-width: 1199px) {
    .hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .atl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .hgrid { grid-template-columns: minmax(0, 1fr); }
    .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .home-schedule-stack, .home-management-stack, .home-news-stack { display: grid; gap: 16px; min-width: 0; }
  /* Home's crisp team-colored edges are intentionally stronger than other page headings. */
  .home-screen .home-identity .eyebrow, .home-screen .home-mobile-identity small {
    text-shadow: 1px 1px 0 var(--header-name-shade), 2px 2px 0 var(--header-name-shade), 3px 3px 0 var(--header-name-shade); }
  @media (min-width: 761px) {
    .screen-home { max-width: none; }
    .home-screen { max-width: none; margin: 0; }
    .screen-trade { margin-inline: auto; }
    .screen-home, .screen-trade { container-type: inline-size; }
    .home-screen .pagehead { display: flex; flex-wrap: wrap; width: auto; max-width: none; margin: 0;
      gap: 12px 56px; align-items: start; justify-content: flex-start;
      padding: 10px 0; border: 0; clip-path: none; background: none; box-shadow: none; overflow: visible; }
    .home-screen .pagehead::after { display: none; }
    .home-screen .pagehead > div:first-child { flex: 0 0 auto; min-width: 0; max-width: 100%; align-self: start; }
    .home-screen .pagehead .ptitle { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .home-screen .pagehead > .hstrip { flex: 1 1 0; width: auto; min-width: 0;
      grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.2fr);
      justify-content: stretch; gap: 6px; }
    .home-screen .pagehead > .hstrip .kpi { min-width: 0; overflow: visible; }
    .home-screen .pagehead > .hstrip .lbl, .home-screen .pagehead > .hstrip .sub { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    /* Export Save lives in the topbar corner on desktop Home; the pagehead copy is the phone's. */
    .home-screen .pagehead > .metae { display: none; }
    .home-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
    .home-identity .home-emblem { width: 84px; height: 84px; }
    .home-identity > div { min-width: 0; }
    .home-identity-sub { margin-top: 10px; font: 600 12px/1.3 var(--body); letter-spacing: .16em;
      text-transform: uppercase; color: var(--dim); }
    .home-screen .home-identity .ptitle {
      text-shadow: 1px 1px 0 var(--header-name-shade), 2px 2px 0 var(--header-name-shade),
        4px 4px 0 var(--header-title-shade), 6px 6px 0 color-mix(in srgb, var(--header-title-shade) 70%, var(--canvas));
      filter: none; }
  }
  @media (min-width: 761px) {
    /* Follow usable content width, not the window: full navigation occupies
       more space than the compact rail on the same display. */
    @container (max-width: 1614px) {
      /* Keep one row of metadata by omitting the secondary financial readout. */
      .home-screen .pagehead > .hstrip {
        grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .home-screen .pagehead > .hstrip .kpi-cap { display: none; }
      .home-screen .pagehead > .hstrip .kpi { padding-inline: 8px; }
      .home-screen .pagehead > .hstrip .val { font-size: clamp(20px, 1.6vw, 28px); }
      /* Whole words only, so a card's minimum width is its longest word, never a letter. */
      .home-screen .pagehead > .hstrip .lbl, .home-screen .pagehead > .hstrip .sub { overflow-wrap: normal; }
    }
  }
  @media (min-width: 761px) and (max-width: 1100px) {
    .home-screen .pagehead > .hstrip { flex-basis: 100%; }
  }
  /* A compact rail can leave less than 1040px of actual content just above the
     viewport breakpoint. Keep the five cards on one line beneath the identity. */
  @container (max-width: 1040px) {
    .home-screen .pagehead > .hstrip { flex-basis: 100%; }
    .home-screen .pagehead > .hstrip .kpi { padding-inline: 10px; }
    .home-screen .pagehead > .hstrip .val { font-size: 20px; }
  }
  @media (max-width: 760px) { .home-screen .pagehead > .hstrip { display: none; } }
  /* Home Franchise Command: approved desktop composition; phone stays independent. */
  .sortable .sort-btn { border: 0; background: none; box-shadow: none; color: inherit; padding: 4px 0; font: inherit; text-transform: inherit; }
  .sortable[aria-sort="ascending"], .sortable[aria-sort="descending"] { color: var(--cyan); }
  .player-link { display: inline; padding: 0; border: 0; background: none; box-shadow: none; color: var(--cyan); font: inherit; font-weight: 700; text-transform: none; white-space: normal; }
  .alert-destination { border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-transform: none; padding: 0; text-align: left; }
  .player-link:focus-visible, .command-team:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .injury-alert { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .injury-alert small { display: block; color: var(--dim); margin-top: 6px; font-size: 12px; line-height: 1.5; }
  .injury-alert .injury-title { text-transform: capitalize; }
  .lineup-reminder { border-left: 3px solid var(--orange); padding: 12px; background: color-mix(in srgb, var(--orange) 6%, transparent); margin-bottom: 10px; }
  .lineup-reminder p { color: var(--dim); font-size: 12px; }
  .lineup-reminder button { margin: 4px 6px 0 0; }
  .command-standings-scroll { max-height: 355px; overflow: auto; }
  .command-standings-scroll table { width: 100%; }
  .command-standings-scroll th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
  .command-standings-scroll td, .command-standings-scroll th { padding: 9px 5px; font-size: 12px; }
  .command-standings-scroll tr:nth-child(even) { background: color-mix(in srgb, var(--violet) 8%, transparent); }
  .command-team { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--cyan); font: 700 12px var(--body); text-transform: none; white-space: normal; text-align: left; }
  .command-team .crest-logo { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
  .clinch { color: var(--good); margin-left: 4px; font-size: 12px; }
  .standings-panel .dash-hd { gap: 8px; }
  @media (max-width: 760px) {
    .player-link, .command-team { min-height: 44px; }
    .alert-destination { min-height: 44px; }
    .standings-panel .seg-btn { min-height: 44px; }
    .sortable .sort-btn { min-height: 44px; }
    .trade-roster-player .trade-mobile-check { min-width: 44px; min-height: 44px; }
    .trade-roster-columns .sort-btn { min-width: 0; min-height: 44px; padding: 0; font-size: 11px; }
  }
  @media (min-width: 761px) {
    /* Desktop Home palette (DESIGN.md §47): heading gold spans the header and
       dashboard; the high-contrast roster tokens stay scoped to the table body. */
    .home-screen { --home-heading-gold: #d8b76a; }
    .home-desk {
      --home-roster-text: #f2f5fa; --home-roster-text-dim: #aebbd0;
      --home-roster-head: #b7c3d5; --home-roster-rule: #283247; --home-roster-head-rule: #39465e;
      --home-roster-row-even: #10182c; --home-roster-row-odd: #080f20; --home-roster-row-hover: #1b2940;
      --home-scroll-thumb: #77869e; --home-scroll-track: #080e20;
      --home-inj-fg: #ffdce5; --home-inj-border: #ad4d68; --home-inj-bg: #3b1928;
    }
    .command-board { grid-template-columns: minmax(0, 1fr) minmax(360px, .52fr); gap: 18px; font-size: 15px; line-height: 1.5; }
    .command-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      grid-template-areas: "schedule performers" "schedule management";
      /* The spanning left stack must not inflate the row above Before You Sim. */
      grid-template-rows: max-content 1fr;
      gap: 18px; row-gap: 16px; align-items: start; min-width: 0; }
    .command-main > .tp-panel { grid-area: performers; }
    .command-main > .home-schedule-stack { grid-area: schedule; }
    .command-main > .home-management-stack { grid-area: management; }
    .command-roster-stack { grid-column: 1 / -1; display: grid; gap: 18px; min-width: 0; container-type: inline-size; }
    .command-performers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .command-performer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px;
      border-left: 2px solid var(--violet); background: color-mix(in srgb, var(--violet) 6%, transparent); }
    .command-performer-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .command-performer-player .command-performer-portrait { width: 44px; flex: 0 0 44px; }
    .command-performer .pname { padding: 0; border: 0; background: none; text-align: left; color: var(--cyan); font: 700 13px var(--body); box-shadow: none; white-space: normal; }
    .command-performer strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--cyan); font: 700 24px var(--body); }
    .command-performer small, .command-performer > span { color: var(--dim); font: 11px var(--body); }
    .command-performer > span { padding-left: 52px; }
    .command-board .dash-panel { min-width: 0; }
    .command-board .dash-hd h2 { font-size: 15px; }
    .command-board .dash-hd { min-height: 45px; }
    .command-last { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; margin-top: 12px;
      border-block: 1px solid var(--border); font-size: 12px; }
    .command-last .win { color: var(--good); }
    .command-last .loss { color: var(--bad); }
    .command-next-label { color: var(--cyan); font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; margin: 18px 0 6px; }
    .command-board .sched-row { min-height: 47px; }
    .command-board .perf-body { flex-direction: column-reverse; align-items: stretch; }
    .command-board .perf-stats { flex-direction: row; justify-content: space-between; margin: 14px 0; }
    .command-board .perf-stats div { text-align: left; }
    .command-board .perf-chart svg { height: auto; min-height: 145px; }
    /* The chart is a 460-unit viewBox scaled to its column; 9-unit labels land at
       ~7px. Size them in viewBox units so they read near the 11px label floor. */
    .command-board .perf-chart svg text { font-size: 13px; font-family: var(--body); }
    .command-owner { font-size: 13px; line-height: 1.65; margin: 0 0 14px; }
    .command-fin-note { color: var(--dim); font-size: 12px; margin: 10px 0; }
    /* Size the reference typography to the panel, not the browser's outer width. */
    .command-roster-stack > .tier-quiet {
      min-width: 0;
      --roster-name-size: clamp(16px, 1.25cqw, 20px);
      --roster-value-size: clamp(15px, 1.1cqw, 18px);
    }
    .command-roster-stack .dash-hd { min-height: 45px; }
    .command-roster-scroll { max-height: 560px; overflow: auto;
      scrollbar-color: var(--home-scroll-thumb) var(--home-scroll-track); scrollbar-width: auto; }
    .command-roster-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
    .command-roster-scroll::-webkit-scrollbar-track, .command-roster-scroll::-webkit-scrollbar-corner { background: var(--home-scroll-track); }
    .command-roster-scroll::-webkit-scrollbar-thumb { background: var(--home-scroll-thumb); border: 3px solid var(--home-scroll-track); border-radius: 6px; }
    .command-roster-scroll th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
    /* Keep data compact inside the full-width card instead of distributing a
       wide monitor's spare space between every stat. Names retain flexible room. */
    .command-roster-stack .command-roster-scroll table { width: 100%; min-width: 1700px; table-layout: fixed; }
    .command-roster-stack .command-roster-scroll :is(th, td):nth-child(n) { width: auto; }
    .command-roster-stack .command-roster-scroll :is(th, td):first-child { width: auto; }
    .command-roster-stack .command-roster-scroll :is(th, td):nth-child(2) { width: 52px; text-align: center; }
    .command-roster-stack .command-roster-scroll :is(th, td):nth-child(3) { width: 52px; }
    .command-roster-stack .command-roster-scroll table :is(th, td):nth-child(4) { width: 80px; }
    .command-roster-stack .command-roster-scroll table :is(th, td):nth-child(5) { width: 64px; }
    .command-roster-stack .command-roster-scroll table :is(th, td):nth-child(n+6) { width: 64px; }
    .command-roster-stack .command-roster-scroll table :is(th, td).roster-attr { width: 56px; }
    .command-roster-stack .command-roster-scroll table :is(th, td):nth-child(14) { width: 96px; }
    .command-roster-stack .command-roster-scroll td { height: clamp(44px, 3cqw, 48px); padding: 6px 8px;
      font-weight: 400; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--home-roster-text);
      border-bottom-color: var(--home-roster-rule); }
    .command-roster-stack .command-roster-scroll td:nth-child(2),
    .command-roster-stack .command-roster-scroll td:nth-child(3) { color: var(--home-roster-text-dim); }
    .command-roster-stack .command-roster-scroll td:nth-child(4),
    .command-roster-stack .command-roster-scroll td:nth-child(6) { padding-left: 16px; }
    .command-roster-stack .command-roster-scroll td:nth-child(4) b { font-size: var(--roster-name-size); font-weight: 700; }
    .command-roster-stack .command-roster-scroll tr[data-player]:nth-child(even) td { background: var(--home-roster-row-even); }
    .command-roster-stack .command-roster-scroll tr[data-player]:nth-child(odd) td { background: var(--home-roster-row-odd); }
    .command-roster-stack .command-roster-scroll tr[data-player]:hover td,
    .command-roster-stack .command-roster-scroll tr[data-player]:focus-within td { background: var(--home-roster-row-hover); }
    .command-roster-stack .command-roster-scroll th { padding: 0; font-weight: 600; color: var(--home-roster-head);
      border-bottom-color: var(--home-roster-head-rule); font-variant-numeric: tabular-nums; }
    .command-roster-stack .command-roster-scroll th[aria-sort="ascending"],
    .command-roster-stack .command-roster-scroll th[aria-sort="descending"] { color: var(--cyan); }
    .command-roster-stack .command-roster-scroll .sort-btn { min-height: 32px; padding: 6px 8px; }
    .command-roster-stack .command-roster-scroll th:nth-child(n+9) .sort-btn { padding-inline: 4px; font-size: 13px; }
    .command-roster-stack .command-roster-scroll th:nth-child(4) .sort-btn,
    .command-roster-stack .command-roster-scroll th:nth-child(6) .sort-btn { padding-left: 16px; }
    .command-roster-stack .pname { border-bottom: 0; color: var(--home-roster-text); text-shadow: none; }
    .command-roster-stack td .pname { font: 600 var(--roster-name-size)/1.4 var(--body); }
    .command-roster-stack .pname:hover, .command-roster-stack .pname:focus-visible {
      color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-shadow: none; }
    .command-roster-stack .pname:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .command-roster-stack .dash-hd .pname { font: 400 clamp(12px, .8cqw, 13px)/1.4 var(--body); color: var(--home-roster-head);
      letter-spacing: 0; text-transform: none; }
    .command-roster-stack .pill.inj { font: 600 clamp(12px, .8cqw, 13px)/1.2 var(--body); padding: 3px 6px;
      color: var(--home-inj-fg); border-color: var(--home-inj-border); background: var(--home-inj-bg); }
    .command-roster-stack .roster-panel { overflow: hidden; }
    .command-board .standings-panel td { height: 44px; }
    /* header (22.5px) + exactly eight 44px rows: the box ends on the playoff line
       instead of slicing the 8th seed in half. */
    .command-board .command-standings-scroll { max-height: 375px; }
    .command-board .standings-panel tr:nth-child(even) { background: color-mix(in srgb, var(--violet) 8%, transparent); }
    .command-board .activity-panel { height: 740px; max-height: none; }
    .command-board .activity-list { flex: 1; font-size: 15px; }
    .command-board .activity-list > p { line-height: 1.5; }
    .command-board .activity-panel .log-line { padding: 11px 12px; font-size: 15px; line-height: 1.5; }
    .command-board .activity-panel .loggrp-h { margin-block: 16px 10px; font-size: 13px; }
    .command-board .activity-panel .league-verdict { margin-top: 4px; font-size: 13px; }
    .command-board .activity-nav button { padding: 8px 10px; font-size: 12px; }
    /* Desktop Home readability scale: primary copy / support copy / dense data.
       Phone keeps its independent composition and type sizes below the shell gate. */
    .command-board :is(.sched-row, .task-row, .ms-row, .ms-next) {
      font-size: 15px; line-height: 1.5;
    }
    .command-board .sched-row { min-height: 52px; padding: 9px 4px; }
    .command-board .task-row { min-height: 50px; padding: 9px 4px; }
    .command-board :is(.command-owner, .obj-row .lbl, .alert-row .lbl, .atl-line, .dash-empty) {
      font-size: 15px; line-height: 1.5;
    }
    .command-board :is(.sched-date, .task-no, .sched-rec, .sched-loc, .sched-opp small,
      .task-lbl small, .ms-row .lbl, .ms-next .lbl, .obj-row .sub, .obj-note,
      .alert-row .sub, .injury-alert small, .command-performer small,
      .command-performer > span, .perf-legend, .fin-status) { font-size: 13px; }
    .command-board :is(.command-last, .command-fin-note, .bys-foot) { font-size: 14px; line-height: 1.5; }
    .command-board :is(.command-next-label, .obj-posture-lbl, .obj-row .chip,
      .perf-stats span, .atl-date, .tp-qualifier) { font-size: 12px; }
    .command-board :is(.obj-row, .alert-row) { padding-block: 9px; }
    .command-board .lineup-reminder p { font-size: 14px; line-height: 1.5; }
    .command-board .command-performer .pname { font-size: 15px; line-height: 1.4; }
    .command-board .fin-rows .kv { padding-block: 5px; font-size: 15px; }
    .command-board .command-roster-scroll :is(td, .player-link) { font-size: var(--roster-value-size); }
    .command-board .command-roster-scroll th { font-size: clamp(13px, .95cqw, 15px); }
    .command-board .command-standings-scroll td { font-size: 14px; }
    .command-board .command-standings-scroll th { font-size: 13px; }
    .command-board .command-team { font-size: 14px; }
    .command-board .nextup .matchup-nick { font-size: 16px; }
    .command-board .nextup .matchup-nick.long { font-size: 14px; }
    .command-board .nextup .matchup-nick.very-long { font-size: 13px; }
    .command-board .nextup :is(.matchup-city, .matchup-meta, .matchup-date, .matchup-week) { font-size: 12px; }
    .command-board .tp-who .pname { font-size: 15px; }
    .command-board .tp-who small { font-size: 13px; }
    .command-board .tp-stat b { font-size: 14px; }
    .command-board button.ghost { font-size: 13px; }
  }
  /* Keep whole team nicknames readable in narrow command cards. The enclosing
     .nextup container follows actual panel width, not a wide browser window. */
  @container (max-width: 430px) {
    .command-board .nextup .matchup-nick { font-size: 14px; }
    .command-board .nextup .matchup-nick.long { font-size: 12px; }
    .command-board .nextup .matchup-nick.very-long { font-size: 11px; }
  }
  /* Desktop Home hierarchy (DESIGN.md §43): soft-gold instrument titles over the phone's
     pink; reference panels (Roster Summary, Financial Overview, Around the League)
     step down to a quiet tier so the decision stack and matchup lead. */
  @media (min-width: 761px) {
    .home-desk .dash-hd h2 { color: var(--home-heading-gold); }
    .home-screen .hstrip .kpi .lbl { color: var(--dim); }
    .home-screen .hstrip .kpi.kpi-heading-accent .lbl { color: var(--home-heading-gold);
      font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
    .home-desk .tier-quiet .dash-hd h2 { color: var(--dim); font-size: 13px; }
    .home-desk .command-roster-stack .dash-hd h2 { font-size: clamp(13px, 1cqw, 16px); }
    .home-desk .tier-quiet .panel.dash-panel, .home-desk .panel.dash-panel.tier-quiet { border-top-color: var(--border-strong) !important; }
    .bys-count { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--cyan); color: var(--cyan);
      font: 700 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
    .bys-count.req { border-color: var(--orange); color: var(--orange); }
    .bys-count.clear { border-color: var(--good); color: var(--good); }
    .bys-panel .task-list { margin-bottom: 6px; }
    .bys-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-strong); color: var(--dim); font-size: 13px; }
    .bys-foot.req { color: var(--orange); font-weight: 700; }
    /* contrast: white on --accent is 3.97:1 and --violet ghost text 4.27:1 at 13px */
    .home-desk .lineup-reminder button:not(.ghost) { background: var(--accent-dim); }
    .home-desk button.ghost { color: color-mix(in srgb, var(--violet) 70%, #fff); }
  }
  @media (min-width: 761px) and (max-width: 1250px) {
    .command-board { grid-template-columns: minmax(0, 1fr); }
    .command-board .activity-panel { height: 570px; }
  }
  @media (min-width: 761px) and (max-width: 900px) {
    .command-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "performers" "schedule" "management"; grid-template-rows: none; }
  }
  /* Extend Standings to the shared bottom edge above Roster Summary; the narrow
     single-column composition keeps content-sized cards instead. */
  @media (min-width: 901px) {
    .command-main { align-self: stretch; }
    .command-main > .home-schedule-stack { align-self: stretch; grid-template-rows: max-content max-content minmax(0, 1fr); }
    .command-main > .home-management-stack { align-self: stretch; grid-template-rows: max-content minmax(0, 1fr); }
    .home-management-stack > .standings-panel { display: flex; flex-direction: column; min-height: 0; }
    .home-management-stack .dash-hd { flex: none; }
    .home-management-stack .command-standings-scroll { flex: 1; height: 0; min-height: 375px; max-height: none; contain: size; }
  }
  /* The feed absorbs spare rail height, keeping finances level with both main
     columns. Feed content scrolls rather than defining the grid row's height. */
  @media (min-width: 1251px) {
    .command-board > .home-news-stack { align-self: stretch; grid-template-rows: minmax(740px, 1fr) max-content; }
    .command-board .activity-panel { height: auto; min-height: 740px; }
    .command-board .activity-panel .dash-hd { flex: none; }
    .home-desk .activity-list { min-height: 0; contain: size; }
  }
  /* Team Performance chart */
  .perf-legend { display: flex; gap: 16px; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
  .perf-legend span { display: flex; align-items: center; gap: 6px; }
  .perf-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
  .perf-body { display: flex; gap: 12px; align-items: center; }
  .perf-chart { flex: 1; min-width: 0; }
  .perf-stats { display: flex; flex-direction: column; gap: 8px; flex: none; }
  .perf-stats div { text-align: right; }
  .perf-stats b { display: block; font: 700 20px/1.1 var(--display); }
  .perf-stats span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
  /* Financial Overview */
  .fin-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
  .capbar.small { height: 12px; margin-top: 4px; }
  .fin-status { margin-top: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  /* Owner Objectives */
  /* Posture sits in the body, not the header rail: "Owner Objectives" in the display
     font is 193-226px inside a 204-333px rail, so the rail never had room for a
     bordered pill beside it at any desktop width. Every other dash-hd carries a title
     or a light text link, so this also puts .obj back on that pattern. */
  .obj-posture { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 0 8px; }
  .obj-posture-lbl { color: var(--dim); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; }
  .obj-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
  .obj-row:first-of-type { border-top: none; }
  .obj-row .chip { flex: none; min-width: 60px; text-align: center; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; border: 1px solid; border-radius: 4px; padding: 2px 6px; }
  .obj-row .lbl { font-size: 13px; }
  .obj-row .sub { color: var(--dim); font-size: 12px; }
  .obj-note { margin-top: 10px; font-size: 12px; color: var(--dim); line-height: 1.5; }
  /* Team Alerts */
  .alert-row { padding: 6px 0; border-top: 1px solid var(--border); cursor: pointer; }
  .alert-row:first-of-type { border-top: none; }
  .alert-row:hover .lbl { color: var(--cyan); }
  .alert-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .alert-row .lbl { display: block; font-size: 13px; font-weight: 600; }
  .alert-row .sub { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
  .activity-panel { min-height: 340px; display: flex; flex-direction: column; }
  .home-desk .activity-panel { max-height: 880px; }
  .home-desk .activity-list { min-height: 0; overflow-y: auto; }
  .home-rail .dash-panel { --dash-frame: linear-gradient(135deg, color-mix(in srgb, var(--violet) 96%, var(--border)), color-mix(in srgb, var(--cyan) 30%, var(--border))); }
  .activity-list { flex: 1; padding-right: 4px; }
  .activity-panel .loglist { column-count: 1; }
  .activity-panel .log-line { padding: 6px 7px; border-bottom: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
    color: var(--dim); font-size: 12px; line-height: 1.35; }
  /* player news: bold white name (still a player-card link), then "(ABC) …" in --dim */
  .activity-panel .log-line:not(.activity-trade) :is(b, .player-link) { color: var(--text); font-weight: 700; }
  .activity-panel .log-line:nth-child(odd) { background: color-mix(in srgb, var(--violet) 3%, transparent); }
  .activity-panel .log-line.activity-trade { position: relative; margin: 0 0 6px; padding: 9px 9px 10px 11px;
    border: 1px solid color-mix(in srgb, var(--cyan) 58%, var(--border)); border-left: 4px solid var(--cyan);
    color: var(--text); background: linear-gradient(105deg, color-mix(in srgb, var(--violet) 17%, var(--panel2)), var(--panel2));
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 30%, transparent); }
  .activity-trade .trade-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
  .activity-trade .trade-badge { padding: 3px 6px; background: var(--cyan); color: var(--bg);
    font: 700 9px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .activity-trade .trade-badge b { color: inherit; }
  .activity-trade .trade-route, .activity-trade .trade-team { display: inline-flex; align-items: center; }
  .activity-trade .trade-route { gap: 7px; color: var(--cyan); font: 700 11px/1 var(--display); letter-spacing: .08em; }
  .activity-trade .trade-team { gap: 5px; }
  .activity-trade .trade-crest { display: grid; place-items: center; width: 22px; height: 22px; }
  .activity-trade .trade-crest .crest-logo { max-width: 22px; max-height: 22px; filter: drop-shadow(0 1px 1px #0009); }
  .activity-trade .trade-arrow { color: var(--cyan); }
  .activity-trade .trade-assets { color: var(--text); line-height: 1.4; }
  .activity-trade .trade-assets b { color: var(--text); }
  .activity-trade .trade-for { color: var(--dim); }
  .league-verdict { display: block; color: var(--dim); font-style: italic; font-size: 11px; margin-top: 2px; }
  .pill.trade-interest { border-color: var(--cyan); color: var(--cyan); }
  .activity-panel .log-line.activity-trade.user-trade { border-color: color-mix(in srgb, var(--gold) 72%, var(--border));
    border-left-color: var(--gold); box-shadow: 2px 2px 0 color-mix(in srgb, var(--gold) 35%, transparent); }
  .activity-trade.user-trade .trade-badge { background: var(--gold); }
  /* issue #216: a salary dump is a cap-relief move — orange, the cap-heat token */
  .activity-panel .log-line.activity-trade.salary-dump { border-left-color: var(--orange); }
  .activity-trade.salary-dump .trade-badge { background: var(--orange); }
  .activity-trade.trade-flash { animation: activity-trade-pop .85s ease-out both; }
  @keyframes activity-trade-pop {
    0% { transform: translateX(-3px); box-shadow: 0 0 0 2px var(--gold), 0 0 22px color-mix(in srgb, var(--gold) 48%, transparent); }
    100% { transform: none; box-shadow: 2px 2px 0 color-mix(in srgb, var(--gold) 35%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) { .activity-trade.trade-flash { animation: none; } }
  /* D33 option 3 follow-up (issue #55): severity/category color on plain log lines —
     injuries/returns/trade-demands used to be visually identical to each other. */
  .activity-panel .log-line.sev-severe { border-left-color: var(--bad); }
  .activity-panel .log-line.sev-moderate,
  .activity-panel .log-line.sev-demand { border-left-color: var(--orange); }
  .activity-panel .log-line.sev-return { border-left-color: var(--good); }
  .activity-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border)); }
  .activity-nav button { flex: 1; font-size: 11px; padding: 6px 8px; }
  .standings-panel { min-height: 218px; }
  .dash-foot { margin: 8px -12px -12px; padding: 8px 12px; border-top: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border));
    text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: color-mix(in srgb, var(--violet) 5%, transparent); }
  .standings-panel, .roster-panel { overflow-x: auto; }
  .standings-panel th, .standings-panel td, .roster-panel th, .roster-panel td { padding: 4px 8px; }
  .standings-panel table, .roster-panel table { font-size: 13px; }
  .standings-panel th, .roster-panel th { font-size: 11px; }
  /* Every roster-summary header sorts, so the tap target is the whole header cell:
     the th surrenders its padding to the button rather than wrapping a ~13px control. */
  .roster-panel th { padding: 0; }
  .roster-panel .sort-btn { width: 100%; min-height: 28px; padding: 4px 8px; border: 0; background: transparent;
    color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; }
  .roster-panel th.num .sort-btn { text-align: right; }
  .roster-panel .sort-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .roster-panel { min-height: 260px; }
  /* No min-width: at 1280 — the documented desktop minimum — the panel is 712px, so
     a 720px floor made the summary an 8px horizontal scroller on the narrowest
     supported screen. table-layout: fixed + the percentage widths below already
     stop the columns collapsing, which is what the floor was there for. */
  .roster-panel table { table-layout: fixed; }
  .roster-panel :is(th, td):nth-child(1) { width: 22%; }
  .roster-panel :is(th, td):nth-child(2) { width: 5%; padding-left: 4px; padding-right: 4px; }
  .roster-panel :is(th, td):nth-child(3) { width: 7%; padding-left: 4px; padding-right: 4px; }
  .roster-panel :is(th, td):nth-child(n+4):nth-child(-n+7) { width: 10.5%; }
  .roster-panel :is(th, td):nth-child(8) { width: 24%; }
  .roster-panel tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--violet) 3%, transparent); }

  @media (max-width: 700px) {
    .home-screen .pagehead { min-height: 62px; padding: 8px 10px 8px 14px; gap: 8px; }
    .home-screen .pagehead .eyebrow { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-screen .pagehead .ghost { min-height: 40px; padding: 8px 10px; font-size: 11px; }
    .home-summary { margin-top: 8px; }
    .home-screen .owner-note { grid-template-columns: 1fr; gap: 6px; }
    .hrow1 > .dash-panel, .hrow2 > .dash-panel { min-height: 0; }
  }

  /* ---- Step 5: Salary Cap tab — multi-year cap sheet (payroll needle + labeled
     thresholds, year tabs over projected salaries/cap). Read-only; no new state. ---- */
  .capbar { position: relative; height: 28px; background: var(--panel2); border: 1px solid var(--border);
    border-radius: 6px; overflow: visible; margin-top: 24px; }
  .capbar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 6px 0 0 6px; }
  .capbar-mark { position: absolute; top: 0; bottom: 0; width: 2px; }
  .capbar-threshold { position: absolute; top: 100%; text-align: center; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; transform: translateX(-50%); padding-top: 6px; }
  .capbar-threshold .thr-label { color: var(--dim); }
  .capbar-threshold .thr-val { color: var(--text); display: block; font-size: 12px; margin-top: 2px; }
  .capbar-needle { position: absolute; top: -20px; transform: translateX(-50%); font-size: 12px;
    font-weight: 700; white-space: nowrap; }
  .capbar-needle::after { content: "▾"; display: block; text-align: center; font-size: 14px; line-height: 1; }
  .capbar-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; font-size: 12px; color: var(--dim); }
  .capbar-legend span { display: flex; align-items: center; gap: 6px; }
  .capbar-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
  .capbar-legend .cur { color: var(--text); font-weight: 600; }
  .cap-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .cap-badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 12px; border: 1px solid var(--border); border-radius: 4px; }
  .fin-yr-tabs { display: flex; gap: 2px; margin-bottom: 16px; }
  .fin-yr-tabs button { padding: 6px 16px; font-size: 13px; border-radius: 6px; }
  .fin-yr-tabs button.active { background: var(--accent); color: #fff; }
  .fin-yr-tabs button:not(.active) { background: var(--panel2); color: var(--dim); border: 1px solid var(--border); }
  .fin-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 700px) { .fin-bottom { grid-template-columns: 1fr; } }

  /* ---- Playoffs: connected bracket tree (#231, docs/plans/issues/ISSUE-231.md).
     Pure presentation of state.playoffs via playoffTree(): mirrored 7-column
     poster on desktop, vertical stacked tree on phone (rules in the ≤760 block).
     Gold is reserved for the user path and champion; cyan for resolved structure;
     violet for the round-heading rail. No new tokens. ---- */
  .screen-playoffs { height: 100%; display: flex; flex-direction: column; }
  .screen-playoffs > .pagehead { flex: none; }
  .screen-playoffs > .po-panel { flex: 1; min-height: 0; }
  .po-panel { padding: 16px; }
  .po-desk { height: 100%; display: flex; flex-direction: column; }
  .po-phone { display: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* one card = two stacked team blocks split by a hairline (D3) */
  .po-card { display: grid; grid-template-rows: 1fr 1px 1fr; background: var(--panel2);
    border: 1px solid var(--border); min-width: 0; }
  .po-mid { background: var(--border-strong); }
  .po-block { display: grid; grid-template-rows: auto auto; gap: 2px; padding: 6px 8px;
    min-width: 0; align-content: center; min-height: 34px; }
  .po-r1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .po-seed { font: 700 10px/1 var(--display); color: var(--text-dim); width: 13px; text-align: center;
    font-variant-numeric: tabular-nums; flex: 0 0 auto; }
  .po-crest { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center;
    flex: 0 0 auto; overflow: hidden; }
  .po-crest .crest-logo { width: 16px; height: 16px; object-fit: contain; }
  .po-count { margin-left: auto; font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums;
    color: var(--text); display: inline-flex; align-items: center; gap: 3px; }
  .po-check { color: var(--good); font-size: 10px; }
  .po-r2 { min-width: 0; }
  .po-nick { font: 600 12px/1.15 var(--body); color: var(--text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; display: block; }
  .po-src { font: 500 10px/1.2 var(--body); color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .04em; }
  .po-block.po-win .po-nick { font-weight: 700; }
  .po-block.po-lose { opacity: .55; }
  /* user path (orthogonal to win/lose): gold keyline + bounded glow, star + SR text */
  .po-block.po-user { box-shadow: inset 0 0 0 2px var(--gold),
    0 0 8px color-mix(in srgb, var(--gold) 35%, transparent);
    background: color-mix(in srgb, var(--gold) 8%, transparent); }
  .po-star { color: var(--gold); margin-left: 4px; }
  /* desktop mirrored grid: 7 card columns + 6 connector gutters, 8 equal tracks */
  .po-heads { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 8px; }
  .po-head { font: 700 11px/1 var(--display); text-transform: uppercase; letter-spacing: .08em;
    color: var(--violet); text-align: center; }
  .po-grid { display: grid; flex: 1; grid-auto-rows: minmax(0, 1fr); min-height: 436px;
    grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr; }
  /* Keep the 436px poster floor on short desktop viewports by compacting only
     Playoffs-owned content. The poster flexes within main's actual remaining
     height, including a wrapped topbar, rather than guessing from the viewport. */
  @media (min-width: 761px) and (max-height: 800px) {
    main.content:has(.po-panel) { padding-block: 4px; }
    main.content:has(.po-panel) .pagehead { align-items: center; flex-wrap: nowrap; gap: 8px;
      min-height: 48px; margin: 0 0 4px; padding: 6px 10px; }
    main.content:has(.po-panel) .pagehead > div:first-child { display: flex; align-items: baseline; gap: 8px; }
    main.content:has(.po-panel) .pagehead .eyebrow { font-size: 10px; line-height: 1; white-space: nowrap; }
    main.content:has(.po-panel) .pagehead .ptitle { margin: 0; font-size: 20px; }
    main.content:has(.po-panel) .pagehead .metae { gap: 8px; flex-wrap: nowrap; font-size: 11px; }
  }
  @media (min-width: 761px) and (max-width: 820px) {
    .po-block { padding-inline: 4px; }
    .po-nick { font-size: 10px; letter-spacing: -.02em; }
  }
  .po-cell { min-width: 0; display: flex; align-items: center; padding: 4px 0; }
  .po-cell > .po-card { width: 100%; }
  .po-cabcell, .po-finalscell { align-items: stretch; }
  .po-finalscell > .po-card { height: 100%; }
  .po-finalscell > .po-card, .po-finals { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); }
  .po-foot { text-align: center; color: var(--text-dim); font-size: 11px; margin-top: 10px; }
  /* connector forks (desktop): arms into a vertical bar, stem to the destination */
  .po-link { position: relative; pointer-events: none; }
  .po-link i { position: absolute; border: 0 solid var(--border-strong); }
  .po-link .po-arm { left: 0; width: 50%; height: 0; margin-top: -1px; border-top-width: 2px; }
  .po-link .po-bar { left: 50%; top: 25%; height: 50%; width: 0; margin-left: -1px; border-left-width: 2px; }
  .po-link .po-stem { left: 50%; right: 0; top: 50%; height: 0; margin-top: -1px; border-top-width: 2px; }
  .po-link-m .po-arm { left: auto; right: 0; }
  .po-link-m .po-stem { left: 0; right: 50%; }
  .po-link-lit i { border-color: color-mix(in srgb, var(--cyan) 70%, transparent);
    box-shadow: 0 0 4px color-mix(in srgb, var(--cyan) 30%, transparent); }
  /* champion cabinet at the convergence point (D7) */
  .po-cabinet { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; width: 100%; height: 100%; padding: 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, var(--panel)), var(--panel));
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 22%, transparent); }
  .po-trophy { width: 34px; height: 34px; object-fit: contain; }
  .po-cabtitle { font: 700 10px/1 var(--display); letter-spacing: .1em; color: var(--gold);
    text-transform: uppercase; }
  .po-cabcrest { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
  .po-cabcrest .crest-logo { width: 32px; height: 32px; object-fit: contain; }
  .po-cabname { font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
  .po-cabname.po-dim { color: var(--text-dim); }
  .po-cabsub { font: 500 11px/1.3 var(--body); color: var(--text-dim); }
  .po-cabyou { color: var(--gold); }
  /* ---- Trade Finder (D19): solicited-quote controls + result cards ---- */
  /* Trade tab (Concept B restructure): Finder is a full-width band above the
     machine, not a narrow rail beside it — the machine's two roster columns
     are the dominant area, so they get the full workspace width instead of
     sharing it with a 360-420px rail. */
  .trade-workspace { display: flex; flex-direction: column; gap: 14px; }
  .trade-workspace > .panel, .trade-machine > .panel { margin-bottom: 0; }
  .trade-machine { min-width: 0; }
  /* The phone trade finder is a separate, task-first composition. Keep it out
     of desktop layouts instead of duplicating the finder beneath the machine. */
  .trade-mobile-finder { display: none; }
  .finder-mobile-head { display: none; }
  .mobile-global-action { display: none; }
  .mobile-next-screen { max-width: 760px; margin: 0 auto; }
  .next-primary { border-color: color-mix(in srgb, var(--gold) 62%, var(--border)); box-shadow: inset 3px 0 0 var(--gold); }
  .next-primary h2 { margin: 6px 0 14px; }
  .next-primary .commit { width: 100%; }
  .next-section { margin: 18px 0; }
  .next-section > h2 { margin: 0 0 8px; color: var(--dim); font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
  .next-task { width: 100%; min-width: 0; margin-bottom: 6px; padding: 11px 12px; display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
    color: var(--text); background: var(--panel); border: 1px solid var(--border); }
  .next-task > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .next-task b { overflow-wrap: anywhere; }
  .next-task small { overflow: hidden; color: var(--dim); font: 400 11px/1.35 var(--body); text-overflow: ellipsis; white-space: nowrap; }
  .next-index { color: var(--violet); font: 700 11px/1 var(--display); }
  .next-task.required { border-left: 3px solid var(--orange); }
  .next-task.phase { border-left: 3px solid var(--gold); }
  .next-task.advisory { border-left: 3px solid var(--cyan); }
  .next-task i { color: var(--dim); font-style: normal; }
  .next-clear { color: var(--dim); font-size: 13px; }
  /* Deal status: two boxes grouped by team (your cap context, their cap
     context) instead of one continuous line mixing both — same .cap-summary
     items, just regrouped; .cap-team-box only adds the card chrome so the
     plain .cap-summary used elsewhere (Free Agency, the cash-terms row below
     row2) is untouched. */
  .cap-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
  .cap-team-box { padding: 10px 14px; background: var(--panel2); border: 1px solid var(--border); margin: 0; }
  @media (max-width: 800px) { .cap-status-row { grid-template-columns: 1fr; } }
  /* Trade Finder's three sections (explanation / find-a-taker / what-would-
     it-take) sit in one row, each its own bordered card — "Trade Finder" is
     box 1's own heading, not a title over all three. .finder-ctl holds boxes
     2-3 as markup — it's set to display:contents so its two <div class="finder-box">s
     become direct grid items of .trade-finder alongside box 1
     (.finder-explain), with no other markup change: the three boxes fill row
     1, banners/quote cards span full width in the row below. */
  .trade-finder { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(230px, 1.4fr) minmax(230px, 1.4fr); column-gap: 20px; row-gap: 14px; align-items: start; }
  .trade-finder > .finder-ctl { display: contents; }
  .trade-finder > .banner, .trade-finder > .qcard-grid { grid-column: 1 / -1; }
  .finder-box { background: var(--panel2); border: 1px solid var(--border); padding: 14px 16px; }
  .finder-box.finder-explain h2 { margin: 0 0 8px; }
  /* narrower desktop widths: let the three sections stack instead of cramping
     (mobile's own ≤760px layout is untouched — this sits well above it) */
  @media (max-width: 1100px) { .trade-finder { grid-template-columns: 1fr; } }
  .finder-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 4px; }
  .finder-ctl h3 { font: 700 12px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); margin: 0 0 6px; }
  .finder-ctl .frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
  .finder-ctl select { max-width: 100%; }
  .finder-basket { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; min-height: 0; }
  .finder-basket .pill { display: flex; align-items: center; gap: 6px; }
  .finder-basket .pill button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0 0 0 2px; line-height: 1; opacity: .7; }
  .finder-basket .pill button:hover { opacity: 1; }
  .qcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
  .qcard { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
  .qcard .qhd { font: 700 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
  .qcard .qposture { font-size: 12px; color: var(--dim); }
  .qcard .qline { font-size: 13px; line-height: 1.5; }
  .qcard .qline b { color: var(--text); }
  .finder-overpay-warning { margin: 0; padding: 8px 10px; border-left: 3px solid var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); font-size: 12px; line-height: 1.45; }
  .qcard button { align-self: flex-start; margin-top: 2px; }
  .stage-summary { margin: 14px 0 16px; padding: 12px; border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border));
    background: color-mix(in srgb, var(--gold) 5%, var(--panel2)); box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
  .stage-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 24%, var(--border)); }
  /* One gold staged-deal heading for the desktop workspace and the phone summary. */
  .desktop-trade .tw-staged-header h2, .stage-summary-head h3 { color: var(--gold); font: 700 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
  .stage-summary-head h3 { margin: 2px 0 3px; }
  .stage-summary-head p { margin: 0; color: var(--dim); font-size: 12px; }
  .stage-summary-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .stage-side { min-width: 0; }
  .stage-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--cyan);
    font: 700 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
  .stage-side-head b { color: var(--text); }
  .stage-asset-list { display: grid; gap: 7px; margin-top: 7px; }
  .stage-asset { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
    padding: 8px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--violet) 36%, var(--border)); }
  .stage-asset-kind { color: var(--gold); font: 700 10px/1 var(--display); letter-spacing: .08em; writing-mode: vertical-rl; transform: rotate(180deg); }
  .stage-asset-copy { min-width: 0; display: grid; gap: 3px; }
  .stage-asset-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .stage-player-link { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .stage-player-link:hover { color: var(--cyan); text-decoration: underline; }
  .stage-asset-copy > span { color: var(--dim); font-size: 11px; line-height: 1.3; }
  .stage-asset-copy .pill { margin-left: 3px; font-size: 10px; padding: 1px 5px; }
  .stage-asset-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .stage-asset-actions button { padding: 4px 7px; font-size: 10px; }
  .stage-replace { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; padding-top: 5px; border-top: 1px solid var(--border); }
  .stage-replace label { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 11px; }
  .stage-replace select { min-width: 0; max-width: 100%; font-size: 12px; padding: 4px 6px; }
  .stage-replace-empty { color: var(--text-dim); font-size: 11px; }
  .stage-empty { padding: 10px; color: var(--text-dim); border: 1px dashed var(--border-strong); font-size: 12px; }
  .stage-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border);
    color: var(--dim); font-size: 11px; }
  .stage-terms > span { color: var(--cyan); font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
  .stage-terms b { color: var(--text); font-weight: 600; }
  .stage-terms i { color: var(--violet); font-style: normal; }
  @media (max-width: 760px) { .stage-summary-sides { grid-template-columns: 1fr; } .finder-box { background: transparent; border: none; padding: 0; } }
  /* ---- Team select (onboarding) — Concept 2 (DESIGN.md §5.2, revised 2026-07-10):
     brand-gradient card grid + docked detail bar. Wordmark only (§5.5), no "STEP 1
     OF 3" (team select is the only onboarding step this app has). Card/dock accents
     are blue per §5.4, not the mockup's red. Brand gradients come from TEAM_COLORS/
     teamGrad and are shared by every team chip in the app. ---- */
  /* Macro layout (docs/plans/2026-07-19-team-picker-macro-pass.md): a fixed cabinet
     with ONE internal scroller. header/hero/chassis-toolbar/dock never scroll; only
     .tpick-scroll (grid or list, inside the violet chassis) does. Mirrors the
     .app/.col/main.content pattern from issue #21 — flex column, min-height:0 on
     the child that scrolls. */
  .tpick-root { height: 100vh; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  /* Responsive height system (docs/plans/2026-07-20-team-picker-responsive-pass.md):
     every vh-clamped size below in this picker section (padding/margins/font-sizes/
     crest dims) is solved to hit its CURRENT fixed-px value at h=935 (the ceiling —
     pixel-identical to pre-responsive) and a compressed value at h=768 (the floor,
     the shortest supported laptop). Retuning either anchor means re-deriving every
     clamp()'s coefficients from that same pair. */
  /* Ultrawide containment (docs/plans/2026-07-19-team-picker-ultrawide-containment.md):
     one shared bounded stage so the screen reads as a single composition instead of
     stretching density above ~1700px. width:calc(100% - 56px) reproduces the exact
     28px-gutter math every element already used below the cap (so 1664/1280 render
     pixel-identical to before); max-width only starts binding once that natural width
     would exceed it. --tpick-stage is one source of truth so header/hero/chassis/
     dock-row edges always align vertically. */
  :root { --tpick-stage: 1640px; }
  /* Wide desktops get a wider stage (2026-08-07, franchise detail bar). The 1640px
     cap was solved for the CARD GRID landing on exactly 6 columns; the detail bar
     is the denser consumer of the same stage and needs ~1840px of inner width to
     show six bays without truncating the star name, the picks values or the year
     select. Gated at 1900px so every width the cap was originally tuned against
     (1280-1664, and the 1366 laptop shot) renders pixel-identical to before —
     only genuinely wide screens, which had spare room anyway, see the change.
     The grid re-flows to 7 columns there; it stays one bounded composition, which
     is what the containment pass was actually protecting. */
  @media (min-width: 1900px) { :root { --tpick-stage: 1880px; } }
  /* .tpick-top's own box stays full-bleed (its background/border-bottom read as a bar,
     unlike chassis/hero which are already inset "panels") — only its CONTENT is
     stage-bounded, via side padding that grows past 28px once the bar is wider than
     the stage + gutters. Below that breakpoint this is exactly the old fixed 28px. */
  .tpick-top { flex: none; display: flex; align-items: center; gap: 18px;
    padding: clamp(12px, calc(3.6vh - 15px), 18px) max(32px, calc((100% - var(--tpick-stage)) / 2))
      clamp(16px, calc(4.2vh - 17px), 22px);
    border-bottom: 1px solid var(--border); background: var(--bg-elev); flex-wrap: wrap; }
  .tpick-lockup { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 20px); min-width: 0; flex: none; }
  .tpick-top .brand { padding: 0; border: none; }
  .tpick-top .sep { position: relative; width: 6px; height: clamp(42px, calc(10vh - 30px), 58px);
    flex: none; background: var(--cyan); box-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 82%, var(--bg)); }
  .tpick-top .sep::before, .tpick-top .sep::after { content: ""; position: absolute; left: -3px;
    width: 12px; height: 4px; background: var(--gold); }
  .tpick-top .sep::before { top: -4px; }
  .tpick-top .sep::after { bottom: -4px; }
  /* marquee-scale title, stepped back ~25% from the macro pass (finishing pass #1 —
     that pass scaled the title but not the brand lockup beside it, so the header
     read as small-crest -> enormous title; the lockup got wider above, this got
     smaller, so the two now hold comparable visual weight) */
  .tpick-top .ttl h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 800;
    font-size: clamp(20px, 2.3vw, 33px);
    text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
  .tpick-top .spacer { flex: 1; }
  .tpick-seg { display: flex; gap: 6px; }
  .tpick-seg button { min-width: 84px; background: var(--panel2); color: var(--dim); border: 1px solid var(--border);
    border-radius: 6px; padding: 11px 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .tpick-seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* conference tabs enlarged (finishing pass #1) so they hold their own next to the
     header's other now-rebalanced elements; the toolbar's Grid/List icon toggle
     (.tpick-seg.vseg) is a different, deliberately compact module — untouched */
  .tpick-top .tpick-seg button { min-width: 96px; padding: clamp(8px, calc(3vh - 14px), 13px) 22px;
    border-radius: 0; font-size: 14px; }
  /* the violet chassis: one framed stage holding the toolbar (pinned) + the grid/list
     (the screen's only scroller), on an opaque panel fill over the solid #app field */
  .tpick-chassis { flex: 1 1 auto; min-height: 0; width: calc(100% - 56px); max-width: var(--tpick-stage);
    margin: clamp(6px, calc(6vh - 39px), 16px) auto 0; display: flex; flex-direction: column;
    border: 2px solid var(--border); border-radius: 4px; background: var(--panel); overflow: hidden; }
  .tpick-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: clamp(8px, calc(3.6vh - 19px), 14px) 20px;
    border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  /* arcade control modules, not a web form (finishing pass #3) — search and the two
     selects are fixed-ish widths now (module footprint), not flex-grow sponges, so
     .spacer goes back to doing the pushing (was capped near-0 when search alone
     absorbed the toolbar's surplus width). No conference dropdown here — the
     header tabs own that filter (grilled decision #1, reaffirmed by this pass). */
  .tpick-bar input[type="search"] { flex: 1 1 320px; max-width: 320px; min-width: 160px; background: var(--panel2);
    color: var(--text); border: 1px solid var(--border); padding: 11px 14px; font-size: 13px; font-family: inherit; }
  .tpick-bar select { width: 230px; padding: 11px 14px; }
  .tpick-bar .spacer { flex: 1; }
  .tpick-bar .count { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  /* Grid/List become icon-style mode toggles (⊞/☰), not text buttons */
  .tpick-seg.vseg button { min-width: 0; padding: 9px 16px; font-size: 16px; line-height: 1; }
  .tpick-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: clamp(10px, calc(4.8vh - 26px), 18px) 20px; }
  /* scroll-affordance fade (finishing pass #4) — .has-more is JS-toggled in render()
     off real scrollHeight/clientHeight, so it only shows when there's genuinely
     more below (never on East/West's unscrolled 15 teams, never once you've
     actually scrolled to the bottom). ~56px ~= a third of a card row, so the
     peek reads as a deliberate affordance instead of accidental clipping. */
  .tpick-scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%); }
  .tpick-empty { padding: 60px 20px; text-align: center; color: var(--dim); font-size: 14px; }
  /* base grid — the NA block below overrides minmax to 220px (see the note there) */
  .tcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: clamp(8px, calc(3.6vh - 19px), 14px); }
  .tcard { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    padding: 0; text-align: left; color: var(--text); display: flex; flex-direction: column; cursor: pointer; }
  .tcard-preview { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0;
    border: 0; border-radius: inherit; background: transparent; box-shadow: none; clip-path: inherit; }
  .tcard-preview:hover { border: 0; background: transparent; box-shadow: none; }
  .tcard-preview:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
  .tcard .na-name .star { position: relative; z-index: 2; }
  .tcard:hover { border-color: var(--border-strong); }
  .tcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
  /* dock is now an inset hero (flex child, margined off the viewport edges), not a
     full-bleed fixed footer — "Preview Roster" growing it just shrinks the chassis
     above (flex column), so the old dock-tall padding-reserve hack is gone entirely */
  /* Frame, corner sparks and dividers are declared in the Neon Arcade skin block
     below — it re-declares .tpick-dock after this point, so anything set here
     would lose. One owner, no specificity race. */
  .tpick-dock { flex: none; width: calc(100% - 56px); max-width: var(--tpick-stage);
    margin: clamp(8px, calc(4.8vh - 28px), 16px) auto clamp(10px, calc(6vh - 36px), 20px);
    position: relative; }
  .dock-roster { max-height: 38vh; overflow: auto; padding: 14px 28px 0; }
  .dock-roster table { font-size: 13px; max-width: 720px; }
  /* ==========================================================================
     Franchise detail bar (2026-08-07). Replaces the 2026-08-04 segmented-cabinet
     GRID with a flex row of six bays: Identity (logo+name — the crest is part of
     identity now, not its own bay), Team OVR, Star Player, Team Status, Picks
     Owned, Actions. No content added or removed; size/position/formatting only.

     Why flex, not the old grid: grid's minmax(floor, max-content) tracks were
     load-bearing precisely because grid redistributes leftover width into any
     track that declares room to grow. Flex ratios state the priority directly —
     star 1.27 > picks 1.29 > status 1.14 (retuned 2026-08-10: the original
     1.4/1.38/.92 starved Team Status, whose label+value pair measures ~233px
     against the ~196px that .92 bought; star gave back its measured slack, and
     the shared label column tightened 92 -> 90 — CAP STATUS measures ~89 — to
     fund the OKC protected-pick row) — so each bay's share tracks its longest
     content. Identity / OVR / Actions stay fixed. Every bay clears its longest
     content with >=6px margin at 1920; at exactly 1900 the pool is ~20px
     poorer and the margins are ~1px, so the 1900-1919 sliver is best-effort
     (the brief's criterion is 1920).

     Height: the old bar ran ~170px because the tallest bay (identity: eyebrow +
     name + its own pill row + sub) set the floor. Folding the posture pill inline
     into the meta line removes a whole row — that is what buys the ~110px target,
     not shrinking type. */
  .dock-row { display: flex; align-items: stretch; justify-content: center;
    gap: 0; padding: 14px 20px; max-width: var(--tpick-stage); margin: 0 auto;
    font-family: var(--body); }
  /* the display face is reserved for identity and numerals inside the bar */
  .dock-row .who .nm, .dock-row .bigovr .n, .dock-star-player .sp-ovr,
  .dock-actions button.commit { font-family: var(--display); }
  /* One hairline per boundary, drawn on the left edge of every bay after the
     first — dividers are consistent by construction instead of per-bay opt-in
     (the old dock hand-applied a background-gradient rule to some bays and not
     others, which is how bays kept drifting out of alignment). */
  .dock-row > * + * { border-left: 1px solid var(--border); }
  .dock-row > .dock-identity, .dock-row > .bigovr, .dock-row > .dstat,
  .dock-row > .dock-picks, .dock-row > .dock-actions { padding: 0 20px; min-width: 0;
    overflow: hidden; }
  .dock-row > .dock-identity { padding-left: 0; }
  .dock-row > .dock-actions { padding-right: 0; }

  /* 1. Identity — logo chip + stacked city / name / meta. Fixed width: identity
     must not grow or shrink with how long the team's name happens to be. */
  .dock-identity { flex: 0 0 326px; display: flex; align-items: center; gap: 16px; }
  /* Square and unblurred, unlike the app's other crests: this bar's language is
     "radius 0, hard offset shadows, no blur — glow only on the selection frame",
     and the crest sat inside it as a circle with an 8px glow.
     Border stays TEAM COLOUR (inherited from .crest), not amber: the brief's
     acceptance list closes amber to the selection frame + sparks, the contender
     pill, a 90+ rating and the commit button, and the crest is none of those. Its
     "amber border while selected" line in the structure section conflicts with that
     list. RESOLVED 2026-08-07 by the author in favour of the closed list — the crest
     is the one place team identity reads as colour, and amber stays at four uses. */
  .crest.dock-crest { width: 64px; height: 64px; flex: none; font-size: 16px;
    border-width: 2px; border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .35); }
  /* the app-wide medallion treatment is a pair of blurred drop-shadows; inside this
     bar that is the one thing the language forbids, so the same edge separation is
     done with a hard 1px offset instead. Scoped — the other 30 crests are untouched. */
  .crest.dock-crest .crest-logo { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .9)); }
  .dock-row .who { min-width: 0; }
  .dock-row .who .eyebrow { color: var(--cyan); font-size: 12px; letter-spacing: .25em;
    text-transform: uppercase; margin-bottom: 4px; }
  /* White, not amber: amber is reserved for the selection frame, the contender
     pill and the commit button. The violet pixel shadow carries the depth the
     amber fill used to. */
  .dock-row .who .nm { font: 800 24px/1.1 var(--display); text-transform: uppercase;
    letter-spacing: .02em; color: var(--text); text-shadow: 3px 3px 0 var(--violet);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-row .who .nm.mid { font-size: 21px; }
  .dock-row .who .nm.long { font-size: 17px; }
  /* meta line: conference / division, with the posture pill inline at its end */
  .dock-row .who .sub { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    color: var(--text-dim); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    margin-top: 7px; min-width: 0; white-space: nowrap; }
  /* conference/division yields first; the posture pill is the smaller, higher-value
     token, so it keeps its full width and the text ellipsizes around it */
  .dock-row .who .sub > .sub-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dock-row .who .badgerow { flex: none; }
  .dock-row .who .badgerow .pill { font-size: 10px; padding: 2px 6px; background: transparent; }

  /* 2. Team OVR — label over a display-font numeral in its OVR tier colour
     (attrColor: 90+ amber, 80s cyan, 70s body, below that muted), so an 81 reads
     cyan, not amber. Colour and its hard pixel shadow are stamped inline at
     render time (attrShadow) because both are data-dependent. */
  .dock-row .bigovr { flex: 0 0 136px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; }
  .dock-row .bigovr .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-dim); }
  .dock-row .bigovr .n { font: 800 40px/1 var(--display); font-variant-numeric: tabular-nums; }

  /* 3-5. Shared fact-bay chrome: eyebrow above content, bay centred in the row. */
  .dock-row .dstat, .dock-row > .dock-picks { display: flex; flex-direction: column;
    justify-content: center; }
  .dock-row .dstat > span, .dock-picks-lbl { display: block; font-size: 11px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }

  /* 3. Star player — the widest text in the bar, so it takes the largest flex
     share. "Shai Gilgeous-Alexander" must fit unbroken at 1920px; the ellipsis
     is a genuine last resort, not a working state. */
  .dock-row .dstat.dock-star { flex: 1.27 1 0; }
  .dock-star-player { display: flex; align-items: baseline; gap: 5px; margin-top: 7px; min-width: 0; }
  .dock-row .dock-star-player b { min-width: 0; font-size: 17px; font-weight: 700; color: var(--text);
    letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-star-player strong { flex: none; display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
  .dock-star-player .sp-ovr { font: 800 13px/1 var(--display); font-variant-numeric: tabular-nums; }
  .dock-star-player .sp-ovr-lbl { font-size: 10px; letter-spacing: .1em; color: var(--text-dim); }
  .dock-star-contract { margin-top: 5px; color: var(--dim); font-size: 13px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-star-contract .ctotal { color: var(--text-dim); }

  /* 4. Team status — label/value pairs on a fixed 90px label column (the longest
     label, CAP STATUS, measures ~89 at 11px/.2em — the old 92 was slack the bar
     can't afford, 88 was a sub-pixel clip) with the value immediately after. Not
     space-between: a wide gutter with right-aligned values reads disconnected. */
  .dock-row .dstat.dock-roster-cap { flex: 1.14 1 0; }
  .dock-roster-cap { min-width: 0; }
  /* the value column is max-content, NOT 1fr: grid sizes the fixed-max label
     track first and dumps the whole shortfall on an fr track, so 1fr silently
     inverted the yield order (P1, 2026-08-10 — 28/30 Cap Status values clipped
     at 1920 while every label kept its 92px). max-content protects the value;
     the label track takes what remains and ellipsizes. */
  .dock-roster-cap .rc-row { display: grid; grid-template-columns: minmax(0, 90px) max-content;
    align-items: baseline; column-gap: 6px; }
  .dock-roster-cap .rc-row + .rc-row { margin-top: 4px; }
  /* the value is the information and the label is repeated context, so under
     width pressure the LABEL ellipsizes and the value keeps its full text */
  .dock-roster-cap .rc-lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-dim); white-space: nowrap; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; }
  .dock-roster-cap .rc-val { font-size: 15px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-roster-cap .rc-warn { color: var(--orange); text-transform: uppercase; }

  /* 5. Picks owned — header (label + year select) over two rows reusing the
     status bay's 90px label column, so labels align across the two bays. */
  .dock-picks { flex: 1.29 1 0; min-width: 0; }
  .dock-picks-hd { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .dock-picks-hd .dock-picks-lbl { flex: none; }
  .dock-picks-body { margin-top: 7px; }
  /* same 90px as .rc-row above — the two bays' labels must align, so this is one
     number in two places and they are kept equal deliberately. The value column
     stays 1fr here (unlike .rc-row's max-content): the pick value carries the
     TOP-N PROTECTED annotation, which yields by ellipsis before the owner text
     per the documented order — max-content would make it unclippable. */
  .dock-picks-row { display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr);
    align-items: baseline; column-gap: 6px; }
  .dock-picks-row + .dock-picks-row { margin-top: 4px; }
  .dock-picks-rlbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-dim); white-space: nowrap; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; }
  .dock-picks-rval { font-size: 13px; color: var(--text); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-pick-sep { color: var(--text-dim); margin: 0 5px; }
  .dock-pick-empty { color: var(--text-dim); }
  /* The native control is never acceptable here — it paints OS chrome straight
     through the theme. appearance:none plus an explicit violet chevron. */
  .dock-picks-hd select { appearance: none; -webkit-appearance: none;
    background: #050c22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a044ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 9px 9px;
    color: var(--dim); border: 1px solid var(--violet); border-radius: 0;
    padding: 4px 22px 4px 8px; font-family: inherit; font-size: 11px; letter-spacing: .04em;
    line-height: 1.3; cursor: pointer; min-width: 0; flex: 0 0 auto;
    text-overflow: ellipsis; }
  .dock-picks-hd select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
  /* inline pill: line-height pinned so a protected pick cannot alter row height */
  .dock-pick-item .prot { display: inline-block; margin-left: 6px; padding: 0 4px;
    color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 70%, transparent);
    background: transparent; font-size: 9px; letter-spacing: .04em; line-height: 14px;
    text-transform: uppercase; white-space: nowrap; vertical-align: baseline; }

  /* 6. Actions — inline, never stacked, commit outermost (the bar's right edge).
     Explicitly BOUNDED, not content-sized: `flex: none` let this bay measure its
     own labels and it took 559px of a 1596px bar, starving Star Player down to
     116px of usable width. The commit button deliberately retains PixelArcade,
     whose glyphs are ~1em square, so "Start Franchise →" is genuinely ~290px
     at 13px. The bay gets a fixed basis and the buttons live inside it. */
  .dock-actions { flex: 0 0 var(--dock-actions-w, 452px); display: flex; flex-direction: row;
    align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
  .dock-actions button { white-space: nowrap; border-radius: 0; min-width: 0; }
  .dock-actions button.ghost { background: transparent; border: 1px solid var(--violet);
    color: var(--violet); font-size: 13px; padding: 14px 22px; }
  .dock-actions button.commit { background: var(--gold); color: var(--bg); border: none;
    font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .04em; padding: 16px 26px;
    box-shadow: 3px 3px 0 #3a2a05; }
  .dock-actions button.commit:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #3a2a05; }
  @media (prefers-reduced-motion: no-preference) {
    .dock-actions button, .dock-picks-hd select { transition: filter 100ms ease; }
    .dock-actions button:hover, .dock-picks-hd select:hover { filter: brightness(1.15); }
  }
  /* Compact desktop (1280-1440px). Structure is inherited unchanged — still one
     flex row of six bays in the same order, but with its OWN flex ratios (below)
     because the binding constraint differs by width. The fixed bays give back
     width (identity 326 -> 222, OVR 136 -> 82) and type steps down, so the
     three flexible bays keep enough room that values and CTAs never clip down
     to the 1280px support floor; labels and the longest star names yield. */
  @media (max-width: 1440px) {
    /* Compact desktop (1280-1440). Same six bays, same order, same yield order —
       only the scale changes. Measured: ~1424px of content wants ~1194px of bar at
       1280, so this step spends its budget on values and CTAs and lets the repeated
       labels ellipsize. See the block comment above for why zero truncation is not
       the target at this width. */
    .dock-row { padding: 12px 14px; }
    .dock-row > .dock-identity, .dock-row > .bigovr, .dock-row > .dstat,
    .dock-row > .dock-picks, .dock-row > .dock-actions { padding: 0 9px; }
    .dock-identity { flex-basis: 222px; gap: 8px; }
    .crest.dock-crest { width: 48px; height: 48px; border-width: 2px; font-size: 13px; }
    .dock-row .who .eyebrow { font-size: 10px; letter-spacing: .16em; margin-bottom: 3px; }
    .dock-row .who .nm { font-size: 17px; text-shadow: 2px 2px 0 var(--violet); }
    .dock-row .who .nm.mid { font-size: 15px; }
    .dock-row .who .nm.long { font-size: 13px; }
    .dock-row .who .sub { font-size: 10px; gap: 5px; margin-top: 5px; }
    .dock-row .who .badgerow .pill { font-size: 9px; padding: 1px 4px; }
    .dock-row .bigovr { flex-basis: 82px; gap: 4px; }
    .dock-row .bigovr .k { font-size: 9px; letter-spacing: .12em; }
    .dock-row .bigovr .n { font-size: 30px; }
    /* labels are the compressible half of every pair at this width */
    .dock-row .dstat > span, .dock-picks-lbl, .dock-picks-rlbl,
    .dock-roster-cap .rc-lbl { font-size: 9px; letter-spacing: .1em; }
    /* same value-column split as the base rules: status values are protected
       (max-content), pick values keep 1fr so the TOP-N annotation can yield */
    .dock-roster-cap .rc-row { grid-template-columns: minmax(0, 64px) max-content; column-gap: 5px; }
    .dock-picks-row { grid-template-columns: minmax(0, 64px) minmax(0, 1fr); column-gap: 5px; }
    .dock-star-player { gap: 4px; margin-top: 5px; }
    .dock-row .dock-star-player b { font-size: 13px; }
    .dock-star-player .sp-ovr { font-size: 11px; }
    .dock-star-player .sp-ovr-lbl { font-size: 9px; }
    .dock-star-contract { font-size: 10px; margin-top: 3px; }
    .dock-roster-cap .rc-val { font-size: 12px; }
    .dock-roster-cap .rc-row + .rc-row { margin-top: 3px; }
    .dock-picks-body { margin-top: 5px; }
    .dock-picks-row + .dock-picks-row { margin-top: 3px; }
    .dock-picks-rval { font-size: 11px; }
    .dock-pick-item .prot { font-size: 9px; margin-left: 4px; line-height: 12px; }
    .dock-picks-hd { gap: 6px; }
    .dock-picks-hd select { font-size: 10px; padding: 3px 18px 3px 6px; max-width: 116px;
      background-position: right 5px center; }
    /* the CTAs are the one thing that must never clip at any width */
    .dock-actions { --dock-actions-w: 328px; gap: 6px; }
    .dock-actions button.ghost { padding: 12px 10px; font-size: 10px; }
    .dock-actions button.commit { padding: 13px 10px; font-size: 10px; box-shadow: 2px 2px 0 #3a2a05; }
    /* Compact re-balances the three flexible bays differently from the wide step:
       at 1920 picks needs the most room (it carries a full-width control), but here
       the select is capped, and the binding constraint becomes Team Status, whose
       values ($222.3M, 2ND APRON) must never clip per this bar's yield order. */
    .dock-row .dstat.dock-roster-cap { flex: 1.15 1 0; }
    .dock-row .dstat.dock-star { flex: 1.25 1 0; }
    .dock-picks { flex: 1.2 1 0; }
    /* the bay's own eyebrow yields before the control it labels */
    .dock-picks-hd .dock-picks-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  }
  .save-rail { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    width: calc(100% - 56px); max-width: var(--tpick-stage); margin: clamp(6px, calc(6vh - 39px), 16px) auto 0; }
  .save-slot { min-width: 0; min-height: 96px; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    background: #050c22; border: 1px solid color-mix(in srgb, var(--violet) 54%, var(--border));
    box-shadow: inset 3px 0 0 var(--tc, var(--violet)), 3px 3px 0 rgba(0,0,0,.45); }
  /* Occupied slots borrow the old resume banner's cyan corner hardware, but stay
     compact enough to work as a three-cartridge bank instead of one oversized hero. */
  .save-slot.cartridge { position: relative; overflow: hidden;
    background: linear-gradient(105deg, color-mix(in srgb, var(--tc) 10%, #050c22) 0%, #050c22 42%, #07132f 100%); }
  .save-slot.cartridge::before, .save-slot.cartridge::after { content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none; }
  .save-slot.cartridge::before { top: -1px; left: -1px; border-top: 2px solid var(--violet); border-left: 2px solid var(--violet); }
  .save-slot.cartridge::after { right: -1px; bottom: -1px; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); }
  .save-slot.cartridge.is-latest { border-color: color-mix(in srgb, var(--cyan) 72%, var(--border));
    background: linear-gradient(105deg, color-mix(in srgb, var(--tc) 13%, #050c22) 0%, #050c22 40%, color-mix(in srgb, var(--accent) 9%, #07132f) 100%);
    box-shadow: inset 3px 0 0 var(--tc), 0 0 15px color-mix(in srgb, var(--cyan) 18%, transparent), 4px 4px 0 rgba(0,0,0,.5); }
  .save-slot.cartridge.is-latest::before { border-color: var(--cyan); }
  .save-slot.cartridge.is-latest::after { border-color: var(--cyan); }
  .save-slot.empty { justify-content: center; border-style: dashed; color: var(--dim); box-shadow: none; }
  .save-slot.unreadable { border-color: color-mix(in srgb, var(--bad) 60%, var(--border)); }
  .save-slot .slot-save-icon { display: block; flex: none; width: 22px; height: 26px; color: var(--cyan);
    filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 35%, transparent)); }
  .save-slot .slot-save-icon .disk-body { fill: #050c22; stroke: currentColor; }
  .save-slot .slot-save-icon .disk-label { fill: currentColor; }
  .save-slot .slot-save-icon .disk-window { fill: #050c22; stroke: currentColor; }
  .save-slot .slot-media { position: relative; flex: none; }
  .save-slot .slot-media .slot-save-icon { position: absolute; right: -6px; bottom: -5px; width: 17px; height: 20px;
    padding: 1px; background: #050c22; }
  .save-slot.empty .slot-save-icon { color: color-mix(in srgb, var(--violet) 68%, var(--dim)); }
  .save-slot.unreadable .slot-save-icon { color: var(--bad); }
  .save-slot .slot-no { flex: none; font: 700 9px/1 var(--display); color: var(--cyan); }
  .save-slot .slot-crest { flex: none; width: 42px; height: 42px; }
  .save-slot .slot-main { min-width: 0; flex: 1; }
  .save-slot .slot-kicker { display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
    color: var(--cyan); font: 700 7px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .save-slot .slot-kicker .slot-id { padding-right: 5px; border-right: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); }
  .save-slot .slot-kicker .latest-flag { margin-left: auto; color: #fff; font-style: normal; letter-spacing: .04em; }
  .save-slot .slot-main b, .save-slot .slot-empty { display: block; font: 700 11px/1.2 var(--display); text-transform: uppercase; }
  .save-slot .slot-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .save-slot.unreadable .slot-main span { display: block; margin-top: 4px; color: var(--dim); font-size: 9px; line-height: 1.25; }
  .save-slot .slot-meta { min-width: 0; margin-top: 5px; color: #a7bce5; font-size: 9px; line-height: 1.25; }
  .save-slot .slot-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .save-slot .slot-time { color: var(--dim); }
  .save-slot .recovered-flag { display: inline-block; margin-top: 3px; color: var(--orange); font-size: 8px; font-style: normal; text-transform: uppercase; }
  .save-slot .slot-actions { flex: none; width: 112px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .save-slot .slot-actions button { min-height: 27px; padding: 4px 6px; font-size: 8px; }
  .save-slot .slot-actions button.commit { grid-column: 1 / -1; grid-row: 1; min-height: 38px;
    background: linear-gradient(#4486ff, #176be8); color: #fff; border-color: var(--cyan);
    box-shadow: 2px 2px 0 rgba(0,0,0,.65), 0 0 10px color-mix(in srgb, var(--cyan) 20%, transparent); }
  .save-slot .slot-actions.confirming { width: 136px; }
  .save-slot .slot-actions.confirming button { min-height: 38px; }
  .save-rail-note { flex: none; width: calc(100% - 56px); max-width: var(--tpick-stage); margin: 6px auto 0;
    color: var(--dim); font-size: 10px; text-align: right; }
  @media (max-width: 1440px) {
    .save-slot { min-height: 82px; padding: 8px 9px; gap: 7px; }
    .save-slot .slot-crest { width: 34px; height: 34px; }
    .save-slot .slot-main b { font-size: 9px; }
    .save-slot .slot-actions { width: 94px; }
    .save-slot .slot-actions button { padding: 4px 5px; }
    .save-slot .slot-actions .compact-action { font-size: 0; width: 30px; padding: 0; }
    .save-slot .slot-actions .slot-export::after { content: "EX"; font-size: 8px; }
    .save-slot .slot-actions .slot-delete::after { content: "DEL"; font-size: 8px; }
  }
  @media (max-width: 760px) {
    .save-rail { width: calc(100% - 16px); display: flex; overflow-x: auto; gap: 7px; scrollbar-width: thin; }
    .save-slot { flex: 0 0 380px; min-height: 68px; }
    .save-slot.empty { flex-basis: 150px; }
    .save-slot .slot-crest { width: 34px; height: 34px; }
    .save-slot .slot-kicker { margin-bottom: 4px; font-size: 6px; }
    .save-slot .slot-kicker .latest-flag { display: none; }
    .save-slot .slot-meta { margin-top: 3px; font-size: 8px; }
    .save-slot .slot-time { display: none; }
    .save-slot .slot-actions, .save-slot .slot-actions.confirming { width: auto; display: flex; gap: 4px; }
    .save-slot .slot-actions button { min-height: 44px; }
    .save-slot .slot-actions .compact-action { width: 44px; min-width: 44px; }
    .save-slot .slot-actions button.commit { order: -1; min-width: 80px; min-height: 44px; }
    .save-slot .slot-actions.confirming button { min-width: 68px; }
    .save-rail-note { width: calc(100% - 16px); margin-top: 4px; text-align: left; font-size: 9px; }
  }
  @media (max-width: 760px) and (max-height: 450px) {
    .save-rail-note:not([data-bank-full="true"]) { display: none; }
  }
  /* list view: same data as the cards, one row per team, lives in the same scroller */
  .tlist table { width: 100%; font-size: 13px; } /* fills the stage like the card grid; no 980px cap */
  .tlist tr { cursor: pointer; }
  .tlist .crest.sm { width: 30px; height: 30px; font-size: 9px; border-width: 2px; box-shadow: none; }
  .tlist .tname { font-family: var(--display); font-size: 11px; text-transform: uppercase; }

  /* Inter body face (SIL OFL 1.1) is local, so the app makes no webfont request.
     Latin Extended keeps player names with diacritics in the same readable face. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  /* PixelArcade display face (Press Start 2P, OFL) embedded as a data-URI woff2 —
     no external request; headings and arcade emphasis use this family. */
@font-face { font-family: "PixelArcade"; font-display: swap; src: url(data:font/woff2;base64,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) format("woff2"); }
  /* ---- Neon Arcade — the product's one visual language (Modern Hub retired; see
     docs/DESIGN-LANGUAGE-SYSTEMS.md). Tokens live in :root above; everything below is
     the cabinet geometry and component styling that made the arcade concept work:
     stepped/clipped corners, CRT scanlines, offset drop-shadows, a pixel display face. ---- */
  #app {
    font-family: var(--body);
    min-height: 100vh; background-color: var(--canvas);
    background-image: none;
  }
  #app :is(h1, h2, h3, h4, h5, h6) { font-family: var(--display); }
  /* CRT scanlines: one low-opacity overlay across the whole surface, never per-text */
  #app::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
    background: var(--scanline); mix-blend-mode: overlay; opacity: .7; }
  button, input, select, textarea { font-family: inherit; }
  button { border-radius: 0; }
  button:active { transform: translate(2px, 2px); } /* the press is a physical shift */
  @media (prefers-reduced-motion: reduce) { button:active { transform: none; } }
  .tpick-top { background: var(--panel); }
  .brand .wm { font-family: var(--display); font-size: 15px; color: var(--cyan);
    text-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 70%, var(--bg)); }
  .brand .sub { color: var(--violet); letter-spacing: .18em; }
  .eyebrow { color: var(--cyan); }
  /* Picker headline matches the simplified logo: a flat, sharp pixel face with one
     consistent purple shadow depth and no soft glow. */
  .ttl h2 { font-family: var(--display); line-height: 1.02; letter-spacing: -.035em;
    word-spacing: -.12em; background: none; color: #f8fbff; -webkit-text-fill-color: #f8fbff;
    text-shadow: 1px 1px 0 var(--violet), 2px 2px 0 color-mix(in srgb, var(--violet) 62%, var(--bg)); }
  .tpick-seg button { background: transparent; color: var(--violet); border: 2px solid color-mix(in srgb, var(--violet) 60%, transparent);
    box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
  /* violet chassis frame — one framed stage around toolbar+grid (macro pass).
     Corner brackets are one of the four things this pass deliberately ornaments. */
  .tpick-chassis { position: relative; border-color: color-mix(in srgb, var(--violet) 50%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 22%, transparent), 4px 4px 0 rgba(0,0,0,.35); }
  .tpick-chassis::before, .tpick-chassis::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 1; }
  .tpick-chassis::before { top: -2px; left: -2px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); }
  .tpick-chassis::after { bottom: -2px; right: -2px; border-bottom: 3px solid var(--gold); border-right: 3px solid var(--gold); }
  .tpick-bar { border-bottom-color: color-mix(in srgb, var(--violet) 35%, transparent); }
  /* active-state glow (finishing pass #8) — the fourth and last thing this pass
     ornaments: conference tabs and the Grid/List toggle both use .tpick-seg */
  .tpick-seg button.on { background: var(--accent); color: #fff; border-color: var(--cyan);
    box-shadow: inset 0 0 0 1px var(--bg), 3px 3px 0 rgba(0,0,0,.55),
      0 0 10px color-mix(in srgb, var(--cyan) 40%, transparent); }
  .banner { border-radius: 0; border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
    background: var(--panel); box-shadow: 4px 4px 0 rgba(0,0,0,.45); } /* cyan = system/resume frame */
  .banner button { box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
  button.ghost { background: transparent; color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 65%, transparent); }
  button.ghost:disabled { color: var(--text-dim); border-color: color-mix(in srgb, var(--violet) 22%, transparent); background: transparent; opacity: .55; cursor: not-allowed; }
  /* destructive actions get the red frame (design-system Button "danger" variant) */
  button.danger { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 60%, transparent); }
  button.danger:hover { border-color: var(--bad); }
  /* NeonHub card anatomy: team-colored frame + faint team tint, circular crest LEFT,
     nickname + star beside it, OVR / status cartridge on the bottom row. --tc is the
     team's light brand color, set inline; the .on rule overrides border-color to gold. */
  /* 236px is the readable identity floor: 1280px drops to four columns rather
     than truncating long nicknames; wider desktops naturally add columns. */
  .tcard-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
  /* stepped chassis: bevel the TL + BR corners via clip-path; shadows/glows move to
     filter drop-shadow so they follow the notched silhouette (box-shadow would be
     clipped flat by clip-path). Interiors stay dark (macro pass #4, supersedes the
     45-55%-saturation call) — team color concentrates in the crest/border/glow
     instead of flooding the fill, so similar palettes don't collapse into mud. */
  /* card tint stepped back up slightly (finishing pass #7 — third pendulum swing:
     chrome pass 52/46% saturated -> macro pass 16/9% dark -> here 24/14%, still
     modest, and a tighter second stop (55% vs 80%) so the tint concentrates near
     the crest corner rather than washing the whole card; worst-collision
     palettes (Hawks/Heat/Blazers/Wizards, all red-leaning) stay distinct at
     this level — that distinctness is why macro pass darkened it in the first
     place, so this is deliberately short of a full return). */
  .tcard { border-radius: 0; overflow: visible; padding: clamp(8px, calc(3vh - 14px), 13px) 15px; gap: clamp(6px, calc(3.6vh - 21px), 12px);
    border: 2px solid color-mix(in srgb, var(--tc, var(--border-strong)) 78%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--tc1, var(--tc, var(--panel2))) 24%, var(--panel)) 0%,
      color-mix(in srgb, var(--tc, var(--panel2)) 14%, var(--panel)) 25%, var(--panel) 55%);
    clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
  .tcard:hover { border-color: var(--tc, var(--cyan));
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 7px color-mix(in srgb, var(--tc, var(--cyan)) 45%, transparent)); }
  /* gap tightened 12->9px (finishing pass #5) to free a few px for long names */
  .na-top { display: flex; align-items: center; gap: 9px; }
  /* circular crest, scaled up (macro pass #5 — supersedes the square-only call).
     The plate's own lettermark styling is still load-bearing: it's what the
     teamLogo() onerror fallback text inherits when a sprite is missing. */
  .crest { flex: none; width: clamp(42px, calc(9.6vh - 31px), 58px); height: clamp(42px, calc(9.6vh - 31px), 58px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 13px;
    color: #fff; background: color-mix(in srgb, var(--tc, var(--cyan)) 26%, var(--bg));
    border: 2px solid var(--tc, var(--cyan)); box-shadow: 0 0 8px color-mix(in srgb, var(--tc, var(--cyan)) 30%, transparent), inset 0 0 6px rgba(0,0,0,.5); text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
  /* sliced sprite-sheet logo art (teamLogo()) — contained within the circular backing
     plate. Smooth-scaled since the 2026-09-26 replacement sheet: the art is flat vector-
     style, not pixel art, so nearest-neighbour (pixelated) downscaling only jagged its
     edges. The Home matchup's pixel set (matchupLogo) stays pixelated. Falls back to the plain lettermark text (inherits .crest's own styling)
     when the image 404s, so the fallback needs no separate rule. Scale bumped and a
     dark rim added (finishing pass #6, "medallion unification") — the sliced art
     reads smoother/more detailed than the reference's chunky emblems and looked
     miniature/muddy against varied card tints; a bigger fill + a consistent dark
     outline (drop-shadow follows the PNG's alpha silhouette, so it works regardless
     of each logo's own edge treatment) makes all 30 read as one medallion set. */
  .crest-logo { width: 88%; height: 88%; object-fit: contain; image-rendering: auto;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.9)); }
  .crest.sm .crest-logo { width: 90%; height: 90%; }
  .crest.dock-crest .crest-logo { width: 84%; height: 84%; }
  .na-name { min-width: 0; flex: 1 1 auto; }
  .na-name .nick { font-family: var(--display); font-size: 15px; line-height: 1.2; color: var(--text); text-transform: uppercase;
    white-space: normal; min-height: 1.2em; }
  /* condensed step for long nicknames only (finishing pass #5) — "Timberwolves"/
     "Trail Blazers" are the two names in the league past the 10-char threshold;
     everything else keeps the full 15px treatment */
  .na-name .nick.nick-lg { font-size: 12px; letter-spacing: -.01em; }
  .na-name .star { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .na-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
  .na-ovr { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  /* concept: OVR numbers read big and white, not rating-colored */
  .na-ovr b { font-family: var(--display); font-size: 18px; margin-left: 5px; color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.55); }
  /* selection = corner-node frame + a brighter fill and a glowing crest/nickname —
     selection changes the card's energy, not just its border (macro pass #7) */
  /* stronger bloom (finishing pass #8 — ornament is selective: the selected card
     is one of only four things that get any, so it earns a bigger glow) */
  .tcard.on { position: relative; clip-path: none; border-width: 3px; border-color: var(--gold);
    background:
      linear-gradient(105deg, transparent 26%, color-mix(in srgb, var(--gold) 18%, transparent) 40%,
        color-mix(in srgb, #fff 30%, var(--gold)) 50%, color-mix(in srgb, var(--gold) 22%, transparent) 60%,
        transparent 74%) 180% 0 / 250% 100% no-repeat,
      linear-gradient(135deg, color-mix(in srgb, var(--gold) 26%, var(--panel)) 0%,
        color-mix(in srgb, var(--gold) 18%, var(--tc1, var(--tc, var(--panel)))) 48%,
        color-mix(in srgb, var(--gold) 30%, var(--panel)) 100%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent);
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 65%, transparent))
      drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 40%, transparent)); }
  @keyframes selected-card-shimmer {
    from { background-position: 180% 0, 0 0; }
    to { background-position: -80% 0, 0 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .tcard.on { animation: selected-card-shimmer 2.8s ease-in-out infinite; }
  }
  .tcard.on .crest { border-color: var(--gold);
    box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 0 6px rgba(0,0,0,.5); }
  .tcard.on .na-name .nick { color: var(--gold); text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent); }
  .tcard.on::before { content: ""; position: absolute; inset: -5px; pointer-events: none;
    background:
      linear-gradient(var(--gold), var(--gold)) 0 0 / 9px 9px no-repeat,
      linear-gradient(var(--gold), var(--gold)) 100% 0 / 9px 9px no-repeat,
      linear-gradient(var(--gold), var(--gold)) 0 100% / 9px 9px no-repeat,
      linear-gradient(var(--gold), var(--gold)) 100% 100% / 9px 9px no-repeat; }
  .pill { border-radius: 0; background: transparent; } /* status pills become outlined cartridges */
  .tchip { border-radius: 0; }
  /* The bar IS the selection: 1px amber keyline, square corners, and a restrained
     halo — the same vocabulary a selected team card uses, so the bar reads as
     "this is the team you picked" rather than as page furniture. That halo is the
     ONE blurred shadow in this component; everything else is a hard offset. */
  .tpick-dock { background: var(--bg-elev);
    border: 1px solid var(--gold); border-radius: 0;
    box-shadow: 0 0 16px rgba(255, 176, 0, .2); }
  /* four 8px amber corner sparks. One pseudo-element carrying four background
     layers rather than four elements — ornament stays out of the DOM and out of
     the accessibility tree. */
  .tpick-dock::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
      linear-gradient(var(--gold), var(--gold)) left  top    / 8px 8px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right top    / 8px 8px no-repeat,
      linear-gradient(var(--gold), var(--gold)) left  bottom / 8px 8px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right bottom / 8px 8px no-repeat; }
  button.commit { background: var(--gold); color: var(--bg); font-weight: 700; box-shadow: 3px 3px 0 rgba(0,0,0,.6); } /* amber = the commitment */
  .tpick-root { min-height: 100vh; background-color: var(--canvas); background-image: none; }
  /* toolbar controls as violet cartridges, matching the conference segment — offset
     shadow gives them the same chunky weight as the seg buttons/commit actions */
  .tpick-bar input[type="search"] { border-radius: 0; border-width: 2px; border-color: color-mix(in srgb, var(--violet) 55%, transparent);
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238795b5' stroke-width='2.25' stroke-linecap='square'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") no-repeat 14px center / 15px 15px;
    padding-left: 40px; font-weight: 600; letter-spacing: .03em;
    box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
  .tpick-bar input[type="search"]::placeholder {
    color: color-mix(in srgb, var(--text) 68%, var(--dim)); opacity: 1; }
  .tpick-bar input[type="search"]:focus { outline: none; border-color: var(--cyan); }
  .tpick-bar select { border-radius: 0; border-width: 2px; background: var(--panel);
    border-color: color-mix(in srgb, var(--violet) 55%, transparent); color: var(--text);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
  .tpick-bar select option { background: var(--panel); color: var(--text); }
  .tpick-bar .count { color: var(--cyan); font-family: var(--display); font-size: 12px; }
  .tpick-bar button.ghost { box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
  /* Import Save demoted (macro pass #8) — a utility, not a browsing control */
  .tpick-bar button.ghost.import { box-shadow: none; padding: 7px 12px; font-size: 11px;
    border-width: 1px; opacity: .75; }
  .tpick-bar button.ghost.import:hover { opacity: 1; }
  /* list view rows: team-color crest, gold selected row like the card grid */
  .tlist table { border: 1px solid var(--border); background: var(--panel); }
  .tlist tr.on td { background: color-mix(in srgb, var(--gold) 9%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
  .tlist tr:hover td { background: color-mix(in srgb, var(--cyan) 6%, transparent); }

  /* ---- app shell (sidebar + topbar): cyan structure, violet nav frame, blue+cyan
     active state, the skewed SIM button rebuilt as a stepped arcade slab ---- */
  .side { background: var(--panel); border-right: 1px solid color-mix(in srgb, var(--violet) 42%, var(--border)); }
  .side .brand { border-bottom: 1px solid; border-image: linear-gradient(90deg, color-mix(in srgb, var(--violet) 55%, transparent), var(--gold), color-mix(in srgb, var(--violet) 55%, transparent)) 1;
    background: radial-gradient(ellipse at 50% 65%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%); }
  .side-team { border-bottom: 2px solid; border-image: linear-gradient(90deg, color-mix(in srgb, var(--violet) 55%, transparent), var(--gold), color-mix(in srgb, var(--violet) 55%, transparent)) 1;
    background: radial-gradient(ellipse at 50% 65%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%); }
  .side-team-crest { border-color: color-mix(in srgb, var(--violet) 60%, var(--border)); }
  .side-team:hover { background: color-mix(in srgb, var(--violet) 10%, transparent); }
  .side-nav .grp { color: var(--violet); }
  .snav .no { color: var(--violet); }
  .snav:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--text); }
  .snav.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--cyan); }
  .snav.on::before { background: var(--cyan); } /* left accent bar → cyan */
  .snav.on .no { color: var(--cyan); }
  .side .me { border-top: 1px solid color-mix(in srgb, var(--violet) 42%, var(--border)); }
  .rail-toggle { border-bottom-color: color-mix(in srgb, var(--violet) 42%, var(--border)); }
  .side-rail .side-nav .grp { color: var(--gold); }
  .rnav .no { color: var(--violet); }
  .rnav:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
  .rnav:hover .no, .rnav:hover .rlbl { color: var(--text); }
  .rnav.on { background: color-mix(in srgb, var(--gold) 14%, transparent);
    border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
  .rnav.on .no, .rnav.on .rlbl { color: var(--gold); }
  .side-drawer { background: var(--panel);
    border-right-color: color-mix(in srgb, var(--violet) 42%, var(--border)); }
  .topbar { background: var(--panel); border-bottom: 1px solid color-mix(in srgb, var(--violet) 50%, transparent);
    box-shadow: 0 3px 0 -1px color-mix(in srgb, var(--violet) 22%, transparent); }
  .topbar .chip { border-radius: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
  .topbar .who .nm { font-family: var(--display); font-size: 13px; letter-spacing: .02em; }
  .topbar .season { color: var(--cyan); }
  .phase-pill { border-radius: 0; }
  /* the advance action IS the commitment — amber slab, angled ends (design-system sync).
     clip-path would flatten box-shadow, so the dark offset + glow ride drop-shadow filters */
  .sim { transform: none; border-radius: 0; background: var(--gold); color: #1a1200;
    border: 2px solid var(--gold); font-family: var(--display); font-size: 11px;
    box-shadow: none; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 55%, transparent)); }
  .sim > span { transform: none; }
  .sim:disabled { border-color: #3a4552; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6)); }
  /* Desktop topbar scale (DESIGN.md §44): larger team identity, the phase as unboxed
     display type, and a bigger SIM slab. The phone topbar (≤760px) is unchanged. */
  @media (min-width: 761px) {
    :root { --topbar-h: 76px; }
    /* One header row, then navigation and content. Grid follows the actual
       header height, including wrapping. The sidebar chassis stays flush to
       the window; the topbar's first item uses a comfortable 20px inset. */
    .app { --sidebar-width: 60px;
      /* Navigation uses the window's left edge while topbar content gets the
         same small inset as the sidebar links. Home fills the remaining canvas without nesting
         another centered, width-capped frame inside it. */
      position: relative; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr); }
    .col { display: contents; }
    .topbar { grid-area: 1 / 1 / 2 / -1; padding-inline: 20px 16px; padding-block: 11px; } /* 11px keeps the 52px identity plate inside the 76px bar */
    main.content { grid-area: 2 / 2 / 3 / 3; }
    .side-responsive { grid-area: 2 / 1 / 3 / 2;
      width: var(--sidebar-width); height: auto; min-height: 0; overflow: hidden; }
    .side-compact { height: 100%; }
    .app > .side-back, .app > .side-drawer { position: absolute; grid-area: 2 / 1 / 3 / -1;
      top: 0; bottom: 0; }
    .app > .side-drawer { left: 0; }
    .topbar { min-height: var(--topbar-h); }
    .rail-toggle, .side .brand { height: var(--topbar-h); }
    .topbar .topbar-team .who .nm, .topbar .topbar-team-spacer .who .nm { font-size: 22px; line-height: 1.05; }
    .topbar .topbar-team .who .mt, .topbar .topbar-team-spacer .who .mt { font-size: 13px; margin-top: 3px; }
    .topbar .phase-pill { font-size: 24px; line-height: 1; color: var(--text); background: none; border: 0; padding: 0; }
    .topbar .season { font-size: 17px; }
    .topbar .sim { font-size: 15px; padding: 12px 26px; }
  }
  /* Full navigation needs 232px while retaining a useful dashboard canvas.
     Narrower desktops use the rail; phones keep their bottom navigation. */
  @media (min-width: 1440px) {
    .app { --sidebar-width: 232px; }
    .topbar-team, .topbar-team-spacer { padding: 0 18px 0 10px; gap: 14px; }
    .topbar-record { padding-left: 16px; }
    .topbar-team .who .mt, .topbar-team-spacer .who .mt { letter-spacing: .24em; }
    .side-full { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
    .side-full .side-nav { flex: 1 0 auto; overflow: visible; }
    .side-full .capwidget, .side-full .me { flex-shrink: 0; }
    .side-compact, .app > .side-back, .app > .side-drawer { display: none; }
  }
  /* 1101-1180: the record would push the longest nicknames' topbar onto a second row. */
  @media (min-width: 761px) and (max-width: 1180px) { .topbar-record { display: none; } }
  /* Narrow desktop steps the scale down (measured against MIN, the longest nickname). */
  @media (min-width: 761px) and (max-width: 1300px) {
    .topbar .topbar-team .who .nm, .topbar .topbar-team-spacer .who .nm { font-size: 17px; }
    .topbar .topbar-team .who .mt, .topbar .topbar-team-spacer .who .mt { font-size: 12px; }
    .topbar-team, .topbar-team-spacer { gap: 8px; }
    .topbar .phase-pill { font-size: 18px; }
    .topbar .season { font-size: 14px; }
    .topbar .sim { font-size: 13px; padding: 12px 20px; }
  }
  @media (min-width: 761px) and (max-width: 1000px) {
    .topbar .topbar-team .who .nm, .topbar .topbar-team-spacer .who .nm { font-size: 13px; }
    .topbar .phase-pill { font-size: 14px; }
    .topbar .season { font-size: 13px; }
    .topbar .topbar-team .who .mt, .topbar .topbar-team-spacer .who .mt { margin-top: 1px; }
    .topbar-team, .topbar-team-spacer { padding-inline: 6px 10px; gap: 8px; }
    .topbar-team .who .mt, .topbar-team-spacer .who .mt { letter-spacing: .12em; }
    .topbar .sim { font-size: 11px; padding: 10px 16px; }
  }

  /* ---- content primitives (pageheads, panels, tables, forms) ---- */
  /* .ptitle is already pixel (var(--display)); add the arcade offset shadow */
  .ptitle { filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--violet) 55%, var(--bg))); }
  /* Borderless page titles: every screen matches Home and the Trade workspace — eyebrow,
     title and meta sit on the page, no framed box (was: cyan border, notched clip-path,
     franchise gradient, inset stripe, drop shadow, overlay). */
  .pagehead { position: relative; min-height: 0; margin: 0 0 16px; padding: 4px 0 8px; align-items: center; }
  .pagehead > * { position: relative; z-index: 1; }
  /* Desktop headers (DESIGN.md §42) use the phone recipe: pixel team-name eyebrow edged in
     --header-name-shade; title in both --header-title-shade layers, offsets scaled 2px -> 3px
     for the 28-38px titles; a team-shade divider. The phone block below re-sizes all of it. */
  .pagehead .eyebrow, .tw-heading .eyebrow { color: #f5f3ff; font: 800 12px/1.35 var(--display); letter-spacing: .02em;
    word-spacing: -.3em; text-wrap: balance; text-transform: uppercase; text-shadow: 2px 2px 0 var(--header-name-shade); }
  .pagehead .ptitle { color: #f7fbff; font-size: clamp(28px, 2.2vw, 38px);
    text-shadow: 3px 3px 0 var(--header-title-shade);
    filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--header-title-shade) 55%, var(--bg))); }
  /* after the desktop Home rule's `border: 0` (same specificity, later wins) */
  .pagehead, .home-screen .pagehead, .tw-heading { border-bottom: 1px solid var(--header-title-shade); }
  .pagehead .metae { padding: 7px 10px;
    border-left: 1px solid color-mix(in srgb, var(--violet) 42%, var(--border));
    background: color-mix(in srgb, var(--violet) 4%, transparent); }
  .panel { border-radius: 0; border-color: color-mix(in srgb, var(--violet) 48%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 5%, var(--panel)), var(--panel));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cyan) 82%, transparent),
      inset 0 0 20px rgba(0,0,0,.12), 4px 4px 0 rgba(0,0,0,.5); }
  /* motion-trail divider — CSS recreation of MotionTrailDivider.png (brand chrome, not interactive) */
  .brand-divider { position: relative; height: 20px; margin: 12px 0; pointer-events: none; }
  .brand-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0;
    height: 2px; transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0 18%, var(--violet) 28% 43%, var(--gold) 44% 45%, var(--cyan) 48% 72%, transparent 88%); }
  .brand-divider::after { content: ""; position: absolute; width: 7px; height: 7px;
    top: 50%; left: 44.5%; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold);
    box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 50%, transparent); }
  .panel h2 { font-size: 13px; } /* pixel section headers read heavy at 17px — trim */
  .panel > h2:first-child { margin: -14px -14px 12px; min-height: 36px; padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--violet) 48%, var(--border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 15%, var(--panel2)), color-mix(in srgb, var(--cyan) 5%, var(--panel)));
    color: var(--text); }
  th { color: var(--cyan); border-bottom-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); }
  td { border-bottom-color: color-mix(in srgb, var(--violet) 20%, var(--border)); }
  table tr:nth-child(even) td { background: color-mix(in srgb, var(--violet) 3%, transparent); }
  tr.user-row { background: color-mix(in srgb, var(--cyan) 12%, transparent); box-shadow: inset 3px 0 0 var(--cyan); }
  main table tr:hover td { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
  :is(select, input[type=number], input[type=text], input[type=search]) { border-radius: 0;
    background-color: color-mix(in srgb, var(--violet) 5%, var(--panel2));
    border-color: color-mix(in srgb, var(--violet) 62%, var(--border));
    box-shadow: 2px 2px 0 rgba(0,0,0,.38); }
  /* cyan focus keyline */
  select:focus, input[type=number]:focus, .snav:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

  @media (max-width: 760px) {
    .pagehead { margin-bottom: 12px; padding: 4px 0 12px; gap: 10px; border-bottom: 1px solid #66339a; } /* the phone Home/Roster/Trade keyline */
    /* Header standard (DESIGN.md §40): every phone page title and eyebrow match Roster's */
    .pagehead .eyebrow { margin: 0 0 3px; } /* type comes from the shared phone name/eyebrow rule below */
    .pagehead .metae { padding: 5px 7px; border-left: 0; background: transparent; }
  }

  /* ---- bespoke components (OVR badge, meters, player-card modal, cap bar, trade
     legality, playoff series/champion, quicklinks) ---- */
  .ovr-badge { border-radius: 0; }
  .meter, .meter > i { border-radius: 0; }
  .pcard { border-radius: 0; border-width: 2px; border-color: color-mix(in srgb, var(--cyan) 72%, var(--border));
    box-shadow: 8px 8px 0 rgba(0,0,0,.7), 0 0 12px color-mix(in srgb, var(--cyan) 24%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--cyan) 22%, transparent); }
  .pcard-hd { border-bottom-color: color-mix(in srgb, var(--violet) 30%, var(--border)); }
  .tlegal { border-radius: 0; }
  .capbar, .capbar-fill, .capbar-legend i { border-radius: 0; }
  .capbar { border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); }
  .po-card { box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
  .qlink { border-radius: 0; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
  .qlink:hover { border-color: var(--cyan); }
  .qlink:hover .go { color: var(--cyan); }

  /* Half-screen step (#56): a 1080p/1440p window split in half lands at ~960–1280px,
     right at or under the ≥1280 support floor, where the 232px sidebar eats a quarter of
     the width. Give the chrome back to the content rather than restructuring anything. */
  @media (max-width: 1100px) {
    .side .brand { padding: 12px 18px; }
    .side-team { padding: 14px 10px 13px; gap: 8px; }
    .side-team-crest { width: 36px; height: 36px; }
    .side-team-name { font-size: 12px; }
    .side-team-detail { font-size: 10px; }
    .side-drawer { width: 184px; }
    .topbar { padding: 12px 16px 12px 20px; padding-block: 11px; gap: 10px; flex-wrap: wrap; }
    .topbar-progress .progress-meter { display: none; } /* label survives, the bar yields */
    .topbar-record { display: none; }
    .topbar-clock { flex: 1 1 auto; min-width: 0; }
    main.content { padding: 16px 16px 40px; }
  }

  /* ---- Phone shell (D28, docs/plans/2026-07-29-mobile-v1-plan.md): ≤760px = phone/
     stacked shell, ≤520px = narrow phone. The sidebar dies at phone width — a bottom
     nav (fixed Home/Roster/Trade + a phase-driven slot + a More bottom sheet) replaces
     it, the topbar slims to phase pill + SIM, and main.content keeps the one-scroller
     contract (#21). Chrome stays ≈ ≤170px so the game holds ≥60% of every gated height
     (390×844/700/400) — enforced by the smoke driver's content-share floor. */
  /* market-row lists (FA pool, Re-Sign) — div composition with a table look on desktop
     (D28/plan §3.4): one markup, two layouts. --mcols carries each list's column recipe. */
  .mlist { font-size: 14px; }
  .m-hd, .mrow { display: grid; grid-template-columns: var(--mcols); gap: 10px; align-items: center;
    padding: 6px 10px; border-bottom: 1px solid var(--border); }
  .m-hd { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .mcell.num, .m-hd .num { text-align: right; }
  .mcell .cl { display: none; } /* per-cell label, phone only */
  .mcell-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .fa-list { --mcols: minmax(220px, 1.4fr) 50px 52px 52px 52px 60px minmax(200px, 1.2fr) minmax(430px, 2.2fr); }
  .fa-list :is(.m-hd, .mrow) { column-gap: 16px; }
  .fa-list .mrow > :nth-child(7) { text-align: center; }
  .fa-offer-head, .fa-offer-cell { display: grid; grid-template-columns: minmax(0, 1fr) 110px;
    align-items: center; column-gap: 16px; }
  .fa-offer-head > span, .fa-offer-copy, .fa-offer-fields { grid-column: 1; justify-self: center; }
  .fa-offer-cell { width: 100%; min-width: 0; }
  .fa-offer-copy { min-width: 0; text-align: center; }
  .fa-offer-fields, .fa-offer-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .fa-offer-actions { grid-column: 2; justify-self: end; justify-content: flex-end; }
  .fa-market-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
  .fa-market-head h2 { margin-bottom: 0; }
  .fa-market-head > .ghost { margin-left: auto; }
  .fa-market-stage { position: relative; }
  .fa-market-sticky { position: sticky; top: 0; z-index: 20; padding-top: 2px; background: var(--bg);
    box-shadow: 0 10px 18px -16px rgba(0,0,0,.95); }
  .fa-market-sticky::before { content: ""; position: absolute; inset: -32px 0 auto; height: 32px;
    background: var(--bg); }
  .fa-market-sticky .pagehead { margin-bottom: 8px; }
  .fa-market-chrome { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; box-shadow: none; }
  .fa-market-body { padding-top: 0; border-top: 0; }
  .fa-market-sticky .hero-panel { min-height: 104px; height: 104px; margin-bottom: 6px; }
  .fa-market-sticky .hero-watermark { width: 122px; height: 122px; }
  .fa-market-sticky .hero-id { padding-block: 10px; }
  .fa-market-sticky .hero-nm { margin-top: 5px; font-size: 18px; }
  .fa-market-sticky .ovr-badge.hero-ovr { width: 54px; height: 54px; }
  .fa-market-sticky .ovr-badge.hero-ovr .n { font-size: 27px; }
  .fa-market-sticky .hero-facts { padding-block: 8px; }
  .fa-market-sticky :is(.hero-meta, .hero-stats) { margin-top: 4px; }
  .fa-market-sticky .hero-chips { margin-top: 4px; }
  .fa-market-sticky .hero-arc { margin-block: 6px; padding-block: 8px; }
  .fa-offer-note { margin: 0 0 6px; padding: 7px 10px; color: var(--dim); font-size: 12px;
    line-height: 1.45; border-left: 2px solid var(--cyan); background: color-mix(in srgb, var(--cyan) 6%, transparent); }
  .fa-offer-note b { color: var(--text); }
  .fa-offer-note-player { color: var(--dim); }
  .fa-offer-note.warn { color: var(--text); border-left-color: var(--orange);
    background: color-mix(in srgb, var(--orange) 8%, transparent); }
  .fa-market-sticky .m-hd { background: var(--panel); }
  .fa-list .m-hd .fa-col-head { text-align: center; }
  .fa-page-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
    color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
  .fa-page-meta-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
  .fa-page-meta-row:first-child { font-size: 12px; }
  .fa-page-meta-row span + span::before { content: "·"; margin-right: 7px; color: var(--border-strong); }
  .fa-page-meta b { color: var(--text); }
  .fa-page-meta .fa-offers-left { color: var(--cyan); }
  .fa-page-meta .warn { color: var(--orange); font-weight: 700; }
  .fa-market-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
  .fa-market-tools > :is(label, span) { color: var(--dim); font-size: 13px; }
  .fa-sim-note { margin-left: auto; }
  .resign-list { --mcols: minmax(150px, 1.5fr) 34px 40px 40px 62px 62px 62px minmax(300px, 2.3fr); }
  .rookie-list { --mcols: minmax(170px, 1.5fr) 54px 60px 78px 60px 88px 88px minmax(240px, 1.25fr); }
  .rookie-list button.pname { padding: 0; color: inherit; background: transparent; border-radius: 0;
    font: inherit; letter-spacing: inherit; text-transform: none; }
  .rookie-list .mcell-act { justify-content: flex-end; gap: 12px; padding-right: 10px; }
  .rookie-pagehead { justify-content: flex-start; align-items: baseline; flex-wrap: nowrap; }
  .rookie-pagehead .ptitle { flex: none; white-space: nowrap; }
  .rookie-instruction { margin: 0; color: var(--dim); font-size: 13px; }
  .rookie-panel-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin-bottom: 10px; }
  .rookie-panel-head h2 { margin-bottom: 0; }
  .rookie-unsigned { flex: none; color: var(--dim); font-size: 13px; }
  .rookie-unsigned b { color: var(--text); }
  .option-list { --mcols: minmax(150px, 1.5fr) 34px 40px 40px 62px minmax(200px, 1.5fr); }
  .qo-list { --mcols: minmax(150px, 1.5fr) 34px 40px 40px 62px minmax(200px, 1.5fr); }
  .fa-summary-list { --mcols: minmax(150px, 1.5fr) 34px 40px minmax(120px, 1fr) auto minmax(180px, 1.2fr); }
  /* Inline hero panel (#241, docs/plans/issues/ISSUE-241.md) — the quick-evaluate
     layer between a bare list row and the deep-detail overlay card, sitting above
     the table on six list screens. Team-tinted (teamGrad) with a faint crest
     watermark, the same recipe as the Home matchup card's .nextup .matchup-watermark
     (D24/D34). Hard budget: ~130px tall, no second scroll container (#21 contract) —
     this is a flex row, not a grid with its own scroller. Hidden entirely ≤760px
     (the overlay card is the phone detail view, D28). */
  .hero-panel { position: relative; isolation: isolate; min-height: 118px; max-height: 130px; margin-bottom: 14px;
    overflow: hidden; display: grid; grid-template-columns: minmax(210px, 1.25fr) 74px minmax(250px, 1.35fr) minmax(190px, .9fr);
    align-items: stretch; border: 1px solid color-mix(in srgb, var(--hero-b) 66%, var(--border)); border-radius: 0;
    background: linear-gradient(118deg, color-mix(in srgb, var(--hero-a) 58%, var(--bg-elev)) 0 25%, var(--panel2) 52%, var(--panel) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hero-b) 24%, transparent), 4px 4px 0 rgba(0,0,0,.34); }
  .hero-panel::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, var(--hero-a), var(--hero-b), transparent 82%); }
  /* Draft reuses the shared featured-player chassis, but only with information
     already exposed by scoutReport. The compact three-column variant keeps the
     board and its first actions above the fold. */
  /* Prospect view: the selected prospect's fogged scouting report above the board */
  .prospect-view { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(210px, 1fr);
    grid-template-areas: "id id" "skills notes" "act act"; gap: 10px 16px; margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, #24385d 55%, var(--panel)), var(--panel)); }
  .prospect-view .pv-id { grid-area: id; display: flex; align-items: center; gap: 14px; min-width: 0; }
  .pv-face { width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid var(--border); background: var(--panel2); overflow: hidden; }
  .pv-face img, .pv-face svg { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
  .pv-who { min-width: 0; flex: 1 1 auto; }
  .prospect-view .hero-nm { font-family: var(--display); font-size: clamp(16px, 1.35vw, 21px); white-space: nowrap; }
  .pv-meta { color: var(--dim); font-size: 12px; margin-top: 2px; }
  .pv-rates { display: flex; gap: 18px; flex: 0 0 auto; }
  .pv-rate { display: grid; justify-items: center; }
  .pv-rate b { font-family: var(--display); font-size: 20px; color: var(--cyan); white-space: nowrap; }
  .pv-rate.pot b { color: var(--gold); }
  .pv-rate.grade b { color: var(--text); }
  .pv-rate small { color: var(--dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
  .pv-skills { grid-area: skills; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; align-content: start; }
  .pv-skill { display: grid; grid-template-columns: 86px minmax(40px, 1fr) 46px; align-items: center; gap: 8px; font-size: 12px; }
  .pv-lbl { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-track { position: relative; height: 6px; background: color-mix(in srgb, var(--border) 70%, transparent); }
  .pv-track i { position: absolute; top: 0; bottom: 0; }
  .pv-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pv-notes { grid-area: notes; display: grid; gap: 6px; align-content: start; font-size: 12px; min-width: 0; }
  .pv-notes h4 { margin: 0 0 3px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
  .pv-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border: 1px solid var(--border); white-space: nowrap; }
  .pv-chip.up { border-color: color-mix(in srgb, var(--good) 60%, var(--border)); color: var(--good); }
  .pv-chip.down { border-color: color-mix(in srgb, var(--bad) 60%, var(--border)); color: var(--bad); }
  .pv-none, .pv-fog { color: var(--dim); }
  .pv-need { color: var(--gold); }
  .prospect-view .pv-actions { grid-area: act; display: flex; justify-content: flex-end; gap: 8px; }
  .prospect-view .pv-actions:empty { display: none; }
  .prospect-view-card .pv-skills { grid-template-columns: 1fr; margin-bottom: 10px; }
  .draft-board .hero-panel.scout-hero { min-height: 104px; height: auto; max-height: none;
    grid-template-columns: minmax(260px, 1.45fr) 104px minmax(250px, 1.3fr); margin: 8px 0; }
  .draft-board .scout-hero .hero-nm { overflow: visible; font-size: clamp(16px, 1.35vw, 21px);
    line-height: 1.05; text-overflow: clip; white-space: normal; }
  .draft-board .scout-hero .ovr-badge.hero-ovr { width: 94px; }
  .draft-board .scout-hero .ovr-badge.hero-ovr .n { font-size: 20px; white-space: nowrap; }
  .draft-board .scout-hero .hero-facts { border-left: 1px solid color-mix(in srgb, var(--violet) 26%, var(--border)); }
  .hero-watermark { position: absolute; left: 58px; top: 50%; width: 150px; height: 150px; z-index: -1;
    display: grid; place-items: center; transform: translate(-50%, -50%); opacity: .075;
    filter: grayscale(1) contrast(1.35); pointer-events: none; }
  .hero-watermark .crest-logo { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
  .hero-id { min-width: 0; padding: 16px 14px 14px 20px; display: flex; flex-direction: column; justify-content: center; }
  .hero-toprow { display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--hero-b) 74%, white);
    font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  .hero-pos-chip { padding: 2px 5px; border: 1px solid currentColor; background: rgba(4,10,22,.58); }
  .hero-team-abbr { color: inherit; }
  .hero-nm { margin-top: 7px; overflow: hidden; color: var(--text); font: 800 clamp(18px, 1.7vw, 24px)/1 var(--display);
    letter-spacing: .02em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 2px 2px 0 rgba(0,0,0,.72); }
  .hero-panel .ovr-badge.hero-ovr { align-self: center; justify-self: center; width: 62px; height: 62px;
    color: var(--hero-rating); border: 0; }
  .hero-panel .ovr-badge.hero-ovr .n { color: var(--hero-rating); font-size: 32px; }
  .hero-facts { min-width: 0; padding: 13px 14px; display: flex; flex-direction: column; justify-content: center; }
  .hero-ratings, .hero-meta, .hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .hero-ratings { font-size: 13px; }
  .hero-ratings > span { display: inline-flex; align-items: baseline; gap: 4px; }
  .hero-ratings b { font-family: var(--display); font-variant-numeric: tabular-nums; }
  .hero-meta { margin-top: 7px; color: var(--dim); font-size: 11px; }
  .hero-stats { margin-top: 7px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
  .hero-stats b { color: var(--text); font-family: var(--display); font-size: 13px; }
  .hero-chips { margin-top: 6px; max-height: 22px; overflow: hidden; }
  .hero-arc { align-self: stretch; min-width: 0; margin: 10px; padding: 11px 12px; display: flex; flex-direction: column;
    justify-content: center; border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--border));
    background: color-mix(in srgb, var(--hero-a) 16%, rgba(4,10,22,.86)); box-shadow: inset 3px 0 0 var(--gold); }
  .hero-arc-label { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  .hero-arc-name { margin-top: 5px; font: 800 14px/1.15 var(--display); text-transform: uppercase; }
  .hero-arc-skills { margin-top: 7px; color: var(--dim); font-size: 10px; line-height: 1.35;
    letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Selected-row treatment: a quiet accent edge, distinct from tr.user-row's cyan
     "this is your team" marker used on Standings — hero selection is a browsing
     state, not an identity fact, so it stays subdued and must not fight the
     Roster table's existing hover/injury/IR row treatments. */
  tr.hero-row, .mrow.hero-row { cursor: pointer; }
  tr.hero-row.hero-sel, .mrow.hero-row.hero-sel { background: color-mix(in srgb, var(--violet) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--violet); }
  tr.hero-row:hover:not(.hero-sel), .mrow.hero-row:hover:not(.hero-sel) { background: color-mix(in srgb, var(--violet) 5%, transparent); }
  .bnav { display: none; }
  .save-nudge { display: none; }
  .capbar-vals { display: none; }
  .scout-mobile-meta { display: none; }
  @media (min-width: 761px) {
    .sheet, .sheet-back { display: none; } /* resize with the sheet open can't strand it on desktop */
    .rookie-list .m-hd, .rookie-list .mrow { column-gap: 16px; }
    .rookie-list :is(.m-hd, .mrow) > :nth-child(7) { padding-left: 24px; }
  }
  @media (min-width: 761px) and (max-width: 1400px) {
    .fa-list { --mcols: minmax(140px, 1.2fr) 36px 40px 40px 40px 48px minmax(120px, 1fr) minmax(280px, 1.8fr); }
    .fa-list :is(.m-hd, .mrow) { column-gap: 8px; }
    .fa-offer-head, .fa-offer-cell { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 8px; }
  }
  @media (min-width: 761px) and (max-width: 1200px) {
    .rookie-list { --mcols: minmax(140px, 1fr) 42px 46px 70px 46px 74px 68px minmax(160px, auto); }
    .rookie-list .m-hd, .rookie-list .mrow { column-gap: 8px; }
    .rookie-list :is(.m-hd, .mrow) > :nth-child(7) { padding-left: 16px; }
    .rookie-list .mcell-act { gap: 8px; padding-right: 0; }
    .hero-panel { grid-template-columns: minmax(180px, 1fr) 64px minmax(220px, 1.2fr) minmax(160px, .8fr); }
    .hero-id { padding-left: 14px; }
    .hero-facts { padding-inline: 10px; }
    .hero-ratings, .hero-meta, .hero-stats { gap: 5px 8px; }
  }
  @media (max-width: 760px) {
    .pagehead .ptitle,
    .home-mobile-identity strong,
    .roster-mobile-heading h1 { font: 700 clamp(17px, 5.4vw, 24px)/1.15 var(--display); color: #fff;
      text-transform: uppercase; text-shadow: 2px 2px 0 var(--header-title-shade);
      filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--header-title-shade) 55%, var(--bg))); }
    .pagehead .ptitle, .home-mobile-identity strong { letter-spacing: .02em; }
    .home-mobile-identity strong, .roster-mobile-heading h1 { overflow-wrap: anywhere; }
    .home-mobile-identity small,
    .roster-mobile-heading .eyebrow,
    .pagehead .eyebrow { color: #f5f3ff; font: 800 12px/1.35 var(--display); letter-spacing: .02em;
      word-spacing: -.3em; text-wrap: balance; /* PixelArcade's space is a full cell wide and L/T start 1/8 cell in */
      text-transform: uppercase; text-shadow: 2px 2px 0 var(--header-name-shade); }
    /* The overlay card is the phone detail view (D28) — a slim duplicate bar
       would spend the phone's scarcest resource (vertical space) on
       redundancy. Row-click stays wired (harmless: selection changes but
       nothing visible), per the plan — no phone-only handler suppression. */
    .hero-panel, .prospect-view { display: none; } /* the prospect card is the phone detail view */
    .overlay:has(.pcard-detail) { padding: 0; }
    .pcard.pcard-detail { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
    .pcard-detail .pcard-offer input, .pcard-detail .pcard-offer select { min-height: 44px; }
    /* Keep the outer document out of the phone scroll chain. Content, picker,
       and dialogs retain their own scrollers; nav-origin drags must not pan the
       entire shell. Real iPhone viewport behavior still requires a device check. */
    html { height: 100%; overflow: hidden; overscroll-behavior: none; }
    body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden;
      overscroll-behavior: none; }
    /* The nav owns a real grid row below the content, without covering it. */
    .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
      --bnav-item: 44px; }
    .side { display: none; }
    .side-back, .side-drawer { display: none !important; }
    .col { grid-row: 1; }
    /* The fixed-height item zone stops labels re-centering when mobile Chrome
       recalculates 100dvh; the safe-area inset only adds space below. */
    .bnav { display: grid; position: static; grid-row: 2; z-index: 100;
      touch-action: pinch-zoom;
      grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
      background: var(--panel); border-top: 1px solid color-mix(in srgb, var(--violet) 50%, transparent);
      box-shadow: 0 -3px 0 -1px color-mix(in srgb, var(--violet) 22%, transparent);
      padding: 2px 4px calc(2px + env(safe-area-inset-bottom)); }
    .bnav .snav { display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2px; width: auto; height: var(--bnav-item); min-height: var(--bnav-item); padding: 4px 2px; border: none; border-radius: 0;
      font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; }
    .bnav-icon { min-height: 14px; color: currentColor; font: 700 14px/1 var(--display); letter-spacing: 0; }
    .bnav .snav.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--cyan);
      border: none; box-shadow: inset 0 2px 0 var(--cyan); }
    .bnav .snav.on::before { display: none; }
    .bnav-dot { position: absolute; top: 5px; right: 16%; width: 8px; height: 8px; border-radius: 50%;
      background: var(--gold); box-shadow: 0 0 6px var(--gold); } /* pending trade offer */
    /* slim topbar: phase pill + week/day detail + SIM only, sized to hold one row at 390px */
    .topbar { min-height: 56px; height: 56px; padding: 6px 10px; gap: 8px; position: relative; overflow: visible; }
    .topbar-team, .topbar-export, .topbar .sep, .topbar .spacer, .topbar .season:not(.phase-detail), .topbar .notice.gold { display: none; }
    .championship-badge-topbar { display: none; }
    .championship-badge-sheet { min-height: 0; padding: 4px 12px 4px 4px; justify-content: center; }
    .championship-badge-sheet img { width: 26px; height: 26px; }
    /* the desktop clock block stacks and hugs the right edge; at 390px it unstacks
       back into the one-row pill + week/day run the slim topbar was sized for */
    .topbar-clock { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
    .clock-meta { min-width: 0; flex-wrap: nowrap !important; }
    .phase-pill { min-width: 0; max-width: none; flex: 0 1 auto; overflow: visible; white-space: nowrap;
      font-size: clamp(9px, 3vw, 13px); padding-inline: clamp(6px, 2vw, 10px); }
    .phase-pill .phase-full { display: none; }
    .phase-pill .phase-mobile { display: inline; }
    /* Keep the compact progress counter in the phone chrome. It does not shrink, so
       Week N/M and the postseason round remain complete while the phase pill yields. */
    .season.phase-detail { display: inline-flex; flex: 0 0 auto; white-space: nowrap;
      font-size: clamp(10px, 2.8vw, 12px); }
    /* The transient "Saving…" status has no room in the phone bar: beside the playoff
       Calendar hint it wrapped the SIM button onto a second row under the pagehead,
       so a tap mid-save missed. Only a save failure shows on the phone (below). */
    .topbar #save-status:not(.bad) { display: none; }
    /* A save failure must not change the 56px shell height or disappear inside it. */
    .topbar .notice.bad { display: block; position: absolute; top: 100%; left: 12px; right: 12px; z-index: 110;
      padding: 8px 10px; white-space: normal; overflow-wrap: anywhere; background: var(--panel);
      border: 1px solid var(--bad); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
    .sim { flex: 0 0 auto; min-height: 44px; max-width: 174px; padding: 8px 12px; overflow: hidden;
      font: 700 10px/1.15 var(--body); text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
    .playoff-day-hint { min-width: 72px; min-height: 44px; padding: 4px 8px; overflow: hidden;
      white-space: nowrap; font: 600 11px/1.2 var(--body); } /* 11px: the phone type floor */
    .playoff-day-hint .hint-full { display: none; }
    .playoff-day-hint .hint-short { display: inline; }
    .sim.resolve { color: #130b02; background: var(--orange); }
    .topbar:has(.mobile-global-action) > .sim:not(.mobile-global-action) { display: none; }
    .topbar > .mobile-global-action { display: inline-flex; }
    .topbar-progress { display: none; }          /* the clock's week/round/day counter is the phone's progress */
    .topbar-side { display: contents; }          /* save-error notice positions against .topbar, as before */
    .clock-meta .clock-dot { display: none; }
    .topbar-clock .clock-meta { flex-direction: row; align-items: center; }
    .home-desk { display: none; }
    .home-phone { display: contents; }           /* its children keep the phone board's flex ordering */
    /* Home has no shell-specific dimensions here: the shared 56px topbar and 44px
       SIM target above are the phone safeguards for every tab. */
    .home-screen .kpi .val { min-width: 0; max-width: 100%; overflow-wrap: anywhere;
      font-size: clamp(14px, 4.4vw, 18px); }
    main.content { padding: 12px;
      overscroll-behavior-y: none; }
    .home-screen { display: flex; flex-direction: column; gap: 12px; }
    .home-screen :is(.home-dash, .home-main, .home-rail, .hrow) { display: contents; }
    .home-screen .nextup { order: 4; }
    .home-next-preview { order: 1; width: 100%; min-width: 0; display: block; padding: 3px;
      border: 1px solid var(--violet); background: var(--panel); box-shadow: inset 0 0 0 2px #18143a; }
    .home-priorities-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 9px 8px; border-bottom: 1px solid #573182; }
    .home-priorities-head b { color: var(--pink); font: 700 clamp(10px, 3vw, 13px)/1.3 var(--display); }
    .home-priorities-head b::before { content: ""; display: inline-block; width: 3px; height: 11px; background: var(--cyan); margin-right: 7px; }
    .home-priorities-head small { color: var(--cyan); white-space: nowrap; font: 600 9px/1.2 var(--body); }
    .home-priority { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
      padding: 10px 9px; border: 0; border-bottom: 1px solid #292452; background: transparent;
      text-align: left; color: var(--text); font: 400 12px/1.4 var(--body); text-transform: none; letter-spacing: 0; }
    .home-priority:last-child { border-bottom: 0; }
    .home-priority span { flex: 1; min-width: 0; }
    .home-priority i { color: var(--cyan); font-style: normal; font-size: 18px; }
    .home-priority::before { content: ""; width: 12px; height: 12px; flex: none; border: 1px solid var(--cyan); }
    .home-screen .hrow1 > .dash-panel:not(.nextup) { order: 5; }
    .home-summary { display: contents; }
    .home-summary .kpirow { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .home-summary .kpi { border: 1px solid #66339a; min-height: 88px; padding: 10px 12px; background: var(--panel); }
    .home-summary .kpi .lbl { color: var(--cyan); }
    .home-summary .kpi .val { font-size: 23px; margin-top: 7px; }
    /* "-$145.9M" must stay one line in a half-width tile (the generic rule above lets it break anywhere) */
    .home-summary .kpi .val.cap-val { font-size: clamp(15px, 4.6vw, 23px); white-space: nowrap; overflow-wrap: normal; }
    .home-summary .kpi .sub { font-size: 11px; }
    .home-summary .owner-note { order: 3; border: 0; border-left: 2px solid var(--gold); padding: 8px 10px; min-height: 0; }
    .home-summary .owner-note h2 { margin: 0; padding: 0; border: 0; background: none; white-space: normal; }
    .home-screen .pagehead { border: 0; clip-path: none; box-shadow: none; background: none;
      padding: 4px 0 12px; min-height: 88px; border-bottom: 1px solid #66339a; }
    .home-screen .pagehead::after { display: none; }
    .home-screen .pagehead > div:first-child { display: none; }
    .home-screen .pagehead .home-mobile-identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
    .home-mobile-identity .home-emblem { width: 62px; height: 62px; }
    .home-mobile-identity > span:not(.home-emblem) { flex: 1 1 auto; min-width: 0; } /* fill the copy row without stretching the circular badge */
    .home-mobile-identity small { display: block; margin: 0 0 5px; } /* the picker dock's team-name style */
    .home-screen .home-mobile-identity strong { display: block;
      text-shadow: 1px 1px 0 var(--header-name-shade), 2px 2px 0 var(--header-name-shade),
        3px 3px 0 var(--header-title-shade), 5px 5px 0 color-mix(in srgb, var(--header-title-shade) 70%, var(--canvas));
      filter: none; }
    .home-screen .pagehead .ghost { padding: 7px; min-height: 44px; font-size: 9px; white-space: nowrap; background: transparent; box-shadow: none; }
    .home-screen .save-nudge { order: 9; font-size: 10px; }
    .topbar-clock .clock-meta { width: 100%; justify-content: space-between; gap: 6px; }
    .topbar .phase-pill { font-size: clamp(7px, 2vw, 10px); padding: 5px; flex: none; }
    .topbar .season.phase-detail { font-size: clamp(9px, 2.55vw, 11px); }
    .topbar .sim { font-size: 9px; padding-inline: 9px; }
    .home-screen .hrow2 > .dash-panel { order: 5; }
    .home-screen .roster-panel { order: 6; }
    .home-screen .activity-panel { order: 7; }
    .home-screen .standings-panel { order: 8; }
    .home-screen .pagehead .ptitle { font-size: clamp(17px, 5.4vw, 24px); } /* Roster header standard; outranks the desktop Home size */
    .rookie-pagehead { align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; }
    .fa-page-meta-wrap { width: 100%; }
    .fa-page-meta { align-items: flex-start; }
    .fa-page-meta-row { justify-content: flex-start; }
    /* Wrapped rows left the "·" separators at the start of lines. One two-column grid
       instead: short facts pair up, the two long ones (cap status, cap sheet) get full rows. */
    .fa-page-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; width: 100%; }
    .fa-page-meta-row { display: contents; }
    .fa-page-meta-row span + span::before { content: none; }
    /* keep the clinch "x" on the name's line; alone it wrapped to sit before the division */
    .standings-team { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
    .standings-team > .player-link { min-width: 0; text-align: left; }
    /* Trade legality: three columns squeezed the message to three lines at 390px.
       Send | Receive share the top row; the message takes the full row below. */
    .trade-actionbar .tlegal:has(.ts) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .trade-actionbar .tlegal:has(.ts) .tstate { grid-column: 1 / -1; order: 1; }
    .resign-intro button { display: block; width: 100%; margin-top: 12px; } /* inline, it read as part of the sentence */
    .fa-page-meta-row > span { font-size: 13px; line-height: 1.35; } /* the rows had two sizes; one grid, one size */
    .fa-page-meta-row:first-child > span:nth-child(3), .fa-page-meta-row:last-child > span:first-child { grid-column: 1 / -1; order: 1; }
    .fa-sim-note { flex-basis: 100%; margin-left: 0; }
    .fa-market-sticky { position: static; padding-top: 0; box-shadow: none; }
    .fa-market-sticky::before { display: none; }
    .save-nudge { display: block; font-size: 12px; color: var(--dim); margin: -2px 0 10px; }
    /* touch targets */
    button { min-height: 44px; }
    .home-screen .pagehead .ghost, .scout-t td button { min-height: 44px; }
    .rtoolbar select { min-height: 44px; max-width: 100%; }
    .roster-panel .sort-btn { min-height: 44px; }
    th, td { padding: 10px 8px; }
    .pname { display: inline-block; padding: 4px 2px; }
    /* dense tables prune (plan §3.3): the player card is the detail view */
    .col-p3 { display: none; }                    /* roster: Age/Off/Def/Pot/PPG/RPG/APG/Mor */
    .bx-x { display: none; }                      /* box score: MIN/PTS + shooting + REB/AST survive */
    /* Home roster summary prunes with the same mechanism, so it stops being a 720px
       horizontal scroller at 390px: the fixed percentage widths assume all eight
       columns, so both they and the min-width come off when three are hidden. */
    .roster-panel table { min-width: 0; table-layout: auto; }
    .roster-panel :is(th, td):nth-child(n) { width: auto; }
    /* Roster: cabinet-header identity, compact KPI deck, then touch-first player
       rows. This keeps names actionable without trying to squeeze the desktop's
       twelve data columns into a phone-width spreadsheet. */
    .roster-mobile-header { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 9px;
      min-height: 86px; padding: 4px 0 12px; margin-bottom: 12px; border-bottom: 1px solid #66339a; }
    .pagehead, .home-screen .pagehead, .roster-mobile-header { border-bottom-color: var(--header-title-shade); } /* team divider */
    .roster-mobile-crest { display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; }
    .roster-mobile-crest .crest-logo { width: 62px; height: 62px; object-fit: contain; image-rendering: auto; }
    .roster-mobile-heading { min-width: 0; }
    .roster-mobile-heading .eyebrow { margin: 0 0 5px; } /* the picker dock's team-name style */
    .roster-mobile-heading h1 { margin: 0; }
    .roster-mobile-heading p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.25; }
    .roster-mobile-export { min-height: 44px; padding: 7px 6px; border: 1px solid var(--violet); background: transparent; box-shadow: none;
      color: var(--pink); font: 700 12px/1.2 var(--body); letter-spacing: .04em; white-space: nowrap; }
    /* Team switcher leads the board it controls; the toolbar copy (after the list) hides. */
    .roster-mobile-team { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
    .roster-mobile-team > span { flex: none; color: var(--text-dim); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
    .roster-mobile-team select { flex: 1 1 auto; min-width: 0; min-height: 44px; }
    .rtoolbar select { display: none; }
    /* The phone board carries its own Coaching/Staff/Owned Picks row. */
    .rtoolbar .rtoolbar-nav { display: none; }
    .rtoolbar:not(:has(button:not(.rtoolbar-nav))) { display: none; }
    .roster-mobile-actions.squad-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .roster-mobile-counts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; padding: 10px 0; border-bottom: 1px solid #66339a; color: var(--text-dim); font-size: 12px; }
    .roster-mobile-counts b { color: var(--cyan); font-variant-numeric: tabular-nums; }
    /* 2×2: four tiles across left ~88px each, wrapping labels and the payroll sub-line */
    .roster-mobile-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
    .roster-mobile-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; container-type: inline-size; min-width: 0; padding: 10px 8px; border: 1px solid #8c3dbb; text-align: center;
      background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 10%, var(--panel)) 0%, var(--panel) 65%); }
    .roster-mobile-stat > span { display: grid; place-items: center; color: var(--cyan); font: 500 11px/1.25 var(--body); letter-spacing: .04em; text-transform: uppercase; }
    .roster-mobile-stat strong { margin-top: 4px; color: #f7fbff; font: 700 min(24px, 17cqi)/1.2 var(--display); white-space: nowrap; }
    .roster-mobile-stat strong.roster-payroll { font-size: min(24px, calc(95cqi / var(--value-length))); }
    .roster-mobile-stat strong.good { color: var(--good); }
    .roster-mobile-stat strong.bad { color: var(--bad); }
    .roster-mobile-stat small { margin-top: 3px; color: var(--text-dim); font-size: 12px; line-height: 1.2; }
    .roster-mobile-board { display: block; overflow: hidden; margin-bottom: 12px; border: 1px solid #66339a; background: var(--panel);
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 10%, transparent); }
    .roster-mobile-board header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 9px 10px;
      border-bottom: 1px solid #573182; background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 18%, var(--panel)), var(--panel)); }
    .roster-mobile-board h2 { min-width: 0; margin: 0; color: var(--pink); font: 700 12px/1.2 var(--display); letter-spacing: .04em;
      text-transform: uppercase; }
    .roster-mobile-board-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
    .roster-mobile-group-ovr { flex: none; color: var(--cyan); font: 700 10px/1 var(--display); letter-spacing: .08em; }
    .roster-mobile-group-ovr b { margin-left: 4px; color: #f7fbff; font-size: 17px; }
    .roster-mobile-scroll-hint { flex: none; color: var(--text-dim); font: 600 10px/1 var(--body); letter-spacing: .02em; text-transform: none; white-space: nowrap; }
    .roster-mobile-scroll-shell { position: relative; }
    .roster-mobile-scroll-shell::after { content: ""; position: absolute; z-index: 4; top: 0; right: -8px; bottom: 0; width: 16px; pointer-events: none;
      background: linear-gradient(90deg, transparent, var(--panel)); }
    .roster-mobile-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; }
    .roster-mobile-table { width: 660px; min-width: 660px; }
    .roster-mobile-columns, .roster-mobile-player { display: grid; grid-template-columns: 192px 60px 60px 84px repeat(3, 68px); align-items: center; column-gap: 10px; width: 660px; }
    .roster-mobile-player { min-height: 52px; padding: 5px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border)); border-radius: 0; background: transparent;
      color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; box-shadow: none; }
    .roster-mobile-player:last-child { border-bottom: 0; }
    .roster-mobile-player:hover { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
    .roster-mobile-name-cell { position: sticky; left: 0; z-index: 4; min-width: 0; padding-left: 10px; background: var(--panel); box-shadow: 12px 0 16px -18px #08020c; }
    .roster-mobile-columns { position: relative; z-index: 3; min-height: 44px; margin: 0; padding: 0; color: var(--cyan); border-bottom: 1px solid var(--border); background: var(--panel); font-size: 11px; }
    .roster-mobile-columns .roster-mobile-name-cell { align-self: stretch; display: flex; align-items: center; z-index: 5; background: var(--panel); }
    .roster-mobile-player-name { overflow-wrap: anywhere; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.25; white-space: normal; }
    .roster-mobile-player .roster-mobile-name-cell { align-self: stretch; display: flex; align-items: center; }
    .roster-mobile-player > span:not(.roster-mobile-name-cell):not(.roster-mobile-player-note) { display: grid; justify-items: end; min-width: 0; }
    .roster-mobile-player > span:nth-child(2):not(.roster-mobile-name-cell):not(.roster-mobile-player-note) { justify-items: center; }
    .roster-mobile-player-note { grid-column: 1 / -1; margin-top: 4px; padding: 0 10px 2px; color: var(--text-dim); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
    .roster-mobile-player-status { flex: none; padding: 2px 5px; border: 1px solid var(--cyan); color: var(--cyan); font: 700 12px/1.2 var(--body);
      letter-spacing: .04em; text-transform: uppercase; }
    .roster-mobile-player-status.starter { border-color: var(--good); color: var(--good); }
    .roster-mobile-player-status.bench { border-color: var(--cyan); color: var(--cyan); }
    .roster-mobile-player-status.inj { border-color: var(--bad); color: var(--bad); }
    .roster-mobile-player-status.dnp { border-color: var(--violet); color: var(--pink); }
    .roster-mobile-columns > :not(.roster-mobile-name-cell) { text-align: right; }
    .roster-mobile-columns > :nth-child(2) { text-align: center; }
    .roster-mobile-sort { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: right; white-space: nowrap; }
    .roster-mobile-sort.roster-mobile-name-cell { background: var(--panel); }
    .roster-mobile-sort:first-child { text-align: left; }
    .roster-mobile-player > span:nth-child(3) b { color: var(--cyan) !important; }
    .roster-mobile-player .roster-production b { color: var(--text); font-weight: 500; }
    .roster-mobile-player > span:nth-child(5), .roster-mobile-columns > :nth-child(5) { border-left: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); padding-left: 10px; }
    .roster-mobile-player b { color: var(--text-dim); font: 600 14px/1.3 var(--body); }
    /* one 44px row: [Sort ▾] [Desc ↓] [View All] [Lineups ›] */
    .roster-mobile-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
    .roster-mobile-actions button { display: grid; place-items: center; min-height: 44px; padding: 4px 2px; border: 1px solid #66339a; background: var(--panel);
      color: var(--cyan); font: 700 12px/1.25 var(--body); letter-spacing: .04em; text-align: center; }
    .roster-mobile-actions button:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, var(--panel)); }
    .roster-mobile-actions label { display: grid; place-items: center; min-height: 44px; padding: 0 2px; border: 1px solid #66339a;
      color: var(--cyan); font: 700 12px/1.2 var(--body); letter-spacing: .04em; text-align: center; }
    .roster-mobile-actions select { width: 100%; max-width: 100%; min-height: 44px; padding: 2px 3px; border: 0; background: transparent;
      color: var(--cyan); font: 700 12px/1.2 var(--body); text-align: center; }
    .roster-desktop-header, .roster-desktop-table { display: none; }
    .roster-desktop-table.roster-mobile-expanded { display: block; margin-top: 12px; }
    .pcell span:nth-of-type(n+4) { display: none; } /* name + 2 status pills max; the card shows all */
    .kpirow.fin { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
    .kpirow.fin .kpi { min-width: 0; margin: 0; padding: 12px 10px; } /* grid gap spaces the tiles; panel margin doubled it */
    .kpirow.fin .val { min-width: 0; max-width: 100%; overflow-wrap: normal; white-space: nowrap;
      font-size: clamp(13px, 4.2vw, 16px); }
    .fin-y { display: none; }                     /* finances: only the selected year's column */
    .fin-y.fin-on { display: table-cell; }
    /* PixelArcade's "normal" line box is shorter than its glyphs, so a panel heading that
       wraps at 390px overprinted its own second line. */
    .panel h2 { line-height: 1.4; }
    .cap-hd { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .fin-yr-tabs button { flex: 1 1 0; min-width: 0; padding: 6px 4px; white-space: nowrap; }
    /* Trade Machine: the two cap-status boxes repeated the Payroll tile and CBA boilerplate;
       each side's team line carries the facts that matter for building the deal instead. */
    .trade-machine-panel .cap-status-row { display: none; }
    .trade-side-meta { display: block; margin: 0 0 10px 12px; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
    .trade-side-meta b { color: var(--text); }
    .scout-t th, .scout-t td { padding: 8px 4px; font-size: 13px; } /* board fits 390px tightened (Age pruned via col-p3) */
    .scout-mobile-meta { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; line-height: 1.35; }
    .scout-mobile-meta b { color: var(--good); }
    .scout-t td { min-width: 0; overflow-wrap: anywhere; }
    .scout-t td:nth-child(4) { white-space: nowrap; }
    .scout-t td button { display: block; padding: 6px 10px; margin: 2px 0; } /* Scout/Draft stack in the action cell */
    /* trade: asset rows are whole-row tap targets (label wraps the checkbox) — size them */
    .checkline { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    /* The native box rendered as a white iOS control; match the Finder boards' 22px outlined
       box (gold + check when selected). The whole row is still the label/tap target. Player
       rows carry a 44px name link, so an 11px offset centres box and pill on its text. */
    label.checkline { grid-template-columns: 22px minmax(0, 1fr) 4.6em; gap: 10px; }
    .checkline input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
      border: 1.5px solid var(--cyan); border-radius: 0; background: transparent center / 14px no-repeat; }
    .checkline input[type=checkbox]:checked { border-color: var(--gold);
      background-color: var(--gold);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23020619' stroke-width='2.4'/%3E%3C/svg%3E"); }
    .checkline input[type=checkbox]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
    label.checkline:has(.player-link) > input, label.checkline:has(.player-link) > .pill { margin-top: 11px; }
    .trade-machine { order: -1; }
    .trade-machine input[type=number] { min-height: 44px; }
    .trade-actionbar { position: sticky; top: 0; z-index: 24; background: var(--bg); }
    .finder-mobile-head { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; }
    .finder-mobile-head > div { display: flex; flex-direction: column; gap: 3px; }
    .trade-workspace > .trade-mobile-finder { display: block; order: -2; min-width: 0; }
    .trade-workspace > .trade-finder { display: none; }
    .trade-desktop-header { display: none; }
    .trade-mobile-header { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 58px; padding: 0 0 6px; margin-bottom: 6px; }
    .trade-mobile-header .roster-mobile-crest, .trade-mobile-header .crest-logo { width: 44px; height: 44px; }
    .trade-mobile-header .roster-mobile-heading p { display: none; }
    .trade-mobile-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
    .trade-mobile-modes button { display: grid; align-content: center; min-height: 44px; padding: 5px 6px; border: 1px solid #66339a;
      background: var(--panel); color: var(--text-dim); text-align: left; text-transform: none; letter-spacing: 0; box-shadow: none; }
    .trade-mobile-modes button.active, .trade-mobile-modes button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan);
      background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 12%, var(--panel)), var(--panel)); box-shadow: inset 3px 0 0 var(--cyan); }
    .trade-mobile-modes b { color: inherit; font: 700 9px/1.3 var(--display); letter-spacing: 0; text-transform: uppercase; }
    .trade-mobile-modes small { display: none; }
    .trade-mobile-assets { margin: 0 0 6px; overflow: hidden; border: 1px solid #66339a; background: var(--panel);
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 10%, transparent); }
    .trade-mobile-assets > header { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 6px; border-bottom: 1px solid #573182;
      background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 18%, var(--panel)), var(--panel)); }
    .trade-mobile-assets h2 { margin: 0; color: var(--pink); font: 700 10px/1.2 var(--display); letter-spacing: 0; text-transform: uppercase; }
    .trade-mobile-assets header p { display: none; }
    .trade-mobile-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; flex: none; }
    .trade-mobile-tabs button { min-width: 56px; min-height: 44px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--violet) 68%, var(--border)); background: transparent;
      color: var(--dim); font: 700 8px/1 var(--display); letter-spacing: 0; }
    .trade-mobile-tabs button + button { border-left: 0; }
    .trade-mobile-tabs button.active, .trade-mobile-tabs button[aria-pressed="true"] { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, transparent); box-shadow: inset 0 -2px 0 var(--cyan); }
    .trade-mobile-team { display: grid; gap: 4px; padding: 10px; color: var(--text-dim); font: 700 9px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
    .trade-mobile-team select { width: 100%; min-height: 44px; padding: 8px; border-color: #66339a; background: var(--panel2); color: var(--text); }
    .trade-mobile-asset { display: grid; grid-template-columns: 16px minmax(0, 1fr) 106px; align-items: center; column-gap: 6px; width: 100%; min-height: 44px; padding: 4px 6px;
      border: 0; border-top: 1px solid color-mix(in srgb, var(--violet) 28%, var(--border)); border-radius: 0; background: transparent; color: var(--text);
      text-align: left; text-transform: none; letter-spacing: 0; box-shadow: none; }
    .trade-mobile-asset.selected, .trade-mobile-asset[aria-pressed="true"] { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
    .trade-mobile-check { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--cyan); font: 800 14px/1 var(--body); }
    .trade-mobile-asset.selected .trade-mobile-check, .trade-mobile-asset[aria-pressed="true"] .trade-mobile-check { border-color: var(--gold); background: var(--gold); color: var(--bg); }
    .trade-mobile-asset-name { min-width: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; }
    .trade-mobile-asset-meta, .trade-mobile-column-meta { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr); align-items: center; gap: 3px; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .trade-mobile-asset-meta > :last-child, .trade-mobile-column-meta > :last-child { text-align: right; }
    .trade-mobile-asset-meta .trade-mobile-pick-meta { grid-column: 1 / -1; }
    .trade-mobile-columns { display: grid; grid-template-columns: 16px minmax(0, 1fr) 106px; gap: 6px; padding: 5px 6px; color: var(--cyan); font-size: 9px; }
    .trade-mobile-column-meta { color: var(--cyan); font-size: 9px; }
    .trade-roster-board { margin: 8px 0; border: 1px solid #66339a; background: var(--panel); }
    .trade-roster-board > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 9px 10px; border-bottom: 1px solid #573182; }
    .trade-roster-board > header h2 { font-size: 12px; }
    .trade-mobile-asset.trade-roster-player { grid-template-columns: minmax(0, 1fr); min-height: 56px; padding: 5px 10px; }
    .trade-roster-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .trade-roster-main .trade-mobile-check { flex: none; }
    .trade-roster-name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 16px; font-weight: 700; line-height: 1.25; }
    .trade-roster-meta, .trade-roster-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(60px, 1.5fr); gap: 7px; width: 100%; font-variant-numeric: tabular-nums; }
    .trade-roster-meta { margin-top: 3px; font: 600 15px/1.3 var(--body); color: var(--text); }
    .trade-roster-columns { padding: 6px 10px; font-size: 11px; color: var(--text-dim); }
    .trade-roster-meta > :last-child, .trade-roster-columns > :last-child { text-align: right; white-space: nowrap; }
    /* Column labels read like the Roster board's: quiet cyan text on the panel, not button
       slabs. Each label sits over its value (left, salary right); the 44px row keeps the tap target. */
    .trade-roster-columns { align-items: center; padding: 0 10px; border-bottom: 1px solid #573182; }
    .trade-roster-columns .sort-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 0;
      border: 0; background: transparent; box-shadow: none; clip-path: none; color: var(--cyan);
      font: 600 11px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
    .trade-roster-columns .sort-btn:last-child { justify-content: flex-end; }
    .trade-roster-columns .sort-btn[aria-pressed="true"] { color: var(--text); }
    .trade-roster-columns .sort-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
    /* Select control: a 22px checkbox inside the 44px hit area, matching the pick rows'
       outlined check rather than the global primary-button fill. */
    .trade-roster-player .trade-roster-main button.trade-mobile-check { display: grid; place-items: center; width: 44px; height: 44px;
      margin: -6px 0 -6px -11px; padding: 0; border: 0; background: transparent; box-shadow: none; clip-path: none; }
    .trade-check-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--cyan);
      color: var(--bg); font: 800 14px/1 var(--body); }
    .trade-roster-player.selected .trade-check-box { border-color: var(--gold); background: var(--gold); }
    .trade-roster-player .trade-roster-main button.trade-mobile-check:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
    .trade-mobile-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 6px; border: 1px solid #573182; background: #573182; }
    .trade-mobile-totals > * { min-width: 0; padding: 7px 5px; background: var(--panel2); text-align: center; }
    .trade-mobile-totals strong { display: block; color: #f7fbff; font: 700 12px/1.1 var(--display); white-space: nowrap; }
    .trade-mobile-totals small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 8px; line-height: 1.1; }
    .trade-mobile-search, .trade-mobile-stage { width: calc(100% - 20px); min-height: 44px; margin: 0 10px 10px; border-color: var(--gold); background: var(--gold); color: #180d02;
      font: 700 11px/1 var(--display); letter-spacing: .05em; }
    .trade-mobile-clear { width: 100%; min-height: 44px; margin: -2px 0 12px; border-color: #66339a; color: var(--text-dim); font-size: 10px; }
    .trade-mobile-offers { margin: 0 0 12px; overflow: hidden; border: 1px solid #66339a; background: var(--panel); }
    .trade-mobile-offers > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #573182; }
    .trade-mobile-offers h2 { margin: 0; color: var(--pink); font: 700 13px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
    .trade-mobile-offers select { min-height: 44px; max-width: 126px; padding: 5px; border-color: #66339a; background: var(--panel2); color: var(--cyan); font-size: 10px; }
    .trade-mobile-quote { margin: 10px; border: 1px solid color-mix(in srgb, var(--violet) 68%, var(--border)); background: color-mix(in srgb, var(--violet) 6%, var(--panel)); }
    .trade-mobile-quote > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--violet) 38%, var(--border)); }
    .trade-mobile-quote header .crest-logo { width: 34px; height: 34px; object-fit: contain; image-rendering: auto; }
    .trade-mobile-quote header b { color: var(--cyan); font: 700 12px/1 var(--display); letter-spacing: .04em; }
    .trade-mobile-quote header small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 9px; }
    .trade-mobile-quote-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
    .trade-mobile-quote-assets > div { min-width: 0; }
    .trade-mobile-quote-assets > div > span { display: block; margin-bottom: 5px; color: var(--cyan); font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
    .trade-mobile-quote-assets ul { margin: 0; padding: 0; list-style: none; }
    .trade-mobile-quote-assets li { overflow-wrap: anywhere; color: var(--text); font-size: 10px; line-height: 1.3; }
    .trade-mobile-quote-assets li + li { margin-top: 4px; }
    .trade-mobile-quote .finder-overpay-warning { margin: 0 8px 8px; }
    .trade-mobile-quote .trade-mobile-stage { width: calc(100% - 16px); margin: 0 8px 8px; }
    .trade-mobile-empty { margin: 0; padding: 6px 8px; color: var(--dim); font-size: 11px; text-align: center; }
    .trade-mobile-offers > header { padding: 2px 6px; }
    .trade-mobile-offers h2 { font-size: 11px; }
    .trade-mobile-quote { display: grid; grid-template-columns: 52px minmax(0, 1fr); margin: 6px; }
    .trade-mobile-quote > header { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 6px 4px; border: 0; border-right: 1px solid #573182; }
    .trade-mobile-quote header .crest-logo { width: 26px; height: 26px; }
    .trade-mobile-quote header b { font-size: 9px; }
    .trade-mobile-quote header small { display: none; }
    .trade-mobile-quote-assets { padding: 6px; gap: 6px; }
    .trade-mobile-quote-assets li { font-size: 11px; }
    .trade-mobile-quote-assets small { display: block; color: var(--dim); }
    .trade-mobile-quote .trade-mobile-stage { grid-column: 1 / -1; width: calc(100% - 12px); margin: 0 6px 6px; }
    .trade-mobile-quote > p, .trade-mobile-quote > .ghost { grid-column: 1 / -1; }
    .trade-mobile-machine-link { width: 100%; min-height: 44px; border-color: var(--cyan); background: transparent; color: var(--cyan);
      font: 700 10px/1 var(--display); letter-spacing: .04em; }
    /* mobile team-picker layout lives in one consolidated block below
       ("Choose Franchise mobile restructure, iteration 2") */
    /* market rows (FA/Re-Sign) restack: player line → labeled stats strip → full-width controls */
    .m-hd { display: none; }
    .mrow { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 4px; }
    .mcell { display: inline-flex; flex-direction: column; align-items: flex-start; }
    .mcell.num { text-align: left; }
    .mcell .cl { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
    .mcell-who { display: block; flex: 1 1 100%; }
    .mcell-act { flex: 1 1 100%; flex-direction: row; align-items: center; }
    .fa-offer-cell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .fa-offer-copy, .fa-offer-fields { width: 100%; text-align: left; }
    .fa-offer-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; }
    .fa-offer-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; width: 100%; margin-left: 0; }
    .fa-offer-actions > button { width: 100%; }
    .mcell-act input[type=number] { flex: 1 1 90px; min-height: 44px; }
    .mcell-act select { min-height: 44px; }
    .fa-summary-list .fa-signed-result > :nth-child(2),
    .fa-summary-list .fa-signed-result > :nth-child(3),
    .fa-summary-list .fa-signed-result > :nth-child(4),
    .fa-summary-list .fa-signed-result > :nth-child(6) { display: none; }
    /* first-run guide overlay must fit — and scroll — inside a phone viewport */
    .home-screen .guide { width: calc(100vw - 24px); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; }
    /* near-fit screens */
    /* Playoffs (#231): the desktop mirrored grid yields to a vertical stacked tree */
    .po-desk { display: none; }
    .po-phone { display: block; }
    .po-confcol { margin-top: 16px; }
    .po-confname { font: 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
      color: var(--violet); margin: 0 0 8px; }
    .po-semifinals { border-left: 2px solid var(--border-strong); }
    .po-branch { margin-bottom: 12px; }
    .po-feeders { border-left: 2px solid var(--border-strong); margin-left: 12px; padding-left: 12px; display: grid; gap: 8px; }
    .po-feed { position: relative; }
    .po-feed::before { content: ""; position: absolute; left: -12px; top: 50%; width: 10px;
      height: 2px; background: var(--border-strong); }
    .po-merge { position: relative; margin-top: 8px; padding-left: 12px; }
    .po-branch > .po-merge::before { content: ""; position: absolute; left: 12px; top: -8px;
      height: calc(50% + 8px); border-left: 2px solid var(--border-strong); }
    .po-branch > .po-merge::after { content: ""; position: absolute; left: 0; top: 50%;
      width: 12px; border-top: 2px solid var(--border-strong); }
    .po-conffinal { padding-left: 0; }
    .po-conffinal::before { content: ""; position: absolute; left: 0; top: -20px;
      height: calc(50% + 20px); border-left: 2px solid var(--border-strong); }
    .po-card { width: 100%; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
    .po-nick { overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
    .po-cabname { overflow-wrap: anywhere; font-size: clamp(18px, 6vw, 26px); }
    .po-cabinet { margin-bottom: 12px; }
    .front-office { overflow: hidden; }
    .front-office table, .front-office tbody { display: block; width: 100%; }
    .front-office tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 5px 10px; padding: 12px 0; }
    .front-office tr:first-child { display: none; }
    .front-office td { min-width: 0; padding: 0; overflow-wrap: anywhere; border: 0; }
    .front-office td:nth-child(n+3) { color: var(--dim); font-size: 12px; }
    .front-office td:last-child { justify-self: end; }
    .cal-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
    .cal-pills button { flex: 0 0 auto; scroll-snap-align: start; }
    .cal-toggle { min-height: 44px; display: inline-flex; align-items: center; }
    .cal-detail { scroll-margin-top: 68px; }
    .fseg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity; }
    .fseg button { flex: 0 0 auto; scroll-snap-align: start; }
    .panel select { max-width: 100%; min-height: 44px; }
    .history-mobile-filter { display: grid; gap: 4px; margin-bottom: 10px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .draft-side > .panel { min-width: 0; overflow-wrap: anywhere; } /* D76 side rail: Up Next, draft-night trades, lottery */
    .draft-side > .panel > h2:first-child { margin-inline: -12px; }
    .capbar-threshold, .capbar-needle { display: none; } /* colliding absolute labels → values move to .capbar-vals */
    .capbar-vals { display: block; margin-top: 10px; font-size: 12px; color: var(--dim); }
    .capbar-legend { margin-top: 8px; }
    /* More bottom sheet */
    .sheet-back { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, var(--bg) 72%, transparent); }
    .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; background: var(--panel);
      border-top: 2px solid; border-image: linear-gradient(90deg, color-mix(in srgb, var(--violet) 55%, transparent), var(--gold), color-mix(in srgb, var(--violet) 55%, transparent)) 1;
      max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
      /* a column: team card (with Close) and the cap widget stay put; only the nav may scroll,
         and in two columns it fits a normal phone without scrolling at all */
      display: flex; flex-direction: column; overflow: hidden;
      padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 48px rgba(0,0,0,.55); }
    .sheet-close { flex: none; align-self: center; margin: 0 12px 0 4px; padding: 8px 14px; min-height: 44px;
      color: var(--dim); background: transparent; border-color: var(--border-strong); }
    .sheet-team-card { flex: none; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
    .sheet .side-team { width: auto; flex: 1; min-width: 0; border-bottom: 0; }
    .sheet-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 10px 6px;
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; align-content: start; }
    .sheet-nav .grp { grid-column: 1 / -1; font-size: 11px; letter-spacing: .16em; color: var(--violet); text-transform: uppercase; padding: 12px 10px 4px; }
    .sheet .capwidget { flex: none; }
    .sheet .snav { min-height: 44px; }
    .sheet .snav.on::before { display: none; }
  }
  @media (max-width: 520px) {
    th, td { padding: 8px 5px; }
    .pcard, .cmp { max-width: calc(100vw - 24px); }
    .pcard-ft { display: flex; flex-wrap: wrap; gap: 8px; }
    .pcard-ft button { flex: 1 1 auto; }
  }
  /* Picker header lockup: one vertically centered logo / ornament / title row with
     deliberate right-side breathing room and extra clearance above the bottom rail. */
  .tpick-top { gap: 18px; }
  .tpick-top .brand .brandmark { width: clamp(144px, calc(28vh - 70px), 196px); height: clamp(72px, calc(14.5vh - 38px), 104px);
    image-rendering: pixelated; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 82%, transparent))
      drop-shadow(0 0 8px color-mix(in srgb, var(--violet) 58%, transparent)); }
  .tpick-top .ttl { min-width: 0; padding-right: clamp(20px, 2.5vw, 42px); }
  .tpick-top .ttl .eyebrow { margin-bottom: 5px; font-size: clamp(10px, .85vw, 12px); letter-spacing: .13em; }
  .tpick-top .ttl h2 { font-size: clamp(21px, 2.15vw, 31px); white-space: nowrap; }
  .tpick-top .picker-import { min-width: 0; padding: 9px 13px; font-size: 11px; }
  .tcard { border-color: color-mix(in srgb, var(--border-strong) 72%, var(--tc, var(--border)) 28%); background: linear-gradient(135deg, color-mix(in srgb, var(--tc1, var(--tc, var(--panel2))) 12%, var(--panel)) 0%, color-mix(in srgb, var(--tc, var(--panel2)) 7%, var(--panel)) 28%, var(--panel) 58%); }
  .tcard:hover { border-color: var(--tc, var(--cyan)); }
  .na-name .star { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.4em; line-height: 1.2; }
  .dock-actions .ghost { background: color-mix(in srgb, var(--violet) 12%, transparent); }
  .dock-toggle, .dock-compact-meta, .dock-roster-cap .rc-age { display: none; }
  /* ========================================================================
     Franchise selector — canonical Neon Arcade v2 desktop layer (2026-09-03).

     The reference reads as one dense arcade cabinet: a short marquee, a wide
     cyan/violet browsing frame, compact team tiles, and a substantial selected-
     franchise command deck. This is intentionally styling-only. The existing
     selector content, data, controls, and DOM order remain unchanged. */
  @media (min-width: 761px) {
    .tpick-root {
      background-color: var(--canvas);
    }

    .tpick-top {
      min-height: 96px;
      padding: 8px max(20px, calc((100% - var(--tpick-stage)) / 2));
      gap: 16px;
      flex-wrap: nowrap;
      border-bottom: 2px solid color-mix(in srgb, var(--cyan) 74%, transparent);
      background: linear-gradient(180deg, #020817 0%, color-mix(in srgb, var(--panel) 92%, #020817) 100%);
      box-shadow: 0 3px 0 color-mix(in srgb, var(--violet) 28%, transparent);
    }
    .tpick-top .brand .brandmark {
      width: clamp(164px, 12vw, 206px);
      height: 76px;
      filter: drop-shadow(2px 2px 0 #17054b) drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 34%, transparent));
    }
    .tpick-top .sep {
      width: 6px;
      height: 58px;
      background: var(--cyan);
      box-shadow: 2px 2px 0 color-mix(in srgb, var(--violet) 76%, var(--bg));
    }
    .tpick-top .sep::before, .tpick-top .sep::after { left: -3px; width: 12px; height: 4px; }
    .tpick-top .ttl { padding-right: 10px; }
    .tpick-top .ttl .eyebrow { margin-bottom: 5px; color: var(--cyan); font-size: 10px; letter-spacing: .16em; }
    .tpick-top .ttl h2 {
      font-size: clamp(24px, 1.7vw, 31px);
      color: #f7fbff;
      text-shadow: 2px 0 0 #86dfff, 3px 3px 0 #1765da, 5px 5px 0 #311179;
    }
    .tpick-top .picker-import { padding: 8px 14px; }
    .tpick-top .tpick-seg { gap: 7px; }
    .tpick-top .tpick-seg button {
      min-width: 104px;
      min-height: 48px;
      padding: 9px 20px;
      border-width: 2px;
      font-family: var(--display);
      font-size: 12px;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 22%, transparent), 4px 4px 0 rgba(0,0,0,.55);
    }

    .tpick-chassis, .tpick-dock { width: calc(100% - 40px); }
    .tpick-chassis {
      margin-top: 12px;
      border-color: color-mix(in srgb, var(--violet) 72%, transparent);
      background: color-mix(in srgb, #04081b 95%, var(--violet));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 24%, transparent), 4px 4px 0 rgba(0,0,0,.45);
    }
    .tpick-bar {
      min-height: 62px;
      gap: 14px;
      padding: 8px 14px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 7%, var(--panel)) 0%, var(--panel) 100%);
    }
    .tpick-bar input[type="search"] { flex-basis: 300px; max-width: 300px; padding-top: 10px; padding-bottom: 10px; }
    .tpick-bar select { width: 245px; padding-top: 10px; padding-bottom: 10px; }
    .tpick-bar .count { font-size: 12px; letter-spacing: .13em; }
    .tpick-seg.vseg button { min-height: 40px; padding: 8px 14px; }
    .tpick-scroll { padding: 12px 14px; }
    .tcard-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 12px; }
    .tcard {
      min-height: 108px;
      padding: 9px 12px;
      gap: 5px;
      border-width: 1px;
      background:
        radial-gradient(circle at 16% 45%, color-mix(in srgb, var(--tc, var(--cyan)) 17%, transparent) 0%, transparent 42%),
        linear-gradient(105deg, color-mix(in srgb, var(--tc1, var(--tc, var(--panel2))) 34%, var(--panel)) 0%,
          color-mix(in srgb, var(--tc, var(--panel2)) 17%, var(--panel)) 52%, var(--panel) 100%);
      box-shadow: inset 0 0 20px rgba(0,0,0,.16);
      filter: drop-shadow(2px 2px 0 rgba(0,0,0,.65));
    }
    .tcard:hover { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 7px color-mix(in srgb, var(--tc, var(--cyan)) 48%, transparent)); }
    .tcard.on { border-width: 3px; }
    .tcard.on::before { inset: -5px; }
    .na-top { gap: 10px; }
    .tpick-root .crest { width: 54px; height: 54px; }
    .na-name .nick { font-size: 14px; line-height: 1.15; min-height: 1.15em; }
    .na-name .nick.nick-lg { font-size: 11px; }
    .na-name .star { min-height: 0; margin-top: 4px; font-size: 12px; line-height: 1.2; -webkit-line-clamp: 1; }
    .na-ovr { font-size: 11px; }
    .na-ovr b { font-size: 17px; }
    .tcard .pill { padding: 2px 9px; font-size: 10px; }

    .tpick-dock {
      min-height: 160px;
      margin: 10px auto 18px;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--gold) 5%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--gold) 4%, transparent)),
        var(--bg-elev);
      border-width: 2px;
      box-shadow: inset 0 0 24px color-mix(in srgb, var(--gold) 7%, transparent), 0 0 16px rgba(255,176,0,.22);
    }
    .dock-row { min-height: 156px; padding: 13px 16px; }
    .dock-row > .dock-identity, .dock-row > .bigovr, .dock-row > .dstat,
    .dock-row > .dock-picks, .dock-row > .dock-actions { padding: 0 16px; }
    .dock-identity { flex-basis: 390px; gap: 18px; }
    .crest.dock-crest { width: 98px; height: 98px; padding: 5px; border-radius: 50%; border-color: var(--tc, var(--cyan)); }
    .dock-row .who .eyebrow { color: var(--cyan); font-size: 13px; letter-spacing: .14em; }
    .dock-row .who .nm { color: var(--gold); font-size: 31px; text-shadow: 3px 3px 0 #4e2100; }
    .dock-row .who .nm.mid { font-size: 27px; }
    .dock-row .who .nm.long { font-size: 22px; }
    .dock-row .who .sub { margin-top: 8px; }
    .dock-row .bigovr { flex-basis: 132px; gap: 8px; }
    .dock-row .bigovr .k { color: var(--text-dim); }
    .dock-row .bigovr .n { font-size: 54px; }
    .dock-row .dstat.dock-star { flex: 1.05 1 0; }
    .dock-row .dstat.dock-roster-cap { flex: 1 1 0; }
    .dock-picks { flex: 1.12 1 0; }
    .dock-row .dstat > span, .dock-picks-lbl, .dock-roster-cap .rc-lbl, .dock-picks-rlbl { color: var(--text-dim); }
    .dock-row .dock-star-player b { font-size: 16px; }
    .dock-star-contract { margin-top: 7px; }
    .dock-actions {
      --dock-actions-w: 330px;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
    }
    .dock-actions button { width: 100%; min-height: 46px; }
    .dock-actions button.ghost { padding: 12px 18px; }
    .dock-actions button.commit { padding: 14px 18px; }
  }

  @media (min-width: 761px) and (max-width: 1440px) {
    .tpick-top .brand .brandmark { width: 172px; height: 68px; }
    .tpick-top .ttl h2 { font-size: 27px; }
    .tpick-top .tpick-seg button { min-width: 92px; }
    .dock-row { min-height: 112px; padding: 10px 12px; }
    .tpick-dock { min-height: 116px; }
    .dock-identity { flex-basis: 240px; gap: 9px; }
    .crest.dock-crest { width: 58px; height: 58px; padding: 2px; }
    .dock-row .who .nm, .dock-row .who .nm.mid { font-size: 18px; }
    .dock-row .who .nm.long { font-size: 14px; }
    .dock-row .bigovr { flex-basis: 82px; }
    .dock-row .bigovr .n { font-size: 32px; }
    .dock-actions { --dock-actions-w: 280px; gap: 7px; }
    .dock-actions button { min-height: 40px; }
  }
  /* Half-window / small-desktop picker. The full six-bay dossier becomes
     unreadable near 960px, so this range swaps repeated bays for one compact
     decision summary. Desktop and phone retain their own established layouts. */
  @media (min-width: 761px) and (max-width: 1100px) {
    .tpick-dock { width: calc(100% - 32px); }
    .dock-row { padding: 12px; align-items: center; }
    .dock-row > .dock-identity, .dock-row > .bigovr,
    .dock-row > .dock-compact-meta, .dock-row > .dock-actions { padding: 0 10px; }
    .dock-identity { flex: 0 0 205px; gap: 8px; }
    .crest.dock-crest { width: 44px; height: 44px; padding: 0; }
    .dock-row .who .eyebrow { font-size: 9px; letter-spacing: .12em; }
    .dock-row .who .nm, .dock-row .who .nm.mid { font-size: 15px; }
    .dock-row .who .nm.long { font-size: 12px; }
    .dock-row .who .sub { font-size: 9px; gap: 4px; }
    .dock-row > .bigovr { flex: 0 0 70px; }
    .dock-row .bigovr .k { font-size: 8px; letter-spacing: .08em; }
    .dock-row .bigovr .n { font-size: 28px; }

    .dock-row > .dock-star,
    .dock-row > .dock-roster-cap,
    .dock-row > .dock-picks { display: none; }
    .dock-compact-meta { display: grid;
      grid-template-columns: minmax(90px, 1.4fr) repeat(3, minmax(0, auto));
      flex: 1 1 0; min-width: 0; align-items: center; column-gap: 12px;
      color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; }
    .dock-compact-meta b { color: var(--text); font-weight: 700; }
    .dock-compact-meta > .pill, .dock-compact-meta > .dcm-sep { display: none; }
    .dock-compact-meta .dcm-star, .dock-compact-meta .dcm-cap,
    .dock-compact-meta .dcm-status, .dock-compact-meta .dcm-picks {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .dock-compact-meta .dcm-label { display: block; margin-bottom: 3px;
      color: var(--text-dim); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

    .dock-actions { --dock-actions-w: 200px; flex-direction: column;
      align-items: stretch; justify-content: center; gap: 6px; }
    .dock-actions button { width: 100%; }
    .dock-actions button.ghost { padding: 9px 8px; font-size: 9px; }
    .dock-actions button.commit { padding: 10px 8px; font-size: 9px; }
  }
  @media (min-width: 761px) and (max-width: 860px) {
    .dock-identity { flex-basis: 180px; }
    .dock-row .who .sub { display: none; }
    .dock-actions { --dock-actions-w: 190px; }
    .dock-compact-meta { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  }
  /* ==========================================================================
     Choose Franchise mobile restructure (iteration 2) — replaces every earlier
     mobile team-picker pass. Header stack capped at ~280px so 10+ team rows
     stay above the fold; list rows are the mobile default (desktop keeps the
     card grid default — see the pickerView init in the JS section); footer is
     a fixed 3-row sticky cabinet with the detail band collapsed by default.
     Formatting only — no element added, removed, or made inaccessible; hidden
     columns/rows stay in the DOM (display:none), matching the codebase's
     existing dense-table convention (.col-p3, .fin-y, …). ========================== */
  @media (max-width: 760px) {
    /* Override the decorative desktop 100vh minimum: on iPhone it can exceed
       100dvh while browser controls are visible and push the dock offscreen. */
    .tpick-root { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

    /* 1. Header row: logo + eyebrow/title left, Import Save ghost far right;
       conference tabs get their own full-width row underneath. */
    .tpick-top { display: grid; grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "lockup import" "tabs tabs";
      align-items: center; column-gap: 8px; row-gap: 6px;
      padding: 6px 10px; border-bottom-width: 1px; }
    .tpick-lockup { grid-area: lockup; width: auto; min-width: 0; gap: 8px; }
    .tpick-top .brand { padding: 0; }
    .tpick-top .brand .brandmark { width: 68px; height: 34px; }
    .tpick-top .sep { display: none; }
    .tpick-top .ttl { flex: 1 1 auto; min-width: 0; padding-right: 0; }
    .tpick-top .ttl .eyebrow { margin: 0 0 2px; font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
    /* the pixel display font runs ~1em/char — "Choose Your Franchise" at any
       size that fits one 194px-wide line is illegibly small, so it wraps at
       its natural word break (Choose Your / Franchise) instead */
    .tpick-top .ttl h2 { margin: 0; font-size: 12px; line-height: 1.25; white-space: normal; }
    .tpick-top > .spacer { display: none; }
    .tpick-top .picker-import { grid-area: import; justify-self: end; margin: 0;
      background: transparent; border: 1px solid color-mix(in srgb, var(--violet) 60%, transparent);
      color: var(--dim); box-shadow: none; padding: 0 10px; font-size: 10px; letter-spacing: .02em; }

    /* 2. Conference tabs: three equal-width tabs on their own row */
    .tpick-top .tpick-seg { grid-area: tabs; width: 100%; margin: 0; gap: 6px; }
    .tpick-top .tpick-seg button { flex: 1; min-width: 0; padding: 0; font-size: 11px;
      letter-spacing: .12em; border-radius: 0; background: transparent; color: var(--violet);
      border: 1px solid color-mix(in srgb, var(--violet) 60%, transparent); }
    .tpick-top .tpick-seg button.on { background: var(--accent); color: #fff; border-color: var(--cyan); }

    /* chassis: single hairline frame, no corner-bracket ornament, no double border */
    .tpick-chassis { flex: 1 1 auto; min-height: 0; overflow: hidden;
      width: calc(100% - 16px); margin: 6px auto 0; border: 1px solid var(--border-strong); }
    .tpick-chassis::before, .tpick-chassis::after { display: none; }

    /* 4+5. Toolbar: search + view toggle on row 1, status/sort selects + live
       count on row 2 — one grid (not two elements exist in the markup, so
       placement uses grid-area, same technique as .dock-row elsewhere). */
    .tpick-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      grid-template-areas: "search search views" "status sort count";
      align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
    /* 44px, not the 34/30px the mock draws: these are native controls, so unlike the
       .vseg buttons below there is no pseudo-element trick that extends the real hit
       area — the box IS the tap target. Costs ~24px of header height. */
    .tpick-bar input[type="search"] { grid-area: search; max-width: none; min-width: 0;
      height: 44px; padding: 0 10px 0 36px; font-size: 12px; background-size: 13px 13px; background-position: 12px center; }
    .tpick-bar .vseg { grid-area: views; display: flex; }
    /* Real 44px box, not a 32px box with an ::after pad. The plan of record
       (docs/plans/2026-07-29-mobile-v1-plan.md §75) sets `min-height: 44px` on the
       BUTTON at ≤760px — a control-box rule, not "44px of tap area by any means".
       The pad also measurably failed on its own terms: the two toggles sit 6px
       apart and each pad grew 6px, so their hit regions overlapped by 6x44px and
       whichever painted last stole the other's edge. The row is already 44px tall
       (the search field sets it), so honest boxes cost no height here. */
    .tpick-bar .vseg button { position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 14px; }
    /* the browser's native dropdown arrow has no reserved gap from the text at
       this width — swap it for a custom chevron (same technique as the search
       icon) with real breathing room before it */
    .tpick-bar select { width: 100%; min-width: 0; height: 44px; padding: 0 20px 0 6px; font-size: 10px; font-family: inherit;
      text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
      -webkit-appearance: none; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238795b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 5px center; background-size: 10px 10px; }
    .tpick-bar select:nth-of-type(1) { grid-area: status; }
    .tpick-bar select:nth-of-type(2) { grid-area: sort; }
    .tpick-bar .spacer { display: none; }
    .tpick-bar .count { grid-area: count; font-size: 10px; color: var(--cyan); font-family: var(--display); white-space: nowrap; align-self: center; }

    /* 6. Team list — the one scroll region */
    .tpick-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; }
    .tpick-scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%); }

    /* List view (default): one ~52px row per team, built by turning the
       existing <table> rows into grid rows — no markup change, the Payroll
       column (5th td) hides the same way .col-p3/.fin-y already do elsewhere. */
    .tlist table, .tlist tbody { display: block; border: none; background: none; }
    .tlist table tr:first-child { display: none; } /* header row (browsers auto-insert tbody, so this isn't a direct child of table) */
    .tlist tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
      grid-template-areas: "crest name ovr" "crest pill ovr";
      align-items: center; column-gap: 10px; padding: 8px 10px; margin-bottom: 6px;
      min-height: 52px; background: var(--panel2); border: 1px solid var(--border); border-radius: 0; }
    .tlist tr td { padding: 0; border: none; }
    .tlist tr td:nth-child(1) { grid-area: crest; }
    .tlist tr td:nth-child(2) { grid-area: name; font-size: 10px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
    .tlist tr td:nth-child(3) { display: none; } /* Selected team's star stays in the dock. */
    .tlist tr td:nth-child(4) { grid-area: ovr; text-align: right; }
    .tlist tr td:nth-child(4)::before { content: "OVR"; display: block; font-size: 8px; letter-spacing: .06em;
      color: var(--text-dim); text-align: right; margin-bottom: 2px; }
    .tlist tr td:nth-child(4) b { font-family: var(--display); font-size: 14px; }
    .tlist tr td:nth-child(5) { display: none; } /* payroll — still in the DOM, hidden like .col-p3 */
    .tlist tr td:nth-child(6) { grid-area: pill; }
    .tlist tr td:nth-child(6) .pill { font-size: 9px; padding: 2px 5px; margin-top: 3px; }
    .tlist .crest.sm { width: 32px; height: 32px; grid-row: 1 / 3; }
    .tlist tr:hover td { background: none; } /* real hover only exists on desktop; neutralize touch's sticky :hover */
    .tlist tr.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,176,0,.35); background: #3a2a05; }
    .tlist tr.on td { background: none; box-shadow: none; }
    .tlist tr.on .crest.sm { border-color: var(--gold); }

    /* Grid view (toggle): 2-column cells */
    .tcard-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .tcard { min-width: 0; padding: 0; gap: 0; clip-path: none; border-radius: 0; overflow: hidden;
      display: flex; flex-direction: column; border-width: 1px; background: var(--panel2) !important; }
    .tcard:hover { border-color: var(--border); } /* neutralize touch's sticky :hover team-color border */
    .tcard .na-top { flex-direction: row; align-items: center; gap: 6px; padding: 8px 7px 4px; background: none; }
    .tcard .crest { width: 28px; height: 28px; font-size: 9px; border-width: 1px; }
    .tcard .na-name { min-width: 0; flex: 1 1 auto; }
    .tcard .na-name .nick, .tcard .na-name .nick.nick-lg { font-size: 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tcard .na-name .star { font-size: 10px; margin-top: 2px; min-height: 0; color: var(--dim);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; }
    .tcard .na-bot { padding: 4px 7px 7px; gap: 4px; min-width: 0; margin-top: auto; }
    .tcard .na-ovr { font-size: 8px; letter-spacing: .05em; flex: none; }
    .tcard .na-ovr b { font-size: 13px; margin-left: 3px; }
    .tcard .na-bot .pill { font-size: 8px; padding: 1px 4px; letter-spacing: 0; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
    .tcard.on { border-width: 1px; border-color: var(--gold); clip-path: none;
      background: #3a2a05 !important; box-shadow: 0 0 12px rgba(255,176,0,.35); filter: none; animation: none; }
    .tcard.on::before { display: none; }
    .tcard.on .crest { border-color: var(--gold); }
    .tcard.on .na-name .nick { color: var(--gold); text-shadow: none; }

    /* 7. Sticky footer: identity row, collapsed meta row, full-width commit row */
    .tpick-dock { flex: none; margin: 0; border-radius: 0; width: 100%;
      display: flex; flex-direction: column; border-top: 2px solid var(--gold); background: var(--panel2);
      box-shadow: 0 -4px 14px color-mix(in srgb, var(--gold) 18%, transparent); }
    /* no corner sparks on the phone sticky footer — it is chrome there, not a
       selection frame, and the amber keyline alone carries the state */
    .tpick-dock::before, .tpick-dock::after { display: none; }
    .tpick-dock { border: none; border-top: 2px solid var(--gold); box-shadow: none; }
    .dock-roster { max-height: 26vh; padding: 6px 8px 0; }
    .dock-roster table { font-size: 12px; }
    /* Width bounding lives on the base rule, not the collapsed one: the container chain
       (tpick-dock -> dock-row -> bays) has to establish a definite width in BOTH states or
       nowrap bays set the row's min-content width and it spills (the d80fa89 bug, which was
       only fixed for collapsed). */
    .dock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px;
      flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: none; grid-template-areas: none;
      width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
    /* the desktop identity wrapper dissolves here: mobile wants crest and who
       as direct flex children of .dock-row, exactly as before the bar redesign */
    .dock-row > .dock-identity { display: contents; }
    /* Gold border is the pre-existing mobile treatment, kept as-is (review call,
       2026-08-10): the team-colour crest ruling above applies to the desktop bar
       only — the ≤760px dock is D28's compact composition, not a regression. */
    .dock-row .dock-crest { width: 36px; height: 36px; font-size: 10px; flex: none; border-color: var(--gold); padding: 0; }
    .dock-row .who { flex: 1 1 0%; min-width: 100px; }
    .dock-row .who .eyebrow { font-size: 9px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dock-row .who .nm, .dock-row .who .nm.mid, .dock-row .who .nm.long {
      font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
    .dock-row .who .badgerow { margin-top: 2px; }
    .dock-row .who .badgerow .pill { font-size: 8px; padding: 1px 4px; }
    .dock-row .who .sub { display: block; font-size: 9px; color: var(--dim); margin-top: 1px;
      letter-spacing: 0; white-space: normal; }
    /* Do NOT hide this: .dock-compact-meta (the other place the posture badge
       appears) only renders in the COLLAPSED state, so hiding it here dropped the
       badge entirely from the expanded phone dock — losing content, not reflowing
       it. Collapsed is handled by its own rule further down. */
    .dock-row .who .sub .badgerow { display: inline-block; margin-left: 4px; }
    .dock-row > .bigovr { flex: none; display: flex; flex-direction: row; align-items: baseline; gap: 3px;
      margin: 0 6px 0 0; padding: 0; border-left: none; align-self: auto; }
    .dock-row .bigovr .k { font-size: 8px; }
    .dock-row .bigovr .n { font-size: 18px; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
    /* Real 44px box (see the .vseg note above): the ≤760px norm is min-height on the
       control itself. The glyph stays 15px, so only the hit box grows. */
    .dock-toggle { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center;
      flex-direction: row; gap: 4px; width: auto; height: 44px; min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 12px; /* one line: "Details ⌄" */
      background: transparent; border: 1px solid color-mix(in srgb, var(--violet) 60%, transparent); color: var(--violet); }
    .dock-toggle .dock-toggle-label { font: 600 11px/1.1 var(--body); text-transform: uppercase; letter-spacing: .04em; }
    .dock-row > .dock-star { flex: 1 1 100%; font-size: 10px; padding: 2px 0 0; margin: 0; border: none;
      display: flex; gap: 6px; align-items: baseline; min-width: 0; }
    .dock-row > .dock-star > span { font-size: 9px; color: var(--dim); }
    .dock-row .dock-star-player { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dock-row .dock-star-player strong { font-size: 10px; margin-left: 4px; }
    .dock-row .dock-star-contract { font-size: 9px; color: var(--dim); white-space: nowrap;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .dock-row > .dock-roster-cap { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 2px 0 0; margin: 0; border: none; font-size: 10px; min-width: 0; }
    .dock-row .dock-roster-cap .rc-row { flex: none; }
    .dock-row .dock-roster-cap .rc-lbl { font-size: 9px; margin-right: 3px; }
    .dock-row .dock-roster-cap .rc-val { font-size: 10px; }
    .dock-row > .dock-picks { flex: 1 1 100%; font-size: 10px; padding: 2px 0 0; margin: 0; border: none; }
    /* The desktop bar's bay rules are .dock-row .dstat.<name> (0,3,0) and out-specify
       the child selectors above (0,2,0), so without this the phone dock inherited the
       desktop flex ratios and laid its bays out side by side instead of as full-width
       stacked rows. Matching specificity, later in source. */
    .dock-row .dstat.dock-star, .dock-row .dstat.dock-roster-cap { flex: 1 1 100%; }
    .dock-row .dstat, .dock-row > .dock-picks { justify-content: flex-start; }
    .dock-row .dock-picks-hd { font-size: 10px; }
    /* the picks-year select is a native control inside the expanded dock, so it owes the
       same 44px floor as the toolbar's — it is just the one the driver never measured */
    .dock-row .dock-picks-hd select { min-height: 44px; padding: 0 20px 0 6px; }
    .dock-row .dock-picks-body { margin-top: 3px; }
    .dock-row .dock-picks-row { grid-template-columns: 64px minmax(0, 1fr); }
    .dock-row .dock-picks-rlbl { font-size: 9px; letter-spacing: .1em; }
    .dock-row .dock-picks-rval { font-size: 9px; }
    .dock-row .dock-pick-item { font-size: 9px; }
    .dock-actions { flex: 1 1 100%; flex-direction: row; gap: 6px;
      position: sticky; bottom: 0; background: var(--panel2); padding-top: 6px; padding-bottom: 2px; z-index: 1; }
    /* both labels have to survive a ~180px half-row at 390px; nowrap + a pixel face
       overruns the box before it overruns the viewport, so the label shrinks, not the button */
    .dock-actions .ghost { flex: 1; min-width: 0; padding: 8px 4px; font-size: 10px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
    /* the commit label is the longest string of the two and is set in the display
       face, so an even 1:1 split ellipsized the primary CTA ("START FRANCHI…") */
    .dock-actions .commit { flex: 1.7; min-width: 0; padding: 0 4px; min-height: 44px; font-size: 10px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }

    /* Row 2 (collapsed by default): status pill + one meta line */
    .tpick-dock.collapsed .dock-roster,
    .tpick-dock.collapsed .dock-star,
    .tpick-dock.collapsed .dock-roster-cap,
    .tpick-dock.collapsed .dock-picks { display: none; }
    .tpick-dock.collapsed .dock-row { gap: 0 8px; padding: 2px 10px 0; overflow: hidden; }
    .tpick-dock.collapsed .dock-row .who { min-width: 86px; }
    .tpick-dock.collapsed .dock-row .who .sub,
    .tpick-dock.collapsed .dock-row .who .badgerow { display: none; }
    .tpick-dock.collapsed .dock-compact-meta { display: flex; flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%;
      gap: 5px; align-items: baseline; color: var(--dim); font-size: 10px; white-space: nowrap; overflow: hidden; margin-top: 0; }
    .tpick-dock.collapsed .dock-compact-meta b { color: var(--text); font-weight: 700; }
    .tpick-dock.collapsed .dock-compact-meta .pill { flex: none; padding: 1px 4px; font-size: 8px; letter-spacing: 0; }
    /* the star name is the one field with unbounded length (real player names vary
       widely) — it shrinks and ellipsizes on its own; the pill/separators/cap/status
       around it are short and fixed, so they never get pushed off and hard-clipped */
    .tpick-dock.collapsed .dock-compact-meta .dcm-star { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-label { display: none; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-picks,
    .tpick-dock.collapsed .dock-compact-meta .dcm-picks-sep { display: none; }
    .tpick-dock.collapsed .dock-compact-meta > span:not(.dcm-star) { flex: none; }
    .tpick-dock.collapsed .dock-compact-meta { flex-wrap: wrap; white-space: normal; overflow: visible; gap: 3px 6px; }
    .tpick-dock.collapsed .dock-compact-meta > .pill,
    .tpick-dock.collapsed .dock-compact-meta > .dcm-cap,
    .tpick-dock.collapsed .dock-compact-meta > .dcm-sep { display: none; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-star { flex: 1 1 45%; white-space: normal; overflow-wrap: anywhere; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-status { flex: 1 1 45%; text-align: right; }
    /* Collapsed tidy (2026-09-23): the star carries its label, styled like
       the expanded grid, but inline since it is the only fact. Cap status is left to the
       expanded view. */
    .tpick-dock.collapsed .dock-compact-meta { align-items: flex-start; margin-top: 0; } /* the collapsed dock has a 140px budget (smoke gate) */
    .tpick-dock.collapsed .dock-compact-meta .dcm-label { display: block; margin-bottom: 2px; color: var(--text-dim);
      font: 600 11px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-star .player-link, .tpick-dock.collapsed .dock-compact-meta b { font-size: 15px; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-status { display: none; } /* collapsed shows the star only; cap status lives in Details */
    .tpick-dock.collapsed .dock-compact-meta .dcm-star { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-star .dcm-label { margin: 0; flex: none; }
    .tpick-dock.collapsed .dock-compact-meta .dcm-star .player-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tpick-dock .dock-row > .dock-compact-meta, .tpick-dock .dock-row > .dock-actions, .tpick-dock .dock-row > .bigovr { border-left: 0; }

    /* Row 3 (collapsed): full-width START FRANCHISE only — Preview Roster hides */
    .tpick-dock.collapsed .dock-actions { position: static; padding: 0 10px 2px; }
    .tpick-dock.collapsed .dock-actions .ghost { display: none; }
    .tpick-dock.collapsed .dock-actions .commit { flex: 1 1 100%; min-height: 44px; padding: 0 12px; }

    /* Expanded: scrollable detail band capped so identity + actions stay reachable */
    .tpick-dock.expanded { max-height: min(46vh, calc(100dvh - 260px)); }
    .tpick-dock.expanded .dock-actions { padding: 6px 10px 8px; }

    /* Expanded "Franchise Details" (2026-09-23 tidy): one fact grid instead of the desktop
       bays stacked with their desktop spacing. Star as one compact block; Roster / Payroll /
       Cap Status / Avg Age as a 2×2 of label-over-value cells (no truncated labels); the
       picks year select full width under its label; no desktop bay keylines; the last
       pick row scrolls clear of the sticky action bar. */
    .tpick-dock.expanded .dock-row > .dock-actions { border-left: 0; }
    .tpick-dock.expanded .dock-row > .dstat, .tpick-dock.expanded .dock-row > .dock-picks {
      flex: 1 1 100%; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--violet) 30%, var(--border)); }
    .tpick-dock.expanded .dock-row > .dstat > span, .tpick-dock.expanded .dock-picks-lbl,
    .tpick-dock.expanded .dock-roster-cap .rc-lbl, .tpick-dock.expanded .dock-picks-rlbl {
      color: var(--text-dim); font: 600 11px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; }
    .tpick-dock.expanded .dock-row > .dock-star { gap: 0; }
    .tpick-dock.expanded .dock-star-player { margin-top: 0; gap: 8px; align-items: center; font-size: 15px; } /* name keeps its 44px tap height */
    .tpick-dock.expanded .dock-row .dock-star-player b { font-size: 15px; }
    .tpick-dock.expanded .dock-star-player strong { font-size: 15px; margin-left: 0; }
    .tpick-dock.expanded .dock-star-player .sp-ovr { font-size: 15px; }
    .tpick-dock.expanded .dock-star-player .sp-ovr-lbl { font-size: 11px; }
    .tpick-dock.expanded .dock-row .dock-star-contract, .tpick-dock.expanded .dock-star-contract .ctotal {
      margin-top: 2px; font-size: 13px; color: var(--dim); }
    .tpick-dock.expanded .dock-row > .dock-roster-cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    .tpick-dock.expanded .dock-roster-cap .rc-row { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
    .tpick-dock.expanded .dock-roster-cap .rc-row.rc-age { display: flex; }
    .tpick-dock.expanded .dock-roster-cap .rc-lbl { margin: 0; white-space: nowrap; }
    .tpick-dock.expanded .dock-roster-cap .rc-val { font-size: 15px; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
    .tpick-dock.expanded .dock-picks-hd { flex-direction: column; align-items: stretch; gap: 6px; }
    .tpick-dock.expanded .dock-picks-hd select { flex: none; width: 100%; max-width: none; }
    .tpick-dock.expanded .dock-picks-row { grid-template-columns: 110px minmax(0, 1fr); }
    .tpick-dock.expanded .dock-picks-rval, .tpick-dock.expanded .dock-pick-item { font-size: 13px; }
    .tpick-dock.expanded .dock-picks { padding-bottom: 12px; }

    /* keyboard-pressure contingency: viewport ≤600px tall.
       A 44px-floor toolbar plus the full dock oversubscribes a 400px viewport and the
       team list is what gets squeezed out — the one thing the screen exists to show.
       Keyboard open means the user is typing a search, so the sort/status filters and
       the dock's at-a-glance dossier are what yield; search, identity and the commit
       button all stay. Recovers ~90px, taking the list from ~3px to ~145px. */
    @media (max-height: 600px) {
      .tpick-dock.expanded { max-height: min(21vh, calc(100dvh - 250px)); }
      /* descendant, not child: the crest is inside .dock-identity since the
         2026-08-07 bar rebuild, and this rule silently stopped matching. */
      .dock-row .dock-crest { width: 28px; height: 28px; }
      /* Every filter yields, not just the two selects: the conference tabs are the same
         class of control, and searching by name is what the keyboard is open for. */
      .tpick-bar select, .tpick-bar .count, .tpick-top .tpick-seg { display: none; }
      /* The COLLAPSED dock is the binding case here, not the expanded one: it is what
         the picker sits in while the keyboard is up. Identity drops to the nickname
         alone (the city line goes) and the chrome tightens; the crest, OVR, and the
         44px commit button all stay. */
      .tpick-dock.collapsed .dock-compact-meta,
      .tpick-dock.collapsed .dock-row .who .eyebrow { display: none; }
      .tpick-dock.collapsed .dock-row { padding: 4px 10px 2px; }
      .tpick-dock.collapsed .dock-actions { padding: 4px 10px 6px; }
    }
  }
.squad-screen { min-width: 0; }
.squad-tabs { margin-bottom: 16px; }
.contracts-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 20px; }
@media (max-width: 760px) {
  .contracts-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .contracts-tabs button { min-height: 44px; white-space: normal; }
}
.training-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.training-row .player-link { min-width: 0; overflow-wrap: anywhere; }
.squad-screen .front-office { overflow-x: auto; }
@media (max-width: 760px) {
  .squad-screen .rtoolbar .l { flex-wrap: wrap; }
  .squad-screen .rtoolbar label { display: flex; align-items: center; gap: 8px; width: 100%; }
  .squad-screen .rtoolbar select { display: inline-block; flex: 1; min-width: 0; }
  .squad-screen select, #ownedPicks select { max-width: 100%; min-height: 44px; }
  .squad-screen .rtoolbar button { min-height: 44px; }
  .training-row { align-items: flex-start; flex-direction: column; }
  .training-row .fseg { width: 100%; }
  .training-row .fseg button { flex: 1; min-height: 44px; }
  .training-row .player-link { min-height: 44px; }
}