/* Kit Locker — light theme. Tokens mirror academy-hub redesign.
 * 12 May 2026: Kit Intelligence brand-tokens imported below; legacy
 * --navy / --gold tokens kept for now so existing component styles
 * don't break. Replace them with --ki-* tokens incrementally. */
@import url("brand-tokens.css");

:root {
  /* Kit Intelligence product brand — fixed across ALL tenants by design (the
     product mark, login, splash, toast, promo). This is the Kit Intelligence
     product chrome colour, NOT a tenant value: it is intentionally not in
     clubs.py _THEME_DEFAULTS and must never be referenced on a themed in-app
     page. Confirmed usage (May 2026): only the tenant-neutral login surface
     (.ki-login*) and the brand splash. The per-club accent (--navy/--gold
     below, overridden in base.html from theme.primary/accent) is the only
     palette that tracks the tenant, so the product chrome reads on-brand
     while actions take the club colour. Despite the hex matching WWFC's
     legacy teal, this is product chrome and not WWFC tenant leakage —
     do not re-flag as a hardcode. */
  --teal: #164353;
  --teal-deep: #0c2c38;
  --display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tenant accent (overridden per club in base.html via --navy/--gold).
     --accent* is the canonical tenant token the Kit Intelligence (.ki-*)
     component set reads. It follows --navy, so the single per-club override
     in base.html themes BOTH the legacy and the KI components at once.
     --accent-soft / --accent-tint use color-mix off the live accent, with a
     static teal-grey fallback for engines without color-mix support. */
  --navy: #0b2240;
  --navy-2: #14315a;
  --gold: #c9a55a;
  --gold-2: #b18e3f;
  --accent: var(--navy);
  --accent-deep: var(--navy-2);
  --accent-soft: #E5EDED;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-tint: #F0F4F4;
  --accent-tint: color-mix(in srgb, var(--accent) 7%, #fff);

  /* Neutral canvas — Kit Intelligence "paper" system: warm off-white page
     (never pure white) carrying a faint paper-grain (body::before), with a
     hair-off-white surface so white cards float on the warm paper. Borders
     warmed to sit in the paper system. */
  --paper: #F1EDE4;
  --bg: #F1EDE4;
  --surface: #FFFEFB;
  --border: #E8E5DD;
  --line: var(--border);
  --line-2: #F0EDE6;
  --ink: #0A1628;
  --ink-2: #39414f;
  --muted: #6B7280;

  /* Status — carried by a dot + label, never colour alone (AA-tuned tints). */
  --ok: #2F7A4D;   --ok-soft: #E3F0E8;
  --warn: #9A6B22; --warn-soft: #F4ECDC;
  --bad: #B0402B;  --bad-soft: #F4E4DF;

  /* Soft two-layer elevation so white cards lift off the textured paper —
     load-bearing for the premium feel (Kit Intelligence design handoff). */
  --shadow: 0 1px 2px rgba(12, 32, 56, 0.05), 0 10px 26px rgba(12, 32, 56, 0.05);
  --shadow-sm: 0 1px 2px rgba(12, 32, 56, 0.05), 0 4px 12px rgba(12, 32, 56, 0.04);
  --radius: 13px;
  --radius-sm: 9px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; }
/* Defensive: ensure the HTML `hidden` attribute always hides, even when an
   element class sets display:flex/grid/etc. Without this, .push-banner and
   any other display-overridden component visibly leaks past `el.hidden = true`. */
[hidden] { display: none !important; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  /* 13 May 2026: clear the iOS home-indicator at the bottom of the page so
     the last row of content / any sticky bar isn't under the swipe bar.
     0 in normal browsers, ~34pt on notched iPhones in PWA mode. */
  padding-bottom: env(safe-area-inset-bottom);
  /* Inter typographic features:
       cv11 = single-storey 'a' (more refined)
       ss01 = open-aperture digits (esp. better '4')
       cv02 = alternate '6' / '9'
       Tabular numerals are applied per-context below. */
  font-feature-settings: "cv11", "ss01", "cv02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Paper-grain page texture — inline SVG fractal noise (no asset, offline-safe,
   CSP-safe as a data: background like the existing select chevron), fixed so it
   doesn't scroll, behind everything, multiplied onto the warm paper. White
   cards (--surface) sit cleanly on top; the grain only shows in the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.2;
}
@media (prefers-reduced-motion: reduce) { body::before { opacity: 0.14; } }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Branded edge details -----
   These are the seams where premium apps win: the scrollbar, the focus ring,
   the text selection. Generic browser defaults expose every interaction as
   "this is a generic webpage." Branded versions whisper "this is a product." */

/* Text selection: navy background, gold-tinted ink. */
::selection {
  background: var(--navy);
  color: var(--gold);
}

/* Custom scrollbars on light surfaces — slim, navy thumb, gold on hover.
   Webkit (Safari, Chrome, modern Edge) + Firefox standards. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(11,34,64,0.22) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(11,34,64,0.22);
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(201,165,90,0.55);
  background-clip: padding-box;
}

/* Focus rings — gold, not navy. Brand expression even in keyboard nav. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs already have a navy focus shadow — let the buttons keep theirs. */
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201,165,90,0.20);
}

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* 12 May 2026: iOS PWA fullscreen mode (status-bar-style=black-translucent)
     draws the page under the iOS status bar. env(safe-area-inset-top)
     returns 0 in normal browsers, ~44-59pt on iOS PWA.
     13 May 2026: also clear the left/right insets so the wordmark + Sign
     out aren't behind the Dynamic Island / rounded corners in landscape.
     max(24px, …) keeps the 24px desktop padding and only grows when the
     device actually reports a bigger inset. The navy background extends
     up into the status-bar area for the unified topbar look. */
  padding:
    calc(12px + env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    12px
    max(24px, env(safe-area-inset-left));
  /* Kit Intelligence light topbar — translucent warm paper with a blur, so it
     floats over the textured page like the cards. Was the dark navy bar; the
     KI mark + wordmark and the outline crest both read on the light surface. */
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--ink);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s, border-color 0.2s;
}
/* Gains a soft drop-shadow once the page scrolls (toggled by a scrollY>6
   listener in base.html) so it lifts off the paper rather than sitting under
   a hairline. */
.topbar.is-scrolled {
  box-shadow: 0 1px 0 rgba(12,32,56,.04), 0 8px 24px rgba(12,32,56,.06);
  border-bottom-color: transparent;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
/* Kit Intelligence product lockup in the topbar — the K mark + "Kit
   Intelligence" wordmark are constant (the product brand); the per-tenant
   club crest sits past a hairline divider to its right. */
.ki-brand-mark-img { width: 28px; height: 28px; display: block; border-radius: 7px; flex-shrink: 0; }
.ki-wm { font-weight: 600; font-size: 15.5px; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.ki-top-div { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.ki-topbar-crest { height: 34px; width: auto; display: block; flex-shrink: 0; }
/* On a phone hand the scrolling nav its horizontal room: drop the product
   wordmark (the K mark + club crest still identify product + tenant). Mirrors
   the old .brand-wordmark mobile-hide. */
@media (max-width: 640px) { .ki-wm { display: none; } }
.brand-mark {
  width: 44px; height: 44px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.brand-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  /* "Kit" stays white, "Locker" goes gold via inner span. Treated as a wordmark, not a label. */
}
.brand-name .brand-accent { color: var(--gold); font-weight: 500; }

/* Kit Intelligence brand swap — full lockup on desktop, K-square mark on
   mobile. The lockup wordmark dominated the narrow phone topbar; the
   K-only mark reads identically and gives the nav back its horizontal
   breathing room. Breakpoint matches the @media below at 640px. */
.ki-brand-lockup { height: 28px; width: auto; display: inline-block; }
.ki-brand-mark   { display: none; }
/* WWFC internal-product wordmark — sits beside the crest in the header /
   footer / login. Hidden on narrow screens so the crest alone identifies
   the app. Commercial "Kit Intelligence" branding lives in the separate
   clean-room product, not here. */
.brand-wordmark {
  font-weight: 600; letter-spacing: 0.02em; font-size: 15px;
  color: inherit; white-space: nowrap;
}
@media (max-width: 640px) { .brand-wordmark { display: none; } }
@media (max-width: 640px) {
  .ki-brand-lockup { display: none; }
  /* Keep height at 28px (matching desktop lockup) so the topbar doesn't
     grow taller on mobile than on desktop. Square mark is 1:1 so the
     width follows. */
  .ki-brand-mark   { display: inline-block; height: 28px; width: 28px; }
}

.nav { display: flex; align-items: center; gap: 10px; }
/* Pill nav for the light topbar — ink links, accent-soft pill on the active
   tab (was white links + a gold underline on the old dark bar). */
.nav a {
  color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  position: relative; padding: 7px 12px; border-radius: 8px;
  transition: color 0.12s, background 0.12s;
}
.nav a:hover { color: var(--ink); background: var(--line-2); text-decoration: none; }
.nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav a.active::after { display: none; }
.nav-secondary { color: var(--muted) !important; font-weight: 500 !important; }
.nav-secondary::after { display: none !important; }
/* /logout is POST-only, wrapped in a tiny form. Style the form + button
   so they sit inline with the rest of the nav and look like a link. */
.nav-logout-form { display: inline-flex; margin: 0; padding: 0; }
.nav-logout-btn {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; line-height: inherit;
}
.nav-logout-btn:hover { color: var(--ink) !important; }
.kiosk-badge {
  background: var(--gold); color: var(--navy);
  padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12px;
}

/* ═══ Brand splash — Kit Intelligence × club crest ═══
   From design_handoff v2 (product-reference + SPLASH-INTEGRATION.md): the
   crest rises in a haloed coin, a hairline divider draws, the Kit Intelligence
   wordmark wipes in, a truthful loader (with travelling glow-dot) eases to 90%
   then snaps to 100% when the page is ready, and the whole thing dissolves
   with a blur-scale. Driven by the IIFE in base.html; all props scoped to
   #boot. One addition over the reference: a CSS failsafe fade at 11.5s
   (cancelled by the IIFE the moment JS runs) so a JS failure can never trap a
   user behind the overlay. */
#boot{
  --e-out: cubic-bezier(.2,.9,.3,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --e-inout: cubic-bezier(.7,0,.2,1);
  --bar: clamp(220px,26vw,300px);
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#06141a; overflow:hidden;
  transition:opacity .7s var(--e-inout);
  animation:kisSafety .7s ease 11.5s forwards; /* JS-off failsafe */
}
#boot.boot-hide{ opacity:0; pointer-events:none; }
@keyframes kisSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.kis-bg{ position:absolute; inset:0; pointer-events:none; }
.kis-bg-glow{
  position:absolute; left:50%; top:42%; width:160vmin; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(34,104,120,0.42) 0%, rgba(14,50,61,0.22) 34%, transparent 64%);
  opacity:0; animation:kisGlow 1.6s var(--e-out) .1s forwards;
}
.kis-bg-vig{ position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 46%, transparent 52%, rgba(0,0,0,.55) 100%); }
.kis-bg-sheen{
  position:absolute; top:-20%; bottom:-20%; width:42%; left:-50%;
  background:linear-gradient(100deg, transparent, rgba(120,200,212,.05) 46%, rgba(180,230,238,.10) 50%, rgba(120,200,212,.05) 54%, transparent);
  transform:skewX(-12deg); animation:kisSheen 6.5s ease-in-out 1.0s infinite;
}
.kis-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC41Jy8+PC9zdmc+"); background-size:180px 180px; transition:opacity .4s ease; }
#boot.boot-hide .kis-grain{ opacity:0; }

.kis-stage{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  padding:0 28px; transition:transform .7s var(--e-inout), filter .7s var(--e-inout); }
#boot.boot-hide .kis-stage{ transform:translateY(-16px) scale(1.04); filter:blur(6px); }

.kis-crest-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.kis-crest-halo{
  position:absolute; left:50%; top:50%; width:200%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(.5); opacity:0; filter:blur(9px);
  background:radial-gradient(circle, rgba(95,182,196,.38) 0%, rgba(95,182,196,.08) 46%, transparent 70%);
  animation:kisHalo 1.7s var(--e-out) .35s forwards;
}
.kis-crest{
  position:relative; width:clamp(86px,9vw,116px); height:auto; display:block; border-radius:50%;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.5));
  transform:scale(.7); opacity:0; animation:kisCrest 1.1s var(--e-spring) .3s forwards;
}
.kis-crest-ring{
  position:absolute; left:50%; top:50%; width:clamp(86px,9vw,116px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1.2); border-radius:50%;
  border:1px solid rgba(255,255,255,.14); opacity:0; animation:kisFade .9s var(--e-out) .7s forwards;
}

.kis-div{ display:flex; align-items:center; gap:10px;
  margin:clamp(22px,3vw,34px) 0 clamp(20px,2.6vw,30px); opacity:0;
  animation:kisFade .6s var(--e-out) .95s forwards; }
.kis-div-line{ height:1px; width:0; background:linear-gradient(90deg,transparent,rgba(143,190,196,.55)); animation:kisLine .7s var(--e-out) 1.0s forwards; }
.kis-div-line.r{ background:linear-gradient(90deg,rgba(143,190,196,.55),transparent); }
.kis-div-dot{ width:5px; height:5px; border-radius:50%; background:#5FB6C4; box-shadow:0 0 10px rgba(95,182,196,.85); flex-shrink:0; }

.kis-wordmark{ width:clamp(228px,36vw,384px); height:auto; display:block;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.48));
  clip-path:inset(0 100% 0 0); opacity:0; animation:kisWipe 1.0s var(--e-out) 1.15s forwards; }
.kis-tag{ font-family:'Inter',sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(9.5px,1vw,12px); letter-spacing:.34em; padding-left:.34em; color:#7FA9B2;
  margin-top:clamp(16px,2vw,24px); opacity:0; text-align:center; animation:kisFade .8s var(--e-out) 1.8s forwards; }

.kis-loader{ margin-top:clamp(30px,5vh,52px); width:var(--bar); opacity:0; animation:kisFade .8s var(--e-out) 2.0s forwards; }
#boot.boot-hide .kis-loader{ animation:none; opacity:0; transition:opacity .35s ease; }
.kis-load-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:11px;
  font-family:'Inter',sans-serif; font-size:clamp(9px,.95vw,10.5px); letter-spacing:.1em; text-transform:uppercase; }
.kis-load-label{ color:#6F95A0; font-weight:500; white-space:nowrap; }
.kis-load-pct{ color:#9BD8E1; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.kis-track{ position:relative; height:2px; border-radius:999px; background:rgba(255,255,255,.09); }
.kis-fill{ position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#2E6E7E,#9BD8E1); transition:width .14s linear; }
.kis-fill-dot{ position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%,-50%); background:#CDEEF3; box-shadow:0 0 12px rgba(155,216,225,.9); transition:left .14s linear; }
.kis-edge{ position:fixed; left:0; bottom:0; height:2px; width:0; opacity:.7;
  background:linear-gradient(90deg,transparent,#5FB6C4 16%,#9BD8E1 84%,transparent); transition:width .14s linear; }
#boot.boot-hide .kis-edge{ opacity:0; transition:opacity .35s ease; }

@keyframes kisGlow{ to{ opacity:1; } }
@keyframes kisSheen{ 0%{ left:-50%; } 55%,100%{ left:130%; } }
@keyframes kisHalo{ 60%{ opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:.7; } }
@keyframes kisCrest{ 100%{ transform:scale(1); opacity:1; } }
@keyframes kisFade{ to{ opacity:1; } }
@keyframes kisLine{ to{ width:46px; } }
@keyframes kisWipe{ 0%{ clip-path:inset(0 100% 0 0); opacity:1; } 100%{ clip-path:inset(0 0 0 0); opacity:1; } }
@media(prefers-reduced-motion:reduce){
  .kis-bg-glow{ animation:none; opacity:1; } .kis-bg-sheen{ animation:none; }
  .kis-crest-halo{ animation:none; opacity:.7; transform:translate(-50%,-50%) scale(1); }
  .kis-crest,.kis-crest-ring,.kis-div,.kis-tag,.kis-loader{ animation:none; opacity:1; }
  .kis-crest{ transform:none; }
  .kis-div-line{ width:46px; animation:none; }
  .kis-wordmark{ animation:none; clip-path:none; opacity:1; }
  #boot.boot-hide .kis-stage{ transform:none; filter:none; }
}

/* Mobile topbar — fewer nav items would be ideal, but until we ship a hamburger
   we make the nav itself horizontally scrollable so it never overlaps the brand. */
@media (max-width: 720px) {
  .topbar {
    /* 17 May 2026: this rule previously set `padding: 10px 14px`, a
       shorthand that CLOBBERED the base rule's env(safe-area-inset-top)
       on every phone — so the nav sat under the iOS status bar in the
       installed PWA (the bug "fixed" twice on the base rule but never
       here). Keep the tighter mobile spacing but re-apply the insets:
       top clears the status bar, left/right clear the Dynamic Island /
       rounded corners in landscape. Do NOT collapse this back to a
       plain `padding` shorthand. */
    padding:
      calc(10px + env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      10px
      max(14px, env(safe-area-inset-left));
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .brand { gap: 10px; flex-shrink: 0; }
  .brand-name { font-size: 16px; letter-spacing: -0.015em; }
  .brand-mark { width: 34px; height: 34px; }
  .nav {
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 0;
    white-space: nowrap;
    /* 17 May 2026: was `flex-end`. With overflow-x scroll + ~10 nav
       items, flex-end anchored the scroll to the END, so every full
       page load (every nav tap) showed "All clubs / Sign out" and hid
       Dashboard/Checkout/… off the left. Start-aligned so the area
       links are what you see; base.html scrolls the active one into
       view. Do NOT set this back to flex-end. */
    justify-content: flex-start;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex-shrink: 0; font-size: 13px; }
}

/* ---- container ----
   5 May 2026: bumped max-width from 1100px to 1320px so the dashboard
   uses more of a typical laptop screen. Wider works for an operational
   tool — KPIs, tables, charts all benefit from breathing room. Stripe
   sits at 1280px, Linear at 1280px, this lands slightly wider. */
.container { max-width: 1320px; margin: 0 auto; padding: 24px 28px 60px; }
@media (max-width: 640px) { .container { padding: 16px 14px 40px; } }

/* ---- typography ---- */
/* Headlines deliberately oversized + light weight to make space breathe.
   Letter-spacing tightens slightly at every size up. */
h1 { font-size: 40px; margin: 0 0 8px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--navy); }
h2 { font-size: 22px; margin: 26px 0 12px; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.25; }

/* Kit Intelligence display face (Geist) — greetings + big stat numbers only,
   so the numerals read confident while body/labels stay Inter. */
h1,
.kpi-value,
.ki-forecast-num,
.ki-score-num,
.pkc-usage-value { font-family: var(--display); letter-spacing: -0.02em; }
h3 { font-size: 16px; margin: 18px 0 8px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 15px; line-height: 1.5; }
.tabular { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  h1 { font-size: 30px; }
  h2 { font-size: 19px; }
}

/* Editorial eyebrow — broadsheet-style label above section headings.
   Small, uppercase, gold, tracked. Tells the eye where sections begin. */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0 0 6px;
}

/* Hairline divider — quiet grey rule between major page sections.
   5 May 2026: was a gold-gradient. Reduced gold to focus rings + CTA
   highlights only — divider doesn't earn the brand colour. */
.divider-gold {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
  border: 0;
}

/* Toast notifications — top-right, slide+fade, no layout shift. */
.toast-stack {
  position: fixed;
  /* 18 May 2026: the checkout/success toast was rendering under the iOS
     status bar on the phone PWA. Clear the safe area (env() = 0 on
     desktop, so no change there). */
  top: calc(16px + env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(11,34,64,0.10), 0 2px 6px rgba(11,34,64,0.06);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition: opacity 0.18s, transform 0.18s;
}
.toast.toast-out { opacity: 0; transform: translateX(8px); }
.toast-error { border-left-color: var(--bad); }
.toast-warn { border-left-color: var(--warn); }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-sub { font-size: 12px; color: var(--muted); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Page-load fade — subtle but premium. Applied to .container by default. */
@keyframes page-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.container > * { animation: page-rise 0.28s ease both; }
main.container > *:nth-child(1) { animation-delay: 0ms; }
main.container > *:nth-child(2) { animation-delay: 30ms; }
main.container > *:nth-child(3) { animation-delay: 60ms; }
main.container > *:nth-child(4) { animation-delay: 90ms; }
main.container > *:nth-child(n+5) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  main.container > * { animation: none; }
  .toast { animation: none; }
}

/* Cmd+K command palette */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(11,34,64,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: cmdk-fade 0.15s ease;
}
@keyframes cmdk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cmdk {
  width: 100%; max-width: 600px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(11,34,64,0.20), 0 4px 12px rgba(11,34,64,0.08);
  overflow: hidden;
  animation: cmdk-pop 0.18s cubic-bezier(0.2,0.7,0.3,1.1);
}
@keyframes cmdk-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cmdk-input-wrap svg { flex-shrink: 0; color: var(--muted); }
.cmdk-input {
  flex: 1; border: 0; outline: 0;
  font-family: inherit; font-size: 16px;
  color: var(--ink); background: transparent;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-results { max-height: 50vh; overflow-y: auto; padding: 6px 0; }
.cmdk-section-label {
  font-size: 10px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
  padding: 10px 18px 4px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--bg);
}
.cmdk-item.active { color: var(--navy); }
.cmdk-item-meta {
  margin-left: auto;
  font-size: 11px; color: var(--muted);
}
.cmdk-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-hint {
  display: flex; gap: 14px; justify-content: flex-end;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
  font-size: 11px; color: var(--muted);
}
.cmdk-kbd {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit; font-size: 10px;
  color: var(--ink-2);
}
.cmdk-trigger-hint {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 11px; color: var(--muted); cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.cmdk-trigger-hint:hover { border-color: var(--muted); color: var(--ink-2); }

/* Personalised greeting header — the "Hi, <name>" account chip in the topbar,
   present on every page for each individual, with a native <details> dropdown
   to set their own nickname. Sits between ⌘K and Sign out. */
.acct { position: relative; display: inline-block; }
.acct > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 10px;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { border-color: var(--muted); color: var(--ink); }
.acct[open] > summary { border-color: var(--accent); color: var(--ink); }
.acct-hi { color: var(--muted); }
.acct-name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.acct-caret { font-size: 9px; color: var(--muted); }
.acct-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 14px; width: 264px;
  display: flex; flex-direction: column; gap: 6px;
}
.acct-pop label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
}
.acct-row { display: flex; gap: 8px; }
.acct-row input {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.acct-hint { font-size: 12px; color: var(--muted); }

/* View-scope dropdown — cross-club admin only, in the topbar. Visible after
   the nav links, before the ⌘K hint. Matches the light topbar: surface fill,
   ink text, accent ring on focus. */
.view-scope-form {
  display: inline-flex;
  margin: 0;
}
.view-scope-select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 28px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path fill='%236B7280' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 10px;
}
.view-scope-select:hover {
  background-color: var(--line-2);
  border-color: var(--muted);
}
.view-scope-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.view-scope-select option {
  background: var(--surface);
  color: var(--ink);
}
@media (max-width: 720px) {
  .view-scope-select { font-size: 11px; padding: 3px 22px 3px 8px; }
}
@media (max-width: 640px) {
  .cmdk-trigger-hint { display: none; }
}

/* ===== AI Assistant chat =====
   5 May 2026: quietened. Was 56px with a perpetual gold pulse halo —
   pulled focus from page content. Now 44px, navy with a thin gold border,
   no continuous animation. Available, not insistent. */
.ai-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201,165,90,0.35);
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 4px 12px rgba(11,34,64,0.16),
              inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  transition: transform 0.18s ease, box-shadow 0.2s;
}
.ai-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11,34,64,0.22),
              inset 0 1px 0 rgba(255,255,255,0.10);
}
.ai-fab:active { transform: translateY(0); }
.ai-fab svg { width: 18px; height: 18px; }
.ai-fab-pulse {
  /* Retained as DOM element so the existing markup doesn't break, but
     visually disabled — no continuous animation. */
  display: none;
}

.ai-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 420px; max-width: calc(100vw - 32px);
  height: 640px; max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(11,34,64,0.22), 0 8px 16px rgba(11,34,64,0.10);
  display: flex; flex-direction: column;
  z-index: 101;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2,0.7,0.3,1.1), opacity 0.18s;
  pointer-events: none;
}
.ai-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
@media (max-width: 540px) {
  .ai-panel { bottom: 0; right: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

.ai-header {
  display: flex; align-items: center; gap: 10px;
  /* 18 May 2026: full-screen on mobile (≤540px) the panel sits at top:0,
     so under the iOS black-translucent status bar the header — and the
     close ✕ — were hidden behind the time/Dynamic Island and untappable
     (user got trapped in the chatbot). Clear the safe area; env() is 0
     on desktop / non-PWA so the floating card is unaffected. */
  padding: calc(14px + env(safe-area-inset-top))
           max(18px, env(safe-area-inset-right))
           14px
           max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.ai-header-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.ai-header-text { flex: 1; min-width: 0; }
.ai-header-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.ai-header-sub { font-size: 11px; color: var(--muted); }
.ai-header-close {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ai-header-close:hover { background: var(--bg); color: var(--ink); }

.ai-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 8px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.ai-msg { display: flex; gap: 10px; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--navy);
  color: white;
  border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
  background: var(--bg);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.ai-msg-bubble strong { font-weight: 600; }
.ai-msg-bubble code { font-family: Menlo, monospace; font-size: 12px; background: rgba(11,34,64,0.06); padding: 1px 5px; border-radius: 3px; }
.ai-msg-bubble table { margin: 8px 0; border-collapse: collapse; }
.ai-msg-bubble th, .ai-msg-bubble td { padding: 4px 8px; border: 1px solid rgba(11,34,64,0.10); font-size: 13px; text-align: left; }
.ai-msg-bubble th { background: rgba(11,34,64,0.04); font-weight: 600; }
.ai-msg-bubble ul, .ai-msg-bubble ol { margin: 6px 0; padding-left: 20px; }
.ai-msg-bubble p { margin: 6px 0; }
.ai-msg-bubble p:first-child { margin-top: 0; }
.ai-msg-bubble p:last-child { margin-bottom: 0; }

.ai-followups {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
  align-self: flex-start;
  max-width: 88%;
}
.ai-followup {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  animation: ai-followup-in 0.28s cubic-bezier(0.2,0.7,0.3,1.1) both;
}
.ai-followup:hover {
  background: var(--bg);
  border-color: var(--gold-2);
  color: var(--navy);
}
.ai-followup:active { transform: translateY(1px); }
.ai-followup::before {
  content: "↳"; color: var(--gold-2); font-size: 12px; opacity: 0.7;
}
@keyframes ai-followup-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .ai-followup { animation: none; } }

.ai-tools-trail {
  font-size: 11px; color: var(--muted);
  margin-top: 4px; padding-left: 4px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.ai-tool-chip {
  background: rgba(201,165,90,0.14);
  color: var(--gold-2);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
}

.ai-typing {
  display: flex; gap: 4px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.ai-typing span {
  width: 6px; height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: ai-typing 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ai-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ai-suggestions {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 18px;
}
.ai-suggestions-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 4px;
}
.ai-suggestion {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.ai-suggestion:hover {
  background: var(--bg);
  border-color: var(--gold-2);
}
.ai-suggestion:active { transform: translateY(1px); }

.ai-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 18px 12px;
  color: var(--muted);
}
.ai-empty-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(11,34,64,0.15);
}
.ai-empty-title {
  font-size: 16px; font-weight: 600; color: var(--ink);
  margin-bottom: 4px;
}
.ai-empty-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; line-height: 1.5; max-width: 280px; }

.ai-input-wrap {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface);
}
.ai-input-row {
  display: flex; align-items: flex-end;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-input-row:focus-within {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201,165,90,0.16);
}
.ai-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  resize: none;
  background: transparent;
  font-family: inherit; font-size: 14px;
  color: var(--ink); line-height: 1.5;
  padding: 4px 0;
  max-height: 120px;
}
.ai-input::placeholder { color: var(--muted); }
.ai-send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: linear-gradient(180deg, #d3b06b 0%, var(--gold) 100%);
  color: var(--navy);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
  transition: filter 0.15s, transform 0.06s;
}
.ai-send:hover:not(:disabled) { filter: brightness(1.06); }
.ai-send:active:not(:disabled) { transform: translateY(1px); }
.ai-send:disabled {
  background: var(--border); color: var(--muted);
  cursor: not-allowed; box-shadow: none;
}

/* Voice input mic — 21 May 2026. Same shape as ai-send, neutral tone
   until tapped. Active state pulses red so the kitman can see they're
   recording even mid-conversation. */
.ai-mic {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}
.ai-mic:hover { filter: brightness(0.96); }
.ai-mic-active {
  background: linear-gradient(180deg, #e0807a 0%, #c84539 100%);
  color: #fff;
  border-color: transparent;
  animation: ai-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,69,57,0.50); }
  50%      { box-shadow: 0 0 0 6px rgba(200,69,57,0.00); }
}

.ai-input-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink-2);
}

.ai-input-hint {
  font-size: 10px; color: var(--muted);
  margin-top: 6px; text-align: center;
}

/* ----- Skeleton loading shimmer ----- */
.skeleton {
  background: linear-gradient(90deg,
    rgba(11,34,64,0.05) 0%,
    rgba(11,34,64,0.10) 50%,
    rgba(11,34,64,0.05) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
}
.skeleton-row .skeleton-line {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(11,34,64,0.06) 0%,
    rgba(11,34,64,0.12) 50%,
    rgba(11,34,64,0.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line.lg { width: 60%; }
.skeleton-line.sm { width: 40%; height: 8px; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-row .skeleton-line { animation: none; }
}

/* ----- Sticky compacting page header (.dash-head only) ----- */
.dash-head {
  position: sticky;
  top: 68px; /* topbar height — sits flush below it */
  z-index: 5;
  background: var(--bg);
  margin: 0 -22px;
  padding: 0 22px 22px;
  transition: padding 0.18s ease, box-shadow 0.18s ease;
}
@media (max-width: 720px) { .dash-head { top: 54px; } }
.dash-head.is-stuck {
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px -4px rgba(11,34,64,0.08);
  border-bottom: 1px solid var(--border);
}
.dash-head.is-stuck h1 {
  font-size: 22px !important;
  margin: 0 !important;
  transition: font-size 0.18s ease, margin 0.18s ease;
}
.dash-head.is-stuck .eyebrow,
.dash-head.is-stuck .subtitle { display: none; }
@media (max-width: 640px) {
  .dash-head { margin: 0 -14px; padding: 0 14px 16px; }
  .dash-head.is-stuck h1 { font-size: 18px !important; }
}

/* ---- card / surface ----
   Three variants:
     .card         — default, subtle shadow, the workhorse
     .card-primary — hero card with gold top accent + stronger shadow
     .card-flat    — no shadow, used inside another card or for sub-content
*/
/* Checkout cards — were inline padding:36px 40px / 28px 32px, which ate
   ~80px of a 375px phone's width and forced the recent-checkouts table to
   overflow. Moved to a class so mobile can shrink it. (13 May 2026) */
.checkout-card { padding: 32px 36px; }
/* 13 June 2026: was a hard `1fr 1fr`. On a zoomed-in or small viewport the
   two pickers were pushed off the right edge with no horizontal scrollbar
   (the global overflow-x:hidden), leaving Step 2 unreachable. auto-fit lets
   the columns collapse to one row each when there isn't room. */
.checkout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
}
/* Let a wide table scroll inside its own box rather than overflow the page
   (which the global overflow-x:hidden would silently clip). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .checkout-card { padding: 20px 16px; }
  /* Item search | Player search side-by-side is too cramped on a phone —
     stack them so each gets full width. */
  .checkout-grid { grid-template-columns: 1fr; gap: 20px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
  position: relative;
}
.card-primary {
  box-shadow: 0 1px 2px rgba(11,34,64,0.05),
              0 8px 16px rgba(11,34,64,0.06),
              0 24px 48px rgba(11,34,64,0.04);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-primary::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 50%, var(--gold) 100%);
  opacity: 0.85;
}
.card-flat {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 14px 16px;
}
.card-section + .card-section { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; }

/* ---- KPI grid ---- */
.kpi-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 18px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* ---- table ---- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
td { font-variant-numeric: tabular-nums; }
th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; background: #fafbfc; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: #fafbfc; }

/* ---- form ---- */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.form-row label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.form-row input:not([type=checkbox]):not([type=radio]),
.form-row select, .form-row textarea {
  width: 100%;
}
.form-row input, .form-row select, .form-row textarea {
  padding: 10px 12px; font-size: 15px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: white; color: var(--ink);
  font-family: inherit;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(20, 49, 90, 0.12);
}

/* ---- buttons ----
   Subtle vertical gradient + inset highlight + crisp shadow = tactile, premium.
   Same trick Linear/Stripe/Apple use. Visible at every CTA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  border: none; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  color: white;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(11,34,64,0.10);
  transition: transform 0.06s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover {
  text-decoration: none;
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 4px rgba(11,34,64,0.14);
}
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); }
.btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 3px rgba(20,49,90,0.25); }
.btn[disabled], .btn:disabled {
  opacity: 0.55; cursor: not-allowed; filter: none; transform: none;
}

.btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  color: var(--ink); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(11,34,64,0.04);
}
.btn-secondary:hover {
  filter: none;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f6 100%);
}

.btn-gold {
  background: linear-gradient(180deg, #d3b06b 0%, var(--gold) 100%);
  color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(120,85,15,0.18);
}
.btn-gold:hover { filter: brightness(1.05); }

.btn-danger {
  background: linear-gradient(180deg, #c93535 0%, var(--bad) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(120,30,30,0.18);
}

.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; font-weight: 500; }

/* ---- chips, status, flash ---- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-ok { background: #e6f3ec; color: var(--ok); }
.chip-warn { background: #fbf1e0; color: var(--warn); }
.chip-bad { background: #fbe3e3; color: var(--bad); }
.chip-cat { background: #eef2f8; color: var(--navy-2); }

.flash {
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 14px;
}
.flash-ok { background: #e6f3ec; color: var(--ok); border: 1px solid #c5e0d1; }
.flash-error { background: #fbe3e3; color: var(--bad); border: 1px solid #f3c0c0; }

/* ---- footer (compact structured footer) ---- */
.footer {
  margin-top: 32px;
  padding: 22px 22px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  font-size: 13px;
  color: var(--ink-2);
}
.footer::before {
  content: ""; position: absolute;
  top: -1px; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,165,90,0.4) 30%, rgba(201,165,90,0.4) 70%, transparent);
}
.footer-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 18px; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand {
  display: flex; align-items: center; gap: 12px;
}
.footer-brand img { width: 28px; height: 28px; flex-shrink: 0; }
/* WWFC crest sits beside the Kit Intelligence lockup as a subtle
   "built for" mark — slightly de-weighted so it doesn't compete with
   the product brand. Specificity beats the generic 28×28 above. */
.footer-brand img.footer-crest { width: auto; height: 30px; opacity: 0.8; }
.footer-brand-name {
  font-size: 14px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.015em;
  line-height: 1.2;
}
.footer-brand-name .brand-accent { color: var(--gold-2); font-weight: 500; }
.footer-brand-tag {
  font-size: 11px; color: var(--muted);
  line-height: 1.4; margin-top: 2px;
}
.footer-col-title {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 8px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.footer-col a { color: var(--ink-2); font-size: 12px; }
.footer-col a:hover { color: var(--navy); text-decoration: none; }
.footer-status {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(47,122,77,0.08);
  color: var(--ok);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
}
.footer-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 2px rgba(47,122,77,0.18);
}
.footer-meta {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
  max-width: 1320px; margin-left: auto; margin-right: auto;
  text-align: center;
}

/* ===== Dashboard ===== */

.dash-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 4px 0 22px;
}
.dash-head h1 { font-size: 42px; }
.period-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: white; border: 0.5px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  letter-spacing: 0.3px;
}
.period-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 2px rgba(47,122,77,0.18);
}

/* KPI row */
.kpi-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px;
}
@media (max-width: 720px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
.kpi-card {
  background: white; border: 0.5px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  position: relative;
}
.kpi-card .kpi-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 500;
}
.kpi-row-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: 6px;
}
.kpi-card .kpi-value {
  font-size: 44px; font-weight: 500;
  color: var(--navy); line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi-spark { opacity: 0.85; }
.kpi-meta {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.kpi-meta-sep { color: var(--border); }
.kpi-meta-text { color: var(--muted); }

/* Card heading and chart frame */
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
  /* 13 May 2026: on a narrow phone the left title block (h2 + sub) used to
     push the right-hand action link ("Movement log →") off the card's
     padded area, clipping it to "Mov →". flex-wrap lets the link drop to
     its own line instead of being cut; min-width:0 lets the left block
     shrink rather than force-overflow. */
  flex-wrap: wrap;
}
.card-head > :first-child { min-width: 0; }
.card-head .link-arrow,
.card-head .link-action { flex-shrink: 0; white-space: nowrap; }
.card-head h2 { font-size: 16px; }
.card-sub { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.chart-card { padding: 18px 20px 14px; }
.chart-frame { margin: 6px -4px 0; }

.legend {
  display: flex; align-items: center; font-size: 12px; color: var(--ink-2);
  font-weight: 500; letter-spacing: 0.2px;
}
.legend .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 6px;
}
.legend .pip-mark {
  width: 2px; height: 12px; background: var(--navy);
  border-radius: 1px; display: inline-block; margin-right: 6px;
  vertical-align: middle;
}

/* Two-column rows */
.row-2 {
  display: grid; gap: 14px; grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .row-2 { grid-template-columns: 1fr; } }

/* Donut */
.donut-wrap { display: flex; gap: 18px; align-items: center; }
.donut { flex: 0 0 200px; }
.legend-list { flex: 1; min-width: 0; }
@media (max-width: 540px) { .donut-wrap { flex-direction: column; align-items: stretch; } .donut { align-self: center; } }

/* Attention card (low stock) */
.attention-card { padding: 18px 20px; }
.qty-bar {
  display: inline-block; vertical-align: middle;
  width: 52px; height: 6px;
  background: var(--border); border-radius: 3px; overflow: hidden;
  margin-right: 8px;
}
.qty-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--bad), #e06b6b);
  border-radius: 3px;
}
.link-arrow {
  font-size: 13px; font-weight: 500; color: var(--navy-2);
  letter-spacing: 0.2px;
}
.link-action {
  font-size: 12px; font-weight: 500; color: var(--navy-2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg); border: 0.5px solid var(--border);
}
.link-action:hover { background: white; text-decoration: none; }

/* Tight tables and feed */
.table-tight th, .table-tight td { padding: 8px 12px; font-size: 13px; }

/* ─── Responsive tables → stacked cards on phones (13 May 2026) ──────────
   Opt-in via the `.cards-on-mobile` class so the 10 other .table-tight
   tables in the app are untouched until each is individually audited.
   At ≤640px every row becomes a bordered card; each cell becomes a
   labelled line (label comes from the td's data-label attribute).
   Reads far better on a phone than a horizontally-scrolling table and
   kills the right-edge overflow Kit reported on the dashboard. */
@media (max-width: 640px) {
  table.cards-on-mobile,
  table.cards-on-mobile thead,
  table.cards-on-mobile tbody,
  table.cards-on-mobile tr,
  table.cards-on-mobile td {
    display: block;
    width: 100%;
  }
  table.cards-on-mobile thead {
    /* Visually hidden but kept for assistive tech / semantics */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  table.cards-on-mobile tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--surface);
  }
  table.cards-on-mobile td {
    padding: 4px 0;
    border: none;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  table.cards-on-mobile td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--muted);
  }
  /* A cell with no data-label (e.g. the rich person-cell) spans full width
     and drops the pseudo-label so the avatar block isn't squashed. */
  table.cards-on-mobile td:not([data-label])::before { content: none; }
  table.cards-on-mobile td:not([data-label]) { display: block; }
}
.person-cell { display: flex; align-items: center; gap: 10px; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
}
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.feed-item:last-child { border-bottom: none; }
.feed-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 7px;
}
.feed-dot-out { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,165,90,0.18); }
.feed-dot-in { background: var(--ok); box-shadow: 0 0 0 3px rgba(47,122,77,0.18); }
.feed-line { font-size: 13px; color: var(--ink); }
.feed-line strong {
  font-weight: 500; font-size: 11px; letter-spacing: 0.6px;
  color: var(--navy-2); margin-right: 8px;
}
.feed-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Empty state — used when a list / page has no data */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  max-width: 480px; margin: 0 auto;
}
.empty-state-icon {
  width: 64px; height: 64px;
  background: var(--navy-bg, #EEF2F8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.empty-state-title {
  font-size: 18px; font-weight: 500; color: var(--navy);
  margin: 0 0 6px;
}
.empty-state-text {
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
  margin: 0 0 22px;
}
.empty-state-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.empty-state-hint {
  font-size: 12px; color: var(--muted); margin-top: 16px;
}

/* Push notification opt-in banner. 5 May 2026: gold left-border replaced
   with navy — keeps the visual cue, drops the second gold accent on the page. */
.push-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin: 0 0 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--navy-2);
  border-radius: var(--radius);
}
.push-banner-icon {
  flex: 0 0 36px; height: 36px;
  background: var(--navy-bg, #EEF2F8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.push-banner-text { flex: 1; min-width: 0; }
.push-banner-title { font-weight: 500; font-size: 14px; color: var(--ink); }
.push-banner-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 640px) {
  .push-banner { flex-wrap: wrap; }
  .push-banner-text { flex-basis: 100%; }
}

/* ---- login centred ---- */
.auth-wrap {
  min-height: calc(100vh - 120px);
  display: grid; place-items: center;
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { text-align: center; }

/* ---- Kit Intelligence two-column login (Stage 1 rebrand, 7 Jun 2026) ---- */
.ki-login {
  position: fixed;     /* break out of base.html's width-constrained .container */
  inset: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--paper);
}
.ki-login-brand {
  background: linear-gradient(155deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #EAF1F1;
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.ki-login-lockup { height: 38px; width: auto; display: block; }
.ki-login-brand-top { display: flex; align-items: center; gap: 12px; }
.ki-login-badge { height: 40px; width: auto; display: block; }
.ki-login-badge--invert { filter: invert(1); }   /* outline crest → white on the club-colour panel */
.ki-login-product { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.ki-login-headline {
  font-family: var(--display);
  font-size: 40px; line-height: 1.08; letter-spacing: -0.03em;
  font-weight: 600; margin: 0; max-width: 13ch; color: #fff;
}
.ki-login-sub {
  font-size: 16px; color: rgba(255, 255, 255, 0.72);
  margin: 16px 0 0; max-width: 36ch; line-height: 1.5;
}
.ki-login-feats {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; align-items: center;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}
.ki-login-feats li { padding: 0 16px; position: relative; }
.ki-login-feats li:first-child { padding-left: 0; }
.ki-login-feats li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 13px;
  background: rgba(255, 255, 255, 0.3);
}
.ki-login-trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.62);
}
.ki-login-trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ki-login-trust span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); flex-shrink: 0;
}
.ki-login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
/* Model-A login button uses the KI product teal (not the tenant accent) — the
   only teal in the user's flow; the Wycombe area takes over in navy/gold the
   moment they sign in. */
.ki-login-form .btn { background: var(--teal); border-color: var(--teal); color: #fff; }
.ki-login-form .btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); filter: none; }
@media (max-width: 820px) {
  .ki-login { grid-template-columns: 1fr; }
  .ki-login-brand { display: none; }
}

/* ---- scan page (mobile-first, big buttons) ---- */
.scan-shell {
  max-width: 480px; margin: 0 auto;
}
#reader {
  width: 100%; max-width: 480px;
  border: 2px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: black;
}
.scan-result { margin-top: 18px; }
.scan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.scan-actions .btn-lg { font-size: 18px; padding: 18px; }

.qty-display {
  font-size: 48px; font-weight: 800; color: var(--navy);
  text-align: center; margin: 14px 0;
}
.qty-display.low { color: var(--bad); }

.kiosk-banner {
  background: var(--gold); color: var(--navy); text-align: center;
  padding: 6px 12px; font-weight: 600; font-size: 13px;
  border-radius: var(--radius-sm); margin-bottom: 12px;
}

/* ---- offline indicator ---- */
.offline-banner {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--warn); color: white; padding: 8px 16px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  display: none; z-index: 50;
}
body.offline .offline-banner { display: block; }

/* ============================================================
   MOBILE AUDIT — fixes for ≤640px viewports.
   Targets the cramped + overflowing patterns identified in the
   design review. Last sweep applied to checkout, dashboard,
   stock, tables, AI panel.
   ============================================================ */
@media (max-width: 640px) {
  /* Checkout — collapse the 2-column item+person grid to single column */
  .card[style*="max-width:920px"] > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .card[style*="max-width:920px"] {
    padding: 22px 18px !important;
    max-width: 100% !important;
  }

  /* Dashboard / Movement headers — stack the action buttons under the title */
  .dash-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .dash-head-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Tables — wrap in scrolling region; hide some columns for breathing room */
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* For tables that ARE scrolling, restore inline behaviour after horizontal */
  .card table thead, .card table tbody, .card table tr { white-space: normal; }
  .card table th, .card table td { white-space: nowrap; }

  /* KPI row → single column on phones (was 2-col at 720px) */
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .kpi-card .kpi-value { font-size: 32px; }

  /* Page-header margins — pull back container padding so headers go edge-to-edge */
  main.container { padding: 14px 14px 28px; }

  /* Cards — slightly less padding so content can breathe */
  .card { padding: 16px; }
  .card-primary { padding: 18px 16px; }

  /* Forms inside cards — column-stack the rows */
  .card form[style*="display:flex"] { flex-wrap: wrap; }
  .card form[style*="display:flex"] > * { flex: 1 1 100%; min-width: 0; }

  /* Footer — hide the 3 column menu, keep brand + copyright */
  .footer-inner { grid-template-columns: 1fr !important; }
  .footer-col { display: none; }
  .footer-col-title:first-child { display: none; }

  /* Topbar actions — keep ⌘K hint visible but slimmer */
  .cmdk-trigger-hint { padding: 2px 6px; font-size: 10px; }

  /* AI floating button — slightly smaller on phone, snug to corner */
  .ai-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .ai-fab svg { width: 22px; height: 22px; }

  /* Suggestion / followup chips — stack one per line for big tap targets */
  .ai-suggestions, .ai-followups { gap: 8px; }
  .ai-suggestion, .ai-followup { width: 100%; }

  /* Eyebrows — slightly smaller, tighter */
  .eyebrow { font-size: 10px; letter-spacing: 1.2px; }

  /* H1/H2 already responsive via earlier rules; touch-up for very narrow widths */
  h1 { font-size: 28px; line-height: 1.15; }
  h2 { font-size: 18px; }

  /* Stock chart — y-axis labels can compress; bars stay scrollable */
  .card div[style*="grid-template-columns:minmax(160px,1.4fr) 1fr 50px"] {
    grid-template-columns: minmax(120px, 1.2fr) 1fr 44px !important;
    gap: 8px !important;
  }
}

/* iPhone SE / very narrow (≤375px) — extra compaction */
@media (max-width: 375px) {
  h1 { font-size: 24px; }
  .kpi-row { grid-template-columns: 1fr !important; }
  .kpi-card .kpi-value { font-size: 28px; }
  main.container { padding: 12px 12px 24px; }
}

/* ============================================================
   TODAY HERO — the dashboard's primary action region.
   Added 5 May 2026 with the dashboard restructure. The dashboard
   now leads with this card; longer-window analytics moved to /reports.
   ============================================================ */
.today-card {
  padding: 18px 20px;
}

.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.today-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--border);
}
.today-item:last-child { border-bottom: none; }

.today-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.today-icon-warn {
  background: rgba(178,42,42,0.08);
  color: var(--bad);
}
.today-icon-ok {
  background: rgba(47,122,77,0.10);
  color: var(--ok);
}

.today-item-body { flex: 1; min-width: 0; }
.today-item-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.today-item-title a {
  color: var(--navy);
  text-decoration: none;
}
.today-item-title a:hover { text-decoration: underline; }
.today-item-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--bad);
  text-transform: uppercase;
}
.today-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.today-clear {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 6px;
}
.today-clear-title {
  font-size: 14px;
  color: var(--ok);
  font-weight: 500;
}
.today-clear-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .today-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .today-item .btn-sm {
    width: 100%;
    margin-top: 4px;
  }
}

/* ============================================================
   PLAYER KIT CARD (PKC) — per-person profile page.
   See docs/PLAYER-KIT-CARDS-SPEC.md for the design rationale.
   Apple-Health activity rings + Notion clean profile aesthetic.
   ============================================================ */

/* Hero — name + avatar + meta + actions */
.pkc-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 20px;
}
.pkc-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.pkc-avatar {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(11,34,64,0.15);
}
.pkc-name {
  font-size: 44px;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.pkc-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-2);
}
.pkc-kit-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 7px;
  background: var(--navy);
  color: var(--gold);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.pkc-tenure {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.pkc-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .pkc-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pkc-hero-left { flex-wrap: wrap; gap: 14px; }
  .pkc-avatar { flex: 0 0 64px; width: 64px; height: 64px; font-size: 24px; }
  .pkc-name { font-size: 30px; }
  .pkc-hero-actions { width: 100%; }
  .pkc-hero-actions .btn { flex: 1; }
}

/* Usage card — three big stats + tier badge */
.pkc-usage-card { padding: 24px; }
.pkc-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 0 4px;
}
.pkc-usage-stat {
  padding: 16px 18px;
  background: var(--bg);
  border-radius: 12px;
}
.pkc-usage-value {
  font-size: 44px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pkc-usage-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-top: 8px;
}
.pkc-usage-sub {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}
.pkc-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pkc-tier::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pkc-tier-high {
  background: rgba(178,42,42,0.10);
  color: var(--bad);
}
.pkc-tier-medium {
  background: rgba(184,120,46,0.10);
  color: var(--warn);
}
.pkc-tier-low {
  background: rgba(47,122,77,0.10);
  color: var(--ok);
}
.pkc-tier-dormant {
  background: var(--bg);
  color: var(--muted);
}

/* Passport tiers — 21 May 2026. Squad-relative responsibility score.
   Same chip shape as usage tiers above, different colour palette so
   the two surfaces don't read as the same thing. */
.pkc-tier-platinum {
  background: linear-gradient(135deg, rgba(155,170,200,0.18), rgba(220,225,235,0.18));
  color: #4c5a72;
  border: 1px solid rgba(155,170,200,0.30);
}
.pkc-tier-gold {
  background: rgba(201,165,90,0.14);
  color: #8c6a25;
}
.pkc-tier-silver {
  background: rgba(140,150,165,0.14);
  color: #5d6675;
}
.pkc-tier-bronze {
  background: rgba(176,108,52,0.14);
  color: #7a4a1f;
}
.pkc-tier-review {
  background: rgba(178,42,42,0.10);
  color: var(--bad);
}
.pkc-tier-insufficient,
.pkc-tier-new,
.pkc-tier-na {
  background: var(--bg);
  color: var(--muted);
}

.pkc-tier-inline {
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 7px;
}
.pkc-tier-inline::before {
  width: 5px;
  height: 5px;
}

/* 26 May 2026 — Prominent variant for the Kit Score chip on the
   player detail hero. Kit's review: "The Kit Health score pill —
   could be more attractive and its quite small." The standard
   .pkc-tier is 11px / 4px-10px padding which is right for the
   inline-in-tile usage on the Squad Passport grid, but too small
   for the headline pill next to the player's name.
   This modifier scales it up and gives the score number more
   weight via a subtle shadow + larger dot. */
.pkc-tier-prominent {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 8px 16px;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(11, 34, 64, 0.08),
              0 2px 8px rgba(11, 34, 64, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pkc-tier-prominent::before {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.pkc-tier-prominent:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11, 34, 64, 0.10),
              0 4px 14px rgba(11, 34, 64, 0.06);
}

@media (max-width: 720px) {
  .pkc-usage-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pkc-usage-value { font-size: 36px; }
}

/* Currently allocated — list of tiles */
.pkc-allocated-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkc-allocated-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--border);
}
.pkc-allocated-item:last-child { border-bottom: none; }
.pkc-allocated-body { flex: 1; min-width: 0; }
.pkc-allocated-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pkc-allocated-title a {
  color: var(--navy);
  text-decoration: none;
}
.pkc-allocated-title a:hover { text-decoration: underline; }
.pkc-allocated-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.pkc-allocated-qty {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 6px;
}

/* Lifetime stats strip — reuse kpi-card sizing, slightly tighter */
.pkc-stats-row {
  margin-bottom: 18px;
}
.pkc-stats-row .kpi-card .kpi-value {
  font-size: 36px;
}

/* History timeline — clean feed of events */
.pkc-history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkc-history-item {
  display: flex;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 0.5px solid var(--border);
}
.pkc-history-item:last-child { border-bottom: none; }
.pkc-history-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
}
.pkc-history-dot-out {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,165,90,0.18);
}
.pkc-history-dot-in {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(47,122,77,0.18);
}
.pkc-history-body { flex: 1; min-width: 0; }
.pkc-history-line {
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pkc-history-tag {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--navy-2);
}
.pkc-history-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Receive — AI photo-parse block */
.receive-photo-block {
  background: linear-gradient(135deg, rgba(11,34,64,0.04), rgba(201,165,90,0.06));
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 4px;
}
.receive-photo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.receive-photo-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.receive-photo-sub {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* PKC empty state */
.pkc-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted);
}
.pkc-empty-title {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 4px;
}
.pkc-empty-sub {
  font-size: 13px;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Typeahead dropdown — Checkout's Item and Person pickers (~20 May 2026).
   Always-visible branded gold scrollbar + a subtle inset fade at the
   bottom: makes it obvious there's more to scroll, even when the OS
   would auto-hide the scrollbar and leave users thinking the dropdown
   stops at the few results they can see. Replaces a duplicated inline
   style on both #item-results and #person-results (debt the design
   audit kept flagging). */
.typeahead-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(11,34,64,0.10),
    0 2px 6px rgba(11,34,64,0.06),
    /* Stronger "more below" fade so the scroll affordance survives even
       where the OS hides the native bar — this is the part that doesn't
       depend on the scrollbar rendering at all. */
    inset 0 -26px 20px -18px rgba(11,34,64,0.16);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 50;
  margin-top: 6px;
  /* Reserve a permanent scrollbar gutter so the bar can never auto-hide
     and the content doesn't reflow when it appears (27 Jun 2026 — the
     "scroller disappeared again" regression: a thin pale thumb on white
     read as gone). Firefox honours scrollbar-width/-gutter directly. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--navy) rgba(11,34,64,0.06);
}
/* Chromium/WebKit: a solid, clearly-visible navy thumb in a tinted track.
   No white border (it thinned the thumb to a sliver) and a touch wider. */
.typeahead-results::-webkit-scrollbar { width: 11px; }
.typeahead-results::-webkit-scrollbar-track {
  background: rgba(11,34,64,0.06);
  border-radius: 0 8px 8px 0;
}
.typeahead-results::-webkit-scrollbar-thumb {
  background: var(--navy);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.typeahead-results::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }