/* © 2026 The Purple Sector LLC. All rights reserved. Proprietary and confidential - see LICENCE.txt. */
/* TPS Data coaching website - The Purple Sector brand, matching the TPS Data app. */
:root {
  color-scheme: dark;
  --bg: #0a0a0f;
  --surface: #11101b;
  --surface-2: #171625;
  --grid: #221f33;
  --axis: #36324d;
  --ink: #f5f3fa;
  --dim: #b9b7c6;
  --muted: #8b8b99;
  --violet: #8b6cff;
  --violet-2: #a78bfa;
  --green: #2ee55a;
  --gold: #c9a33a;
  --red: #ff6b6b;
  --overlay: rgba(10, 10, 15, 0.8);
  --grid-line: rgba(255, 255, 255, 0.022);
  --shadow: rgba(0, 0, 0, 0.55);
  --ramp-1: #2e2458;
  --ramp-2: #4c3a9e;
  --ramp-3: #7358e6;
  --ramp-4: #a48dff;
  --ramp-5: #ddd3ff;
  /* Chart roles: this lap, the reference lap, and the warm pole of "where time goes" */
  --series-a: #8b6cff;
  --series-b: #20ac41;
  --series-c: #d4761c;
  --gain-neutral: #3a3750;
  /* Plain, familiar type: the computer's own font (Segoe UI on Windows, San Francisco on
     Mac and iPhone, Roboto on Android). Nothing is downloaded. Numbers line up because these
     fonts' digits are all the same width; facility codes keep a monospace face so 0/O and
     1/I cannot be mixed up. */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: var(--font-body);
  --font-display: var(--font-body);
  --font-code: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  --radius: 10px;
}

/* Light style - the same colours as TPS Data's light background. New visitors start here;
   the sun / moon button in the top bar switches, and the choice is remembered. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f2f8;
  --surface: #ffffff;
  --surface-2: #f0eef6;
  --grid: #e3e0ec;
  --axis: #c7c2d8;
  --ink: #17141f;
  --dim: #4a4760;
  --muted: #767389;
  --violet: #6a49e6;
  --violet-2: #5637cf;
  --green: #159a3d;
  --gold: #a67f16;
  --red: #d8433f;
  --overlay: rgba(236, 234, 244, 0.85);
  --grid-line: rgba(0, 0, 0, 0.035);
  --shadow: rgba(20, 10, 60, 0.14);
  --ramp-1: #d8d0ff;
  --ramp-2: #a48dff;
  --ramp-3: #7358e6;
  --ramp-4: #4c3a9e;
  --ramp-5: #241b4d;
  --series-a: #6a49e6;
  --series-b: #1a9a3a;
  --series-c: #c2700c;
  --gain-neutral: #c8c4d6;
}
/* The logo's lettering is white; on the light background it is flipped to dark, as in TPS Data. */
/* The Purple Sector's white logo is inverted on the light style; a club's own logo is shown as it is. */
:root[data-theme="light"] .brand-logo:not(.club-logo), :root[data-theme="light"] .hero-logo { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .lv-video { border-color: var(--axis); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
}
a { color: var(--violet-2); }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 9px 18px; cursor: pointer; font-weight: 600; white-space: nowrap; text-decoration: none; line-height: 1.3; }
/* --on-violet / --btn-hover: set with a club's colours (a light button gets dark words). */
.btn-primary { background: var(--violet); color: var(--on-violet, #fff); }
.btn-primary:hover { background: var(--btn-hover, var(--violet-2)); color: var(--on-violet, #fff); }
.btn-ghost { background: transparent; border-color: var(--axis); color: var(--dim); font-weight: 500; }
.btn-ghost:hover { color: var(--ink); border-color: var(--violet); }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); font-weight: 500; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.btn-large { padding: 13px 28px; font-size: 16px; }
.btn-small { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary:disabled:hover { background: var(--violet); }
.btn-icon { display: inline-flex; }
.btn-icon svg { display: block; }
.link-btn { border: 0; background: none; padding: 0; color: var(--violet-2); cursor: pointer; text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 62px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--grid); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-tag { font: 500 11px var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--violet-2); padding-left: 12px; border-left: 1px solid var(--axis); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a { padding: 7px 12px; border-radius: 8px; color: var(--dim); text-decoration: none; font-weight: 500; font-size: 14px; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
/* The page you are on: just the word, in full ink - no box, no ring. */
.nav a.active { color: var(--ink); font-weight: 600; background: transparent; box-shadow: none; }
.nav a:focus, .nav a:focus-visible { outline: none; }
.nav a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.nav a.nav-cta { color: var(--on-violet, #fff); background: var(--violet); }
.nav a.nav-cta:hover { background: var(--btn-hover, var(--violet-2)); }
.account { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--axis); border-radius: 50%; background: var(--surface-2); color: var(--dim); cursor: pointer; }
.theme-btn:hover { color: var(--ink); border-color: var(--violet); }
.theme-btn svg { width: 19px; height: 19px; display: block; }
.theme-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-btn .icon-sun { display: none; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }
.who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.who-name { font-weight: 600; font-size: 14px; }
.who-role { display: flex; align-items: center; gap: 6px; font: 11px var(--font-mono); color: var(--muted); }
.who-role .badge { padding: 1px 7px; font-size: 9.5px; }

/* Each side is its own app: a thin stripe along the top and the label beside the logo take
   that side's colour (drivers green, coaches violet, owners gold, HQ ink). */
body[data-side] .topbar { border-top: 3px solid var(--side, transparent); }
body[data-side="driver"] { --side: var(--green); }
body[data-side="coach"] { --side: var(--violet); }
body[data-side="owner"] { --side: var(--gold); }
body[data-side="admin"] { --side: var(--ink); }
body[data-side="driver"] .brand-tag { color: var(--green); }
body[data-side="owner"] .brand-tag { color: var(--gold); }
body[data-side="admin"] .brand-tag { color: var(--ink); }

/* Demo: one small button in the corner, so each side looks like the real thing. */
.demo-dock { position: fixed; left: 16px; bottom: 16px; z-index: 30; }
.demo-dock-btn { display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 7px 8px 7px 8px; border: 1px solid var(--axis); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 26px var(--shadow); color: var(--ink); font-size: 13px; cursor: pointer; }
.demo-dock-btn:hover { border-color: var(--violet); }
.demo-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.demo-switch { padding: 4px 11px; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 600; white-space: nowrap; }
.demo-tag { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); font: 700 10.5px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
body:has(.demo-dock:not([hidden])) .toast { bottom: 76px; }
body:has(.demo-dock:not([hidden])) .foot { padding-bottom: 84px; }

.demo-panel { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); backdrop-filter: blur(3px); overflow-y: auto; }
.demo-panel-box { width: 100%; max-width: 1120px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; border: 1px solid var(--axis); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 70px var(--shadow); }
.demo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.demo-panel-head h2 { font: 700 26px/1.2 var(--font-display); }
.demo-panel-head .muted { margin: 6px 0 0; max-width: 620px; }
.demo-close { flex: none; width: 36px; height: 36px; border: 1px solid var(--axis); border-radius: 50%; background: var(--surface-2); color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; }
.demo-close:hover { color: var(--ink); border-color: var(--violet); }
.side-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.side-card { --side: var(--axis); display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--grid); border-top: 4px solid var(--side); border-radius: var(--radius); background: var(--surface-2); }
.side-card:nth-child(1) { --side: var(--green); }
.side-card:nth-child(2) { --side: var(--violet); }
.side-card:nth-child(3) { --side: var(--gold); }
.side-card:nth-child(4) { --side: var(--ink); }
.side-card.is-current { border-color: var(--violet); border-top-color: var(--side); box-shadow: 0 0 0 1px var(--violet); }
.side-name { font: 700 17px/1.25 var(--font-display); }
.side-card p { flex: 1; margin: 0; font-size: 13.5px; color: var(--dim); }
.side-person { font-size: 13px; color: var(--muted); }
.side-card select.demo-pick { padding: 7px 10px; font-size: 13.5px; background: var(--surface); }
.side-card .btn { width: 100%; }
.demo-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); font-size: 13px; }
.demo-panel-foot a { font-weight: 600; }
.demo-panel-foot .link-btn { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.demo-note { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--axis); border-radius: 8px; font-size: 13px; }

/* ---------- Page ---------- */
.view { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 20px 48px; outline: none; }
.loading-note { color: var(--muted); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.eyebrow { margin: 0 0 4px; font: 500 11px var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--violet-2); }
.page-title { font: 700 32px/1.15 var(--font-display); letter-spacing: -0.01em; }
.page-sub { margin: 6px 0 0; color: var(--dim); max-width: 720px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--ink); }

.panel { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.panel + .panel { margin-top: 14px; }
.panel-title { margin: 0 0 12px; font: 600 11px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet-2); }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 17px; }

.stripes { display: flex; gap: 8px; }
.stripes span { width: 96px; height: 3px; border-radius: 2px; background: var(--gold); }
.stripes span:nth-child(2) { background: var(--green); }
.stripes span:nth-child(3) { background: var(--violet); }

/* ---------- Landing ---------- */
.hero { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 40px 0 36px; text-align: center; }
.hero-logo { width: min(460px, 78vw); height: auto; }
.hero-tag { margin: 0; font: 500 12px var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.hero-tag em { font-style: normal; color: var(--violet-2); }
.hero h1 { font: 800 clamp(32px, 5vw, 54px)/1.1 var(--font-display); letter-spacing: -0.02em; max-width: 900px; }
.hero h1 em { font-style: normal; color: var(--violet); }
.hero p { margin: 0; max-width: 620px; color: var(--dim); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); padding: 18px 20px; }
.card-num { font: 700 26px/1 var(--font-display); color: var(--violet); }
.card h3 { margin: 6px 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--dim); font-size: 14px; }
.section-title { margin: 44px 0 14px; font: 700 26px/1.2 var(--font-display); }

/* ---------- Download ---------- */
.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.download-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); padding: 20px 22px; }
.download-card.primary { border-color: color-mix(in srgb, var(--violet) 50%, transparent); }

/* A club's own sign-in page (signed out at the club's address): their logo, the code, Remember
   me, Sign in - no Purple Sector bar, menus or stripes. */
body.at-club-door .topbar, body.at-club-door .foot .stripes { display: none; }
.club-door { min-height: calc(100vh - 150px); display: flex; align-items: center; justify-content: center; padding: 40px 0 24px; }
.club-door-card { width: min(420px, 100%); padding: 34px 32px 26px; }
.club-door-logo { display: block; margin: 0 auto 22px; max-height: 130px; max-width: 280px; height: auto; width: auto; object-fit: contain; }
.club-door .club-name { margin: 0 0 18px; text-align: center; font: 800 30px/1.15 var(--font-display); letter-spacing: -0.01em; }
.club-door-line { margin: -8px 0 20px; text-align: center; color: var(--dim); font-size: 15px; }
.club-door .form { gap: 16px; }
.club-door .agree.remember { align-items: center; font-size: 14.5px; color: var(--ink); }
.club-door .agree.remember input { margin-top: 0; width: 18px; height: 18px; }
.club-door .btn-primary { width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
.club-door .form-foot { margin-top: 14px; text-align: center; }
.club-door .page-title { text-align: center; }

/* A club's own look */
.brand-logo.club-logo { height: auto; max-height: 44px; max-width: 210px; }
/* A tall logo (a crest with the name under it) needs the room: the bar grows to fit it. */
.brand-logo.club-logo.tall { max-height: 68px; max-width: 160px; }
.auth-logo { display: block; max-height: 70px; max-width: 250px; margin: 0 auto 14px; object-fit: contain; }
.hero-club-logo { max-height: 130px; max-width: min(420px, 72vw); height: auto; width: auto; }
/* A dark logo on the dark style, or a light one on the light style, sits on a small plate. */
.logo-plate-light { background: #ffffff; padding: 4px 8px; border-radius: 8px; box-sizing: content-box; }
.logo-plate-dark { background: #0a0a0f; padding: 4px 8px; border-radius: 8px; box-sizing: content-box; }
.club-name { margin: 0; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--font-display); letter-spacing: -0.02em; }
.look-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
.look-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.look-field input[type="color"] { width: 64px; height: 36px; padding: 2px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.look-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--grid); border-radius: var(--radius); background: var(--surface-2); }
.look-preview img { max-height: 46px; max-width: 170px; }
.powered { margin-top: 20px; font-size: 13px; text-align: center; }

/* Plans and pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 8px; max-width: 900px; }
.plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
@media (max-width: 980px) { .plans.plans-3 { grid-template-columns: 1fr; max-width: 560px; } }
.plan { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); padding: 22px 24px; }
.plan.featured { border-color: color-mix(in srgb, var(--violet) 55%, transparent); }
.plan-who { font: 600 11px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet-2); }
.plan-price { font: 700 40px var(--font-mono); letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.plan-price span { font: 500 14px var(--font-mono); color: var(--dim); }
.plan-alt { margin: 0; color: var(--dim); font-size: 13.5px; }
.plan ul { margin: 6px 0 4px; padding-left: 18px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.plan-note { margin: 2px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--violet) 7%, var(--surface)); color: var(--ink); font-size: 13px; }
/* The main page for visitors: what TPS Data is and who it is for. */
.landing .hero { padding-bottom: 28px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 36px; }
.pillar { padding: 20px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); }
.pillar-label { font: 600 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-2); }
.pillar h3 { margin: 8px 0 6px; font-size: 19px; }
.pillar p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.how, .audiences { margin: 0 0 36px; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.how-step { display: flex; gap: 12px; align-items: flex-start; }
.how-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--violet); color: var(--on-violet, #fff); font-weight: 700; }
.how-step h3 { margin: 5px 0 4px; font-size: 16px; }
.how-step p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.audience { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); }
.audience h3 { margin: 0; font-size: 18px; }
.audience-price { margin: 0; font: 700 22px var(--font-display); color: var(--violet); }
.audience p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
.audience .btn { margin-top: auto; align-self: flex-start; }
.cta-band { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 18px; padding: 34px 20px; text-align: center; border-radius: var(--radius);
  background: color-mix(in srgb, var(--violet) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 25%, transparent); }
.cta-band h2 { margin: 0; font: 800 clamp(24px, 3.6vw, 36px)/1.15 var(--font-display); }
.cta-band h2 em { font-style: normal; color: var(--violet); }
.cta-band p { margin: 0; max-width: 560px; color: var(--dim); }
.landing-foot { margin: 8px 0 0; font-size: 13px; text-align: center; }
@media (max-width: 820px) { .pillars, .how-steps, .audience-grid { grid-template-columns: 1fr; } }
/* The Account page: licence, download, computers. */
.device-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--grid); }
.device-row:first-of-type { border-top: 0; }
.device-name { font-weight: 600; margin-right: auto; }
.licence-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
/* A driver's own library: hidden laps, their coaches, laps kept while locked. */
.hidden-note { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; color: var(--dim); font-size: 13.5px; }
.my-coaches { margin-top: 18px; }
.my-coach-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--grid); }
.my-coach-row:first-of-type { border-top: 0; }
.my-coach-name { font-weight: 600; margin-right: auto; }
.kept-note { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--violet) 8%, var(--surface)); color: var(--ink); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.download-os { font: 600 11px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet-2); }
.download-card h3 { font: 700 21px/1.2 var(--font-display); }
.download-card p { margin: 0; color: var(--dim); font-size: 14px; }
.download-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.download-card .btn { align-self: flex-start; margin-top: 4px; }

/* ---------- Forms ---------- */
.auth { max-width: 460px; margin: 10px auto; }
.auth .panel { padding: 24px 26px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font: 500 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; padding: 10px 12px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 25%, transparent); }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.5; }
.input.code { font: 600 16px var(--font-code); letter-spacing: 0.08em; text-transform: uppercase; }
.field-note { font-size: 13px; color: var(--muted); }
.field-note.ok { color: var(--green); }
.field-note.bad { color: var(--red); }
.form-error { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--ink); font-size: 14px; }
.form-ok { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--green) 9%, transparent); font-size: 14px; }
.form-foot { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px solid var(--axis); border-radius: 10px; background: var(--surface-2); }
.segmented button { padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--violet); color: var(--on-violet, #fff); }

/* ---------- Tables and lists ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 8px 10px; text-align: left; font: 500 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--grid); white-space: nowrap; }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .strong { font-weight: 600; }
.cell-main { display: block; font-weight: 600; }
.cell-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--axis); color: var(--muted); white-space: nowrap; }
.badge.new { border-color: var(--violet); color: var(--ink); background: color-mix(in srgb, var(--violet) 25%, transparent); }
.badge.seen { border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }
.badge.coach { border-color: var(--violet); color: var(--violet-2); }
.badge.driver { border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }
.badge.owner { border-color: var(--gold); color: var(--gold); }
.badge.admin { border-color: var(--ink); color: var(--ink); }
.badge.is-waiting { border-style: dashed; border-color: var(--gold); color: var(--gold); }

/* The owner's People page: requests to join, then coaches and drivers. */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.people-grid { align-items: start; }
.people-grid .panel + .panel { margin-top: 0; }
.requests + .people-grid, .stats + .requests { margin-top: 16px; }
.person-list { display: flex; flex-direction: column; gap: 8px; }
.person-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); }
.person-row .avatar { width: 38px; height: 38px; font-size: 14px; }
.person-main { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; }
.person-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.person-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.requests { border-color: color-mix(in srgb, var(--gold) 55%, var(--grid)); box-shadow: inset 4px 0 0 var(--gold); }
.requests .person-row { background: var(--surface); }
.btn-quiet-danger:hover { color: var(--red); border-color: var(--red); }
.join-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.owner-privacy { font-size: 13px; }
.pending { text-align: center; }
.pending .pulse { margin: 4px auto 16px; background: var(--gold); }
.pending p { color: var(--dim); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar .input { width: auto; min-width: 220px; }

/* ---------- Lap cards: the lap's outline beside its day and time ---------- */
.section-label { margin: 22px 0 10px; font: 600 11px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.home-grid > .home-main > div > .section-label:first-child { margin-top: 0; }
.lap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lap-card { position: relative; display: flex; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.lap-card:hover { border-color: var(--violet); color: inherit; transform: translateY(-1px); }
.lap-card.is-new { border-color: color-mix(in srgb, var(--violet) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 12%, transparent); }
.lap-thumb { flex: none; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); }
.lap-thumb svg { width: 84%; height: 84%; }
.lap-thumb polyline { fill: none; stroke: var(--violet); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.lap-thumb-mark { width: 60%; opacity: 0.35; }
.lap-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lap-card-title { font-weight: 600; font-size: 15px; }
.lap-card-time { font: 600 26px/1.1 var(--font-body); color: var(--ink); }
.lap-card-ref { font: 12px var(--font-mono); color: var(--dim); }
.lap-card-meta { font: 12px var(--font-mono); color: var(--muted); }
.lap-card-note { margin: 6px 0 0; color: var(--dim); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lap-card-hero { padding: 20px; gap: 22px; }
.lap-card-hero .lap-thumb-big { width: 190px; height: 190px; }
.lap-card-hero .lap-card-title { font-size: 18px; }
.lap-card-hero .lap-card-time { font-size: 52px; line-height: 1.05; }
.lap-card-cta { align-self: flex-start; margin-top: 12px; }

/* ---------- Home pages ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.home-main, .home-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.home-side .panel + .panel { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); }
.stat-label { font: 500 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stat-value { font: 600 26px/1.2 var(--font-body); color: var(--ink); }
.stat-sub { font-size: 12.5px; color: var(--muted); }
.progress-view .stat { background: var(--surface-2); }
.progress-card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.progress-card:hover { border-color: var(--violet); color: inherit; }
.progress-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.progress-card-row > div { display: flex; flex-direction: column; }
.progress-card-link { font-size: 13px; color: var(--violet-2); }
.sparkline { width: 130px; height: 38px; }
.mail-pref { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: var(--dim); cursor: pointer; }
.panel-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-head-row .panel-title { margin: 0; }
.panel-head-row a { font-size: 13px; }

/* Driver cards on the coach's home page */
.driver-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.driver-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.driver-card:hover { border-color: var(--violet); color: inherit; transform: translateY(-1px); }
.driver-card-top { display: flex; align-items: center; gap: 12px; }
.driver-card-top > div { display: flex; flex-direction: column; min-width: 0; }
.driver-name { font-weight: 600; font-size: 16px; }
.driver-sub { font-size: 12.5px; color: var(--muted); }
.driver-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.driver-facts dt { color: var(--muted); }
.driver-facts dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; }
.driver-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim); }
.driver-flag i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.lap-thumb { position: relative; }
.thumb-badge { position: absolute; top: 6px; left: 6px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--violet) 16%, var(--surface)); color: var(--violet-2); font: 700 15px var(--font-body); letter-spacing: 0.02em; }
.avatar-big { width: 64px; height: 64px; font-size: 22px; }
.person-head { display: flex; align-items: center; gap: 16px; }
.lap-card-credit { color: var(--muted); font-style: italic; }

/* A driver's page for coaches: the latest notes from whichever coach wrote them. */
.handover { margin-bottom: 16px; }
.handover-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.handover-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); color: inherit; text-decoration: none; }
.handover-item:hover { border-color: var(--violet); }
.handover-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.handover-top > div { display: flex; flex-direction: column; min-width: 0; }
.handover-top .avatar { width: 34px; height: 34px; font-size: 13px; }
.handover-note { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink); max-height: 4.6em; overflow: hidden; }
.handover-note li + li { margin-top: 2px; }
.handover-more { font-size: 12.5px; color: var(--violet-2); }

/* Goals for next session */
.goals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goals-head .panel-title { margin-bottom: 10px; }
.goals-count { font: 12px var(--font-mono); color: var(--muted); }
.goals-empty { margin: 0 0 6px; font-size: 14px; }
.goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); }
.goal-main { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.goal-main input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--violet); flex: none; }
.goal-text { font-size: 14.5px; line-height: 1.4; }
.goal-meta { grid-column: 1; padding-left: 28px; font: 11px var(--font-mono); color: var(--muted); }
.goal .comment-del { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.goal.is-done .goal-text { color: var(--muted); text-decoration: line-through; }
.goal-add { margin-top: 12px; }
.goals-clear { margin-top: 10px; font-size: 13px; }

/* Demo emails */
.demo-mail { font-weight: 600; font-size: 13px; }
.mail-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }
.mail-list { display: flex; flex-direction: column; gap: 6px; }
.mail-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface); cursor: pointer; }
.mail-row.active, .mail-row:hover { border-color: var(--violet); }
.mail-to { font: 11px var(--font-mono); color: var(--muted); }
.mail-subject { font-weight: 600; font-size: 14px; }
.mail-when { font-size: 12px; color: var(--muted); }
.mail-frame { width: 100%; height: 640px; border: 1px solid var(--grid); border-radius: var(--radius); background: #f3f2f8; }

/* Progress */
.progress-track + .progress-track { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--grid); }
.progress-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.progress-title { font: 700 20px/1.2 var(--font-display); }
.progress-sub { font-size: 13px; color: var(--muted); }
.progress-note { margin: 4px 0 0; font-size: 14px; }
.progress-chart { position: relative; }
.progress-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-grid { stroke: var(--grid); stroke-width: 1; }
.pg-tick { fill: var(--muted); font: 11px var(--font-mono); }
.pg-line { fill: none; stroke: var(--series-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pg-dot { fill: var(--surface); stroke: var(--series-a); stroke-width: 2; }
.pg-pb { fill: var(--series-a); stroke: var(--surface); stroke-width: 2; }
.pg-label { fill: var(--ink); font: 600 12px var(--font-body); }
.pg-cross { stroke: var(--axis); stroke-width: 1; }
.pg-hover { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.progress-chart rect:focus { outline: none; }
.pg-tip { position: absolute; z-index: 2; width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); font-size: 12.5px; color: var(--dim); pointer-events: none; }
.pg-tip strong { font: 600 16px var(--font-body); color: var(--ink); }
.pg-tip-open { color: var(--muted); font-size: 11.5px; }
.progress-table { margin-top: 10px; }
.progress-table summary { cursor: pointer; font-size: 13px; color: var(--violet-2); }

/* Send a lap: the form above the lap */
.send-form { display: flex; flex-direction: column; gap: 14px; }
.send-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.send-row-driver { grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(200px, 1fr)); }
.send-laps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); }
.send-laps .input { background: var(--surface); }
.send-lap { display: flex; flex-direction: column; gap: 4px; }
.send-lap-main { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.send-laps-note { margin: -4px 0 0; }

/* Driver search: type to narrow the list, or open it with the arrow. */
.picker { position: relative; }
.picker-input { padding-right: 40px; }
.picker-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--axis); border-radius: 0 8px 8px 0; background: transparent; color: var(--dim); cursor: pointer; }
.picker-toggle:hover { color: var(--ink); }
.picker-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--axis); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 34px var(--shadow); }
.picker-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.picker-item .avatar { grid-row: 1 / 3; width: 30px; height: 30px; font-size: 12px; }
.picker-item.active, .picker-item:hover { background: var(--surface-2); }
.picker-item[aria-selected="true"] .picker-name { color: var(--violet-2); }
.picker-name { font-weight: 600; }
.picker-name b { color: var(--violet-2); }
.picker-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-none { padding: 10px; color: var(--muted); font-size: 13px; }
.send-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.send-status { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.send-status .field-note { margin: 0; }

/* ---------- Codes ---------- */
.code-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.code { padding: 6px 12px; border: 1px dashed var(--axis); border-radius: 8px; background: var(--surface-2); font: 600 15px var(--font-code); letter-spacing: 0.08em; }
.code-big { font-size: 26px; padding: 12px 18px; border-color: var(--violet); }
.facility { border-top: 1px solid var(--grid); padding: 16px 0; }
.facility:first-of-type { border-top: 0; padding-top: 4px; }
.facility-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.facility-name { font: 700 21px/1.2 var(--font-display); }
.facility-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.facility-codes > div { display: flex; flex-direction: column; gap: 6px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form .input { flex: 1 1 240px; width: auto; }

/* ---------- Send a lap ---------- */
.send-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
/* The form stays where it is above the lap; it no longer slides down over the video. */
.send-form { position: static; margin-bottom: 16px; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--violet); transition: width 0.2s; }
.waiting { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; text-align: center; }
.waiting p { margin: 0; max-width: 520px; color: var(--dim); }
.pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--violet); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
.file-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border: 1px dashed var(--axis); border-radius: var(--radius); color: var(--muted); text-align: center; }
.file-drop.over { border-color: var(--violet); color: var(--ink); }

/* ---------- Lap viewer ---------- */
.lap-head-meta { margin-top: 8px; font: 13px var(--font-mono); color: var(--muted); }
.lv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.lv-main, .lv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lv-video { position: relative; background: #000; border: 1px solid var(--grid); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.lv-video video { display: block; width: 100%; height: 100%; background: #000; }
.lv-novideo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--dim); background: var(--surface); }
.lv-novideo .progress { width: min(320px, 80%); }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lv-readout { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--dim); }
.lv-readout b { color: var(--ink); font-weight: 600; }
.lv-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lv-units { display: flex; gap: 4px; margin-left: 6px; }
.lv-hud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lv-video:fullscreen { border: 0; border-radius: 0; aspect-ratio: auto; background: #000; }
.lv-video:fullscreen video { object-fit: contain; }
.lv-graph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 8px; }
.lv-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--dim); }
.lv-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lv-zoom .chip { min-width: 30px; font-size: 13px; line-height: 1.3; }
.lv-zoom .chip:disabled { opacity: 0.4; cursor: default; }
.lv-zoom-text { margin-right: 6px; font: 12px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.lv-zoom-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.lv-graphs canvas.is-zoomed { cursor: grab; }
.lv-graphs canvas.is-dragging { cursor: grabbing; }
.lv-key { display: inline-flex; align-items: center; gap: 8px; }
.lv-key i, .lv-map-side i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; border-radius: 2px; }
/* Purple is the fastest: the quicker lap is violet, the other green. */
.lv-key i.key-violet, .lv-map-side i.key-violet { border-top-color: var(--series-a); }
.lv-key i.key-green, .lv-map-side i.key-green { border-top-color: var(--series-b); }
.lv-key-note { font-size: 12px; color: var(--muted); }
.lv-map-side { display: inline-flex; align-items: center; gap: 6px; }
.lv-map-side i { width: 12px; border-top-width: 4px; }
.lv-note-list { margin: 0; padding-left: 20px; color: var(--ink); }
.lv-note-list li + li { margin-top: 4px; }
.lv-byline + .lv-note-list { margin-top: 0; }
.lv-key b { font: 600 13px var(--font-mono); color: var(--ink); }
.lv-vsref { margin-top: 6px; font: 600 14px var(--font-mono); }
.lv-vsref .muted { font: 400 12.5px var(--font-body); }
.lv-sector small { display: block; font: 11px var(--font-mono); color: var(--muted); }
.lv-map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.lv-map-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 18px; margin-top: 6px; font: 11px var(--font-mono); color: var(--muted); text-align: center; }
.lv-map-key:empty { display: none; }
.lv-gain-ramp { width: 70px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--series-a), var(--gain-neutral), var(--series-b)); }
.chip { padding: 3px 11px; border: 1px solid var(--axis); border-radius: 999px; background: transparent; color: var(--muted); font: 11px var(--font-mono); cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--violet); }
.lv-graphs { padding: 10px 12px; }
.lv-graphs canvas { display: block; width: 100%; height: 330px; cursor: crosshair; touch-action: pan-y; }
.lv-kpis { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lv-time { font: 700 42px/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--violet); }
.lv-sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.lv-sector { padding: 6px 8px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); }
.lv-sector span { display: block; font: 500 10px var(--font-mono); letter-spacing: 0.14em; color: var(--muted); }
.lv-sector b { font: 600 15px var(--font-mono); font-variant-numeric: tabular-nums; }
.lv-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.lv-facts dt { color: var(--muted); }
.lv-facts dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; }
.lv-map canvas { display: block; width: 100%; height: 250px; cursor: crosshair; }
.lv-note { margin: 0; white-space: pre-wrap; color: var(--ink); }
.lv-byline { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); }
.lv-note.muted { color: var(--muted); }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.comment:hover, .comment.near { border-color: var(--violet); }
.comment-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet); color: var(--on-violet, #fff); font: 700 12px var(--font-mono); }
.comment-at { display: block; font: 11px var(--font-mono); color: var(--muted); }
.comment-text { white-space: pre-wrap; }
.comment-del { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.comment-del:hover { color: var(--red); }
.comment-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.comment-add .row { display: flex; gap: 8px; }
.comment-add .row .input { flex: 1; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: min(90vw, 640px); padding: 10px 16px; transform: translateX(-50%); border: 1px solid var(--axis); border-radius: 8px; background: var(--surface-2); box-shadow: 0 10px 30px var(--shadow); }

.foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 20px 30px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 13px; }
.foot p { margin: 0; }
.foot-legal { font-size: 12px; }
/* Terms of use, and agreeing to them when signing up */
.terms-body { max-width: 820px; }
.terms-body section + section { margin-top: 18px; }
.terms-body h2 { margin: 0 0 6px; font-size: 17px; }
.terms-body p { margin: 0 0 8px; color: var(--dim); line-height: 1.55; }
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--dim); cursor: pointer; }
.agree input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--violet); }
.foot p { margin: 0; }

/* ---------- Access codes ---------- */
.access-input { font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.access-input::placeholder { letter-spacing: 0.06em; color: var(--muted); opacity: 0.6; }
.badge.guest { border-color: var(--series-c); color: var(--series-c); border-style: dashed; }
.small { font-size: 12.5px; }
.stats-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* A family's page (its code is one account): each person's laps under their name. */
.family-person { margin-bottom: 22px; }
.family-person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.family-person-head > div { display: flex; flex-direction: column; min-width: 0; }
.family-progress + .family-progress { margin-top: 16px; }

/* New codes, shown once as cards to print, cut out and hand over. */
.codes-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); backdrop-filter: blur(3px); }
.codes-box { width: 100%; max-width: 980px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; border: 1px solid var(--axis); border-radius: 14px; background: var(--surface); box-shadow: 0 20px 60px var(--shadow); }
.codes-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.codes-head h2 { margin: 0; font: 700 24px/1.2 var(--font-display); }
.codes-head .muted { margin: 6px 0 0; max-width: 560px; font-size: 13.5px; }
.code-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.code-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px dashed var(--axis); border-radius: var(--radius); background: var(--surface-2); break-inside: avoid; }
.code-card .code-big { font-size: 19px; padding: 8px 12px; white-space: nowrap; }
.code-card-name { font-weight: 700; font-size: 16px; }
.code-card-line { font-size: 12.5px; color: var(--muted); }
.auth .code-card { margin: 4px 0 14px; }

/* The owner's "Add people" and families */
.add-people .segmented { margin-bottom: 14px; }
.seg-3 { grid-template-columns: repeat(3, 1fr); }
.add-people textarea.input { font: 13.5px/1.5 var(--font-code); }
.family-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.family { padding: 12px 14px; border: 1px solid var(--grid); border-radius: 8px; background: var(--surface-2); }
.family-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.family-members { display: flex; flex-direction: column; gap: 4px; }
.family-member { font-size: 14px; }
.panel.people + .panel.people, .people-grid + .panel, .panel + .join-card { margin-top: 16px; }

/* Company events and guests */
.event-card { margin-top: 16px; }
.event-card .panel-head-row { align-items: flex-start; flex-wrap: wrap; }
.event-name { margin: 0 0 2px; font: 700 19px/1.2 var(--font-display); }
.guest-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 10px 14px; border: 1px dashed var(--series-c); border-radius: 8px; font-size: 14px; color: var(--dim); }
/* The event's own page (signed in with the event's code): the board, then everyone's laps. */
.event-board-panel { margin-bottom: 16px; }
.event-club { width: auto; min-width: 220px; }
.event-board td:first-child, .event-board th:first-child { width: 44px; }
.event-driver { margin-top: 18px; scroll-margin-top: 80px; }
/* The coach's drivers, grouped: members, guests, then each company event. */
.roster-group { margin-bottom: 6px; }
.driver-card[hidden], .roster-group[hidden], .search-note[hidden] { display: none; }
/* Several places: the top-bar switcher, its menu, and the row of place tabs. */
.place-wrap { position: relative; }
.place-switch { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 6px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.place-switch:hover { border-color: var(--violet); }
.place-switch:focus { outline: none; }
.place-switch:focus-visible { border-color: var(--violet); }
.place-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-switch-caret { color: var(--muted); font-size: 11px; }
.place-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; padding: 8px; border: 1px solid var(--grid); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px var(--shadow); }
.place-menu[hidden] { display: none; }
.place-menu-title { margin: 2px 8px 6px; font: 600 10.5px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.place-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.place-item:hover { background: var(--surface-2); }
.place-item:focus { outline: none; }
.place-item:focus-visible { background: var(--surface-2); }
.place-item-name { font-weight: 600; font-size: 14px; }
.place-item-role { grid-column: 1; font-size: 12px; color: var(--muted); }
.place-item-tick { grid-column: 2; grid-row: 1 / span 2; color: var(--violet-2); font-weight: 700; }
.place-item.current { background: var(--surface-2); }
.place-join { display: block; margin: 6px 0 0; padding: 8px 10px; border-top: 1px solid var(--grid); color: var(--violet-2); font-size: 13.5px; text-decoration: none; }
.place-join:hover { text-decoration: underline; }
/* The places as cards (squares like the drivers'): the one on screen marked in the club's colour. */
.place-cards-wrap { margin: 0 0 18px; }
.place-cards-label { margin-top: 0; }
.place-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.place-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--grid); border-radius: var(--radius);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.place-card:hover { border-color: var(--violet); transform: translateY(-1px); }
.place-card:focus { outline: none; }
.place-card:focus-visible { border-color: var(--violet); }
.place-card.current { border: 2px solid var(--violet); padding: 15px; background: color-mix(in srgb, var(--violet) 5%, var(--surface)); cursor: default; }
.place-card.current:hover { transform: none; }
.place-card-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 8px; background: #fff; border: 1px solid var(--grid); overflow: hidden; }
.place-card-mark img { max-width: 36px; max-height: 36px; object-fit: contain; }
.place-card-state { font-size: 12.5px; font-weight: 600; color: var(--violet-2); }
.place-card:not(.current) .place-card-state { color: var(--muted); font-weight: 500; }
.place-card:not(.current):hover .place-card-state { color: var(--violet-2); }
.request-card .request-actions { display: flex; gap: 8px; margin-top: auto; }
.request-card:hover { transform: none; }
.own-place { margin-bottom: 16px; }
.own-place .code-box { margin-bottom: 4px; }
.own-requests { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.link-coach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.link-coach .input { width: auto; min-width: 260px; max-width: 420px; flex: 0 1 auto; }
.link-coach .field-note { flex-basis: 100%; }
.facility.own-facility .facility-name::after { content: 'Independent'; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--axis); border-radius: 999px; font: 600 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
@media (max-width: 720px) { .place-switch { max-width: 170px; } .place-menu { right: -40px; } }

/* Search fields: a magnifier inside; on focus only the border changes - no ring. */
.search-box { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.search-box .input { width: 100%; min-width: 0; padding-left: 36px; }
.search-box .input:focus { box-shadow: none; }
.page-actions { align-items: center; }
.page-actions .search-box { width: 300px; max-width: 100%; flex: 0 1 300px; }
@media (max-width: 640px) { .page-actions { width: 100%; } .page-actions .search-box { flex: 1 1 100%; width: auto; } }
.toolbar .search-box { flex: 1 1 260px; width: auto; max-width: 380px; }
.toolbar .search-box .input { min-width: 0; }
.search-note { margin: 0 0 12px; font-size: 13.5px; color: var(--dim); }

/* Demo: the codes to try */
.demo-codes { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--grid); border-radius: var(--radius); background: var(--surface-2); }
.demo-codes summary { cursor: pointer; font-weight: 600; }
.demo-codes > .muted { margin: 8px 0 10px; font-size: 13px; }
.demo-codes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.demo-code-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.demo-code-row .code { flex: none; padding: 3px 8px; font-size: 12.5px; white-space: nowrap; user-select: all; }

/* Printing the code cards: only the cards, black on white, with cut lines. */
@media print {
  body.printing-codes > *:not(.codes-sheet) { display: none !important; }
  body.printing-codes { background: #fff; }
  body.printing-codes .codes-sheet { position: static; display: block; padding: 0; background: none; backdrop-filter: none; }
  body.printing-codes .codes-box { max-width: none; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: #fff; }
  body.printing-codes .codes-head { display: none; }
  body.printing-codes .code-cards { grid-template-columns: repeat(2, 1fr); gap: 0; }
  body.printing-codes .code-card { border: 1px dashed #999; border-radius: 0; background: #fff; color: #000; padding: 18px; }
  body.printing-codes .code-card .code { background: #fff; color: #000; border-color: #000; }
  body.printing-codes .code-card-line { color: #333; }
}

@media (max-width: 980px) {
  .lv, .send-grid, .home-grid, .mail-grid { grid-template-columns: 1fr; }
  .lap-card-hero { flex-direction: column; }
  .lap-card-hero .lap-thumb-big { width: 100%; height: 170px; }
  .send-form { position: static; }
  .cards { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 8px 14px; }
  .brand-logo { height: 32px; }
  .view { padding: 20px 14px 40px; }
  .page-title { font-size: 26px; }
  .downloads, .facility-codes { grid-template-columns: 1fr; }
  .who { display: none; }
  .lv-graphs canvas { height: 300px; }
  .stripes span { width: 64px; }
  .table .hide-sm { display: none; }
  .people-grid { grid-template-columns: 1fr; }
  .person-row { grid-template-columns: auto minmax(0, 1fr); }
  .person-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .demo-dock { left: 12px; bottom: 12px; }
  .demo-who { display: none; }
  .demo-panel { align-items: flex-start; padding: 10px; }
  .demo-panel-box { padding: 16px; max-height: calc(100vh - 20px); }
  .demo-panel-head h2 { font-size: 22px; }
  .side-cards { grid-template-columns: 1fr; }
  .codes-sheet { align-items: flex-start; padding: 10px; }
  .codes-box { padding: 16px; max-height: calc(100vh - 20px); }
  .code-cards, .family-list, .demo-codes-grid { grid-template-columns: 1fr; }
}

/* Basic type: small capital labels with only a little spacing, and numbers that line up. */
.eyebrow, .panel-title, .brand-tag, .label, .field label, .stat-label, .section-label, .download-os, .badge,
.table th, .demo-tag, .lv-sector span, .goals-count, .upload-head h2 { letter-spacing: 0.05em; }
.hero-tag { letter-spacing: 0.08em; }
.mono, .table td, .lv-readout, .lap-card-meta, .lap-card-ref, .driver-facts dd, .goal-meta, .comment-at, .lv-facts dd,
.lv-sector b, .pg-tick, .stat-value, .lap-card-time, .lv-time { font-variant-numeric: tabular-nums; }