/* Pitchwise — generated by scripts/build_web.py from tokens/tokens.json. Don't edit by hand. */
/* The bundled cuts. The app uses the same files, so web and app render identically without Google Fonts. */
@font-face { font-family: "Pitchwise Display"; src: url("../fonts/PitchwiseDisplay-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Pitchwise Display"; src: url("../fonts/PitchwiseDisplay-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono Condensed"; src: url("../fonts/MartianMono-CondensedMedium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono Condensed"; src: url("../fonts/MartianMono-CondensedSemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* Light is the default. Dark applies with data-theme="dark" on any ancestor, or automatically from the OS
   unless data-theme="light" is set on the root. */

:root, [data-theme="light"] {
  color-scheme: light;
  --white: #ffffff;
  --bone: #f7f6f4;
  --ash: #eceae6;
  --ink-900: #1c1b19;
  --night-900: #14120f;
  --night-800: #1f1c18;
  --night-700: #2a2621;
  --paper-50: #f5f1ea;
  --stone-500: #66635e;
  --stone-300: #ada69d;
  --royal-100: #dce6ff;
  --royal-200: #9aafff;
  --royal-400: #3b5cf0;
  --royal-500: #2448d8;
  --royal-700: #1c39b0;
  --royal-900: #1e2a55;
  --ember-600: #c2410c;
  --pitch-600: #2e6b3f;
  --pitch-500: #2f7a44;
  --pitch-200: #7fc795;
  --turf-600: #0a8a74;
  --turf-400: #26a69a;
  --gold-600: #b8860b;
  --crimson-600: #c81e3a;
  --crimson-500: #d42e47;
  --crimson-200: #ff8a8f;
  --amber-400: #f5b83d;
  --amber-800: #8a5a00;
  --royal-line: #4b6df0;
  --royal-line-dark: #6683f7;
  --bone-line: #dbd7ce;
  --night-line: #36312a;
  --ground: var(--bone);
  --surface: var(--white);
  --surface-sunken: var(--ash);
  --border: rgba(29, 26, 22, 0.14);
  --border-strong: rgba(29, 26, 22, 0.32);
  --ink: var(--ink-900);
  --ink-muted: var(--stone-500);
  --brand: var(--royal-500);
  --brand-pressed: var(--royal-700);
  --on-brand: var(--white);
  --brand-text: var(--royal-500);
  --brand-tint: var(--royal-100);
  --moment: var(--ember-600);
  --on-moment: var(--white);
  --pitch: var(--pitch-600);
  --on-pitch: var(--white);
  --success-text: var(--pitch-600);
  --danger: var(--crimson-600);
  --on-danger: var(--white);
  --danger-text: var(--crimson-600);
  --warning: var(--amber-400);
  --on-warning: var(--ink-900);
  --warning-text: var(--amber-800);
  --footage-pitch: var(--pitch-600);
  --line-on-brand: var(--royal-line);
  --line-on-ground: var(--bone-line);
  --chalk-line: rgba(255, 255, 255, 0.55);
  --scrim: rgba(20, 18, 15, 0.62);
  --overlay-hover: rgba(28, 27, 25, 0.04);
  --overlay-pressed: rgba(28, 27, 25, 0.08);
  --backdrop: rgba(20, 18, 15, 0.48);
  --skeleton: var(--ash);
  --skeleton-shine: rgba(255, 255, 255, 0.6);
  --data-1: var(--royal-500);
  --data-2: var(--ember-600);
  --data-3: var(--turf-600);
  --data-4: var(--gold-600);
  --data-5: var(--stone-500);
  --data-seq-1: #dce6ff;
  --data-seq-2: #9aafff;
  --data-seq-3: #5b78f2;
  --data-seq-4: #2448d8;
  --data-seq-5: #1e2a55;
  --data-mid: #c9c5be;
  --data-grid: rgba(28, 27, 25, 0.10);
  --data-grid-strong: rgba(28, 27, 25, 0.28);
  --club-primary: var(--brand);
  --club-secondary: var(--surface-sunken);
  --on-club: var(--white);
  --shadow-raised: 0 1px 2px rgba(29, 26, 22, 0.08);
  --shadow-card: 0 1px 2px rgba(29, 26, 22, 0.06), 0 6px 20px -6px rgba(29, 26, 22, 0.12);
  --shadow-float: 0 12px 32px -8px rgba(29, 26, 22, 0.22);
  --shadow-modal: 0 24px 64px -12px rgba(29, 26, 22, 0.32);
  --focus-ring: 0 0 0 2px #f7f6f4, 0 0 0 4px #2448d8;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--night-900);
  --surface: var(--night-800);
  --surface-sunken: var(--night-700);
  --border: rgba(245, 241, 234, 0.14);
  --border-strong: rgba(245, 241, 234, 0.32);
  --ink: var(--paper-50);
  --ink-muted: var(--stone-300);
  --brand: var(--royal-400);
  --brand-pressed: var(--royal-500);
  --on-brand: var(--white);
  --brand-text: var(--royal-200);
  --brand-tint: var(--royal-900);
  --moment: var(--ember-600);
  --on-moment: var(--white);
  --pitch: var(--pitch-500);
  --on-pitch: var(--white);
  --success-text: var(--pitch-200);
  --danger: var(--crimson-500);
  --on-danger: var(--white);
  --danger-text: var(--crimson-200);
  --warning: var(--amber-400);
  --on-warning: var(--ink-900);
  --warning-text: var(--amber-400);
  --footage-pitch: var(--pitch-600);
  --line-on-brand: var(--royal-line-dark);
  --line-on-ground: var(--night-line);
  --chalk-line: rgba(255, 255, 255, 0.55);
  --scrim: rgba(20, 18, 15, 0.7);
  --overlay-hover: rgba(245, 241, 234, 0.06);
  --overlay-pressed: rgba(245, 241, 234, 0.12);
  --backdrop: rgba(0, 0, 0, 0.6);
  --skeleton: var(--night-700);
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  --data-1: var(--royal-400);
  --data-2: var(--ember-600);
  --data-3: var(--turf-400);
  --data-4: var(--gold-600);
  --data-5: var(--stone-300);
  --data-seq-1: #1e2a55;
  --data-seq-2: #24399a;
  --data-seq-3: #3b5cf0;
  --data-seq-4: #7f96f8;
  --data-seq-5: #dce6ff;
  --data-mid: #4a443c;
  --data-grid: rgba(245, 241, 234, 0.10);
  --data-grid-strong: rgba(245, 241, 234, 0.28);
  --club-primary: var(--brand);
  --club-secondary: var(--surface-sunken);
  --on-club: var(--white);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);
  --focus-ring: 0 0 0 2px #14120f, 0 0 0 4px #9aafff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: var(--night-900);
    --surface: var(--night-800);
    --surface-sunken: var(--night-700);
    --border: rgba(245, 241, 234, 0.14);
    --border-strong: rgba(245, 241, 234, 0.32);
    --ink: var(--paper-50);
    --ink-muted: var(--stone-300);
    --brand: var(--royal-400);
    --brand-pressed: var(--royal-500);
    --on-brand: var(--white);
    --brand-text: var(--royal-200);
    --brand-tint: var(--royal-900);
    --moment: var(--ember-600);
    --on-moment: var(--white);
    --pitch: var(--pitch-500);
    --on-pitch: var(--white);
    --success-text: var(--pitch-200);
    --danger: var(--crimson-500);
    --on-danger: var(--white);
    --danger-text: var(--crimson-200);
    --warning: var(--amber-400);
    --on-warning: var(--ink-900);
    --warning-text: var(--amber-400);
    --footage-pitch: var(--pitch-600);
    --line-on-brand: var(--royal-line-dark);
    --line-on-ground: var(--night-line);
    --chalk-line: rgba(255, 255, 255, 0.55);
    --scrim: rgba(20, 18, 15, 0.7);
    --overlay-hover: rgba(245, 241, 234, 0.06);
    --overlay-pressed: rgba(245, 241, 234, 0.12);
    --backdrop: rgba(0, 0, 0, 0.6);
    --skeleton: var(--night-700);
    --skeleton-shine: rgba(255, 255, 255, 0.06);
    --data-1: var(--royal-400);
    --data-2: var(--ember-600);
    --data-3: var(--turf-400);
    --data-4: var(--gold-600);
    --data-5: var(--stone-300);
    --data-seq-1: #1e2a55;
    --data-seq-2: #24399a;
    --data-seq-3: #3b5cf0;
    --data-seq-4: #7f96f8;
    --data-seq-5: #dce6ff;
    --data-mid: #4a443c;
    --data-grid: rgba(245, 241, 234, 0.10);
    --data-grid-strong: rgba(245, 241, 234, 0.28);
    --club-primary: var(--brand);
    --club-secondary: var(--surface-sunken);
    --on-club: var(--white);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px -6px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);
    --focus-ring: 0 0 0 2px #14120f, 0 0 0 4px #9aafff;
  }
}

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --page-gutter: 20px;
  --page-gutter-desktop: 64px;
  --tap-target: 44px;
  --border-width: 1px;
  --content-max: 768px;
  --page-max: 1200px;
  --grid-columns-phone: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
  --grid-gutter: 16px;
  --grid-gutter-desktop: 24px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --border-strong-width: 1.5px;
  --border-focus-width: 2px;
  --safe-area-min: 16px;
  --duration-tap: 120ms;
  --duration-standard: 200ms;
  --duration-screen: 320ms;
  --duration-hero: 480ms;
  --duration-draw: 1600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-backdrop: 400;
  --z-sheet: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --opacity-disabled: 0.4;
  --opacity-secondary-icon: 0.64;
  --opacity-scrim: 0.62;
  --opacity-overlay-text: 0.8;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --font-display: "Mona Sans", "Pitchwise Display", "Work Sans", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Martian Mono", "Martian Mono Condensed", "SF Mono", ui-monospace, Menlo, monospace;
}

/* Put .pw-root on <body> (or any container) for the page ground, ink and body text. Nothing here is global. */
.pw-root { background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.pw-type-display { font-family: var(--font-display); font-size: 40px; line-height: 40px; font-weight: 900; letter-spacing: -0.01em; font-stretch: 112.5%; text-transform: uppercase; }
.pw-type-title-1 { font-family: var(--font-display); font-size: 28px; line-height: 30px; font-weight: 900; letter-spacing: -0.01em; font-stretch: 112.5%; text-transform: uppercase; }
.pw-type-title-2 { font-family: var(--font-display); font-size: 20px; line-height: 23px; font-weight: 900; letter-spacing: -0.005em; font-stretch: 112.5%; text-transform: uppercase; }
.pw-type-title-3 { font-family: var(--font-display); font-size: 16px; line-height: 19px; font-weight: 800; letter-spacing: 0em; font-stretch: 112.5%; text-transform: uppercase; }
.pw-type-score-xl { font-family: var(--font-display); font-size: 60px; line-height: 56px; font-weight: 900; letter-spacing: -0.02em; font-stretch: 112.5%; }
.pw-type-score { font-family: var(--font-display); font-size: 34px; line-height: 34px; font-weight: 900; letter-spacing: -0.01em; font-stretch: 112.5%; }
.pw-type-stat { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 900; letter-spacing: 0em; font-stretch: 112.5%; }
.pw-type-body-lg { font-family: var(--font-body); font-size: 17px; line-height: 26px; font-weight: 400; }
.pw-type-body { font-family: var(--font-body); font-size: 15px; line-height: 22px; font-weight: 400; }
.pw-type-body-sm { font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 400; }
.pw-type-caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 500; }
.pw-type-label { font-family: var(--font-body); font-size: 14px; line-height: 18px; font-weight: 500; }
.pw-type-button { font-family: var(--font-body); font-size: 15px; line-height: 20px; font-weight: 500; }
.pw-type-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; font-stretch: 87.5%; text-transform: uppercase; }
.pw-type-chip { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; font-stretch: 87.5%; text-transform: uppercase; }
.pw-type-badge { font-family: var(--font-mono); font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.06em; font-stretch: 87.5%; text-transform: uppercase; }

/* Pitchwise components. Every selector is scoped under a .pw- class; values come only from tokens.css. */
/* Mona Sans is set expanded (112.5%) inside components; Martian Mono is pinned to 87.5%. */
[class^="pw-"], [class*=" pw-"] { font-stretch: 112.5%; }
.pw-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.pw-col { display: flex; flex-direction: column; gap: var(--space-3); }
.pw-cap { font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }

/* Button */
.pw-btn { font: 500 15px/20px var(--font-body); border-radius: var(--radius-full); padding: var(--space-3) var(--space-6); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); box-sizing: border-box; }
.pw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pw-btn--primary { background: var(--brand); color: var(--on-brand); }
.pw-btn--primary:active, .pw-btn--primary.is-pressed { background: var(--brand-pressed); }
.pw-btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.pw-btn--ghost { background: transparent; color: var(--brand-text); padding-left: var(--space-3); padding-right: var(--space-3); }
.pw-btn--danger { background: var(--danger); color: var(--on-danger); }
.pw-btn--on-brand { background: var(--white); color: var(--royal-500); }
.pw-btn--sm { font-size: 13px; line-height: 18px; padding: var(--space-2) var(--space-4); min-height: 36px; }
.pw-btn--block { width: 100%; }
.pw-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Chip and badge */
.pw-chip { font: 500 12px/16px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-full); padding: 7px var(--space-4); background: var(--surface); color: var(--ink); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pw-chip.is-selected { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.pw-badge { font: 600 10px/12px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-full); padding: 4px 9px; display: inline-flex; align-items: center; gap: 4px; }
.pw-badge--moment { background: var(--moment); color: var(--on-moment); }
.pw-badge--pitch { background: var(--pitch); color: var(--on-pitch); }
.pw-badge--warning { background: var(--warning); color: var(--on-warning); }
.pw-badge--danger { background: var(--danger); color: var(--on-danger); }
.pw-badge--brand { background: var(--brand-tint); color: var(--ink); }
.pw-badge--neutral { background: var(--surface-sunken); color: var(--ink); }
.pw-wdl { font: 600 10px/12px var(--font-mono); border-radius: var(--radius-xs); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-stretch: 87.5%; }
.pw-wdl--w { background: var(--pitch); color: var(--on-pitch); }
.pw-wdl--d { background: var(--surface-sunken); color: var(--ink); }
.pw-wdl--l { background: var(--danger); color: var(--on-danger); }

/* Card */
.pw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-sizing: border-box; }
.pw-card--sunken { background: var(--surface-sunken); border-color: transparent; }
.pw-card--brand { background: var(--brand); color: var(--on-brand); border-color: transparent; position: relative; overflow: hidden; }
.pw-card--float { box-shadow: var(--shadow-card); }

/* Field */
.pw-field { display: flex; flex-direction: column; gap: 6px; }
.pw-field label { font: 500 14px/18px var(--font-body); color: var(--ink); }
.pw-input { font: 400 15px/20px var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: var(--tap-target); box-sizing: border-box; width: 100%; }
.pw-input::placeholder { color: var(--ink-muted); }
.pw-input:focus, .pw-input.is-focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.pw-input.is-error { border-color: var(--danger); }
.pw-help { font: 500 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-help.is-error { color: var(--danger-text); }

/* Toggle */
.pw-toggle { display: inline-flex; align-items: center; gap: var(--space-3); font: 500 14px/18px var(--font-body); }
.pw-toggle i { width: 48px; height: 28px; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-strong); position: relative; flex: none; }
.pw-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.pw-toggle.is-on i { background: var(--brand); box-shadow: none; }
.pw-toggle.is-on i::after { left: 23px; }

/* Segmented control and pill tabs */
.pw-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.pw-seg span { font: 500 13px/18px var(--font-body); padding: 7px var(--space-4); border-radius: var(--radius-full); color: var(--ink-muted); }
.pw-seg span.is-selected { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.pw-tabs { display: flex; gap: var(--space-2); overflow: hidden; }

/* Stat */
.pw-stat .v { font: 800 22px/26px var(--font-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.pw-stat .v.is-brand { color: var(--brand-text); }
.pw-stat .l { font: 500 10px/12px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; }
.pw-stat--xl .v { font-size: 36px; line-height: 36px; letter-spacing: -0.02em; }

/* Footage placeholder (a drawn pitch, used wherever real footage would sit) */
.pw-footage { display: block; width: 100%; background: var(--footage-pitch); }

/* Match card */
.pw-match { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pw-match .body { padding: var(--space-3) var(--space-4) var(--space-4); }
.pw-match .row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.pw-match .t { font: 900 16px/19px var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.pw-match .m { font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.pw-match .sc { font: 800 36px/36px var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }

/* List row */
.pw-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.pw-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: var(--tap-target); box-sizing: border-box; border-top: 1px solid var(--border); font: 400 15px/20px var(--font-body); }
.pw-row:first-child { border-top: 0; }
.pw-row .grow { flex: 1; min-width: 0; }
.pw-row .sub { display: block; font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.pw-row .end { font: 800 18px/22px var(--font-display); white-space: nowrap; }

/* Tab bar */
.pw-tabbar { display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-2) 0 var(--space-5); }
.pw-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 11px/14px var(--font-body); color: var(--ink-muted); text-decoration: none; min-width: 64px; }
.pw-tabbar a.is-active { color: var(--brand-text); }
.pw-tabbar svg { width: 24px; height: 24px; }

/* Video overlay: always dark, whatever the theme */
.pw-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); }
.pw-video .scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3) var(--space-4); background: var(--scrim); display: flex; align-items: center; gap: var(--space-3); font: 500 14px/18px var(--font-body); }
.pw-video .bug { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--scrim); border-radius: var(--radius-sm); padding: 4px 10px; font: 900 15px/22px var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.pw-video .rec { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--scrim); border-radius: var(--radius-full); padding: 4px 10px; font: 500 10px/14px var(--font-mono); letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; font-stretch: 87.5%; }
.pw-video .rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: block; }

/* Team layer: club colours arrive as --club-primary, --club-secondary, --on-club on the element */
.pw-player { width: 168px; height: 236px; border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--club-primary); color: var(--on-club); flex: none; }
.pw-player .kit { position: absolute; inset: 0 0 56% 0; background: var(--club-primary); }
.pw-player .kit.stripes { background: repeating-linear-gradient(90deg, var(--club-primary) 0 16px, var(--club-secondary) 16px 32px); }
.pw-player .kit.hoops { background: repeating-linear-gradient(180deg, var(--club-primary) 0 13px, var(--club-secondary) 13px 24px); }
.pw-player .kit.halves { background: linear-gradient(90deg, var(--club-primary) 0 50%, var(--club-secondary) 50% 100%); }
.pw-player .kit.plain { border-bottom: 4px solid var(--club-secondary); box-sizing: border-box; }
.pw-player .badge { position: absolute; left: 10px; top: 10px; width: 26px; height: 30px; }
.pw-player .num { position: absolute; right: 10px; top: 92px; font: 800 64px/56px var(--font-display); letter-spacing: -0.04em; }
.pw-player .nm { position: absolute; left: 12px; top: 112px; font: 900 17px/18px var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; max-width: 90px; }
.pw-player .st { position: absolute; left: 12px; bottom: 34px; display: flex; gap: var(--space-3); font: 500 8px/10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-stretch: 87.5%; }
.pw-player .st b { display: block; font: 800 18px/20px var(--font-display); }
.pw-tag { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 3px 6px; font: 700 7px/8px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--white); color: var(--ink-900); outline: 1px dashed rgba(29, 26, 22, 0.3); outline-offset: -3px; }
.pw-tag img { height: 7px; }
.pw-teamhead { position: relative; height: 150px; background: var(--club-primary); color: var(--on-club); overflow: hidden; border-radius: var(--radius-lg); }
.pw-teamhead .kit { position: absolute; inset: 0 0 58px 0; background: repeating-linear-gradient(90deg, var(--club-primary) 0 20px, var(--club-secondary) 20px 40px); }
.pw-teamhead .badge { position: absolute; left: 16px; top: 64px; width: 34px; height: 40px; }
.pw-teamhead .nm { position: absolute; left: 16px; bottom: 12px; font: 900 22px/24px var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.pw-teamhead .nm small { display: block; font: 500 10px/14px var(--font-mono); letter-spacing: 0.06em; opacity: 0.9; margin-top: 2px; font-stretch: 87.5%; }

/* Logo: show the right file for the theme */
.pw-logo-dark { display: none; }
[data-theme="dark"] .pw-logo-light { display: none; }
[data-theme="dark"] .pw-logo-dark { display: inline-block; }
[data-theme="dark"] [data-theme="light"] .pw-logo-light { display: inline-block; }
[data-theme="dark"] [data-theme="light"] .pw-logo-dark { display: none; }

/* Drawn footage */
.pw-f-ground { fill: var(--footage-pitch); }
.pw-f-stripe { fill: rgba(255, 255, 255, 0.05); }
.pw-f-line { fill: none; stroke: var(--chalk-line); stroke-width: 2; }
.pw-f-ball { fill: var(--white); }
.pw-f-us { fill: var(--white); }
.pw-f-them { fill: var(--moment); }

/* Pitch geometry: thick, tone-on-tone, drawn on when it appears */
.pw-geo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pw-geo .ln { fill: none; stroke: var(--line-on-brand); stroke-width: var(--sw, 15); stroke-linejoin: miter; }
.pw-geo .sp { fill: var(--line-on-brand); }
.pw-geo.on-ground .ln { stroke: var(--line-on-ground); }
.pw-geo.on-ground .sp { fill: var(--line-on-ground); }
/* the dash only exists while drawing: browsers measure arcs slightly differently from pathLength, so a dash left on would leave gaps */
.pw-geo.draw .ln { animation: pw-draw var(--duration-draw) var(--ease-out) backwards; }
.pw-geo.draw .ln:nth-child(2) { animation-delay: 80ms; }
.pw-geo.draw .ln:nth-child(3) { animation-delay: 160ms; }
.pw-geo.draw .sp { animation: pw-fade var(--duration-standard) var(--ease-out) 960ms both; }
@keyframes pw-draw { from { stroke-dasharray: 1.05 1.05; stroke-dashoffset: 1.05; } to { stroke-dasharray: 1.05 1.05; stroke-dashoffset: 0; } }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }

/* Icons: Material Symbols Outlined, filled when active */
.pw-icon { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; font-stretch: normal; display: inline-block; width: 1em; height: 1em; overflow: hidden; white-space: nowrap; font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.pw-icon.is-active { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; color: var(--brand-text); }
.pw-glyph { width: 24px; height: 24px; display: inline-block; }

/* Progress: a plain bar with a halfway tick */
.pw-progress { display: flex; align-items: center; gap: var(--space-3); }
.pw-progress .bar { position: relative; flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.pw-progress .fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--brand); }
.pw-progress .mid { position: absolute; left: 50%; top: -5px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: var(--border-strong); }
.pw-progress .pct { font: 500 11px/1 var(--font-mono); font-stretch: 87.5%; min-width: 38px; text-align: right; }

/* Processing checklist */
.pw-steps { list-style: none; margin: 0; padding: 0; }
.pw-steps li { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-3); align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font: 500 14px/1.3 var(--font-body); color: var(--ink-muted); }
.pw-steps li.is-on, .pw-steps li.is-done { color: var(--ink); }
.pw-steps .st { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); position: relative; box-sizing: border-box; }
.pw-steps li.is-on .st { border-color: var(--brand-text); border-right-color: transparent; animation: pw-spin 0.8s linear infinite; }
.pw-steps li.is-done .st { border-color: var(--pitch); background: var(--pitch); }
.pw-steps li.is-done .st::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pw-steps .v { font: 500 11px/1 var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.04em; text-transform: uppercase; }
@keyframes pw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pw-geo.draw .ln, .pw-geo.draw .sp { animation: none; }
  .pw-steps li.is-on .st { animation: none; }
}

/* >>> components part two >>> */
/* ==== Pitchwise components, part two: forms, states, feedback, overlays, navigation, content, data and brand applications. Values come only from tokens.css. ==== */

/* ---------- shared bits ---------- */
.pw-sym { font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; font-size: var(--icon-md); line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; font-variation-settings: "FILL" 0; display: inline-block; flex: none; }
.pw-sym.is-fill { font-variation-settings: "FILL" 1; }
.pw-sym.lg { font-size: var(--icon-lg); } .pw-sym.sm { font-size: var(--icon-sm); } .pw-sym.xl { font-size: var(--icon-xl); }
.pw-label { font: 500 14px/18px var(--font-body); color: var(--ink); }
.pw-label .opt { color: var(--ink-muted); font-weight: 400; }
.pw-chip--sm { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.pw-help.is-success { color: var(--success-text); }
.pw-help .pw-sym { font-size: var(--icon-sm); vertical-align: -3px; margin-right: 2px; }
.pw-input.is-success { border-color: var(--pitch); }
.pw-input[disabled], .pw-input.is-disabled { opacity: var(--opacity-disabled); background: var(--surface-sunken); }
.pw-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: pw-spin 0.8s linear infinite; flex: none; }
.pw-spin.lg { width: 32px; height: 32px; border-width: 3px; }
/* Trace: the whole-screen loader. The ball becomes the spinner; use only when a screen has nothing to show yet */
.pw-pageload { display: grid; place-items: center; align-content: center; gap: 16px; min-height: 100%; text-align: center; color: var(--brand-text); }
.pw-pageload p { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin: 0; }
.pw-brandfield .pw-pageload { color: var(--pwf-fg); }
.pw-brandfield .pw-pageload p { color: var(--pwf-label); }
.pw-trace { width: 96px; height: auto; display: block; overflow: visible; }
.pw-trace .ln { fill: currentColor; opacity: .28; }
.pw-trace .tk { fill: currentColor; opacity: .16; }
.pw-trace .arc { fill: none; stroke: currentColor; stroke-width: 13.13; stroke-linecap: round; stroke-dasharray: 46 139; transform-box: fill-box; transform-origin: center; animation: pw-trace-spin 1000ms linear infinite, pw-trace-len 2000ms var(--ease-out) infinite; }
@keyframes pw-trace-spin { to { transform: rotate(360deg); } }
@keyframes pw-trace-len { 0%, 100% { stroke-dasharray: 22 163; } 50% { stroke-dasharray: 96 89; } }
@keyframes pw-trace-breathe { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pw-trace .arc { display: none; } .pw-trace .ln, .pw-trace .tk { opacity: 1; } .pw-trace { animation: pw-trace-breathe 1600ms ease-in-out infinite alternate; } }

/* ---------- checkbox and radio ---------- */
.pw-check, .pw-radio { display: flex; align-items: flex-start; gap: var(--space-3); font: 400 15px/22px var(--font-body); color: var(--ink); min-height: 24px; cursor: pointer; }
.pw-check i, .pw-radio i { width: 22px; height: 22px; flex: none; box-sizing: border-box; border: var(--border-strong-width) solid var(--border-strong); background: var(--surface); position: relative; margin-top: 0; }
.pw-check i { border-radius: var(--radius-xs); }
.pw-radio i { border-radius: 50%; }
.pw-check small, .pw-radio small { display: block; font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.pw-check.is-checked i, .pw-check.is-mixed i { background: var(--brand); border-color: var(--brand); }
.pw-check.is-checked i::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid var(--on-brand); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.pw-check.is-mixed i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8.5px; height: 2.2px; background: var(--on-brand); border-radius: 1px; }
.pw-radio.is-checked i { border-color: var(--brand); border-width: 2px; }
.pw-radio.is-checked i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand); }
.pw-check.is-disabled, .pw-radio.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pw-check.is-error i, .pw-radio.is-error i { border-color: var(--danger); }
.pw-check.is-focus i, .pw-radio.is-focus i { box-shadow: var(--focus-ring); }
.pw-choice-card { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.pw-choice-card.is-checked { border: var(--border-focus-width) solid var(--brand); background: var(--brand-tint); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }

/* ---------- select, multi-select, search, textarea ---------- */
.pw-select { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; }
.pw-select .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-select .val.is-placeholder { color: var(--ink-muted); }
.pw-select .pw-sym { color: var(--ink-muted); }
.pw-pop { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-1) 0; overflow: hidden; }
.pw-opt { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); font: 400 15px/20px var(--font-body); color: var(--ink); min-height: var(--tap-target); box-sizing: border-box; }
.pw-opt.is-active { background: var(--overlay-hover); }
.pw-opt.is-selected { color: var(--brand-text); font-weight: 500; }
.pw-opt .end { margin-left: auto; color: var(--brand-text); }
.pw-opt .osub { color: var(--ink-muted); font-size: 13px; margin-left: auto; }
.pw-opt-head { font: 500 10.5px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-4) var(--space-1); }
.pw-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px var(--space-2) 6px var(--space-3); min-height: var(--tap-target); }
.pw-multi .plh { color: var(--ink-muted); font: 400 15px/20px var(--font-body); padding: 0 var(--space-1); }
.pw-token { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/18px var(--font-body); background: var(--brand-tint); color: var(--ink); border-radius: var(--radius-full); padding: 4px 6px 4px 10px; }
.pw-token .pw-sym { font-size: var(--icon-sm); color: var(--ink-muted); }
.pw-search { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-sunken); border: 1px solid transparent; border-radius: var(--radius-full); padding: 0 var(--space-4); min-height: var(--tap-target); font: 400 15px/20px var(--font-body); color: var(--ink); }
.pw-search .pw-sym { color: var(--ink-muted); }
.pw-search .q { flex: 1; } .pw-search .q.is-placeholder { color: var(--ink-muted); }
.pw-search.is-focus { background: var(--surface); border-color: var(--brand); box-shadow: var(--focus-ring); }
.pw-textarea { min-height: 112px; align-items: flex-start; display: block; white-space: normal; }
.pw-count { font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); text-align: right; }

/* ---------- slider and stepper ---------- */
.pw-slider { position: relative; height: 28px; }
.pw-slider .track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.pw-slider .fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--brand); }
.pw-slider .knob { position: absolute; top: 3px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-raised); }
.pw-slider .knob.is-focus { box-shadow: var(--focus-ring); }
.pw-slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.pw-slider-head b { font: 900 18px/22px var(--font-display); }
.pw-ticks { display: flex; justify-content: space-between; font: 500 10px/12px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); }
.pw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); }
.pw-stepper > span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--brand-text); }
.pw-stepper > span.is-disabled { color: var(--ink-muted); opacity: var(--opacity-disabled); }
.pw-stepper b { min-width: 48px; text-align: center; font: 900 20px/24px var(--font-display); }

/* ---------- date, time, upload ---------- */
.pw-cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); width: 296px; box-sizing: border-box; }
.pw-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.pw-cal-head b { font: 800 15px/18px var(--font-display); text-transform: uppercase; }
.pw-cal-head .pw-sym { color: var(--brand-text); }
.pw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.pw-cal-grid .dow { font: 500 10px/20px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); }
.pw-cal-grid > span { font: 400 14px/36px var(--font-body); border-radius: 50%; height: 36px; position: relative; }
.pw-cal-grid > span.out { color: var(--ink-muted); opacity: .5; }
.pw-cal-grid > span.today { color: var(--brand-text); font-weight: 600; }
.pw-cal-grid > span.sel { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.pw-cal-grid > span.has::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--moment); }
.pw-times { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-upload { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center; background: var(--surface); }
.pw-upload .pw-sym { color: var(--brand-text); }
.pw-upload > b { display: block; font: 500 15px/20px var(--font-body); margin-top: var(--space-2); }
.pw-upload > span:not(.pw-sym):not(.pw-btn) { display: block; font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.pw-upload.is-over { border-color: var(--brand); background: var(--brand-tint); }
.pw-file { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.pw-file .grow { flex: 1; min-width: 0; font: 500 14px/18px var(--font-body); }
.pw-file .grow small { display: block; font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-file .bar { height: 4px; border-radius: 2px; background: var(--surface-sunken); margin-top: 6px; overflow: hidden; }
.pw-file .bar i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }

/* ---------- form layout ---------- */
.pw-form { display: grid; gap: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.pw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pw-form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.pw-errsum { display: flex; gap: var(--space-3); background: var(--surface); border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: 400 14px/20px var(--font-body); }
.pw-errsum .pw-sym { color: var(--danger-text); }

/* ---------- states ---------- */
.pw-states { border-collapse: collapse; width: 100%; }
.pw-states th { font: 500 10.5px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); text-align: left; padding: 0 var(--space-3) var(--space-2) 0; font-weight: 500; }
.pw-states td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--border); vertical-align: middle; }
.pw-states td:first-child { font: 500 13px/18px var(--font-body); color: var(--ink-muted); white-space: nowrap; }
.pw-btn.is-hover { box-shadow: inset 0 0 0 999px var(--overlay-hover); }
.pw-btn--primary.is-hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08); }
.pw-btn.is-focus { box-shadow: var(--focus-ring); }
.pw-btn.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pw-btn.is-loading { pointer-events: none; }
.pw-btn.is-selected { background: var(--brand-tint); color: var(--ink); border-color: var(--brand); }
.pw-chip.is-hover { box-shadow: inset 0 0 0 999px var(--overlay-hover); }
.pw-chip.is-focus { box-shadow: var(--focus-ring); }
.pw-chip.is-disabled { opacity: var(--opacity-disabled); }

/* ---------- icon buttons ---------- */
.pw-ibtn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; color: var(--ink); background: transparent; flex: none; position: relative; }
.pw-ibtn--primary { background: var(--brand); color: var(--on-brand); }
.pw-ibtn--secondary { border-color: var(--border-strong); }
.pw-ibtn--tonal { background: var(--surface-sunken); }
.pw-ibtn--scrim { background: var(--scrim); color: var(--white); }
.pw-ibtn--sm { width: 36px; height: 36px; }
.pw-ibtn.is-pressed { box-shadow: inset 0 0 0 999px var(--overlay-pressed); }
.pw-fab { height: 56px; border-radius: var(--radius-full); padding: 0 var(--space-5) 0 var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); background: var(--brand); color: var(--on-brand); font: 500 15px/20px var(--font-body); box-shadow: var(--shadow-float); }
.pw-fab.is-rec { background: var(--danger); }

/* ---------- feedback ---------- */
.pw-toast { display: flex; align-items: center; gap: var(--space-3); background: var(--ink-900); color: var(--paper-50); box-shadow: var(--shadow-float), 0 0 0 1px rgba(245, 241, 234, 0.12); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: 400 14px/20px var(--font-body); max-width: 360px; box-sizing: border-box; }
.pw-toast .grow { flex: 1; }
.pw-toast b { font-weight: 600; }
.pw-toast .act { font: 600 14px/20px var(--font-body); color: var(--royal-200); white-space: nowrap; }
.pw-toast .pw-sym.ok { color: #7fc795; } .pw-toast .pw-sym.err { color: #ff8a8f; }
.pw-alert { display: flex; gap: var(--space-3); align-items: flex-start; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: 400 14px/20px var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--border); }
.pw-alert b { display: block; font-weight: 600; }
.pw-alert .grow { flex: 1; min-width: 0; }
.pw-alert .act { font: 600 14px/20px var(--font-body); color: var(--brand-text); white-space: nowrap; }
.pw-alert--info { background: var(--brand-tint); border-color: transparent; } .pw-alert--info > .pw-sym { color: var(--brand-text); }
.pw-alert--success { border-left: 4px solid var(--pitch); } .pw-alert--success > .pw-sym { color: var(--success-text); }
.pw-alert--warning { background: var(--warning); color: var(--on-warning); border-color: transparent; } .pw-alert--warning .act { color: var(--on-warning); text-decoration: underline; }
.pw-alert--danger { border-left: 4px solid var(--danger); } .pw-alert--danger > .pw-sym { color: var(--danger-text); }
.pw-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font: 500 14px/20px var(--font-body); background: var(--ink-900); color: var(--paper-50); box-shadow: 0 0 0 1px rgba(245, 241, 234, 0.12); }
.pw-banner .grow { flex: 1; }
.pw-banner--offline .pw-sym { color: var(--warning); }
.pw-empty { text-align: center; padding: var(--space-8) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.pw-empty > *:not(.pw-geo):not(.g) { position: relative; }
/* the pitch stays at the edges: faded out behind the message so it never fights the words or the button */
.pw-empty > .pw-geo, .pw-errpage > .pw-geo { opacity: .7; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 35%, #000 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 35%, #000 100%); }
.pw-empty .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); display: inline-flex; align-items: center; justify-content: center; }
.pw-empty h4 { font: 900 18px/22px var(--font-display); text-transform: uppercase; margin: var(--space-4) 0 var(--space-2); }
.pw-empty p { font: 400 14px/20px var(--font-body); color: var(--ink-muted); margin: 0 auto var(--space-4); max-width: 260px; }
.pw-skel { background: var(--skeleton); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.pw-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); transform: translateX(-100%); animation: pw-shine 1.4s ease-in-out infinite; }
@keyframes pw-shine { to { transform: translateX(100%); } }
.pw-errpage { text-align: center; padding: var(--space-8) var(--space-5); position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ground); border: 1px solid var(--border); }
.pw-errpage > *:not(.pw-geo):not(.g) { position: relative; }
.pw-errpage .code { font: 900 64px/1 var(--font-display); color: var(--brand-text); }
.pw-errpage h4 { font: 900 20px/24px var(--font-display); text-transform: uppercase; margin: var(--space-3) 0 var(--space-2); }
.pw-errpage p { font: 400 14px/20px var(--font-body); color: var(--ink-muted); margin: 0 auto var(--space-4); max-width: 280px; }

/* ---------- overlays ---------- */
.pw-backdrop { background: var(--backdrop); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pw-backdrop.is-bottom { align-items: flex-end; padding: var(--space-8) 0 0; }
.pw-modal { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: var(--space-6); width: 100%; max-width: 340px; box-sizing: border-box; }
.pw-modal h4 { font: 900 20px/24px var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-2); }
.pw-modal p { font: 400 15px/22px var(--font-body); color: var(--ink-muted); margin: 0 0 var(--space-5); }
.pw-modal .acts { display: flex; flex-direction: column; gap: var(--space-2); }
.pw-modal .ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.pw-sheet { background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-modal); padding: var(--space-2) var(--space-5) var(--space-6); width: 100%; box-sizing: border-box; }
.pw-sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto var(--space-4); }
.pw-sheet h4 { font: 900 18px/22px var(--font-display); text-transform: uppercase; margin: 0 0 var(--space-3); }
.pw-actions { width: 100%; padding: 0 var(--space-3) var(--space-3); box-sizing: border-box; display: grid; gap: var(--space-2); }
.pw-actions .grp { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
.pw-actions .grp > span { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; border-top: 1px solid var(--border); font: 500 16px/20px var(--font-body); color: var(--brand-text); }
.pw-actions .grp > span:first-child { border-top: 0; }
.pw-actions .grp > span.title { font: 500 12px/16px var(--font-body); color: var(--ink-muted); min-height: 40px; }
.pw-actions .grp > span.danger { color: var(--danger-text); }
.pw-actions .cancel > span { font-weight: 600; }
.pw-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-1) 0; width: 220px; }
.pw-menu .it { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); font: 400 15px/20px var(--font-body); }
.pw-menu .it .pw-sym { color: var(--ink-muted); }
.pw-menu .it.is-active { background: var(--overlay-hover); }
.pw-menu .it.danger, .pw-menu .it.danger .pw-sym { color: var(--danger-text); }
.pw-menu .sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }
.pw-menu .it kbd { margin-left: auto; font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); }
.pw-tip { position: relative; display: inline-block; background: var(--ink); color: var(--ground); font: 500 13px/18px var(--font-body); border-radius: var(--radius-sm); padding: 6px 10px; box-shadow: var(--shadow-float); max-width: 220px; }
.pw-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); border-radius: 1px; }

/* ---------- navigation ---------- */
.pw-appbar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); min-height: 52px; background: var(--ground); border-bottom: 1px solid transparent; }
.pw-appbar.is-scrolled { background: var(--surface); border-bottom-color: var(--border); box-shadow: var(--shadow-raised); }
.pw-appbar .ttl { flex: 1; text-align: center; font: 800 15px/20px var(--font-display); text-transform: uppercase; }
.pw-appbar .ttl.left { text-align: left; padding-left: var(--space-2); }
.pw-appbar .txt { font: 500 15px/20px var(--font-body); color: var(--brand-text); padding: 0 var(--space-2); }
.pw-appbar-lg { padding: 0 var(--space-5) var(--space-3); background: var(--ground); }
.pw-appbar-lg h2 { font: 900 28px/30px var(--font-display); text-transform: uppercase; margin: 0; }
.pw-utabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); padding: 0 var(--space-4); }
.pw-utabs > span { font: 500 14px/18px var(--font-body); color: var(--ink-muted); padding: var(--space-3) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pw-utabs > span.is-selected { color: var(--ink); border-bottom-color: var(--brand); }
.pw-utabs span em { font-style: normal; font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); margin-left: 4px; }
.pw-crumbs { display: flex; align-items: center; gap: var(--space-1); font: 400 14px/20px var(--font-body); color: var(--ink-muted); flex-wrap: wrap; }
.pw-crumbs a { color: var(--brand-text); text-decoration: none; }
.pw-crumbs .pw-sym { font-size: var(--icon-sm); }
.pw-crumbs b { color: var(--ink); font-weight: 500; }
.pw-steps2 { display: flex; align-items: flex-start; }
.pw-steps2 .s { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font: 500 12px/16px var(--font-body); color: var(--ink-muted); text-align: center; }
.pw-steps2 .s::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--border-strong); }
.pw-steps2 .s:first-child::before { display: none; }
.pw-steps2 .s i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-mono); font-style: normal; background: var(--surface); box-shadow: inset 0 0 0 var(--border-strong-width) var(--border-strong); position: relative; z-index: 1; color: var(--ink-muted); }
.pw-steps2 .s.done::before, .pw-steps2 .s.on::before { background: var(--brand); }
.pw-steps2 .s.done i { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.pw-steps2 .s.on i { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-text); }
.pw-steps2 .s.on, .pw-steps2 .s.done { color: var(--ink); }
.pw-pagebar { display: flex; gap: 6px; }
.pw-pagebar i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-sunken); }
.pw-pagebar i.on { background: var(--brand); }

/* ---------- content ---------- */
.pw-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 900 14px/1 var(--font-display); background: var(--brand-tint); color: var(--brand-text); flex: none; position: relative; background-size: cover; background-position: center; box-sizing: border-box; }
.pw-avatar.xs { width: 24px; height: 24px; font-size: 9px; } .pw-avatar.sm { width: 32px; height: 32px; font-size: 11px; } .pw-avatar.lg { width: 56px; height: 56px; font-size: 18px; } .pw-avatar.xl { width: 80px; height: 80px; font-size: 26px; }
.pw-avatar.is-team { border-radius: var(--radius-sm); }
.pw-avatar .ldot { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--pitch); box-shadow: 0 0 0 2px var(--ground); }
.pw-avatars { display: inline-flex; }
.pw-avatars .pw-avatar { box-shadow: 0 0 0 2px var(--ground); margin-left: -8px; }
.pw-avatars .pw-avatar:first-child { margin-left: 0; }
.pw-avatars .more { background: var(--surface-sunken); color: var(--ink); font: 600 11px/1 var(--font-mono); }
.pw-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.pw-divider-label { display: flex; align-items: center; gap: var(--space-3); font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pw-divider-label::before, .pw-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pw-acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.pw-acc .h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: var(--tap-target); box-sizing: border-box; border-top: 1px solid var(--border); font: 500 15px/20px var(--font-body); }
.pw-acc .h:first-child { border-top: 0; }
.pw-acc .h .pw-sym { color: var(--ink-muted); }
.pw-acc .b { padding: 0 var(--space-4) var(--space-4); font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.pw-carousel { display: flex; gap: var(--space-3); overflow: hidden; }
.pw-carousel > div { flex: none; }
.pw-dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--space-3); }
.pw-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); }
.pw-dots i.on { width: 18px; background: var(--brand); }
.pw-count-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--danger); color: var(--white); font: 600 10px/18px var(--font-mono); text-align: center; box-shadow: 0 0 0 2px var(--ground); }
.pw-count-dot.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 8px; right: 8px; }
.pw-count-dot.is-moment { background: var(--moment); }
.pw-pager { display: flex; align-items: center; gap: var(--space-1); }
.pw-pager > span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font: 500 14px/1 var(--font-body); color: var(--ink); }
.pw-pager > span.on { background: var(--brand); color: var(--on-brand); }
.pw-pager > span.gap { color: var(--ink-muted); }
.pw-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

/* ---------- data ---------- */
.pw-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; font: 400 14px/20px var(--font-body); }
.pw-table th { font: 500 10.5px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); text-align: right; padding: var(--space-3); background: var(--surface-sunken); font-weight: 500; }
.pw-table th:first-child, .pw-table td:first-child { text-align: left; }
.pw-table td { padding: var(--space-3); border-top: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.pw-table td.num { font: 900 14px/20px var(--font-display); }
.pw-table tr.is-us td { background: var(--brand-tint); }
.pw-table td .pos { display: inline-block; width: 20px; font: 600 11px/1 var(--font-mono); color: var(--ink-muted); }
.pw-form-dots { display: inline-flex; gap: 3px; }
.pw-form-dots i { width: 16px; height: 16px; border-radius: 4px; font: 600 9px/16px var(--font-mono); font-style: normal; color: var(--white); text-align: center; }
.pw-form-dots i.w { background: var(--pitch); } .pw-form-dots i.d { background: var(--surface-sunken); color: var(--ink); } .pw-form-dots i.l { background: var(--danger); }
.pw-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.pw-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pw-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2); }
.pw-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.pw-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.pw-swatches div { height: 56px; border-radius: var(--radius-sm); padding: 6px 8px; box-sizing: border-box; font: 500 10px/12px var(--font-mono); display: flex; align-items: flex-end; }

/* ---------- foundations: scales ---------- */
.pw-space { display: grid; gap: 6px; }
.pw-space div { display: grid; grid-template-columns: 130px 1fr 170px; align-items: center; gap: 12px; font: 400 13px/18px var(--font-body); }
.pw-space b { font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; color: var(--brand-text); font-weight: 500; }
.pw-space i { display: block; height: 12px; background: var(--brand); border-radius: 2px; }
.pw-space span { color: var(--ink-muted); }
.pw-radii { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.pw-radii div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pw-radii i { display: block; width: 72px; height: 72px; background: var(--brand-tint); border: 2px solid var(--brand); box-sizing: border-box; }
.pw-elev { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.pw-elev div { height: 84px; border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); box-sizing: border-box; }
.pw-elev b { font: 900 14px/18px var(--font-display); text-transform: uppercase; }
.pw-elev span { font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-grid-demo { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; }
.pw-grid-demo i { display: block; height: 40px; background: var(--brand-tint); border-radius: 3px; }
.pw-zladder { display: grid; gap: 4px; }
.pw-zladder div { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font: 400 13px/18px var(--font-body); }
.pw-zladder b { font: 500 11px/14px var(--font-mono); font-stretch: 87.5%; color: var(--brand-text); }

/* ---------- phone frame for in-context specimens ---------- */
.pw-phone { width: 300px; border-radius: 32px; overflow: hidden; background: var(--ground); box-shadow: 0 0 0 1px var(--border), var(--shadow-float); position: relative; flex: none; }
.pw-phone .sbar { display: flex; justify-content: space-between; padding: 12px 22px 4px; font: 600 12px/1 var(--font-body); }

/* ---------- beyond the app ---------- */
.pw-email { width: 100%; max-width: 420px; background: var(--white); color: #1c1b19; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border); overflow: hidden; font: 400 14px/21px var(--font-body); }
.pw-email .hd { padding: 18px 24px; border-bottom: 1px solid rgba(28,27,25,.1); }
.pw-email .ehero { background: #2448d8; color: #fff; padding: 24px; position: relative; overflow: hidden; }
.pw-email .ehero > *:not(.pw-geo):not(.g) { position: relative; }
.pw-email .ehero h3 { font: 900 24px/1 var(--font-display); text-transform: uppercase; margin: 6px 0 0; }
.pw-email .bd { padding: 20px 24px; }
.pw-email .bd p { margin: 0 0 14px; }
.pw-email .cta { display: inline-block; background: #2448d8; color: #fff; border-radius: 999px; padding: 12px 22px; font: 500 15px/20px var(--font-body); }
.pw-email .ft { padding: 16px 24px; background: #f7f6f4; color: #66635e; font-size: 11.5px; line-height: 17px; }
.pw-web { width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--border); background: #f7f6f4; color: #1c1b19; }
.pw-web .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #fff; border-bottom: 1px solid rgba(28,27,25,.1); font: 500 13px/1 var(--font-body); }
.pw-web .nav > span:not(.pw-btn) { display: flex; gap: 18px; color: #66635e; }
.pw-web .whero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 32px 24px; align-items: center; }
.pw-web .whero h3 { font: 900 30px/0.98 var(--font-display); text-transform: uppercase; margin: 8px 0 12px; }
.pw-web .whero p { margin: 0 0 16px; color: #66635e; font: 400 14px/21px var(--font-body); }
.pw-web .wph { border-radius: 16px; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #2e6b3f; }
.pw-web .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 28px; }
.pw-web .feats div { background: #fff; border: 1px solid rgba(28,27,25,.1); border-radius: 12px; padding: 14px; font: 400 13px/19px var(--font-body); color: #66635e; }
.pw-web .feats b { display: block; font: 900 13px/16px var(--font-display); text-transform: uppercase; color: #1c1b19; margin: 8px 0 4px; }
.pw-web .feats .pw-sym { color: #2448d8; }
.pw-web .wfoot { background: #14120f; color: #ada69d; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; font: 400 12px/1 var(--font-body); }
.pw-l3 { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/9; background: #2e6b3f; }
.pw-l3 .bar { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: stretch; box-shadow: var(--shadow-float); }
.pw-l3 .bar .n { background: #fff; color: #1c1b19; padding: 8px 14px; font: 900 18px/1 var(--font-display); text-transform: uppercase; display: flex; align-items: center; }
.pw-l3 .bar .r { background: #2448d8; color: #fff; padding: 8px 12px; font: 500 11px/1.3 var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; display: flex; flex-direction: column; justify-content: center; }
.pw-l3 .bug { position: absolute; left: 24px; top: 20px; display: flex; font: 900 15px/1 var(--font-display); color: #fff; }
.pw-l3 .bug > span { background: rgba(20,18,15,.72); padding: 7px 10px; } .pw-l3 .bug > span.t { background: #2448d8; }
.pw-l3 .wm { position: absolute; right: 20px; bottom: 20px; }
.pw-ident { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/9; background: #2448d8; display: flex; align-items: center; justify-content: center; }
.pw-ident > *:not(.pw-geo):not(.g) { position: relative; }
.pw-bcard { width: 252px; height: 144px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border), var(--shadow-raised); position: relative; overflow: hidden; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.pw-bcard > *:not(.pw-geo):not(.g) { position: relative; }
.pw-bcard b { font: 900 13px/1.1 var(--font-display); text-transform: uppercase; display: block; }
.pw-bcard span:not(.pw-sym) { font: 400 10px/14px var(--font-body); display: block; }
.pw-bcard em { font: 500 8.5px/12px var(--font-mono); font-stretch: 87.5%; font-style: normal; text-transform: uppercase; letter-spacing: .05em; display: block; }
.pw-letter { width: 210px; height: 297px; background: #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-raised); padding: 18px; box-sizing: border-box; position: relative; color: #1c1b19; font: 400 6px/9px var(--font-body); }
.pw-letter .ln { height: 3px; border-radius: 2px; background: #eceae6; margin: 0 0 4px; }
.pw-letter .ft { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; font: 500 5px/1 var(--font-mono); text-transform: uppercase; color: #66635e; }
.pw-merch { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pw-merch .mspec { font: 500 10px/14px var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .pw-skel::after, .pw-spin { animation: none; } }
/* Charts */
.pw-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .pw-charts { grid-template-columns: 1fr; } }
.pw-charts .pw-span { grid-column: 1 / -1; }
.pw-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pw-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.pw-chart .pw-cap { margin: 0; }
.pw-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pw-chart-dir { font: 500 10px/14px var(--font-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pw-chart-big { font: 900 24px/1 var(--font-display); font-stretch: 112.5%; color: var(--ink); }
.pw-chart-big small { font: 500 12px/1 var(--font-body); color: var(--ink-muted); margin-left: 4px; }
.pw-ax { font: 500 9px var(--font-mono); font-stretch: 87.5%; fill: var(--ink-muted); }
.pw-dl { font: 900 11px var(--font-display); font-stretch: 112.5%; fill: var(--ink); text-transform: uppercase; }
.pw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pw-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pw-legend i.dot { border-radius: 50%; width: 12px; height: 12px; }
.pw-ramp { display: flex; align-items: center; gap: 8px; font: 500 11px/14px var(--font-body); color: var(--ink-muted); }
.pw-ramp .bar { display: flex; gap: 2px; }
.pw-ramp .bar i { width: 22px; height: 8px; border-radius: 2px; display: block; }
.pw-zones { display: flex; gap: 2px; height: 14px; }
.pw-zones span { border-radius: 4px; display: block; }
.pw-zones-l { display: flex; gap: 2px; font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-zones-l b { display: block; font: 900 18px/1.1 var(--font-display); font-stretch: 112.5%; color: var(--ink); }
.pw-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .pw-kpis { grid-template-columns: 1fr; } }
.pw-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 8px; }
.pw-kpi .pw-cap { grid-column: 1 / -1; margin: 0 0 6px; }
.pw-kpi b { font: 900 30px/1 var(--font-display); font-stretch: 112.5%; color: var(--ink); }
.pw-kpi b small { font: 500 12px var(--font-body); color: var(--ink-muted); margin-left: 3px; }
.pw-kpi span { grid-column: 1; font: 400 12px/16px var(--font-body); color: var(--ink-muted); margin-top: 4px; }
.pw-kpi svg { grid-column: 2; grid-row: 2 / 4; align-self: end; }
.pw-chartpal { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .pw-chartpal { grid-template-columns: 1fr; } }
.pw-chartpal .pw-cap { margin: 0 0 6px; }
.pw-chartpal .pw-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pw-chartpal .pw-swatches div { height: 44px; border-radius: 8px; padding: 6px 8px; display: flex; align-items: flex-end; font: 500 10px/12px var(--font-mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; }
.pw-formstrip { display: flex; gap: 6px; flex-wrap: wrap; }
.pw-fs-i { display: flex; flex-direction: column; gap: 4px; align-items: center; flex: 1; min-width: 52px; }
.pw-fs-i b { width: 28px; height: 28px; border-radius: var(--radius-xs); display: grid; place-items: center; font: 600 12px/1 var(--font-mono); font-stretch: 87.5%; }
.pw-fs-i em { font: 400 11px/14px var(--font-body); font-style: normal; color: var(--ink-muted); text-align: center; }
.pw-chart-note { margin: 0; font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.pw-chart .pw-legend { text-transform: none; font: 500 12px/16px var(--font-body); letter-spacing: 0; }
.pw-seq, .pw-div { display: flex; gap: 2px; height: 30px; }
.pw-seq i, .pw-div i { flex: 1; border-radius: 4px; }
/* Video graphics */
.pw-vhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pw-vhead .pw-cap { margin: 0; }
.pw-vswitch { display: flex; gap: 6px; flex-wrap: wrap; }
.pw-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .pw-vgrid { grid-template-columns: 1fr; } }
.pw-vfig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pw-vfig .pw-cap { margin: 0; }
.pw-vf { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: #1b3d26; container-type: inline-size; color: #fff; cursor: default; }
.pw-vf-bg { position: absolute; inset: 0; background-size: cover; }
.pw-vf-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,.25), rgba(20,18,15,0) 30%, rgba(20,18,15,0) 60%, rgba(20,18,15,.45)); }
.pw-vf .pw-crest { display: block; flex: none; }
.pw-wm { position: absolute; right: 3.5cqw; bottom: 3.2cqw; opacity: .9; }
.pw-wm img, .pw-wm svg { height: 2.6cqw !important; width: auto; }

/* score bug: home in the club colour, the score on scrim, away in theirs, the minute on white */
.pw-sb { position: absolute; left: 3.5cqw; top: 3.5cqw; display: flex; height: 5.6cqw; border-radius: 1cqw; overflow: hidden; box-shadow: 0 .4cqw 1.6cqw rgba(0,0,0,.3); font: 900 2.9cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; }
.pw-sb > span { display: flex; align-items: center; gap: .9cqw; padding: 0 1.4cqw; }
.pw-sb .h { background: var(--club); color: var(--on-club); box-shadow: inset 0 -.5cqw 0 var(--club-2); }
.pw-sb .s { background: rgba(20,18,15,.88); color: #fff; padding: 0 1.8cqw; letter-spacing: .02em; }
.pw-sb .a { background: var(--opp); color: var(--on-opp); box-shadow: inset 0 -.5cqw 0 var(--opp-2); }
.pw-sb--static { position: static; }
.pw-vclubs { position: absolute; inset: 0; background: #14120f; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2.4cqw; padding: 5cqw 7cqw; }
.pw-vclubs p { margin: 1cqw 0 0; font: 500 2.1cqw/1.3 var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .06em; color: #ada69d; }
.pw-sb .m { background: #fff; color: #1c1b19; font: 500 2.3cqw/1 var(--font-mono); font-stretch: 87.5%; }

/* lower third: the number in a club-colour block, the name on white */
.pw-l3x { position: absolute; left: 3.5cqw; bottom: 6cqw; display: flex; align-items: stretch; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.35); border-radius: 1cqw; overflow: hidden; }
.pw-l3x .n { background: var(--club); color: var(--on-club); font: 900 7.4cqw/1 var(--font-display); font-stretch: 112.5%; padding: 1cqw 2cqw .6cqw; display: flex; align-items: center; box-shadow: inset 0 -.7cqw 0 var(--club-2); }
.pw-l3x .t { background: #fff; color: #1c1b19; padding: 1.3cqw 2.4cqw 1.3cqw 2cqw; display: flex; flex-direction: column; justify-content: center; gap: .5cqw; }
.pw-l3x b { font: 900 3.4cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; }
.pw-l3x em { font: 500 1.9cqw/1.2 var(--font-mono); font-stretch: 87.5%; font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: #66635e; }
.pw-l3x i { font: 500 2.1cqw/1.2 var(--font-body); font-style: normal; }

/* goal sting: three speed lines sweep in (the logo's lines), the band slams across, GOAL lands */
.pw-goal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; }
.pw-goal .lines { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) skewY(-6deg); display: flex; flex-direction: column; gap: 2cqw; }
.pw-goal .lines i { display: block; height: 3cqw; border-radius: 3cqw; background: var(--club-2); opacity: .9; }
.pw-goal .lines i:nth-child(1) { width: 62%; margin-left: -4%; } .pw-goal .lines i:nth-child(2) { width: 84%; margin-left: -4%; } .pw-goal .lines i:nth-child(3) { width: 54%; margin-left: -4%; }
.pw-goal .band { position: relative; background: var(--club); color: var(--on-club); transform: skewY(-6deg); padding: 1.4cqw 9cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.35); }
.pw-goal .band b { display: block; transform: skewY(6deg); font: 900 15cqw/.9 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; letter-spacing: -.02em; }
.pw-goal .who { position: relative; display: flex; gap: 1cqw; align-items: stretch; }
.pw-goal .who span { background: #fff; color: #1c1b19; border-radius: .8cqw; padding: 1.1cqw 1.8cqw; font: 900 2.8cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; }
.pw-goal .who em { font: 500 2.2cqw var(--font-mono); font-stretch: 87.5%; font-style: normal; color: #66635e; margin-left: .6cqw; }
.pw-goal .who .sc { background: rgba(20,18,15,.88); color: #fff; }
.pw-goal.play .lines i { animation: pw-sweep 420ms cubic-bezier(.2,.8,.2,1) both; }
.pw-goal.play .lines i:nth-child(2) { animation-delay: 60ms; } .pw-goal.play .lines i:nth-child(3) { animation-delay: 120ms; }
.pw-goal.play .band { animation: pw-slam 520ms cubic-bezier(.34,1.56,.64,1) 220ms both; }
.pw-goal.play .band b { animation: pw-land 480ms cubic-bezier(.34,1.56,.64,1) 380ms both; }
.pw-goal.play .who { animation: pw-up 320ms cubic-bezier(.2,.8,.2,1) 700ms both; }
@keyframes pw-sweep { from { transform: translateX(-110%); } }
@keyframes pw-slam { from { transform: skewY(-6deg) scaleX(0); transform-origin: left center; } }
@keyframes pw-land { from { transform: skewY(6deg) translateY(30%) scale(1.6); opacity: 0; } }
@keyframes pw-up { from { transform: translateY(40%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pw-goal.play * { animation: none !important; } }

/* match intro */
.pw-vs { position: absolute; inset: 0; background: rgba(20,18,15,.62); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: 6cqw 4cqw 9cqw; }
.pw-vs .side { display: flex; flex-direction: column; align-items: center; gap: 2cqw; text-align: center; }
.pw-vs b { font: 900 3.6cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; }
.pw-vs .v { font: 500 2.6cqw var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.pw-vs p { position: absolute; left: 0; right: 0; bottom: 4cqw; margin: 0; text-align: center; font: 500 2.1cqw var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .08em; }

/* full time: the club's colour leads, with the brand's pitch geometry in a tint of it */
.pw-ft { position: absolute; inset: 0; background: var(--club); color: var(--on-club); padding: 5cqw; display: flex; flex-direction: column; }
.pw-ft .geo { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-ft .geo path { fill: none; stroke: var(--club-2); stroke-opacity: .28; stroke-width: 15; }
.pw-ft > *:not(svg) { position: relative; }
.pw-ft .k { margin: 0; font: 500 2.2cqw var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.pw-ft .sc { display: flex; align-items: baseline; gap: 2.4cqw; margin-top: auto; font: 900 4.6cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; }
.pw-ft .sc b { font-size: 15cqw; letter-spacing: -.03em; }
.pw-ft ul { list-style: none; margin: 1.6cqw 0 0; padding: 0; display: flex; gap: 3cqw; font: 500 2.3cqw var(--font-body); opacity: .9; }
.pw-ft .lg { position: absolute; right: 4cqw; top: 4.4cqw; }
.pw-ft .lg img, .pw-ft .lg svg { height: 2.8cqw !important; width: auto; }

/* substitution, replay and moment tags */
.pw-tags { position: absolute; right: 3.5cqw; top: 3.5cqw; display: flex; gap: 1cqw; }
.pw-tags span { font: 600 2cqw/1 var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .08em; padding: 1cqw 1.5cqw; border-radius: 99cqw; }
.pw-tags .rp { background: rgba(20,18,15,.82); color: #fff; }
.pw-tags .rp::before { content: ""; display: inline-block; width: 1.2cqw; height: 1.2cqw; margin-right: .8cqw; border-radius: 50%; background: #fff; vertical-align: .05cqw; }
.pw-tags .mo { background: #c2410c; color: #fff; }
.pw-subx { position: absolute; left: 3.5cqw; bottom: 6cqw; display: flex; flex-direction: column; gap: .6cqw; }
.pw-subx span { display: flex; align-items: center; gap: 1.2cqw; background: #fff; color: #1c1b19; border-radius: .8cqw; padding: 1cqw 2cqw 1cqw 1cqw; font: 900 2.8cqw/1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; box-shadow: 0 .4cqw 1.4cqw rgba(0,0,0,.3); }
.pw-subx i { font-style: normal; width: 3.2cqw; height: 3.2cqw; border-radius: .6cqw; display: grid; place-items: center; font: 900 1.8cqw/1 var(--font-body); }
.pw-subx .in i { background: var(--club); color: var(--on-club); }
.pw-subx .out i { background: #ece9e3; color: #66635e; }
/* Print and merch */
.pw-pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pw-pm--merch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .pw-pm, .pw-pm--merch { grid-template-columns: 1fr; } }
.pw-pm .pm-wide, .pw-pm .pm-full { grid-column: 1 / -1; }
.pw-pm .pm-wide .pm-svg { max-width: 500px; }
.pm-tile { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-stage { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.pm-stage.pm-tall .pm-svg { max-width: 260px; }
.pw-pm--merch .pm-stage { aspect-ratio: 1 / 1; min-height: 0; padding: 20px; }
.pw-pm--merch .pm-svg { max-height: 100%; width: auto; }
.pm-svg { width: 100%; height: auto; display: block; max-width: 100%; }
.pm-paper { filter: drop-shadow(0 6px 12px rgba(29,26,22,.18)); }
.pm-tile figcaption { display: flex; flex-direction: column; gap: 2px; }
.pm-tile figcaption b { font: 900 14px/1.1 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; color: var(--ink); }
.pm-tile figcaption span { font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.pw-fo, .pw-fo > * { display: block; line-height: 0; }
.pw-fo img, .pw-fo svg { display: block; }
.pm-d { font: 900 13px var(--font-display); font-stretch: 112.5%; letter-spacing: -.01em; }
.pm-x { font: 900 34px var(--font-display); font-stretch: 112.5%; letter-spacing: -.02em; }
.pm-n { font: 900 15px var(--font-display); font-stretch: 112.5%; }
.pm-m { font: 500 7.5px var(--font-mono); font-stretch: 87.5%; letter-spacing: .08em; }
.pm-b { font: 400 10px var(--font-body); }
.pm-t { font: 400 7.6px var(--font-body); }
/* Match timeline */
.pw-tl-card { max-width: 680px; }
.pw-tl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pw-tl-h .pw-cap { margin: 0; }
.pw-tl-h b { font: 900 30px/1 var(--font-display); font-stretch: 112.5%; color: var(--ink); font-variant-numeric: tabular-nums; }
.pw-tl { position: relative; padding-top: 40px; margin-top: 10px; }
.pw-tl-pins { position: absolute; left: 0; right: 0; top: 0; height: 34px; }
.pw-tl-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pw-tl-pin .pw-sym { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--moment); color: var(--on-moment); font-size: 15px; }
.pw-tl-pin.is-hollow .pw-sym { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-variation-settings: 'FILL' 0; }
.pw-tl-pin::after { content: ""; width: 1.5px; height: 6px; background: var(--border-strong); }
.pw-tl-track { position: relative; height: 64px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.pw-tl-track svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pw-tl-track .rest { fill: var(--border-strong); opacity: .6; }
.pw-tl-track .done { fill: var(--brand-text); opacity: .85; }
.pw-tl-head { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--brand-text); }
.pw-tl-head span { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); z-index: 1; background: var(--ink); color: var(--ground); font: 500 11px/1 var(--font-mono); font-stretch: 87.5%; letter-spacing: .04em; padding: 5px 7px; border-radius: 999px; white-space: nowrap; }
.pw-tl-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 10px/14px var(--font-mono); font-stretch: 87.5%; color: var(--ink-muted); }
.pw-tl-axis .ht { color: var(--ink); }
/* Brand field specimen */
.pwbf { border-radius: var(--radius-lg); max-width: 100%; container-type: inline-size; }
.pwbf-ct { position: absolute !important; inset: 0; padding: clamp(10px, 6cqw, 28px); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.pwbf-ct .pw-cap { font-size: clamp(8.5px, 2.8cqw, 11px); color: var(--pwf-label); }
.pwbf-hl { font: 900 clamp(13px, 9cqw, 30px)/.94 var(--font-display); font-stretch: 112.5%; text-transform: uppercase; letter-spacing: -.015em; }
.pwbf-row { display: grid; gap: 12px; }
.pwbf-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pwbf-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .pwbf-5, .pwbf-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pwbf-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pwbf-fig figcaption { font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.pwbf-formats { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pwbf-formats .pwbf-fig { min-width: 90px; }
.pwbf-formats .pwbf-hl { font-size: clamp(12px, 7.5cqw, 24px); }

/* Brand field: generated from tokens.json by scripts/field_css.py */
.pw-brandfield, .pw-card--brand { --pwf-bg: linear-gradient(155deg, #2a4ee0 0%, #2448d8 52%, #1f41cd 100%); --pwf-light: radial-gradient(120% 95% at 6% 0%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 58%); --pwf-ln: #ffffff; --pwf-lnop: 0.075; --pwf-grain: 0.08; --pwf-sheen: 0.085; --pwf-fg: #ffffff; --pwf-label: #dce6ff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
:where([data-theme="dark"]) .pw-brandfield, :where([data-theme="dark"]) .pw-card--brand { --pwf-bg: linear-gradient(155deg, #2a4ddf 0%, #2042cf 28%, #1a33a2 62%, #121d5c 100%); --pwf-light: radial-gradient(120% 95% at 4% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 55%); --pwf-ln: #ffffff; --pwf-lnop: 0.065; --pwf-grain: 0.09; --pwf-sheen: 0.07; --pwf-fg: #ffffff; --pwf-label: #c9d5ff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .pw-brandfield, :where(:root:not([data-theme="light"])) .pw-card--brand { --pwf-bg: linear-gradient(155deg, #2a4ddf 0%, #2042cf 28%, #1a33a2 62%, #121d5c 100%); --pwf-light: radial-gradient(120% 95% at 4% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 55%); --pwf-ln: #ffffff; --pwf-lnop: 0.065; --pwf-grain: 0.09; --pwf-sheen: 0.07; --pwf-fg: #ffffff; --pwf-label: #c9d5ff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14); } }
.pw-brandfield.pw-brandfield--royal, .pw-brandfield--royal { --pwf-bg: linear-gradient(155deg, #2a4ee0 0%, #2448d8 52%, #1f41cd 100%); --pwf-light: radial-gradient(120% 95% at 6% 0%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 58%); --pwf-ln: #ffffff; --pwf-lnop: 0.075; --pwf-grain: 0.08; --pwf-sheen: 0.085; --pwf-fg: #ffffff; --pwf-label: #dce6ff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.pw-brandfield.pw-brandfield--deep, .pw-brandfield--deep { --pwf-bg: linear-gradient(155deg, #2a4ddf 0%, #2042cf 28%, #1a33a2 62%, #121d5c 100%); --pwf-light: radial-gradient(120% 95% at 4% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 55%); --pwf-ln: #ffffff; --pwf-lnop: 0.065; --pwf-grain: 0.09; --pwf-sheen: 0.07; --pwf-fg: #ffffff; --pwf-label: #c9d5ff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.pw-brandfield.pw-brandfield--midnight, .pw-brandfield--midnight { --pwf-bg: radial-gradient(130% 110% at 92% 0%, #24378f 0%, #18215a 30%, #121326 64%, #0f0e12 100%); --pwf-light: linear-gradient(transparent, transparent); --pwf-ln: #8fa4ff; --pwf-lnop: 0.12; --pwf-grain: 0.1; --pwf-sheen: 0.05; --pwf-fg: #f5f1ea; --pwf-label: #9aafff; --pwf-edge: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.pw-brandfield.pw-brandfield--sky, .pw-brandfield--sky { --pwf-bg: linear-gradient(155deg, #ebf0ff 0%, #dce6ff 50%, #cddaff 100%); --pwf-light: radial-gradient(120% 95% at 6% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 58%); --pwf-ln: #2448d8; --pwf-lnop: 0.09; --pwf-grain: 0.06; --pwf-sheen: 0.35; --pwf-fg: #1e2a55; --pwf-label: #2448d8; --pwf-edge: inset 0 0 0 1px rgba(36, 72, 216, 0.10); }
.pw-brandfield.pw-brandfield--bone, .pw-brandfield--bone { --pwf-bg: linear-gradient(155deg, #fcfbf9 0%, #f6f4f0 55%, #eeebe5 100%); --pwf-light: radial-gradient(120% 95% at 6% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 58%); --pwf-ln: #1c1b19; --pwf-lnop: 0.055; --pwf-grain: 0.06; --pwf-sheen: 0.4; --pwf-fg: #1c1b19; --pwf-label: #66635e; --pwf-edge: inset 0 0 0 1px rgba(28, 27, 25, 0.10); }
.pw-brandfield, .pw-card--brand { position: relative; overflow: hidden; isolation: isolate; color: var(--pwf-fg); background: var(--pwf-light), var(--pwf-bg); box-shadow: var(--pwf-edge); }
.pw-brandfield::before, .pw-card--brand::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("../field/grain@2x.png") 0 0 / 128px 128px; opacity: var(--pwf-grain); }
.pw-brandfield::after, .pw-card--brand::after { content: ""; position: absolute; inset: -10% -80%; z-index: 1; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, var(--pwf-sheen)) 47%, rgba(255, 255, 255, calc(var(--pwf-sheen) * .4)) 52%, rgba(255, 255, 255, 0) 62%); transform: translateX(-22%); }
.pw-brandfield.is-entering::after, .pw-card--brand.is-entering::after { animation: pw-brandfield-sheen 1600ms var(--ease-out) both; }
@keyframes pw-brandfield-sheen { from { transform: translateX(-62%); } to { transform: translateX(-22%); } }
.pw-brandfield > .pw-geo, .pw-card--brand > .pw-geo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: var(--pwf-lnop); }
/* lines are drawn solid and the layer is faded once, so crossings never double up */
.pw-brandfield > .pw-geo .ln, .pw-card--brand > .pw-geo .ln { stroke: var(--pwf-ln); stroke-width: var(--sw, 15); }
.pw-brandfield > .pw-geo .sp, .pw-card--brand > .pw-geo .sp { fill: var(--pwf-ln); }
.pw-brandfield > :not(.pw-geo), .pw-card--brand > :not(.pw-geo) { position: relative; z-index: 2; }
.pw-brandfield .pw-cap, .pw-card--brand .pw-cap { color: var(--pwf-label); }
@media (prefers-reduced-motion: reduce) { .pw-brandfield.is-entering::after, .pw-card--brand.is-entering::after { animation: none; } }

/* <<< components part two <<< */