/* ─── Design tokens ─────────────────────────────────────────────────────── */
/* Dark-first design system. Dark mode is the reference theme: every colour,   */
/* elevation step, and contrast ratio is tuned there first. Light mode is a    */
/* full override below and must stay functional, but it is the alternate.      */
/*                                                                            */
/* Scales are intentionally fixed-step rem values, not viewport-coupled        */
/* clamp(), so text size is predictable at every breakpoint. There is a 11px   */
/* floor: nothing in the UI should render smaller than --text-2xs.             */

/* ---- Shared, theme-independent scales ---- */
:root{
  /* Type scale — fixed rem steps, 16px root */
  --text-3xs:.625rem;    /* 10px — reserved for badges/superscript only */
  --text-2xs:.6875rem;   /* 11px — smallest permitted UI text */
  --text-xs:.75rem;      /* 12px — labels, meta, table cells */
  --text-sm:.8125rem;    /* 13px — body default */
  --text-base:.9375rem;  /* 15px — emphasised body */
  --text-md:1rem;        /* 16px — stat values */
  --text-lg:1.25rem;     /* 20px — section titles */
  --text-xl:1.75rem;     /* 28px — page/hero titles */
  --text-2xl:2.125rem;   /* 34px — top-level headings */

  /* Spacing scale */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;

  /* Radii */
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --radius-xl:1rem;--radius-2xl:1.25rem;--radius-full:9999px;

  /* Motion */
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --transition-slow:280ms cubic-bezier(.16,1,.3,1);

  --font-body:'Satoshi','Inter','Segoe UI',system-ui,sans-serif;
  --font-num:'Satoshi','Inter',system-ui,sans-serif;
  /* Kept at the original 220px: removing html{zoom:.9} already reduced the
     available CSS width by ~11%, so widening the sidebar squeezed content
     further and pushed staff pages over the edge. */
  --sidebar-w:220px;

  /* ─── Responsive contract (design-foundations Phase A) ───────────────────
     Canonical tiers — every component is specified against these:
       mobile   < 720px
       tablet   720–1023px
       desktop  1024–1599px
       wide     ≥ 1600px
     CSS custom properties cannot be used inside @media queries (the values
     must be literal), so the tiers are documented here and applied as literal
     pixel values in the media queries below. When adding a new breakpoint,
     use one of these four boundaries unless there is a documented reason
     not to (see the 900px nav-drawer exception below). */
  --content-max:1560px;   /* reading column cap on wide monitors */
}

/* ---- Dark theme (reference) ---- */
:root,[data-theme="dark"]{
  /* Elevation ramp: each step is visibly separated so cards read as cards
     without relying on 1px borders alone. */
  --color-bg:#0c1014;
  --color-surface:#12181f;
  --color-surface-2:#171f28;
  --color-surface-offset:#1c2530;
  --color-surface-elevated:#212c39;
  --color-surface-dynamic:#273341;
  --color-surface-3:#273341;

  --color-divider:#1d2530;
  --color-border:#2a3542;
  --color-border-subtle:#1d2530;
  --color-border-strong:#3a4756;
  --line-color:#2a3542;

  --color-text:#e8edf4;
  --color-text-muted:#93a1b3;
  --color-text-faint:#66768a;
  --color-text-inverse:#0c1014;

  --color-primary:#2ec4b6;
  --color-primary-hover:#4dd8cb;
  --color-primary-highlight:#12332f;

  --color-success:#4ade80;--color-success-highlight:#14321f;
  --color-error:#fb7185;--color-error-highlight:#3a1a24;
  --color-danger:#fb7185;
  --chip-success-bg:#15803d;--chip-error-bg:#be123c;--chip-text:#fff;
  --color-warning:#fbbf24;--color-warning-highlight:#3a2c11;
  --color-gold:#fbbf24;--color-orange:#fb923c;
  --color-blue:#60a5fa;--color-blue-highlight:#152640;
  --color-purple:#a78bfa;

  /* Shadow ramp — dark themes need larger, softer spreads to read at all */
  --shadow-xs:0 1px 2px rgb(0 0 0/.30);
  --shadow-sm:0 1px 3px rgb(0 0 0/.36),0 1px 2px rgb(0 0 0/.24);
  --shadow-md:0 4px 12px rgb(0 0 0/.40),0 1px 3px rgb(0 0 0/.30);
  --shadow-lg:0 12px 28px rgb(0 0 0/.46),0 4px 10px rgb(0 0 0/.32);
  --shadow-xl:0 24px 56px rgb(0 0 0/.55),0 8px 20px rgb(0 0 0/.38);
  --ring-primary:0 0 0 3px rgb(46 196 182/.28);
}

/* ---- Light theme (alternate) ---- */
[data-theme="light"]{
  --color-bg:#f4f6f9;
  --color-surface:#ffffff;
  --color-surface-2:#fafbfd;
  --color-surface-offset:#eef1f6;
  --color-surface-elevated:#ffffff;
  --color-surface-dynamic:#e4e9f0;
  --color-surface-3:#e4e9f0;

  --color-divider:#e6eaf0;
  --color-border:#d5dce5;
  --color-border-subtle:#edf0f5;
  --color-border-strong:#bcc6d3;
  --line-color:#d5dce5;

  --color-text:#0f1a26;
  --color-text-muted:#5a6b80;
  --color-text-faint:#93a1b3;
  --color-text-inverse:#ffffff;

  --color-primary:#0d8b80;
  --color-primary-hover:#0a6f66;
  --color-primary-highlight:#d7f0ec;

  --color-success:#15803d;--color-success-highlight:#dcf5e4;
  --color-error:#be123c;--color-error-highlight:#fbe0e6;
  --color-danger:#be123c;
  --chip-success-bg:#15803d;--chip-error-bg:#be123c;--chip-text:#fff;
  --color-warning:#b45309;--color-warning-highlight:#fdeed6;
  --color-gold:#b45309;--color-orange:#c2410c;
  --color-blue:#1d4ed8;--color-blue-highlight:#dde6fb;
  --color-purple:#6d28d9;

  --shadow-xs:0 1px 2px rgb(15 26 38/.05);
  --shadow-sm:0 1px 3px rgb(15 26 38/.08),0 1px 2px rgb(15 26 38/.04);
  --shadow-md:0 4px 12px rgb(15 26 38/.10),0 1px 3px rgb(15 26 38/.06);
  --shadow-lg:0 12px 28px rgb(15 26 38/.13),0 4px 10px rgb(15 26 38/.07);
  --shadow-xl:0 24px 56px rgb(15 26 38/.18),0 8px 20px rgb(15 26 38/.10);
  --ring-primary:0 0 0 3px rgb(13 139 128/.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);
  background:var(--color-bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;line-height:1.55}
/* Numeric data should never shift width as values change */
input,select,textarea,button{font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ─── Layout shell ──────────────────────────────────────────────────────── */
/* minmax(0,1fr), not 1fr: a bare `1fr` track resolves to min-width:auto, so any
   wide child (the admin/coverage/debug tables are the worst offenders) stretches
   the whole column past the viewport and drags the sticky topbar off-screen with
   it. minmax(0,...) lets the track shrink and keeps overflow inside the table
   wrappers where it belongs. */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  grid-template-rows:auto 1fr;height:100dvh}
.sidebar{grid-row:1/-1;background:var(--color-surface);border-right:1px solid var(--color-border);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:var(--space-4) 0}
.topbar{grid-column:2;background:var(--color-surface);border-bottom:1px solid var(--color-border);
  padding:0 var(--space-6);height:52px;display:flex;align-items:center;gap:var(--space-4);
  position:sticky;top:0;z-index:10}
.main{grid-column:2;overflow-y:auto;overscroll-behavior:contain;min-width:0;
  padding:var(--space-6) var(--space-6) var(--space-12);background:var(--color-bg);
  scroll-behavior:smooth;overflow-anchor:none}

/* ─── Content width cap (design-foundations Phase A2) ──────────────────────
   The reading column stops growing on wide monitors so fixture rows, trend
   cards and league grids don't stretch to absurd widths. The shell, topbar
   and sidebar still span the viewport — only the content inside .main is
   capped and centered. Staff pages whose wide tables genuinely need the full
   width add .is-wide to #content-area (set by the view, cleaned up by
   showView() in navigation.js). */
#content-area{max-width:var(--content-max);margin-inline:auto}
#content-area.is-wide{max-width:none}

/* ─── Sidebar ──────────────────────────────────────────────────────────── */
/* NOTE: The pre-redesign sidebar/topbar layer (.sb-logo, .sb-logo-text,
   .sb-section, .sb-item, .sb-divider, .topbar, .tb-title) was removed here.
   The live shell uses .app-topbar and .context-sidebar, defined further down.
   Only the classes still present in index.html are kept below. */
.sb-logo-sub{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.01em}
.sb-spacer{flex:1}
.sb-data-as-of{display:none;font-size:var(--text-2xs);line-height:1.4;color:var(--color-text-faint);
  padding:0 var(--space-4) var(--space-3)}
body.is-admin .sb-data-as-of{display:block}

/* Mobile nav backdrop + menu (hidden on desktop) */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgb(0 0 0/.6);
  backdrop-filter:blur(2px);
  z-index:40;opacity:0;transition:opacity var(--transition);pointer-events:none}
.sb-backdrop.open{display:block;opacity:1;pointer-events:all}
.tb-menu-btn{display:none}

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.tb-btn-account{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--color-border);
  border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);
  font-size:var(--text-xs);font-weight:600;cursor:pointer;flex-shrink:0;text-decoration:none;
  transition:border-color var(--transition),color var(--transition),background var(--transition)}
.tb-btn-account:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}
.tb-btn-account.signed-in{border-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-border));color:var(--color-primary)}
.tb-tz-wrap{display:flex;align-items:center;flex-shrink:0;position:relative}
.tb-tz-select{
  appearance:none;-webkit-appearance:none;
  padding:5px 26px 5px 10px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;cursor:pointer;
  max-width:min(200px,34vw);transition:border-color var(--transition),color var(--transition)}
.tb-tz-select:hover,.tb-tz-select:focus{border-color:var(--color-primary);color:var(--color-primary);outline:none}
.tb-btn-icon{background:none;border:1px solid transparent;border-radius:var(--radius-md);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  cursor:pointer;color:var(--color-text-muted);transition:background var(--transition),color var(--transition)}
.tb-btn-icon:hover{background:var(--color-surface-offset);color:var(--color-text)}
.tb-btn-icon:active{background:var(--color-surface-dynamic)}

.date-cal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding-top:64px;background:oklch(0 0 0/.35)}
.date-cal-panel{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-4);
  width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 80px);overflow-y:auto}
.date-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.date-cal-head button{background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);
  width:28px;height:28px;cursor:pointer;color:var(--color-text-muted)}
.date-cal-head button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.date-cal-title{font-size:var(--text-sm);font-weight:600}
.date-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--space-3)}
.date-cal-dow{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-faint);text-align:center;padding:4px 0}
.date-cal-day{aspect-ratio:1;border:none;border-radius:var(--radius-md);background:transparent;
  font-size:var(--text-xs);color:var(--color-text-muted);cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center}
.date-cal-day:hover:not(:disabled){background:var(--color-surface-offset);color:var(--color-text)}
.date-cal-day.other{color:var(--color-text-faint);opacity:.45}
.date-cal-day.has-data::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;
  border-radius:50%;background:var(--color-primary)}
.date-cal-day.selected{background:var(--color-primary-highlight);color:var(--color-primary);font-weight:600}
.date-cal-day.in-range{background:var(--color-surface-offset)}
.date-cal-day:disabled{cursor:default;opacity:.25}
.date-cal-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.date-cal-presets button{font-size:var(--text-2xs);padding:4px 8px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer}
.date-cal-presets button:hover,.date-cal-presets button.active{border-color:var(--color-primary);
  color:var(--color-primary);background:var(--color-primary-highlight)}
.date-cal-foot{display:flex;justify-content:flex-end;gap:8px}
.date-cal-foot button{font-size:var(--text-xs);padding:6px 12px;border-radius:var(--radius-md);cursor:pointer}
.date-cal-cancel{background:none;border:1px solid var(--color-border);color:var(--color-text-muted)}
.date-cal-apply{background:var(--color-primary);border:1px solid var(--color-primary);color:var(--color-text-inverse)}

/* ─── Scope toolbar + filter card ───────────────────────────────────────── */
.scope-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-4)}
.scope-toolbar-divider{width:1px;height:24px;background:var(--color-divider);flex-shrink:0}
.scope-toolbar-section{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.scope-quick-presets{display:flex;gap:4px}
.scope-preset-btn{font-size:var(--text-xs);font-weight:500;padding:5px 10px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;
  transition:all var(--transition);white-space:nowrap}
.scope-preset-btn:hover,.scope-preset-btn.active{
  border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}
.scope-date-nav{display:flex;align-items:center;gap:2px}
.scope-nav-btn{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);width:28px;height:28px;font-size:var(--text-xs);line-height:1;
  color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition)}
.scope-nav-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.scope-date-label{font-size:var(--text-sm);font-weight:600;padding:5px 12px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text);cursor:pointer;white-space:nowrap;
  transition:all var(--transition)}
.scope-date-label:hover{border-color:var(--color-primary);color:var(--color-primary)}
.scope-inline-label{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--color-text-muted);white-space:nowrap}
.scope-window-select{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:5px 8px;font-size:var(--text-sm);font-weight:700;
  color:var(--color-text);cursor:pointer;min-width:52px}
.scope-window-select:focus{outline:none;border-color:var(--color-primary)}
.scope-stat{display:flex;align-items:baseline;gap:6px;margin-left:auto;flex-wrap:wrap}
.scope-stat-label{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--color-text-muted)}
.scope-stat-val{font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.scope-stat-sub{font-size:var(--text-2xs);color:var(--color-text-faint)}
.scope-share-btn{font-size:var(--text-xs);font-weight:500;padding:5px 10px;margin-left:4px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;
  transition:all var(--transition);white-space:nowrap}
.scope-share-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-4)}
.filter-card-head{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.filter-card-body .filter-bar{margin-bottom:0;padding:0}
.filter-scope-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2);line-height:1.45;max-width:52rem}
.filter-card-body .thr-bar{margin-bottom:0;background:transparent;border:none;padding:0}
.filter-card-body .thr-bar > .thr-bar-title:first-of-type,
.filter-card-body .thr-bar > .thr-divider:first-of-type{display:none}
@media (max-width:720px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,86vw);z-index:50;
    transform:translateX(-100%);transition:transform var(--transition);
    box-shadow:var(--shadow-md);-webkit-overflow-scrolling:touch}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open{overflow:hidden}
  .topbar{grid-column:1;padding:0 var(--space-4);height:48px;gap:var(--space-2)}
  .main{grid-column:1;padding:var(--space-4)}
  .tb-menu-btn{display:flex;flex-shrink:0}
  .tb-title{font-size:var(--text-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-account-text{display:none}
  .tb-tz-select{max-width:108px;font-size:var(--text-2xs);padding-right:22px}
  .scope-toolbar{padding:var(--space-3);gap:var(--space-2)}
  .scope-toolbar-divider{display:none}
  .scope-toolbar-section.scope-quick-presets{width:100%;justify-content:center}
  .scope-toolbar-section.scope-date-nav{width:100%;justify-content:center}
  .scope-toolbar-section.scope-window-inline{width:100%;justify-content:center}
  .scope-stat{margin-left:0;width:100%;padding-top:var(--space-2);
    border-top:1px solid var(--color-divider);justify-content:flex-end}
  .scope-date-label{max-width:min(160px,42vw);overflow:hidden;text-overflow:ellipsis}
  .scope-share-btn{margin-left:0;width:100%;text-align:center}
  .filter-bar{gap:var(--space-2);align-items:stretch}
  .filter-bar input{width:100%;min-width:0;flex:1 1 120px}
  .filter-bar .filter-sel{max-width:100%;flex:1 1 140px}
  .filter-count{margin-left:0;width:100%}
  .thr-bar{padding:var(--space-3);gap:var(--space-2)}
  .thr-divider{display:none}
  .thr-group{flex:1 1 calc(50% - 8px)}
  .fx-card-head{padding:var(--space-3);gap:var(--space-2)}
  .fx-team-name{font-size:var(--text-sm)}
  .fx-badge{font-size:var(--text-xs);min-width:48px;padding:2px 10px}
  .fx-card-body{flex-direction:column;overflow-x:visible}
  .fx-stat-col{border-right:none;border-bottom:1px solid var(--color-divider);
    padding:var(--space-3)}
  .fx-stat-col:last-child{border-bottom:none}
  .fx-card .fx-history-hint{padding:0 var(--space-3) var(--space-2)}
  .team-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .team-filter-note{width:100%;margin-left:0;margin-top:var(--space-1)}
  .team-comp-actions{width:100%;justify-content:flex-end}
  .stat-grid{grid-template-columns:1fr}
  .league-toolbar{align-items:stretch}
  .league-toolbar select,.league-toolbar button{flex:1 1 auto}
  .league-header .scope-share-btn{width:100%;margin-top:var(--space-2)}
  .league-title{font-size:var(--text-lg)}
  .lt-wrap{-webkit-overflow-scrolling:touch;overflow-x:clip}
  .lt-wrap.lt-stats-scroll-x{overflow-x:auto}
  .lt-tbl .lt-rank,.lt-tbl .lt-team{position:static;left:auto;box-shadow:none}
  .lt-tbl th.lt-rank,.lt-tbl th.lt-team{z-index:auto}
  .league-split{grid-template-columns:1fr}
  .league-split-round{order:2}
  .league-split-table{order:1}
  .lt-venue-tabs,.lt-group-tabs{width:100%}
  .lt-group-tab,.lt-venue-tabs .lt-group-tab{flex:1 1 30%;text-align:center;min-width:0}
  .lt-legend{gap:6px 10px}
  .history-table-wrap{-webkit-overflow-scrolling:touch}
  .history-table-wrap .td-competition{max-width:120px}
  .team-comp-chips{max-height:132px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .team-header-actions{width:100%;display:flex;gap:var(--space-2);margin-top:var(--space-2)}
  .team-header-actions .scope-share-btn{flex:1;text-align:center}
  .ag-table{font-size:var(--text-2xs)}
  .ag-table th,.ag-table td{padding:var(--space-1) var(--space-2)}
  .ag-table th.ag-th-fixture{min-width:132px}
  .fx-card-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .fx-meta-inline{font-size:var(--text-2xs)}
  .adm-wrap{padding:0}
  .adm-grid,.adm-env-grid{grid-template-columns:1fr}
  .adm-token-row{flex-direction:column;align-items:stretch}
  .adm-btn-row{flex-direction:column}
  .adm-btn{width:100%}
  .adm-input,.adm-select{width:100%;min-width:0}
  .date-cal-overlay{padding-top:24px;align-items:flex-start}
  .search-overlay{padding-top:48px;padding-left:var(--space-4);padding-right:var(--space-4)}
  .fx-drawer{max-width:100%;max-height:92dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .fx-overlay{align-items:flex-end;padding:0}
  .fx-drawer-header,.fx-drawer-body{padding-left:var(--space-4);padding-right:var(--space-4)}
  .fx-drawer-team{font-size:var(--text-base)}
  .fx-drawer-teams{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .fx-drawer-vs{display:none}
  .empty{padding:var(--space-10) var(--space-4)}
}

/* ─── Filter bar ────────────────────────────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.filter-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);white-space:nowrap}
.filter-sel{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:5px 10px;font-size:var(--text-xs);color:var(--color-text);cursor:pointer}
.filter-sel:focus{outline:none;border-color:var(--color-primary)}
.filter-bar input,.filter-bar select{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);
  color:var(--color-text);transition:border-color var(--transition)}
.filter-bar input:focus,.filter-bar select:focus{outline:none;border-color:var(--color-primary)}
.filter-bar input{width:200px}
.filter-tag{display:flex;align-items:center;gap:var(--space-1);
  background:var(--color-primary-highlight);color:var(--color-primary);
  border-radius:var(--radius-full);padding:2px 10px;font-size:var(--text-2xs);font-weight:500}
.filter-count{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-muted)}

/* ─── Fixture card ──────────────────────────────────────────────────────── */
/* ─── Card grid container (design-foundations Phase B1) ─────────────────────
   Was display:flex;flex-direction:column — one full-width card per row,
   which left large dead areas on wide monitors. Now a real auto-fill grid
   where each consumer sets its own card minimum via --fx-grid-min:
     team trend cards  ~400px  (trends.js)
     matchup/dashboard ~580px  (fixtures.js)
     player cards      ~400px  (player.js)
     settlement cards  100%    (settlement.js — wide scrolling tables)
   auto-fill keeps cards at a consistent size rather than stretching a
   single card to full width. The grid naturally collapses to fewer
   columns as the viewport narrows, reaching 1 column on mobile. */
.fixtures-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fx-grid-min,420px),1fr));gap:var(--space-3)}
.fx-card{position:relative}
.fx-card .league-link{position:relative;z-index:2}
.fx-badge-link{display:block;text-decoration:none;color:inherit;border-radius:8px}
.fx-badge-link:hover .fx-badge-live-score,
.fx-badge-link:hover .fx-badge-score{color:var(--color-primary)}
.fx-badge-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pl-card-name-link{color:inherit;text-decoration:none}
.pl-card-name-link:hover{color:var(--color-primary);text-decoration:underline}
.fx-card-body .form-chips .form-chip-wrap{position:relative;z-index:2}
.fx-card-body .form-chips .form-chip-wrap:hover,
.fx-card-body .form-chips .form-chip-wrap:focus-within{z-index:3}
/* When cards sit side by side in a grid, a popup from one card is trapped
   inside that card's stacking context (.fx-card{position:relative}) and
   gets overlapped by the neighboring card. Raise the card itself while a
   chip inside it is hovered/focused so the popup clears its neighbor. */
.fx-card:has(.form-chip-wrap:hover),
.fx-card:has(.form-chip-wrap:focus-within){z-index:10}
a.ag-fixture-link{display:block;color:inherit;text-decoration:none}
a.ag-fixture-link:hover .ag-fixture-teams{color:var(--color-primary)}
a.fixture-row-link{color:inherit;text-decoration:none}
a.fixture-row-link:hover{text-decoration:underline;color:var(--color-primary)}
a.search-result-item{text-decoration:none;color:inherit}
a.tb-btn-account{text-decoration:none}
.fx-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--transition),border-color var(--transition);
  content-visibility:auto;contain-intrinsic-size:0 160px}
.fx-card:hover{box-shadow:var(--shadow-md);border-color:oklch(from var(--color-primary) l c h/.4)}
.pl-card .pl-card-head{padding:var(--space-3) var(--space-5) var(--space-1);position:relative;z-index:2}
.pl-card-name{font-size:var(--text-base);font-weight:700;color:var(--color-text)}
.pl-card-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.pl-card-next{padding:0 var(--space-5) var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);position:relative;z-index:2}
.pl-card-body{padding:0 var(--space-5) var(--space-3);position:relative;z-index:2}
.pl-card-footer{padding:0 var(--space-5) var(--space-3);font-size:var(--text-2xs);color:var(--color-text-faint);line-height:1.4;position:relative;z-index:2}
/* Player trend rows — full-width horizontal layout on /trends/players.
   Left: identity block (name, team·position, next fixture link).
   Right: stat block (hit% + line + hits/games + chips).
   Stacked vertically on narrow widths. */
.trend-rows{display:flex;flex-direction:column;gap:var(--space-3)}
.pl-row{display:flex;align-items:flex-start;gap:var(--space-5);
  padding:var(--space-3) var(--space-5);flex-wrap:wrap}
.pl-row-left{flex:0 0 auto;min-width:200px;max-width:300px}
.pl-row-next{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:4px}
.pl-row-next .fixture-row-link{color:inherit}
.pl-row-next .fixture-row-link:hover{color:var(--color-primary)}
.pl-row-stat{flex:1 1 auto;min-width:0}
.pl-row-stat-label{font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.pl-row-stat-main{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin-bottom:4px}
.pl-row .pl-card-footer{padding:0;flex-basis:100%}
@media(max-width:768px){
  .pl-row{flex-direction:column;gap:var(--space-2)}
  .pl-row-left{max-width:none}
}
.pl-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.pl-chip-col{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:30px}
.pl-chip-meta{display:inline-flex;align-items:center;gap:2px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);font-variant-numeric:tabular-nums;line-height:1.2;text-align:center;white-space:nowrap}
.pl-chip-meta .fxd-pl-sub-cell{width:0.75rem;height:1rem;margin:0}
.pl-chip-meta .fxd-pl-sub-ico{width:9px;height:11px}
.pl-row .form-chip{width:26px;height:26px}
.pl-chips .form-chip-wrap{position:relative;z-index:0}
.pl-chips .form-chip-wrap:hover,.pl-chips .form-chip-wrap:focus-within{z-index:2}
.pl-chips .form-chip-popup{z-index:3}
.fx-card-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-divider);gap:var(--space-3)}
.fx-team{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.fx-team.away{align-items:flex-end}.fx-team-name{font-size:var(--text-base);font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.fx-meta-inline{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fx-standing{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);white-space:nowrap;letter-spacing:.01em}
.fx-standing .pos{color:var(--color-text);font-weight:700}
.fx-standing .ppg{opacity:.7}
.fx-badge{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;padding:3px 12px;font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;min-width:56px}
.fx-badge.live{border-color:oklch(from var(--color-error) l c h / 0.35);padding:4px 10px}
.fx-badge-live-score{display:block;font-weight:800;color:var(--color-text);font-size:var(--text-sm);line-height:1.25}
.fx-badge-live-min{display:block;font-size:var(--text-xs);font-weight:700;color:var(--color-error);line-height:1.25;margin-top:1px}
.fx-badge-score{font-weight:800;color:var(--color-text);font-size:var(--text-xs);line-height:1.3}
.fx-meta{display:none}
.fx-history-hint{font-size:var(--text-2xs);color:var(--color-warning,#b45309);margin-top:4px;line-height:1.35}
.fx-card .fx-history-hint{display:block;padding:0 var(--space-5) var(--space-2)}
.fx-match-stats-hint{display:block;padding:0 var(--space-5) var(--space-1);
  font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.01em}
.fx-match-stats-hint.live{color:var(--color-primary)}
.fx-card-body{display:flex;gap:0;overflow-x:auto}
.fx-stat-col{flex:1;min-width:0;padding:var(--space-3) var(--space-4);border-right:1px solid var(--color-divider)}
.fx-stat-col:last-child{border-right:none}
.fx-stat-label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-faint);
  margin-bottom:var(--space-2);font-weight:600}
.fx-stat-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}
.fx-side-tag{font-size:var(--text-2xs);font-weight:600;width:22px;color:var(--color-text-faint);flex-shrink:0}
.pct-bar-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pct-bar-row{display:flex;align-items:center;gap:var(--space-2)}
.pct-val{font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums;
  width:34px;flex-shrink:0;color:var(--color-text)}
.pct-bar{flex:1;height:5px;background:var(--color-surface-dynamic);border-radius:var(--radius-full);overflow:hidden}
.pct-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .5s cubic-bezier(.16,1,.3,1)}
.form-chips{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}
.form-chip{width:26px;height:26px;border-radius:4px;font-size:var(--text-sm);font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--chip-text,#fff);flex-shrink:0}
.form-chip.Y,.form-chip.W,.form-chip.O{background:var(--chip-success-bg,var(--color-success))}
.form-chip.N,.form-chip.L,.form-chip.U{background:var(--chip-error-bg,var(--color-error))}
.form-chip.D{background:var(--color-text-faint)}
.form-chip-wrap.form-chip-wrap-context .form-chip{opacity:.42}
.form-chip.form-chip-next{background:var(--color-surface-3,oklch(.28 0 0));color:var(--color-text-muted);font-weight:700}
.form-chip-wrap{position:relative;display:inline-block;vertical-align:top}
.form-chip-wrap .form-chip{text-decoration:none;color:var(--chip-text,#fff);cursor:pointer}
.form-chip-wrap .form-chip:hover{filter:brightness(1.08)}
.form-chip-wrap-latest .form-chip-latest-bar{display:block}
.form-chip-latest-bar{display:none;width:26px;height:2px;margin:2px auto 0;border-radius:1px;background:var(--color-text-muted)}
.form-chip-popup{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  min-width:190px;max-width:280px;padding:8px 10px;border-radius:var(--radius-md);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  box-shadow:0 8px 24px oklch(0 0 0/.22);font-size:var(--text-xs);line-height:1.5;color:var(--color-text);
  white-space:normal;text-align:center;opacity:0;visibility:hidden;pointer-events:none;z-index:30;
  transition:opacity .12s ease,visibility .12s ease}
.form-chip-wrap:hover .form-chip-popup,.form-chip-wrap:focus-within .form-chip-popup{
  opacity:1;visibility:visible}
.js-tooltips .form-chip-wrap:hover .form-chip-popup,
.js-tooltips .form-chip-wrap:focus-within .form-chip-popup{
  opacity:0;visibility:hidden}
#chip-tooltip.form-chip-popup{position:fixed;left:0;top:0;display:none;pointer-events:none;z-index:1000;
  opacity:1;visibility:visible;transform:none;bottom:auto}
.form-chip-line{display:block}
.form-chip-line:not(:last-child){margin-bottom:2px}
.form-chip-scoreline{font-weight:700;font-size:var(--text-sm)}
.form-chip-competition{color:var(--color-text);font-weight:600;margin-top:2px}
.form-chip-date{color:var(--color-text);margin-top:2px}
.form-chip-meta{color:var(--color-text)}
.form-chip-stat{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-top:4px;padding-top:4px;border-top:1px solid var(--color-divider)}
.form-chip-stat-hit{color:var(--color-success)}
.form-chip-stat-miss{color:var(--color-error)}
.form-chip-result{font-weight:700}
.form-chip-result-win{color:var(--color-success)}
.form-chip-result-loss{color:var(--color-error)}
.form-chip-result-draw{color:var(--color-text-muted)}
.form-chip-popup strong{font-weight:700;color:var(--color-text)}
.form-chip-stat-hit strong,.form-chip-stat-miss strong{color:inherit}
.sfr-block{display:flex;flex-direction:column;gap:6px}.sfr-row-label{display:flex;justify-content:space-between;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);margin-bottom:3px;padding:0 2px}.sfr-row{display:flex;align-items:stretch;gap:8px;margin-bottom:8px}.sfr-chip-block{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.sfr-bar-wrap{height:5px;background:var(--color-surface-dynamic);border-radius:3px;overflow:hidden}.sfr-bar-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.16,1,.3,1)}.sfr-chip-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sfr-pct{font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.sfr-sep{width:1px;align-self:stretch;background:var(--color-divider);flex-shrink:0;margin:0 2px}
.odds-wrap{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.odd-bkm{font-size:var(--text-2xs);color:var(--color-text-faint);margin-top:2px;opacity:0.7}
.odd-pill{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:2px 7px;font-size:var(--text-2xs);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--color-text)}
.odd-pill.value{background:var(--color-success-highlight);border-color:oklch(from var(--color-success) l c h/.3);
  color:var(--color-success)}
.odd-label{font-size:var(--text-2xs);color:var(--color-text-faint)}
.odd-multi-stack{display:flex;flex-direction:column;gap:4px;margin-top:4px;min-width:0}
.odd-multi-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--text-2xs);line-height:1.3;color:var(--color-text-faint)}
.odd-multi-row .odd-multi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odd-multi-row .odd-multi-val{font-variant-numeric:tabular-nums;font-weight:500;color:var(--color-text-muted)}
.odd-multi-row.best .odd-multi-val{color:var(--color-gold);font-weight:700;text-shadow:0 0 10px oklch(from var(--color-gold) l c h / 0.5)}
.odd-multi-row.best .odd-multi-name{color:var(--color-text-muted)}
.odd-line-note{font-size:var(--text-2xs);color:var(--color-text-faint);margin-bottom:2px}
/* Game card odds — readable size + primary text (not grey) */
.fx-card .fx-stat-col:has(.odds-wrap){flex:0 0 auto;min-width:118px;max-width:42%}
.fx-card .fx-stat-col:has(.odds-wrap) .fx-stat-label{color:var(--color-text);font-size:var(--text-2xs);opacity:.85}
.fx-card .odds-wrap{gap:var(--space-2)}
.fx-card .odd-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text);letter-spacing:.02em;margin-bottom:2px}
.fx-card .odd-line-note{font-size:var(--text-xs);color:var(--color-text);margin-bottom:4px;font-weight:500}
.fx-card .odd-multi-stack{gap:5px}
.fx-card .odd-multi-row{font-size:var(--text-xs);line-height:1.35;color:var(--color-text)}
.fx-card .odd-multi-row .odd-multi-name{color:var(--color-text);font-weight:500}
.fx-card .odd-multi-row .odd-multi-val{font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.fx-card .odd-multi-row.best .odd-multi-name{color:var(--color-text)}
.fx-card .odd-multi-row.best .odd-multi-val{color:var(--color-gold);font-size:var(--text-sm);font-weight:800}
.fx-card .odd-multi-row.is-placeholder .odd-multi-name,.fx-card .odd-multi-row.is-placeholder .odd-multi-val{color:var(--color-text-faint);font-weight:400}
.fx-card .odd-pill{font-size:var(--text-xs);padding:3px 9px;color:var(--color-text)}
.bkm-order-row{display:flex;align-items:center;gap:var(--space-2);padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);margin-bottom:4px}
.bkm-order-row.bkm-drag-over{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.bkm-order-row.bkm-dragging{opacity:.55}
.bkm-order-list{max-height:320px;overflow-y:auto;margin-top:var(--space-2);touch-action:none}
.bkm-order-rank{font-size:var(--text-2xs);color:var(--color-text-faint);width:22px;flex-shrink:0;text-align:right;font-variant-numeric:tabular-nums}
.bkm-order-name{font-size:var(--text-sm);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkm-order-id{font-size:var(--text-2xs);color:var(--color-text-faint);flex-shrink:0}
.bkm-odds-toggles{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-3) 0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset)}
.bkm-odds-toggle{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-xs);cursor:pointer;line-height:1.35}
.bkm-odds-toggle input{margin-top:2px;flex-shrink:0}
body.bkm-order-dragging, body.bkm-order-dragging *{cursor:grabbing !important;user-select:none !important}
.bkm-drag-handle{display:flex;align-items:center;justify-content:center;width:28px;flex-shrink:0;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset);
  color:var(--color-text-muted);font-size:var(--text-sm);line-height:1;cursor:grab;user-select:none;touch-action:none}
.bkm-drag-handle:active{cursor:grabbing}
.bkm-order-nudge{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.bkm-order-nudge button{border:1px solid var(--color-border);background:var(--color-surface-offset);color:var(--color-text-muted);
  width:22px;height:14px;font-size:var(--text-2xs);line-height:1;padding:0;cursor:pointer;border-radius:2px}
.bkm-order-nudge button:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* ─── Colour helpers ─────────────────────────────────────────────────────── */
.pct-fill-btts{background:var(--color-primary)}
.pct-fill-o25{background:var(--color-gold)}
.pct-fill-bttso25{background:var(--color-orange)}
.pct-fill-wins{background:var(--color-blue)}
.pct-fill-corners{background:var(--color-purple)}
.pct-fill-cards{background:var(--color-warning)}
.hi-green{color:var(--color-success)!important}
.hi-amber{color:var(--color-gold)!important}
.hi-red{color:var(--color-error)!important}
.hi-white{color:var(--color-text)!important}

/* ─── Skeleton ──────────────────────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,var(--color-surface-offset) 25%,var(--color-surface-dynamic) 50%,var(--color-surface-offset) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--radius-sm)}
.skel-card{height:140px;border-radius:var(--radius-lg)}
.skel-text{height:.75rem;border-radius:var(--radius-full);margin-bottom:var(--space-2)}
.skel-row{height:56px;border-radius:var(--radius-lg);margin-bottom:var(--space-2)}

/* ─── Team page ─────────────────────────────────────────────────────────── */
.team-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.team-title-row{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.team-title-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0;border-radius:4px}
.team-name-big{font-size:var(--text-xl);font-weight:700}
.team-meta-line{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:4px;line-height:1.45}
.team-header-flag{width:18px;height:14px;object-fit:cover;border-radius:2px;vertical-align:-2px;margin-right:5px}
.team-header-country{display:inline-flex;align-items:center;gap:4px}
.team-record{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-top:6px;
  font-variant-numeric:tabular-nums}
.team-record-sub{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;margin-left:8px}
.team-toolbar{margin-bottom:var(--space-4)}
.team-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.team-toolbar-row:last-child{margin-bottom:0}
.team-comp-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.team-comp-chip{font-size:var(--text-xs);font-weight:500;padding:5px 10px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);
  cursor:pointer;transition:all var(--transition);max-width:100%;text-align:left;line-height:1.3}
.team-comp-chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.team-comp-chip.active{border-color:var(--color-primary);color:var(--color-primary);
  background:var(--color-primary-highlight)}
.team-comp-chip .team-comp-count{opacity:.75;font-weight:600;margin-left:4px}
.team-comp-chip .team-comp-tag{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;
  opacity:.8;margin-left:4px}
.team-filter-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto}
.team-comp-actions{display:flex;gap:4px;flex-shrink:0}
.team-comp-mini{font-size:var(--text-2xs);padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer}
.team-comp-mini:hover{border-color:var(--color-primary);color:var(--color-primary)}
.history-table-wrap .td-competition{text-align:left;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--text-xs);color:var(--color-text-muted)}
.team-schedule-row.context td{background:var(--color-primary-highlight)}
.team-schedule-badge{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-primary);margin-left:6px}
.team-status-upcoming{color:var(--color-text-muted);font-size:var(--text-xs)}
.team-status-live{color:var(--color-error);font-weight:600;font-size:var(--text-xs)}
.team-list-view-all-row td{border-bottom:none;padding-top:var(--space-1);padding-bottom:var(--space-2)}
.team-list-view-all-btn{font-size:var(--text-xs);padding:4px 10px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer}
.team-list-view-all-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.team-upcoming-empty{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-4);margin-bottom:var(--space-6)}
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}
.stat-card-label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500;
  margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.06em;font-size:var(--text-2xs)}
.stat-item{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-1) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-xs)}
.stat-item:last-child{border-bottom:none}
.stat-item-val{font-weight:600;font-variant-numeric:tabular-nums}

/* ─── Match history table ───────────────────────────────────────────────── */
/* Base table styling is global on purpose: this app is data-dense and nearly
   every view renders a <table>. Sticky headers + tabular numerals everywhere. */
.history-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);
  border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-xs)}
table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
thead tr{background:var(--color-surface-offset)}
th{padding:var(--space-3);text-align:left;font-weight:700;
  font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border);white-space:nowrap;background:var(--color-surface-offset)}
.history-table-wrap th{position:sticky;top:0;z-index:1}
td{padding:var(--space-3);border-bottom:1px solid var(--color-divider);
  white-space:nowrap;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--transition)}
tbody tr:hover td{background:var(--color-surface-offset)}
.score-badge{font-weight:700;background:var(--color-surface-dynamic);color:var(--color-text);
  border-radius:var(--radius-sm);padding:2px 7px;font-variant-numeric:tabular-nums}
.won{color:var(--color-success)} .lost{color:var(--color-error)} .drew{color:var(--color-text-muted)}

/* ─── Empty / error states ──────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted);gap:var(--space-3)}
/* Give the icon a soft plate so empty states look designed, not broken */
.empty > svg{color:var(--color-text-faint);opacity:.9;padding:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-full);box-sizing:content-box;margin-bottom:var(--space-1)}
.empty-title{font-size:var(--text-base);font-weight:600;color:var(--color-text);letter-spacing:-.01em}
.empty-sub{font-size:var(--text-xs);color:var(--color-text-muted);max-width:38ch;line-height:1.6}

/* ─── Search overlay ────────────────────────────────────────────────────── */
.search-overlay{position:fixed;inset:0;background:oklch(0 0 0/.5);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding-top:80px;
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--transition)}
.search-overlay.open{opacity:1;pointer-events:all}
.search-box{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);width:500px;max-width:calc(100vw - 32px);
  box-shadow:var(--shadow-md);overflow:hidden}
.search-input-row{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider)}
#search-input{flex:1;background:none;border:none;font-size:var(--text-base);
  color:var(--color-text);outline:none;font-family:var(--font-body)}
#search-input::placeholder{color:var(--color-text-faint)}
.search-results{max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.search-result-item{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);cursor:pointer;transition:background var(--transition)}
.search-result-item:hover{background:var(--color-surface-offset)}
.search-result-name{font-size:var(--text-sm);font-weight:500}
.search-result-sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.search-hint{padding:var(--space-3) var(--space-5);font-size:var(--text-xs);
  color:var(--color-text-faint);border-top:1px solid var(--color-divider)}

/* ─── Error toast ────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:var(--space-6);right:var(--space-6);
  background:var(--color-surface-elevated);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);
  box-shadow:var(--shadow-lg);font-size:var(--text-sm);font-weight:500;z-index:200;
  max-width:min(420px,calc(100vw - 32px));
  transform:translateY(12px) scale(.98);opacity:0;
  transition:transform var(--transition-slow),opacity var(--transition-slow);pointer-events:none}
.toast.show{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.toast.error{border-color:color-mix(in srgb,var(--color-error) 45%,var(--color-border));
  background:var(--color-error-highlight);color:var(--color-text)}

/* ─── Scrollbars ────────────────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--color-surface-dynamic) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-surface-dynamic);border-radius:var(--radius-full);
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ─── Focus ─────────────────────────────────────────────────────────────── */
/* Keyboard-only focus ring. Uses a soft ring rather than a hard outline so it
   reads as intentional design rather than a browser default. */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{outline:none;
  box-shadow:var(--ring-primary);border-radius:var(--radius-md)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;
  border-color:var(--color-primary);box-shadow:var(--ring-primary)}
::selection{background:var(--color-primary-highlight);color:var(--color-text)}

/* ─── Fixture detail overlay ─────────────────────────────────────── */
.fx-overlay{position:fixed;inset:0;background:oklch(0 0 0/.5);z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--transition)}
.fx-overlay.open{opacity:1;pointer-events:all}
.fx-drawer{background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  width:100%;max-width:860px;max-height:90vh;overflow-y:auto;
  box-shadow:0 -8px 32px oklch(0.2 0.01 80/.12);
  transform:translateY(100%);transition:transform 300ms cubic-bezier(.4,0,.2,1)}
.fx-overlay.open .fx-drawer{transform:translateY(0)}
.fx-drawer-header{position:sticky;top:0;background:var(--color-surface);z-index:2;
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-divider);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.fx-drawer-teams{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0}
.fx-drawer-team{font-size:var(--text-lg,1.1rem);font-weight:700;color:var(--color-text)}
.fx-drawer-vs{font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0}
.fx-drawer-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.fx-drawer-matchhead{width:100%;min-width:0}
.fx-drawer-header-main{flex:1;min-width:0}
.fx-drawer-header-actions{flex-shrink:0;display:flex;align-items:flex-start;gap:var(--space-2)}
.fx-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.fx-drawer-kickoff{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;margin-top:var(--space-1)}
.fx-drawer-venue{color:var(--color-primary);font-weight:500}
.fx-drawer-close{background:none;border:none;cursor:pointer;color:var(--color-text-muted);
  padding:var(--space-2);border-radius:var(--radius-md);display:flex;align-items:center}
.fx-drawer-close:hover{background:var(--color-surface-dynamic);color:var(--color-text)}
.fx-drawer-body{padding:var(--space-4) var(--space-6) var(--space-8)}
.fxd-section{margin-bottom:var(--space-6)}
.fxd-live-banner{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
  background:oklch(from var(--color-error) l c h/.08);border:1px solid oklch(from var(--color-error) l c h/.25);
  border-radius:var(--radius-md);font-size:var(--text-sm)}
.fxd-live-minute{font-weight:800;color:var(--color-error)}
.fxd-section-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)}
.fxd-admin-edit{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset)}
.fxd-admin-edit.locked{border-color:oklch(from var(--color-warning, #c9a227) l c h / .55)}
.fxd-admin-edit-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-2)}
.fxd-admin-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:var(--space-2);margin-bottom:var(--space-2)}
.fxd-admin-edit-grid label{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;flex-direction:column;gap:4px}
.fxd-admin-edit-grid input,.fxd-admin-edit-grid select{font-size:var(--text-sm);padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.fxd-admin-edit-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.fxd-admin-lock-badge{font-size:var(--text-xs);color:var(--color-warning, #b8860b)}
.fxd-admin-edit textarea{width:100%;min-height:120px;font-family:ui-monospace,monospace;font-size:var(--text-xs);padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);resize:vertical}
.fxd-admin-subsection{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-divider)}
.fxd-admin-stat-group{margin-bottom:var(--space-3)}
.fxd-admin-stat-group-title{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.fxd-admin-events-table{width:100%;border-collapse:collapse;font-size:var(--text-xs);margin-bottom:var(--space-2)}
.fxd-admin-events-table th,.fxd-admin-events-table td{padding:6px 8px;border-bottom:1px solid var(--color-divider);text-align:left;vertical-align:top}
.fxd-admin-events-table th{color:var(--color-text-muted);font-weight:600}
.fxd-admin-event-form{padding:var(--space-2);border:1px dashed var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--space-2);background:var(--color-surface)}
.fxd-admin-event-form-title{font-size:var(--text-xs);font-weight:600;margin-bottom:var(--space-2)}
.fxd-admin-inline{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:flex-end}
.fxd-odds-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fxd-odd-pill{display:flex;flex-direction:column;align-items:center;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-width:72px}
.fxd-odd-label{font-size:var(--text-2xs);color:var(--color-text-muted);margin-bottom:2px}
.fxd-odd-bm{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1);text-align:center;line-height:1.3}
.fxd-odd-val{font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.fxd-odds-multi-grid{
  display:flex;flex-direction:column;gap:var(--space-3);
}
.fxd-odds-multi-row{display:grid;gap:var(--space-3);align-items:stretch}
.fxd-odds-multi-row--primary{grid-template-columns:1.35fr 1fr 1fr}
.fxd-odds-multi-row--secondary{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.fxd-odds-multi-block{
  min-width:0;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3) var(--space-2);
}
.fxd-odds-multi-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text);margin-bottom:6px;text-align:center;letter-spacing:.02em}
.fxd-odds-multi-block .odds-wrap{display:grid;gap:6px;align-items:start}
.fxd-odds-multi-block .odds-wrap.fxd-odds-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fxd-odds-multi-block .odds-wrap.fxd-odds-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fxd-odds-multi-block .odds-wrap.fxd-odds-cols-1{grid-template-columns:minmax(0,1fr)}
.fxd-odds-multi-block .odd-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:3px;text-align:center;line-height:1.2}
.fxd-odds-multi-block .odd-line-note{font-size:var(--text-2xs);color:var(--color-text-muted);text-align:center;margin-bottom:3px}
.fxd-odds-multi-block .odd-multi-stack{gap:4px;margin-top:0}
.fxd-odds-multi-block .odd-multi-row{font-size:var(--text-xs);line-height:1.3;padding:1px 0;gap:8px}
.fxd-odds-multi-block .odd-multi-row .odd-multi-name{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}
.fxd-odds-multi-block .odd-multi-row .odd-multi-val{font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.fxd-odds-multi-block .odd-multi-row.best .odd-multi-val{color:var(--color-gold);font-weight:800}
.fxd-odds-multi-block .odd-multi-row.is-placeholder .odd-multi-name,
.fxd-odds-multi-block .odd-multi-row.is-placeholder .odd-multi-val{color:var(--color-text-faint);font-weight:400}
.fxd-odds-multi-block .odd-pill{font-size:var(--text-xs);padding:3px 8px;text-align:center}
@media (max-width:640px){
  .fxd-odds-multi-row--primary{grid-template-columns:1fr;gap:var(--space-2)}
  .fxd-odds-multi-row--secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fxd-live-odds-wrap{display:flex;flex-direction:column;gap:var(--space-2)}
.fxd-live-odds-group{display:flex;flex-direction:column;gap:var(--space-1)}
.fxd-live-odds-group-title{font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}
.fxd-live-odds-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:flex-start}
.fxd-live-odds-block{
  flex:0 1 auto;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:5px 10px 6px;
}
.fxd-live-odds-block-title{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);margin-bottom:3px;line-height:1.2}
.fxd-live-sels{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.fxd-live-sel{font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3}
.fxd-live-sel-l{font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);margin-right:2px}
.fxd-live-sel-v{font-weight:700;color:var(--color-text)}
.fxd-live-odds-note{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.fxd-context-panel{
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-3);
}
.fxd-context-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
  padding-bottom:var(--space-2);border-bottom:1px solid var(--color-divider);
}
.fxd-context-window{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.fxd-context-toolbar-label{font-size:var(--text-xs);color:var(--color-text-muted)}
.fxd-context-window-select{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:4px 8px;font-size:var(--text-sm);font-weight:600;
  color:var(--color-text);min-width:3.25rem;
}
.fxd-context-window-select:focus{outline:none;border-color:var(--color-primary)}
.fxd-context-season-toggle{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);
  color:var(--color-text);cursor:pointer;user-select:none;white-space:nowrap;
}
.fxd-context-season-toggle input{
  width:14px;height:14px;margin:0;accent-color:var(--color-primary);cursor:pointer;
}
.fxd-context-scope{
  font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4;text-align:right;max-width:28rem;
}
.fxd-context-board{
  display:grid;grid-template-columns:minmax(10.5rem,auto) minmax(0,1fr) minmax(10.5rem,auto);
  gap:var(--space-2) var(--space-3);align-items:start;
}
.fxd-context-side{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.fxd-context-side--away{align-items:flex-end;text-align:right}
.fxd-context-donut-wrap,.fxd-context-ring-wrap{display:flex;align-items:center;gap:var(--space-2)}
.fxd-context-side--away .fxd-context-donut-wrap,
.fxd-context-side--away .fxd-context-ring-wrap{flex-direction:row-reverse}
.fxd-context-donut,.fxd-context-ring{
  width:5.75rem;height:5.75rem;border-radius:50%;flex-shrink:0;position:relative;
}
.fxd-context-donut-hole,.fxd-context-ring-hole{
  position:absolute;inset:0.95rem;border-radius:50%;
  background:var(--color-surface-offset);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-2xs);line-height:1.25;font-weight:600;color:var(--color-text-muted);text-align:center;
}
.fxd-context-ring-hole{font-size:var(--text-xs);font-weight:800;color:var(--color-text)}
.fxd-context-ring-hole.fxd-context-gd--pos{color:var(--color-success)}
.fxd-context-ring-hole.fxd-context-gd--neg{color:var(--color-error)}
.fxd-context-legend,.fxd-context-goals-list{
  list-style:none;margin:0;padding:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);
}
.fxd-context-legend li,.fxd-context-goals-list li{display:flex;align-items:center;gap:6px}
.fxd-context-side--away .fxd-context-legend li,
.fxd-context-side--away .fxd-context-goals-list li{flex-direction:row-reverse}
.fxd-context-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fxd-context-dot--w{background:var(--color-success)}
.fxd-context-dot--d{background:var(--color-text-faint)}
.fxd-context-dot--l{background:var(--color-error)}
.fxd-context-center{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0 var(--space-1)}
.fxd-context-metric{
  display:grid;grid-template-columns:minmax(2.75rem,1fr) minmax(0,1.45fr) minmax(2.75rem,1fr);
  gap:5px;align-items:stretch;
}
.fxd-context-metric-val{
  display:flex;align-items:center;justify-content:center;
  padding:5px 8px;border-radius:var(--radius-sm);font-weight:800;font-size:var(--text-sm);
  font-variant-numeric:tabular-nums;min-height:2rem;
}
.fxd-context-metric-val--home{
  background:var(--color-primary-highlight);color:var(--color-primary);
  border:1px solid oklch(from var(--color-primary) l c h / .22);
}
.fxd-context-metric-val--away{
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);
}
.fxd-context-metric-label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:5px 8px;background:transparent;
  font-size:var(--text-xs);line-height:1.35;color:var(--color-text);font-weight:600;
}
@media (max-width:820px){
  .fxd-context-toolbar{flex-direction:column;align-items:flex-start}
  .fxd-context-scope{text-align:left;max-width:none}
  .fxd-context-board{grid-template-columns:1fr;gap:var(--space-3)}
  .fxd-context-side--away{align-items:flex-start;text-align:left}
  .fxd-context-side--away .fxd-context-donut-wrap,
  .fxd-context-side--away .fxd-context-ring-wrap{flex-direction:row}
  .fxd-context-side--away .fxd-context-legend li,
  .fxd-context-side--away .fxd-context-goals-list li{flex-direction:row}
  .fxd-context-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
}
.fxd-tabs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-4)}
.fxd-tab{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;cursor:pointer;border:1px solid var(--color-border);
  background:var(--color-surface-offset);color:var(--color-text-muted);transition:all var(--transition)}
.fxd-tab.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.fxd-stat-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider)}
.fxd-stat-row:last-child{border-bottom:none}
.fxd-stat-label{flex:1;font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}
.fxd-stat-val{font-size:var(--text-sm);font-weight:700;color:var(--color-text);min-width:36px;text-align:right}
.fxd-stat-val.away{text-align:left}
.fxd-bar-wrap{flex:2;height:6px;background:var(--color-surface-dynamic);border-radius:var(--radius-full);overflow:hidden;display:flex}
.fxd-bar-home{height:100%;background:var(--color-primary);border-radius:var(--radius-full) 0 0 var(--radius-full)}
.fxd-loading{padding:var(--space-8);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}
.fx-page{padding:var(--space-4) var(--space-6) var(--space-8)}
.fx-page-header{padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--color-divider)}
.fx-page-body{padding-top:var(--space-2)}
.fxd-fullpage-link{color:inherit;text-decoration:none}
.fxd-fullpage-link:hover{color:var(--color-primary);text-decoration:underline}
.fxd-history-side{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}
.fxd-history-side-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--line-color);
  background:var(--color-surface-dynamic);font-size:var(--text-xs);cursor:pointer;color:var(--color-text-muted)}
.fxd-history-side-btn.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.fxd-events-list{display:flex;flex-direction:column;gap:0}
.fxd-event-row{display:grid;grid-template-columns:44px 28px 1fr;gap:var(--space-2);align-items:start;
  padding:var(--space-2) 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.fxd-event-row:last-child{border-bottom:none}
.fxd-event-minute{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-align:right;padding-top:2px}
.fxd-event-icon{font-size:var(--text-base);line-height:1.2;text-align:center}
.fxd-event-body{min-width:0}
.fxd-event-team{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:2px}
.fxd-event-main{font-weight:600;color:var(--color-text)}
.fxd-event-detail{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.fxd-event-row.goal .fxd-event-main{color:var(--color-text)}
.fxd-event-row.card-yellow .fxd-event-icon{filter:none}
.fxd-event-row.card-red .fxd-event-main{color:var(--color-error)}
.fxd-lineups-board{display:flex;flex-direction:column;gap:var(--space-2)}
.fxd-lineups-team-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.fxd-lineups-team-head .away{text-align:right}
.fxd-lineups-team-head strong{color:var(--color-text)}
.fxd-lineups-pitch-wrap{width:min(100%,46rem);height:27rem;margin-inline:auto}
.fxd-lineups-bench-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-2)}
@media(max-width:720px){.fxd-lineups-bench-grid{grid-template-columns:1fr}}
.fxd-lineups-bench-grid .fxd-lineup-list{margin-top:var(--space-1)}
.fxd-lineups-bench-grid .fxd-lineup-list-title{font-size:var(--text-2xs);margin-bottom:2px}
.fxd-lineups-bench-grid .fxd-lineup-list-row{font-size:var(--text-xs);padding:2px 0;gap:var(--space-1)}
.fxd-lineups-bench-grid .fxd-lineup-num{min-width:18px;font-size:var(--text-2xs)}
.fxd-lineups-bench-grid .fxd-lineup-pos{font-size:var(--text-2xs)}
.fxd-lineup-side{min-width:0}
.fxd-lineup-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.fxd-pitch{position:relative;width:100%;height:100%;
  border:1px solid var(--color-divider);border-radius:var(--radius-md);overflow:hidden;
  background-color:var(--color-surface);
  background-image:repeating-linear-gradient(90deg,var(--color-surface-offset) 0,var(--color-surface-offset) 10%,var(--color-surface) 10%,var(--color-surface) 20%)}
.fxd-pitch-markings{position:absolute;inset:0;pointer-events:none;z-index:0;color:var(--color-divider);opacity:.28}
.fxd-pitch-markings svg{width:100%;height:100%;display:block}
.fxd-pitch-players{position:absolute;inset:0;z-index:1;overflow:hidden}
.fxd-pitch-player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:0.18rem;text-align:center;pointer-events:none;width:2.0625rem}
.fxd-pitch-player.home .fxd-pitch-num{background:var(--color-primary-hover);color:#f9f8f4;border:1px solid oklch(from var(--color-primary-hover) l c h / 0.55)}
.fxd-pitch-player.away .fxd-pitch-num{background:var(--color-surface-dynamic);color:var(--color-text);border:1px solid var(--color-border)}
.fxd-pitch-num{display:inline-flex;align-items:center;justify-content:center;width:2.0625rem;height:2.0625rem;
  border-radius:50%;background:var(--color-surface);color:var(--color-text);font-size:1rem;font-weight:800;
  border:1px solid var(--color-border);line-height:1;flex-shrink:0}
.fxd-pitch-name{font-size:0.6875rem;line-height:1.1;font-weight:700;color:var(--color-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:3.35rem;display:block;
  text-shadow:0 0 12px var(--color-bg),0 0 8px var(--color-bg),0 0 4px var(--color-surface),
    1px 0 2px var(--color-bg),-1px 0 2px var(--color-bg),0 1px 2px var(--color-bg),0 -1px 2px var(--color-bg)}
.fxd-pitch-num-wrap{position:relative;display:inline-flex;flex-shrink:0;width:2.0625rem;height:2.0625rem}
.fxd-pitch-icons,.fxd-lineup-icons{display:inline-flex;align-items:center;gap:0.18rem;flex-wrap:nowrap;justify-content:center;max-width:3.35rem}
.fxd-pitch-chip-badge{position:absolute;z-index:2;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1;pointer-events:none}
.fxd-pitch-chip-badge--sub{top:0;left:0;transform:translate(-46%,-46%)}
.fxd-pitch-chip-badge--sub .fxd-lu-ico.sub{width:0.62rem;height:0.82rem}
.fxd-pitch-chip-badge-min{font-size:0.5625rem;font-weight:800;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:0 3px;line-height:1.15;white-space:nowrap;box-shadow:0 1px 2px oklch(0 0 0 / 0.1)}
.fxd-lu-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.fxd-lu-ico.goal{font-size:0.875rem;line-height:1}
.fxd-lu-ico.assist{font-size:0.875rem;line-height:1;align-items:center;gap:0.1rem}
.fxd-lu-ico.boot{width:1.215em;height:1.215em;display:block;flex-shrink:0;transform:rotate(-16deg);transform-origin:50% 55%}
.fxd-lu-ico.assist .fxd-lu-ico-count{font-size:0.625rem;font-weight:800;line-height:1;color:var(--color-text-muted)}
/* Football card swatch, not a UI surface. padding/border/background are reset
   explicitly so the generic `.card` surface rule can never inflate it. */
.fxd-lu-ico.card{width:0.6rem;height:0.8rem;border-radius:1px;box-shadow:0 0 0 1px oklch(0 0 0/.18);
  padding:0;border:0;background:none}
.fxd-lu-ico.card.y{background:#facc15}
.fxd-lu-ico.card.r{background:#ef4444}
.fxd-lu-ico.sub{width:0.88rem;height:1.15rem;display:block;flex-shrink:0}
.fxd-pitch-name-line{display:inline-flex;align-items:center;gap:0.2rem;max-width:100%;justify-content:center}
.fxd-pitch-sub-mark{display:inline-flex;flex-direction:row;align-items:center;gap:0.18rem;flex-shrink:0;line-height:1}
.fxd-pitch-sub-mark .fxd-pitch-sub-min{font-size:0.6875rem;color:var(--color-text);font-weight:700;line-height:1;white-space:nowrap}
.fxd-lineup-sub-mark{display:inline-flex;flex-direction:row;align-items:center;gap:0.22rem;flex-shrink:0}
.fxd-lineup-sub-mark .fxd-pitch-sub-min{font-size:var(--text-xs);color:var(--color-text);font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.fxd-lineup-sub-off{margin-left:auto;text-align:right;color:var(--color-text-faint);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
.fxd-lineup-on-block{display:inline-flex;align-items:center;gap:0.35rem;min-width:0;flex:1}
.fxd-lineup-list.subs-list .fxd-lineup-list-row{gap:0.35rem}
.fxd-lineup-list.subs-list .fxd-lineup-num{flex:0 0 1.65rem;width:1.65rem;text-align:center;font-size:0.8125rem;font-weight:700;line-height:1.2;color:var(--color-text-muted)}
.fxd-lineup-list.subs-list .fxd-lineup-pos{flex:0 0 1.85rem;width:1.85rem;margin-left:0;text-align:center;font-size:0.8125rem;font-weight:700;line-height:1.2;color:var(--color-text-muted)}
.fxd-lineup-list.subs-list .fxd-lineup-sub-mark{flex:0 0 3.1rem;width:3.1rem;justify-content:flex-start}
.fxd-lineup-list.subs-list .fxd-lineup-sub-mark .fxd-pitch-sub-min{flex:0 0 1.55rem;width:1.55rem;text-align:right;font-size:0.6875rem}
.fxd-lineup-list.subs-list .fxd-lineup-sub-mark--empty{visibility:hidden}
.fxd-lineup-list.subs-list .fxd-lineup-name{flex:0 1 auto}
.fxd-pitch-player.sub-off-pitch .fxd-pitch-num{opacity:.72}
.fxd-lineup-list-row.sub-on-used{background:oklch(from var(--color-success) l c h / 0.06)}
.fxd-lineup-sub-meta{display:inline-flex;align-items:center;gap:0.35rem;font-size:var(--text-2xs);color:var(--color-text-muted);white-space:nowrap;flex-shrink:0}
.fxd-lineup-sub-min{font-weight:700;color:var(--color-text)}
.fxd-lineup-sub-for{color:var(--color-text-faint)}
.fxd-lineup-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxd-lineup-evt{display:inline-flex;flex-wrap:wrap;gap:0.25rem;font-size:0.8125rem;line-height:1.2;white-space:nowrap;color:var(--color-text-muted);flex-shrink:0;align-items:center}
.fxd-lineup-evt-item.goal{font-size:0.875rem}
.fxd-section-compact{margin-bottom:var(--space-4)}
.fxd-section-compact .fxd-section-title{margin-bottom:var(--space-2)}
.fxd-lineup-list{margin-top:var(--space-2)}
.fxd-lineup-list-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.fxd-lineup-list-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-sm);
  border-bottom:1px solid var(--color-divider)}
.fxd-lineup-list-row:last-child{border-bottom:none}
.fxd-lineup-num{font-weight:700;min-width:22px;color:var(--color-text-muted)}
.fxd-lineup-pos{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-faint)}
.fxd-player-rating{display:inline-flex;align-items:center;justify-content:center;min-width:1.55em;height:1.25em;padding:0 4px;border-radius:999px;font-size:0.65rem;font-weight:700;line-height:1;background:var(--color-surface-dynamic);border:1px solid var(--color-border);color:var(--color-text);flex-shrink:0}
.fxd-player-rating--high{background:oklch(from var(--color-success) l c h / 0.18);border-color:oklch(from var(--color-success) l c h / 0.35)}
.fxd-player-rating--mid{background:oklch(from var(--color-warning) l c h / 0.15);border-color:oklch(from var(--color-warning) l c h / 0.35)}
.fxd-player-rating--low{background:oklch(from var(--color-error) l c h / 0.12);border-color:oklch(from var(--color-error) l c h / 0.35)}
.fxd-pitch-num-wrap .fxd-player-rating{position:absolute;top:0;right:0;transform:translate(46%,-46%);z-index:2;box-shadow:0 1px 2px oklch(0 0 0 / 0.12)}
.fxd-players-team{margin-bottom:var(--space-4)}
.fxd-players-team-title{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-2)}
.fxd-players-card{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-2);overflow:hidden;background:var(--color-surface-dynamic)}
.fxd-players-card-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);font-weight:600}
.fxd-players-card-body{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
.fxd-pl-wrap{margin-top:var(--space-2)}
.fxd-pl-subtabs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-3)}
.fxd-pl-subtab{padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;cursor:pointer;border:1px solid var(--color-border);background:var(--color-surface-offset);color:var(--color-text-muted)}
.fxd-pl-subtab.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.fxd-pl-table-scroll{overflow:auto;max-width:100%;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.fxd-pl-table{width:100%;border-collapse:collapse;font-size:var(--text-xs);min-width:32rem}
.fxd-pl-table th,.fxd-pl-table td{padding:6px 8px;border-bottom:1px solid var(--color-divider);vertical-align:middle;white-space:nowrap}
.fxd-pl-table tbody tr:last-child td,.fxd-pl-table tbody tr:last-child th{border-bottom:none}
.fxd-pl-table tbody tr:hover{background:var(--color-surface-offset)}
.fxd-pl-th-player{position:sticky;left:0;z-index:2;background:var(--color-surface-dynamic);min-width:9.5rem;vertical-align:bottom}
.fxd-pl-td-player{position:sticky;left:0;z-index:1;background:var(--color-surface-dynamic);font-weight:600;text-align:left;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxd-pl-table tbody tr:hover .fxd-pl-td-player{background:var(--color-surface-offset)}
.fxd-pl-team-filter{display:flex;flex-wrap:wrap;gap:0.2rem;margin-bottom:0.35rem}
.fxd-pl-team-btn{padding:2px 7px;border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:700;cursor:pointer;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);line-height:1.3}
.fxd-pl-team-btn.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.fxd-pl-th-sort{cursor:pointer;user-select:none;text-align:center;font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}
.fxd-pl-th-sort:hover{color:var(--color-text)}
.fxd-pl-th-sort.active{color:var(--color-primary)}
.fxd-pl-th-sort .fxd-pl-sort-ind{font-size:var(--text-2xs);margin-left:2px;opacity:.85}
.fxd-pl-td-num{text-align:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text)}
.fxd-pl-td-sub{text-align:center;width:1.15rem;padding-left:4px;padding-right:4px}
.fxd-pl-sub-cell{display:inline-flex;align-items:center;justify-content:center;width:0.88rem;height:1.15rem;margin:0 auto}
.fxd-pl-sub-ico{width:0.88rem;height:1.15rem;display:block;flex-shrink:0}
.fxd-pl-team-abbr{display:inline-block;width:1.65rem;margin-right:0.25rem;font-size:var(--text-2xs);font-weight:800;color:var(--color-text-muted);letter-spacing:.02em;text-align:center;flex-shrink:0}
.fxd-pl-player-num{display:inline-block;width:1.15rem;margin-right:0.35rem;font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.fxd-pl-th-player-label{display:block;font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;margin-top:0.15rem}
.fxd-pl-th-player-label.active{color:var(--color-primary)}
.fxd-stat-tree{display:flex;flex-direction:column;gap:2px}
.fxd-stat-tree .fxd-stat-row{display:grid;grid-template-columns:minmax(7rem,34%) 1fr;gap:var(--space-2);padding:1px 0;align-items:start;border-bottom:none}
.fxd-stat-tree .fxd-stat-row.depth-1{padding-left:var(--space-2)}
.fxd-stat-tree .fxd-stat-row.depth-2{padding-left:calc(var(--space-2) * 2)}
.fxd-stat-tree .fxd-stat-key{color:var(--color-text-muted);font-weight:600;word-break:break-word}
.fxd-stat-tree .fxd-stat-val{color:var(--color-text);word-break:break-word;font-size:inherit;font-weight:inherit;min-width:0;text-align:inherit}
.fxd-stat-null{color:var(--color-text-faint)}
.fxd-stat-nested{margin-top:2px}
.fxd-history-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.fxd-history-table th,.fxd-history-table td{padding:6px 8px;border-bottom:1px solid var(--line-color);text-align:left}
.fxd-history-table tr.in-window{background:rgba(46,160,67,.06)}
.fxd-h2h-summary{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--text-xs)}
.fxd-h2h-pill{padding:3px 10px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-border);font-weight:600}
.fxd-h2h-pill.w{color:var(--color-success);border-color:oklch(from var(--color-success) l c h / 0.35)}
.fxd-h2h-pill.d{color:var(--color-text-muted)}
.fxd-h2h-pill.l{color:var(--color-error);border-color:oklch(from var(--color-error) l c h / 0.35)}
.fxd-h2h-res{font-weight:700;text-align:center;width:1.5rem}
.fxd-h2h-res.W{color:var(--color-success)}
.fxd-h2h-res.L{color:var(--color-error)}
.fxd-h2h-res.D{color:var(--color-text-muted)}
a.fxd-team-link{cursor:pointer;color:var(--color-primary);text-decoration:underline;text-decoration-color:transparent}
a.fxd-team-link:hover{text-decoration-color:var(--color-primary)}

/* ─── All-games summary table ─────────────────────────────────────── */
.ag-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.ag-table th{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.05em;padding:var(--space-2) var(--space-3);
  border-bottom:2px solid var(--color-divider);white-space:nowrap;text-align:center}
.ag-table th.ag-th-fixture{text-align:left;min-width:180px}
.ag-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-divider);
  vertical-align:middle;text-align:center}
.ag-table td.ag-fixture-cell{text-align:left}
.ag-table tbody tr{cursor:pointer;transition:background var(--transition)}
.ag-table tbody tr:hover{background:var(--color-surface-offset)}
.ag-fixture-time{font-size:var(--text-2xs);color:var(--color-text-muted);margin-bottom:2px}
.ag-fixture-teams{font-weight:600;color:var(--color-text);font-size:var(--text-xs)}
.ag-fixture-league{font-size:var(--text-2xs);color:var(--color-text-faint);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.ag-cell-pair{display:flex;justify-content:center;gap:3px;align-items:center}
.ag-val{font-weight:700;min-width:28px;text-align:center}
.ag-sep{color:var(--color-text-faint);font-size:var(--text-2xs)}
.ag-na{color:var(--color-text-faint)}
/* ─── Collector scheduler card ──────────────────────────────────────────── */
.coll-log{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:var(--space-3);
  font-family:monospace;font-size:var(--text-2xs);line-height:1.5;
  min-height:260px;max-height:min(60vh,520px);overflow-y:auto;
  color:var(--color-text);
  white-space:pre-wrap;word-break:break-all}
.coll-log .log-err{color:var(--color-error,#ef4444)}
.coll-log .log-ok{color:var(--color-success,#22c55e)}
.coll-log .log-hi{color:#22d3ee;font-weight:600}
.coll-status-pill{display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:9999px;font-size:var(--text-2xs);font-weight:700}
.coll-status-pill.idle   {background:var(--color-surface-2);color:var(--color-text-muted)}
.coll-status-pill.running{background:rgba(59,130,246,.15);color:#3b82f6}
.coll-status-pill.done   {background:rgba(34,197,94,.15);color:var(--color-success,#22c55e)}
.coll-status-pill.error  {background:rgba(239,68,68,.1);color:var(--color-error,#ef4444)}
.adm-mat-log{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:6px 8px;font-family:ui-monospace,monospace;font-size:var(--text-2xs);line-height:1.45;
  max-height:140px;overflow-y:auto;color:var(--color-text-muted)}
.adm-mat-log .log-err{color:var(--color-error,#ef4444)}
.adm-mat-log .log-ok{color:var(--color-success,#22c55e)}
.adm-mat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.adm-mat-coverage{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}
.adm-mat-coverage-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.adm-mat-coverage-head .empty-sub{flex:1}
.adm-mat-cov-table{width:100%;border-collapse:collapse;font-size:var(--text-2xs)}
.adm-mat-cov-table th,.adm-mat-cov-table td{padding:4px 6px;text-align:center;border-bottom:1px solid var(--color-border)}
.adm-mat-cov-table th{font-weight:600;color:var(--color-text-muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.03em}
.adm-mat-cov-table td:first-child,.adm-mat-cov-table th:first-child{text-align:left;white-space:nowrap}
.adm-mat-cov-st.ok{color:var(--color-success,#22c55e);font-weight:700}
.adm-mat-cov-st.warn{color:var(--color-warning,#f59e0b);font-weight:700}
.adm-mat-cov-st.miss{color:var(--color-error,#ef4444);font-weight:700}
.adm-mat-cov-st.muted{color:var(--color-text-muted)}
.adm-mat-cov-foot{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:var(--space-2);line-height:1.4}
.coll-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor}
.coll-dot.running{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.adm-env-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);margin-top:var(--space-3)}

/* ─── Admin panel ───────────────────────────────────────────────────────── */
.adm-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4)}
.adm-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5)}
.adm-card-title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);
  margin-bottom:var(--space-4)}
.adm-token-row{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}
.adm-token-input{flex:1;padding:6px 10px;font-size:var(--text-xs);font-family:monospace;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text)}
.adm-token-input:focus{outline:none;border-color:var(--color-primary)}
.adm-status{font-size:var(--text-xs);padding:4px 10px;border-radius:var(--radius-sm);
  display:inline-block;margin-left:var(--space-2)}
.adm-status.ok{background:rgba(34,197,94,.15);color:var(--color-success,#22c55e)}
.adm-status.warn{background:rgba(234,179,8,.15);color:var(--color-warning,#eab308)}
.adm-status.err{background:rgba(239,68,68,.1);color:var(--color-error,#ef4444)}
.adm-status.muted{background:var(--color-surface-2);color:var(--color-text-muted)}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-3)}
.adm-field{display:flex;flex-direction:column;gap:4px}
.adm-label{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;
  letter-spacing:.04em}
.adm-input{padding:5px 8px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text)}
.adm-input:focus{outline:none;border-color:var(--color-primary)}
.adm-input.modified{border-color:var(--color-warning,#f59e0b)}
.adm-select{padding:5px 8px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text)}
.adm-select.modified{border-color:var(--color-warning,#f59e0b)}
.adm-btn-row{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.adm-btn{padding:6px 16px;font-size:var(--text-xs);font-weight:600;border:none;
  border-radius:var(--radius-sm);cursor:pointer;transition:opacity .15s}
.adm-btn:hover{opacity:.85}
.adm-btn.primary{background:var(--color-primary);color:#fff}
.adm-btn.danger{background:var(--color-error,#ef4444);color:#fff}
.adm-btn.ghost{background:var(--color-surface-2);color:var(--color-text);
  border:1px solid var(--color-border)}
.adm-msg{font-size:var(--text-xs);margin-top:var(--space-2);min-height:18px}
.adm-msg.ok{color:var(--color-success,#22c55e)}
.adm-msg.err{color:var(--color-error,#ef4444)}
.adm-section-label{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin:var(--space-4) 0 var(--space-2);
  padding-bottom:4px;border-bottom:1px solid var(--color-border)}
.adm-main-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.adm-main-tab,.adm-config-tab,.adm-subtab{padding:6px 12px;font-size:var(--text-xs);font-weight:600;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);
  color:var(--color-text-muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.adm-main-tab:hover,.adm-config-tab:hover,.adm-subtab:hover{color:var(--color-text);
  border-color:var(--color-text-muted)}
.adm-main-tab.active,.adm-config-tab.active,.adm-subtab.active{
  background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.adm-panel{display:none;flex-direction:column;gap:var(--space-6)}
.adm-panel.active{display:flex}
.adm-config-tabs,.adm-subtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-4)}
.adm-cfg-panel,.adm-subpanel{display:none}
.adm-cfg-panel.active,.adm-subpanel.active{display:block}
.adm-hist-panel,.adm-coll-subpanel{display:none}
.adm-hist-panel.active,.adm-coll-subpanel.active{display:block}

.cov-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin-bottom:var(--space-4)}
.cov-filter{padding:5px 10px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);min-width:140px}
.cov-filter:focus{outline:none;border-color:var(--color-primary)}
.cov-count{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto}
.cov-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.cov-tbl{border-collapse:collapse;width:100%;font-size:var(--text-xs);white-space:nowrap}
.cov-tbl th{position:sticky;top:0;background:var(--color-surface-2);
  padding:5px 10px;text-align:left;font-size:var(--text-2xs);font-weight:600;
  color:var(--color-text-muted);cursor:pointer;user-select:none;
  border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border)}
.cov-tbl th:hover{color:var(--color-text)}
.cov-tbl th.sort-asc::after{content:' ↑'}
.cov-tbl th.sort-desc::after{content:' ↓'}
.cov-tbl td{padding:4px 10px;border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border);color:var(--color-text)}
.cov-tbl tr:hover td{background:var(--color-surface-2)}
.cov-yes{color:var(--color-success,#22c55e);font-weight:700;text-align:center}
.cov-no{color:var(--color-error,#ef4444);text-align:center}
.cov-badge{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:var(--text-xs);font-weight:700}
.cov-badge.y{background:rgba(34,197,94,.15);color:var(--color-success,#22c55e)}
.cov-badge.n{background:rgba(239,68,68,.1);color:var(--color-error,#ef4444)}
.cov-audit-btn{padding:2px 8px;font-size:var(--text-2xs);border-radius:999px;border:1px solid var(--color-border);
  background:var(--color-surface);cursor:pointer;white-space:nowrap}
.cov-audit-btn.cov-audit-ok{border-color:rgba(34,197,94,.35);color:var(--color-success,#22c55e)}
.cov-audit-btn.cov-audit-warn{border-color:rgba(245,158,11,.45);color:#d97706;font-weight:600}
.cov-audit-panel{margin:0 0 var(--space-4);padding:var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.cov-audit-head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.cov-audit-title{font-size:var(--text-sm);font-weight:700;margin-right:auto}
.cov-audit-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2);line-height:1.5}
.cov-audit-tbl{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.cov-audit-tbl th,.cov-audit-tbl td{padding:4px 8px;border-bottom:1px solid var(--color-border);text-align:left}
.cov-audit-tbl th{font-weight:600;color:var(--color-text-muted)}
.cov-audit-tag{display:inline-block;padding:1px 5px;border-radius:4px;font-size:var(--text-2xs);font-weight:600;
  background:rgba(245,158,11,.15);color:#d97706;margin-right:4px}

/* Qualification rules editor (Coverage) */
.qual-editor-panel{margin:0 0 var(--space-4);padding:var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.qual-editor-section{margin-bottom:var(--space-4)}
.qual-editor-section h4{font-size:var(--text-xs);font-weight:700;margin:0 0 var(--space-2)}
.qual-editor-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.qual-editor-row input,.qual-editor-row select{padding:4px 6px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.qual-editor-row input[type=number]{width:5.5rem}
.qual-editor-row select{min-width:160px;flex:1}
.qual-editor-list{display:flex;flex-direction:column;gap:6px}

/* Tiebreak pattern editor (Coverage) */
.tb-editor-panel{margin:0 0 var(--space-4);padding:var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface-2)}
.tb-editor-head{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)}
.tb-editor-head .tb-editor-title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin-right:auto}
.tb-editor-fields{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}
.tb-editor-field{display:flex;flex-direction:column;gap:4px;min-width:180px}
.tb-editor-field label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600}
.tb-editor-field input,.tb-editor-field select{padding:5px 8px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);
  color:var(--color-text)}
.tb-editor-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2);line-height:1.5}
.tb-editor-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3)}
.tb-editor-step{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.tb-editor-step-num{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);min-width:1.5rem;padding-top:2px}
.tb-editor-step-main{flex:1;min-width:0}
.tb-editor-step-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text)}
.tb-editor-step-meta{font-size:var(--text-2xs);color:var(--color-text-faint);margin-top:2px}
.tb-editor-step-note{width:100%;margin-top:6px;padding:4px 6px;font-size:var(--text-2xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);
  color:var(--color-text-muted);resize:vertical;min-height:2.2rem}
.tb-editor-step-actions{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.tb-editor-step-actions button,.tb-editor-foot button,.tb-editor-head button{
  padding:4px 8px;font-size:var(--text-2xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);cursor:pointer}
.tb-editor-step-actions button:hover,.tb-editor-foot button:hover,.tb-editor-head button:hover{
  border-color:var(--color-primary);color:var(--color-primary)}
.tb-editor-step-actions button:disabled,.tb-editor-foot button:disabled{opacity:.45;cursor:not-allowed}
.tb-editor-foot{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.tb-editor-foot .tb-editor-add{display:flex;gap:6px;align-items:center;margin-right:auto}
.tb-editor-foot .tb-editor-add select{min-width:220px}
.tb-editor-badge{display:inline-block;padding:1px 6px;border-radius:999px;font-size:var(--text-2xs);font-weight:600;
  background:rgba(148,163,184,.15);color:var(--color-text-muted);margin-left:6px}
.tb-editor-badge.live{background:rgba(34,197,94,.12);color:var(--color-success,#22c55e)}
.tb-editor-badge.ref{background:rgba(245,158,11,.12);color:#d97706}

/* ─── Data table view ───────────────────────────────────────────────────── */
.data-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin-bottom:var(--space-4)}
.data-filter-input{padding:5px 10px;font-size:var(--text-xs);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);
  min-width:160px}
.data-filter-input:focus{outline:none;border-color:var(--color-primary)}
.data-count{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto}
.data-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);
  border:1px solid var(--color-border)}
.data-tbl{border-collapse:collapse;width:100%;font-size:var(--text-xs);white-space:nowrap}
.data-tbl th{position:sticky;top:0;background:var(--color-surface-2);
  padding:5px 8px;text-align:center;font-size:var(--text-2xs);font-weight:600;
  color:var(--color-text-muted);cursor:pointer;user-select:none;
  border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border)}
.data-tbl th:hover{color:var(--color-text)}
.data-tbl th.sort-asc::after{content:' ↑'}
.data-tbl th.sort-desc::after{content:' ↓'}
.data-tbl th.group-hdr{background:var(--color-surface-3,var(--color-surface-2));
  font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary)}
.data-tbl td{padding:4px 8px;border-bottom:1px solid var(--color-border);
  border-right:1px solid var(--color-border);text-align:center;color:var(--color-text)}
.data-tbl td.td-match{text-align:left;min-width:160px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;
  background:var(--color-surface);z-index:1;border-right:2px solid var(--color-border)}
.data-tbl tr:hover td{background:var(--color-surface-2)}
.data-tbl tr:hover td.td-match{background:var(--color-surface-2)}
.data-tbl tr{cursor:pointer}
.pct-hi{color:var(--color-success,#22c55e);font-weight:600}
.pct-mid{color:var(--color-warning,#f59e0b)}
.pct-lo{color:var(--color-error,#ef4444)}
.na-cell{color:var(--color-text-faint)}

/* ─── Threshold bar ──────────────────────────────────────────────────────── */
.thr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);
  margin-bottom:var(--space-6)}
.thr-bar-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-right:var(--space-2);white-space:nowrap}
.thr-group{display:flex;align-items:center;gap:6px}
.thr-label{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.thr-input{width:52px;padding:3px 6px;font-size:var(--text-xs);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);text-align:center}
.thr-input:focus{outline:none;border-color:var(--color-primary)}
.thr-reset{font-size:var(--text-xs);padding:3px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);background:none;color:var(--color-text-muted);
  cursor:pointer;transition:all var(--transition);white-space:nowrap}
.thr-reset:hover{color:var(--color-text);border-color:var(--color-text-muted)}
.thr-divider{width:1px;height:24px;background:var(--color-border);margin:0 var(--space-2)}
.thr-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);
  display:inline-block;margin-right:2px;opacity:0}
.thr-dot.active{opacity:1}

/* ─── Top Stats / Top Form sections ─────────────────────────────────────── */
.ts-section{margin-bottom:var(--space-8)}
.ts-section-title{font-size:var(--text-base);font-weight:600;color:var(--color-text);
  padding:var(--space-3) 0 var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.ts-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 6px;border-radius:var(--radius-full);
  background:var(--color-primary-highlight);color:var(--color-primary);
  font-size:var(--text-xs);font-weight:600}

.ag-score{font-weight:800;font-size:var(--text-sm);color:var(--color-text)}
.ag-status-ns{color:var(--color-text-muted)}
.ag-status-live{color:var(--color-error);font-weight:700}

.live-status-bar{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-text-muted)}
.live-status-bar strong{color:var(--color-text)}
.live-filter-btn{margin-left:auto;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);cursor:pointer}
.live-filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.live-filter-btn.active{background:oklch(from var(--color-primary) l c h/.15);border-color:oklch(from var(--color-primary) l c h/.4);color:var(--color-primary)}
.live-status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-success);flex-shrink:0}
.live-status-dot.stale{background:var(--color-warning)}
.live-status-dot.off{background:var(--color-text-muted)}
.live-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.live-table th,.live-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle}
.live-table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);font-weight:600}
.live-table tr:hover td{background:oklch(from var(--color-primary) l c h/.04)}
.live-minute{font-weight:700;color:var(--color-error);min-width:2.5rem;text-align:center}
.live-score{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.live-score-link{color:inherit;text-decoration:none;display:inline-block}
.live-score-link:hover{color:var(--color-primary);text-decoration:underline;cursor:pointer}
.live-fixture-link{color:inherit;text-decoration:none;font-weight:600}
.live-fixture-link:hover{color:var(--color-primary);text-decoration:underline}
.live-team-name{display:inline-flex;align-items:center;gap:0.35rem;flex-wrap:wrap}
.live-team-card{display:inline-flex;align-items:center;gap:0.12rem;flex-shrink:0}
.live-team-card .fxd-lu-ico.card{box-shadow:0 0 0 1px oklch(0 0 0/.22)}
.live-team-card-mult{font-size:var(--text-xs);font-weight:800;line-height:1}
.live-team-card-mult.r{color:var(--color-error)}
.live-team-card-mult.y{color:var(--color-warning)}
.live-pm-fav{display:inline-flex;align-items:center;gap:0.15rem;font-size:var(--text-xs);font-weight:700;color:var(--color-gold);white-space:nowrap;line-height:1}
.live-pm-fav-ico{font-size:0.7em;color:var(--color-gold)}
.live-watch{width:2rem;text-align:center;padding-left:0;padding-right:0}
.live-watch-th{text-align:center;color:var(--color-text-muted)}
.live-watch-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;background:transparent;color:var(--color-text-muted);border-radius:999px;cursor:pointer}
.live-watch-btn:hover{background:oklch(from var(--color-primary) l c h/.12);color:var(--color-text)}
.live-watch-btn.watched{color:var(--color-primary)}

.notifications-overlay{position:fixed;inset:0;z-index:2000;background:oklch(0 0 0/.45);display:flex;justify-content:flex-end;padding-top:48px}
.notifications-panel{width:min(420px,100%);max-height:calc(100dvh - 60px);background:var(--color-surface);border-left:1px solid var(--color-border);border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
.notifications-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.notifications-head h3{font-size:var(--text-sm);font-weight:700;margin:0}
.notifications-head-actions{display:flex;align-items:center;gap:var(--space-2)}
.notifications-head-actions .link{background:none;border:0;color:var(--color-primary);cursor:pointer;padding:0;font-size:var(--text-xs)}
.notifications-head-actions .link:hover{text-decoration:underline}
#notifications-clear-all:disabled{opacity:.5;cursor:default}
.notifications-body{flex:1;overflow:auto;padding:var(--space-2)}
.notifications-item{padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-2);background:var(--color-surface-offset)}
.notifications-item.read{opacity:.7}
.notifications-item-title{font-size:var(--text-sm);font-weight:700}
.notifications-item-body{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.notifications-item-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-faint)}
.notifications-item-actions{display:flex;gap:var(--space-2)}
.notifications-item-actions .link{background:none;border:0;color:var(--color-primary);cursor:pointer;padding:0;font-size:var(--text-xs)}
.notifications-item-actions .link:hover{text-decoration:underline}
.tb-notification-badge{position:absolute;inset:-2px auto auto 50%;transform:translateX(4px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--color-error);color:#fff;font-size:var(--text-2xs);font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.tb-notification-badge.active{display:flex}

.watch-overlay{position:fixed;inset:0;z-index:2100;background:oklch(0 0 0/.5);display:flex;align-items:center;justify-content:center}
.watch-panel{width:min(380px,92vw);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}
.watch-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.watch-head h3{font-size:var(--text-sm);font-weight:700;margin:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-body{padding:var(--space-4)}
.watch-options-form{display:flex;flex-direction:column;gap:var(--space-3)}
.watch-option{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer}
.watch-option input[type=checkbox]{width:16px;height:16px}
.watch-option-inline{display:flex;justify-content:space-between;gap:var(--space-3)}
.watch-option-inline input{width:80px;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.watch-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}

.alert-level-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 8px;border-radius:999px;font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.alert-level-PRIORITY{background:oklch(from var(--color-purple) l c h/.18);color:var(--color-purple)}
.alert-level-GREEN{background:oklch(from var(--color-success) l c h/.15);color:var(--color-success)}
.alert-level-YELLOW{background:oklch(from var(--color-gold) l c h/.16);color:oklch(from var(--color-gold) l c h/.85)}
.alert-level-RED{background:oklch(from var(--color-error) l c h/.12);color:var(--color-error)}
.alert-level-BASIC{background:var(--color-border);color:var(--color-text-muted)}
.shadow-summary{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0}
.shadow-chip{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;border:1px solid var(--color-border);background:var(--color-surface-offset)}
.shadow-chip.ok{border-color:oklch(from var(--color-success) l c h/.4);color:var(--color-success)}
.shadow-chip.warn{border-color:oklch(from var(--color-warning) l c h/.4);color:var(--color-warning)}
.shadow-chip.bad{border-color:oklch(from var(--color-error) l c h/.4);color:var(--color-error)}
.shadow-panel{margin-top:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-offset)}
.shadow-panel-title{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-2)}

/* ─── League table page ─────────────────────────────────────────────────── */
.league-title{display:flex;align-items:center;gap:10px;font-size:var(--text-xl);font-weight:700;line-height:1.2}
.league-title-logo{width:28px;height:28px;object-fit:contain}
.league-title-flag{width:22px;height:16px;object-fit:cover;border-radius:2px}
.league-conf-badge{width:38px;height:20px;object-fit:fill;flex-shrink:0;border-radius:2px}
.league-header{margin-bottom:var(--space-4)}
.browse-intro{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
/* ─── Browse grid container (leagues-page-design) ──────────────────────────
   Explicit column counts per responsive tier. grid-auto-flow:dense lets an
   expansion panel (grid-column:1/-1) insert right after the open country's
   grid row while the following cells backfill the rest of that row. */
.browse-list{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(var(--browse-cols,4),1fr);gap:var(--space-2)}
@media(max-width:1599px){.browse-list{--browse-cols:3}}
@media(max-width:1023px){.browse-list{--browse-cols:2}}
@media(max-width:719px){.browse-list{--browse-cols:1}}
.browse-list--leagues{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.browse-row-wrap{display:flex;align-items:stretch;gap:var(--space-2)}
.browse-row-wrap.browse-drag-over .browse-row{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.browse-row-wrap.browse-dragging{opacity:.55}
.browse-drag-handle{display:none;align-items:center;justify-content:center;width:28px;flex-shrink:0;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);
  color:var(--color-text-muted);font-size:var(--text-sm);line-height:1;cursor:grab;user-select:none;touch-action:none}
.browse-drag-handle:active{cursor:grabbing}
.browse-list--editable .browse-drag-handle{display:flex}
.browse-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);flex:1;min-width:0;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);
  text-decoration:none;color:var(--color-text);transition:border-color var(--transition)}
.browse-row:hover{border-color:var(--color-primary)}
.browse-row-flag{width:28px;height:20px;object-fit:cover;flex-shrink:0;border-radius:2px;background:var(--color-surface-offset)}
.browse-row-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:2px}
.browse-row-main{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.browse-row-title{font-size:var(--text-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.browse-row-meta{font-size:var(--text-xs);color:var(--color-text-muted);flex-shrink:0}
.browse-row-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browse-admin-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
.browse-admin-bar .scope-share-btn{font-size:var(--text-xs);padding:5px 10px}
.browse-order-msg{font-size:var(--text-xs);color:var(--color-text-muted)}
.browse-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-primary);
  text-decoration:none;margin-bottom:var(--space-3);cursor:pointer;background:none;border:none;padding:0}
.browse-back:hover{text-decoration:underline}
/* Region row: left half navigates to the country page, right half toggles the panel */
.browse-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.browse-head .browse-intro{margin-bottom:0}
.browse-filter{padding:6px 10px;font-size:var(--text-sm);background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);color:var(--color-text);min-width:220px}
.browse-filter:focus{outline:none;border-color:var(--color-primary)}
.browse-filter::placeholder{color:var(--color-text-faint)}
.browse-head-tools{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.browse-scope{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-md);
  overflow:hidden;flex-shrink:0}
.browse-scope-row{display:flex;justify-content:center;margin:var(--space-2) 0 var(--space-4)}
.browse-scope-row .browse-scope-btn{padding:8px 22px;font-size:var(--text-base)}
.browse-scope-btn{padding:6px 14px;font:inherit;font-size:var(--text-sm);background:transparent;border:0;
  color:var(--color-text-muted);cursor:pointer;text-decoration:none;transition:background var(--transition)}
.browse-scope--page{display:flex;justify-content:center;margin:0 0 var(--space-4)}
.browse-scope-btn + .browse-scope-btn{border-left:1px solid var(--color-border)}
.browse-scope-btn:hover{color:var(--color-text)}
.browse-scope-btn.active{background:color-mix(in srgb,var(--color-gold) 18%,transparent);
  color:var(--color-gold);font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-gold) 40%,transparent)}
@media(max-width:719px){
  .browse-filter{width:100%;min-width:0}
  .browse-head{flex-direction:column;align-items:stretch}
  .browse-head-tools{flex-wrap:wrap}
  .browse-head-tools .browse-filter{flex:1;min-width:160px;width:auto}
  .browse-quick-label{min-width:0}
  .browse-scope-row .browse-scope{flex:1}
  .browse-scope-row .browse-scope-btn{flex:1;padding:10px 12px}
}
.browse-row--region{padding:var(--space-2) var(--space-3);gap:var(--space-3)}
.browse-row-btn{width:100%;font:inherit;text-align:left;cursor:pointer}
.browse-row-btn .browse-row-title{flex:1;min-width:0}
.browse-row-btn .browse-chev{color:var(--color-text-muted)}
.browse-chev{display:inline-block;font-size:10px;transition:transform var(--transition)}
.browse-row-wrap--open .browse-chev{transform:rotate(90deg)}
.browse-row-wrap--open .browse-row{border-color:var(--color-primary)}
/* Inline expansion panel — spans the full grid width below the open row */
.browse-panel{grid-column:1/-1;background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-3)}
.browse-panel-leagues{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.browse-row--league{padding:6px 8px;gap:8px}
.browse-panel .browse-row--league{border-color:transparent;background:transparent}
.browse-panel .browse-row--league:hover{background:var(--color-surface-2);border-color:var(--color-border)}
.browse-panel-more{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-2);padding:4px 10px;
  font-size:var(--text-xs);color:var(--color-text);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);text-decoration:none}
.browse-panel-more:hover{border-color:var(--color-primary);color:var(--color-primary)}
.browse-panel-loading{padding:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.browse-panel mark{background:var(--color-primary-highlight);color:inherit;border-radius:2px;padding:0 1px}
/* Filtered results: each country is a labeled group so league rows stay attributable */
.browse-filter-group{grid-column:1/-1}
.browse-filter-head{display:flex;align-items:center;gap:8px;padding:2px 4px var(--space-2);
  color:inherit;text-decoration:none}
.browse-filter-head:hover .browse-row-title{color:var(--color-primary)}
/* Pinned + curated shortcut chips above the grid */
.browse-quick{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3)}
.browse-quick-group{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.browse-quick-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-text-muted);flex-shrink:0;min-width:72px}
.browse-quick-chips{display:flex;flex-wrap:wrap;gap:4px}
.browse-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;
  border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface-2);
  font-size:var(--text-xs);color:var(--color-text);text-decoration:none;white-space:nowrap}
.browse-chip:hover{border-color:var(--color-primary)}
.browse-chip-logo{width:16px;height:16px;object-fit:contain;border-radius:2px}
.browse-intro--region{display:flex;align-items:center;gap:8px}
.browse-crumbs{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);margin-bottom:var(--space-3)}
.browse-crumb{color:var(--color-primary);text-decoration:none}
.browse-crumb:hover{text-decoration:underline}
.browse-crumb-sep{color:var(--color-text-faint)}
.browse-crumb-current{color:var(--color-text-muted)}
.league-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:6px}
.league-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.league-toolbar select{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:5px 10px;font-size:var(--text-xs);color:var(--color-text)}
.league-panel-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.league-split{display:grid;grid-template-columns:minmax(280px,40%) minmax(0,60%);gap:var(--space-4);align-items:start}
.league-split-table-only{grid-template-columns:minmax(0,1fr)}
.league-split-round{min-width:0}
.league-split-table{min-width:0}
.league-round-panel{max-height:min(72vh,720px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.league-round-panel .lt-round-section{margin-top:0;padding-top:0;border-top:none}
.league-round-empty{padding:var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted)}
.lt-wrap{overflow-x:clip;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.lt-wrap.lt-stats-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fxd-mini-table-wrap{max-height:280px;overflow:auto;-webkit-overflow-scrolling:touch;
  isolation:isolate;contain:paint;
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.fxd-mini-table-wrap .lt-tbl thead th{position:sticky;top:0;z-index:1;background:var(--color-surface-2)}
.fxd-mini-table-wrap .lt-tbl tbody td{position:relative;z-index:0}
.fxd-mini-table-wrap .lt-form .form-chip-wrap{z-index:0}
.fxd-mini-table-wrap .lt-form .form-chip-wrap:hover,
.fxd-mini-table-wrap .lt-form .form-chip-wrap:focus-within{z-index:1}
.fxd-mini-table-wrap .form-chip-popup{z-index:2}
tr.fxd-mini-hl{background:color-mix(in srgb, var(--color-primary) 12%, transparent)!important}
tr.fxd-mini-hl .lt-team{font-weight:600}
.lt-tiebreak-footer{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.lt-tiebreak-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.lt-tiebreak-sub{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:var(--space-2);line-height:1.5}
.lt-tiebreak-list{margin:0;padding-left:1.25rem;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6}
.lt-tiebreak-list li{margin-bottom:2px}
.lt-tiebreak-note{opacity:.85;font-style:italic}
.lt-tiebreak-na{opacity:.65}
.team-standings-block{margin-bottom:var(--space-6)}
.team-stand-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.season-select,.team-season-select{min-width:9rem;padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm)}
.league-panel-toolbar .season-select{flex:1;min-width:0;max-width:14rem}
.team-squad-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.team-squad-photo{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-right:8px;vertical-align:middle}
.team-stand-tab{font-size:var(--text-xs);font-weight:500;padding:5px 10px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;color:var(--color-text)}
.team-stand-tab:hover{border-color:var(--color-primary);color:var(--color-primary)}
.team-stand-tab.active{border-color:var(--color-primary);color:var(--color-primary);
  background:color-mix(in srgb, var(--color-primary) 8%, var(--color-surface))}
.lt-tbl{width:100%;border-collapse:collapse;font-size:var(--text-xs);table-layout:auto}
.lt-tbl th{position:static;background:var(--color-surface-2);padding:8px 8px;text-align:left;
  font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);border-bottom:2px solid var(--color-border)}
.lt-sortable{cursor:pointer;user-select:none}
.lt-sortable:hover{color:var(--color-text)}
.lt-sort-active{color:var(--color-primary)}
.lt-sort-ind{font-size:var(--text-2xs);opacity:.85;margin-left:2px}
.lt-sort-tb{font-size:var(--text-2xs);font-weight:700;color:var(--color-primary);margin-left:2px;opacity:.92}
.lt-tbl td{padding:7px 8px;border-bottom:1px solid var(--color-border);color:var(--color-text)}
.lt-tbl tr:hover td{background:var(--color-surface-offset)}
.lt-rank{font-weight:700;text-align:center;width:1%;white-space:nowrap;padding-left:6px;padding-right:6px}
.lt-team{font-weight:600;min-width:0}
.lt-page-table-wrap th.lt-team,.lt-page-table-wrap td.lt-team{max-width:120px;overflow:hidden}
.lt-page-table-wrap th.lt-player,.lt-page-table-wrap td.lt-player{max-width:188px;overflow:hidden}
.lt-player-cell{min-width:0}
.lt-player-main{display:flex;align-items:flex-start;gap:6px;min-width:0}
.lt-player-crest{margin-top:1px}
.lt-player-text{min-width:0;flex:1}
.lt-player-name-row{display:flex;align-items:center;min-width:0;gap:4px}
.lt-player-nat-flag{width:16px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0}
.lt-player-pos{
  flex-shrink:0;font-size:var(--text-xs);font-weight:700;line-height:1.2;letter-spacing:.02em;white-space:nowrap;min-width:1.2em;text-align:center}
/* Position colours use semantic tokens so they stay legible in both themes.
   The previous hardcoded values (#a67c00 / #1f7a47 / #b83636) were mixed for a
   light background and were near-unreadable on the dark surface. */
.lt-player-pos--G{color:var(--color-gold)}
.lt-player-pos--D{color:var(--color-primary)}
.lt-player-pos--M{color:var(--color-success)}
.lt-player-pos--F{color:var(--color-error)}
.lt-player-link{font-weight:600;color:var(--color-text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-player-link:hover{color:var(--color-primary);text-decoration:underline}
.lt-player-team-sub{display:block;font-size:var(--text-2xs);font-weight:400;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-page-header{margin-bottom:var(--space-3)}
.player-stats-stack{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3)}
.player-stats-section-tabs{margin-bottom:var(--space-1)}
.player-stats-section .player-comp-table{margin-bottom:0}
.player-upcoming-section{margin-top:var(--space-4)}
.player-upcoming-section h3{margin:0 0 var(--space-2)}
.player-upcoming-scope{width:2.5rem;text-align:center;color:var(--color-text-muted);font-size:var(--text-2xs);font-weight:600}
.player-match-section{margin-top:var(--space-2)}
.player-page-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)}
.player-page-photo{width:72px;height:72px;object-fit:cover;border-radius:8px;background:var(--color-surface-2)}
.player-page-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:var(--text-lg);font-weight:700;margin:0 0 6px}
.player-page-pos{font-size:var(--text-base);line-height:1.2}
.player-page-meta-rows{display:flex;flex-direction:column;gap:4px}
.player-page-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.35}
.player-page-meta-sep{opacity:.45;user-select:none}
.player-page-nat-flag{width:16px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0}
.player-page-club-inner{display:inline-flex;align-items:center;gap:5px}
.player-page-club-crest{margin-top:0}
.player-page-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.player-page-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:var(--space-3)}
.player-page-stat{background:var(--color-surface-2);border-radius:8px;padding:8px 10px;text-align:center}
.player-page-stat-val{font-size:var(--text-md);font-weight:700}
.player-page-stat-lbl{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:2px}
.player-match-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.player-match-table th,.player-match-table td{padding:6px 8px;border-bottom:1px solid var(--color-border)}
.player-match-table th{font-size:var(--text-2xs);color:var(--color-text-muted);text-align:center}
.player-match-table td.lt-player{text-align:left}
.player-page-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 var(--space-3)}
.player-comp-table{width:100%;border-collapse:collapse;font-size:var(--text-xs);margin-bottom:var(--space-3)}
.player-comp-table th{padding:8px 8px;text-align:center;font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);border-bottom:2px solid var(--color-border);background:var(--color-surface-2)}
.player-comp-table th.player-comp-name{text-align:left;vertical-align:bottom}
.player-comp-table th.lt-stats-group-h{text-align:center;font-weight:700;color:var(--color-text);border-bottom:1px solid var(--color-border);padding:6px 4px 3px;white-space:nowrap}
.player-comp-table th.lt-stats-sub-h{font-size:var(--text-2xs);padding-top:3px;padding-bottom:6px}
.player-comp-table th.lt-stats-group-start,.player-comp-table td.lt-stats-group-start{border-left:1px solid var(--color-border)}
.player-comp-table td{padding:8px 8px;border-bottom:1px solid var(--color-border);text-align:center;font-variant-numeric:tabular-nums}
.player-comp-table td.player-comp-name{text-align:left;font-weight:600}
.player-comp-name-inner{display:inline-flex;align-items:center;gap:6px;min-width:0}
.player-comp-name-inner .league-title-flag{flex-shrink:0}
.player-comp-name-inner .league-conf-badge{width:38px;height:20px}
.player-comp-name-inner .fxd-team-link,.player-comp-name-inner>span{min-width:0}
.player-comp-row{cursor:pointer}
.player-comp-row:hover td{background:var(--color-surface-offset)}
.player-comp-row.is-selected td{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}
.player-comp-row.is-selected td.player-comp-name{color:var(--color-primary)}
.player-match-section h3{margin:0 0 8px;font-weight:600}
.player-match-toolbar{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-2)}
.player-match-toolbar-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-2)}
.player-match-toolbar-row.player-match-venue-row{align-items:center}
.player-match-comp-columns{display:flex;flex-direction:row;gap:var(--space-4);align-items:flex-start;width:100%}
.player-match-comp-columns .player-match-comp-group{flex:1 1 0;min-width:0;max-width:50%}
.player-match-comp-columns .player-match-comp-group:only-child{max-width:50%}
.player-match-comp-columns .player-match-comp-group+.player-match-comp-group{border-left:1px solid var(--color-border);padding-left:var(--space-4)}
.player-match-comp-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.player-match-comp-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.player-match-comp-group-label{font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-faint)}
.player-match-comp-chip-rows{display:flex;flex-direction:column;gap:6px}
.player-match-comp-chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.player-match-comp-chip-row .team-comp-chip{flex-shrink:0}
.player-match-toolbar .scope-preset-btn{padding:2px 10px;font-size:var(--text-xs)}
.player-match-filter-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-left:auto;flex-shrink:0}
.player-match-mins{display:inline-flex;align-items:center;gap:3px;justify-content:center}
.player-match-mins .fxd-pl-sub-ico{width:10px;height:12px}
.player-page-stats-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.player-page-window-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.player-page-injured{color:var(--color-error);font-size:var(--text-xs);font-weight:600}
.team-coach-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.team-coach-label{font-weight:600;color:var(--color-text-muted)}
.team-coach-photo{width:22px;height:22px;border-radius:50%;object-fit:cover}
.team-coach-nat-flag{width:16px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0}
.team-coach-meta{color:var(--color-text-muted);font-size:var(--text-sm);margin-left:2px}
.team-coach-refresh-btn{margin-left:4px;padding:2px 8px;font-size:var(--text-xs);vertical-align:baseline}
.team-injuries-block{margin-top:var(--space-3)}
.team-injuries-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.team-injuries-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.team-transfers-block{margin-top:var(--space-3)}
.team-transfers-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.team-transfers-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.player-transfers-section{margin:var(--space-3) 0}
.player-transfers-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.transfer-dir-in{color:var(--color-success);font-weight:600}
.transfer-dir-out{color:var(--color-warning);font-weight:600}
.player-page-unavail{color:var(--color-error);font-size:var(--text-sm);font-weight:600}
.player-page-unavail-sub{color:var(--color-text-muted);font-weight:400}
.fxd-injuries-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.fx-drawer-referee .fx-referee-avg{color:var(--color-text-muted)}
.fxd-referee-table th,.fxd-referee-table td{padding:6px 8px;border-bottom:1px solid var(--color-border);vertical-align:top;text-align:left}
.fxd-referee-table th{color:var(--color-text-muted);font-weight:600;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.03em}
.fxd-ref-score{margin-left:6px;color:var(--color-text-muted);font-weight:600}
.fxd-ref-alias{margin-top:2px;color:var(--color-text-muted);font-size:var(--text-2xs)}
.fxd-referee-table .fxd-ref-num{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.fxd-referee-table th.fxd-ref-num{text-align:center}
.fxd-ref-label-chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-2) 0}
.fxd-ref-label-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);background:var(--color-surface-offset);border:1px solid var(--color-border);font-size:var(--text-xs)}
.fxd-ref-label-chip button{border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;padding:0 2px;line-height:1}
.fxd-ref-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.fxd-ref-suggest button{font-size:var(--text-xs)}
.fxd-ref-label-chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-2) 0}
.fxd-ref-label-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);background:var(--color-surface-offset);border:1px solid var(--color-border);font-size:var(--text-xs)}
.fxd-ref-label-chip button{border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;padding:0 2px;line-height:1}
.fxd-ref-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.fxd-ref-suggest button{font-size:var(--text-xs)}
@media (max-width:720px){.fxd-injuries-grid{grid-template-columns:1fr}}
.fxd-injuries-team{font-size:var(--text-sm)}
.fxd-injuries-team-name{font-weight:600;margin-bottom:6px}
.fxd-injury-row{padding:4px 0;border-top:1px solid var(--color-border-subtle);font-size:var(--text-xs)}
.fxd-injury-row:first-of-type{border-top:none;padding-top:0}
.fxd-injury-reason{color:var(--color-text-muted)}
.coach-page-header{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)}
.coach-page-photo{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--color-surface-2)}
.coach-page-name{font-size:var(--text-xl);font-weight:700;line-height:1.2}
.coach-page-meta{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:4px}
.player-match-table .lt-num{text-align:center}
.player-match-table td.player-match-opponent{text-align:left}
.player-match-table th.player-match-side,.player-match-table td.player-match-side{width:2rem;text-align:center;color:var(--color-text-muted);font-weight:600;padding-left:4px;padding-right:4px}
.player-match-table th.player-match-pos-cell,.player-match-table td.player-match-pos-cell{width:2.5rem;text-align:center;padding-left:4px;padding-right:4px}
.player-match-pos{display:inline-block;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.02em}
.player-view-tabs{display:flex;gap:8px;margin:0 0 var(--space-2)}
.player-view-tab{font-size:var(--text-sm);font-weight:600;padding:6px 12px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer}
.player-view-tab.active{background:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}
.player-position-table .player-comp-name{font-weight:700;text-transform:uppercase;letter-spacing:0.02em}
.team-position-label{font-weight:700;text-transform:uppercase;letter-spacing:0.02em}
.team-position-head,.team-position-cell{font-weight:700;text-transform:uppercase;letter-spacing:0.02em;white-space:nowrap;padding-left:6px;padding-right:6px}
.team-position-cell{color:var(--color-text-muted)}
.player-match-table td.player-match-result{white-space:nowrap;font-weight:700}
.player-match-score{color:inherit;text-decoration:none;font-weight:inherit}
.player-match-score:hover{text-decoration:underline}
.player-match-score.won{color:var(--color-success)}
.player-match-score.lost{color:var(--color-error)}
.player-match-score.drew{color:var(--color-text-muted)}
.player-match-table .lt-team-inner--match{display:inline-flex;align-items:center;gap:6px;min-width:0}
.player-match-table .lt-team-inner--match .fxd-team-link,.player-match-table .lt-team-inner--match .league-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lt-team-inner{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.lt-team-inner .fxd-team-link,.lt-team-inner a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.lt-live-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--color-success);
  animation:lt-live-pulse 2.2s ease-in-out infinite}
.lt-team-inner .lt-live-dot{margin-left:2px}
@keyframes lt-live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.lt-crest{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.lt-move{display:inline-block;width:10px;font-size:var(--text-2xs);margin-right:2px;vertical-align:middle}
.lt-move-up{color:var(--color-success)}
.lt-move-down{color:var(--color-error)}
.lt-move-same{visibility:hidden}
.lt-num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%;padding-left:5px;padding-right:5px}
.lt-form{text-align:right;min-width:0;width:1%;vertical-align:middle;white-space:nowrap}
.lt-tbl th.lt-form{text-align:right}
.lt-form .form-chips-lt{display:flex;justify-content:flex-end;align-items:flex-start;gap:2px;flex-wrap:nowrap;margin-top:2px}
.lt-form .form-chip-results{display:flex;gap:2px;flex-shrink:0}
.lt-form .form-chip-next-slot{display:flex;flex-shrink:0}
.lt-zone td:first-child{border-left:3px solid transparent}
.lt-zone-cl td:first-child{border-left-color:#22c55e}
.lt-zone-el td:first-child{border-left-color:#f59e0b}
.lt-zone-ecl td:first-child{border-left-color:#06b6d4}
.lt-zone-rel td:first-child{border-left-color:#ef4444}
.lt-zone-promo td:first-child{border-left-color:#84cc16}
.lt-zone-po td:first-child{border-left-color:#a855f7}
.lt-zone-other td:first-child{border-left-color:var(--color-text-faint)}
.lt-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:var(--space-3)}
.lt-legend-item{display:flex;align-items:center;gap:6px;font-size:var(--text-2xs);color:var(--color-text-muted)}
.lt-legend-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.lt-group-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.lt-group-tab{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:999px;padding:4px 12px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);cursor:pointer}
.lt-group-tab.active{background:var(--color-primary-highlight);border-color:var(--color-primary);color:var(--color-primary)}
.lt-stats-rank-col,.lt-stats-rank{width:2.25rem;text-align:center;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.lt-tbl th.lt-stats-group-h{text-align:center;font-weight:700;color:var(--color-text);border-bottom:1px solid var(--color-border);padding:6px 4px 3px;white-space:nowrap}
.lt-tbl th.lt-stats-sub-h{font-size:var(--text-2xs);padding-top:3px;padding-bottom:6px}
.lt-tbl th.lt-stats-group-start{border-left:1px solid var(--color-border)}
.lt-tbl td.lt-stats-group-start{border-left:1px solid var(--color-border)}
.lt-stats-head-group th{vertical-align:bottom}
.lt-stats-streak-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lt-stats-streak-cell .form-chips-lt{justify-content:center;flex-wrap:wrap;margin-top:0;max-width:22rem}
.lt-streak-summary{font-size:var(--text-2xs);font-weight:700;color:var(--color-text-muted);line-height:1}
.lt-tbl td.lt-stats-streak{padding:6px 8px;vertical-align:middle}
.lt-tbl th.lt-stats-streak{min-width:5.5rem;white-space:normal;line-height:1.25;padding-top:6px;padding-bottom:6px}
.lt-venue-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.lt-round-section{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.lt-round-section-dimmed{opacity:.45}
.league-season-fixtures-panel .lt-round-section:first-child{margin-top:0;padding-top:0;border-top:none}
.lt-round-title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}
.lt-rfx-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.lt-rfx{display:grid;grid-template-columns:minmax(3.5rem,4rem) 1fr auto 1fr minmax(1.5rem,2rem);gap:6px;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}
.lt-rfx:last-child{border-bottom:none}
.lt-rfx-date,.lt-rfx-time{font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-weight:600;font-size:var(--text-xs);line-height:1.2}
.lt-rfx-kick-link{font-weight:700}
.lt-rfx-status-link{font-weight:800;letter-spacing:.03em}
.lt-rfx-home{text-align:right;font-weight:600;color:var(--color-text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-rfx-away{text-align:left;font-weight:600;color:var(--color-text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-rfx-home:hover,.lt-rfx-away:hover{color:var(--color-primary);text-decoration:underline}
.lt-rfx-score-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:3.75rem}
.lt-rfx-score,.lt-rfx-score-link{text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-text);white-space:nowrap;font-size:var(--text-sm);text-decoration:none}
.lt-rfx-score-link:hover{color:var(--color-primary);text-decoration:underline}
.lt-rfx-score.live,.lt-rfx-score-link.live{color:var(--color-error)}
.lt-rfx-agg{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);line-height:1.1}
.lt-rfx-st{text-align:center;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);line-height:1.2}
.lt-rfx-bracket-badge{font-size:var(--text-2xs);font-weight:700;padding:1px 5px;border-radius:4px;background:var(--color-surface-elevated);color:var(--color-text-muted);white-space:nowrap}
.lt-rfx-bracket-badge.void{color:var(--color-warning,#b45309)}
.lt-rfx-bracket-badge.excluded{color:var(--color-error)}
.ko-corrections-panel{margin:var(--space-3) 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);background:var(--color-surface)}
.ko-corrections-panel summary{cursor:pointer;font-weight:700;font-size:var(--text-sm)}
.ko-corrections-body{margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-3)}
.ko-corr-list{font-size:var(--text-sm)}
.ko-corr-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--color-border)}
.ko-corr-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.ko-corr-form label{display:flex;flex-direction:column;gap:2px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}
.ko-corr-form input,.ko-corr-form select{min-width:5rem;padding:4px 8px}
.ko-tie-override{font-size:var(--text-2xs);color:var(--color-primary);font-weight:700}
.ko-tree-card[title],.ko-tie[title]{cursor:help}
.ko-tie.ko-tie-has-note{border-left:2px solid var(--color-primary);padding-left:6px}
.ko-bracket-warn{font-size:var(--text-sm);color:var(--color-warning,#b45309);margin-bottom:var(--space-2)}
.ko-ladder{display:flex;flex-direction:column;gap:var(--space-4)}
.ko-ladder-compact{gap:var(--space-3)}
.ko-round{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:var(--space-3)}
.ko-round.current{border-color:var(--color-primary);box-shadow:0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent)}
.ko-round-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);display:flex;align-items:center;gap:8px}
.ko-round-badge{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text-muted)}
.ko-round-badge.live{background:color-mix(in srgb, var(--color-error) 12%, var(--color-surface));color:var(--color-error)}
.ko-tie-list{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-offset)}
.ko-tie{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--color-divider);font-size:var(--text-xs)}
.ko-tie:last-child{border-bottom:none}
.ko-tie-hl{background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))}
.ko-team{font-weight:600;color:var(--color-text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ko-team.right{text-align:right;justify-self:end}
.ko-team.left{text-align:left;justify-self:start}
.ko-team:hover{color:var(--color-text);text-decoration:underline}
.ko-score{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.35}
.ko-score-link{color:var(--color-primary);text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.ko-score-link:hover{text-decoration:underline}
.ko-score-plain{color:var(--color-text);font-weight:700;font-variant-numeric:tabular-nums}
.ko-score-sub{display:block;font-size:var(--text-2xs);font-weight:500;color:var(--color-text-faint);margin-top:2px;line-height:1.35}
.ko-tie-status{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.ko-page-note{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-3)}
.ko-bracket-panel{min-width:0}
.ko-tree-note{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-3)}
.ko-tree-wrap{overflow:auto;padding:var(--space-2) 0;margin-bottom:var(--space-2);max-width:100%}
.ko-tree{display:flex;flex-direction:row;align-items:flex-start;min-width:min-content;padding:var(--space-2) var(--space-1)}
.ko-tree-col{flex:0 0 200px;display:flex;flex-direction:column}
.ko-tree-bridge-wrap{flex:0 0 40px;display:flex;flex-direction:column}
.ko-tree-col-head,.ko-tree-col-head-spacer{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;
  color:var(--color-text-muted);margin-bottom:var(--space-2);min-height:28px;padding:0 4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ko-tree-col-head-spacer{visibility:hidden;margin-bottom:var(--space-2)}
.ko-tree-col-head.current{color:var(--color-primary)}
.ko-tree-col-track{position:relative;width:100%;flex-shrink:0}
.ko-tree-slot{position:absolute;left:0;right:0;box-sizing:border-box;padding:0 2px;display:flex;align-items:center;justify-content:center}
.ko-tree-card{display:flex;flex-direction:column;width:100%;min-height:58px;border-radius:var(--radius-md);background:var(--color-surface);
  overflow:hidden;font-size:var(--text-xs);line-height:1.25;text-decoration:none;color:inherit;justify-content:center;
  border:1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.ko-tree-card:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary) 42%, transparent);
  background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))}
.ko-tree-card.ko-tree-card-hl{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary) 50%, transparent);
  background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))}
.ko-tree-team{display:block;padding:4px 8px;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;text-align:center}
.ko-tree-team.winner{background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));font-weight:700}
.ko-tree-team.loser{color:var(--color-text-muted);font-weight:500}
.ko-tree-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:2px 6px 4px;gap:4px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:var(--text-xs);color:var(--color-primary);border-top:1px solid var(--color-border);background:var(--color-surface-offset);line-height:1.2;text-align:center}
.ko-tree-mid-sub{font-size:var(--text-2xs);font-weight:500;color:var(--color-text-faint)}
.ko-tree-bridge{display:block;width:40px;overflow:visible;flex-shrink:0}
.ko-tree-bridge path{vector-effect:non-scaling-stroke}

/* ─── Shell, navigation, and reusable page patterns ──────────────────────── */
/* Legacy `--rd-*` names are kept as thin aliases onto the single token ramp at
   the top of this file, so the two design systems no longer diverge. Prefer the
   canonical tokens (--shadow-*, --radius-*, --text-2xs) in new rules. */
:root{
  --rd-radius-xl:var(--radius-xl);
  --rd-radius-2xl:var(--radius-2xl);
  --rd-shadow-card:var(--shadow-sm);
  --rd-shadow-float:var(--shadow-lg);
  --rd-text-2xs:var(--text-2xs);
  --rd-header-h:60px;
}

/* Primary top navigation */
.app-topbar{grid-column:2;background:color-mix(in srgb,var(--color-surface) 88%,transparent);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--color-border);
  padding:0 var(--space-6);height:var(--rd-header-h);display:flex;align-items:center;gap:var(--space-5);
  position:sticky;top:0;z-index:30}
/* align-self:stretch so the nested .app-nav can reach the full header height;
   its own align-items:center keeps the logo vertically centred. */
.app-topbar-left{display:flex;align-items:center;align-self:stretch;
  gap:var(--space-4);flex:1 1 auto;min-width:0}
.app-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);
  border-radius:var(--radius-md);transition:opacity var(--transition)}
.app-logo:hover{opacity:.82}
.app-logo svg{flex-shrink:0}
.app-logo-text{font-size:var(--text-base);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.app-logo-sub{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Do NOT put overflow on .app-nav. It creates a clipping/scroll box that cuts
   off both the active underline (positioned below the nav box) and the Trends
   dropdown (absolutely positioned under its item), and it truncates the last
   link mid-word. The nav keeps its intrinsic width; the search input and the
   optional chrome below yield space instead. */
/* align-items:stretch makes each link span the full header height, so the
   active underline can be anchored with bottom:0 and always lands exactly on
   the header's bottom border — no magic offset that breaks when the font size
   or header height changes. */
.app-nav{display:flex;align-items:stretch;gap:2px;flex:0 0 auto;align-self:stretch}
/* Active state uses an underline rather than a filled pill: it keeps the bar
   visually quiet while still making the current section unambiguous. */
.app-nav-link{position:relative;display:flex;align-items:center;gap:5px;padding:0 12px;
  color:var(--color-text-muted);font-size:var(--text-sm);font-weight:550;text-decoration:none;
  transition:color var(--transition),background var(--transition);white-space:nowrap}
.app-nav-link:hover{color:var(--color-text);background:var(--color-surface-offset)}
.app-nav-link.active{color:var(--color-text);background:transparent}
.app-nav-link.active::before{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--color-primary);border-radius:2px 2px 0 0}
.app-nav-link .chevron{width:14px;height:14px;opacity:.7;transition:transform var(--transition)}
.app-nav-link[aria-expanded="true"] .chevron{transform:rotate(180deg)}

/* display:flex so the nested .app-nav-link stretches to the full header height
   like its flat siblings — otherwise the Trends link sits shorter than the
   others and its active underline lands in the wrong place. */
.app-nav-item{position:relative;display:flex;align-items:stretch}
.app-nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:6px;z-index:35}
.app-nav-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--rd-shadow-float);padding:var(--space-2);z-index:40}
.app-nav-item:hover .app-nav-dropdown,.app-nav-item:focus-within .app-nav-dropdown{display:block;
  animation:nav-drop-in .16s ease-out}
@keyframes nav-drop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Chevron already has a transform transition but nothing ever toggled it —
   rotate it while the dropdown is open. */
.app-nav-item:hover > .app-nav-link .chevron,
.app-nav-item:focus-within > .app-nav-link .chevron{transform:rotate(180deg)}
.app-nav-dropdown a{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius-md);
  color:var(--color-text-muted);font-size:var(--text-sm);text-decoration:none;transition:background var(--transition),color var(--transition)}
.app-nav-dropdown a:hover{color:var(--color-text);background:var(--color-surface-offset)}
.app-nav-dropdown a.active{color:var(--color-primary);font-weight:600}
.app-nav-dropdown a .meta{font-size:var(--rd-text-2xs);color:var(--color-text-faint);margin-left:8px}

/* Staff dropdown — collapsed group for Admin/Patterns. Hidden entirely for
   non-staff; the wrapper gates visibility off body.is-staff (set by auth.js),
   while the individual links keep their ids so auth.js can still toggle them
   via style.display (nav-admin for staff, nav-patterns for admin-only). */
/* Gate on both flags: _isStaff() is "has any permission" while _isAdmin() is a
   separate is_admin flag — an admin with an empty permission set would
   otherwise lose the Patterns link entirely. */
.staff-nav-item{display:none}
body.is-staff .staff-nav-item,body.is-admin .staff-nav-item{display:flex}

/* Highlight a top-level link when one of its dropdown children is the active
   section (e.g. "Staff" lit up while on /admin or /patterns). :has() degrades
   gracefully — without it the child simply still shows active inside the menu. */
.app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link{color:var(--color-text)}
.app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link::before{content:'';
  position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--color-primary);border-radius:2px 2px 0 0}

.app-topbar-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
/* Shrinkable: preferred 300px but allowed to compress before anything overflows */
.app-search{position:relative;display:flex;align-items:center;
  flex:0 1 300px;min-width:132px;max-width:34vw}
.app-search input{width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);
  padding:8px 14px 8px 36px;font-size:var(--text-sm);color:var(--color-text);
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}
.app-search input::placeholder{color:var(--color-text-faint)}
.app-search input:hover{border-color:var(--color-border-strong)}
.app-search input:focus{outline:none;border-color:var(--color-primary);background:var(--color-surface);box-shadow:var(--ring-primary)}
.app-search svg{position:absolute;left:13px;color:var(--color-text-faint);pointer-events:none}
.app-search kbd{position:absolute;right:10px;font-size:var(--text-2xs);font-weight:600;color:var(--color-text-faint);
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:2px 6px;line-height:1.2;pointer-events:none}

/* Context sidebar (replaces the flat navigation sidebar on public pages) */
/* Sits one step *below* the page background so the content area reads as the
   focal plane, matching the FotMob/Sofascore treatment. */
.context-sidebar{grid-row:1/-1;background:var(--color-surface);border-right:1px solid var(--color-border);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  padding:var(--space-4) 0 var(--space-6)}
body.sidebar-collapsed .context-sidebar{grid-column:1;grid-row:1;width:0;padding:0;border:0;overflow:hidden}
body.sidebar-collapsed .main{grid-column:1/3}
/* Desktop only: the invisible collapsed sidebar must not size the grid. Pinning
   it to grid-row:1 frees column 1 in row 2 so .main's 1/3 span sits flush under
   the topbar — otherwise it falls into an implicit third row and the empty 1fr
   track above absorbs all leftover height (the blank band on short pages like
   Leagues→International). height:0 stops its stacked nav content inflating
   row 1's auto track. Mobile keeps top:0/bottom:0 for the off-canvas drawer, so
   this is scoped out of it. */
@media (min-width:901px){
  body.sidebar-collapsed .context-sidebar{height:0;min-height:0}
}
.context-section{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--color-text-faint);padding:var(--space-5) var(--space-5) var(--space-2)}
.context-empty{padding:var(--space-2) var(--space-5) var(--space-3);font-size:var(--text-xs);
  color:var(--color-text-muted);line-height:1.6}
.context-list{display:flex;flex-direction:column;gap:1px;padding:0 var(--space-3)}
.context-item{display:flex;align-items:center;gap:var(--space-3);padding:8px 12px;border-radius:var(--radius-md);
  color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  background:none;border:0;width:100%;text-align:left;cursor:pointer;
  transition:background var(--transition),color var(--transition)}
.context-item:hover{color:var(--color-text);background:var(--color-surface-offset)}
.context-item.active{color:var(--color-primary);background:var(--color-primary-highlight);font-weight:600}
.context-item svg{flex-shrink:0;opacity:.75}
.context-item:hover svg,.context-item.active svg{opacity:1}
.context-item .ctx-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-item .ctx-unpin{opacity:0;margin-left:auto;color:var(--color-text-faint)}
.context-item:hover .ctx-unpin{opacity:1}
.sidebar-floating-toggle{position:fixed;bottom:var(--space-4);left:var(--space-4);z-index:40;width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);color:var(--color-text);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sidebar-floating-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* League list (FotMob-style sidebar) */
.league-list{display:flex;flex-direction:column;gap:2px;padding:0 var(--space-3)}
.league-row{display:flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-md);transition:background var(--transition)}
.league-row:hover{background:var(--color-surface-offset)}
.league-row-link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-2);padding:7px 12px;text-decoration:none;color:var(--color-text);min-width:0}
.league-row-flag{width:18px;height:18px;object-fit:contain;flex-shrink:0;border-radius:2px}
.league-row-name{font-size:var(--text-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.league-pin{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--color-text-faint);font-size:1rem;cursor:pointer;border-radius:var(--radius-md);flex-shrink:0}
.league-pin:hover{color:var(--color-primary)}
.league-pin.active{color:var(--color-primary)}
.league-row.drag-row{cursor:grab}
.league-row.drag-row:active{cursor:grabbing}
.league-row.dragging{opacity:.5;background:var(--color-primary-highlight)}
.league-row.drag-over{outline:2px dashed var(--color-primary);outline-offset:-2px}
.league-reorder button{height:16px;width:18px;padding:0;border:0;background:transparent;color:var(--color-text-faint);font-size:var(--text-2xs);cursor:pointer;line-height:1}
.league-reorder button:hover{color:var(--color-primary)}
.league-search-wrap{padding:0 var(--space-3);margin-bottom:var(--space-2)}
.league-search{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm)}
.league-search:focus{outline:none;border-color:var(--color-primary)}
.league-results{padding:0 var(--space-3)}
.league-country-group{margin-bottom:var(--space-1)}
.league-country-header{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:7px 12px;border-radius:var(--radius-md);background:transparent;border:0;color:var(--color-text);font-size:var(--text-sm);font-weight:500;cursor:pointer;text-align:left;transition:background var(--transition)}
.league-country-header:hover,.league-country-header.expanded{background:var(--color-surface-offset)}
.league-country-flag{width:18px;height:18px;object-fit:contain;flex-shrink:0;border-radius:2px}
.league-country-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.league-country-count{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface-2);padding:1px 6px;border-radius:var(--radius-full)}
.country-leagues{padding-left:var(--space-2);border-left:1px solid var(--color-border);margin-left:21px}
.pinned-leagues .league-row{background:var(--color-surface-2)}
.league-edit-link{background:transparent;border:0;color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer;padding:2px 6px;border-radius:var(--radius-md)}
.league-edit-link:hover{color:var(--color-primary);background:var(--color-surface-offset)}
.league-drag-handle{color:var(--color-text-muted);cursor:grab;padding:0 6px;font-size:var(--text-xs);user-select:none;line-height:1}
.league-drag-handle:active{cursor:grabbing}
.league-top-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--color-text-muted);font-size:1.2rem;cursor:pointer;border-radius:var(--radius-md)}
.league-top-remove:hover{color:var(--color-danger)}
.league-search-results{max-height:160px;overflow:auto;padding:0 var(--space-3);margin-bottom:var(--space-2)}
.league-search-result{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:6px 10px;border-radius:var(--radius-md);background:transparent;border:0;color:var(--color-text);font-size:var(--text-sm);cursor:pointer;text-align:left}
.league-search-result:hover{background:var(--color-surface-offset)}
.league-search-result small{color:var(--color-text-muted);font-size:var(--text-xs);margin-left:auto}
.top-leagues-editor-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.top-leagues-editor-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.top-leagues-editor-panel{position:relative;width:min(480px, calc(100vw - 32px));max-height:80vh;overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-5)}
.top-leagues-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.top-leagues-editor-head h3{margin:0;font-size:var(--text-lg)}
.top-leagues-editor-close{background:transparent;border:0;color:var(--color-text-muted);font-size:1.5rem;cursor:pointer}
.top-leagues-editor-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.top-leagues-editor-list{display:flex;flex-direction:column;gap:2px;min-height:40px}
.top-leagues-editor-actions{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.league-edit-save{padding:6px 14px;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;border:0;cursor:pointer;font-size:var(--text-sm)}
.league-edit-reset{padding:6px 14px;border-radius:var(--radius-md);background:transparent;color:var(--color-text);border:1px solid var(--color-border);cursor:pointer;font-size:var(--text-sm)}
.league-edit-save:hover{filter:brightness(1.1)}
.league-edit-reset:hover{background:var(--color-surface-offset)}

/* Hero block for entity pages (league / team / player / fixture) */
.hero-block{position:relative;
  background:
    radial-gradient(90% 160% at 0% 0%,color-mix(in srgb,var(--color-primary) 14%,transparent) 0%,transparent 60%),
    linear-gradient(180deg,var(--color-surface-2) 0%,var(--color-surface) 100%);
  border-bottom:1px solid var(--color-border);padding:var(--space-8) var(--space-6) var(--space-6);
  margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-6) calc(-1 * var(--space-6))}
.hero-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.hero-breadcrumb a{color:var(--color-text-muted);text-decoration:none}
.hero-breadcrumb a:hover{color:var(--color-primary);text-decoration:underline}
.hero-main{display:flex;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.hero-media{width:72px;height:72px;border-radius:var(--radius-lg);background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);box-shadow:var(--rd-shadow-card)}
.hero-media img{width:60%;height:60%;object-fit:contain}
.hero-title{font-size:var(--text-xl);font-weight:800;letter-spacing:-.025em;color:var(--color-text);line-height:1.15}
.hero-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}
.hero-meta{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}
.hero-meta-item{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:500;
  color:var(--color-text-muted);background:color-mix(in srgb,var(--color-surface-offset) 70%,transparent);
  padding:5px 11px;border-radius:var(--radius-full);border:1px solid var(--color-border)}
.hero-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}

/* Tab bar */
.tab-bar{display:flex;align-items:center;gap:var(--space-1);border-bottom:1px solid var(--color-border);
  margin-bottom:var(--space-5);overflow-x:auto;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{position:relative;padding:11px 14px;font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);
  background:none;border:none;cursor:pointer;white-space:nowrap;transition:color var(--transition)}
.tab-btn:hover{color:var(--color-text)}
.tab-btn.active{color:var(--color-primary)}
.tab-btn.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-primary);border-radius:2px 2px 0 0}

/* Filter chips / filter bar */
.filter-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;margin-bottom:var(--space-4);flex-wrap:wrap}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);
  font-size:var(--text-xs);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--transition),border-color var(--transition),color var(--transition)}
.filter-chip:hover{border-color:var(--color-border-strong);color:var(--color-text);background:var(--color-surface-offset)}
.filter-chip.active{background:var(--color-primary-highlight);border-color:var(--color-primary);color:var(--color-primary)}
.filter-chip .remove{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}
.filter-chip .remove:hover{color:var(--color-error)}

/* League jumper (homepage) */
.league-jumper{display:flex;align-items:center;gap:var(--space-2);overflow-x:auto;padding:var(--space-3) 0;margin-bottom:var(--space-4);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.league-jumper::-webkit-scrollbar{display:none}
.league-jumper-item{flex-shrink:0;display:flex;align-items:center;gap:var(--space-2);padding:8px 14px;border-radius:var(--radius-full);
  background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  transition:background var(--transition),border-color var(--transition)}
.league-jumper-item:hover{border-color:var(--color-primary);background:var(--color-surface-offset)}
.league-jumper-item img{width:20px;height:20px;object-fit:contain}

/* Fixture row / card — the central reusable unit across the product */
.fixture-row{display:grid;grid-template-columns:52px minmax(0,1fr) 44px auto;align-items:center;
  gap:var(--space-4);padding:var(--space-3) var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  margin-bottom:var(--space-2);box-shadow:var(--shadow-xs);
  text-decoration:none;color:inherit;
  transition:border-color var(--transition),box-shadow var(--transition),
    transform var(--transition),background var(--transition)}
.fixture-row:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));
  background:var(--color-surface-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.fixture-row:hover .fixture-team-name{color:var(--color-primary)}
/* Scoped link model: team names highlight together only on blank-space
   hover (click → fixture). The club link shrink-wraps logo+name so the
   rest of the row stays fixture space; hovering it highlights just that
   team. Referee and chips likewise suppress the team highlight. */
.fixture-team-link{display:inline-flex;align-items:center;gap:8px;min-width:0;
  max-width:100%;cursor:pointer}
.fixture-referee[data-href]{align-self:flex-start;max-width:100%;cursor:pointer}
.fixture-row:has(.fixture-team-link:hover) .fixture-team-name,
.fixture-row:has(.fixture-referee:hover) .fixture-team-name,
.fixture-row:has(.fixture-form:hover) .fixture-team-name,
.fixture-row:has(.live-watch-btn:hover) .fixture-team-name{color:var(--color-text)}
.fixture-row .fixture-team-link:hover .fixture-team-name,
.fixture-row .fixture-team-link:focus-visible .fixture-team-name{color:var(--color-primary)}
.fixture-team-link:focus-visible{outline:1px solid var(--color-primary);outline-offset:1px;border-radius:2px}
.fixture-referee:hover .fixture-referee-link,
.fixture-referee:focus-visible .fixture-referee-link{color:var(--color-primary);text-decoration:underline}
.fixture-row:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.fixture-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-align:center;min-height:44px}
.fixture-status .live-watch-btn{width:18px;height:18px;margin:0}
.fixture-status .live-pulse{width:6px;height:6px}
.fixture-status.live{color:var(--color-error)}
.fixture-teams{display:flex;flex-direction:column;gap:4px;min-width:0}
.fixture-team{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600}
.fixture-team img,.fixture-team-img-placeholder{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.fixture-team-img-placeholder{display:inline-block;border-radius:50%;background:var(--color-surface-offset);border:1px solid var(--color-border)}
.fixture-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fixed slot + right-aligned text so the score sits at the same x on every
   row regardless of what the teams column absorbed. */
.fixture-score{font-variant-numeric:tabular-nums;font-weight:700;color:var(--color-text);
  min-width:44px;text-align:right;white-space:nowrap}
.fixture-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
/* ─── Fixture row odds (design-foundations Phase D) ────────────────────────
   Was muted text on surface-offset with a muted border — nearly unreadable.
   Now full-strength text on a distinct surface, with the favourite (shortest
   price) emphasised via .primary instead of always-home. The JS computes
   which price is shortest and adds .primary to that one. */
.fixture-odds{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs)}
.fixture-odd{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;flex:1;
  flex:1;min-width:52px;
  padding:3px 8px;border-radius:var(--radius-sm);
  background:var(--color-surface-2);border:1px solid var(--color-border-strong);
  font-variant-numeric:tabular-nums;color:var(--color-text);font-weight:600}
.fixture-odd .fixture-odd-label{font-size:var(--text-2xs);font-weight:700;
  color:var(--color-text-faint);letter-spacing:.02em}
.fixture-odd .fixture-odd-line{font-size:var(--text-2xs);font-weight:600;
  color:var(--color-text-muted);background:var(--color-surface-offset);
  padding:1px 4px;border-radius:3px;margin-right:1px}
/* Favourite = same surface as the others, but bolder weight and a colored
   label. Subtle but clear — no loud filled pill. Reads well in both themes
   and in forced browser dark mode since only the label uses the primary
   color, not the background. */
.fixture-odd.primary{border-color:var(--color-primary);font-weight:800}
.fixture-odd.primary .fixture-odd-label{color:var(--color-primary)}
/* Rows carrying the form column get fixed tracks for score + chips. The
   end column is fixed per market below, so only the teams column flexes
   and every row's right side lands at identical x positions. */
.fixture-row-has-form{grid-template-columns:52px minmax(0,1fr) 44px 88px auto}
@media (min-width:901px){
  .fixture-row-mkt-1x2 > .fixture-odds,
  .fixture-row-mkt-1x2 > .fixture-end{width:176px}
  .fixture-row-mkt-btts > .fixture-odds, .fixture-row-mkt-btts > .fixture-end,
  .fixture-row-mkt-o25 > .fixture-odds, .fixture-row-mkt-o25 > .fixture-end,
  .fixture-row-mkt-cards > .fixture-odds, .fixture-row-mkt-cards > .fixture-end,
  .fixture-row-mkt-corners > .fixture-odds, .fixture-row-mkt-corners > .fixture-end{width:124px}
}

/* Live fixture row additions */
.fixture-row-live .fixture-status-live{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--color-error);font-weight:700}
.live-pulse{width:8px;height:8px;border-radius:50%;background:var(--color-error);animation:live-pulse 1.5s ease-in-out infinite}
@keyframes live-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
.live-stats{color:var(--color-text-muted)}
/* Third line: the referee (left) shares one row with the live-stat column
   labels (right). Either side may be absent — labels can't nest inside
   .fixture-referee because the patcher rewrites that element's innerHTML. */
.fixture-subline{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.fixture-subline > .fixture-referee{flex:0 1 auto}
.fixture-subline > .fixture-referee .fixture-referee-name,
.fixture-subline > .fixture-referee .fixture-referee-link{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fixture-subline > .fixture-referee .fixture-referee-stats{flex-shrink:0}
/* Live stat columns (desktop): the Sh/SoT/Cor values ride at the right edge
   of each team row — home value on the home team's row, away on the away
   team's — so the pairing is positional, not a string to decode. Labels sit
   on the subline directly beneath the columns. On mobile the .live-stats
   text line under the teams carries the same numbers instead. */
.fixture-ls-vals{display:none;margin-left:auto;flex-shrink:0;
  font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  font-variant-numeric:tabular-nums}
.fixture-ls-labels{display:none;margin-left:auto;flex-shrink:0}
.fixture-ls-cell{width:30px;text-align:right;flex-shrink:0}
.fixture-ls-label{font-size:var(--text-2xs);font-weight:600;letter-spacing:.02em;
  color:var(--color-text-faint)}
@media (min-width:901px){
  .fixture-ls-vals{display:inline-flex}
  .fixture-ls-labels{display:inline-flex}
  .fixture-meta .live-stats{display:none}
  /* A meta line holding only the (hidden) live-stats string collapses so
     it doesn't leave an empty band; a multi-day date keeps it visible. */
  .fixture-meta:not(:has(.fixture-meta-date)){display:none}
}
@media (max-width:900px){
  /* Labels-only sublines are invisible on mobile — drop the line so it
     doesn't add a stray gap between the away team and the meta line. */
  .fixture-subline:not(:has(.fixture-referee)){display:none}
}

/* Stat panel / cards */
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs)}
.stat-card-title{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-muted);margin-bottom:var(--space-3);display:flex;align-items:center;gap:8px}
.stat-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.stat-row:last-child{border-bottom:none}
.stat-label{color:var(--color-text-muted)}
.stat-value{font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}
.stat-comparison{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}
.stat-comparison .side{flex:1;text-align:center}
.stat-comparison .mid{width:40px;text-align:center;color:var(--color-text-faint);font-size:var(--text-xs)}

/* Trend cards */
.trend-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-xs);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.trend-card:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));
  box-shadow:var(--shadow-md);transform:translateY(-2px)}
.trend-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.trend-card-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.trend-card-meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.trend-card-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:var(--text-sm);border-bottom:1px solid var(--color-divider)}
.trend-card-row:last-child{border-bottom:none}
.trend-hit{font-weight:700;color:var(--color-primary)}
.trend-odd{font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-size:var(--text-xs)}

/* Trends hub grid */
.trends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.trends-grid .trend-card:hover svg{color:var(--color-primary)}

/* Trends table view */
.trends-table-wrap{width:100%;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.trends-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.trends-table th,.trends-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle;white-space:nowrap}
.trends-table th{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;background:var(--color-surface-offset)}
.trends-table tbody tr:hover td{background:oklch(from var(--color-primary) l c h/.04)}
.trends-table td.trends-td-time{width:120px;color:var(--color-text-muted)}
.trends-table td.trends-td-league{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.trends-table td.trends-td-fixture{min-width:220px}
.trends-fixture-link{display:flex;align-items:center;gap:var(--space-2);color:inherit;text-decoration:none}
.trends-fixture-link:hover .trends-team{color:var(--color-primary)}
.trends-team{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.trends-vs{color:var(--color-text-muted);margin:0 4px}
.trends-td-stat{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.trends-td-na{color:var(--color-text-faint)}
.trends-td-odds-cell{min-width:120px}
.trends-td-odds{display:flex;gap:var(--space-2);font-size:var(--text-xs)}
.trends-odd{padding:2px 6px;border-radius:var(--radius-sm);background:var(--color-surface-offset);border:1px solid var(--color-border);color:var(--color-text-muted);white-space:nowrap}
@media (max-width:768px){
  .trends-table th,.trends-table td{padding:var(--space-2)}
  .trends-team{max-width:100px}
  .trends-table td.trends-td-league{display:none}
}

/* Search page */
.search-page-input-wrap{position:relative;margin-bottom:var(--space-4)}
.search-page-input{width:100%;padding:var(--space-3) var(--space-4);padding-right:40px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);font-size:var(--text-base)}
.search-page-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/.15)}
.search-page-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--color-text-muted);cursor:pointer;font-size:1.25rem;line-height:1}
.search-page-clear:hover{color:var(--color-text)}
.search-page-results{display:flex;flex-direction:column;gap:var(--space-4)}
.search-group-title{font-size:var(--text-sm);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.04em}
.search-group-list{display:flex;flex-direction:column;gap:var(--space-1)}
.search-result-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:border-color var(--transition)}
.search-result-item:hover{border-color:var(--color-primary)}
.search-result-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700}
.search-result-body{min-width:0}
.search-result-name{font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-sub{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Favourites / pinning */
.fav-pin-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:border-color var(--transition),color var(--transition)}
.fav-pin-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.fav-pin-btn.active{border-color:var(--color-primary);background:var(--color-primary-highlight);color:var(--color-primary)}
.fav-list{display:flex;flex-direction:column;gap:var(--space-2)}
.fav-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);transition:background-color var(--transition)}
.fav-item:hover{background:var(--color-primary-highlight);color:var(--color-primary)}
.fav-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted)}

/* Staff pages */
.staff-page-hero{padding:var(--space-5);margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4) calc(-1 * var(--space-6));background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.staff-page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.staff-page-title{font-size:var(--text-2xl);font-weight:800;color:var(--color-text);margin:0}
.staff-page-body{display:flex;flex-direction:column;gap:var(--space-4)}
.staff-page-actions{display:flex;align-items:center;gap:var(--space-2)}

/* Entity page tabs — segmented control */
.entity-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:4px;background:var(--color-surface-offset);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--space-5)}
.entity-tab{padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-md);background:transparent;
  font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);cursor:pointer;
  transition:background-color var(--transition),color var(--transition),box-shadow var(--transition)}
.entity-tab:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-surface) 60%,transparent)}
.entity-tab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-xs)}

/* Homepage */
/* The hero is the first thing a user sees, so it carries a subtle brand wash
   and the largest type on the page to establish hierarchy immediately. */
.home-hero{position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);
  margin-bottom:var(--space-5);padding:var(--space-6);
  background:
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--color-primary) 12%,transparent) 0%,transparent 58%),
    var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.home-hero-main{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.home-hero h1{font-size:var(--text-xl);font-weight:800;color:var(--color-text);margin:0;
  letter-spacing:-.025em;line-height:1.15}
.home-hero-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);
  color:var(--color-text-muted);flex-wrap:wrap}
.home-live-badge{display:inline-flex;align-items:center;gap:6px;color:var(--color-error);font-weight:700}
.home-live-badge .live-pulse{position:relative;top:-1px}
.home-hero-trends{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-1)}
.home-hero-trend-link{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:var(--radius-full);
  background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-xs);
  text-decoration:none;color:var(--color-text-muted);
  transition:border-color var(--transition),color var(--transition),background var(--transition)}
.home-hero-trend-link:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));
  color:var(--color-text);background:var(--color-surface-offset)}
.home-hero-trend-count{font-weight:700;color:var(--color-text);font-size:var(--text-sm)}
.home-hero-trend-label{text-transform:lowercase}
.home-jumper{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.home-jumper-label{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-faint)}
.home-jumper-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.home-jumper-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--radius-full);
  background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:550;
  color:var(--color-text-muted);text-decoration:none;
  transition:border-color var(--transition),color var(--transition),background var(--transition)}
.home-market-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.home-market-chip{padding:5px 14px;border-radius:var(--radius-full);border:1px solid var(--color-border);
  background:var(--color-surface);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);
  cursor:pointer;transition:all var(--transition)}
.home-market-chip:hover{border-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-border));color:var(--color-text)}
.home-market-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
/* In-row form column: two stacked chip rows (home on top, away below)
   aligned with the team rows, sitting between score and odds. Chips are
   data-href spans — nested <a> inside the row anchor would be invalid.
   Fixed width reserves the column so odds don't shift when chips patch in. */
.fixture-form{display:flex;flex-direction:column;gap:4px;justify-content:flex-start;
  align-self:stretch;width:88px;flex-shrink:0}
.fixture-form-row{display:flex;align-items:center;gap:2px;min-height:16px}
.fixture-form .form-chip-wrap{line-height:0}
.fixture-form .form-chip{width:16px;height:16px;min-width:16px;border-radius:3px;font-size:9px}
.fixture-form .form-chip-latest-bar{position:absolute;left:1px;right:1px;bottom:-4px;margin:0;width:auto;height:2px}
/* Referee line lives inside .fixture-teams as a third line under the away
   team. The name is a data-href span (nested <a> inside the row anchor
   would be invalid); clicks are routed by the capture handler in
   stat-chips.js. */
.fixture-referee{display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-2xs);color:var(--color-text-faint);
  white-space:nowrap;overflow:hidden;min-width:0}
.fixture-referee-name{font-weight:600}
.fixture-referee-link{color:var(--color-text-muted);font-weight:600;cursor:pointer}
.fixture-referee-link:hover{color:var(--color-primary);text-decoration:underline}
.fixture-referee-stats{display:inline-flex;align-items:center;gap:var(--space-2)}
.fixture-referee-stat{display:inline-flex;align-items:center;gap:3px;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text-muted)}
.fixture-referee-stat .fxd-lu-ico.card{width:0.55rem;height:0.72rem}
.fixture-referee-foul-ico{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1}
/* End column: odds row with the trend line stacked beneath it. The
   min-width covers two-way odds and the "H 100% · A 100% L10" trend text
   so the column — and therefore the score/chips columns to its left —
   stays at the same x on every row instead of drifting with content. */
.fixture-end{display:flex;flex-direction:column;gap:2px;justify-content:center;
  align-items:flex-end;min-width:112px}
.fixture-end > .fixture-odds{width:100%}
.fixture-trend{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);
  font-size:var(--text-2xs);color:var(--color-text-faint);white-space:nowrap;min-height:13px;
  max-width:100%;overflow:hidden}
.fixture-trend-vals{display:inline-flex;align-items:baseline;gap:4px}
.fixture-trend-side{font-weight:600}
.fixture-trend-sep{color:var(--color-text-faint)}
.fixture-trend-window{color:var(--color-text-faint);font-weight:400}
.home-jumper-chip:hover{border-color:var(--color-primary);color:var(--color-primary);
  background:var(--color-primary-highlight)}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-6);align-items:start}
.home-section{margin-bottom:var(--space-8)}
.home-section-title{font-size:var(--text-lg);font-weight:700;color:var(--color-text);
  margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3);letter-spacing:-.015em}
.home-rail{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-xs)}
.home-rail-title{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--color-text-muted);margin-bottom:var(--space-4)}
.home-rail-list{display:flex;flex-direction:column;gap:var(--space-2)}
.home-rail-card{display:block;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface-2);text-decoration:none;color:inherit;
  transition:border-color var(--transition),background var(--transition),transform var(--transition)}
.home-rail-card:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));
  background:var(--color-surface-offset);transform:translateX(2px)}
.home-rail-card-title{font-weight:600;font-size:var(--text-sm)}
.home-rail-card-count{font-weight:700;font-size:var(--text-base);color:var(--color-primary);margin-top:2px}
.home-rail-card-desc{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px;line-height:1.5}
.home-rail-empty{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6}
@media (max-width:900px){
  .home-hero{flex-direction:column;align-items:flex-start}
  .home-grid{grid-template-columns:1fr}
  .home-side{order:-1;margin-bottom:var(--space-4)}
}

/* Section titles */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.section-title h2{font-size:var(--text-base);font-weight:600;color:var(--color-text)}
.section-title h2 a.league-link{font-size:inherit;font-weight:inherit;color:inherit}
.section-title h2 a.league-link:hover{color:var(--color-primary);text-decoration:underline}
.section-title a{font-size:var(--text-xs);color:var(--color-primary);text-decoration:none}
.section-title a:hover{text-decoration:underline}

/* Mobile drawer primary nav — populated by _sidebarMobileNav(). Hidden on
   desktop; the drawer takes over from .app-nav below 900px. Staff items mirror
   the topbar gating: Admin under is-staff, Patterns under is-admin. The
   compound selectors matter: a bare .mnav-staff{display:none} loses the
   cascade to .mnav-link{display:flex} in the 900px media block below (equal
   specificity, later in the file). */
.mnav{display:none}
.mnav .mnav-staff,.mnav .mnav-admin-only{display:none}
body.is-staff .mnav .mnav-staff{display:flex}
body.is-admin .mnav .mnav-admin-only{display:flex}

/* Responsive */
/* ── 900px nav-drawer boundary (PERMANENT EXCEPTION to the tier system) ────
   This does not match any canonical tier boundary (mobile 720, tablet 1024).
   It was deliberately chosen to close a dead band: .app-nav hides at 900px,
   so the mobile drawer must appear at exactly 900px — otherwise there is a
   range of widths with no navigation at all. Moving this to 1024px would
   reintroduce the dead band unless .app-nav is also re-tuned. Leave it
   alone unless the nav visibility breakpoint is also moved. */
@media (max-width:900px){
  .app-nav{display:none}
  .app-search{width:44px}
  .app-search input,.app-search kbd{display:none}

  /* ── Mobile drawer ──────────────────────────────────────────────────────
     The off-canvas sidebar used to kick in at 720px but .app-nav hides at
     900px, leaving a 180px dead band with no navigation. Move the drawer
     breakpoint to 900px so the hamburger exists exactly when the nav is
     hidden. */
  .shell{grid-template-columns:1fr}
  .app-topbar{grid-column:1}
  .main{grid-column:1}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,86vw);z-index:50;
    transform:translateX(-100%);transition:transform var(--transition);
    box-shadow:var(--shadow-md);-webkit-overflow-scrolling:touch}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open{overflow:hidden}
  .tb-menu-btn{display:flex;flex-shrink:0}
  /* Non-home views collapse the sidebar column to width:0 on desktop — that
     must not zero the mobile drawer, and .main's 1/3 span would create an
     implicit second track in the single-column shell. */
  body.sidebar-collapsed .context-sidebar{width:min(280px,86vw);
    padding:var(--space-4) 0 var(--space-6);
    border-right:1px solid var(--color-border);overflow-y:auto}
  body.sidebar-collapsed .main{grid-column:1}
  .sidebar-floating-toggle{display:none}  /* redundant inside the open drawer */
  /* Reclaim topbar space so the account/sign-in button stays visible: the
     logo wordmark and timezone select are the least essential chrome. */
  .app-logo-text{display:none}
  .tb-tz-wrap{display:none}

  /* Primary nav inside the drawer */
  .mnav{display:block;padding:0 var(--space-3) var(--space-3);
    border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-3)}
  .mnav-link{display:flex;align-items:center;padding:8px 12px;border-radius:var(--radius-md);
    color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;text-decoration:none;
    transition:background var(--transition),color var(--transition)}
  .mnav-link:hover{background:var(--color-surface-offset);color:var(--color-text)}
  .mnav-link.active{color:var(--color-primary);background:var(--color-primary-highlight);font-weight:600}
  .hero-block{padding:var(--space-5) var(--space-4);margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4) calc(-1 * var(--space-4))}
  .hero-main{align-items:flex-start}
  .hero-actions{width:100%;margin-left:0;margin-top:var(--space-3)}
  .fixture-row{grid-template-columns:40px minmax(0,1fr) 44px;
    grid-template-areas:"status teams score" "odds odds odds";
    grid-template-rows:auto auto}
  .fixture-row > .fixture-status{grid-area:status}
  .fixture-row > .fixture-teams{grid-area:teams}
  .fixture-row > .fixture-score{grid-area:score}
  .fixture-row > .fixture-odds,
  .fixture-row > .fixture-end{grid-area:odds;justify-content:flex-start;align-items:flex-start;padding-top:2px}
  /* Form column on mobile: chips sit after the score on line one, and the
     grid gaps tighten so team names keep their room. */
  .fixture-row-has-form{grid-template-columns:40px minmax(0,1fr) 44px 88px;
    grid-template-areas:"status teams score form" "odds odds odds odds";
    gap:var(--space-2)}
  .fixture-row-has-form > .fixture-form{grid-area:form;justify-self:end}
  /* Was display:none — hiding odds on mobile lost information. Now the row
     reflows onto a second line: identity and score on line one, odds on line
     two. See design-foundations Phase C6. */
}
@media (max-width:720px){
  .app-topbar{grid-column:1;padding:0 var(--space-4);height:48px;gap:var(--space-2)}
}
@media (min-width:901px){
  .tb-menu-btn{display:none}
  /* If the drawer was open when the viewport grew past the breakpoint, the
     .open class persists — don't let the backdrop cover the desktop page. */
  .sb-backdrop.open{display:none}
}
a.league-link{cursor:pointer;color:var(--color-primary);text-decoration:none}
a.league-link:hover{text-decoration:underline}

/* ─── Admin nav issue indicator (ops log + validation) ─────────────────── */
.nav-debug-badge{display:inline-flex;align-items:center;justify-content:center;
  width:7px;height:7px;border-radius:50%;background:var(--color-error);
  margin-left:auto;flex-shrink:0;opacity:0;transition:opacity .3s}
.nav-debug-badge.visible{opacity:1}
.ops-log-row-error td{color:var(--color-error)}
.ops-log-row-warn td{color:#d97706}
.ops-log-detail{font-size:var(--text-2xs);color:var(--color-text-muted);white-space:pre-wrap;max-width:480px}

/* ─── Debug sub-tabs ────────────────────────────────────────────────────── */
.dbg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-4)}
.dbg-tab{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:8px;padding:4px 10px;font-size:var(--text-xs);font-weight:600;
  color:var(--color-text-muted);cursor:pointer;transition:all var(--transition)}
.dbg-tab:hover{color:var(--color-text)}
.dbg-tab.active{background:var(--color-primary-highlight);border-color:var(--color-primary);
  color:var(--color-primary)}
.dbg-empty{color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--space-4) 0}
.dbg-wrap{overflow-x:auto;max-height:520px;overflow-y:auto}
.dbg-tbl{border-collapse:collapse;width:100%;font-size:var(--text-xs);white-space:nowrap}
.dbg-tbl th{position:sticky;top:0;background:var(--color-surface-2);
  padding:5px 8px;text-align:left;font-size:var(--text-2xs);font-weight:600;
  color:var(--color-text-muted);border-bottom:2px solid var(--color-border);
  cursor:pointer;user-select:none}
.dbg-tbl th:hover{color:var(--color-text)}
.dbg-tbl td{padding:4px 8px;border-bottom:1px solid var(--color-border);
  color:var(--color-text);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.dbg-tbl tr:hover td{background:var(--color-surface-offset)}
.dbg-pill-sel{background:var(--color-primary-highlight);color:var(--color-primary)}
.dbg-pill-rej{background:#fce4d655;color:var(--color-error)}

/* ─── Component primitives & layout utilities ───────────────────────────── */
/* Added in the UI modernization pass (docs/plans/ui-modernization.md, Phase B1).
   These exist so view modules can stop emitting inline `style="..."`, which
   cannot be restyled from a stylesheet. Prefer these over inline styles.
   Naming: `u-` = single-purpose utility, unprefixed = composed component. */

/* Layout: stack (vertical rhythm) and cluster (horizontal wrap) */
.stack{display:flex;flex-direction:column}
.stack-1{gap:var(--space-1)}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}
.stack-4{gap:var(--space-4)}.stack-5{gap:var(--space-5)}.stack-6{gap:var(--space-6)}
.cluster{display:flex;flex-wrap:wrap;align-items:center}
.cluster-1{gap:var(--space-1)}.cluster-2{gap:var(--space-2)}.cluster-3{gap:var(--space-3)}
.cluster-4{gap:var(--space-4)}
.grid-auto{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.grid-auto-sm{display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr))}

/* Flex helpers */
.u-row{display:flex;align-items:center}
.u-col{display:flex;flex-direction:column}
.u-between{justify-content:space-between}
.u-center{align-items:center;justify-content:center}
.u-wrap{flex-wrap:wrap}
.u-push{margin-left:auto}
.u-grow{flex:1;min-width:0}
.u-shrink-0{flex-shrink:0}

/* Spacing */
.u-mt-2{margin-top:var(--space-2)}.u-mt-3{margin-top:var(--space-3)}
.u-mt-4{margin-top:var(--space-4)}.u-mt-5{margin-top:var(--space-5)}
.u-mt-6{margin-top:var(--space-6)}.u-mt-8{margin-top:var(--space-8)}
.u-mb-2{margin-bottom:var(--space-2)}.u-mb-3{margin-bottom:var(--space-3)}
.u-mb-4{margin-bottom:var(--space-4)}.u-mb-5{margin-bottom:var(--space-5)}
.u-mb-6{margin-bottom:var(--space-6)}.u-mb-0{margin-bottom:0}

/* Typography */
.u-muted{color:var(--color-text-muted)}
.u-faint{color:var(--color-text-faint)}

/* ─── Team trends card (design-foundations Phase D feedback) ────────────────
   Was two lines with the opponent in faint text, making it hard to read the
   fixture and impossible to tell if the trend team is home or away. Now one
   row: bold linked trend team, full-strength opponent, and a small H/A badge.
   The date/league line is a link to the fixture page. */
.trend-card{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);
  border-left:3px solid transparent}
.trend-card--home{border-left-color:oklch(from var(--color-primary) l c h/.5)}
.trend-card--away{border-left-color:oklch(from var(--color-gold) l c h/.5)}
.trend-teams-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-size:var(--text-base);color:var(--color-text)}
.trend-team-link{font-weight:800;color:var(--color-text);text-decoration:none}
.trend-team-link:hover{color:var(--color-primary);text-decoration:underline}
.trend-vs{color:var(--color-text-faint);font-size:var(--text-xs);font-weight:500}
.trend-opp{color:var(--color-text-muted);font-weight:500}
.trend-side-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-sm);
  font-size:var(--text-2xs);font-weight:700;letter-spacing:.02em;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  color:var(--color-text-muted);flex-shrink:0;margin-left:auto}
.trend-meta{font-size:var(--text-xs);color:var(--color-text)}
.trend-fx-link{color:var(--color-text);text-decoration:none}
.trend-fx-link:hover{color:var(--color-primary);text-decoration:underline}
.trend-stats{font-size:var(--text-sm);color:var(--color-text);font-weight:500}
.trend-stat-block{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);
  margin-top:var(--space-1)}
.trend-stat-value{font-size:var(--text-xl);font-weight:800;color:var(--color-text);
  font-variant-numeric:tabular-nums;line-height:1.1}
.trend-stat-form{flex-shrink:0}
.trend-stat-form .form-chips{display:inline-flex;gap:2px}
.u-xs{font-size:var(--text-xs)}
.u-2xs{font-size:var(--text-2xs)}
.u-bold{font-weight:700}
.u-semibold{font-weight:600}
.u-normal{font-weight:400}
/* Tabular numerals: use on any element showing changing numbers so columns
   do not jitter as values update (scores, minutes, odds, percentages). */
.u-num{font-variant-numeric:tabular-nums}
.u-label{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--color-text-muted)}
.u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.u-pos{color:var(--color-success);font-weight:700}
.u-neg{color:var(--color-error);font-weight:700}

/* Misc */
.u-scroll-x{overflow-x:auto}
.u-hidden{display:none}
.u-divider{height:1px;background:var(--color-divider);border:0;margin:var(--space-4) 0}

/* Surfaces */
/* NAME COLLISION: `card` is also used as a football-card icon modifier
   (`.fxd-lu-ico.card.y` / `.card.r` — a 0.6rem yellow/red swatch in lineups and
   live rows). That selector is (0,2,0) so it already outranks `.card` and is
   immunised explicitly below. Everything else using a bare `class="card"`
   (alerts, fixture page, patterns) is a genuine UI card and was previously
   unstyled because no `.card` rule existed at all.
   Do NOT write this as `.card:not(.fxd-lu-ico)` — `:not()` takes its argument's
   specificity, making it (0,2,0), which silently beats `.card-flush` (0,1,0)
   and breaks every flush card. */
.card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs)}
.card-flush{padding:0}
.panel{background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4)}
.section-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.section-head h2,.section-head h3{font-size:var(--text-lg);font-weight:700;
  letter-spacing:-.015em;color:var(--color-text)}

/* Badges / pills */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  border-radius:var(--radius-full);background:var(--color-surface-offset);
  border:1px solid var(--color-border);color:var(--color-text-muted);
  font-size:var(--text-2xs);font-weight:700;white-space:nowrap;line-height:1.5}
.badge-primary{background:var(--color-primary-highlight);border-color:transparent;color:var(--color-primary)}
.badge-success{background:var(--color-success-highlight);border-color:transparent;color:var(--color-success)}
.badge-error{background:var(--color-error-highlight);border-color:transparent;color:var(--color-error)}
.badge-warning{background:var(--color-warning-highlight);border-color:transparent;color:var(--color-warning)}
.badge-live{background:var(--color-error);border-color:transparent;color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:var(--radius-md);border:1px solid var(--color-border);
  background:var(--color-surface);color:var(--color-text);
  font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--transition),border-color var(--transition),color var(--transition)}
.btn:hover{background:var(--color-surface-offset);border-color:var(--color-border-strong)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}
.btn-ghost:hover{background:var(--color-surface-offset);color:var(--color-text);border-color:transparent}
.btn-sm{padding:5px 10px;font-size:var(--text-xs)}

/* Shell-specific helpers replacing inline styles in index.html.
   NOTE: inline `display:none` on #nav-admin, #nav-patterns, #tb-notifications,
   #date-cal-overlay, #empty-state and the overlays is deliberately left in the
   markup — JS toggles those via element.style.display and would break if the
   visibility moved into a class. */
.empty-sm{padding:var(--space-8) var(--space-4)}
.empty-hint{font-size:var(--text-xs);color:var(--color-text-faint)}
/* Sidebar logo lockup */
.sb-logo-block{padding:var(--space-2) var(--space-5) var(--space-1);margin-bottom:var(--space-3)}
#tb-notifications{position:relative}
.search-input-icon{color:var(--color-text-faint);flex-shrink:0}
.u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.u-pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--text-xs);color:var(--color-text-muted);overflow:auto;
  max-height:14rem;white-space:pre-wrap;word-break:break-word}
.u-danger{color:var(--color-danger)}
.u-maxw-sm{max-width:16rem}
.u-items-start{align-items:flex-start}
/* Gap overrides for pre-existing flex containers that set their own gap */
.u-gap-1{gap:var(--space-1)}
.u-gap-2{gap:var(--space-2)}
.u-gap-tight{gap:2px}
/* Fixed widths for compact numeric inputs / selects in filter bars */
.u-w-xs{width:52px}
.u-w-sm{width:60px}
.u-w-md{width:90px}
.u-minw-fixture{min-width:180px}
.u-gold{color:var(--color-gold)}
.u-pointer{cursor:pointer}
.u-accent{accent-color:var(--color-primary)}
/* Emphasised "Apply" affordance inside threshold bars */
.thr-reset.is-apply{background:var(--color-primary-highlight);color:var(--color-primary);
  border-color:var(--color-primary);font-weight:700}
/* Centered placeholder cell for empty table bodies */
.u-td-empty{text-align:center;padding:var(--space-5);color:var(--color-text-muted)}

/* ─── Staff-page utilities (Phase C) ──────────────────────────────────────
   These classes replace the repeated inline style="" blocks in admin.js and
   patterns.js so staff pages can be restyled from the stylesheet. They mirror
   the exact property sets that were inline — no visual change intended.
   Ordering matters: component-ish helpers first, atomic overrides after. */

/* .adm-table was referenced by markup for years but never had a rule — its
   cells rendered with browser defaults (zero padding, centred bold headers).
   Now matches the .u-tbl aesthetic used across staff pages. */
.adm-table{width:100%;font-size:var(--text-xs)}
.adm-table th,.adm-table td{padding:6px 8px;text-align:left;
  border-bottom:1px solid var(--line-color)}
.adm-table th{font-size:var(--text-2xs);font-weight:600;color:var(--color-text-muted)}
.adm-table tbody tr:last-child td{border-bottom:none}

/* Row hover affordance on staff tables, matching public tables */
.adm-table tbody tr:hover,.u-tbl tbody tr:hover{background:var(--color-surface-offset)}

/* Compact ad-hoc data table + cell variants */
.u-tbl{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.u-td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line-color)}
.u-tdp{padding:6px 8px;text-align:left}
.u-tds{padding:6px 4px;text-align:left}

/* Form control matching .adm-input, minus font-size (callers vary) */
.u-input{padding:5px 8px;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-surface-2);
  color:var(--color-text);transition:border-color var(--transition)}
.u-input:focus{outline:none;border-color:var(--color-primary)}

/* Checkbox/label rows and mini buttons */
.u-check{display:flex;align-items:center;gap:6px;cursor:pointer}
.u-check-mt{margin-top:18px}
.u-mini{padding:2px 6px;font-size:var(--text-2xs)}

/* Info boxes used in patterns.js */
.u-inset{padding:var(--space-2);background:var(--color-surface-offset);
  border-radius:var(--radius-sm)}
.u-boxed{border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-3)}
.u-note{padding:var(--space-3);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-size:var(--text-xs);color:var(--color-text-muted)}
.u-scrollbox{overflow:auto;border:1px solid var(--line-color);border-radius:8px}
.u-warnbox{font-size:var(--text-xs);color:var(--color-warning,#c90);
  padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:rgba(255,200,0,.06)}

/* Atomic utilities — defined last so they override the helpers above */
.u-flex{display:flex}
.u-flexw{display:flex;flex-wrap:wrap}
.u-block{display:block}
.u-inline{display:inline}
.u-iflex{display:inline-flex;align-items:center}
.u-aic{align-items:center}
.u-top{align-items:flex-start}
.u-self-c{align-self:center}
.u-tal{text-align:left}
.u-tac{text-align:center}
.u-tar{text-align:right}
.u-nw{white-space:nowrap}
.u-prewrap{white-space:pre-wrap}
.u-pointer{cursor:pointer}
.u-noselect{user-select:none}
.u-accent{accent-color:var(--color-primary)}
.u-mono{font-family:ui-monospace,monospace}
.u-wfull{width:100%}
.u-minw-full{min-width:100%}
.u-minw-14r{min-width:14rem}
.u-w70{width:70px}
.u-maxw-80{max-width:80px}
.u-flexb-full{flex:1 1 100%;min-width:100%}
.u-flexb-8r{flex:1;min-width:8rem}
.u-flexb-10r{flex:1;min-width:10rem}
.u-flexb-70{flex:1 1 70px;min-width:70px}
.u-flexb-80{flex:1 1 80px;min-width:80px}
.u-flexb-90{flex:1 1 90px;min-width:90px}
.u-flexb-100{flex:1 1 100px;min-width:100px}
.u-flexb-110{flex:1 1 110px;min-width:110px}
.u-flexb-120{flex:1 1 120px;min-width:120px}
.u-gap-1{gap:var(--space-1)}
.u-gap-2{gap:var(--space-2)}
.u-gap-3{gap:var(--space-3)}
.u-gap-6{gap:6px}
.u-m-0{margin:0}
.u-mt-0{margin-top:0}
.u-mt-1{margin-top:var(--space-1)}
.u-mb-1{margin-bottom:var(--space-1)}
.u-mr-1{margin-right:var(--space-1)}
.u-ml-2{margin-left:var(--space-2)}
.u-my-1{margin:4px 0}
.u-my-3{margin:var(--space-3) 0}
.u-mt-18{margin-top:18px}
.u-p-0{padding:0}
.u-p-2{padding:var(--space-2)}
.u-p-3{padding:var(--space-3)}
.u-p-4{padding:var(--space-4)}
.u-py-1{padding:4px 0}
.u-pt-1{padding-top:4px}
.u-sm{font-size:var(--text-sm)}
.u-base{font-size:var(--text-base)}
.u-md{font-size:var(--text-md)}
.u-lg{font-size:var(--text-lg)}
.u-txt{color:var(--color-text)}
.u-c-ok{color:var(--color-success)}
.u-c-err{color:var(--color-error)}
.u-c-warn{color:var(--color-warning)}
.u-c-pri{color:var(--color-primary)}
.u-surface2{background:var(--color-surface-2)}
.u-bb{border-bottom:1px solid var(--color-divider)}
.u-bt{border-top:1px solid var(--color-divider)}
.u-grid-full{grid-column:1/-1}
.u-cols-160{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.u-cols-120{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

/* ─── Staff topbar density ───────────────────────────────────────────────── */
/* Staff see a 7th primary link (the "Staff" dropdown). Dropping html{zoom:.9}
   cut ~11% of available CSS width, so on a 1920px screen at 125% Windows
   scaling (1536 effective CSS px) the bar can still run short. These rules
   reclaim space progressively, shedding the least useful chrome first
   (wordmark -> account label -> timezone width -> search width -> nav padding)
   so the navigation itself never truncates. Public users keep roomier spacing.
   Selector `body.is-staff, body.is-admin` covers the admin-without-permissions
   edge case the same way the dropdown gate does. */
body.is-staff .app-nav-link,body.is-admin .app-nav-link{padding:0 9px}
body.is-staff .app-nav-link.active::before,body.is-admin .app-nav-link.active::before,
body.is-staff .app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link::before,
body.is-admin  .app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link::before{left:9px;right:9px}
body.is-staff .app-search,body.is-admin .app-search{flex:0 1 240px}

/* ── Staff topbar density rules ────────────────────────────────────────────
   These are topbar-density adjustments only (logo wordmark, account text,
   search width, nav padding), not layout breakpoints. They use the wide-tier
   boundary (1600px) and two intermediate steps (1450, 1320) that predate the
   tier system. They do not affect the content column or the nav-drawer
   boundary, so they are kept as-is rather than forced onto tier boundaries. */
@media (max-width:1600px){  /* wide tier boundary */
  /* Logo mark stays, wordmark goes: the mark alone is still a clear home link */
  body.is-staff .app-logo-text,body.is-admin .app-logo-text{display:none}
}
@media (max-width:1450px){
  body.is-staff .tb-account-text,body.is-admin .tb-account-text{display:none}
  body.is-staff .tb-tz-select,body.is-admin .tb-tz-select{max-width:132px}
}
@media (max-width:1320px){
  body.is-staff .app-search,body.is-admin .app-search{flex:0 1 156px}
  body.is-staff .app-nav-link,body.is-admin .app-nav-link{padding:0 7px;font-size:var(--text-xs)}
  body.is-staff .app-nav-link.active::before,body.is-admin .app-nav-link.active::before,
  body.is-staff .app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link::before,
  body.is-admin  .app-nav-item:has(> .app-nav-dropdown a.active) > .app-nav-link::before{left:7px;right:7px}
  body.is-staff .app-topbar,body.is-admin .app-topbar{gap:var(--space-3)}
  body.is-staff .app-topbar-left,body.is-admin .app-topbar-left{gap:var(--space-3)}
}