/* The Prism v2 — extracted stylesheet (Phase 0: verbatim fork of v1 CSS) */
    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* The Prism design tokens */
      --ink:      #0b0b0c;   /* v2: THE one dark — replaces #000/#0b0b0b/#0f172a */
      --ink-text: #ffffff;   /* text on --ink */
      --paper:  #ffffff;
      --accent: #2563EB;

      /* v2 semantic colors — exactly one of each */
      --danger:  #e23b4a;
      --warning: #f97316;
      --success: #16a34a;
      --live:    #e5392f;    /* live-match red — a deliberate, distinct signal */

      /* v2 radius scale (replaces ad-hoc 10/12/14/16/20px) */
      --r-sm:   8px;
      --r-md:   12px;
      --r-lg:   16px;
      --r-pill: 9999px;

      /* v2 spacing scale */
      --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

      /* v2 type scale (formalizes Home's existing sizes) */
      --fs-microlabel: 0.6rem;    /* tiny stat/field labels above a value */
      --fs-label:      0.68rem;   /* mono uppercase section labels */
      --fs-meta:    0.72rem;      /* metadata, secondary lines */
      --fs-body-sm: 0.78rem;      /* dense rows, compact body */
      --fs-body:    0.84rem;      /* default body */
      --fs-btn:     0.8rem;       /* button text */
      /* Nunito display scale — 5 steps (collapses ~35 ad-hoc sizes) */
      --fs-d5: 0.95rem;   /* small display / card titles */
      --fs-d4: 1.1rem;    /* sub-headers */
      --fs-d3: 1.35rem;   /* report names, section heroes */
      --fs-d2: 1.75rem;   /* screen heroes */
      --fs-d1: 2.25rem;   /* the big hero moment */
      --fs-title:   1.05rem;
      --fs-display: 1.5rem;

      /* Aliases that fix the team-analysis-report undefined-var bug (no rule edits needed) */
      --text-primary:   var(--text);
      --text-secondary: var(--text-dim);
      --border1:        var(--border);

      /* Base tokens (backward compat) */
      --rui-dark:    var(--ink);
      --rui-white:   #ffffff;
      --rui-light:   #f5f5f5;
      --rui-blue:    #2563EB;
      --rui-teal:    #2563EB;
      --rui-warning: #f97316;
      --rui-danger:  #e23b4a;
      --rui-slate:   #525252;
      --rui-gray:    #737373;

      /* Light canvas (default) */
      --bg:         #ffffff;
      --surface:    #ffffff;
      --surface2:   #fafafa;
      --surface3:   #f5f5f5;
      --border:     #e5e5e5;
      --border2:    rgba(0,0,0,0.12);
      --accent-dim: rgba(37,99,235,0.08);
      --text:       #000000;
      --text-dim:   #525252;
      --text-muted: #737373;
      --teal:       #2563EB;
      --user-bg:    #fafafa;

      /* Typography */
      --font-display: 'Nunito', system-ui, sans-serif;
      --font:         'Inter', system-ui, -apple-system, sans-serif;
      --font-mono:    'JetBrains Mono', ui-monospace, monospace;
      /* Short names the v3 Wire, club page and match centre rules read. Never defined until
         31 Oct 2026, so those rules fell back to the system monospace instead of JetBrains Mono. */
      --mono:    var(--font-mono);
      --display: var(--font-display);
      --text-xs:  0.625rem;   /* 10px — metadata, badges, labels */
      --text-nav: 0.8125rem;  /* 13px — nav items */

      /* Chat redesign tokens */
      --accent-soft:   #eef2fe;
      --surface-light: #fafafa;
      --border-strong: #d4d4d4;
      --muted-1: #525252;
      --muted-2: #737373;
      --muted-3: #a3a3a3;
      --shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05);

      /* Chat report-card surfaces. These were literal #fff / #000 / #dbe5fc, so
         an rb-report card stayed white in dark mode while --text went white with
         it: the player name, tab labels, narrative prose and every stat value
         rendered white-on-white and only the blue .hl spans survived. Anything a
         report card paints a background with belongs here, not inline. */
      --card-bg:            #ffffff;   /* the card itself */
      --card-pill-bg:       #ffffff;   /* pills and ghost buttons ON the card */
      --card-accent-border: #dbe5fc;   /* accent pill / user-bubble hairline */
      --card-invert-bg:     #000000;   /* verdict chip: inverts against the card */
      --card-invert-fg:     #ffffff;
      --card-invert-dim:    rgba(255,255,255,.55);
      --card-btn-bg:        #000000;   /* primary action button */
      --card-btn-fg:        #ffffff;
      --card-btn-bg-hover:  #1c1c1c;
    }

    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      display: flex;
      height: 100dvh;
      -webkit-font-smoothing: antialiased;
    }
    body.dark {
      --bg:         #141414;
      --surface:    #1a1a1a;
      --surface2:   #1c1c1c;
      --surface3:   #1f1f1f;
      --border:     #262626;
      --border2:    #2a2a2a;
      --accent-dim: rgba(37,99,235,0.12);
      --text:       #ffffff;
      --text-dim:   #d4d4d4;
      --text-muted: #a3a3a3;
      --user-bg:    #1c1c1c;

      /* Chat redesign tokens — dark overrides (missing before, so these stayed
         on their light values in dark mode and rendered near-white chips/cards) */
      --accent-soft:   rgba(37,99,235,0.15);
      --surface-light: #1f1f1f;
      --border-strong: #404040;
      --muted-1: #d4d4d4;
      --muted-2: #a3a3a3;
      --muted-3: #737373;

      /* Report-card surfaces. The card follows the canvas, pills sit one step
         above it, and the primary button becomes accent-blue: a #000 button on a
         #1a1a1a card reads as disabled rather than as the main action. */
      --card-bg:            var(--surface);
      --card-pill-bg:       var(--surface3);
      --card-accent-border: rgba(37,99,235,.35);
      --card-invert-bg:     #000000;
      --card-invert-fg:     #ffffff;
      --card-invert-dim:    rgba(255,255,255,.55);
      --card-btn-bg:        var(--accent);
      --card-btn-fg:        #ffffff;
      --card-btn-bg-hover:  #1d4ed8;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 SHARED COMPONENT LIBRARY (.p-*)
       One vocabulary for cards, section headers, empties, errors,
       skeletons, pills, and the signature dark verdict chip.
       ═══════════════════════════════════════════════════════════════ */

    /* Card — the universal surface */
    .p-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-card);
    }

    /* Section header — mono uppercase label + optional trailing action */
    .p-section-hd {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: var(--sp-3); margin-bottom: var(--sp-3);
    }
    .p-section-hd .p-eyebrow {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
    }
    .p-section-hd .p-action {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text);
      cursor: pointer; background: none; border: 0; padding: 0;
    }
    .p-section-hd .p-action:hover { text-decoration: underline; }

    /* The signature dark element — one standardized verdict/rating chip.
       Light card bodies everywhere; THIS is the single dark accent. */
    .p-verdict {
      display: inline-flex; flex-direction: column; align-items: flex-end;
      background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-sm); padding: 8px 14px; text-align: right;
      line-height: 1.15;
    }
    .p-verdict .p-verdict-lbl {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
      text-transform: uppercase; letter-spacing: .08em; opacity: .55;
    }
    .p-verdict .p-verdict-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
    .p-verdict .p-verdict-val .p-verdict-slash { color: var(--accent-text); margin: 0 2px; }
    body.dark .p-verdict { background: var(--paper); color: var(--ink); }

    /* Pill / badge system */
    .p-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 3px 9px; border-radius: var(--r-pill);
      background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border);
    }
    .p-pill.accent { background: var(--accent); color: #fff; border-color: transparent; }
    .p-pill.ink    { background: var(--ink); color: var(--ink-text); border-color: transparent; }
    .p-pill.ok     { background: rgba(22,163,74,.12);  color: var(--success); border-color: rgba(22,163,74,.25); }
    .p-pill.warn   { background: rgba(249,115,22,.12); color: var(--warning); border-color: rgba(249,115,22,.25); }
    .p-pill.danger { background: rgba(226,59,74,.12);  color: var(--danger);  border-color: rgba(226,59,74,.25); }

    /* Empty state — one component for every "nothing here yet" */
    .p-empty {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: var(--sp-2); padding: var(--sp-6) var(--sp-4);
      color: var(--text-muted);
    }
    .p-empty .p-empty-icon { font-size: 1.5rem; opacity: .5; }
    .p-empty .p-empty-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text-dim); }
    .p-empty .p-empty-hint { font-size: var(--fs-body); max-width: 42ch; line-height: 1.5; }
    .p-empty .p-empty-cta { margin-top: var(--sp-2); }

    /* Error banner — one component for every fetch failure */
    .p-error {
      display: flex; align-items: flex-start; gap: var(--sp-3);
      background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid var(--danger); border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-4); color: var(--text-dim); font-size: var(--fs-body);
    }
    .p-error .p-error-body { flex: 1; line-height: 1.5; }
    .p-error .p-error-retry {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text);
      background: none; border: 0; cursor: pointer; padding: 0; white-space: nowrap;
    }
    .p-error .p-error-retry:hover { text-decoration: underline; }

    /* Skeleton loaders */
    @keyframes p-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
    .p-skel {
      background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
      background-size: 800px 100%; animation: p-shimmer 1.4s linear infinite;
      border-radius: var(--r-sm);
    }
    .p-skel-row  { height: 14px; margin-bottom: 8px; }
    .p-skel-tile { height: 64px; border-radius: var(--r-md); }
    @media (prefers-reduced-motion: reduce) { .p-skel { animation: none; } }

    /* Clickable entity row — legible clickability everywhere */
    .p-link-row { cursor: pointer; transition: background .12s ease; }
    .p-link-row:hover { background: var(--surface2); }
    .p-link-row .p-chevron { color: var(--text-muted); opacity: 0; transition: opacity .12s ease; }
    .p-link-row:hover .p-chevron { opacity: 1; }

    /* ── Chat rail (left conversation list, Claude-like) ── */
    #chat-rail {
      width: 248px;
      min-width: 248px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
    }
    /* Mobile-only drawer trigger + backdrop (desktop hides both) */
    #mobile-chats-btn {
      display: none; position: fixed; top: 10px; left: 12px; z-index: 45;
      width: 36px; height: 36px; align-items: center; justify-content: center;
      border-radius: 10px; border: 1px solid var(--border);
      background: var(--surface2); color: var(--text); cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    #chat-drawer-backdrop { display: none; }
    .cr-header {
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .cr-title {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .cr-new {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      color: var(--accent-text);
      background: var(--accent-dim);
      border: 1px solid rgba(37,99,235,.2);
      border-radius: 7px;
      padding: 5px 11px;
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    .cr-new:hover { background: var(--accent); color: #fff; }
    .cr-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }
    .cr-list::-webkit-scrollbar { width: 3px; }
    .cr-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .cr-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .12s;
    }
    .cr-item:hover { background: var(--surface2); }
    .cr-item.active { background: var(--accent-dim); }
    .cr-item-main { flex: 1; min-width: 0; }
    .cr-item-title {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .cr-item.active .cr-item-title { color: var(--accent-text); }
    .cr-rename-input {
      width: 100%; font-size: .8rem; font-weight: 600; line-height: 1.3;
      color: var(--text); background: var(--bg); border: 1px solid var(--accent);
      border-radius: 6px; padding: 2px 6px; outline: none;
    }
    .cr-del-confirm { font-size: .62rem; font-weight: 700; color: var(--rui-danger, #e5484d); white-space: nowrap; }
    .cr-act.confirm { width: auto; padding: 0 6px; }
    .cr-item-time {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .cr-item-acts {
      display: none;
      gap: 2px;
      flex-shrink: 0;
    }
    .cr-item:hover .cr-item-acts { display: flex; }
    .cr-act {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 3px;
      border-radius: 5px;
      line-height: 0;
      transition: background .12s, color .12s;
    }
    .cr-act:hover { color: var(--text); background: var(--surface); }
    .cr-act.del:hover { color: var(--rui-danger); }
    .cr-empty {
      padding: 28px 18px;
      text-align: center;
      color: var(--text-muted);
      font-size: .76rem;
      line-height: 1.6;
    }

    /* ── Sidebar ── */
    #sidebar {
      width: 220px;
      min-width: 60px;
      max-width: 340px;
      background: #0b0b0b;
      color: #fff;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      /* transition only fires on toggle-click, not during drag */
    }
    #sidebar.animating {
      transition: width .22s cubic-bezier(.4,0,.2,1);
    }
    body.light #sidebar {
      background: #fafafa;
      color: #000;
    }
    #sidebar.collapsed { width: 60px; }
    #sidebar.collapsed .sidebar-nav { padding: 8px 0; align-items: center; }
    #sidebar.collapsed .nav-icon { width: 18px; height: 18px; opacity: .7; }
    #sidebar.collapsed .logo-name,
    #sidebar.collapsed .logo-sub,
    #sidebar.collapsed .nav-label,
    #sidebar.collapsed .nav-badge,
    #sidebar.collapsed .nav-section-label,
    #sidebar.collapsed .nav-divider,
    #sidebar.collapsed .sidebar-footer { opacity: 0; pointer-events: none; width: 0; overflow: hidden; margin: 0; padding: 0; height: 0; }
    #sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 0;
      width: 32px; height: 32px;
      margin: 0 auto;
      border-radius: 8px;
      border-color: transparent !important;
      flex-shrink: 0;
    }
    #sidebar.collapsed .sidebar-logo { justify-content: center; padding: 16px 0; }
    #sidebar.collapsed .logo-mark { justify-content: center; margin-bottom: 0; }

    /* Resize handle — right edge drag strip */
    #sidebar-resize-handle {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 5px;
      cursor: col-resize;
      z-index: 30;
      background: transparent;
      transition: background .15s;
    }
    #sidebar-resize-handle:hover,
    #sidebar-resize-handle.dragging { background: rgba(37,99,235,.45); }

    /* Toggle button — sits at top-right of the logo area */
    #sidebar-toggle {
      position: absolute;
      right: 8px;
      top: 11px;
      z-index: 20;
      width: 22px; height: 22px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: rgba(255,255,255,.4);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, color .12s, opacity .12s;
      flex-shrink: 0;
    }
    #sidebar.collapsed #sidebar-toggle { opacity: 0; pointer-events: none; }
    #sidebar-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
    body.light #sidebar-toggle { border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.4); }
    body.light #sidebar-toggle:hover { background: rgba(0,0,0,.05); color: #000; }

    .sidebar-logo {
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    .logo-mark {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 2px;
    }
    .logo-icon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: #fff;
    }
    body.light .logo-icon { color: #000; }
    .logo-icon svg { display: block; }
    .logo-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }
    body.light .logo-name { color: #000; }
    .logo-dot { color: #2563EB; }
    .logo-sub {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding-left: 38px;
      margin-top: 0;
    }
    body.light .logo-sub { color: #a3a3a3; }

    /* ── Sidebar Navigation ── */
    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sidebar-nav::-webkit-scrollbar { width: 3px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

    .nav-section-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #5a6480;
      font-weight: 700;
      padding: 14px 8px 6px;
    }
    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 8px;
    }
    .nav-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 9999px;
      border: 1px solid transparent;
      background: none;
      color: rgba(255,255,255,0.65);
      font-size: var(--text-nav);
      font-weight: 500;
      cursor: pointer;
      transition: background .12s, color .12s;
      text-align: left;
      font-family: var(--font);
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    }
    .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .nav-item.active { background: rgba(255,255,255,0.06); color: #fff; }
    .nav-item.active .nav-icon { opacity: 1; color: #2563EB; }
    body.light .nav-item { color: #525252; }
    body.light .nav-item:hover { background: rgba(0,0,0,0.04); color: #000; }
    body.light .nav-item.active { background: rgba(0,0,0,0.05); color: #000; }
    body.light .nav-item.active .nav-icon { color: #2563EB; }
    .nav-icon {
      width: 16px; height: 16px;
      flex-shrink: 0;
      opacity: .65;
      transition: opacity .12s, color .12s;
    }
    .nav-item:hover .nav-icon { opacity: .9; }
    .nav-label { flex: 1; }
    .nav-badge {
      background: var(--accent);
      color: #fff;
      font-size: var(--text-xs);
      font-weight: 700;
      min-width: 17px; height: 17px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      flex-shrink: 0;
    }

    .sidebar-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.04em;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    body.light .sidebar-footer { color: #a3a3a3; }
    .theme-toggle-btn {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.15);
      background: none;
      color: rgba(255,255,255,0.5);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .12s, color .12s;
    }
    .theme-toggle-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
    body.light .theme-toggle-btn { border-color: #d4d4d4; color: #737373; }
    body.light .theme-toggle-btn:hover { background: #f0f0f0; color: #000; }

    /* ── Main ── */
    #main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }

    /* ── Report modal overlay ── */
    #report-modal {
      position: absolute;
      inset: 0;
      background: var(--bg);
      z-index: 50;
      display: none;
      flex-direction: column;
      animation: fadeSlideIn .18s ease;
    }
    #report-modal.open { display: flex; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #report-modal-bar {
      padding: 11px 20px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    #report-modal-title {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    #report-modal-close {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 5px 14px;
      font-family: var(--font);
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-dim);
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    #report-modal-close:hover { background: var(--surface2); color: var(--text); }
    #report-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 28px 32px;
    }
    #report-modal-body::-webkit-scrollbar { width: 4px; }
    #report-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    #report-modal-body .national-scout-report { max-width: 900px; margin: 0 auto; }

    /* ── Invite code overlay ── */
    #invite-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(3px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #invite-modal.open { display: flex; }
    #invite-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 26px;
      width: 100%;
      max-width: 380px;
      animation: fadeSlideIn .18s ease;
    }
    #invite-card h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 6px;
      letter-spacing: -0.01em;
    }
    #invite-card p {
      font-size: .8rem;
      color: var(--text-dim);
      margin: 0 0 16px;
      line-height: 1.5;
    }
    #invite-input {
      width: 100%;
      box-sizing: border-box;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 10px 12px;
      font-family: var(--font);
      font-size: .9rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text);
      outline: none;
      margin-bottom: 10px;
    }
    #invite-input:focus { border-color: var(--accent); }
    #invite-error {
      display: none;
      font-size: .75rem;
      color: #dc2626;
      margin: -4px 0 10px;
    }
    #invite-error.visible { display: block; }
    #invite-submit {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 0;
      font-family: var(--font);
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .12s;
    }
    #invite-submit:hover { opacity: .9; }
    #invite-submit:disabled { opacity: .5; cursor: default; }

    #topbar {
      padding: 11px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 12px;
    }
    .topbar-left { display: none; }
    .status-dot { display: none; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
    #topbar-title { display: none; }
    #topbar .sub { display: none; }
    .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    /* ── Shared intro row (topbar + ns-topbar) ── */
    .panel-intro {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }
    .panel-intro-icon { color: var(--accent-text); flex-shrink: 0; }
    .panel-intro-desc { font-size: .76rem; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .live-badge {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      background: rgba(59,130,246,0.10);
      color: var(--teal);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 9999px;
      padding: 3px 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    /* ── National Scout panel (redesigned) ── */
    #scout-panel {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
      background: var(--surface2);
    }

    /* Scout Build/Report toggle row — toolbar chrome removed, toggle only */
    #ns-topbar {
      background: transparent;
      padding: 16px 22px 0;
      display: flex; align-items: center; justify-content: flex-end;
      flex-shrink: 0;
    }
    .ns-crumb-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 0.875rem; letter-spacing: -0.01em;
      color: var(--text);
    }
    .ns-topbar-right { display: flex; align-items: center; gap: 8px; }
    .ns-screen-toggle {
      display: inline-flex;
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 3px;
      background: var(--surface);
      gap: 2px;
    }
    .ns-screen-toggle button {
      border: 0; background: transparent;
      padding: 5px 14px;
      font-family: var(--font-mono);
      font-size: .68rem; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-muted); cursor: pointer;
      border-radius: 9999px;
      transition: background .12s, color .12s;
    }
    .ns-screen-toggle button.active { background: var(--text); color: var(--bg); }
    .ns-live-pill {
      background: var(--accent-dim);
      color: var(--accent-text);
      border-radius: 9999px;
      padding: 5px 11px;
      font-family: var(--font-mono);
      font-size: .68rem; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ns-live-pill::before {
      content: ""; width: 5px; height: 5px;
      background: var(--accent); border-radius: 999px;
    }

    /* Screen container */
    .ns-screen { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
    .ns-screen.is-hidden { display: none; }

    /* Content grid */
    .ns-content {
      padding: 20px 24px 40px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      max-width: 1400px;
    }

    /* Card base */
    .ns-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 24px;
      display: flex; flex-direction: column;
      min-width: 0;
    }
    .ns-card-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 16px;
    }
    .ns-card-eyebrow {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-card-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.05rem; letter-spacing: -0.025em;
      margin: 4px 0 0;
    }
    .ns-card-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }

    /* ── BUILD SCREEN ── */
    .ns-form-hero {
      grid-column: span 12;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 30px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 26px;
      position: relative;
      overflow: hidden;
    }
    .ns-form-hero::after {
      content: "";
      position: absolute;
      right: -120px; top: 50%;
      transform: translateY(-50%);
      width: 460px; height: 460px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 60%);
      pointer-events: none;
    }
    body.dark .ns-form-hero {
      background: #0b0b0c;
      color: #fff;
      border-color: #262626;
    }
    body.dark .ns-form-hero::after {
      background: radial-gradient(circle, rgba(37,99,235,0.22), transparent 60%);
    }
    .ns-form-hero-icon {
      width: 64px; height: 64px;
      border-radius: 14px;
      background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 28px rgba(37,99,235,0.3);
      position: relative; z-index: 1;
      flex-shrink: 0;
    }
    .ns-form-hero-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; z-index: 1; }
    .ns-form-hero-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--accent-text);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-form-hero-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 2rem; letter-spacing: -0.04em; line-height: 1;
    }
    .ns-form-hero-sub {
      font-size: .84rem; color: var(--text-muted);
      max-width: 64ch; line-height: 1.5;
    }
    body.dark .ns-form-hero-sub { color: rgba(255,255,255,0.6); }

    /* Composer */
    .ns-composer { grid-column: span 8; }
    .ns-field { display: flex; flex-direction: column; gap: 8px; }
    .ns-field + .ns-field { margin-top: 20px; }
    .ns-field-label {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
    }
    .ns-field-label .ns-req { color: var(--accent-text); }
    .ns-field-help {
      font-size: .72rem; color: var(--text-muted);
      text-transform: none; letter-spacing: 0;
    }

    .ns-country-input {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 13px;
      transition: border-color .15s, box-shadow .15s;
    }
    .ns-country-input:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    .ns-country-input input {
      border: 0; outline: 0; background: transparent;
      flex: 1;
      font-family: var(--font);
      font-size: .95rem; color: var(--text);
      min-width: 0;
    }
    .ns-country-input input::placeholder { color: var(--text-muted); }

    .ns-country-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
    .ns-country-chip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 5px 10px 5px 6px;
      font-size: .75rem; color: var(--text-dim);
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 7px;
      transition: border-color .12s, color .12s;
    }
    .ns-country-chip:hover { border-color: var(--border2); color: var(--text); }
    .ns-country-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
    .ns-flag-mini {
      width: 16px; height: 11px; border-radius: 2px;
      flex-shrink: 0; display: inline-block;
      background-size: cover; background-position: center;
    }

    .ns-age-picker {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    .ns-age-opt {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 6px;
      cursor: pointer;
      text-align: center;
      transition: border-color .12s, background .12s;
      display: flex; flex-direction: column; gap: 1px;
      align-items: center;
    }
    .ns-age-opt:hover { border-color: var(--border2); }
    .ns-age-opt.active { background: var(--text); border-color: var(--text); color: var(--bg); }
    .ns-age-opt .ns-v {
      font-family: var(--font-display); font-weight: 700;
      font-size: .95rem; letter-spacing: -0.02em;
    }
    .ns-age-opt .ns-lbl {
      font-family: var(--font-mono);
      font-size: .6rem; opacity: 0.6;
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    .ns-leagues-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    .ns-league-opt {
      display: flex; align-items: center; gap: 11px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 13px;
      cursor: pointer;
      transition: border-color .12s, background .12s;
      user-select: none;
    }
    .ns-league-opt:hover { border-color: var(--border2); }
    .ns-league-opt.active { border-color: var(--accent); background: var(--accent-dim); }
    .ns-league-check {
      width: 18px; height: 18px;
      border: 1.5px solid var(--border2);
      border-radius: 5px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface);
      transition: background .12s, border-color .12s;
    }
    .ns-league-opt.active .ns-league-check { background: var(--accent); border-color: var(--accent); }
    .ns-league-check svg { opacity: 0; color: #fff; }
    .ns-league-opt.active .ns-league-check svg { opacity: 1; }
    .ns-league-flag {
      width: 18px; height: 12px; border-radius: 2px;
      flex-shrink: 0;
      background: var(--surface2);
      background-size: cover; background-position: center;
    }
    .ns-league-name {
      font-size: .84rem; color: var(--text);
      font-weight: 500;
      flex: 1; min-width: 0;
    }
    .ns-league-tier {
      font-family: var(--font-mono);
      font-size: .6rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-leagues-actions { display: flex; gap: 6px; margin-top: 8px; }
    .ns-text-btn {
      background: transparent; border: 0; padding: 4px 6px;
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer;
    }
    .ns-text-btn:hover { color: var(--text); }

    .ns-cta-row { display: flex; gap: 10px; margin-top: 24px; align-items: center; }
    .ns-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 10px;
      padding: 11px 18px;
      font-family: var(--font);
      font-size: .84rem; font-weight: 500; color: var(--text);
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      transition: border-color .12s;
    }
    .ns-btn:hover { border-color: var(--border2); }
    .ns-btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
    .ns-btn.primary:hover { opacity: .88; }
    .ns-btn:disabled { opacity: .45; cursor: not-allowed; }
    .ns-cta-meta {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
      display: flex; gap: 14px;
    }
    .ns-cta-meta strong {
      color: var(--text); font-weight: 600;
      font-family: var(--font-display); font-size: .875rem;
      letter-spacing: -0.02em;
      margin-right: 4px;
    }

    /* Side panel */
    .ns-form-side { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
    .ns-form-side .ns-card { padding: 20px 22px; }

    .ns-quick-recipes { display: flex; flex-direction: column; gap: 8px; }
    .ns-recipe {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: 12px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .12s;
      align-items: center;
    }
    .ns-recipe:hover { border-color: var(--border2); }
    .ns-recipe-icon {
      width: 32px; height: 32px;
      border-radius: 7px;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--text-dim);
    }
    .ns-recipe-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ns-recipe-title { font-size: .8rem; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
    .ns-recipe-meta {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-recipe-arr { color: var(--text-muted); }

    .ns-recent-list { display: flex; flex-direction: column; }
    .ns-recent-item {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 10px;
      padding: 10px 0;
      align-items: center;
      border-bottom: 1px dashed var(--border);
      cursor: pointer;
    }
    .ns-recent-item:last-child { border-bottom: 0; }
    .ns-recent-flag { width: 22px; height: 15px; border-radius: 2px; border: 1px solid var(--border); background-size: cover; background-position: center; }
    .ns-recent-name { font-size: .8rem; color: var(--text); font-weight: 500; }
    .ns-recent-meta {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* Build screen loading state — overlay pinned to the visible viewport,
       biased toward the upper third (not dead-centre of a tall scroller). */
    #ns-build-screen { position: relative; }
    #ns-build-screen.ns-scanning { overflow: hidden; }
    #ns-scanning-state {
      grid-column: span 12;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 24px;
      text-align: center;
    }
    #ns-scanning-state.visible {
      display: flex;
      position: absolute;
      inset: 0;
      z-index: 20;
      background: var(--surface2);
      justify-content: flex-start;
      padding-top: 20vh;
    }
    #ns-scan-label {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    #ns-scan-note {
      font-size: .7rem; color: var(--text-muted);
      opacity: 0.6;
    }

    /* Lock form controls during scan */
    #ns-build-screen.ns-scanning .ns-composer,
    #ns-build-screen.ns-scanning .ns-form-side {
      opacity: 0.3;
      pointer-events: none;
      user-select: none;
      transition: opacity 0.25s ease;
    }

    /* ── RESULTS SCREEN ── */
    .ns-results-content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; }

    .ns-results-hero {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--r-lg);
      padding: 26px 28px 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 26px;
      position: relative;
      overflow: hidden;
    }
    .ns-results-hero::after {
      content: "";
      position: absolute;
      right: -120px; top: 50%;
      transform: translateY(-50%);
      width: 460px; height: 460px;
      border-radius: 999px;
      background: radial-gradient(circle, var(--accent-dim), transparent 60%);
      pointer-events: none;
    }
    .ns-results-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; z-index: 1; }
    .ns-results-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--accent-text);
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .ns-results-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1;
    }
    .ns-results-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
    .ns-results-meta-item {
      font-family: var(--font-mono);
      font-size: .72rem;
      color: var(--text-dim);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-acc { color: var(--accent-text); }
    .ns-results-meta-sep { width: 4px; height: 4px; background: var(--border2); border-radius: 999px; }

    .ns-results-stat-group {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 28px;
      position: relative; z-index: 1;
      padding-left: 24px;
      border-left: 1px solid var(--border);
    }
    .ns-results-stat .ns-stat-label {
      font-family: var(--font-mono);
      font-size: .65rem;
      color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .ns-results-stat .ns-stat-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.6rem; letter-spacing: -0.035em; line-height: 1;
    }
    .ns-results-stat .ns-stat-delta {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted); margin-top: 4px;
    }
    .ns-results-stat .ns-stat-delta.ns-acc { color: var(--accent-text); }

    .ns-back-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-dim);
      border-radius: 9999px;
      padding: 7px 14px;
      font-size: .78rem; font-weight: 500;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      position: relative; z-index: 2;
    }
    .ns-back-btn:hover { background: var(--surface2); }

    .ns-leagues-row {
      display: flex; gap: 6px; flex-wrap: wrap;
      align-items: center;
    }
    .ns-leagues-label {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-right: 6px;
    }
    .ns-league-tag {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 4px 10px;
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-dim);
      font-weight: 500;
      letter-spacing: 0.02em;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ns-tag-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

    /* Squad summary */
    .ns-squad-card { border-radius: 14px; }
    .ns-squad-list { display: flex; flex-direction: column; }
    .ns-squad-row {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 18px;
      padding: 14px 0;
      border-bottom: 1px dashed var(--border);
      align-items: baseline;
    }
    .ns-squad-row:last-child { border-bottom: 0; }
    .ns-squad-pos-label {
      font-family: var(--font-mono);
      font-size: .75rem; color: var(--text);
      font-weight: 600;
      letter-spacing: 0.06em;
    }
    .ns-squad-count { font-weight: 400; color: var(--text-muted); font-size: .7rem; }
    .ns-squad-names { font-size: .875rem; color: var(--text); line-height: 1.55; }
    .ns-pname {
      background: var(--accent-dim);
      padding: 1px 4px; border-radius: 4px;
      margin-right: 4px;
    }
    .ns-squad-empty {
      font-family: var(--font-mono);
      font-size: .75rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.04em;
    }

    /* Section header */
    .ns-section-head {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 8px 4px 0;
    }
    .ns-section-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: inline-flex; align-items: baseline; gap: 8px;
    }
    .ns-num { color: var(--accent-text); }
    .ns-count { color: var(--text-muted); font-weight: 400; }
    .ns-section-meta {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    /* Player table */
    .ns-ptable-card { padding: 0; overflow: hidden; }
    .ns-ptable {
      width: 100%;
      border-collapse: collapse;
    }
    .ns-ptable thead th {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 500;
      text-align: left;
      padding: 13px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .ns-ptable thead th.ns-num-col { text-align: right; }
    .ns-ptable thead th:first-child { padding-left: 22px; }
    .ns-ptable thead th:last-child { padding-right: 22px; }
    .ns-ptable tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .12s;
    }
    .ns-ptable tbody tr:last-child { border-bottom: 0; }
    .ns-ptable tbody tr:hover { background: var(--surface2); }
    .ns-ptable tbody td {
      padding: 13px 10px;
      font-size: .84rem;
      color: var(--text);
      vertical-align: middle;
    }
    .ns-ptable tbody td:first-child {
      padding-left: 22px;
      border-left: 3px solid transparent;
    }
    .ns-ptable tbody td:last-child { padding-right: 22px; }
    .ns-ptable tbody td.ns-num-col {
      text-align: right;
      font-family: var(--font-mono);
      font-size: .8rem;
      font-variant-numeric: tabular-nums;
    }
    .ns-ptable tbody td.ns-num-col.ns-muted { color: var(--text-muted); }
    .ns-ptable tbody td.ns-score-cell {
      text-align: right;
      font-family: var(--font-display); font-weight: 700;
      font-size: .95rem;
      letter-spacing: -0.02em;
    }

    /* Status stripe */
    .ns-ptable tbody tr.ns-s-callup  td:first-child { border-left-color: var(--accent); }
    .ns-ptable tbody tr.ns-s-monitor td:first-child { border-left-color: #b45309; }
    .ns-ptable tbody tr.ns-s-consider td:first-child { border-left-color: var(--border2); }

    .ns-player-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ns-player-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: .875rem; color: var(--text);
      letter-spacing: -0.02em;
    }
    .ns-player-league {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-club-cell { font-size: .8rem; color: var(--text-dim); }

    /* Status badge */
    .ns-status-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 11px;
      border-radius: 9999px;
      font-family: var(--font-mono);
      font-size: .65rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      border: 1px solid;
      white-space: nowrap;
    }
    .ns-status-pill.ns-callup {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .ns-status-pill.ns-monitor {
      background: #fef7e0; color: #b45309; border-color: rgba(180,83,9,0.18);
    }
    .ns-status-pill.ns-consider {
      background: var(--surface2); color: var(--text-muted); border-color: var(--border);
    }
    body.dark .ns-status-pill.ns-monitor {
      background: rgba(180,83,9,0.15); color: #f97316; border-color: rgba(180,83,9,0.3);
    }

    /* Score bar */
    .ns-score-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .ns-score-bar {
      width: 56px; height: 3px;
      background: var(--surface2);
      border-radius: 999px;
      overflow: hidden;
    }
    .ns-score-bar > span { display: block; height: 100%; border-radius: 999px; }
    .ns-score-bar.ns-elite > span { background: #15803d; }
    .ns-score-bar.ns-high  > span { background: var(--accent); }
    .ns-score-bar.ns-mid   > span { background: #b45309; }
    .ns-score-bar.ns-low   > span { background: var(--border2); }

    /* Coaching brief */
    .ns-brief-card { }
    .ns-brief-body {
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 32px;
    }
    .ns-brief-text {
      font-size: .9rem; line-height: 1.7; color: var(--text-dim);
    }
    .ns-brief-text strong { color: var(--text); font-weight: 600; }
    .ns-brief-text p + p { margin-top: 12px; }
    .ns-brief-stats { display: flex; flex-direction: column; gap: 12px; }
    .ns-brief-stat {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ns-bstat-label {
      font-family: var(--font-mono);
      font-size: .6rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-bstat-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.05;
    }
    .ns-bstat-sub {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
    }

    /* Results actions row */
    .ns-actions-row {
      display: flex; gap: 8px; justify-content: flex-end;
      padding-top: 4px;
    }

    /* Responsive */
    @media (max-width: 1180px) {
      .ns-composer { grid-column: span 12; }
      .ns-form-side { grid-column: span 12; }
      .ns-brief-body { grid-template-columns: 1fr; }
      .ns-age-picker { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── national-scout-report (ntr-* classes — rendered by Claude inside results screen) ── */
    .national-scout-report {
      background: var(--surface);
      border-radius: 14px;
      overflow: hidden;
      font-size: .84rem;
    }
    .ntr-header {
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      padding: 22px 26px;
    }
    .ntr-title {
      font-family: var(--font-display);
      font-size: 1.4rem; font-weight: 800;
      color: var(--text); letter-spacing: -0.03em;
      margin-bottom: 5px;
    }
    .ntr-meta { color: var(--accent-text); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
    .ntr-squad {
      padding: 16px 22px 18px;
      background: var(--surface);
      border-bottom: 2px solid var(--accent);
    }
    .ntr-squad-title {
      font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase;
      letter-spacing: .12em; color: var(--accent-text); font-weight: 700; margin-bottom: 12px;
    }
    .ntr-squad-groups { display: flex; flex-direction: column; gap: 8px; }
    .ntr-squad-group { display: flex; align-items: flex-start; gap: 12px; }
    .ntr-squad-pos {
      font-family: var(--font-mono); font-size: .6rem; font-weight: 800;
      color: var(--text); text-transform: uppercase; letter-spacing: .1em;
      min-width: 40px; padding-top: 2px; flex-shrink: 0;
    }
    .ntr-squad-count { font-weight: 400; color: var(--text-muted); }
    .ntr-squad-names { font-size: .8rem; color: var(--text-dim); line-height: 1.6; }
    .ntr-section { padding: 16px 22px; border-bottom: 1px solid var(--border); }
    .ntr-section:last-of-type { border-bottom: 0; }
    .ntr-section h3 {
      font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
      letter-spacing: .1em; color: var(--text-muted); margin-bottom: 12px; font-weight: 700;
    }
    .ntr-count { font-size: .6rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-family: var(--font); }
    .ntr-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
    .ntr-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .ntr-table thead { background: var(--surface2); }
    .ntr-table th {
      padding: 9px 12px; text-align: left; font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); white-space: nowrap;
      border-bottom: 1px solid var(--border);
    }
    .ntr-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .ntr-table tr:last-child td { border-bottom: 0; }
    .ntr-table tr:hover td { background: var(--surface2); }
    .ntr-row-callup td:first-child { border-left: 3px solid var(--accent); }
    .ntr-row-monitor td:first-child { border-left: 3px solid #b45309; }
    .ntr-row-consider td:first-child { border-left: 3px solid var(--border2); }
    .ntr-cell-player { display: flex; flex-direction: column; gap: 2px; }
    .ntr-player-name { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--text); }
    .ntr-player-league { font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .ntr-badge { font-family: var(--font-mono); font-size: .58rem; font-weight: 700; padding: 3px 9px; border-radius: 9999px; letter-spacing: .06em; text-transform: uppercase; }
    .ntr-callup  { background: var(--accent); color: #fff; }
    .ntr-monitor { background: #fef7e0; color: #b45309; border: 1px solid rgba(180,83,9,.2); }
    .ntr-consider { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
    body.dark .ntr-monitor { background: rgba(180,83,9,.15); color: #f97316; }
    .ntr-summary { padding: 16px 22px; background: var(--surface2); border-top: 1px solid var(--border); }
    .ntr-summary h3 { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; }
    .ntr-summary p { line-height: 1.7; color: var(--text); font-size: .83rem; }

    /* National report — mobile: collapse the dense table into stacked player cards.
       (Placed after the base rules so it wins on source order — CLAUDE.md pitfall.) */
    @media (max-width: 760px) {
      .ntr-table-wrap { border: 0; border-radius: 0; overflow: visible; }
      .ntr-table, .ntr-table thead, .ntr-table tbody, .ntr-table tr, .ntr-table th, .ntr-table td { display: block; }
      .ntr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      .ntr-table tr {
        border: 1px solid var(--border); border-radius: var(--r-md);
        margin-bottom: 10px; padding: 10px 12px; background: var(--surface);
      }
      .ntr-table tr:hover td { background: transparent; }
      .ntr-row-callup td:first-child,
      .ntr-row-monitor td:first-child,
      .ntr-row-consider td:first-child { border-left: 0; }
      .ntr-row-callup   { border-left: 3px solid var(--accent); }
      .ntr-row-monitor  { border-left: 3px solid var(--warning); }
      .ntr-row-consider { border-left: 3px solid var(--border2); }
      .ntr-table td {
        border: 0; padding: 3px 0; display: flex; justify-content: space-between;
        align-items: center; gap: 12px; font-size: .8rem;
      }
      .ntr-table td::before {
        content: attr(data-label); font-family: var(--font-mono); font-size: .58rem;
        text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
        flex-shrink: 0;
      }
      .ntr-table td:first-child { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
      .ntr-table td:first-child::before { display: none; }
    }

    /* ── Messages ── */
    #messages { flex: 1; overflow-y: auto; padding: 32px 0; scroll-behavior: smooth; }
    #messages::-webkit-scrollbar { width: 4px; }
    #messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    .msg-row {
      display: flex;
      padding: 4px 28px;
      gap: 12px;
      max-width: 860px;
      margin: 0 auto;
      width: 100%;
    }
    .msg-row.user { flex-direction: row-reverse; }

    .avatar {
      width: 28px; height: 28px;
      border-radius: 9999px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 0.6rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 3px;
      letter-spacing: .03em;
    }
    .avatar.ai  { background: var(--accent-dim); color: var(--accent-text); border: 1px solid rgba(37,99,235,.15); }
    .avatar.usr { background: var(--surface2);   color: var(--text-dim); border: 1px solid var(--border2); }

    .bubble {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 0.875rem;
      line-height: 1.65;
      word-break: break-word;
      letter-spacing: 0.01em;
    }
    .user .bubble {
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--text);
      border-radius: 16px 16px 4px 16px;
    }
    .ai .bubble {
      background: transparent;
      border: none;
      color: var(--text);
      padding-left: 0;
    }

    /* ── Welcome ── */
    #welcome {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; min-height: 100%;
      padding: 40px 24px; text-align: center;
    }
    .welcome-icon {
      width: 52px; height: 52px;
      background: var(--accent-dim);
      border: 1px solid rgba(37,99,235,.35);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 0 32px rgba(37,99,235,.2);
    }
    #welcome h2 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
      color: var(--text);
    }
    #welcome p {
      color: var(--text-dim);
      font-size: 0.875rem;
      max-width: 380px;
      line-height: 1.65;
      margin-bottom: 28px;
      letter-spacing: 0.01em;
    }
    .welcome-chips {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    }
    .welcome-chip {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 8px 18px;
      font-size: 0.78rem;
      color: var(--text-dim);
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
      font-family: var(--font);
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .welcome-chip:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background: var(--accent-dim);
    }

    /* ── Empty A — "Ready when you are." ── */
    .ea-wrap {
      height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 0 32px;
      gap: 36px;
    }
    .ea-head { text-align: center; max-width: 640px; }
    .ea-head h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 50px;
      letter-spacing: -0.04em;
      line-height: 1;
      margin: 0;
    }
    .ea-head h1 .dot { color: var(--accent-text); }
    .ea-head p {
      font-size: 15.5px;
      color: var(--muted-1);
      line-height: 1.55;
      max-width: 520px;
      margin: 16px auto 0;
    }
    .ea-bigprompt {
      width: min(720px, 100%);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      border-radius: 16px;
      padding: 18px 20px;
      display: flex; align-items: center; gap: 14px;
    }
    .ea-bigprompt .caret {
      color: var(--accent-text);
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .ea-bigprompt input {
      flex: 1; border: 0; outline: 0;
      font-size: 16px; font-family: var(--font);
      color: var(--text); background: transparent;
    }
    .ea-bigprompt input::placeholder { color: var(--muted-2); }
    .ea-bigprompt .send {
      width: 36px; height: 36px; flex-shrink: 0;
      border-radius: 9999px; background: var(--card-btn-bg); color: var(--card-btn-fg);
      display: flex; align-items: center; justify-content: center;
      border: 0; cursor: pointer; transition: opacity .15s;
    }
    .ea-bigprompt .send:hover { opacity: .8; }
    .ea-suggest {
      width: min(720px, 100%);
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .ea-suggest-col .lbl {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--muted-3);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .ea-chip {
      display: block;
      background: var(--surface-light);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 9px 12px;
      font-size: 12.5px; color: var(--muted-1);
      line-height: 1.35; margin-bottom: 6px;
      cursor: pointer; transition: all .15s;
    }
    .ea-chip:hover { background: var(--surface3); border-color: var(--border-strong); color: var(--text); }
    .ea-chip .kbd {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent-text); margin-right: 4px;
    }
    @media (max-width: 1100px) { .ea-suggest { grid-template-columns: repeat(2, 1fr); } }
    .ea-leagues-note {
      width: min(720px, 100%); margin: 20px 0 0; text-align: center;
      font-size: .72rem; line-height: 1.5; color: var(--text-muted);
    }

    /* ── User message bubble (Result B style) ── */
    .ch-msg-user {
      display: flex; justify-content: flex-end; margin-bottom: 18px;
    }
    .ch-msg-user .bubble {
      max-width: 70%;
      background: var(--accent-soft);
      border: 1px solid var(--card-accent-border);
      color: var(--text);
      padding: 10px 16px;
      border-radius: 18px 18px 4px 18px;
      font-size: 14px; line-height: 1.45;
    }

    /* ── Result B — rb-report ── */
    .rb-thread { max-width: 920px; margin: 0 auto; padding: 24px 28px 40px; }
    .rb-report {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden;
      box-shadow: var(--shadow-card);
      animation: rbFadeIn .2s ease;
    }
    @keyframes rbFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .rb-tagbar {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-light);
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted-2);
    }
    .rb-tagbar .pill {
      padding: 3px 8px; border: 1px solid var(--border);
      border-radius: 9999px; background: var(--card-pill-bg); color: var(--text);
    }
    .rb-tagbar .pill.accent { color: var(--accent-text); border-color: var(--card-accent-border); background: var(--accent-soft); }
    .rb-tagbar .spacer { flex: 1; }
    .rb-head {
      padding: 24px 24px 18px;
      display: grid; grid-template-columns: 1fr auto;
      gap: 24px; align-items: flex-end;
      border-bottom: 1px solid var(--border);
    }
    .rb-head .name {
      font-family: var(--font-display); font-weight: 800;
      font-size: 38px; letter-spacing: -0.04em; line-height: 1;
    }
    .rb-head .name .dot { color: var(--accent-text); }
    .rb-head .sub {
      margin-top: 8px;
      font-family: var(--font-mono); font-size: 11.5px;
      color: var(--muted-2); letter-spacing: 0.05em; text-transform: uppercase;
    }
    .rb-head .verdict-chip {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--card-invert-bg); color: var(--card-invert-fg);
      padding: 10px 16px; border-radius: 12px;
    }
    .rb-head .verdict-chip .lbl {
      font-family: var(--font-mono); font-size: 9.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--card-invert-dim);
    }
    .rb-head .verdict-chip .val {
      font-family: var(--font-display); font-weight: 800;
      font-size: 28px; letter-spacing: -0.04em;
      color: var(--accent-text); line-height: 1;
    }
    .rb-tabs {
      display: flex; border-bottom: 1px solid var(--border); padding: 0 24px;
    }
    .rb-tab {
      padding: 12px 16px;
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted-2); cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color .15s;
    }
    .rb-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
    .rb-tab .count { margin-left: 6px; color: var(--muted-3); }
    .rb-body { padding: 22px 24px 24px; display: flex; flex-direction: column; }
    .rb-narrative {
      font-size: 14.5px; line-height: 1.6; color: var(--text);
      max-width: 640px; width: 100%; text-wrap: pretty;
    }
    .rb-narrative p { margin: 0 0 14px; }
    .rb-narrative p:last-child { margin: 0; }
    .rb-narrative .hl { color: var(--accent-text); font-family: var(--font-mono); font-size: 13px; padding: 0 1px; }
    .rb-narrative strong { font-weight: 600; }
    .rb-keystats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 8px; margin-top: 22px;
    }
    .rb-keystats .k {
      background: var(--surface-light); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 12px;
    }
    .rb-keystats .k .lbl {
      font-family: var(--font-mono); font-size: 9.5px;
      color: var(--muted-3); letter-spacing: 0.1em; text-transform: uppercase;
    }
    .rb-keystats .k .val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 20px; letter-spacing: -0.03em; margin-top: 2px;
    }
    .rb-keystats .k .sub {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent-text); margin-top: 2px;
    }
    .rb-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 24px;
      border-top: 1px solid var(--border); background: var(--surface-light);
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.06em; color: var(--muted-2); text-transform: uppercase;
    }
    .rb-foot .actions { display: flex; gap: 8px; text-transform: none; letter-spacing: 0; }
    .ra-btn {
      display: inline-flex; align-items: center; gap: 8px;
      height: 34px; padding: 0 14px;
      border-radius: 9999px;
      font-family: var(--font); font-size: 13px; font-weight: 500;
      cursor: pointer; border: 1px solid transparent; transition: all .15s;
    }
    .ra-btn.primary { background: var(--card-btn-bg); color: var(--card-btn-fg); border-color: var(--card-btn-bg); }
    .ra-btn.primary:hover { background: var(--card-btn-bg-hover); border-color: var(--card-btn-bg-hover); }
    .ra-btn.ghost { background: var(--card-pill-bg); color: var(--text); border-color: var(--border); }
    .ra-btn.ghost:hover { border-color: var(--border-strong); }
    .ra-btn.ghost.shortlisted { background: var(--accent-dim); color: var(--accent-text); border-color: var(--accent); }
    @media (max-width: 860px) {
      .rb-keystats { grid-template-columns: repeat(2, 1fr); }
      .rb-head { grid-template-columns: 1fr; }
      .rb-head .verdict-chip { justify-self: start; }
    }
    /* ── rb-report tab panels ── */
    .rb-panel { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
    .rb-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .rb-stats-cat { display: flex; flex-direction: column; gap: 4px; }
    .rb-stats-cat-hd {
      font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
      padding-bottom: 4px; border-bottom: 1px solid var(--border);
    }
    .rb-stats-table { width: 100%; border-collapse: collapse; }
    .rb-stats-table tr { border-bottom: 1px solid var(--surface-light); }
    .rb-stats-table tr:last-child { border-bottom: none; }
    .rb-stats-table td { padding: 4px 0; font-size: 13px; vertical-align: middle; }
    .rb-stat-lbl { color: var(--muted-1); }
    .rb-stat-val { font-family: var(--font-mono); font-weight: 600; text-align: right; padding: 0 8px; white-space: nowrap; }
    .rb-stat-per { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-text); text-align: right; white-space: nowrap; }
    .rb-strength-list, .rb-concern-list {
      list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
    }
    .rb-strength-list li, .rb-concern-list li {
      font-size: 14px; line-height: 1.55; color: var(--text);
      padding-left: 18px; position: relative;
    }
    .rb-strength-list li::before { content: '↑'; position: absolute; left: 0; color: #22c55e; font-size: 12px; }
    .rb-concern-list li::before  { content: '↓'; position: absolute; left: 0; color: #f97316; font-size: 12px; }
    .rb-strength-list .hl, .rb-concern-list .hl {
      color: var(--accent-text); font-family: var(--font-mono); font-size: 12.5px;
    }
    .rb-comp-list { display: flex; flex-direction: column; gap: 16px; }
    .rb-comp-item {
      padding: 14px 16px; background: var(--surface-light);
      border: 1px solid var(--border); border-radius: 10px;
    }
    .rb-comp-name { font-size: 15px; font-weight: 600; color: var(--text); }
    .rb-comp-meta {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
      color: var(--muted-2); text-transform: uppercase; margin: 4px 0 8px;
    }
    .rb-comp-reason { font-size: 13.5px; line-height: 1.55; color: var(--muted-1); margin: 0; }
    .rb-trajectory p { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0; }

    /* ── Typing indicator (kept for modal loading) ── */
    .typing-indicator {
      display: flex; align-items: center; gap: 4px; padding: 6px 0;
    }
    .typing-indicator span {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--border2);
      animation: bounce 1.3s infinite;
    }
    .typing-indicator span:nth-child(2) { animation-delay: .18s; }
    .typing-indicator span:nth-child(3) { animation-delay: .36s; }
    @keyframes bounce {
      0%,60%,100% { transform: translateY(0); background: var(--border2); }
      30%          { transform: translateY(-5px); background: var(--accent); }
    }

    /* ── AI progress bar ── */
    .ai-progress-wrap {
      width: 100%;
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 10px;
    }
    .ai-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--teal), #60a5fa);
      border-radius: 2px;
      transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }
    .ai-progress-phase {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 5px;
      font-weight: 500;
      transition: opacity 0.3s ease;
    }
    @keyframes progressPulse {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }

    /* ── Tool status chip ── */
    .tool-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 5px 12px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 6px;
    }
    .tool-status .spinner {
      width: 11px; height: 11px;
      border: 1.5px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .65s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .tool-detail {
      color: var(--accent-text);
      font-weight: 500;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Input bar ── */
    #inputbar {
      padding: 14px 24px 18px;
      border-top: 1px solid var(--border);
      background: var(--surface2);
    }
    .input-wrap {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      gap: 10px;
      align-items: flex-end;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 26px;
      padding: 10px 10px 10px 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px -8px rgba(0,0,0,.10);
      transition: border-color .2s, box-shadow .2s;
    }
    .input-wrap:hover { border-color: var(--border-strong); }
    .input-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim), 0 8px 26px -10px rgba(37,99,235,.30);
    }
    #prompt {
      flex: 1; background: none; border: none; outline: none;
      color: var(--text); font-size: 0.9rem; font-family: var(--font);
      resize: none; line-height: 1.55; max-height: 140px; overflow-y: auto;
      letter-spacing: 0.01em; padding: 3px 0;
    }
    #prompt::placeholder { color: var(--text-muted); }
    #send-btn {
      background: var(--accent);
      border: none;
      border-radius: 50%;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
      color: #fff;
      box-shadow: 0 2px 8px -2px rgba(37,99,235,.5);
      transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
    }
    #send-btn svg { transition: transform .16s cubic-bezier(.2,.8,.2,1); }
    #send-btn:hover   { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 5px 14px -3px rgba(37,99,235,.6); }
    #send-btn:hover svg { transform: translateX(1px) rotate(-2deg); }
    #send-btn:active  { transform: scale(.92); }
    #send-btn:disabled{ opacity: .28; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
    #send-btn.is-stop { background: var(--live, #e5392f); box-shadow: 0 2px 8px -2px rgba(226,59,74,.5); }
    .chat-retry-btn {
      margin-left: 10px; padding: 3px 10px; border-radius: 9999px;
      border: 1px solid var(--border); background: var(--surface2);
      color: var(--text); font-size: .78rem; cursor: pointer;
      transition: opacity .15s;
    }
    .chat-retry-btn:hover { opacity: .8; }
    #chat-latest-chip {
      position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(6px);
      z-index: 20; display: none; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 9999px; cursor: pointer;
      background: var(--accent); color: #fff; border: none;
      font-size: .78rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.28);
      opacity: 0; transition: opacity .18s, transform .18s;
    }
    #chat-latest-chip.is-visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
    .hint {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 8px;
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
      letter-spacing: 0.02em;
    }
    /* The "Enter to send" hint is meaningless with an on-screen keyboard */
    @media (pointer: coarse) { .hint { display: none; } }

    /* ── Bubble text ── */
    .bubble strong { color: var(--text); font-weight: 600; }
    .bubble em     { color: var(--text-dim); font-style: italic; }
    .bubble code   { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; font-family: var(--font-mono); font-size: .8em; color: var(--text); }
    .bubble ul, .bubble ol { padding-left: 18px; margin: 6px 0; }
    .bubble li     { margin-bottom: 4px; }
    .bubble p      { margin-bottom: 8px; }
    .bubble p:last-child { margin-bottom: 0; }
    .bubble h2     { font-family: var(--font-display); font-size: 1rem; margin-bottom: 8px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
    .bubble h3     { font-family: var(--font-display); font-size: .9rem; margin-bottom: 6px; color: var(--text-dim); font-weight: 600; }
    .error-msg     { color: var(--rui-danger); font-size: .82rem; }
    .ai-notice     { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
                     color: var(--text-dim); font-size: .78rem; font-style: italic; }
    .stream-caret  { display: inline-block; width: 7px; margin-left: 1px; color: var(--accent-text);
                     font-weight: 600; animation: caretBlink 1s steps(1) infinite; }
    @keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
    .bubble .md-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .82rem; }
    .bubble .md-table th, .bubble .md-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
    .bubble .md-table th { background: var(--surface2); font-weight: 600; }
    .bubble a { color: var(--accent-text); text-decoration: underline; }

    /* ── Scout Report Card ── */
    .scout-report {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden;
      margin: 4px 0;
      font-size: .84rem;
    }
    .sr-header {
      background: var(--rui-dark);
      border-bottom: 1px solid var(--border2);
      padding: 22px 24px;
    }
    .sr-name {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }
    .sr-meta { font-family: var(--font-mono); color: var(--teal); font-size: .76rem; letter-spacing: 0.02em; font-weight: 500; }
    .sr-section {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
    }
    .sr-section:last-child { border-bottom: none; }
    .sr-section h3 {
      font-family: var(--font-mono);
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--text-muted);
      margin-bottom: 12px;
      font-weight: 600;
    }
    .sr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
      gap: 8px;
    }
    .sr-stat {
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .sr-label {
      font-family: var(--font-mono);
      font-size: .6rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 500;
    }
    .sr-value {
      font-family: var(--font-display);
      font-size: .95rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .sr-strengths { color: var(--teal);         margin-bottom: 8px; line-height: 1.65; font-size: .83rem; }
    .sr-develop   { color: var(--rui-warning);  margin-bottom: 8px; line-height: 1.65; font-size: .83rem; }
    .sr-potential { color: var(--text-dim);      line-height: 1.65; font-size: .83rem; }
    .sr-value-sub {
      display: block;
      font-family: var(--font-mono);
      font-size: .58rem;
      color: var(--teal);
      font-weight: 500;
      letter-spacing: 0.04em;
      margin-top: 1px;
    }
    .sr-footer {
      padding: 16px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      background: var(--rui-dark);
      border-top: 1px solid var(--border);
    }
    .sr-rating { display: flex; align-items: baseline; gap: 6px; }
    .sr-rating-label {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 600;
    }
    .sr-rating-value {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--teal);
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .sr-recommendation { color: rgba(255,255,255,0.72); font-size: .78rem; flex: 1; line-height: 1.6; letter-spacing: 0.01em; }

    /* ── Player Comparison ── */
    .player-comparison {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden;
      padding: 22px 24px;
      margin: 4px 0;
    }
    .player-comparison h2 {
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    .comp-col h3 {
      font-family: var(--font-display);
      font-size: .875rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border2);
      letter-spacing: -0.01em;
    }
    .comp-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid rgba(0,0,0,.06);
      font-size: .77rem;
    }
    .comp-stat .label { font-family: var(--font-mono); color: var(--text-dim); letter-spacing: 0.01em; }
    .comp-stat .val   { font-weight: 600; color: var(--text); }
    .comp-stat .val.better { color: var(--teal); }
    .verdict {
      background: rgba(37,99,235,.04);
      border: 1px solid rgba(37,99,235,.15);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: .81rem;
      color: var(--text);
      line-height: 1.65;
      letter-spacing: 0.01em;
    }

    /* ── Opposition DNA Report ──────────────────────────────────────────────── */
    /* ── Opposition DNA redesign ── */
    .team-dna-report {
      /* v2: remapped to global tokens so the card flips correctly in dark mode
         (was a self-scoped hardcoded-light palette that stayed white in dark). */
      --dr-accent: var(--accent); --dr-accent-soft: var(--accent-dim);
      --dr-bg-sunken: var(--surface2); --dr-bg-dark: var(--ink);
      --dr-border: var(--border); --dr-border-soft: var(--border); --dr-border-dark: var(--border2);
      --dr-text-1: var(--text); --dr-text-2: var(--text-dim); --dr-text-3: var(--text-muted); --dr-text-4: var(--text-muted);
      --dr-good: var(--success); --dr-good-soft: rgba(22,163,74,0.10); --dr-good-border: rgba(22,163,74,0.22);
      --dr-warn: var(--warning); --dr-warn-soft: rgba(249,115,22,0.10); --dr-warn-border: rgba(249,115,22,0.22);
      --dr-bad: var(--danger); --dr-bad-soft: rgba(226,59,74,0.10); --dr-bad-border: rgba(226,59,74,0.22);
      --dr-r-card: var(--r-md); --dr-r-tile: var(--r-sm); --dr-r-pill: var(--r-pill);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      color: var(--dr-text-1);
      display: flex; flex-direction: column; gap: 14px;
    }
    /* ── DNA card base ── */
    .team-dna-report .dna-card {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    /* ── Hero (dna-header) — the signature dark element ── */
    .team-dna-report .dna-header {
      background: var(--dr-bg-dark); color: var(--ink-text);
      border-radius: var(--dr-r-card); padding: 28px 32px;
      position: relative; overflow: hidden;
    }
    .team-dna-report .dna-header::after {
      content: ""; position: absolute; right: -80px; top: 50%;
      transform: translateY(-50%); width: 400px; height: 400px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37,99,235,0.2), transparent 65%);
      pointer-events: none;
    }
    .team-dna-report .dna-team-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: 36px; letter-spacing: -0.04em; line-height: 1;
      color: #fff; margin-bottom: 10px; position: relative; z-index: 1;
    }
    .team-dna-report .dna-meta {
      font-family: var(--font-mono);
      font-size: 11.5px; color: rgba(255,255,255,0.55);
      letter-spacing: 0.04em; text-transform: uppercase;
      position: relative; z-index: 1;
    }
    /* ── Section titles ── */
    .team-dna-report .dna-section-title {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 600; margin-bottom: 16px;
    }
    .team-dna-report .dna-squad-meta { color: var(--dr-text-3); font-weight: 400; letter-spacing: 0; font-size: .65rem; font-family: var(--font); text-transform: none; }
    /* ── Fingerprint ── */
    .team-dna-report .dna-fingerprint {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-fp-title {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 600; margin-bottom: 20px;
    }
    .team-dna-report .dna-fp-axis { margin-bottom: 6px; }
    .team-dna-report .dna-fp-axis:last-child { margin-bottom: 0; }
    .team-dna-report .dna-fp-top {
      display: grid; grid-template-columns: 190px 1fr 100px;
      align-items: center; gap: 16px; margin-bottom: 6px;
    }
    .team-dna-report .dna-fp-label { font-size: 14px; color: var(--dr-text-1); font-weight: 500; }
    .team-dna-report .dna-fp-bar-wrap {
      height: 8px; background: var(--dr-bg-sunken);
      border-radius: 999px; overflow: hidden; position: relative;
      border: 1px solid var(--dr-border-soft);
    }
    .team-dna-report .dna-fp-bar {
      position: absolute; inset: 0; background: var(--dr-accent);
      border-radius: 999px; transition: width .4s ease;
    }
    .team-dna-report .dna-fp-score {
      font-family: var(--font-mono);
      font-size: 12px; color: var(--dr-text-1); font-weight: 500; text-align: right;
    }
    .team-dna-report .dna-fp-badge {
      font-family: var(--font-mono);
      font-size: 9.5px; font-weight: 600; padding: 3px 8px;
      border-radius: var(--dr-r-pill); letter-spacing: 0.08em;
      text-transform: uppercase; border: 1px solid; white-space: nowrap;
      display: inline-block; margin-right: 8px;
    }
    .team-dna-report .dna-fp-elite { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-dna-report .dna-fp-high   { color: var(--dr-accent); background: var(--dr-accent-soft); border-color: rgba(37,99,235,0.18); }
    .team-dna-report .dna-fp-medium { color: var(--dr-warn); background: var(--dr-warn-soft); border-color: var(--dr-warn-border); }
    .team-dna-report .dna-fp-low    { color: var(--dr-bad); background: var(--dr-bad-soft); border-color: var(--dr-bad-border); }
    .team-dna-report .dna-fp-evidence {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding-left: 206px; margin-bottom: 14px;
    }
    .team-dna-report .dna-fp-axis:last-child .dna-fp-evidence { margin-bottom: 0; }
    .team-dna-report .dna-ev-chip {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3);
      background: var(--dr-bg-sunken); border: 1px solid var(--dr-border-soft);
      border-radius: 6px; padding: 2px 9px; white-space: nowrap;
    }
    /* ── Performance stats ── */
    .team-dna-report .dna-perf-section {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }
    .team-dna-report .dna-perf-col {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 18px;
    }
    .team-dna-report .dna-perf-heading {
      font-family: var(--font-display); font-weight: 700;
      font-size: 13px; letter-spacing: -0.01em; color: var(--dr-text-1);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .team-dna-report .dna-perf-heading::before {
      content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
    }
    .team-dna-report .dna-perf-col:nth-child(1) .dna-perf-heading::before { background: #2563EB; }
    .team-dna-report .dna-perf-col:nth-child(2) .dna-perf-heading::before { background: #0a0a0a; }
    .team-dna-report .dna-perf-col:nth-child(3) .dna-perf-heading::before { background: #7c3aed; }
    .team-dna-report .dna-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .team-dna-report .dna-perf-tile {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-tile); padding: 12px 14px;
      display: flex; flex-direction: column; gap: 4px; min-width: 0;
    }
    .team-dna-report .dna-tile-hero { background: var(--dr-bg-sunken); border-color: var(--dr-border-soft); }
    .team-dna-report .dna-tile-full { grid-column: span 2; }
    .team-dna-report .dna-tile-label {
      font-family: var(--font-mono);
      font-size: 9.5px; color: var(--dr-text-4);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .team-dna-report .dna-tile-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 22px; letter-spacing: -0.035em; line-height: 1.05; color: var(--dr-text-1);
    }
    .team-dna-report .dna-tile-sub {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3); margin-top: auto;
    }
    /* ── Key reads ── */
    .team-dna-report .dna-key-reads {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-key-list { display: flex; flex-direction: column; gap: 14px; }
    .team-dna-report .dna-key-item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
    .team-dna-report .dna-key-num {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--dr-accent); border: 1px solid rgba(37,99,235,0.3);
      background: var(--dr-accent-soft); border-radius: 6px;
      width: 22px; height: 22px; display: inline-flex; align-items: center;
      justify-content: center; font-weight: 600; flex-shrink: 0;
    }
    .team-dna-report .dna-key-text { font-size: 13px; line-height: 1.55; color: var(--dr-text-1); }
    .team-dna-report .dna-key-text strong { font-weight: 600; }
    .team-dna-report .dna-key-muted { color: var(--dr-text-3); }
    /* ── Form ── */
    .team-dna-report .dna-form-curve {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .team-dna-report .dna-chip {
      width: 28px; height: 28px; border-radius: 7px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-weight: 600; font-size: 12px; flex-shrink: 0;
    }
    .team-dna-report .dna-W { background: var(--dr-good-soft); color: var(--dr-good); border: 1px solid var(--dr-good-border); }
    .team-dna-report .dna-D { background: var(--dr-warn-soft); color: var(--dr-warn); border: 1px solid var(--dr-warn-border); }
    .team-dna-report .dna-L { background: var(--dr-bad-soft); color: var(--dr-bad); border: 1px solid var(--dr-bad-border); }
    .team-dna-report .dna-fixture-table { width: 100%; border-collapse: collapse; }
    .team-dna-report .dna-fixture-table td { padding: 9px 4px; border-bottom: 1px solid var(--dr-border-soft); vertical-align: middle; font-size: 13px; }
    .team-dna-report .dna-fixture-table tr:last-child td { border-bottom: 0; }
    .team-dna-report .dna-fix-match { color: var(--dr-text-1); font-weight: 500; padding-left: 8px; }
    .team-dna-report .dna-fix-venue {
      font-family: var(--font-mono);
      color: var(--dr-text-3); font-size: 10.5px; width: 40px;
      text-align: right; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .team-dna-report .dna-fix-date {
      font-family: var(--font-mono);
      color: var(--dr-text-3); font-size: 10.5px; width: 56px;
      text-align: right; text-transform: uppercase; letter-spacing: 0.04em;
    }
    /* ── Home / Away ── */
    .team-dna-report .dna-home-away {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    }
    .team-dna-report .dna-ha-block {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 18px 20px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .team-dna-report .dna-ha-label {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    }
    .team-dna-report .dna-ha-record {
      font-family: var(--font-display); font-weight: 700;
      font-size: 20px; letter-spacing: -0.02em; color: var(--dr-text-1);
    }
    .team-dna-report .dna-ha-gf {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3); margin-top: 2px;
    }
    /* ── Squad ── */
    .team-dna-report .dna-squad-gaps {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-squad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .team-dna-report .dna-bucket {
      background: var(--dr-bg-sunken); border: 1px solid var(--dr-border-soft);
      border-radius: var(--dr-r-tile); padding: 16px 18px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .team-dna-report .dna-bucket-pos {
      font-family: var(--font-mono);
      font-size: 11px; font-weight: 600; color: var(--dr-accent); letter-spacing: 0.08em;
    }
    .team-dna-report .dna-bucket-count {
      font-family: var(--font-display); font-weight: 700;
      font-size: 28px; letter-spacing: -0.04em; line-height: 1; color: var(--dr-text-1);
    }
    .team-dna-report .dna-bucket-age {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3);
    }
    .team-dna-report .dna-flag {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 600; padding: 3px 8px;
      border-radius: var(--dr-r-pill); letter-spacing: 0.08em;
      text-transform: uppercase; border: 1px solid; display: inline-block; width: fit-content;
    }
    .team-dna-report .dna-flag-strong { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-dna-report .dna-flag-thin   { color: var(--dr-bad); background: var(--dr-bad-soft); border-color: var(--dr-bad-border); }
    /* ── Tactical analysis ── */
    .team-dna-report .dna-analysis {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-analysis-text {
      font-size: 14px; line-height: 1.75; color: var(--dr-text-2); margin-top: 4px;
    }
    .team-dna-report .dna-analysis-text strong {
      color: var(--dr-text-1); font-weight: 600;
      background: linear-gradient(transparent 65%, rgba(37,99,235,0.12) 65%);
      padding: 0 1px;
    }

    /* DNA panel layout */
    #dna-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; }
    #dna-panel::-webkit-scrollbar { width: 4px; }
    #dna-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    /* ── Team Analysis panel ── */
    #team-analysis-panel { padding: 0; }
    #team-analysis-panel::-webkit-scrollbar { width: 4px; }
    #team-analysis-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    .ta-query-wrap {
      padding: 28px 28px 0;
      max-width: 860px;
    }
    .ta-query-header { margin-bottom: 18px; }
    .ta-query-title {
      font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
      letter-spacing: -.02em; margin-bottom: 4px;
    }
    .ta-query-subtitle { font-size: .8rem; color: var(--text-muted); }

    .ta-query-bar {
      display: flex; gap: 10px; align-items: center;
    }
    .ta-search-field {
      flex: 1; position: relative; display: flex; align-items: center;
    }
    .ta-search-icon {
      position: absolute; left: 11px; color: var(--text-muted); pointer-events: none;
    }
    .ta-query-input {
      width: 100%;
      padding: 9px 12px 9px 36px;
      border: 1px solid var(--border1);
      border-radius: 8px;
      background: var(--bg-input, var(--bg2));
      color: var(--text-primary);
      font-size: .875rem;
      outline: none;
      transition: border-color .15s;
    }
    .ta-query-input:focus { border-color: #2563EB; }
    .ta-query-cta {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 18px;
      background: #2563EB; color: #fff;
      border: none; border-radius: 8px;
      font-size: .875rem; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: background .15s;
    }
    .ta-query-cta:hover { background: #1d4ed8; }
    .ta-query-cta:disabled { opacity: .6; cursor: not-allowed; }

    .ta-results-wrap {
      padding: 24px 28px 40px;
      max-width: 860px;
    }

    /* ── Team Analysis landing (mirrors League Pulse empty state) ── */
    .ta-hero-search {
      display: flex; gap: 10px; align-items: center;
      width: 100%; max-width: 540px; margin-top: 30px;
    }
    .ta-hero-search .ta-search-field { flex: 1; }
    .ta-empty-state #ta-team-dropdown { text-align: left; }
    .ta-recent-chips {
      display: none; gap: 8px; flex-wrap: wrap;
      justify-content: center; margin-top: 14px; max-width: 540px;
    }
    .ta-suggest-label {
      margin-top: 36px;
      font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
      text-transform: uppercase; color: var(--text-muted);
    }
    .ta-clubs-grid { margin-top: 16px; }
    .pulse-leagues .pl-flag {
      width: 36px; height: 36px; border-radius: 8px;
      object-fit: cover; flex-shrink: 0;
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
      background: var(--surface2);
    }

    /* ── DNA double-helix (Team Analysis hero animation) ── */
    .ta-helix {
      width: 100%; max-width: 440px; height: 134px; margin-bottom: 8px; position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    }
    .tah-svg { width: 100%; height: 100%; overflow: visible; display: block; }
    .tah-strand { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .tah-strand-a {
      stroke: var(--accent);
      filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 50%, transparent));
    }
    .tah-strand-b { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
    .tah-grp { will-change: transform; animation: tah-scroll 7s linear infinite; }
    @keyframes tah-scroll { from { transform: translateX(0); } to { transform: translateX(-120px); } }
    @media (prefers-reduced-motion: reduce) { .tah-grp { animation: none; } }

    /* Recent chips */
    .ta-recent-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px 4px 6px;
      border: 1px solid var(--border1);
      border-radius: 20px;
      background: var(--bg2);
      font-size: .75rem; color: var(--text-secondary);
      cursor: pointer; transition: border-color .12s, color .12s;
    }
    .ta-recent-chip:hover, .ta-recent-chip.active { border-color: #2563EB; color: #2563EB; }
    .ta-chip-crest {
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 700; color: #fff;
    }

    /* ── team-analysis-report container ── */
    .team-analysis-report {
      --dr-text-1: var(--text-primary);
      --dr-text-2: var(--text-secondary);
      --dr-text-3: var(--text-muted);
      --dr-good:        #16a34a; --dr-good-soft:   rgba(22,163,74,.1);  --dr-good-border:  rgba(22,163,74,.25);
      --dr-accent:      #2563EB; --dr-accent-soft: rgba(37,99,235,.08);
      --dr-warn:        #d97706; --dr-warn-soft:   rgba(217,119,6,.1);   --dr-warn-border:  rgba(217,119,6,.25);
      --dr-bad:         #dc2626; --dr-bad-soft:    rgba(220,38,38,.1);   --dr-bad-border:   rgba(220,38,38,.25);
      font-family: var(--font);
    }
    body.light .team-analysis-report {
      --dr-good:   #15803d; --dr-accent: #1d4ed8;
      --dr-warn:   #b45309; --dr-bad:    #b91c1c;
    }

    /* Header */
    .team-analysis-report .ta-header {
      padding: 20px 24px 18px;
      border-bottom: 1px solid var(--border1);
      position: relative;
    }
    .team-analysis-report .ta-header::after {
      content: ''; position: absolute; bottom: -1px; left: 24px;
      width: 36px; height: 2px; background: #2563EB; border-radius: 1px;
    }
    .team-analysis-report .ta-team-name {
      font-size: 1.35rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: -.025em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-meta {
      font-size: .72rem; color: var(--dr-text-3); text-transform: uppercase;
      letter-spacing: .05em; font-weight: 500;
    }

    /* Shared section title */
    .team-analysis-report .ta-section-title {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em;
      margin-bottom: 12px;
    }

    /* ── Fingerprint (mirrors DNA) ── */
    .team-analysis-report .ta-fingerprint {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-fp-title {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    }
    .team-analysis-report .ta-fp-axis { margin-bottom: 6px; }
    .team-analysis-report .ta-fp-axis:last-child { margin-bottom: 0; }
    .team-analysis-report .ta-fp-top {
      display: grid; grid-template-columns: 160px 1fr 100px 52px; gap: 10px; align-items: center;
    }
    .team-analysis-report .ta-fp-label { font-size: 14px; color: var(--dr-text-1); font-weight: 500; }
    .team-analysis-report .ta-fp-bar-wrap {
      height: 6px; background: var(--border1); border-radius: 3px; overflow: hidden;
    }
    .team-analysis-report .ta-fp-bar {
      height: 100%; background: #2563EB; border-radius: 3px; transition: width .6s ease;
    }
    .team-analysis-report .ta-fp-score {
      font-size: .75rem; color: var(--dr-text-2); font-weight: 600; font-variant-numeric: tabular-nums;
    }
    .team-analysis-report .ta-fp-badge {
      font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: 2px 7px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap;
    }
    .team-analysis-report .ta-fp-elite  { color: var(--dr-good);   background: var(--dr-good-soft);   border-color: var(--dr-good-border); }
    .team-analysis-report .ta-fp-high   { color: var(--dr-accent); background: var(--dr-accent-soft); border-color: rgba(37,99,235,.18); }
    .team-analysis-report .ta-fp-medium { color: var(--dr-warn);   background: var(--dr-warn-soft);   border-color: var(--dr-warn-border); }
    .team-analysis-report .ta-fp-low    { color: var(--dr-bad);    background: var(--dr-bad-soft);    border-color: var(--dr-bad-border); }
    .team-analysis-report .ta-fp-evidence {
      display: flex; flex-wrap: wrap; gap: 5px; padding-left: 170px; margin: 4px 0 10px;
    }
    .team-analysis-report .ta-fp-axis:last-child .ta-fp-evidence { margin-bottom: 0; }
    .team-analysis-report .ta-ev-chip {
      font-size: .68rem; color: var(--dr-text-3);
      background: var(--bg2); border: 1px solid var(--border1);
      padding: 2px 8px; border-radius: 10px;
    }

    /* ── Tactical Identity ── */
    .team-analysis-report .ta-tactical-identity {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-ti-text {
      font-size: .875rem; color: var(--dr-text-2); line-height: 1.65;
      margin-bottom: 10px;
    }
    .team-analysis-report .ta-ti-text:last-child { margin-bottom: 0; }

    /* ── Performance stats (3 columns) ── */
    .team-analysis-report .ta-perf-section {
      display: grid; grid-template-columns: repeat(3, 1fr);
      border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-perf-col {
      padding: 20px 20px; border-right: 1px solid var(--border1);
    }
    .team-analysis-report .ta-perf-col:last-child { border-right: none; }
    .team-analysis-report .ta-perf-heading {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em;
      display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
    }
    .team-analysis-report .ta-perf-heading::before {
      content: ''; width: 3px; height: 12px; border-radius: 2px; flex-shrink: 0;
    }
    .team-analysis-report .ta-perf-col:nth-child(1) .ta-perf-heading::before { background: #2563EB; }
    .team-analysis-report .ta-perf-col:nth-child(2) .ta-perf-heading::before { background: #0a0a0a; }
    .team-analysis-report .ta-perf-col:nth-child(3) .ta-perf-heading::before { background: #7c3aed; }
    .team-analysis-report .ta-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .team-analysis-report .ta-perf-tile {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 8px; padding: 10px 12px;
    }
    .team-analysis-report .ta-tile-hero { border-color: rgba(37,99,235,.2); }
    .team-analysis-report .ta-tile-full { grid-column: span 2; }
    .team-analysis-report .ta-tile-label {
      display: block; font-size: .62rem; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
    }
    .team-analysis-report .ta-tile-val {
      display: block; font-size: 1.1rem; font-weight: 700;
      color: var(--dr-text-1); letter-spacing: -.02em;
    }
    .team-analysis-report .ta-tile-sub {
      display: block; font-size: .68rem; color: var(--dr-text-3); margin-top: 2px;
    }

    /* ── Key Men ── */
    .team-analysis-report .ta-key-men {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-key-men-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .team-analysis-report .ta-player-card {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 10px; padding: 14px 15px;
      transition: border-color .15s;
    }
    .team-analysis-report .ta-player-card:hover { border-color: rgba(37,99,235,.35); }
    .team-analysis-report .ta-pc-top {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 8px; margin-bottom: 4px;
    }
    .team-analysis-report .ta-pc-name {
      font-size: .875rem; font-weight: 700; color: var(--dr-text-1);
      line-height: 1.2;
    }
    .team-analysis-report .ta-pc-role {
      font-size: .6rem; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; white-space: nowrap; flex-shrink: 0;
      background: var(--dr-accent-soft); color: var(--dr-accent);
      border: 1px solid rgba(37,99,235,.2);
    }
    .team-analysis-report .ta-pc-pos {
      font-size: .7rem; color: var(--dr-text-3); margin-bottom: 10px;
    }
    .team-analysis-report .ta-pc-chips {
      display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;
    }
    .team-analysis-report .ta-pc-chip {
      font-size: .68rem; padding: 2px 8px;
      border-radius: 10px; border: 1px solid var(--border1);
      font-weight: 600; background: var(--bg1);
    }
    .team-analysis-report .ta-chip-rating { color: #d97706; border-color: rgba(217,119,6,.2); background: rgba(217,119,6,.06); }
    .team-analysis-report .ta-chip-goals  { color: #2563EB; border-color: rgba(37,99,235,.2); background: rgba(37,99,235,.05); }
    .team-analysis-report .ta-chip-assists { color: #7c3aed; border-color: rgba(124,58,237,.2); background: rgba(124,58,237,.05); }
    .team-analysis-report .ta-pc-desc {
      font-size: .75rem; color: var(--dr-text-2); line-height: 1.5;
    }

    /* ── Squad Breakdown ── */
    .team-analysis-report .ta-squad-breakdown {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-squad-meta { color: var(--dr-text-3); font-weight: 400; font-size: .62rem; font-family: var(--font); text-transform: none; letter-spacing: 0; }
    .team-analysis-report .ta-squad-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .team-analysis-report .ta-squad-bucket {
      background: var(--bg2); border: 1px solid var(--border1); border-radius: 10px; padding: 12px 14px;
    }
    .team-analysis-report .ta-bucket-header {
      display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    }
    .team-analysis-report .ta-bucket-pos {
      font-size: .7rem; font-weight: 800; color: var(--dr-text-1); text-transform: uppercase;
    }
    .team-analysis-report .ta-bucket-count {
      font-size: .65rem; color: var(--dr-text-3); margin-left: auto;
    }
    .team-analysis-report .ta-bucket-flag {
      font-size: .58rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; border: 1px solid transparent;
    }
    .team-analysis-report .ta-flag-strong { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-analysis-report .ta-flag-thin   { color: var(--dr-bad);  background: var(--dr-bad-soft);  border-color: var(--dr-bad-border); }
    .team-analysis-report .ta-bucket-meta {
      font-size: .65rem; color: var(--dr-text-3); margin-bottom: 10px;
    }
    .team-analysis-report .ta-bucket-players { display: flex; flex-direction: column; gap: 5px; }
    .team-analysis-report .ta-bucket-player {
      display: flex; align-items: center; gap: 5px;
      font-size: .72rem; padding: 4px 0; border-top: 1px solid var(--border1);
    }
    .team-analysis-report .ta-bucket-player:first-child { border-top: none; }
    .team-analysis-report .ta-bp-name { flex: 1; color: var(--dr-text-1); font-weight: 500; }
    .team-analysis-report .ta-bp-apps { font-size: .65rem; color: var(--dr-text-3); white-space: nowrap; }
    .team-analysis-report .ta-bp-rating { font-size: .65rem; color: #d97706; font-weight: 600; }
    .team-analysis-report .ta-bp-contrib { font-size: .65rem; color: #2563EB; font-weight: 600; white-space: nowrap; }

    /* ── Recent Form ── */
    .team-analysis-report .ta-form-curve {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
    .team-analysis-report .ta-chip {
      width: 26px; height: 26px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 800; color: #fff;
    }
    .team-analysis-report .ta-W { background: #16a34a; }
    .team-analysis-report .ta-D { background: #6b7280; }
    .team-analysis-report .ta-L { background: #dc2626; }
    .team-analysis-report .ta-fixture-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
    .team-analysis-report .ta-fixture-table tr { border-bottom: 1px solid var(--border1); }
    .team-analysis-report .ta-fixture-table tr:last-child { border-bottom: none; }
    .team-analysis-report .ta-fixture-table td { padding: 7px 6px; color: var(--dr-text-2); vertical-align: middle; }
    .team-analysis-report .ta-fixture-table td:first-child { width: 34px; }
    .team-analysis-report .ta-fix-match { font-weight: 500; color: var(--dr-text-1); }
    .team-analysis-report .ta-fix-venue { font-size: .68rem; color: var(--dr-text-3); width: 50px; }
    .team-analysis-report .ta-fix-date  { font-size: .68rem; color: var(--dr-text-3); text-align: right; }

    /* ── Home/Away ── */
    .team-analysis-report .ta-home-away {
      display: grid; grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-ha-block {
      padding: 16px 24px; text-align: center;
    }
    .team-analysis-report .ta-ha-block:first-child { border-right: 1px solid var(--border1); }
    .team-analysis-report .ta-ha-label {
      font-size: .62rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
    }
    .team-analysis-report .ta-ha-record {
      font-size: 1.1rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: .02em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-ha-gf { font-size: .72rem; color: var(--dr-text-3); }

    /* ── Set Piece ── */
    .team-analysis-report .ta-set-piece {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-sp-tiles {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    }
    .team-analysis-report .ta-sp-tile {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 8px; padding: 12px 14px; text-align: center;
    }
    .team-analysis-report .ta-sp-val {
      font-size: 1.15rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: -.02em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-sp-label {
      font-size: .62rem; color: var(--dr-text-3); text-transform: uppercase;
      letter-spacing: .05em; font-weight: 500;
    }

    /* ── Coaching Brief ── */
    .team-analysis-report .ta-coaching-brief {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-cb-list { display: flex; flex-direction: column; gap: 12px; }
    .team-analysis-report .ta-cb-item {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 10px; padding: 14px 16px;
    }
    .team-analysis-report .ta-cb-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: #2563EB; color: #fff;
      font-size: .72rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .team-analysis-report .ta-cb-body {
      font-size: .84rem; color: var(--dr-text-2); line-height: 1.6;
    }
    .team-analysis-report .ta-cb-body strong { color: var(--dr-text-1); font-weight: 700; }

    /* ── Footer ── */
    .team-analysis-report .ta-footer {
      padding: 14px 24px;
    }
    .team-analysis-report .ta-footer-note {
      font-size: .65rem; color: var(--dr-text-3);
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .ta-query-wrap, .ta-results-wrap { padding: 16px 16px 0; }
      .ta-results-wrap { padding-bottom: 32px; }
      .ta-query-bar { flex-direction: column; }
      .ta-query-cta { width: 100%; justify-content: center; }
      .team-analysis-report .ta-perf-section { grid-template-columns: 1fr; }
      .team-analysis-report .ta-perf-col { border-right: none; border-bottom: 1px solid var(--border1); }
      .team-analysis-report .ta-key-men-grid { grid-template-columns: 1fr; }
      .team-analysis-report .ta-squad-grid { grid-template-columns: repeat(2, 1fr); }
      .team-analysis-report .ta-sp-tiles { grid-template-columns: repeat(2, 1fr); }
      .team-analysis-report .ta-fp-top { grid-template-columns: 110px 1fr 80px; }
      .team-analysis-report .ta-fp-evidence { padding-left: 0; }
      .team-analysis-report .ta-home-away { grid-template-columns: 1fr; }
    }

    /* ── League Intelligence ── */
    #league-intel-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; background: var(--bg); }
    #league-intel-panel::-webkit-scrollbar { width: 4px; }
    #league-intel-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .li-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 2rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
    .li-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text); white-space: nowrap; }
    .li-league-select { padding: 7px 12px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-size: .85rem; cursor: pointer; outline: none; min-width: 210px; }
    .li-league-select:focus { border-color: var(--accent); }
    .li-refresh-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: .8rem; display: flex; align-items: center; gap: 5px; }
    .li-refresh-btn:hover { border-color: var(--accent); color: var(--accent-text); }
    .li-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; gap: 14px; text-align: center; color: var(--text-muted); font-size: .9rem; }
    .li-empty-icon svg { opacity: .3; }
    .li-error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; gap: 12px; text-align: center; }
    .li-skeleton-wrap { padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
    .li-skel { border-radius: 12px; background: var(--surface2); animation: li-pulse 1.4s ease-in-out infinite; }
    @keyframes li-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
    .li-section { border-bottom: 1px solid var(--border); padding: 1.8rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
    .li-section-title { font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 16px; }
    /* Top row: radar + competitiveness side by side */
    .li-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media(max-width:800px){ .li-top-row { grid-template-columns: 1fr; } }
    .li-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
    .li-card-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 14px; }
    /* Competitiveness card */
    .li-comp-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
    .li-comp-score { font-size: 3rem; font-weight: 800; color: var(--accent-text); line-height: 1; }
    .li-comp-label { font-size: .85rem; font-weight: 700; color: var(--text); }
    .li-comp-context { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
    .li-comp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .li-comp-chip { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 12px; font-size: .78rem; color: var(--text-dim); }
    .li-comp-chip span { font-weight: 700; color: var(--text); }
    /* Radar SVG */
    .li-radar-wrap { display: flex; flex-direction: column; align-items: center; }
    .li-radar-compare-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .78rem; color: var(--text-muted); }
    .li-radar-compare-row select { padding: 4px 8px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-size: .78rem; cursor: pointer; }
    .li-radar-legend { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
    .li-radar-legend-item { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-muted); }
    .li-radar-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    /* Overview metric tiles */
    .li-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .li-metric-tile { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; }
    .li-metric-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
    .li-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; }
    .li-metric-sub { font-size: .73rem; color: var(--text-muted); margin-top: 3px; }
    /* Team table */
    .li-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
    .li-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    .li-table th { padding: 9px 10px; font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); text-align: right; cursor: pointer; white-space: nowrap; user-select: none; }
    .li-table th:hover { color: var(--accent-text); }
    .li-table th.li-th-team { text-align: left; }
    .li-table th.li-th-pos { text-align: center; width: 36px; }
    .li-table th.li-sort-active { color: var(--accent-text); }
    .li-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
    .li-table tr:last-child td { border-bottom: none; }
    .li-table tr:hover td { background: var(--surface2); }
    .li-td-pos { text-align: center !important; font-weight: 600; color: var(--text-muted); font-size: .78rem; }
    .li-td-team { text-align: left !important; }
    .li-team-cell { display: flex; align-items: center; gap: 8px; }
    .li-team-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 2px; }
    .li-team-name { font-weight: 600; color: var(--text); white-space: nowrap; }
    .li-td-pts { font-weight: 700; color: var(--text); }
    .li-td-enhanced { color: var(--text-dim); font-size: .82rem; }
    .li-td-enhanced.li-loading-cell { color: var(--border2); font-style: italic; }
    .li-row-top4 .li-td-pos { color: var(--accent-text); border-left: 2px solid var(--accent); }
    .li-row-rel .li-td-pos { color: #ef4444; border-left: 2px solid #ef4444; }
    /* Sort controls for team table */
    .li-sort-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .li-sort-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); font-size: .75rem; cursor: pointer; }
    .li-sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Rankings grid */
    .li-rankings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    .li-rank-col-title { font-weight: 700; font-size: .8rem; color: var(--text); margin-bottom: 10px; }
    .li-rank-sub { font-weight: 400; color: var(--text-muted); font-size: .74rem; }
    .li-rank-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
    .li-rank-item:last-child { border-bottom: none; }
    .li-rank-num { font-size: .73rem; font-weight: 700; color: var(--text-muted); width: 16px; }
    .li-rank-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 2px; }
    .li-rank-name { flex: 1; font-size: .83rem; font-weight: 600; color: var(--text); }
    .li-rank-val { font-size: .83rem; font-weight: 700; color: var(--accent-text); }
    /* Performers section */
    .li-load-btn { padding: 9px 22px; border-radius: 9px; background: var(--accent); color: #fff; border: none; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .li-load-btn:hover { opacity: .88; }
    .li-load-btn:disabled { opacity: .5; cursor: not-allowed; }
    .li-performers-note { font-size: .84rem; color: var(--text-muted); margin-bottom: 14px; max-width: 520px; }
    .li-pos-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
    .li-pos-tab { padding: 6px 16px; border-radius: 7px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
    .li-pos-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .li-performers-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media(max-width:700px){ .li-performers-layout { grid-template-columns: 1fr; } }
    .li-perf-col-title { font-weight: 700; font-size: .8rem; color: var(--text); margin-bottom: 10px; }
    .li-perf-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .li-perf-item:last-child { border-bottom: none; }
    .li-perf-rank { font-size: .73rem; font-weight: 700; color: var(--text-muted); width: 16px; }
    .li-perf-info { flex: 1; min-width: 0; }
    .li-perf-name { font-size: .83rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .li-perf-team { font-size: .73rem; color: var(--text-muted); }
    .li-perf-stat { font-size: .88rem; font-weight: 700; color: var(--accent-text); }
    .li-perf-sub { font-size: .71rem; color: var(--text-muted); }
    .li-perf-view { padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border2); background: transparent; color: var(--text-muted); font-size: .72rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
    .li-perf-view:hover { border-color: var(--accent); color: var(--accent-text); }
    .li-perf-meta { font-size: .73rem; color: var(--text-muted); margin-top: 14px; text-align: right; }
    /* Position value map bars */
    .li-pvm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .li-pvm-card { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; }
    .li-pvm-pos { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); margin-bottom: 8px; }
    .li-pvm-stat { font-size: .78rem; color: var(--text-dim); margin-top: 4px; }
    .li-pvm-val { font-weight: 700; color: var(--text); }

    /* Query bar */
    #dna-form-wrap { padding: 22px 28px 0; }
    .dna-query-bar {
      display: grid; grid-template-columns: 1fr auto; gap: 8px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 8px;
      align-items: stretch; position: relative;
    }
    .dna-query-field {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 14px; border-radius: var(--r-sm);
      transition: background .15s; cursor: text; min-width: 0;
    }
    .dna-query-field:hover { background: var(--surface2); }
    .dna-query-field:focus-within { background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--accent); }
    .dna-search-icon { color: var(--text-muted); flex-shrink: 0; }
    .dna-query-field-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .dna-query-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px; }
    .dna-query-input { border: 0; background: transparent; padding: 0; outline: none; font-family: var(--font); font-size: 15px; color: var(--text); width: 100%; }
    .dna-query-input::placeholder { color: var(--text-muted); }
    .dna-query-cta {
      background: var(--ink); color: var(--ink-text); border: 0; border-radius: var(--r-sm);
      padding: 0 22px; font-family: var(--font); font-size: 14px; font-weight: 600;
      cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
      transition: background .12s; white-space: nowrap;
    }
    .dna-query-cta:hover { background: #1a1a1a; }
    .dna-query-cta:disabled { background: #737373; cursor: default; }
    .dna-query-helpers { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; padding: 0 2px; }
    .dna-helper-label { font-family: var(--font-mono); font-size: 10px; color: #a3a3a3; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
    .dna-recent-chip {
      background: #fff; border: 1px solid #e7e5e4; border-radius: 9999px;
      padding: 5px 12px; font-size: 12px; color: #404040;
      cursor: pointer; transition: border-color .12s, color .12s;
      display: inline-flex; align-items: center; gap: 6px; font-family: var(--font);
    }
    .dna-recent-chip:hover { border-color: #d6d3d1; color: #0a0a0a; }
    .dna-recent-chip.active { background: #000; color: #fff; border-color: #000; }
    .dna-chip-crest { width: 14px; height: 14px; border-radius: 3px; color: #fff; font-family: var(--font-mono); font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
    /* Dropdown positioning inside query bar */
    .dna-query-bar #dna-team-dropdown { position: absolute; left: 8px; right: 130px; top: calc(100% + 6px); z-index: 200; }

    #dna-results { padding: 18px 28px 40px; }

    @media (max-width: 900px) {
      .team-dna-report .dna-perf-section { grid-template-columns: 1fr; }
      .team-dna-report .dna-home-away { grid-template-columns: 1fr; }
      .team-dna-report .dna-squad-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .team-dna-report .dna-fp-top { grid-template-columns: 130px 1fr 90px; }
      .team-dna-report .dna-fp-evidence { padding-left: 0; }
    }

    /* ── Responsive ── */
    @media (max-width: 700px) {
      #sidebar { width: 60px !important; }   /* beats any inline width set by drag/toggle */
      #sidebar .logo-name,
      #sidebar .logo-sub,
      #sidebar .nav-label,
      #sidebar .nav-badge,
      #sidebar .nav-section-label,
      #sidebar .nav-divider,
      #sidebar .sidebar-footer { opacity: 0; pointer-events: none; width: 0; overflow: hidden; margin: 0; padding: 0; height: 0; }
      #sidebar .nav-item { justify-content: center; padding: 0; width: 32px; height: 32px; margin: 0 auto; border-radius: 8px; border-color: transparent !important; flex-shrink: 0; }
      #sidebar .sidebar-logo { justify-content: center; padding: 16px 0; }
      #sidebar .logo-mark { justify-content: center; margin-bottom: 0; }
      #sidebar-toggle { display: none; }
    }
    @media (max-width: 600px) {
      #sidebar { display: none !important; }
      .msg-row { padding: 4px 14px; }
      .bubble  { max-width: 94%; }
      #inputbar { padding: 10px 12px 14px; }
      .sr-grid { grid-template-columns: repeat(2, 1fr); }
      .comparison-grid { grid-template-columns: 1fr; }
      .input-wrap { border-radius: 16px; padding: 8px 8px 8px 16px; }
      /* Chat rail becomes a slide-in drawer on mobile, opened by #mobile-chats-btn. */
      #chat-rail {
        display: flex !important;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 84%; max-width: 320px; z-index: 60;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 24px rgba(0,0,0,.4);
      }
      #chat-rail.drawer-open { transform: translateX(0) !important; }
      #chat-drawer-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
        opacity: 0; pointer-events: none; transition: opacity .25s;
      }
      #chat-drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; }
      /* National Scout build page: stop league cards clipping off the right
         edge by giving each card the full row and tightening the page gutter. */
      .ns-content { padding: 16px 14px 32px; gap: 10px; }
      .ns-leagues-grid { grid-template-columns: 1fr; }
      .ns-form-hero { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
      /* The long descriptive subtitle hard-truncates to "Build i…" on a phone —
         hide it (like #topbar .sub) so the Build/Report toggle has room. */
      #ns-topbar .panel-intro-desc { display: none; }
    }

    /* ─── Shortlist ──────────────────────────────────────────────────────── */
    .tab-badge {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--accent); color: #fff;
      font-size: .55rem; font-weight: 700;
      min-width: 16px; height: 16px; border-radius: 9999px;
      padding: 0 4px; margin-left: 4px; vertical-align: middle;
    }
    #shortlist-panel { display: flex; }
    #shortlist-subtabs {
      padding: 14px 24px 0; display: flex; gap: 6px;
      background: var(--surface2); border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .sl-pill {
      font-family: var(--font); font-size: .72rem; font-weight: 600;
      padding: 7px 18px; border-radius: 9999px 9999px 0 0;
      border: 1px solid var(--border2); border-bottom: none;
      background: var(--surface2); color: var(--text-muted);
      cursor: pointer; transition: background .12s, color .12s;
      letter-spacing: .01em; position: relative; bottom: -1px;
    }
    .sl-pill:hover { background: var(--surface3); color: var(--text); }
    .sl-pill.active { background: var(--surface2); color: var(--text); }
    .sl-section { flex: 1; overflow-y: auto; }
    .sl-section::-webkit-scrollbar { width: 4px; }
    .sl-section::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .sl-section-inner { max-width: 880px; margin: 0 auto; padding: 28px 24px; }
    .sl-search-wrap { position: relative; margin-bottom: 8px; }
    .sl-search-input {
      width: 100%; padding: 11px 16px;
      border: 1px solid var(--border2); border-radius: 12px;
      background: var(--surface); color: var(--text);
      font-family: var(--font); font-size: .88rem;
      outline: none; transition: border-color .15s; box-sizing: border-box;
    }
    .sl-search-input:focus { border-color: var(--teal); }
    .sl-search-note { font-size: .68rem; color: var(--text-muted); margin: 0 0 20px; }
    .sl-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.09);
      z-index: 100; overflow: hidden;
    }
    .sl-dropdown-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; cursor: pointer;
      border-bottom: 1px solid var(--border); transition: background .1s;
    }
    .sl-dropdown-item:last-child { border-bottom: none; }
    .sl-dropdown-item:hover { background: var(--surface2); }
    .sl-dropdown-item.sl-dd-disabled { opacity: .45; cursor: default; pointer-events: none; }
    .sl-dd-photo {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--surface3); object-fit: cover; flex-shrink: 0;
      border: 1px solid var(--border2);
    }
    .sl-dd-name { font-family: var(--font-display); font-weight: 600; font-size: .83rem; color: var(--text); }
    .sl-dd-meta { font-size: .68rem; color: var(--text-muted); }
    .sl-dropdown-msg { padding: 14px; font-size: .78rem; color: var(--text-muted); text-align: center; }
    .sl-preview-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; overflow: hidden; }
    .sl-preview-header {
      background: var(--rui-dark); padding: 20px 22px;
      display: flex; align-items: center; gap: 16px;
    }
    .sl-preview-photo {
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(255,255,255,.1); object-fit: cover; flex-shrink: 0;
      border: 2px solid rgba(255,255,255,.15);
    }
    .sl-preview-info { flex: 1; min-width: 0; }
    .sl-preview-name {
      font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
      color: #fff; letter-spacing: -0.02em; margin-bottom: 4px;
    }
    .sl-preview-meta { color: rgba(255,255,255,.55); font-size: .74rem; }
    .sl-preview-score-wrap { text-align: right; flex-shrink: 0; }
    .sl-preview-score {
      font-family: var(--font-display); font-size: 1.9rem;
      font-weight: 700; line-height: 1; letter-spacing: -0.04em;
    }
    .sl-score-green { color: var(--rui-teal); }
    .sl-score-amber { color: var(--rui-warning); }
    .sl-score-grey  { color: var(--rui-gray); }
    .sl-preview-score-label { font-family: var(--font-mono); font-size: .58rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
    .sl-preview-body { padding: 16px 22px; }
    .sl-preview-stats {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px; margin-bottom: 16px;
    }
    .sl-stat-tile {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 9px 11px;
    }
    .sl-stat-label { font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-bottom: 3px; }
    .sl-stat-value { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--text); }
    .sl-add-btn {
      width: 100%; padding: 11px; border-radius: 10px; border: none;
      font-family: var(--font-display); font-size: .83rem; font-weight: 700;
      cursor: pointer; transition: opacity .15s; letter-spacing: -0.01em;
    }
    .sl-add-btn.add { background: var(--teal); color: #fff; }
    .sl-add-btn.add:hover { opacity: .85; }
    .sl-add-btn.added { background: var(--surface3); color: var(--text-muted); cursor: default; border: 1px solid var(--border2); }
    /* Search had no way through to a profile: the card could only shortlist. */
    .sl-preview-actions { display: flex; gap: 8px; }
    .sl-preview-actions .sl-add-btn { flex: 1 1 0; min-width: 0; }
    .sl-add-btn.open { background: var(--accent); color: #fff; }
    .sl-add-btn.open:hover { opacity: .85; }
    .sl-list-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .sl-list-count { font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--text); }
    .sl-clear-btn {
      background: none; border: 1px solid var(--border2); border-radius: 9999px;
      padding: 5px 14px; font-family: var(--font); font-size: .72rem; font-weight: 600;
      color: var(--rui-danger); cursor: pointer; transition: background .12s;
    }
    .sl-clear-btn:hover { background: rgba(226,59,74,.06); }
    .sl-group-label {
      font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .12em; color: var(--text-muted);
      margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    }
    .sl-card-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    @media (max-width: 900px) { .sl-card-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 580px) { .sl-card-grid { grid-template-columns: 1fr; } }
    .sl-card {
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 14px; overflow: hidden; transition: box-shadow .15s;
    }
    .sl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
    .sl-card-header {
      background: var(--rui-dark); padding: 14px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .sl-card-photo {
      width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1);
      object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.15);
    }
    .sl-card-name {
      font-family: var(--font-display); font-size: .83rem; font-weight: 700;
      color: #fff; letter-spacing: -0.01em; flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sl-card-score { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
    .sl-card-body { padding: 12px 14px; }
    .sl-card-meta { font-size: .7rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
    .sl-card-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
    .sl-card-stat { font-size: .68rem; color: var(--text-muted); }
    .sl-card-actions { display: flex; gap: 6px; }
    .sl-card-btn {
      flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--border2);
      background: none; font-family: var(--font); font-size: .7rem; font-weight: 600;
      color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
    }
    .sl-card-btn:hover { background: var(--surface2); color: var(--text); }
    .sl-card-btn.compare-active { background: rgba(59,130,246,.1); border-color: var(--teal); color: var(--teal); }
    .sl-card-btn.remove:hover { background: rgba(226,59,74,.06); color: var(--rui-danger); border-color: var(--rui-danger); }
    .sl-compare-pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
    .sl-compare-pill {
      display: flex; align-items: center; gap: 7px;
      background: var(--surface2); border: 1px solid var(--border2); border-radius: 9999px;
      padding: 5px 12px 5px 8px; font-size: .74rem; font-weight: 500; color: var(--text-dim);
      cursor: pointer; transition: background .12s, border-color .12s, color .12s; user-select: none;
    }
    .sl-compare-pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    .sl-compare-pill.selected { background: rgba(37,99,235,.12); border-color: var(--accent); color: var(--text); }
    .sl-compare-hint { font-size: .72rem; color: var(--text-muted); margin-bottom: 16px; }
    .sl-compare-table-outer { overflow-x: auto; border: 1px solid var(--border2); border-radius: 14px; margin-bottom: 20px; }
    .sl-compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .sl-compare-table th {
      padding: 10px 14px; text-align: center;
      font-family: var(--font-display); font-size: .75rem; font-weight: 700;
      color: var(--text); background: var(--surface3);
      border-bottom: 1px solid var(--border2); white-space: nowrap;
    }
    .sl-compare-table th:first-child { text-align: left; font-family: var(--font-mono); color: var(--text-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
    .sl-compare-table td {
      padding: 8px 14px; text-align: center;
      border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap;
    }
    .sl-compare-table td:first-child { text-align: left; color: var(--text-dim); font-size: .75rem; }
    .sl-compare-table tbody tr:last-child td { border-bottom: none; }
    .sl-compare-table tbody tr:hover { background: rgba(0,0,0,.02); }
    .sl-compare-table tr.score-row td { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
    .cell-best  { color: var(--teal) !important; font-weight: 700 !important; }
    .cell-worst { color: var(--text-muted) !important; }
    .sl-compare-summary-card {
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 14px; padding: 18px 20px;
    }
    .sl-summary-label { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 10px; }
    .sl-summary-text { font-size: .84rem; color: var(--text); line-height: 1.7; }
    .sl-summary-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .8rem; }
    #sl-toast-container {
      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
      display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
    }
    .sl-toast {
      background: var(--rui-dark); color: #fff; border-radius: 10px;
      padding: 10px 16px; font-size: .78rem; font-weight: 500;
      box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 280px;
      animation: toastIn .18s ease;
    }
    .sl-toast.success { border-left: 3px solid var(--teal); }
    .sl-toast.info    { border-left: 3px solid var(--rui-blue); }
    @keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .sl-empty { text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: .84rem; }
    .sl-empty-icon { font-size: 2rem; margin-bottom: 12px; }
    .sl-empty h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; letter-spacing: -0.01em; }
    .sl-inject-btn {
      background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3);
      border-radius: 9999px; padding: 4px 12px;
      font-family: var(--font); font-size: .65rem; font-weight: 700;
      color: var(--teal); cursor: pointer; transition: background .12s; white-space: nowrap;
    }
    .sl-inject-btn:hover { background: rgba(59,130,246,.2); }

    /* ── Player Discovery ─────────────────────────────────────────────────── */
    #discovery-panel { flex: 1; overflow-y: auto; padding: 32px 28px; flex-direction: column; }
    .pd-inner { max-width: 620px; margin: 0 auto; width: 100%; padding-top: 32px; }

    .pd-mode-row { display: flex; gap: 10px; margin-bottom: 28px; }
    .pd-mode-btn {
      flex: 1; padding: 12px 20px; border-radius: 12px;
      border: 1px solid var(--border2); background: var(--surface);
      font-size: .88rem; font-weight: 600; cursor: pointer; transition: .12s; font-family: var(--font);
    }
    .pd-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    .pd-step-bar { display: flex; align-items: center; margin-bottom: 28px; }
    .pd-step-node { display: flex; flex-direction: column; align-items: center; gap: 4px;
      font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; min-width: 60px; }
    .pd-step-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border2);
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 700; color: var(--text-muted); transition: .15s; }
    .pd-step-line { flex: 1; height: 2px; background: var(--border2); transition: background .15s; }
    .pd-step-node.active .pd-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
    .pd-step-node.done .pd-step-dot  { background: var(--teal);   border-color: var(--teal);   color: #fff; }
    .pd-step-node.active { color: var(--text); }
    .pd-step-node.done   { color: var(--teal); }
    .pd-step-line.done   { background: var(--teal); }

    .pd-pitch-wrap { background: #2a5c24; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
    .pd-pitch-wrap svg { width: 100%; height: auto; display: block; }
    .pd-zone-rect { fill: rgba(255,255,255,.1); cursor: pointer; transition: fill .12s; }
    .pd-zone-rect:hover { fill: rgba(255,255,255,.22); }
    .pd-zone-rect.selected { fill: var(--teal); }
    .pd-zone-label { fill: rgba(255,255,255,.85); font-size: 10px; font-weight: 700;
      pointer-events: none; text-anchor: middle; dominant-baseline: middle; font-family: var(--font); }
    .pd-zone-group.selected .pd-zone-label { fill: #fff; }

    .pd-role-desc { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
      padding: 11px 15px; font-size: .81rem; color: var(--text-dim); margin-bottom: 18px; min-height: 36px; }

    .pd-priority-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
    .pd-priority-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
      padding: 11px 14px; display: flex; align-items: center; gap: 10px;
      cursor: grab; transition: box-shadow .12s, opacity .12s; user-select: none; }
    .pd-priority-card:active { cursor: grabbing; }
    .pd-priority-card.dragging { opacity: .5; }
    .pd-priority-card.drag-over { border-color: var(--teal); background: rgba(59,130,246,.06); }
    .pd-priority-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
      color: #fff; font-size: .67rem; font-weight: 700; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; }
    .pd-priority-name { flex: 1; font-size: .83rem; font-weight: 600; }
    .pd-priority-weight { font-size: .7rem; color: var(--teal); font-weight: 700; }

    .pd-label { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
    .pd-constraint-section { margin-bottom: 18px; }
    .pd-age-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-dim); }
    .pd-age-input { width: 56px; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 8px;
      background: var(--surface); font-size: .82rem; text-align: center; font-family: var(--font); }
    .pd-mins-row { display: flex; gap: 7px; flex-wrap: wrap; }
    .pd-mins-btn { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--border2);
      background: var(--surface); font-size: .76rem; cursor: pointer; transition: .12s; font-family: var(--font); }
    .pd-mins-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pd-league-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .pd-league-check { display: flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }

    .pd-review-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
      padding: 18px 20px; margin-bottom: 18px; }
    .pd-review-heading { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 14px; }
    .pd-review-row { display: flex; justify-content: space-between; font-size: .82rem;
      color: var(--text-dim); margin-bottom: 5px; }
    .pd-review-row strong { color: var(--text); }
    .pd-pri-bar-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; margin-bottom: 5px; }
    .pd-pri-bar-label { min-width: 160px; color: var(--text-dim); }
    .pd-pri-bar-wrap { flex: 1; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
    .pd-pri-bar-fill { height: 100%; background: var(--teal); border-radius: 3px; }
    .pd-pri-bar-pct { font-size: .67rem; color: var(--text-muted); min-width: 30px; text-align: right; }

    .pd-describe-textarea { width: 100%; min-height: 112px; padding: 13px 15px; border-radius: 12px;
      border: 1px solid var(--border2); background: var(--surface); resize: vertical;
      font-size: .84rem; font-family: var(--font); box-sizing: border-box; }
    .pd-describe-textarea:focus { outline: none; border-color: var(--teal); }
    .pd-interpreted-box { background: var(--surface); border: 1px solid rgba(59,130,246,.3);
      border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
    .pd-interpreted-ok { color: var(--teal); font-weight: 700; font-size: .84rem; margin-bottom: 12px; }

    .pd-nav-row { display: flex; gap: 10px; justify-content: space-between; margin-top: 4px; }
    .pd-btn { padding: 9px 20px; border-radius: 9999px; font-size: .8rem; font-weight: 600;
      cursor: pointer; transition: .12s; border: none; font-family: var(--font); }
    .pd-btn-primary  { background: var(--accent); color: #fff; }
    .pd-btn-primary:hover  { opacity: .87; }
    .pd-btn-primary:disabled { opacity: .4; cursor: default; }
    .pd-btn-secondary { background: var(--surface); border: 1px solid var(--border2); color: var(--text); }
    .pd-btn-secondary:hover { background: var(--surface2); }
    .pd-btn-teal { background: var(--teal); color: #fff; }
    .pd-btn-teal:hover { opacity: .88; }
    .pd-btn-teal:disabled { opacity: .4; cursor: default; }

    .pd-loading { display: none; flex-direction: column; align-items: center; gap: 14px;
      padding: 40px 0; text-align: center; }
    .pd-loading.visible { display: flex; }
    .pd-loading-bar-wrap { width: 220px; height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; }
    .pd-loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), #60a5fa);
      border-radius: 2px; transition: width 1s ease-out; }
    .pd-loading-lbl { font-size: .75rem; color: var(--text-muted); }

    .pd-results-header { background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
      padding: 13px 16px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
    .pd-results-title { font-weight: 700; font-size: .9rem; }
    .pd-results-sub { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

    .pd-result-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
      margin-bottom: 10px; overflow: hidden; transition: box-shadow .12s; }
    .pd-result-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
    .pd-result-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      border-bottom: 1px solid var(--border); }
    .pd-result-rank { font-size: 1.15rem; font-weight: 800; color: var(--text-muted); min-width: 30px; text-align: center; }
    .pd-result-rank.gold   { color: #f59e0b; }
    .pd-result-rank.silver { color: #94a3b8; }
    .pd-result-rank.bronze { color: #cd7c4b; }
    .pd-result-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
      background: var(--surface2); flex-shrink: 0; }
    .pd-result-info { flex: 1; min-width: 0; }
    .pd-result-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-result-meta { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
    .pd-result-score { font-size: 1.05rem; font-weight: 800; color: var(--teal); text-align: right; flex-shrink: 0; }
    .pd-result-score-lbl { font-size: .58rem; color: var(--text-muted); font-weight: 400; display: block; }
    .pd-result-sl { padding: 5px 11px; border-radius: 9999px; background: rgba(59,130,246,.1);
      border: 1px solid rgba(59,130,246,.3); color: var(--teal); font-size: .64rem; font-weight: 700;
      cursor: pointer; transition: .12s; flex-shrink: 0; font-family: var(--font); }
    .pd-result-sl:hover { background: rgba(59,130,246,.2); }
    .pd-result-sl.added { background: var(--surface3); color: var(--text-muted); border-color: var(--border2); cursor: default; }

    .pd-breakdown { padding: 11px 14px; border-bottom: 1px solid var(--border); }
    .pd-bd-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: .73rem; }
    .pd-bd-label { min-width: 150px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-bd-bar-wrap { flex: 1; height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
    .pd-bd-bar-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width .4s ease-out; }
    .pd-bd-val { font-size: .68rem; color: var(--text-muted); min-width: 28px; text-align: right; }
    .pd-bd-star { color: #f59e0b; font-size: .68rem; min-width: 10px; }

    .pd-key-stats { padding: 9px 14px; display: flex; gap: 14px; flex-wrap: wrap; }
    .pd-kstat { font-size: .73rem; color: var(--text-dim); }
    .pd-kstat strong { color: var(--text); font-weight: 700; }

    #pd-load-more { display: block; width: 100%; padding: 10px; border-radius: 9999px;
      border: 1px solid var(--border2); background: var(--surface); font-size: .8rem;
      font-weight: 600; cursor: pointer; margin: 2px 0 16px; transition: .12s; font-family: var(--font); }
    #pd-load-more:hover { background: var(--surface2); }

    .pd-chat-link { margin-top: 16px; text-align: center; font-size: .8rem; color: var(--text-muted); margin-bottom: 24px; }
    .pd-chat-link button { background: none; border: none; color: var(--accent-text); font-weight: 700;
      cursor: pointer; font-size: .8rem; text-decoration: underline; font-family: var(--font); }

    .pd-no-results { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: .84rem; line-height: 1.6; display: none; }

    /* Archetype tray in Build Profile */
    #pb-archetype-tray { margin-bottom: 16px; }
    #pb-archetype-label {
      font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); margin-bottom: 8px;
    }
    #pb-archetype-tray .pd-role-cards { grid-template-columns: repeat(4, 1fr); }
    .pb-archetype-placeholder {
      grid-column: 1 / -1; padding: 18px; text-align: center;
      font-size: .78rem; color: var(--text-muted);
      border: 1.5px dashed var(--border2); border-radius: 10px;
    }
    @media (max-width: 600px) {
      #pb-archetype-tray .pd-role-cards { grid-template-columns: 1fr 1fr; }
    }

    /* Role archetype cards */
    .pd-role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 2px; }
    .pd-role-card {
      background: var(--surface); border: 1.5px solid var(--border2); border-radius: 10px;
      padding: 11px 13px; cursor: pointer; transition: border-color .12s, background .12s;
    }
    .pd-role-card:hover { border-color: var(--accent); background: var(--surface2); }
    .pd-role-card.selected { border-color: var(--teal); background: rgba(59,130,246,.06); }
    .pd-role-card-custom { border-style: dashed; }
    .pd-role-card-custom.selected { border-style: solid; }
    .pd-role-card-name { font-weight: 700; font-size: .82rem; margin-bottom: 4px; color: var(--text); }
    .pd-role-card-desc { font-size: .7rem; color: var(--text-muted); margin-bottom: 7px; line-height: 1.4; }
    .pd-role-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .pd-role-tag { font-size: .61rem; padding: 2px 7px; border-radius: 9999px;
      background: var(--surface3); color: var(--text-dim); font-weight: 600; }
    .pd-role-tag-custom { background: rgba(59,130,246,.1); color: var(--teal); }

    /* Swap select on priority cards */
    .pd-swap-select {
      appearance: none; -webkit-appearance: none;
      background: var(--surface2); border: 1px solid var(--border2);
      border-radius: 6px; font-size: .67rem; padding: 2px 7px; cursor: pointer;
      color: var(--text-muted); font-family: var(--font); flex-shrink: 0;
    }
    .pd-swap-select:focus { outline: none; border-color: var(--teal); }
    .pd-swap-select:hover { border-color: var(--accent); }

    /* Custom priority pick mode */
    .pd-custom-pick-hint { font-size: .75rem; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; }
    .pd-custom-pool { display: flex; flex-wrap: wrap; gap: 8px; }
    .pd-pool-chip {
      padding: 7px 15px; border-radius: 9999px; border: 1.5px solid var(--border2);
      background: var(--surface); font-size: .79rem; cursor: pointer; transition: .12s;
      font-family: var(--font); font-weight: 500; color: var(--text);
    }
    .pd-pool-chip:hover { border-color: var(--accent); background: var(--surface2); }
    .pd-pool-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pd-pool-chip:disabled { opacity: .4; cursor: default; }

    @media (max-width: 580px) {
      #discovery-panel { padding: 18px 12px; }
      .pd-bd-label { min-width: 110px; font-size: .67rem; }
      .pd-result-rank { min-width: 22px; font-size: 1rem; }
      .pd-role-cards { grid-template-columns: 1fr; }
    }

    /* ── Mobile bottom nav ── */
    #mobile-nav {
      display: none;
    }
    /* 700px, the width at which the top nav row hides (#navrow, v3 mobile block): at 600 a
       window between 601 and 700px wide had no navigation at all (31 Oct 2026). */
    @media (max-width: 700px) {
      #mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 200;
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
      }
      .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: .58rem;
        font-weight: 600;
        font-family: var(--font);
        letter-spacing: .02em;
        cursor: pointer;
        padding: 4px 0;
        min-height: 48px;
        justify-content: center;
        transition: color .12s;
        text-transform: uppercase;
      }
      .mob-nav-btn svg { width: 20px; height: 20px; transition: color .12s; }
      .mob-nav-btn.active { color: var(--accent-text); }
      /* ── Mobile scroll hardening ──────────────────────────────────────────
         The bottom nav is position:fixed (~61px tall) and overlays content, so
         every primary scroll panel needs clearance for it. iOS Safari also
         refuses to touch-scroll a flex child whose min-height is auto, so
         min-height:0 + momentum scrolling are required for the chat and the
         league/player panels to pan reliably on a phone.

         The clearance is a real in-flow ::after box, NOT padding-bottom on the
         container. WebKit ends a scroller's scrollable area at the content edge
         and drops the container's own bottom padding from scrollHeight, so
         padding here means the last 72px of content sits permanently behind the
         fixed nav on iOS Safari with no way to scroll to it — which is exactly
         how the Scout "Run Search" button became unreachable once a profile was
         interpreted. It looked fine everywhere else because desktop Chrome does
         count the padding, and a home-screen web app has no Safari toolbars, so
         the same screen fits without needing to scroll at all. A child box is
         counted by every engine. */
      #inputbar { padding-bottom: calc(18px + 64px); }
      /* The bar's clearance lifts the composer, so the "Latest" pill moves up with it: at 92px it
         sat on the composer's text (31 Oct 2026). */
      #chat-latest-chip { bottom: 150px; }
      #messages::after,
      #home-panel::after,
      #pulse-panel::after,
      #worldcup-panel::after,
      #wire-panel::after,
      #refractions-panel::after,
      #scout-panel .ns-screen::after,
      #ph-discover::after,
      #ph-profile::after,
      #ph-shortlist .sl-section::after {
        content: '';
        display: block;
        width: 100%;
        height: 72px;
        flex: 0 0 72px;   /* flex-column parents would otherwise shrink it away */
      }
      #messages,
      #home-panel,
      #pulse-panel,
      #worldcup-panel,
      #wire-panel,
      #refractions-panel,
      #scout-panel .ns-screen,
      #ph-discover,
      #ph-profile,
      #ph-shortlist .sl-section {
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      /* Vertically-centred intro screens (chat welcome, pulse empty state) clip
         their own content top AND bottom once it's taller than the viewport —
         which it always is on a phone. Anchor them to the top so the scroll
         container can reveal every row instead of centring the overflow away. */
      #welcome,
      #pulse-panel .pulse-empty-state {
        justify-content: flex-start;
        flex: none;
        height: auto;
        min-height: 0;
        padding-top: 24px;
      }
      /* A scroll container's own padding-bottom is unreliably excluded from
         scrollHeight in a flex-column overflow context (Chrome), so the last
         child (chat leagues note) ends up trapped behind the fixed nav. Put the
         nav clearance on the content itself, where child padding always counts. */
      #welcome { padding-bottom: 96px; }

      /* ── Scout (Discover) — tighten layout on phones ──────────────────────
         The position pitch is portrait (300×420) so at full panel width it
         grows ~490px tall and swallows the screen edge-to-edge. Add side
         gutters, trim the top gap, cap the pitch width and centre it, and let
         the three mode buttons sit cleanly on one line. */
      .pd-inner { padding: 16px 16px 0; }
      .pd-pitch-wrap { max-width: 240px; margin: 0 auto 14px; padding: 10px; }
      .pd-mode-row { gap: 7px; margin-bottom: 20px; }
      .pd-mode-btn { padding: 11px 6px; font-size: .78rem; white-space: nowrap; }
    }

    /* ── Dashboard ─────────────────────────────────────────────────────────── */
    .dashboard-canvas {
      background: var(--bg); flex: 1; min-width: 0; overflow-y: auto;
      color: var(--text); font-family: var(--font);
    }

    /* Persistent search bar */
    .dash-topbar {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 2rem; border-bottom: 1px solid var(--border);
      background: var(--surface); position: sticky; top: 0; z-index: 10;
    }
    .dash-topbar-label { color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
    .dash-topbar-search { position: relative; flex: 1; max-width: 380px; }
    .dash-topbar-search input {
      width: 100%; padding: 7px 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border2);
      color: var(--text); font-size: .84rem; outline: none;
    }
    .dash-topbar-search input:focus { border-color: var(--accent); }
    .dash-topbar-search input::placeholder { color: var(--text-muted); }

    /* Empty state */
    .dash-empty-state {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; min-height: 100%; gap: 28px; padding: 60px 24px;
      text-align: center;
      background:
        radial-gradient(ellipse 70% 55% at 50% 100%, rgba(16,185,129,.06) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='none'/%3E%3Cline x1='0' y1='200' x2='600' y2='200' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3Ccircle cx='300' cy='200' r='70' fill='none' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3Crect x='220' y='140' width='160' height='120' fill='none' stroke='rgba(255,255,255,.025)' stroke-width='1'/%3E%3C/svg%3E") center/cover no-repeat;
    }
    .dash-empty-icon {
      width: 64px; height: 64px; border-radius: 18px;
      background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.25);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 32px rgba(37,99,235,.15);
    }
    .dash-empty-state h2 {
      font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
      letter-spacing: -0.04em; color: var(--text); margin-bottom: 6px; line-height: 1.1;
    }
    .dash-empty-state p { font-size: .9rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; margin: 0; }
    .dash-search-wrap { position: relative; width: 100%; max-width: 520px; }
    .dash-search-wrap input {
      width: 100%; padding: 16px 20px; border-radius: 14px;
      background: var(--surface); border: 1.5px solid var(--border2);
      color: var(--text); font-size: 1rem; outline: none;
      box-shadow: 0 2px 12px rgba(0,0,0,.1);
      transition: border-color .15s, box-shadow .15s;
    }
    .dash-search-wrap input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 2px 12px rgba(0,0,0,.1);
    }
    .dash-suggest-label { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
    .dash-suggest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
    .dash-suggest-chip {
      padding: 7px 16px; border-radius: 9999px; font-size: .8rem; font-weight: 600;
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text-muted);
      cursor: pointer; transition: border-color .12s, color .12s, background .12s;
    }
    .dash-suggest-chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }

    /* Sections */
    .dash-section {
      border-bottom: 1px solid var(--border); padding: 2rem;
      max-width: 1100px; margin: 0 auto; background: var(--bg);
    }
    .dash-section-title {
      font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
      color: var(--accent-text); font-size: .72rem; font-weight: 600; margin-bottom: 6px;
    }
    .dash-section-subtitle { color: var(--text-muted); font-size: .8rem; margin-bottom: 16px; }

    /* Skeleton loaders */
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .dash-skeleton {
      background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
      background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 10px;
    }
    .dash-skeleton-header { height: 140px; }
    .dash-skeleton-chart  { height: 280px; }
    .dash-skeleton-bars   { height: 220px; }

    /* Player header hero */
    .dash-player-hero {
      background: #0d0d12; padding: 28px 2rem 24px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .dash-player-header { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
    .dash-player-photo {
      width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
      flex-shrink: 0;
    }
    .dash-player-photo-placeholder {
      width: 96px; height: 96px; border-radius: 50%;
      background: #1a1a22; display: flex; align-items: center;
      justify-content: center; font-size: 2.4rem; flex-shrink: 0;
    }
    .dash-player-info { flex: 1; min-width: 180px; }
    .dash-player-name {
      font-family: var(--font-display); font-size: 1.9rem; font-weight: 800;
      letter-spacing: -0.04em; color: #fff; line-height: 1.1;
    }
    .dash-player-meta { color: rgba(255,255,255,.5); font-size: .87rem; margin-top: 5px; }
    .dash-header-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .dash-action-btn {
      padding: 7px 16px; border-radius: 8px; font-size: .8rem; cursor: pointer;
      border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.75); transition: background .15s, border-color .15s, color .15s;
    }
    .dash-action-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
    .dash-action-btn.primary {
      background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #10b981;
    }
    .dash-action-btn.primary:hover { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.6); }
    .dash-quick-stats {
      display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap;
      padding: 12px 16px; background: var(--surface);
      border-radius: 10px; font-size: .82rem; border: 1px solid var(--border);
    }
    .dash-qs-item { text-align: center; }
    .dash-qs-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
    .dash-qs-lbl { color: var(--text-muted); font-size: .7rem; margin-top: 2px; }
    .dash-season-badge {
      font-size: .72rem; color: rgba(37,99,235,.9); background: rgba(37,99,235,.12);
      border: 1px solid rgba(37,99,235,.2);
      border-radius: 6px; padding: 3px 8px; display: inline-block; margin-top: 10px;
    }
    /* Header section edge-to-edge */
    .dash-header-section { padding: 0 !important; overflow: hidden; }
    .dash-stat-strip-wrap { padding: 16px 2rem 24px; max-width: 1100px; margin: 0 auto; }

    /* Score badge */
    .dash-score-badge {
      width: 62px; height: 62px; border-radius: 50%;
      border: 2px solid currentColor;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1;
      background: rgba(0,0,0,.3);
    }
    .dash-score-badge-sub { font-size: .6rem; font-weight: 400; opacity: .65; margin-top: 1px; }

    /* Radar legend */
    .dash-radar-wrap { max-width: 460px; margin: 0 auto; }
    .dash-radar-legend {
      display: flex; justify-content: center; gap: 20px;
      font-size: .75rem; margin-top: 12px;
    }
    .dl-player { color: var(--accent-text); font-weight: 600; }
    .dl-avg    { color: var(--text-muted); }
    .dl-elite  { color: #d97706; }

    /* Percentile bars */
    .dash-pct-row { margin-bottom: 18px; }
    .dash-pct-label { font-size: .8rem; color: var(--text); margin-bottom: 5px; font-weight: 500; }
    .dash-pct-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
    .dash-pct-bar-track {
      flex: 1; background: var(--surface3); border-radius: 4px; height: 9px; overflow: hidden;
    }
    .dash-pct-bar-fill { height: 9px; border-radius: 4px; transition: width .6s ease; }
    .pct-gold  { background: #d97706; }
    .pct-green { background: #059669; }
    .pct-white { background: var(--teal); }
    .pct-muted { background: #94a3b8; }
    .dash-pct-pct  { font-size: .75rem; color: var(--text-muted); min-width: 90px; white-space: nowrap; }
    .dash-elite-badge {
      font-size: .65rem; background: rgba(217,119,6,.12); color: #d97706;
      border-radius: 4px; padding: 1px 6px; font-weight: 600;
    }
    .dash-pct-meta { font-size: .73rem; color: var(--text-muted); }

    /* xG summary row */
    .dash-xg-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
    .dash-xg-cell {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; text-align: center;
    }
    .dash-xg-cell-val { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
    .dash-xg-cell-lbl { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
    .dash-xg-efficiency { font-size: .75rem; font-weight: 600; margin-top: 4px; }
    .eff-clinical { color: #059669; }
    .eff-expected { color: var(--text-muted); }
    .eff-under    { color: #d97706; }

    /* Form dots */
    .dash-form5 { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
    .dash-form5-dot {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--surface3); border: 2px solid var(--border2);
    }
    .dash-form5-dot.good { background: #059669; border-color: #059669; }
    .dash-form5-lbl { font-size: .73rem; color: var(--text-muted); margin-left: 4px; }

    /* Home/Away grid */
    .dash-ha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .dash-ha-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px;
    }
    .dash-ha-title {
      font-family: var(--font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px;
    }
    .dash-ha-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 0; font-size: .83rem; border-bottom: 1px solid var(--border);
    }
    .dash-ha-row:last-child { border-bottom: none; }
    .dash-ha-key { color: var(--text-muted); }
    .dash-ha-val { color: var(--text); font-weight: 600; }
    .dash-ha-val.better { color: #059669; }
    .dash-insight {
      margin-top: 16px; padding: 14px 16px;
      background: var(--accent-dim); border-left: 3px solid var(--accent);
      border-radius: 0 8px 8px 0; color: var(--text-dim); font-size: .85rem;
      font-style: italic; line-height: 1.5;
    }

    /* Dashboard button (on player cards throughout the app) */
    .dash-btn {
      background: var(--surface); border: 1px solid var(--border2);
      color: var(--accent-text); padding: 4px 10px; border-radius: 6px;
      font-size: .75rem; cursor: pointer; transition: background .15s;
    }
    .dash-btn:hover { background: var(--accent-dim); }

    /* Muted placeholder */
    .dash-unavailable {
      padding: 32px; text-align: center; color: var(--text-muted);
      font-size: .85rem; background: var(--surface); border-radius: 10px;
      border: 1px dashed var(--border2);
    }

    /* Similar players results */
    .dash-similar-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px; margin-top: 12px;
    }
    .dash-sim-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .dash-sim-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37,99,235,.08); }
    .dash-sim-header { display: flex; align-items: center; gap: 10px; }
    .dash-sim-photo {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      background: var(--surface3); flex-shrink: 0;
    }
    .dash-sim-name { font-size: .85rem; font-weight: 600; color: var(--text); }
    .dash-sim-meta { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
    .dash-sim-score { font-family: var(--font-display); margin-left: auto; font-size: 1rem; font-weight: 700; flex-shrink: 0; }
    .dash-sim-stats { display: flex; flex-wrap: wrap; gap: 6px; }
    .dash-sim-stat {
      font-size: .72rem; background: var(--surface2);
      border-radius: 5px; padding: 2px 7px; color: var(--text-muted);
    }
    .dash-sim-stat strong { color: var(--text); }
    .dash-sim-footer { margin-top: auto; }
    .dash-sim-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: .85rem; }

    /* Bio strip */
    .dash-bio-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .dash-bio-chip {
      font-size: .73rem; color: rgba(255,255,255,.45);
      display: flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 6px; padding: 4px 10px;
    }
    .dash-bio-chip strong { color: rgba(255,255,255,.85); font-weight: 600; }

    /* Position-aware hero stat tiles */
    .dash-stat-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px; margin-top: 20px;
    }
    .dash-stat-tile {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 12px; text-align: center;
      transition: border-color .15s;
    }
    .dash-stat-tile.tier-good {
      border-color: rgba(37,99,235,.4);
      background: rgba(37,99,235,.06);
    }
    .dash-stat-tile.tier-elite {
      border-color: rgba(217,119,6,.5);
      background: rgba(217,119,6,.07);
    }
    .dash-stat-tile.tier-elite .dst-val { color: #d97706; }
    .dst-val {
      font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
      color: var(--text); letter-spacing: -0.03em; line-height: 1;
    }
    .dst-lbl {
      font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-muted); margin-top: 5px; font-weight: 500;
    }
    .dst-sub {
      display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--teal);
      font-weight: 500; margin-top: 3px;
    }
    .dst-tier-badge {
      font-size: .55rem; color: #d97706; margin-top: 4px;
      font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    }

    /* Pitch position map */
    .dash-pitch-map { flex-shrink: 0; }

    /* Strengths & weaknesses */
    .dash-sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .dash-sw-col h4 {
      font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em;
      font-weight: 700; margin-bottom: 10px;
    }
    .dash-sw-col.strengths h4 { color: #059669; }
    .dash-sw-col.weaknesses h4 { color: #ea580c; }
    .dash-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .dash-strength-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
      color: #059669; border-radius: 9999px; font-size: .72rem; font-weight: 600;
      padding: 4px 12px;
    }
    .dash-weakness-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.25);
      color: #ea580c; border-radius: 9999px; font-size: .72rem; font-weight: 600;
      padding: 4px 12px;
    }
    .dash-pill-pct { font-size: .6rem; opacity: .65; }

    /* Rolling form tiles */
    .dash-form5-games { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .dash-form5-game {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 8px 10px; font-size: .7rem;
      min-width: 72px; text-align: center;
    }
    .dash-form5-opp {
      font-size: .68rem; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 80px;
    }
    .dash-form5-ga { font-size: .72rem; color: var(--text-dim); }
    .dash-form5-rating {
      font-size: .68rem; font-weight: 700; padding: 2px 6px;
      border-radius: 4px; background: var(--surface3); color: var(--text);
    }
    .dash-form5-rating.good   { background: rgba(16,185,129,.12); color: #059669; }
    .dash-form5-rating.ok     { background: rgba(37,99,235,.1);   color: var(--accent-text); }
    .dash-form5-rating.poor   { background: rgba(249,115,22,.1);  color: #ea580c; }
    .dash-form5-venue {
      font-family: var(--font-mono); font-size: .6rem; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: .06em;
    }

    @media (max-width: 600px) {
      .dash-section { padding: 1rem; }
      .dash-ha-grid { grid-template-columns: 1fr; }
      .dash-xg-summary { grid-template-columns: 1fr; }
      .dash-player-score { margin-left: 0; }
      .dash-sw-grid { grid-template-columns: 1fr; }
      .dash-stat-strip { grid-template-columns: repeat(3, 1fr); }
    }

    /* ═══════════════════════════════════════════════════════════════
       HOME PAGE STYLES
    ═══════════════════════════════════════════════════════════════ */

    #home-panel {
      display: flex; flex-direction: column;
      height: 100%; overflow-y: auto;
      background: var(--bg);
    }

    /* ── Page header ── */

    /* ── Ticker strip ── */
    .ticker-strip {
      background: #0b0b0b; overflow: hidden;
      height: 42px; display: flex; align-items: center;
      flex-shrink: 0; border-bottom: 1px solid #1a1a1a;
    }
    .ticker-track {
      display: flex; align-items: center; gap: 40px;
      white-space: nowrap;
      animation: ticker-scroll 90s linear infinite;
    }
    .ticker-strip:hover .ticker-track { animation-play-state: paused; }
    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: .75rem; color: rgba(255,255,255,.85);
      font-family: var(--font); cursor: pointer; transition: color .15s;
    }
    .ticker-item:hover { color: #fff; }
    .ticker-player-photo {
      width: 22px; height: 22px; border-radius: 50%;
      object-fit: cover; background: #222; flex-shrink: 0;
    }
    .ticker-club-logo {
      width: 16px; height: 16px; object-fit: contain;
      flex-shrink: 0; vertical-align: middle;
    }
    .ticker-club-logo-placeholder {
      width: 16px; height: 16px; border-radius: 2px;
      background: #2a2a2a; display: inline-block; flex-shrink: 0;
    }
    .ticker-club { color: rgba(255,255,255,.8); font-weight: 500; }
    .ticker-arrow { color: #4a9eff; font-size: .7rem; font-weight: 700; }
    .ticker-type {
      font-family: var(--font-mono); color: rgba(255,255,255,.4); font-size: .62rem;
      background: rgba(255,255,255,.07); border-radius: 3px;
      padding: 1px 4px; letter-spacing: .03em; text-transform: uppercase;
    }
    .ticker-dot { color: rgba(255,255,255,.2); font-size: .6rem; }
    .ticker-date { color: rgba(255,255,255,.3); font-size: .65rem; }

    /* ── Bands ── */
    .home-band { padding: 28px 32px; }
    .home-band-1 { background: var(--surface2); }
    .home-band-2 { background: var(--surface); }
    .home-band-3 { background: var(--surface3); flex: 1; }
    .home-section { margin-bottom: 28px; }
    .home-section:last-child { margin-bottom: 0; }

    /* ── Section labels ── */
    .section-title {
      font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .09em;
      color: var(--text-muted); margin-bottom: 3px;
    }
    .section-subtitle {
      font-size: .75rem; color: var(--text-dim); margin-bottom: 14px;
    }

    /* ── Player cards (TOTW row) ── */
    .home-players-row {
      display: flex; gap: 12px; overflow-x: auto;
      padding-bottom: 4px;
    }
    .home-players-row::-webkit-scrollbar { height: 4px; }
    .home-players-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .home-player-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; min-width: 160px; max-width: 180px;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
      transition: border-color .15s, box-shadow .15s;
    }
    .home-player-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .home-player-photo {
      width: 48px; height: 48px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .home-player-name {
      font-size: .83rem; font-weight: 600; color: var(--text); line-height: 1.2;
    }
    .home-player-meta { font-size: .72rem; color: var(--text-muted); }
    .home-player-rating {
      font-size: .78rem; font-weight: 600; color: var(--accent-text);
    }
    .home-player-stats { font-size: .72rem; color: var(--text-dim); }
    .home-player-btn {
      margin-top: 4px; font-size: .7rem; padding: 4px 8px;
      background: var(--accent-dim); color: var(--accent-text);
      border: 1px solid rgba(37,99,235,.2); border-radius: 5px;
      cursor: pointer; transition: background .15s; font-family: var(--font);
      white-space: nowrap;
    }
    .home-player-btn:hover { background: var(--accent); color: #fff; }

    /* ── Form alert cards (2×2 grid) ── */
    .form-alerts-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .form-alert-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px;
      display: flex; flex-direction: column; gap: 8px;
      position: relative; overflow: hidden;
    }
    .form-alert-card::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--accent);
    }
    .form-alert-header {
      display: flex; align-items: center; gap: 10px;
    }
    .form-alert-photo {
      width: 40px; height: 40px; border-radius: 50%;
      object-fit: cover; background: var(--surface3); flex-shrink: 0;
    }
    .form-alert-name { font-size: .83rem; font-weight: 600; color: var(--text); }
    .form-alert-meta { font-size: .72rem; color: var(--text-muted); }
    .form-alert-fire {
      font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: .06em;
      color: var(--accent-text); text-transform: uppercase;
    }
    .form-dots { display: flex; gap: 5px; align-items: center; }
    .form-dot {
      width: 9px; height: 9px; border-radius: 50%;
    }
    .form-dot.good { background: var(--accent); }
    .form-dot.poor { background: var(--border); border: 1px solid var(--border2); }
    .form-alert-avg { font-size: .78rem; font-weight: 600; color: var(--text); }
    .form-alert-line { font-size: .72rem; color: var(--text-dim); }
    .form-alert-actions { display: flex; gap: 6px; margin-top: 2px; }
    .form-alert-btn {
      font-size: .68rem; padding: 3px 7px;
      background: var(--accent-dim); color: var(--accent-text);
      border: 1px solid rgba(37,99,235,.2); border-radius: 4px;
      cursor: pointer; transition: background .15s; font-family: var(--font);
    }
    .form-alert-btn:hover { background: var(--accent); color: #fff; }

    /* ── League leaders table ── */
    .league-leaders-table { width: 100%; border-collapse: collapse; }
    .league-leaders-table th {
      font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-muted); font-weight: 600;
      padding: 6px 10px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .league-leaders-table td {
      padding: 10px; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .league-leaders-table tr:last-child td { border-bottom: none; }
    .ll-league-cell { display: flex; align-items: center; gap: 8px; }
    .ll-logo { width: 22px; height: 22px; object-fit: contain; }
    .ll-league-name { font-size: .78rem; font-weight: 600; color: var(--text); }
    .ll-player-cell { display: flex; align-items: center; gap: 7px; }
    .ll-player-photo {
      width: 28px; height: 28px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .ll-player-name {
      font-size: .75rem; font-weight: 500; color: var(--text);
      cursor: pointer; transition: color .15s;
    }
    .ll-player-name:hover { color: var(--accent-text); }
    .ll-player-stat { font-size: .68rem; color: var(--text-muted); }

    /* ── Form tables (collapsible) ── */
    .form-table-league {
      margin-bottom: 10px; border: 1px solid var(--border);
      border-radius: 8px; overflow: hidden;
    }
    .form-table-summary {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; cursor: pointer;
      background: var(--surface);
      font-size: .78rem; font-weight: 600; color: var(--text);
      list-style: none; user-select: none;
      transition: background .12s;
    }
    .form-table-summary:hover { background: var(--surface2); }
    details[open] .form-table-summary { border-bottom: 1px solid var(--border); }
    .form-table-summary::marker, .form-table-summary::-webkit-details-marker { display: none; }
    .form-table-chevron {
      margin-left: auto; font-size: .65rem; color: var(--text-muted);
      transition: transform .2s;
    }
    details[open] .form-table-chevron { transform: rotate(180deg); }
    .form-table-body { background: var(--surface); }
    .form-table-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; border-bottom: 1px solid var(--border);
      font-size: .75rem;
    }
    .form-table-row:last-child { border-bottom: none; }
    .form-table-row:nth-child(even) { background: var(--surface2); }
    .ft-pos { width: 22px; text-align: center; color: var(--text-muted); font-size: .68rem; }
    .ft-team { display: flex; align-items: center; gap: 6px; flex: 1; }
    .ft-team-logo { width: 18px; height: 18px; object-fit: contain; }
    .ft-team-name { color: var(--text); font-weight: 500; }
    .ft-form { display: flex; gap: 3px; }
    .pill-W, .pill-D, .pill-L {
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 700; color: #fff;
    }
    .pill-W { background: #16a34a; }
    .pill-D { background: #d97706; }
    .pill-L { background: #dc2626; }
    .ft-gd {
      width: 36px; text-align: right; font-size: .72rem;
      font-weight: 600; color: var(--text);
    }
    .ft-gd.positive { color: #16a34a; }
    .ft-gd.negative { color: #dc2626; }

    /* ── Upcoming Fixtures ── */
    .uf-fixture-row {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 14px; border-bottom: 1px solid var(--border);
      font-size: .75rem;
    }
    .uf-fixture-row:last-child { border-bottom: none; }
    .uf-fixture-row:nth-child(even) { background: var(--surface2); }
    .uf-team { display: flex; align-items: center; gap: 5px; flex: 1; }
    .uf-home { justify-content: flex-end; text-align: right; }
    .uf-away { justify-content: flex-start; }
    .uf-home span, .uf-away span { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
    .uf-vs { color: var(--text-muted); font-size: .68rem; font-weight: 600; flex-shrink: 0; padding: 0 4px; }
    .uf-score { color: var(--text); font-size: .8rem; font-weight: 700; flex-shrink: 0; padding: 0 6px; letter-spacing: .5px; }
    .uf-date { color: var(--text-muted); font-size: .68rem; white-space: nowrap; margin-left: auto; flex-shrink: 0; }
    .uf-round-badge {
      margin-left: auto; background: var(--surface2); color: var(--text-muted);
      font-size: .62rem; font-weight: 600; border-radius: 4px;
      padding: 2px 6px; border: 1px solid var(--border);
    }

    /* ── League availability notice (Home banner) ── */
    .leagues-notice {
      position: relative; flex-shrink: 0;
      display: flex; align-items: flex-start; gap: 11px;
      margin: 14px 22px 0; padding: 13px 16px 13px 18px;
      background: var(--accent-dim); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .leagues-notice::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 3px; height: 100%; background: var(--accent);
    }
    .leagues-notice-icon {
      flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
      color: var(--accent-text);
    }
    .leagues-notice-text {
      flex: 1; font-size: .78rem; line-height: 1.5; color: var(--text-dim);
    }
    .leagues-notice-text strong { color: var(--text); font-weight: 700; }
    .leagues-notice-line2 { display: block; margin-top: 6px; }
    .leagues-notice-link {
      color: var(--accent-text); font-weight: 600; cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .leagues-notice-link:hover { opacity: .8; }
    .leagues-notice-close {
      flex-shrink: 0; background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 1.15rem; line-height: 1;
      padding: 0 2px; transition: color .15s; font-family: var(--font);
    }
    .leagues-notice-close:hover { color: var(--text); }

    /* ── Workspace / Band 3 ── */
    .workspace-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 16px; margin-top: 14px;
    }
    .workspace-col {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .workspace-col-title {
      font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-muted); margin-bottom: 4px;
    }
    .workspace-shortlist-card {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
    }
    .workspace-shortlist-card:last-child { border-bottom: none; }
    .ws-player-photo {
      width: 28px; height: 28px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .ws-player-name { font-size: .75rem; font-weight: 500; color: var(--text); flex: 1; }
    .ws-player-meta { font-size: .68rem; color: var(--text-muted); }
    .ws-empty {
      text-align: center; padding: 20px 10px;
      font-size: .75rem; color: var(--text-muted); line-height: 1.5;
    }
    .ws-empty-link {
      display: inline-block; margin-top: 8px; font-size: .72rem;
      color: var(--accent-text); cursor: pointer; text-decoration: underline;
    }
    .recent-search-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: color .12s;
    }
    .recent-search-item:last-child { border-bottom: none; }
    .recent-search-item:hover .recent-search-text { color: var(--accent-text); }
    .recent-search-icon { font-size: .85rem; flex-shrink: 0; }
    .recent-search-text {
      font-size: .73rem; color: var(--text); flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      transition: color .12s;
    }
    .recent-search-arrow { font-size: .65rem; color: var(--text-muted); }
    .quick-action-card {
      display: flex; flex-direction: column; gap: 5px;
      padding: 10px; border: 1px solid var(--border);
      border-radius: 8px; cursor: pointer; background: var(--surface2);
      transition: border-color .15s, background .15s;
    }
    .quick-action-card:hover {
      border-color: var(--accent); background: var(--accent-dim);
    }
    .qa-icon { font-size: 1.1rem; }
    .qa-name { font-size: .75rem; font-weight: 600; color: var(--text); }
    .qa-desc { font-size: .68rem; color: var(--text-muted); line-height: 1.4; }
    .qa-open {
      align-self: flex-start; font-size: .67rem;
      color: var(--accent-text); margin-top: 2px;
    }

    /* ── Top Rated card extras ── */
    .tr-card-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px; min-height: 20px;
    }
    .tr-league-logo {
      width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;
    }
    .tr-gw-badge {
      font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-muted);
      background: var(--surface3); border-radius: 3px; padding: 1px 5px;
    }
    .tr-rating { font-size: .9rem; font-weight: 700; margin-top: 2px; }
    .rating-gold   { color: #f59e0b; }
    .rating-silver { color: var(--text); }
    .rating-std    { color: var(--text-muted); }
    .tr-fixture {
      font-size: .68rem; color: var(--text-muted); line-height: 1.3;
      margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }

    /* ── Skeleton loader ── */
    .skel {
      background: var(--surface3);
      border-radius: 6px; overflow: hidden; position: relative;
    }
    .skel::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
      animation: skel-shimmer 1.4s ease-in-out infinite;
    }
    @keyframes skel-shimmer {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%);  }
    }
    .home-unavailable {
      padding: 20px; text-align: center;
      font-size: .78rem; color: var(--text-muted);
      border: 1px dashed var(--border); border-radius: 8px;
    }

    /* ── Welcome band (home front door) ── */
    .home-welcome {
      padding: 26px 32px 28px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }
    .hw-greeting {
      font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .1em;
      color: var(--accent-text); margin-bottom: 8px;
    }
    .hw-headline {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1.5rem; line-height: 1.25; color: var(--text);
      margin-bottom: 8px; letter-spacing: -.01em;
    }
    .hw-headline em { color: var(--accent-text); font-style: normal; }
    .hw-sub {
      font-size: .85rem; line-height: 1.55; color: var(--text-dim);
      max-width: 620px;
    }
    .hw-ask {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 14px; margin-top: 18px;
      max-width: 720px; cursor: text; transition: border-color .15s, box-shadow .15s;
    }
    .hw-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .hw-ask-icon { color: var(--accent-text); flex-shrink: 0; display: flex; }
    .hw-ask input {
      flex: 1; background: none; border: none; outline: none;
      font-family: var(--font); font-size: .85rem; color: var(--text);
    }
    .hw-ask input::placeholder { color: var(--text-muted); }
    .hw-ask-hint {
      flex-shrink: 0; font-family: var(--font-mono); font-size: .62rem;
      color: var(--text-muted); border: 1px solid var(--border);
      border-radius: 5px; padding: 3px 7px;
    }
    .hw-actions {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 10px; margin-top: 16px; max-width: 920px;
    }
    .hw-action-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 13px 14px; cursor: pointer;
      display: flex; flex-direction: column; gap: 5px;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .hw-action-card:hover {
      border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
      transform: translateY(-1px);
    }
    .hw-ac-icon { color: var(--accent-text); display: flex; margin-bottom: 2px; }
    .hw-ac-label { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--text); }
    .hw-ac-desc { font-size: .7rem; line-height: 1.35; color: var(--text-muted); }

    /* ── World Cup home bands ── */
    .wc-section-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 12px; margin-bottom: 14px;
    }
    .wc-section-head .section-title { margin-bottom: 3px; }
    .wc-section-head .section-subtitle { margin-bottom: 0; }
    .wc-toggle {
      display: inline-flex; gap: 2px; flex-shrink: 0;
      background: var(--surface3); border: 1px solid var(--border);
      border-radius: 8px; padding: 2px;
    }
    .wc-toggle button {
      font-family: var(--font); font-size: .72rem; font-weight: 600;
      color: var(--text-dim); background: none; border: none; cursor: pointer;
      padding: 5px 12px; border-radius: 6px; transition: background .15s, color .15s;
    }
    .wc-toggle button.active { background: var(--accent); color: #fff; }
    .wc-perf-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; min-width: 168px; max-width: 188px;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .wc-perf-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .wc-perf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .wc-perf-flag-lg {
      width: 34px; height: 23px; border-radius: 4px; object-fit: cover;
      background: var(--surface3); border: 1px solid var(--border); flex-shrink: 0;
    }
    .wc-perf-badge {
      font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
      padding: 3px 8px; border-radius: 999px;
      background: var(--accent-dim); color: var(--accent-text);
    }
    .wc-perf-name { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--text); line-height: 1.2; }
    .wc-perf-meta { font-size: .68rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
    .wc-perf-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
    .wc-perf-stats {
      display: flex; gap: 14px; padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    .wc-perf-stat { display: flex; flex-direction: column; gap: 1px; }
    .wc-perf-val { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--text); }
    .wc-perf-lbl { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

    /* WC fixtures */
    .wc-fix-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .8rem;
    }
    .wc-fix-sub-label + .wc-fix-row:last-child,
    .wc-fix-row:last-child { border-bottom: none; }
    .wc-fix-group { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); min-width: 58px; }
    .wc-fix-teams { flex: 1; color: var(--text); display: flex; align-items: center; gap: 6px; }
    .wc-fix-team { display: flex; align-items: center; gap: 6px; }
    .wc-fix-logo { width: 18px; height: 18px; object-fit: contain; }
    .wc-fix-vs { color: var(--text-muted); font-size: .72rem; }
    .wc-fix-score { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--accent-text); min-width: 42px; text-align: center; }
    .wc-fix-status {
      flex-shrink: 0; font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em;
      padding: 3px 8px; border-radius: 999px;
      background: var(--surface3); color: var(--text-dim);
    }
    .wc-fix-status.live { background: rgba(220,38,38,.12); color: #dc2626; }
    .wc-fix-sub-label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); padding: 10px 0 4px; }
    .wc-fix-sub-label:first-child { padding-top: 2px; }
    .wc-fix-sub-label.live-lbl { color: #dc2626; }

    /* WC power rankings */
    .wc-rank-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .8rem;
    }
    .wc-rank-row:last-child { border-bottom: none; }
    .wc-rank-num { width: 20px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
    .wc-rank-team { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--text); min-width: 90px; flex-shrink: 0; }
    .wc-rank-note { font-size: .72rem; color: var(--text-muted); flex: 1; line-height: 1.3; }

    /* ── Nav pulse dot ── */
    .nav-pulse {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); margin-left: auto; flex-shrink: 0;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50%       { opacity: .3; }
    }

    /* ── Home responsive ── */
    @media (max-width: 900px) {
      .home-band { padding: 20px; }
      .workspace-grid { grid-template-columns: 1fr; }
      .home-welcome { padding: 22px 20px 24px; }
      .hw-headline { font-size: 1.3rem; }
      .hw-actions { grid-template-columns: 1fr 1fr; }
      .wc-section-head { flex-wrap: wrap; }
    }
    @media (max-width: 600px) {
      .form-alerts-grid { grid-template-columns: 1fr; }
      .league-leaders-table th:nth-child(3),
      .league-leaders-table td:nth-child(3) { display: none; }
      .hw-headline { font-size: 1.18rem; }
      .hw-ask-hint { display: none; }
      .wc-rank-note { display: none; }
      .wc-fix-group { min-width: 46px; }
    }

    /* ── Custom Builder (pcb-*) ───────────────────────────────────────────── */
    .pcb-pos-row { margin-bottom: 18px; }
    .pcb-pos-label { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
    .pcb-pos-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .pcb-pos-chip { padding: 5px 13px; font-size: .78rem; font-weight: 600; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; transition: all .15s; }
    .pcb-pos-chip:hover { border-color: var(--accent); color: var(--accent-text); }
    .pcb-pos-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

    .pcb-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
    @media (max-width: 700px) { .pcb-body { grid-template-columns: 1fr; } }

    .pcb-left { background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; max-height: 380px; overflow-y: auto; }
    .pcb-left-title { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
    .pcb-cat-label { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 5px; }
    .pcb-cat-label:first-child { margin-top: 0; }
    .pcb-stat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .pcb-stat-chip { padding: 4px 10px; font-size: .73rem; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); cursor: pointer; transition: all .12s; }
    .pcb-stat-chip:hover:not(.selected) { border-color: var(--accent); color: var(--accent-text); }
    .pcb-stat-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .6; cursor: default; }

    .pcb-right { background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .pcb-right-title { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
    .pcb-count { font-size: .68rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 1px 7px; margin-left: 5px; color: var(--text-muted); }
    .pcb-empty-hint { font-size: .78rem; color: var(--text-muted); padding: 18px 0; text-align: center; }
    .pcb-weight-note { font-size: .68rem; color: var(--text-muted); font-family: var(--mono); text-align: right; }

    .pcb-sel-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border2); }
    .pcb-sel-row:last-child { border-bottom: none; }
    .pcb-sel-name { flex: 0 0 110px; font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pcb-sel-slider { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
    .pcb-sel-pct { flex: 0 0 32px; font-size: .72rem; font-family: var(--mono); color: var(--accent-text); text-align: right; }
    .pcb-sel-remove { flex: 0 0 16px; font-size: .75rem; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }
    .pcb-sel-remove:hover { color: #ef4444; }

    .pcb-hard-filters { border-top: 1px solid var(--border2); padding-top: 10px; margin-top: 4px; }
    .pcb-hf-title { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; }
    .pcb-hf-title:hover { color: var(--text); }
    .pcb-hf-hint { font-size: .71rem; color: var(--text-muted); margin: 7px 0 5px; }
    .pcb-hf-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
    .pcb-hf-select { font-size: .74rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); }
    .pcb-hf-input { width: 60px; font-size: .74rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); }
    .pcb-hf-remove { font-size: .7rem; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0 2px; }
    .pcb-hf-remove:hover { color: #ef4444; }
    .pcb-hf-add-btn { font-size: .72rem; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--border2); background: none; color: var(--text-muted); cursor: pointer; margin-top: 4px; }
    .pcb-hf-add-btn:hover { border-color: var(--accent); color: var(--accent-text); }

    /* ── Report Builder (rb-*) ───────────────────────────────────────────── */
    #rb-panel { background: var(--bg); }
    .rb-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border2); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
    .rb-back-btn { font-size: .78rem; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
    .rb-back-btn:hover { color: var(--text); border-color: var(--accent); }
    .rb-scout-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .rb-input { font-size: .78rem; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); width: 140px; outline: none; }
    .rb-input:focus { border-color: var(--accent); }
    .rb-date { font-size: .72rem; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
    .rb-export-btn { padding: 7px 16px; font-size: .78rem; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; }
    .rb-export-btn:hover { opacity: .88; }

    #rb-panel .rb-body { display: grid; grid-template-columns: 180px 1fr; gap: 0; flex: 1; min-height: 0; }
    @media (max-width: 700px) { #rb-panel .rb-body { grid-template-columns: 1fr; } }

    .rb-controls { padding: 20px 14px; border-right: 1px solid var(--border2); background: var(--surface); position: sticky; top: 57px; max-height: calc(100vh - 57px); overflow-y: auto; }
    .rb-controls-title { font-size: .68rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 12px; }
    .rb-toggle-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; cursor: pointer; }
    .rb-toggle-row input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
    .rb-toggle-label { font-size: .78rem; color: var(--text); cursor: pointer; }

    .rb-canvas { padding: 28px 24px; overflow-y: auto; background: var(--bg); }

    /* Editable fields inside the canvas */
    [contenteditable] { outline: none; }
    [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--text-muted); font-style: italic; pointer-events: none; }
    [contenteditable]:focus { background: rgba(255,255,255,.03); border-radius: 4px; }

    .rb-obs-area { margin-top: 8px; }
    .rb-obs-field { font-size: .78rem; color: var(--text); line-height: 1.55; padding: 7px 10px; border-radius: 8px; border: 1px dashed transparent; min-height: 32px; transition: border-color .15s; }
    .rb-obs-field:hover { border-color: var(--border2); }
    .rb-obs-field:focus { border-color: var(--accent); border-style: solid; }
    .rb-obs-label { font-size: .62rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }

    .rb-meta-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; background: var(--surface2); border-radius: 10px; flex-wrap: wrap; }
    .rb-meta-field-wrap { display: flex; flex-direction: column; gap: 2px; }
    .rb-meta-label { font-size: .62rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
    .rb-rating-input { width: 52px; font-size: 1.4rem; font-weight: 700; color: var(--accent-text); background: none; border: none; border-bottom: 1px solid var(--border2); outline: none; padding: 2px 0; font-family: var(--display); text-align: center; }
    .rb-rating-input:focus { border-color: var(--accent); }
    .rb-rec-field { flex: 1; min-width: 120px; font-size: .82rem; color: var(--text); padding: 4px 6px; border-radius: 6px; border: 1px dashed transparent; }
    .rb-rec-field:hover { border-color: var(--border2); }
    .rb-rec-field:focus { border-color: var(--accent); border-style: solid; }

    .rb-custom-score-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 3px 12px; font-size: .8rem; margin-top: 6px; }
    .rb-custom-score-val { color: var(--accent-text); font-weight: 700; font-family: var(--mono); }

  /* ═══ Players Hub ═══════════════════════════════════════════════════════ */
  .ph-subnav {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }
  .ph-tab {
    padding: 8px 18px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    transition: color .15s, border-color .15s;
  }
  .ph-tab:hover  { color: var(--text); }
  .ph-tab.active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

  /* ═══ The Pulse ═════════════════════════════════════════════════════════ */

  /* ── League / Team hub toggle ── */
  .pulse-view-toggle {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    padding: 14px 20px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pvt-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
  }
  .pvt-btn:hover  { color: var(--text); }
  .pvt-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  @media (max-width: 600px) {
    .pulse-view-toggle { padding: 10px 14px 8px; }
    .pvt-btn { flex: 1; text-align: center; }
  }

  /* ── Active-league header + change-league control ── */
  .pulse-content-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 0;
    flex-shrink: 0;
  }
  .pulse-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    flex-shrink: 0;
  }
  .pulse-change-btn:hover { border-color: var(--accent); color: var(--accent-text); }
  .pulse-change-btn:hover svg { transform: translateX(-2px); }
  .pulse-change-btn svg { transition: transform .15s; }
  .pulse-active-league {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }

  /* ── Empty state / preload (heartbeat monitor) ── */
  .pulse-empty-state {
    flex: 1;
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px 56px;
  }
  .pulse-monitor {
    width: 100%; max-width: 440px; height: 134px; margin-bottom: 8px;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
  .pm-svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .pm-base { stroke: var(--border); stroke-width: 1; }
  .pm-line {
    fill: none; stroke: var(--accent); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 55%, transparent));
  }
  .pm-echo {
    fill: none; stroke: color-mix(in srgb, var(--accent) 28%, transparent);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .pm-grp { will-change: transform; }
  .pm-grp-line { animation: pm-scroll 5s linear infinite; }
  .pm-grp-echo { animation: pm-scroll 9s linear infinite; }
  @keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-240px); } }

  .empty-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; white-space: nowrap;
  }
  .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: pulse-ping 1.8s ease-out infinite;
  }
  @keyframes pulse-ping {
    0%        { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
  }
  .empty-title {
    font-size: 27px; font-weight: 800; color: var(--text);
    letter-spacing: -.025em; max-width: 460px; text-wrap: balance; margin: 0;
  }
  .empty-sub {
    font-size: 15px; color: var(--text-muted); max-width: 430px;
    line-height: 1.55; text-wrap: pretty; margin: 9px 0 0;
  }
  .pulse-leagues {
    margin-top: 30px; width: 100%; max-width: 680px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  }
  @media (min-width: 760px) { .pulse-leagues { grid-template-columns: repeat(3, 1fr); } }
  /* On a phone the 2-col grid can't shrink below the card's min-content width,
     clipping the right column off-screen — stack to one column. Placed after the
     base rule so it wins on source order at ≤600px. */
  @media (max-width: 600px) { .pulse-leagues { grid-template-columns: 1fr; } }
  .pl-card {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 13px 14px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; box-shadow: var(--shadow-card);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    animation: pl-in .45s ease both; font-family: var(--font);
  }
  @keyframes pl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .pl-card:hover {
    border-color: var(--accent); transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 18px -10px rgba(0,0,0,.18);
  }
  .pl-mono {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; letter-spacing: -.02em; flex-shrink: 0;
  }
  .pl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .pl-name { font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
  .pl-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-go { color: var(--muted-3); display: flex; transition: color .16s ease, transform .16s ease; }
  .pl-card:hover .pl-go { color: var(--accent-text); transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .pm-grp-line, .pm-grp-echo, .pulse-dot { animation: none; }
  }

  .pulse-skel-row {
    display: flex;
    gap: 16px;
    padding: 20px;
  }

  /* ── League Pulse structured loading skeleton ── */
  .pulse-skel { display: flex; flex-direction: column; flex: 1; }
  .pulse-skel-hdr {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 0;
  }
  .pulse-skel-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  }
  .pulse-skel-col {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; min-width: 0;
  }
  /* shimmering placeholder block */
  .sk {
    position: relative; overflow: hidden; border-radius: 8px;
    background: var(--surface2);
  }
  .sk::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--text) 9%, transparent), transparent);
    transform: translateX(-100%);
    animation: sk-shimmer 1.5s ease-in-out infinite;
  }
  @keyframes sk-shimmer { 100% { transform: translateX(100%); } }
  .sk-line { height: 11px; }
  .sk-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  .sk-row:last-child { border-bottom: none; }
  .sk-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
  @media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
    .sk { animation: li-pulse 1.4s ease-in-out infinite; }
  }

  .pulse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 20px;
    flex-shrink: 0;
  }
  @media (max-width: 960px) { .pulse-grid { grid-template-columns: 1fr; } }

  /* Upcoming fixtures col */
  .pulse-upcoming-badge {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: var(--accent-dim);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .pulse-upcoming-time {
    font-size: .7rem;
    color: var(--text-muted);
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
  }

  .pulse-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    min-width: 0;
  }
  .pulse-col-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  .pulse-fixture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    gap: 6px;
  }
  .pulse-fixture:last-child { border-bottom: none; }
  .pulse-team { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .pulse-team-home { justify-content: flex-start; }
  .pulse-team-away { justify-content: flex-end; }
  .pulse-team-name { font-size: .8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
  .pulse-team-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
  .pulse-score {
    font-size: 1rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
  }
  .pulse-score-sep { color: var(--text-muted); font-weight: 400; }
  .pulse-no-data { font-size: .82rem; color: var(--text-muted); padding: 12px 0; text-align: center; }

  .pulse-nextup-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 36px 18px;
    color: var(--text-muted);
  }
  .pulse-nextup-note svg { opacity: .4; }
  .pulse-nextup-note-title {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-dim);
  }
  .pulse-nextup-note p { font-size: .8rem; line-height: 1.5; max-width: 220px; margin: 0; }

  .pulse-perf-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    border-radius: 4px;
  }
  .pulse-perf-chip:last-child { border-bottom: none; }
  .pulse-perf-chip:hover { background: var(--accent-dim); }
  .pulse-perf-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
  }
  .pulse-perf-placeholder { background: var(--surface3); }
  .pulse-perf-info { flex: 1; min-width: 0; }
  .pulse-perf-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-perf-meta { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-perf-stat { margin-left: 4px; }
  .pulse-rating {
    font-weight: 700;
    font-size: .8rem;
    padding: 3px 8px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .pulse-rating-green   { background: rgba(34,197,94,.15); color: #16a34a; }
  .pulse-rating-amber   { background: rgba(234,179, 8,.15); color: #ca8a04; }
  .pulse-rating-neutral { background: var(--surface3); color: var(--text-muted); }

  .pulse-more-btn {
    display: block;
    margin: 10px auto 0;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-size: .75rem;
    cursor: pointer;
  }
  .pulse-more-btn:hover { border-color: var(--accent); color: var(--accent-text); }

  .pulse-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    margin-top: 8px;
  }
  .pulse-standings-table th {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }
  .pulse-standings-table td {
    padding: 5px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border2);
  }
  .pulse-std-team { text-align: left !important; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pulse-pos-gd { color: #16a34a; font-weight: 600; }
  .pulse-neg-gd { color: #ef4444; font-weight: 600; }

  .pulse-section {
    margin: 0 20px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .pulse-section-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
  }
  .pulse-section-title {
    font-size: .92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pulse-ts-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
  .pulse-section-sub   { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
  .pulse-chevron { opacity: .6; flex-shrink: 0; }
  .pulse-accordion-hdr:hover { background: var(--surface2); }

  .pulse-refresh-icon-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
  }
  .pulse-refresh-icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }

  /* Form dots in standings */
  .pulse-form-strip { display: flex; gap: 2px; align-items: center; justify-content: center; }
  .pulse-form-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .pulse-form-w { background: #16a34a; }
  .pulse-form-d { background: #ca8a04; }
  .pulse-form-l { background: #ef4444; }

  /* Injury & Transfer sections */
  .pulse-absence-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; border-bottom: 1px solid var(--border2);
  }
  .pulse-absence-chip:last-child { border-bottom: none; }
  .pulse-absence-photo {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; border: 1px solid var(--border);
    background: var(--surface3);
  }
  .pulse-absence-info { flex: 1; min-width: 0; }
  .pulse-absence-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-absence-meta { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
  .pulse-absence-team-logo { width: 14px; height: 14px; object-fit: contain; }
  .pulse-injury-badge {
    font-size: .68rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; flex-shrink: 0; white-space: nowrap;
    background: rgba(239,68,68,.12); color: #dc2626;
  }
  .pulse-transfer-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; border-bottom: 1px solid var(--border2);
  }
  .pulse-transfer-card:last-child { border-bottom: none; }
  .pulse-transfer-player { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface3); }
  .pulse-transfer-info { flex: 1; min-width: 0; }
  .pulse-transfer-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-transfer-clubs { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-transfer-club-logo { width: 13px; height: 13px; object-fit: contain; }
  .pulse-transfer-arrow { opacity: .5; font-size: .8rem; }
  .pulse-transfer-badge {
    font-size: .67rem; font-weight: 600; padding: 2px 7px;
    border-radius: 20px; flex-shrink: 0; white-space: nowrap;
  }
  .pulse-tb-fee   { background: rgba(37,99,235,.12); color: #2563eb; }
  .pulse-tb-loan  { background: rgba(124,58,237,.12); color: #7c3aed; }
  .pulse-tb-free  { background: rgba(22,163,74,.12);  color: #16a34a; }
  .pulse-tb-other { background: var(--surface3); color: var(--text-muted); }
  .pulse-lazy-section { padding: 16px 20px; }
  .pulse-lazy-note { font-size: .8rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
  .pulse-load-btn {
    padding: 7px 18px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text-dim); font-size: .8rem; cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .pulse-load-btn:hover { border-color: var(--accent); color: var(--accent-text); }
  .pulse-load-btn:disabled { opacity: .5; cursor: default; }
  .pulse-section-empty { font-size: .82rem; color: var(--text-muted); padding: 16px 20px; text-align: center; }

  /* DNA form inside pulse section */
  #pulse-panel #dna-form-wrap { padding: 18px 20px 0; }
  #pulse-panel #dna-results   { padding: 12px 20px 20px; }

  /* LI content inside pulse section */
  #pulse-li-body .li-section  { margin: 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
  #pulse-li-body .li-section:last-child { border-bottom: none; }

  /* ═══════════════ World Cup 2026 ═══════════════ */
  .wc-subnav {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 6px;
    padding: 12px 22px; background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .wc-tab {
    font-family: var(--font-display); font-size: .82rem; font-weight: 700;
    color: var(--text-muted); background: transparent; border: none;
    padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all .12s;
  }
  .wc-tab:hover { background: var(--surface); color: var(--text); }
  .wc-tab.active { background: var(--accent); color: #fff; }
  .wc-refresh-note { margin-left: auto; font-size: .68rem; color: var(--text-muted); }
  .wc-content { padding: 18px 22px 32px; }

  .wc-group-label {
    font-family: var(--font-display); font-size: .74rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
    margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .wc-group-label:first-child { margin-top: 0; }

  /* Match card */
  .wc-match-card {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 10px; padding: 16px 18px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: border-color .12s, transform .08s;
  }
  .wc-match-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  .wc-match-card.live { border-color: color-mix(in srgb, #e5392f 55%, var(--border)); }
  .wc-mc-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .wc-mc-team.away { flex-direction: row-reverse; text-align: right; }
  .wc-mc-flag { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-mc-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-mc-name.dim { color: var(--text-muted); font-weight: 600; }
  .wc-mc-center { text-align: center; min-width: 76px; }
  .wc-mc-score { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text); letter-spacing: .02em; }
  .wc-mc-vs { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
  .wc-mc-status { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; color: var(--text-muted); }
  .wc-mc-status.live { color: #e5392f; display: inline-flex; align-items: center; gap: 4px; }
  .wc-mc-kick { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
  .wc-mc-meta { font-size: .64rem; color: var(--text-muted); margin-top: 2px; }
  .wc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5392f; display: inline-block; animation: wc-pulse 1.3s ease-in-out infinite; }
  @keyframes wc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
  .wc-day-label { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--text); margin: 20px 0 10px; }
  .wc-day-label:first-child { margin-top: 0; }
  .wc-empty { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: .86rem; }

  /* ── Knockout bracket ── */
  .wc-bracket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .wc-bracket-hint { font-size: .72rem; color: var(--text-muted); }
  .wc-bracket-zoom { display: flex; gap: 6px; flex-shrink: 0; }
  .wc-zoom-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
  .wc-zoom-btn:hover { border-color: var(--accent); color: var(--accent-text); }
  .wc-bracket-viewport { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background:
      linear-gradient(var(--surface-2, rgba(127,127,127,.03)) 1px, transparent 1px) 0 0 / 100% 22px,
      var(--bg); max-height: calc(100vh - 190px); position: relative; }
  .wc-bracket-canvas { position: relative; }
  .wc-br-inner { position: relative; transform-origin: top left; }
  .wc-br-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
  .wc-br-line { fill: none; stroke: var(--border); stroke-width: 1.5; }
  .wc-br-col-label { position: absolute; top: 0; font-family: var(--font-display); font-weight: 800; font-size: .68rem;
      text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wc-br-col-label.small { font-size: .6rem; }
  .wc-br-card { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
      overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; z-index: 1; }
  .wc-br-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.18); transform: translateY(-1px); z-index: 2; }
  .wc-br-card.live { border-color: #e5392f; box-shadow: 0 0 0 1px rgba(229,57,47,.35); }
  .wc-br-card.pre { opacity: .96; }
  .wc-br-row { display: flex; align-items: center; gap: 7px; height: 27px; padding: 0 9px; }
  .wc-br-team { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
  .wc-br-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
  .wc-br-team-name { font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-br-team-name.ph { color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: .68rem; }
  .wc-br-row.win .wc-br-team-name { font-weight: 800; color: var(--accent-text); }
  .wc-br-row.lose { opacity: .5; }
  .wc-br-score { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--text); min-width: 14px; text-align: right; }
  .wc-br-pens { font-size: .64rem; font-weight: 700; color: var(--text-muted); }
  .wc-br-divider { height: 1px; background: var(--border); margin: 0 9px; }
  .wc-br-foot { padding: 3px 9px; border-top: 1px solid var(--border); display: flex; justify-content: center; background: var(--bg); }
  .wc-br-status { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
  .wc-br-status.live { color: #e5392f; }

  /* Group standings tables */
  .wc-groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  @media (max-width: 720px) { .wc-groups-grid { grid-template-columns: 1fr; } }
  .wc-standings-table { width: 100%; border-collapse: collapse; }
  .wc-standings-table th { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: center; padding: 4px 5px; border-bottom: 1px solid var(--border); }
  .wc-standings-table th.tn { text-align: left; }
  .wc-standings-table td { font-size: .8rem; color: var(--text); text-align: center; padding: 7px 5px; border-bottom: 1px solid var(--border); }
  .wc-standings-table tr:last-child td { border-bottom: none; }
  .wc-standings-table td.tn { text-align: left; display: flex; align-items: center; gap: 8px; font-weight: 600; }
  .wc-standings-table td.pts { font-weight: 800; }
  .wc-st-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-st-rank { display: inline-block; width: 16px; color: var(--text-muted); font-size: .72rem; }
  .wc-standings-table tr.qual td.rk { box-shadow: inset 3px 0 0 var(--accent); }

  /* Drill-down modal */
  #wc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
  .wc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .wc-modal-card { position: relative; width: min(720px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  .wc-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .wc-modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .wc-md-head { padding: 26px 24px 18px; text-align: center; border-bottom: 1px solid var(--border); }
  .wc-md-score-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
  .wc-md-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .wc-md-flag { width: 52px; height: 38px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
  .wc-md-tname { font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--text); }
  .wc-md-score { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--text); }
  .wc-md-state { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 4px; }
  .wc-md-section-title { font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0; margin: 20px 0 10px; max-width: 520px; margin-left: auto; margin-right: auto; }
  /* ── Match centre timeline (home | minute | away spine) ── */
  .wc-tl-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 520px; margin: 0 auto; overflow: hidden; }
  .wc-tl-row { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; border-bottom: 1px solid var(--border); }
  .wc-tl-row:last-child { border-bottom: none; }
  .wc-tl-home { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 9px 8px 9px 14px; text-align: right; min-width: 0; }
  .wc-tl-cen { display: flex; align-items: center; justify-content: center; padding: 6px 2px; }
  .wc-tl-away { display: flex; align-items: center; gap: 6px; padding: 9px 14px 9px 8px; min-width: 0; }
  .wc-tl-min { font-size: .65rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
  .wc-tl-ico { flex-shrink: 0; display: inline-flex; align-items: center; }
  .wc-tl-name { font-size: .79rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wc-tl-name a { color: var(--accent-text); text-decoration: none; font-weight: 700; }
  .wc-tl-name a:hover { text-decoration: underline; }
  @media (max-width: 520px) {
    .wc-tl-row { grid-template-columns: 44px 1fr; }
    .wc-tl-cen { grid-column: 1; justify-content: center; }
    .wc-tl-home { grid-column: 2; justify-content: flex-start; padding: 8px 12px; border-left: 2px solid #185FA5; }
    .wc-tl-away { grid-column: 2; padding: 8px 12px; border-left: 2px solid #c0392b; }
    .wc-tl-row.home .wc-tl-away { display: none; }
    .wc-tl-row.away .wc-tl-home { display: none; }
  }
  .wc-md-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 24px 24px; }
  @media (max-width: 600px) { .wc-md-lineups { grid-template-columns: 1fr; } }
  .wc-md-formation { font-size: .7rem; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
  .wc-md-pl { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .82rem; border-bottom: 1px solid var(--border); }
  .wc-md-pl:last-child { border-bottom: none; }
  .wc-md-pl-num { width: 22px; text-align: center; font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .wc-md-pl-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-md-pl-name a { color: var(--text); text-decoration: none; }
  .wc-md-pl-name a:hover { color: var(--accent-text); text-decoration: underline; }
  .wc-md-pl-stat { font-size: .68rem; color: var(--text-muted); display: inline-flex; gap: 6px; flex-shrink: 0; }
  .wc-md-pl-stat .g { color: var(--accent-text); font-weight: 700; }
  .wc-md-subs-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 12px 0 4px; }
  .wc-evt-icon { display: inline-flex; }
  .wc-card-y { width: 9px; height: 12px; border-radius: 2px; background: #f5c518; display: inline-block; }
  .wc-card-r { width: 9px; height: 12px; border-radius: 2px; background: #e5392f; display: inline-block; }

  /* ── Match centre (full-screen, pitch view) ── */
  .wc-matches-hint { font-size: .74rem; color: var(--text-muted); margin-bottom: 12px; }
  #wc-match-centre { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; }
  .wc-mc-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .wc-mc-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: .8rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
  .wc-mc-back:hover { background: var(--surface); color: var(--text); }
  .wc-mc-x { margin-left: 0; }
  .wc-mc-head { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
  .wc-mc-h-team { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
  .wc-mc-h-team:first-child { justify-content: flex-end; }
  .wc-mc-h-team:last-child { justify-content: flex-start; }
  .wc-mc-h-flag { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-mc-h-name { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-mc-h-mid { text-align: center; flex-shrink: 0; }
  .wc-mc-h-score { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text); letter-spacing: .02em; }
  .wc-mc-h-state { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
  .wc-mc-h-state.live { color: #e5392f; }
  .wc-mc-body { flex: 1; display: flex; min-height: 0; }
  .wc-mc-main { flex: 1; overflow-y: auto; padding: 22px 22px 40px; }

  .wc-chips { max-width: 470px; margin: 0 auto 12px; display: flex; align-items: center; gap: 6px; }
  .wc-chips-label { font-size: .72rem; color: var(--text-muted); margin-right: 2px; }
  .wc-chip { font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 5px 13px; border-radius: 20px; cursor: pointer; transition: all .12s; }
  .wc-chip:hover { color: var(--text); }
  .wc-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .wc-pitch-wrap { max-width: 470px; margin: 0 auto; }
  .wc-pitch {
    position: relative; width: 100%; aspect-ratio: 68 / 122;
    background: #2e7d46;
    background-image: repeating-linear-gradient(to bottom, #2e7d46 0, #2e7d46 7.1%, #2b763f 7.1%, #2b763f 14.2%);
    border: 2px solid rgba(255,255,255,.4); border-radius: 8px; overflow: hidden;
  }
  .wc-pitch-mark { position: absolute; pointer-events: none; }
  .wc-line-half { top: 50%; left: 0; right: 0; border-top: 2px solid rgba(255,255,255,.42); }
  .wc-circle { top: 50%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.42); border-radius: 50%; }
  .wc-box { left: 50%; transform: translateX(-50%); width: 58%; height: 13%; border: 2px solid rgba(255,255,255,.42); }
  .wc-box.top { top: 0; border-top: none; }
  .wc-box.bot { bottom: 0; border-bottom: none; }

  .wc-token { position: absolute; transform: translate(-50%,-50%); width: 66px; text-align: center; cursor: pointer; z-index: 2; }
  .wc-token-disc { position: relative; width: 44px; height: 44px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.9); }
  .wc-token.home .wc-token-disc { background: #185FA5; }
  .wc-token.away .wc-token-disc { background: #c0392b; }
  .wc-token.sel .wc-token-disc { box-shadow: 0 0 0 3px #EF9F27; }
  .wc-token-ini { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .82rem; }
  .wc-token-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .wc-token-disc.has-img .wc-token-ini { display: none; }
  .wc-token-name { font-size: .66rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; line-height: 1.1; margin-top: 9px; }
  .wc-token-name b { font-weight: 800; opacity: .75; margin-right: 1px; }
  /* corner event icons */
  .wc-tk-ico { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; box-shadow: 0 0 0 1.5px var(--bg); }
  .wc-tk-ico.goal { bottom: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 2px; border-radius: 8px; background: #16a34a; font-size: .56rem; }
  .wc-tk-ico.goal::before { content: "\26BD"; font-size: .62rem; }
  .wc-tk-ico.goal b { margin-left: 1px; }
  .wc-tk-ico.card { top: -3px; left: -3px; width: 9px; height: 12px; border-radius: 2px; }
  .wc-tk-ico.card.y { background: #f5c518; }
  .wc-tk-ico.card.r { background: #e5392f; }
  .wc-tk-ico.sub { top: -4px; right: -4px; width: 15px; height: 15px; border-radius: 50%; background: #e5392f; font-size: .68rem; line-height: 1; }
  /* value badge (club crest / age / height) */
  .wc-tk-val { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-size: .6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
  .wc-tk-val:empty { display: none; }
  .wc-tk-val.crest { background: #fff; border: none; padding: 0; width: 18px; height: 18px; }
  .wc-tk-val.crest img { width: 16px; height: 16px; object-fit: contain; }

  .wc-pitch-fmt { max-width: 470px; margin: 12px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; color: var(--text-muted); font-weight: 600; }
  .wc-pitch-fmt span { color: var(--text); font-weight: 700; }
  .wc-pitch-fmt .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .wc-pitch-fmt .dot.home { background: #185FA5; }
  .wc-pitch-fmt .dot.away { background: #c0392b; }

  /* substitutions (toggled per team) */
  .wc-subs { max-width: 470px; margin: 8px auto 0; }
  .wc-subt { display: flex; gap: 6px; background: var(--surface); border-radius: 11px; padding: 4px; margin-bottom: 8px; }
  .wc-subt-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: .82rem; cursor: pointer; }
  .wc-subt-btn.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .wc-subt-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-sub-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
  .wc-sub-row:hover { background: var(--surface); }
  .wc-sub-head { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-sub-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--text-muted); font-size: .74rem; }
  .wc-sub-main { min-width: 0; flex: 1; }
  .wc-sub-name { font-family: var(--font-display); font-size: .86rem; font-weight: 700; color: var(--text); }
  .wc-sub-name b { opacity: .5; font-weight: 800; margin-right: 4px; }
  .wc-sub-meta { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
  .wc-sub-in { color: #16a34a; font-weight: 700; }
  .wc-subs-sub { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 14px 0 4px; }

  .wc-side { width: 322px; flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto; padding: 18px; position: relative; }
  .wc-side-empty { color: var(--text-muted); font-size: .82rem; line-height: 1.5; padding: 30px 6px; text-align: center; }
  .wc-side-close { display: none; }
  .wc-sp-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .wc-sp-head { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-sp-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--text-muted); font-size: 1rem; }
  .wc-sp-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--text); line-height: 1.15; }
  .wc-sp-pos { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
  .wc-sp-club { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--surface); border-radius: 10px; margin-bottom: 10px; font-size: .84rem; font-weight: 700; color: var(--text); }
  .wc-sp-club img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
  .wc-sp-league { margin-left: auto; font-size: .66rem; font-weight: 600; color: var(--text-muted); }
  .wc-sp-facts { display: flex; gap: 8px; margin-bottom: 14px; }
  .wc-sp-facts > div { flex: 1; text-align: center; padding: 7px 4px; border: 1px solid var(--border); border-radius: 9px; }
  .wc-sp-fact-l { font-size: .64rem; color: var(--text-muted); }
  .wc-sp-fact-v { font-size: .9rem; font-weight: 700; color: var(--text); margin-top: 1px; }
  .wc-sp-loading { font-size: .76rem; color: var(--text-muted); padding: 4px 0 12px; }
  .wc-sp-section { font-family: var(--font-display); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 8px; }
  .wc-sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wc-sp-stat { background: var(--surface); border-radius: 9px; padding: 9px 6px; text-align: center; }
  .wc-sp-stat-v { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--text); }
  .wc-sp-stat-l { font-size: .66rem; color: var(--text-muted); }
  .wc-sp-extra { font-size: .72rem; color: var(--text-muted); margin-top: 9px; line-height: 1.5; }
  .wc-sp-profile { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--accent-text); font-family: var(--font-display); font-weight: 700; font-size: .8rem; cursor: pointer; }
  .wc-sp-profile:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

  @media (max-width: 820px) {
    .wc-mc-head { gap: 8px; }
    .wc-mc-h-name { font-size: .8rem; max-width: 84px; }
    .wc-mc-back span { display: none; }
    .wc-mc-main { padding: 14px 12px 40px; }
    .wc-mc-body { display: block; position: relative; }
    .wc-side { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 72%; z-index: 20; border-left: none; border-top: 1px solid var(--border); background: var(--bg); transform: translateY(102%); transition: transform .22s ease; box-shadow: 0 -10px 30px rgba(0,0,0,.3); border-radius: 16px 16px 0 0; }
    .wc-side.open { transform: translateY(0); }
    .wc-side-close { display: flex; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
  }

  /* ── Matches segmented control ── */
  .wc-seg { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
  .wc-seg-btn { font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--text-muted); background: transparent; border: none; padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: all .12s; }
  .wc-seg-btn:hover { color: var(--text); }
  .wc-seg-btn.active { background: var(--accent); color: #fff; }
  .wc-seg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5392f; margin-left: 4px; vertical-align: middle; animation: wc-pulse 1.3s ease-in-out infinite; }

  /* ── Analysis tab ── */
  .wc-an-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .wc-an-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text); }
  .wc-an-refresh { font-family: var(--font-display); font-size: .76rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 7px 13px; border-radius: 20px; cursor: pointer; transition: all .12s; }
  .wc-an-refresh:hover { border-color: var(--accent); color: var(--accent-text); }
  .wc-an-sub { font-size: .76rem; color: var(--text-muted); margin: 4px 0 18px; }
  .wc-an-sechead { font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }

  /* What to watch */
  .wc-w2w { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .wc-w2w-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .wc-w2w-match { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--text); margin-bottom: 5px; }
  .wc-w2w-angle { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

  /* News */
  .wc-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .wc-news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .12s, transform .08s; }
  a.wc-news-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .wc-news-img { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: var(--border); }
  .wc-news-body { padding: 13px 15px 15px; }
  .wc-news-head { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
  .wc-news-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .wc-news-meta { font-size: .68rem; color: var(--text-muted); margin-top: 9px; font-weight: 600; opacity: .85; }
  .wc-news-more { margin-top: 12px; border-top: 1px solid var(--border); }
  .wc-newsrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); text-decoration: none; }
  .wc-newsrow:hover { background: var(--surface); }
  .wc-newsrow-head { font-size: .84rem; color: var(--text); font-weight: 600; line-height: 1.35; }
  a.wc-newsrow:hover .wc-newsrow-head { color: var(--accent-text); }
  .wc-newsrow-meta { font-size: .66rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
  .wc-news-toggle { margin-top: 12px; font-family: var(--font-display); font-size: .76rem; font-weight: 700; color: var(--accent-text); background: transparent; border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; cursor: pointer; }
  .wc-news-toggle:hover { border-color: var(--accent); }

  /* Predictions */
  .wc-pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .wc-pred { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .wc-pred-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--text); }
  .wc-pred-h { text-align: left; } .wc-pred-a { text-align: right; }
  .wc-pred-h, .wc-pred-a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wc-pred-score { font-size: 1.05rem; font-weight: 800; color: var(--accent-text); flex-shrink: 0; }
  .wc-pred-line { display: flex; align-items: center; justify-content: space-between; margin: 9px 0 7px; }
  .wc-pred-h.win, .wc-pred-a.win { color: #16a34a; }
  .wc-pred-h.draw, .wc-pred-a.draw { color: #d97706; }
  body.light .wc-pred-h.win, body.light .wc-pred-a.win { color: #15803d; }
  .wc-pred-drawtag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #d97706; }
  .wc-conf { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 10px; }
  .wc-conf.high { background: rgba(22,163,74,.18); color: #16a34a; }
  .wc-conf.med { background: rgba(245,197,24,.18); color: #b8860b; }
  .wc-conf.low { background: var(--border); color: var(--text-muted); }
  body.light .wc-conf.med { color: #8a6d00; }
  .wc-pred-why { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }

  /* Projection */
  .wc-proj { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
  @media (max-width: 640px) { .wc-proj { grid-template-columns: 1fr; } }
  .wc-proj-champ { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, #f5c518 16%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
  .wc-proj-trophy { font-size: 2rem; }
  .wc-proj-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wc-proj-team { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); margin: 2px 0 4px; }
  .wc-proj-why { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
  .wc-proj-final { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
  .wc-proj-pair { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .wc-proj-finalist { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--text); }
  .wc-proj-v { font-size: .72rem; color: var(--text-muted); font-weight: 700; }

  /* Power rankings */
  .wc-pwr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
  @media (max-width: 640px) { .wc-pwr-list { grid-template-columns: 1fr; } }
  .wc-pwr { display: grid; grid-template-columns: 26px auto 1fr; align-items: baseline; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
  .wc-pwr-rank { font-family: var(--font-display); font-weight: 800; color: var(--accent-text); font-size: .9rem; text-align: center; }
  .wc-pwr-team { font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--text); }
  .wc-pwr-note { font-size: .72rem; color: var(--text-muted); text-align: right; line-height: 1.35; }

  /* Top performers */
  .wc-perf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  @media (max-width: 640px) { .wc-perf-cols { grid-template-columns: 1fr; } }
  .wc-perf-coltitle { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--text); margin-bottom: 8px; }
  .wc-perf-row { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
  .wc-perf-row:hover { background: var(--surface); }
  .wc-perf-head { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-perf-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .7rem; color: var(--text-muted); }
  .wc-perf-main { flex: 1; min-width: 0; }
  .wc-perf-name { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-perf-meta { font-size: .72rem; color: var(--text-muted); }
  .wc-perf-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--accent-text); text-align: center; flex-shrink: 0; }
  .wc-perf-val span { display: block; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

  /* Storylines */
  .wc-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .wc-insight { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--accent); }
  .wc-insight-t { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--text); margin-bottom: 5px; }
  .wc-insight-b { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }


    /* ═══════════════════════════════════════════════════════════════
       v2 TYPE NORMALIZATION — one section-eyebrow treatment platform-wide.
       Same element (small label above a section/card) was rendered at 5+
       sizes, 3 weights, and 2 font families across screens. This unifies the
       metrics (family/size/weight/spacing) while preserving each rule's color.
       Appended last so it wins on source order (CLAUDE.md pitfall).
       ═══════════════════════════════════════════════════════════════ */
    .section-title,
    .ns-section-eyebrow, .ns-form-hero-eyebrow, .ns-results-eyebrow, .ns-card-eyebrow,
    .dash-section-title, .dash-suggest-label,
    .workspace-col-title,
    .sl-group-label, .sl-summary-label,
    .ntr-squad-title, .ntr-section h3, .ntr-summary h3,
    .ta-suggest-label,
    .li-section-title, .li-card-title,
    .pulse-col-title {
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    /* Fix: Home section label had color:var(--dr-text-4) — undefined outside the DNA card. */
    .section-title { color: var(--text-muted); }

    /* v2 TYPE NORMALIZATION — micro stat/field labels (one treatment). */
    .ns-stat-label, .ns-bstat-label, .rb-keystats .k .lbl, .sr-label,
    .sl-stat-label, .pd-label, .li-metric-label, .dna-tile-label {
      font-family: var(--font-mono);
      font-size: var(--fs-microlabel);
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 IA — Scout mode bar, Ask command bar, sub-nav consolidation
       ═══════════════════════════════════════════════════════════════ */

    /* Scout workspace mode bar (Discover · Shortlist · Squads · Reports) */
    #scout-modebar {
      flex: 0 0 auto;
      display: flex;
      gap: 4px;
      padding: 10px 20px 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .sm-chip {
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 8px 12px 12px;
      cursor: pointer;
      transition: color .15s;
    }
    .sm-chip:hover { color: var(--text); }
    .sm-chip.active { color: var(--accent-text); border-bottom-color: var(--accent); }
    /* A chip's long label (e.g. "National Team Selection") is the default; the
       short form only takes over at the narrow breakpoint below, where the
       modebar would otherwise need the horizontal scroll on its own. */
    .sm-chip-short { display: none; }

    /* Ask The Prism — command bar (sidebar) */
    .nav-ask {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 12px 4px;
      padding: 11px 12px;
      border-radius: var(--r-md);
      background: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: var(--text-nav);
      font-weight: 600;
      width: calc(100% - 24px);
      transition: filter .15s;
    }
    .nav-ask:hover { filter: brightness(1.08); }
    .nav-ask .nav-icon { width: 18px; height: 18px; flex: 0 0 auto; }
    .nav-ask .nav-label { flex: 1; text-align: left; }
    .nav-ask-kbd {
      font-family: var(--font-mono);
      font-size: .62rem;
      opacity: .7;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 5px;
      padding: 2px 5px;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 HYBRID PLAYER REPORT MODAL (.pr-*)
       Light card body + one signature dark rating chip (.p-verdict).
       ═══════════════════════════════════════════════════════════════ */
    #pr-overlay {
      position: fixed; inset: 0; z-index: 4000;
      background: rgba(0,0,0,.5);
      display: none; align-items: flex-start; justify-content: center;
      padding: 40px 20px; overflow-y: auto;
      backdrop-filter: blur(2px);
    }
    #pr-overlay.open { display: flex; }
    #pr-modal {
      position: relative;
      width: 100%; max-width: 720px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,.28);
      overflow: hidden;
    }
    #pr-close {
      position: absolute; top: 14px; right: 14px; z-index: 2;
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--surface2);
      color: var(--text-muted); cursor: pointer; font-size: .8rem;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    #pr-close:hover { background: var(--surface3); color: var(--text); }

    .pr-card { padding: 0; }
    .pr-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 18px; padding: 24px 26px 18px; background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }
    .pr-head-main { min-width: 0; }
    .pr-name {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text);
      line-height: 1.1;
    }
    .pr-dot { color: var(--accent-text); }
    .pr-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .pr-sub  { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
    .pr-badge-callup, .pr-badge-monitor, .pr-badge-consider {
      display: inline-block; margin-top: 10px; font-family: var(--font-mono);
      font-size: var(--fs-microlabel); font-weight: 600; text-transform: uppercase;
      letter-spacing: .06em; padding: 3px 10px; border-radius: var(--r-pill);
    }
    .pr-badge-callup   { background: var(--accent); color: #fff; }
    .pr-badge-monitor  { background: #fef7e0; color: #b45309; border: 1px solid rgba(180,83,9,.2); }
    .pr-badge-consider { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border); }
    body.dark .pr-badge-monitor { background: rgba(180,83,9,.18); color: #f59e0b; }

    /* Signature dark rating chip */
    .p-verdict {
      flex: 0 0 auto; background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-sm); padding: 10px 16px; text-align: right;
    }
    .p-verdict .lbl { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
    .p-verdict .val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; margin-top: 2px; }
    .pr-verdict-max { font-size: .9rem; font-weight: 600; opacity: .6; }
    body.dark .p-verdict { background: var(--paper); color: var(--ink); }

    .pr-kstats {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px; padding: 18px 26px;
    }
    .pr-kstat { background: var(--surface2); border-radius: var(--r-sm); padding: 12px 14px; }
    .pr-kstat-lbl { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
    .pr-kstat-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--text); margin-top: 3px; }
    .pr-kstat-sub { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 500; color: var(--accent-text); letter-spacing: .02em; margin-top: 1px; text-transform: none; }

    .pr-analysis-wrap { padding: 4px 26px 8px; }
    .pr-analysis-hd, .pr-block-hd, .pr-sc-hd {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
      margin-bottom: 10px;
    }
    .pr-verdict-text p { font-size: .92rem; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
    .pr-sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
    .pr-sc { border-radius: var(--r-md); padding: 14px 16px; }
    .pr-sc-str { background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.18); }
    .pr-sc-con { background: rgba(226,59,74,.06); border: 1px solid rgba(226,59,74,.16); }
    .pr-sc-str .pr-sc-hd { color: var(--success); }
    .pr-sc-con .pr-sc-hd { color: var(--danger); }
    .pr-sc ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .pr-sc li { display: flex; flex-direction: column; gap: 2px; }
    .pr-li-t { font-weight: 600; font-size: .82rem; color: var(--text); }
    .pr-li-d { font-size: .78rem; color: var(--text-dim); line-height: 1.5; }

    .pr-block { padding: 14px 26px; }
    .pr-comps { display: flex; flex-direction: column; gap: 10px; }
    .pr-comp { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 14px; }
    .pr-comp-n { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--text); margin-right: 8px; }
    .pr-comp-m { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .pr-comp-r { display: block; font-size: .8rem; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
    .pr-traj { font-size: .88rem; line-height: 1.65; color: var(--text-dim); }

    .pr-foot { display: flex; gap: 10px; padding: 16px 26px 24px; border-top: 1px solid var(--border); margin-top: 6px; }
    .pr-btn {
      font-family: var(--font); font-size: .82rem; font-weight: 600;
      padding: 9px 16px; border-radius: var(--r-sm); cursor: pointer;
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
      transition: background .15s;
    }
    .pr-btn:hover { background: var(--surface2); }
    .pr-btn:first-child { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
    body.dark .pr-btn:first-child { background: var(--paper); color: var(--ink); border-color: var(--paper); }

    /* Analyzing / loading / error states */
    .pr-analyzing { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .78rem; color: var(--accent-text); padding: 10px 0; }
    .pr-spin { width: 13px; height: 13px; border: 2px solid var(--accent-dim); border-top-color: var(--accent); border-radius: 50%; animation: pr-spin .7s linear infinite; }
    @keyframes pr-spin { to { transform: rotate(360deg); } }
    .pr-skel-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 18px 26px; }
    .p-skel-tile { height: 62px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%); background-size: 400% 100%; animation: pr-shimmer 1.4s ease infinite; }
    @keyframes pr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    .pr-analysis-err { margin: 8px 0 12px; }
    .p-error { background: rgba(226,59,74,.07); border: 1px solid rgba(226,59,74,.2); border-left: 3px solid var(--danger); border-radius: var(--r-sm); padding: 12px 14px; font-size: .82rem; color: var(--text); }
    .p-error button { margin-left: 8px; background: none; border: 1px solid var(--border); border-radius: 5px; padding: 3px 10px; font-size: .75rem; cursor: pointer; color: var(--text); }

    @media (max-width: 640px) {
      #pr-overlay { padding: 0; }
      #pr-modal { max-width: 100%; min-height: 100%; border-radius: 0; border: none; }
      .pr-head { flex-direction: column; gap: 14px; }
      .p-verdict { align-self: flex-start; }
      .pr-sc-grid { grid-template-columns: 1fr; }
    }

    /* Clickable club name inside the report meta */
    .pr-team-link { color: var(--accent-text); cursor: pointer; border-bottom: 1px dotted transparent; transition: border-color .15s; }
    .pr-team-link:hover { border-bottom-color: var(--accent); }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 6 — premium design revamp
       ═══════════════════════════════════════════════════════════════ */

    /* 6A · Profile "back to Discover" affordance */
    .dash-back-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 6px 12px 6px 9px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
      flex: 0 0 auto;
    }
    .dash-back-btn:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-dim); }
    .dash-back-btn svg { stroke: currentColor; }

    /* ───────────────────────────────────────────────────────────────
       6B · TYPOGRAPHY NORMALISATION (append — source-order wins)
       Keep the vibe (WC screen is the reference); collapse the drift:
       loud display sizes → the 5-step Nunito scale at near-equivalent
       sizes, buttons → one token, DNA px-island body → the rem scale.
       ─────────────────────────────────────────────────────────────── */

    /* Display heroes → 5-step scale (near-equivalent, minimal visual shift) */
    .rb-head .name,
    .team-dna-report .dna-team-name,
    .sr-rating-value,
    .ns-results-name        { font-size: var(--fs-d1); }
    .rb-head .verdict-chip .val,
    .team-dna-report .dna-perf-big { font-size: var(--fs-d2); }
    .ntr-title,
    .sr-name                { font-size: var(--fs-d3); }
    .ns-card-title          { font-size: var(--fs-d4); }

    /* Buttons → one size token */
    .pd-btn, .pd-mode-btn, .li-refresh, .li-sort, .li-load,
    .pcb-hf-add, .wc-subt, .rb-back-btn, .rb-export-btn { font-size: var(--fs-btn); }

    /* DNA px-island body text → rem scale (was 14/13px) */
    .team-dna-report .dna-fp-label      { font-size: var(--fs-body); }
    .team-dna-report .dna-key-text,
    .team-dna-report .dna-fixture-table td { font-size: var(--fs-body-sm); }

    /* ═══════════════════════════════════════════════════════════════
       6G · ⌘K COMMAND PALETTE
       ═══════════════════════════════════════════════════════════════ */
    #cmdk-overlay {
      position: fixed; inset: 0; z-index: 4000;
      display: none;
      align-items: flex-start; justify-content: center;
      padding-top: 12vh;
      background: rgba(11,11,12,.44);
      backdrop-filter: blur(6px) saturate(1.1);
      -webkit-backdrop-filter: blur(6px) saturate(1.1);
    }
    #cmdk-overlay.open { display: flex; animation: cmdk-fade .14s ease; }
    @keyframes cmdk-fade { from { opacity: 0 } to { opacity: 1 } }

    #cmdk-box {
      width: min(600px, 92vw);
      max-height: 62vh;
      display: flex; flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: 0 24px 60px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.03);
      overflow: hidden;
      animation: cmdk-pop .16s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes cmdk-pop { from { transform: translateY(-8px) scale(.98); opacity: .4 } to { transform: none; opacity: 1 } }

    #cmdk-input-row {
      display: flex; align-items: center; gap: 11px;
      padding: 15px 18px;
      border-bottom: 1px solid var(--border);
    }
    #cmdk-input-row > svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
    #cmdk-input {
      flex: 1; border: 0; outline: 0; background: transparent;
      font-family: var(--font); font-size: 1rem; color: var(--text);
    }
    #cmdk-input::placeholder { color: var(--text-muted); }
    .cmdk-esc {
      font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em;
      color: var(--text-muted); border: 1px solid var(--border);
      border-radius: 5px; padding: 3px 6px; flex: 0 0 auto;
    }

    #cmdk-results { overflow-y: auto; padding: 6px; }
    .cmdk-group-label {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
      padding: 10px 12px 5px;
    }
    .cmdk-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 12px; border-radius: var(--r-md);
      cursor: pointer; scroll-margin: 8px;
    }
    .cmdk-item .cmdk-ic { width: 17px; height: 17px; color: var(--text-muted); flex: 0 0 auto; }
    .cmdk-label { font-size: var(--fs-body); color: var(--text); font-weight: 500; }
    .cmdk-sub {
      margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-microlabel);
      color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap; padding-left: 10px;
    }
    .cmdk-item.sel { background: var(--accent); }
    .cmdk-item.sel .cmdk-ic,
    .cmdk-item.sel .cmdk-label,
    .cmdk-item.sel .cmdk-sub { color: #fff; }
    .cmdk-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-body); }

    #cmdk-foot {
      display: flex; gap: 18px; align-items: center;
      padding: 9px 16px; border-top: 1px solid var(--border);
      background: var(--surface2);
    }
    #cmdk-foot span { display: inline-flex; align-items: center; gap: 5px;
      font-size: var(--fs-microlabel); color: var(--text-muted); }
    #cmdk-foot kbd {
      font-family: var(--font-mono); font-size: .58rem; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--surface);
    }
    @media (prefers-reduced-motion: reduce) {
      #cmdk-overlay.open, #cmdk-box { animation: none; }
    }
    @media (max-width: 600px) {
      #cmdk-overlay { padding-top: 0; align-items: stretch; }
      #cmdk-box { width: 100vw; max-height: 100vh; border-radius: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════
       6C/6D · CHAT REVAMP — header, history dropdown, slick loading
       ═══════════════════════════════════════════════════════════════ */
    #chat-header {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .ch-brand { display: flex; align-items: center; gap: 9px; }
    .ch-mark { display: inline-flex; color: var(--text); }
    .ch-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-d5); color: var(--text); letter-spacing: -0.01em; }
    .ch-actions { display: flex; align-items: center; gap: 8px; position: relative; }
    .ch-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font); font-size: var(--fs-btn); font-weight: 500;
      color: var(--text-dim); background: var(--surface2);
      border: 1px solid var(--border); border-radius: var(--r-pill);
      padding: 6px 13px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
    }
    .ch-btn:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-dim); }
    .ch-btn svg { flex: 0 0 auto; }
    .ch-history-wrap { position: relative; }
    .ch-menu {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
      width: 300px; max-height: 60vh; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); box-shadow: 0 16px 44px -10px rgba(0,0,0,.4);
      padding: 6px;
    }
    .ch-menu-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-body-sm); }
    .ch-menu-item {
      display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
      background: none; border: 0; border-radius: var(--r-sm);
      padding: 9px 11px; cursor: pointer; transition: background .12s;
    }
    .ch-menu-item:hover { background: var(--surface2); }
    .ch-menu-item.active { background: var(--accent-dim); }
    .ch-menu-title { font-size: var(--fs-body); color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-menu-time { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); }
    /* A History row: the chat, then rename and delete (31 Oct 2026). */
    .ch-menu-row { display: flex; align-items: center; gap: 2px; }
    .ch-menu-row .ch-menu-item { flex: 1 1 auto; min-width: 0; }
    .ch-menu-row .cr-rename-input { flex: 1 1 auto; min-width: 0; margin: 6px 4px 6px 8px; font-size: var(--fs-body); padding: 6px 8px; }
    .ch-menu-act {
      flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
      border: 0; background: none; color: var(--text-muted); border-radius: var(--r-sm);
      cursor: pointer; opacity: .65; transition: opacity .12s, background .12s, color .12s;
    }
    .ch-menu-row:hover .ch-menu-act, .ch-menu-act:focus-visible { opacity: 1; }
    .ch-menu-act:hover { background: var(--surface2); color: var(--text); }
    .ch-menu-act.del:hover { color: var(--danger); }
    .ch-menu-act.confirm { width: auto; padding: 0 8px; opacity: 1; }
    .ch-menu-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    @media (hover: none) { .ch-menu-act { opacity: 1; } }

    /* Slick indeterminate "thinking" state */
    .ai-think { display: inline-flex; align-items: center; gap: 10px; }
    .ai-think-mark { display: inline-flex; color: var(--text); animation: ai-mark-pulse 1.6s ease-in-out infinite; }
    .ai-think-mark circle { animation: ai-dot-glow 1.6s ease-in-out infinite; }
    @keyframes ai-mark-pulse { 0%,100% { opacity: .55; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-1px) } }
    @keyframes ai-dot-glow { 0%,100% { r: 2.4 } 50% { r: 3.4 } }
    .ai-think-text {
      font-size: var(--fs-body); font-weight: 500;
      background: linear-gradient(90deg, var(--text-muted) 20%, var(--text) 45%, var(--text-muted) 70%);
      background-size: 220% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: ai-shimmer 1.8s linear infinite;
    }
    @keyframes ai-shimmer { from { background-position: 130% 0 } to { background-position: -30% 0 } }

    /* Tool status → soft pill with a pulsing dot */
    .tool-status {
      display: inline-flex; align-items: center; gap: 8px;
      margin: 8px 0 2px;
      font-family: var(--font); font-size: var(--fs-body-sm); color: var(--text-dim);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-pill); padding: 5px 12px;
    }
    .tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tool-dot 1.2s ease-in-out infinite; }
    @keyframes tool-dot { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1) } }

    @media (prefers-reduced-motion: reduce) {
      .ai-think-mark, .ai-think-mark circle, .ai-think-text, .tool-dot { animation: none; }
      .ai-think-text { -webkit-text-fill-color: var(--text); color: var(--text); }
    }

    /* 6C · Ask welcome refinements */
    .ea-mark { display: inline-flex; color: var(--text); margin-bottom: 14px; opacity: .92; }
    .ea-head h1 { font-size: var(--fs-d1); letter-spacing: -0.02em; }
    .ea-head p { font-size: var(--fs-body); color: var(--text-muted); }
    #ea-context-row { width: 100%; max-width: 720px; margin: 2px auto 14px; }
    #ea-context-row .lbl {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px;
    }
    .ea-context-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ea-context-chips .ea-chip {
      border-color: var(--accent); background: var(--accent-dim); color: var(--text);
    }

    /* ═══════════════════════════════════════════════════════════════
       6E · REPORT MODAL — export / share / prepared-by
       ═══════════════════════════════════════════════════════════════ */
    .pr-btn-icon { color: var(--text-dim); }
    .pr-prepared {
      display: none;   /* screen: hidden; print: shown */
      align-items: center; gap: 8px;
      padding: 8px 2px 0;
      font-family: var(--font-mono); font-size: var(--fs-microlabel);
      color: var(--text-muted); letter-spacing: .03em;
    }
    .pr-prepared-edit {
      background: none; border: 0; cursor: pointer; color: var(--text-muted);
      font-size: .8rem; padding: 2px 5px; border-radius: 5px;
    }
    .pr-prepared-edit:hover { color: var(--accent-text); background: var(--accent-dim); }
    /* Show the prepared-by line on screen too (subtle), so users know export attributes it */
    #pr-modal .pr-prepared { display: flex; }

    /* Branded print header — only shows on the exported PDF. */
    .pr-print-header { display: none; }

    /* Scoped print — the modal is hoisted to <body> (see _prExportPDF) so no
       constrained ancestor clips it. Reset the whole chain so content flows. */
    @media print {
      html, body {
        height: auto !important; overflow: visible !important;
        background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
      }
      body.printing-report > *:not(#pr-overlay) { display: none !important; }
      #pr-overlay {
        position: static !important; display: block !important;
        inset: auto !important; z-index: auto !important;
        background: none !important; backdrop-filter: none !important;
        padding: 0 !important; margin: 0 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
        /* Force the report to render in light tokens even if the app is in dark mode */
        --surface: #fff; --surface2: #fafafa; --surface3: #f5f5f5;
        --bg: #fff; --border: #e5e5e5; --border2: rgba(0,0,0,.12);
        --text: #0b0b0c; --text-dim: #525252; --text-muted: #737373;
        --accent-dim: rgba(37,99,235,.08);
        color: #0b0b0c;
      }
      #pr-modal {
        position: static !important; box-shadow: none !important; border: none !important;
        max-height: none !important; height: auto !important; width: auto !important;
        max-width: none !important; overflow: visible !important; border-radius: 0 !important;
        background: #fff !important;
      }
      #pr-body { overflow: visible !important; max-height: none !important; height: auto !important; }
      #pr-close, .pr-foot { display: none !important; }
      .pr-prepared { display: flex !important; }
      .pr-card { box-shadow: none !important; border: none !important; padding: 0 !important; }

      /* Branded header block on the PDF */
      .pr-print-header {
        display: flex !important; align-items: center; gap: 12px;
        padding: 0 0 16px; margin-bottom: 18px;
        border-bottom: 2px solid var(--ink);
      }
      .pr-ph-mark { color: var(--ink); display: inline-flex; }
      .pr-ph-brand { display: flex; flex-direction: column; line-height: 1.15; }
      .pr-ph-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
      .pr-ph-name .pr-dot { color: var(--accent-text); }
      .pr-ph-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
      .pr-ph-report { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

      /* Let big blocks flow across pages; only keep SMALL atomic items intact.
         (break-inside:avoid on the whole analysis was forcing it off page 1,
         leaving a huge gap.) */
      .pr-kstat, .pr-comp, .pr-sc-grid li { break-inside: avoid; }
      .pr-block-hd, .pr-sc-hd, .pr-analysis-hd { break-after: avoid; }
      @page { size: A4 portrait; margin: 14mm 14mm 12mm; }
    }

    /* ═══════════════════════════════════════════════════════════════
       6F · RESPONSIVE UNIFICATION — mid-range reflows (700–1100 dead zone)
       Desktop column counts were rendering into a squeezed main area.
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .team-analysis-report .ta-squad-grid,
      .team-analysis-report .ta-sp-tiles,
      .team-dna-report .dna-squad-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .wc-groups-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .sl-card-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 900px) {
      .home-band { padding-left: 20px !important; padding-right: 20px !important; }
      .wc-proj, .wc-pwr-list, .wc-perf-cols { grid-template-columns: 1fr !important; }
      .ta-key-men-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 640px) {
      .team-analysis-report .ta-squad-grid,
      .team-analysis-report .ta-sp-tiles,
      .team-dna-report .dna-squad-grid,
      .wc-groups-grid, .sl-card-grid { grid-template-columns: 1fr !important; }
      #scout-modebar { overflow-x: auto; }
      .sm-chip-long  { display: none; }
      .sm-chip-short { display: inline; }
    }

    /* 6H · Home "Recently viewed" rail */
    .home-recents-row {
      display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
    }
    .home-recent-chip {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-pill); padding: 7px 14px 7px 9px;
      cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
    }
    .home-recent-chip:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }
    .hrc-kind {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 2px 7px; border-radius: var(--r-sm); color: #fff;
    }
    .hrc-player { background: var(--accent); }
    .hrc-team   { background: #0ea5a3; }
    .hrc-league { background: #7c6cf0; }
    .hrc-name { font-size: var(--fs-body); font-weight: 500; color: var(--text); }

    /* ═══════════════════════════════════════════════════════════════
       6I · COMMAND PALETTE DISCOVERABILITY — sidebar search + mobile FAB
       ═══════════════════════════════════════════════════════════════ */
    /* Sidebar search trigger (looks like a search field; opens the palette) */
    .sidebar-search {
      display: flex; align-items: center; gap: 9px;
      margin: 4px 12px 6px; padding: 9px 11px;
      width: calc(100% - 24px);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--r-md);
      color: rgba(255,255,255,.62);
      cursor: pointer; text-align: left;
      transition: background .15s, border-color .15s, color .15s;
    }
    body.light .sidebar-search { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: var(--text-muted); }
    .sidebar-search:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
    body.light .sidebar-search:hover { background: rgba(0,0,0,.06); border-color: var(--accent); color: var(--text); }
    .sidebar-search .ss-icon { width: 15px; height: 15px; flex: 0 0 auto; }
    .sidebar-search .ss-label { flex: 1; font-size: var(--fs-btn); }
    .sidebar-search .ss-kbd {
      font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em;
      border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 2px 5px; flex: 0 0 auto;
    }
    body.light .sidebar-search .ss-kbd { border-color: var(--border); }
    /* Collapse to icon-only when the sidebar is an icon rail */
    #sidebar.collapsed .sidebar-search { justify-content: center; width: 40px; margin: 4px auto 6px; padding: 9px 0; }
    #sidebar.collapsed .sidebar-search .ss-label,
    #sidebar.collapsed .sidebar-search .ss-kbd { display: none; }
    @media (max-width: 700px) {
      .sidebar-search { justify-content: center; width: 40px; margin: 4px auto 6px; padding: 9px 0; }
      .sidebar-search .ss-label, .sidebar-search .ss-kbd { display: none; }
    }

    /* Mobile search FAB (phones have no ⌘K) */
    #mobile-search-fab {
      display: none;
      position: fixed; right: 16px; bottom: 74px; z-index: 3500;
      width: 50px; height: 50px; border-radius: 50%;
      background: var(--accent); color: #fff; border: none; cursor: pointer;
      box-shadow: 0 8px 22px -4px rgba(37,99,235,.55);
      align-items: center; justify-content: center;
    }
    #mobile-search-fab svg { width: 22px; height: 22px; }
    #mobile-search-fab:active { transform: scale(.94); }
    @media (max-width: 600px) { #mobile-search-fab { display: flex; } }
    /* Hide the FAB on the chat page — the send button owns that corner. */
    body.chat-active #mobile-search-fab { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════
       6J · EMPTY / UNAVAILABLE STATES — one consistent treatment
       (they were already centered + muted; this removes the size drift
        and gives them a uniform, friendly feel across every screen.)
       ═══════════════════════════════════════════════════════════════ */
    .home-unavailable, .pulse-no-data, .sl-dropdown-msg, .cr-empty,
    .ch-menu-empty, .cmdk-empty, .wc-empty, .li-empty, .pd-no-results {
      font-size: var(--fs-body-sm);
      color: var(--text-muted);
      text-align: center;
      line-height: 1.55;
    }

    /* ═══════════════════════════════════════════════════════════════
       REFRACTIONS — The Prism Journal (premium editorial reading)
       Built on v2 tokens. Signature detail: a thin prism-spectrum rule
       (the light a prism splits) echoing the name + the OG card.
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --rfx-spectrum: linear-gradient(90deg, #e5392f 0%, #f97316 26%, #f5b301 46%, #16a34a 68%, #2563EB 100%);
      --rfx-measure: 42rem;   /* comfortable reading column */
    }
    #refractions-panel { background: var(--bg); }

    /* ── Masthead ── */
    .rfx-masthead { position: relative; }
    .rfx-spectrum {
      height: 3px; width: 100%;
      background: var(--rfx-spectrum);
      opacity: .9;
    }
    .rfx-mast-inner {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 40px 24px 8px;
    }
    .rfx-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
    .rfx-brand-mark { display: inline-flex; color: var(--text); line-height: 0; }
    .rfx-eyebrow {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .16em; color: var(--accent-text);
    }
    .rfx-wordmark {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
      font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: .98; color: var(--text);
      margin-bottom: 14px;
    }
    .rfx-tagline {
      font-size: .88rem; line-height: 1.6; color: var(--text-dim);
      max-width: 48ch;
    }

    /* ── Index body ── */
    .rfx-body {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 20px 24px 64px;
    }
    .rfx-list-skel { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

    /* Featured lead essay — the magazine cover */
    .rfx-feature {
      display: block; position: relative; cursor: pointer; text-decoration: none;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      animation: rfx-rise .5s ease both;
    }
    .rfx-feature:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
      border-color: var(--border-strong);
    }
    body.dark .rfx-feature:hover { box-shadow: 0 12px 34px rgba(0,0,0,.5); }
    .rfx-feature-spectrum { height: 4px; background: var(--rfx-spectrum); }
    .rfx-feature-main { padding: 26px 28px 28px; }
    .rfx-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .rfx-kicker-latest {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
    }
    .rfx-feature-title {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
      font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.08; color: var(--text);
      margin-bottom: 12px;
    }
    .rfx-feature:hover .rfx-feature-title { color: var(--accent-text); }
    .rfx-feature-dek {
      font-size: 1.05rem; line-height: 1.55; color: var(--text-dim);
      max-width: 52ch; margin-bottom: 18px;
    }
    .rfx-read-cta {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
      font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--accent-text);
    }
    .rfx-read-cta svg { transition: transform .16s ease; }
    .rfx-feature:hover .rfx-read-cta svg { transform: translateX(3px); }

    /* meta line (shared) */
    .rfx-meta {
      display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
      font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted);
    }
    .rfx-meta i { color: var(--border-strong); font-style: normal; }
    .rfx-meta span:first-child { color: var(--accent-text); font-weight: 600; letter-spacing: .04em; }
    .rfx-meta-sm { font-size: .68rem; }

    /* "More from the journal" */
    .rfx-section-hd { margin: 34px 0 6px; }
    .rfx-eyebrow-sm {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
    }
    .rfx-list { display: flex; flex-direction: column; }
    .rfx-row {
      display: flex; align-items: center; gap: 16px; cursor: pointer; text-decoration: none;
      padding: 20px 4px; border-top: 1px solid var(--border);
      transition: padding-left .16s ease;
    }
    .rfx-row:hover { padding-left: 10px; }
    .rfx-row-main { flex: 1; min-width: 0; }
    .rfx-row-title {
      font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
      line-height: 1.2; letter-spacing: -.01em; color: var(--text); margin: 7px 0 5px;
      transition: color .14s ease;
    }
    .rfx-row:hover .rfx-row-title { color: var(--accent-text); }
    .rfx-row-dek { font-size: .92rem; line-height: 1.5; color: var(--text-dim); max-width: 60ch; }
    .rfx-row-chev { color: var(--text-muted); opacity: 0; transition: opacity .14s ease, transform .14s ease; flex-shrink: 0; }
    .rfx-row:hover .rfx-row-chev { opacity: 1; transform: translateX(2px); }

    /* ── Reader ── */
    .rfx-reader-bar {
      display: flex; align-items: center; justify-content: space-between;
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 18px 24px 0;
    }
    .rfx-back, .rfx-share {
      display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
      background: none; border: 0; padding: 6px 0; text-decoration: none;
      transition: color .14s ease;
    }
    .rfx-back:hover, .rfx-share:hover { color: var(--accent-text); }

    .rfx-art-inner {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 22px 24px 80px; position: relative;
      animation: rfx-rise .45s ease both;
    }
    .rfx-art-spectrum {
      width: 46px; height: 3px; background: var(--rfx-spectrum);
      border-radius: 2px; margin-bottom: 22px;
    }
    .rfx-art-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
    .rfx-art-kicker-txt {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
    }
    .rfx-art-title {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
      font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.04; color: var(--text);
      margin-bottom: 18px;
    }
    .rfx-art-dek {
      font-size: 1.28rem; line-height: 1.5; color: var(--text-dim);
      font-weight: 400; margin-bottom: 26px; max-width: 40ch;
    }
    .rfx-byline {
      display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
      padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px;
    }
    .rfx-byline-mono {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--ink); color: var(--ink-text);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 800; font-size: .9rem;
    }
    body.dark .rfx-byline-mono { background: var(--paper); color: var(--ink); }
    .rfx-byline-who { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); }
    .rfx-byline-meta {
      display: flex; gap: 7px; align-items: center; margin-left: auto;
      font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted);
    }
    .rfx-byline-meta i { color: var(--border-strong); font-style: normal; }

    /* Short version card */
    .rfx-short {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 34px;
    }
    .rfx-short-hd {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: 14px;
    }
    .rfx-short ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .rfx-short li {
      position: relative; padding-left: 20px; font-size: .96rem; line-height: 1.55; color: var(--text-dim);
    }
    .rfx-short li::before {
      content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
      border-radius: 2px; background: var(--accent);
    }

    /* Prose — the reading experience */
    .rfx-prose { font-size: 1.14rem; line-height: 1.78; color: var(--text); }
    .rfx-prose p { margin-bottom: 22px; }
    .rfx-prose p:last-child { margin-bottom: 0; }
    .rfx-h {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
      font-size: 1.42rem; line-height: 1.2; color: var(--text);
      margin: 40px 0 16px;
    }
    body.dark .rfx-prose { color: var(--text-dim); }

    /* Bottom line — the signature dark verdict block */
    .rfx-bottom {
      background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-lg); padding: 26px 28px; margin: 40px 0 0;
      position: relative; overflow: hidden;
    }
    body.dark .rfx-bottom { background: #000; border: 1px solid var(--border); }
    .rfx-bottom::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--rfx-spectrum);
    }
    .rfx-bottom-lbl {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); margin-bottom: 12px;
    }
    .rfx-bottom-txt { font-size: 1.16rem; line-height: 1.6; font-weight: 500; }

    /* Tags */
    .rfx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }

    /* Waitlist CTA */
    .rfx-cta {
      margin-top: 44px; padding: 28px;
      background: var(--accent-dim); border: 1px solid rgba(37,99,235,.28);
      border-radius: var(--r-lg);
    }
    .rfx-cta-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--text); margin-bottom: 7px; }
    .rfx-cta-sub { font-size: .94rem; line-height: 1.55; color: var(--text-dim); max-width: 52ch; margin-bottom: 18px; }
    .rfx-cta-form { display: flex; gap: 10px; flex-wrap: wrap; }
    .rfx-cta-form input[type=email] {
      flex: 1; min-width: 220px; font-family: var(--font); font-size: .95rem;
      padding: 12px 15px; border-radius: var(--r-sm);
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
    }
    .rfx-cta-form input[type=email]:focus { outline: none; border-color: var(--accent); }
    .rfx-cta-form button {
      font-family: var(--font-display); font-weight: 700; font-size: .9rem; cursor: pointer;
      padding: 12px 22px; border-radius: var(--r-sm); border: 0;
      background: var(--accent); color: #fff; transition: filter .14s ease;
    }
    .rfx-cta-form button:hover { filter: brightness(1.06); }
    .rfx-cta-form button:disabled { opacity: .6; cursor: default; }
    .rfx-cta-msg { font-size: .86rem; margin-top: 12px; min-height: 1.1em; color: var(--text-dim); }
    .rfx-cta-msg.ok { color: var(--success); }
    .rfx-cta-msg.err { color: var(--danger); }

    @keyframes rfx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .rfx-feature, .rfx-art-inner { animation: none; } }

    /* Mobile */
    @media (max-width: 760px) {
      .rfx-mast-inner { padding: 28px 18px 6px; }
      .rfx-body { padding: 16px 18px 56px; }
      .rfx-reader-bar { padding: 14px 18px 0; }
      .rfx-art-inner { padding: 18px 18px 64px; }
      .rfx-feature-main { padding: 22px 20px 24px; }
      .rfx-prose { font-size: 1.08rem; line-height: 1.72; }
      .rfx-art-dek { font-size: 1.12rem; }
    }

  /* ── World Cup recap (post-tournament) ──
     Shown on Home and in the World Cup tab between the final and the new domestic
     season. Kept at the end of the stylesheet so these base rules sit after the big
     mobile @media blocks — each rule that needs a mobile variant carries its own
     query immediately below it. */
  .wcr-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, color-mix(in srgb, #f5c518 20%, var(--surface)), var(--surface) 70%); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
  .wcr-hero-trophy { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
  .wcr-hero-flag { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
  .wcr-hero-main { flex: 1; min-width: 0; }
  .wcr-hero-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-hero-team { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--text); margin: 2px 0 4px; }
  .wcr-hero-line { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
  .wcr-hero-score { font-family: var(--font-display); font-weight: 800; color: var(--text); }
  @media (max-width: 640px) {
    /* Wrap rather than stack: trophy + flag share the first row, the text block takes a
       full-width second row. Stacking all three put the name a long way down the card. */
    .wcr-hero { flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; }
    .wcr-hero-main { flex-basis: 100%; }
    .wcr-hero-trophy { font-size: 2.2rem; }
    .wcr-hero-flag { width: 46px; height: 46px; }
    .wcr-hero-team { font-size: 1.35rem; }
  }

  .wcr-podium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
  @media (max-width: 640px) { .wcr-podium { grid-template-columns: repeat(2, 1fr); } }
  .wcr-pod { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
  .wcr-pod.gold { border-color: color-mix(in srgb, #f5c518 55%, var(--border)); }
  .wcr-pod-pos { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-pod-flag { width: 34px; height: 34px; object-fit: contain; margin: 7px auto 5px; display: block; }
  .wcr-pod-team { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--text); }

  .wcr-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 780px) { .wcr-awards { grid-template-columns: 1fr; } }
  .wcr-award { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
  .wcr-award-flag { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
  .wcr-award-main { flex: 1; min-width: 0; }
  .wcr-award-lbl { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-award-name { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wcr-award-meta { font-size: .72rem; color: var(--text-muted); }
  .wcr-award-val { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent-text); flex-shrink: 0; text-align: center; }
  .wcr-award-val span { display: block; font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

  .wcr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 640px) { .wcr-stats { grid-template-columns: repeat(2, 1fr); } }
  .wcr-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px; text-align: center; }
  .wcr-stat-v { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent-text); }
  .wcr-stat-l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 2px; }

  .wcr-path-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
  .wcr-path-round { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
  .wcr-path-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .wcr-path-opp img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
  .wcr-path-opp span { font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wcr-path-score { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--text); }
  .wcr-path-score small { font-weight: 700; font-size: .62rem; color: var(--text-muted); margin-left: 5px; }
  /* Narrower label column on mobile, but wide enough for the longest round name
     ("Quarterfinals") at a slightly reduced size — otherwise it clips mid-word. Must
     come after the .wcr-path-* base rules above, or equal specificity + source order
     lets the base font-size win inside the query. */
  @media (max-width: 640px) {
    .wcr-path-row { grid-template-columns: 96px 1fr auto; gap: 8px; }
    .wcr-path-round { font-size: .58rem; letter-spacing: .02em; }
  }

  .wcr-note { font-size: .72rem; color: var(--text-muted); margin-top: 10px; line-height: 1.45; }


/* ═══════════════════════════════════════════════════════════════════════
   v3 SHELL — fixed masthead + nav row. Appended last so it wins source
   order over every earlier sidebar-era rule (see the mobile CSS note in
   CLAUDE.md: later base rules beat earlier @media overrides).
   ═══════════════════════════════════════════════════════════════════════ */
#shell-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 640;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
body { padding-top: 98px; }

#masthead {
  height: 60px; display: flex; align-items: center; gap: 20px;
  padding: 0 20px; border-bottom: 1px solid var(--border);
}
#masthead .logo-mark { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; }
#masthead .logo-icon { color: var(--text); display: flex; }
#masthead .logo-name {
  font-family: var(--font-display); font-size: var(--fs-d5); font-weight: 800;
  letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
#masthead .theme-toggle-btn {
  position: static; width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
#masthead .theme-toggle-btn:hover { background: var(--surface3); color: var(--text); }

#ask-bridge {
  flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; height: 40px;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 0 14px; cursor: text; transition: border-color .15s, background .15s;
  color: var(--text-muted); font-family: var(--font); font-size: var(--fs-body);
}
#ask-bridge:hover { border-color: var(--border-strong); }
#ask-bridge .ab-spark { color: var(--accent-text); display: flex; flex-shrink: 0; }
#ask-bridge .ab-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ask-bridge .ab-kbd {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface3); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; flex-shrink: 0;
}

#navrow {
  height: 38px; display: flex; align-items: stretch; gap: 2px;
  padding: 0 14px; overflow-x: auto; scrollbar-width: none;
}
#navrow::-webkit-scrollbar { display: none; }
#navrow .nav-item {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto;
  margin: 0; border-radius: 0; height: auto;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0 11px; cursor: pointer; transition: color .12s, border-color .12s;
  white-space: nowrap;
}
#navrow .nav-item:hover { color: var(--text-dim); background: none; }
#navrow .nav-item.active { color: var(--accent-text); border-bottom-color: var(--accent); background: none; }
#navrow .nav-badge {
  position: static; font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 1px 6px;
}
#navrow .nav-pulse { position: static; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }

#orient {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  min-width: 0; padding-left: 16px; flex-shrink: 1;
}
#orient #topbar-title {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700;
  color: var(--text); white-space: nowrap;
}
#orient #topbar-desc {
  font-size: var(--fs-meta); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1000px) { #orient #topbar-desc { display: none; } }
@media (max-width: 700px) {
  body { padding-top: 56px; }
  #masthead { height: 56px; gap: 10px; padding: 0 12px; }
  #masthead .logo-name { display: none; }
  #navrow { display: none; } /* mobile navigates via the bottom bar */
}

/* v3 mobile bar: four section tabs, Ask promoted to the centre FAB.
   (WC lives on via the Home recap band and #/wc deep links.) */
.mob-nav-fab {
  width: 46px; height: 46px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  margin: -14px 6px 0; box-shadow: 0 4px 14px rgba(37,99,235,.4); cursor: pointer;
}
.mob-nav-fab:active { transform: scale(.96); }

/* ─── v3 ask bar: live input, subject token, suggestion sheet, spectrum ─── */
:root { --spectrum: linear-gradient(90deg,#2563EB 0%,#4f46e5 22%,#06b6d4 45%,#10b981 68%,#f59e0b 88%,#ef4444 100%); }
#askwrap { position: relative; flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; }
#ask-bridge { width: 100%; cursor: text; position: relative; overflow: hidden; }
#ask-bridge input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  color: var(--text); font-family: var(--font); font-size: var(--fs-body); padding: 0;
}
#ask-bridge input::placeholder { color: var(--text-muted); }
#ask-bridge:focus-within { border-color: var(--accent); background: var(--surface); }
#ask-bridge .ab-kbd { cursor: pointer; }
#ask-bridge .ab-kbd:hover { color: var(--text); border-color: var(--border-strong); }
/* the refraction: streaming paints the spectrum across the bar's base */
#ask-bridge::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--spectrum); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .2s;
  pointer-events: none;
}
#ask-bridge.thinking::after { transform: scaleX(1); animation: prism-beam 1.1s linear infinite; }
@keyframes prism-beam { to { background-position: -200% 0; } }
/* subject token: the open entity, carried as context */
#ask-subject {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--fs-meta); font-weight: 600; color: var(--accent-text);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 3px 5px 3px 9px;
  white-space: nowrap; max-width: 200px;
}
#ask-subject b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#ask-subject .asx {
  width: 15px; height: 15px; border-radius: 3px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; opacity: .55; cursor: pointer;
}
#ask-subject .asx:hover { opacity: 1; background: rgba(37,99,235,.18); }
/* suggestion sheet */
#ask-sheet {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 660;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px;
}
body.dark #ask-sheet { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.ask-sheet-lbl {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  padding: 7px 10px 6px;
}
.ask-sheet-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: var(--font); font-size: var(--fs-body); color: var(--text-dim);
  background: none; border: none; border-radius: var(--r-sm); padding: 9px 10px;
  cursor: pointer; transition: background .1s, color .1s;
}
.ask-sheet-item:hover { background: var(--accent-dim); color: var(--text); }
.ask-sheet-item svg { color: var(--text-muted); flex-shrink: 0; }
.ask-sheet-item:hover svg { color: var(--accent-text); }
@media (max-width: 700px) {
  #ask-subject b { max-width: 70px; }
  #ask-sheet { position: fixed; top: 58px; left: 8px; right: 8px; }
}

/* ─── v3 HOME TERMINAL — dense panel grid (ported from the approved mockup) ─── */
.home-lede {
  padding: 18px 24px 6px; font-size: var(--fs-body); color: var(--text-muted);
  line-height: 1.55; max-width: 86ch;
}
.home-lede b { color: var(--text); font-weight: 700; }
#home-league-bands { display: none !important; }  /* superseded by #home-terminal */
#home-terminal { padding: 12px 16px 32px; }
.term-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; grid-auto-rows: min-content; }
.term-panel {
  grid-column: span 4; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}
.term-panel.wide { grid-column: span 6; }
.term-panel.w8 { grid-column: span 8; }
.term-panel.full { grid-column: span 12; }
@media (max-width: 1180px) {
  .term-panel { grid-column: span 6; }
  .term-panel.wide, .term-panel.w8, .term-panel.full { grid-column: span 12; }
}
@media (max-width: 720px) {
  .term-panel, .term-panel.wide, .term-panel.w8, .term-panel.full { grid-column: span 12; }
  #home-terminal { padding: 10px 10px 90px; }
}
.term-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface2);
}
.term-hd .t {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.term-hd .t .lv { width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.term-hd .code {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
}
.term-note {
  padding: 5px 10px; font-size: 9px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); background: var(--surface2); line-height: 1.45;
}
.term-cta {
  padding: 8px 10px; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text);
  text-align: center; cursor: pointer;
}
.term-cta:hover { background: var(--accent-dim); }
.trow {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s; min-width: 0;
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--accent-dim); }
.trow .rk { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); width: 13px; flex-shrink: 0; }
.trow .nm { flex: 1 1 auto; min-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .nm small { color: var(--text-muted); }
.trow .val { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; flex-shrink: 0; }
.trow .php { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface3); flex-shrink: 0; display: inline-block; }
.cri { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.tscore { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; color: var(--accent-text); flex-shrink: 0; }
.tsub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 7px 10px 3px; display: flex; align-items: center; gap: 6px;
}
.tform { display: inline-flex; gap: 3px; flex-shrink: 0; }
.tform i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.fW { background: var(--success); } .fD { background: var(--text-muted); } .fL { background: var(--danger); }
.term-fx {
  padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
}
.term-fx:last-child { border-bottom: none; }
.term-fx .tfx-teams { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.term-fx .tfx-v { color: var(--text-muted); font-size: var(--text-xs); }
.term-fx .tm { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.tk-tag {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 3px; background: var(--surface3); color: var(--text-muted);
  flex-shrink: 0; text-transform: uppercase;
}
/* methodology strip */
.mspec { height: 2px; background: var(--spectrum); }
.method { display: flex; align-items: stretch; gap: 10px; padding: 13px 14px; flex-wrap: wrap; }
.method .mstep { flex: 1; min-width: 130px; }
.method .mstep b { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; display: block; margin-bottom: 3px; color: var(--text); }
.method .mstep:last-child b { color: var(--accent-text); }
.method .mstep span { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.45; }
.method .marrow { align-self: center; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }

/* ─── sub-nav unification: one chip grammar (doubled selectors beat the
   v2 base rules on specificity without !important) ─── */
.pvt-btn.pvt-btn, .wc-tab.wc-tab {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  padding: 7px 11px 9px; box-shadow: none;
}
.pvt-btn.pvt-btn:hover, .wc-tab.wc-tab:hover { color: var(--text-dim); background: none; }
.pvt-btn.pvt-btn.active, .wc-tab.wc-tab.active {
  color: var(--accent-text); border-bottom-color: var(--accent); background: none;
}

/* board rows: position chip */
.trow .pos {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 4px; flex-shrink: 0; width: 30px; text-align: center;
}
#home-board { padding: 12px 16px 0; }
#home-board + #home-terminal { padding-top: 0; }
/* The gameweek slot sits between the wires and the scout board; it owns the same
   gutters as its neighbours, and the board below it drops its own top padding so
   the two do not double up. */
#home-gameweek { padding: 12px 16px 0; }
#home-gameweek + #home-board { padding-top: 12px; }
@media (max-width: 720px) { #home-gameweek { padding: 10px 10px 0; } }
@media (max-width: 720px) { #home-board { padding: 10px 10px 0; } }

/* ─── v3 Leagues terminal ─── */
#leagues-terminal { padding: 14px 16px 32px; }
.lswitch { display: flex; align-items: center; gap: 2px; padding: 0 2px 10px; flex-wrap: wrap; }
.lswitch .ll, .clubstrip .ll {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 8px;
}
.lswitch .chip {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 7px 11px 9px; cursor: pointer; transition: color .12s, border-color .12s; white-space: nowrap;
}
.lswitch .chip:hover { color: var(--text-dim); }
.lswitch .chip.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.clubstrip { display: flex; align-items: center; gap: 6px; padding: 0 2px 12px; flex-wrap: wrap; }
.cchip {
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: border-color .12s, transform .12s; padding: 0;
  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
}
.cchip img { width: 18px; height: 18px; object-fit: contain; }
.cchip:hover { border-color: var(--accent); transform: translateY(-1px); }
.cs-note { font-size: var(--text-xs); color: var(--text-muted); margin-left: 4px; }
.tlede { padding: 0 2px 12px; font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5; max-width: 80ch; }
.tlede b { color: var(--text-dim); font-weight: 600; }
.term-mini { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.term-mini td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.term-mini tr:last-child td { border-bottom: none; }
.term-mini tr:hover td { background: var(--accent-dim); }
.term-mini td.n { text-align: right; font-family: var(--font-mono); }
.term-mini .pos { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); width: 18px; }
.tbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body-sm); }
.tbar:last-child { border-bottom: none; }
.tbar .bl { width: 116px; flex-shrink: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .bt { flex: 1; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.tbar .bt i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tbar .bv { font-family: var(--font-mono); font-size: var(--text-xs); width: 46px; text-align: right; color: var(--text); flex-shrink: 0; }
.trow .val.dn { color: var(--danger); }
@media (max-width: 720px) { #leagues-terminal { padding: 12px 10px 90px; } }

/* v3: team view is a drill-down from the league, so it carries a way back */
.ta-crumb { padding: 14px 16px 0; }
.ta-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-muted); background: none; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 13px 5px 10px; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.ta-back:hover { color: var(--accent-text); border-color: var(--accent); }

/* ─── v3 Team terminal ─── */
#team-terminal { padding: 14px 16px 0; }
.tt-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 12px; flex-wrap: wrap; }
.tt-name { font-family: var(--font-display); font-size: var(--fs-d3); font-weight: 800; letter-spacing: -.02em; }
.tt-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.tt-brief-lbl {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 22px 2px 6px; font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}
.tt-brief-lbl span {
  font-family: var(--font); font-size: var(--fs-meta); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
@media (max-width: 720px) { #team-terminal { padding: 12px 10px 0; } }

/* The AI brief is opt-in: opening clubs to compare squads must cost nothing. */
.tt-brief-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 2px 20px; }
.tt-brief-btn { font-size: var(--fs-btn); padding: 7px 16px; }
.tt-brief-note { font-size: var(--fs-meta); color: var(--text-muted); max-width: 62ch; line-height: 1.5; }

/* news items in the wire */
.ticker-news { cursor: pointer; }
.ticker-news strong { font-weight: 500; }
.ticker-item .tk-tag { margin-right: 2px; }
.tk-tag.news { background: var(--accent-dim); color: var(--accent-text); }

/* ─── v3 mobile bar refinement: quieter labels, lighter FAB, safe-area aware ─── */
#mobile-nav {
  padding: 4px 2px 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
#mobile-nav .mob-nav-btn {
  gap: 4px; padding: 5px 0 7px;
  font-size: .56rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted);
}
#mobile-nav .mob-nav-btn svg { width: 18px; height: 18px; stroke-width: 1.9; }
#mobile-nav .mob-nav-btn.active { color: var(--accent-text); }
#mobile-nav .mob-nav-btn.active svg { stroke-width: 2.1; }
#mobile-nav .mob-nav-fab {
  width: 42px; height: 42px; margin: 0 8px 6px;
  box-shadow: 0 2px 10px rgba(37,99,235,.32);
}
#mobile-nav .mob-nav-fab svg { width: 18px; height: 18px; }
#mobile-nav .mob-nav-fab:active { transform: scale(.94); }

/* v3: the masthead ask bar + centre Ask FAB cover search on mobile, so the
   floating search FAB is a third redundant control (and it overlapped content). */
#mobile-search-fab { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3 sub-nav unification — level 3 (sub-views within a Scout mode).

   Hierarchy is now legible by grammar, not colour:
     level 1  screen nav      → underline chips (#navrow .nav-item)
     level 2  Scout mode      → underline chips (.sm-chip: Discover/Search/Shortlist/National Team Selection)
     level 3  sub-view toggle → the segmented control below

   Both Discover's Build Profile / AI Search and Shortlist's Search / List /
   Compare were bespoke (a loud blue segmented pill, and browser folder tabs).
   They become one quiet segmented control: a subtle track with a raised active
   segment. Appended at file end so it wins source order over the v2 rules.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-mode-row, #shortlist-subtabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-pill); width: auto; align-self: flex-start;
}
#shortlist-subtabs { margin: 14px 0 18px; }

.pd-mode-btn, .sl-pill {
  flex: 0 0 auto; width: auto; bottom: 0; position: static;
  font-family: var(--font); font-size: var(--fs-btn); font-weight: 500;
  letter-spacing: 0; color: var(--text-muted);
  background: none; border: none; border-radius: var(--r-pill);
  padding: 6px 16px; cursor: pointer; white-space: nowrap;
  transition: color .12s, background .12s, box-shadow .12s;
}
.pd-mode-btn:hover, .sl-pill:hover { background: none; color: var(--text-dim); }
.pd-mode-btn.active, .sl-pill.active {
  color: var(--accent-text); background: var(--surface); box-shadow: var(--shadow-card);
}
body.dark .pd-mode-btn.active, body.dark .sl-pill.active {
  background: var(--surface3); color: var(--accent-text); box-shadow: none;
}
@media (max-width: 720px) {
  .pd-mode-row, #shortlist-subtabs { display: flex; width: 100%; }
  .pd-mode-btn, .sl-pill { flex: 1; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INVITE GATE — locked state
   `prism-locked` is put on <html> by the head script before first paint and
   removed only once /api/invite/verify passes. Everything except the logo and
   the invite card is blurred out and made inert, so an unverified visitor can
   see that The Prism exists and nothing else. Blur has to be applied per
   region rather than to a wrapper, because a child cannot undo an ancestor's
   filter — the logo has to sit outside every blurred box.
   ══════════════════════════════════════════════════════════════════════════ */
html.prism-locked, html.prism-locked body { overflow: hidden; }

html.prism-locked #main,
html.prism-locked #chat-rail,
html.prism-locked #navrow,
html.prism-locked #askwrap,
html.prism-locked #theme-toggle-btn,
html.prism-locked #mobile-nav,
html.prism-locked #mobile-chats-btn,
html.prism-locked #mobile-search-fab,
html.prism-locked #chat-drawer-backdrop {
  filter: blur(14px) saturate(0.55);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* The logo stays sharp, but is not a working link until the code is in. */
html.prism-locked #masthead-logo { pointer-events: none; }

/* Nothing else may open over the gate. */
html.prism-locked #cmdk-overlay,
html.prism-locked #report-modal { display: none; }

/* A locked page has no content to scroll to, so the masthead reads as a bare
   title bar rather than a stripped-down version of the real shell. */
html.prism-locked #shell-top { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.prism-locked #invite-card { animation: none; }
}

/* The gate has to sit above every other layer — #shell-top (640), the mobile
   FAB (3500) and the overlays (4000) all outrank the original z-index of 200. */
#invite-modal { z-index: 5000; }

/* While locked, the gate drops its own scrim and backdrop-filter: the overlay
   spans the viewport, so both would blur and dim the logo sitting behind it.
   The per-region blur above already separates the card from the page. */
html.prism-locked #invite-modal { background: transparent; backdrop-filter: none; }
html.prism-locked #invite-card { box-shadow: 0 24px 60px rgba(0,0,0,.35); }

/* On mobile the masthead normally drops the wordmark for space. On the gate the
   logo is the only thing on the page, so it keeps its name. */
@media (max-width: 720px) {
  html.prism-locked #masthead .logo-name { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedback widget (Phase 4)
   Appended at the END so it outranks inherited v2 rules without !important.
   Base rules first, then the mobile media query — the source-order trap.
   ═══════════════════════════════════════════════════════════════════════════ */

#fb-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;              /* under the invite gate (which must win), over content */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-dim);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  transition: color .15s, border-color .15s, transform .15s;
}
#fb-btn:hover  { color: var(--text); border-color: var(--teal); transform: translateY(-1px); }
#fb-btn:active { transform: translateY(0); }
#fb-btn svg    { flex: none; }

#fb-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
}
#fb-modal.open { display: flex; }

#fb-card {
  width: 100%;
  max-width: 460px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
#fb-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
#fb-card p  { margin: 0 0 14px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

#fb-rate { display: flex; gap: 6px; margin-bottom: 12px; }
.fb-star {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: 600 12px/1 var(--font-mono);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.fb-star:hover  { border-color: var(--teal); color: var(--text); }
.fb-star.on     { background: var(--teal); border-color: var(--teal); color: #fff; }

#fb-body {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--text);
  font: 400 14px/1.55 inherit;
  resize: vertical;
}
#fb-body:focus { outline: none; border-color: var(--teal); }

#fb-note {
  margin: 9px 0 16px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.45;
  opacity: .85;
}

#fb-actions { display: flex; justify-content: flex-end; gap: 9px; }
#fb-actions button {
  padding: 9px 17px;
  border-radius: 8px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
#fb-cancel { border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
#fb-cancel:hover { color: var(--text); border-color: var(--teal); }
#fb-send   { border: 1px solid var(--teal); background: var(--teal); color: #fff; }
#fb-send:hover     { opacity: .9; }
#fb-send:disabled  { opacity: .55; cursor: default; }

/* The gate blurs the shell; the feedback button must go with it. */
html.prism-locked #fb-btn { filter: blur(5px); pointer-events: none; opacity: .5; }

/* Mobile: clear the bottom nav bar, and shed the label so the pill does not
   crowd the ask FAB. Media query AFTER the base rules, per the source-order
   trap in CLAUDE.md. */
@media (max-width: 720px) {
  /* On mobile the feedback control moves INTO the masthead.
     Every screen's bottom edge is already occupied — the nav bar always, and on
     the chat screen the composer and its send button — so a floating
     bottom-right button collides with the primary action on the one screen
     where a tester is most likely to want to report something. The masthead is
     the only position that is free on all five screens, and it never covers
     content. The ask bar gives up ~34px to make room. */
  #askwrap { margin-right: 34px; }
  #fb-btn {
    top: 9px;
    bottom: auto;
    right: 46px;
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  #fb-btn:hover { transform: none; border-color: transparent; }
  #fb-btn span { display: none; }
  #fb-card { max-width: 100%; padding: 18px; }

  /* Comfortable touch targets. At desktop sizes these controls are fine at
     28-36px, but a rating row is a precision tap on a phone and 28px is where
     people start hitting the wrong number. */
  .fb-star            { padding: 15px 0; font-size: 13px; }
  #fb-actions button  { padding: 13px 20px; }
}

/* ── Terminal loading skeleton ──────────────────────────────────────────────
   Panel-shaped placeholder used by _v3TermSkeleton() while the Leagues
   terminal's fetches are in flight. It replaces the old behaviour where the
   legacy league picker flashed for the whole cold load. Row metrics match
   .trow / .trow .php so the layout does not shift when data lands. */
.term-skel .sk-row { padding: 6px 10px; }
.term-skel .sk-avatar { width: 22px; height: 22px; }
/* .term-hd shares --surface2 with .sk, so the title bar needs its own tint. */
.term-skel .term-hd .sk { background: color-mix(in srgb, var(--text) 11%, transparent); }

/* ── Home skeleton ────────────────────────────────────────────────────────
   Shaped like .term-panel so the real content swaps in without the layout
   jumping. Shown only on a first-ever visit — after that the stale-while-
   revalidate cache paints real data immediately. */
.sk-panel .term-hd { border-bottom: 1px solid var(--border); }
.sk-rows { padding: 4px 0; }
.sk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.sk-row:last-child { border-bottom: 0; }
.sk-row .sk-line  { height: 10px; }
/* ══════════════════════════════════════════════════════════════════════════
   THE WINDOW — transfer wire, per-club panel and the verdict card
   Appended at the end of the sheet so these rules win source order over the
   inherited v2 components, per the v3 CSS convention in CLAUDE.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Screen chrome ── */
.mw-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 0 0 20px; padding: 4px 10px 4px 6px;
  font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted);
  border-radius: 5px; cursor: pointer; transition: color .15s, background .15s;
  align-self: flex-start;
}
.mw-crumb:hover { color: var(--text); background: var(--surface3); }
.mw-crumb-arrow { font-size: .8rem; }

.mw-head { padding: 10px 20px 0; }
.mw-title {
  font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em;
  color: var(--text); margin-bottom: 6px;
}
.mw-lede {
  font-size: .82rem; line-height: 1.5; color: var(--text-dim);
  max-width: 62ch; margin-bottom: 16px;
}
.mw-controls {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mw-filters, .mw-range { display: flex; flex-wrap: wrap; gap: 4px; }

/* L2 grammar: underline chips for the league cut. */
.mw-lg-btn {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em;
  padding: 5px 9px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.mw-lg-btn:hover { color: var(--text); }
.mw-lg-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* L3 grammar: quiet segmented control for the range. */
.mw-range { background: var(--surface3); border-radius: 6px; padding: 2px; gap: 2px; }
.mw-range-btn {
  font-family: var(--font-mono); font-size: .68rem;
  padding: 4px 10px; border: none; background: none; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.mw-range-btn:hover { color: var(--text); }
.mw-range-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.mw-meta {
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted);
  padding: 10px 0 0;
}
.mw-body { padding: 4px 20px 40px; }
.mw-empty {
  padding: 32px 0; text-align: center;
  font-size: .82rem; color: var(--text-muted);
}

/* ── Day groups ── */
.mw-day { margin-top: 18px; }
.mw-day-label {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}

/* ── A move ── */
.mv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 7px; cursor: pointer;
  transition: background .13s;
}
.mv-row:hover { background: var(--surface3); }
.mv-photo {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--surface3);
}
.mv-crest { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.mv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-name {
  font-size: .82rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-lg {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 3px; background: var(--surface3);
  color: var(--text-muted); flex-shrink: 0;
}
.mv-move {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: .73rem; color: var(--text-dim);
}
.mv-arrow { color: var(--text-muted); }
.mv-unknown { font-style: italic; color: var(--text-muted); }
.mv-fee {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  color: var(--text); flex-shrink: 0;
}

/* Move-type tags, reusing the .tk-tag base from the ticker. */
.tk-tag.mv-loan     { background: rgba(37,99,235,.14);  color: #2563EB; }
.tk-tag.mv-free     { background: rgba(16,185,129,.16); color: #059669; }
.tk-tag.mv-released { background: rgba(180,83,9,.16);   color: #b45309; }
body.dark .tk-tag.mv-loan     { background: rgba(59,130,246,.18); color: #60a5fa; }
body.dark .tk-tag.mv-free     { background: rgba(16,185,129,.18); color: #34d399; }
body.dark .tk-tag.mv-released { background: rgba(245,158,11,.16); color: #f59e0b; }

/* ── Home panel rows ── */
.trow.tmv { cursor: pointer; }
.tfee {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--text); flex-shrink: 0; margin-left: auto;
}

/* ── The verdict card ── */
.mv-verdict {
  margin: 6px 0 14px; padding: 0 0 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
  animation: mvIn .18s ease-out;
}
@keyframes mvIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.mv-verdict::before {
  content: ''; display: block; height: 2px; background: var(--spectrum);
}
.mv-v-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 8px;
}
.mv-v-title { font-size: .92rem; font-weight: 650; color: var(--text); }
.mv-v-close {
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 4px;
}
.mv-v-close:hover { color: var(--text); background: var(--surface3); }
.mv-v-load, .mv-v-empty {
  padding: 16px 14px; font-size: .8rem; color: var(--text-muted); line-height: 1.55;
}
.mv-v-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); margin: 0 14px; border-radius: 6px; overflow: hidden;
}
.mv-v-stat {
  background: var(--surface); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.mv-v-stat .k {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.mv-v-stat .v { font-size: .86rem; font-weight: 600; color: var(--text); }
.mv-v-stat .v.mv-score { color: var(--accent-text); }
.mv-muted { color: var(--text-muted); font-weight: 500; }

.mv-v-impact { padding: 14px 14px 0; }
.mv-v-sub {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 7px;
}
.mv-v-slot { font-size: .82rem; line-height: 1.6; color: var(--text-dim); }
.mv-v-slot strong { color: var(--text); font-weight: 650; }
.mv-peers {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.mv-peer {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 5px;
  background: var(--surface3); border: 1px solid var(--border);
  font-size: .72rem; color: var(--text-dim);
}
.mv-peer.below { opacity: .55; }
.mv-peer-score { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.mv-v-foot {
  margin: 14px 14px 0; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-muted); line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.mv-v-actions { display: flex; gap: 6px; }
.mv-v-btn {
  font-size: .7rem; padding: 4px 9px; cursor: pointer;
  background: var(--surface3); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 5px;
  font-family: var(--font); transition: background .15s, color .15s;
}
.mv-v-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Per-club transfers panel on the Team terminal ── */
.tt-transfers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tt-tcol-label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 10px 5px;
}
.tt-tnone { padding: 4px 10px 10px; font-size: .74rem; color: var(--text-muted); }

@media (max-width: 760px) {
  .mw-head, .mw-body { padding-left: 14px; padding-right: 14px; }
  .mw-crumb { margin-left: 14px; }
  .mw-title { font-size: 1.25rem; }
  .mw-controls { gap: 10px 14px; }
  .mv-v-stats { grid-template-columns: repeat(2, 1fr); }
  .tt-transfers { grid-template-columns: 1fr; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE WIRE — zone switcher, news zone, in-app reader, Home entry card
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zone switcher (L2 grammar: underline chips, same as Scout modes) ── */
.wire-zones {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.wire-zone-btn {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em;
  padding: 8px 13px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.wire-zone-btn:hover { color: var(--text); }
.wire-zone-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* Sub-header inside a zone carries the zone's own filters. */
.mw-head-sub { padding-top: 14px; }
.mw-head-sub .mw-controls { border-bottom: none; padding-bottom: 0; }

/* ── News zone ── */
.wn-body { padding: 4px 20px 40px; }
.wn-card {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 12px 8px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .13s;
}
.wn-card:hover { background: var(--surface3); }
.wn-thumb {
  width: 108px; height: 68px; flex-shrink: 0;
  object-fit: cover; border-radius: 6px; background: var(--surface3);
}
.wn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wn-top { display: flex; align-items: center; gap: 7px; }
.wn-time {
  font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted);
}
.wn-headline {
  font-size: .88rem; font-weight: 600; line-height: 1.35; color: var(--text);
}
.wn-desc {
  font-size: .77rem; line-height: 1.5; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wn-attrib {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .7rem; color: var(--text-muted); font-style: italic;
}

/* ── In-app news reader ── */
.wn-reader {
  margin: 8px 0 16px; padding: 0 0 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
  animation: mvIn .18s ease-out;
}
.wn-r-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
}
.wn-r-source {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px;
}
.wn-r-img {
  display: block; width: calc(100% - 28px); margin: 0 14px 12px;
  border-radius: 7px; max-height: 320px; object-fit: cover;
}
.wn-r-headline {
  padding: 0 14px; font-size: 1.05rem; font-weight: 650;
  line-height: 1.32; color: var(--text); margin-bottom: 8px;
}
.wn-r-desc {
  padding: 0 14px; font-size: .85rem; line-height: 1.62; color: var(--text-dim);
}
.wn-r-foot {
  margin: 14px 14px 0; padding-top: 11px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wn-r-time { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.wn-r-link {
  font-size: .74rem; font-weight: 600; text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  background: var(--accent); color: #fff;
  transition: opacity .15s;
}
.wn-r-link:hover { opacity: .88; }

/* ── Home entry card ── */
.wire-cta {
  margin: 16px 20px 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  /* #home-panel is a flex column, so without this the card gets shrunk to a
     couple of pixels by the much taller band groups below it. */
  flex-shrink: 0;
}
.wire-cta:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.wire-cta:active { transform: translateY(1px); }
.wire-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wire-cta-spectrum { height: 3px; background: var(--spectrum); }
.wire-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
}
.wire-cta-main { min-width: 0; }
.wire-cta-title {
  font-size: 1rem; font-weight: 650; color: var(--text); margin-bottom: 3px;
}
.wire-cta-desc { font-size: .79rem; line-height: 1.5; color: var(--text-dim); }
.wire-cta-go {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--accent-text); display: flex; align-items: center; gap: 6px;
}
.wire-cta-arrow { transition: transform .15s; }
.wire-cta:hover .wire-cta-arrow { transform: translateX(3px); }

@media (max-width: 760px) {
  .wire-cta { margin: 12px 14px 0; }
  .wire-cta-inner { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 9px; }
  .wn-body { padding-left: 14px; padding-right: 14px; }
  .wn-thumb { width: 84px; height: 56px; }
  .wn-headline { font-size: .82rem; }
  .wn-desc { -webkit-line-clamp: 3; }
  .wire-zone-btn { font-size: .72rem; padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Scout result cards on phones
   ─────────────────────────────────────────────────────────────────────────
   The card header is one flex row: rank, photo, name/meta, score, and three
   action buttons. The buttons don't shrink, so on a ~390px viewport they ate
   the whole row and the name column (flex:1, min-width:0) collapsed to a
   single ellipsised letter while the meta line wrapped one word per row. The
   actions now live in their own element so they can drop to a second line
   instead of squeezing the identity out of the card.
   ══════════════════════════════════════════════════════════════════════════ */
.pd-result-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

@media (max-width: 700px) {
  .pd-result-card-header { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
  /* Identity keeps a real minimum so the name is always legible; the actions
     wrap below rather than compressing it. */
  .pd-result-info { flex: 1 1 auto; min-width: 120px; }
  .pd-result-name { font-size: .95rem; white-space: normal; }
  .pd-result-meta { line-height: 1.45; }
  .pd-result-photo { width: 38px; height: 38px; }
  .pd-result-score { margin-left: auto; align-self: center; }
  .pd-result-actions { flex-basis: 100%; justify-content: flex-end; gap: 6px; }
  .pd-result-actions .pd-result-sl,
  .pd-result-actions .dash-btn,
  .pd-result-actions .pd-btn { min-height: 34px; }
}

/* ── Masthead Chats control ────────────────────────────────────────────────────
   Desktop counterpart to the mobile ask FAB. The ask bar starts a question; this
   reaches the conversation you already had, which was otherwise unreachable on
   desktop once you navigated away from the chat screen (History and New live in
   the chat header, and the chat header is only on that screen).
   Mirrors the theme toggle's masthead treatment so the two read as a pair. */
#masthead .masthead-btn {
  position: static; width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
#masthead .masthead-btn:hover { background: var(--surface3); color: var(--text); }
#masthead .masthead-btn.active { color: var(--accent-text); }

/* Mobile already has both halves of this: the centre ask FAB and the chats
   drawer button, so the masthead copy would be a third way to the same place. */
@media (max-width: 700px) { #masthead .masthead-btn { display: none; } }

/* Widens the existing 640px short-label swap: the modebar carries four chips
   now (Discover · Search · Shortlist · Squads), so "National Team Selection"
   already wraps to two lines and doubles the bar's height by ~700px, not 640. */
@media (max-width: 700px) {
  .sm-chip-long  { display: none; }
  .sm-chip-short { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile pass — nested scrollers and overflowing sub-navs
   ══════════════════════════════════════════════════════════════════════════ */

/* The stat library is capped at 380px so it sits beside the priorities column
   on desktop. Once the grid collapses to one column that cap becomes a scroll
   trap: a swipe that starts inside the library pans the library, not the page.
   Let it flow with the page on phones. */
@media (max-width: 700px) {
  .pcb-left { max-height: none; overflow-y: visible; }
}

/* The World Cup sub-nav is a fixed flex row of 5 tabs plus a timestamp, which
   runs off the right edge of a phone and clips the last tab. Let the tabs pan
   horizontally and drop the timestamp, which is the least useful thing there. */
@media (max-width: 700px) {
  .wc-subnav {
    padding: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wc-subnav::-webkit-scrollbar { display: none; }
  .wc-tab { flex: 0 0 auto; padding: 7px 11px; font-size: .78rem; }
  .wc-refresh-note { display: none; }
  .wc-content { padding: 14px 14px 24px; }
}

/* Terminal panels clip their overflow so the rounded corners hold, which on a
   phone silently cut the last column off the league table (PPG was unreachable
   at 360px — no scrollbar, no way to pan to it). Tighten the cells first so the
   table usually fits, and let the panel pan horizontally when it still doesn't. */
@media (max-width: 720px) {
  .term-panel { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .term-panel::-webkit-scrollbar { height: 3px; }
  .term-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
  .term-mini td { padding: 5px 6px; }
  .term-mini td.n { padding-left: 4px; padding-right: 6px; }
}

/* ─── World Cup sub-nav: stop the flex column from crushing it ───────────────
   #worldcup-panel is a flex column, so the sub-nav is a flex item sitting above
   a very tall content block. With the default flex-shrink:1 it was compressed
   from ~50px to 21px on a phone — the tabs' own vertical padding collapsed and
   the row read as a squeezed strip welded to the masthead above it. Same trap
   the .wire-cta card and the mobile ::after spacers already guard against. */
.wc-subnav { flex-shrink: 0; }

/* The masthead is fixed, so the sticky sub-nav has nothing above it to separate
   the two rows. Give the tabs their own vertical room and a hairline of space. */
@media (max-width: 700px) {
  /* 4px here + the tab's own 10px lands the first label on the same 14px gutter
     as .wc-content below it, so the tabs read as a header for the page, not a
     separate inset strip. */
  .wc-subnav { gap: 2px; padding: 6px 4px 0; }
  .wc-tab.wc-tab { padding: 9px 10px 10px; font-size: var(--fs-label); }
}

/* ─── World Cup recap entry card on Home ───────────────────────────────────
   The phone nav has no World Cup button, so this card is the way into the
   section. It reuses the .wire-cta chrome and only re-does its box placement,
   since it sits inside a home-section rather than between band groups. */
.wcr-cta.wcr-cta { margin: 14px 0 0; }
@media (max-width: 760px) {
  .wcr-cta.wcr-cta { margin: 12px 0 0; }
}

/* ── Season preview ────────────────────────────────────────────────────────
   The between-seasons lead on Home: opening fixtures per league, laid out as a
   day-grouped match grid. Base rules first, media queries after, per the
   source-order rule that governs this file. */
.sp-league { margin: 0 0 22px; }
.sp-league:last-child { margin-bottom: 0; }

.sp-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 9px; margin: 0 0 11px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sp-hd .sp-crest { width: 21px; height: 21px; }
.sp-name {
  font-weight: 650; font-size: 14px; letter-spacing: -0.01em;
  color: var(--text);
}
.sp-round {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 4px;
}
.sp-season {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--text-dim); opacity: .75;
}
/* Countdown sits hard right and states a fact. Nothing here urges an action. */
.sp-when {
  margin-left: auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim);
}
.sp-when.sp-soon { color: var(--accent, #2563eb); }
.sp-when.sp-live { color: #16a34a; }

.sp-day { margin: 0 0 10px; }
.sp-day:last-child { margin-bottom: 0; }
.sp-day-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 6px;
}
.sp-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.sp-match {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel, transparent);
  transition: border-color .15s ease;
}
.sp-match:hover { border-color: var(--border-strong, var(--text-dim)); }
/* Teams and kick-off stay on one row; absences hang underneath. */
.sp-main { display: flex; align-items: center; gap: 10px; }
.sp-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sp-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sp-crest { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.sp-team {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A finished match dims the losing side only through the score, never the name:
   the fixture still reads as a fixture. */
.sp-goals {
  margin-left: auto; padding-left: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; font-weight: 650; color: var(--text);
}
.sp-meta { flex-shrink: 0; text-align: right; }
.sp-time, .sp-state {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; color: var(--text-dim);
}
.sp-state { font-size: 10.5px; letter-spacing: 0.05em; }

/* Chevron affordance. The card opens a drawer and nothing else on it says so. */
.sp-go { flex-shrink: 0; margin-left: 2px; color: var(--text-dim); opacity: .45; font-size: 15px; line-height: 1; }
.sp-match:hover .sp-go { opacity: .8; }

@media (max-width: 760px) {
  .sp-grid { grid-template-columns: 1fr; gap: 7px; }
  .sp-hd { gap: 7px; padding-bottom: 8px; margin-bottom: 9px; }
  .sp-name { font-size: 13px; }
  .sp-season { display: none; }   /* the round chip already carries the context */
  .sp-when { font-size: 10px; }
  .sp-match { padding: 8px 10px; }
  .sp-team { font-size: 12px; }
}

/* The WC recap pointer under the season preview. Reads as an archive link, not a
   promoted card: the tournament is over and should not compete with the fixtures. */
.season-archive {
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.season-archive span[role="link"] {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); cursor: pointer;
}
.season-archive span[role="link"]:hover { color: var(--text); }
.season-archive .sa-arrow { font-family: inherit; }

/* ── Match detail drawer (.mx-*) ───────────────────────────────────────────
   Mirrors the player-report overlay so the two drill-downs feel like one app. */
#mx-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  backdrop-filter: blur(2px);
}
#mx-overlay.open { display: flex; }
#mx-modal {
  position: relative; width: 100%; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.28);
  overflow: hidden;
}
#mx-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-muted); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
#mx-close:hover { background: var(--surface3); color: var(--text); }
.mx-load, .mx-empty { padding: 22px; }
.mx-empty, .mx-none { color: var(--text-dim); font-size: 12.5px; }

.mx-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.mx-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px;
}
.mx-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mx-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mx-team span { font-size: 14px; font-weight: 600; color: var(--text); }
/* The away side mirrors so both teams read outward from the score. */
.mx-away { flex-direction: row-reverse; text-align: right; }
.mx-crest { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mx-centre { text-align: center; min-width: 76px; }
.mx-score {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 24px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mx-score span { opacity: .35; font-weight: 400; }
.mx-ko { font-family: var(--mono, ui-monospace, monospace); font-size: 19px; color: var(--text); }
.mx-state {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .08em; color: var(--text-dim); margin-top: 3px;
}
.mx-sub { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); }

.mx-body-inner { padding: 4px 20px 20px; }
.mx-sect { padding: 16px 0; border-bottom: 1px solid var(--border); }
.mx-sect:last-child { border-bottom: 0; padding-bottom: 4px; }
.mx-sect-hd {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text);
}
.mx-sect-note { text-transform: none; letter-spacing: 0; color: var(--text-dim); font-size: 10.5px; }

.mx-out-block { margin-bottom: 12px; }
.mx-out-block:last-child { margin-bottom: 0; }
.mx-out-team {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.mx-out-team .mx-crest { width: 16px; height: 16px; }
.mx-out-n {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px; margin-left: 2px;
}
.mx-out-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 3px 0; font-size: 12px;
}
.mx-out-name { color: var(--text); }
.mx-out-reason { color: var(--text-dim); font-size: 11px; }
.mx-out-reason.mx-ban { color: #b45309; }
.mx-out-until {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; color: var(--text-dim); opacity: .8; white-space: nowrap;
}

.mx-form-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.mx-form-team { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-form-pills { display: flex; gap: 3px; }
.mx-pill {
  width: 17px; height: 17px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 600;
  color: #fff;
}
.mx-w { background: #16a34a; } .mx-d { background: #a3a3a3; } .mx-l { background: #dc2626; }
.mx-form-pos {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; color: var(--text-dim); white-space: nowrap; min-width: 62px; text-align: right;
}

.mx-h2h-row {
  display: grid; grid-template-columns: 74px 1fr auto 1fr; gap: 8px;
  align-items: baseline; padding: 4px 0; font-size: 12px;
}
.mx-h2h-date { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; color: var(--text-dim); }
.mx-h2h-tm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-h2h-away { text-align: right; }
.mx-h2h-sc { font-family: var(--mono, ui-monospace, monospace); font-weight: 650; color: var(--text); }

.mx-ev-row { display: grid; grid-template-columns: 34px auto 1fr; gap: 9px; align-items: baseline; padding: 3px 0; font-size: 12px; }
.mx-ev-min { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-dim); }
.mx-ev-type {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.mx-ev-goal, .mx-ev-penalty { color: #16a34a; }
.mx-ev-redcard { color: #dc2626; }
.mx-ev-yellowcard { color: #ca8a04; }
.mx-ev-pl { color: var(--text); }

/* The fixture card is now a control. */
.sp-match { cursor: pointer; }
.sp-match:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

body.dark .mx-out-reason.mx-ban { color: #fbbf24; }
body.dark .mx-ev-yellowcard { color: #fbbf24; }

@media (max-width: 760px) {
  #mx-overlay { padding: 0; }
  #mx-modal { max-width: 100%; min-height: 100%; border: 0; border-radius: 0; }
  .mx-head { padding: 18px 16px 14px; }
  .mx-body-inner { padding: 4px 16px 24px; }
  .mx-team span { font-size: 13px; }
  .mx-crest { width: 26px; height: 26px; }
  .mx-out-row { grid-template-columns: 1fr auto; }
  .mx-out-until { display: none; }
  .mx-h2h-row { grid-template-columns: 62px 1fr auto 1fr; gap: 6px; font-size: 11.5px; }
  .mx-form-pos { min-width: 0; }
}

/* ── Home market + news panels (.hw-*) ─────────────────────────────────────
   The readable counterpart to the ticker. Uses the terminal panel chrome so it
   sits in the same grammar as the scout board directly below it. */
#home-wire-panels { margin: 0 0 4px; }
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* .term-panel carries `grid-column: span 4` for the terminal's four-column
   grid. Left alone it makes each panel span this two-column grid as well, so
   the pair stacks instead of sitting side by side. */
.hw-grid > .term-panel { grid-column: auto; }
.hw-grid.hw-solo { grid-template-columns: 1fr; }

.hw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background .12s ease;
}
.hw-row:first-child { border-top: 0; }
.hw-row:hover { background: var(--surface2, rgba(0,0,0,.03)); }
.hw-row:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

.hw-face, .hw-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--surface2);
}
.hw-thumb { border-radius: 5px; width: 42px; height: 30px; }
.hw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-name, .hw-head {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-head { white-space: normal; line-height: 1.3; }
.hw-move {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 10.5px; color: var(--text-dim);
}
.hw-move span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
.hw-club { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.hw-arrow { opacity: .5; flex-shrink: 0; }
.hw-fee {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 650; color: var(--text); flex-shrink: 0;
}
.hw-sub { display: flex; gap: 5px; align-items: center; }
.hw-lg {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .06em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
}

@media (max-width: 900px) {
  .hw-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
  .hw-row { padding: 7px 10px; gap: 9px; }
  .hw-name, .hw-head { font-size: 12px; }
}

/* ── Gameweek fixtures (Home terminal panel + league band) ──────────────────
   Results and upcoming matches share one round, so the two states have to be
   tellable apart at a glance: a played row carries a mono score in full-strength
   text, an unplayed row a muted kick-off. Appended at the end of the file so
   these win over the inherited v2 rules by source order, per the file's rule. */
.tsub-md {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .06em; color: var(--text-dim, var(--text-muted));
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; text-transform: none;
}
.tsub-meta { margin-left: auto; color: var(--text-muted); text-transform: none; letter-spacing: .04em; }
.term-fx.fx-done .tfx-teams { color: var(--text); }
.term-fx .tfx-score {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-weight: 700; color: var(--text); letter-spacing: .5px;
}
.term-fx .tfx-live {
  margin-left: 6px; font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 8px; font-weight: 700; letter-spacing: .07em; color: var(--danger);
}
.term-fx .tfx-off { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; }
.tfx-more {
  padding: 5px 10px 7px; font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .05em; color: var(--text-muted);
}
.uf-split {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 10px 4px;
}
.uf-round-meta {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .05em; color: var(--text-muted); margin-left: 8px;
}
.uf-fixture-row.uf-done .uf-team span { color: var(--text); font-weight: 500; }
.uf-live {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; color: var(--danger);
}
/* Five leagues side by side inside the full-width gameweek panel. Columns rather
   than one tall list: the whole matchday should be readable without scrolling. */
.gw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* One strip per league once there is room for all five. With auto-fit alone the
   fifth wraps under the first, which leaves the busiest league in a column twice
   the height of its neighbours. */
@media (min-width: 1180px) { .gw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gw-league { min-width: 0; border-right: 1px solid var(--border); }
.gw-league:last-child { border-right: none; }
.gw-league .term-fx:last-child { border-bottom: none; }
@media (max-width: 760px) {
  .gw-league { border-right: none; border-bottom: 1px solid var(--border); }
  .gw-league:last-child { border-bottom: none; }
}
/* Inside the five-column gameweek panel each fixture stacks: home over away, with
   the score or kick-off on the right. Side by side, a 250px column clipped long
   club names mid-word. Elsewhere .term-fx keeps its original single-line form. */
.gw-league .term-fx { align-items: center; gap: 6px; }
.gw-league .term-fx .tfx-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; flex: 1 1 auto; }
.gw-league .term-fx .tfx-t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gw-league .term-fx .tfx-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-league .term-fx .tfx-v { display: none; }
.gw-league .term-fx .tm { text-align: right; }
/* Round header inside a league strip. Home shows whole rounds, so each matchday
   in a league gets its own labelled block. */
.gw-round {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 10px 4px; border-top: 1px solid var(--border);
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.gw-league > .gw-round:first-of-type { border-top: none; }
.gw-round .tsub-meta { margin-left: 0; }
.tfx-when { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; text-align: right; line-height: 1.35; }
.tfx-when .t { color: var(--text-muted); }

/* ── Match momentum chart (.mx-tr-*) ───────────────────────────────────────
   Home reads above the axis, away below. Two colours only, and the fills stay
   light so the lines carry the shape. */
.mx-trend-pills { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.mx-pill-btn {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  transition: color .12s, border-color .12s;
}
.mx-pill-btn:hover { color: var(--text); }
.mx-pill-btn.active { color: var(--text); border-color: var(--text-dim); }

.mx-tr-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.mx-tr-axis { stroke: var(--border); stroke-width: 1; }
.mx-tr-grid { stroke: var(--border); stroke-width: 1; opacity: .45; }
.mx-tr-tick {
  fill: var(--text-dim); font-size: 8px; text-anchor: middle;
  font-family: var(--mono, ui-monospace, monospace); opacity: .7;
}
.mx-tr-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mx-tr-area { stroke: none; }
.mx-tr-line.mx-tr-home { stroke: #2563eb; }
.mx-tr-area.mx-tr-home { fill: #2563eb; opacity: .16; }
.mx-tr-line.mx-tr-away { stroke: #f59e0b; }
.mx-tr-area.mx-tr-away { fill: #f59e0b; opacity: .18; }

.mx-tr-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.mx-tr-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; font-weight: 650;
}
.mx-tr-k.mx-tr-home { color: #2563eb; }
.mx-tr-k.mx-tr-away { color: #b45309; }
.mx-tr-name { font-size: 10.5px; color: var(--text-dim); }

body.dark .mx-tr-k.mx-tr-away { color: #fbbf24; }
body.dark .mx-tr-line.mx-tr-away { stroke: #fbbf24; }
body.dark .mx-tr-area.mx-tr-away { fill: #fbbf24; }

@media (max-width: 760px) {
  .mx-tr-svg { height: 128px; }
  .mx-pill-btn { font-size: 9px; padding: 3px 6px; }
}

/* A gameweek row that carries a fixture id opens the match drawer. */
.term-fx.fx-open { cursor: pointer; }
.term-fx.fx-open:hover { background: var(--surface2, rgba(0,0,0,.03)); }
.term-fx.fx-open:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

/* ── The Wire entry card zones (.wcz) ──────────────────────────────────────
   Three routes across the card. Each is its own link, so a reader who wants
   the news does not land on transfers and have to switch. */
.wire-cta-zones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 10px;
}
.wcz {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  transition: border-color .15s ease, background .15s ease;
}
.wcz:hover { border-color: var(--border-strong, var(--text-dim)); background: var(--surface2, rgba(0,0,0,.02)); }
.wcz:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.wcz-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim);
}
.wcz-v {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 17px; font-weight: 650; line-height: 1.2; color: var(--text);
}
.wcz-s { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; }

@media (max-width: 760px) {
  .wire-cta-zones { grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
  .wcz { flex-direction: row; align-items: baseline; gap: 8px; padding: 7px 10px; }
  .wcz-k { min-width: 72px; }
  .wcz-v { font-size: 14px; }
  .wcz-s { margin-left: auto; text-align: right; }
}

/* The zones need the full width of the card. .wire-cta-main sits at its natural
   width, which left the three cells bunched against the left edge with dead
   space before "Open". */
.wire-cta-main:has(.wire-cta-zones) { flex: 1; }

/* A live row earns a marker on a matchday of twenty. The clock in .tfx-live is
   the real signal; this just makes the row findable while scanning. */
.term-fx.fx-live { border-left: 2px solid var(--danger); padding-left: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Indexes — the tester's own panels, and the builder that makes them.
   Appended at the END of the file on purpose: v3 rules must outrank the
   inherited v2 ones by source order rather than by !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A panel the user made, marked by a spectrum edge rather than a badge: it reads
   as theirs at a glance without adding another label to a dense grid. */
.term-panel.ix-panel {
  border-left: 2px solid var(--accent);
}
.term-panel.ix-panel .term-hd .t { color: var(--text); }
.term-hd .code.ix-code { cursor: pointer; }
.term-hd .code.ix-code:hover { color: var(--accent-text); border-color: var(--accent); }
/* Column labels. Right-aligned to sit over the numbers, and the score label
   carries the accent its own column uses so the two are unmistakably paired. */
.ix-cols {
  display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 4px 10px 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.ix-col-s { color: var(--accent-text); }
.ix-col-v { color: var(--text-muted); }
.ix-col-ok { color: var(--success); }

/* A result from a matchday that is still weeks away. Set apart from the round
   above it so it never reads as part of the current matchday. */
.gw-round.gw-early { border-top: 1px solid var(--border); }
.gw-round.gw-early .tsub-md { opacity: .75; }
.gw-round.gw-early .tsub-meta { color: var(--text-muted); font-style: italic; }
/* The strip sits under a sub-heading inside a panel that already has a note, so
   it must not add a second heavy rule across the panel. */
.tsub + .ix-cols { border-bottom-color: var(--border); padding-top: 2px; }

.ix-empty {
  padding: 12px 10px; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.5;
}
.ix-hd-r { display: inline-flex; align-items: center; gap: 6px; }
.ix-edit {
  padding: 1px 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); background: none;
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.ix-edit:hover { color: var(--accent-text); border-color: var(--accent); }
.term-panel.ix-panel .term-hd .code { color: var(--accent-text); border-color: var(--accent); }

/* First run. Full width and leading the grid, because an invitation that sits
   under nine editorial panels is not an invitation. */
.ix-intro { border-left: 2px solid var(--accent); }
.ix-intro-b { padding: 12px 14px 14px; }
.ix-intro-p {
  margin: 0 0 12px; max-width: 68ch; font-size: var(--fs-body-sm);
  line-height: 1.55; color: var(--text-dim);
}
.ix-intro-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ix-intro-go {
  padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
}
.ix-intro-go:hover { opacity: .9; }
.ix-intro-or { font-size: 12px; color: var(--text-muted); }
.ix-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ix-starter {
  padding: 6px 11px; font-size: 12px; font-family: inherit; cursor: pointer; text-align: left;
  color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 999px;
}
.ix-starter:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-dim); }

/* The standing "one more" tile, at the end of the tester's own panels. */
.term-panel.ix-new {
  border-style: dashed; background: none; cursor: pointer;
  align-items: center; justify-content: center;
  /* Sit at the top of the grid cell rather than stretching to match the height
     of the index beside it, which turns a prompt into a large empty box. */
  align-self: start;
}
.term-panel.ix-new:hover { border-color: var(--accent); background: var(--accent-dim); }
.ix-new-in { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 14px; text-align: center; }
.ix-new-plus { font-size: 22px; line-height: 1; color: var(--accent-text); }
.ix-new-t { font-size: var(--fs-body-sm); color: var(--text); }
.ix-new-s { font-size: 11px; color: var(--text-muted); max-width: 22ch; line-height: 1.4; }

/* ── Builder ─────────────────────────────────────────────────────────────── */
#ix-modal {
  position: fixed; inset: 0; z-index: 960; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px);
}
#ix-modal.open { display: flex; }

#ix-card {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  padding: 20px 22px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
#ix-head { display: flex; align-items: center; justify-content: space-between; }
#ix-card h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#ix-close {
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0 2px;
}
#ix-close:hover { color: var(--text); }
#ix-lede { margin: 6px 0 16px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.ix-lbl {
  display: block; margin: 14px 0 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
#ix-card input[type="text"], #ix-card input[type="number"], #ix-card select {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
#ix-card input:focus, #ix-card select:focus { outline: none; border-color: var(--accent); }

#ix-sayrow { display: flex; gap: 8px; }
#ix-sayrow input { flex: 1; min-width: 0; }
#ix-say-go {
  flex: 0 0 auto; padding: 8px 12px; font-size: 12px; cursor: pointer;
  color: var(--accent-text); background: var(--accent-dim);
  border: 1px solid var(--border); border-radius: 8px;
}
#ix-say-go:disabled { opacity: .6; cursor: default; }
#ix-say-note, .ix-hint {
  margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.45;
}

.ix-sep { height: 1px; margin: 16px 0 2px; background: var(--border); }
.ix-row { display: flex; align-items: center; gap: 8px; }
.ix-row input { flex: 1; min-width: 0; }
.ix-to { font-size: 12px; color: var(--text-muted); }

.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-chip {
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
}
.ix-chip:hover { color: var(--text); }
.ix-chip.on { color: var(--accent-text); border-color: var(--accent); background: var(--accent-dim); }

#ix-more {
  display: block; margin: 14px 0 0; padding: 0; font-size: 12px;
  color: var(--accent-text); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
#ix-more-body { display: none; margin-top: 10px; }
.ix-ord {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.ix-ord-n {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  width: 14px; flex: 0 0 auto;
}
.ix-ord-l { flex: 1; min-width: 0; font-size: 13px; }
.ix-ord button {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1;
  color: var(--text-dim); background: none; border: 1px solid var(--border);
  border-radius: 5px; cursor: pointer;
}
.ix-ord button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ix-ord button:disabled { opacity: .3; cursor: default; }

#ix-rule {
  padding: 10px 12px; margin-top: 4px; font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px;
}
#ix-preview { margin-top: 10px; }
.ix-pv-hd {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.ix-pv {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
}
.ix-pv:last-child { border-bottom: 0; }
.ix-pv .rk { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); width: 12px; }
.ix-pv .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-pv .nm small { color: var(--text-muted); }
.ix-pv .val { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

#ix-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.ix-spacer { flex: 1; }
#ix-actions button {
  padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim);
}
#ix-actions button:hover { color: var(--text); }
#ix-delete { color: var(--danger, #dc2626); }
#ix-save { color: #fff; background: var(--accent); border-color: var(--accent); }
#ix-save:hover { color: #fff; opacity: .9; }
#ix-save:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  #ix-modal { padding: 0; align-items: flex-end; }
  #ix-card { max-width: none; max-height: 92vh; border-radius: 14px 14px 0 0; }
}

/* Discover: the note under the minutes ladder explaining that the presets have been
   scaled to how much of the season has been played. Quiet by design, it is context
   for a control rather than a message in its own right. */
.pd-mins-note{
  margin-top:8px;
  font-size:11px;
  line-height:1.45;
  color:var(--text-dim, #8a8a8a);
  letter-spacing:.01em;
}

/* ── Home: the scout board and the terminal share one grid ──────────────────
   They were two grids stacked in the page, so the board's final row was only
   full by coincidence and nothing below could move up into it. A tall panel
   such as The Staples then sat alone with two empty columns beside it and the
   next section began under the gap.

   Both wrappers, and the .term-grid each of them writes, become display:contents
   so their panels are items of this grid instead. Panels then fill in reading
   order whatever the count, which matters because that count moves with how many
   indexes a tester has built. Their own padding goes with their boxes, so it is
   carried here; the containers keep their inline display:none until their data
   lands, and an inline style still wins over the rule below. */
.home-flow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  grid-auto-rows: min-content;
  padding: 12px 16px 32px;
}
.home-flow > #home-board,
.home-flow > #home-terminal { display: contents; }
.home-flow > #home-board > .term-grid,
.home-flow > #home-terminal > .term-grid { display: contents; }
#home-gameweek + .home-flow { padding-top: 12px; }
@media (max-width: 720px) { .home-flow { padding: 10px 10px 90px; } }

/* A panel that must begin a row. Used by the scout board, which leads a line of
   three: the board, the week's goals and the week's best performances. Without
   it that line starts wherever the index panels above it happen to end, and the
   trio splits across two rows for any tester with the wrong number of indexes
   saved. Only the start is pinned, so the responsive span rules still apply and
   the trio folds to two-up and then one-up on narrower screens. */
.term-panel.row-start { grid-column: 1 / span 4; }
@media (max-width: 1180px) { .term-panel.row-start { grid-column: 1 / span 6; } }
@media (max-width: 720px)  { .term-panel.row-start { grid-column: 1 / span 12; } }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYER PROFILE (v3)
   One reading column (where he ranks, the match log) and one rail of context
   (form, the season before, home and away, career), inside a fixed-width frame
   so every panel lines up. Ask The Prism AI is the one loud thing on the page.
   ══════════════════════════════════════════════════════════════════════════ */
#ph-profile {
  --pv-ground: #f6f7f9; --pv-win: #0f9d58; --pv-loss: #d93a49; --pv-draw: #8a93a3;
  --pv-warn: #b7791f; --pv-warn-soft: rgba(183,121,31,.12); --pv-band: rgba(37,99,235,.14);
  --pv-cta-bg: #0b0c0e; --pv-cta-fg: #ffffff;
}
body.dark #ph-profile {
  --pv-ground: var(--bg); --pv-win: #34c77b; --pv-loss: #ff6b78;
  --pv-warn: #e0a54a; --pv-warn-soft: rgba(224,165,74,.14); --pv-band: rgba(91,140,255,.22);
  --pv-cta-bg: #f5f6f8; --pv-cta-fg: #0b0c0e;
}
#ph-profile.dashboard-canvas { background: var(--pv-ground); }
.pv { max-width: 1180px; margin: 0 auto; padding: 16px 20px 56px; display: flex; flex-direction: column; gap: 14px; }
.pv .dash-skeleton-header { border-radius: 10px; }

/* Identity */
.pv-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.pv-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top;
  background: var(--surface3); border: 1px solid var(--border); }
.pv-avatar-i { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text-dim); }
.pv-who { min-width: 0; }
.pv-name { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--text); }
.pv-sub { margin-top: 5px; font-size: 14px; color: var(--text-dim); }
.pv-sub b { color: var(--text); font-weight: 600; }
.pv-bio { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .02em; }
.pv-loading { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.pv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pvPulse 1.1s ease-in-out infinite; }
@keyframes pvPulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Ask The Prism AI */
.pv-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.pv-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.005em; color: var(--pv-cta-fg);
  border: 2px solid transparent;
  background: linear-gradient(var(--pv-cta-bg), var(--pv-cta-bg)) padding-box, var(--spectrum) border-box;
  box-shadow: 0 6px 22px -10px rgba(79,70,229,.55); transition: transform .15s ease, box-shadow .15s ease; }
.pv-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(79,70,229,.7); }
.pv-cta::after { content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%); animation: pvSheen 3.6s ease-in-out infinite; }
@keyframes pvSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.pv-spark { width: 20px; height: 20px; flex-shrink: 0; }
.pv-cta { white-space: nowrap; max-width: 100%; }
.pv-chip { border: 1px solid var(--border); background: var(--surface2); border-radius: 999px; padding: 6px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--text-dim); font-family: var(--font); text-align: left; }
.pv-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.pv-ai-k { flex-basis: 100%; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.pv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pv-act { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; }
.pv-act:hover { background: var(--accent-dim); }
.pv-act.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* A set width, not the labels' own: an auto column sized to "Central midfielders
   in Ligue 1 · 25/26" on one line took 785px and squeezed the name to 200. */
.pv-scores { display: flex; gap: 8px; width: 480px; max-width: 100%; }
.pv-score { flex: 1 1 0; min-width: 0; text-align: center; border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; background: var(--surface2); }
.pv-score b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--text); }
.pv-score b small { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.pv-score span { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.45; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); text-wrap: balance; }

/* This season, when it is too early to read */
.pv-now { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; }
.pv-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pv-now h2 { margin: 3px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.pv-now p { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; max-width: 68ch; }
.pv-now-min { text-align: right; }
.pv-now-min b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--text); }
.pv-now-min span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pv-now-games { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-now-g { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface2);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text); }
.pv-now-g b { font-family: var(--font-mono); font-weight: 500; }
.pv-m { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* `hidden` has to win over the display each block sets for itself. */
.pv [hidden] { display: none !important; }

/* Season */
.pv-seasonbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pv-seasonbar:empty { display: none; }
.pv-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 3px; gap: 3px; }
.pv-seg button { border: 0; background: transparent; border-radius: 7px; padding: 7px 12px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--font); }
.pv-seg button b { display: block; font-size: 13px; font-weight: 600; }
.pv-seg button span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.pv-seg button[aria-pressed="true"] { background: var(--accent-soft); }
.pv-seg button[aria-pressed="true"] b { color: var(--accent-text); }
.pv-seg button:disabled { opacity: .55; cursor: progress; }
.pv-reading { font-size: 13px; color: var(--text-dim); }
.pv-reading b { color: var(--text); font-weight: 600; }
.pv-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; }
.pv-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-status.moved { color: var(--accent-text); background: var(--accent-soft); }

/* Headline numbers */
.pv-kpis { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.pv-kpis:empty { display: none; }
.pv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.pv-kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-kpi span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pv-kpi em { display: block; font-style: normal; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-text); }

/* Panels */
.pv-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.pv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pv-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px 9px; border-bottom: 1px solid var(--border); }
.pv-ph h2 { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.pv-ph .aside { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-align: right; }
.pv-body { padding: 8px 14px 14px; }
.pv-note { padding: 10px 14px 0; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.pv-empty { padding: 18px 14px; color: var(--text-muted); font-size: 13px; }

/* Where he ranks */
.pv-field { margin: 10px 14px 0; padding: 10px 12px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; color: var(--text); }
.pv-field b { font-weight: 600; }
.pv-field details { margin-top: 6px; }
.pv-field summary { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.pv-field ul { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 5px; color: var(--text-dim); font-size: 12.5px; max-width: 72ch; }
.pv-grp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 2px; }
.pv-rk { display: grid; grid-template-columns: 170px minmax(0, 1fr) 84px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pv-rk:last-of-type { border-bottom: 0; }
.pv-rk-l { font-size: 13px; color: var(--text); }
.pv-rk-l b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 15px; margin-top: 1px; }
.pv-rk-r { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.pv-rk-r b { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.pv-rk-r span { color: var(--text-muted); font-size: 10.5px; }
.pv-rk.muted .pv-rk-l, .pv-rk.muted .pv-rk-r b { color: var(--text-muted); }
.pv-strip { position: relative; height: 34px; }
.pv-track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--surface3); }
.pv-band { position: absolute; top: 12px; height: 10px; border-radius: 3px; background: var(--pv-band); }
.pv-med { position: absolute; top: 9px; width: 2px; height: 16px; background: var(--text-dim); opacity: .55; }
.pv-dotm { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.pv-dotm.hollow { background: var(--surface); border: 2px solid var(--text-muted); box-shadow: none; }
.pv-strip-lab { position: absolute; top: 25px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; }
.pv-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 0 0; font-size: 11.5px; color: var(--text-muted); }
.pv-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.pv-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pv-legend .lg-band { width: 18px; height: 8px; border-radius: 2px; background: var(--pv-band); }
.pv-legend .lg-med { width: 2px; height: 12px; background: var(--text-dim); opacity: .55; }

/* Match log */
.pv-logwrap { overflow-x: auto; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; color: var(--text); }
.pv-table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 9px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pv-table td { padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pv-table tr:last-child td { border-bottom: 0; }
.pv-table td.m { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.pv-table td.opp { width: 100%; white-space: normal; }
.pv-table .r { text-align: right; }
.pv-ga { color: var(--text); font-weight: 500; }
.pv-res { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; }
.pv-res i { font-style: normal; font-weight: 600; font-size: 10px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; }
.pv-res.W i { background: var(--pv-win); } .pv-res.L i { background: var(--pv-loss); } .pv-res.D i { background: var(--pv-draw); }
.pv-rt { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pv-rt b { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; min-width: 32px; text-align: right; }
.pv-rt s { display: block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface3); position: relative; text-decoration: none; }
.pv-rt s u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }

/* Form */
.pv-form { padding: 16px 14px 4px; }
#pv-form.pv-panel { overflow: visible; }
.pv-fbars { position: relative; display: flex; align-items: stretch; gap: 6px; }
.pv-fcol { flex: 1 1 0; max-width: 40px; position: relative; display: flex; flex-direction: column; cursor: default; outline: none; }
.pv-fbox { flex: 1 1 auto; position: relative; display: flex; align-items: flex-end; }
.pv-fb { width: 100%; border-radius: 4px 4px 1px 1px; transition: filter .12s; }
.pv-fb.W { background: color-mix(in srgb, var(--pv-win) 72%, transparent); }
.pv-fb.L { background: color-mix(in srgb, var(--pv-loss) 72%, transparent); }
.pv-fb.D { background: color-mix(in srgb, var(--pv-draw) 72%, transparent); }
/* The value sits on the page colour, so the average line never strikes through it. */
.pv-fval { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--font-mono);
  font-size: 9.5px; line-height: 1.3; color: var(--text-muted); background: var(--surface); padding: 0 2px; border-radius: 3px; }
.pv-avg { position: absolute; left: 0; right: 0; z-index: 0; border-top: 1px dashed var(--text-dim); opacity: .6; pointer-events: none; }
.pv-fcode { display: flex; align-items: flex-end; justify-content: center; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .02em; color: var(--text-muted); overflow: hidden; white-space: nowrap; }
/* Codes are short; the full fixture is one hover, or one tap on a phone, away. */
.pv-ftip { display: none; position: absolute; top: -8px; left: 50%; transform: translate(-50%, -100%); z-index: 5;
  white-space: nowrap; max-width: min(300px, calc(100vw - 48px)); font-size: 11.5px; line-height: 1.35; padding: 6px 9px; border-radius: 7px;
  background: var(--text); color: var(--bg); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); pointer-events: none; }
.pv-ftip b { font-weight: 600; }
.pv-ftip small { display: block; opacity: .7; font-family: var(--font-mono); font-size: 10px; }
.pv-fcol:hover .pv-ftip, .pv-fcol:focus .pv-ftip, .pv-fcol:focus-visible .pv-ftip { display: block; }
.pv-fcol:hover .pv-fb, .pv-fcol:focus .pv-fb { filter: brightness(1.08) saturate(1.1); }
.pv-fcol:hover .pv-fcode, .pv-fcol:focus .pv-fcode { color: var(--text); }
.pv-form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 14px 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.pv-fkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -.5px; }
.pv-fkey i:first-child { margin-left: 0; }
.pv-fkey i.W { background: var(--pv-win); } .pv-fkey i.D { background: var(--pv-draw); } .pv-fkey i.L { background: var(--pv-loss); }
.pv-ha-m, .pv-ga-m { display: none; }
.pv-ga-m { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 500; }

/* The season before */
.pv-cmp { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: baseline; font-size: 12.5px; color: var(--text); }
.pv-cmp:last-child { border-bottom: 0; }
.pv-cmp-v { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }
.pv-cmp-v b { color: var(--text); font-weight: 500; }
.pv-delta { font-family: var(--font-mono); font-size: 10.5px; grid-column: 2; text-align: right; }
.pv-delta.up { color: var(--pv-win); } .pv-delta.down { color: var(--pv-loss); } .pv-delta.flat { color: var(--text-muted); }

/* Home and away */
.pv-ha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.pv-ha div { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 11px; }
.pv-ha h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pv-ha p { margin: 2px 0; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text); }
.pv-ha p b { font-family: var(--font-mono); font-weight: 500; }

/* Career */
.pv-car { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.pv-car:last-child { border-bottom: 0; }
.pv-car-s { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.pv-car-t { font-size: 13px; font-weight: 500; color: var(--text); }
.pv-car-t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 11.5px; }
.pv-car-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right; }
.pv-car-n b { display: block; color: var(--text); font-size: 12.5px; font-weight: 500; }

/* Similar players rows reuse the existing results markup */
#dash-s7 #dash-similar-results { padding: 8px 14px 14px; }

@media (max-width: 1100px) {
  .pv-hero { grid-template-columns: auto minmax(0, 1fr); }
  .pv-scores { grid-column: 2; justify-self: start; }
  .pv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pv { padding: 12px 14px 48px; gap: 12px; }
  .pv-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  .pv-scores { grid-column: 1 / -1; width: 100%; }
  .pv-score { padding: 10px 6px; }
  .pv-score b { font-size: 22px; white-space: nowrap; }
  .pv-score b small { font-size: 11px; }
  .pv-avatar { width: 56px; height: 56px; }
  .pv-avatar-i { font-size: 20px; }
  .pv-name { font-size: 23px; }
  .pv-cta { font-size: 14px; }
  .pv-kpis { grid-template-columns: repeat(2, 1fr); }
  .pv-rk { grid-template-columns: minmax(0,1fr) 76px; gap: 6px 10px; }
  .pv-rk .pv-strip { grid-column: 1 / -1; grid-row: 2; }
  .pv-seg { width: 100%; } .pv-seg button { flex: 1 1 0; }
  .pv-now { grid-template-columns: 1fr; } .pv-now-min { text-align: left; }
  .pv-cta { white-space: normal; text-align: left; line-height: 1.25; }
  .pv-table { min-width: 0; }
  .pv-table .ha, .pv-table .ga, .pv-rt s { display: none; }
  .pv-ha-m, .pv-ga-m { display: inline; }
  .pv-ha-m { color: var(--text-muted); font-size: 11.5px; }
  .pv-table td { padding: 8px 6px; }
  .pv-ph { flex-wrap: wrap; }
  .pv-ph .aside { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-cta, .pv-cta:hover { transition: none; transform: none; }
  .pv-cta::after { animation: none; display: none; }
  .pv-dot { animation: none; }
}

/* The Wire: the window's biggest fees, at the head of the transfers zone. */
.wtf-panel { margin: 0 0 14px; }
.wtf-panel .hw-row { padding-left: 12px; padding-right: 12px; }

/* Home news: inset like every other Home panel (it ran edge to edge), ten
   headlines in two columns of five, read down each column. */
#home-wire-panels { margin: 0; padding: 12px 16px 0; }
.hw-all { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; }
.hw-all:hover { text-decoration: underline; }
#hw-news-rows.hw-news-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 0; }
#hw-news-rows.hw-news-2col .hw-news-row:nth-child(n+6) { border-left: 1px solid var(--border); }
@media (max-width: 720px) {
  #home-wire-panels { padding: 10px 10px 0; }
  #hw-news-rows.hw-news-2col { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* Ten stacked is a long scroll before the gameweek on a phone; All news has the rest. */
  #hw-news-rows.hw-news-2col .hw-news-row:nth-child(n+6) { display: none; }
}

/* ── The gameweek: one matchday at a time ───────────────────────────────────
   A switch above the columns picks "This matchday" or "Next matchday" for every
   league at once; both are in the DOM and a class on the panel shows one. On
   phones the leagues also fold to a digest line, the Premier League excepted.
   Desktop rules first, phone rules in one media query after them, per the file's
   source-order rule. */
.gw-view-this .gw-v-next, .gw-view-next .gw-v-this { display: none; }
.gw-v > .gw-round:first-child { border-top: none; }
.gw-chev, .gw-digest, .gw-more { display: none; }

.gw-switchbar { padding: 8px 10px 6px; border-bottom: 1px solid var(--border); }
.gw-switch.pd-mode-row { margin: 0; padding: 2px; }
.gw-switch .pd-mode-btn.pd-mode-btn { padding: 4px 14px; font-size: 12px; }
.gw-empty { padding: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 720px) {
  .gw-switchbar { padding: 8px 10px; }
  .gw-switch .pd-mode-btn.pd-mode-btn { padding: 7px 8px; font-size: 13px; }

  .gw-lhead { cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 11px 12px; font-size: 10px; }
  .gw-chev {
    display: inline-block; margin-left: auto; width: 7px; height: 7px; flex-shrink: 0;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg); transition: transform .15s ease;
  }
  .gw-open > .gw-lhead .gw-chev { transform: rotate(45deg); }

  .gw-league:not(.gw-open) > .gw-lbody { display: none; }
  .gw-league:not(.gw-open) > .gw-digest {
    display: block; padding: 0 12px 11px; margin-top: -4px;
    font-size: 11px; color: var(--text-muted);
  }
  .gw-live { color: var(--danger); font-weight: 500; }
  .gw-more {
    display: block; padding: 10px 12px 12px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
    color: var(--accent-text); cursor: pointer;
  }
}

/* ── Image fade-in ─────────────────────────────────────────────────────────
   Photos, crests and news thumbnails fade in over their placeholder instead of
   snapping in. `img-in` is added by a capture listener in <head> on load OR
   error, so a broken image never stays at zero opacity waiting for an event.
   Every class here already reserves its box, so nothing shifts as they land.
   :where() keeps the base rule at zero specificity: it never outranks a
   component's own opacity, and the :not() drops out the moment it loads. */
:where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
       .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
       .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest) {
  transition: opacity .2s ease;
}
:where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
       .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
       .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest):is(img):not(.img-in) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  :where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
         .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
         .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest) { transition: none; }
}

/* v2's "Explore The Prism" workspace band (emoji tool cards, a second shortlist,
   recent searches). Superseded by the terminal and the watchlist panel the same
   way #home-league-bands was, but missed: it was the only thing on Home while the
   terminal loaded, then trailed the page. Hidden, not deleted, because
   renderHomeData() still writes into its columns. */
.home-band-3 { display: none; }

/* ⌘K means nothing on a phone, and the chip truncated the ask bar's placeholder
   to "Ask anything about any". */
@media (max-width: 720px) {
  #askwrap .ab-kbd { display: none; }
}

/* Related questions under a finished chat answer (deterministic, see
   _chatFollowUps). Reuses the profile's prompt chips. */
.ch-followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* League leaders as a full-width strip: one column per division. */
.ll-strip .ll-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; }
.ll-strip .ll-grp { min-width: 0; }
@media (max-width: 1180px) { .ll-strip .ll-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ll-strip .ll-cols { grid-template-columns: 1fr; } }

/* Home news wire on a phone: the latest four headlines, so it no longer fills
   the whole first screen ahead of the gameweek and the player panels. */
@media (max-width: 720px) {
  #hw-news-rows > .hw-news-row:nth-child(n+5) { display: none; }
}

/* The Wire's Refractions zone on a phone: the header panel is only the title
   and tabs there, with #refractions-panel scrolling beneath it. Its 72px nav
   spacer belongs at the bottom of the page, not between the tabs and the first
   essay, where it showed as an empty white block. */
#wire-panel.wz-rfx::after { display: none; }

/* Profile: what the two score tiles mean, folded until asked for. */
.pv-scores { flex-wrap: wrap; }
.pv-score-help { flex-basis: 100%; font-size: 12px; color: var(--text-dim); }
.pv-score-help summary { cursor: pointer; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); list-style: none; }
.pv-score-help summary::-webkit-details-marker { display: none; }
.pv-score-help p { margin: 6px 0 0; line-height: 1.45; }
@media (max-width: 720px) { .pv-score-help { max-width: none; } }

/* Chat header: the brand mark already sits in the masthead directly above, so the
   second one beside "Ask The Prism" was repetition. */
#chat-header .ch-mark { display: none; }

/* Chat on a phone: the input bar sits in flow above the nav and already carries
   the nav clearance (#inputbar padding), so the message list's own 72px nav spacer
   and 32px bottom padding stacked ~100px of empty space under every answer. The
   keyboard hint means nothing on a touch screen. */
@media (max-width: 720px) {
  #messages::after { display: none; }
  #messages { padding-bottom: 12px; }
  #inputbar .hint { display: none; }
}

/* Chat tables: the bubble's break-word split names and numbers mid-word on a phone
   ("Raphinh a", "49 2", "Ran k"). Cells break between words only, and a table too
   wide for the bubble scrolls sideways rather than crushing its columns. */
.bubble .md-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.bubble .md-table-wrap .md-table { margin: 0; }
.bubble .md-table th, .bubble .md-table td { word-break: normal; overflow-wrap: normal; }
@media (max-width: 720px) {
  .bubble .md-table th, .bubble .md-table td { padding: 6px 8px; }
}

/* The Wire, news: day headers and paging through the 30-day archive. */
.wn-day { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 20px 2px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
#wn-body > .wn-day:first-child { margin-top: 12px; }
.wn-more { display: block; margin: 16px auto 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); cursor: pointer; }
.wn-more:hover { border-color: var(--accent); color: var(--accent-text); }
.wn-more[disabled] { opacity: .5; cursor: default; }

/* Home on a phone: #home-panel::after (72px, ≤600px) already clears the bottom
   nav, and .home-flow's own 90px bottom padding (≤720px) stacked on top of it,
   leaving ~160px of blank page under the last panel. Below 600 the spacer does
   the job alone; between 600 and 720 there is no spacer, so the padding stays. */
@media (max-width: 600px) { .home-flow { padding-bottom: 12px; } }

/* ── Refractions reader: charts ───────────────────────────────────────────
   Essay charts are SVG drawn by refractions_charts.py, coloured through
   --paper / --muted / --line as the public page defines them. The app uses
   --paper for something else, so the three are mapped onto the app's own
   tokens inside the figure, which also carries dark mode across. */
.rfx-art-chart { margin: 30px 0; padding: 0;
  --paper: var(--text); --muted: var(--text-muted); --line: var(--border); color: var(--text); }
.rfx-art-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Refractions reader: the public page's look ───────────────────────────
   Matches refractions_web.py's essay page: mono kicker, Inter title and
   section heads, Georgia standfirst and body, a plain "Mo · date" byline,
   an accent-ruled bottom line and mono tag pills. Colours stay on the app's
   tokens so dark mode works. Appended last so it outranks the reader's
   earlier rules (the .rfx-art-inner prefix lifts specificity where needed). */
.rfx-art-inner .rfx-art-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.rfx-art-inner .rfx-art-kicker .rfx-k-hub { color: var(--accent-text); }
.rfx-art-inner .rfx-art-kicker i { font-style: normal; color: var(--accent-text); }
.rfx-art-inner .rfx-art-title { font-family: var(--font); font-weight: 700; font-size: 2.5rem;
  line-height: 1.06; letter-spacing: -.022em; margin: 0 0 16px; }
.rfx-art-inner .rfx-art-dek { font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem;
  line-height: 1.45; color: var(--text-dim); margin: 0 0 24px; max-width: none; }
.rfx-art-inner .rfx-byline { gap: 10px; font-size: .82rem; color: var(--text-muted);
  padding-bottom: 26px; margin-bottom: 8px; }
.rfx-art-inner .rfx-byline i { font-style: normal; color: var(--border-strong); }
.rfx-art-inner .rfx-byline-who { font-family: var(--font); font-weight: 600; font-size: .82rem; color: var(--text); }
.rfx-art-inner .rfx-prose { font-family: Georgia, 'Times New Roman', serif; font-size: 1.14rem; line-height: 1.72; }
.rfx-art-inner .rfx-prose p { margin: 0 0 20px; }
.rfx-art-inner .rfx-h { font-family: var(--font); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -.01em; line-height: 1.2; margin: 38px 0 14px; }
.rfx-art-inner .rfx-bottom { background: none; color: var(--text); border: 0; border-radius: 0;
  border-left: 3px solid var(--accent); padding: 6px 0 6px 20px; margin: 36px 0 0; overflow: visible; }
body.dark .rfx-art-inner .rfx-bottom { background: none; border: 0; border-left: 3px solid var(--accent); }
.rfx-art-inner .rfx-bottom::before { content: none; }
.rfx-art-inner .rfx-bottom-lbl { font-size: .62rem; letter-spacing: .14em; color: var(--accent-text); margin-bottom: 8px; }
.rfx-art-inner .rfx-bottom-txt { font-family: Georgia, 'Times New Roman', serif; font-size: 1.16rem; line-height: 1.6; font-weight: 400; }
.rfx-art-inner .rfx-tags { margin-top: 34px; }
.rfx-art-inner .rfx-tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.rfx-art-inner .rfx-art-chart { margin: 2.1rem 0; }
@media (max-width: 560px) {
  .rfx-art-inner .rfx-art-title { font-size: 1.95rem; }
  .rfx-art-inner .rfx-prose { font-size: 1.06rem; }
}

/* ── Refractions hub: essay cards like the public index ───────────────────
   Matches refractions_web.py's index: a flat list divided by rules, a mono
   uppercase meta line, an Inter title that turns accent on hover, and the
   standfirst. App tokens keep dark mode working. */
.rfx-cards { display: flex; flex-direction: column; }
.rfx-card { display: block; padding: 26px 0; border-top: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
.rfx-card:last-child { border-bottom: 1px solid var(--border); }
.rfx-card-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.rfx-card-meta i { font-style: normal; color: var(--border-strong); }
.rfx-card-title { font-family: var(--font); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
  letter-spacing: -.015em; margin: 0 0 8px; color: var(--text); transition: color .15s; }
.rfx-card:hover .rfx-card-title { color: var(--accent-text); }
.rfx-card-dek { font-size: .98rem; line-height: 1.5; color: var(--text-dim); margin: 0; max-width: 60ch; }
@media (max-width: 560px) { .rfx-card-title { font-size: 1.28rem; } }


/* Chat: the one marked line allowed before cards (p.card-lead), for an answer that
   covers a different league than the one asked about. Kept by render() and both
   rb-thread paths in index.html; everything else around cards is dropped. */
.card-lead {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface2);
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.rb-thread .card-lead { margin: 14px 0 16px; }

/* Plain chat answers, laid out to be read on a phone (2026-10-21). Highlights are the
   model's ==marks==: the accent in the text's own font, not the cards' code-style mono,
   which made a whole phrase read like code. */
.bubble .hl { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bubble p { margin-bottom: 10px; }
/* Section titles ("KEY PASSES / 90") and labels ("The takeaways:"), from render(). */
.bubble .md-sec {
  margin: 18px 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.bubble .md-sec:first-child { margin-top: 2px; }
.bubble .md-sec span {
  margin-left: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
/* Tables: rules between rows only, small capital headers like the cards, numbers on
   the right in even-width digits, and the player column pinned while the rest scrolls. */
.bubble .md-table { width: auto; min-width: 100%; font-variant-numeric: tabular-nums; }
.bubble .md-table th, .bubble .md-table td {
  border: 0; border-bottom: 1px solid var(--border); padding: 7px 12px 7px 0; text-align: left; vertical-align: top;
}
.bubble .md-table th {
  background: none; border-bottom-color: var(--border2); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.bubble .md-table tbody tr:last-child td { border-bottom: 0; }
.bubble .md-table .num { text-align: right; white-space: nowrap; padding-left: 12px; }
.bubble .md-table td.num { color: var(--text); }
.bubble .md-table .lead {
  position: sticky; left: 0; z-index: 1; background: var(--bg);
  white-space: nowrap; padding-right: 14px;
}
.bubble .md-table td.lead { font-weight: 600; color: var(--text); }
/* The Prism's icon beside a message is its plain mark, not a blue disc, and it is the same
   mark that pulses while it thinks: the avatar pulses in place and the bubble shows only
   the words, so the icon never moves when the answer lands (it used to show twice, the
   disc beside a second mark in the bubble). Card answers replace the whole row. */
.msg-row.ai > .avatar.ai { background: none; border: 0; color: var(--text); margin-top: 7px; }
.msg-row.ai:has(> .bubble > .ai-think) > .avatar { animation: ai-mark-pulse 1.6s ease-in-out infinite; }
.msg-row.ai:has(> .bubble > .ai-think) > .avatar circle { animation: ai-dot-glow 1.6s ease-in-out infinite; }
.msg-row.ai .bubble .ai-think-mark { display: none; }
@media (prefers-reduced-motion: reduce) {
  .msg-row.ai > .avatar, .msg-row.ai > .avatar circle { animation: none; }
}

/* National squad tables (R46, 2026-10-26). A tester could hardly read the names: 9 to 11
   columns shared the chat's width, so "Antonín Kinský" broke a word per line, goals conceded
   read "1 / 0" and the status badge "CONSIDE / R". The player cell was also a flex box, which
   takes a cell out of table layout. Cells now keep their text on one line, the name column
   is as wide as its longest name, and the table scrolls sideways when it must. Phones keep
   the stacked cards (max-width 760px), so this is desktop only. */
@media (min-width: 761px) {
  /* The report takes the chat's full width, not a speech bubble's 80% (643px for 12 columns). */
  .bubble:has(> .national-scout-report) { max-width: 100%; }
  .ntr-table td.ntr-cell-player { display: table-cell; }
  .ntr-table .ntr-player-name, .ntr-table .ntr-player-league { display: block; white-space: nowrap; }
  .ntr-table .ntr-player-league { margin-top: 2px; }
  .ntr-table td, .ntr-table th { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .ntr-table td:nth-child(2) { white-space: normal; min-width: 96px; }   /* a club may take two lines */
}

/* ── Match drawer: line-ups, match stats, assists and substitutions (2026-10-26) ── */
.mx-lu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mx-lu-col { min-width: 0; }
.mx-lu-mgr { font-size: 11px; color: var(--text-dim); margin: -2px 0 6px; }
.mx-lu-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; align-items: baseline; padding: 2px 0; font-size: 12px; }
.mx-lu-pos { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; color: var(--text-dim); }
.mx-lu-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-lu-rt { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-dim); }
.mx-lu-sub {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); margin: 8px 0 2px;
}
.mx-st-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; padding: 3px 0; font-size: 12px; }
.mx-st-v { font-family: var(--mono, ui-monospace, monospace); font-weight: 650; color: var(--text); }
.mx-st-a { text-align: right; }
.mx-st-k { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-dim); font-size: 11px; text-align: center; }
.mx-st-bar { width: 100%; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; display: block; }
.mx-st-bar i { display: block; height: 100%; background: var(--text-dim); }
.mx-ev-as { color: var(--text-dim); font-size: 11px; }
@media (max-width: 760px) {
  .mx-lu { grid-template-columns: 1fr; gap: 12px; }
}

/* Club screen: the manager line above who is out (2026-10-26) */
.tt-mgr { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tt-mgr-nm { font-size: 13px; font-weight: 600; color: var(--text); }
.tt-mgr small { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-dim); }

/* Player profile: out injured or suspended now (2026-10-26) */
.pv-out {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; color: #b91c1c; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .25);
}
.pv-out.ban { color: #b45309; background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .25); }
body.dark .pv-out { color: #fca5a5; }
body.dark .pv-out.ban { color: #fbbf24; }
/* Club screen, manager and team news (2026-10-27): the rows are the match drawer's, which sit in
   a padded body; here they sat flush on the panel's edges, and a row with a date pushed its
   reason left of the undated ones. Same insets and dividers as the panel's other rows, and a
   date column of fixed width so every reason ends at the same place. */
.tt-news .tt-mgr { padding: 6px 10px 10px; margin-bottom: 0; }
.tt-news .mx-out-row {
  grid-template-columns: minmax(0, 1fr) auto 8.6em; padding: 5px 10px;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
}
.tt-news .mx-out-row:last-child { border-bottom: none; }
.tt-news .mx-out-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-news .mx-out-until { text-align: right; }
@media (max-width: 760px) {
  /* The drawer hides dates on phones; here the date goes under the reason instead. */
  .tt-news .mx-out-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
  .tt-news .mx-out-until { display: block; grid-column: 2; }
  .tt-news .mx-out-until:empty { display: none; }
}
/* Profile: when he joined and when his deal ends, read at a glance (2026-10-27): in the mono bio
   line the contract was the faintest text in the header. */
.pv-deal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 8px; }
.pv-deal-i { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
.pv-deal .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.pv-deal .v { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pv-deal .s { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
/* Not registered to play (R54): paperwork, not an injury or a ban, so no warning colour */
.pv-out.reg { color: var(--text-dim); background: transparent; border-color: var(--border); }
body.dark .pv-out.reg { color: var(--text-dim); }

/* ── Match centre: where the ball was (.mc-*) ──────────────────────────────
   A broadcast pitch in both themes: deep navy grass with mown stripes and the brand's
   indigo glow, lines in soft white, the ball's recorded positions as luminous heat
   (screen blended, so empty grass stays dark). The timeline under it is the control:
   territory bars (home above, away below, the momentum chart's colours), goals,
   cards and attempts, a playhead to scrub, and a replay. */
.mc .mx-sect-hd { flex-wrap: wrap; }
.mc-pitch {
  position: relative; width: 100%; aspect-ratio: 105 / 68; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% -20%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(60% 70% at 50% 120%, rgba(6,182,212,.10), transparent 70%),
    repeating-linear-gradient(90deg, #0d1a3d 0 10%, #10204a 10% 20%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 22px 44px -28px rgba(15,23,42,.75);
  isolation: isolate;
}
.mc-heat { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.mc-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc-lines rect, .mc-lines circle, .mc-lines path, .mc-lines line {
  fill: none; stroke: rgba(255,255,255,.30); stroke-width: .32; vector-effect: non-scaling-stroke;
}
.mc-lines .dot { fill: rgba(255,255,255,.45); stroke: none; }
.mc-lines .mc-third { stroke: rgba(255,255,255,.10); stroke-dasharray: 1.2 1.4; }
.mc-ballwrap { position: absolute; inset: 0; pointer-events: none; }
.mc-ball, .mc-trail {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  transition: left .35s cubic-bezier(.2,.7,.2,1), top .35s cubic-bezier(.2,.7,.2,1), opacity .35s;
}
.mc-ball {
  width: 9px; height: 9px; background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 14px 4px rgba(165,243,252,.75);
}
.mc-ball.pulse::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid rgba(165,243,252,.9); animation: mc-pulse 1.8s ease-out infinite;
}
@keyframes mc-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.mc-trail { width: 5px; height: 5px; background: rgba(190,250,236,.9); box-shadow: 0 0 6px rgba(165,243,252,.6); }
.mc-end {
  position: absolute; bottom: 9px; display: flex; align-items: center; gap: 5px; max-width: 46%;
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.62); pointer-events: none;
}
.mc-end.l { left: 10px; } .mc-end.r { right: 10px; justify-content: flex-end; }
.mc-end span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.82); }
.mc-end em { font-style: normal; opacity: .55; }
.mc-end b { font-weight: 400; opacity: .7; }
.mc-end img { width: 14px; height: 14px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.mc-live {
  position: absolute; top: 9px; left: 10px; display: flex; align-items: center; gap: 6px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: rgba(220,38,38,.22); border: 1px solid rgba(248,113,113,.45);
  padding: 3px 8px 3px 6px; border-radius: 99px; backdrop-filter: blur(4px);
}
.mc-live i, .mx-state-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444;
  animation: mc-blink 1.4s ease-in-out infinite;
}
@keyframes mc-blink { 50% { opacity: .35; } }
.mx-state-live { display: flex; align-items: center; justify-content: center; gap: 5px; color: #ef4444; font-weight: 650; }
.mc-cap {
  position: absolute; left: 10px; right: 10px; bottom: 30px; padding: 9px 12px; border-radius: 11px;
  background: rgba(8,13,34,.78); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(8px);
  color: #e5e7eb; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.mc-cap.show { opacity: 1; transform: none; }
.mc-cap-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-cap-min { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: rgba(255,255,255,.6); }
.mc-cap-k {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
.mc-cap-who { font-size: 12.5px; font-weight: 650; color: #fff; }
.mc-cap-sc { margin-left: auto; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: #fff; }
.mc-cap-tx { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: rgba(229,231,235,.86); }

.mc-terr { display: flex; gap: 3px; margin-top: 10px; }
.mc-seg {
  flex: 1 1 0; min-width: 52px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  padding: 6px 8px; border-radius: 7px; font-size: 10.5px; color: var(--text-dim);
  transition: flex-grow .45s cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden;
}
.mc-seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-seg .sm { display: none; }
.mc-seg b { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: var(--text); }
.mc-seg.a { background: rgba(245,158,11,.13); box-shadow: inset 0 -2px 0 #f59e0b; }
.mc-seg.m { background: var(--surface2); }
.mc-seg.h { background: rgba(37,99,235,.11); box-shadow: inset 0 -2px 0 #2563eb; }

.mc-ctrl { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.mc-play {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; cursor: pointer; position: relative;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  display: grid; place-items: center; transition: transform .15s, border-color .15s;
}
.mc-play:hover { transform: scale(1.06); border-color: var(--text-dim); }
.mc-play::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px;
  background: var(--spectrum); opacity: 0; transition: opacity .2s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.mc-play.on::before { opacity: 1; }
.mc-play svg { width: 13px; height: 13px; fill: currentColor; }
.mc-play .i-pause, .mc-play.on .i-play { display: none; }
.mc-play.on .i-pause { display: block; }
.mc-modes { display: flex; gap: 5px; }
.mc-win { margin-left: auto; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.mc-now { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: var(--text); min-width: 36px; text-align: right; }

.mc-tl { width: 100%; height: 64px; display: block; cursor: ew-resize; touch-action: pan-y; overflow: visible; outline: none; }
.mc-tl:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.mc-tl-hit { fill: transparent; }
.mc-axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mc-rv { opacity: .55; }
.mc-rv-h { fill: #2563eb; } .mc-rv-a { fill: #f59e0b; }
.mc-ht { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; vector-effect: non-scaling-stroke; }
.mc-tick {
  fill: var(--text-dim); font-size: 8px; text-anchor: middle; opacity: .75;
  font-family: var(--mono, ui-monospace, monospace); paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
}
.mc-att { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .75; }
.mc-att.h { stroke: #2563eb; } .mc-att.a { stroke: #d97706; }
.mc-att.on.h { fill: #2563eb; } .mc-att.on.a { fill: #d97706; }
.mc-card.yel { fill: #eab308; } .mc-card.red { fill: #dc2626; }
.mc-goal { cursor: pointer; }
.mc-goal circle { stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: r .15s; }
.mc-goal.h circle:first-child { fill: #2563eb; } .mc-goal.a circle:first-child { fill: #f59e0b; }
.mc-goal .core { fill: #fff; stroke: none; }
.mc-goal:hover circle:first-child { r: 6.2; }
.mc-ph line { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }
.mc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mc-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.mc-legend .lg-h { background: #2563eb; opacity: .6; } .mc-legend .lg-a { background: #f59e0b; opacity: .6; }
.mc-legend .lg-g { border-radius: 50%; background: #2563eb; box-shadow: inset 0 0 0 2.5px #2563eb, inset 0 0 0 5px #fff; }
.mc-legend .lg-on { border-radius: 50%; background: var(--text-dim); width: 6px; height: 6px; }
.mc-legend .lg-off { border-radius: 50%; border: 1px solid var(--text-dim); width: 6px; height: 6px; }
.mc-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mc-facts li { position: relative; padding-left: 14px; font-size: 12px; line-height: 1.5; color: var(--text); }
.mc-facts li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--spectrum);
}
.mc-note { margin-top: 8px; }
.mx-ev-desc { margin: -1px 0 5px 43px; font-size: 11px; line-height: 1.45; color: var(--text-dim); }

body.dark .mc-seg.a { background: rgba(251,191,36,.12); box-shadow: inset 0 -2px 0 #fbbf24; }
body.dark .mc-seg.h { background: rgba(96,165,250,.12); box-shadow: inset 0 -2px 0 #60a5fa; }
body.dark .mc-rv-h, body.dark .mc-goal.h circle:first-child { fill: #60a5fa; }
body.dark .mc-rv-a, body.dark .mc-goal.a circle:first-child { fill: #fbbf24; }
body.dark .mc-att.h { stroke: #60a5fa; } body.dark .mc-att.a { stroke: #fbbf24; }
body.dark .mc-att.on.h { fill: #60a5fa; } body.dark .mc-att.on.a { fill: #fbbf24; }

@media (max-width: 760px) {
  .mc-pitch { border-radius: 11px; }
  .mc-end { font-size: 8.5px; bottom: 7px; }
  .mc-end em { display: none; }
  .mc-seg { font-size: 9.5px; padding: 5px 6px; }
  .mc-seg .lg { display: none; }
  .mc-seg .sm { display: inline; }
  .mc-win { display: none; }
  .mc-cap { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-ball.pulse::after, .mc-live i, .mx-state-live i { animation: none; }
  .mc-seg, .mc-ball, .mc-trail, .mc-cap { transition: none; }
}

/* Home's live rows: where the ball has been in the last ten minutes (home colour for time in
   the away half, away colour for the home half), easing to each new reading. */
.term-fx.fx-live { position: relative; }
.term-fx .fx-tilt {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(245,158,11,.75); pointer-events: auto;
}
.term-fx .fx-tilt b {
  display: block; height: 100%; background: #2563eb;
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.term-fx .fx-tilt::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--surface);
}
body.dark .term-fx .fx-tilt { background: rgba(251,191,36,.8); }
body.dark .term-fx .fx-tilt b { background: #60a5fa; }
@media (prefers-reduced-motion: reduce) { .term-fx .fx-tilt b { transition: none; } }

/* ── Matches: a matchday as result cards (.mt-*) ───────────────────────────
   Results first. Each card: the score, scorers, a small broadcast pitch with the
   heat of where the ball spent the game (home attacking right, the match centre's
   ramp), one or two plain lines, and the top-rated player. Cards lift on hover and
   open the match centre. */
.mt-sortbar { display: flex; align-items: center; gap: 10px; padding: 12px 0 2px; flex-wrap: wrap; }
.mt-body { padding: 8px 20px 90px; }
.mt-sortnote { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 10px; }
.mt-none { padding: 18px 0; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.mt-card {
  position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s, border-color .16s;
}
.mt-card:hover { transform: translateY(-2px); border-color: var(--border-strong, var(--text-dim));
  box-shadow: 0 14px 30px -18px rgba(15,23,42,.45); }
.mt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-card.mt-upcoming { opacity: .86; }
.mt-skel { cursor: default; }
.mt-card-lg { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.mt-card-lg img { width: 14px; height: 14px; object-fit: contain; }
.mt-score { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.mt-side { grid-column: 1; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; min-width: 0; }
.mt-side img, .mt-nocrest { width: 20px; height: 20px; object-fit: contain; }
.mt-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-side b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 16px; font-weight: 700; color: var(--text); min-width: 14px; text-align: right; }
.mt-side.lost .mt-name, .mt-side.lost b { color: var(--text-dim); font-weight: 500; }
.mt-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
.mt-ft { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 7px; }
.mt-ko { font-size: 11px; color: var(--text-dim); max-width: 92px; display: inline-block; line-height: 1.3; }
.mt-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 700; color: #ef4444; }
.mt-live i { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: mc-blink 1.4s ease-in-out infinite; }
.mt-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.mt-goals > div { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.mt-goals > div:last-child { justify-content: flex-end; text-align: right; }
.mt-goals span { white-space: nowrap; }
.mt-goals .mt-red { color: #dc2626; display: inline-flex; align-items: center; gap: 4px; }
.mt-goals .mt-red::before { content: ''; width: 6px; height: 9px; border-radius: 1.5px; background: #dc2626; }
.mt-pitch {
  position: relative; width: 100%; aspect-ratio: 105 / 68; border-radius: 10px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 90% at 50% -20%, rgba(99,102,241,.28), transparent 70%),
    repeating-linear-gradient(90deg, #0d1a3d 0 10%, #10204a 10% 20%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mt-pitch .mc-lines rect, .mt-pitch .mc-lines circle, .mt-pitch .mc-lines path, .mt-pitch .mc-lines line { stroke: rgba(255,255,255,.22); }
.mt-heat { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.mt-dir { position: absolute; left: 8px; bottom: 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 8.5px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); pointer-events: none; }
.mt-empty { display: grid; place-items: center; }
.mt-empty span { font-size: 11px; color: rgba(255,255,255,.55); }
.mt-story p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.mt-story p + p { margin-top: 3px; color: var(--text-dim); }
.mt-top {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: auto;
  padding: 7px 8px; border-radius: 10px; background: var(--surface2); cursor: pointer; transition: background .15s;
}
.mt-top:hover { background: var(--surface3, var(--surface2)); }
.mt-top img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--surface3, var(--border)); }
.mt-top-n { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.mt-top-n em { font-style: normal; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.mt-top-r { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: #fff;
  background: var(--spectrum); border-radius: 99px; padding: 2px 8px; }
.mt-top-s { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.1; }
.mt-top-s small { font-size: 8.5px; font-weight: 500; color: var(--text-dim); letter-spacing: .04em; }

.mt-roundbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.mt-rb-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mt-rb-btn:hover { border-color: var(--text-dim); }
.mt-rb-btn.off { opacity: .3; cursor: default; }
.mt-rb-t { display: flex; flex-direction: column; align-items: center; min-width: 180px; }
.mt-rb-t b { font-size: 15px; color: var(--text); }
.mt-rb-t span { font-size: 11px; color: var(--text-dim); }
.mt-top-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.mt-top-row .term-panel { grid-column: auto; }
.mt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.mt-tile { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mt-tile b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 18px; color: var(--text); }
.mt-tile span { font-size: 11px; color: var(--text-dim); }
.mt-tile small { font-size: 10px; color: var(--text-dim); opacity: .8; }
.mt-facts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.mt-fact { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 12px;
  font-size: 12.5px; border-bottom: 1px solid var(--border); }
.mt-fact:last-child { border-bottom: 0; }
.mt-fact span { font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.mt-fact a, .mt-fact em { font-style: normal; font-weight: 600; color: var(--text); cursor: pointer; }
.mt-fact a:hover { color: var(--accent-text); }
.mt-fact b { font-family: var(--font-mono, ui-monospace, monospace); color: var(--text); }
.mt-xi {
  flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; padding: 14px 8px; min-height: 300px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(99,102,241,.32), transparent 70%),
    repeating-linear-gradient(180deg, #0d1a3d 0 12.5%, #10204a 12.5% 25%);
}
.mt-xi-row { display: flex; justify-content: space-around; }
.mt-xi-p { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
.mt-xi-p .ph { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.mt-xi-p .ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mt-xi-p .ph b { position: absolute; right: -14px; top: -6px; background: #fff; color: #1e3a8a; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; font-weight: 800; border-radius: 99px; padding: 1px 5px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mt-xi-p .nm { font-size: 10.5px; font-weight: 700; color: #fff; text-align: center; line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-xi-p .cl img { width: 12px; height: 12px; object-fit: contain; }
.mt-xi-p:hover .ph { border-color: #fff; transform: scale(1.06); }
.mt-xi-wait { padding: 16px 12px; font-size: 12px; color: var(--text-dim); }
.mt-lgsec { margin-bottom: 26px; }
.mt-lghd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.mt-lghd img { width: 18px; height: 18px; object-fit: contain; align-self: center; }
.mt-lghd span { font-size: 15px; font-weight: 650; color: var(--text); }
.mt-lghd em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
.mt-lghd a { margin-left: auto; font-size: 11.5px; color: var(--accent-text); cursor: pointer; }
.gw-switchbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gw-allres { font-size: 11.5px; color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.gw-allres:hover { text-decoration: underline; }
body.dark .mt-goals .mt-red { color: #f87171; }

@media (max-width: 760px) {
  .mt-body { padding: 6px 14px 96px; }
  .mt-grid { grid-template-columns: 1fr; }
  .mt-top-row { grid-template-columns: 1fr; }
  .mt-tiles { grid-template-columns: repeat(2, 1fr); }
  .mt-fact { grid-template-columns: 110px 1fr auto; }
  .mt-lghd a { margin-left: 0; flex-basis: 100%; }
  #mt-leagues { overflow-x: auto; flex-wrap: nowrap; }
  #mt-leagues .wire-zone-btn { white-space: nowrap; }
  .mt-sortbar .pd-mode-row { overflow-x: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-card { transition: none; } .mt-card:hover { transform: none; } .mt-live i { animation: none; }
}

/* Matches v2: the dock, the weekend digest and the clickable pieces. */
#mt-dock { padding: 4px 20px 0; }
.mt-dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mt-tile-btn {
  position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto auto; column-gap: 9px;
  align-items: center; text-align: left; padding: 10px 11px 9px; border-radius: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mt-tile-btn:hover { border-color: var(--text-dim); transform: translateY(-1px); }
.mt-tile-btn.active { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent), 0 12px 26px -16px rgba(37,99,235,.55); }
.mt-tile-btn.active::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--spectrum); }
.mt-tb-ic { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.mt-tb-ic img { width: 24px; height: 24px; object-fit: contain; }
.mt-tb-ic svg { width: 20px; height: 20px; color: var(--accent-text); }
.mt-tb-t { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tb-s { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-prog { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: var(--surface2); margin-top: 8px; overflow: hidden; }
.mt-prog b { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; }
.mt-tile-btn.active .mt-prog b { background: var(--spectrum); }
.mt-body { padding-top: 16px; }
.mt-fade { animation: mt-in .28s ease-out; }
@keyframes mt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mt-kicker { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); }
.mt-sec { margin: 0 0 28px; }
.mt-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mt-sec-t { font-size: 16px; font-weight: 650; color: var(--text); margin-top: 3px; letter-spacing: -.01em; }
.mt-sec-hd-cards { margin-top: 6px; margin-bottom: 4px; }
.mt-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-bottom: 26px; padding: 18px 20px;
  border-radius: 16px; color: #fff; overflow: hidden; position: relative;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.35), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
  box-shadow: 0 24px 50px -30px rgba(15,23,42,.8);
}
.mt-hero .mt-kicker { color: rgba(255,255,255,.7); }
.mt-hero-nums { display: flex; gap: 28px; margin-top: 10px; flex-wrap: wrap; }
.mt-hero-nums div { display: flex; flex-direction: column; }
.mt-hero-nums b { font-size: 34px; font-weight: 750; letter-spacing: -.02em; line-height: 1; }
.mt-hero-nums span { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.mt-pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mt-pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; color: var(--text);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.mt-pt:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 12px 26px -18px rgba(15,23,42,.45); }
.mt-pt-ph { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--surface2); margin-bottom: 6px; }
.mt-pt-ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mt-pt-ph b { position: absolute; right: -16px; bottom: -2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 800;
  color: #fff; background: var(--spectrum); border-radius: 99px; padding: 2px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mt-pt-n { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.mt-pt-c { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-pt-c img { width: 12px; height: 12px; object-fit: contain; }
.mt-pt-m { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono, ui-monospace, monospace); }
.mt-pt-m em { font-style: normal; color: var(--text); }
.mt-pt-tag { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-text); background: var(--accent-soft, rgba(37,99,235,.1)); border-radius: 5px; padding: 1px 5px; }
.mt-gls { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.mt-gl { display: grid; grid-template-columns: 44px 22px 1fr; gap: 10px; align-items: start; text-align: left; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; color: var(--text); transition: border-color .15s; }
.mt-gl:hover { border-color: var(--text-dim); }
.mt-gl-m { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 700; color: var(--accent-text); padding-top: 1px; }
.mt-gl-c img { width: 20px; height: 20px; object-fit: contain; }
.mt-gl-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-gl-b b { font-size: 13px; }
.mt-gl-b span { font-size: 11px; color: var(--text-dim); }
.mt-gl-b em { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text); opacity: .85; }
.mt-more { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.mt-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mt-res-lg { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mt-res-hd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface2); border: 0;
  border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text); text-align: left; }
.mt-res-hd img { width: 16px; height: 16px; object-fit: contain; }
.mt-res-hd b { font-size: 12.5px; }
.mt-res-hd span { font-size: 11px; color: var(--text-dim); }
.mt-res-hd i { margin-left: auto; font-style: normal; color: var(--text-dim); }
.mt-res-row { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 6px 12px; border: 0;
  background: none; cursor: pointer; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border); }
.mt-res-row:last-child { border-bottom: 0; }
.mt-res-row:hover { background: var(--surface2); }
.mt-res-row .h { text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-res-row .a { text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-res-row .lost { color: var(--text-dim); }
.mt-res-row b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; min-width: 38px; text-align: center; }
.mt-club { cursor: pointer; }
.mt-club:hover { text-decoration: underline; text-underline-offset: 2px; }
.mt-rb-t .mt-kicker { margin-bottom: 2px; }
.mt-rb-t b { font-size: 18px; }
.mt-sortbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.mt-sortnote { margin: 0; }
.mt-xi-p .cl { cursor: pointer; }
body.dark .mt-hero { box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
@media (max-width: 1100px) { .mt-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #mt-dock { padding: 2px 0 0 14px; }
  .mt-dock { display: flex; overflow-x: auto; gap: 8px; padding-right: 14px; scrollbar-width: none; }
  .mt-dock::-webkit-scrollbar { display: none; }
  .mt-tile-btn { flex: 0 0 150px; }
  .mt-hero { grid-template-columns: 1fr; padding: 16px; }
  .mt-hero-nums b { font-size: 28px; }
  .mt-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-gls { grid-template-columns: 1fr; }
  .mt-res { grid-template-columns: 1fr; }
  .mt-sec-hd .pd-mode-row { overflow-x: auto; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mt-fade { animation: none; } .mt-pt, .mt-tile-btn { transition: none; } }
.mt-pt-s { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
.mt-pt-s b { font-family: var(--font-mono, ui-monospace, monospace); color: var(--text); }
@media (max-width: 760px) { .mt-tile-btn { flex: 0 0 172px; } }

/* Matches polish (2026-10-28). */
.mt-note { font-size: 11.5px; color: var(--text-dim); margin: -8px 0 14px; }
.mt-dir.r { left: auto; right: 8px; }
/* The dock scrolls sideways on phones; room above and below so the active tile's outline,
   spectrum bar and lift are not clipped by the scroller. */
@media (max-width: 760px) {
  .mt-dock { padding: 6px 14px 10px 2px; margin: -4px 0 -6px; }
}
.gw-allres { font-weight: 700; font-size: 12px; color: #fff; background: var(--accent); border-radius: 99px;
  padding: 5px 12px; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(37,99,235,.6); }
.gw-allres:hover { text-decoration: none; filter: brightness(1.08); }

/* Matches: the league header and matchday rail, and player of the round cards (2026-10-28). */
.mt-lhead { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.mt-lhead-t { display: flex; align-items: center; gap: 12px; }
.mt-lhead-t img { width: 38px; height: 38px; object-fit: contain; }
.mt-lhead-t > div { display: flex; flex-direction: column; }
.mt-lhead-t b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--text); line-height: 1.15; }
.mt-lhead-t span:last-child { font-size: 12px; color: var(--text-dim); }
.mt-rail-wrap { display: flex; align-items: center; gap: 6px; }
.mt-rail { flex: 1; display: flex; gap: 5px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px 6px; scrollbar-width: none; }
.mt-rail::-webkit-scrollbar { display: none; }
.mt-md { flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); position: relative;
  transition: transform .12s, border-color .12s, background .12s; }
.mt-md:hover { transform: translateY(-1px); border-color: var(--text-dim); }
.mt-md.live { background: var(--surface); border-color: var(--accent); color: var(--accent-text); }
.mt-md.live::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mt-md.next { background: transparent; color: var(--text-dim); border-style: dashed; opacity: .75; }
.mt-md.cur { background: var(--text); color: var(--surface); border-color: var(--text); box-shadow: 0 8px 18px -10px rgba(15,23,42,.6); }
.mt-md.cur::before { content: ''; position: absolute; left: 6px; right: 6px; bottom: -6px; height: 3px; border-radius: 3px; background: var(--spectrum); }
.mt-rail-step { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mt-rail-step.off { opacity: .3; cursor: default; }
.mt-rail-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-dim); }
.mt-rail-key span { display: inline-flex; align-items: center; gap: 5px; }
.mt-rail-key i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface2); }
.mt-rail-key i.live { background: var(--surface); border-color: var(--accent); }
.mt-rail-key i.next { background: transparent; border-style: dashed; }

.mt-potr { display: grid; grid-template-columns: 76px 1fr auto auto; gap: 16px; align-items: center; margin: 0 0 14px;
  padding: 14px 18px 14px 14px; border-radius: 16px; color: #fff; cursor: pointer; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
  box-shadow: 0 22px 44px -28px rgba(15,23,42,.8); transition: transform .15s; }
.mt-potr:hover { transform: translateY(-1px); }
.mt-potr-ph { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #e0e7ff; border: 2px solid rgba(255,255,255,.9); }
.mt-potr-ph img { width: 100%; height: 100%; object-fit: cover; }
.mt-potr-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-potr-t .mt-kicker { color: rgba(255,255,255,.7); }
.mt-potr-t b { font-size: 22px; letter-spacing: -.02em; }
.mt-potr-m { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.78); }
.mt-potr-m img { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 5px; }
.mt-potr-r { font-family: var(--font-mono, ui-monospace, monospace); font-size: 24px; font-weight: 800; padding: 8px 14px; border-radius: 99px; background: var(--spectrum); }
.mt-potr-go { font-size: 12px; font-weight: 650; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.mt-potr-go:hover { background: rgba(255,255,255,.2); }

.mt-hero { grid-template-columns: 1fr; gap: 12px; }
.mt-potrs-hd { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-top: 6px; }
.mt-potrs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mt-potr-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; text-align: center; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s; min-width: 0; }
.mt-potr-mini:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.mt-potr-mini .lg { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .06em; color: rgba(255,255,255,.7); white-space: nowrap; }
.mt-potr-mini .lg img { width: 14px; height: 14px; object-fit: contain; }
.mt-potr-mini .ph { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #e0e7ff; border: 2px solid rgba(255,255,255,.85); margin: 4px 0 2px; }
.mt-potr-mini .ph img { width: 100%; height: 100%; object-fit: cover; }
/* Initials where a player has no photo (_mtFace). */
.mt-ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-style: normal;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; color: #3730a3; background: #e0e7ff; }
.mt-potr-ph .mt-ini { font-size: 24px; }
.mt-potr-mini b { font-size: 13px; line-height: 1.2; max-width: 100%; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.mt-potr-mini .cl { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(255,255,255,.72); max-width: 100%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-potr-mini .cl img { width: 12px; height: 12px; object-fit: contain; }
.mt-potr-mini .rt { margin-top: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 800;
  padding: 2px 9px; border-radius: 99px; background: var(--spectrum); }
@media (max-width: 760px) {
  .mt-potrs { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .mt-potrs::-webkit-scrollbar { display: none; }
  .mt-potr-mini { flex: 0 0 148px; }
  .mt-potr { grid-template-columns: 58px 1fr auto; gap: 12px; padding: 12px; }
  .mt-potr-ph { width: 58px; height: 58px; }
  .mt-potr-t b { font-size: 18px; }
  .mt-potr-r { font-size: 18px; padding: 6px 10px; }
  .mt-potr-go { grid-column: 1 / -1; justify-self: start; }
  .mt-lhead-t b { font-size: 19px; }
  .mt-rail-step { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mt-md, .mt-potr, .mt-potr-mini { transition: none; } .mt-rail { scroll-behavior: auto; } }

/* Matches: the rail's label row, and games still to play as a fixture list (2026-10-28). */
.mt-rail-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 2px; }
.mt-rail-lbl { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-dim); }
.mt-rail-lbl b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); }
.mt-lhead { gap: 8px; }

.mt-fxs { margin-top: 22px; }
.mt-fx-note { font-size: 12px; color: var(--text-dim); margin: -4px 0 12px; max-width: 70ch; line-height: 1.5; }
.mt-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 12px; align-items: start; }
.mt-fxday { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.mt-fxday-h { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 9px 14px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.mt-fx { display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px minmax(0, 1fr) 12px; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mt-fxday-h + .mt-fx { border-top: 0; }
.mt-fx:hover { background: var(--surface2); }
.mt-fx-t { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 700; color: var(--text); }
.mt-fx.off .mt-fx-t { font-size: 10.5px; color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; }
.mt-fx.off .mt-fx-h, .mt-fx.off .mt-fx-a { opacity: .6; }
.mt-fx-h, .mt-fx-a { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.mt-fx-h { justify-content: flex-end; text-align: right; }
.mt-fx-h span, .mt-fx-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fx-h img, .mt-fx-a img, .mt-fx .mt-nocrest { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.mt-fx-v { text-align: center; font-size: 11px; color: var(--text-dim); }
.mt-fx-go { justify-self: end; font-size: 16px; line-height: 1; color: var(--text-dim); }
.mt-fx:hover .mt-fx-go { color: var(--accent-text); }
@media (max-width: 760px) {
  .mt-rail-lbl { font-size: 11.5px; }
  .mt-fx { grid-template-columns: 46px minmax(0, 1fr) 14px minmax(0, 1fr) 10px; gap: 7px; padding: 11px 12px; }
  .mt-fx-h, .mt-fx-a { font-size: 12.5px; gap: 6px; }
  .mt-fx-h img, .mt-fx-a img, .mt-fx .mt-nocrest { width: 18px; height: 18px; }
  .mt-fx-h span, .mt-fx-a span { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}

/* ─── What's new (renderWhatsNew in index.html, list in whatsnew.py) ───────────
   "Refraction": a dark ink stage in both themes (the family of the Matches hero and
   the match centre's pitch), the brand mark's blue dot splitting into the spectrum
   across its corner, a greeting in the display face, a numbered list of the notes
   on the left and the chosen one on the right with its own drawn illustration. On a
   phone the notes become a swipeable row. Minimised, or once its notes have been
   seen before, it is one slim bar (`.is-bar`) that opens it again. Every animation
   lands on the element's resting state, so reduced motion shows the finished picture. */
.whn-card {
  --whn-ink: #060a18;
  --whn-ink2: #0b1532;
  --whn-line: rgba(255,255,255,.09);
  --whn-soft: rgba(255,255,255,.66);
  --whn-dim: rgba(255,255,255,.42);
  --whn-ease: cubic-bezier(.2,.8,.2,1);
  flex-shrink: 0; position: relative; isolation: isolate; overflow: hidden;
  margin: 16px 16px 6px; border-radius: 22px; color: #fff;
  background:
    radial-gradient(80% 130% at 92% -10%, rgba(79,70,229,.45), transparent 58%),
    radial-gradient(60% 110% at -5% 110%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(40% 60% at 60% 120%, rgba(16,185,129,.10), transparent 70%),
    linear-gradient(165deg, var(--whn-ink2), var(--whn-ink) 64%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 34px 70px -40px rgba(6,10,24,.9), 0 14px 30px -24px rgba(37,99,235,.45);
  animation: whn-rise .8s var(--whn-ease) both;
  transition: height .44s cubic-bezier(.4,0,.2,1), opacity .32s ease, margin .44s ease, transform .44s ease;
}
body.dark .whn-card { box-shadow: 0 0 0 1px var(--whn-line), 0 34px 70px -40px rgba(0,0,0,.95); }
.whn-card.whn-out { height: 0 !important; opacity: 0; margin-top: 0; margin-bottom: 0; transform: scale(.985); }
/* Film grain, so the gradients read as light rather than as flat fills. */
.whn-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.whn-beam {
  position: absolute; top: 0; right: 0; width: min(62%, 640px); height: auto; z-index: -1; pointer-events: none;
  /* Fades in from the left and out before the note below it, so the rays light the
     greeting and never cross the text. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, #000 40%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(180deg, #000 40%, transparent 78%);
  mask-composite: intersect;
}
.whn-ray { stroke-dasharray: 520; animation: whn-draw 1.5s var(--whn-ease) both; animation-delay: calc(.35s + var(--k) * .07s); }
.whn-ray-glow { animation-name: whn-draw, whn-breathe; animation-duration: 1.5s, 7s; animation-iteration-count: 1, infinite;
  animation-delay: calc(.35s + var(--k) * .07s), calc(2s + var(--k) * .6s); }
.whn-in { stroke-dasharray: 470; animation: whn-draw 1.1s var(--whn-ease) .1s both; }
.whn-core { transform-box: fill-box; transform-origin: center; animation: whn-pop .5s var(--whn-ease) .3s both; }

.whn-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 28px 30px 4px; position: relative;
}
.whn-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--whn-soft);
  animation: whn-up .7s var(--whn-ease) .1s both;
}
.whn-spark {
  width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
  background: conic-gradient(from 200deg, #2563EB, #4f46e5, #06b6d4, #10b981, #f59e0b, #ef4444, #2563EB);
  box-shadow: 0 0 12px rgba(37,99,235,.7);
}
.whn-count {
  font-size: 10px; letter-spacing: .04em; color: #fff; padding: 1px 8px; border-radius: 99px;
  background: linear-gradient(var(--whn-ink2), var(--whn-ink2)) padding-box, var(--spectrum) border-box; border: 1px solid transparent;
}
.whn-h {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  letter-spacing: -.025em; line-height: 1.04; margin: 12px 0 8px; color: #fff;
  animation: whn-up .8s var(--whn-ease) .18s both;
}
.whn-h em, .whn-bar-h em {
  font-style: normal; background: linear-gradient(92deg, #93c5fd, #a5b4fc 30%, #67e8f9 60%, #6ee7b7 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.whn-sub { margin: 0; font-size: .98rem; color: var(--whn-soft); animation: whn-up .8s var(--whn-ease) .26s both; }
.whn-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.whn-min {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, transform .2s; animation: whn-up .7s var(--whn-ease) .3s both;
}
.whn-min:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.whn-min:active { transform: scale(.94); }
.whn-x {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 99px;
  padding: 8px 15px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, transform .2s; animation: whn-up .7s var(--whn-ease) .3s both;
}
.whn-x:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.whn-x:active { transform: scale(.97); }

.whn-body {
  display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.7fr); gap: 16px;
  padding: 20px 30px 8px; position: relative;
}
.whn-stage {
  border-radius: 18px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)), rgba(7,12,30,.78);
  border: 1px solid var(--whn-line); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px -28px rgba(0,0,0,.8);
  animation: whn-up .9s var(--whn-ease) .34s both;
}
.whn-slide { display: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 252px; }
.whn-slide.on { display: grid; animation: whn-fade .55s var(--whn-ease) both; }
.whn-art {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 14px;
  background:
    radial-gradient(70% 80% at 50% 45%, rgba(37,99,235,.16), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px,
    rgba(3,6,16,.45);
  border-right: 1px solid var(--whn-line);
}
.whn-art svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.whn-lbl { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em; fill: rgba(255,255,255,.5); }
.whn-big { font-family: var(--font-display); font-weight: 800; font-size: 40px; fill: #fff; }
.whn-copy { padding: 24px 26px 22px; display: flex; flex-direction: column; min-width: 0; }
.whn-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.whn-tag {
  color: #fff; padding: 3px 9px; border-radius: 99px;
  background: linear-gradient(rgba(10,18,44,.9), rgba(10,18,44,.9)) padding-box, var(--spectrum) border-box; border: 1px solid transparent;
}
.whn-date { color: var(--whn-dim); }
.whn-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; line-height: 1.18; letter-spacing: -.015em;
  margin: 14px 0 8px; color: #fff;
}
.whn-text { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--whn-soft); }
.whn-cta {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: .84rem; font-weight: 600; color: #0a1230; background: #fff; border: none;
  border-radius: 99px; padding: 10px 16px 10px 18px; cursor: pointer; position: relative;
  box-shadow: 0 10px 24px -12px rgba(147,197,253,.9);
  transition: transform .2s var(--whn-ease), box-shadow .2s;
}
.whn-copy .whn-text + .whn-cta { margin-top: 20px; }
.whn-cta::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1; opacity: 0;
  background: var(--spectrum); filter: blur(8px); transition: opacity .25s;
}
.whn-cta:hover { transform: translateY(-1px); }
.whn-cta:hover::before { opacity: .85; }
.whn-arr { display: inline-block; transition: transform .2s var(--whn-ease); }
.whn-cta:hover .whn-arr { transform: translateX(3px); }

.whn-index {
  list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  border-radius: 18px; border: 1px solid var(--whn-line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(7,12,30,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: whn-up .9s var(--whn-ease) .4s both;
}
.whn-ix {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  text-align: left; font: inherit; color: var(--whn-soft); background: transparent; border: 1px solid transparent;
  border-radius: 12px; padding: 12px 14px; cursor: pointer; position: relative;
  transition: background .2s, color .2s, border-color .2s;
  animation: whn-up .7s var(--whn-ease) both; animation-delay: calc(.42s + var(--i) * .06s);
}
.whn-ix::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #2563EB, #06b6d4, #10b981, #f59e0b); opacity: 0; transform: scaleY(.4);
  transition: opacity .25s, transform .3s var(--whn-ease);
}
.whn-ix:hover { background: rgba(255,255,255,.04); color: #fff; }
.whn-ix.on { background: rgba(255,255,255,.07); border-color: var(--whn-line); color: #fff; }
.whn-ix.on::before { opacity: 1; transform: none; }
.whn-ix.seen .whn-ix-t { color: var(--whn-dim); }
.whn-ix-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--whn-dim); letter-spacing: .06em; }
.whn-ix.on .whn-ix-n { color: #93c5fd; }
.whn-ix-t { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.whn-ix-d { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--whn-dim); white-space: nowrap; }
.whn-dots { display: none; }
.whn-foot {
  margin: 0; padding: 6px 30px 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--whn-dim); text-align: right;
}

/* The bar: one line that opens the stage again. */
.whn-card.is-bar { border-radius: 16px; margin: 14px 16px 4px; }
.whn-card.is-bar::before {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, #2563EB 15%, #06b6d4 40%, #10b981 60%, #f59e0b 80%, transparent);
  opacity: .75;
}
.whn-bar {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 11px 12px 11px 18px;
  cursor: pointer; position: relative; border-radius: inherit;
}
.whn-bar:focus-visible { outline: 2px solid #93c5fd; outline-offset: -3px; }
.whn-bar-h {
  font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.012em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.whn-bar .whn-count { flex: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.whn-bar-peek {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--whn-dim);
}
.whn-bar-peek i { font-style: normal; margin: 0 9px; opacity: .55; }
.whn-bar-open {
  flex: none; display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: .8rem; font-weight: 600; color: #fff; padding: 7px 13px; border-radius: 99px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .2s, border-color .2s;
}
.whn-bar:hover .whn-bar-open { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.whn-bar-open svg { transition: transform .25s var(--whn-ease); }
.whn-bar:hover .whn-bar-open svg { transform: translateY(1px); }
.whn-bar-x {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--whn-soft); background: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s;
}
.whn-bar-x:hover { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }

/* Illustration motion. Each one starts from its keyframe and rests on its own
   style, so it replays whenever its slide comes on. */
.whn-art .a-row, .whn-art .a-up { animation: whn-up .6s var(--whn-ease) both; animation-delay: var(--d, 0s); }
.whn-art .a-fade { animation: whn-fade .7s ease both; animation-delay: var(--d, 0s); }
.whn-art .a-pop { transform-box: fill-box; transform-origin: center; animation: whn-pop .45s var(--whn-ease) both; animation-delay: var(--d, 0s); }
.whn-art .a-type { transform-box: fill-box; transform-origin: left center; animation: whn-type .55s var(--whn-ease) both; animation-delay: var(--d, 0s); }
.whn-art .a-draw { stroke-dashoffset: 0; animation: whn-dash 1.1s var(--whn-ease) both; animation-delay: var(--d, 0s); }
.whn-art .a-trail { animation: whn-fade 1s ease .3s both; }
.whn-art .a-heat { mix-blend-mode: screen; animation: whn-fade 1.2s ease both, whn-breathe 6s ease-in-out 1.2s infinite; }
.whn-art .a-pulse { transform-box: fill-box; transform-origin: center; animation: whn-ring 2.4s ease-out 1.3s infinite both; }
.whn-art .a-streak line { stroke-dasharray: 60 140; animation: whn-streak 1.6s linear infinite; animation-delay: var(--d, 0s); }

@keyframes whn-rise  { from { opacity: 0; transform: translateY(14px) scale(.99); } }
@keyframes whn-up    { from { opacity: 0; transform: translateY(10px); } }
@keyframes whn-fade  { from { opacity: 0; } }
@keyframes whn-pop   { from { opacity: 0; transform: scale(.3); } }
@keyframes whn-type  { from { transform: scaleX(0); } }
@keyframes whn-draw  { from { stroke-dashoffset: 520; } }
@keyframes whn-dash  { from { stroke-dashoffset: var(--len, 300); } }
@keyframes whn-breathe { 50% { opacity: .55; } }
@keyframes whn-ring  { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes whn-streak { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }

/* The way back once it is cleared, and the nav's "New" tag. */
.whn-lede-link {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; vertical-align: 1px;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text); cursor: pointer;
  padding: 3px 11px 3px 9px; border-radius: 99px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; border: 1px solid transparent;
}
.whn-lede-link:hover { box-shadow: 0 4px 14px -6px rgba(37,99,235,.55); }
.whn-lede-link .whn-spark { width: 7px; height: 7px; }
#navrow .nav-new {
  position: static; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text); padding: 0 6px; margin-left: 6px; line-height: 15px; border-radius: 99px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; border: 1px solid transparent;
}
#mobile-nav .mob-nav-btn:has(.mob-new) { position: relative; }
.mob-new {
  position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%;
  background: conic-gradient(from 200deg, #2563EB, #06b6d4, #10b981, #f59e0b, #ef4444, #2563EB);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Narrower desktops: the index runs under the note, the notes sharing the width. */
@media (max-width: 1080px) {
  .whn-body { grid-template-columns: minmax(0, 1fr); }
  .whn-index { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
    padding: 0; border: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .whn-ix { grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; height: 100%; padding: 11px 12px; }
  .whn-ix::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 2px; transform: scaleX(.4);
    background: linear-gradient(90deg, #2563EB, #06b6d4, #10b981, #f59e0b); }
  .whn-ix.on::before { transform: none; }
  .whn-ix-t { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .whn-ix-d { display: none; }
}
/* A phone: the notes become a row to swipe, each a card with its picture on top. */
@media (max-width: 720px) {
  .whn-card { margin: 10px 10px 4px; border-radius: 20px; }
  .whn-card.is-bar { margin: 10px 10px 4px; border-radius: 14px; }
  .whn-bar { gap: 9px; padding: 10px 8px 10px 14px; min-height: 52px; }
  .whn-bar-h { font-size: .98rem; }
  .whn-bar-peek { display: none; }
  .whn-bar-open { padding: 7px 10px; }
  .whn-min { width: 32px; height: 32px; }
  .whn-beam { width: 92%; opacity: .7; }
  .whn-head { padding: 22px 20px 0; display: block; }
  /* The controls sit in the corner so the greeting keeps the full width. */
  .whn-ctl { position: absolute; top: 16px; right: 14px; }
  .whn-eyebrow { padding-right: 128px; min-height: 32px; }
  .whn-h { font-size: 1.62rem; margin-top: 10px; }
  .whn-sub { font-size: .9rem; }
  .whn-x { padding: 7px 12px; }
  .whn-body { padding: 16px 0 4px; }
  .whn-index { display: none; }
  .whn-stage { background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .whn-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px;
    padding: 0 18px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .whn-track::-webkit-scrollbar { display: none; }
  .whn-slide, .whn-slide.on {
    display: flex; flex-direction: column; flex: 0 0 86%; min-height: 0; scroll-snap-align: start;
    border-radius: 18px; overflow: hidden; border: 1px solid var(--whn-line);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    animation: none;
  }
  .whn-art { border-right: none; border-bottom: 1px solid var(--whn-line); height: 168px; padding: 10px; }
  .whn-art svg { height: 100%; width: auto; }
  .whn-copy { padding: 16px 16px 18px; flex: 1; }
  .whn-title { font-size: 1.12rem; margin: 11px 0 6px; }
  .whn-text { font-size: .82rem; }
  .whn-dots { display: flex; justify-content: center; gap: 7px; padding: 12px 0 4px; }
  .whn-dots button {
    width: 6px; height: 6px; padding: 0; border: none; border-radius: 99px; background: rgba(255,255,255,.28);
    cursor: pointer; transition: width .3s var(--whn-ease), background .3s;
  }
  .whn-dots button.on { width: 22px; background: linear-gradient(90deg, #2563EB, #06b6d4, #10b981); }
  .whn-foot { text-align: center; padding: 8px 20px 18px; }
}
@media (max-width: 420px) {
  .whn-bar-open-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whn-card, .whn-card * { animation: none !important; transition: none !important; }
}

/* Match drawer: penalties and VAR decisions in the events timeline (2026-10-28). */
.mx-ev-penaltyawarded, .mx-ev-penaltymissed { color: #ea580c; }
.mx-ev-var { color: var(--accent-text); }
.mx-ev-txt { color: var(--text-dim); font-size: 11.5px; line-height: 1.45; }
body.dark .mx-ev-penaltyawarded, body.dark .mx-ev-penaltymissed { color: #fb923c; }

/* Club screen: league position after each matchday (2026-10-28). */
.tt-pos svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.tt-pos .g { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.tt-pos .yl { font: 600 9px var(--font-mono, ui-monospace, monospace); fill: var(--text-dim); text-anchor: end; }
.tt-pos .xl { font: 600 9px var(--font-mono, ui-monospace, monospace); fill: var(--text-dim); text-anchor: middle; }
.tt-pos .now { font: 800 11px var(--font-mono, ui-monospace, monospace); fill: var(--text); }
.tt-pos .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tt-pos .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.tt-pos .dot.last { stroke-width: 2; }
.tt-pos .hit { fill: transparent; }
.tt-pos .pt:hover .dot { r: 4.5; }

/* Club territory (2026-10-29): the three-thirds strip, the club panel and the Leagues table. */
.tr-strip { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; min-width: 80px; }
.tr-strip i { display: block; min-width: 2px; }
.tr-own { background: var(--border); }
.tr-mid { background: color-mix(in srgb, var(--accent) 28%, var(--surface2)); }
.tr-att { background: var(--accent); }
.tr-strip.big { height: 34px; border-radius: 10px; gap: 3px; }
.tr-strip.big i { display: grid; place-items: center; }
.tr-strip.big b { font: 800 12px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.tr-strip.big .tr-att b { color: #fff; }
.tr-pitch { margin: 8px 0 10px; }
.tr-dir { display: flex; justify-content: space-between; font: 600 9.5px var(--font-mono, ui-monospace, monospace);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.tr-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid var(--border); font-size: 12px; }
.tr-row b { font: 800 13px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.tr-row small, .tr-split small { color: var(--text-dim); font-size: 11px; }
.tr-sub { margin-top: 10px; font: 700 10px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); }
.tr-split { display: grid; grid-template-columns: 62px 1fr; gap: 3px 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.tr-split small { grid-column: 2; }
.lg-terr .tr-sort { margin: 8px 10px 6px; display: inline-flex; }
.tt-terr .tr-body { padding: 2px 10px 10px; }
.tr-lhd, .tr-lrow { display: grid; grid-template-columns: 18px minmax(0, 1.6fr) minmax(56px, 1fr) 34px 46px; gap: 7px; align-items: center; }
.tr-lhd { font: 700 9.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); padding: 0 10px 4px; border-bottom: 1px solid var(--border); }
.tr-lhd span:nth-child(n+4) { text-align: right; }
.tr-lrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-lrow .tr-pct { text-align: right; font: 800 12px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.tr-tab { text-align: right; font: 700 11.5px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.tr-tab.far { color: var(--accent-text); font-weight: 800; }
.mt-smash { display: grid; gap: 2px; margin: 10px 12px 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); }
.mt-smash:hover { border-color: var(--accent); }
.mt-smash .k { font: 700 9.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.mt-smash b { font-size: 13.5px; color: var(--text); }
.mt-smash small { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.mt-smashes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mt-smashes .mt-smash { margin: 0; }
@media (max-width: 760px) {
  .tr-lhd, .tr-lrow { grid-template-columns: 18px minmax(0, 1fr) 70px 34px 44px; gap: 6px; }
  .tr-lhd span:nth-child(3) { font-size: 0; }
  .tr-row { grid-template-columns: 1fr auto; gap: 0 10px; }
  .tr-row small { grid-column: 1 / -1; }
}

/* ═══ The club page (2026-10-29): a header that says how the club is doing, then four chapters.
   The header is dark in both themes, like the Matches screen's hero. ═══ */
.cl-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px 20px; margin: 6px 0 30px; color: #fff;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
  box-shadow: 0 24px 50px -30px rgba(15,23,42,.8); }
body.dark .cl-hero { box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.cl-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cl-crest { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 18px; background: rgba(255,255,255,.96);
  display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.cl-crest img { width: 54px; height: 54px; object-fit: contain; }
.cl-idt { display: flex; flex-direction: column; min-width: 0; }
.cl-kicker { font: 600 10.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cl-hero h1 { margin: 3px 0 4px; font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: #fff; }
.cl-mgr { font-size: 13px; color: rgba(255,255,255,.8); }
.cl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.cl-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.cl-tile b { font: 800 26px var(--font-mono, ui-monospace, monospace); letter-spacing: -.02em; line-height: 1.05; }
.cl-tile span { font-size: 12px; font-weight: 650; color: rgba(255,255,255,.88); }
.cl-tile small { font-size: 11px; color: rgba(255,255,255,.62); line-height: 1.35; }
.cl-spark { width: 100%; height: 26px; margin-top: 6px; overflow: visible; }
.cl-spark path { fill: none; stroke: #7dd3fc; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cl-spark circle { fill: #fff; }
.cl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cl-ask { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 10px 16px; cursor: pointer;
  background: #fff; color: #0b1636; font: inherit; font-size: 13px; font-weight: 750; }
.cl-ask .pv-spark { width: 16px; height: 16px; }
.cl-ask:hover { filter: brightness(.96); }
.cl-briefbtn { border-radius: 99px; padding: 9px 16px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); }
.cl-briefbtn:hover { background: rgba(255,255,255,.2); }
.cl-actnote { font-size: 11.5px; color: rgba(255,255,255,.6); }

.cl-ch { margin: 0 0 32px; }
.cl-ch-hd { margin: 0 0 12px; }
.cl-ch-hd h2 { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -.015em; color: var(--text); }
.cl-ch-hd p { margin: 4px 0 0; max-width: 76ch; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cl-card { min-width: 0; padding: 15px 16px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.cl-card.wide { grid-column: 1 / -1; }
.cl-card h3 { margin: 0; font-size: 14.5px; font-weight: 720; color: var(--text); letter-spacing: -.005em; }
.cl-card .cl-sub { margin: 3px 0 12px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.cl-card .cl-sub:last-child { margin-bottom: 0; }
.cl-none { font-size: 12.5px; color: var(--text-dim); }
.cl-card.tt-pos svg { margin-top: 0; }

/* Results: the last five as letters, then the latest games. */
.cl-form { display: flex; gap: 5px; margin: 0 0 10px; }
.cl-form i, .cl-res .wl { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 800 11px var(--font-mono, ui-monospace, monospace); font-style: normal; }
.cl-form .w, .cl-res .wl.w { background: var(--accent); color: #fff; }
.cl-form .d, .cl-res .wl.d { background: var(--surface2); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text-dim) 45%, transparent); }
.cl-form .l, .cl-res .wl.l { background: transparent; color: var(--text-dim);
  border: 1px dashed color-mix(in srgb, var(--text-dim) 60%, transparent); }
.cl-res { display: grid; grid-template-columns: 50px 16px 20px minmax(0, 1fr) auto 24px; gap: 8px; align-items: center;
  padding: 7px 2px; border-top: 1px solid var(--border); cursor: pointer; font-size: 12.5px; }
.cl-res:hover { background: var(--surface2); }
.cl-res .d { font-size: 11.5px; color: var(--text-dim); }
.cl-res .ha { font: 700 10.5px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.cl-res img { width: 20px; height: 20px; object-fit: contain; }
.cl-res .o { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.cl-res b { font: 800 13px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.cl-res .wl { width: 22px; height: 22px; font-size: 10.5px; }

/* Style bars. */
.cl-st { display: grid; grid-template-columns: 82px minmax(0, 1fr) 56px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; }
.cl-st span { color: var(--text); font-weight: 600; }
.cl-st i { display: block; height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.cl-st i b { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cl-st em { font: 800 12.5px var(--font-mono, ui-monospace, monospace); font-style: normal; text-align: right; color: var(--text); }

/* Key men: photo cards. */
.cl-km { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cl-kc { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 14px 8px 12px; text-align: center;
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; transition: transform .15s, border-color .15s; }
.cl-kc:hover { transform: translateY(-2px); border-color: var(--accent); }
.cl-kc .ph { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #e0e7ff; margin-bottom: 2px; }
.cl-kc .ph img, .cl-pl .ph img, .cl-ac .ph img { width: 100%; height: 100%; object-fit: cover; }
.cl-kc .sc { margin-top: -14px; padding: 2px 9px; border-radius: 99px; background: var(--spectrum); color: #fff;
  font: 800 11.5px var(--font-mono, ui-monospace, monospace); box-shadow: 0 0 0 2px var(--surface2); }
.cl-kc .nm { max-width: 100%; margin-top: 4px; font-size: 13px; font-weight: 720; color: var(--text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-kc .mt, .cl-kc .ln { font-size: 11px; line-height: 1.35; color: var(--text-dim); max-width: 100%; text-wrap: balance; }

/* The squad by position, most minutes first. */
.cl-squad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 22px; align-items: start; }
@media (max-width: 1180px) { .cl-squad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-grp-hd { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center;
  padding: 0 0 7px; margin: 0 0 3px; border-bottom: 1px solid var(--border); }
.cl-grp-hd b { font-size: 13.5px; color: var(--text); }
.cl-grp-hd small { font: 700 11px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.cl-pl, .cl-ac { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr) auto; gap: 9px; align-items: center;
  padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.cl-pl:hover, .cl-ac:hover { background: var(--surface2); }
.cl-pl .pos { font: 700 9.5px var(--font-mono, ui-monospace, monospace); text-align: center; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 0; }
.cl-pl .ph, .cl-ac .ph { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--surface2); }
.cl-pl .nm, .cl-ac .nm { display: flex; flex-direction: column; min-width: 0; }
.cl-pl .nm b, .cl-ac .nm b { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pl .nm small, .cl-ac .nm small { font-size: 11px; color: var(--text-dim); }
.cl-pl .sc, .cl-ac .sc { font: 800 13px var(--font-mono, ui-monospace, monospace); color: var(--accent-text); }
.cl-acs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; }
.cl-ac { grid-template-columns: 28px minmax(0, 1fr) auto; }

.cl-brief .ta-results-wrap { padding: 0; max-width: none; }
.cl-briefbtn:disabled { opacity: .7; cursor: progress; }

@media (max-width: 760px) {
  .cl-hero { padding: 18px 16px 16px; border-radius: 16px; margin-bottom: 24px; }
  .cl-crest { width: 56px; height: 56px; border-radius: 14px; }
  .cl-crest img { width: 42px; height: 42px; }
  .cl-hero h1 { font-size: 26px; }
  .cl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cl-tile { padding: 10px 12px; }
  .cl-tile b { font-size: 22px; }
  .cl-tile:first-child { grid-column: 1 / -1; }
  .cl-actions { gap: 8px; }
  .cl-ask, .cl-briefbtn { flex: 1 1 auto; justify-content: center; }
  .cl-actnote { flex-basis: 100%; }
  .cl-ch-hd h2 { font-size: 18px; }
  .cl-grid, .cl-squad { grid-template-columns: 1fr; }
  .cl-km { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .cl-km::-webkit-scrollbar { display: none; }
  .cl-kc { flex: 0 0 142px; }
}

/* Before kick-off (2026-10-29): Coming up in the Matches dock, and every game still to play as a
   line that opens into its preview (a tale of the tape, the highest standing in each line, who is
   out, the referee and the expected line-ups). */
.mt-dock { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mt-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gw-panel:not(.gw-view-next) .gw-only-next, .gw-panel.gw-view-next .gw-only-this { display: none; }

.bk-days, .bk-lgs { display: grid; gap: 12px; max-width: 980px; }
.bk-day, .bk-lg { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.bk-item + .bk-item, .mt-fxday-h + .bk-item, .mt-res-hd + .bk-item { border-top: 1px solid var(--border); }
.bk-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) 18px minmax(0, 1fr) 18px; grid-template-rows: auto auto;
  align-items: center; column-gap: 10px; row-gap: 3px; width: 100%; padding: 11px 14px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bk-line:hover { background: var(--surface2); }
.bk-item.open > .bk-line { background: var(--surface2); }
.bk-t { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px; font-weight: 700; }
.bk-t small { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.bk-h, .bk-a { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.bk-h { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; }
.bk-a { grid-column: 4; grid-row: 1; }
.bk-h span, .bk-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-h img, .bk-a img, .bk-line .mt-nocrest { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.bk-v { grid-column: 3; grid-row: 1; text-align: center; font-size: 11px; color: var(--text-dim); }
.bk-chev { grid-column: 5; grid-row: 1 / span 2; justify-self: end; width: 8px; height: 8px; border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.bk-item.open .bk-chev { transform: rotate(225deg) translate(-2px, 0); border-color: var(--accent); }
.bk-meta { grid-column: 2 / 5; grid-row: 2; text-align: center; font-size: 11px; color: var(--text-dim); }
.bk-none, .bk-off { padding: 12px 14px; font-size: 12px; color: var(--text-dim); }
.bk-off { padding: 10px 2px 0; }

.bk-card { padding: 4px 18px 16px; border-top: 1px solid var(--border); animation: mt-in .22s ease-out; }
.bk-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0 12px; }
.bk-club { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; color: var(--text);
  font: inherit; cursor: pointer; padding: 0; text-align: left; }
.bk-club.a { flex-direction: row-reverse; text-align: right; }
.bk-club img, .bk-club .mt-nocrest { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.bk-club span { display: flex; flex-direction: column; min-width: 0; }
.bk-club b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
.bk-club small { font-size: 11.5px; color: var(--text-dim); }
.bk-club:hover b { color: var(--accent-text); }
.bk-venue { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11.5px; color: var(--text-dim); max-width: 220px; }
.bk-venue small { font-size: 10.5px; margin-top: 2px; }

.bk-tape { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 190px) minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 9px 14px; }
.bk-row + .bk-row { border-top: 1px solid var(--border); }
.bk-hv { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.bk-av { display: flex; flex-direction: column; align-items: flex-start; }
.bk-lb { text-align: center; font-size: 11.5px; font-weight: 650; color: var(--text); line-height: 1.3; }
.bk-lb small { display: block; font-weight: 500; font-size: 10.5px; color: var(--text-dim); }
.bk-hv b, .bk-av b { font: 800 17px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.bk-hv b.hi, .bk-av b.hi { color: var(--accent-text); }
.bk-hv small, .bk-av small { font-size: 11px; color: var(--text-dim); }
.bk-form { margin: 0; }
.bk-form i { width: 22px; height: 22px; font-size: 10.5px; }
.bk-na { font-size: 11.5px; color: var(--text-dim); }
.bk-bands { display: block; width: 96px; height: 44px; overflow: visible; }
.bk-bands .ax { stroke: var(--border); stroke-width: 1; }
.bk-bands .f { fill: var(--accent); }
.bk-bands .g { fill: color-mix(in srgb, var(--text-dim) 55%, transparent); }

.bk-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.bk-sub b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.bk-sub small { font-size: 11.5px; color: var(--text-dim); }
.bk-best { display: grid; gap: 6px; }
.bk-brow { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; gap: 8px; }
.bk-blb { text-align: center; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); }
.bk-pl { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; }
.bk-pl:hover { border-color: var(--text-dim); }
.bk-pl.h { flex-direction: row-reverse; text-align: right; }
.bk-pl.hi { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.bk-ph { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--surface2); flex: 0 0 auto; }
.bk-ph img { width: 100%; height: 100%; object-fit: cover; }
.bk-pl .nm, .bk-out .nm { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bk-pl .nm b, .bk-out .nm b { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pl .nm small, .bk-out .nm small { font-size: 10.5px; color: var(--text-dim); }
.bk-pl em { font: 800 13px var(--font-mono, ui-monospace, monospace); font-style: normal; color: var(--text); }
.bk-pl.hi em { color: var(--accent-text); }

.bk-outs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-outc { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bk-out-hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface2); font-size: 12.5px; }
.bk-out-hd img, .bk-out-hd .mt-nocrest { width: 18px; height: 18px; object-fit: contain; }
.bk-out-hd span { margin-left: auto; font-size: 11px; color: var(--text-dim); text-align: right; }
.bk-out { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bk-out:hover { background: var(--surface2); }
.bk-out em { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; }
.bk-out em b { font: 800 13px var(--font-mono, ui-monospace, monospace); }
.bk-out em small { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.bk-out.ban .nm small { color: #dc2626; }
.bk-reg { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }

.bk-xi { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; }
.bk-xi summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 650; list-style: none; }
.bk-xi summary::-webkit-details-marker { display: none; }
.bk-xi summary::after { content: '›'; float: right; color: var(--text-dim); transition: transform .2s; }
.bk-xi[open] summary::after { transform: rotate(90deg); }
.bk-xi summary small { font-weight: 500; color: var(--text-dim); margin-left: 6px; }
.bk-xi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 0 14px 12px; }
.bk-xp { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 0; border: 0; border-top: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.bk-xp:hover span { color: var(--accent-text); }
.bk-xp em { font: 700 12px var(--font-mono, ui-monospace, monospace); font-style: normal; color: var(--text-dim); }

.bk-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.bk-ft b { color: var(--text); font-weight: 650; }
.bk-more { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 7px 13px;
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.bk-more:hover { border-color: var(--accent); color: var(--accent-text); }

/* Coming up's hero: the game to watch in each league. */
.bk-watch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bk-wc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 14px; cursor: pointer; min-width: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; text-align: center; font: inherit;
  transition: background .15s, transform .15s; }
.bk-wc:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.bk-wc .lg { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .05em; color: rgba(255,255,255,.72); white-space: nowrap; }
.bk-wc .lg img { width: 14px; height: 14px; object-fit: contain; }
.bk-wc .cr { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.bk-wc .cr img, .bk-wc .cr .mt-nocrest { width: 36px; height: 36px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 10px; padding: 4px; }
.bk-wc .cr i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.65); }
.bk-wc b { font-size: 12.5px; line-height: 1.25; max-width: 100%; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.bk-wc .why { font-size: 10.5px; color: rgba(255,255,255,.72); }
.bk-ot .bk-ot-r { font-size: 11px; color: var(--text); margin-top: 3px; }
.bk-ot .bk-ot-s { font-size: 10.5px; color: var(--text-dim); }

@media (max-width: 760px) {
  .bk-line { grid-template-columns: 46px minmax(0, 1fr) 14px minmax(0, 1fr) 12px; column-gap: 7px; padding: 10px 12px; }
  .bk-h, .bk-a { font-size: 12.5px; gap: 6px; }
  .bk-h span, .bk-a span { white-space: normal; line-height: 1.2; }
  .bk-h img, .bk-a img, .bk-line .mt-nocrest { width: 18px; height: 18px; }
  .bk-meta { grid-column: 2 / 5; text-align: left; }
  .bk-card { padding: 2px 12px 14px; }
  .bk-hd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-venue { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .bk-club img, .bk-club .mt-nocrest { width: 30px; height: 30px; }
  .bk-club b { font-size: 14px; }
  .bk-row { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px; padding: 9px 10px; }
  .bk-lb { font-size: 10.5px; }
  .bk-lb small { font-size: 9.5px; }
  .bk-bands { width: 78px; height: 36px; }
  .bk-form i { width: 18px; height: 18px; font-size: 9.5px; border-radius: 5px; }
  .bk-form { gap: 3px; }
  .bk-brow { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 6px; }
  .bk-blb { font-size: 8.5px; letter-spacing: .04em; }
  .bk-pl { padding: 5px 7px; gap: 6px; }
  .bk-pl .bk-ph { display: none; }
  .bk-pl .nm b { white-space: normal; line-height: 1.2; font-size: 12px; }
  .bk-outs { grid-template-columns: 1fr; }
  .bk-xi-cols { grid-template-columns: 1fr; }
  .bk-xi-cols > div + div { margin-top: 10px; }
  .bk-watch { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
  .bk-watch::-webkit-scrollbar { display: none; }
  .bk-wc { flex: 0 0 150px; }
  .bk-ots { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .bk-ots::-webkit-scrollbar { display: none; }
  .bk-ots .mt-pt { flex: 0 0 150px; }
}

/* The top of Matches (2026-10-29): Results / Fixtures, then the league row. */
.mt-nav { display: flex; flex-direction: column; gap: 12px; }
.mt-when { margin: 0; }
.mt-when .pd-mode-btn { padding: 8px 26px; font-size: 14px; font-weight: 650; }
.mt-where { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.mt-where::-webkit-scrollbar { display: none; }
.mt-lgc { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 8px 14px 11px; margin-bottom: -1px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text); font: inherit; text-align: left;
  transition: border-color .15s, color .15s; }
.mt-lgc:hover { border-bottom-color: var(--border); }
.mt-lgc.active { border-bottom-color: var(--accent); }
.mt-lgc-ic { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; }
.mt-lgc-ic img { width: 24px; height: 24px; object-fit: contain; }
.mt-lgc-ic svg { width: 20px; height: 20px; color: var(--accent-text); }
.mt-lgc-t { display: flex; flex-direction: column; }
.mt-lgc-t b { font-size: 13px; font-weight: 650; white-space: nowrap; }
.mt-lgc.active .mt-lgc-t b { color: var(--accent-text); }
.mt-lgc-t small { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 760px) {
  #mt-dock { padding: 2px 16px 0; }
  .mt-nav { gap: 10px; }
  .mt-when .pd-mode-btn { padding: 8px 12px; }
  .mt-where { margin: 0 -16px; padding: 0 16px; }
  .mt-lgc { padding: 6px 10px 10px; gap: 7px; }
  .mt-lgc-ic, .mt-lgc-ic img { width: 22px; height: 22px; }
}
.bk-skel { padding: 12px 14px; }
.bk-skel + .bk-skel { border-top: 1px solid var(--border); }
.bk-skel .skel { display: block; height: 34px; border-radius: 8px; }

/* Expected line-ups by line, names only (2026-10-29). */
.bk-xt { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-size: 12.5px; }
.bk-xt img, .bk-xt .mt-nocrest { width: 18px; height: 18px; object-fit: contain; }
.bk-xt span { margin-left: auto; font: 600 11px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.bk-xl { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0;
  border-top: 1px solid var(--border); }
.bk-xl em { font-style: normal; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim); }
.bk-xl > span { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.bk-xn { border: 0; background: none; padding: 0; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.bk-xn:hover { color: var(--accent-text); }
.bk-pl .nm b { white-space: normal; line-height: 1.25; }
.bk-blb { font-size: 9.5px; }
.bk-pl .nm small.bk-isout { color: #dc2626; font-weight: 600; }
.bk-out em.none small:first-child { color: var(--text); font-weight: 600; }

/* When the score changed (2026-10-29): the club page's card. */
.cl-gs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-gs-b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface2);
  border: 1px solid var(--border); }
.cl-gs-b .k { font: 700 9.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.cl-gs-b.drop .k { color: var(--text-dim); }
.cl-gs-b b { font-size: 20px; font-weight: 780; letter-spacing: -.01em; color: var(--text); }
.cl-gs-b small { font-size: 12px; color: var(--text-dim); }
.cl-gs-b em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text); margin-top: 2px; }
@media (max-width: 760px) {
  .cl-gs { grid-template-columns: 1fr; }
  .lg-terr .tr-sort { width: calc(100% - 20px); box-sizing: border-box; }
}

/* ── Ask bar names (2026-10-30): players, clubs and leagues to open, above the question.
   The highlighted row (.on) is what Enter does, marked with the return key. ── */
#ask-sheet .alk { gap: 11px; padding: 7px 10px; }
#ask-sheet .alk.on { background: var(--accent-dim); color: var(--text); }
#ask-sheet .alk + .ask-sheet-lbl { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.alk-ic { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; overflow: hidden; }
.alk-ph { border-radius: 50%; background: var(--surface2); }
.alk-ph img { width: 100%; height: 100%; object-fit: cover; }
.alk-cr img { width: 24px; height: 24px; object-fit: contain; }
.alk-lg { border-radius: var(--r-sm); border: 1px solid var(--border); font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-dim); }
.alk-sp { color: var(--accent-text); }
.alk-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.alk-t b { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alk-t small { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.alk-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
#ask-sheet .alk.on .alk-k::after { content: '\21B5'; font-size: 13px; letter-spacing: 0; color: var(--accent-text); }
@media (max-width: 700px) {
  #ask-sheet { max-height: calc(100vh - 140px); overflow-y: auto; }
  #ask-sheet .alk { padding: 9px 8px; }
  #ask-sheet .alk.on .alk-k::after { content: none; }
}

/* In the table (2026-10-30): the club among its neighbours on its club page, with the table's
   European and relegation places as a coloured edge. */
.cl-tb { --z-cl: var(--accent); --z-el: #d97706; --z-co: #0f9d58; --z-rel: #d93a49;
  display: flex; flex-direction: column; gap: 2px; }
body.dark .cl-tb, body.dark .cl-tb-key { --z-el: #f0a94a; --z-co: #34c77b; --z-rel: #ff6b78; }
.cl-tb-key { --z-cl: var(--accent); --z-el: #d97706; --z-co: #0f9d58; --z-rel: #d93a49; }
.cl-tb-row { position: relative; display: grid; align-items: center; gap: 8px; padding: 7px 10px 7px 12px;
  grid-template-columns: 20px 20px minmax(0, 1fr) repeat(4, 22px) 30px 28px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--text); transition: background .12s; }
.cl-tb-row:not(.hd):not(.me):hover { background: var(--surface2); }
.cl-tb-row::before { content: ''; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px;
  background: transparent; }
.cl-tb-row.z-cl::before, .cl-tb-key .z-cl i { background: var(--z-cl); }
.cl-tb-row.z-clq::before, .cl-tb-key .z-clq i { background: var(--z-cl); opacity: .5; }
.cl-tb-row.z-el::before, .cl-tb-key .z-el i { background: var(--z-el); }
.cl-tb-row.z-co::before, .cl-tb-key .z-co i { background: var(--z-co); }
.cl-tb-row.z-po::before, .cl-tb-key .z-po i { background: var(--z-rel); opacity: .5; }
.cl-tb-row.z-rel::before, .cl-tb-key .z-rel i { background: var(--z-rel); }
.cl-tb-row.hd { cursor: default; padding-top: 0; padding-bottom: 6px; border-radius: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 2px; font: 700 10px var(--font-mono, ui-monospace, monospace); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.cl-tb-row.me { cursor: default; background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-tb-row.me .n { font-weight: 760; }
.cl-tb-row .p { font: 700 12px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); text-align: right; }
.cl-tb-row.me .p { color: var(--accent-text); }
.cl-tb-row .cr { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.cl-tb-row .cr img { width: 18px; height: 18px; object-fit: contain; }
.cl-tb-row .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-tb-row .v { font: 600 12px var(--font-mono, ui-monospace, monospace); text-align: right; color: var(--text-dim);
  font-variant-numeric: tabular-nums; }
.cl-tb-row.hd .v { font-weight: 700; font-size: 10px; }
.cl-tb-row b.v { font-weight: 800; font-size: 13px; color: var(--text); }
.cl-tb-gap { padding: 0 0 0 42px; line-height: 10px; font-size: 13px; letter-spacing: .2em; color: var(--text-muted); }
.cl-tb-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 11px; color: var(--text-dim); }
.cl-tb-key span { display: inline-flex; align-items: center; gap: 6px; }
.cl-tb-key i { width: 3px; height: 12px; border-radius: 2px; }
.cl-tb-all { margin: 12px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 650 12.5px var(--font); color: var(--accent-text); }
.cl-tb-all:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .cl-tb-row { grid-template-columns: 20px 20px minmax(0, 1fr) 22px 30px 28px; gap: 7px; padding-right: 8px; }
  .cl-tb-row .v.w { display: none; }
}
/* Beside Results, the score card's two blocks stack. */
.cl-card:not(.wide) > .cl-gs { grid-template-columns: 1fr; }

/* Games missed (2026-10-30): the club page's who-is-out rows with the league games each has
   missed, and the season's games lost to injury and suspension. */
.cl-outs { display: flex; flex-direction: column; }
.cl-out-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--border); }
.cl-out-row:first-child { border-top: 0; padding-top: 2px; }
.cl-out-row .nm { display: flex; flex-direction: column; min-width: 0; }
.cl-out-row .nm b { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-out-row .nm small { font-size: 11.5px; color: var(--text-dim); }
.cl-out-row .ban, .cl-ab-p .ban { color: #b45309; }
body.dark .cl-out-row .ban { color: #f0a94a; }
.cl-out-row .ms { font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--accent-dim); color: var(--accent-text); }
.cl-ab-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cl-ab-hd b { font-size: 28px; font-weight: 780; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.cl-ab-hd span { font-size: 12.5px; color: var(--text-dim); }
.cl-ab-hd em { font-style: normal; font-weight: 650; color: var(--text); }
.cl-ab-tot { margin: 5px 0 10px; font-size: 12px; color: var(--text-dim); }
.cl-ab-ps { display: flex; flex-direction: column; gap: 2px; }
.cl-ab-p { display: grid; grid-template-columns: 26px minmax(0, 1fr) 72px 22px; gap: 9px; align-items: center;
  padding: 5px 4px; border-radius: 8px; cursor: pointer; }
.cl-ab-p:hover { background: var(--surface2); }
.cl-ab-p .ph { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--surface2); }
.cl-ab-p .ph img { width: 100%; height: 100%; object-fit: cover; }
.cl-ab-p .nm { display: flex; flex-direction: column; min-width: 0; }
.cl-ab-p .nm b { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ab-p .nm small { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ab-p .bar { height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.cl-ab-p .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cl-ab-p .bar i.ban { background: #d97706; }
.cl-ab-p b.n { font: 800 13px var(--font-mono, ui-monospace, monospace); text-align: right; color: var(--text); }
.cl-ab-also { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.cl-ab-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 760px) {
  .cl-ab-p { grid-template-columns: 26px minmax(0, 1fr) 48px 20px; gap: 8px; }
  .cl-ab-p .nm small { white-space: normal; }
}
.lg-av .av-srow { cursor: pointer; }
.lg-av .av-srow .val { font: 800 13px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.lg-av .av-hd { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 2px 10px 4px;
  font: 700 9.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.cl-ab-how { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface2); font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
.cl-ab-how b { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }

/* ── Your club (2026-10-31): the followed club's band at the top of Home, the "Follow your club"
   picker, and the Follow button in a club page's header. The header is the club page's hero. ── */
#yc-slot:empty { display: none; }
.yc { margin: 4px 0 22px; }
.yc-hero.cl-hero { margin: 0 0 12px; padding: 16px 20px; }
.yc-hero .cl-crest { width: 56px; height: 56px; border-radius: 14px; }
.yc-hero .cl-crest img { width: 42px; height: 42px; }
.yc-hero h1 { font-size: 26px; margin: 2px 0 3px; }
.yc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.yc-kick { display: flex; align-items: center; gap: 6px; font: 600 10px var(--font-mono, ui-monospace, monospace); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.7); }
.yc-kick i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.yc-stand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.88); }
.yc-stand b { font: 800 15px var(--font-mono, ui-monospace, monospace); color: #fff; }
.yc-mgr { opacity: .75; }
.yc-form { display: inline-flex; gap: 3px; }
.yc-form i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 800 9.5px var(--font-mono, ui-monospace, monospace); font-style: normal; }
.yc-form .w { background: #2563eb; color: #fff; }
.yc-form .d { background: rgba(255,255,255,.22); color: #fff; }
.yc-form .l { color: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.yc-acts { display: flex; gap: 8px; }
.yc-acts .cl-briefbtn { padding: 7px 13px; font-size: 12.5px; }
.yc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.yc-grid.solo .yc-col { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.yc-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.yc .cl-card { padding: 14px 15px 15px; }
.yc-k { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font: 650 10px var(--font-mono, ui-monospace, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.yc-k a { color: var(--accent-text); letter-spacing: .04em; cursor: pointer; }
.yc-when { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.yc-when b { color: var(--text); font-weight: 700; }
.yc-tie { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; margin: 4px 0 12px; }
.yc-tie .t { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.yc-tie img { width: 44px; height: 44px; object-fit: contain; }
.yc-tie b { font-size: 13.5px; font-weight: 750; line-height: 1.2; color: var(--text); }
.yc-tie small { font-size: 11px; color: var(--text-dim); }
.yc-tie .v { font: 700 12px var(--font-mono, ui-monospace, monospace); color: var(--text-muted); }
.yc-tie .sc { font: 800 26px var(--font-mono, ui-monospace, monospace); color: var(--text); }
.yc-ft { font-size: 11px; color: var(--text-dim); }
.yc-live { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--font-mono, ui-monospace, monospace); color: #dc2626; }
.yc-live i { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; animation: ycPulse 1.4s ease-in-out infinite; }
@keyframes ycPulse { 50% { opacity: .3; } }
.yc-tn { margin: 0; padding: 9px 0 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.yc-tn b { color: var(--text); font-weight: 700; }
.yc-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; border: 0;
  background: var(--accent); color: #fff; font: 700 12.5px var(--font); cursor: pointer; }
.ycp { margin-top: 12px; }
.ycp-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ycp-hd b { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.ycp-hd small { font-size: 10.5px; color: var(--text-muted); text-align: right; }
.ycp-pitch { position: relative; border-radius: 12px; overflow: hidden; padding: 8px 6px; background: linear-gradient(180deg, #14532d, #166534 50%, #14532d); }
.ycp-pitch::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1px solid rgba(255,255,255,.25); }
.ycp-pitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.ycp-half { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.ycp-half.them { padding-bottom: 14px; }
.ycp-half.us { padding-top: 14px; }
.ycp-half em { font: 700 9.5px var(--font-mono, ui-monospace, monospace); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; }
.ycp-row { display: flex; justify-content: space-evenly; gap: 2px; }
.ycp-row span { min-width: 0; max-width: 25%; padding: 2px 5px; border-radius: 99px; font-size: 10.5px; font-weight: 650; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: rgba(255,255,255,.92); color: #0b1636; cursor: pointer; }
.ycp-half.them .ycp-row span { background: rgba(11,22,54,.85); color: #fff; }
.yc .cl-tb-row { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; grid-template-columns: 20px 20px minmax(0, 1fr) 24px 28px; }
.yc-race { margin: 0 0 8px; font-size: 12.5px; font-weight: 650; color: var(--text); line-height: 1.4; }
.yc .cl-tb-row.me { cursor: default; }
.yc-gih { color: var(--accent-text); font-size: 10px; }
/* A line between two rows of the table: room above for its label and below for the next row's
   edge, so "Europa League places" never sits on the followed club's highlighted row. */
.yc-ln { position: relative; height: 0; margin: 11px 0 6px; border-top: 1.5px dashed var(--text-muted); opacity: .55; }
.yc-ln span { position: absolute; right: 0; top: -8px; padding: 0 0 0 6px; background: var(--surface); font: 600 9.5px var(--font-mono, ui-monospace, monospace);
  letter-spacing: .05em; color: var(--text-dim); text-transform: uppercase; }
.yc-res { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font: 800 11px var(--font-mono, ui-monospace, monospace); }
.yc-res.w { background: var(--accent); color: #fff; }
.yc-res.d { background: var(--surface2); color: var(--text); }
.yc-res.l { color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border); }
.yc-fx { display: flex; flex-direction: column; }
.yc-fx > div { display: grid; grid-template-columns: 54px 18px minmax(0, 1fr) 22px 34px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text); cursor: pointer; }
.yc-fx > div:first-child { border-top: 0; }
.yc-fx small { font: 600 11px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.yc-fx img { width: 18px; height: 18px; object-fit: contain; }
.yc-fx .ha { font: 700 10.5px var(--font-mono, ui-monospace, monospace); color: var(--text-muted); text-align: center; }
.yc-fx > div { grid-template-columns: 54px 18px minmax(0, 1fr) 22px 58px; }
.yc-fx .op { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font: 700 11px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); text-align: right; }
.yc-fx .pl .op { color: var(--text); font-size: 12px; }
.yc-fx .op .yc-res { width: 18px; height: 18px; border-radius: 5px; font-size: 9.5px; font-style: normal; }
.yc-fx-sep { margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--border); font: 650 10px var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.yc-fx-sep + div { border-top: 0; }
/* The club's news, a strip under the banner: up to three headlines sharing one row (one story
   takes the whole width, so a quiet week never reads as a row two-thirds empty), a swipeable row
   on phones. */
.yc-news { margin-bottom: 10px; }
.yc-nws { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.yc-nw { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0;
  font-size: 12.5px; line-height: 1.35; color: var(--text); cursor: pointer; }
.yc-nw + .yc-nw { border-left: 1px solid var(--border); padding-left: 14px; }
.yc-nw img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--surface2); }
.yc-nw span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.yc-nw:hover span { color: var(--accent-text); }
.yc-nw small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-muted); }
.yc-wait, .ycf-wait { padding: 18px; font-size: 13px; color: var(--text-dim); }
.ycf { position: relative; border-radius: 18px; padding: 18px 20px; margin: 4px 0 22px; background: var(--surface); border: 1px solid var(--border); }
.ycf h2 { margin: 0; font-size: 18px; font-weight: 780; letter-spacing: -.01em; color: var(--text); }
.ycf p { margin: 4px 0 12px; font-size: 13px; color: var(--text-dim); max-width: 70ch; }
.ycf-x { position: absolute; top: 14px; right: 16px; font: 600 12px var(--font); color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.ycf-lgs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ycf-lgs button { font: 650 12px var(--font); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); cursor: pointer; }
.ycf-lgs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.ycf-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.ycf-c { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font: 500 10.5px var(--font); text-align: center; color: var(--text-dim); line-height: 1.2; }
.ycf-c:hover { border-color: var(--accent); color: var(--text); }
.ycf-c img { width: 30px; height: 30px; object-fit: contain; }
.cl-follow { display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 9px 15px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.cl-follow:hover { background: rgba(255,255,255,.2); }
.cl-follow.on { background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.6); }
.cl-follow svg { width: 15px; height: 15px; }
.cl-follow:disabled { opacity: .7; cursor: progress; }
@media (max-width: 1100px) {
  .ycf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .yc-hero.cl-hero { padding: 14px; border-radius: 16px; }
  .yc-hero h1 { font-size: 21px; }
  .yc-grid, .yc-grid.solo .yc-col { grid-template-columns: 1fr; }
  .yc-nws { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .yc-nws::-webkit-scrollbar { display: none; }
  .yc-nw { flex: 0 0 84%; scroll-snap-align: start; }
  .yc-nw + .yc-nw { border-left: 0; padding-left: 0; }
  .yc-nw:only-child { flex-basis: 100%; }
  .ycf { padding: 16px 14px; }
  /* Phones: the crests as two rows that swipe sideways (about 230 pixels), not five rows
     filling most of the first screen. */
  .ycf-grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: 84px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -14px; padding: 0 14px 2px; scroll-padding: 0 14px; }
  .ycf-grid::-webkit-scrollbar { display: none; }
  .ycf-c { scroll-snap-align: start; }
  .yc-acts .cl-briefbtn { padding: 6px 11px; }
}
/* The band in Home's own format (Mo, 31 Oct: "fit with the rest"): the same 16px gutter as the
   board and the terminal (10px on phones), their 10px gaps, the panels' radius and grey header
   strip, and each row's panels one height. */
#yc-slot { margin: 14px 16px 6px; }
.yc, .ycf { margin: 0; }
.yc-hero.cl-hero { border-radius: 16px; margin-bottom: 10px; }
.yc-grid { gap: 10px; align-items: stretch; }
.yc-col { gap: 10px; }
.yc-col > .cl-card:last-child { flex: 1; }
.yc .cl-card { display: flex; flex-direction: column; padding: 0 12px 12px; border-radius: var(--r-sm); overflow: hidden; }
.yc .yc-k { align-items: center; margin: 0 -12px 10px; padding: 7px 10px; background: var(--surface2); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .08em; color: var(--text-dim); }
.yc .yc-k > span + span { color: var(--text-muted); letter-spacing: .05em; }
.yc .yc-k a { font-size: var(--text-xs); letter-spacing: .05em; }
.yc .cl-card > .yc-btn { align-self: flex-start; margin-top: auto; }
.yc .cl-card > .ycp + .yc-btn { margin-top: 12px; }
.ycf { border-radius: var(--r-sm); }
@media (max-width: 760px) {
  #yc-slot { margin: 10px 10px 4px; }
  .yc-hero.cl-hero { border-radius: 14px; }
}
/* Before the game (no line-ups yet): the tie's three columns carried down, home on the left, the
   measure in the middle. */
.ycv .ycp-hd { margin: 2px 0 2px; }
.ycv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; color: var(--text); }
.ycv-row > div { min-width: 0; }
.ycv-row > span { font: 600 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ycv-row b { font-weight: 750; }
.ycv-row small { font-size: 11px; color: var(--text-dim); }
.ycv-form { display: inline-flex; gap: 3px; }
.ycv-form .yc-res { width: 17px; height: 17px; border-radius: 5px; font-size: 9px; font-style: normal; }
.ycv-man { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; border: 0; background: none; padding: 0;
  cursor: pointer; font: inherit; color: var(--text); }
.ycv-man img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface2); flex-shrink: 0; }
.ycv-man span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ycv-man:hover span { color: var(--accent-text); }
.ycv-man b { flex-shrink: 0; }
.ycv-man em { flex-shrink: 0; font: 700 9px var(--font-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: #dc2626; }
.ycv-note { margin: 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.yc .cl-card > .ycv { margin-bottom: 12px; }
@media (max-width: 760px) {
  .ycv-row { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 6px; }
  .ycv-row > span { font-size: 8.5px; white-space: normal; line-height: 1.25; }
  .ycv-man img { display: none; }
}

/* The club page's territory panel: "Against last season" in one plain line under the two strips. */
.tr-vs { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

/* The followed club across the app (2026-11-02): its game on Matches and its rows on Leagues carry
   an accent edge, and a result card a "Your club" tag. */
.mt-card.mt-mine { box-shadow: inset 0 0 0 2px var(--accent); }
.mt-card.mt-mine:hover { box-shadow: inset 0 0 0 2px var(--accent), 0 14px 30px -18px rgba(15,23,42,.45); }
.mt-mine-tag { align-self: flex-start; display: inline-flex; margin: 0; padding: 2px 8px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-text); font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.mt-fx.mt-mine, .bk-item.mt-mine > .bk-line, .mt-res-row.mt-mine { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.mt-res-row.mt-mine span { font-weight: 750; }
.mt-fx.mt-mine span, .bk-item.mt-mine .bk-h span, .bk-item.mt-mine .bk-a span { font-weight: 750; }
.term-mini tr.lg-mine td { background: var(--accent-soft); font-weight: 750; }
.term-mini tr.lg-mine td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tr-lrow.lg-mine { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tr-lrow.lg-mine .nm { font-weight: 750; }

/* What's new in the top bar, once Home's notes are cleared: a small rainbow pill beside the chat
   button, the spark alone on phones. */
#masthead .whn-mast { margin: 0; flex-shrink: 0; padding: 5px 12px 5px 10px; font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) {
  #masthead .whn-mast { padding: 0; width: 30px; height: 30px; justify-content: center; }
  #masthead .whn-mast .t { display: none; }
}
/* Phones put the Feedback icon in the top bar (fixed, 46px from the right): the spark sits just
   left of it, not under it. */
@media (max-width: 720px) { #masthead .whn-mast { margin-right: 38px; } }

/* Confirmed line-ups (2026-10-31, Mo): once the clubs announce their teams, a bold green mark with a
   live dot says so (_luOk()), so an announced XI never reads like the predicted one. */
.lu-ok { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px var(--font); color: var(--success);
         text-transform: none; letter-spacing: 0; white-space: nowrap; }
.lu-ok i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.lu-ok i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success);
                  animation: lu-ping 1.8s ease-out infinite; }
@keyframes lu-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lu-ok i::after { animation: none; } }
.ycp-hd.on { align-items: center; }
.ycp-hd.on b { font-size: 14px; font-weight: 800; color: var(--text); }
.mx-sect-hd .lu-ok { margin-left: 12px; }
.bk-xi summary .lu-ok { font-size: 13px; }

/* ═══ The player page (W4, 2026-11-02): a dark hero, then chapters in the club page's grammar
   (.cl-ch, .cl-card), drawn by loadPlayerPage(). Everything new is prefixed pp-; the club page's
   classes are only ever adjusted under .pp. ═══ */
#ph-profile.pp-on { background: var(--bg); }
.pp { max-width: 1180px; margin: 0 auto; padding: 14px 20px 72px; }
.pp-ch { scroll-margin-top: 58px; }
.pp-crumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.pp-crumb > button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font: 650 13px var(--font); color: var(--text-dim); }
.pp-crumb > button svg { width: 15px; height: 15px; }
.pp-crumb > button:hover { color: var(--text); }
.pp-crumb > span { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.pp-crumb > span i { font-style: normal; margin: 0 7px; opacity: .5; }
.pp-cr-l { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pp-cr-l:hover { color: var(--text); text-decoration: underline; }

/* Hero */
.pp-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 26px 22px; margin: 0 0 18px; color: #fff;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
  box-shadow: 0 24px 50px -30px rgba(15,23,42,.8); }
body.dark .pp-hero { box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.pp-hero-sk { min-height: 330px; }
.pp-hero-sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  background-size: 200% 100%; animation: pp-shine 1.4s linear infinite; }
@keyframes pp-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.pp-err { padding: 40px 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.85); }
.pp-wm { position: absolute; right: -60px; top: -40px; width: 380px; height: 380px; object-fit: contain; opacity: .07;
  filter: grayscale(1) brightness(3); pointer-events: none; }
.pp-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pp-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.pp-ph { position: relative; flex: 0 0 auto; width: 116px; height: 116px; border-radius: 50%; padding: 3px;
  background: var(--spectrum); box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.pp-ph > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e8edf6; display: block; }
.pp-ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #1c2b57; color: #fff;
  font: 800 28px var(--font-display); letter-spacing: .02em; }
.pp-crest { position: absolute; right: -4px; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.pp-crest img { width: 27px; height: 27px; object-fit: contain; }
.pp-idt { min-width: 0; }
.pp-kicker { font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.pp-hero h1 { margin: 4px 0 8px; font: 800 40px var(--font-display); letter-spacing: -.025em; line-height: 1.02; color: #fff; }
.pp-facts, .pp-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13.5px; color: rgba(255,255,255,.9); }
.pp-deal { margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.pp-deal em { font-style: normal; color: #7dd3fc; margin-left: 6px; }
.pp-facts i, .pp-deal i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin: 0 9px; }
.pp-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.pp-act { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; cursor: pointer;
  font: 650 12.5px var(--font); color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.pp-act svg { width: 15px; height: 15px; }
.pp-act:hover { background: rgba(255,255,255,.18); }
.pp-act.on { background: #fff; color: #0b1636; border-color: #fff; }
.pp-act.on svg { fill: #f59e0b; stroke: #f59e0b; }
.pp-note { position: relative; margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.78); }
.pp-status { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.pp-status:empty { display: none; }
.pp-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 12px; font: 400 12.5px var(--font);
  color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
button.pp-pill { cursor: pointer; text-align: left; }
button.pp-pill:hover { background: rgba(255,255,255,.14); }
.pp-pill .k { font: 700 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #7dd3fc; }
.pp-pill img { width: 18px; height: 18px; object-fit: contain; background: #fff; border-radius: 50%; padding: 1px; }
.pp-pill b { font-weight: 700; color: #fff; }
.pp-pill b.ok { color: #6ee7b7; } .pp-pill b.bad { color: #fca5a5; } .pp-pill .dim { color: rgba(255,255,255,.6); }
.pp-pill svg { width: 13px; height: 13px; opacity: .7; }
.pp-pill > i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.pp-pill.out { color: #fecaca; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); }
.pp-pill.ban { color: #fde68a; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.45); }
.pp-pill.ban > i { background: #f59e0b; }
.pp-pill.reg { color: rgba(255,255,255,.85); }
.pp-pill.reg > i { background: rgba(255,255,255,.5); }

.pp-tiles { position: relative; display: grid; grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pp-tiles.n4 { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); }
.pp-tiles.n3 { grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr)); }
.pp-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 15px 14px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.pp-tile > b { font: 800 30px var(--font-mono); letter-spacing: -.03em; line-height: 1.02; }
.pp-tile > b small { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: 0; }
.pp-tile > b.sm { font: 800 21px var(--font-display); letter-spacing: -.01em; }
.pp-tile > span { font-size: 12.5px; font-weight: 650; color: rgba(255,255,255,.9); }
.pp-tile > small { font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.35; }
.pp-tile.rank { background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(6,182,212,.18)); border-color: rgba(125,211,252,.4); }
.pp-tile.rank > b { font-size: 34px; }
.pp-track { position: relative; display: block; height: 6px; margin: 4px 0 3px; border-radius: 3px; background: rgba(255,255,255,.14); }
.pp-track .mid { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: rgba(255,255,255,.4); }
.pp-track .dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(125,211,252,.45); }
.pp-tile > b.pp-rt { display: inline-block; align-self: flex-start; padding: 1px 10px 2px; border-radius: 99px; background: var(--spectrum); font-size: 26px; }

.pp-ask { position: relative; margin-top: 16px; }
.pp-say { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 16px; cursor: text;
  background: linear-gradient(#0d1a40, #0d1a40) padding-box, var(--spectrum) border-box; border: 1.5px solid transparent;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 14px 30px -18px rgba(6,182,212,.6); }
.pp-say .pv-spark { width: 20px; height: 20px; flex: 0 0 auto; }
.pp-say input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font: 400 15px var(--font); color: #fff; }
.pp-say input::placeholder { color: rgba(255,255,255,.62); }
.pp-say > button { padding: 9px 18px; border: 0; border-radius: 11px; cursor: pointer; background: #fff; color: #0b1636; font: 750 13px var(--font); }
.pp-say > button:hover { filter: brightness(.95); }
.pp-try { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
.pp-try > span { font: 700 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-right: 3px; }
.pp-try button { padding: 6px 12px; border-radius: 99px; cursor: pointer; font: 600 12.5px var(--font);
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); }
.pp-try button:hover { background: rgba(255,255,255,.15); }

/* In the news, the chapter jumps */
.pp-news { margin: 0 0 14px; }
.pp-news-hd { font: 700 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px; }
.pp-news-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-nw { display: flex; gap: 11px; align-items: center; padding: 8px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; color: var(--text); text-align: left; font: inherit; }
.pp-nw:hover { border-color: var(--text-dim); }
.pp-nw .im { flex: 0 0 auto; width: 76px; height: 54px; border-radius: 8px; background: var(--surface2) center/cover no-repeat; }
.pp-nw .tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-nw b { font-size: 12.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-nw small { font-size: 11px; color: var(--text-dim); }
.pp-jump { display: flex; gap: 6px; margin: 4px 0 22px; overflow-x: auto; scrollbar-width: none; }
.pp-jump button { flex: 0 0 auto; padding: 7px 13px; border-radius: 99px; cursor: pointer; font: 600 12.5px var(--font); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); }
.pp-jump button:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.pp-warn { color: #b45309 !important; }

/* This season */
.pp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-mcard { overflow: hidden; }
.pp-mchart { position: relative; margin-top: 6px; }
.pp-mcols { position: relative; display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding: 0 0 2px; scrollbar-width: thin; }
.pp-mc { flex: 1 0 52px; max-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 0 4px; border: 0;
  background: none; cursor: pointer; font: inherit; color: var(--text); border-radius: 10px; }
.pp-mc:hover { background: var(--surface2); }
.pp-mc .mk { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 14px; }
.pp-mc .mk i, .pp-key i.g, .pp-key i.a { display: block; width: 9px; height: 9px; border-radius: 50%; }
.pp-mc .mk i.g, .pp-key i.g { background: #0f172a; box-shadow: 0 0 0 2px var(--surface); }
body.dark .pp-mc .mk i.g, body.dark .pp-key i.g { background: #fff; }
.pp-mc .mk i.a, .pp-key i.a { background: transparent; border: 2px solid var(--accent); box-sizing: border-box; }
.pp-mc .bx { display: flex; align-items: flex-end; justify-content: center; height: 132px; width: 100%; }
.pp-mc .bar { width: 68%; border-radius: 7px 7px 3px 3px; transform-origin: bottom; animation: pp-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
@keyframes pp-grow { from { transform: scaleY(0); } }
.pp .bar.hi { background: linear-gradient(180deg, #2563EB, #06b6d4); }
.pp .bar.md { background: color-mix(in srgb, #2563EB 55%, var(--surface2)); }
body.dark .pp .bar.md { background: color-mix(in srgb, #3b82f6 62%, var(--surface2)); }
.pp .bar.lo { background: color-mix(in srgb, var(--text-dim) 35%, var(--surface2)); }
.pp-mc .ghost { width: 68%; border-radius: 7px 7px 3px 3px; border: 1.5px dashed color-mix(in srgb, var(--text-dim) 45%, transparent); }
.pp-mc .v { font: 800 12.5px var(--font-mono); }
.pp-mc .v.dim { font: 600 10.5px var(--font); color: var(--text-dim); }
.pp-mc .mn { display: block; width: 68%; height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.pp-mc .mn i { display: block; height: 100%; background: color-mix(in srgb, var(--text) 55%, transparent); }
.pp-mc .cr { width: 22px; height: 22px; display: grid; place-items: center; margin-top: 3px; }
.pp-mc .cr img { width: 20px; height: 20px; object-fit: contain; }
.pp-mc .ha { font: 700 9.5px var(--font-mono); color: var(--text-dim); }
.pp-mc .res { font: 800 10px var(--font-mono); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; }
.pp-mc .res.W { background: var(--accent); color: #fff; }
.pp-mc .res.D { background: var(--surface2); color: var(--text); border: 1px solid color-mix(in srgb, var(--text-dim) 45%, transparent); }
.pp-mc .res.L { color: var(--text-dim); border: 1px dashed color-mix(in srgb, var(--text-dim) 60%, transparent); }
.pp-avg { position: absolute; left: 0; width: max(100%, var(--w, 100%)); height: 0; border-top: 1.5px dashed color-mix(in srgb, #06b6d4 70%, transparent); pointer-events: none; }
.pp-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11.5px; color: var(--text-dim); }
.pp-key span { display: inline-flex; align-items: center; gap: 6px; }
.pp-key i.bar { display: block; width: 12px; height: 10px; border-radius: 3px; animation: none; }
.pp-key i.mn { display: block; width: 18px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 55%, transparent); }
.pp-key i.avg { display: block; width: 20px; height: 0; border-top: 1.5px dashed #06b6d4; }
.pp-sn { padding: 10px 0 2px; border-top: 1px solid var(--border); }
.pp-sn:first-of-type { border-top: 0; padding-top: 0; }
.pp-sn-t { font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.pp-sn-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-sn-g div { display: flex; flex-direction: column; min-width: 0; padding-bottom: 8px; }
.pp-sn-g b { font: 800 20px var(--font-mono); letter-spacing: -.02em; color: var(--text); }
.pp-sn-g span { font-size: 12px; color: var(--text); font-weight: 600; }
.pp-sn-g small { font-size: 11px; color: var(--text-dim); }
.pp-where-b { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.pp-pitch { width: 150px; height: 225px; display: block; }
.pp-pitch-dir { font: 700 7px var(--font-mono); letter-spacing: .14em; fill: rgba(255,255,255,.45); }
.pp-slot { transform-box: fill-box; transform-origin: center; animation: pp-pop .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--d); }
@keyframes pp-pop { from { opacity: 0; transform: scale(.4); } }
.pp-slot-n { font: 800 10px var(--font-mono); fill: #0b1636; }
.pp-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-roles li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; }
.pp-roles b { font-size: 14px; color: var(--text); }
.pp-roles span { font: 800 13px var(--font-mono); color: var(--text); text-align: right; }
.pp-roles small { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); }
.pp-roles li.sub b, .pp-roles li.sub span { color: var(--text-dim); }
.pp-nx { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; font-weight: 700; font-size: 14px; color: var(--text); }
.pp-nx span { display: inline-flex; align-items: center; gap: 8px; }
.pp-nx img { width: 26px; height: 26px; object-fit: contain; }
.pp-nx em { font-style: normal; color: var(--text-dim); font-weight: 600; font-size: 12px; }
.pp-nx-s { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.pp-nx-s.ok { color: #059669; font-weight: 650; } .pp-nx-s.bad { color: #dc2626; font-weight: 650; }
body.dark .pp-nx-s.ok { color: #34d399; } body.dark .pp-nx-s.bad { color: #f87171; }
.pp-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: 650 12.5px var(--font); color: var(--accent-text); }
.pp-link svg { width: 13px; height: 13px; }

/* Where he ranks */
.pp-ranks { padding-bottom: 8px; }
.pp-rk-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; }
.pp-rk-sum p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pp-rk-key { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-dim); }
.pp-rk-key span { display: inline-flex; align-items: center; gap: 6px; }
.pp-rk-key i { display: block; width: 10px; height: 10px; border-radius: 50%; }
.pp-rk-key i.me { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.pp-rk-key i.o { background: color-mix(in srgb, var(--text-dim) 32%, transparent); }
.pp-rk-key i.md { width: 2px; height: 12px; border-radius: 0; background: color-mix(in srgb, var(--text) 50%, transparent); }
.pp-grp { font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 2px; }
.pp-rk { display: grid; grid-template-columns: 220px minmax(0, 1fr) 96px; gap: 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.pp-rk-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-rk-l span { font-size: 13px; font-weight: 600; color: var(--text); }
.pp-rk-l span small { font-weight: 500; color: var(--text-dim); font-size: 11px; }
.pp-rk-l b { font: 800 20px var(--font-mono); letter-spacing: -.02em; color: var(--text); }
.pp-rk-m { min-width: 0; }
.pp-sw { position: relative; width: 100%; min-height: 24px; }
.pp-sw i { position: absolute; display: block; }
.pp-sw .base { left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.pp-sw .med { top: -2px; bottom: -2px; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--text) 45%, transparent); }
.pp-sw .o { width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: color-mix(in srgb, var(--text-dim) 30%, transparent);
  cursor: pointer; animation: pp-fade .5s ease .1s both; transition: background .15s, transform .15s; }
.pp-sw .o.c { background: color-mix(in srgb, var(--text-dim) 22%, transparent); }
.pp-sw .o:hover { background: var(--text); transform: scale(1.3); }
.pp-sw .me { width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--surface);
  box-shadow: 0 2px 6px rgba(37,99,235,.5); z-index: 2; box-sizing: border-box; animation: pp-pop .5s cubic-bezier(.2,1.5,.4,1) .35s both; }
@keyframes pp-fade { from { opacity: 0; } }
.pp-rk-ax { display: flex; justify-content: space-between; font: 600 10px var(--font-mono); color: var(--text-dim); margin-top: 2px; }
.pp-rk-ax span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.pp-rk-ax svg { width: 11px; height: 11px; }
.pp-rk-r { display: flex; flex-direction: column; align-items: flex-end; }
.pp-rk-r b { font: 800 22px var(--font-mono); letter-spacing: -.03em; color: var(--text); line-height: 1; }
.pp-rk.top .pp-rk-r b { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-rk-r span { font-size: 11.5px; color: var(--text-dim); }
.pp-rk-r em { font-style: normal; font-size: 10.5px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; }
.pp-cav { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: var(--surface2); }
.pp-how { margin: 12px 0 4px; font-size: 12.5px; color: var(--text-dim); }
.pp-how summary { cursor: pointer; font-weight: 650; color: var(--accent-text); }
.pp-how p { margin: 8px 0 0; line-height: 1.55; max-width: 90ch; }

/* Against last season */
.pp-ls-hd, .pp-ls { display: grid; grid-template-columns: minmax(150px, 1fr) 86px minmax(120px, 2.2fr) 86px; gap: 16px; align-items: center; }
.pp-ls-hd { font: 700 10px var(--font-mono); letter-spacing: .08em; color: var(--text-dim); padding-bottom: 4px; }
.pp-ls-hd span:nth-child(2), .pp-ls .a { text-align: right; }
.pp-ls-hd .m { text-align: center; text-transform: uppercase; }
.pp-ls { padding: 8px 0; border-top: 1px solid var(--border); }
.pp-ls .l { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pp-ls .a, .pp-ls .b { display: flex; flex-direction: column; font: 800 13.5px var(--font-mono); color: var(--text); }
.pp-ls .a { align-items: flex-end; color: var(--text-dim); }
.pp-ls small { font: 500 10.5px var(--font); color: var(--text-dim); }
.pp-ls .trk { position: relative; height: 16px; }
.pp-ls .trk::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--surface2); }
.pp-ls .trk .ln { position: absolute; top: 7px; height: 2px; background: color-mix(in srgb, var(--text-dim) 50%, transparent); }
.pp-ls .trk .ln.up { background: #10b981; } .pp-ls .trk .ln.down { background: #f59e0b; }
.pp-ls .trk .p, .pp-ls .trk .c { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.pp-ls .trk .p { border: 2px solid color-mix(in srgb, var(--text-dim) 70%, transparent); background: var(--surface); box-sizing: border-box; }
.pp-ls .trk .c { background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.pp-ls .trk .c.up { background: #10b981; } .pp-ls .trk .c.down { background: #f59e0b; }

/* Career */
.pp-ct { position: relative; margin: 8px 0 6px; padding: 26px 0 24px; }
.pp-ct-yrs { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.pp-ct-yrs span { position: absolute; transform: translateX(-50%); font: 600 10.5px var(--font-mono); color: var(--text-dim); }
.pp-ct-track { position: relative; height: 54px; border-radius: 12px; background: var(--surface2); }
.pp-cs { position: absolute; top: 6px; bottom: 6px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); display: flex; align-items: center; overflow: hidden; min-width: 6px; }
.pp-cs.loan { background: repeating-linear-gradient(135deg, color-mix(in srgb, #f59e0b 22%, var(--surface)) 0 6px, color-mix(in srgb, #f59e0b 10%, var(--surface)) 6px 12px);
  border-color: color-mix(in srgb, #f59e0b 55%, transparent); }
.pp-cs.before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-dim) 14%, var(--surface))); border-style: dashed;
  border-color: color-mix(in srgb, var(--text-dim) 35%, transparent); }
.pp-cs.now { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, var(--surface)), color-mix(in srgb, #06b6d4 18%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.pp-cs .lab { display: flex; align-items: center; gap: 6px; padding: 0 8px; white-space: nowrap; font-size: 11.5px; }
.pp-cs .lab img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.pp-cs .lab b { color: var(--text); font-weight: 700; }
.pp-cs .lab em { font-style: normal; font: 700 10.5px var(--font-mono); color: var(--text-dim); }
.pp-now, .pp-end { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--text); }
.pp-end { border-left: 2px dashed var(--text-dim); }
.pp-now span, .pp-end span { position: absolute; bottom: calc(100% + 5px); left: 0; transform: translateX(-50%); white-space: nowrap;
  font: 700 10px var(--font-mono); color: var(--surface); background: var(--text); padding: 2px 7px; border-radius: 99px; }
.pp-end span { color: var(--text-dim); background: none; padding: 2px 0; transform: translateX(-100%); }
.pp-end.tight span { display: none; }
.pp-mvs { margin-top: 6px; }
.pp-mv { display: grid; grid-template-columns: 76px minmax(0, 1fr) 112px 64px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.pp-mv .d { font: 600 11.5px var(--font-mono); color: var(--text-dim); }
.pp-mv .c { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mv .c img { width: 18px; height: 18px; object-fit: contain; }
.pp-mv .c i svg { width: 13px; height: 13px; vertical-align: -2px; opacity: .6; }
.pp-mv .c b { color: var(--text); }
.pp-mv .k { justify-self: start; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 650; background: var(--surface2); color: var(--text); }
.pp-mv .k.loan { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: color-mix(in srgb, #b45309 85%, var(--text)); }
.pp-mv .f { font: 800 13px var(--font-mono); text-align: right; color: var(--text); }
.pp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-tbl th { text-align: left; font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 0 6px 6px; }
.pp-tbl td { padding: 8px 6px; border-top: 1px solid var(--border); color: var(--text); }
.pp-tbl td small { display: block; font-size: 11px; color: var(--text-dim); }
.pp-tbl .r { text-align: right; font-family: var(--font-mono); }
.pp-tbl .m { font-family: var(--font-mono); color: var(--text-dim); }
.pp-sp { display: inline-block; min-width: 30px; padding: 2px 7px; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #2563EB, #06b6d4); font-weight: 800; text-align: center; }

/* Players like him */
.pp-likes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pp-lk { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 16px 10px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: transform .15s, box-shadow .15s; }
.pp-lk:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(15,23,42,.5); }
.pp-lk-ph { position: relative; width: 64px; height: 64px; margin-bottom: 4px; }
.pp-lk-ph > img, .pp-lk-ph > .pp-ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface2); font-size: 18px; }
.pp-lk-ph span:not(.pp-ini) { position: absolute; right: -6px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px -3px rgba(0,0,0,.4); }
.pp-lk-ph span:not(.pp-ini) img { width: 17px; height: 17px; object-fit: contain; }
.pp-lk .n { font-size: 13px; color: var(--text); line-height: 1.2; }
.pp-lk .c { font-size: 11.5px; color: var(--text-dim); }
.pp-lk .sd { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 4px; font-size: 10.5px; line-height: 1.3; color: var(--text-dim); }
.pp-lk .sd i { font-style: normal; font: 800 12px var(--font-mono); color: #fff; background: linear-gradient(90deg, #2563EB, #06b6d4); border-radius: 99px; padding: 1px 9px; }
.pp-lk .al { font-size: 11px; color: var(--text); margin-top: 2px; line-height: 1.35; }
.pp-lk .bt { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; width: 100%; }
.pp-lk .bt button { flex: 1; padding: 6px 0; border-radius: 9px; cursor: pointer; font: 650 11.5px var(--font); color: var(--text); background: var(--surface2); border: 1px solid var(--border); }
.pp-lk .bt button.pri { color: #fff; background: var(--accent); border-color: var(--accent); }
.pp-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--text-dim); }

/* The slim bar that stays at the top of the panel once the hero has scrolled away */
.pp-mini-wrap { position: sticky; top: 0; height: 0; z-index: 30; }
.pp-mini { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px max(20px, calc((100% - 1180px) / 2 + 20px)); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; }
body.pp-mini-on .pp-mini { transform: none; opacity: 1; pointer-events: auto; }
.pp-mini img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface2); }
.pp-mini b { font-size: 14px; color: var(--text); white-space: nowrap; }
.pp-mini > span:not(.sp) { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-mini .sp { flex: 1; }
.pp-mini button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; cursor: pointer; font: 650 12.5px var(--font);
  color: var(--text); background: var(--surface2); border: 1px solid var(--border); }
.pp-mini button svg { width: 15px; height: 15px; }
.pp-mini .pp-mini-ask { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; border: 1.5px solid transparent; }
.pp-mini .pp-mini-star.on svg { fill: #f59e0b; stroke: #f59e0b; }
@media (prefers-reduced-motion: reduce) {
  .pp-mc .bar, .pp-slot, .pp-sw .o, .pp-sw .me, .pp-hero-sk::after { animation: none; }
  .pp-mini { transition: none; }
}

@media (max-width: 1100px) {
  .pp-tiles, .pp-tiles.n4, .pp-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-tile.rank { grid-column: span 3; }
  .pp-likes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pp { padding: 8px 14px 96px; }
  .pp-crumb { margin-bottom: 8px; }
  .pp-crumb > span { display: none; }
  .pp-hero { padding: 16px 14px 14px; border-radius: 18px; }
  .pp-wm { width: 240px; height: 240px; right: -70px; top: -30px; }
  .pp-top { flex-direction: column; gap: 12px; }
  .pp-id { gap: 13px; align-items: flex-start; }
  .pp-ph { width: 70px; height: 70px; }
  .pp-ini { font-size: 20px; }
  .pp-crest { width: 26px; height: 26px; right: -5px; bottom: -2px; }
  .pp-crest img { width: 18px; height: 18px; }
  .pp-hero h1 { font-size: 26px; margin: 2px 0 5px; }
  .pp-kicker { font-size: 9px; }
  .pp-facts { font-size: 12.5px; }
  .pp-facts i { margin: 0 6px; }
  .pp-deal { font-size: 11.5px; margin-top: 4px; flex-direction: column; align-items: flex-start; gap: 1px; }
  .pp-deal i { display: none; }
  .pp-acts { width: 100%; gap: 6px; }
  .pp-act { flex: 1; justify-content: center; padding: 7px 6px; }
  .pp-status { margin-top: 10px; }
  .pp-pill { flex-wrap: wrap; font-size: 12px; row-gap: 2px; padding: 6px 10px; }
  .pp-tiles, .pp-tiles.n4, .pp-tiles.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
  .pp-tile.rank { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; }
  .pp-tile.rank > b { grid-row: span 2; font-size: 30px; }
  .pp-tile { padding: 9px 11px 10px; gap: 1px; }
  .pp-tile > b { font-size: 21px; }
  .pp-tile > b small { font-size: 12px; }
  .pp-tile > span { font-size: 11.5px; }
  .pp-tile:not(.rank) > small { display: none; }
  .pp-tile > b.pp-rt { font-size: 19px; padding: 0 8px 1px; }
  .pp-track { margin: 3px 0 1px; }
  .pp-ask { margin-top: 12px; }
  .pp-say { padding: 5px 5px 5px 12px; }
  .pp-say input { font-size: 14px; }
  .pp-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .pp-try button { flex: 0 0 auto; }
  .pp-news-row { grid-template-columns: 1fr; gap: 8px; }
  .pp .cl-grid { grid-template-columns: 1fr; }
  .pp-mc { flex: 0 0 40px; }
  .pp-mc .bx { height: 110px; }
  .pp-sn-g b { font-size: 18px; }
  .pp-where-b { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .pp-pitch { width: 124px; height: 186px; }
  .pp-rk { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .pp-rk-l { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; grid-column: 1; }
  .pp-rk-l b { font-size: 16px; }
  .pp-rk-m { grid-column: 1 / -1; grid-row: 2; }
  .pp-rk-r { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; gap: 4px; }
  .pp-rk-r b { font-size: 17px; }
  .pp-rk-r em, .pp-rk-key { display: none; }
  .pp-ls-hd, .pp-ls { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 4px 10px; }
  .pp-ls-hd span:first-child { display: none; }
  .pp-ls .l { grid-column: 1 / -1; font-size: 12.5px; }
  .pp-ct-track { height: 48px; }
  .pp-cs .lab em, .pp-end span { display: none; }   /* the chapter's lead names the contract */
  .pp-mv { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "d k f" "c c c"; gap: 4px 10px; }
  .pp-mv .d { grid-area: d; } .pp-mv .k { grid-area: k; } .pp-mv .f { grid-area: f; } .pp-mv .c { grid-area: c; }
  .pp-tbl { font-size: 12px; }
  .pp-tbl th, .pp-tbl td { padding-left: 4px; padding-right: 4px; }
  .pp-tbl th:nth-child(4), .pp-tbl td:nth-child(4), .pp-tbl th:nth-child(6), .pp-tbl td:nth-child(6) { display: none; }
  .pp-likes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -14px; padding-right: 14px; scrollbar-width: none; }
  .pp-lk { flex: 0 0 156px; scroll-snap-align: start; }
  .pp-mini { padding: 8px 14px; }
  .pp-mini > span:not(.sp) { display: none; }
}

/* ═══ Scout, rebuilt (2026-10-31): Find, Shortlist, Compare and Nations in the editorial style of
   Matches and the club page (hero band, chapters, photo cards). Everything is prefixed sc-. ═══ */
.sc-root { width: 100%; max-width: 1320px; margin: 0 auto; padding: 14px 20px 110px; box-sizing: border-box; }
.sm-count { margin-left: 6px; padding: 1px 6px; border-radius: 99px; font: 700 10px var(--font-mono); color: #fff;
  background: var(--accent); vertical-align: 1px; }

/* The hero: what Scout holds, and the describe box. */
.sc-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 28px; align-items: end; padding: 0 26px 24px; }
.sc-h1 { margin: 6px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: #fff; }
.sc-hero .mt-hero-nums { margin-top: 16px; }
.sc-say label { display: block; margin-bottom: 8px; font: 650 12.5px var(--font); color: rgba(255,255,255,.88); }
.sc-say-row { display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22); transition: border-color .15s, box-shadow .15s; }
.sc-say-row:focus-within { border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 3px rgba(125,211,252,.2); }
.sc-say-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 0; outline: none; background: none; color: #fff; font: 14px var(--font); }
.sc-say-row input::placeholder { color: rgba(255,255,255,.5); }
.sc-say-row button { flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: 10px; background: #fff; color: #0b1636;
  font: 750 13px var(--font); cursor: pointer; }
.sc-say-row button:hover { filter: brightness(.95); }
.sc-say-row button:disabled { opacity: .7; cursor: progress; }
.sc-say-note { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,.64); }

/* Ready-made searches. */
.sc-ready { margin: 0 0 22px; }
.sc-ready-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.sc-rm { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; font: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.sc-rm:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 12px 26px -18px rgba(15,23,42,.45); }
.sc-rm b { font-size: 13.5px; font-weight: 720; }
.sc-rm span { font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }

/* Find: the filters on the left, the results on the right. */
.sc-find { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.sc-filters { padding: 6px 16px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.sc-ftoggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sc-ftoggle span { display: flex; flex-direction: column; min-width: 0; }
.sc-ftoggle b { font-size: 13.5px; }
.sc-ftoggle small { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-chev { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface2); color: var(--text); }
.sc-chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .2s ease; }
.sc-ftoggle[aria-expanded="true"] .sc-chev svg { transform: rotate(180deg); }
.sc-f { padding: 12px 0; border-bottom: 1px solid var(--border); }
.sc-f-l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px;
  font: 700 12px var(--font); color: var(--text); }
.sc-f-l span { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 12px var(--font);
  transition: border-color .15s, background .15s, color .15s; }
.sc-chip small { font: 600 10px var(--font-mono); color: var(--text-dim); }
.sc-chip img { width: 14px; height: 14px; object-fit: contain; }
.sc-chip:hover { border-color: var(--text-dim); }
.sc-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-chip.on small { color: rgba(255,255,255,.82); }
.sc-age { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.sc-age label { display: flex; align-items: center; gap: 6px; }
.sc-age input { width: 58px; }
.sc-age input, .sc-natin input, .sc-add, .sc-addbox input, .sc-pinbox input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text);
  font: 13px var(--font); outline: none; box-sizing: border-box; }
.sc-age input:focus, .sc-natin input:focus, .sc-add:focus, .sc-addbox input:focus, .sc-pinbox input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,.15)); }
.sc-natin { position: relative; }
.sc-natin input { width: 100%; padding-right: 36px; }
.sc-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; }
.sc-order { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-order li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 10px; background: var(--surface2); }
.sc-order .n { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px;
  font: 800 11px var(--font-mono); color: #fff; background: var(--spectrum); }
.sc-order .t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.sc-order button { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--text-dim); cursor: pointer; }
.sc-order button:hover, .sc-x:hover { background: var(--surface); color: var(--text); }
.sc-order svg, .sc-x svg, .sc-dock-x svg, .sc-pick svg, .sc-fromsl svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-add { width: 100%; cursor: pointer; }
.sc-f-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.sc-pin { padding: 9px 16px; border: 0; border-radius: 99px; background: var(--text); color: var(--bg); font: 700 13px var(--font); cursor: pointer; }
.sc-pin:hover { filter: brightness(1.12); }
.sc-ghost { padding: 8px 14px; border: 1px solid var(--border); border-radius: 99px; background: none; color: var(--text);
  font: 600 12.5px var(--font); cursor: pointer; }
.sc-ghost:hover { border-color: var(--text-dim); }
.sc-pinbox { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sc-pinbox label { font: 700 12px var(--font); }
.sc-pinbox input { width: 100%; }
.sc-pinbox-b { display: flex; gap: 8px; }
.sc-pinbox small { font-size: 11px; color: var(--text-dim); }

/* The results: one row a player, the bars for what was asked, the standing with its group. */
.sc-results { min-width: 0; transition: opacity .15s; }
.sc-results.sc-busy { opacity: .55; }
.sc-res-hd { margin: 2px 0 12px; scroll-margin-top: 12px; }
.sc-rule { margin: 4px 0 0; font-size: 15px; font-weight: 650; line-height: 1.4; letter-spacing: -.005em; color: var(--text); }
.sc-list { display: flex; flex-direction: column; gap: 8px; }
.sc-row { display: grid; grid-template-columns: 26px minmax(190px, 1.1fr) minmax(230px, 1.3fr) 180px auto; gap: 14px; align-items: center;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s; }
.sc-row:hover { border-color: var(--text-dim); box-shadow: 0 10px 24px -20px rgba(15,23,42,.5); }
.sc-rk { font: 800 13px var(--font-mono); color: var(--text-dim); text-align: center; }
.sc-who, .sc-card-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sc-who:hover b, .sc-card-who:hover b { text-decoration: underline; text-underline-offset: 2px; }
.sc-ph { position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--surface2); }
.sc-ph img { width: 100%; height: 100%; object-fit: cover; }
.sc-ph .mt-ini { font-size: 14px; }
.sc-ph-l { width: 52px; height: 52px; }
.sc-ph-l .mt-ini { font-size: 17px; }
.sc-ph-s { width: 30px; height: 30px; }
.sc-ph-s .mt-ini { font-size: 11px; }
.sc-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-nm b { font-size: 14px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-club { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); opacity: .86;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-club img { flex: 0 0 auto; width: 14px; height: 14px; object-fit: contain; }
.sc-nm small { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-fit { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-bar { display: grid; grid-template-columns: 104px minmax(40px, 1fr) 44px; gap: 8px; align-items: center; font-size: 11px; }
.sc-bar-l { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bar-l small { font-size: 9.5px; }
.sc-bar-t { height: 6px; overflow: hidden; border-radius: 6px; background: var(--surface2); }
.sc-bar-t i { display: block; height: 100%; border-radius: 6px; background: var(--spectrum); transition: width .35s ease; }
.sc-bar b { font: 700 11.5px var(--font-mono); text-align: right; color: var(--text); }
.sc-st { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sc-st-k { font: 600 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.sc-st-v { font: 800 22px var(--font-mono); letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.sc-st-r { font-size: 11px; line-height: 1.35; color: var(--text-dim); }
.sc-acts { display: flex; align-items: center; gap: 6px; }
.sc-star { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-dim); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sc-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.sc-star:hover { color: #d97706; border-color: #f59e0b; }
.sc-star.on { color: #d97706; border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.12); }
.sc-star.on svg { fill: currentColor; }
body.dark .sc-star.on, body.dark .sc-star:hover { color: #fbbf24; }
.sc-tick { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 650 12px var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.sc-tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-tick:hover { border-color: var(--text-dim); }
.sc-tick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-more { display: block; margin: 14px auto 0; padding: 9px 18px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); color: var(--text); font: 650 13px var(--font); cursor: pointer; }
.sc-foot { max-width: 80ch; margin: 16px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.sc-foot b { color: var(--text); }
.sc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; }
.sc-empty b { font-size: 15px; color: var(--text); }
.sc-empty span { max-width: 48ch; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.sc-empty button { margin-top: 10px; }
.sc-art { width: min(320px, 100%); margin-bottom: 12px; overflow: hidden; border-radius: 16px;
  background: linear-gradient(135deg, #0b1636, #10204a); box-shadow: 0 18px 40px -26px rgba(15,23,42,.8); }
.sc-art .whn-art { padding: 16px; border-right: 0; }

/* Loading shapes. */
.sc-row.sc-skel, .sc-card.sc-skel, .sc-natt.sc-skel { position: relative; overflow: hidden; min-height: 66px;
  background: var(--surface2); border-color: transparent; }
.sc-card.sc-skel { min-height: 250px; }
.sc-skel > * { visibility: hidden; }
.sc-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); animation: sc-sheen 1.3s infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
body.dark .sc-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
.cl-hero.sc-skel-dark { min-height: 230px; }
@keyframes sc-sheen { to { transform: translateX(100%); } }

/* The compare tray: who is picked, wherever in Scout you are. */
.sc-dock { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%); display: flex; justify-content: center; pointer-events: none; }
.sc-dock-in { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 99px; color: #fff; pointer-events: auto;
  background: linear-gradient(135deg, #0b1636, #10204a); box-shadow: 0 18px 40px -16px rgba(15,23,42,.75); animation: mt-in .25s ease-out; }
.sc-dock-f { display: flex; }
.sc-dock-f span { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; margin-left: -8px;
  border-radius: 50%; border: 2px solid var(--c); background: #1e293b; }
.sc-dock-f span:first-child { margin-left: 0; }
.sc-dock-f img { width: 100%; height: 100%; object-fit: cover; }
.sc-dock-f .mt-ini { font-size: 10px; }
.sc-dock-t { font-size: 13px; font-weight: 650; white-space: nowrap; }
.sc-dock-go { padding: 8px 14px; border: 0; border-radius: 99px; background: #fff; color: #0b1636; font: 750 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.sc-dock-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }

/* Shortlist, Compare and Nations open with a plain head. */
.sc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.sc-tools .pd-mode-row { margin: 0; }
.sc-addbox { position: relative; flex: 1 1 280px; max-width: 420px; }
.sc-addbox input { width: 100%; padding: 10px 12px; }
.sc-lk { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 40px -20px rgba(15,23,42,.45); }
.sc-lk:empty { display: none; }
.sc-lk-r { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sc-lk-r:last-child { border-bottom: 0; }
.sc-lk-r:hover { background: var(--surface2); }
.sc-lk-r > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-lk-r b { font-size: 13px; }
.sc-lk-r small { font-size: 11px; color: var(--text-dim); }
.sc-lk-r i { flex: 0 0 auto; font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--accent-text); }
.sc-lk-none { padding: 12px; font-size: 12px; color: var(--text-dim); }

/* Shortlist: a board of player cards. */
.sc-board { display: flex; flex-direction: column; gap: 24px; }
.sc-line-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.sc-line .sc-line-cards { margin-top: 10px; }
.sc-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.sc-card:hover { border-color: var(--text-dim); box-shadow: 0 14px 30px -24px rgba(15,23,42,.55); }
.sc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sc-card-st { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); }
.sc-meter { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: var(--border); }
.sc-meter u { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-dim); opacity: .55; }
.sc-meter i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--spectrum); box-shadow: 0 0 0 2px var(--surface2); }
.sc-card-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sc-card-nums div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.sc-card-nums b { font: 750 14px var(--font-mono); color: var(--text); }
.sc-card-nums span { font-size: 10px; color: var(--text-dim); }
.sc-nx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 12px; }
.sc-nx:hover { border-color: var(--text-dim); }
.sc-nx .k { font: 700 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.sc-nx .o { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.sc-nx .o img { width: 14px; height: 14px; object-fit: contain; }
.sc-nx .w { color: var(--text-dim); }
.sc-nx em { margin-left: auto; font-style: normal; font-weight: 650; color: var(--text-dim); }
.sc-nx.ok em { color: var(--success); }
.sc-nx.out { border-color: rgba(239,68,68,.4); }
.sc-nx.out em { color: var(--danger); }
.sc-card-ft { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.sc-card-ft .sc-ghost { margin-left: auto; }
.sc-card-gone { opacity: .78; }

/* Compare: the picked players, then one track a measure with every player's dot on it. */
.sc-cmp-pick { margin: 0 0 16px; }
.sc-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-pick { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--c); }
.sc-pick b { font-size: 12.5px; }
.sc-pick button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--surface2); color: var(--text-dim); cursor: pointer; }
.sc-picks .sc-addbox { flex: 1 1 220px; max-width: 320px; }
.sc-fromsl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }
.sc-fromsl button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px dashed var(--border); border-radius: 99px;
  background: none; color: var(--text); font: 600 12px var(--font); cursor: pointer; }
.sc-fromsl button:hover { border-style: solid; border-color: var(--text-dim); }
.sc-cmp-cards { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sc-cmp-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 14px 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.sc-cmp-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.sc-cmp-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-dim); }
.sc-cmp-nums b { font-family: var(--font-mono); color: var(--text); }
.sc-cmp-as { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 12px; color: var(--text-dim); }
.sc-cmp-as .pd-mode-row { margin: 0; }
.sc-cmp-note { max-width: 90ch; margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.sc-cm { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.sc-cmp-ms .cl-sub + .sc-cm { border-top: 0; }
.sc-cm-l { grid-row: span 2; font-size: 13px; font-weight: 650; color: var(--text); }
.sc-cm-l small { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.sc-cm-t { position: relative; height: 22px; }
.sc-cm-t::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 6px;
  background: linear-gradient(90deg, var(--surface2), var(--border)); }
.sc-cm-t u { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--text-dim); opacity: .5; }
.sc-cm-t i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 4px 10px -4px rgba(0,0,0,.45); transition: left .4s ease; }
.sc-cm-v { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-dim); }
.sc-cm-v span { display: inline-flex; align-items: center; gap: 5px; }
.sc-cm-v span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sc-cm-v b { font-family: var(--font-mono); color: var(--text); }
.sc-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.sc-askbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 99px;
  background: var(--text); color: var(--bg); font: 750 13px var(--font); cursor: pointer; }
.sc-askbtn .pv-spark { width: 16px; height: 16px; }
.sc-ask span { font-size: 11.5px; color: var(--text-dim); }

/* Nations: a grid to pick from, then the nation's own page. */
.sc-nat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sc-natt { display: flex; flex-direction: column; gap: 3px; min-height: 64px; padding: 14px; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; font: inherit; transition: transform .15s, border-color .15s; }
.sc-natt:hover { transform: translateY(-2px); border-color: var(--text-dim); }
.sc-natt b { font-size: 14.5px; font-weight: 720; }
.sc-natt span { font-size: 11.5px; color: var(--text-dim); }
.sc-nat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-nat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-nat-xi .mt-xi { margin-top: 4px; }
.sc-pitch { min-height: 470px; padding: 18px 8px; border-radius: 14px; }
.sc-pitch .mt-xi-p { width: 80px; }
.sc-pitch .mt-xi-p .ph { width: 48px; height: 48px; display: grid; place-items: center; }
.sc-pitch .mt-xi-p .ph img, .sc-pitch .mt-xi-p .ph .mt-ini { border-radius: 50%; }
.sc-pitch .mt-xi-p .ph .mt-ini { font-size: 14px; }
.sc-pitch .mt-xi-p .ph b { right: -16px; top: -7px; font-size: 10.5px; color: #fff; background: var(--spectrum); }
.sc-pitch .mt-xi-p .nm { max-width: 80px; font-size: 11px; }
.sc-pitch .mt-xi-p .cl { display: flex; align-items: center; gap: 4px; }
.sc-pitch .mt-xi-p .cl em { font: 700 8.5px var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #fde68a; }
.sc-xi-empty { cursor: default; opacity: .7; }
.sc-xi-empty .ph { border-style: dashed; background: rgba(255,255,255,.08); }
.sc-depth { display: flex; flex-direction: column; gap: 12px; }
.sc-dl { display: flex; flex-direction: column; }
.sc-dr { display: flex; align-items: center; gap: 10px; padding: 7px 0; border: 0; border-top: 1px solid var(--border); background: none;
  color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sc-dr:first-child { border-top: 0; }
.sc-dr .sc-nm { flex: 1; }
.sc-dr .sc-nm b { font-size: 13px; }
.sc-dr:hover .sc-nm b { text-decoration: underline; text-underline-offset: 2px; }
.sc-dr-r { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.sc-dr-r b { font: 750 14px var(--font-mono); }
.sc-dr-r small { font-size: 10.5px; color: var(--text-dim); }

@media (max-width: 1180px) {
  .sc-row { grid-template-columns: 26px minmax(170px, 1fr) minmax(200px, 1.2fr) 150px auto; }
  .sc-bar { grid-template-columns: 92px minmax(30px, 1fr) 40px; }
  .sc-tick span { display: none; }
  .sc-tick { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
  .sc-hero { grid-template-columns: 1fr; gap: 18px; }
  .sc-find { grid-template-columns: 1fr; }
  .sc-filters { padding: 0; }
  .sc-ftoggle { display: flex; }
  .sc-filters[data-open="0"] .sc-fbody { display: none; }
  .sc-fbody { padding: 0 14px 14px; border-top: 1px solid var(--border); }
  .sc-nat { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sc-root { padding: 10px 14px 130px; }
  .sc-hero { padding: 0 16px 18px; }
  .sc-h1 { font-size: 26px; }
  .sc-ready-row { display: flex; overflow-x: auto; margin: 10px -14px 0; padding: 0 14px 4px; scrollbar-width: none; }
  .sc-ready-row::-webkit-scrollbar { display: none; }
  .sc-rm { flex: 0 0 230px; }
  .sc-row { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "rk who who" "fit fit fit" "st st acts"; gap: 10px; padding: 12px; }
  .sc-rk { grid-area: rk; }
  .sc-who { grid-area: who; }
  .sc-acts { grid-area: acts; }
  .sc-fit { grid-area: fit; }
  .sc-st { grid-area: st; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .sc-acts { align-self: stretch; align-items: flex-end; margin-left: -10px; padding: 8px 0 0 10px; border-top: 1px solid var(--border); }
  .sc-st-v { font-size: 18px; }
  .sc-star { width: 40px; height: 40px; }
  .sc-tick { width: auto; height: 40px; padding: 0 10px; }
  .sc-tick span { display: inline; }
  .sc-card-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .sc-cmp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-cmp-card { padding: 14px 10px 12px; }
  .sc-cmp-card .sc-card-who { align-items: flex-start; gap: 8px; }
  .sc-cmp-card .sc-ph-l { width: 36px; height: 36px; }
  .sc-cmp-card .sc-nm b, .sc-cmp-card .sc-nm small { white-space: normal; overflow-wrap: anywhere; }
  .sc-cm { grid-template-columns: 1fr; }
  .sc-cm-l { grid-row: auto; }
  .sc-nat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-pitch { min-height: 400px; padding: 14px 2px; }
  .sc-pitch .mt-xi-p { width: 62px; }
  .sc-pitch .mt-xi-p .ph { width: 38px; height: 38px; }
  .sc-pitch .mt-xi-p .nm { max-width: 62px; font-size: 10px; }
  .sc-dock { bottom: 84px; }
  .sc-dock-t { font-size: 12px; }
  .sc-dock-t.many { display: none; }
  .sc-hero .mt-hero-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .sc-hero .mt-hero-nums b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-rm, .sc-natt, .sc-bar-t i, .sc-cm-t i { transition: none; }
  .sc-skel::after { animation: none; }
}
.sc-season { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--text-dim); }
.sc-season b { font-family: var(--font-mono); color: var(--text); }

/* Scout's tabs live along the top of its own header (2026-10-31), on every tab: Find's hero, the
   shorter band on Shortlist, Compare and Nations, and a nation's own page. A second full-width bar of
   tabs under the main ones read as a second main menu, and along the bottom they moved with each
   header's height. */
.sc-hero > .sc-tabs { grid-column: 1 / -1; margin: 0 -26px 4px; padding: 0 26px; }   /* + the 16px row gap */
.sc-tabs { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.14); }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 13px 0 12px;
  border: 0; background: none; color: rgba(255,255,255,.66); font: 650 13.5px var(--font); white-space: nowrap; cursor: pointer;
  transition: color .15s; }
.sc-tab:hover, .sc-tab.on { color: #fff; }
.sc-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--spectrum); }
.sc-tab:focus-visible { outline: 2px solid #7dd3fc; outline-offset: -2px; border-radius: 6px; }
.sc-tab-n { padding: 1px 7px; border-radius: 99px; font: 700 10.5px var(--font-mono); color: #fff; background: rgba(255,255,255,.16); }
.sc-tab.on .sc-tab-n { color: #0b1636; background: #fff; }
.sc-band { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 20px; margin-bottom: 18px; }
.sc-band > .sc-tabs, .sc-nat-hero > .sc-tabs { margin-bottom: 20px; }
.sc-band .sc-h1 { font-size: 28px; }
.sc-band-lead { max-width: 72ch; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.74); }
.sc-nat-hero { padding-top: 0; }
.sc-nat-hero > .sc-tabs { margin: 0 -24px 20px; padding: 0 24px; }
.sc-nat-wait { min-height: 176px; }
@media (max-width: 760px) {
  .sc-hero > .sc-tabs { margin: 0 -16px; padding: 0 16px; gap: 22px; }
  .sc-band > .sc-tabs { margin-bottom: 16px; }
  .sc-band .sc-h1 { font-size: 24px; }
  .sc-nat-hero { padding-top: 0; }
  .sc-nat-hero > .sc-tabs { margin: 0 -16px 16px; padding: 0 16px; gap: 22px; }
  .sc-hero:not(.sc-band) { row-gap: 16px; }
}
/* A nation's page starts where the other Scout headers do, so the tabs never move between tabs. */
.cl-hero.sc-nat-hero { margin-top: 0; border-radius: 16px; }

/* Find leads with the describe box (2026-11-01, Mo: the figures were the loudest thing on the header).
   One column: the headline is the box's label, the box carries The Prism's spark and the spectrum edge,
   examples to tap (or what The Prism read) under it, and the figures as one quiet line. */
.sc-find-hero { grid-template-columns: minmax(0, 1fr); }
.sc-find-hero .sc-hero-l { max-width: 940px; }
.sc-find-hero .sc-h1 { margin-bottom: 14px; }
.sc-find-hero .sc-h1 label { cursor: text; }
.sc-find-hero .sc-say-row { align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border: 1.5px solid transparent; border-radius: 16px;
  background: linear-gradient(#141f4a, #141f4a) padding-box, var(--spectrum) border-box;
  box-shadow: 0 14px 36px -22px rgba(99,102,241,.9); }
.sc-find-hero .sc-say-row:focus-within { box-shadow: 0 0 0 4px rgba(125,211,252,.18), 0 14px 36px -22px rgba(99,102,241,.9); }
.sc-say-mark { flex: 0 0 auto; display: grid; place-items: center; }
.sc-say-mark .pv-spark { width: 20px; height: 20px; }
.sc-find-hero .sc-say-row input { padding: 10px 4px; font-size: 16px; }
.sc-find-hero #sc-say-go { padding: 11px 18px; border-radius: 11px; font-size: 14px; }
.sc-say-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; margin-top: 12px;
  font-size: 12.5px; color: rgba(255,255,255,.72); }
.sc-say-k { font-weight: 650; color: rgba(255,255,255,.72); margin-right: 2px; }
.sc-try { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04);
  color: #fff; font: 600 12.5px var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.sc-try:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.sc-read { padding: 5px 11px; border-radius: 99px; background: rgba(125,211,252,.16); color: #e0f2fe; font: 600 12.5px var(--font);
  animation: mt-in .25s ease-out; }
.sc-figs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.64); }
.sc-figs b { font: 700 12.5px var(--font-mono); color: #fff; }

@media (max-width: 760px) {
  .sc-find-hero .sc-say-row { padding: 6px 6px 6px 11px; gap: 8px; }
  .sc-find-hero .sc-say-row input { font-size: 15px; }
  .sc-find-hero #sc-say-go { padding: 10px 13px; font-size: 13px; }
  .sc-say-mark .pv-spark { width: 18px; height: 18px; }
}

/* Find: the two ways in under the title, and the ranking bar above the results (2026-11-01). */
.sc-hero-lead { max-width: 70ch; margin: -6px 0 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.76); }
.sc-results-col { min-width: 0; }
.sc-rankbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.sc-rankbar:empty { display: none; }
.sc-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.sc-rank-k { display: flex; flex-direction: column; margin-right: 4px; font: 700 13px var(--font); color: var(--text); }
.sc-rank-k small { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.sc-order.sc-order-row { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; }
.sc-order-row li { padding: 3px 3px 3px 5px; gap: 6px; border-radius: 99px; }
.sc-order-row .t { flex: 0 1 auto; white-space: nowrap; }
.sc-order-row button { width: 26px; height: 26px; border-radius: 50%; }
.sc-rankbar .sc-add { width: auto; min-width: 170px; padding: 7px 12px; border-radius: 99px; }
.sc-rank-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.sc-rank-acts .sc-pinbox { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; }
.sc-rank-acts .sc-pinbox input { width: 220px; }
.sc-rank-acts .sc-pinbox small { display: none; }
@media (max-width: 760px) {
  .sc-hero-lead { font-size: 13px; }
  .sc-rankbar { padding: 12px; }
  .sc-rank-acts { margin-left: 0; }
  .sc-rank-acts .sc-pinbox input { width: 100%; }
}

/* The four ready-made searches stay one row: four across, a row that scrolls below 900px. */
@media (max-width: 900px) {
  .sc-ready-row { display: flex; overflow-x: auto; scrollbar-width: none; }
  .sc-ready-row::-webkit-scrollbar { display: none; }
  .sc-rm { flex: 0 0 240px; }
}

/* ── Ask before a ready-made question spends one (2026-11-02) ──────────────────
   One card for every question the app writes for someone, and the club brief:
   dark in both themes like the heroes, the spectrum as a hairline on its top edge,
   one pip a question (a bar past 30). A centred card on a desktop, a sheet from
   the bottom on a phone. Above the app's own modals, under the invite card. */
.aq { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.aq[hidden] { display: none; }
.aq-scrim { position: absolute; inset: 0; background: rgba(7,12,30,.46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease; overscroll-behavior: contain; }
.aq.on .aq-scrim { opacity: 1; }
.aq-card { position: relative; width: min(440px, 100%); border-radius: 20px; padding: 20px 20px 18px; color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(99,102,241,.42), transparent 60%),
    radial-gradient(50% 90% at 100% 100%, rgba(6,182,212,.20), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06) inset;
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1); }
.aq.on .aq-card { opacity: 1; transform: none; }
.aq-card::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px; background: var(--spectrum); }
.aq-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px; border: 0; padding: 0;
  display: grid; place-items: center; background: transparent; color: rgba(255,255,255,.6); cursor: pointer; }
.aq-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.aq-k { display: flex; align-items: center; gap: 8px; padding-right: 36px; font: 700 10.5px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.aq-k .pv-spark { width: 16px; height: 16px; flex: 0 0 auto; }
.aq-q { margin: 12px 0 0; font: 800 19px/1.32 var(--font-display); color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.aq-use { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.aq-use p { margin: 9px 0 0; font: 500 13px/1.45 var(--font); color: rgba(255,255,255,.8); }
.aq-use p.last { color: #fcd34d; }
.aq-pips { display: flex; gap: 4px; }
.aq-pips i { flex: 1 1 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.58); }
.aq-pips i.used { background: rgba(255,255,255,.13); }
.aq-pips i.this, .aq-bar i.this { background: var(--spectrum); box-shadow: 0 0 10px rgba(6,182,212,.55); animation: aq-pulse 1.6s ease-in-out infinite; }
.aq-bar { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.13); }
.aq-bar i { position: absolute; top: 0; bottom: 0; }
.aq-bar i.avail { background: rgba(255,255,255,.58); }
@keyframes aq-pulse { 50% { opacity: .55; } }
.aq-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.aq-acts button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 18px;
  border-radius: 12px; cursor: pointer; font: 700 14px var(--font); }
.aq-edit { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.aq-edit:hover { background: rgba(255,255,255,.12); }
.aq-go { background: #fff; color: #0b1636; border: 0; box-shadow: 0 8px 22px -10px rgba(6,182,212,.75); }
.aq-go:hover { filter: brightness(.95); }
.aq-go kbd { font: 600 11px var(--font-mono); padding: 1px 6px; border-radius: 5px; color: rgba(11,22,54,.6);
  background: rgba(11,22,54,.07); border: 1px solid rgba(11,22,54,.14); }
.aq-acts button:focus-visible, .aq-x:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
@media (hover: none) { .aq-go kbd { display: none; } }
@media (max-width: 700px) {
  .aq { align-items: flex-end; padding: 0; }
  .aq-card { width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(28px); }
  .aq.on .aq-card { transform: none; }
  .aq-x { width: 40px; height: 40px; top: 8px; right: 8px; }
  .aq-q { font-size: 18px; }
  .aq-acts { gap: 8px; }
  .aq-acts button { flex: 1 1 0; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-card, .aq-scrim { transition: none; }
  .aq-pips i.this, .aq-bar i.this { animation: none; }
}

/* ── Try again (W2, 2026-11-02) ─────────────────────────────────────────────────
   Shown only when a read fails or hits the 30-second limit: the player page (on its dark hero
   and under This season), the club page's header and the match centre. */
.pp-retry, .cl-retry, .mx-retry { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  margin-left: 10px; border-radius: 99px; cursor: pointer; font: 600 12.5px var(--font); }
.pp-retry, .cl-retry { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); }
.pp-retry:hover, .cl-retry:hover { background: rgba(255,255,255,.16); }
.pp-warn .pp-retry { color: var(--text); background: var(--surface); border-color: var(--border2); }
.mx-retry { color: var(--text); background: var(--surface); border: 1px solid var(--border2); }
.mx-retry:hover, .pp-warn .pp-retry:hover { background: var(--surface2); }
.pp-err .pp-retry { margin: 12px auto 0; display: flex; }

/* ── Team of the season on a pitch (chat, 2026-11-03) ────────────────────────────
   scout_card.render_sheet() draws it inside a plain answer, on the nation XI's pitch
   (.mt-xi.sc-pitch). The badge on each player is his average match rating. */
.bubble .xi-sheet { max-width: 520px; margin: 4px 0 16px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: #0b1636; box-shadow: 0 14px 30px -18px rgba(11,22,54,.55); }
.bubble .xi-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; }
.bubble .xi-hd b { font: 800 15px var(--font-display); color: #fff; letter-spacing: .01em; }
.bubble .xi-hd span { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.62); white-space: nowrap; }
.bubble .xi-pitch { min-height: 440px; border-radius: 0; }
.bubble .xi-pitch .mt-xi-p .ph .mt-ini { font-size: 14px; }
.bubble .xi-pitch .mt-xi-p .ph img { margin: 0; max-width: none; }
.bubble .xi-pitch .mt-xi-p .cl img { margin: 0; }
.bubble .xi-foot { padding: 9px 14px 11px; font-size: 11.5px; color: rgba(255,255,255,.62); }
@media (max-width: 760px) {
  .bubble .xi-sheet { max-width: none; }
  .bubble .xi-pitch { min-height: 380px; }
  .bubble .xi-hd { flex-direction: column; gap: 3px; }
}


/* ═══ W5 (2026-11-03, ASK_PLAN.md): chat in the editorial language ══════════════════════
   An answer is The Prism's by-line (its mark, never the spark, which is for the ways in) over the
   answer; while it works, the real steps; a scout card's first half (card_preview) shows the
   moment the data is in. The full card is the player page's dark header over a light body
   (.rb-report[data-v="2"], scout_card.render()). Saved cards from before keep the rules above. */

/* The by-line and the question */
.msg-row.v2 > .avatar { display: none; }
.msg-row.v2.ai { flex-direction: column; gap: 10px; }
.msg-row.v2.ai > .bubble { max-width: 100%; padding: 0; }
.msg-row.v2.user > .bubble, .rb-thread .ch-msg-user .bubble {
  max-width: 74%; padding: 11px 16px; border: 0; border-radius: 20px 20px 6px 20px;
  background: var(--surface3); color: var(--text); font: 500 15px/1.5 var(--font); }
.ch-by { display: flex; align-items: center; gap: 10px; }
.ch-by-mark { display: inline-flex; color: var(--text); }
.ch-by b { font: 700 13.5px var(--font); color: var(--text); }
.ch-by small { font-size: 12.5px; color: var(--text-muted); }
.ch-by small:empty { display: none; }
.ch-by.live .ch-by-mark { animation: ai-mark-pulse 1.6s ease-in-out infinite; }
.ch-by.live .ch-by-mark circle { animation: ai-dot-glow 1.6s ease-in-out infinite; }
.rb-thread > .ch-by { margin: 0 0 12px; }
.rb-thread > .ch-plain { max-width: 100%; padding: 0; }
.rb-thread > .ch-plain + .ch-followups { margin-top: 14px; }

/* The steps */
.ch-steps { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.ch-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 99px;
  font-size: 12.5px; line-height: 1.3; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); }
.ch-step > svg { flex: 0 0 auto; color: #10b981; }
.ch-step > b { font: 600 11.5px var(--font-mono); color: var(--text-muted); }
.ch-step.now { color: var(--text); font-weight: 650; border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.ch-step.now > i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: tool-dot 1.2s ease-in-out infinite; }
.ch-step.now > em { font-style: normal; }
#chat-header .ch-mark { display: inline-flex; }

/* The scout card: the player page's header, then the judgement */
.rb-report[data-v="2"] { border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 32px 64px -48px rgba(15,23,42,.55); }
.rb-report[data-v="2"] .rc-hero { position: relative; overflow: hidden; padding: 22px 24px 20px; color: #fff;
  background: radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
              radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
              linear-gradient(135deg, #0b1636, #10204a); }
.rb-report[data-v="2"] .rc-open { position: absolute; top: 20px; right: 22px; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 99px; cursor: pointer; font: 650 12.5px var(--font); color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.rb-report[data-v="2"] .rc-open::after { content: '→'; }
.rb-report[data-v="2"] .rc-open:hover { background: rgba(255,255,255,.18); }
.rb-report[data-v="2"] .rc-id { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; padding-right: 120px; }
.rb-report[data-v="2"] .rc-ph { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; padding: 3px;
  background: var(--spectrum); box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.rb-report[data-v="2"] .rc-ph > img.p { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e8edf6; display: block; margin: 0; }
.rb-report[data-v="2"] .rc-ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: #1c2b57; color: #fff; font: 800 26px var(--font-display); }
.rb-report[data-v="2"] .rc-crest { position: absolute; right: -4px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }
.rb-report[data-v="2"] .rc-crest img { width: 24px; height: 24px; object-fit: contain; margin: 0; }
.rb-report[data-v="2"] .rc-idt { min-width: 0; }
.rb-report[data-v="2"] .rc-kicker { font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.rb-report[data-v="2"] .name { margin: 4px 0 7px; font: 800 33px var(--font-display); letter-spacing: -.025em; line-height: 1.04; color: #fff; }
.rb-report[data-v="2"] .sub { margin: 0; font: 400 13.5px/1.45 var(--font); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.9); }
.rb-report[data-v="2"] .rc-deal { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.72); }
.rb-report[data-v="2"] .rc-tiles { position: relative; display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.rb-report[data-v="2"] .rc-tiles.n3 { grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); }
.rb-report[data-v="2"] .rc-tiles.n2 { grid-template-columns: 1.3fr minmax(0, 1fr); }
.rb-report[data-v="2"] .rc-tiles.n1 { grid-template-columns: minmax(0, 340px); }
.rb-report[data-v="2"] .rc-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 15px 14px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.rb-report[data-v="2"] .rc-tile > b { font: 800 26px var(--font-mono); letter-spacing: -.03em; line-height: 1.02; color: #fff; }
.rb-report[data-v="2"] .rc-tile > b small { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: 0; }
.rb-report[data-v="2"] .rc-tile > span { font-size: 12.5px; font-weight: 650; line-height: 1.3; color: rgba(255,255,255,.92); }
.rb-report[data-v="2"] .rc-tile > small { font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.62); }
.rb-report[data-v="2"] .rc-tile > small:empty { display: none; }
.rb-report[data-v="2"] .rc-tile.rank { background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(6,182,212,.18)); border-color: rgba(125,211,252,.4); }
.rb-report[data-v="2"] .rc-tile.rank > b { font-size: 30px; }
.rb-report[data-v="2"] .rc-season { position: relative; margin: 13px 0 0; font-size: 12.5px; color: rgba(255,255,255,.72); }
.rb-report[data-v="2"] .rc-season b { color: #fff; font-weight: 650; }

.rb-report[data-v="2"] .rb-body { display: block; padding: 22px 24px 8px; }
.rb-report[data-v="2"] .rc-lbl, .rb-report[data-v="2"] .rc-wr { display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
  font: 750 13.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rc-wr small { font: 500 12.5px var(--font); color: var(--text-muted); }
.rb-report[data-v="2"] .rc-wr.stopped { color: var(--text-dim); font-weight: 600; }
.rb-report[data-v="2"] .rc-mk { flex: 0 0 auto; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='4' y2='22' stroke='%230b0b0c' stroke-width='1.6'/%3E%3Cline x1='24' y1='6' x2='24' y2='22' stroke='%230b0b0c' stroke-width='1.6'/%3E%3Cline x1='4' y1='6' x2='24' y2='6' stroke='%230b0b0c' stroke-width='1.6'/%3E%3Cline x1='4' y1='22' x2='24' y2='22' stroke='%230b0b0c' stroke-width='1.2' opacity='.4'/%3E%3Cline x1='14' y1='6' x2='14' y2='22' stroke='%230b0b0c' stroke-width='.8' opacity='.4'/%3E%3Cline x1='4' y1='14' x2='24' y2='14' stroke='%230b0b0c' stroke-width='.8' opacity='.4'/%3E%3Ccircle cx='14' cy='16' r='3' fill='%232563EB'/%3E%3C/svg%3E") center/contain no-repeat; }
body.dark .rb-report[data-v="2"] .rc-mk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='4' y2='22' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cline x1='24' y1='6' x2='24' y2='22' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cline x1='4' y1='6' x2='24' y2='6' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cline x1='4' y1='22' x2='24' y2='22' stroke='%23ffffff' stroke-width='1.2' opacity='.4'/%3E%3Cline x1='14' y1='6' x2='14' y2='22' stroke='%23ffffff' stroke-width='.8' opacity='.4'/%3E%3Cline x1='4' y1='14' x2='24' y2='14' stroke='%23ffffff' stroke-width='.8' opacity='.4'/%3E%3Ccircle cx='14' cy='16' r='3' fill='%232563EB'/%3E%3C/svg%3E"); }
.rb-report[data-v="2"] .rc-wr .rc-mk { animation: ai-mark-pulse 1.6s ease-in-out infinite; }
.rb-report[data-v="2"] .rb-narrative { position: relative; max-width: none; padding: 0 0 2px 18px; font-size: 15px; line-height: 1.68; color: var(--text-dim); }
.rb-report[data-v="2"] .rb-narrative::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--spectrum); }
.rb-report[data-v="2"] .rb-narrative p { margin: 0 0 13px; }
.rb-report[data-v="2"] .rb-narrative p.lead { font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--text); letter-spacing: -.005em; }
.rb-report[data-v="2"] .rb-narrative strong { color: var(--text); font-weight: 650; }
.rb-report[data-v="2"] .hl { font: inherit; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; padding: 0 1px;
  background: linear-gradient(transparent 68%, rgba(37,99,235,.11) 68%); }
body.dark .rb-report[data-v="2"] .hl { background: linear-gradient(transparent 68%, rgba(96,165,250,.2) 68%); }

.rb-report[data-v="2"] .rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; }
.rb-report[data-v="2"] .rc-box { border-radius: 18px; padding: 15px 16px 5px; background: var(--surface2); border: 1px solid var(--border); }
.rb-report[data-v="2"] .rc-box-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 750 13.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rc-box-h > i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.rb-report[data-v="2"] .rc-box.bad .rc-box-h > i { background: #f59e0b; }
.rb-report[data-v="2"] .rc-box-h > span { font: 700 11px var(--font-mono); color: var(--text-muted); }
.rb-report[data-v="2"] .rb-strength-list, .rb-report[data-v="2"] .rb-concern-list { display: block; gap: 0; }
.rb-report[data-v="2"] .rb-strength-list li, .rb-report[data-v="2"] .rb-concern-list li { padding: 0; margin: 0 0 13px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.rb-report[data-v="2"] .rb-strength-list li::before, .rb-report[data-v="2"] .rb-concern-list li::before { content: none; }
.rb-report[data-v="2"] .rb-strength-list li > strong, .rb-report[data-v="2"] .rb-concern-list li > strong { display: block; margin-bottom: 3px; font: 650 13.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rb-strength-list li > span, .rb-report[data-v="2"] .rb-concern-list li > span { display: block; }

.rb-report[data-v="2"] .rc-h { margin: 24px 0 11px; font: 750 13.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rb-comp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-report[data-v="2"] .rb-comp-item { display: grid; grid-template-columns: 52px 1fr; gap: 13px; padding: 14px 15px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); }
.rb-report[data-v="2"] .rc-cph { position: relative; width: 52px; height: 52px; }
.rb-report[data-v="2"] .rc-cph > img.p, .rb-report[data-v="2"] .rc-cph > .rc-ini { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #e8edf6; display: block; margin: 0; }
.rb-report[data-v="2"] .rc-cph > .rc-ini { display: grid; font-size: 17px; }
.rb-report[data-v="2"] .rc-cph .rc-crest { right: -4px; bottom: -3px; width: 22px; height: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.rb-report[data-v="2"] .rc-cph .rc-crest img { width: 16px; height: 16px; }
.rb-report[data-v="2"] .rb-comp-name { font: 700 14.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rb-comp-meta { margin: 2px 0 7px; font: 400 12px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.rb-report[data-v="2"] .rb-comp-reason { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.rb-report[data-v="2"] .rb-trajectory p { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-dim); }

.rb-report[data-v="2"] .rc-more { margin: 22px 0 0; border-top: 1px solid var(--border); }
.rb-report[data-v="2"] .rc-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0;
  cursor: pointer; list-style: none; font: 650 13.5px var(--font); color: var(--text); }
.rb-report[data-v="2"] .rc-more > summary::-webkit-details-marker { display: none; }
.rb-report[data-v="2"] .rc-more > summary span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; color: var(--text-muted); }
.rb-report[data-v="2"] .rc-more > summary span::after { content: '⌄'; font-size: 15px; line-height: 1; transform: translateY(-3px); }
.rb-report[data-v="2"] .rc-more[open] > summary span::after { transform: rotate(180deg) translateY(-2px); }
.rb-report[data-v="2"] .rb-stats-grid { padding: 0 0 14px; gap: 6px 30px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rb-report[data-v="2"] .rb-stats-cat-hd { font: 700 10.5px var(--font-mono); letter-spacing: .08em; color: var(--text-muted); }
.rb-report[data-v="2"] .rb-stats-table td { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.rb-report[data-v="2"] .rb-stat-val { font: 650 13px var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.rb-report[data-v="2"] .rb-stat-per { font: 400 12px var(--font); font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 64px; }

.rb-report[data-v="2"] .rb-foot { padding: 13px 18px 13px 24px; font: 400 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--text-muted);
  background: var(--surface2); }
.rb-report[data-v="2"] .rb-foot .actions { order: -1; }
.rb-report[data-v="2"] .ra-btn { height: auto; padding: 8px 14px; font-weight: 650; }
.rb-report[data-v="2"] .ra-btn.primary::after { content: '→'; margin-left: 2px; }

/* The first half, while the verdict is written */
.rb-report[data-v="2"] .rc-sk > i { display: block; height: 11px; border-radius: 6px; margin: 0 0 11px;
  background: linear-gradient(90deg, var(--surface3) 0%, color-mix(in srgb, var(--accent) 16%, var(--surface3)) 40%, var(--surface3) 80%);
  background-size: 300% 100%; animation: sc-shim 1.7s linear infinite; }
.rb-report[data-v="2"] .rc-sk > i.lg { height: 15px; }
.rb-report[data-v="2"] .rc-sk > i.w9 { width: 92%; } .rb-report[data-v="2"] .rc-sk > i.w8 { width: 80%; }
.rb-report[data-v="2"] .rc-sk > i.w7 { width: 70%; } .rb-report[data-v="2"] .rc-sk > i.w6 { width: 58%; }
.rb-report[data-v="2"] .rc-sk > i.w4 { width: 40%; }
@keyframes sc-shim { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rb-report[data-v="2"] .rc-sk > i, .rb-report[data-v="2"] .rc-wr .rc-mk, .ch-by.live .ch-by-mark, .ch-step.now > i { animation: none; }
}

@media (max-width: 700px) {
  .msg-row.v2.user > .bubble, .rb-thread .ch-msg-user .bubble { max-width: 88%; }
  .rb-report[data-v="2"] .rc-hero { padding: 18px 16px 16px; }
  .rb-report[data-v="2"] .rc-open { display: none; }
  .rb-report[data-v="2"] .rc-id { gap: 14px; align-items: flex-start; padding-right: 0; }
  .rb-report[data-v="2"] .rc-ph { width: 70px; height: 70px; }
  .rb-report[data-v="2"] .rc-crest { width: 28px; height: 28px; }
  .rb-report[data-v="2"] .rc-crest img { width: 19px; height: 19px; }
  .rb-report[data-v="2"] .name { font-size: 25px; }
  .rb-report[data-v="2"] .sub { font-size: 12.5px; }
  .rb-report[data-v="2"] .rc-deal { font-size: 11.5px; }
  .rb-report[data-v="2"] .rc-tiles, .rb-report[data-v="2"] .rc-tiles.n3, .rb-report[data-v="2"] .rc-tiles.n2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rb-report[data-v="2"] .rc-tile.rank { grid-column: 1 / -1; }
  .rb-report[data-v="2"] .rc-tile { padding: 11px 12px 12px; }
  .rb-report[data-v="2"] .rc-tile > b { font-size: 22px; }
  .rb-report[data-v="2"] .rc-tile.rank > b { font-size: 24px; }
  .rb-report[data-v="2"] .rb-body { padding: 18px 16px 6px; }
  .rb-report[data-v="2"] .rb-narrative { padding-left: 14px; }
  .rb-report[data-v="2"] .rb-narrative p.lead { font-size: 16.5px; }
  .rb-report[data-v="2"] .rc-wr small { display: none; }
  .rb-report[data-v="2"] .rc-two, .rb-report[data-v="2"] .rb-comp-list { grid-template-columns: 1fr; }
  .rb-report[data-v="2"] .rb-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .rb-report[data-v="2"] .rb-foot .actions { order: 0; }
  .ch-steps .ch-step:not(.now):not(:nth-last-child(2)) { display: none; }
}

/* The chat's name stays on one line in the header, cut short with an ellipsis (the full name on
   hover), so a long name never makes the header two lines tall on a phone. */
#chat-header .ch-brand { flex: 1 1 auto; min-width: 0; }
#chat-header .ch-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#chat-header .ch-actions { flex: 0 0 auto; margin-left: 12px; }
@media (max-width: 700px) {
  /* An odd tile out on a phone takes the whole row rather than leave a gap beside it. */
  .rb-report[data-v="2"] .rc-tiles > .rc-tile.rank ~ .rc-tile:last-child:nth-child(even),
  .rb-report[data-v="2"] .rc-tiles > .rc-tile:first-child:not(.rank) ~ .rc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═══ W5 step 2 (2026-11-03, the mock Mo approved): a list's cards in two steps, a list's own
   line, and a plain answer's header. The list card shares data-v="2" with the scout card, whose
   rules are written for its dark header, so every rule here carries both attributes. ═══ */
.rc-lh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.rc-lh b { font: 800 22px var(--font-display); letter-spacing: -.015em; color: var(--text); }
.rc-lh span { flex: 0 0 auto; font-size: 12.5px; color: var(--text-muted); }

.rb-report[data-card="compact"][data-v="2"] { margin: 0 0 12px; border-radius: 22px; }
.rb-report[data-card="compact"][data-v="2"] .rc-pc { display: grid; grid-template-columns: 30px 66px minmax(0, 1fr) auto; align-items: start; gap: 0 16px; padding: 18px 20px 16px; }
.rb-report[data-card="compact"][data-v="2"] .rc-rk { font: 800 28px var(--font-display); line-height: 1; padding-top: 6px; color: var(--text-muted); opacity: .55; }
.rb-report[data-card="compact"][data-v="2"] .rc-ph { width: 66px; height: 66px; padding: 2.5px; box-shadow: none; }
.rb-report[data-card="compact"][data-v="2"] .rc-ini { font-size: 20px; }
.rb-report[data-card="compact"][data-v="2"] .rc-crest { width: 25px; height: 25px; right: -4px; bottom: -2px; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.rb-report[data-card="compact"][data-v="2"] .rc-crest img { width: 17px; height: 17px; }
.rb-report[data-card="compact"][data-v="2"] .rc-who { min-width: 0; padding-top: 3px; }
.rb-report[data-card="compact"][data-v="2"] .name { margin: 0 0 4px; font: 800 20px var(--font-display); letter-spacing: -.015em; line-height: 1.15; color: var(--text); }
.rb-report[data-card="compact"][data-v="2"] .sub { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.rb-report[data-card="compact"][data-v="2"] .rc-st { text-align: right; padding-top: 2px; }
.rb-report[data-card="compact"][data-v="2"] .rc-st b { display: block; font: 800 27px var(--font-mono); letter-spacing: -.03em; line-height: 1; color: var(--text); }
.rb-report[data-card="compact"][data-v="2"] .rc-st small { display: block; max-width: 200px; margin: 5px 0 0 auto; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
.rb-report[data-card="compact"][data-v="2"] .rc-st small.rc-gm { margin-top: 3px; opacity: .85; }
.rb-report[data-card="compact"][data-v="2"] .rc-chips { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.rb-report[data-card="compact"][data-v="2"] .rb-body { grid-column: 3 / -1; padding: 0; }
.rb-report[data-card="compact"][data-v="2"] .rc-sk { margin-top: 14px; }
.rb-report[data-card="compact"][data-v="2"] .rc-sk > i:nth-child(1), .rb-report[data-card="compact"][data-v="2"] .rc-sk > i:nth-child(3) { width: 92%; }
.rb-report[data-card="compact"][data-v="2"] .rc-sk > i:nth-child(2) { width: 80%; }
.rb-report[data-card="compact"][data-v="2"] .rc-sk > i:nth-child(4) { width: 58%; }
.rb-report[data-card="compact"][data-v="2"] .rb-narrative { margin: 12px 0 0; padding: 0; }
.rb-report[data-card="compact"][data-v="2"] .rb-narrative::before { content: none; }
.rb-report[data-card="compact"][data-v="2"] .rb-narrative p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }
.rb-report[data-card="compact"][data-v="2"] .rb-narrative p:first-child { color: var(--text); }
.rb-report[data-card="compact"][data-v="2"] .rc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.rb-report[data-card="compact"][data-v="2"] .rc-acts .ra-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px;
  font: 650 13px var(--font); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.rb-report[data-card="compact"][data-v="2"] .rc-acts .ra-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.rb-report[data-card="compact"][data-v="2"] .rc-go::after { content: '→'; }
.rb-report[data-card="compact"][data-v="2"] .rc-star::before { content: ''; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.rb-report[data-card="compact"][data-v="2"][data-preview] { animation: rc-in .35s ease both; }
@keyframes rc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 11px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); }
.rc-chip > b { font: 750 14px var(--font-mono); color: var(--text); }
.rc-chip > span { font-size: 11.5px; color: var(--text-muted); }
.rc-chip > em { font: 700 10px var(--font-mono); font-style: normal; color: var(--accent-text); background: var(--accent-soft); border-radius: 6px; padding: 2px 5px; }

/* A plain answer's header: the match, the player or the club, dark in both themes like the
   Matches hero, then the words. */
.ans-head { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  margin: 0 0 18px; padding: 18px 22px 16px; border-radius: 22px; color: #fff;
  background: radial-gradient(60% 140% at 0% 0%, rgba(99,102,241,.5), transparent 60%), radial-gradient(50% 140% at 100% 100%, rgba(6,182,212,.28), transparent 60%),
              linear-gradient(135deg, #0b1636, #10204a);
  animation: rc-in .35s ease both; }
.ans-head[data-kind="match"] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ans-head .ah-kick { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ans-head .ah-live { padding: 2px 7px; border-radius: 99px; background: #ef4444; color: #fff; letter-spacing: .06em; }
.ans-head .ah-tm { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ans-head .ah-tm.r { justify-content: flex-end; text-align: right; }
.ans-head .ah-tm img, .ans-head .ah-noc { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; padding: 6px; background: #fff; object-fit: contain; }
.ans-head .ah-tm b { display: block; font: 800 18px var(--font-display); line-height: 1.2; }
.ans-head .ah-tm span { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.78); }
.ans-head .ah-sc { font: 800 44px var(--font-display); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.ans-head .ah-sc em { font-style: normal; opacity: .5; margin: 0 8px; }
.ans-head .ah-ko { font: 700 15px var(--font-display); text-align: center; white-space: nowrap; color: rgba(255,255,255,.92); }
.ans-head .ah-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ans-head .ah-id b { display: block; font: 800 24px var(--font-display); letter-spacing: -.015em; line-height: 1.15; }
.ans-head .ah-id span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.78); }
.ans-head .ah-id span i, .ans-head .ah-ln > i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; margin: 0 7px; vertical-align: 3px; }
.ans-head .ah-crest { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; padding: 7px; background: #fff; object-fit: contain; }
.ans-head .rc-ph { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; padding: 2.5px; background: var(--spectrum); }
.ans-head .rc-ph > img.p { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e8edf6; }
.ans-head .rc-ph .rc-ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #1e2b52; font: 800 18px var(--font-display); }
.ans-head .rc-crest { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.ans-head .rc-crest img { width: 16px; height: 16px; object-fit: contain; }
.ans-head .ah-fig { text-align: right; }
.ans-head .ah-fig b { display: block; font: 800 34px var(--font-display); line-height: 1; letter-spacing: -.02em; }
.ans-head .ah-fig b small { font: 700 15px var(--font-display); opacity: .7; }
.ans-head .ah-fig > small { display: block; max-width: 240px; margin: 5px 0 0 auto; font-size: 12px; color: rgba(255,255,255,.75); }
.ans-head .ah-fig > small + small { margin-top: 2px; opacity: .85; }
.ans-head .ah-ln { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.ans-head .ah-ln b { color: #fff; font-weight: 650; }
.ans-head .ah-form { display: inline-flex; gap: 4px; margin-right: 10px; }
.ans-head .ah-form i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 700 11px var(--font-mono); font-style: normal; background: rgba(255,255,255,.28); }
.ans-head .ah-form i.w { background: #10b981; }
.ans-head .ah-form i.l { background: #ef4444; }
.ans-head .ah-go { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; cursor: pointer;
  font: 650 12.5px var(--font); color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.ans-head[data-kind="match"] .ah-go { justify-self: center; }
.ans-head .ah-go::after { content: '→'; }
.ans-head .ah-go:hover { background: rgba(255,255,255,.18); }
.ans-head + p, .ans-head + .md-sec + p { font-size: 17px; line-height: 1.55; color: var(--text); }
.ah-sk > i { display: block; height: 11px; border-radius: 6px; margin: 0 0 11px;
  background: linear-gradient(90deg, var(--surface3) 0%, color-mix(in srgb, var(--accent) 16%, var(--surface3)) 40%, var(--surface3) 80%);
  background-size: 300% 100%; animation: sc-shim 1.7s linear infinite; }
.ah-sk > i:nth-child(1) { width: 92%; } .ah-sk > i:nth-child(2) { width: 80%; } .ah-sk > i:nth-child(3) { width: 92%; }
.ah-sk > i:nth-child(4) { width: 64%; } .ah-sk > i:nth-child(5) { width: 80%; }
@media (prefers-reduced-motion: reduce) {
  .ah-sk > i, .ans-head, .rb-report[data-card="compact"][data-v="2"][data-preview] { animation: none; }
}
@media (max-width: 700px) {
  .rc-lh { flex-direction: column; gap: 4px; }
  .rc-lh b { font-size: 20px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-pc { grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px; padding: 15px 14px 13px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-rk { display: none; }
  .rb-report[data-card="compact"][data-v="2"] .rc-ph { width: 52px; height: 52px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-crest { width: 21px; height: 21px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-crest img { width: 14px; height: 14px; }
  .rb-report[data-card="compact"][data-v="2"] .name { font-size: 18px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-st { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; text-align: left; }
  .rb-report[data-card="compact"][data-v="2"] .rc-st b { font-size: 20px; }
  .rb-report[data-card="compact"][data-v="2"] .rc-st small { margin: 0; max-width: none; }
  .rb-report[data-card="compact"][data-v="2"] .rc-st small.rc-gm { flex-basis: 100%; }
  .rb-report[data-card="compact"][data-v="2"] .rc-chips, .rb-report[data-card="compact"][data-v="2"] .rb-body { grid-column: 1 / -1; }
  .ans-head { padding: 16px 14px 14px; gap: 10px 12px; }
  .ans-head[data-kind="match"] { gap: 8px 10px; }
  .ans-head .ah-tm { flex-direction: column; align-items: center; gap: 7px; text-align: center; }
  .ans-head .ah-tm.r { flex-direction: column-reverse; text-align: center; }
  .ans-head .ah-tm img, .ans-head .ah-noc { width: 40px; height: 40px; }
  .ans-head .ah-tm b { font-size: 14.5px; }
  .ans-head .ah-sc { font-size: 34px; }
  .ans-head .ah-id b { font-size: 20px; }
  .ans-head .ah-crest { width: 46px; height: 46px; }
  .ans-head .rc-ph { width: 50px; height: 50px; }
  .ans-head .ah-fig b { font-size: 26px; }
  .ans-head .ah-fig > small { max-width: 130px; }
  .ans-head + p { font-size: 16px; }
}

/* ═══ W5 step 3 (2026-11-03, the mock Mo approved): one input, the empty Ask screen, and what
   sits under each answer: where it came from, Copy, a thumb up or down, then Ask next. ═══ */

/* One input: on this screen the top bar's ask box steps aside (its space kept, so the masthead
   does not shift) and the screen's own box is the only place to type. */
body.chat-active #askwrap { visibility: hidden; }

/* The input, large on the empty screen and docked under a conversation: Find's colour edge, the
   day's questions left under it. */
.ch-say { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 20px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 5px rgba(37,99,235,.06), 0 20px 40px -28px rgba(37,99,235,.6); }
.input-wrap.ch-say { max-width: 820px; margin: 0 auto; border-radius: 20px; padding: 8px 8px 8px 18px; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box;
  box-shadow: 0 0 0 5px rgba(37,99,235,.05), 0 18px 40px -26px rgba(15,23,42,.45); }
.input-wrap.ch-say:hover, .input-wrap.ch-say:focus-within { border-color: transparent;
  box-shadow: 0 0 0 5px rgba(37,99,235,.1), 0 20px 40px -26px rgba(37,99,235,.6); }
#inputbar { border-top: 0; background: var(--bg); }
#inputbar #prompt { font-size: 15px; line-height: 1.45; letter-spacing: 0; padding: 9px 0; }
.ch-send, #send-btn.ch-send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; height: auto; padding: 11px 17px; border: 0; border-radius: 14px; background: var(--text); color: var(--bg);
  font: 750 13.5px var(--font); cursor: pointer; box-shadow: none; transition: transform .15s, box-shadow .15s; }
.ch-send svg, #send-btn.ch-send svg { width: 15px; height: 15px; }
.ch-send:hover, #send-btn.ch-send:hover { filter: none; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(15,23,42,.7); }
#send-btn.ch-send:hover svg { transform: none; }
#send-btn.ch-send:active { transform: scale(.96); }
#send-btn.ch-send.is-stop { background: var(--live, #e5392f); color: #fff; }
#send-btn.ch-send:disabled { opacity: .35; transform: none; box-shadow: none; }
.ch-meta { display: flex; align-items: center; gap: 10px; max-width: 820px; margin: 9px auto 0; padding: 0 6px;
  font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.ch-meta .ch-enter { margin-left: auto; text-align: right; }
.ch-pips { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: 1px; }
.ch-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .85; }
.ch-pips i.used { background: var(--border-strong); opacity: 1; }
#chat-header .ch-when { flex: 0 0 auto; margin-left: 2px; font-size: 12.5px; color: var(--text-muted); }
#chat-header .ch-when:empty { display: none; }

/* The empty Ask screen */
/* #welcome's own rules (an id) are the old centred column: these carry the id too. */
#welcome.ea-v2 { height: auto; min-height: 100%; display: block; max-width: 900px; margin: 0 auto; padding: 22px 20px 64px; text-align: left; }
.ea-hello { padding: 28px 0 8px; text-align: center; }
.ea-orb { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 2px;
  background: var(--spectrum); box-shadow: 0 18px 40px -18px rgba(37,99,235,.55); }
.ea-orb > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.ea-orb svg { width: 28px; height: 28px; }
.ea-hello h1 { margin: 16px 0 0; font: 800 42px var(--font-display); letter-spacing: -.025em; line-height: 1.05; color: var(--text); }
#welcome.ea-v2 .ea-hello p { margin: 12px auto 0; max-width: 540px; font-size: 15.5px; line-height: 1.55; letter-spacing: 0; color: var(--text-dim); }
.ea-big { margin: 28px auto 0; max-width: 760px; }
.ea-say { align-items: center; }
.ea-say .sp { color: var(--accent-text); flex: 0 0 auto; display: grid; }
.ea-say .sp svg { width: 19px; height: 19px; }
.ea-say input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 0;
  font: 400 16px/1.45 var(--font); color: var(--text); }
.ea-say input::placeholder { color: var(--text-muted); }
.ea-big .ch-meta { max-width: none; }
.ea-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 12px; }
.ea-sec[hidden], .ea-try[hidden], .ea-recent[hidden], .ea-sec button[hidden] { display: none; }
#welcome.ea-v2 .ea-sec h2 { margin: 0; font: 750 15.5px var(--font); letter-spacing: 0; color: var(--text); }
.ea-sec button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12.5px var(--font); color: var(--text-dim); }
.ea-sec button:hover { color: var(--text); }
.ea-sec button svg { width: 13px; height: 13px; }
.ea-try { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ea-tc { display: flex; flex-direction: column; gap: 9px; min-height: 178px; padding: 15px 15px 14px; border-radius: 18px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer; font: inherit; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ea-tc:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 18px 32px -24px rgba(15,23,42,.5); }
.ea-tc .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ea-tc .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.ea-tc .ic svg { width: 17px; height: 17px; }
.ea-tc .faces { display: flex; }
.ea-tc .faces img { width: 30px; height: 30px; margin: 0 0 0 -8px; border-radius: 50%; object-fit: cover; background: #e8edf6; border: 2px solid var(--surface); }
.ea-tc .faces img.crest { object-fit: contain; background: #fff; padding: 3px; }
.ea-tc .k { font: 700 12px var(--font); color: var(--text-muted); }
.ea-tc .q { font: 650 15px/1.35 var(--font); letter-spacing: -.005em; color: var(--text); }
.ea-tc .w { margin-top: auto; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.ea-tc-sk { cursor: default; }
.ea-tc-sk:hover { transform: none; box-shadow: none; border-color: var(--border); }
.ea-tc-sk i { display: block; height: 11px; border-radius: 6px; background: var(--surface3); }
.ea-tc-sk i:first-child { width: 34px; height: 34px; border-radius: 11px; }
.ea-tc-sk i:nth-child(2) { width: 82%; margin-top: 22px; }
.ea-tc-sk i:nth-child(3) { width: 58%; }
.ea-recent { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.ea-rc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--border);
  background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ea-rc:first-child { border-top: 0; }
.ea-rc:hover { background: var(--surface2); }
.ea-rc .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface3); color: var(--text-muted); }
.ea-rc .ic svg { width: 15px; height: 15px; }
.ea-rc .ti { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px var(--font); color: var(--text); }
.ea-rc .wh { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
#welcome.ea-v2 .ea-cover { max-width: none; margin: 28px 0 0; text-align: center; font-size: 12.5px; letter-spacing: 0; color: var(--text-muted); }

/* Under each answer: where it came from, Copy and the thumbs; a thumb down asks why */
.ch-foot { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: 10px 0 0; }
.bubble > .ch-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--border); }
.ch-src { min-width: 0; margin-right: 6px; font-size: 12px; line-height: 1.4; color: var(--text-muted); text-align: right; }
.ch-src:empty { display: none; }
.ch-ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 0;
  background: none; color: var(--text-muted); cursor: pointer; }
.ch-ico svg { width: 16px; height: 16px; }
.ch-ico:hover { background: var(--surface3); color: var(--text); }
.ch-ico.on { color: var(--accent-text); background: var(--accent-soft); }
.ch-ico.ok { color: #10b981; }
.ch-sep { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 4px; background: var(--border); }
.ch-why { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 6px 0 0;
  font-size: 12.5px; color: var(--text-dim); }
.ch-why > span { margin-right: 2px; }
.ch-why-b { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font: 600 12px var(--font); color: var(--text); }
.ch-why-b:hover { border-color: var(--border-strong); }

/* Ask next: each question asks first, like every question the app writes */
.ch-next { margin: 16px 0 0; }
.ch-next-h { margin: 0 0 9px; font: 700 12.5px var(--font); color: var(--text-muted); }
.ch-next-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-nq { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: left; font: 550 13.5px/1.35 var(--font); color: var(--text); }
.ch-nq:hover { border-color: var(--border-strong); box-shadow: 0 10px 22px -18px rgba(15,23,42,.5); }
.ch-nq svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--accent-text); }

@media (max-width: 960px) {
  .ea-try { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #welcome.ea-v2 { padding: 6px 14px 96px; }   /* the bottom bar's room, as #welcome had */
  .ea-hello { padding: 20px 0 4px; }
  .ea-hello h1 { font-size: 31px; }
  #welcome.ea-v2 .ea-hello p { font-size: 14.5px; }
  .ea-big { margin-top: 20px; }
  .ch-say, .input-wrap.ch-say { padding-left: 14px; }
  .ch-send span, #send-btn.ch-send span { display: none; }
  .ch-send, #send-btn.ch-send { padding: 11px 13px; }
  .ch-meta .ch-enter { display: none; }
  .ea-sec { margin-top: 30px; }
  /* The row runs to the screen's edges so it can swipe; scroll-padding keeps the snapped card on the
     page's 14px gutter (snapping ignores padding: the first card sat at the edge, out of line with the
     title and the chats below, 5 Nov), and each card leaves the next one a clear 60px peek rather than
     cutting through its title. A sideways scroller clips above and below too, so the row keeps room
     for a hovered card's lift and shadow (they were cut off at the top and in a band underneath),
     given back by its margins so nothing around it moves. */
  .ea-try { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; gap: 10px;
    margin: -6px -14px -20px; padding: 6px 14px 26px; scrollbar-width: none; }
  .ea-try::-webkit-scrollbar { display: none; }
  .ea-tc { flex: 0 0 calc(100% - 56px); scroll-snap-align: start; min-height: 0; }
  #chat-header .ch-when { display: none; }
  .ch-src { flex: 1 1 auto; text-align: left; margin-right: 8px; }
}
/* The chats drawer sits off screen on a phone, and its shadow showed as a grey band down the
   left edge of Ask: it has the shadow only while open. */
@media (max-width: 600px) {
  #chat-rail:not(.drawer-open) { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ea-tc, .ch-send, #send-btn.ch-send { transition: none; }
  .ea-tc:hover, .ch-send:hover, #send-btn.ch-send:hover { transform: none; }
}

/* ═══ W5 step 4 (2026-11-03, the mock Mo approved): The Prism's read on a player page, under his
   header: the latest checked scout report on him as its lead, three strengths and two concerns,
   the card's judgement behind "Read the full report", and one slim line when there is none. ═══ */
.pp-read { margin: 0 0 18px; }
.pp-read[hidden] { display: none; }
.pp-rd { position: relative; padding: 20px 22px 16px; border-radius: 22px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box;
  border: 1.5px solid transparent; box-shadow: 0 24px 50px -40px rgba(37,99,235,.55); }
.pp-rd-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.pp-rd-hd > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-rd-hd b { font: 750 15px var(--font); color: var(--text); }
.pp-rd-hd small { font-size: 12px; color: var(--text-muted); text-align: right; }
.pp-rd-mk { display: inline-flex; flex: 0 0 auto; color: var(--text); }
.pp-rd-v { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.pp-rd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-rd-col { padding: 12px 14px 4px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); }
.pp-rd-col h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 12.5px var(--font); color: var(--text); }
.pp-rd-col h3 i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.pp-rd-col.bad h3 i { background: #f59e0b; }
.pp-rd-col p { margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.pp-rd-col p b { color: var(--text); font-weight: 650; }
.pp-rd .hl { font: inherit; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; padding: 0 1px;
  background: linear-gradient(transparent 68%, rgba(37,99,235,.11) 68%); }
body.dark .pp-rd .hl { background: linear-gradient(transparent 68%, rgba(96,165,250,.2) 68%); }
.pp-rd-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0;
  font-size: 12px; color: var(--text-muted); }
.pp-rd-ft button, .pp-rd-none button, .pp-rd-less { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font: 650 12.5px var(--font); color: var(--text); }
.pp-rd-ft button:hover, .pp-rd-none button:hover, .pp-rd-less:hover { border-color: var(--border-strong); }
.pp-rd-ft button:disabled { opacity: .6; cursor: default; }
.pp-rd-none { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 18px; }
.pp-rd-none > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pp-rd-none b { font: 750 14px var(--font); color: var(--text); }
.pp-rd-none span { font-size: 13px; color: var(--text-muted); }
/* The full report: the card's judgement only, his own header being the page's */
.pp-rd-full .rb-report[data-v="2"] { border: 0; box-shadow: none; border-radius: 0; background: none; overflow: visible; }
.pp-rd-full .rb-report[data-v="2"] .rc-hero, .pp-rd-full .rb-report[data-v="2"] .rb-foot { display: none; }
.pp-rd-full .rb-report[data-v="2"] .rb-body { padding: 2px 0 4px; }
@media (max-width: 700px) {
  .pp-rd { padding: 16px 14px 12px; border-radius: 18px; }
  .pp-rd-hd { flex-wrap: wrap; }
  .pp-rd-hd small { text-align: left; }
  .pp-rd-v { font-size: 15.5px; }
  .pp-rd-cols { grid-template-columns: 1fr; }
  .pp-rd-ft { flex-direction: column; align-items: stretch; }
  .pp-rd-ft button { justify-content: center; }
  .pp-rd-none { flex-wrap: wrap; }
  .pp-rd-none button { width: 100%; justify-content: center; }
}

/* ── Home in chapters (W6, 2026-11-04) ───────────────────────────────────────────────────────
   This matchday, Players to watch, Your lists, The news, Pick up where you left off and How The
   Prism scores, in the club page's language: a plain title and one line, cards sized to their
   content, no code tags. The terminal panels that move in (the gameweek, indexes, the shortlist,
   the window, the method) wear the card here only; Leagues and The Wire keep theirs for now. */
#home-panel .hm-ch { margin: 26px 16px 0; min-width: 0; scroll-margin-top: 14px; }
#home-panel #hm-method { margin-bottom: 44px; }
.hm-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.hm-hd > div { min-width: 0; }
.hm-hd h2 { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.hm-hd p { margin: 4px 0 0; max-width: 76ch; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.hm-link { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); background: none; border: 0; padding: 0 2px 2px; cursor: pointer; white-space: nowrap; }
.hm-link:hover { text-decoration: underline; }
#home-panel .home-flow { display: block; padding: 0; }
#home-panel #hm-matchday #home-gameweek, #home-panel #hm-news #home-wire-panels { padding: 0; margin: 0; }
#home-panel #home-board { padding: 0; }
.hm-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hm-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hm-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
#home-panel .hm-g3 > .ix-intro { grid-column: span 2; }
#home-panel .hm-g3 > .ix-intro:only-child { grid-column: 1 / -1; }

/* Cards that hold rows: the rows run edge to edge. */
.hm-card { padding: 15px 0 8px; overflow: hidden; }
.hm-cardhd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; padding: 0 16px; flex-wrap: wrap; }
.hm-cardhd > div { min-width: 0; flex: 1 1 220px; }
.hm-card .cl-sub { margin: 3px 0 10px; }
.hm-tabs { padding: 2px 16px 12px; }
.hm-sw { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.hm-sw::-webkit-scrollbar { display: none; }
.hm-sw .pd-mode-btn { white-space: nowrap; }
.hm-none { margin: 4px 16px 10px; font-size: 13px; color: var(--text-dim); }
.hm-showall { display: none; }
.hm-allscout { display: block; width: 100%; text-align: left; padding: 10px 16px 8px; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.hm-allscout:hover { text-decoration: underline; }
#home-panel .hm-ch .ix-cols { padding: 3px 16px 6px; font-family: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; }
#home-panel .hm-ch .trow { padding: 8px 16px; font-size: 13px; gap: 10px; }
#home-panel .hm-ch .trow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#home-panel .hm-ch .trow .php { width: 30px; height: 30px; }
#home-panel .hm-ch .trow .rk { width: 16px; font-size: 11px; }
#home-panel .hm-ch .trow .nm small { font-size: 11.5px; }
#home-panel .hm-ch .trow .tscore { font-size: 13.5px; }
#home-panel .hm-ch .trow .val { font-size: 13px; }
#home-panel .hm-ch .trow .val.hm-ok { color: var(--success); }

/* The terminal panels that move into a chapter wear the card. */
#home-panel .hm-ch .term-panel { grid-column: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
#home-panel .hm-ch .term-panel > .term-hd { background: none; border: 0; padding: 15px 16px 0; align-items: flex-start; }
#home-panel .hm-ch .term-panel > .term-hd .t { font-family: inherit; font-size: 14.5px; font-weight: 720; letter-spacing: -.005em;
  text-transform: none; color: var(--text); }
#home-panel .hm-ch .term-panel > .term-hd .code { display: none; }
#home-panel .hm-ch .term-panel > .term-note { background: none; border: 0; padding: 3px 16px 10px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
#home-panel .hm-ch .ix-edit { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: none; border: 0;
  padding: 0; text-transform: none; letter-spacing: 0; }
#home-panel .hm-ch .term-cta { font-family: inherit; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 10px 16px 8px; text-align: left; }
#home-panel .hm-ch .ix-new { min-height: 112px; border-style: dashed; }

/* This matchday: the gameweek in the chapter's type, each league with its leader. */
#hm-matchday .gw-panel { overflow: hidden; }
#hm-matchday .gw-lhead { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); padding: 12px 12px 1px; }
#hm-matchday .gw-round, #hm-matchday .tsub-md, #hm-matchday .tsub-meta, #hm-matchday .gw-more { font-family: inherit; letter-spacing: 0; text-transform: none; }
#hm-matchday .gw-round { font-size: 11px; }
#hm-matchday .tsub-md { font-size: 11px; font-weight: 650; border: 0; padding: 0; color: var(--text-dim); }
.gw-top { padding: 0 12px 6px; font-size: 11.5px; color: var(--text-dim); }
.gw-top b { color: var(--text); font-weight: 650; }
.hm-perf { margin-top: 14px; padding: 15px 16px 16px; }
.hm-perf .mt-pts { margin-top: 12px; grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* The news: two columns of four. */
/* Read across, two to a row (5 Nov 2026), so a story opened in place (hmStory) spans the row
   under its pair. Counted among the headlines only, since the open story sits between them. */
#hm-news #hw-news-rows.hw-news-2col { grid-template-rows: none; grid-auto-flow: row; }
#hm-news #hw-news-rows.hw-news-2col .hw-news-row { border-left: 0; }
#hm-news #hw-news-rows.hw-news-2col .hw-news-row:nth-child(even of .hw-news-row) { border-left: 1px solid var(--border); }
#hm-news #hw-news-rows.hw-news-2col .hw-news-row:nth-child(-n+2 of .hw-news-row) { border-top: 0; }
#hm-news #hw-news-rows.hw-news-2col .hw-news-row:nth-child(n+9 of .hw-news-row) { display: none; }
#hm-news #hw-news-rows .hm-reader { grid-column: 1 / -1; margin: 6px 0 10px; }
#home-panel .hw-news-row.hw-open, #home-panel .yc-nw.hw-open { background: var(--surface2); }
#yc-slot .hm-reader { margin: 12px 0 0; }
#hm-window:not(:empty) { margin-top: 14px; }

/* Pick up where you left off: the kind as a plain word, not a tag. */
#home-recents-band .home-recents-row { display: flex; flex-wrap: wrap; gap: 8px; }
#home-recents-band .hrc-kind { font-family: inherit; font-size: 11.5px; letter-spacing: 0; text-transform: capitalize;
  background: none; color: var(--text-dim); padding: 0 2px 0 0; border: 0; }

@media (max-width: 1180px) {
  .hm-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-perf .mt-pts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #home-panel .hm-ch { margin: 22px 10px 0; }
  #home-panel #hm-method { margin-bottom: 96px; }
  .hm-g2, .hm-g3 { grid-template-columns: minmax(0, 1fr); }
  #home-panel .hm-g3 > .ix-intro { grid-column: auto; }
  .hm-card:not(.hm-all) .trow.hm-x { display: none; }
  .hm-card:not(.hm-all) .hm-showall { display: block; width: 100%; text-align: left; padding: 10px 16px 8px; border: 0;
    background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
  .hm-perf .mt-pts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 12px -16px 0;
    padding: 0 16px 4px; scrollbar-width: none; }
  .hm-perf .mt-pts::-webkit-scrollbar { display: none; }
  .hm-perf .mt-pt { flex: 0 0 136px; scroll-snap-align: start; }
  #hm-news #hw-news-rows > .hw-news-row:nth-child(-n+4 of .hw-news-row) { display: flex; }
  #hm-news #hw-news-rows > .hw-news-row:nth-child(n+5 of .hw-news-row) { display: none; }
  #hm-news #hw-news-rows.hw-news-2col .hw-news-row:nth-child(-n+2 of .hw-news-row) { border-top: 1px solid var(--border); }
  #hm-news #hw-news-rows.hw-news-2col .hw-news-row:first-child { border-top: 0; }
}

/* ── Your club band, W6 step 2 (2026-11-05) ──────────────────────────────────────────────────
   Team news by name, the leader on top of the table, both sides of the race, the result after
   full time until the next morning (.yc-res), and on a phone a swipe row of the three cards with
   dots, the card's button beside the date and the pitch one side at a time. */
.yc-wsep { font-style: normal; }
.yc-btn-top { display: none; }
#yc-slot .yc-tn { line-height: 1.6; }
.yc-goals { margin: 0; padding: 9px 0 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.yc-goals b { color: var(--text); font-weight: 700; }
.yc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.yc-foot .yc-btn { margin-top: 0; }
.yc-foot span { font-size: 12px; color: var(--text-dim); }
.yc-foot span b { color: var(--text); font-weight: 700; }
.ycp-sw { display: none; }
.yc-dots { display: none; }
#yc-slot .ycf-wait { grid-column: 1 / -1; grid-row: 1 / -1; white-space: nowrap; }
@media (max-width: 720px) {
  #yc-slot .yc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; align-items: flex-start;
    margin: 0 -10px; padding: 0 10px 2px; scrollbar-width: none; }
  #yc-slot .yc-grid::-webkit-scrollbar { display: none; }
  #yc-slot .yc-col { display: contents; }
  #yc-slot .yc-grid > .cl-card, #yc-slot .yc-col > .cl-card { flex: 0 0 86%; scroll-snap-align: center; margin: 0; min-width: 0; }
  .yc-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
  .yc-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .2s, background .2s; }
  .yc-dots i.on { width: 16px; background: var(--accent); }
  #yc-slot .yc-when { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #yc-slot .yc-wt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  #yc-slot .yc-wt > span { font-size: 11.5px; }
  #yc-slot .yc-wsep { display: none; }
  #yc-slot .yc-btn-top { display: inline-flex; margin: 0; padding: 6px 12px; font-size: 12px; flex-shrink: 0; }
  #yc-slot .yc-btn-foot { display: none; }
  #yc-slot .yc-tie img { width: 32px; height: 32px; }
  #yc-slot .ycp-hd { flex-direction: column; align-items: flex-start; gap: 1px; }
  #yc-slot .ycp-sw { display: flex; margin: 0 0 8px; }
  #yc-slot .ycp-sw .pd-mode-row { width: 100%; }
  #yc-slot .ycp-sw .pd-mode-btn { flex: 1; }
  #yc-slot .ycp[data-side="us"] .ycp-half.them, #yc-slot .ycp[data-side="them"] .ycp-half.us { display: none; }
  #yc-slot .ycp .ycp-pitch::before, #yc-slot .ycp .ycp-pitch::after { display: none; }
  #yc-slot .ycp .ycp-half { padding: 8px 0 6px; gap: 9px; }
  #yc-slot .ycp .ycp-row span { max-width: 34%; font-size: 11px; padding: 3px 7px; }
}

/* ── The shell, W6 step 4 (2026-11-05) ───────────────────────────────────────────────────────
   The description line under the nav goes (every screen has its own header now), a text blue that
   reads on dark, a focus ring for keyboard users, phone tap targets, and Leagues and The Wire in
   Home's panel headings. */
#orient { display: none; }

/* --accent stays the fill and button blue (white text on it is 5.2:1). Text in blue reads
   --accent-text: the same blue in light mode, a lighter one in dark (6.5:1 on #1a1a1a, where
   #2563EB was 3.4:1). */
:root { --accent-text: var(--accent); }
body.dark { --accent-text: #6f9bff; }

/* A focus ring wherever a keyboard lands; a pointer never shows it (focus-visible). */
:where(button, a, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Leagues and The Wire take Home's panel headings: a sentence-case title in the page's own type,
   no code tag, the note a quiet line. Matches keeps its own. */
:is(#pulse-panel, #wire-panel) .term-panel { border-radius: 14px; }
:is(#pulse-panel, #wire-panel) .term-panel > .term-hd { background: none; border-bottom: 0; padding: 14px 16px 2px; align-items: flex-start; }
:is(#pulse-panel, #wire-panel) .term-panel > .term-hd .t { font-family: inherit; font-size: 14.5px; font-weight: 720;
  letter-spacing: -.005em; text-transform: none; color: var(--text); }
:is(#pulse-panel, #wire-panel) .term-panel > .term-hd .code { display: none; }
:is(#pulse-panel, #wire-panel) .term-panel > .term-note { background: none; padding: 2px 16px 10px; font-size: 12px;
  line-height: 1.45; color: var(--text-dim); }

/* Tap targets on a phone: the larger area is invisible, so nothing moves. */
@media (max-width: 720px) {
  #mx-close { width: 44px; height: 44px; top: 10px; right: 10px; }
  #ask-subject .asx { position: relative; }
  #ask-subject .asx::after { content: ''; position: absolute; inset: -14px; }
  .pd-mode-btn { position: relative; }
  .pd-mode-btn::after { content: ''; position: absolute; inset: -8px 0; }
  .mw-range-btn { padding-top: 10px; padding-bottom: 10px; }
  #home-panel .hm-ch .ix-edit { position: relative; }
  #home-panel .hm-ch .ix-edit::after { content: ''; position: absolute; inset: -12px -8px; }
}

/* ── Home: Your lists, Leaders and the matchday numbers (W6, 2026-11-05) ─────────────────────
   New list sits in Your lists' heading and Scout's ready-made searches go on Home in one tap (a
   card with no lists yet, chips under them after); a list just made is ringed once it is in view.
   On a wide screen Leaders shows every list at once (.hm-lead-all), three deep; narrower, the
   switch (.hm-lead-sw). Above the results, one line of the matchday's numbers (.gw-nums). */
.hm-newlist { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 15px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 650;
  color: var(--text); cursor: pointer; white-space: nowrap; }
.hm-newlist span { color: var(--accent-text); font-size: 16px; line-height: 1; font-weight: 600; }
.hm-newlist:hover { border-color: var(--accent); }
#home-panel .hm-g3 > .hm-ready { grid-column: span 2; }
#home-panel .hm-g3 > .hm-ready:only-child { grid-column: 1 / -1; }
.hm-ready { padding-bottom: 0; }
.hm-ready .cl-sub { margin-bottom: 10px; }
.hm-rdy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
.hm-rdy-t { min-width: 0; }
.hm-rdy-t b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.hm-rdy-t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.hm-rdy-add { flex-shrink: 0; min-height: 32px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--accent); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.hm-rdy-add:hover { filter: brightness(1.08); }
.hm-rdy-add:disabled, .hm-rdy-chip:disabled { opacity: .55; cursor: default; }
.hm-rdyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hm-rdyrow-k { margin-right: 2px; font-size: 12.5px; color: var(--text-dim); }
.hm-rdy-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.hm-rdy-chip span { color: var(--accent-text); font-weight: 700; }
.hm-rdy-chip:hover { border-color: var(--accent); }
#home-panel .hm-ch .ix-panel { transition: box-shadow .5s ease; }
#home-panel .hm-ch .ix-panel.hm-justadded { box-shadow: 0 0 0 2px var(--accent); }

.hm-lead-all { display: none; }
.hm-lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.hm-lg { min-width: 0; padding: 10px 0 6px; border-bottom: 1px solid var(--border); }
.hm-lg:nth-child(odd) { border-right: 1px solid var(--border); }
.hm-lg:last-child, .hm-lg:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.hm-lg-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 14px 4px; }
.hm-lg-hd > div { min-width: 0; }
.hm-lg-hd b { display: block; font-size: 13px; font-weight: 720; color: var(--text); }
.hm-lg-hd small { display: block; margin-top: 1px; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-lg-cols { display: flex; gap: 10px; flex-shrink: 0; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.hm-lg-cols .hm-ok { color: var(--success); }
#home-panel .hm-ch .hm-lg .trow { padding: 5px 14px; gap: 8px; }
#home-panel .hm-ch .hm-lg .trow .php { width: 24px; height: 24px; }
.hm-lg .trow .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-lg:not(.hm-lg-open) .trow.hm-lg-x { display: none; }
.hm-lg-more { display: inline-flex; align-items: center; gap: 7px; margin: 3px 0 1px 8px; padding: 4px 9px; border: 0; border-radius: 99px;
  background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-dim); cursor: pointer;
  transition: color .12s, background .12s; }
.hm-lg-more:hover { color: var(--accent-text); background: var(--surface2); }
.hm-lg-more:focus-visible { outline-offset: 1px; }
.hm-lg-more i { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg); transition: transform .15s; }
.hm-lg-open .hm-lg-more i { transform: translateY(1px) rotate(-135deg); }
@media (min-width: 1181px) {
  #hm-lead .hm-lead-sw { display: none; }
  #hm-lead .hm-lead-all { display: block; }
}

.gw-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-right: auto; padding-left: 4px;
  font-size: 12px; color: var(--text-dim); }
.gw-nums b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.gw-nums .gw-n-live b { color: var(--danger); }
.gw-n-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.gw-n-link:hover { color: var(--accent-text); text-decoration: underline; }

/* The Leaders switch (below 1181px wide): three to a row under the title, never running off the
   side, with the line that changes below it. Its height is kept steady at two lines. */
.hm-tabs-grid { padding: 4px 16px 10px; }
.hm-tabs-grid .hm-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0;
  overflow: visible; border-radius: 14px; }
.hm-tabs-grid .hm-sw .pd-mode-btn { min-width: 0; padding: 7px 4px; text-align: center; border-radius: 11px;
  overflow: hidden; text-overflow: ellipsis; }
.hm-card .hm-lead-note { margin: 0; padding: 0 16px 6px; min-height: calc(2 * 1.45em + 6px); }
#home-panel .hm-ch .ix-cols .hm-cols-min { margin-right: auto; color: var(--text-dim); }

/* Best performances on a narrow screen is a swipe row: room above and below so a card lifted
   on hover, and its shadow, are never cut off. On touch, no lift at all (it stuck after a tap). */
@media (hover: none) {
  .mt-pt:hover { transform: none; border-color: var(--border); box-shadow: none; }
}

@media (max-width: 720px) {
  #home-panel .hm-g3 > .hm-ready, #home-panel .hm-g3 > .hm-ready:only-child { grid-column: auto; }
  .hm-rdy { align-items: flex-start; }
  .hm-rdyrow-k { flex-basis: 100%; }
  .gw-nums { order: 3; width: 100%; padding: 4px 2px 0; }
  .hm-perf .mt-pts { padding-top: 4px; padding-bottom: 16px; margin-top: 8px; margin-bottom: -12px; }
  .hm-perf .yc-dots { margin-top: 12px; }
  /* Phones: each name with its club and figures on a second line, so nothing is cut off. */
  #home-panel .hm-ch .trow .nm { white-space: normal; line-height: 1.3; }
  #home-panel .hm-ch .trow .nm small { display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .hm-tabs-grid .hm-sw .pd-mode-btn { padding: 7px 2px; font-size: 13px; }
}
@media (max-width: 420px) {
  .hm-tabs-grid .hm-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Form in Leaders (W6, 2026-11-05): the last five ratings as bars, oldest first, 7.5 and up in
   green, beside their average. */
.hm-form { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 8px; flex-shrink: 0; }
.hm-form i { width: 4px; border-radius: 1px; background: var(--text-muted); opacity: .55; }
.hm-form i.hi { background: var(--success); opacity: 1; }
/* An odd list out takes the whole last row of the Leaders grid rather than leaving half of it empty. */
.hm-lgrid > .hm-lg:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

/* ── The foot of Home, redone (2026-11-06, Mo: bland, and the shortlist sat in a corner) ────────
   The scout board fifteen deep on a wide screen (ten narrower, where Leaders is a switch); Your
   shortlist as a chapter of Scout's cards; ready-made lists that show their top three; Pick up
   where you left off as photo cards; How The Prism scores as a card with its steps numbered. */
@media (max-width: 1180px) {
  #home-panel .hm-card:not(.hm-all) .trow.hm-wide { display: none; }
}

.hm-sl-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.hm-sl-row > .sc-card { margin: 0; }
.hm-sl-row > .sc-card.sc-skel { min-height: 280px; }
.hm-sl-empty { display: flex; flex-direction: column; gap: 10px; }
.hm-sl-k { font-size: 12.5px; color: var(--text-dim); }
.hm-sl-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hm-sl-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hm-sl-who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; font: inherit;
  text-align: left; color: inherit; cursor: pointer; }
.hm-sl-who b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sl-who small { display: block; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-sl-who > span:last-child { min-width: 0; }
.hm-sl-ph { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface2); display: grid; place-items: center; }
.hm-sl-ph img { width: 100%; height: 100%; object-fit: cover; }
.hm-sl-save { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-height: 30px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.hm-sl-save svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-text); stroke-width: 2; }
.hm-sl-save:hover { border-color: var(--accent); }

.hm-rd-k { margin: -2px 0 12px; font-size: 13px; color: var(--text-dim); }
.hm-rd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-rd { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hm-rd > b { font-size: 14.5px; font-weight: 720; color: var(--text); }
.hm-rd-s { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.hm-rd-who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; margin-top: 2px; }
.hm-rd-faces { display: flex; flex-shrink: 0; }
.hm-rd-f { width: 32px; height: 32px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--surface); background: var(--surface2);
  overflow: hidden; display: grid; place-items: center; }
.hm-rd-f:first-child { margin-left: 0; }
.hm-rd-f img { width: 100%; height: 100%; object-fit: cover; }
.hm-rd-f .mt-ini { font-size: 10px; }
.hm-rd-names { min-width: 0; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rd .hm-rdy-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; background: var(--surface);
  color: var(--text); border: 1px solid var(--border); }
.hm-rd .hm-rdy-add span { color: var(--accent-text); font-size: 15px; line-height: 1; }
.hm-rd .hm-rdy-add:hover { filter: none; border-color: var(--accent); }

#home-recents-band .home-recents-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hrc-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.hrc-card:hover { border-color: var(--text-dim); transform: translateY(-1px); box-shadow: 0 10px 22px -18px rgba(15,23,42,.45); }
.hrc-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface2); display: grid; place-items: center; }
.hrc-av img { width: 100%; height: 100%; object-fit: cover; }
.hrc-av.crest { border-radius: 10px; background: none; }
.hrc-av.crest img { object-fit: contain; }
.hrc-av .mt-ini { font-size: 12px; }
.hrc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hrc-tx b { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrc-tx small { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hm-mcard { padding: 0; overflow: hidden; }
.hm-mcard .mspec { height: 3px; }
.hm-m-lead { margin: 16px 18px 2px; max-width: 82ch; font-size: 14px; line-height: 1.55; color: var(--text); }
.hm-m-steps { list-style: none; margin: 0; padding: 12px 18px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.hm-m-steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-m-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--spectrum);
  color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.hm-m-steps b { font-size: 13.5px; font-weight: 720; color: var(--text); }
.hm-m-steps .t { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.hm-m-more { display: none; }

@media (max-width: 1180px) {
  .hm-sl-row, .hm-rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #home-recents-band .home-recents-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-m-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hm-sl-row, .hm-rd-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -10px; padding: 2px 10px 6px;
    scrollbar-width: none; }
  .hm-sl-row::-webkit-scrollbar, .hm-rd-grid::-webkit-scrollbar { display: none; }
  .hm-sl-row, .hm-rd-grid, #home-recents-band .home-recents-row { scroll-padding: 0 10px; }
  .hm-sl-row > .sc-card { flex: 0 0 86%; scroll-snap-align: start; }
  .hm-rd-grid > .hm-rd { flex: 0 0 78%; scroll-snap-align: start; }
  .hm-sl-dots, .hm-rd-dots { margin-top: 10px; }
  .hm-sl-picks { grid-template-columns: 1fr; }
  #home-recents-band .home-recents-row { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -10px;
    padding: 2px 10px 6px; scrollbar-width: none; }
  #home-recents-band .home-recents-row::-webkit-scrollbar { display: none; }
  .hrc-card { flex: 0 0 66%; scroll-snap-align: start; padding: 10px 12px; gap: 10px; }
  .hrc-tx b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hrc-av { width: 36px; height: 36px; }
  .hm-m-steps { grid-template-columns: 1fr; gap: 14px; padding-top: 6px; }
  .hm-m-steps li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 3px; }
  .hm-m-steps .n { grid-row: 1 / 3; }
  .hm-mcard:not(.open) .hm-m-steps { display: none; }
  .hm-m-more { display: inline-flex; align-items: center; min-height: 34px; margin: 8px 18px 16px; padding: 0 14px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
}
@media (min-width: 721px) {
  .hm-sl-dots, .hm-rd-dots { display: none; }
}

/* Find: the three ways in, under the title (2026-11-07, Mo: the header named two, and nothing said the
   filters were a way in of their own). Three across on a wide screen, a short column on a phone. Each is a
   button that shows where its way is: the box takes the cursor, the ready-made searches and the filters
   come into view and light up for a moment (.sc-lit). The header is dark in both themes. */
.sc-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sc-ways li { display: flex; min-width: 0; }
.sc-way { position: relative; display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 12px 14px; text-align: left;
  color: #fff; font: inherit; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px; transition: background .15s, border-color .15s; }
.sc-way:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.sc-way:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.sc-way-i { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.08); }
.sc-way-i svg { width: 17px; height: 17px; fill: none; stroke: #a5d8ff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc-way-i .pv-spark { width: 18px; height: 18px; stroke: none; }
.sc-way-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-way-t b { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.sc-way-t small { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.68); }
.sc-way-go { display: none; }
.sc-way-go svg { width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; }
.sc-filters, .sc-ready-row { scroll-margin: 14px; }
@keyframes sc-lit {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,0); border-color: var(--border); }
  22% { box-shadow: 0 0 0 4px rgba(37,99,235,.24); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); border-color: var(--border); }
}
.sc-filters.sc-lit, .sc-ready-row.sc-lit .sc-rm { animation: sc-lit 1.6s ease-out; }
.sc-ready-row.sc-lit .sc-rm:nth-child(2) { animation-delay: .08s; }
.sc-ready-row.sc-lit .sc-rm:nth-child(3) { animation-delay: .16s; }
.sc-ready-row.sc-lit .sc-rm:nth-child(4) { animation-delay: .24s; }
/* Narrower, where three boxes would squeeze their labels: a plain column of the three, hairlines between,
   an arrow saying each one jumps down the page (a chevron read as a dropdown that opens). */
@media (max-width: 900px) {
  .sc-ways { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 14px; border-top: 1px solid rgba(255,255,255,.12); }
  .sc-way, .sc-way:hover { align-items: center; padding: 9px 2px; background: none; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; }
  .sc-way-t small { display: none; }
  .sc-way-i { width: 28px; height: 28px; border-radius: 8px; }
  .sc-way-go { display: grid; place-items: center; margin-left: auto; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-filters.sc-lit, .sc-ready-row.sc-lit .sc-rm { animation: none; }
  .sc-way { transition: none; }
}
/* ─── Sign-in box: Google button (web launch, Phase 1) ─────────────────────
   Appended last so it wins over the inherited invite-card rules. */
#google-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
#google-signin:hover { border-color: var(--accent); background: var(--surface2); }
#invite-card .invite-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  font-size: .72rem;
  color: var(--text-dim);
}
#invite-card .invite-or::before,
#invite-card .invite-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Email sign-in steps (web launch, Phase 1). Inputs and the primary button reuse
   the invite field's look so the box reads as one control set. */
#signin-email, #signin-pin {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
}
#signin-pin {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-align: center;
}
#signin-email:focus, #signin-pin:focus { border-color: var(--accent); }
#invite-card .signin-primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .12s;
}
#invite-card .signin-primary:hover { opacity: .9; }
#invite-card .signin-primary:disabled { opacity: .5; cursor: default; }
#invite-card .signin-error {
  display: none;
  font-size: .75rem;
  color: #dc2626;
  margin: -4px 0 10px;
}
#invite-card .signin-error.visible { display: block; }
#invite-card .signin-sent { margin: 0 0 12px; }
#invite-card .signin-link {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-size: .75rem;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#invite-card .signin-link:hover { color: var(--text); }
#tester-code-step { margin-top: 12px; }

/* ── Web launch Phase 2: questions left and the analysis offer ──
   The questions-left line sits under the chat box. Unlike the keyboard hint it
   shows on phones too, where it matters most, and it takes the hint's place on
   desktop so the box keeps one line under it. */
.q-left {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  max-width: 860px;
  margin: 8px auto 0;
}
.q-left.is-out { color: var(--text-dim); }
#inputbar:has(.q-left:not([hidden])) .hint { display: none; }
.pr-analysis-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.pr-analysis-offer p {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}
.pr-offer-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ── Web launch Phase 2b: onboarding, a new account's welcome ──
   The sign-in card's grammar, wider; a full-height sheet on phones. Sits under
   #invite-modal (5000) and over everything else. */
#onboarding {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(11, 11, 12, 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#onboarding[hidden] { display: none; }
.onb-card {
  width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  padding: 26px 28px 22px;
  animation: fadeSlideIn .18s ease;
}
.onb-card[hidden] { display: none; }
.onb-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.onb-steps { display: inline-flex; gap: 4px; }
.onb-steps i { width: 18px; height: 3px; border-radius: 2px; background: var(--border); }
.onb-steps i.on { background: var(--accent); }
.onb-mark { margin-left: auto; width: 26px; height: 26px; color: var(--text); flex: none; }
.onb-mark svg, .onb-brand svg { width: 100%; height: 100%; display: block; }
.onb-h {
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); text-wrap: balance;
}
.onb-brand {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em;
  margin-left: 0.22em; color: var(--text);
}
.onb-lede { margin: 0 0 18px; color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; max-width: 46ch; }
.onb-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.onb-field[hidden] { display: none; }
.onb-label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.onb-label span { font-family: var(--font); text-transform: none; letter-spacing: 0; }
.onb-label-block { display: block; margin-bottom: 8px; }
.onb-input {
  width: 100%; font: 0.88rem var(--font); color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px;
}
.onb-input[hidden] { display: none; }
.onb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.onb-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.onb-pill {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill);
  padding: 6px 13px; font: 0.82rem var(--font); color: var(--text-dim); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.onb-pill:hover { border-color: var(--text-muted); }
.onb-pill[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-dim); color: var(--accent); font-weight: 600;
}
.onb-optin {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2);
}
.onb-optin input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.onb-optin b { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text); }
.onb-optin small { display: block; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.onb-error { margin: -8px 0 14px; color: var(--danger); font-size: 0.8rem; }
.onb-error[hidden] { display: none; }
.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.onb-primary {
  background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm);
  padding: 10px 22px; font: 700 0.85rem var(--font); cursor: pointer;
}
.onb-primary:hover { filter: brightness(1.06); }
.onb-primary:disabled { opacity: .6; cursor: default; }
.onb-quiet {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--text-muted); font: 0.82rem var(--font); text-decoration: underline; text-underline-offset: 3px;
}
.onb-quiet:hover { color: var(--text); }
.onb-allow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--border);
}
.onb-allow p { margin: 0; flex: 1 1 220px; font-size: 0.85rem; color: var(--text); }
.onb-tally {
  display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.onb-tally span { display: inline-flex; align-items: center; gap: 4px; }
.onb-tally i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.onb-tally i.bonus { background: none; border: 1.5px solid var(--accent); }
.onb-suggest { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.onb-sq {
  display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md);
  padding: 11px 14px; font: 0.85rem var(--font); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.onb-sq::before { content: "/"; color: var(--accent); font-family: var(--font-mono); }
.onb-sq:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.onb-sq small {
  margin-left: auto; padding-left: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-muted);
}
.onb-look {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted);
}
.onb-look button {
  background: none; border: 0; border-bottom: 1px solid var(--border); padding: 2px 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.onb-look button:hover { border-color: var(--text); }
.onb-look .onb-back {
  margin-left: auto; border: 0; font-family: var(--font); text-transform: none; letter-spacing: 0;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 720px) {
  #onboarding { align-items: flex-end; padding: 0; }
  .onb-card {
    max-width: none; height: calc(100% - 28px); border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  }
}
@media (prefers-reduced-motion: reduce) { .onb-card { animation: none; } }

/* Web launch Phase 3: billing errors (checkout or the billing page not opening). */
.sl-toast.error { border-left: 3px solid var(--danger); }

/* ── Web launch Phase 4: account button and menu, plans, account, upgrade panel ── */
#masthead { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill);
  padding: 3px 4px 3px 10px; color: var(--text);
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--accent); }
.acct-btn[hidden] { display: none; }
.acct-badge {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
}
.acct-badge.paid { color: var(--accent); }
.acct-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--bg);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
}
.acct-menu {
  position: absolute; top: calc(100% + 6px); right: 12px; z-index: 300;
  width: min(304px, calc(100vw - 24px)); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(15, 23, 42, 0.35); padding: 0;
}
body.dark .acct-menu { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8); }
.acct-menu[hidden] { display: none; }
/* Its header is the account panel's, smaller (W7, 6 Nov 2026). */
.am-head { padding: 14px 14px 13px; color: #fff;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a); }
.am-who { display: flex; align-items: center; gap: 10px; }
.am-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 800 17px var(--font-display); color: #0b1636; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.am-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-id b { font: 800 16px var(--font-display); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-id small { font-size: 11.5px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-badge { flex: none; align-self: flex-start; font: 800 11.5px var(--font-display); padding: 3px 10px; border-radius: 99px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
.am-badge.paid { border-color: transparent; background: var(--spectrum); }
.am-q { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.88); }
.am-qt b { font: 800 15px var(--font-mono); color: #fff; margin-right: 1px; }
.am-q em { font-style: normal; margin-left: auto; font: 700 10.5px var(--font-mono); padding: 2px 7px; border-radius: 99px;
  background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(110,231,183,.35); white-space: nowrap; }
.am-pips { display: flex; gap: 4px; margin-top: 8px; }
.am-pips i { flex: 1 1 0; height: 5px; border-radius: 3px; background: rgba(255,255,255,.62); }
.am-pips i.used { background: rgba(255,255,255,.14); }
.am-pips i.bonus { background: transparent; border: 1px dashed rgba(110,231,183,.7); }
.am-bar { display: block; position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 8px; }
.am-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--spectrum); }
.am-list { padding: 6px; }
.acct-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 8px; border-radius: 10px; font: 600 0.84rem var(--font); color: var(--text);
}
.acct-item:hover, .acct-item:focus-visible { background: var(--surface3); }
.acct-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface3); color: var(--text); }
.acct-item:hover .acct-ico { background: var(--surface); }
.acct-ico svg { width: 15px; height: 15px; }
.acct-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

/* The ask bar's nearly-out note */
.ask-note {
  flex: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent);
  background: var(--accent-dim); border-radius: var(--r-pill); padding: 3px 10px;
}
.ask-note[hidden] { display: none; }
@media (max-width: 700px) { .acct-badge { display: none; } .acct-btn { padding: 3px; } }
.ask-note .an-s { display: none; }
@media (max-width: 480px) {
  .ask-note { padding: 3px 8px; }
  .ask-note .an-l { display: none; }
  .ask-note .an-s { display: inline; }
}
/* On phones Feedback sat pinned in the masthead's second-to-last place, which the
   theme toggle took once the account button arrived, so the two icons overlapped.
   Once there is an account button, Feedback lives in its menu instead and the ask
   bar gets its room back. Desktop keeps the floating Feedback pill. */
.acct-item.acct-fb { display: none; }
@media (max-width: 720px) {
  html.acct-on #fb-btn { display: none; }
  html.acct-on #askwrap { margin-right: 0; }
  .acct-item.acct-fb { display: flex; }
}

/* Shared buttons for the plans and account screens and the upgrade panel */
.pln-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  border-radius: var(--r-sm); padding: 9px 16px; font: 600 0.8rem var(--font); white-space: nowrap;
}
.pln-btn:hover { border-color: var(--text-muted); }
.pln-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pln-btn.primary:hover { filter: brightness(1.06); }
.pln-btn.quiet { border-color: transparent; background: none; color: var(--text-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pln-btn:disabled { opacity: .6; cursor: default; }

/* Plans */
.pln-loading { color: var(--text-muted); }
.pln-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; color: var(--text); text-wrap: balance; }
.pln-lede { margin: 0 0 18px; color: var(--text-dim); max-width: 62ch; font-size: 0.88rem; }
.pln-note { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--border); font-size: 0.84rem; color: var(--text-dim); }
.pln-founding {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px;
  padding: 14px 16px; border: 1px solid var(--accent); background: var(--accent-dim); border-radius: var(--r-md);
}
.pln-founding p { margin: 0; flex: 1 1 260px; font-size: 0.85rem; color: var(--text); }
.pln-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.pln-switch button { border: 0; background: none; border-radius: var(--r-pill); padding: 6px 14px; font: 0.82rem var(--font); color: var(--text-dim); cursor: pointer; }
.pln-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 600; }
.pln-switch small { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); margin-left: 5px; }
.pln-switch button[aria-pressed="true"] small { color: inherit; opacity: .8; }
.pln-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pln-plan { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pln-plan.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.pln-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pln-plan-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text); }
.pln-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.pln-price { display: flex; align-items: baseline; gap: 4px; color: var(--text); }
.pln-price b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pln-price span { color: var(--text-muted); font-size: 0.8rem; }
.pln-price .pln-soon { font-size: 0.9rem; color: var(--text-muted); }
.pln-billed { margin-top: -8px; min-height: 1.4em; font-size: 0.78rem; color: var(--text-muted); }
.pln-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; font-size: 0.85rem; color: var(--text); }
.pln-feats li { display: flex; gap: 8px; align-items: baseline; }
.pln-feats li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
.pln-feats li.off { color: var(--text-muted); }
.pln-feats li.off::before { background: var(--border); }
.pln-plan .pln-btn { width: 100%; }
.pln-where { margin: 0; text-align: center; font-size: 0.78rem; color: var(--text-muted); }
.pln-small { margin-top: 18px; display: grid; gap: 6px; max-width: 72ch; font-size: 0.78rem; color: var(--text-muted); }
.pln-small b { color: var(--text-dim); font-weight: 600; }

/* ── Option C: Your account as a side panel, Plans as a full-screen dark page ── */
html.ovl-open, html.ovl-open body { overflow: hidden; }
.ovl { position: fixed; inset: 0; z-index: 3000; }
.ovl[hidden] { display: none; }
.ovl-scrim { position: absolute; inset: 0; background: rgba(11, 11, 12, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ovlFade .18s ease; }
.acd {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.18);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: acdIn .22s cubic-bezier(.2, .8, .2, 1);
}
#acs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ovl-close {
  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
}
.ovl-close:hover { color: var(--text); border-color: var(--text-muted); }
.acd-txt { margin: 0; font-size: 0.84rem; color: var(--text-dim); }
.acd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acs-sw { position: relative; width: 42px; height: 24px; flex: none; border: 0; border-radius: 12px; background: var(--accent); cursor: pointer; }
.acs-sw::after { content: ""; position: absolute; top: 3px; left: 21px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.acs-sw[aria-checked="false"] { background: var(--border2); }
.acs-sw[aria-checked="false"]::after { left: 3px; }

/* The header (W7, 6 Nov 2026): dark in both themes, like the club and match heroes. */
.acd { padding-top: 0; }
.ach { position: relative; color: #fff; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 18px;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99,102,241,.55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6,182,212,.30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a); }
.ach-top { display: flex; align-items: center; gap: 13px; }
.ach-av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 800 22px var(--font-display); color: #0b1636; background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 10px 22px -10px rgba(0,0,0,.6); }
.ach-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ach-k { font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ach-id b { font: 800 24px var(--font-display); letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.ach-id small { font-size: 12px; color: rgba(255,255,255,.72); overflow-wrap: anywhere; }
.ach-top { padding-right: 44px; }
/* Pinned to the top of the panel as it scrolls; navy, so it reads on the dark
   header and on the light or dark page below it. */
.acs-x-wrap { position: sticky; top: 0; z-index: 4; height: 0; display: flex; justify-content: flex-end; }
.ach-x { width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  margin: calc(18px + env(safe-area-inset-top, 0px)) 20px 0 0;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); color: #fff;
  background: rgba(11,22,54,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.ach-x:hover { background: rgba(11,22,54,.92); }
.ach-plan { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ach-badge { font: 800 13px var(--font-display); letter-spacing: .01em; padding: 4px 12px; border-radius: 99px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
.ach-badge.paid { border-color: transparent; background: var(--spectrum); box-shadow: 0 4px 14px -4px rgba(6,182,212,.6); }
.ach-tag { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78);
  padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.22); }
.ach-tag.warn { color: #fecaca; border-color: rgba(248,113,113,.55); background: rgba(239,68,68,.16); }
.ach-meta { font-size: 12px; color: rgba(255,255,255,.72); margin-left: auto; }
.ach-q { margin-top: 14px; padding: 14px 15px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.ach-qtop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ach-qtop b { font: 800 34px var(--font-mono); letter-spacing: -.03em; line-height: 1; }
.ach-qtop span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
.ach-qtop em { font-style: normal; margin-left: auto; font: 700 11px var(--font-mono); padding: 3px 8px; border-radius: 99px;
  background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(110,231,183,.35); }
.ach-pips { display: flex; gap: 5px; margin: 11px 0 9px; }
.ach-pips i { flex: 1 1 0; height: 7px; border-radius: 4px; background: rgba(255,255,255,.62); }
.ach-pips i.used { background: rgba(255,255,255,.14); }
.ach-pips i.bonus { background: transparent; border: 1.5px dashed rgba(110,231,183,.7); }
.ach-bar { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; margin: 11px 0 9px; }
.ach-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--spectrum); }
.ach-q small { display: block; font-size: 11.5px; color: rgba(255,255,255,.68); line-height: 1.45; }
.ach-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ach-tile { padding: 11px 13px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 3px; }
.ach-tile b { font: 800 22px var(--font-mono); letter-spacing: -.02em; line-height: 1; }
.ach-tile b small { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 700; margin-left: 2px; }
.ach-tile span { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); line-height: 1.3; }

/* Under the header: titled sections with one plain lead line, cards of 14px corners. */
.acs-main { padding: 20px 20px 26px; display: flex; flex-direction: column; gap: 24px; }
.acs-sec h2 { margin: 0 0 3px; font: 780 16px var(--font); letter-spacing: -.01em; color: var(--text); }
.acs-lede { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.acs-lede.after { margin: 8px 0 0; }
.acs-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.acs-sec > .acs-foot:first-child, .acs-lede + .acs-foot { margin-top: 0; justify-content: flex-start; }
.acs-lede + .acs-foot .pln-btn.quiet { padding-left: 0; }
.acs-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.acs-card.danger { border-color: rgba(226,59,74,.28); background: rgba(226,59,74,.035); }
.acs-it { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.acs-it + .acs-it, .acs-form + .acs-it { border-top: 1px solid var(--border); }
.acs-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--surface3); color: var(--text); }
.acs-ico svg { width: 17px; height: 17px; }
.acs-card.danger .acs-ico { background: rgba(226,59,74,.1); color: var(--danger); }
.acs-it-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acs-it-t b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.acs-it-t small { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.acs-card .acs-form { margin: 0 14px 12px; }
.acs-warn { color: var(--danger); }
.acd .pln-btn { border-radius: 10px; }
.acd .pln-btn.primary { background: #0b1636; border-color: #0b1636; color: #fff; }
body.dark .acd .pln-btn.primary { background: #fff; border-color: #fff; color: #0b1636; }
.acd .pln-btn.quiet { color: var(--accent-text); text-decoration: none; font-weight: 600; padding-left: 4px; padding-right: 4px; }

/* Free: the upgrade, with a spectrum edge. */
.acs-up { border-radius: 16px; padding: 16px 16px 14px; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box;
  box-shadow: 0 18px 34px -26px rgba(37,99,235,.55); }
.acs-up-hd { display: flex; align-items: flex-start; gap: 10px; }
.acs-up-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #0b1636; }
.acs-up-mark i { width: 16px; height: 16px; border-radius: 4px; background: var(--spectrum); }
.acs-up-t { flex: 1; min-width: 0; }
.acs-up-t h3 { margin: 0; font: 800 18px var(--font-display); letter-spacing: -.01em; color: var(--text); }
.acs-up-t p { margin: 1px 0 0; font-size: 12px; color: var(--text-dim); }
.acs-up-pr { text-align: right; }
.acs-up-pr b { display: block; font: 800 22px var(--font-display); letter-spacing: -.02em; line-height: 1; color: var(--text); }
.acs-up-pr span { font-size: 11px; color: var(--text-muted); }
.acs-cmp { margin: 14px 0 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); overflow: hidden; }
.acs-cmp-r { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; padding: 9px 12px; font-size: 12.5px; align-items: center; }
.acs-cmp-r + .acs-cmp-r { border-top: 1px solid var(--border); }
.acs-cmp-h { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 8px; padding-bottom: 7px; }
.acs-cmp-r .l { color: var(--text-dim); }
.acs-cmp-r .now { color: var(--text-muted); }
.acs-cmp-r .plus { font-weight: 700; color: var(--text); }
.acs-cmp-r .plus::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--spectrum); margin-right: 7px; vertical-align: 1px; }
.acs-up.acs-wait { min-height: 300px; box-shadow: none; background: linear-gradient(var(--surface2), var(--surface2)) padding-box, var(--spectrum) border-box; opacity: .55; }
.acs-up-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acs-up-act small { font-size: 11.5px; color: var(--text-muted); }

/* A paid plan's billing card. */
.acs-bill { padding: 4px 14px; }
.acs-bill-r { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13px; }
.acs-bill-r + .acs-bill-r { border-top: 1px solid var(--border); }
.acs-bill-r span { color: var(--text-dim); }
.acs-bill-r b { font-weight: 650; text-align: right; color: var(--text); }
.acs-bill-act { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface2); border-radius: 0 0 14px 14px; }

.acs-lgs { display: flex; flex-wrap: wrap; gap: 8px; }
.acs-lg { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); }
.acs-lg:has(img) { padding-left: 7px; }
.acs-lg img { width: 20px; height: 20px; object-fit: contain; }
body.dark .acs-lg img { background: #fff; border-radius: 50%; padding: 2px; box-sizing: border-box; }
.acs-help { text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.acs-help a { color: var(--accent-text); text-decoration: none; }
.acs-legal { display: flex; justify-content: center; gap: 14px; margin-top: 2px; }
.acs-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }

/* Plans: full screen, in the app's own theme (light or dark, like every other
   screen). What sets it apart is the layout: no app chrome, the spectrum line and
   the big headline. */
.plx {
  position: fixed; inset: 0; z-index: 3000; overflow-y: auto;
  background: var(--surface2); color: var(--text);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: ovlFade .2s ease;
}
.plx[hidden] { display: none; }
.plx::before {
  content: ""; position: sticky; top: 0; z-index: 1; display: block; height: 3px;
  background: linear-gradient(90deg, #2563EB 0%, #7c3aed 35%, #db2777 65%, #f59e0b 100%);
}
.plx-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 6px max(20px, env(safe-area-inset-left, 0px));
}
.plx-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: var(--text); }
.plx-logo i { font-style: normal; color: var(--accent); }
.plx-mark { display: inline-flex; width: 22px; height: 22px; color: var(--text); }
.plx-mark svg { width: 100%; height: 100%; display: block; }
.plx-inner { max-width: 1000px; margin: 0 auto; padding: 18px 22px 56px; display: grid; gap: 20px; }
.plx-head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.plx-head h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.plx-head p { margin: 0; max-width: 58ch; font-size: 0.9rem; color: var(--text-dim); }
.plx .pln-switch { justify-self: center; margin: 0; }
.plx .pln-note, .plx .pln-founding { margin: 0; }
.plx .pln-note { text-align: center; }
.plx .pln-plan.current { border-color: var(--text-dim); box-shadow: none; }
.plx .pln-plan.hl { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28); }
.plx .pln-small { margin: 0 auto; text-align: center; }
.plx .pln-loading { text-align: center; color: var(--text-dim); }
@keyframes ovlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes acdIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 720px) {
  .plx-inner { padding: 8px 14px 40px; }
  .ach { padding-left: 16px; padding-right: 16px; }
  .ach-x { margin-right: 16px; }
  .acs-main { padding: 18px 16px 24px; }
  .acs-cmp-r { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1fr); gap: 6px; padding-left: 10px; padding-right: 10px; }
  .acs-cmp-r .plus::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ovl-scrim, .acd, .plx { animation: none; } .acs-sw::after { transition: none; } }

/* The upgrade panel (chat, the club brief) */
.upg { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); max-width: 620px; }
.upg-head { display: flex; gap: 10px; align-items: flex-start; }
.upg-mark { color: var(--text); display: inline-flex; margin-top: 2px; }
.upg h3 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); }
.upg p { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.upg-offer { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.upg-offer b { font-size: 0.85rem; color: var(--text); }
.upg-offer span { font-size: 0.78rem; color: var(--text-muted); }
.upg-link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .pln-plans { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .acs-sw::after { transition: none; } }

/* Web launch: the sign-in box's Resend link while it waits between sends. */
#invite-card .signin-link:disabled { opacity: .55; cursor: default; text-decoration: none; }

/* ─── Ads on Free (web launch, Phase 5) ─────────────────────────────────────
   A slot looks like any other terminal panel, labelled "Advertisement", with a
   quiet way to plans beside the label. Its height is reserved inline by the app
   so nothing moves when an ad arrives; an ad AdSense could not fill folds away. */
.ad-slot[hidden] { display: none; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
/* Home: never the first panel while the scout board is still loading. */
.home-flow > #home-board[style*="none"] ~ .ad-slot { display: none; }
.ad-slot .term-hd .ad-off {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; color: var(--accent);
}
.ad-slot .term-hd .ad-off:hover { text-decoration: underline; }
.ad-box { overflow: hidden; box-sizing: border-box; }
.ad-box:has(.ad-ph) { padding: 8px; }
.ad-ph {
  height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
/* A slot for one width only: ad-d on desktop, ad-m on a phone. The hidden one is
   never asked for, because the app requests an ad only once its slot is in view. */
@media (max-width: 720px) { .ad-slot.ad-d { display: none; } }
@media (min-width: 721px) { .ad-slot.ad-m { display: none; } }
/* In a feed (The Wire's stories and moves, Refractions, Discover's results): a
   framed block between items, the height of a story on desktop. */
.ad-feed {
  margin: 10px 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; flex: none;
}
.rfx-cards > .ad-feed { margin: 14px 0; }
/* Home on desktop: the news keeps two thirds of the row and the ad takes the
   last third; beside an open transfer window the three share it equally. */
.hw-grid:has(> .ad-slot:not([hidden])) { grid-template-columns: 1fr 1fr 1fr; }
.hw-grid.hw-solo:has(> .ad-slot:not([hidden])) { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) {
  /* Stacked, like the news and transfer panels at this width. Doubled classes so
     this outranks the two rules above, the solo one included. */
  .hw-grid.hw-grid:has(> .ad-slot:not([hidden])),
  .hw-grid.hw-solo.hw-solo:has(> .ad-slot:not([hidden])) { grid-template-columns: 1fr; }
}
/* An ad AdSense could not fill folds away (above), so its column goes too. */
@media (min-width: 901px) {
  .hw-grid.hw-grid:has(ins[data-ad-status="unfilled"]) { grid-template-columns: 1fr 1fr; }
  .hw-grid.hw-solo.hw-solo:has(ins[data-ad-status="unfilled"]) { grid-template-columns: 1fr; }
}
/* Home on a phone: the middle ad is drawn before the Breakout panel. Board panels
   from Breakout on (hf-late), the last ad and the terminal's panels move after it;
   everything before Breakout keeps its place. */
@media (max-width: 720px) {
  .home-flow > .ad-slot[data-ad-pos="mid"] { order: 1; }
  .home-flow .hf-late,
  .home-flow > .ad-slot[data-ad-pos="end"],
  .home-flow > #home-terminal .term-panel { order: 2; }
}
/* A club's depth chart with the ad under it, as one grid column. */
.term-stack { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 1180px) { .term-stack { grid-column: span 6; } }
@media (max-width: 720px)  { .term-stack { grid-column: span 12; } }
/* The profile rail's panel keeps the rail's own panel frame. */
.pv-panel.ad-slot { padding: 0; overflow: hidden; }

/* ─── Whether an answer used a question (web launch, 21 Oct 2026) ───────────
   One quiet mono line under the answer: "Used 1 of your 3 this week · 2 left",
   or "Didn't count" for chat and football knowledge. */
.usage-line {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .02em; color: var(--text-muted);
}
.usage-line.free { color: var(--success, #16a34a); }
.rb-thread > .usage-line { margin: 8px 0 0 4px; }

/* Legal links (web launch): the sign-in card, the account menu and panel, the plans page */
#invite-card .signin-legal { margin: 16px 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-muted); text-align: center; }
#invite-card .signin-help { margin-top: 6px; }
#invite-card .signin-legal a, .acct-menu-legal a, .pln-legal a { color: inherit; text-underline-offset: 2px; }
.acct-menu-legal { padding: 9px 14px 11px; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--text-muted); background: var(--surface2); }

/* ─── Your account: change email, download, sign out everywhere, delete (W7) ─── */
.pln-btn.danger { border-color: var(--danger); color: var(--danger); }
.pln-btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.acs-form { display: grid; gap: 8px; padding: 12px 14px; margin: 2px 0 6px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface2); }
.acs-form[hidden] { display: none; }
.acs-form .acd-txt { margin: 0; }
.acs-lbl { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); }
.acs-in { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border2);
  border-radius: 8px; background: var(--surface); color: var(--text); font: 0.88rem var(--font); }
.acs-in:focus { outline: none; border-color: var(--accent); }
.acs-err { margin: 0; font-size: 0.8rem; color: var(--danger); }
.acs-err[hidden] { display: none; }

/* CSV downloads (Pro, 6 Nov 2026): the button other plans see carries a Pro tag. */
.csv-btn { display: inline-flex; align-items: center; gap: 6px; }
.csv-pro { font: 700 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px;
  border-radius: 99px; color: #fff; background: var(--spectrum); }

/* Pin to Home on a full Home (Free's 2, Plus's 12): the next plan, in the upgrade panel's language. */
.sc-pinfull { flex: 1 1 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-top: 2px;
  border-radius: 12px; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; }
.sc-pinfull .upg-mark { flex: none; color: var(--text); margin-top: 1px; }
.sc-pf-body { display: grid; gap: 6px; min-width: 0; }
.sc-pf-t { font: 800 15px var(--font-display); letter-spacing: -.01em; color: var(--text); }
.sc-pf-body p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.sc-pf-offer b { color: var(--text); }
.sc-pf-offer span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.sc-pf-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ─── Welcome to a paid plan (9 Nov 2026) ───────────────────────────────────────
   The card a buyer sees when Stripe sends them back and the plan has switched:
   the account panel's navy header with the spectrum edge, three figures, three
   first things to do. Centred on every screen; on a phone the figures stack. */
#plan-welcome {
  position: fixed; inset: 0; z-index: 4100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(11, 11, 12, 0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#plan-welcome[hidden] { display: none; }
.pw-card {
  width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  animation: pwIn .38s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pwIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pw-card { animation: none; } }
.pw-hero {
  position: relative; color: #fff; padding: 20px 22px 20px; border-radius: 18px 18px 0 0;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(99, 102, 241, .55), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(6, 182, 212, .30), transparent 60%),
    linear-gradient(135deg, #0b1636, #10204a);
}
.pw-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 18px 18px 0 0; background: var(--spectrum); }
.pw-top { display: flex; align-items: center; justify-content: space-between; }
.pw-mark { width: 26px; height: 26px; color: #fff; }
.pw-mark svg { width: 100%; height: 100%; display: block; }
.pw-x { width: 32px; height: 32px; border-radius: 50%; flex: none; cursor: pointer; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); }
.pw-x:hover { background: rgba(255, 255, 255, .16); }
.pw-x svg { width: 14px; height: 14px; display: block; }
.pw-badges { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pw-badge { font: 800 13px var(--font-display); letter-spacing: .01em; padding: 4px 13px; border-radius: 99px;
  background: var(--spectrum); box-shadow: 0 4px 14px -4px rgba(6, 182, 212, .6); }
.pw-tag { font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); }
.pw-h { font: 800 26px/1.15 var(--font-display); letter-spacing: -.02em; margin: 12px 0 6px; text-wrap: balance; }
.pw-sub { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 44ch; }
.pw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pw-tile { padding: 11px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.pw-tile b { font: 800 22px/1.05 var(--font-display); letter-spacing: -.01em; }
.pw-tile span { font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .76); }
.pw-body { padding: 16px 18px 18px; }
.pw-k { font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 2px 4px 8px; }
.pw-act { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.pw-act:hover { border-color: var(--accent); transform: translateY(-1px); }
.pw-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-act-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-act-t b { font-size: 14px; font-weight: 700; }
.pw-act-t small { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.pw-arr { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.pw-arr svg { width: 100%; height: 100%; display: block; }
.pw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pw-renew { font-size: 12px; color: var(--text-muted); }
.pw-primary { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 11px 20px;
  font: 700 14px var(--font); cursor: pointer; }
.pw-primary:hover { filter: brightness(1.06); }
@media (max-width: 520px) {
  .pw-hero { padding: 18px 18px 18px; }
  .pw-h { font-size: 22px; }
  .pw-tiles { grid-template-columns: 1fr; gap: 6px; }
  .pw-tile { flex-direction: row; align-items: baseline; gap: 8px; padding: 9px 12px; }
  .pw-tile b { font-size: 18px; flex: none; }
  .pw-body { padding: 14px 14px 16px; }
  .pw-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .pw-primary { width: 100%; padding: 13px 20px; }
}
.pw-tile b.w { font-size: 16px; line-height: 1.2; }
.pw-hero::after { content: ''; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: var(--spectrum); filter: blur(70px); opacity: .28; pointer-events: none; }
.pw-hero > * { position: relative; z-index: 1; }
@media (max-width: 520px) { .pw-tile b.w { font-size: 15px; } }
.pw-hero { overflow: hidden; }
.pw-card { overflow-x: hidden; }

/* ─── The founding offer for an eligible account (9 Nov 2026) ───────────────────
   A slim strip at the top of Home, a tag on Plans in the account menu and a card on
   the welcome screen's second step, each with the spectrum edge the plans use. */
.fo-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 16px 0;
  padding: 10px 10px 10px 16px; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; }
.fo-strip[hidden] { display: none; }
.fo-k { flex: none; font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.fo-t { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
.fo-t b { color: var(--text); }
.fo-go { flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 99px; padding: 8px 15px;
  font: 700 13px var(--font); cursor: pointer; }
.fo-go:hover { filter: brightness(1.06); }
.fo-x { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
.fo-x svg { width: 12px; height: 12px; display: block; }
@media (max-width: 600px) {
  .fo-strip { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px; }
  .fo-k { grid-column: 1; grid-row: 1; align-self: center; }
  .fo-x { grid-column: 2; grid-row: 1; }
  .fo-t { grid-column: 1 / -1; min-width: 0; }
  .fo-go { grid-column: 1 / -1; justify-self: start; }
}
.am-fo { margin-left: auto; font: 700 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; color: #fff; background: var(--spectrum); white-space: nowrap; }
.onb-fo { margin: 2px 0 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; }
.onb-fo-k { display: block; margin-bottom: 4px; font: 600 10.5px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); }
.onb-fo p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.onb-fo p b { color: var(--text); }

/* Phones with an account (9 Nov 2026, Mo): Feedback lives in the account menu there, so the
   What's new spark no longer keeps 38px for it, which squeezed the ask bar beside an empty gap.
   It sits on the right instead, between the theme switch and the account button, and the ask
   bar takes the room back. */
@media (max-width: 720px) {
  html.acct-on #masthead .whn-mast { margin-right: 0; order: 1; }
  html.acct-on #masthead .acct-btn { order: 2; }
}

/* ─── The Weekend Prism, asked once (11 Nov 2026) ───────────────────────────────
   A card at the top of Home for an account that skipped the welcome screen and never
   answered its Weekend Prism box (renderWeekendAsk). Gone once either button is pressed. */
.wp-ask { flex: none; display: flex; align-items: center; gap: 16px; margin: 16px 16px 0;
  padding: 14px 14px 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.wp-ask[hidden] { display: none; }
.wp-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: var(--spectrum); }
.wp-ic svg { width: 21px; height: 21px; display: block; }
.wp-tx { flex: 1; min-width: 0; }
.wp-k { display: block; margin-bottom: 3px; font: 600 10.5px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); }
.wp-h { margin: 0; font: 700 16px var(--font); color: var(--text); }
.wp-l { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
.wp-bt { flex: none; display: flex; gap: 8px; }
.wp-yes { background: var(--accent); color: #fff; border: 0; border-radius: 99px; padding: 9px 20px;
  font: 700 13px var(--font); cursor: pointer; }
.wp-yes:hover { filter: brightness(1.06); }
.wp-no { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px;
  padding: 8px 15px; font: 600 13px var(--font); cursor: pointer; }
.wp-no:hover { color: var(--text); }
.wp-bt button:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) {
  .wp-ask { flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px; }
  .wp-ic { width: 36px; height: 36px; }
  .wp-tx { flex: 1 1 calc(100% - 52px); }
  .wp-bt { width: 100%; }
  .wp-yes, .wp-no { flex: 1; }
}

/* ── "Read as": how The Prism read a short or vague question (11 Nov 2026) ── */
.ch-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px;
  color: var(--text-muted); margin: -4px 0 6px; }
.rb-thread > .ch-read { margin: -2px 0 8px; }
.ch-read-k { font-weight: 650; }
.ch-read-q { padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent-text); font: 600 12.5px var(--font); max-width: 100%; }
.ch-read-x { background: none; border: 0; padding: 0; color: var(--text-muted); font: 500 12px var(--font);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ch-read-x:hover { color: var(--text); }
@media (max-width: 700px) {
  .ch-read-x { padding: 6px 0; }
}
/* An answer in Persian or Arabic reads right to left, sentence by sentence, with its punctuation
   where it belongs: each paragraph and list item takes its direction from its own words. */
.bubble p, .bubble li, .rb-report p, .rb-report li { unicode-bidi: plaintext; }
/* A full scout card drawn from the data alone, when the written verdict could not be read (R87):
   one quiet line where the verdict goes, his figures open below it. */
.rb-report[data-v="2"] .rc-nov { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  line-height: 1.5; color: var(--text-muted); background: var(--surface-2, rgba(127,127,127,.08)); }

/* ── Scout → Nations: how a nation has lined up (R107, 14 Nov 2026) ─────────────────────────
   The pitch is the XI the nation has started most in its last five games (_scLuBody), beside it
   how each of them is playing for his club, underneath our ranking of everyone else. */
.sc-lu-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-lu-games { margin-top: 16px; }
.sc-lu-games .mt-kicker { margin-bottom: 4px; }
.sc-lu-g { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.sc-lu-games .mt-kicker + .sc-lu-g { border-top: 0; }
.sc-lu-gd { flex: 0 0 54px; white-space: nowrap; font: 600 11px var(--font-mono, ui-monospace, monospace); color: var(--text-dim); }
.sc-pitch .mt-xi-p .cl em.sc-lu-nd { white-space: nowrap; }
.sc-lu-gm { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-lu-gm b { font-size: 13px; font-weight: 650; color: var(--text); }
.sc-lu-gm small { font-size: 11px; color: var(--text-dim); }
.sc-lu-dr { align-items: flex-start; padding: 9px 0; }
.sc-lu-dr .sc-ph { margin-top: 2px; }
.sc-lu-out { cursor: default; }
.sc-lu-out .sc-club { opacity: .7; }
.sc-lu-ln { font-size: 11.5px; line-height: 1.4; color: var(--text-dim); white-space: normal; }
.sc-lu-tag { align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 99px;
  font: 600 10px var(--font-mono, ui-monospace, monospace); letter-spacing: .02em; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sc-lu-depth { margin-top: 26px; }
.sc-lu-lead { margin: 4px 2px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); max-width: 80ch; }
.sc-lu-lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sc-lu-more { margin: 8px 0 0; }
.sc-lu-wait { opacity: .55; }
.sc-lu-skel { min-height: 420px; }
@media (max-width: 1180px) { .sc-lu-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sc-lu-grid, .sc-lu-lines { grid-template-columns: 1fr; } }

/* ─── Account emails in the app (14 Nov 2026, lifecycle.py): the line under Follow (a toast with one
   button), and "Email me on Monday when they're back" at the free limit. The Home card reuses .wp-ask. ── */
#sl-toast-container .sl-toast.em-toast { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
#sl-toast-container .sl-toast.em-toast button {
  flex: none; border: 0; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.16); color: inherit; cursor: pointer;
}
#sl-toast-container .sl-toast.em-toast button:hover { background: rgba(255,255,255,.26); }
.upg .upg-mon {
  display: inline; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700;
  color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.upg .upg-mon:disabled { color: var(--text-dim, inherit); text-decoration: none; cursor: default; }

/* Getting started on Home (14 Nov 2026): six first things, a tick each, for an account's first two weeks. */
#gs-card.gs { flex: none; margin: 16px 16px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); }
#gs-card[hidden] { display: none; }
#gs-card .gs-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#gs-card .gs-h { margin: 0; font-weight: 700; font-size: 14px; color: var(--text); }
#gs-card .gs-bar { flex: 1; min-width: 80px; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
#gs-card .gs-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
#gs-card .gs-x { border: 0; background: none; color: var(--text-dim); width: 28px; height: 28px; padding: 6px; cursor: pointer; }
#gs-card .gs-x svg { width: 16px; height: 16px; display: block; }
#gs-card .gs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#gs-card .gs-it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; }
#gs-card .gs-it:hover { border-color: var(--accent); }
#gs-card .gs-it.on { color: var(--text-dim); }
#gs-card .gs-it.on span:last-child { text-decoration: line-through; }
#gs-card .gs-ck { flex: none; width: 20px; height: 20px; border-radius: 99px; border: 2px solid var(--border); display: grid; place-items: center; }
#gs-card .gs-it.on .gs-ck { background: var(--accent); border-color: var(--accent); color: #fff; }
#gs-card .gs-ck svg { width: 12px; height: 12px; }
@media (max-width: 700px) { #gs-card .gs-list { grid-template-columns: 1fr 1fr; } }