/* FFWB site styles. Brand: the matchday roundel, in navy, claret, cream and gold, with Oswald headings. */

  :root {
    --color-bg: #f4efe4; --color-panel: #fffdf8; --color-fg: #17213a; --color-fg-muted: #5d6478;
    --color-border-line: #e2d9c7; --color-bad: #b3372b;
    --series-1: #1c2945; --series-2: #8a2433; --series-3: #a8822f; --series-4: #2a7f86;
    --series-5: #3f7a4a; --series-6: #6b4f9a; --series-7: #c0632a; --series-8: #7a8296;
    --cds-chart-muted: #cfc6b4; --cds-surface-popover: #fffdf8; --cds-border: #d8cfbc;
    --cds-shadow-popover: 0 6px 20px rgba(23, 33, 58, 0.16); --cds-text-secondary: #5d6478;
    --brand-navy: #1c2945; --brand-claret: #7b1f2c; --brand-cream: #f1e8d4; --brand-gold: #c8a04a; --brand-ink: #0f1626;
    --cds-radius: 10px; --cds-dur-slow: 0.25s;
    --cds-gap-xs: 0.25rem; --cds-gap-sm: 0.5rem; --cds-gap-md: 1rem; --cds-gap-lg: 1.5rem;
    --cds-pad-xs: 0.375rem; --cds-pad-sm: 0.75rem; --cds-pad-lg: 1.25rem;
    --cds-font-size-caption: 0.8125rem; --cds-font-size-body: 0.9375rem; --cds-font-size-heading: 1.0625rem; --cds-font-size-title: 1.875rem;
    --cds-font-weight-medium: 600;
    --font-anthropic-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-anthropic-serif: 'Oswald', 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: #0f1526; --color-panel: #182038; --color-fg: #f1e8d4; --color-fg-muted: #a9adbd;
      --color-border-line: #2b3453; --color-bad: #f08a7c;
      --series-1: #e2c77f; --series-2: #e8808c; --series-3: #9db8ef; --series-4: #6cc9cd;
      --series-5: #8fcf98; --series-6: #b9a2e6; --series-7: #f0a160; --series-8: #b7bdd0;
      --cds-chart-muted: #3a4363; --cds-surface-popover: #1d2642; --cds-border: #353f60;
      --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.5); --cds-text-secondary: #a9adbd;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --color-bg: #0f1526; --color-panel: #182038; --color-fg: #f1e8d4; --color-fg-muted: #a9adbd;
      --color-border-line: #2b3453; --color-bad: #f08a7c;
      --series-1: #e2c77f; --series-2: #e8808c; --series-3: #9db8ef; --series-4: #6cc9cd;
      --series-5: #8fcf98; --series-6: #b9a2e6; --series-7: #f0a160; --series-8: #b7bdd0;
      --cds-chart-muted: #3a4363; --cds-surface-popover: #1d2642; --cds-border: #353f60;
      --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.5); --cds-text-secondary: #a9adbd;
    color-scheme: dark;
  }
  body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
  .ffwb-shell { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); padding-block: 1.5rem 3rem; }

  /* Layout: a short header, two tabs (this season, all-time), cards in a wrapping grid. */
  .ffwb {
    --ffwb-a: var(--color-fg);
    --ffwb-loss: var(--cds-chart-muted, var(--color-border-line));
    display: flex; flex-direction: column; gap: var(--cds-gap-lg, 1.5rem);
    font-family: var(--font-anthropic-sans); color: var(--color-fg);
    font-size: var(--cds-font-size-body); font-variant-numeric: tabular-nums;
  }
  .ffwb [hidden] { display: none !important; }
  .ffwb-title { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); text-wrap: balance; }
  .ffwb-take { margin: var(--cds-gap-xs, 0.25rem) 0 0; max-width: 70ch; color: var(--color-fg-muted); line-height: 1.5; }
  .ffwb-take .ffwb-fig { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }

  .ffwb-tabs { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs, 0.25rem); border-bottom: 1px solid var(--color-border-line); }
  .ffwb-tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: var(--cds-pad-xs, 0.375rem) var(--cds-pad-sm, 0.75rem); font: inherit; color: var(--color-fg-muted); cursor: pointer;
  }
  .ffwb-tab:hover { color: var(--color-fg); }
  .ffwb-tab[aria-selected="true"] { color: var(--color-fg); border-bottom-color: var(--ffwb-a); font-weight: var(--cds-font-weight-medium); }
  .ffwb-tab:focus-visible { outline: 2px solid var(--ffwb-a); outline-offset: 2px; }

  .ffwb-page { display: flex; flex-direction: column; gap: var(--cds-gap-md, 1rem); }
  .ffwb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--cds-gap-md, 1rem); }
  .ffwb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cds-gap-md, 1rem); }
  .ffwb-card {
    display: flex; flex-direction: column; gap: var(--cds-gap-sm, 0.5rem); min-width: 0;
    background: var(--color-panel); border: 1px solid var(--color-border-line);
    border-radius: var(--cds-radius); padding: var(--cds-pad-lg, 1.25rem);
  }
  .ffwb-kpi-label { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-kpi-value { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.1; }
  .ffwb-kpi-sub { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); line-height: 1.4; }
  .ffwb-h { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
  .ffwb-note { margin: 0; max-width: 75ch; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); line-height: 1.5; }
  .ffwb-muted { color: var(--color-fg-muted); }
  .ffwb-num { text-align: right; }
  .ffwb-center { text-align: center; }
  .ffwb-strong { font-weight: var(--cds-font-weight-medium); }

  .ffwb-chart { position: relative; }
  .ffwb-plot { min-height: 6rem; min-width: 0; overflow-x: auto; }
  .ffwb-plot.ffwb-tall { max-height: 30rem; overflow: auto; }
  .ffwb [data-dash-source-state="refreshing"] { opacity: 0.5; transition: opacity var(--cds-dur-slow, 0.3s); }
  .ffwb [data-dash-source-state="empty"] { color: transparent; }
  .ffwb-failed { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 6rem; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-failed-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--color-bad); }

  .ffwb-table { width: 100%; border-collapse: collapse; }
  .ffwb-table th {
    position: sticky; top: 0; background: var(--color-panel); text-align: left; white-space: nowrap;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--color-border-line);
    color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); font-weight: var(--cds-font-weight-medium);
  }
  .ffwb-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
  .ffwb-table tr:last-child td { border-bottom: 0; }
  .ffwb-table th.ffwb-num, .ffwb-table td.ffwb-num { text-align: right; }

  .ffwb-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md, 1rem); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
  .ffwb-swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; }
  .ffwb-w { background: var(--ffwb-a); color: var(--color-bg); }
  .ffwb-d { background: color-mix(in srgb, var(--ffwb-a) 40%, transparent); color: var(--color-fg); }
  .ffwb-l { background: var(--ffwb-loss); color: var(--color-fg-muted); }
  .ffwb-none { background: transparent; }

  .ffwb-colhead { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); font-weight: var(--cds-font-weight-medium); padding-bottom: 0.25rem; }
  .ffwb-rowlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .ffwb-clubs { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(4rem, 1fr) 3.25rem 4.75rem; column-gap: 0.75rem; row-gap: 0.4rem; align-items: center; }
  .ffwb-track { display: grid; grid-template-columns: minmax(0, 1fr) 1.75rem; align-items: center; gap: 0.4rem; cursor: default; }
  .ffwb-bar { display: flex; height: 0.9rem; min-width: 2px; border-radius: 4px; overflow: hidden; }
  .ffwb-bar span { flex: 0 0 0; min-width: 0; }
  .ffwb-barlabel { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); text-align: right; }

  .ffwb-locks { display: grid; column-gap: 0.25rem; row-gap: 0.3rem; align-items: center; }
  .ffwb-sq { height: 1.4rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: var(--cds-font-size-caption); cursor: default; }

  .ffwb-used, .ffwb-finish { display: grid; gap: 2px; align-items: stretch; }
  .ffwb-used { min-width: 36rem; }
  .ffwb-finish { min-width: 27rem; }
  .ffwb-used .ffwb-rowlabel, .ffwb-finish .ffwb-rowlabel { align-self: center; padding-right: 0.5rem; }
  .ffwb-vhead { display: flex; align-items: flex-end; justify-content: center; height: 6.5rem; padding-bottom: 0.25rem; }
  .ffwb-vhead span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-cell { display: flex; align-items: center; justify-content: center; height: 1.6rem; border-radius: 3px; font-size: var(--cds-font-size-caption); cursor: default; }
  .ffwb-zero { color: var(--color-fg-muted); }
  .ffwb-met { background: var(--ffwb-a); color: var(--color-bg); font-weight: var(--cds-font-weight-medium); }
  .ffwb-total { margin-top: 0.35rem; font-weight: var(--cds-font-weight-medium); }
  .ffwb-total.ffwb-cell { border-top: 1px solid var(--color-border-line); border-radius: 0; }

  .ffwb-h2h { display: grid; gap: 2px; align-items: stretch; min-width: 40rem; }
  .ffwb-h2h .ffwb-rowlabel { align-self: center; padding-right: 0.5rem; }

  .ffwb-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--cds-gap-md, 1rem); }
  .ffwb-award {
    display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
    background: var(--color-panel); border: 1px solid var(--color-border-line);
    border-radius: var(--cds-radius); padding: var(--cds-pad-lg, 1.25rem);
  }
  .ffwb-award-title { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-award-name { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.15; overflow-wrap: anywhere; }
  .ffwb-award-detail { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); line-height: 1.4; }
  .ffwb-plain { min-height: 0; overflow: visible; }
  .ffwb-plain.dash-skeleton { min-height: 6rem; }

  .ffwb-race { display: block; overflow: visible; }
  .ffwb-race-axis text { fill: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-race-label { fill: var(--color-fg); font-size: var(--cds-font-size-caption); }
  .ffwb-race-pts { fill: var(--color-fg-muted); }
  .ffwb-racer-top .ffwb-race-label { font-weight: var(--cds-font-weight-medium); }
  .ffwb-racer { transition: opacity var(--cds-dur-slow, 0.3s); }
  .ffwb-race:has(.ffwb-racer:hover) .ffwb-racer:not(:hover) { opacity: 0.2; }

  .ffwb-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .ffwb-pill {
    appearance: none; font: inherit; font-size: var(--cds-font-size-caption); cursor: pointer;
    padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-border-line);
    background: var(--color-panel); color: var(--color-fg);
  }
  .ffwb-pill:hover { border-color: var(--ffwb-a); }
  .ffwb-pill[aria-pressed="true"] { background: var(--ffwb-a); border-color: var(--ffwb-a); color: var(--color-bg); font-weight: var(--cds-font-weight-medium); }
  .ffwb-pill:focus-visible, .ffwb-copy:focus-visible { outline: 2px solid var(--ffwb-a); outline-offset: 2px; }

  .ffwb-pc { display: flex; flex-direction: column; gap: var(--cds-gap-md, 1rem); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg, 1.25rem); }
  .ffwb-pc-name { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: calc(var(--cds-font-size-title) * 1.25); line-height: 1.1; }
  .ffwb-pc-sub { margin-top: 0.3rem; color: var(--color-fg-muted); }
  .ffwb-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--cds-gap-md, 1rem); border-top: 1px solid var(--color-border-line); padding-top: var(--cds-gap-md, 1rem); }
  .ffwb-pc-label { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-pc-value { margin-top: 0.15rem; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); line-height: 1.3; overflow-wrap: anywhere; }

  .ffwb-recap { margin: 0; max-width: 75ch; line-height: 1.6; user-select: all; }
  .ffwb-copy {
    appearance: none; align-self: flex-start; font: inherit; font-size: var(--cds-font-size-caption); cursor: pointer;
    padding: 0.3rem 0.75rem; border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg);
  }
  .ffwb-copy:hover { border-color: var(--ffwb-a); }
  .ffwb-table tr.ffwb-herd-row td { font-weight: var(--cds-font-weight-medium); background: color-mix(in srgb, var(--ffwb-a) 10%, transparent); }
  .ffwb-table td.ffwb-wrap { white-space: normal; min-width: 12rem; }

  .ffwb-tip {
    position: absolute; z-index: 2; pointer-events: none; max-width: 16rem;
    background: var(--cds-surface-popover, var(--color-panel)); border: 1px solid var(--cds-border, var(--color-border-line));
    border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover);
    padding: var(--cds-pad-xs, 0.375rem) var(--cds-pad-sm, 0.75rem); font-size: var(--cds-font-size-caption); line-height: 1.45;
  }
  .ffwb-tip-head { color: var(--cds-text-secondary, var(--color-fg-muted)); }

  /* Standalone touches: scoreboard lettering for the big figures. */
  .ffwb { line-height: 1.4; }
  .ffwb-title { font-size: 2.5rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
  .ffwb-asof { margin: 0.35rem 0 0; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-kpi-value, .ffwb-award-name, .ffwb-pc-name { font-weight: 600; letter-spacing: 0.01em; }
  .ffwb-h { letter-spacing: 0.005em; }
  .ffwb-l { color: var(--color-fg); }
  .ffwb-tab { font-size: var(--cds-font-size-body); }

  [hidden] { display: none !important; }
  img { max-width: 100%; }

  /* Site header links */
  .ffwb-toplinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
  .ffwb-cta {
    appearance: none; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    padding: 0.55rem 1rem; border-radius: var(--cds-radius); border: 1px solid var(--series-1); background: var(--series-1); color: var(--color-bg);
  }
  .ffwb-cta:hover { filter: brightness(1.08); }
  .ffwb-cta:focus-visible, .pk-tile:focus-visible, .pk-step:focus-visible, .pk-save:focus-visible, .pk-clear:focus-visible, .res-btn:focus-visible, .pk-weekdot:focus-visible { outline: 2px solid var(--series-3); outline-offset: 2px; }
  .ffwb-quiet { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .ffwb-quiet a { color: inherit; }
  .ffwb-tab-accent { color: var(--series-1); font-weight: 600; }
  .ffwb-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-line); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
  .ffwb-footer a { color: inherit; }

  /* Picks editor */
  .pk-editor { gap: var(--cds-gap-md); }
  .pk-label { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin-bottom: 0.4rem; }
  .pk-weekbar { display: flex; align-items: center; gap: 0.75rem; }
  .pk-step { appearance: none; font: inherit; font-size: 1.4rem; line-height: 1; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); cursor: pointer; }
  .pk-step:disabled { opacity: 0.35; cursor: default; }
  .pk-weektitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; min-width: 0; }
  .pk-weekname { font-family: var(--font-anthropic-serif); font-size: 1.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
  .pk-chip { font-size: var(--cds-font-size-caption); padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border-line); color: var(--color-fg-muted); }
  .pk-chip-open { border-color: var(--series-1); color: var(--series-1); font-weight: 600; }
  .pk-help { margin: 0; }
  .pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; }
  .pk-tile {
    appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; min-height: 4.6rem;
    padding: 0.6rem 0.7rem; border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg);
    transition: border-color 0.15s, background 0.15s;
  }
  .pk-tile:hover:not(:disabled) { border-color: var(--series-1); }
  .pk-tile:disabled { cursor: default; opacity: 0.85; }
  .pk-tile-name { font-weight: 600; line-height: 1.2; }
  .pk-tile-meta { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
  .pk-tile-badge { align-self: flex-start; margin-top: auto; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; }
  .pk-tile-pick { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 14%, var(--color-panel)); }
  .pk-tile-lock { border: 2px solid var(--series-2); background: color-mix(in srgb, var(--series-2) 16%, var(--color-panel)); }
  .pk-badge-pick { background: var(--series-1); color: var(--color-bg); }
  .pk-badge-lock { background: var(--series-2); color: var(--color-bg); }
  .pk-badge-need { background: color-mix(in srgb, var(--series-5) 22%, transparent); color: var(--color-fg); }
  .pk-W { background: var(--series-1); color: var(--color-bg); }
  .pk-D { background: color-mix(in srgb, var(--series-1) 35%, transparent); color: var(--color-fg); }
  .pk-L { background: var(--cds-chart-muted); color: var(--color-fg); }
  .pk-P { background: color-mix(in srgb, var(--series-5) 30%, transparent); color: var(--color-fg); }
  .pk-none { background: transparent; }
  .pk-status { display: flex; flex-direction: column; gap: 0.4rem; }
  .pk-errors { margin: 0; padding-left: 1.2rem; color: var(--color-bad); }
  .pk-good { color: var(--series-1); }
  .pk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .pk-save, .pk-clear {
    appearance: none; font: inherit; font-weight: 600; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: var(--cds-radius);
  }
  .pk-save { border: 1px solid var(--series-1); background: var(--series-1); color: var(--color-bg); }
  .pk-save:disabled { opacity: 0.4; cursor: default; }
  .pk-clear { border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); font-weight: 500; }
  .pk-override { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--cds-font-size-caption); color: var(--color-bad); }
  .pk-message { margin: 0; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); min-height: 1.2em; }
  .pk-message-ok { color: var(--series-1); font-weight: 600; }
  .pk-message-bad { color: var(--color-bad); font-weight: 600; }
  .pk-message-warn { color: var(--series-2); font-weight: 600; }
  .pk-everyone { margin-top: var(--cds-gap-md); }
  .pk-table td { vertical-align: top; }
  .pk-table td:first-child { width: 1%; white-space: nowrap; }
  .pk-picks { white-space: normal !important; }
  .pk-tag { display: inline-block; margin: 0 0.25rem 0.25rem 0; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--cds-font-size-caption); border: 1px solid var(--color-border-line); }
  .pk-locktag { font-weight: 700; border-color: var(--series-2); }
  .pk-efltag { font-style: italic; border-style: dashed; }
  .pk-efl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-top: 0.7rem; padding: 0.55rem 0.7rem; border: 1px dashed var(--color-border-line); border-radius: var(--cds-radius); }
  .pk-efl[hidden] { display: none; }
  .pk-efl-label { font-weight: 700; }
  .pk-efl-select { min-width: 12rem; max-width: 100%; }
  .pk-efl-result { flex: 1 1 14rem; margin: 0; }
  .pk-efl-done { flex: 0 0 auto; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; }
  .ffwb-table tr.pk-me td { background: color-mix(in srgb, var(--series-1) 8%, transparent); }

  /* Commissioner */
  .adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--cds-gap-md); align-items: start; }
  .adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
  .adm-input { font: inherit; padding: 0.55rem 0.75rem; border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg); min-width: 0; width: 14rem; max-width: 100%; }
  .res-list { display: flex; flex-direction: column; gap: 0.35rem; }
  .res-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border-line); }
  .res-club { min-width: 0; }
  .res-picked { font-size: var(--cds-font-size-caption); }
  .res-btns { display: flex; gap: 0.3rem; }
  .res-btn { appearance: none; font: inherit; font-weight: 600; width: 2.4rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg-muted); cursor: pointer; }
  .res-btn[aria-pressed="true"].res-W { background: var(--series-1); border-color: var(--series-1); color: var(--color-bg); }
  .res-btn[aria-pressed="true"].res-D { background: color-mix(in srgb, var(--series-1) 40%, var(--color-panel)); border-color: var(--series-1); color: var(--color-fg); }
  .res-btn[aria-pressed="true"].res-L { background: var(--cds-chart-muted); border-color: var(--cds-chart-muted); color: var(--color-fg); }
  .res-btn[aria-pressed="true"].res-P { background: color-mix(in srgb, var(--series-5) 40%, var(--color-panel)); border-color: var(--series-5); color: var(--color-fg); }
  .pk-weekdots { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr)); gap: 0.3rem; }
  .pk-weekdot { appearance: none; font: inherit; font-size: var(--cds-font-size-caption); height: 2.1rem; border-radius: 8px; border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg); cursor: pointer; }
  .pk-weekdot-done { background: color-mix(in srgb, var(--series-1) 18%, var(--color-panel)); }
  .pk-weekdot-past { color: var(--color-fg-muted); }
  .pk-weekdot-locked { background: var(--series-2); border-color: var(--series-2); color: var(--color-bg); font-weight: 600; }
  .pk-weekdot-kicked { background: var(--cds-chart-muted); border-color: var(--cds-chart-muted); color: var(--color-fg); }
  .pk-weekdot-reopened { border: 2px solid var(--series-2); font-weight: 600; }
  .adm-backup-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .adm-backup { font-size: var(--cds-font-size-caption); padding: 0.3rem 0.65rem; }
  .pk-weekdot-efl { background: var(--series-3); border-color: var(--series-3); color: var(--color-bg); font-weight: 600; }
  .adm-textarea { display: block; box-sizing: border-box; width: 100%; margin: 0.5rem 0; resize: vertical; }
  .res-efl { margin-top: 0.8rem; }
  .ffwb-table td.ffwb-wrap { white-space: normal; }
  .pk-bonus { padding: 0.6rem 0.8rem; border-radius: var(--cds-radius); background: color-mix(in srgb, var(--series-1) 14%, var(--color-panel)); border: 1px solid var(--series-1); font-weight: 600; }
  .res-feed { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.8rem; border-radius: var(--cds-radius); background: var(--color-bg); border: 1px dashed var(--color-border-line); }
  .res-feed p { margin: 0; }
  .res-feed-line { font-size: var(--cds-font-size-caption); }
  .res-tag { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--series-3) 18%, transparent); color: var(--color-fg); }
  .res-tag-warn { background: color-mix(in srgb, var(--color-bad) 18%, transparent); }

  /* ---------- Simplified layout (Oct 2026) ---------- */
  .ffwb-shell { padding-block: 1rem 2.5rem; }
  .ffwb { gap: var(--cds-gap-md); }
  .ffwb-topbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
  .ffwb-topbar .ffwb-title { font-size: 1.75rem; }
  .ffwb-headline { margin: 0; color: var(--color-fg-muted); }
  .ffwb-headline .ffwb-fig { color: var(--color-fg); font-weight: 600; }
  .ffwb-offline { margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--cds-radius); background: color-mix(in srgb, var(--color-bad) 14%, var(--color-panel)); color: var(--color-fg); font-size: var(--cds-font-size-caption); }
  .ffwb-tabs { gap: 0.25rem; }
  .ffwb-tab { padding: 0.5rem 1rem; font-weight: 500; }
  .ffwb-tab[aria-selected="true"] { font-weight: 700; }
  .ffwb-page { gap: var(--cds-gap-md); }
  .ffwb-card { padding: 1rem; gap: 0.5rem; }
  .ffwb-section { margin: 0.5rem 0 0; }
  .ffwb-cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .ffwb-select { font: inherit; padding: 0.45rem 2rem 0.45rem 0.75rem; border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); min-width: 0; max-width: 100%; }
  .ffwb-select:focus-visible { outline: 2px solid var(--series-3); outline-offset: 2px; }

  /* (i) buttons that open a card's explanation */
  .ffwb-info { appearance: none; margin-left: 0.4rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--color-border-line); background: transparent; color: var(--color-fg-muted); font: 600 0.7rem/1 var(--font-anthropic-serif); font-style: italic; cursor: pointer; vertical-align: 0.15em; padding: 0; }
  .ffwb-info[aria-expanded="true"] { background: var(--color-fg-muted); color: var(--color-bg); }
  .ffwb-info:focus-visible { outline: 2px solid var(--series-3); outline-offset: 2px; }

  /* Fold-out sections */
  .ffwb-more { border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-panel); }
  .ffwb-more > summary, .ffwb-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.25rem; }
  .ffwb-more > summary { padding: 0.75rem 1rem; font-weight: 600; }
  .ffwb-more > summary::-webkit-details-marker, .ffwb-fold > summary::-webkit-details-marker { display: none; }
  .ffwb-more > summary::after, .ffwb-fold > summary::after { content: '+'; margin-left: auto; color: var(--color-fg-muted); font-weight: 400; font-size: 1.2rem; line-height: 1; }
  .ffwb-more[open] > summary::after, .ffwb-fold[open] > summary::after { content: '−'; }
  .ffwb-more-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: var(--cds-gap-md); }
  .ffwb-more-body.ffwb-two { display: grid; }
  .ffwb-fold:not([open]) { gap: 0; }
  .ffwb-subtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .ffwb-sub { display: flex; flex-direction: column; gap: var(--cds-gap-md); }

  /* Compact award cards */
  .ffwb-wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; }
  .ffwb-award { padding: 0.75rem; gap: 0.15rem; }
  .ffwb-award-name { font-size: 1.35rem; }
  .ffwb-recap { font-size: var(--cds-font-size-body); }
  .ffwb-copy { align-self: auto; }

  /* Picks page */
  .pk-editor { gap: 0.75rem; }
  .pk-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
  .pk-name { font-weight: 600; min-width: 11rem; }
  .pk-weekbar { gap: 0.5rem; }
  .pk-step { width: 2.1rem; height: 2.1rem; font-size: 1.2rem; }
  .pk-weekname { font-size: 1.35rem; }
  .pk-helprow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
  .pk-how > summary { cursor: pointer; color: var(--series-3); text-decoration: underline; }
  .pk-how[open] { flex-basis: 100%; }
  .pk-how p { margin: 0.4rem 0 0; }
  .pk-bonus { padding: 0.45rem 0.7rem; font-size: var(--cds-font-size-caption); }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.4rem; }
  .pk-tile { min-height: 3.6rem; padding: 0.45rem 0.55rem; gap: 0.1rem; border-radius: 8px; }
  .pk-tile-name { font-size: 0.9rem; }
  .pk-tile-meta { font-size: 0.72rem; }
  .pk-tile-short { color: var(--series-2); font-weight: 600; }
  .pk-tile-badge { font-size: 0.68rem; }
  .pk-errors:empty { display: none; }
  .pk-bar {
    position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0.6rem;
    margin: 0 -1rem -1rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-panel); border-top: 1px solid var(--color-border-line); border-radius: 0 0 var(--cds-radius) var(--cds-radius);
  }
  .pk-bartext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
  .pk-count { font-weight: 600; font-size: var(--cds-font-size-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-count-ok { color: var(--series-1); }
  .pk-count-ok::after { content: ' ✓'; }
  .pk-bar .pk-message { min-height: 0; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-bar .pk-clear { padding: 0.55rem 0.8rem; }
  .pk-bar .pk-save { padding: 0.6rem 1.1rem; }
  .pk-everyone { margin-top: 0; }
  .pk-everyone > .ffwb-plot { padding: 0 1rem 1rem; }

  /* Commissioner */
  @media (min-width: 900px) {
    #results-card .res-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  }
  .adm-fold > summary { font-size: var(--cds-font-size-heading); }

  /* Phones: the tabs become a bar fixed to the bottom of the screen. */
  @media (max-width: 640px) {
    .ffwb-shell { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
    .ffwb-topbar .ffwb-title { font-size: 1.5rem; }
    .ffwb-headline { font-size: var(--cds-font-size-caption); }
    .ffwb-tabs {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; flex-wrap: nowrap; gap: 0;
      background: var(--color-panel); border-top: 1px solid var(--color-border-line); border-bottom: 0;
      padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    }
    .ffwb-tab { flex: 1; padding: 0.85rem 0.25rem; margin: 0; border-bottom: 0; border-top: 3px solid transparent; text-align: center; }
    .ffwb-tab[aria-selected="true"] { border-top-color: var(--series-1); border-bottom-color: transparent; color: var(--series-1); }
    .pk-bar { bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px)); padding-bottom: 0.7rem; }
    .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pk-tile { min-height: 3.3rem; }
    .pk-tile-name { font-size: 0.82rem; }
    .pk-name { flex: 1; }
    .pk-who { flex-direction: column; align-items: stretch; }
    .pk-weekbar { justify-content: space-between; }
    .ffwb-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ffwb-award-name { font-size: 1.1rem; }
    .ffwb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) { .ffwb-admin .pk-bar { bottom: 0; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); } .ffwb-admin .ffwb-shell { padding-bottom: 2rem; } }
  .ffwb-admin .pk-bar { margin: 0 -1rem -1rem; }
  @media (max-width: 640px) {
    .ffwb-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
    .ffwb-pc-value { font-size: var(--cds-font-size-body); }
    #odds-box th:nth-child(3), #odds-box td:nth-child(3), #odds-box th:nth-child(2), #odds-box td:nth-child(2) { display: none; }
  }
  .res-row { flex-wrap: nowrap; }
  .res-club { display: flex; flex-direction: column; min-width: 0; }
  .res-picked { font-size: 0.72rem; }
  @media (max-width: 640px) {
    #standings-box th:nth-child(5), #standings-box td:nth-child(5), #standings-box th:nth-child(6), #standings-box td:nth-child(6) { display: none; }
    .ffwb-table th, .ffwb-table td { padding: 0.4rem 0.45rem; }
  }
  @media (max-width: 640px) {
    #standings-box th:nth-child(4), #standings-box td:nth-child(4), #standings-box th:nth-child(7), #standings-box td:nth-child(7), #standings-box th:nth-child(8), #standings-box td:nth-child(8) { display: none; }
  }

/* Home screen tip, phones only. */
.ffwb-hometip { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; padding: 0.6rem 0.8rem; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-panel); font-size: var(--cds-font-size-caption); }
.ffwb-hometip span { flex: 1; }
.ffwb-hometip button { font: inherit; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--series-1); background: transparent; color: var(--series-1); cursor: pointer; }

/* Season winners, on the Table tab once a half is finished. */
.ffwb-crowncard { border-color: var(--series-2); background: color-mix(in srgb, var(--series-2) 8%, var(--color-panel)); }
.ffwb-crowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin-top: 0.4rem; }
.ffwb-crown { padding: 0.55rem 0.75rem; border-radius: var(--cds-radius); background: var(--color-panel); border: 1px solid var(--color-border-line); }
.ffwb-crown-top { border-color: var(--series-2); }
.ffwb-crown-what { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ffwb-crown-who { font-weight: 700; font-size: 1.05rem; }

/* Opponent and kickoff on each club tile. */
.pk-tile-game { font-size: 0.72rem; color: var(--color-fg-muted); line-height: 1.25; }
.pk-tile-pick .pk-tile-game, .pk-tile-lock .pk-tile-game { color: var(--color-fg); }

/* ---------- Brand: matchday roundel ---------- */
.ffwb-topbar {
  align-items: center; margin: -1rem calc(-1 * clamp(1rem, 3vw, 2rem)) 0; border-radius: 0 0 14px 14px; padding: 0.9rem clamp(1rem, 3vw, 2rem);
  background: var(--brand-navy); color: var(--brand-cream); border-bottom: 4px solid var(--brand-claret);
  box-shadow: inset 0 -7px 0 -4px var(--brand-gold);
}
.ffwb-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.ffwb-crest { width: 3.4rem; height: 3.4rem; flex: none; display: block; }
.ffwb-topbar .ffwb-title { font-family: var(--font-anthropic-serif); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-cream); }
.ffwb-topbar .ffwb-title small { display: block; font-size: 0.42em; letter-spacing: 0.32em; color: var(--brand-gold); font-weight: 500; margin-top: 0.15rem; }
.ffwb-topbar .ffwb-headline { color: color-mix(in srgb, var(--brand-cream) 75%, transparent); }
.ffwb-topbar .ffwb-headline .ffwb-fig { color: var(--brand-cream); }
.ffwb-h, .ffwb-card > h2, .ffwb-card summary.ffwb-h { font-family: var(--font-anthropic-serif); font-weight: 500; letter-spacing: 0.03em; }
.ffwb-tab[aria-selected="true"] { border-bottom-color: var(--brand-claret); color: var(--color-fg); }
.pk-save { background: var(--brand-claret); border-color: var(--brand-claret); color: var(--brand-cream); }
.pk-save:disabled { background: color-mix(in srgb, var(--brand-claret) 40%, var(--color-panel)); border-color: transparent; }
.ffwb-crowncard { border-color: var(--brand-gold); background: color-mix(in srgb, var(--brand-gold) 10%, var(--color-panel)); }
@media (max-width: 640px) {
  .ffwb-topbar { border-radius: 0; padding-block: 0.7rem; }
  .ffwb-crest { width: 2.7rem; height: 2.7rem; }
}
.ffwb-backlink { color: var(--brand-cream); }

/* Trophy art. */
.ffwb-crown { display: flex; align-items: center; gap: 0.7rem; }
.ffwb-crown-art { height: 3.4rem; width: auto; flex: none; }
.ffwb-crown-top .ffwb-crown-art { height: 4.2rem; }
.ffwb-shelf { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.ffwb-shelf-row { display: flex; align-items: flex-end; gap: 0.75rem; padding: 0.35rem 0 0.4rem; border-bottom: 3px solid color-mix(in srgb, var(--brand-gold) 55%, transparent); }
.ffwb-shelf-name { width: 7.5rem; flex: none; font-family: var(--font-anthropic-serif); font-weight: 500; }
.ffwb-shelf-items { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.15rem; }
.ffwb-shelf-cup { height: 2.1rem; }
.ffwb-shelf-medal { height: 1.6rem; }
.ffwb-shelf-more { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-left: 0.3rem; }
.ffwb { --ffwb-heat: var(--brand-gold); }
.pk-bonus { background: color-mix(in srgb, var(--brand-gold) 22%, var(--color-panel)); border-color: var(--brand-gold); }

/* Phone alerts card. */
.al-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.8rem 1rem; }
.al-title { font-family: var(--font-anthropic-serif); font-weight: 500; letter-spacing: 0.03em; }
.al-text { flex: 1 1 16rem; margin: 0; }
.al-card .pk-message { flex-basis: 100%; margin: 0; }