/* Stats Room (leagueleverage.com/stats-room, task FM2): the page's styles. The dashboard's own rules are the private
   Film Room's (site/filmroom/from-artifact/index.html), kept as they were; Stats Room's additions are at the end
   (sr-*). Fonts are our own copies (fonts/, SIL Open Font License: fonts/OFL.txt); nothing loads from elsewhere. */
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/stats-room/fonts/Archivo_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("/stats-room/fonts/Archivo_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("/stats-room/fonts/Archivo_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800 900; font-style: normal; font-display: swap; src: url("/stats-room/fonts/BigShouldersDisplay_900Black.ttf") format("truetype"); }
@font-face { font-family: "Questrial"; font-weight: 400; font-style: normal; font-display: swap; src: url("/stats-room/fonts/Questrial_400Regular.ttf") format("truetype"); }

html { background: #090d0c; }
body { margin: 0; background: #090d0c; color: #ecf2ee; font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* LeagueLeverage: one dark world lit by one green. Tokens from the LeagueLeverage design system (tokens.json, synced 2026-10-12).
   Layout: a 18px-gutter dark slab; player card, then tabs; cards on surface with a 1px line, no shadows. */
.fr {
  --ll-bg: #090d0c; --ll-surface: #101715; --ll-surface2: #16201c; --ll-surface3: #1c2823;
  --ll-line: #22302b; --ll-line-soft: #19231f;
  --ll-ink: #ecf2ee; --ll-ink-dim: #9aada5; --ll-ink-faint: #7b8e87;
  --ll-accent: #3fcb93; --ll-accent-soft: rgba(63,203,147,0.12); --ll-accent-border: rgba(63,203,147,0.38); --ll-on-accent: #06120d;
  --ll-up: #3fcb93; --ll-down: #ee7462; --ll-down-soft: rgba(238,116,98,0.12); --ll-down-border: rgba(238,116,98,0.38);
  --ll-amber: #e0a94f; --ll-amber-soft: rgba(224,169,79,0.12); --ll-amber-border: rgba(224,169,79,0.38);
  --ll-gold: #f4c44e; --ll-gold-soft: rgba(244,196,78,0.13); --ll-gold-border: rgba(244,196,78,0.42);
  --ll-bronze: #c98b5e; --ll-silver: #b7c4cd; --ll-hof: #7fd4f5;
  --ll-pos-QB: #d55181; --ll-pos-RB: #3987e5; --ll-pos-WR: #b08a2a; --ll-pos-TE: #9085e9;
  --ll-sans: "Archivo", system-ui, sans-serif; --ll-meta: "Questrial", "Archivo", system-ui, sans-serif; --ll-stadium: "Big Shoulders Display", "Archivo", sans-serif;
  --ll-radius: 12px; --ll-radius-button: 10px; --ll-radius-tag: 5px;
  /* The dashboard's own tokens, pointed at the brand, so the type's states read on this dark slab. */
  --color-fg: var(--ll-ink); --color-fg-muted: var(--ll-ink-dim); --color-bg: var(--ll-bg); --color-panel: var(--ll-surface); --color-border-line: var(--ll-line);
  --color-ok: var(--ll-up); --color-warn: var(--ll-amber); --color-bad: var(--ll-down);
  --cds-surface-popover: var(--ll-surface2); --cds-border: var(--ll-line); --cds-text-secondary: var(--ll-ink-faint);
  --cds-chart-grid: var(--ll-line-soft); --cds-chart-axis: var(--ll-line); --cds-chart-muted: #2e4038; --cds-chart-status-critical: var(--ll-down);
  color-scheme: dark;
  position: relative; display: grid; gap: 24px; margin-inline: auto; box-sizing: border-box;
  background: var(--ll-bg); color: var(--ll-ink); border-radius: var(--ll-radius);
  padding: 22px 18px 32px; font-family: var(--ll-sans); font-size: 14.5px; line-height: 21.5px;
}
.fr * { box-sizing: border-box; }
.fr [hidden] { display: none !important; }
.fr .num, .fr td, .fr .fr-fig, .fr dd { font-variant-numeric: tabular-nums; }
.fr h1, .fr h2, .fr h3, .fr h4 { margin: 0; text-wrap: balance; }
.fr ::selection { background: var(--ll-accent-soft); }
.fr-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.fr-titles { display: grid; gap: 6px; min-width: 0; flex: 1 1 22rem; }
.fr-brand { display: flex; align-items: center; gap: 10px; }
.fr-brand svg { flex: none; }
.fr-eyebrow { font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ll-ink-faint); }
.fr-titles h1 { font: 800 31px/32px var(--ll-stadium); letter-spacing: 0.3px; text-transform: uppercase; color: var(--ll-ink); }
.fr-takeaway { margin: 0; color: var(--ll-ink-dim); max-width: 70ch; }
.fr-takeaway b, .fr-bio b, .fr-hero b { font-weight: 600; color: var(--ll-ink); }
.fr-search { position: relative; flex: 0 1 24rem; min-width: min(100%, 16rem); }
.fr-search input, .fr-select, .fr-filter { width: 100%; min-height: 44px; font: 400 14.5px/20px var(--ll-sans); color: var(--ll-ink); background: var(--ll-surface); border: 1px solid var(--ll-line); border-radius: var(--ll-radius-button); padding: 10px 14px; }
.fr-search input::placeholder, .fr-filter::placeholder { color: var(--ll-ink-faint); }
.fr-search input:focus-visible, .fr-select:focus-visible, .fr-filter:focus-visible, .fr button:focus-visible, .fr .fr-click:focus-visible, .fr canvas:focus-visible { outline: 2px solid var(--ll-accent); outline-offset: 2px; }
.fr-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; background: var(--ll-surface2); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); max-height: 22rem; overflow: auto; }
.fr-results li { display: flex; gap: 8px; align-items: baseline; min-height: 44px; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.fr-results li[aria-selected="true"], .fr-results li:hover { background: var(--ll-surface3); }
.fr-results .fr-r-name { font-weight: 600; }
.fr-results .fr-r-meta { color: var(--ll-ink-faint); font: 400 12px/16.5px var(--ll-meta); margin-left: auto; white-space: nowrap; }
.fr-results .fr-empty { color: var(--ll-ink-faint); cursor: default; }
.fr-card { background: var(--ll-surface); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 16px; display: grid; gap: 10px; min-width: 0; align-content: start; }
.fr-card-h { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.fr-card-h h2, .fr-card-h h3 { font: 700 16.5px/22px var(--ll-sans); letter-spacing: -0.2px; color: var(--ll-ink); }
.fr-note { margin: 0; color: var(--ll-ink-faint); font: 400 12px/17.5px var(--ll-sans); max-width: 80ch; }
.fr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.fr-grid-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* Player card */
.fr-bio { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 760px) { .fr-bio { grid-template-columns: minmax(0, 1fr); } }
.fr-bio-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fr-name-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fr-name { font: 900 40px/42px var(--ll-stadium); letter-spacing: 0.2px; text-transform: uppercase; color: var(--ll-ink); }
.fr-jersey { font: 900 40px/42px var(--ll-stadium); color: var(--ll-ink-faint); }
.fr-poschip { display: inline-flex; align-items: stretch; border-radius: var(--ll-radius-tag); overflow: hidden; background: var(--ll-surface2); border: 1px solid var(--ll-line); font: 700 11px/20px var(--ll-sans); letter-spacing: 0.5px; }
.fr-poschip i { width: 4px; display: block; }
.fr-poschip span { padding: 0 7px; color: var(--ll-ink); }
.fr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font: 600 12px/18px var(--ll-sans); border: 1px solid var(--ll-line); background: var(--ll-surface2); white-space: nowrap; color: var(--ll-ink-dim); }
.fr-pill::before { content: "\25CF"; font-size: 9px; line-height: 1; }
.fr-pill.ok { color: var(--ll-accent); background: var(--ll-accent-soft); border-color: var(--ll-accent-border); }
.fr-pill.warn { color: var(--ll-amber); background: var(--ll-amber-soft); border-color: var(--ll-amber-border); }
.fr-pill.bad { color: var(--ll-down); background: var(--ll-down-soft); border-color: var(--ll-down-border); }
.fr-pill.muted { color: var(--ll-ink-faint); }
.fr-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--ll-ink-faint); font: 400 12px/16.5px var(--ll-meta); letter-spacing: 0.1px; }
.fr-facts li { white-space: nowrap; }
.fr-facts b { font-family: var(--ll-sans); font-weight: 600; color: var(--ll-ink-dim); }
.fr-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.fr-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); background: var(--ll-surface2); min-width: 0; align-content: start; }
.fr-tile .fr-fig { font: 600 22px/28px var(--ll-sans); letter-spacing: -0.4px; color: var(--ll-ink); white-space: nowrap; }
.fr-tile .fr-lab { color: var(--ll-ink-faint); font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; }
.fr-combine { display: grid; gap: 8px; align-content: start; }
.fr-crow { display: grid; grid-template-columns: 6.5rem 3.8rem minmax(0, 1fr) 3rem; gap: 8px; align-items: center; font: 500 12.5px/17px var(--ll-sans); }
.fr-crow .fr-clab { color: var(--ll-ink-dim); font-weight: 400; }
.fr-meter { height: 8px; border-radius: 999px; background: var(--ll-surface3); overflow: hidden; }
.fr-meter > span { display: block; height: 100%; border-radius: 999px; width: var(--w, 0%); }
/* Tabs */
.fr-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--ll-line); }
.fr-tabs button { font: 600 14.5px/20px var(--ll-sans); min-height: 44px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--ll-ink-faint); cursor: pointer; margin-bottom: -1px; transition: color 200ms ease-out, border-color 200ms ease-out; }
.fr-tabs button:hover { color: var(--ll-ink-dim); }
.fr-tabs button[aria-selected="true"] { color: var(--ll-ink); border-bottom-color: var(--ll-accent); }
.fr-page { display: grid; gap: 12px; }
.fr-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fr-chips .fr-chips-lab { color: var(--ll-ink-faint); font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; margin-right: 4px; }
.fr-chip { position: relative; font: 600 12.5px/17px var(--ll-sans); padding: 6px 13px; border-radius: 16px; border: 1px solid var(--ll-line); background: var(--ll-surface); color: var(--ll-ink-dim); cursor: pointer; font-variant-numeric: tabular-nums; }
.fr-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.fr-chip:hover { color: var(--ll-ink); }
.fr-chip:active { opacity: 0.82; }
.fr-chip[aria-pressed="true"] { background: var(--ll-accent-soft); color: var(--ll-accent); border-color: var(--ll-accent-border); }
.fr-chip:disabled { opacity: 0.42; cursor: default; }
.fr-chip .fr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.fr-bar-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Tables */
.fr-scroll { overflow: auto; max-width: 100%; }
.fr-scroll.tall { max-height: 34rem; }
.fr table { border-collapse: collapse; width: 100%; font: 500 12.5px/17px var(--ll-sans); }
.fr th { position: sticky; top: 0; background: var(--ll-surface); z-index: 1; text-align: left; font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ll-ink-faint); padding: 8px; border-bottom: 1px solid var(--ll-line); white-space: nowrap; }
.fr td { padding: 7px 8px; border-bottom: 1px solid var(--ll-line-soft); white-space: nowrap; color: var(--ll-ink-dim); }
.fr td:first-child { color: var(--ll-ink); }
.fr th.num, .fr td.num { text-align: right; }
.fr tbody tr:last-child td { border-bottom: 0; }
.fr tr.fr-click { cursor: pointer; }
.fr tr.fr-click:hover td { background: var(--ll-surface2); }
.fr tr.fr-me td { color: var(--ll-ink); font-weight: 600; background: var(--ll-accent-soft); }
.fr tr.fr-post td:first-child::after { content: " P"; color: var(--ll-ink-faint); font-weight: 400; }
.fr tr.fr-picked td { background: var(--ll-surface3); color: var(--ll-ink); }
.fr td.fr-strong { font-weight: 600; color: var(--ll-ink); }
.fr td .fr-flag { color: var(--ll-amber); }
.fr td .fr-flag.bad { color: var(--ll-down); }
.fr-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.fr th[aria-sort="descending"] .fr-sort, .fr th[aria-sort="ascending"] .fr-sort { color: var(--ll-accent); }
.fr th[aria-sort="descending"] .fr-sort::after { content: " \25BC"; } .fr th[aria-sort="ascending"] .fr-sort::after { content: " \25B2"; }
.fr td.fr-barcell { position: relative; }
.fr td.fr-barcell > i { position: absolute; top: 5px; bottom: 5px; right: 4px; width: var(--w, 0%); max-width: calc(100% - 8px); background: var(--ll-accent-soft); border-radius: 3px; }
.fr td.fr-barcell > span { position: relative; }
.fr-epa { display: inline-grid; grid-template-columns: 3.4rem 4.5rem; gap: 6px; align-items: center; justify-content: end; }
.fr-epa .fr-track { position: relative; height: 8px; }
.fr-epa .fr-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ll-line); }
.fr-epa .fr-track > i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
/* Charts */
.fr-chart { position: relative; min-height: 220px; }
.fr-chart svg { display: block; overflow: visible; }
.fr-tick { fill: var(--ll-ink-faint); font: 400 11px var(--ll-sans); }
.fr-barlabel { fill: var(--ll-ink-dim); font: 600 10.5px var(--ll-sans); }
.fr-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--ll-surface2); border: 1px solid var(--ll-line); border-radius: 10px; padding: 8px 10px; font: 500 12px/17px var(--ll-sans); color: var(--ll-ink); max-width: 18rem; display: grid; gap: 2px; }
.fr-tip .fr-tip-h { color: var(--ll-ink-faint); font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; }
.fr-tip .fr-tip-t { font-weight: 600; white-space: normal; }
.fr-tip .fr-tip-l { display: flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--ll-ink-dim); }
.fr-tip .fr-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.fr-legend { display: flex; gap: 14px; flex-wrap: wrap; font: 400 12px/16.5px var(--ll-meta); color: var(--ll-ink-faint); }
.fr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fr-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fr-legend i.line { height: 2px; border-radius: 1px; }
/* Stat lists */
.fr-kv { display: grid; gap: 0; margin: 0; }
.fr-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ll-line-soft); }
.fr-kv > div:last-child { border-bottom: 0; }
.fr-kv dt { color: var(--ll-ink-dim); font: 400 13px/19px var(--ll-sans); }
.fr-kv dd { margin: 0; font: 600 15.5px/21px var(--ll-sans); color: var(--ll-ink); text-align: right; }
.fr-kv .fr-n { color: var(--ll-ink-faint); font: 400 11.5px/16px var(--ll-sans); min-width: 4.8rem; text-align: right; }
.fr-hero { display: grid; gap: 4px; }
.fr-hero .fr-big { font: 600 40px/46px var(--ll-sans); letter-spacing: -1.2px; color: var(--ll-ink); }
.fr-hero .fr-big small { font: 400 14.5px/21px var(--ll-sans); letter-spacing: 0; color: var(--ll-ink-dim); margin-left: 8px; }
.fr-msg { color: var(--ll-ink-faint); font: 400 12px/17.5px var(--ll-sans); margin: 0; }
.fr-fail { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; color: var(--ll-ink-faint); font: 400 12px var(--ll-sans); }
.fr-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--ll-down); }
/* ⓘ explainers */
.fr-i { position: relative; font: 400 15px/1 var(--ll-sans); width: 20px; height: 20px; border-radius: 50%; border: 0; background: none; color: var(--ll-ink-faint); cursor: pointer; padding: 0; display: inline-grid; place-items: center; vertical-align: middle; margin-left: 2px; flex: none; text-transform: none; letter-spacing: 0; }
.fr-i::after { content: ""; position: absolute; inset: -12px; }
.fr-i:hover { color: var(--ll-accent); }
.fr-pop { position: absolute; z-index: 40; width: min(24rem, calc(100% - 16px)); background: var(--ll-surface2); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 14px 16px; display: grid; gap: 4px; }
.fr-pop h4 { margin: 4px 0 0; font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ll-ink-faint); }
.fr-pop p { margin: 0 0 4px; color: var(--ll-ink-dim); font: 400 13px/19px var(--ll-sans); }
.fr-pop .fr-pop-x { justify-self: end; font: 600 12.5px var(--ll-sans); background: none; border: 0; color: var(--ll-accent); cursor: pointer; padding: 6px 0; min-height: 32px; }
.fr-timeline td.fr-kind { font-weight: 600; }
.fr-timeline td.fr-wrap { white-space: normal; min-width: 14rem; }
/* The timeline strip */
.fr-flow { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--ll-line-soft); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(90% 70% at 50% 38%, rgba(63,203,147,0.10) 0%, rgba(63,203,147,0.02) 45%, transparent 70%), linear-gradient(180deg, #0c1311 0%, var(--ll-bg) 100%); }
.fr-flow.dragging { cursor: grabbing; }
.fr-flow:focus-visible { outline: 2px solid var(--ll-accent); outline-offset: 2px; }
.fr-flow-floor { position: absolute; left: -30%; right: -30%; pointer-events: none; transform: perspective(420px) rotateX(60deg); transform-origin: 50% 100%;
  background-image: linear-gradient(to right, rgba(63,203,147,0.13) 1px, transparent 1px), linear-gradient(to bottom, rgba(63,203,147,0.08) 1px, transparent 1px); background-size: 64px 30px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 85%, transparent 100%); }
.fr-flow-main { position: absolute; left: 0; top: 0; overflow: visible; }
.fr-flow-cards { position: absolute; inset: 0; pointer-events: none; }
.fr-flow-card { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); background: rgba(22,32,28,0.94); border: 1px solid var(--ll-line); border-radius: 10px; pointer-events: auto; cursor: pointer; }
.fr-flow-card::after { content: ""; position: absolute; left: calc(var(--px, 50%) - 6px); bottom: -7px; width: 11px; height: 11px; background: rgba(22,32,28,0.98); border-right: 1px solid var(--ll-line); border-bottom: 1px solid var(--ll-line); transform: rotate(45deg); }
.fr-flow-card:hover { border-color: #2f4139; }
.fr-flow-card.on { border-color: var(--c); }
.fr-flow-card.on::after { border-color: var(--c); }
.fr-flow-strip { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px 0 0 9px; color: var(--c); }
.fr-flow-strip::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0.14; }
.fr-flow-strip span { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 9.5px/1 var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.fr-flow-body { display: grid; align-content: start; gap: 2px; padding: 10px 12px; min-width: 0; overflow: hidden; }
.fr-flow-title { font: 600 13.5px/18px var(--ll-sans); color: var(--ll-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fr-flow-sub { font: 400 11.5px/16px var(--ll-meta); color: var(--ll-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-flow-rule { height: 1px; background: var(--ll-line); margin: 5px 0 4px; }
.fr-flow-detail { font: 400 12px/16.5px var(--ll-sans); color: var(--ll-ink-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fr-flow-mini { position: absolute; left: 0; cursor: pointer; overflow: visible; }
.fr-flow-ui { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; gap: 6px; align-items: center; }
.fr-flow-ui button { position: relative; font: 600 13px/16px var(--ll-sans); min-width: 36px; min-height: 34px; padding: 6px 10px; border-radius: var(--ll-radius-button); border: 1px solid var(--ll-line); background: var(--ll-surface); color: var(--ll-ink-dim); cursor: pointer; }
.fr-flow-ui button::after { content: ""; position: absolute; inset: -5px -2px; }
.fr-flow-ui button:hover { color: var(--ll-ink); }
.fr-flow-ui button:disabled { opacity: 0.42; cursor: default; }
.fr-flow-hint { margin-left: 8px; font: 400 12px/16px var(--ll-meta); color: var(--ll-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .fr-flow-hint { display: none; } }
.fr-flow-tick { fill: var(--ll-ink-faint); font: 400 11px var(--ll-sans); }
.fr-flow-major { fill: var(--ll-ink-dim); font: 800 15px var(--ll-stadium); letter-spacing: 0.5px; text-transform: uppercase; }
.fr-flow-center { fill: var(--ll-ink); fill-opacity: 0.08; font: 900 44px var(--ll-stadium); text-transform: uppercase; letter-spacing: 0.5px; }
.fr-flow-band { fill: var(--ll-accent); fill-opacity: 0.6; font: 700 10px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; }
.fr-flow-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ll-ink-faint); font: 400 12px var(--ll-sans); background: rgba(9,13,12,0.6); }
.fr-pick { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--ll-radius); background: var(--ll-surface2); border: 1px solid var(--ll-line); min-height: 76px; align-content: start; }
.fr-pick .fr-pick-k { font: 700 10.5px/14px var(--ll-sans); letter-spacing: 1px; text-transform: uppercase; }
.fr-pick .fr-pick-t { font: 600 14.5px/21px var(--ll-sans); color: var(--ll-ink); }
.fr-pick .fr-pick-d { font: 400 13px/19px var(--ll-sans); color: var(--ll-ink-dim); }
@media (prefers-reduced-motion: no-preference) {
  .fr-anim rect.fr-bar { animation: fr-grow 650ms cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; transform-box: fill-box; }
  @keyframes fr-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* ---- Stats Room's own (sr-*) ---- */
.fr { max-width: 1360px; margin-block: 24px; border-radius: 0; }
.fr a { color: var(--ll-accent); }
.sr-skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--ll-surface2) 0%, var(--ll-surface3) 50%, var(--ll-surface2) 100%); background-size: 200% 100%; min-height: 1rem; }
.fr-chart.sr-skeleton, .fr-tiles.sr-skeleton, .fr-hero.sr-skeleton, .fr-kv.sr-skeleton, .fr-grid.sr-skeleton { min-height: 120px; }
table.sr-skeleton { display: block; min-height: 160px; }
.sr-sk-name { height: 2.2rem; width: 60%; }
.sr-sk-line { height: 1rem; width: 85%; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .sr-skeleton { animation: sr-shine 1.4s ease-in-out infinite; } @keyframes sr-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } } }
.sr-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fr .sr-brand-link { color: var(--ll-ink-faint); }
.sr-brand-link img { border-radius: 7px; }
/* The sentence each tab opens with: the first thing a beginner reads. */
.sr-lead { margin: 0; font: 600 18px/26px var(--ll-sans); color: var(--ll-ink); max-width: 72ch; text-wrap: pretty; }
/* Where each table or chart's numbers come from: small and quiet. */
.sr-credit { margin: 2px 0 0; color: var(--ll-ink-faint); font: 400 11px/15px var(--ll-meta); letter-spacing: 0.1px; }
.sr-share { font: 600 13px/18px var(--ll-sans); min-height: 36px; padding: 8px 14px; border-radius: var(--ll-radius-button); border: 1px solid var(--ll-accent-border); background: var(--ll-accent-soft); color: var(--ll-accent); cursor: pointer; white-space: nowrap; }
.sr-share:hover { background: rgba(63,203,147,0.2); }
.fr-name-row .sr-share { margin-left: auto; }
.sr-share-row { display: flex; justify-content: flex-end; min-height: 36px; }
.sr-start { gap: 12px; }
.sr-start h2 { font: 700 20px/26px var(--ll-sans); }
.sr-start .fr-chips a { text-decoration: none; color: var(--ll-ink); }
.sr-hook { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 8px 0 0; padding: 14px 16px; border: 1px solid var(--ll-line-soft); border-radius: var(--ll-radius); color: var(--ll-ink-dim); font: 400 13.5px/20px var(--ll-sans); }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: var(--ll-radius-button); background: var(--ll-accent); color: var(--ll-on-accent) !important; font: 700 14px/20px var(--ll-sans); text-decoration: none; white-space: nowrap; }
.sr-foot { margin: 0; color: var(--ll-ink-faint); font: 400 12px/18px var(--ll-meta); }
.sr-foot a { color: var(--ll-ink-dim); }

/* Under about 900 px: the friendly panel instead of the dashboard (the script asks the API nothing there). */
.sr-small { display: none; }
@media (max-width: 899.98px) {
  .fr { display: none; }
  .sr-small { display: grid; gap: 18px; box-sizing: border-box; max-width: 32rem; margin: 0 auto; padding: 40px 16px 48px; color: #ecf2ee; font: 400 16px/24px "Archivo", system-ui, sans-serif; }
  .sr-small h1 { margin: 0; font: 900 40px/42px "Big Shoulders Display", "Archivo", sans-serif; text-transform: uppercase; letter-spacing: 0.2px; }
  .sr-small p { margin: 0; color: #9aada5; overflow-wrap: break-word; }
  .sr-small .sr-btn { justify-self: start; background: #3fcb93; color: #06120d !important; border-radius: 10px; font: 700 15px/20px "Archivo", system-ui, sans-serif; min-height: 44px; padding: 11px 18px; }
  .sr-small .sr-brand-link { color: #7b8e87; font: 700 12px/16px "Archivo", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
}