/* ---------- Blueprint Design System adoption ----------
   tokens.css (linked below, in <head>, before this file) is now the actual
   source for every shared token — colors, radius, shadows, spacing, the
   app-shell, and primitives (.btn/.card/.badge/etc.) all come from there,
   not from a locally re-declared copy. Every var(--old-name) Command used
   to define itself (--bg, --panel, --blue, --line, --muted, --card-cut...)
   has been renamed throughout this file to the matching Blueprint name
   (--canvas, --surface, --primary, --border, --text-tertiary, --r-lg...),
   so this stylesheet now only declares the handful of things Blueprint's
   token set genuinely has no equivalent for: --muted-dark (a fourth,
   further-muted text step), --blue-bright/--line-strong (lighter accent
   variants used for hovers/focus), and --ease (a reusable easing curve —
   tokens.css's --t-fast/base/slow are full duration+easing shorthands, a
   different pattern than Command's `transition: prop .16s var(--ease)`
   calls, so there's nothing to rename onto there). */
:root {
    /* Remapped to Workshop's exact values (these four aren't part of the
       Blueprint token spec, so they're declared locally same as before —
       just re-hued/sized to match Workshop instead of the old command-center
       palette). --card-cut/--card-cut-sm are new: Workshop's cut-corner card
       clip-path, used throughout the page rebuilds below. */
    --muted-dark: #4A4A4A;
    --blue-bright: #91BEDD;
    --line-strong: #333333;
    --ease: cubic-bezier(.2,.7,.3,1);
    --card-cut: 18px;
    --card-cut-sm: 10px;
    /* Same chamfered-corner shape as every card/intake form, scaled up for
       the login screen's single hero panel — see "login" section below. */
    --card-cut-hero: 28px;
}

/* No @font-face here anymore — tokens.css declares Garp Sans Wide/Roboto
   once (as --font-display/--font-body) and this file uses those variables
   directly, instead of Command re-registering the same files under its own
   "Blueprint Wide"/"Blueprint Roboto" aliases. Winner Sans ("Blueprint
   Stat") is dropped entirely, matching the design system's decision to
   consolidate stat numbers onto Garp. */

* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
* { scrollbar-color: #343b43 transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid var(--canvas); border-radius: 999px; background: #343b43; }
*::-webkit-scrollbar-thumb:hover { background: #4a525c; }

body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--canvas);
    font-family: var(--font-body), Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display), var(--font-body), Arial, sans-serif; font-weight: 400; margin: 0; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button {
    cursor: pointer;
    transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 2px;
}
.is-hidden { display: none !important; }
.app-body.view { display: none; }
.app-body.view.active { display: flex; }

/* ---------- shell / sidebar / header (matches Workshop's shared app shell) ---------- */
.app-sidebar {
    width: 220px;
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    padding: 16px 10px 14px;
    background: rgba(35,35,35,.92);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    transition: width .18s var(--ease), flex-basis .18s var(--ease);
}
.app-sidebar.is-collapsed { width: 72px; flex-basis: 72px; }

.sidebar-top { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 4px 6px 28px; }
.sidebar-logo { width: 54px; height: 40px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 8px rgba(123,169,208,.25)); }
.sidebar-wordmark { min-width: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: .3px; color: #fff; white-space: nowrap; overflow: hidden; }
.app-sidebar.is-collapsed .sidebar-top { justify-content: center; }

.sidebar-collapse-btn {
    position: absolute; top: 16px; left: 208px; z-index: 10;
    width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 13px; padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: left .18s var(--ease);
}
#app-sidebar.is-collapsed ~ .sidebar-collapse-btn { left: 60px; }

.dashboard-switcher-wrap { position: relative; }
.dashboard-switcher {
    width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px;
    background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; gap: 8px;
    padding: 0 10px; margin-bottom: 4px;
}
.dashboard-switcher:hover { background: var(--surface-raised); color: #fff; }
.dashboard-switcher .btn-icon { margin-right: 0; width: 14px; height: 14px; }
.dashboard-switcher-label { flex: 1; min-width: 0; text-align: left; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-switcher-chevron { flex: 0 0 auto; font-size: 11px; color: var(--text-tertiary); }
.app-sidebar.is-collapsed .dashboard-switcher { padding: 0; justify-content: center; }
.app-sidebar.is-collapsed .dashboard-switcher-label, .app-sidebar.is-collapsed .dashboard-switcher-chevron { display: none; }
.dashboard-switcher-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 9px;
    box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px;
}
.dashboard-switcher-item { border-radius: 6px; padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background-color .12s var(--ease), color .12s var(--ease); }
.dashboard-switcher-item.is-current { color: var(--blue-bright); background: var(--secondary); }
.dashboard-switcher-item.is-disabled { color: var(--muted-dark); }
.dashboard-switcher-item:hover:not(.is-disabled):not(.is-current) { background: var(--hover); color: var(--text-primary); cursor: pointer; }
.switcher-soon { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-dark); }

.sidebar-divider { height: 1px; margin: 6px 8px 10px; background: var(--border); flex: 0 0 auto; }
.sidebar-nav-group-label { margin: 14px 0 4px 10px; color: var(--muted-dark); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.app-sidebar.is-collapsed .sidebar-nav-group-label { visibility: hidden; height: 4px; overflow: hidden; margin: 10px 0 4px; }

.tabs { display: flex; flex-direction: column; gap: 2px; }
.tab {
    width: 100%; height: 38px; min-width: 0; border: 0; border-radius: 7px;
    color: var(--text-tertiary); background: transparent; font-size: 14.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: flex-start; padding: 0 10px; text-align: left;
}
.tab:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,.03); }
.tab.active { color: var(--blue-bright); background: rgba(123,169,208,.14); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.tab .btn-icon { margin-right: 10px; width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar.is-collapsed .tab { justify-content: center; padding: 0; }
.app-sidebar.is-collapsed .tab .btn-icon { margin-right: 0; }
.app-sidebar.is-collapsed .sidebar-nav-label { display: none; }

.app-shell { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.app-header {
    height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px;
    background: rgba(35,35,35,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex: 0 0 auto; z-index: 5;
}
.app-header-title { margin: 0 0 0 10px; color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: .3px; }
.app-views { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.top-actions { display: flex; align-items: center; gap: 10px; min-width: 230px; justify-content: flex-end; }

.account-menu-wrap { position: relative; }
.account-card {
    display: inline-flex; align-items: center; gap: 8px; max-width: 220px; height: 34px; padding: 0 10px 0 6px;
    border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text-secondary);
    cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.account-card:hover { background: var(--surface-raised); color: #fff; }
.account-avatar {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--secondary); color: var(--blue-bright);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.account-email { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 150px;
    background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 9px;
    box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px;
}
.account-dropdown-item {
    border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary);
    font-size: 12.5px; font-weight: 500; text-align: left; padding: 8px 10px; cursor: pointer;
}
.account-dropdown-item:hover { background: var(--danger); color: #fff; }

/* ---------- icon system (mask-based, recolorable) ---------- */
.section-icon, .btn-icon, .cell-icon {
    display: inline-block;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex: 0 0 auto;
}
.section-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(155deg, rgba(123,169,208,.22), rgba(123,169,208,.06));
    color: var(--blue-bright);
    padding: 8px;
    -webkit-mask-size: 55%;
    mask-size: 55%;
}
.section-heading { display: flex; align-items: center; gap: 12px; }
.btn-icon { width: 13px; height: 13px; margin-right: 7px; }
.icon-add { -webkit-mask-image: url("/assets/Icons/add-line.svg"); mask-image: url("/assets/Icons/add-line.svg"); }
.icon-athletes { -webkit-mask-image: url("/assets/Icons/users-svgrepo-com.svg"); mask-image: url("/assets/Icons/users-svgrepo-com.svg"); }
/* Workshop's own tabs, rendered into #external-app-tabs — see js/appShell.js */
.icon-workouts { -webkit-mask-image: url("/assets/Icons/dumbell-svgrepo-com.svg"); mask-image: url("/assets/Icons/dumbell-svgrepo-com.svg"); }
.icon-programs { -webkit-mask-image: url("/assets/Icons/clipboard-line.svg"); mask-image: url("/assets/Icons/clipboard-line.svg"); }
.icon-eval { -webkit-mask-image: url("/assets/Icons/icon-activity.svg"); mask-image: url("/assets/Icons/icon-activity.svg"); }
/* Fuel's own tabs, rendered into #external-app-tabs — see js/appShell.js */
.icon-restaurant { -webkit-mask-image: url("/assets/Icons/restaurant-line (1).svg"); mask-image: url("/assets/Icons/restaurant-line (1).svg"); }
.icon-target { -webkit-mask-image: url("/assets/Icons/icon-target.svg"); mask-image: url("/assets/Icons/icon-target.svg"); }
.icon-ingredients { -webkit-mask-image: url("/assets/Icons/Drum Stick.svg"); mask-image: url("/assets/Icons/Drum Stick.svg"); }
.icon-seasonings { -webkit-mask-image: url("/assets/Icons/flame-fill-svgrepo-com.svg"); mask-image: url("/assets/Icons/flame-fill-svgrepo-com.svg"); }
.icon-utensils { -webkit-mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); }

/* ---------- login ---------- */
/* ============================ Sign in ============================ */
/* A drafting sheet: the navy grid (images/login-grid.webp — the supplied grid
   asset, recoloured navy on transparent) on the light canvas and one compact
   white card. The grid fades toward the edges so
   it frames the card instead of competing with it. */
.login-screen {
    position: relative; min-height: 100vh; overflow: hidden;
    display: grid; place-items: center; padding: 40px 20px;
    background: var(--canvas);
}
.login-grid {
    position: absolute; inset: -2%; pointer-events: none;
    background: url("images/login-grid.webp") center / cover no-repeat;
    opacity: .62;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
}

.login-panel {
    position: relative; width: 100%; max-width: 380px; padding: 36px 34px 28px;
    text-align: center; background: var(--surface);
    border: 1px solid rgba(228, 232, 237, .8); border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 22, 32, .04), 0 28px 60px rgba(15, 22, 32, .10);
}
/* logo-mark.png is drawn black; masking it lets the card show it in navy. */
.login-logo {
    display: block; width: 44px; height: 43px; margin: 0 auto 16px; background: var(--navy);
    -webkit-mask: url("/assets/Logos/logo-mark.png") center / contain no-repeat;
    mask: url("/assets/Logos/logo-mark.png") center / contain no-repeat;
}
.login-wordmark {
    margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.1;
    text-transform: uppercase; color: var(--navy);
}
/* Product name between two blue rules. */
.login-product {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    margin: 11px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .42em;
    text-transform: uppercase; color: var(--blue);
}
.login-product::before, .login-product::after { content: ""; width: 40px; height: 1.5px; background: var(--blue); }
/* letter-spacing trails the last letter; pull it back so the word centres. */
.login-product span { margin-right: -.42em; }
.login-tag {
    margin: 12px 0 28px; font-size: 10px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ink-4);
}

.login-form { display: grid; gap: 14px; text-align: left; }
.login-field { display: grid; gap: 7px; }
.login-field > label {
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3);
}
.login-input { position: relative; }
.login-input input {
    width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink); font-size: 14px; outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-input input::placeholder { color: var(--ink-4); }
.login-input input#password { padding-right: 48px; }
.login-input input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 111, 176, .13); }
.password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center;
    border: none; border-radius: 6px; background: none; color: var(--ink-4);
}
.password-toggle:hover { color: var(--navy); background: var(--sunk); }
.password-toggle svg { width: 19px; height: 19px; }
.password-toggle .eye-off { display: none; }
.password-toggle[aria-pressed="true"] .eye-on { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }

.login-submit {
    position: relative; width: 100%; height: 48px; margin-top: 4px;
    border-radius: 8px; font-size: 13px; letter-spacing: .02em;
}
.login-submit svg { position: absolute; right: 22px; width: 18px; height: 18px; }
.login-form .link-btn { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.login-form .status { text-align: center; }
.login-form .status:empty { display: none; }
@media (max-width: 520px) {
    .login-panel { padding: 30px 22px 24px; }
    .login-product::before, .login-product::after { width: 30px; }
}
.login-form .link-btn { justify-self: center; background: none; border: none; padding: 0; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.login-form .link-btn:hover { color: var(--navy); text-decoration: underline; }
.login-form .status { min-height: 18px; text-align: center; font-size: 12.5px; color: var(--red); }
.login-form .status:empty { display: none; }

/* public intake forms (remote-consult.html / inperson-eval.html) — same
   "studio" look as the coach dashboard (rounded corner, blue top accent) so a
   prospect's first touchpoint reads as the same product. The app shell's
   `html`/`body { height:100%; overflow:hidden }` above is built for the
   dashboard's fixed-viewport layout and clips any intake content taller than
   the viewport — these public pages need normal document scrolling instead,
   scoped via `.intake-body` so the dashboard shell is untouched. */
html:has(body.intake-body), body.intake-body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.intake-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background: var(--canvas);
}
.intake-card {
    width: min(100%, 400px);
    display: grid;
    gap: 22px;
    padding: 36px 32px;
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--primary);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.intake-logo { width: 84px; margin: 0 auto; display: block; }
.intake-heading { text-align: center; display: grid; gap: 6px; }
/* font-weight left at the default 400 (not overridden to 700) — Garp Sans
   Wide only ships a 400 weight file (see tokens.css @font-face), so asking
   for bold made the browser synthesize/fake it, which rendered as a blurry
   double-stroke instead of a real bold. */
.intake-heading h1 { font-size: 28px; color: var(--text-primary); }
.intake-heading p { margin: 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; }
.intake-form { display: grid; gap: 14px; }
.intake-form .btn-primary { justify-content: center; margin-top: 4px; }
.intake-success { text-align: center; display: grid; gap: 8px; }
.intake-success h2 { font-size: 17px; color: var(--text-primary); }
.intake-success p { margin: 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; }

/* Once the success panel replaces the form, the page's intro copy is stale —
   it is still inviting you to fill in something that is no longer on screen.
   Opt-in by class, so a page keeps whatever heading it wants above the
   confirmation (the h1 stays; only the "fill this in" lines go). :has() on
   the card rather than a JS toggle keeps this working for every form that
   swaps in .intake-success, including ones driven by shared intake.js. */
.intake-card:has(.intake-success:not(.is-hidden)) .intake-heading-intro { display: none; }

.intake-card-wide { width: min(100%, 480px); }
.intake-card-xwide { width: min(100%, 640px); }

/* ---------- light theme for public forms ----------
   Opt-in per page via <body class="intake-body intake-light">, because the
   coach dashboard itself stays dark-only (see tokens.css's "Light theme
   removed" note) — this is specifically for the pages a player/parent opens
   cold on their phone, where the dark studio look tested as hard to read.
   Deliberately a token remap, not a parallel set of component rules: every
   intake, signup, waiver, button and input rule below already paints from
   these variables, so re-pointing them re-skins the whole page and can't
   drift out of sync with the dark version the way a duplicated rule set
   would. Palette matches the transactional email template (Code.gs) so a
   player who got the email and then opens the form sees one brand.

   --primary/--secondary swap roles rather than getting new names: on dark,
   --primary is the pastel blue that carries fills with navy (--secondary)
   text on top; on white that pastel has nowhere near enough contrast for a
   button, so primary becomes the navy ink and secondary becomes the white
   sitting on it. Every .btn-primary/.signup-step-dot.is-active/
   .rating-circle.is-selected rule then inverts correctly for free. */
body.intake-light {
    --canvas: #EEF1F5;
    --surface: #FFFFFF;
    --surface-raised: #F8FAFC;
    --border: #E2E8F0;
    --line-strong: #CBD5E1;
    --text-primary: #13294C;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --muted-dark: #94A3B8;
    --primary: #13294C;
    --primary-hover: #1E3A63;
    --secondary: #FFFFFF;
    /* Paired with --secondary above by .intake-slot-btn.is-selected /
       .intake-cal-day.is-selected, which set a --secondary fill with
       --blue-bright text — that pastel is invisible on white, so on light
       it resolves to the same navy ink as the rest of the page. */
    --blue-bright: #13294C;
    --hover: rgba(19,41,76,.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 4px 14px rgba(15,23,42,.07);
    --shadow-lg: 0 10px 30px rgba(15,23,42,.08);
    --shadow-focus: 0 0 0 3px rgba(19,41,76,.14);
}

/* Rounded card, not the dark theme's clipped corner — the cut corner is a
   dashboard motif; the email this matches is plain rounded. */
.intake-light .intake-card {
    clip-path: none;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
/* Full wordmark lockup instead of the white mark — "Blueprint Logo W.png"
   is literally white artwork and would be invisible here. */
.intake-light .intake-logo { width: min(268px, 80%); }
.intake-light .intake-heading {
    padding-top: 24px;
    border-top: 2px solid var(--primary);
}

/* Type sizing is part of the fix, not decoration: the dark form's 10px
   all-caps micro-labels are what made this hard to read cold on a phone. */
.intake-light label {
    font-size: 12px;
    letter-spacing: .2px;
    text-transform: none;
    font-weight: 600;
    color: var(--text-secondary);
}
.intake-light .intake-heading p,
.intake-light .intake-success p { font-size: 14px; }
.intake-light .signup-step-label { font-size: 16px; }
.intake-light .field-hint { font-size: 12.5px; }
/* 16px is the threshold below which iOS Safari auto-zooms the viewport on
   focus — every player fills this out on a phone, so anything smaller
   means the page lurches on each field tap. */
.intake-light input,
.intake-light select,
.intake-light textarea { font-size: 16px; }
.intake-light input,
.intake-light select { height: 46px; }

.intake-light .waiver-block { background: var(--surface-raised); }
.intake-light .waiver-text { background: var(--surface); font-size: 12.5px; }
.intake-light .waiver-checkbox { font-size: 13.5px; }
.intake-light .signup-step-dot { background: var(--surface-raised); }

/* Selectable chips/days on light (fall-signup.html's group picker). The dark
   rule paints a --secondary fill with --blue-bright text; on light both of
   those resolve to near-white-on-navy's opposites, leaving "selected" as a
   border change only. Invert it to the same navy-on-white fill the light
   .btn-primary uses so the picked slot reads at a glance. */
.intake-light .intake-slot-btn.is-selected,
.intake-light .intake-cal-day.is-selected {
    background: var(--primary); border-color: var(--primary); color: var(--secondary);
}
/* Same readability bump as the fields above — these are the other thing a
   player has to read cold on a phone. */
.intake-light .intake-slot-btn { font-size: 13.5px; padding: 11px 16px; }


/* Free In-Person Eval waiver block (inperson-eval.html, js/waiver.js) —
   scrollable legal text + e-signature fields, gating the submit button via
   real `required` attributes rather than just JS validation. */
.waiver-block {
    display: grid; gap: 12px; padding: 16px; margin-top: 4px;
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
}
.waiver-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.waiver-text {
    max-height: 220px; overflow-y: auto; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--canvas);
    font-size: 12px; line-height: 1.6; color: var(--text-secondary);
}
.waiver-text p { margin: 0 0 10px; }
.waiver-text p:last-child { margin-bottom: 0; }
.waiver-text strong { color: var(--text-primary); }
.waiver-checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.waiver-checkbox input { width: 16px; height: 16px; flex: 0 0 auto; }
.waiver-guardian-fields { display: grid; gap: 12px; padding: 12px; border-left: 2px solid var(--primary); }

/* Signup wizard (welcome.html/js/welcomeAthlete.js) — numbered step
   indicator + one visible .signup-step at a time, Next/Back nav. Reuses
   .intake-form's own field styling; only the step chrome is new here. */
.signup-steps { display: flex; align-items: center; justify-content: center; gap: 6px; }
.signup-step-dot {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--text-tertiary); background: var(--canvas);
    border: 1px solid var(--line-strong); flex: 0 0 auto;
}
.signup-step-dot.is-active { color: var(--secondary); background: var(--primary); border-color: var(--primary); }
.signup-step-dot.is-done { color: var(--primary); border-color: var(--primary); }
.signup-step-sep { width: 16px; height: 1px; background: var(--line-strong); flex: 0 0 auto; }
.signup-step { display: grid; gap: 14px; }
.signup-step-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.signup-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.signup-nav .btn-primary { flex: 1; justify-content: center; }
.signup-nav-back { visibility: hidden; }
.signup-nav-back.is-visible { visibility: visible; }

/* Season Feedback survey (season-feedback.html) — numbered rating circles +
   chip groups, built from Command/js/seasonFeedback.js. */
.field-block { display: grid; gap: 8px; }
.field-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.field-hint { margin: -4px 0 0; color: var(--text-tertiary); font-size: 11.5px; }
.field-hint-inline { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted-dark); }

.rating-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.rating-circle {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-secondary);
    font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), transform .1s var(--ease);
}
.rating-circle:hover { border-color: var(--primary); color: var(--text-primary); }
.rating-circle.is-selected { background: var(--primary); border-color: var(--primary); color: var(--secondary); transform: scale(1.05); }
.rating-scale-caption { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-tertiary); }

.rating-table { display: grid; gap: 16px; }
.rating-table-row { display: grid; gap: 6px; }
.rating-table-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* Season Feedback results accordion (survey-results-modal, surveyResults.js) */
.results-list { display: grid; gap: 8px; }
.results-row { border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.results-row-head {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border: 0; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left;
}
.results-row-head:hover { background: var(--surface-raised); }
.results-row-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-row-date { font-size: 11.5px; color: var(--text-tertiary); flex: 0 0 auto; }
.results-chevron { flex: 0 0 auto; color: var(--text-tertiary); transition: transform .14s var(--ease); }
.results-row-head.is-open .results-chevron { transform: rotate(180deg); }
.results-row-detail { display: grid; gap: 9px; padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.results-qa-row { display: grid; gap: 2px; }
.results-qa-q { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-tertiary); }
.results-qa-a { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

/* Fall Sign-Up results (fall-signup-results-modal, fallSignupResults.js) —
   by-group roster overview + a flat (non-accordion) list of every response. */
.fall-overview { display: grid; gap: 10px; margin-bottom: 6px; }
.fall-group-card {
    border: 1px solid var(--line-strong); border-left: 3px solid var(--card-accent, var(--primary));
    border-radius: var(--r-sm); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px;
}
.fall-group-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Garp Sans Wide (--font-display) only ships a 400 weight (see tokens.css)
   — its letterforms already read heavy/bold at this size, so no
   font-weight override here (that fakes a bold the font doesn't have and
   comes out blurry, same lesson as .intake-heading h1 above). */
.fall-group-card-title { font-family: var(--font-display); font-size: 24px; color: var(--text-primary); }
.fall-group-card-count { font-size: 14px; font-weight: 700; color: var(--text-tertiary); }
.fall-group-card-names { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.fall-group-card-names li { font-size: 13.5px; color: var(--text-secondary); }
.fall-group-card-empty { margin: 0; font-size: 12.5px; color: var(--text-tertiary); font-style: italic; }
.fall-group-card-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fall-group-card-edit label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.fall-group-card-edit input[type="number"] { width: 56px; padding: 4px 6px; font-size: 12.5px; }
.fall-group-card-edit-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fall-group-card-note { margin: 0; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }

.fall-add-group-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr 90px 44px auto; gap: 8px; align-items: center; margin-bottom: 4px; }
.fall-group-card-schedule { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.fall-response-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.fall-response-detail span { color: var(--text-tertiary); font-weight: 600; }
.fall-group-card-edit .ghost-btn.danger { color: #ef5350; }
.fall-add-group-row input[type="color"] { padding: 2px; height: 34px; }

.results-flat-list { display: grid; gap: 8px; }
.fall-response-row { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); padding: 10px 14px; display: grid; gap: 4px; }
.fall-response-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.fall-response-edit { margin-left: auto; }
.fall-response-meta { font-size: 11.5px; color: var(--text-tertiary); }
.intake-slots-field { display: grid; gap: 7px; }
.intake-slots-field > span { color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; }
.intake-slots { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--muted-dark); }
.intake-slot-btn {
    border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text-secondary);
    padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.intake-slot-btn:hover { border-color: var(--primary); color: var(--text-primary); }
.intake-slot-btn.is-selected { background: var(--secondary); border-color: var(--primary); color: var(--blue-bright); }

/* Per-day time rows under the training-days chips (player profile) — one
   row per selected day since sessions can land at different times on
   different days (e.g. Mon 4pm, Wed 6pm). */
.training-day-times { display: grid; gap: 6px; margin-top: 10px; }
.training-day-time-row { display: flex; align-items: center; gap: 10px; }
.training-day-time-row .training-day-label { width: 36px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.training-day-time-row input[type="time"] { flex: 1; max-width: 200px; }
.training-days-empty { margin: 0; font-size: 12px; color: var(--text-tertiary); }

/* ---------- HS Free Eval month grid (senior-eval.html) ----------
   Its own eval-cal-* namespace rather than reusing .intake-calendar, which
   inperson-eval.html depends on for a different (pick a day, then a time)
   flow — sharing the classes would couple two forms that want to diverge.

   Each session day holds exactly one session, so a date cell is the whole
   choice: no drill-down, which is what keeps a 7-column grid usable at phone
   width. Cells are square via aspect-ratio and sized by the grid itself, so
   the same rules hold from 320px to desktop with no breakpoint. */
.eval-cal { display: grid; gap: 8px; }
.eval-cal + .eval-cal { margin-top: 18px; }
.eval-cal-month {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.eval-cal-weekdays, .eval-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.eval-cal-weekdays span {
    text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    color: var(--text-tertiary);
}
.eval-cal-pad { aspect-ratio: 1; }

/* One rule for every cell so a bookable date and an empty one occupy exactly
   the same box — a grid whose rows jump height as availability changes reads
   as broken. */
.eval-cal-day {
    aspect-ratio: 1; min-width: 0; padding: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--muted-dark);
    font-size: 13px; line-height: 1;
}
.eval-cal-num { font-weight: 600; }
.eval-cal-note { font-size: 9px; font-weight: 600; letter-spacing: .02em; }

/* A day with no session is a plain number — present so the month keeps its
   shape, but visibly not a target. */
.eval-cal-day.is-blank { color: var(--muted-dark); opacity: .45; }
.eval-cal-day.is-past { color: var(--muted-dark); opacity: .35; cursor: not-allowed; }

/* Bookable dates are the only filled cells on the grid, which is what makes
   the month's rhythm readable at a glance. Tint carries availability, the
   same three tones the rest of the form uses for spots. */
.eval-cal-day.is-open, .eval-cal-day.is-tight, .eval-cal-day.is-full { cursor: pointer; border-color: var(--border); }
.eval-cal-day.is-open { color: #166534; background: #F0FDF4; border-color: #BBF7D0; }
.eval-cal-day.is-tight { color: #9A3412; background: #FFF7ED; border-color: #FED7AA; }
.eval-cal-day.is-full { color: #991B1B; background: #FEF2F2; border-color: #FECACA; opacity: .6; cursor: not-allowed; }
.eval-cal-day.is-open:hover, .eval-cal-day.is-tight:hover { border-color: var(--primary); }

/* Selected wins over every availability tint — navy fill, the same signal the
   training form's selected row uses. */
.eval-cal-day.is-selected {
    background: var(--primary); border-color: var(--primary); color: var(--secondary);
    box-shadow: 0 0 0 2px var(--primary);
}
.eval-cal-day:focus-visible { box-shadow: var(--shadow-focus); }

/* The cell can't hold the time, so the choice is echoed in full underneath. */
.eval-cal-selected {
    margin: 10px 0 0; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-raised);
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}

/* Phone: ~44px cells at 375px. The "3 left" note is the first thing to go —
   the tint already says whether a date is open, and the exact count is in the
   cell's aria-label and the confirmation line underneath. */
@media (max-width: 420px) {
    .eval-cal-weekdays, .eval-cal-grid { gap: 4px; }
    .eval-cal-day { font-size: 12px; }
    .eval-cal-note { display: none; }
}

/* ---------- In-Person Training interest form (fall-signup.html) ----------
   One row per group rather than a grid of cards: the four three-day groups
   differ only by time, so a row that lines Mon/Wed/Sat up in fixed columns
   lets someone compare them by scanning straight down a column. Cards put
   each group's times in a different place on screen.

   No per-group accent colour: five colour-coded rows competing with five
   availability badges gave the page two colour systems saying different
   things. The badge is the only thing here that carries meaning by colour. */
.group-rows { display: grid; gap: 8px; }
.group-card {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s var(--ease), box-shadow .12s var(--ease), background-color .12s var(--ease);
}
.group-card:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.group-card-name {
    font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-primary);
}
/* Fixed-width columns, not auto — the times must line up row to row or the
   comparison the layout exists for does not work. */
.group-card-times { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.group-card-time { display: grid; gap: 1px; }
.group-card-day {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-tertiary);
}
.group-card-hour { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* Selected is a navy wash plus a ring, not a fill: a solid navy row would
   bury the times and the badge, which are the reason the row exists. */
.group-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--hover);
}
.group-card:disabled, .group-card.is-full { cursor: not-allowed; opacity: .55; }
.group-card.is-full:hover { border-color: var(--border); box-shadow: none; }

/* Badges carry the scarcity, so they are the one place on the page allowed a
   tint. Kept to a wash + hairline rather than a saturated fill — five solid
   colour blocks down a phone screen reads as a sales page, which is exactly
   the tone this form is supposed to avoid. */
.group-badge {
    justify-self: end; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid transparent;
}
.group-badge.is-open { color: #166534; background: #F0FDF4; border-color: #BBF7D0; }
.group-badge.is-tight { color: #9A3412; background: #FFF7ED; border-color: #FED7AA; }
.group-badge.is-full { color: #991B1B; background: #FEF2F2; border-color: #FECACA; }

/* These two headings are the page's real navigation — they tell a parent
   whether they are looking at a three-day commitment or a Saturday. At 11px
   uppercase tertiary they read as a caption above the rows; at full size in
   navy they read as the section titles they are. */
.group-section-label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px;
    flex-wrap: wrap;
    margin: 16px 0 2px;
    font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--text-primary);
}
.group-section-label:first-of-type { margin-top: 4px; }
/* Price sits with the heading, not on the rows: all four three-day groups
   cost the same, so repeating it per row would be noise. margin-left:auto
   keeps it hard right even when the heading wraps to its own line. */
.group-section-price { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.price-note { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }

/* Multi-select goals — a checkbox row styled as a chip. The real input stays
   in the DOM (visually hidden, not display:none) so the form still submits it
   and it remains reachable by keyboard and screen reader. */
.goal-group { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-chip { display: inline-flex; }
.goal-chip input {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.goal-chip span {
    display: inline-block; padding: 8px 13px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.goal-chip span:hover { border-color: var(--primary); color: var(--text-primary); }
.goal-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--secondary); }
.goal-chip input:focus-visible + span { box-shadow: var(--shadow-focus); }

.intake-subheading {
    margin: 0; font-size: 15px; font-weight: 700;
    color: var(--text-primary); letter-spacing: .01em;
}
.field-optional { font-style: normal; font-weight: 400; color: var(--text-tertiary); text-transform: none; }
.request-note { margin-top: -2px; text-align: center; }

@media (max-width: 520px) {
    /* The name and badge share the top line, the three times sit underneath
       still in their own columns — a phone can't fit all five across, but the
       column alignment that makes the groups comparable has to survive. */
    .group-card { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 14px; }
    .group-card-times { grid-column: 1 / -1; }
    .group-badge { grid-row: 1; grid-column: 2; }
}
}

/* Inline month calendar for the intake forms — every day already shows whether
   it has openings (dimmed + unclickable if not), so there's no more clicking
   through dates one at a time to find one that isn't empty. Same visual
   language as the coach Calendar page's month grid, scaled down. */
.intake-cal-field { display: grid; gap: 7px; }
.intake-cal-field > span { color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; }
.intake-calendar { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); padding: 12px; display: grid; gap: 10px; }
.intake-cal-head { display: flex; align-items: center; justify-content: space-between; }
.intake-cal-head span { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.intake-cal-nav {
    width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--line-strong);
    background: var(--surface-raised); color: var(--text-secondary); font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.intake-cal-nav:hover:not(:disabled) { border-color: var(--primary); color: var(--text-primary); }
.intake-cal-nav:disabled { opacity: .35; cursor: default; }
.intake-cal-weekdays, .intake-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.intake-cal-weekdays span { text-align: center; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; }
.intake-cal-day {
    aspect-ratio: 1; border: 1px solid transparent; border-radius: 7px; background: transparent;
    color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.intake-cal-day.is-outside { color: var(--muted-dark); }
.intake-cal-day:not(.is-disabled):hover { border-color: var(--primary); color: var(--text-primary); }
.intake-cal-day.is-disabled { color: var(--muted-dark); opacity: .35; cursor: default; }
.intake-cal-day.is-selected { background: var(--secondary); border-color: var(--primary); color: var(--blue-bright); }

/* Fields — same recipe as Primitives' .input/.select/.textarea: --surface
   background that stays put on focus (only border-color + --shadow-focus
   change), --border not --line-strong, --r-sm radius. */
label { display: grid; gap: 7px; color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; }
input, select, textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    background: var(--surface);
    outline: 0;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input, select { height: 38px; padding: 0 12px; }
textarea { min-height: 88px; padding: 11px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-dark); }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}
input:hover, select:hover { border-color: var(--line-strong); }

/* ---------- shell / sidebar ---------- */
.coach-app {
    position: relative;
    min-width: 1330px;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background-color: var(--canvas);
    background-image: radial-gradient(circle at 12% 0%, rgba(123,169,208,.05), transparent 32%);
}
.tab { border: 0; background: none; }

.icon-home { -webkit-mask-image: url("/assets/Icons/home-line.svg"); mask-image: url("/assets/Icons/home-line.svg"); }
.icon-tasks { -webkit-mask-image: url("/assets/Icons/task-done-svgrepo-com.svg"); mask-image: url("/assets/Icons/task-done-svgrepo-com.svg"); }
.icon-leads { -webkit-mask-image: url("/assets/Icons/user-3-fill.svg"); mask-image: url("/assets/Icons/user-3-fill.svg"); }
.icon-calendar { -webkit-mask-image: url("/assets/Icons/calendar-line.svg"); mask-image: url("/assets/Icons/calendar-line.svg"); }
.icon-forms { -webkit-mask-image: url("/assets/Icons/icon-clipboard-check.svg"); mask-image: url("/assets/Icons/icon-clipboard-check.svg"); }
.icon-emails { -webkit-mask-image: url("/assets/Icons/inbox-alt-1-svgrepo-com.svg"); mask-image: url("/assets/Icons/inbox-alt-1-svgrepo-com.svg"); }
.icon-wishlist { -webkit-mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); }
.icon-vault { -webkit-mask-image: url("/assets/Icons/shield-alt-1-svgrepo-com.svg"); mask-image: url("/assets/Icons/shield-alt-1-svgrepo-com.svg"); }
.icon-timer { -webkit-mask-image: url("/assets/Icons/icon-timer.svg"); mask-image: url("/assets/Icons/icon-timer.svg"); }
.icon-apps { -webkit-mask-image: url("/assets/Icons/apps-grid.svg"); mask-image: url("/assets/Icons/apps-grid.svg"); }

/* Buttons — .primary-btn/.ghost-btn/.danger-btn are gone from the markup
   entirely now; every usage site was renamed to tokens.css's real .btn/
   .btn-primary/.btn-ghost/.btn-danger + .btn-sm/.btn-md, so those primitives
   do all the work with no local override needed. What's left here are
   Command-only buttons Blueprint doesn't define a primitive for: icon-only
   square buttons (.icon-btn, .mini-btn, .nav-arrow), the account/user pill
   (.user-pill, unused today but kept for parity), and the plain-text
   .link-btn. These get the same flat, no-gradient treatment as .btn. */
.mini-btn, .link-btn, .user-pill, .icon-btn, .nav-arrow {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--r-sm);
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.user-pill, .icon-btn, .mini-btn, .nav-arrow {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text-secondary);
}
.mini-btn { height: 27px; padding: 0 10px; font-size: 11px; }
.mini-btn:hover { background: var(--surface-raised); color: var(--text-primary); }
.nav-arrow { height: 30px; padding: 0 11px; font-size: 13px; }
.nav-arrow:hover { background: var(--surface-raised); color: var(--text-primary); }
.nav-arrow:disabled { opacity: .35; cursor: not-allowed; }
.user-pill { max-width: 190px; height: 32px; padding: 0 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.icon-btn { width: 32px; height: 32px; font-size: 14px; }
.icon-btn:hover { background: rgba(241,90,90,0.1); border-color: var(--danger); color: var(--danger); }
.link-btn { justify-self: center; background: transparent; border: 0; color: var(--primary); font-weight: 500; }
/* was var(--blue-bright) — a light pastel blue with fine contrast on the
   fixed-dark chrome it was designed for, but this link sits on --canvas,
   which lightens in light mode, so a lighter-still hover color nearly
   vanished. --primary-hover reads correctly against both. */
.link-btn:hover { color: var(--primary-hover); }
.status { min-height: 18px; margin: 0; color: var(--text-secondary); font-size: 12px; }

/* Same shape as tokens.css's .status-pill (BDG-02), minus the fixed color
   variants — lead stage/color/priority tags need an arbitrary per-instance
   color (set inline by ui.js's pill()), not one of the 5 fixed semantic
   ones, so the shape is factored out here instead of duplicating the
   fixed-variant version for a case it can't actually serve. */
.dyn-pill { display: inline-block; max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border-radius: var(--r-pill); padding: 6px var(--sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* ---------- layout ---------- */
.app-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.left-panel, .right-panel {
    width: 246px;
    flex: 0 0 auto;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
}
.right-panel { border-right: 0; border-left: 1px solid var(--border); }
.center-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}
.center-panel.full-width { flex: 1 1 100%; }
/* Coach Detail's whole content (hero + form fields + athletes table) scrolls
   as one page, unlike Player Detail's per-tab scrolling (.detail-tab-panel
   below) — there's no tab system here, and the athletes table sits outside
   the <form> entirely, so nothing inside would otherwise pick up a scrollbar
   and the page just silently clipped past the fold. */
#coach-detail-view .center-panel { overflow-y: auto; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 14px; border-bottom: 1px solid var(--border); }
.panel-title p, .eyebrow { margin: 0; color: var(--muted-dark); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.panel-search { margin: 10px 8px 0; width: calc(100% - 16px); height: 32px; font-size: 12px; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.section-bar h2 { font-size: 19px; }
.section-bar-actions, .row-actions { display: flex; align-items: center; gap: 8px; }
.lead-filter-select { width: auto; height: 32px; padding: 0 8px; font-size: 12px; }
.lead-color-picker { display: flex; align-items: center; gap: 4px; }
.lead-color-swatch {
    width: 16px; height: 16px; border-radius: 50%; padding: 0; border: 2px solid transparent;
    background: var(--swatch-color); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.lead-color-swatch.active { border-color: var(--text-primary); }

/* Per-row "more actions" menu (leads table) — now a direct port of Surfaces'
   .menu-panel/.menu-item/.row-actions-btn (TBL-01's row-action pattern),
   same as .account-dropdown already was via tokens.css. */
.lead-menu-wrap { position: relative; }
.row-menu-btn, .row-actions-btn {
    width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); border: none;
    background: none; color: var(--text-tertiary); font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.row-menu-btn:hover, .row-actions-btn:hover { background: var(--surface-raised); color: var(--text-primary); }
.lead-menu, .menu-panel {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 190px;
    display: grid; gap: 2px; padding: var(--xs); border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-raised); box-shadow: var(--shadow-lg); text-align: left;
}
.menu-panel.is-hidden { display: none; }
.lead-menu-label { padding: 4px 6px; color: var(--text-tertiary); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; }
.lead-menu .lead-color-picker { padding: 0 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.lead-menu-item, .menu-item {
    display: flex; align-items: center; gap: var(--sm); width: 100%;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary);
    font-size: 13px; font-weight: 600; text-align: left; padding: var(--xs) var(--sm); cursor: pointer;
}
.lead-menu-item:hover, .menu-item:hover { background: var(--hover); }
.lead-menu-item.is-danger:hover, .menu-item.danger:hover { background: rgba(241,90,90,0.1); color: var(--danger); }

/* ---------- Avatar (PRM — avatars) — Primitives' exact .avatar/.size-* recipe.
   .avatar-tagged (a colored ring for lead-color tagging) is a genuine
   Command-only extension layered on top, not a competing redefinition. */
.avatar {
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--secondary); background: var(--primary); position: relative; flex-shrink: 0; overflow: hidden;
}
.avatar.size-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.size-md { width: 40px; height: 40px; font-size: 14px; }
.avatar.size-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.size-xl { width: 96px; height: 96px; font-size: 30px; }
.avatar.avatar-tagged { box-shadow: 0 0 0 2px var(--swatch-color); }
.avatar-photo { object-fit: cover; }
.avatar > .avatar-photo { width: 100%; height: 100%; }

/* ---------- category list (left panel) ---------- */
.folder-list { padding: 10px 8px; display: grid; gap: 6px; overflow-y: auto; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-left: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; }
.cat-row:hover { background: var(--hover); }
.cat-row.active { background: var(--secondary); color: var(--blue-bright); border-left-color: var(--pillar-color, var(--primary)); }
.count { color: var(--muted-dark); font-size: 11px; font-variant-numeric: tabular-nums; }
.empty-state { color: var(--text-tertiary); font-size: 12px; padding: 16px; }
.empty-state.small { padding: 8px 12px; }

/* ---------- card grid (wishlist) ---------- */
.program-card-list { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; align-content: start; align-items: start; }

/* ---------- modals ----------
   Same recipe as Surfaces' OVL-02 dialog: --surface (not --surface-raised —
   a dialog is a card, not a popover), --border, --r-lg, --shadow-lg. */
.modal {
    position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    background: rgba(6,6,7,.68); backdrop-filter: blur(3px); padding: 24px;
    animation: fade-in .16s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-card {
    width: min(100%, 520px); max-height: 88vh; overflow-y: auto;
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-lg);
    animation: rise-in .18s var(--ease);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 21px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 16.5px; }
.modal-form { display: grid; gap: 15px; padding: 21px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.modal-actions .status { margin-right: auto; }

/* Generic N-column field row / checkbox row, reused across most add/edit modals
   (task, lead, wishlist item, staff group...). */
.meal-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.meal-type-field { display: grid; gap: 8px; }
.meal-type-checks { display: flex; flex-wrap: wrap; gap: 12px; }
.meal-type-checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 400; }

.assignee-select { position: relative; }
.assignee-select-trigger {
    width: 100%; height: 38px; padding: 0 12px;
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-primary); font-size: 13px; text-align: left; cursor: pointer;
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.assignee-select-trigger:hover { border-color: var(--line-strong); }
.assignee-select.is-open .assignee-select-trigger { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.assignee-select-caret { color: var(--text-tertiary); font-size: 11px; transition: transform .16s var(--ease); }
.assignee-select.is-open .assignee-select-caret { transform: rotate(180deg); }
/* Positioned as a fixed-position "portal" (moved to a direct child of <body> in
   JS) rather than absolute inside .assignee-select — the modal card's
   overflow-y:auto would otherwise clip this panel wherever it overflows the
   modal card, regardless of z-index. Same --surface-raised/--r-md recipe as
   .menu-panel — it's a floating popover, not a card. */
.assignee-select-panel {
    position: fixed; z-index: 999;
    background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: 6px; max-height: 260px; overflow-y: auto;
}
.assignee-select-all-row {
    display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); cursor: pointer;
}
.assignee-select-list { display: grid; gap: 1px; }
.assignee-select-list label {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
    font-size: 12.5px; color: var(--text-secondary); font-weight: 400; cursor: pointer;
}
.assignee-select-list label:hover { background: var(--hover); }
.assignee-select-list label.is-disabled { opacity: .5; cursor: not-allowed; }
.assignee-select-all-row input, .assignee-select-list input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* Compose modal's recipient picker (Command/js/composeEmail.js) — same
   .assignee-select-list row/checkbox styling as the Tasks assignee picker
   above, but laid out inline in the modal's normal flow (scrollable box)
   instead of a fixed-position dropdown popover, since here the list IS the
   modal's main content rather than a secondary field. */
.compose-recipient-list {
    max-height: 220px; overflow-y: auto; border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 4px; margin-top: 4px;
}
.compose-recipient-row .meta { font-size: 11px; }
.compose-recipient-type-tag {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-tertiary); background: var(--hover); border-radius: 999px; padding: 2px 7px; margin-left: auto;
}

.gate-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.gate-card {
    width: min(100%, 380px); border: 1px solid var(--line-strong);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    background: var(--surface); padding: 24px; display: grid; gap: 6px;
}
.gate-card h2 { font-size: 17px; color: var(--text-primary); }
.gate-card .meta { color: var(--text-tertiary); font-size: 12px; margin-bottom: 8px; }

/* tasks */
.task-complete-check { width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; }
.task-overdue { color: var(--danger); font-weight: 700; }
.staff-group-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.staff-group-row span:first-child { flex: 1; font-weight: 600; }
.data-table tbody tr.is-complete td { opacity: .5; }
.data-table tbody tr.is-complete strong { text-decoration: line-through; }
.data-table td .task-complete-check { margin: 0; }


/* Forms/Emails card grid — same recipe as Workshop's .program-card: cut
   corner + colored left accent bar instead of a rounded card with a top bar. */
.wishlist-card {
    min-width: 0;
    padding: 18px; border: 1px solid var(--line-strong); border-left: 3px solid var(--card-accent, var(--primary));
    background: var(--surface);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    display: grid; gap: 9px; position: relative; overflow: hidden;
    transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.wishlist-card:hover { transform: translateY(-2px); border-color: var(--muted-dark); box-shadow: var(--shadow-md); }
/* min-height reserves the badge's own height whether or not it's present,
   so a non-automated card's header row doesn't sit shorter than one with
   the "Auto-sends" badge. */
.wishlist-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 28px; }
.wishlist-card-head h3 { font-size: 15px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Never let the category badge shrink — without this it was the title and
   badge splitting the available space evenly (flexbox's default), so a long
   title could squeeze the badge's un-ellipsized text past the card's own
   clip-path corner instead of the title (which already handles running out
   of room via the ellipsis above) giving up the space first. */
.wishlist-card-head .dyn-pill { flex: 0 0 auto; }
.wishlist-card-actions { display: flex; gap: 6px; }
.wishlist-card-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; }
/* Fixed 3-line box (clamped AND height-locked) — templates have wildly
   different body lengths; a shorter body still reserves the full 3 lines
   of space so it doesn't leave the card shorter than its neighbors. */
.form-card-link {
    margin: 0; font-size: 11px; line-height: 1.5; height: 4.5em;
    color: var(--muted-dark); font-family: monospace; word-break: break-all;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* (The Forms tab no longer uses the card grid — see ".forms-list" at the end
   of this file. The old #forms-grid column rules were removed with it.) */

/* Trigger row — small icon chip (bolt) + label, replacing the old raw
   "⚡ emoji + gray text" line with something that reads as a designed part
   of the card instead of a stray character. */
/* min-height reserves room for a 2-line trigger label whether or not the
   text actually wraps that far, so this row is the same height on every
   card (including the blank placeholder on non-automated templates). */
.auto-send-trigger { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-tertiary); min-height: 35px; }
.auto-send-trigger-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: var(--r-sm);
    background: rgba(245,166,35,.14); color: var(--warning);
}
.auto-send-trigger-icon svg { width: 11px; height: 11px; }
/* Non-automated templates still reserve this row's height (via
   visibility:hidden, not display:none) so every card in the grid stays the
   same height — leave the space blank instead of collapsing it. */
.auto-send-trigger.is-blank { visibility: hidden; }

/* vault — same cut-corner row recipe as the data-table rows */
.vault-entry-list { padding: 16px 22px; display: grid; gap: 7px; }
.vault-entry-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface);
    border: 1px solid var(--line-strong);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    transition: border-color .16s var(--ease);
}
.vault-entry-row:hover { border-color: var(--muted-dark); }
.vault-entry-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vault-entry-main strong { color: var(--text-primary); font-size: 13px; }
.vault-password { font-family: monospace; color: var(--primary); font-size: 13px; }

/* ---------- data table (TBL-01) — re-skinned to Workshop's row-list
   recipe: table/thead/tbody become block boxes and each <tr> becomes a CSS
   grid row, so it can carry the same cut-corner clip-path + hairline border
   as Workshop's .library-row instead of a boxed <table>. Column widths are
   defined per view below since each table has a different shape; th/td
   counts must stay in sync with those templates. Sort indicators
   (th[data-sort-field]) and row/cell semantics are untouched. */
.data-table-wrap { flex: 1; overflow: auto; padding: 16px 22px; }
.data-table { width: 100%; border-collapse: collapse; background: transparent; border: 0; border-radius: 0; font-size: 13px; display: block; }
.data-table thead, .data-table tbody, .data-table tfoot { display: block; width: 100%; }
.data-table thead tr, .data-table tbody tr, .data-table tfoot tr { display: grid; align-items: center; gap: 14px; }
.data-table thead tr { padding: 0 16px 8px; border-bottom: 1px solid var(--line-strong); margin-bottom: 8px; }
/* Cut-corner border/background live on ::before (not the <tr> itself) —
   clip-path on the row would clip any popover (.lead-contact-menu,
   .lead-menu) that opens below/beside it, since clip-path clips a box's
   whole subtree, not just overflow. This keeps the row visual without
   trapping its dropdowns. */
.data-table tbody tr {
    position: relative; z-index: 0;
    min-height: 52px; padding: 0 16px; margin-bottom: 7px;
}
.data-table tbody tr::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border: 1px solid var(--line-strong); background: var(--surface);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.data-table tbody tr:last-child { margin-bottom: 0; }
.data-table th { text-align: left; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-tertiary); background: none; white-space: nowrap; }
.data-table th[data-sort-field] { cursor: pointer; user-select: none; }
.data-table th[data-sort-field]:hover { color: var(--text-secondary); }
.data-table th[data-sort-field].is-sorted { color: var(--primary); }
.data-table th[data-sort-field].is-sorted::after { content: " ▾"; }
.data-table td { padding: var(--sm) 0; font-size: 13px; border-top: 0; color: var(--text-secondary); vertical-align: middle; min-width: 0; }
.data-table td strong { color: var(--text-primary); font-size: 13.5px; }
.data-table tbody tr.row-hover:hover::before { border-color: var(--muted-dark); background: var(--surface-raised); }
.data-table tbody tr[data-open-player] { cursor: pointer; }
.data-table tfoot tr { padding: 8px 16px; grid-template-columns: 1fr; }
.data-table tfoot td { padding: 0; color: var(--muted-dark); font-size: 11.5px; border-top: 0; }
.table-cell-user { display: flex; align-items: center; gap: var(--sm); min-width: 0; }
.table-cell-user .meta { font-size: 11.5px; color: var(--text-tertiary); }
.table-cell-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions-wrap { position: relative; text-align: right; }

/* Per-table column templates — thead/tbody share the same grid so header
   labels line up with the data cells beneath them. */
#tasks-view .data-table thead tr, #tasks-view .data-table tbody tr { grid-template-columns: 36px minmax(0,1fr) 110px 150px 100px 160px; }
#wishlist-view .data-table thead tr, #wishlist-view .data-table tbody tr { grid-template-columns: 36px minmax(0,1fr) 110px 90px 90px 160px; }
#leads-view .data-table thead tr, #leads-view .data-table tbody tr { grid-template-columns: minmax(150px,1fr) 110px minmax(160px,1fr) 100px 90px 110px 130px 190px; }
#players-view .data-table thead tr, #players-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) 110px 110px 110px minmax(0,1fr) 150px; }
#coaches-view .data-table thead tr, #coaches-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) 110px 200px 150px; }
#coach-detail-view .data-table thead tr, #coach-detail-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }

/* Leads table's Contact column — email/phone/source collapsed behind a
   dropdown (same .menu-panel recipe as the row's "more actions" menu) so the
   cell stays one line instead of wrapping across 2-3 lines per row. */
.lead-contact-wrap { position: relative; }
.lead-contact-btn {
    width: auto; max-width: 100%; padding: 4px 8px; gap: 6px;
    justify-content: space-between;
}
.lead-contact-btn .meta { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-contact-chevron { flex-shrink: 0; color: var(--text-tertiary); }
.lead-contact-btn[aria-expanded="true"] .lead-contact-chevron { transform: rotate(180deg); }
.lead-contact-menu { left: 0; right: auto; min-width: 220px; gap: 6px; padding: var(--sm); }
.lead-contact-row { display: flex; align-items: baseline; gap: var(--sm); font-size: 12.5px; color: var(--text-primary); }
.lead-contact-label { flex: 0 0 auto; width: 46px; color: var(--text-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }

/* player detail profile */
.athlete-detail-bar { gap: 20px; }
.athlete-detail-bar-actions { display: flex; align-items: center; gap: 10px; }

/* Hero header — visual only, matched to Pitch Lab's athlete-detail header
   (same card treatment, avatar, big name) since that's the look asked for.
   Every value here is read-only display; the same data is editable in the
   Overview tab below. Sits outside every .detail-tab-panel so it stays
   visible no matter which tab a coach is on. Pitch Lab's own tokens
   (--panel-soft/--field/--blue-deep/--blue-deep-bright/--muted-bright) map
   1:1 to Command's design-system names used here — confirmed identical hex
   values, just different names between the two apps' copies of tokens.css. */
.athlete-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    margin: 20px 22px 0; padding: 40px 36px;
    border: 1px solid var(--line-strong);
    background: radial-gradient(circle at 12% 0%, rgba(120,169,208,.18), transparent 55%), var(--surface-raised);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    box-shadow: var(--shadow-md);
}
.athlete-hero-main { display: flex; align-items: center; gap: 28px; min-width: 0; }
.athlete-hero-avatar {
    width: 108px; height: 108px; border-radius: 999px; flex: 0 0 auto; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, var(--secondary-hover), var(--secondary));
    box-shadow: inset 0 0 0 1.5px rgba(120,169,208,.35), var(--shadow-sm);
    color: var(--blue-bright); font-size: 34px; font-weight: 700;
}
.athlete-hero-avatar .avatar-photo { width: 100%; height: 100%; object-fit: cover; }
.athlete-hero-info { display: grid; gap: 10px; min-width: 0; }
.athlete-hero-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.athlete-hero-name { font-size: 42px; color: #fff; letter-spacing: .3px; line-height: 1; }
.athlete-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.athlete-hero-meta-item { font-size: 15px; font-weight: 700; color: var(--blue-bright); }
.athlete-hero-meta-sep { color: var(--text-tertiary); font-size: 13px; }
.athlete-hero-meta.is-empty { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.athlete-hero-email { font-size: 12.5px; color: var(--text-secondary); }
.athlete-hero-stats { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; align-self: center; }
.athlete-hero-stat { display: grid; gap: 4px; justify-items: end; text-align: right; }
.athlete-hero-stat + .athlete-hero-stat { padding-left: 22px; border-left: 1px solid var(--line-strong); }
.athlete-hero-stat-value { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #fff; }
.athlete-hero-stat-label { color: var(--muted-dark); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600; }

.player-photo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }

/* #player-detail-form wraps the hero/tabs/panel in a plain <form>, which
   isn't a flex container by default — without this, .detail-tab-panel's
   flex:1/overflow-y:auto below has no bounding height to scroll against,
   so long panels just get clipped by .center-panel's overflow:hidden. */
#player-detail-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.detail-tabs {
    display: flex; gap: 3px; padding: 3px; margin: 16px 22px 0;
    border-radius: 10px; background: var(--canvas); border: 1px solid var(--border); width: fit-content; flex: 0 0 auto;
}
.detail-tab {
    height: 30px; padding: 0 18px; border: 0; border-radius: 7px; background: transparent;
    color: var(--text-tertiary); font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.detail-tab:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,.03); }
.detail-tab.active { color: var(--blue-bright); background: rgba(123,169,208,.14); box-shadow: inset 0 0 0 1px var(--blue-bright); }
.detail-tab-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: grid; gap: 15px; align-content: start; max-width: 640px; }
#player-detail-overview-panel, #player-detail-waivers-panel { max-width: none; }

/* Waivers tab (js/playerDetail.js renderWaiversPanel) — read-only summary of
   the waiver signed at account creation (welcome.html), plus the actual
   signed PDF inline. */
.waiver-meta-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
    padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-raised);
}
.waiver-meta-row { display: grid; gap: 3px; }
.waiver-meta-row span { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-tertiary); }
.waiver-meta-row strong { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.waiver-meta-card .btn { margin-left: auto; }
.waiver-pdf-frame { width: 100%; height: 70vh; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #fff; }
/* Overview's field-pair rows only — with max-width:none above they'd
   otherwise stretch to two huge columns on wide screens; this lets them
   wrap into as many ~260px fields as fit instead. */
.detail-form-row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Program / Trackman tabs (playerDetail.js) */
.program-summary-card, .trackman-compare-card {
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); padding: 18px 20px; display: grid; gap: 16px;
}
.program-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.program-summary-head h3 { font-size: 16px; color: var(--text-primary); }
.program-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.program-stat { display: grid; gap: 3px; }
.program-stat-value { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.program-stat-label { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-tertiary); }

.trackman-compare-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.trackman-compare-date { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.trackman-compare-head .trackman-compare-arrow { color: var(--text-tertiary); }
.trackman-compare-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 10px; }
.trackman-compare-label { font-size: 12.5px; color: var(--text-secondary); }
.trackman-compare-value { font-family: var(--font-stat); font-size: 14px; color: var(--text-primary); min-width: 64px; text-align: right; }
.trackman-compare-arrow { color: var(--text-tertiary); font-size: 12px; }
.trackman-compare-delta { font-size: 12px; font-weight: 700; min-width: 56px; text-align: right; color: var(--text-tertiary); }
.trackman-compare-delta.is-up { color: var(--success); }
.trackman-compare-delta.is-down { color: var(--danger); }

/* home */
.home-scroll { overflow-y: auto; }
.home-top { padding: 24px 22px 4px; display: grid; gap: 20px; }
#home-header h2 { font-size: 26px; margin: 0 0 -14px; color: var(--primary); }

/* No card — just a wide baseline-aligned row that reads as a page-level
   masthead (day/date + live clock) instead of another boxed stat, with a
   thin rule to separate it from the content below. */
.home-datetime-bar {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--border);
}
.home-date { display: grid; gap: 4px; }
/* "Blueprint Stat" (Winner Sans) -> "Blueprint Wide" (Garp) — the design
   system dropped Winner Sans for stat numbers in favor of Garp at weight
   400, so stats and headers now come from one face instead of two. */
.home-date-weekday { font-family: var(--font-display), sans-serif; font-size: 52px; line-height: 1; color: var(--text-primary); text-transform: uppercase; letter-spacing: .5px; }
.home-date-full { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.home-time { font-family: var(--font-display), sans-serif; font-size: 52px; letter-spacing: 1px; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; }
.home-time .home-time-ampm { font-size: 14px; color: var(--text-tertiary); margin-left: 8px; font-family: var(--font-body), sans-serif; font-weight: 700; }

/* One unified metrics row (social + roster/lead/task snapshot cards) — flex
   instead of a uniform grid so the Total Athletes card (.is-wide, it carries
   a donut breakdown) can take roughly double width while the plain cards
   share the rest, instead of every card being forced to the same column. */
.home-social-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.home-social-card {
    position: relative; overflow: hidden; flex: 1 1 220px;
    display: grid; gap: 10px; padding: 18px 18px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--primary);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    transition: border-color .12s var(--ease);
}
/* Some cards (Open leads, Tasks due) are <button>s so they're jumpable, like
   the roster/lead/task cards this row absorbed — reset the button chrome
   back to plain card styling. */
button.home-social-card { cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; }
button.home-social-card:hover { border-color: var(--line-strong); }
.home-social-card.is-wide { flex: 2 1 380px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.home-social-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-social-icon-chip {
    width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.home-social-icon-chip.instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7 100%); }
.home-social-icon-chip.youtube { background: #ff0000; }
.home-social-icon-chip svg { width: 16px; height: 16px; fill: currentColor; }
.home-metric-icon-chip { width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.home-metric-icon-chip .btn-icon { width: 22px; height: 22px; margin: 0; background: var(--text-tertiary); }
.home-social-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-social-value { font-family: var(--font-stat); font-size: 26px; font-weight: 400; color: var(--text-primary); line-height: 1.1; }
.home-social-value.is-pending { color: var(--text-tertiary); font-size: 13px; font-weight: 500; }
.home-social-trend { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: -6px; }

.home-metric-main { display: grid; gap: 10px; min-width: 0; flex: 0 0 auto; }
.home-metric-caption { font-size: 12px; color: var(--text-tertiary); margin-top: -6px; }
.home-metric-breakdown { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.home-metric-donut { width: 64px; height: 64px; flex: 0 0 auto; }
.home-metric-legend { display: grid; gap: 6px; }
.home-metric-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.home-metric-legend-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.home-metric-legend-row .label { flex: 1; text-transform: capitalize; white-space: nowrap; }
.home-metric-legend-row .count { font-weight: 700; color: var(--text-primary); }

/* Fixed 3 columns (not auto-fill) — there are always exactly 3 panels here,
   and auto-fill would reserve empty phantom tracks on wide screens instead of
   letting these 3 stretch to fill the row. */
.home-grid { padding: 20px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) {
    .home-grid { grid-template-columns: 1fr; }
}
.home-panel { border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); background: var(--surface); padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.home-panel header { display: flex; align-items: center; justify-content: space-between; }
.home-panel h3 { display: flex; align-items: center; font-size: 13.5px; color: var(--text-primary); }
.home-panel h3 .btn-icon { color: var(--text-tertiary); }
.home-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px solid var(--border); }
.home-row:last-child { border-bottom: 0; }

.home-panel-list { display: grid; }
.home-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.home-list-row:last-child { border-bottom: 0; }
.home-event-body .meta, .home-program-body .meta, .home-task-body .meta {
    font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-panel-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-tertiary);
}
.home-panel-footer .link-btn { font-size: 12.5px; justify-self: auto; padding: 0; }

/* Upcoming Calls & Evals row */
.home-event-date {
    flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; gap: 1px;
    border: 1.5px solid var(--card-accent, var(--primary)); border-radius: var(--r-sm);
}
.home-event-month { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--card-accent, var(--primary)); }
.home-event-day { font-size: 16px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.home-event-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.home-event-body strong { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-event-name { flex: 0 0 auto; font-size: 12.5px; color: var(--text-secondary); }

/* Programs Ending Soon row */
.home-program-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.home-program-body strong { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-program-end { display: grid; gap: 2px; flex: 0 0 auto; text-align: right; }
.home-program-ends-in { font-size: 12.5px; font-weight: 600; color: var(--warning); }
.home-program-ends-in.is-ended { color: var(--danger); }
.home-program-chevron { flex: 0 0 auto; color: var(--text-tertiary); font-size: 16px; }

/* Tasks Due row */
.home-task-row { padding: 14px 0; gap: 14px; }
.home-task-check { flex: 0 0 auto; width: 22px; height: 22px; color: var(--text-tertiary); }
.home-task-check.is-urgent { color: var(--primary); }
.home-task-check svg { width: 100%; height: 100%; }
.home-task-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.home-task-body strong { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- calendar ---------- */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 0; }
.calendar-nav { display: flex; align-items: center; gap: 14px; }
.calendar-nav h3 { font-size: 16px; color: var(--text-primary); min-width: 170px; text-align: center; }
.calendar-wrap { flex: 1; overflow-y: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; }
.calendar-weekday-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.calendar-weekday { text-align: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; padding-bottom: 4px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(92px, 1fr); gap: 8px; flex: 1; }
.calendar-day {
    border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface);
    padding: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    text-align: left; color: var(--text-secondary); cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease);
}
.calendar-day:hover { border-color: var(--primary); background: var(--surface-raised); }
.calendar-day.is-outside { opacity: .4; }
.calendar-day.is-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px rgba(123,169,208,.3); }
.calendar-day-num { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.calendar-day.is-outside .calendar-day-num { color: var(--muted-dark); }
.calendar-day-events { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.calendar-event-chip {
    font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--event-accent) 22%, transparent); color: var(--event-accent);
}
.calendar-event-more { font-size: 10px; color: var(--muted-dark); }

.calendar-day-event-list { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; }
.calendar-day-event-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 9px; background: var(--surface); border-left: 3px solid var(--event-accent);
}
.calendar-day-event-time { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.calendar-day-event-body { display: grid; gap: 2px; min-width: 0; }
.calendar-day-event-body strong { color: var(--text-primary); font-size: 13px; }
.calendar-day-event-body .meta { font-size: 11px; color: var(--text-tertiary); }

.availability-list { display: grid; gap: 4px; max-height: 55vh; overflow-y: auto; }
.availability-day { padding: 10px 4px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.availability-day:last-child { border-bottom: 0; }
.availability-day-head { display: flex; align-items: center; justify-content: space-between; }
.availability-day-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.availability-day-empty { margin: 0; font-size: 11.5px; color: var(--muted-dark); font-style: italic; }
.availability-day-rules { display: grid; gap: 6px; }
.availability-rule-chip {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
    padding: 7px 12px; border-radius: 8px; background: var(--surface); border-left: 3px solid var(--event-accent); font-size: 12.5px; color: var(--text-secondary);
}
.availability-day-add-form { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: var(--surface-raised); }

/* ---------- external app frame (Eval, and future apps embedded via the
   dashboard switcher) — see js/appShell.js ---------- */
.app-frame { flex: 1; width: 100%; height: 100%; border: 0; background: var(--canvas); }

/* Phone sizing for the light public forms — the display face is wide by
   design, so the untouched 28px h1 wraps to three lines and pushes the
   first field below the fold on a 375px screen. Scoped to .intake-light
   only; the dark forms keep their existing sizing. */
@media (max-width: 520px) {
    .intake-light .intake-card { padding: 28px 20px; }
    .intake-light .intake-heading h1 { font-size: 21px; }
    .intake-light .intake-heading p { font-size: 13.5px; }
}


/* =====================================================================
   DASHBOARD LIGHT THEME (command.blueprintath) — index.html only, via
   <body class="dash-light">. Same technique as .intake-light above: a token
   remap, not a second set of component rules, so every table, card, modal
   and form control already painting from these variables is re-skinned at
   once. Palette is Finance's (Finance/styles.css), shared with
   eval/pitchlab.blueprintath so the split-off dashboards read as one
   product: light working area, dark sidebar + topbar as the frame.

   The remap sits on <body> so menus and modals portalled to the body pick it
   up too; the sidebar and topbar then restate the dark values for
   themselves. Public form pages don't carry .dash-light and are untouched.
   ===================================================================== */
body.dash-light {
    /* Finance names, used by the sign-in block and the rules below. */
    --navy: #13294C;
    --navy-2: #1D3A66;
    --blue: #2F6FB0;
    --blue-wash: #EDF3FA;
    --ink: #0F1620;
    --ink-2: #3C4754;
    --ink-3: #68727F;
    --ink-4: #98A1AC;
    --line: #E4E8ED;
    --sunk: #F9FAFC;
    --red: #B23A2B;
    --r-sm: 6px;

    --canvas: #F6F8FA;
    --surface: #FFFFFF;
    --surface-raised: #F9FAFC;
    --border: #E4E8ED;
    --line-strong: #CDD5DE;
    --grid-line: #E4E8ED;
    --text-primary: #0F1620;
    --text-secondary: #3C4754;
    --text-tertiary: #68727F;
    --muted-dark: #98A1AC;
    /* Roles swap exactly as in .intake-light: navy carries fills, white sits on it. */
    --primary: #13294C;
    --primary-hover: #1D3A66;
    --secondary: #FFFFFF;
    --secondary-hover: #F9FAFC;
    --blue-bright: #2F6FB0;
    /* Status colours darkened to hold as text on white (Finance's set). */
    --success: #157F4F;
    --warning: #94620B;
    --danger: #B23A2B;
    --hover: rgba(19, 41, 76, .04);
    --shadow-sm: 0 1px 2px rgba(15, 22, 32, .05);
    --shadow-md: 0 4px 14px rgba(15, 22, 32, .09);
    --shadow-lg: 0 24px 64px rgba(15, 22, 32, .18);
    --shadow-focus: 0 0 0 3px rgba(47, 111, 176, .13);
    background: var(--canvas);
    color: var(--text-primary);
}

/* The frame stays dark: restate the original dark tokens for the sidebar and
   topbar (and anything inside them — switcher menu, account dropdown). */
.dash-light .app-sidebar,
.dash-light .app-header,
.dash-light .sidebar-collapse-btn {
    --canvas: #1C1C1C;
    --surface: #232323;
    --surface-raised: #262626;
    --border: #333333;
    --line-strong: #333333;
    --text-primary: #F5F6F7;
    --text-secondary: #ABADB2;
    --text-tertiary: #6C6E73;
    --muted-dark: #4A4A4A;
    --primary: #78ACD2;
    --primary-hover: #91BEDD;
    --secondary: #13294C;
    --blue-bright: #91BEDD;
    --hover: rgba(255, 255, 255, .035);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .28);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .36);
    color: var(--text-primary);
}
.dash-light .coach-app { background-image: none; }
.dash-light .app-header { height: 64px; background: #232323; backdrop-filter: none; padding: 0 24px; }
.dash-light .app-header-title { margin-left: 0; }
a.dashboard-switcher-item { text-decoration: none; }
a.dashboard-switcher-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* ---- tags (ui.js pill()) ---- */
/* Default keeps the original look for any page still on the dark theme. */
.dyn-pill { background: color-mix(in srgb, var(--pill, #6C6E73) 13%, transparent); color: var(--pill, #6C6E73); }
/* On white the caller's pastel becomes a light wash + hairline, and the text
   is the same hue pulled most of the way to ink so it reads. */
.dash-light .dyn-pill {
    background: color-mix(in srgb, var(--pill, #68727F) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--pill, #68727F) 32%, #fff);
    color: color-mix(in srgb, var(--pill, #68727F) 52%, #0F1620);
    padding-top: 4px; padding-bottom: 4px;
}

/* ---- rounded, not chamfered ----
   The cut top-right corner is the old dark theme's motif. Zeroing the cut
   turns every clip-path polygon into a plain rectangle, and a radius does the
   rest — Finance's 10px panels. */
body.dash-light { --card-cut: 0px; --card-cut-sm: 0px; --card-cut-hero: 0px; }
.dash-light .modal-card,
.dash-light .gate-card,
.dash-light .wishlist-card,
.dash-light .home-panel,
.dash-light .home-social-card,
.dash-light .athlete-hero { clip-path: none; border-radius: 10px; }
.dash-light .vault-entry-row,
.dash-light .data-table tbody tr::before { clip-path: none; border-radius: 8px; }
.dash-light .modal-card { overflow-x: hidden; }

/* ---- frame ---- */
.dash-light .app-sidebar { background: #232323; }

/* ---- player / coach profile banner: navy, like Eval's and Pitch Lab's ---- */
.dash-light .athlete-hero {
    border: 0; background: var(--navy); box-shadow: none; color: #fff;
    padding: 30px 32px; align-items: center;
}
.dash-light .athlete-hero-avatar {
    border-radius: 12px; background: var(--navy-2); color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.dash-light .athlete-hero-name { color: #fff; text-transform: uppercase; }
.dash-light .athlete-hero-meta-item { color: #fff; }
.dash-light .athlete-hero-meta-sep { color: rgba(255, 255, 255, .35); }
.dash-light .athlete-hero-meta.is-empty,
.dash-light .athlete-hero-email { color: rgba(255, 255, 255, .62); }
.dash-light .athlete-hero-stat + .athlete-hero-stat { border-left-color: rgba(255, 255, 255, .14); }
.dash-light .athlete-hero-stat-value { color: #fff; }
.dash-light .athlete-hero-stat-label { color: rgba(255, 255, 255, .5); }
/* Tags sitting on the navy banner keep their light-on-dark treatment. */
.dash-light .athlete-hero .dyn-pill {
    background: color-mix(in srgb, var(--pill, #fff) 22%, transparent);
    border-color: color-mix(in srgb, var(--pill, #fff) 45%, transparent);
    color: color-mix(in srgb, var(--pill, #fff) 55%, #fff);
}

/* Buttons that are links ("Open" on a form card) shouldn't pick up underlines. */
.dash-light a.btn { text-decoration: none; }

/* Sign-in button: Finance's uppercase display face, not Command's plain .btn text. */
.dash-light .login-submit { justify-content: center; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Forms tab: one row per form ---------- */
.forms-list { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: grid; gap: 10px; align-content: start; }
.form-row {
    display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(240px, 1fr) auto; align-items: center; gap: 20px;
    padding: 14px 18px; background: var(--surface);
    border: 1px solid var(--border); border-left: 3px solid var(--card-accent, var(--primary)); border-radius: 10px;
    box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-row:hover { border-color: var(--line-strong); border-left-color: var(--card-accent, var(--primary)); box-shadow: var(--shadow-md); }
.form-row-main { min-width: 0; display: grid; gap: 4px; }
.form-row-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.form-row-title h3 { font-size: 14.5px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-row-title .dyn-pill { flex: 0 0 auto; }
.form-row-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); }

/* The link is a button: clicking it copies, same as the Copy button. */
.form-row-link {
    min-width: 0; height: 36px; padding: 0 12px; text-align: left; cursor: copy;
    display: flex; align-items: center;
    background: var(--surface-raised); border: 1px solid var(--border); border-radius: 7px;
    color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
    transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.form-row-link:hover { border-color: var(--blue-bright); color: var(--text-primary); }
.form-row-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-row-actions { display: grid; grid-template-columns: 104px 78px 78px; gap: 8px; }
.form-row-actions .btn { justify-content: center; white-space: nowrap; }
.form-row-action-spacer { display: block; }
.form-row.is-copied .form-row-link { border-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); color: var(--success); }
.form-row.is-copied .form-row-copy { background: var(--success); border-color: var(--success); color: #fff; }

.forms-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.forms-filter-chip {
    height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-tertiary); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: all .15s var(--ease);
}
.forms-filter-chip span { font-weight: 600; opacity: .65; font-variant-numeric: tabular-nums; }
.forms-filter-chip:hover { border-color: var(--line-strong); color: var(--text-primary); }
.forms-filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--secondary); }

@media (max-width: 1500px) {
    /* Not enough width for three columns: the link drops under the description. */
    .form-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
    .form-row-link { grid-column: 1; grid-row: 2; }
    .form-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---------- Emails tab: the same row list as Forms (.forms-list / .form-row) ---------- */
.email-row { --card-accent: var(--line-strong); grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.4fr) auto; }
.email-row.is-auto { --card-accent: var(--success); }
.email-row .form-row-main { gap: 5px; }
.email-row-label {
    margin-right: 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark);
}
.email-row .form-row-desc { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-row .auto-send-trigger { min-height: 0; margin: 0; }
.email-row-preview {
    margin: 0; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.email-row .form-row-actions { grid-template-columns: 78px 78px; }
.section-bar .row-actions .forms-filter { margin-right: 6px; }
@media (max-width: 1500px) {
    .email-row { grid-template-columns: minmax(0, 1fr) auto; }
    .email-row-preview { grid-column: 1; grid-row: 2; }
}

/* ---------- Leads board (js/leadBoard.js) ---------- */
.seg-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.seg-switch button {
    height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: none; cursor: pointer;
    color: var(--text-tertiary); font: 600 12px/1 var(--font-body); white-space: nowrap;
}
.seg-switch button:hover:not(.is-active) { color: var(--text-primary); background: var(--canvas); }
.seg-switch button.is-active { color: var(--secondary); background: var(--primary); }

/* grid-auto-rows: max-content — the board row has its own horizontal scroll,
   which would otherwise let the grid shrink it to fit and cut tall columns off. */
.lead-board-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 28px; display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; }

/* Needs action */
.lead-needs { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
.lead-needs-head { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.lead-needs-head strong { font-family: var(--font-display); font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--text-primary); }
.lead-needs-head span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }
.lead-needs ul { margin: 0; padding: 0; list-style: none; max-height: 232px; overflow-y: auto; }
.lead-needs-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.lead-needs-item:last-child { border-bottom: 0; }
.lead-needs-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--warning); }
.lead-needs-dot.is-outcome, .lead-needs-dot.is-confirm { background: var(--danger); }
.lead-needs-dot.is-booking { background: var(--text-tertiary); }
.lead-needs-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lead-needs-text strong { font-size: 13.5px; color: var(--text-primary); }
.lead-needs-text span { font-size: 12.5px; color: var(--text-tertiary); }
.lead-needs-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.lead-needs.is-clear { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.lead-needs.is-clear strong { font-size: 13px; color: var(--success); }
.lead-needs.is-clear span { font-size: 12.5px; color: var(--text-tertiary); }

/* Columns */
.lead-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.lead-col { min-width: 0; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; }
.lead-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.lead-col-head h3 { font-size: 12px; text-transform: uppercase; color: var(--text-primary); }
.lead-col-head p { margin: 3px 0 0; font-size: 11px; color: var(--muted-dark); }
.lead-col-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lead-col-body { display: grid; gap: 8px; padding: 10px; align-content: start; min-height: 64px; }
.lead-col-empty { margin: 0; padding: 12px 4px; text-align: center; font-size: 12px; color: var(--muted-dark); }
.lead-col[data-stage="booked"] .lead-col-head, .lead-col[data-stage="confirmed"] .lead-col-head { box-shadow: inset 0 2px 0 var(--blue-bright); border-radius: 10px 10px 0 0; }
.lead-col[data-stage="completed"] .lead-col-head, .lead-col[data-stage="account"] .lead-col-head { box-shadow: inset 0 2px 0 var(--success); border-radius: 10px 10px 0 0; }

/* Cards */
.lead-card { display: grid; gap: 7px; padding: 11px 12px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.lead-card:hover { border-color: var(--line-strong); }
.lead-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lead-card-id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lead-card-id strong { font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card-id span { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card-when { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.lead-card-meta { margin: 0; font-size: 11.5px; color: var(--muted-dark); }
.lead-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lead-card-actions .btn, .lead-needs-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; gap: 6px; white-space: nowrap; text-decoration: none; }
.lead-card-actions .btn { flex: 1 1 auto; justify-content: center; }
.lead-text-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }

.lead-card-menu { position: relative; flex: 0 0 auto; }
.lead-card-menu summary { list-style: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--text-tertiary); font-size: 16px; line-height: 1; }
.lead-card-menu summary::-webkit-details-marker { display: none; }
.lead-card-menu summary:hover, .lead-card-menu[open] summary { background: var(--canvas); color: var(--text-primary); }
.lead-card-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 150px; padding: 4px; display: grid; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-md); }
.lead-card-menu-list button { padding: 8px 10px; border: 0; border-radius: 5px; background: none; text-align: left; cursor: pointer; color: var(--text-secondary); font-size: 12.5px; }
.lead-card-menu-list button:hover { background: var(--canvas); color: var(--text-primary); }

/* Parked + Paid, folded under the board */
.lead-fold { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.lead-fold summary { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; list-style: none; }
.lead-fold summary::-webkit-details-marker { display: none; }
.lead-fold summary::before { content: "›"; color: var(--text-tertiary); transition: transform .15s var(--ease); }
.lead-fold[open] summary::before { transform: rotate(90deg); }
.lead-fold summary strong { font-family: var(--font-display); font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--text-primary); }
.lead-fold summary span { font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.lead-fold summary em { font-style: normal; font-size: 12px; color: var(--muted-dark); margin-left: auto; }
.lead-fold-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 4px 12px 12px; }

/* ---------- Emails tab: funnel draft offer ---------- */
.emails-drafts:empty { display: none; }
.emails-drafts { flex: 0 0 auto; padding: 18px 22px 0; }
.drafts-panel { padding: 14px 18px; background: color-mix(in srgb, var(--blue-bright) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue-bright) 30%, var(--border)); border-radius: 10px; display: grid; gap: 8px; }
.drafts-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.drafts-panel-head strong { font-family: var(--font-display); font-size: 12.5px; font-weight: 400; text-transform: uppercase; color: var(--text-primary); }
.drafts-panel-head p { margin: 4px 0 0; max-width: 760px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.drafts-panel-head .btn { flex: 0 0 auto; white-space: nowrap; }
.drafts-panel-list summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--blue-bright); }
.drafts-panel-list ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; max-height: 260px; overflow-y: auto; background: var(--border); border: 1px solid var(--border); border-radius: 8px; }
.drafts-panel-list li { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(220px, 1fr) minmax(220px, 1fr); gap: 14px; align-items: baseline; padding: 8px 12px; background: var(--surface); font-size: 12.5px; }
.drafts-panel-list li strong { color: var(--text-primary); font-weight: 700; }
.drafts-panel-list li span { color: var(--text-tertiary); }
.drafts-panel-list li em { font-style: normal; color: var(--text-secondary); }
.drafts-panel .status:empty { display: none; }
#emails-view .forms-list { padding-top: 14px; }