/* TTRA: M3 colour tokens (TTRA colour system), type, shape, motion and component styles. */
/* Layout: M3 adaptive app shell. Nav bar below 600px, nav rail from 600px; content max 1040px, plus a 304px design-notes
   column from 1280px. Colour: the TTRA M3 colour system (source #0078D0, tonal spot) with the tertiary role taken from the logo orange #FF3C00, plus fixed medal and rank-up/down colours. No purple anywhere. Club colours only as static colours. */
:root {
  --md-sys-color-primary: #39608F; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E4FF; --md-sys-color-on-primary-container: #1D4875;
  --md-sys-color-secondary: #545F70; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #D7E3F8; --md-sys-color-on-secondary-container: #3C4758;
  --md-sys-color-tertiary: #B42800; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFDAD2; --md-sys-color-on-tertiary-container: #8A1C00;
  --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #93000A;
  --md-sys-color-surface: #F8F9FF; --md-sys-color-on-surface: #191C20; --md-sys-color-surface-variant: #DFE2EB; --md-sys-color-on-surface-variant: #43474E;
  --md-sys-color-surface-dim: #D8DAE0; --md-sys-color-surface-bright: #F8F9FF;
  --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F2F3FA; --md-sys-color-surface-container: #ECEDF4; --md-sys-color-surface-container-high: #E7E8EE; --md-sys-color-surface-container-highest: #E1E2E8;
  --md-sys-color-inverse-surface: #2E3035; --md-sys-color-inverse-on-surface: #EFF0F7; --md-sys-color-inverse-primary: #A3C9FE;
  --md-sys-color-outline: #73777F; --md-sys-color-outline-variant: #C3C6CF; --md-sys-color-scrim: #000000;
  --md-sys-color-primary-fixed: #D3E4FF; --md-sys-color-primary-fixed-dim: #A3C9FE; --md-sys-color-on-primary-fixed: #001C38; --md-sys-color-on-primary-fixed-variant: #1D4875;
  /* Semantic colours (TTRA colour system): rank-up for wins and gains, rank-down for losses and drops */
  --win: #006D33; --on-win: #FFFFFF; --win-container: #78FC9C; --on-win-container: #00210B;
  --loss: #C00017; --on-loss: #FFFFFF; --loss-container: #FFDAD6; --on-loss-container: #410003;
  /* Medals: one fixed value in light and dark, never a container */
  --medal-gold: #9F8F5E; --on-medal-gold: #191C20; --medal-silver: #969696; --on-medal-silver: #191C20; --medal-bronze: #996B4F; --on-medal-bronze: #FFFFFF;
  /* M3 typeface tokens: brand (Archivo) for display, headline and title-large; plain (Roboto Flex) for everything you read in quantity */
  --ff: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-brand: "Archivo", "Roboto Flex", Roboto, system-ui, sans-serif;
  --t-display-m: 400 2.8125rem/3.25rem var(--ff-brand); --t-display-s: 400 2.25rem/2.75rem var(--ff-brand);
  --t-headline-m: 500 1.75rem/2.25rem var(--ff-brand); --t-headline-s: 500 1.5rem/2rem var(--ff-brand);
  --t-title-l: 500 1.375rem/1.75rem var(--ff-brand); --t-title-m: 500 1rem/1.5rem var(--ff); --t-title-s: 500 0.875rem/1.25rem var(--ff);
  --t-body-l: 400 1rem/1.5rem var(--ff); --t-body-m: 400 0.875rem/1.25rem var(--ff); --t-body-s: 400 0.75rem/1rem var(--ff);
  --t-label-l: 500 0.875rem/1.25rem var(--ff); --t-label-m: 500 0.75rem/1rem var(--ff); --t-label-s: 500 0.6875rem/1rem var(--ff);
  /* Editorial score: Roboto Flex width and weight axes, used as one token */
  --t-score: 600 3.5rem/1 var(--ff-brand); --t-score-s: 600 1.75rem/2.25rem var(--ff-brand);
  /* Tracking for each type role (M3 type scale), applied wherever a role is used */
  --ls-display-m: 0; --ls-display-s: 0; --ls-headline-m: 0; --ls-headline-s: 0; --ls-title-l: 0; --ls-title-m: 0.0094em; --ls-title-s: 0.0071em; --ls-body-l: 0.0312em; --ls-body-m: 0.0179em; --ls-body-s: 0.0333em; --ls-label-l: 0.0071em; --ls-label-m: 0.0417em; --ls-label-s: 0.0455em; --ls-score: -0.02em; --ls-score-s: 0;
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-li: 20px; --r-xl: 28px; --r-xli: 32px; --r-full: 999px;
  --hover: 0.08; --press: 0.1;
  --ease-emph: cubic-bezier(0.2, 0, 0, 1); --ease-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
  --rail: 96px; --bar-h: 64px; --navbar-h: 80px; --notes-w: 304px;
  /* The content box's inline padding, declared once. main and footer.site-foot share it. */
  --gutter: max(16px, env(safe-area-inset-left, 0px));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --md-sys-color-primary: #A3C9FE; --md-sys-color-on-primary: #00315B; --md-sys-color-primary-container: #1D4875; --md-sys-color-on-primary-container: #D3E4FF;
  --md-sys-color-secondary: #BBC7DB; --md-sys-color-on-secondary: #263141; --md-sys-color-secondary-container: #3C4758; --md-sys-color-on-secondary-container: #D7E3F8;
  --md-sys-color-tertiary: #FFB4A2; --md-sys-color-on-tertiary: #621100; --md-sys-color-tertiary-container: #8A1C00; --md-sys-color-on-tertiary-container: #FFDAD2;
  --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-surface: #111418; --md-sys-color-on-surface: #E1E2E8; --md-sys-color-surface-variant: #43474E; --md-sys-color-on-surface-variant: #C3C6CF;
  --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #37393E;
  --md-sys-color-surface-container-lowest: #0C0E13; --md-sys-color-surface-container-low: #191C20; --md-sys-color-surface-container: #1D2024; --md-sys-color-surface-container-high: #272A2F; --md-sys-color-surface-container-highest: #32353A;
  --md-sys-color-inverse-surface: #E1E2E8; --md-sys-color-inverse-on-surface: #2E3035; --md-sys-color-inverse-primary: #39608F;
  --md-sys-color-outline: #8D9199; --md-sys-color-outline-variant: #43474E;
  --win: #5ADF82; --on-win: #003917; --win-container: #005225; --on-win-container: #78FC9C;
  --loss: #FFB4AC; --on-loss: #680007; --loss-container: #93000F; --on-loss-container: #FFDAD6;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --md-sys-color-primary: #A3C9FE; --md-sys-color-on-primary: #00315B; --md-sys-color-primary-container: #1D4875; --md-sys-color-on-primary-container: #D3E4FF;
  --md-sys-color-secondary: #BBC7DB; --md-sys-color-on-secondary: #263141; --md-sys-color-secondary-container: #3C4758; --md-sys-color-on-secondary-container: #D7E3F8;
  --md-sys-color-tertiary: #FFB4A2; --md-sys-color-on-tertiary: #621100; --md-sys-color-tertiary-container: #8A1C00; --md-sys-color-on-tertiary-container: #FFDAD2;
  --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-surface: #111418; --md-sys-color-on-surface: #E1E2E8; --md-sys-color-surface-variant: #43474E; --md-sys-color-on-surface-variant: #C3C6CF;
  --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #37393E;
  --md-sys-color-surface-container-lowest: #0C0E13; --md-sys-color-surface-container-low: #191C20; --md-sys-color-surface-container: #1D2024; --md-sys-color-surface-container-high: #272A2F; --md-sys-color-surface-container-highest: #32353A;
  --md-sys-color-inverse-surface: #E1E2E8; --md-sys-color-inverse-on-surface: #2E3035; --md-sys-color-inverse-primary: #39608F;
  --md-sys-color-outline: #8D9199; --md-sys-color-outline-variant: #43474E;
  --win: #5ADF82; --on-win: #003917; --win-container: #005225; --on-win-container: #78FC9C;
  --loss: #FFB4AC; --on-loss: #680007; --loss-container: #93000F; --on-loss-container: #FFDAD6;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--t-body-m); letter-spacing: 0.0179em; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--md-sys-color-surface); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; }
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; width: 1em; height: 1em; overflow: hidden; flex: none; user-select: none; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; transition: font-variation-settings 200ms var(--ease-emph); }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

.ms.s18 { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--md-sys-color-on-surface-variant); }
.num { font-variant-numeric: tabular-nums; }
.t-headline-m { font: var(--t-headline-m); letter-spacing: 0; } .t-headline-s { font: var(--t-headline-s); letter-spacing: 0; }
.t-title-l { font: var(--t-title-l); letter-spacing: 0; } .t-title-m { font: var(--t-title-m); letter-spacing: 0.0094em; } .t-title-s { font: var(--t-title-s); letter-spacing: 0.0071em; }
.t-body-l { font: var(--t-body-l); letter-spacing: 0.0312em; } .t-body-m { font: var(--t-body-m); letter-spacing: 0.0179em; } .t-body-s { font: var(--t-body-s); letter-spacing: 0.0333em; }
.t-label-l { font: var(--t-label-l); letter-spacing: 0.0071em; } .t-label-m { font: var(--t-label-m); letter-spacing: 0.0417em; } .t-label-s { font: var(--t-label-s); letter-spacing: 0.0455em; }
h2, h3 { text-wrap: balance; }

/* State layers */
.sl { position: relative; isolation: isolate; cursor: pointer; }
.sl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: currentColor; opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-emph); }
@media (hover: hover) { .sl:hover::before { opacity: var(--hover); } }
.sl:active::before { opacity: var(--press); }

/* Buttons (filled, tonal, outlined, text; icon buttons) */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: var(--r-full); font: var(--t-label-l); letter-spacing: 0.0071em; cursor: pointer; white-space: nowrap; background: transparent; text-decoration: none; transition: border-radius 300ms var(--ease-spatial); }
.btn::after { content: ""; position: absolute; inset: -4px 0; }
.btn:active { border-radius: var(--r-s); }
.btn .ms { font-size: 20px; margin-left: -8px; }
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-outlined { border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); padding: 0 24px; }
.btn-outlined[aria-pressed="true"] { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-color: transparent; }
.btn-text { color: var(--md-sys-color-primary); padding: 0 12px; }
.btn-text .ms { margin-left: -4px; }
.icon-btn { position: relative; isolation: isolate; width: 40px; height: 40px; border-radius: var(--r-full); border: 0; display: inline-grid; place-items: center; background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; flex: none; }
.icon-btn::after { content: ""; position: absolute; inset: -4px; }
.icon-btn.has .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; color: var(--md-sys-color-primary); }

/* Top app bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--bar-h); display: flex; align-items: center; gap: 4px; background: var(--md-sys-color-surface); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); transition: background 200ms; }
.topbar.scrolled { background: var(--md-sys-color-surface-container); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { display: block; height: 28px; width: auto; flex: none; }

.brand h1 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { display: none; }
.grow { flex: 1; }
.acct-btn { width: 48px; height: 48px; }
.acct-av { width: 32px; height: 32px; border-radius: var(--r-full); overflow: hidden; display: block; background: var(--md-sys-color-primary-container); }
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-signin { margin-left: 4px; }
.notes-switch { display: flex; align-items: center; gap: 12px; padding: 0 8px; font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); cursor: pointer; }
/* M3 switch */
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); border: 2px solid var(--md-sys-color-outline); transition: background 200ms; }
.switch .handle { position: absolute; top: 50%; left: 8px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--md-sys-color-outline); transition: all 250ms var(--ease-spatial); display: grid; place-items: center; }
.switch .handle .ms { font-size: 16px; opacity: 0; color: var(--md-sys-color-on-primary-container); }
.switch input:checked ~ .track { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch input:checked ~ .handle { left: 24px; width: 24px; height: 24px; margin-top: -12px; background: var(--md-sys-color-on-primary); }
.switch input:checked ~ .handle .ms { opacity: 1; }
.switch input:focus-visible ~ .track { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

/* Navigation: rail (600px+) and bar (<600px). Selected = filled icon on a secondary-container pill. */
.nav { position: fixed; z-index: 15; background: var(--md-sys-color-surface-container); display: flex; }
.nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; font: var(--t-label-m); letter-spacing: 0.0417em; }
.nav .pill { position: relative; isolation: isolate; width: 56px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; }
.nav .pill::before { content: ""; position: absolute; inset: 0; background: var(--md-sys-color-secondary-container); border-radius: inherit; transform: scaleX(0); transition: transform 300ms var(--ease-spatial); z-index: -1; }
.nav a[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 700; }
.nav a[aria-current="page"] .pill::before { transform: scaleX(1); }
.nav a[aria-current="page"] .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; color: var(--md-sys-color-on-secondary-container); }
@media (hover: hover) { .nav a:hover .pill { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } }
/* Large badge: a count on error, anchored to the icon's top-right corner */

@media (min-width: 600px) {
  .nav { top: 0; bottom: 0; left: 0; width: var(--rail); flex-direction: column; align-items: center; gap: 12px; padding-top: calc(var(--bar-h) + 20px + env(safe-area-inset-top, 0px)); padding-left: env(safe-area-inset-left, 0px); }
  .nav a { width: 80px; min-height: 56px; }
  .shell { margin-left: calc(var(--rail) + env(safe-area-inset-left, 0px)); }
  .topbar { padding-left: calc(var(--rail) + 16px + env(safe-area-inset-left, 0px)); margin-left: calc(-1 * (var(--rail) + env(safe-area-inset-left, 0px))); }
  .brand p { display: block; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
}
@media (max-width: 599px) {
  .nav { left: 0; right: 0; bottom: 0; height: calc(var(--navbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); justify-content: space-around; align-items: center; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .nav a { flex: 1; min-width: 0; padding: 12px 0 16px; }
  .shell { padding-bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom, 0px)); }
  .notes-switch .lbl { display: none; }
  #themeBtn { display: none; }
  .tb-signin { width: 40px; padding: 0; justify-content: center; } .tb-signin .lbl { display: none; }
}
/* Signed-in player in the nav: photo instead of an icon; selected adds a ring because a photo can't fill */
.nav-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant); transition: box-shadow 200ms; }
.nav a[aria-current="page"] .nav-av { box-shadow: 0 0 0 2px var(--md-sys-color-on-secondary-container); }
/* Top-level destinations switch with a quick fade (M3: top-level transitions fade, never slide) */
main.enter { animation: fadein 210ms cubic-bezier(0, 0, 0, 1) both; }
@keyframes fadein { from { opacity: 0; } }

/* Page */
.shell { min-width: 0; }
/*
 * One box for the content column and the site footer (owner, 2026-11-03).
 *
 * They must line up: the footer's owner line sits under the first character of the content, and its
 * legal links under the last. They did not, because `main` carried this box and `footer.site-foot`
 * carried `max-width: none` with no inline padding of its own. Measured before this rule: at 390px
 * the content column started at x=16 and the footer's text at x=0; at 1920px the column ended at
 * x=1672 and the footer's links ran to x=1920, 248px past it.
 *
 * Declared once, for both, so a later change to the column cannot leave the footer behind.
 */
main, footer.site-foot { max-width: calc(1040px + var(--notes-w) + 32px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { padding-block: 8px 48px; }
@media (min-width: 600px) { :root { --gutter: max(24px, env(safe-area-inset-left, 0px)); } }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 32px; }
.sec:first-child { padding-top: 16px; }
.sec-head { display: flex; align-items: center; gap: 8px; min-height: 48px; flex-wrap: wrap; }
.sec-head h2 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); flex: 1; min-width: 0; }
.sec-head h2.page { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); }
.sec-head h2:focus { outline: none; }
.sec-head .sub { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.sec-body { min-width: 0; display: grid; gap: 12px; }
.sec-body > * { min-width: 0; }
@media (min-width: 1280px) {
  body.notes-on .sec { grid-template-columns: minmax(0, 1fr) var(--notes-w); column-gap: 32px; }
  body.notes-on .sec > .note { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--bar-h) + 16px); }
}
body:not(.notes-on) .note, body:not(.notes-on) .lab { display: none; }

/* Design notes: an M3 rich tooltip style card (surface-container, title + supporting text) */
.note { background: var(--md-sys-color-surface-container); border-radius: var(--r-m); padding: 12px 16px 16px; display: grid; gap: 8px; min-width: 0; }
.note-h { display: flex; align-items: center; gap: 8px; font: var(--t-title-s); letter-spacing: var(--ls-title-s); color: var(--md-sys-color-on-surface-variant); }
.note-h .ms { font-size: 20px; color: var(--md-sys-color-tertiary); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.note ul { display: grid; gap: 8px; }
.note li { font: var(--t-body-m); letter-spacing: 0.0179em; padding-left: 16px; position: relative; }
.note li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--md-sys-color-tertiary); }
.note b { font-weight: 600; }
/* Flow diagrams in design notes: numbered steps joined by a connector */
.flow-h { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); padding-top: 4px; }
.note .flow { counter-reset: fl; display: grid; gap: 0; }
.note .flow li { counter-increment: fl; padding: 2px 0 12px 36px; min-height: 36px; }
.note .flow li::before { content: counter(fl); left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); font: var(--t-label-m); }
.note .flow li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--md-sys-color-outline-variant); }
.note .flow li:last-child { padding-bottom: 4px; }
.note-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }

/* Image wells: tonal placeholder while loading, then a 200ms fade (effects spring, no overshoot) */
.img { position: relative; overflow: hidden; background: var(--md-sys-color-surface-container-highest); }
.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms linear; display: block; }
.img img.in { opacity: 1; }
.img.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent) 50%, transparent 70%); animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Carousel (hand-built: M3 has no web component). Items are masks; the image keeps its size and is revealed. */
.car { position: relative; margin: 0 -16px; min-width: 0; }
@media (min-width: 600px) { .car { margin: 0 -24px; } }
.car-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-scroll::-webkit-scrollbar { display: none; }
.car-track { position: relative; }
.car-snap { position: absolute; top: 0; width: 1px; height: 1px; scroll-snap-align: start; }
.car-view { position: sticky; left: 0; overflow: hidden; }
.car-item { position: absolute; top: 8px; bottom: 8px; left: 0; border-radius: var(--r-xl); overflow: hidden; border: 0; padding: 0; background: var(--md-sys-color-surface-container-highest); color: #fff; cursor: pointer; text-align: left; isolation: isolate; will-change: transform, width; }
.car-item::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; transition: opacity 150ms; pointer-events: none; }
@media (hover: hover) { .car-item:hover::before { opacity: 0.08; } }
.car-item:active::before { opacity: 0.12; }
.car-item:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.car-item .ph { position: absolute; top: 0; bottom: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms linear; }
.car-item .ph.in { opacity: 1; }
/* A slide whose event has no approved poster: the designed tonal block, opaque from the first paint. */
.car-item .ph.nophoto { display: grid; align-content: end; padding: 16px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); opacity: 1; }
.car-item .ph.nophoto .np-art { position: absolute; right: -28px; top: -28px; width: 168px; height: 168px; display: grid; place-items: center; clip-path: var(--shape-cookie12); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.car-item .ph.nophoto .np-art .ms { font-size: 64px; transform: translate(-12px, 12px); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48; }
.car-item .ph.nophoto .np-name { position: relative; max-width: 70%; font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); text-wrap: balance; }
/* Scrim: protects text over any photo. Gradient keeps the image visible above and reaches ~70% at the text. */
.car-item .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.45) 32%, rgb(0 0 0 / 0) 62%); transition: opacity 200ms; }
.car-item .cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 8px; transition: opacity 150ms linear; }
.car-item .cap h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); color: #fff; text-wrap: balance; }
.hero .car-item .cap h3 { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); }
.car-item .over { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.car-item .dur { position: absolute; z-index: 2; right: 12px; top: 12px; height: 24px; padding: 0 8px; border-radius: var(--r-s); background: rgb(0 0 0 / 0.6); color: #fff; font: var(--t-label-m); letter-spacing: var(--ls-label-m); display: inline-flex; align-items: center; gap: 4px; transition: opacity 150ms; }
.car-item .play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: grid; place-items: center; transition: opacity 150ms, transform 300ms var(--ease-spatial), left 300ms var(--ease-spatial), top 300ms var(--ease-spatial), width 300ms var(--ease-spatial), height 300ms var(--ease-spatial), margin 300ms var(--ease-spatial); }
.car-item .play .ms { font-size: 32px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 40; }
.car-item:hover .play { transform: scale(1.08); }
/* On a large item the title owns the bottom, so the play button moves to the top corner at 40dp */
.car-item.lg .play { left: 16px; top: 16px; width: 40px; height: 40px; margin: 0; }
.car-item.lg .play .ms { font-size: 24px; }
.car-item .mini { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; text-align: center; font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: #fff; transition: opacity 150ms; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.car-item .vs { display: flex; align-items: center; gap: 8px; font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.car-item .vs .crest { width: 28px; height: 28px; }
@media (max-width: 599px) { .car-item .vs .hide-c { display: none; } }
.chip-on-img { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-s); font: var(--t-label-m); letter-spacing: 0.0417em; background: rgb(255 255 255 / 0.92); color: #1D1B20; }
.chip-on-img .ms { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }

@keyframes pulse { 50% { opacity: 0.25; } }

/* Club badges: brand art keeps its exact colours; a light ring keeps dark badges visible on dark surfaces */
.crest { display: block; flex: none; }
.crest svg { width: 100%; height: 100%; display: block; }

/* Cards (M3: elevated = surface-container-low + level 1, filled = surface-container-highest, outlined = surface + outline-variant; 12dp) */
.card { border-radius: var(--r-m); overflow: hidden; min-width: 0; position: relative; }
.card.elevated { background: var(--md-sys-color-surface-container-low); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15); }
.card.filled { background: var(--md-sys-color-surface-container-highest); }
.card.outlined { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.card-pad { padding: 16px; display: grid; gap: 8px; }

/* Assist-style info chips (not interactive) */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--md-sys-color-outline-variant); font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.tag .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.tag.sanc { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.tag.you { border-color: transparent; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Connected button group (single choice) */
.cbg { display: inline-flex; gap: 2px; }
.cbg button { height: 40px; padding: 0 16px; border: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font: var(--t-label-l); letter-spacing: var(--ls-label-l); cursor: pointer; border-radius: var(--r-s); transition: border-radius 300ms var(--ease-spatial); position: relative; isolation: isolate; }
.cbg button:first-child { border-radius: var(--r-full) var(--r-s) var(--r-s) var(--r-full); }
.cbg button:last-child { border-radius: var(--r-s) var(--r-full) var(--r-full) var(--r-s); }
.cbg button[aria-checked="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--r-full); }
.cbg button .ms { font-size: 18px; }
.cbg button::after { content: ""; position: absolute; inset: -4px 0; }

/* Filter chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fchip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: var(--r-s); border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); font: var(--t-label-l); letter-spacing: var(--ls-label-l); cursor: pointer; transition: padding 200ms var(--ease-emph); }
.fchip::after { content: ""; position: absolute; inset: -8px 0; }
.fchip .ms { font-size: 18px; margin-left: -8px; width: 0; opacity: 0; transition: width 200ms var(--ease-emph), opacity 150ms; }
.fchip[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.fchip[aria-pressed="true"] .ms { width: 18px; opacity: 1; }
.fchip[aria-pressed="true"] { padding-left: 16px; }
.draw-ev .fchip[aria-pressed="true"] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; }
.draw-ev .fchip[aria-pressed="true"] .ms { width: 18px; opacity: 1; }
/* M3 segmented button: the sign-in choice between a player account and an organiser account.
   One border around the group, a divider between the segments, and the selected segment filled with
   the secondary container — the same treatment the M3 spec gives a single-select segmented button. */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--md-sys-color-outline); border-radius: var(--r-full); overflow: hidden; margin-bottom: 4px; }
.seg-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 0; background: transparent; color: var(--md-sys-color-on-surface); font: var(--t-label-l); letter-spacing: var(--ls-label-l); cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--md-sys-color-outline); }
.seg-btn .ms { font-size: 18px; }
.seg-btn[aria-checked="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.seg-btn[aria-checked="true"] .ms { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
@media (forced-colors: active) { .seg-btn[aria-checked="true"] { background: Highlight !important; color: HighlightText !important; forced-color-adjust: none; } }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 599px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); display: grid; gap: 4px; min-width: 0; align-content: start; }
.tile b { font: 600 2.25rem/2.75rem var(--ff-brand); font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tile b small { font: 500 1rem/1.5rem var(--ff); color: var(--md-sys-color-on-surface-variant); }
.tile > span { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); }
.tile > small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.move { display: inline-flex; align-items: center; font: var(--t-label-l); letter-spacing: var(--ls-label-l); font-variant-numeric: tabular-nums; }
.move .ms { font-size: 24px; margin: 0 -4px 0 -6px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.move.up { color: var(--win); } .move.down { color: var(--loss); } .move.same { color: var(--md-sys-color-on-surface-variant); }
.move.same .ms { font-size: 18px; margin: 0 2px 0 0; }

/* Meter (M3 linear progress used as a meter: active, gap, track, stop dot) */
.meter { display: flex; gap: 4px; height: 6px; }
.meter i { display: block; height: 100%; border-radius: 4px; transition: width 500ms var(--ease-emph); }
.meter .f { background: var(--md-sys-color-primary); }
.meter .t { flex: 1; background: var(--md-sys-color-secondary-container); position: relative; min-width: 4px; }
.meter .t::after { content: ""; position: absolute; right: 1px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--md-sys-color-primary); }

/* Contained list: rows are their own containers with 2dp gaps; outer corners 16, inner 4 */
.mlist { display: grid; gap: 2px; }
.mlist > li { background: var(--md-sys-color-surface-container-low); border-radius: var(--r-xs); }
.mlist > li:first-child { border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l); }
.mlist > li:last-child { border-bottom-left-radius: var(--r-l); border-bottom-right-radius: var(--r-l); }
.mrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 72px; padding: 8px 16px; width: 100%; border: 0; background: transparent; text-align: left; border-radius: inherit; color: inherit; }
button.mrow { cursor: pointer; }
.mplate { width: 40px; height: 40px; border-radius: 50%; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); display: grid; place-items: center; font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.mplate .crest { width: 26px; height: 26px; }
.mplate.win { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.mplate.win .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.mtext { display: grid; gap: 4px; min-width: 0; }
.mtext .t-body-m { color: var(--md-sys-color-on-surface-variant); }
.mtrail { display: flex; align-items: center; gap: 8px; }
.mtrail .chev { transition: transform 300ms var(--ease-emph); color: var(--md-sys-color-on-surface-variant); }
[aria-expanded="true"] .chev { transform: rotate(180deg); }

@media (max-width: 599px) { .mrow { gap: 12px; padding: 8px 12px; }  }

/* W/L markers: colour plus a letter, never colour alone */
.wl { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: var(--t-label-m); letter-spacing: var(--ls-label-m); flex: none; }
.wl.W { background: var(--win-container); color: var(--on-win-container); }
.wl.L { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.wls { display: inline-flex; gap: 4px; }

/* Your tournament: live mini score, path through the draw */
.mytour { display: grid; gap: 16px; padding: 16px; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-low); }
.mytour-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; }
.mytour-h h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
.mytour-h .t-body-m { color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) { .mytour-h { grid-template-columns: minmax(0, 1fr); } .mytour-h .tags { order: 2; } .mytour-h .row-acts { order: 3; } }
.mytour .tags { grid-column: 1 / -1; }
/* Next match */
.nextm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-surface); }
@media (min-width: 720px) { .nextm { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: center; } .nm-meta { grid-column: 1 / -1; } }
.nm-when { display: grid; gap: 4px; justify-items: start; }
.nm-time { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.nm-time .big { font: 600 3rem/1 var(--ff-brand); font-variation-settings: "wdth" 112, "opsz" 72; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.nm-time .court { font: var(--t-title-m); letter-spacing: var(--ls-title-m); color: var(--md-sys-color-on-surface-variant); }
.nextm .count { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-primary); }
.nm-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-low); }
.nm-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nm-side:last-child { flex-direction: row-reverse; text-align: right; }
.nm-side .who { display: grid; min-width: 0; }
.nm-side b { font: var(--t-title-m); letter-spacing: var(--ls-title-m); overflow-wrap: anywhere; }
.nm-side small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.nm-match .v { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); }
.nm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 599px) { .nm-match { grid-template-columns: minmax(0, 1fr); justify-items: start; } .nm-side:last-child { flex-direction: row; text-align: left; } .nm-match .v { padding-left: 20px; } }
/* Path through the draw: connected stepper. Reached segments are solid; ahead is dashed. */
.path2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 4px; }
.path2 li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; min-width: 0; padding: 0 2px; }
.path2 li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 20px); width: calc(100% - 40px); border-top: 2px dashed var(--md-sys-color-outline-variant); }
.path2 li.done + li::before { border-top: 3px solid var(--win); top: 14px; }
.path2 .node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: var(--t-label-l); letter-spacing: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant); border: 2px solid var(--md-sys-color-outline-variant); }
.path2 .node .ms { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20; }
.path2 li.done .node { background: var(--win); color: var(--on-win); border-color: transparent; }
.path2 li.out .node { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); border-color: transparent; }
.path2 li.now .node { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: transparent; box-shadow: 0 0 0 4px var(--md-sys-color-primary-container); }
.path2 b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.path2 li.now b { color: var(--md-sys-color-primary); }
.path2 small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); overflow-wrap: anywhere; }
.path2 li.now small { color: var(--md-sys-color-on-surface); font-weight: 500; }
/* Page headline: each destination opens with one, so the screen says where you are and what's current */
.pagehead { display: grid; gap: 4px; padding-top: 24px; }
.page-title { font: var(--t-headline-m); letter-spacing: var(--ls-headline-m); }
.page-title:focus { outline: none; }
.pagehead p { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
/* Points at stake (a table: the comparison is the content) */

.stake { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stake caption { text-align: left; padding: 12px 16px 4px; font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.stake th { font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-on-surface-variant); text-align: right; padding: 8px; }
.stake td { font: var(--t-body-m); letter-spacing: var(--ls-body-m); text-align: right; padding: 8px; border-top: 1px solid var(--md-sys-color-outline-variant); height: 44px; }
.stake th:first-child, .stake td:first-child { text-align: left; padding-left: 16px; }
.stake th:last-child, .stake td:last-child { padding-right: 16px; }
.stake tr.now td { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.stake tr.past td { color: var(--md-sys-color-on-surface-variant); }

.stake .gain { color: var(--win); } .stake .loss { color: var(--md-sys-color-error); }
.stake tr.now .gain, .stake tr.now .loss { color: inherit; }

/* Status chip (neutral) */
.state-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-s); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font: var(--t-label-m); letter-spacing: var(--ls-label-m); white-space: nowrap; }
/* People: profile photo, or initials when there isn't one */
.pav-s { width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center; }
.pav-s .ini-s { font: var(--t-label-s); letter-spacing: 0; color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; }

/* Tournaments */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.tcard { display: grid; grid-template-rows: auto 1fr; }
.tcard .img { aspect-ratio: 16 / 9; }
.tcard .on-img { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
.tbody { padding: 16px; display: grid; gap: 12px; align-content: start; }
.tbody h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
.tmeta { display: grid; gap: 8px; }
.tmeta li { display: flex; gap: 8px; align-items: flex-start; font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.tmeta .ms { font-size: 18px; margin-top: 1px; }
.tmeta b { color: var(--md-sys-color-on-surface); font-weight: 500; }
.evs { display: flex; gap: 4px; flex-wrap: wrap; }
.evs abbr { text-decoration: none; height: 24px; padding: 0 8px; border-radius: var(--r-s); background: var(--md-sys-color-surface-container-high); font: var(--t-label-m); letter-spacing: var(--ls-label-m); display: inline-flex; align-items: center; color: var(--md-sys-color-on-surface-variant); }
.places { display: grid; gap: 8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.places b { font-weight: 600; color: var(--md-sys-color-on-surface); }
.tact { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.tact .fee { font: var(--t-title-m); letter-spacing: var(--ls-title-m); font-variant-numeric: tabular-nums; }
.tact .fee small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: block; }
.tact .closed { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); display: inline-flex; align-items: center; gap: 8px; }
.filters { display: grid; gap: 8px; }
.filters .count { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.empty { padding: 32px 16px; text-align: center; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); display: grid; gap: 8px; justify-items: center; }
.empty .ms { font-size: 40px; color: var(--md-sys-color-on-surface-variant); }

/* Tabs (primary, scrollable when they don't fit) */
.tabs { display: flex; border-bottom: 1px solid var(--md-sys-color-surface-variant); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--md-sys-color-on-surface-variant); font: var(--t-title-s); letter-spacing: var(--ls-title-s); cursor: pointer; isolation: isolate; white-space: nowrap; flex: none; }
.tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-sys-color-primary); }

/* Tables */
/*
 * `min-width: 0` again, and this one was a real page-wide bug.
 *
 * `.data` is `min-width: 520px` so a group table stays readable and scrolls sideways on a phone.
 * The wrapper carries `overflow-x: auto` for exactly that. But the wrapper is a grid item of
 * `.groups`, and a grid item defaults to `min-width: auto`, so the track sized itself to the table's
 * min-content width and the wrapper never got the chance to scroll — it just got wider. Measured on
 * the QA lane at a 390px viewport: the wrapper was 573px, `.groups` 573px, `main` 573px, and because
 * `.nav` is `position: fixed` it is sized by the ICB, which the widest content had stretched to 573px
 * as well. The result was a horizontal scrollbar on every screen of the app after the first Draw tab
 * was opened, and a bottom nav bar sitting 183px off the right edge.
 */
.table-wrap { overflow-x: auto; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-low); min-width: 0; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 520px; }
.data th { font: var(--t-label-m); letter-spacing: 0.0417em; color: var(--md-sys-color-on-surface-variant); text-align: right; padding: 12px 8px; white-space: nowrap; }
.data th:first-child, .data td:first-child { padding-left: 16px; }
.data th:last-child, .data td:last-child { padding-right: 16px; }
.data th.l, .data td.l { text-align: left; }
.data td { font: var(--t-body-m); letter-spacing: var(--ls-body-m); text-align: right; padding: 8px; border-top: 1px solid var(--md-sys-color-outline-variant); height: 56px; }
.data td.pts { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.data td.rk { font: var(--t-title-m); letter-spacing: var(--ls-title-m); width: 48px; }
/* Rankings on a phone: rank (with its small up/down mark), player and rating fit without sideways scrolling. */
#rankPanel .rk-cell { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
#rankPanel .rk-cell .move { font: var(--t-label-s); }
#rankPanel .rk-cell .move .ms { font-size: 18px; margin: 0 -2px 0 -5px; }
@media (max-width: 599px) { #rankPanel .rk-n { display: none; } #rankPanel table.data { min-width: 0; } }
.data tr.me td { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.data tr.gap td { height: 32px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.pcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pcell .who { display: grid; min-width: 0; }
.pcell .who small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 4px; }
.data tr.me .pcell .who small { color: inherit; }
.pcell .who small .crest { width: 14px; height: 14px; }
.ini { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font: var(--t-label-m); letter-spacing: var(--ls-label-m); flex: none; position: relative; overflow: hidden; }
.ini.pair { width: 44px; border-radius: 16px; }

/* Profile */
.me-hero { border-radius: var(--r-xl); overflow: hidden; background: var(--md-sys-color-surface-container-low); }
.me-cover { aspect-ratio: 3 / 1; max-height: 240px; width: 100%; }
.me-cover img { object-position: 50% 40%; }
.me-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 20px; align-items: end; padding: 0 24px 20px; margin-top: -52px; position: relative; }
.me-av { position: relative; width: 112px; height: 112px; }
.me-av > .img { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 4px var(--md-sys-color-surface-container-low); }
.me-av .crest { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)); }
.me-name { display: grid; gap: 4px; min-width: 0; padding-bottom: 4px; }
@media (min-width: 600px) { .me-name { padding-top: 60px; } }

.me-name h2 { font: var(--t-headline-m); letter-spacing: var(--ls-headline-m); overflow-wrap: anywhere; }
.me-name h2:focus { outline: none; }
.me-name .role { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.me-acts { display: flex; gap: 4px; align-items: center; padding-bottom: 4px; }
@media (max-width: 599px) {
  .me-id { grid-template-columns: minmax(0, 1fr); margin-top: -48px; padding: 0 16px 16px; }
  .me-av { width: 96px; height: 96px; }
  .me-acts { padding: 0; }
}
/* Results that count: bars on a zero baseline, counted = filled, dropped = outline, cut line labelled */
.pchart { border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); padding: 16px; min-width: 0; }
.pplot { position: relative; height: 200px; margin: 28px 0 0 36px; }
.pgrid span { position: absolute; left: -36px; right: 0; border-top: 1px solid var(--md-sys-color-outline-variant); font: var(--t-label-s); letter-spacing: var(--ls-label-s); color: var(--md-sys-color-on-surface-variant); }
.pgrid span i { position: absolute; left: 0; top: -8px; font-style: normal; background: var(--md-sys-color-surface-container-low); padding-right: 4px; font-variant-numeric: tabular-nums; }

.px { position: absolute; top: calc(100% + 8px); left: 0; right: 0; text-align: center; font: var(--t-label-s); letter-spacing: var(--ls-label-s); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }

.ptip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: var(--r-xs); padding: 4px 8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); white-space: nowrap; }
.ptip b { font: var(--t-label-m); letter-spacing: var(--ls-label-m); display: block; }
.pkey { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 48px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.pkey span { display: inline-flex; align-items: center; gap: 8px; }
.pkey i { width: 14px; height: 14px; border-radius: var(--r-xs); background: var(--md-sys-color-primary); display: inline-block; }
.pkey i.drop { background: transparent; border: 2px solid var(--md-sys-color-outline); }

/* Expandable results */
.mdetail { padding: 0 16px 12px 72px; display: grid; gap: 4px; }
@media (max-width: 599px) { .mdetail { padding: 0 8px 8px; } }
.match { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 4px 4px 4px 12px; border-radius: var(--r-m); background: var(--md-sys-color-surface); }
.match .mt { display: grid; min-width: 0; }
.match .mt .t-body-s { color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.match .mt .opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.match .mt .opp .crest { width: 16px; height: 16px; }
.match .mt .opp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Journal */
.jlist { display: grid; gap: 8px; }
.jentry { border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); padding: 16px; display: grid; gap: 8px; min-width: 0; }
.jentry-h { display: flex; align-items: flex-start; gap: 8px; }
.jentry-h .t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.jentry-h .t .t-body-s { color: var(--md-sys-color-on-surface-variant); }
.jentry p.txt { font: var(--t-body-m); letter-spacing: var(--ls-body-m); white-space: pre-wrap; overflow-wrap: anywhere; }
.feel { display: inline-flex; align-items: center; gap: 4px; font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-on-surface-variant); }
.feel .ms { font-size: 18px; }
.sample { font: var(--t-label-s); letter-spacing: var(--ls-label-s); height: 20px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-xs); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.focus-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.focus-tags span { height: 24px; padding: 0 8px; border-radius: var(--r-s); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font: var(--t-label-m); letter-spacing: var(--ls-label-m); display: inline-flex; align-items: center; }
/* Badges */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bdg { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px; text-align: center; border-radius: var(--r-l); }
.bdg .bshape { width: 72px; height: 72px; display: grid; place-items: center; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.bdg .bshape .ms { font-size: 32px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40; }
.bdg.locked .bshape { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.bdg.locked .bshape .ms { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40; }
.bdg b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.bdg .bd { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.bdg .meter { width: 100%; max-width: 112px; height: 4px; }

/* Player card (shareable) */
.pcard { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); padding: 20px; display: grid; gap: 16px; max-width: 420px; margin: 0 auto; width: 100%; }
.pcard-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.pcard .shape { width: 120px; height: 120px; position: relative; clip-path: var(--shape-burst); transition: clip-path 600ms var(--ease-spatial); background: var(--md-sys-color-primary); border: 0; padding: 0; cursor: pointer; }
.pcard .shape:hover, .pcard .shape:focus-visible { clip-path: var(--shape-cookie12); outline: none; }
.pcard .shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms linear; }
.pcard .shape img.in { opacity: 1; }
.pcard .who { display: grid; gap: 4px; min-width: 0; }
.pcard .who h3 { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); overflow-wrap: anywhere; }
.pcard .who p { font: var(--t-body-m); letter-spacing: var(--ls-body-m); display: flex; align-items: center; gap: 8px; }
.pcard .who p .crest { width: 20px; height: 20px; }
.pcard .rank { font: 600 2.75rem/1 var(--ff-brand); font-variation-settings: "wdth" 116, "opsz" 72; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pcard .rank small { font: var(--t-label-l); letter-spacing: 0.0071em; margin-left: 4px; }
.pcard dl.pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcard dl.pstats div { display: grid; padding: 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--md-sys-color-surface) 55%, transparent); }
.pcard dt { font: var(--t-label-m); letter-spacing: var(--ls-label-m); order: 2; }
.pcard dd { font: 600 1.375rem/1.75rem var(--ff-brand); font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; order: 1; }
.pcard dd small { display: block; font: var(--t-label-s); letter-spacing: var(--ls-label-s); font-weight: 500; opacity: 0.7; margin-top: 2px; }
.kit { display: grid; gap: 2px; border-radius: var(--r-l); overflow: hidden; }
.kit li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; background: color-mix(in srgb, var(--md-sys-color-surface) 55%, transparent); }
.kit li .k { display: grid; min-width: 0; }
.kit li .k span { font: var(--t-label-m); letter-spacing: var(--ls-label-m); opacity: 0.85; }
.kit li .k b { font: var(--t-body-l); letter-spacing: var(--ls-body-l); font-weight: 500; overflow-wrap: anywhere; }
.kit .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.pcard-foot { display: flex; align-items: center; gap: 8px; font: var(--t-label-m); letter-spacing: var(--ls-label-m); }
.pcard-foot .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }

/* Passport extras */
.pbadges { display: flex; gap: 8px; flex-wrap: wrap; }
.pbadges > span { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--r-s); background: color-mix(in srgb, var(--md-sys-color-surface) 55%, transparent); font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.pbadges .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.pform { display: flex; align-items: center; gap: 8px; font: var(--t-label-m); letter-spacing: var(--ls-label-m); }

/* Dialogs: basic (centered, 28dp) and full-screen on compact windows */
dialog { border: 0; padding: 0; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: var(--r-xl); width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog.form-d { width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / 0.32); }
.dlg { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 48px); }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px 24px; }
.dlg-head h2 { flex: 1; font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); min-width: 0; }
.dlg-head .fs-only { display: none; }
.dlg-body { overflow-y: auto; padding: 8px 24px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dlg-body figure { display: grid; gap: 8px; }
.dlg-body .img { border-radius: var(--r-l); aspect-ratio: 16 / 9; }
.dlg-body figcaption { font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.dlg-scroll { overflow-y: auto; padding: 8px 24px 16px; display: grid; gap: 20px; align-content: start; }
.dlg-acts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 24px 24px; flex-wrap: wrap; }
/*
 * A refusal, pinned above the form rather than inside it.
 *
 * Measured: the flagged control sits in the form's first section and the button that refuses is at the
 * very bottom, so focusing the control scrolled the form away from the payer's thumb, and the snack that
 * said anything faded after four seconds without naming a field. It lives outside the scrolled body so it
 * cannot be scrolled past, and beneath a sticky action bar so the button and its answer stay together.
 */
.dlg-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 24px 8px; padding: 10px 12px; border-radius: var(--r-xs);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); font: var(--t-body-s); letter-spacing: var(--ls-body-s); }
.dlg-notice[hidden] { display: none; }
.dlg-notice .ms { font-size: 18px; flex: none; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.dlg-notice__t { min-width: 0; }
.dlg-notice__d { opacity: 0.85; }
.dlg-notice[data-tone="warning"] { background: var(--warning-container); color: var(--on-warning-container); }
/*
 * On a full-screen sheet, the action bar sits over the scrolled form rather than under it, so the control
 * that refuses is on screen at the moment it refuses. Without this, pressing Continue on the last step of a
 * long form means the button itself may be below the fold, and the notice it produces is above it.
 */
dialog.fs .dlg-acts { position: sticky; bottom: 0; background: var(--md-sys-color-surface-container-low, Canvas); border-top: 1px solid var(--md-sys-color-outline-variant); }
@media print { .dlg-notice { display: none; } }

.dlg-acts .grow { min-width: 0; }
@media (max-width: 599px) {
  dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
  dialog.form-d { width: 100vw; }
  .dlg { max-height: 100%; height: 100%; }
  dialog.fs .dlg-head { padding: 8px 8px 8px 4px; }
  dialog.fs .dlg-head h2 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
  dialog.fs .dlg-head .fs-only { display: inline-flex; }
  
  dialog.fs .dlg-acts.fs-hide { display: none; }
  .dlg-scroll { padding: 8px 16px 24px; }
}
.dlg-head .lead { order: -1; }
@media (min-width: 600px) { .dlg-head .lead { display: none; } }

/* Forms: outlined text field, select, radio and checkbox rows */
.field { display: grid; gap: 4px; }
.tf { position: relative; display: block; }
.tf input, .tf select, .tf textarea { width: 100%; min-height: 56px; padding: 16px; border-radius: var(--r-xs); border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-on-surface); font: var(--t-body-l); letter-spacing: var(--ls-body-l); outline: none; appearance: none; }
.tf textarea { min-height: 128px; resize: vertical; padding-top: 16px; }
.tf select { padding-right: 44px; cursor: pointer; }
.tf .caret { position: absolute; right: 12px; top: 16px; pointer-events: none; color: var(--md-sys-color-on-surface-variant); }
.tf .lbl { position: absolute; left: 12px; top: 16px; padding: 0 4px; font: var(--t-body-l); letter-spacing: var(--ls-body-l); color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-high); pointer-events: none; transition: top 150ms var(--ease-emph), font-size 150ms var(--ease-emph); }
.tf input:focus ~ .lbl, .tf input:not(:placeholder-shown) ~ .lbl, .tf textarea:focus ~ .lbl, .tf textarea:not(:placeholder-shown) ~ .lbl, .tf select ~ .lbl { top: -8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); }
.tf input:focus, .tf select:focus, .tf textarea:focus { border: 2px solid var(--md-sys-color-primary); padding: 15px; }
.tf textarea:focus { padding-top: 15px; }
.tf select:focus { padding-right: 43px; }
.tf input:focus ~ .lbl, .tf select:focus ~ .lbl, .tf textarea:focus ~ .lbl { color: var(--md-sys-color-primary); }
.tf [aria-invalid="true"] { border: 2px solid var(--md-sys-color-error); padding: 15px; }
.tf [aria-invalid="true"] ~ .lbl { color: var(--md-sys-color-error); }
.help { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); padding: 0 16px; display: flex; gap: 8px; justify-content: space-between; }
.err { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-error); padding: 0 16px; display: flex; align-items: center; gap: 4px; }
.err .ms { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.fs-legend { font: var(--t-title-s); letter-spacing: var(--ls-title-s); margin-bottom: 4px; padding: 0; }
.opt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r-l); cursor: pointer; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--md-sys-color-primary); cursor: pointer; }
.opt span { display: grid; }
.opt span small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.opt:has(input:checked) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.opt:has(input:checked) small { color: inherit; }
.opt:has(input:disabled) { cursor: default; opacity: 0.38; }
.opt.inv { outline: 2px solid var(--md-sys-color-error); outline-offset: -2px; }

.entrant { display: flex; align-items: center; gap: 12px; }
.entrant .img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.entrant .t-body-s { color: var(--md-sys-color-on-surface-variant); }

/* Stories */
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 8px; }
.story .img { aspect-ratio: 3 / 2; }
.story h3 { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.story .meta { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 8px; }
/*
 * The featured card's picture column is shaped to the artwork, not the other way round.
 *
 * The banner pack draws every thumbnail at 16:9 (viewBox 312.89x176). This card was a two-column
 * grid of 1.4fr / 1fr inside a full-width row, which at a 1136px row gave the picture a 663x240
 * frame — 2.76:1. The pack fills its frame with `slice`, so the 16:9 art was scaled up to cover it:
 * 2.12x its drawn size, with 133px of the picture cropped off the bottom, which is why the ball sat
 * above the tops of the bars rather than hopping on them. The card beside it is 208x139 (1.50:1),
 * which draws the same artwork at 0.79x — one picture shrunk in one card and magnified more than
 * double in the next.
 *
 * A 240px-tall frame at the artwork's own 16:9 is 427px wide, so the art now lands at 1.36x with no
 * crop at all. The column is sized `auto` from that frame rather than pinned to 427px, so it stays
 * correct at every row width instead of only at the one it was measured at. The copy is unchanged.
 */
.story.feature { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.story.feature .img { aspect-ratio: 16 / 9; height: 240px; min-height: 0; }
/*
 * A `ttra-banners 2` thumbnail inside a real frame.
 *
 * The pack draws `.art-thumb` at 16:9 and lets it fill whatever contains it. In a story card the
 * container is the card's own frame — 3:2, or the feature card's 240px minimum — and the article hero
 * is 21:9 on a wide screen, so a 16:9 picture sat at the top of a taller box and left a band of the
 * card's placeholder colour showing underneath it. Measured before this rule: a 468x312 frame around
 * a 468x263 picture, a 49px strip. The frame is the design decision, so the artwork fills it.
 *
 * Three classes beat the pack's single-class `.art-thumb` on specificity, so this holds whichever
 * order the two stylesheets load in — the pack's README requires its file to come second.
 */
.story .img > .art-thumb, .st-hero > .art-thumb { aspect-ratio: auto; position: absolute; inset: 0; max-width: none; border-radius: 0; }
.story.feature h3 { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); }
@media (max-width: 699px) { .story.feature { grid-template-columns: minmax(0, 1fr); } .story.feature .img { aspect-ratio: 3 / 2; height: auto; min-height: 0; } }
.skel { display: grid; gap: 8px; padding: 16px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: var(--md-sys-color-surface-container-highest); }
.text-card .ms { color: var(--md-sys-color-primary); }

/* Crop lab (design notes only) */
.lab { display: grid; gap: 12px; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; align-items: end; }
.lab figure { display: grid; gap: 8px; }
.lab figure .img { border-radius: var(--r-m); }
.lab figcaption { font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-on-surface-variant); }
.lab .src { position: relative; border-radius: var(--r-m); overflow: hidden; cursor: crosshair; touch-action: none; max-width: 520px; aspect-ratio: 16 / 9; background: var(--md-sys-color-surface-container-highest); }
.lab .src img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab .fp { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / 0.5); pointer-events: none; }
.lab .shape-crop { clip-path: var(--shape-clover4); border-radius: 0; }

.snack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; min-height: 48px; width: max-content; max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 16px; border-radius: var(--r-xs); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); box-shadow: 0 3px 6px rgb(0 0 0 / 0.25); font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.snack .btn-text { color: var(--md-sys-color-inverse-primary); }
.snack .icon-btn { color: var(--md-sys-color-inverse-on-surface); }
@media (max-width: 599px) { .snack { bottom: calc(var(--navbar-h) + 12px + env(safe-area-inset-bottom, 0px)); } }
footer { padding: 32px 0 8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); max-width: 72ch; }
/* Site footer (owner, 2026-11-03): one quiet line — owner on the left, legal links on the right; wraps on a phone.
   Links stay plain text: hover only darkens them. */
footer.site-foot { margin-top: 40px; padding-block: 24px 28px; border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; font: 400 0.75rem/1rem var(--ff); letter-spacing: 0.01em; color: var(--md-sys-color-on-surface-variant); }
footer.site-foot nav { display: flex; gap: 24px; }
footer.site-foot a { color: inherit; text-decoration: none; }
footer.site-foot a:hover { color: var(--md-sys-color-on-surface); }
footer.site-foot a:focus-visible { outline: 2px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  
}
@media (forced-colors: active) {
  .chip-on-img, .card, .note, .wl, .cbg button, .fchip, .tile, .mlist > li, .court, .step, .pchart, .jentry, .tag, .pcard { border: 1px solid CanvasText; }
  .meter .f, .nav a[aria-current="page"] .pill::before, .fchip[aria-pressed="true"], .tab[aria-selected="true"]::after { forced-color-adjust: none; background: Highlight !important; }
}

/* Single-column grids never grow past their container (long nowrap text ellipsizes instead) */
.court, .sb, .mytour, .tbody, .jentry, .h2h, .outlook, .pcard, .dlg-scroll, .sgroup, .fsec, .field, .evpanel, .cab, .result-card, .signin-card, .sec-body { grid-template-columns: minmax(0, 1fr); }
body.notes-on .sec > :not(.note) { grid-column: 1; }
.dlg-scroll { grid-auto-rows: max-content; }
.brand > div { min-width: 0; }
.cbg button { flex: none; }
/* Large numerals carry no tracking; running text keeps a comfortable measure */
.tile b, .pcard dd, .pcard .rank, .rec b, .outlook .pct, .pod .block { letter-spacing: 0; }
.sec-body > p, .evpanel > p, .fsec > p, .dlg-scroll > p, .done-state p, .signin-card p { max-width: 72ch; }
/* Ranking rows: the whole player cell is the target (48dp) */
.pbtn { width: 100%; min-height: 48px; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; background: transparent; color: inherit; text-align: left; border-radius: var(--r-m); font: var(--t-body-l); letter-spacing: var(--ls-body-l); cursor: pointer; }
.pbtn .nm { overflow-wrap: anywhere; }
.pbtn:focus-visible { outline-offset: 0; }
/* Next match: countdown and facts */

.count { font: var(--t-title-m); letter-spacing: var(--ls-title-m); color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }

/* Achievements: medals (static gold, silver, bronze) then badges; the strip scrolls inside itself */
.achv { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; }
.achv::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .achv { margin: 0 -24px; padding-left: 24px; padding-right: 24px; scroll-padding-inline: 24px; } }
.ach { flex: none; width: 216px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); scroll-snap-align: start; }
.ach .at { display: grid; min-width: 0; }
.ach b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.ach small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ashape { width: 48px; height: 48px; display: grid; place-items: center; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.ashape .ms { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.ashape.g, .bshape.g { background: var(--medal-gold); color: var(--on-medal-gold); } .ashape.s, .bshape.s { background: var(--medal-silver); color: var(--on-medal-silver); } .ashape.b, .bshape.b { background: var(--medal-bronze); color: var(--on-medal-bronze); }
/* Form tile: W/L circles instead of a number */
.tile b.formb { font: inherit; height: 2.75rem; align-items: center; }
/* A box with nothing in it yet says so in words, on the same baseline as a number would sit. */
.tile b.tile-wait { font: 500 1rem/1.375rem var(--ff); white-space: normal; min-height: 2.75rem; align-items: flex-end; color: var(--md-sys-color-on-surface-variant); }
/* Small badge (unread dot) on an icon button */
.dot-badge { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--md-sys-color-error); box-shadow: 0 0 0 2px var(--md-sys-color-surface); }
.topbar.scrolled .dot-badge { box-shadow: 0 0 0 2px var(--md-sys-color-surface-container); }
.signin-card { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 40px 24px; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-low); }
.signin-card > .ms { font-size: 56px; color: var(--md-sys-color-primary); }
.signin-card h2:focus { outline: none; }
.signin-card .t-body-m { max-width: 44ch; }
.tag.plus { border-color: transparent; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* Status chips (icon + words) */
.st { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--r-s); font: var(--t-label-l); letter-spacing: var(--ls-label-l); white-space: nowrap; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.st .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.st.confirmed { background: var(--win-container); color: var(--on-win-container); }
.st.returned { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.st.playing { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
@media (max-width: 599px) { .mrow .st .stx { display: none; } .mrow .st { padding: 0 8px; } }
/* Status timeline */
.tl { display: grid; gap: 0; }
.tl li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.tl li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--md-sys-color-outline-variant); }
.tl li:last-child::before { display: none; }
.tl li .ms { font-size: 24px; color: var(--md-sys-color-outline); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.tl li.done .ms { color: var(--win); }
.tl li.bad .ms { color: var(--md-sys-color-error); }
.tl li > span:not(.ms) { display: grid; gap: 4px; }
.tl li small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.orgnote { padding: 12px 16px; border-radius: var(--r-m); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); display: grid; gap: 4px; }
.orgnote b { font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.kv dt { color: var(--md-sys-color-on-surface-variant); }
.kv dd { overflow-wrap: anywhere; }
.row-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tournament detail */
.ev-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 1; max-height: 240px; }
.ev-hero.img img { object-position: 50% 55%; }
.ev-hero .on-img { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
@media (max-width: 599px) { .ev-hero { aspect-ratio: 16 / 9; } }
.ev-facts { display: flex; gap: 8px 24px; flex-wrap: wrap; font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.ev-facts span { display: inline-flex; align-items: center; gap: 8px; }
.ev-facts .ms { font-size: 18px; }
.tabs.sec2 .tab[aria-selected="true"] { color: var(--md-sys-color-on-surface); }
.tabs.sec2 .tab[aria-selected="true"]::after { left: 0; right: 0; height: 2px; border-radius: 0; }
.evpanel { display: grid; gap: 12px; padding-top: 4px; }
/* Bracket */
.bracket-wrap { overflow-x: auto; padding: 4px 0 8px; position: relative; }
.bracket { position: relative; display: grid; grid-template-columns: repeat(var(--rounds), minmax(216px, 1fr)); column-gap: 32px; min-width: calc(var(--rounds) * 216px + (var(--rounds) - 1) * 32px); }
.bround { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.bround h3 { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); }
.bties { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.tie { border-radius: var(--r-m); background: var(--md-sys-color-surface-container-low); padding: 4px 0; position: relative; z-index: 1; }
.tie.mine { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tie.final { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.tie-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 32px; padding: 0 12px; font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.tie-row .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tie-row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tie-row .nm .crest { width: 16px; height: 16px; }
.tie-row.win { font-weight: 600; }
.tie-row.lose { color: var(--md-sys-color-on-surface-variant); }
.tie.mine .tie-row.lose, .tie.final .tie-row.lose { color: inherit; }
.tie-row .sc { font: var(--t-label-m); letter-spacing: var(--ls-label-m); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tie-row .tbd { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--md-sys-color-outline); flex: none; }
.tie-meta { padding: 4px 12px 8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 8px; }
.tie.mine .tie-meta, .tie.final .tie-meta { color: inherit; }
.bconn { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
/* Schedule */
.sched { display: grid; gap: 2px; }
.sched li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 16px; background: var(--md-sys-color-surface-container-low); border-radius: var(--r-xs); }
.sched li:first-child { border-radius: var(--r-l) var(--r-l) var(--r-xs) var(--r-xs); }
.sched li:last-child { border-radius: var(--r-xs) var(--r-xs) var(--r-l) var(--r-l); }
.sched li.mine { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sched .tm { font: var(--t-title-s); letter-spacing: var(--ls-title-s); font-variant-numeric: tabular-nums; }
.sched .tm small { display: block; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.sched li.mine .tm small { color: inherit; }
.sched .w { display: grid; min-width: 0; }
.sched .w .t-body-s { color: var(--md-sys-color-on-surface-variant); }
.sched li.mine .w .t-body-s { color: inherit; }
/* Podium: visual-led. Photos in expressive shapes sized by place, medal chips (static gold, silver, bronze + words), stepped tonal blocks */
.podium2 { margin: 0; display: grid; gap: 12px; }
.pod-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 24px 16px 0; border-radius: var(--r-xl);
  background: radial-gradient(60% 70% at 50% 15%, color-mix(in srgb, var(--medal-gold) 30%, transparent), transparent 70%), var(--md-sys-color-surface-container-low); }
.pod { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.pod-pair { display: flex; gap: 8px; justify-content: center; }
.pod-pair > .pod-p { flex: 1 1 0; min-width: 0; }
/* Two bronze medallists share one third of a phone's width: stack them, a size smaller, so neither is cut off. */
@media (max-width: 599px) { .pod-pair { flex-direction: column; align-items: center; gap: 12px; } .pod-pair .pod-ph.b { --ps: 52px; } }
.pod-p { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.pod-p b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); overflow-wrap: anywhere; display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pod-p .tag { height: 20px; padding: 0 6px; font: var(--t-label-s); letter-spacing: var(--ls-label-s); }
.pod-p small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); display: inline-flex; gap: 4px; align-items: center; }
.pod-p small .crest { width: 14px; height: 14px; }
.pod-ph { position: relative; display: block; width: var(--ps); height: var(--ps); background: var(--mc); }
.pod-ph img, .pod-ini { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; clip-path: inherit; opacity: 0; transition: opacity 200ms linear; }
.pod-ph img.in { opacity: 1; }
.pod-ini { opacity: 1; display: grid; place-items: center; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font: 600 1rem/1 var(--ff); }
.pod-ph.g { --ps: 112px; --mc: var(--medal-gold); clip-path: var(--shape-burst); }
.pod-ph.s { --ps: 88px; --mc: var(--medal-silver); clip-path: var(--shape-cookie12); }
.pod-ph.b { --ps: 64px; --mc: var(--medal-bronze); clip-path: var(--shape-cookie9); }
.pod-medal { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 8px; border-radius: var(--r-full); font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: #1D1B20; }
.pod-medal .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.pod-medal.g { background: var(--medal-gold); color: var(--on-medal-gold); } .pod-medal.s { background: var(--medal-silver); color: var(--on-medal-silver); } .pod-medal.b { background: var(--medal-bronze); color: var(--on-medal-bronze); }
.pod .block { width: 100%; display: grid; place-items: center; border-radius: var(--r-l) var(--r-l) 0 0; font: 700 2.5rem/1 var(--ff-brand); font-variation-settings: "wdth" 120, "opsz" 72; letter-spacing: 0; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.pod.p1 .block { height: 128px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: 3.5rem; }
.pod.p2 .block { height: 96px; }
.pod.p3 .block { height: 72px; }
@media (max-width: 599px) { .pod-stage { padding: 16px 8px 0; gap: 4px; } .pod-ph.g { --ps: 88px; } .pod-ph.s { --ps: 68px; } .pod-ph.b { --ps: 48px; } .pod-p small { display: none; } }
/* Search bar: M3 full-radius container on surface-container-high, 56dp */
.sbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); cursor: text; }
.sbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--md-sys-color-on-surface); font: var(--t-body-l); letter-spacing: var(--ls-body-l); outline: none; }
.sbar input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.sbar:focus-within { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }
#rankings .sbar { margin-bottom: 8px; }
.rank-age { padding: 12px 0 4px; }
.draw-ev { padding-bottom: 8px; }
.srch-h { padding: 16px 0 4px; }
.more-btn { justify-self: start; margin-top: 8px; }
/* Account sheet header */
.acct-head { display: flex; align-items: center; gap: 16px; padding: 8px 0 16px; }
.acct-head > span:last-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.acct-av.lg { width: 56px; height: 56px; flex: none; }
/* Final standings under the podium: place, player, points earned. Connected list (2dp gaps), your row on secondary-container */
.stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-radius: var(--r-l); overflow: hidden; }
.stand li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; background: var(--md-sys-color-surface-container-low); }
.stand li.me { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.stand li.me .pcell .who small, .stand li.me .st-r small { color: inherit; }

.stand .pcell .who > span { font: var(--t-body-l); letter-spacing: var(--ls-body-l); display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stand .tag { height: 20px; padding: 0 8px; font: var(--t-label-s); letter-spacing: var(--ls-label-s); }
.stand .st-r { display: grid; justify-items: end; text-align: right; }
.stand .st-r b { font: var(--t-label-l); letter-spacing: var(--ls-label-l); font-variant-numeric: tabular-nums; }
.stand .st-r small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) { .stand li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; } }
/* Event format: stages in order, the current one on primary-container */
.evhead { display: grid; gap: 4px; }

/* The stage strip as pills. Replaces .fmt on the real draw; .fmt stays for the demo screens. */
/*
 * EVERY rule below is scoped `.pills ...`, and that scoping is load-bearing.
 *
 * `pill` is the NAVIGATION's class too — the handoff's own markup is
 * `<a href="#home"><span class="pill"><span class="ms">home</span></span>Home</a>`, where `.pill` is
 * the 56x32 rounded container the icon sits in. Written unscoped, these rules reached it and gave
 * every nav icon a 1px outline, a surface background and 14px of right padding. Measured on the
 * rail before the fix: `border: 1px rgb(195, 198, 207)`, `background: rgb(248, 249, 255)`,
 * `padding-right: 14px` — none of which the handoff's nav has. Two different things share the name,
 * so the strip's rules must never be written bare.
 */
/*
 * `min-width: 0` is load-bearing, not tidiness.
 *
 * The strip is a scroll container inside `.draw`, which is a grid. A grid item defaults to
 * `min-width: auto`, so the track sized itself to the strip's min-content width — 720px against a
 * 388px column — and the whole page gained a horizontal scrollbar. Measured at 420px: overflow 153px
 * with the strip, 0px without it. The same fault was latent in `.fmt`, which the real draw used
 * before this, so both carry the guard.
 */
/* position: relative keeps each pill's screen-reader label inside the strip; without it the hidden label
   escaped to the page and widened the whole Draw screen on a phone, cutting off the bottom bar. */
.pills { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; min-width: 0; }
.pills::-webkit-scrollbar { display: none; }
.pills .pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px;
        border-radius: var(--r-full); border: 1px solid var(--md-sys-color-outline-variant);
        background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant);
        font: var(--t-label-l); letter-spacing: var(--ls-label-l); white-space: nowrap; }
.pills .pill-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
          font: var(--t-label-m); letter-spacing: 0; }
.pills .pill-t { display: inline-flex; align-items: baseline; gap: 6px; }
.pills .pill small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); opacity: .85; }
.pills .pill .sep { opacity: .4; }
/* Played: filled quiet. */
.pills .pill.done { border-color: transparent; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.pills .pill.done .pill-n { background: var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-surface); }
/* Current: the one loud pill. */
.pills .pill.cur { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.pills .pill.cur .pill-n { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
/* Ahead: hollow, and an unknown date says so rather than leaving a gap. */
.pills .pill.next { opacity: .78; }
.pills .pill.tba small { font-style: italic; }

/* Your group leads, carries a chip, and is outlined. */
.group-card.yours { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--r-m); }
.yours-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px;
              border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
              font: var(--t-label-m); letter-spacing: var(--ls-label-m); }
.yours-chip .ms { font-size: 15px; }
.cap-state { opacity: .7; font-weight: 400; }

/* Jump to your group: a control, not a mode. Every group stays on the page. */
.jumpbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.jump { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-full);
        border: 1px solid var(--md-sys-color-primary); background: transparent; color: var(--md-sys-color-primary);
        font: var(--t-label-l); letter-spacing: var(--ls-label-l); cursor: pointer;
        transition: background 160ms var(--ease-emph), transform 160ms var(--ease-emph); }
.jump:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.jump:active { transform: scale(0.97); }
.jump .ms { font-size: 17px; }
.jumpbar .tally { font: var(--t-body-s); color: var(--md-sys-color-on-surface-variant); }
@keyframes jumpFlash { from { outline-color: var(--md-sys-color-primary); } to { outline-color: transparent; } }
.group-card.flash { outline: 3px solid var(--md-sys-color-primary); outline-offset: 3px; animation: jumpFlash 1.4s var(--ease-emph) forwards; }
@media (prefers-reduced-motion: reduce) { .group-card.flash { animation: none; } }

.fmt { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.fmt::-webkit-scrollbar { display: none; }
.fmt li { flex: 1 0 128px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r-xs); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.fmt li:first-child { border-radius: var(--r-m) var(--r-xs) var(--r-xs) var(--r-m); }
.fmt li:last-child { border-radius: var(--r-xs) var(--r-m) var(--r-m) var(--r-xs); }
.fmt li.cur { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.fmt-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: var(--t-label-m); letter-spacing: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.fmt-t { display: grid; min-width: 0; }
.fmt-t b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.fmt-t small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); }
/* Phones: the format reads top to bottom as a connected list, no sideways scrolling */
@media (max-width: 599px) {
  .fmt { flex-direction: column; gap: 2px; overflow: visible; }
  .fmt li { flex: none; }
  .fmt li:first-child { border-radius: var(--r-m) var(--r-m) var(--r-xs) var(--r-xs); }
  .fmt li:last-child { border-radius: var(--r-xs) var(--r-xs) var(--r-m) var(--r-m); }
}
/* Groups */
/*
 * The group grid, and the condensed table inside each card.
 *
 * The floor is 340px, not 300px, and that number is the whole point. A group table needs 410px at
 * its natural width; at a 300px floor the grid fits FOUR cards across at 1440px (main is capped at
 * 1376px, so the grid reaches ~1281px and 1281 / 340 = 3.77), handing each table 320px. The floor of
 * 340 caps a row at three at every desktop width, which is also what the owner asked for.
 *
 * Measured at a 1280px viewport with 8 groups: three columns of 366px. The table then needed 410px
 * and was squeezed to 366px, so the Player column fell to 205px and the name wrapped. Condensing the
 * table brings its natural width to 338px, which fits the 366px card with room to spare.
 *
 * The condensing itself is two changes: the cell padding, and the last column's header. That header
 * reads "Points +/−" and is what forces the width — the values below it are already "+54" / "−36", so
 * the header can be the symbol alone. Nothing is lost: the column's meaning is carried by the values.
 */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; min-width: 0; }
.groups table.data th, .groups table.data td { padding-left: 6px; padding-right: 6px; }
.groups table.data th:first-child, .groups table.data td:first-child { padding-left: 12px; }
.groups table.data th:last-child, .groups table.data td:last-child { padding-right: 12px; }
.groups table.data th:last-child { font-size: 0; }
.groups table.data th:last-child::after { content: "+/−"; font-size: 12px; }
.groups table.data { min-width: 300px; }
.groups caption { text-align: left; padding: 12px 16px 0; font: var(--t-title-s); letter-spacing: var(--ls-title-s); }

/*
 * "Your next match", at the top of the Draw tab.
 *
 * The one loud card on the tab, because it answers the question the tab is opened to ask. The two
 * sides are a 1fr / auto / 1fr grid so the names sit hard left and hard right with the "v" between
 * them, which is the same reading order as the match rows in the Today frame.
 *
 * `overflow-wrap: anywhere` on the names is deliberate: a long club-prefixed name ("QA Bracket
 * Suraya") must wrap inside its own half rather than push the "v" off centre.
 */
.nextup { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.nextup-h { display: flex; align-items: center; gap: 8px; font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.nextup-m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.nextup-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nextup-side.b { justify-content: flex-end; text-align: right; }
.nextup-side b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); overflow-wrap: anywhere; }
.nextup-side small { display: block; font: var(--t-body-s); letter-spacing: var(--ls-body-s); opacity: .85; }
.nextup-v { font: var(--t-label-m); opacity: .7; }
.nextup-meta { display: flex; flex-wrap: wrap; gap: 8px; }
/* The chips inside the loud card take the card's own colours rather than the surface's. */
.nextup-meta .tag { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); color: inherit; }
.data tr.q td:first-child { box-shadow: inset 4px 0 0 var(--md-sys-color-primary); }
/* Documents */
.docs .mrow .mplate { border-radius: var(--r-m); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* Settings */
.sgroup { display: grid; gap: 8px; }
.sgroup h3 { font: var(--t-title-s); letter-spacing: var(--ls-title-s); color: var(--md-sys-color-primary); padding: 8px 16px 0; }
.srow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; padding: 8px 16px; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; border-radius: inherit; }
button.srow { cursor: pointer; }
.srow > .ms { color: var(--md-sys-color-on-surface-variant); }
.srow .mtext .t-body-m { color: var(--md-sys-color-on-surface-variant); }
.srow .tf select { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }

/* Notifications */
.notes-list { display: grid; gap: 2px; }
.nrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; gap: 16px; align-items: start; padding: 12px 16px; width: 100%; border: 0; background: var(--md-sys-color-surface-container); color: inherit; text-align: left; border-radius: var(--r-xs); cursor: pointer; }
.nrow:first-child { border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l); }
.nrow:last-child { border-bottom-left-radius: var(--r-l); border-bottom-right-radius: var(--r-l); }
.nrow .mplate { background: var(--md-sys-color-surface-container-highest); }
.nrow .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--md-sys-color-primary); margin-top: 8px; }
.nrow .mtext .t-body-s { color: var(--md-sys-color-on-surface-variant); }

/* Head-to-head */
.h2h { display: grid; gap: 16px; padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); }
.h2h-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.h2h .tf .lbl { background: var(--md-sys-color-surface-container-low); }
.rec { display: grid; justify-items: end; }
.rec b { font: var(--t-score-s); letter-spacing: var(--ls-score-s); font-variation-settings: "wdth" 116; font-variant-numeric: tabular-nums; }
.rec span { font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-on-surface-variant); }
.outlook { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--r-m); background: var(--md-sys-color-surface); }
.outlook .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.outlook .head b { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.outlook .head .pct { font: 600 1.375rem/1.75rem var(--ff-brand); font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; }
.outlook .meter { height: 8px; }
.outlook ul { display: grid; gap: 4px; }
.outlook li { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); padding-left: 16px; position: relative; }
.outlook li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.outlook .fine { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) { .h2h-top { grid-template-columns: minmax(0, 1fr); } .rec { justify-items: start; } }

/* Insights */

.plus-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-xl); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.plus-cta h3 { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.plus-cta p { font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.plus-cta .btn-filled { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
@media (max-width: 599px) { .plus-cta { grid-template-columns: minmax(0, 1fr); } }

/* Trophy cabinet */
.cab { display: grid; gap: 16px; }
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.trophy { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r-l); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.trophy .ms { font-size: 40px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 40; }
.trophy > span:not(.ms) { display: grid; }
.trophy small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bdg { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px; text-align: center; border-radius: var(--r-l); }
.bdg.shown { background: var(--md-sys-color-surface-container-low); }
.bdg .bshape { width: 72px; height: 72px; display: grid; place-items: center; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.bdg .bshape .ms { font-size: 32px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40; }
.bdg.locked .bshape { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.bdg.locked .bshape .ms { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40; }
.bdg b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.bdg .bd { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.bdg .meter { width: 100%; max-width: 112px; height: 4px; }
.onpass { display: inline-flex; align-items: center; gap: 4px; font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-primary); }
.onpass .ms { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.pickcount { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); }

/* Forms (sheet) */
dialog.wide { width: min(720px, calc(100vw - 32px)); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fsec { display: grid; gap: 16px; padding-top: 4px; }
.fsec + .fsec { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 24px; }
.fsec > h3 { font: var(--t-title-m); letter-spacing: var(--ls-title-m); display: flex; align-items: center; gap: 8px; }
.fsec > h3 small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.fsec > p.t-body-m { color: var(--md-sys-color-on-surface-variant); }
.tf .lbl { background: var(--md-sys-color-surface-container-high); }
.tf.code input { font: 600 1.75rem/1 var(--ff); letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.tf .trail { position: absolute; right: 4px; top: 8px; }
.tf.has-trail input { padding-right: 52px; }
.upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upload .fname { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.upload .fname .ms { font-size: 18px; }
.pwrules { display: grid; gap: 4px; padding: 0 16px; }
.pwrules li { display: flex; align-items: center; gap: 8px; font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.pwrules li .ms { font-size: 16px; }
.pwrules li.ok { color: var(--win); }
.pwrules li.ok .ms { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.or { display: flex; align-items: center; gap: 12px; font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--md-sys-color-outline-variant); }
.full { width: 100%; }
.demo-hint { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r-m); background: var(--md-sys-color-surface-container); font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.demo-hint .ms { font-size: 18px; color: var(--md-sys-color-tertiary); }
.result-card { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container); }
.done-state { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 16px 0; }
.done-state > .ms { font-size: 48px; color: var(--win); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; }
.done-state.wait > .ms { color: var(--md-sys-color-primary); }
.done-state p { max-width: 44ch; color: var(--md-sys-color-on-surface-variant); }
.avedit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avedit .img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.avedit .img .ini-big { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.5rem/1 var(--ff); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
@media (forced-colors: active) { .st, .h2h, .trophy, .tie, .sched li, .pod .block, .nrow { border: 1px solid CanvasText; } }
.plus-cta.soon .tag { justify-self: start; align-self: center; width: max-content; }

.mytour-img { margin: -16px -16px 0; border-radius: var(--r-xl) var(--r-xl) 0 0; height: 200px; }
.mytour-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.mytour-img .on-img { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 1; }
@media (max-width: 599px) { .mytour-img { height: 160px; } }

#evBody p.sched-note { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
/* ===== Expressive layer (M3 Expressive): springs, shape morphing, transitions, emphasis ===== */
:root {
  /* Spring easing (M3 Expressive "spatial" spring, sampled): a small overshoot, then settle */
  --spring: linear(0, 0.018 2.8%, 0.071 5.7%, 0.285 12.3%, 0.568 19.9%, 0.816 28.2%, 0.977 36.9%, 1.059 45.5%, 1.077 53.4%, 1.061 61.8%, 1.022 76.9%, 1 100%);
  --ease-emph-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
}
/* Pressed buttons square off (round to 12dp) and spring back; selected connected buttons morph to round */
.btn, .icon-btn, .fchip { transition: border-radius 420ms var(--spring), transform 420ms var(--spring), background-color 150ms linear, color 150ms linear, box-shadow 150ms linear; }
.btn:active, .fchip:active { border-radius: var(--r-m); transform: scale(0.97); }
.icon-btn:active { border-radius: var(--r-m); transform: scale(0.94); }
.cbg button { transition: border-radius 420ms var(--spring), transform 420ms var(--spring), background-color 150ms linear, color 150ms linear; }
.cbg button[aria-checked="true"] { border-radius: var(--r-full); }
.cbg button:active { transform: scale(0.97); }
.nav .pill::before { transition: transform 460ms var(--spring); }
/* Page changes: fade-through. The top app bar and nav stay put. */
#topbar { view-transition-name: topbar; }
.nav { view-transition-name: navbar; }
::view-transition-old(root) { animation: 90ms linear both vt-out; }
::view-transition-new(root) { animation: 210ms var(--ease-emph-decel) 90ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: scale(0.98); } }
/* Container transform: a tournament photo grows into the tournament page header */
::view-transition-group(tour-hero) { animation-duration: 500ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(tour-hero), ::view-transition-new(tour-hero) { height: 100%; object-fit: cover; animation-duration: 500ms; }
html[data-vt="container"]::view-transition-new(root) { animation: 260ms var(--ease-emph-decel) 160ms both vt-in; }
/* Tab content: shared axis X, entering from the side you moved towards */
.axis-in { animation: axis-in 300ms var(--ease-emph-decel) both; }
@keyframes axis-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 32px)); } }
/* Ranking rows arrive in a short stagger when you switch event or age group */
.data.stagger tbody tr { animation: row-in 320ms var(--ease-emph-decel) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
/* Wavy circular progress: how close your match is */
.nextm .count { display: inline-flex; align-items: center; gap: 8px; }
.wavy { display: inline-grid; width: 40px; height: 40px; flex: none; }
.wavy path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.wavy .act { stroke: var(--md-sys-color-primary); }
.wavy .trk { stroke: var(--md-sys-color-secondary-container); }
/* Match day: your tournament card becomes the hero surface, in the tournament's own colours */
.mytour { transition: background-color 300ms linear; }
.mytour.matchday { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.mytour.matchday .mytour-h .t-body-m { color: inherit; }
.mytour.matchday .nextm { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .fchip, .cbg button { transition: background-color 150ms linear, color 150ms linear; }
  .btn:active, .fchip:active, .icon-btn:active, .cbg button:active { transform: none; }
  .axis-in, .data.stagger tbody tr { animation: none; }
}
/* ===== Hierarchy and rhythm: tournament draws, next match, clickable cards ===== */
.evpanel { gap: 16px; }
#drawBox { display: grid; min-width: 0; }
.draw { display: grid; gap: 24px; min-width: 0; padding-top: 8px; }
.draw > .evhead + .fmt { margin-top: -8px; }
.evhead { display: grid; gap: 4px; }
.evhead .ev-title { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
.evhead p { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); max-width: 72ch; }
.stage { display: grid; gap: 12px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.stage-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.stage-n { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-primary); }
.stage-h h3 { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.stage-d { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); max-width: 72ch; margin-top: -4px; }
.stage-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.stage-foot .btn { margin-left: -12px; }
.standings-h { padding-top: 16px; }
/* Next match: when on the left, who on the right as a compact versus list, details below */
.nextm { gap: 20px; padding: 20px; }
@media (min-width: 720px) { .nextm { grid-template-columns: minmax(200px, max-content) minmax(0, 1fr); column-gap: 24px; align-items: stretch; } }
.nm-match { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 16px; align-content: center; }
.nm-side, .nm-side:last-child { flex-direction: row; text-align: left; padding: 8px 0; }
.nm-match .v { padding-left: 20px; font: var(--t-label-m); letter-spacing: var(--ls-label-m); }
/* Whole card is the tap target: the title is the link, the rest of the card forwards to it */
.card-link { color: inherit; text-decoration: none; border-radius: var(--r-xs); }
.card-link:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.mytour, .tcard { cursor: pointer; transition: box-shadow 200ms var(--ease-emph); }
@media (hover: hover) {
  .mytour:hover, .tcard:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); }
}
/* Sign in: on-brand welcome. Logo, a warm headline, then the form; full-width actions */
#sheet.sheet-brand .dlg-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.si-hero { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0 16px; margin: 0 -24px 8px; border-radius: var(--r-xl); background: linear-gradient(180deg, var(--md-sys-color-primary-container), transparent); padding-top: 28px; }
.si-logo { display: block; height: 44px; width: auto; margin-bottom: 8px; }
.si-hero .si-h { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); color: var(--md-sys-color-on-surface); max-width: none; }
.si-hero .t-body-m { max-width: 36ch; }
#sheet.sheet-brand .dlg-acts #shSubmit { flex: 1; }
#sheet.sheet-brand .dlg-acts { flex-direction: row-reverse; }
@media (max-width: 599px) { .si-hero { margin: 0 -16px 8px; } }
/* Guests can apply without an account */

/* Signed-out Home: a light prompt inside the public tournament card */

/* Hardening: file errors, destructive confirmations */
.upload .fname.bad, [id$="N"].bad { color: var(--md-sys-color-error); }
#sheet.danger #shSubmit { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
#sheet.danger #shFsSubmit { color: var(--md-sys-color-error); }
.btn.danger { color: var(--md-sys-color-error); }
.bul { display: grid; gap: 8px; padding-left: 20px; margin: 0; }
.bul li { font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
/* v13 */
/* Ranking tiles: expressive colour roles. Rank leads on primary; rating on secondary; win rate on the logo-orange tertiary. */
.tile { position: relative; overflow: hidden; isolation: isolate; }
.tile .tshape { position: absolute; right: -14px; top: -14px; width: 72px; height: 72px; display: grid; place-items: center; clip-path: var(--shape-cookie9); background: color-mix(in srgb, currentColor 12%, transparent); z-index: -1; }
.tile .tshape .ms { font-size: 28px; opacity: 0.7; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; transform: translate(-6px, 6px); }
.tile.t-rank { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.tile.t-rating { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tile.t-win { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.tile.t-form { background: var(--md-sys-color-surface-container-high); }
.tile.t-rank > span, .tile.t-rank small, .tile.t-rank b small, .tile.t-rating > span, .tile.t-rating b small, .tile.t-win > span, .tile.t-win b small { color: inherit; }
.tile.t-rank b { font-size: 2.75rem; line-height: 3.25rem; }
.tile .trow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile .trow small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); }
.tmove { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 8px 0 4px; border-radius: var(--r-s); background: var(--md-sys-color-on-primary); color: var(--md-sys-color-primary); font: var(--t-label-m); letter-spacing: var(--ls-label-m); }
.tmove .ms { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20; }
/* The next round on the path: a short pulse (2 x 2s) when the card appears, then still */
.path2 li.now .node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--md-sys-color-primary); animation: nextPulse 2s cubic-bezier(0.2, 0, 0, 1) 600ms 2 both; pointer-events: none; }
@keyframes nextPulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .path2 li.now .node::after { animation: none; opacity: 0; } }
/* TTRA+ features */
.plus-feats { display: grid; gap: 12px; margin-top: 12px; }
.plus-feats li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.plus-feats .ms { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.plus-feats b { display: block; font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.plus-feats li > span:last-child { font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
/* Passport: player-chosen M3 scheme, full badges, official logo */
.pcard { --pc-p: var(--pc-p-l, var(--md-sys-color-primary)); --pc-op: var(--pc-op-l, var(--md-sys-color-on-primary)); --pc-c: var(--pc-c-l, var(--md-sys-color-primary-container)); --pc-oc: var(--pc-oc-l, var(--md-sys-color-on-primary-container)); background: var(--pc-c); color: var(--pc-oc); transition: background 300ms var(--ease-emph), color 300ms var(--ease-emph); }
.sw { --pc-p: var(--pc-p-l); --pc-c: var(--pc-c-l); --pc-op: var(--pc-op-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pcard, :root:not([data-theme="light"]) .sw { --pc-p: var(--pc-p-d, var(--md-sys-color-primary)); --pc-op: var(--pc-op-d, var(--md-sys-color-on-primary)); --pc-c: var(--pc-c-d, var(--md-sys-color-primary-container)); --pc-oc: var(--pc-oc-d, var(--md-sys-color-on-primary-container)); } }
:root[data-theme="dark"] .pcard, :root[data-theme="dark"] .sw { --pc-p: var(--pc-p-d, var(--md-sys-color-primary)); --pc-op: var(--pc-op-d, var(--md-sys-color-on-primary)); --pc-c: var(--pc-c-d, var(--md-sys-color-primary-container)); --pc-oc: var(--pc-oc-d, var(--md-sys-color-on-primary-container)); }
.pcard .shape { background: var(--pc-p); }
.pcard .pbadges { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.pcard .pbadges > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-l); background: color-mix(in srgb, var(--md-sys-color-surface) 55%, transparent); }
.pcard .pbadges .bshape { width: 52px; height: 52px; display: grid; place-items: center; background: var(--pc-p); color: var(--pc-op); }
.pcard .pbadges .bshape .ms { font-size: 26px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.pcard .pbadges .bt { display: grid; gap: 2px; min-width: 0; }
.pcard .pbadges b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.pcard .pbadges small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); opacity: 0.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.plogo { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-s); background: #FFFFFF; }
.plogo-svg { display: block; height: 20px; width: auto; }
.pcard-foot .pv { display: inline-flex; align-items: center; gap: 8px; font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.pcard-foot .pv small { display: block; font: var(--t-body-s); letter-spacing: var(--ls-body-s); opacity: 0.85; }
.pc-pick { display: grid; gap: 8px; justify-items: center; text-align: center; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sw { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: conic-gradient(var(--pc-c) 0 50%, var(--pc-p) 0 100%); display: grid; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); transition: border-radius 300ms var(--ease-spatial); }
.sw .ms { font-size: 20px; opacity: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--pc-p); color: var(--pc-op); transition: opacity 150ms; }
.sw[aria-checked="true"] { border-radius: var(--r-m); box-shadow: 0 0 0 2px var(--md-sys-color-surface), 0 0 0 4px var(--md-sys-color-on-surface); }
.sw[aria-checked="true"] .ms { opacity: 1; }
/* Stories: cards open the story; the story page is one reading column */
.story h3 .card-link, .text-card .card-link { color: inherit; text-decoration: none; }
.story h3 .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.story h3 .card-link:focus-visible { outline: none; }
.story:has(.card-link:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
@media (hover: hover) { [data-story-card] { cursor: pointer; transition: box-shadow 200ms var(--ease-emph); } [data-story-card]:hover { box-shadow: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15); } }
.st-bar .st-crumb { flex: 1; font: var(--t-title-m); letter-spacing: var(--ls-title-m); color: var(--md-sys-color-on-surface-variant); }
.st-page { display: grid; gap: 24px; max-width: 760px; width: 100%; justify-self: start; }
.st-hero { aspect-ratio: 16 / 9; border-radius: var(--r-xl); }
/*
 * The category pill sits 20px in, not 16px, so its corner is concentric with the hero's.
 *
 * Two rounded corners read as one shape only when inner radius + gap = outer radius. The hero is
 * --r-xl (28px) and the pill is --r-s (8px), so the gap must be 20px: at 16px the inner curve was
 * 4px too tight and the pill looked wedged into the corner rather than seated in it.
 */
.st-hero .on-img { position: absolute; left: 20px; top: 20px; z-index: 1; }
.st-head { display: grid; gap: 12px; }
.st-title { font: var(--t-headline-m); letter-spacing: var(--ls-headline-m); text-wrap: balance; }
@media (min-width: 840px) { .st-title { font: var(--t-display-m); letter-spacing: var(--ls-display-m, 0); } }
.st-title:focus { outline: none; }
.st-dek { font: var(--t-body-l); letter-spacing: var(--ls-body-l); color: var(--md-sys-color-on-surface-variant); max-width: 62ch; }
.st-by { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.st-by .ini { width: 40px; height: 40px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.st-by .who { display: grid; }
.st-by b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.st-by small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.st-body { display: grid; gap: 16px; max-width: 68ch; }
.st-body > p { font: var(--t-body-l); letter-spacing: var(--ls-body-l); }
.st-body > h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); padding-top: 16px; }
.st-list { display: grid; gap: 8px; }
.st-list li { position: relative; padding-left: 24px; font: var(--t-body-l); letter-spacing: var(--ls-body-l); }
.st-list li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--md-sys-color-primary); }
.st-quote { margin: 8px 0; padding: 4px 0; }
.st-quote p { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); color: var(--md-sys-color-on-surface); text-wrap: balance; }
.st-table table.data { min-width: 0; }
.st-table .pcell .who b { font: var(--t-body-m); font-weight: 500; }
.st-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 24px; border-radius: var(--r-xl); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.st-cta h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
.st-cta p { font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
@media (max-width: 599px) { .st-cta { grid-template-columns: minmax(0, 1fr); } }
.st-more { display: grid; gap: 12px; padding-top: 8px; }
.st-more > h3 { font: var(--t-title-l); letter-spacing: var(--ls-title-l); }
/* Page banners: each destination opens on a tonal banner so the title reads as the page title */
.pagehead { position: relative; overflow: hidden; isolation: isolate; margin-top: 16px; padding: 24px 168px 24px 24px; min-height: 128px; align-content: center; border-radius: var(--r-xli); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pagehead p { color: var(--md-sys-color-on-secondary-container); }
.pagehead::before { content: ""; position: absolute; right: 112px; bottom: -36px; width: 88px; height: 88px; border-radius: 50%; background: var(--md-sys-color-primary-container); z-index: -2; }
.ph-art { position: absolute; right: -20px; top: 50%; width: 168px; height: 168px; margin-top: -84px; display: grid; place-items: center; clip-path: var(--shape-cookie12); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); z-index: -1; }
.ph-art .ms { font-size: 56px; transform: translateX(-10px); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48; }
@media (max-width: 599px) { .pagehead { padding: 20px 104px 20px 20px; min-height: 112px; } .ph-art { width: 120px; height: 120px; margin-top: -60px; right: -24px; } .ph-art .ms { font-size: 40px; } .pagehead::before { right: 72px; width: 64px; height: 64px; bottom: -28px; } }
@media (prefers-reduced-motion: no-preference) { .pagehead .ph-art { animation: phIn 700ms cubic-bezier(0.38, 1.21, 0.22, 1) both; } @keyframes phIn { from { transform: rotate(-30deg) scale(0.7); opacity: 0; } } }
/* Rating chart: one line over a soft area; points coloured by direction, with the sign in words */
.rplot { height: 200px; }
.rline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rline .rstroke { fill: none; stroke: var(--md-sys-color-primary); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.rline .rarea { fill: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); stroke: none; }
.rpts { position: absolute; inset: 0; }
.rpt { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.rpt span { width: 10px; height: 10px; border-radius: 50%; background: var(--md-sys-color-primary); box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low); transition: width 200ms var(--ease-spatial), height 200ms var(--ease-spatial); }
.rpt.up span { background: var(--win); } .rpt.down span { background: var(--loss); }
.rpt[aria-current="true"] span { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low), 0 0 0 4px var(--md-sys-color-on-surface); }
.rpt:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 0; }
.rx { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: flex; justify-content: space-between; font: var(--t-label-s); letter-spacing: var(--ls-label-s); color: var(--md-sys-color-on-surface-variant); }
.pkey i.ln { height: 0; width: 18px; border-top: 2px solid var(--md-sys-color-primary); border-radius: 0; background: none; }
.pkey i.dot { width: 10px; height: 10px; border-radius: 50%; } .pkey i.dot.up { background: var(--win); } .pkey i.dot.down { background: var(--loss); }
#meChartSub .move { font: inherit; }
.rchip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border-radius: var(--r-s); font: var(--t-label-l); letter-spacing: var(--ls-label-l); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rchip .ms { font-size: 18px; }
.rchip.up { background: var(--win-container); color: var(--on-win-container); } .rchip.down { background: var(--loss-container); color: var(--on-loss-container); }
/* Trophy cabinet groups */
.cab { display: grid; gap: 16px; }
.bgroup { display: grid; gap: 8px; }

.pcard .pbadges .bshape.g { background: var(--medal-gold); color: var(--on-medal-gold); } .pcard .pbadges .bshape.s { background: var(--medal-silver); color: var(--on-medal-silver); } .pcard .pbadges .bshape.b { background: var(--medal-bronze); color: var(--on-medal-bronze); }
@media (max-width: 599px) { .pagehead .page-title { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); } }
/* Page banners: tonal M3 surfaces with an expressive cookie shape, no photo */
.pagehead { align-content: end; min-height: 144px; }
.pagehead .page-title { color: inherit; }
/* Story page: the reading column plus a side column (next step, more stories) on wide screens, so the width is used */
.st-page { max-width: none; grid-template-columns: minmax(0, 1fr); }
.st-side { display: grid; gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .st-page { grid-template-columns: minmax(0, 700px) minmax(260px, 320px); column-gap: 40px; justify-content: center; max-width: 1080px; justify-self: center; }
  .st-body { max-width: none; }
  .st-hero, .st-head { grid-column: 1 / -1; }
  .st-hero { aspect-ratio: 21 / 9; }
  .st-body { grid-column: 1; }
  .st-side { grid-column: 2; grid-row: 3; position: sticky; top: calc(var(--bar-h) + 16px); }
  .st-side .st-cta { grid-template-columns: minmax(0, 1fr); }
  .st-side .st-more .stories { grid-template-columns: minmax(0, 1fr); }
  .st-side .st-more .story .img { aspect-ratio: 16 / 9; }
}
/* Passport footer: a full-width white bar, so the official logo sits on white as the brand intends */
.pcard .pcard-foot { margin: 4px -20px -20px; padding: 12px 20px; background: #FFFFFF; color: #191C20; border-radius: 0; }
.pcard .pcard-foot .plogo { height: auto; padding: 0; background: none; border-radius: 0; }
.pcard .pcard-foot .plogo-svg { height: 24px; }
.pcard .pcard-foot .pv .ms { color: #0078D0; }
.pcard .pcard-foot .pv small { color: #43474E; opacity: 1; }
.ep-pass .pc-pick { justify-items: start; text-align: left; padding-top: 8px; }
.ep-pass .swatches { justify-content: flex-start; }
/* Emphasized type (M3 Expressive): three clear weight levels.
   Bold (700) for where you are: page and section titles. Semibold (600) for what each item is: card, list and dialog titles.
   Regular (400) for the details, with secondary lines in on-surface-variant. Supporting text goes from 14 to 15. */
:root {
  --t-display-m: 700 2.8125rem/3.25rem var(--ff-brand); --t-display-s: 700 2.25rem/2.75rem var(--ff-brand);
  --t-headline-m: 700 1.75rem/2.25rem var(--ff-brand); --t-headline-s: 700 1.5rem/2rem var(--ff-brand);
  --t-title-l: 700 1.375rem/1.75rem var(--ff-brand); --t-title-m: 600 1rem/1.5rem var(--ff); --t-title-s: 600 0.875rem/1.25rem var(--ff);
  --t-body-m: 400 0.9375rem/1.375rem var(--ff);
  --ls-headline-m: -0.01em; --ls-headline-s: -0.005em; --ls-title-l: -0.005em;
}
/* List item titles are what each row is: semibold, like card titles */
.mtext > .t-body-l, .mtext > b.t-body-l { font-weight: 600; }
/* Semantic colours. Each colour means one thing:
   primary = you and current; tertiary (logo orange) = brand and celebration; error = problems and destructive actions;
   success and warning = custom colours generated with Material Color Utilities from TTRA's source #0078D0 (customColor, harmonised). */
:root { --success: #006C49; --on-success: #FFFFFF; --success-container: #8AF8C2; --on-success-container: #002113;
  --warning: #735C00; --on-warning: #FFFFFF; --warning-container: #FFE087; --on-warning-container: #231A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --success: #6DDBA7; --on-success: #003824; --success-container: #005236; --on-success-container: #8AF8C2;
  --warning: #EDC228; --on-warning: #3C2F00; --warning-container: #574500; --on-warning-container: #FFE087; } }
:root[data-theme="dark"] { --success: #6DDBA7; --on-success: #003824; --success-container: #005236; --on-success-container: #8AF8C2;
  --warning: #EDC228; --on-warning: #3C2F00; --warning-container: #574500; --on-warning-container: #FFE087; }
.st.confirmed { background: var(--success-container); color: var(--on-success-container); }
.places .warn { color: var(--warning); font-weight: 600; }
/* Your own status is primary, never the brand orange */
.tag.you { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
/* Documents are not errors */
.docs .mrow .mplate { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
/* Hierarchy pass: labels to semibold, tighter body tracking and a third text grey. Coloured tiles, match card and tonal buttons are kept. */
:root {
  --t-label-l: 600 0.875rem/1.25rem var(--ff); --t-label-m: 600 0.75rem/1rem var(--ff); --t-label-s: 600 0.6875rem/1rem var(--ff);
  --ls-body-l: 0.005em; --ls-body-m: 0.008em; --ls-body-s: 0.015em;
  --ink-3: #5E636B;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #9A9FA8; } }
:root[data-theme="dark"] { --ink-3: #9A9FA8; }
/* Third grey: timestamps, column headers, chart labels and small print */
.nrow .mtext > .t-body-s, .data th, .pgrid i, .rx, .outlook .fine, .help { color: var(--ink-3); }
/* Draw: round pills. On wide screens every round fits, so the round names are plain headings. */
.bpills { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.bpills::-webkit-scrollbar { display: none; }
.bpill { position: relative; isolation: isolate; flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); font: var(--t-label-l); letter-spacing: var(--ls-label-l); cursor: pointer; transition: background-color 200ms var(--ease-emph), color 200ms var(--ease-emph); }
.bpill[aria-current="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
@media (max-width: 599px) {
  /* Phones: one round at a time, full width so names don't squeeze. The next round peeks in with its connector lines,
     which shows the draw carries on sideways. Columns snap into place. */
  .bpills { display: flex; }
  .bracket-wrap { container-type: inline-size; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bracket-wrap::-webkit-scrollbar { display: none; }
  .bracket { grid-template-columns: repeat(var(--rounds), calc(100cqw - 56px)); column-gap: 28px; min-width: 0; }
  .bround { scroll-snap-align: start; }
  .bround h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* the heading is visually hidden here, so the ties take the whole column height and line up with the round before */
  .bround { grid-template-rows: minmax(0, 1fr); }
  /* Sheets: keep the bottom action bar (Cancel and the filled action) on phones too */
  #sheet.fs .dlg-head .fs-only { display: none; }
  #sheet.fs .dlg-acts.fs-hide { display: flex; flex-wrap: nowrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--md-sys-color-outline-variant); }
  #sheet.fs .dlg-acts.fs-hide #shSubmit:not([hidden]) { flex: 1; }
  #sheet.fs .dlg-acts.no-submit { display: none; }
}
/* Tournament cards: the action row sits at the bottom, so Apply, Confirmed and Order of play line up across a row of cards */
.tcard .tbody { display: flex; flex-direction: column; }
.tcard .tbody > * { min-width: 0; }
.bbox { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Page banner art is round, like the dot in the TTRA logo */
.pagehead .ph-art { clip-path: circle(50%); }
.ph-art .tt-paddle { width: 76px; height: 76px; transform: translateX(-12px); }
@media (max-width: 599px) { .ph-art .tt-paddle { width: 52px; height: 52px; } }
/* Next match: the players' panel hugs its content instead of stretching across the card */
@media (min-width: 720px) { .nextm { grid-template-columns: minmax(200px, max-content) minmax(280px, max-content); justify-content: start; } .nm-match { padding-right: 40px; } }
/* Sign in: no empty grey header strip above the welcome hero. On phones the close button floats over it. */
#sheet.sheet-brand .dlg { position: relative; }
#sheet.sheet-brand .dlg-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: transparent; padding-top: 8px; pointer-events: none; }
#sheet.sheet-brand .dlg-head > * { pointer-events: auto; }
#sheet.sheet-brand .dlg-scroll { padding-top: 0; }
#sheet.sheet-brand .si-hero { border-radius: 0; padding-top: 40px; }
@media (min-width: 600px) { #sheet.sheet-brand .dlg-head { display: none; } }
/* Trophy cabinet: a total, group tabs, then one group as compact rows */
.cab-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.cab-sum .meter { height: 6px; max-width: 320px; }
.cab-tabs { display: flex; padding-top: 0; }
.bpill[aria-selected="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.bpill .n { font-variant-numeric: tabular-nums; opacity: 0.8; margin-left: 2px; }
.badges.brows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.bdg.brow { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px 16px; text-align: left; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); }
.bdg.brow .bshape { grid-row: 1 / span 3; width: 48px; height: 48px; align-self: start; }
.bdg.brow .bshape .ms { font-size: 24px; }
.bdg.brow b, .bdg.brow .bd, .bdg.brow .meter, .bdg.brow .onpass { grid-column: 2; }
.bdg.brow .meter { max-width: 160px; margin-top: 4px; }
.bdg.brow.shown { background: var(--md-sys-color-surface-container); }
/* Search in the top app bar: expands from the icon */
.tsearch { position: absolute; top: 8px; right: var(--ts-right, 8px); width: min(560px, calc(100% - 240px)); z-index: 30; display: grid; gap: 4px; }
.tsbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px 0 16px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); clip-path: inset(0 0 0 calc(100% - 48px) round 24px); transition: clip-path 260ms var(--ease-emph); }
.tsbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--md-sys-color-on-surface); font: var(--t-body-l); letter-spacing: var(--ls-body-l); outline: none; }
.tsbar input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.tsbar:focus-within { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.tsres { max-height: min(70vh, 560px); overflow-y: auto; padding: 4px 16px 16px; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-high); box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.3); opacity: 0; transform: translateY(-8px); transition: opacity 200ms, transform 260ms var(--ease-emph); }
.tsres .gs-hint { padding: 12px 0 0; }
.tsearch.open .tsbar { clip-path: inset(0 round 24px); }
.tsearch.open .tsres { opacity: 1; transform: none; }
.topbar.searching #searchBtn { visibility: hidden; }
@media (max-width: 599px) {
  .tsearch { left: 8px; right: 8px; width: auto; }
  .tsres { max-height: calc(100dvh - var(--bar-h) - 16px); }
}
@media (prefers-reduced-motion: reduce) { .tsbar, .tsres { transition: none; } }
/* Passport photo: a circle at rest that morphs to a cookie on hover or focus */
.pcard .shape { clip-path: var(--shape-circle); }
.pcard .shape:hover, .pcard .shape:focus-visible { clip-path: var(--shape-cookie12); }
.pcard span.shape:hover { clip-path: var(--shape-circle); }
#sheet.sheet-brand .dlg { grid-template-rows: minmax(0, 1fr) auto; }
.tsbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* Profile header: a verified mark instead of the licence number (the number stays in Settings › TTRA record) */
.vmark { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--md-sys-color-primary); font-weight: 600; white-space: nowrap; vertical-align: bottom; }
.vmark .ms { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
/* Final standings: the stage reached is the label, no 3= / 5= numbers */
.stand li { grid-template-columns: minmax(0, 1fr) auto; }
.stand .st-r b { font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
@media (max-width: 599px) { .stand li { grid-template-columns: minmax(0, 1fr) auto; } }
/* Rankings: the section heading is for screen readers only, so it takes no space */
#rankSec > .sec-head { display: contents; }
/* Stat tiles respond to their own width: 4 across when there's room, otherwise 2 by 2; numbers, shapes and form dots scale down in narrow tiles */
.tiles-wrap { container-type: inline-size; }
.tiles-wrap .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 680px) { .tiles-wrap .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { container-type: inline-size; container-name: tile; }
@container tile (max-width: 190px) {
  .tile b { font-size: 1.875rem; line-height: 2.375rem; }
  .tile.t-rank b { font-size: 2.25rem; line-height: 2.75rem; }
  .tile .tshape { width: 56px; height: 56px; right: -16px; top: -16px; }
  .tile .tshape .ms { font-size: 22px; }
  .tile .wls { gap: 2px; }
  .tile .wl { width: 20px; height: 20px; font-size: 0.625rem; }
}
@container tile (max-width: 150px) { .tile b { font-size: 1.625rem; } .tile .wl { width: 18px; height: 18px; } }
/* Long forms (enter a tournament, edit profile, apply to run tournaments) open full screen on every size, with a close button by the title and the content in one centred column */
@media (min-width: 600px) {
  #sheet.wide { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; background: var(--md-sys-color-surface); }
  #sheet.wide .dlg { height: 100%; max-height: 100%; }
  #sheet.wide .dlg-head .lead { display: inline-flex; }
  #sheet.wide .dlg-head { --col: max(24px, calc((100% - 760px) / 2)); padding: 12px var(--col) 12px calc(var(--col) - 12px); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  #sheet.wide .dlg-scroll { padding: 24px max(24px, calc((100% - 760px) / 2)) 32px; }
  #sheet.wide .dlg-acts { padding: 12px max(24px, calc((100% - 760px) / 2)); border-top: 1px solid var(--md-sys-color-outline-variant); }
}
/* Logo link: no underline, a focus ring like other controls */
.brand-home { display: inline-flex; border-radius: var(--r-s); }
.brand-home:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 4px; }
/* Next match: the two players face each other across the panel, so it fills its width with no dead space */
@media (min-width: 720px) { .nextm { grid-template-columns: minmax(200px, max-content) minmax(0, 1fr); } .nm-match { padding-right: 16px; } }
.nm-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px; }
.nm-side, .nm-side:last-child { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0; }
.nm-side .who { display: grid; justify-items: center; }
.nm-side .who b { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.nm-match .v { padding: 0; font: var(--t-title-s); letter-spacing: var(--ls-title-s); color: var(--md-sys-color-on-surface-variant); }
/* Podium: the winner's step is gold */
.pod.p1 .block { background: linear-gradient(180deg, var(--warning-container), color-mix(in srgb, var(--warning-container) 72%, var(--medal-gold))); color: var(--on-warning-container); }
/* Your tournament: the one action sits bottom right of the card */
.mytour-foot { display: flex; justify-content: flex-end; }
@media (max-width: 599px) { .mytour-foot .btn { flex: 1; justify-content: center; } }
.mytour-foot .btn .ms, .tact .btn .ms:last-child { margin-right: -8px; }
/* Sign-in flow: every step uses the same welcome hero */
.si-hero .t-body-m b { color: var(--md-sys-color-on-surface); }
/* Passport: Save, Copy link, Share and Edit stay pinned to the bottom of the sheet, so they're visible however long the card is */
#shBody .pass-acts { position: sticky; bottom: -16px; z-index: 3; justify-content: center; margin: 0 -24px -16px; padding: 12px 24px; background: var(--md-sys-color-surface-container-high); border-top: 1px solid var(--md-sys-color-outline-variant); }
@media (max-width: 599px) { #shBody .pass-acts { bottom: -24px; margin: 0 -16px -24px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #shBody .pass-acts::-webkit-scrollbar { display: none; } #shBody .pass-acts .btn { flex: none; } }
/* About TTRA */
.about-card { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border: 0; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); text-align: left; cursor: pointer; font: inherit; }
.about-card:hover { background: var(--md-sys-color-surface-container-high); }
.about-card:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.about-mark { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.about-t { display: grid; gap: 2px; } .about-t .t-body-m { color: var(--md-sys-color-on-surface-variant); }
.ab-page { display: grid; gap: 16px; }
.ab-head { margin-top: 0; }
.ab-lede { font: var(--t-body-l); letter-spacing: var(--ls-body-l); max-width: 68ch; }
.ab-h { font: var(--t-title-l); letter-spacing: var(--ls-title-l); padding-top: 16px; }
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-radius: var(--r-l); overflow: hidden; }
.ab-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 16px 20px; background: var(--md-sys-color-surface-container-low); }
.ab-steps b { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.ab-steps p, .ab-card p, .ab-card li { font: var(--t-body-m); letter-spacing: var(--ls-body-m); color: var(--md-sys-color-on-surface-variant); }
.ab-n, .ab-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ab-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ab-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.ab-card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); }
.ab-card h4 { font: var(--t-title-m); letter-spacing: var(--ls-title-m); }
.ab-card ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ab-card .btn { justify-self: start; margin-left: -12px; margin-top: auto; }
.ab-eg { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r-m); background: var(--md-sys-color-surface-container); }
.ab-eg .ms { font-size: 20px; color: var(--md-sys-color-primary); }
/* The player app's way in to the organiser console. A quiet band rather than a fourth offer card,
   because it is not something TTRA offers: it is a door for someone who already has one. */
.ab-org { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-top: 8px; padding: 16px 20px; border-radius: var(--r-l); border: 1px solid var(--md-sys-color-outline-variant); }
.ab-org > div { min-width: 0; }
.ab-org .t-body-m { margin-top: 2px; }
.ab-org .btn { flex: none; }
@media (max-width: 599px) { .ab-org { align-items: flex-start; } .ab-org .btn { width: 100%; } }
@media (max-width: 599px) { .ab-calc { grid-template-columns: minmax(0, 1fr); } .ab-steps li { padding: 16px; } }
/* Past tournaments: a calmer row and one summary line under the matches */
.mdetail-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 4px 16px 12px 72px; }
.mdetail-foot p { color: var(--md-sys-color-on-surface-variant); }
.mdetail-foot p b { color: var(--md-sys-color-on-surface); font-weight: 600; }
.mdetail-foot .vmark { margin-left: 0; font-weight: 500; }
@media (max-width: 599px) { .mdetail-foot { padding: 4px 8px 12px 16px; } }
.match .mt .opp > span:last-child { font: var(--t-body-l); letter-spacing: var(--ls-body-l); font-weight: 500; }
/* "vs" sits dead centre between the two players at every size, level with their photos */
.nm-match { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; padding: 16px; }
.nm-match .v { justify-self: center; align-self: start; margin-top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--t-label-l); letter-spacing: 0; }
@media (min-width: 720px) { .nm-match { padding: 16px; } }
/* Phones: every sheet is full screen, wide forms included (the 720px desktop width rule no longer leaks through) */
@media (max-width: 599px) { dialog, dialog.wide, dialog.form-d, #sheet.wide { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; } }
/* Breathing room above the card's action */
.mytour-foot { padding-top: 12px; margin-top: 4px; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
/* Banner art keeps its desktop size on phones; the title wraps beside it */
@media (max-width: 599px) {
  .pagehead { padding: 20px 136px 20px 20px; min-height: 144px; }
  .pagehead .ph-art { width: 168px; height: 168px; margin-top: -84px; right: -40px; }
  .pagehead .ph-art .ms { font-size: 56px; transform: translateX(-18px); }
  .ph-art .tt-paddle { width: 76px; height: 76px; transform: translateX(-18px); }
  .pagehead::before { right: 104px; width: 72px; height: 72px; bottom: -32px; }
}
#aboutSec.top { margin-top: -8px; }
/* Home with no tournament: a nudge and what's open for entry */
.notour { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-low); }
.notour-h { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; }
.notour-h .t-body-m { color: var(--md-sys-color-on-surface-variant); }
.notour-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.notour-list .mrow { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.notour .mytour-foot { border-top: 0; padding-top: 0; margin-top: 0; }
/* Banner art, final: one circle only (no extra dot), the same size and position on every screen,
   bleeding 24px off the right edge, with the icon centred in the visible part of the circle */
.pagehead::before { content: none; }
.pagehead .ph-art, .pagehead .ph-art:is(*) { width: 168px; height: 168px; top: 50%; margin-top: -84px; right: -24px; display: grid; place-items: center; animation: none; }
.pagehead .ph-art .ms, .pagehead .ph-art .tt-paddle { transform: translateX(-12px); }
.pagehead .ph-art .ms { font-size: 64px; width: 64px; height: 64px; line-height: 64px; text-align: center; }
.pagehead .ph-art .tt-paddle { width: 64px; height: 64px; }
.pagehead { padding-right: 168px; }
@media (max-width: 599px) { .pagehead { padding: 20px 160px 20px 20px; min-height: 144px; } .pagehead .ph-art { right: -24px; } .pagehead .ph-art .ms, .pagehead .ph-art .tt-paddle { transform: translateX(-12px); } }
@media (prefers-reduced-motion: no-preference) { .pagehead .ph-art { animation: phIn 700ms cubic-bezier(0.38, 1.21, 0.22, 1) both; } }
/* TTRA+ card: the "Coming soon" tag sits top right, beside the title */
.plus-cta.soon { grid-template-columns: minmax(0, 1fr); }
.plus-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plus-h .tag { flex: none; }
/* Match rows: the games sit in fixed-width cells on the right, so scores line up from row to row; games you won are bold */
.match { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.match .games { display: flex; gap: 4px; font: var(--t-label-m); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }
.match .games span { min-width: 3.25em; height: 24px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--md-sys-color-surface-container); }
.match .games span.gw { color: var(--md-sys-color-on-surface); font-weight: 700; }
@media (max-width: 599px) { .match { grid-template-columns: 24px minmax(0, 1fr) auto; } .match .games { grid-column: 2 / 4; grid-row: 2; flex-wrap: wrap; } .match .icon-btn { grid-row: 1; grid-column: 3; } }
/* Photos: keep faces in frame when a wide photo is cropped short */
.mytour-img img, .tcard .img img, .ev-hero img { object-position: 50% 28%; }
.match .you-lbl { color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
/* No organiser photo: a tonal M3 block with a big trophy cookie and the tournament name */
.img.nophoto { position: relative; overflow: hidden; display: grid; align-content: end; padding: 16px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.img.nophoto .np-art { position: absolute; right: -28px; top: -28px; width: 168px; height: 168px; display: grid; place-items: center; clip-path: var(--shape-cookie12); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.img.nophoto .np-art .ms { font-size: 64px; transform: translate(-12px, 12px); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48; }
.img.nophoto .np-name { position: relative; max-width: 70%; font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); text-wrap: balance; }
.tcard .img.nophoto .np-name { display: none; }
.tcard .img.nophoto .np-art { right: 50%; top: 50%; margin: -84px -84px 0 0; }
.tcard .img.nophoto .np-art .ms { transform: none; }
/* Small confirm and re-auth dialogs: centred cards on every size (never full screen) */
dialog.mini-d { width: min(400px, calc(100vw - 48px)); max-width: calc(100vw - 48px); height: fit-content; max-height: calc(100% - 48px); margin: auto; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-high); }
@media (max-width: 599px) { dialog.mini-d { width: min(400px, calc(100vw - 48px)); max-width: calc(100vw - 48px); height: fit-content; max-height: calc(100% - 48px); margin: auto; border-radius: var(--r-xl); } }
.dlg.mini { display: grid; gap: 16px; padding: 24px; max-height: none; height: auto; }
.dlg.mini h2 { font: var(--t-headline-s); letter-spacing: var(--ls-headline-s); }
.dlg.mini .t-body-m { color: var(--md-sys-color-on-surface-variant); }
.dlg.mini .dlg-acts { padding: 8px 0 0; }
#reauthDlg .full { width: 100%; justify-content: center; }
.btn.danger { color: var(--md-sys-color-error); }
/* Offline banner inside a form */
.sh-banner { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 8px 12px 16px; border-radius: var(--r-l); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.sh-banner .btn { color: inherit; }
@media (max-width: 599px) { .sh-banner { grid-template-columns: 24px minmax(0, 1fr); } .sh-banner .btn { grid-column: 2; justify-self: start; margin-left: -12px; } }
#raH { display: block; }
/* ===== Entry flow (TTRA public entry, 5 steps) ===== */
.estrip { list-style: none; margin: 0 0 4px; padding: 0; display: flex; align-items: center; gap: 8px; }
.estrip li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.estrip li:not(:last-child)::after { content: ""; width: 24px; height: 2px; border-radius: 1px; background: var(--md-sys-color-outline-variant); flex: none; }
.estrip li.done:not(:last-child)::after { background: var(--md-sys-color-primary); }
.estrip .em { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font: var(--t-label-l); letter-spacing: 0; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.estrip .em .ms { font-size: 18px; }
.estrip li.now .em, .estrip li.done .em { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.estrip .el { font: var(--t-label-l); letter-spacing: var(--ls-label-l); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.estrip li.now .el { color: var(--md-sys-color-on-surface); }
.estrip li:not(.now) .el { display: none; }
@media (min-width: 720px) { .estrip li:not(.now) .el { display: inline; } }
.ehead { display: grid; gap: 8px; }
.eyebrow { font: var(--t-label-m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-sys-color-primary); }
.echoices { display: grid; gap: 8px; }
.echoice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; text-align: left; font: inherit; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r-l); cursor: pointer; }
.echoice:hover { background: var(--md-sys-color-surface-container-low); }
.echoice:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.echoice > .ms { color: var(--md-sys-color-on-surface-variant); flex: none; }
.echoice .t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.echoice .t b { font: var(--t-body-l); letter-spacing: var(--ls-body-l); font-weight: 600; }
.echoice .t span { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: var(--md-sys-color-on-surface-variant); }
.echoice[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.echoice[aria-pressed="true"] > .ms, .echoice[aria-pressed="true"] .t span, .echoice[aria-pressed="true"] .efee small { color: inherit; }
.echoice[data-blocked] { cursor: not-allowed; background: var(--md-sys-color-surface-container-low); border-color: transparent; color: var(--md-sys-color-on-surface-variant); }
.echoice[data-blocked] .t b { font-weight: 500; }
.efee { display: grid; justify-items: end; flex: none; }
.efee b { font: var(--t-title-s); font-variant-numeric: tabular-nums; }
.efee small { font: var(--t-label-s); color: var(--md-sys-color-on-surface-variant); }
.enote { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-radius: var(--r-m); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.enote b { color: var(--md-sys-color-on-surface); }
.enote.warn { background: var(--warning-container); color: var(--on-warning-container); }
.enote.warn b { color: inherit; }
.etotal { font: var(--t-body-l); letter-spacing: var(--ls-body-l); }
.etotal:empty { display: none; }
.ebank { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); border: 1px solid var(--md-sys-color-outline-variant); }
.ebank dl { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.ebank dt { font: var(--t-label-m); color: var(--md-sys-color-on-surface-variant); align-self: center; }
.ebank dd { margin: 0; font: var(--t-body-m); overflow-wrap: anywhere; }
.ebank .btn { justify-self: start; }
.num { font-variant-numeric: tabular-nums; }
.ebank dd.num { letter-spacing: 0.03em; }
.ebreak, .ereview { display: grid; }
.er { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.er:last-child { border-bottom: 0; }
.ebreak .er .v { text-align: right; }
.ebreak .er.tot { font-weight: 700; }
.ereview .er .k { grid-column: 1; font: var(--t-label-m); letter-spacing: var(--ls-label-m); color: var(--md-sys-color-on-surface-variant); }
.ereview .er .v { grid-column: 1; font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.ereview .er .btn { grid-column: 2; grid-row: 1 / span 2; }
.eref { display: grid; gap: 4px; padding: 20px 24px; border-radius: var(--r-xl); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.eref .eyebrow { color: inherit; }
.eref b { font: 700 1.75rem/2.25rem var(--ff-brand); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.enext { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.enext li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font: var(--t-body-m); letter-spacing: var(--ls-body-m); }
.enext .ms { color: var(--md-sys-color-primary); }
.fsec h3 small { font: var(--t-label-m); color: var(--md-sys-color-on-surface-variant); margin-left: 8px; }

/* Players on your account: rows lead with the player's avatar */
.srow.pl { grid-template-columns: 40px minmax(0, 1fr) auto; }
.mrow.pl { grid-template-columns: 40px minmax(0, 1fr) auto; }
.mrow.pl .pav-s, .srow.pl .pav-s { justify-self: center; }
.sg-note { padding: 8px 16px 0; }
.acct-sub { font: var(--t-title-s); letter-spacing: var(--ls-title-s); color: var(--md-sys-color-on-surface-variant); margin: 8px 0 4px; }
.acct-sub + .mlist { margin-bottom: 8px; }
.mrow.danger .mtext .t-body-l, .mrow.danger .mplate .ms { color: var(--md-sys-color-error); }

/* Profile switcher: you, then each player you manage (M3 filter chips with avatars) */
.pswitch-wrap { padding: 16px 0 0; }
.pswitch { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pswitch::-webkit-scrollbar { display: none; }
.pswitch-b { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 4px; border-radius: 20px; border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); font: var(--t-label-l); letter-spacing: var(--ls-label-l); white-space: nowrap; cursor: pointer; flex: none; }
.pswitch-b[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.pswitch-b .ck { font-size: 18px; margin-left: -2px; }
.pswitch-b:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.pswitch-b[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container)); }
.mp-av { display: grid; place-items: center; background: var(--md-sys-color-primary-container); overflow: hidden; }
.mp-av .ini-big { font: 600 2.25rem/1 var(--ff); color: var(--md-sys-color-on-primary-container); }
.mp-by { display: inline-flex; align-items: center; gap: 4px; }
.mp-foot { display: flex; gap: 8px; align-items: center; padding: 0 4px 16px; }
#mpIn .match { grid-template-columns: 24px minmax(0, 1fr) auto; }
#mpIn .match > span:last-child:empty { display: none; }
.mrow > .pav-s { justify-self: center; }

/* Home: two or more of your players in the same tournament. One card, a tab per player (soonest first), a heads-up when matches are close */
.tp-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tab { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 12px; border-radius: var(--r-l); border: 1px solid var(--md-sys-color-outline); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; flex: none; }
.tp-tab[aria-selected="true"] { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border-color: transparent; box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.tp-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.tp-l { display: grid; gap: 2px; }
.tp-l b { font: var(--t-label-l); letter-spacing: var(--ls-label-l); }
.tp-l small { font: var(--t-body-s); letter-spacing: var(--ls-body-s); color: inherit; opacity: .85; }
.tp-panel { display: grid; gap: 16px; }
.tp-ev { color: var(--md-sys-color-on-surface-variant); margin-bottom: -8px; }

/* Match-day what-ifs: playing each other, knocked out, moved; and Home alerts for players you manage */
.tp-each { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.tp-out .nm-when { display: grid; gap: 8px; align-content: start; }
.tp-out .nm-meta .games { display: flex; gap: 4px; flex-wrap: wrap; font: var(--t-label-m); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }
.tp-out .nm-meta .games span { min-width: 3.25em; height: 24px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--md-sys-color-surface-container); }
.tp-out .nm-meta .games span.gw { color: var(--md-sys-color-on-surface); font-weight: 700; }
.tag.moved { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: transparent; }
#homeAlerts { display: grid; gap: 8px; }
.halert { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-l); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.halert .mplate { background: var(--md-sys-color-surface); color: var(--md-sys-color-error); }
.halert .mtext { display: grid; gap: 2px; min-width: 0; }
.halert .t-body-m { color: inherit; }
@media (max-width: 599px) { .halert { grid-template-columns: 40px minmax(0, 1fr); } .halert .btn { grid-column: 2; justify-self: start; } }

/* Several tournament cards: clear spacing, and only the soonest one in the match-day colour */
#homeTour { display: grid; gap: 24px; }
.mytour.later { background: var(--md-sys-color-surface-container); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.mytour-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }

/* Groups in progress */
.grp-mini { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); }
.grp-mini-h { display: grid; gap: 2px; }
.grp-mini-h b { font: var(--t-title-s); letter-spacing: var(--ls-title-s); }
.grp-mini-h span { font: var(--t-body-m); color: var(--md-sys-color-on-surface-variant); }
.grp-rank { display: grid; gap: 2px; }
.grp-rank li { display: grid; grid-template-columns: 16px 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-s); background: var(--md-sys-color-surface-container); font: var(--t-body-m); }
.grp-rank li.me { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 600; }
.grp-rank .pos { font: var(--t-label-l); color: inherit; text-align: center; }
.grp-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-rank .wl2 { font: var(--t-label-l); font-variant-numeric: tabular-nums; }
.grp-note { color: var(--md-sys-color-on-surface-variant); }
.gm-h { font: var(--t-title-s); letter-spacing: var(--ls-title-s); margin: 16px 0 8px; }

/* News cards: room to breathe (16dp phones, 24dp wider) */
.stories { gap: 16px; }
@media (min-width: 840px) { .stories { gap: 24px; } }

/* Scrolling chip and tab rows keep 2px for the focus ring without shifting off the content edge */
.tp-tabs, .pswitch { margin: -2px; }
.mp-foot { padding: 16px 0; }
/* Inside a tournament card every block shares the card's inner radius */
.mytour .enote { border-radius: var(--r-l); }
/* With the switcher above it, the profile starts 16dp under the chips (the switcher takes the section's top space) */
.pswitch-wrap:not([hidden]) + #meIn > .sec:first-child, .pswitch-wrap:not([hidden]) ~ #mpIn > .sec:first-child { padding-top: 16px; }

/* Sign-in box, Organiser side (owner, 2026-11-08): the Apply door first, the console sign-in as the quieter way in. */
.si-player, .si-org { display: grid; gap: 12px; }
.si-org[hidden], .si-player[hidden] { display: none; }
.si-org .t-title-m { margin: 8px 0 0; }
.si-org .muted { margin: 0; }
.si-org-alt { margin: 4px 0 0; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.si-org-alt a { color: var(--md-sys-color-primary); font-weight: 500; text-decoration: none; }
.si-org-alt a:hover { text-decoration: underline; }