/* SBR — Trainer console styles (design tokens from SBR Design Guidelines) */
:root{
  /* --brand, --brand-press, --brand-deep, --brand-tint live in brand.css (loaded first) */
  --ink-900:#0E1726; --ink-700:#33415A; --ink-500:#64748B; --ink-300:#CBD5E1; --ink-100:#E9EEF4;
  --surface:#FFFFFF; --surface-muted:#F5F8FB;
  --success:#1F9D6B; --warning:#E8902B; --danger:#E5484D;
  /* newly-scheduled (assigned, not started) — light yellow, distinct from the brand green */
  --new-tint:#FFF8E1; --new-ink:#8A6100; --new-line:#F2D98A;
  /* schedule activity tints — one source of truth, so the legend can't drift from the cells */
  --done-tint:rgba(31,157,107,.13); --partial-tint:rgba(232,144,43,.16); --missed-tint:rgba(229,72,77,.14);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --shadow-card:0 8px 24px -12px rgba(15,23,42,.18);
  --shadow-brand:0 14px 32px -14px rgba(20,140,210,.45);
  --shadow-pop:0 24px 60px -20px rgba(15,23,42,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink-900);background:var(--surface-muted);font-weight:500;-webkit-font-smoothing:antialiased;line-height:1.55}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:15px}
h1,h2,h3,h4{margin:0;letter-spacing:-0.02em}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-500)}
.hide{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:999px;border:2px solid transparent;background-clip:content-box}

/* layout */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--ink-100);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.logo{display:flex;align-items:center;gap:10px;padding:6px 10px 18px}
/* The brand mark, wherever MARK renders it. An inline <svg> with a viewBox scaled itself to
   whatever box it was dropped in; a raster <img> does not, and without this it paints at its
   natural 256px — which is exactly what the auth card's `<span style="width:30px">` did.
   The specific rules below (.logo img, .auth-hero .mark img, .plan-gate-brand img) are more
   specific and still win where they apply. */
.bv-mark{width:100%;height:auto;display:block}
.logo svg,.logo img{width:30px;height:auto;flex:none}
.logo .w{font-weight:800;letter-spacing:-0.03em;font-size:21px;color:var(--brand)}
.navlink{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);font-weight:600;font-size:15px;color:var(--ink-700);transition:background .12s}
.navlink:hover{background:var(--surface-muted)}
.navlink.active{background:var(--brand-tint);color:var(--brand-deep)}
.navlink svg{width:21px;height:21px;color:var(--ink-500);flex:none}
.navlink.active svg{color:var(--brand)}
.nav-section{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);padding:14px 12px 6px}
.sidebar .spacer{flex:1}
.side-foot{padding:10px;border-top:1px solid var(--ink-100);font-size:12px;color:var(--ink-500)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--ink-100);background:rgba(255,255,255,.86);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.topbar h1{font-size:21px;font-weight:800}
.topbar .grow{flex:1}
.hamburger{display:none}
.page{padding:24px;max-width:1180px;width:100%;margin:0 auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;border-radius:var(--r-md);padding:10px 16px;transition:transform .08s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-press)}
.btn-secondary{background:var(--surface);color:var(--ink-900);border:1px solid var(--ink-100)}
.btn-secondary:hover{border-color:var(--ink-300)}
.btn-ghost{background:transparent;color:var(--ink-700)}.btn-ghost:hover{background:var(--surface-muted)}
.btn-danger{background:rgba(229,72,77,.1);color:var(--danger)}.btn-danger:hover{background:rgba(229,72,77,.18)}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.icon-btn{width:38px;height:38px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-700)}
.icon-btn:hover{background:var(--surface-muted)}
.icon-btn svg,.btn svg{width:18px;height:18px}
.icon-btn.recording{color:#fff;background:var(--danger);animation:mic-pulse 1.1s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}

/* chips, dots */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-muted);color:var(--ink-700)}
.chip.brand{background:var(--brand-tint);color:var(--brand-deep)}
.chip.success{background:rgba(31,157,107,.12);color:var(--success)}
.chip.warning{background:rgba(232,144,43,.14);color:#b96d12}
.chip.danger{background:rgba(229,72,77,.12);color:var(--danger)}
.chip.muted{background:var(--surface-muted);color:var(--ink-500)}
/* Icons inside a chip. Global, matching how .btn svg and .card-h svg are already handled:
   without it an inline icon renders at its intrinsic size and blows the pill open into a
   three-line block. Was already affecting the Video chip on Tasks and the missed-workout
   badge on the athlete list, not just the plan status chip that exposed it. */
.chip svg{width:13px;height:13px;flex:none}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.connected{background:var(--success)}.dot.pending{background:var(--warning)}.dot.offline{background:var(--ink-300)}.dot.needs_programming{background:var(--brand)}.dot.archived{background:var(--ink-300)}

/* avatar */
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.avatar.lg{width:60px;height:60px;font-size:22px}
.avatar.sm{width:30px;height:30px;font-size:12px}

/* cards */
.card{background:var(--surface);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.card-pad{padding:20px}
.grid{display:grid;gap:16px}

/* tabs (status filter / profile tabs) */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{padding:8px 14px;border-radius:var(--r-pill);font-weight:700;font-size:13.5px;color:var(--ink-500);background:var(--surface);border:1px solid var(--ink-100)}
.tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.subtabs{display:flex;gap:20px;border-bottom:1px solid var(--ink-100);margin-bottom:20px}
.subtabs button{padding:12px 2px;font-weight:700;font-size:15px;color:var(--ink-500);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.subtabs button.active{color:var(--brand);border-color:var(--brand)}

/* search */
.search{display:flex;align-items:center;gap:9px;background:var(--surface-muted);border:1px solid var(--ink-100);border-radius:var(--r-md);padding:9px 13px;color:var(--ink-500);flex:1;max-width:360px}
.search input{border:none;background:none;outline:none;flex:1;font-size:14.5px;color:var(--ink-900)}
.search svg{width:18px;height:18px;color:var(--ink-500);flex:none}
.row .thumb{border-radius:10px;overflow:hidden;flex:none;background:var(--surface-muted);border:1px solid var(--ink-100)}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.macro-row{display:flex;gap:8px;flex-wrap:wrap}
.macro-row .m{flex:1;min-width:70px}
.q-item{border:1px solid var(--ink-100);border-radius:var(--r-md);padding:12px;margin-bottom:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.statc{border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:18px;background:var(--surface)}
.statc .v{font-size:28px;font-weight:800;letter-spacing:-0.02em}
.statc .l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);margin-top:4px}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);padding:0 14px 12px}
.tbl td{padding:13px 14px;border-top:1px solid var(--ink-100);font-size:14.5px;vertical-align:middle}
.tbl tr.click{cursor:pointer;transition:background .1s}
.tbl tr.click:hover td{background:var(--surface-muted)}
.who{display:flex;align-items:center;gap:12px}
.bar{height:7px;border-radius:999px;background:var(--ink-100);overflow:hidden;min-width:74px}.bar>i{display:block;height:100%;border-radius:999px;background:var(--brand)}

/* list rows (mobile-friendly) */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--ink-100);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.row:hover{border-color:var(--brand);box-shadow:0 6px 18px -10px rgba(20,140,210,.4)}
.row .tt{font-weight:700;font-size:15px}
.row .sub{font-size:12.5px;color:var(--ink-500)}
.row .grow{flex:1;min-width:0}

/* profile header */
.profhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.kv{display:flex;gap:8px;font-size:14px;margin:5px 0}.kv .k{color:var(--ink-500);min-width:96px}

/* metric mini */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.metric{border:1px solid var(--ink-100);border-radius:var(--r-md);padding:13px}
.metric .v{font-size:22px;font-weight:800}.metric .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);margin-top:2px}

/* calendar */
.weeknav{display:flex;align-items:center;gap:6px}
.weeknav-label{font-weight:800;font-size:14.5px;min-width:120px;text-align:center}
/* align-items:start → each day is only as tall as its content. Without it, grid stretches
   every cell to the tallest in the row, leaving dead space under short days. */
/* minmax(0,1fr), not 1fr: a plain 1fr column can't shrink below its longest word, so long
   exercise names would push the week wider than the screen instead of ellipsing. */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:start}
.cal .day{border:1px solid var(--ink-100);border-radius:var(--r-md);min-height:64px;padding:7px;background:var(--surface);position:relative}
.cal .day.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cal .dn{font-size:10.5px;font-weight:800;color:var(--ink-500);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:2px}
.cal .add{width:22px;height:22px;border-radius:50%;background:var(--surface-muted);color:var(--ink-500);display:flex;align-items:center;justify-content:center}
.cal .add:hover{background:var(--brand-tint);color:var(--brand)}
.ev{font-size:11px;font-weight:700;padding:5px 6px;border-radius:var(--r-sm);margin-bottom:5px;line-height:1.25;background:var(--brand-tint);color:var(--brand-deep);position:relative}
.ev.done{background:var(--done-tint);color:var(--success)}
.ev.partial{background:var(--partial-tint);color:var(--warning)}
.ev.missed{background:var(--missed-tint);color:var(--danger)}
.ev.new{background:var(--new-tint);color:var(--new-ink);box-shadow:inset 0 0 0 1px var(--new-line)}
/* what the colours mean — swatches reuse the same tints as the cells above */
.sched-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-2px 0 12px}
.sched-legend .lg{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-500)}
.sched-legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.sched-legend .sw.done{background:var(--done-tint);box-shadow:inset 0 0 0 1px var(--success)}
.sched-legend .sw.new{background:var(--new-tint);box-shadow:inset 0 0 0 1px var(--new-line)}
.sched-legend .sw.partial{background:var(--partial-tint);box-shadow:inset 0 0 0 1px var(--warning)}
.sched-legend .sw.missed{background:var(--missed-tint);box-shadow:inset 0 0 0 1px var(--danger)}
.sched-legend .sw.today{background:transparent;box-shadow:inset 0 0 0 1.5px var(--brand)}
.ev .t{font-size:10px;font-weight:700;opacity:.8;display:block}
.ev[draggable=true]{cursor:grab} .ev[draggable=true]:active{cursor:grabbing}
/* activity header: title (opens the menu) + a delete icon */
.ev-hd{display:flex;align-items:flex-start;gap:4px}
.ev-t{flex:1;min-width:0;cursor:pointer;overflow-wrap:anywhere}
.ev-x{flex:none;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:transparent;color:inherit;opacity:.55}
.ev-x svg{width:13px;height:13px}
.ev-x:hover{opacity:1;background:rgba(229,72,77,.16);color:var(--danger)}
/* the day's exercises, listed under each activity — text only, so a full week fits across */
.ev-exs{margin-top:5px;display:flex;flex-direction:column;gap:1px}
.ev-ex{display:flex;align-items:baseline;gap:5px;cursor:pointer;border-radius:5px;padding:2px 3px}
.ev-ex:hover{background:rgba(255,255,255,.85)}
.ev-ex-n{flex:1;min-width:0;font-size:10.5px;font-weight:600;color:var(--ink-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-ex-s{flex:none;font-size:9.5px;font-weight:700;color:var(--ink-500)}
/* day header: collapse chevron + count + add */
.cal .dn .grow{flex:1;min-width:0}
.daytog{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink-500);border-radius:4px}
.daytog:hover{background:var(--surface-muted);color:var(--ink-900)}
.daytog svg{width:13px;height:13px;transition:transform .12s}
.rot90{transform:rotate(90deg)}
.daycount{font-size:10px;font-weight:800;color:var(--ink-500);background:var(--surface-muted);border-radius:999px;padding:1px 6px;margin-right:2px}
/* drop target — deliberately not the brand ring, which already marks "today" */
.cal .day{transition:border-color .12s,background .12s}
.cal .day.drop-hot{border-color:var(--new-line);background:var(--new-tint);box-shadow:inset 0 0 0 1px var(--new-line)}
.sched-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.sched-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sched-right .btn svg{width:14px;height:14px}
/* "Move to another day" — date field + button side by side in the activity menu */
.row-move{display:flex;gap:8px;align-items:center}
.row-move input[type=date]{flex:1;padding:11px 12px;border:1.5px solid var(--ink-100);border-radius:10px;font-weight:700;font-size:15px;background:var(--surface);font-family:var(--font)}
.row-move .btn{flex:none}
.cal+.cal{margin-top:8px}
@media (max-width:760px){ .cal{grid-template-columns:1fr} .cal .day{min-height:auto} }

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(14,23,38,.5);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto}
.modal{background:#fff;border-radius:var(--r-xl);max-width:560px;width:100%;box-shadow:var(--shadow-pop);overflow:hidden;animation:pop .2s ease;margin:auto}
@keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:scale(1);opacity:1}}
.modal-head{padding:20px 22px;border-bottom:1px solid var(--ink-100);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:19px;font-weight:800}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--ink-100);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-700);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--ink-100);border-radius:var(--r-sm);outline:none;color:var(--ink-900);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,140,210,.13)}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-deep)}
.tag button{color:var(--brand-deep);display:flex}
.imgthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.imgthumbs .t{width:74px;height:74px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--ink-100);position:relative;background:var(--surface-muted)}
.imgthumbs .t img{width:100%;height:100%;object-fit:cover;display:block}
.imgthumbs .t button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(14,23,38,.6);color:#fff;display:flex;align-items:center;justify-content:center}

/* video embed */
.video-embed{aspect-ratio:16/9;width:100%;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ink-100);background:#000}
.video-embed iframe{width:100%;height:100%;border:0}

/* exercise/workout detail */
.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr} }
.instr{white-space:pre-wrap;line-height:1.6;font-size:15px}
ol.instr-list{margin:0;padding-left:24px;line-height:1.5;font-size:15px}
ol.instr-list li{margin-bottom:8px;padding-left:4px}
ol.instr-list li::marker{color:var(--brand);font-weight:800}
.istep-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.istep-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.istep-row .istep-in{flex:1;min-width:0;width:auto}
.istep-del{flex:none}
.checklist{display:flex;flex-direction:column;gap:0}
.setline{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--ink-100);font-size:14px}
.setline .sx{font-weight:800;color:var(--ink-500);width:30px}

/* empty */
.empty{text-align:center;padding:54px 20px;color:var(--ink-500)}
.empty .ic{width:60px;height:60px;border-radius:17px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.empty .ic svg{width:30px;height:30px}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--ink-900);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-weight:700;font-size:14px;box-shadow:var(--shadow-pop);z-index:120;display:flex;gap:9px;align-items:center;animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* scrim for mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(14,23,38,.4);z-index:39}

/* responsive: collapse sidebar to drawer */
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:40;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-pop)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:inline-flex}
  .page{padding:16px}
  .detail-grid{grid-template-columns:1fr}
  .desk-only{display:none!important}
}
@media (min-width:901px){ .scrim{display:none!important} }

/* ============================ AUTH PAGES ============================ */
/* ===========================================================================
   THE SIGNED-OUT SHELL: a blue bar across the top with the mark at its left,
   the card centred under it, the site footer as a band at the bottom.
   (owner, 2026-09-11)

   This replaced a SPLIT layout -- a full-height blue panel down the left half
   with a giant 76px mark in it, the form in the right half. .auth-hero is the
   same element, restyled from a half-page panel into a 68px bar; keeping the
   element means authShell() did not have to change, so the register, forgot and
   check-your-inbox screens all followed automatically.

   Three rows: bar (auto), card (1fr, so it takes the leftover height and the
   card centres in whatever is actually left), footer (auto). One column, so
   everything spans the full width.

   The bar's inner is capped at the same 1180px as the footer's and centred with
   it, so the mark and the word "Product" below it sit on the same left edge.
   Flush to the viewport edge would put them out of line on a wide monitor,
   which reads as two unrelated pieces of furniture rather than one page.
   =========================================================================== */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto}
.auth-hero{background:linear-gradient(100deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;display:flex;align-items:center;padding:0 28px;min-height:68px;
  position:relative;overflow:hidden}
/* padding:0 is load-bearing: the shared .logo rule carries `padding:6px 10px
   18px` for the signed-in sidebar, which made this bar 64px tall no matter what
   min-height said -- 6 + a 40px mark + 18. The bar looked a size it had not been
   asked to be, and every height budget below it was out by 12px. */
.auth-hero .logo{gap:11px;width:100%;max-width:1180px;margin:0 auto;padding:0;
  display:flex;align-items:center}
.auth-hero .mark{display:flex;align-items:center;background:#fff;border-radius:10px;
  padding:5px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);flex:none}
.auth-hero .mark svg,.auth-hero .mark img{width:30px;height:30px}
.auth-hero .logo .w{color:#fff;font-size:23px}
/* A 260px circle was decoration for a half-page panel. In a 68px bar it is a
   pale stripe across the middle of it. */
.auth-hero .deco{display:none}
.auth-pane{display:flex;align-items:center;justify-content:center;padding:40px 22px;background:var(--surface-muted);overflow-y:auto}
.auth-card{width:100%;max-width:468px;background:var(--surface);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:30px 32px}
.auth-card .brandrow{display:none;align-items:center;gap:10px;margin-bottom:20px}

/* ---- signed-out footer --------------------------------------------------- *
 * A BAND ACROSS THE WHOLE PAGE, not a block under the card. .auth-wrap is the
 * two-column page grid (hero | pane); the footer is a THIRD child spanning both
 * columns on a row of its own, so it runs edge to edge beneath the blue hero
 * and the form alike. Sitting inside .auth-pane, as it first did, made it look
 * like part of the log-in form rather than part of the site.
 * grid-template-rows:1fr auto is what pins it to the bottom: the hero/pane row
 * takes everything left over, so on a short page the footer sits on the bottom
 * edge of the viewport instead of floating halfway up.                        */
/* align-items:safe center is a deliberate progressive enhancement: .auth-pane
 * is align-items:center with overflow-y:auto, and a flex child taller than its
 * container in that combination has its TOP cut off and unreachable by
 * scrolling. Browsers that do not know `safe` drop this as invalid and keep the
 * plain `center` above, i.e. exactly today's behaviour.                       */
.auth-pane{align-items:safe center}
/* Both marks are links home. Inheriting colour matters: .logo sits on the blue
   hero and a{color} would repaint the wordmark link-blue on blue. */
.auth-hero .logo,.auth-card .brandrow{color:inherit;text-decoration:none}
.auth-hero .logo{transition:opacity .15s}
.auth-hero .logo:hover{opacity:.88}
.auth-card .brandrow:hover span:last-child{text-decoration:underline}

.auth-sitefoot{grid-column:1 / -1;grid-row:3;background:var(--surface);
  border-top:1px solid var(--ink-100);padding:26px 28px 18px;
  font-size:13px;color:var(--ink-500)}
/* The marketing site's proportions: the blurb takes the width of roughly two
   link columns, then three equal lists. */
.auth-sitefoot .af-inner{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:22px 26px}
.auth-sitefoot .af-blurb{margin:0;line-height:1.55;max-width:330px}
.auth-sitefoot h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--ink);margin:0 0 9px}
.auth-sitefoot a{display:block;padding:3px 0;color:var(--ink-500);text-decoration:none;
  line-height:1.35;overflow-wrap:anywhere}
.auth-sitefoot a:hover{color:var(--brand);text-decoration:underline}
.auth-sitefoot .af-bot{max-width:1180px;margin:18px auto 0;padding-top:14px;
  border-top:1px solid var(--ink-100);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px}

/* Below the hero's own breakpoint the blurb spans the row and the three lists
   share it, which is the shape the marketing footer takes on a phone. */
@media (max-width:820px){
  .auth-sitefoot{padding:22px 20px 16px}
  .auth-sitefoot .af-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
  .auth-sitefoot .af-blurb{grid-column:1 / -1;max-width:none}
}
/* PHONE: BELOW THE FOLD, ON PURPOSE. Asked for (owner, 2026-09-11): the footer
   must not eat the first screen on a phone, where the card is the entire job.
   Giving the pane a viewport of its own pushes the footer to exactly the bottom
   edge of what is visible, so it is reached by scrolling and never seen before
   the form. svh rather than vh: on a phone 100vh is the height WITHOUT the
   browser toolbars, which would push the footer further down than intended and
   leave dead space under the card. */
@media (max-width:620px){
  .auth-pane{min-height:100vh}
  .auth-sitefoot{font-size:12.5px}
  .auth-sitefoot h4{font-size:9.5px;letter-spacing:.13em}
  .auth-sitefoot .af-inner{gap:16px 10px}
}
@supports (height:100svh){
  @media (max-width:620px){ .auth-pane{min-height:100svh} }
}

/* SHORT DESKTOP WINDOWS. The point of pinning the footer to the bottom is that
   it is THERE without scrolling; at 1280x800 -- an ordinary laptop -- the card
   plus 40px of pane padding plus the footer came to 812px and the last line was
   cut off by 12. Keyed on height, so a tall monitor keeps the generous spacing.
   Nothing here is a control: pane padding and footer padding only. */

}
.role-tag{display:inline-block;color:var(--brand);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.auth-card h1{font-size:27px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.auth-card .sub{color:var(--ink-500);margin-bottom:22px;font-size:14.5px}
.auth-err{background:rgba(229,72,77,.1);color:var(--danger);padding:11px 13px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start}
.auth-err svg{width:18px;height:18px;flex:none;margin-top:1px}
.input-ic{position:relative}
.input-ic svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-500);pointer-events:none}
.input-ic input{padding-left:38px!important}
.input-ic .pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--ink-500);cursor:pointer}
.input-ic .pw-eye svg{position:static;left:auto;top:auto;transform:none;width:19px;height:19px}
.input-ic .pw-eye:hover{color:var(--brand)}
.photo-up{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.photo-ring{width:80px;height:80px;border-radius:50%;border:2px dashed var(--ink-300);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink-500);overflow:hidden;flex:none;background:var(--surface);cursor:pointer}
.photo-ring svg{width:24px;height:24px}
.photo-ring img{width:100%;height:100%;object-fit:cover}
.photo-req{font-size:12.5px;color:var(--ink-500)}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-500)}
.auth-switch a{color:var(--brand);font-weight:700;cursor:pointer}
/* The Business Admin way in: present, findable, but deliberately quieter than
   the coach links above them — this page is overwhelmingly used by coaches, not administrators. */
.auth-switch.auth-admin{margin-top:22px;padding-top:14px;border-top:1px solid var(--ink-100);font-size:12.5px}
.auth-switch.auth-admin a{color:var(--ink-500);font-weight:600;text-decoration:none}
.auth-switch.auth-admin a:hover{color:var(--brand)}

/* A coach's name, in passing — on library credit lines, on an athlete's profile. Underlined on
   hover only, so 6,000 library rows don't turn into a wall of blue. */
.coach-link{ color:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:var(--ink-300); text-underline-offset:2px; }
.coach-link:hover{ color:var(--brand); text-decoration-color:var(--brand); }

/* (was the clinic picker — replaced by the specialty chips and invite code below)
   A clinic that never uploaded a logo fell back to its
   initials rather than an empty box. */
/* Trainer signup: the specialty chips, which are toggles rather than labels — hence a distinct
   .chip-on state from the read-only .chip variants above. */
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip-row .chip{cursor:pointer;border:1.5px solid transparent;user-select:none}
.chip-row .chip:hover{border-color:var(--ink-300)}
.chip-row .chip-on{background:var(--brand-tint);color:var(--brand-deep);border-color:var(--brand)}
/* The trainer's permanent invite code, shown on their profile. Monospaced and letter-spaced
   because its whole job is being read aloud or typed in from a screen. */
.code-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--ink-100);border-radius:var(--r-sm);background:var(--surface-muted)}
.code-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:800;letter-spacing:3px;color:var(--ink-900)}
/* The trainer's QR and its code side by side — the picture is what gets scanned, the six
   characters are what gets read aloud when a scan won't work, and both are the same invite. */
.qr-block{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.qr-img{border-radius:var(--r-sm);border:1.5px solid var(--ink-100);background:#fff;flex:0 0 auto}
.qr-side{flex:1 1 200px;min-width:190px}
.qr-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.auth-hint{text-align:center;margin-top:14px;font-size:12.5px;color:var(--ink-500);background:var(--surface);border:1px solid var(--ink-100);border-radius:var(--r-sm);padding:8px 10px}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--ink-300);font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--ink-100)}
/* THE BAR STAYS DOWN TO 620px, not 820: it is now a header, and a header is as
   useful on a tablet as on a laptop -- it was only hidden before because it was
   half the page. Below 620 it gives way to .brandrow inside the card, which is
   the phone arrangement that was already there. */
@media (max-width:620px){ .auth-hero{display:none} .auth-card .brandrow{display:flex} }
@media (min-width:621px) and (max-width:900px){
  .auth-hero{padding:0 20px;min-height:60px}
  .auth-hero .mark svg,.auth-hero .mark img{width:26px;height:26px}
  .auth-hero .logo .w{font-size:20px}
}

/* coach chip (topbar) + sidebar profile */
.coach-chip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:var(--surface-muted);border:1px solid var(--ink-100);font-weight:700;font-size:13.5px;color:var(--ink-900)}
.coach-chip:hover{border-color:var(--ink-300)}
.cav{border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:none}
.cav img{width:100%;height:100%;object-fit:cover}
.logo{cursor:pointer}
.side-coach{display:flex;align-items:center;gap:11px;padding:11px 10px;border-top:1px solid var(--ink-100);cursor:pointer;border-radius:0 0 8px 8px}
.side-coach:hover{background:var(--surface-muted)}
/* Chat (athlete messaging on the profile) */
.msgs{display:flex;flex-direction:column;gap:12px;padding:6px 0 10px;overflow-y:auto}
.msg{max-width:80%;padding:12px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;font-weight:500}
.msg.them{background:var(--surface-muted);border:1px solid var(--ink-100);align-self:flex-start;border-bottom-left-radius:5px;color:var(--ink-900)}
.msg.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.msg .t{font-size:11px;opacity:.7;margin-top:4px;font-weight:600}
.msgbar{display:flex;gap:9px;align-items:center;padding:10px 0 2px;border-top:1px solid var(--ink-100);margin-top:8px}
.msgbar input{flex:1;border:1px solid var(--ink-100);border-radius:var(--r-pill);padding:12px 16px;outline:none;background:var(--surface-muted)}
.msgbar input:focus{border-color:var(--brand);background:#fff}

/* Athletes list — Pulse Mint */
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tabs button .count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--surface-muted);color:var(--ink-500);font-size:11px;font-weight:800}
.tabs button.active .count{background:rgba(255,255,255,.28);color:#fff}
.adh{display:flex;flex-direction:column;gap:5px;min-width:80px}
.adh-pct{font-weight:800;font-size:13px;color:var(--ink-900)}
.bar.warn>i{background:var(--warning)}
.bar.bad>i{background:var(--danger)}
/* 7-day adherence status circle (Red/Yellow/Green) — tappable → schedule */
.adhc{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink-300);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;cursor:pointer;padding:0;line-height:1;transition:transform .1s,box-shadow .15s}
.adhc:hover{transform:scale(1.06);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.adhc .adhc-pc{font-size:9.5px;font-weight:800;margin-left:1px}
.adhc.g{border-color:var(--success);color:var(--success)}
.adhc.y{border-color:var(--warning);color:var(--warning)}
.adhc.r{border-color:var(--danger);color:var(--danger)}
/* message icon — outline (nothing new) / filled + "!" (new from athlete) → chat */
.catcell{display:inline-flex;align-items:center;gap:10px}
.msgic{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid var(--brand);background:#fff;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none;transition:transform .1s}
.msgic:hover{transform:scale(1.06)}
.msgic svg{width:22px;height:22px}
.msgic.on{background:var(--brand);color:#fff}
.msgic-bang{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:999px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:900;line-height:16px;text-align:center;border:2px solid #fff;padding:0 2px}
.btn-tint{background:var(--brand-tint);color:var(--brand-deep)}
.btn-tint:hover{background:#d2f3e5}

/* Reports — Pulse Mint */
.rep-h{font-size:15px;font-weight:800;color:var(--ink-900);margin:24px 0 12px}
.rep-h:first-child{margin-top:0}
.statc{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:18px;background:var(--surface)}
.statc-ic{width:38px;height:38px;border-radius:11px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.statc-ic svg{width:20px;height:20px}
/* Report cards drill through to the list behind the number */
.statc.click,.tstat.click{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.statc.click:hover{border-color:var(--brand);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.statc.click:hover .statc-go{background:var(--brand);color:#fff}
.tstat.click:hover .v{color:var(--brand)}
.statc-go{margin-top:12px;align-self:flex-start;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;
  padding:5px 9px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-deep);transition:background .12s,color .12s}
.statc-go svg{width:12px;height:12px}
.statc-go:hover{background:var(--brand);color:#fff}
/* "Showing X only" banner on a list that arrived pre-filtered from a report card */
.filter-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-700);
  background:var(--brand-tint);border:1px solid var(--brand);border-radius:var(--r-md);padding:8px 12px;margin-bottom:12px}
.fn-x{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--brand-deep);
  background:var(--surface);border-radius:var(--r-pill);padding:4px 10px}
.fn-x svg{width:12px;height:12px}
.fn-x:hover{background:var(--brand);color:#fff}
.train-grid{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:16px}
.ring-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-wrap{position:relative;width:150px;height:150px}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-label .v{font-size:30px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.ring-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);margin-top:3px}
.train-stats{display:flex;flex-wrap:wrap;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--ink-100);margin-bottom:16px}
.tstat .v{font-size:24px;font-weight:800;letter-spacing:-0.02em}
.tstat .l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);margin-top:2px}
.wk{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.wk-bars{display:flex;align-items:flex-end;gap:10px}
.wk-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.wk-val{font-size:11px;font-weight:800;color:var(--ink-700);margin-bottom:3px;height:14px}
.wk-barwrap{width:100%;height:120px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ink-100);padding-bottom:1px}
.wk-bar{width:100%;min-height:3px;background:var(--brand);border-radius:6px 6px 0 0}
.wk-lbl{font-size:11px;color:var(--ink-500);margin-top:6px;white-space:nowrap}
@media(max-width:900px){ .train-grid{grid-template-columns:1fr} }

/* Athlete profile — Pulse Mint */
.card-h{display:flex;align-items:center;gap:8px}
.card-h h3{font-size:15px;font-weight:800;margin:0}
.card-h svg{width:18px;height:18px;color:var(--ink-500);flex:none}
.addlink{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-weight:700;font-size:13px;cursor:pointer}
.addlink svg{width:15px;height:15px}
.metric{background:var(--surface-muted);border:0}
.metric .mu{font-size:13px;font-weight:700;color:var(--ink-500)}
.actrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ink-100)}
.actrow:first-child{border-top:0}
.actchk{color:var(--brand);display:flex;flex:none}.actchk svg{width:20px;height:20px}
.trainer-row{display:flex;align-items:center;gap:10px}
.prof-grid{grid-template-columns:1.4fr 1fr}
@media(max-width:900px){ .prof-grid{grid-template-columns:1fr} }

/* Workout builder — Pulse Mint */
.builder{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){ .builder{grid-template-columns:1fr} }
.lib-pane{overflow:hidden}
.lib-head{padding:16px 16px 12px}
.lib-head h3{font-size:15px;font-weight:800}
.lib-head .search{max-width:none}
.lib-list{max-height:600px;overflow-y:auto}
.lib-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--ink-100)}
.lib-ic{width:34px;height:34px;border-radius:10px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.lib-ic svg{width:18px;height:18px}
.lib-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-add{width:30px;height:30px;border-radius:9px;background:var(--brand-tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;flex:none}
.lib-add:hover{background:var(--brand);color:#fff}.lib-add svg{width:16px;height:16px}
.wo-title{border:0;outline:none;width:100%;font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--ink-900);padding:0}
.wo-desc{border:0;outline:none;width:100%;font-size:14.5px;color:var(--ink-500);padding:4px 0 0}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 18px}
.pill-x{margin-left:5px;color:inherit;opacity:.6;font-weight:800;cursor:pointer}.pill-x:hover{opacity:1}
.pill-in{border:1px dashed var(--ink-300);border-radius:var(--r-pill);padding:3px 11px;font-size:12.5px;font-weight:700;color:var(--ink-700);outline:none;width:108px;background:none}
.pill-in:focus{border-color:var(--brand);border-style:solid}
.exblock{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--ink-100);border-radius:var(--r-md);margin-bottom:10px}
.exgrip{color:var(--ink-300);cursor:grab;flex:none;margin-top:3px}.exgrip svg{width:18px;height:18px}
.exnum{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.exhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.exname{font-weight:700;font-size:15px}
.setrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.setchip{display:inline-flex;align-items:center;gap:3px;background:var(--surface-muted);border-radius:var(--r-pill);padding:4px 6px 4px 10px}
.setchip .sc-in{width:38px;border:0;background:none;outline:none;text-align:center;font-weight:800;font-size:13px;color:var(--ink-900);font-variant-numeric:tabular-nums}
.setchip .sc-x2{color:var(--ink-500);font-weight:700;font-size:12px}
.sc-del{width:18px;height:18px;border-radius:50%;color:var(--ink-500);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.sc-del:hover{background:var(--ink-100);color:var(--danger)}
.setadd{display:inline-flex;align-items:center;gap:3px;color:var(--brand-deep);font-weight:700;font-size:13px;cursor:pointer}.setadd svg{width:15px;height:15px}
.add-zone{margin-top:6px;border:1.5px dashed var(--brand);background:var(--brand-tint);color:var(--brand-deep);border-radius:var(--r-md);padding:14px;text-align:center;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.add-zone svg{width:16px;height:16px}

/* Exercises library — Pulse Mint */
.ex-ic{width:52px;height:52px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.ex-ic svg{width:24px;height:24px}

/* Library search/filter bar */
.listbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.filtersel{border:1px solid var(--ink-100);border-radius:var(--r-md);padding:9px 12px;background:var(--surface);font-weight:700;font-size:13.5px;color:var(--ink-700);outline:none;cursor:pointer}
.filtersel:focus{border-color:var(--brand)}
.sortbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Notifications feed — Pulse Mint */
.notif{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:14px;margin-bottom:10px}
.notif.unread{background:var(--brand-tint);border-color:var(--brand)}
.ntile{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface-muted);color:var(--ink-500)}
.ntile svg{width:21px;height:21px}
.ntile.good{background:var(--brand-tint);color:var(--brand)}
.ntile.bad{background:rgba(229,72,77,.12);color:var(--danger)}
.notif-main{flex:1;min-width:0}
.notif-title{font-weight:700}
.notif-link{color:var(--ink-500);font-weight:600;font-size:12.5px;cursor:pointer}
.notif-body{color:var(--ink-500);font-size:13.5px}
.notif-time{color:var(--ink-500);font-size:12px;margin-top:3px}

/* ---- Exercise library: table + rich create/edit form ---- */
.modal.wide{max-width:880px}
.ex-tbl td{font-size:14px}
.ex-tbl th{cursor:pointer;user-select:none;white-space:nowrap}
.ex-tbl .who{gap:10px}
.wo-tbl td{font-size:14px;vertical-align:middle}
.wo-tbl th{user-select:none;white-space:nowrap;cursor:default}
.wo-tbl th.click{cursor:pointer}
.wo-tbl .who{gap:10px}
.wo-tbl .thumb{border-radius:10px;overflow:hidden;flex:none;background:var(--surface-muted);border:1px solid var(--ink-100)}
.wo-tbl .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wo-tbl .taglist{margin-top:0;gap:5px}
.rowacts{display:inline-flex;align-items:center;gap:6px}

/* ================= Workout builder ================= */
.wbuild{display:flex;height:calc(100vh - 64px);min-height:0;overflow:hidden}
.wb-lib{width:362px;flex:none;min-height:0;border-right:1px solid var(--ink-100);background:var(--surface);display:flex;flex-direction:column;padding:14px;overflow:hidden}
.wb-tabs{display:flex;gap:6px;background:var(--surface-muted);padding:4px;border-radius:var(--r-md)}
.wb-tab{flex:1;padding:9px;border-radius:var(--r-sm);font-weight:800;font-size:14px;color:var(--ink-700);cursor:pointer;border:0;background:transparent}
.wb-tab.on{background:var(--brand);color:#fff}
.wb-search{margin-top:12px;flex:none}
.wb-lib-title{font-weight:800;font-size:16px;color:var(--ink-900);padding:4px 2px}
.sb-media{border:1px solid var(--ink-100);border-radius:12px;padding:12px;background:var(--surface)}
.sb-media-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sb-media-prev{position:relative;margin-bottom:10px}
.sb-media-x{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9);border-radius:50%}
.wb-lib-sub{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 8px}
.wb-count{font-size:11.5px;font-weight:800;color:var(--ink-500);letter-spacing:.04em}
.wb-viewtoggle{display:flex;gap:4px}
.wb-viewtoggle button{min-width:30px;height:28px;padding:0 7px;border:1px solid var(--ink-100);background:var(--surface);border-radius:8px;font-weight:800;font-size:12px;color:var(--ink-500);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.wb-viewtoggle button svg{width:15px;height:15px}
.wb-viewtoggle button.on{background:var(--brand-tint);color:var(--brand-deep);border-color:var(--brand)}
.wb-lib-list{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:2px 4px}
.wb-lib-pager{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0 2px;margin-top:6px;border-top:1px solid var(--ink-100)}
.wb-pg-btn{width:32px;height:32px;border:1px solid var(--ink-100);background:var(--surface);border-radius:9px;cursor:pointer;font-weight:800;font-size:16px;color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center}
.wb-pg-btn:disabled{opacity:.4;cursor:default}
.wb-pg-lbl{font-size:13px;font-weight:800;color:var(--ink-700);min-width:96px;text-align:center}
.wb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-card-thumb{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--ink-100);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wb-card-thumb img,.wb-card-thumb video{width:100%;height:100%;object-fit:cover}
.wb-card-add{position:absolute;bottom:6px;left:6px;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.wb-card-add svg{width:16px;height:16px}
.wb-card-name{font-size:13px;font-weight:700;margin-top:6px;line-height:1.25}
.wb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
.wb-ph{color:var(--ink-300);display:flex}.wb-ph svg{width:22px;height:22px}
.wb-lrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--ink-100)}
.wb-lrow-thumb{position:relative;width:56px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--ink-100);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wb-lrow-thumb img,.wb-lrow-thumb video{width:100%;height:100%;object-fit:cover}
.wb-lrow-name{flex:1;min-width:0;font-weight:700;font-size:13.5px}
.wb-seccard{border:1px solid var(--ink-100);border-radius:12px;padding:12px;margin-bottom:10px}
.wb-seccard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.wb-seccard-name{font-weight:800;font-size:14.5px;min-width:0}
.wb-seccard-meta{margin-top:5px;display:flex;align-items:center;gap:8px;font-size:12.5px}
.wb-seccard-prev{font-size:12.5px;margin-top:7px;line-height:1.4}
.wb-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface-muted)}
.wb-main-head{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--ink-100)}
.wb-title{flex:1;min-width:0;font-size:22px;font-weight:800;border:0;outline:none;background:transparent;color:var(--ink-900)}
.wb-head-acts{display:flex;align-items:center;gap:8px}
.wb-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 22px}
.wb-desc{width:100%;border:0;background:transparent;resize:vertical;min-height:34px;font-size:14.5px;color:var(--ink-700);outline:none;margin-bottom:8px}
.wb-meta{margin-bottom:12px}
.wb-meta-lbl{font-size:11px;font-weight:800;color:var(--ink-500);letter-spacing:.05em;margin-bottom:6px}
.wb-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 22px;background:var(--surface);border-top:1px solid var(--ink-100)}
.wb-sec{margin-top:14px;border-radius:12px;overflow:hidden;border:1px solid var(--ink-100)}
.wb-sec-head{display:flex;align-items:center;gap:10px;background:var(--brand-deep);padding:10px 14px}
.wb-sec-title{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-weight:800;font-size:15px}
.wb-sec-title::placeholder{color:rgba(255,255,255,.6)}
.wb-sec-fmt{color:#fff;font-size:12.5px;font-weight:700;opacity:.85}
.wb-sec-head .icon-btn{color:#fff}
.wb-sec-body{background:var(--surface);padding:12px}
.wb-ex{border:1px solid var(--ink-100);border-radius:12px;padding:12px;margin-bottom:10px}
.wb-ex-head{display:flex;align-items:center;gap:10px}
.wb-ex-thumb{position:relative;width:48px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--ink-100);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wb-ex-thumb img,.wb-ex-thumb video{width:100%;height:100%;object-fit:cover}
.wb-ex-name{flex:1;min-width:0;font-weight:700;font-size:15px}
.wb-reorder{display:flex;flex-direction:column}
.wb-reorder .icon-btn{width:24px;height:18px;font-size:10px}
.wb-setrow{display:grid;align-items:center;gap:8px;margin-top:8px}
.wb-setrow input{width:100%;min-width:0;padding:7px 9px;border:1px solid var(--ink-100);border-radius:8px;text-align:center;font-size:13.5px;outline:none;color:var(--ink-900)}
.wb-setrow input:focus{border-color:var(--brand)}
.wb-setn{text-align:center;font-weight:800;color:var(--ink-500);font-size:13px}
.wb-sethdr{margin-top:6px}
.wb-sethdr span{text-align:center;font-size:11px;font-weight:800;color:var(--ink-500);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-setrow .sc-del{color:var(--ink-300);background:transparent;border:0;font-size:16px;cursor:pointer;padding:0}
.wb-ex-ctrls{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.wb-ex-ctrls .grow{flex:1}
.wb-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-700);cursor:pointer}
.wb-tempo{width:96px;padding:7px 9px;border:1px solid var(--ink-100);border-radius:8px;font-size:13px;outline:none}
.wb-note{width:100%;margin-top:10px;padding:9px 11px;border:1px solid var(--ink-100);border-radius:8px;background:var(--surface-muted);font-size:13.5px;outline:none;color:var(--ink-900)}
.wb-menu{position:fixed;z-index:9999;background:#fff;border:1px solid var(--ink-100);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:6px;min-width:190px}
.wb-menu-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--ink-900);border-radius:8px;cursor:pointer}
.wb-menu-item:hover{background:var(--surface-muted)}
.wb-menu-item.danger{color:var(--danger)}
.sb-fields{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-end}
.sb-field{flex:1;min-width:150px;max-width:240px}
.sb-in{width:100%}
input.sb-in{padding:9px 11px;border:1.5px solid var(--ink-100);border-radius:var(--r-sm);outline:none;background:#fff;font-size:14px;color:var(--ink-900)}
input.sb-in:focus{border-color:var(--brand)}
.wo-thumb-sm{width:40px;height:40px;border-radius:10px;overflow:hidden;flex:none;background:var(--surface-muted);border:1px solid var(--ink-100);position:relative;display:flex;align-items:center;justify-content:center}
.wo-thumb-sm img,.wo-thumb-sm video{width:100%;height:100%;object-fit:cover}
.wo-thumb-sm .wb-play{font-size:11px}
@media (max-width:820px){ .wbuild{flex-direction:column;height:auto;overflow:visible} .wb-lib{width:auto;border-right:0;border-bottom:1px solid var(--ink-100);max-height:48vh} .wb-scroll{padding:14px} .wb-main-head{padding:12px 14px} }
.ex-tbl .thumb{border-radius:10px;overflow:hidden;flex:none;background:var(--surface-muted);border:1px solid var(--ink-100)}
.ex-tbl .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ex-tbl .media-cell{position:relative;width:84px;height:52px;border-radius:8px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--ink-100)}
.ex-tbl .media-cell img,.ex-tbl .media-cell video,.ex-tbl .media-cell iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.ex-tbl .media-cell .playbadge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
.ex-tbl .media-cell.play-tile{display:flex;align-items:center;justify-content:center}
.ex-tbl .media-cell.play-tile .playbadge{position:static;color:var(--brand);text-shadow:none}
.initials{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-deep);font-size:11.5px;font-weight:800}
.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 4px;color:var(--ink-500);font-size:13.5px;font-weight:700}
.pager-ctl{display:flex;gap:8px;align-items:center}
.exform{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:720px){ .exform{grid-template-columns:1fr;gap:14px} }
.exform-col{min-width:0}
.form-sec{border:1px solid var(--ink-100);border-radius:var(--r-lg);padding:14px;margin-bottom:14px;background:var(--surface)}
.form-sec-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin-bottom:10px}
.picker{display:flex;gap:8px;align-items:center}
.picker select,.picker input{flex:1;min-width:0}
.linkbtn{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700;font-size:13px;cursor:pointer}
.linkbtn svg{width:15px;height:15px}
.tag.brand{background:var(--brand);color:#fff}
.tag.brand button{color:#fff}

/* ---- Section builder: format tabs ---- */
.fmt-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fmt-tab{padding:7px 13px;border:1px solid var(--ink-100);border-radius:var(--r-pill);background:var(--surface);font-weight:700;font-size:13px;color:var(--ink-700);cursor:pointer}
.fmt-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ============ Programs: calendar (week grid, workout cards, drag-drop) ============ */
.pg-cal{padding:18px 24px 40px;display:flex;flex-direction:column;gap:14px}
.pg-cal-title{display:flex;align-items:center;gap:12px}
.pg-cal-title h2{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0}
.pg-cal-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pg-weeknav{display:flex;align-items:center;gap:10px}
.pg-weeklbl{font-weight:800;font-size:14px;color:var(--ink-900);min-width:110px;text-align:center}
.pg-cal-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-viewtoggle{display:inline-flex;border:1px solid var(--ink-100);border-radius:var(--r-pill);overflow:hidden}
.pg-viewtoggle button{padding:7px 13px;font-weight:700;font-size:13px;color:var(--ink-500);background:var(--surface);border:none;cursor:pointer}
.pg-viewtoggle button.on{background:var(--ink-900);color:#fff}
.pg-weeks{display:flex;flex-direction:column;gap:22px;overflow-x:auto}
.pg-week{display:flex;gap:12px;min-width:940px}
.pg-week-side{width:34px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px}
.pg-week-lbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--ink-500)}
.pg-week-acts{display:flex;flex-direction:column;gap:2px}
.pg-week-acts .icon-btn{width:26px;height:26px}
.pg-week-acts svg{width:15px;height:15px}
.pg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;flex:1}
.pg-day{background:var(--surface-muted);border:1px solid var(--ink-100);border-radius:var(--r-md);min-height:230px;display:flex;flex-direction:column;transition:border-color .12s,background .12s}
.pg-day.drop-hot{border-color:var(--brand);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--brand)}
.pg-day-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink-500)}
.pg-day-add{width:22px;height:22px;border-radius:50%;border:none;background:transparent;color:var(--ink-500);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pg-day-add:hover{background:var(--brand-tint);color:var(--brand-deep)}
.pg-day-add svg{width:16px;height:16px}
.pg-day-body{display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}
.pg-wcard{background:var(--surface);border:1px solid var(--ink-100);border-radius:10px;padding:8px;cursor:pointer;box-shadow:var(--shadow-card)}
.pg-wcard:hover{border-color:var(--ink-300)}
.pg-wcard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:6px}
.pg-wcard-title{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--brand-deep);line-height:1.3}
.pg-wcard-menu{border:none;background:transparent;color:var(--ink-500);cursor:pointer;padding:0;flex:none}
.pg-wcard-menu svg{width:18px;height:18px}
.pg-sec{border:1px solid var(--ink-100);border-radius:8px;padding:8px 9px;background:var(--surface);margin-bottom:2px}
.pg-sec-t{font-size:13px;font-weight:700;color:var(--ink-900);text-align:center}
.pg-sec-meta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.pg-fmt{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--brand-deep);background:var(--brand-tint);padding:2px 7px;border-radius:5px}
.pg-mt{font-size:11.5px;font-weight:700;color:var(--ink-500)}
.pg-more{width:100%;border:none;background:transparent;color:var(--ink-500);font-size:12px;font-weight:700;padding:5px 0 2px;cursor:pointer;text-align:left}
.pg-more:hover{color:var(--brand-deep)}
.pg-card-add{width:100%;border:1px dashed var(--ink-300);border-radius:7px;background:transparent;color:var(--ink-500);cursor:pointer;padding:5px;margin-top:4px;display:flex;align-items:center;justify-content:center}
.pg-card-add:hover{border-color:var(--brand);color:var(--brand-deep)}
.pg-card-add svg{width:16px;height:16px}
.pg-menu-pop{position:fixed;z-index:200;background:var(--surface);border:1px solid var(--ink-100);border-radius:10px;box-shadow:0 8px 28px rgba(15,23,38,.16);padding:6px;min-width:172px;display:flex;flex-direction:column}
.pg-menu-pop button{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;background:transparent;font-weight:700;font-size:13.5px;color:var(--ink-700);cursor:pointer;border-radius:7px;text-align:left}
.pg-menu-pop button:hover{background:var(--surface-muted)}
.pg-menu-pop button.danger{color:#DC2626}
.pg-menu-pop svg{width:16px;height:16px}
/* cover image + find-a-workout */
.pg-cover{border:1px dashed var(--ink-300);border-radius:var(--r-md);overflow:hidden;position:relative}
.pg-cover img{width:100%;max-height:180px;object-fit:cover;display:block}
.pg-cover-x{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9)}
.pg-cover-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;color:var(--ink-500);font-size:13px;text-align:center;cursor:pointer}
.pg-cover-drop svg{width:30px;height:30px;color:var(--ink-300)}
.pg-find-list{max-height:52vh;overflow-y:auto}
.pg-find-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--ink-100);border-radius:10px;margin-bottom:8px;cursor:pointer}
.pg-find-row:hover{border-color:var(--brand);background:var(--brand-tint)}
.pg-find-row .grow{flex:1;min-width:0}
.pg-find-row .pg-ini{margin-left:auto}
.pg-find-row .wo-thumb-sm{width:48px;height:48px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-muted)}
.pg-find-row .wo-thumb-sm img,.pg-find-row .wo-thumb-sm video{width:100%;height:100%;object-fit:cover}
.pg-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink-300)}
.pg-noimg svg{width:22px;height:22px}
.pg-ini{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.pg-ini-empty{background:var(--surface-muted);color:var(--ink-300)}
.pg-find-add{flex:none;width:34px;height:34px;border-radius:50%;border:none;background:var(--brand);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pg-find-add:hover{background:var(--brand-press)}
.pg-find-add svg{width:18px;height:18px}
/* workout preview popout (layers over the Find-a-Workout list) */
.pg-preview{position:fixed;inset:0;z-index:120;background:rgba(15,23,38,.45);display:flex;align-items:center;justify-content:center;padding:24px}
.pg-preview-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(15,23,38,.28);width:min(560px,94vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.pg-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--ink-100)}
.pg-preview-head h3{font-size:17px;font-weight:800;margin:0;line-height:1.3}
.pg-preview-body{padding:14px 18px;overflow-y:auto}
.pg-preview-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--ink-100)}
.pg-pv-sec{margin-bottom:16px}
.pg-pv-sec-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink-500);text-transform:uppercase;margin-bottom:8px}
.pg-pv-ex{display:flex;align-items:center;gap:11px;padding:7px 0;border-top:1px solid var(--ink-100)}
.pg-pv-ex:first-of-type{border-top:none}
.pg-pv-ex .wo-thumb-sm{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-muted)}
.pg-pv-ex .wo-thumb-sm img,.pg-pv-ex .wo-thumb-sm video{width:100%;height:100%;object-fit:cover}

/* ---- Coach: athlete Health tab (devices + photos) ---- */
.prof-health{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.ph-tile{flex:1;min-width:120px;background:var(--surface-muted);border-radius:var(--r-md);padding:14px 12px;text-align:center}
.ph-tile .ph-v{font-size:22px;font-weight:800}
.ph-tile .ph-l{font-size:12px;font-weight:700;color:var(--ink-500);margin-top:3px}
.prof-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.prof-photo{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;background:var(--surface-muted);border:1px solid var(--ink-100)}
.prof-photo img{width:100%;height:100%;object-fit:cover}
.prof-photo span{position:absolute;left:7px;bottom:7px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px}

/* ---- Coach Health: trend range selector ---- */
.seg-days{display:inline-flex;background:var(--surface-muted);border:1px solid var(--ink-100);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg-days button{padding:6px 14px;border-radius:var(--r-pill);font-weight:800;font-size:12.5px;color:var(--ink-500);background:transparent;border:none;cursor:pointer}
.seg-days button.on{background:var(--brand);color:#fff}


/* ---- favourites -----------------------------------------------------------
   The heart column is FIXED at 34px and the table keeps its own width: a new
   column that sizes to content is how a table starts scrolling sideways and
   pushes the right-hand columns off the screen. `width` plus `padding:0` means
   it takes what it needs and not a pixel more. */
.tbl th.fav-th{ width:34px; min-width:34px; padding:0; }
.tbl td.fav-td{ width:34px; min-width:34px; padding:0 0 0 2px; text-align:center; }
.fav-btn{ background:none; border:0; padding:4px; margin:0; cursor:pointer; line-height:0;
          color:var(--ink-300); border-radius:6px; }
.fav-btn svg{ width:17px; height:17px; display:block; }
.fav-btn:hover{ color:var(--danger); background:var(--brand-50); }
.fav-btn.on{ color:var(--danger); }

/* ---- Plan & billing (js/22-screen-billing.js) ------------------------------
   The gate is a full-page screen with no sidebar, so it sets its own width
   rather than living inside .page. Everything else here is ordinary card
   furniture reused at plan-card scale. */
.plan-gate{max-width:1060px;margin:0 auto;padding:44px 20px 60px}
/* Its own brand row rather than .brandrow: that one is scoped `.auth-card .brandrow`, so
   outside an auth card it inherits nothing at all — including the svg sizing — and the
   logo renders at its intrinsic size, filling the screen. */
.plan-gate-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.plan-gate-brand svg,.plan-gate-brand img{width:32px;height:32px;flex:none}
.plan-gate-brand span{font-weight:800;font-size:21px;color:var(--brand);letter-spacing:-.03em}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.plan-card{background:var(--surface);border:1px solid var(--ink-100);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px;display:flex;flex-direction:column}
.plan-card.is-current{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-card)}
.plan-name{font-size:17px;font-weight:800;letter-spacing:-.01em}
.plan-price{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.plan-price .per{font-size:13px;font-weight:700;color:var(--ink-500);letter-spacing:0;margin-left:5px}
.plan-desc{font-size:13.5px;color:var(--ink-700);line-height:1.5;margin-top:9px}
.plan-facts{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.plan-facts>div{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink-700)}
.plan-facts svg{width:16px;height:16px;color:var(--brand);flex:none}
.plan-caps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-caps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-700)}
.plan-caps svg{width:14px;height:14px;color:var(--success);flex:none}
.plan-compare{margin-top:16px}
.plan-compare-scroll{overflow-x:auto;margin-top:14px}
.plan-compare table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.plan-compare th,.plan-compare td{padding:9px 12px;border-bottom:1px solid var(--ink-100);text-align:left;color:var(--ink-700)}
.plan-compare th{font-weight:800;color:var(--ink-900);background:var(--ink-50,#f6f8fb)}
.plan-compare .c{text-align:center;width:130px}
.plan-compare .yes{color:var(--success);font-weight:800}
.plan-compare .no{color:var(--ink-400,#9aa4b2)}
.plan-compare tr.grp td{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);background:transparent;padding-top:16px}
.plan-note{font-size:12.5px;color:var(--ink-500);line-height:1.45;margin-top:12px}
.plan-spacer{flex:1 1 auto;min-height:18px}   /* pushes the button to the card's bottom so
                                                   buttons line up across cards of unequal height */
.plan-inc{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.plan-inc .chip svg{color:var(--success)}
/* One band component, three tones: neutral info, amber warning, and the
   "Stripe isn't real yet" stub. The stub is the loudest on purpose — a
   simulated payment that reads as a real one is the failure this guards. */
.plan-band{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:var(--r-md);font-size:13.5px;line-height:1.5}
.plan-band svg{width:18px;height:18px;flex:none;margin-top:1px}
.plan-band.info{background:var(--brand-tint);color:var(--brand-deep)}
.plan-band.warn{background:rgba(232,144,43,.13);color:#8a5210}
.plan-band.stub{background:rgba(229,72,77,.1);color:var(--danger);margin-bottom:16px}
.plan-band.ro{border-radius:0;padding:11px 24px;align-items:center;gap:12px}
.plan-band.ro .btn{margin-left:auto;flex:none}
@media(max-width:700px){ .plan-gate{padding:26px 14px 44px} .plan-band.ro{padding:11px 14px;flex-wrap:wrap} }

/* An in-modal failure message. Replaces alert(), which blocks the renderer and hides the form
   the person has just filled in behind a dialog they have to dismiss first. See modalErr(). */
.modal-err{background:rgba(229,72,77,.1);color:var(--danger);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;font-size:13.5px;font-weight:600;line-height:1.45}

/* ===========================================================================
   BILLING (22-screen-billing.js) — SBR-owned billing, 2026-09-12.
   Plan-card price line, the disclosure + fee table, the checkout modal, the
   Billing card's rows, and the receipt (with its print stylesheet).
   =========================================================================== */
.plan-billed{font-size:12.5px;font-weight:700;color:var(--ink-500);margin-top:4px}
.bv-disclosure{margin-top:18px;font-size:12.5px;color:var(--ink-700);line-height:1.55}
.bv-disclosure p{margin:0 0 8px}
.bv-fees{max-width:560px;margin-top:6px}
.bv-fees th{padding:0 10px 8px}
.bv-fees td{padding:9px 10px;font-size:13px}
.bv-sub-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin:18px 0 10px}
.bv-addr-row{display:grid;grid-template-columns:1.4fr 1.2fr .8fr;gap:10px}
@media(max-width:560px){ .bv-addr-row{grid-template-columns:1fr} }
.bv-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.45;cursor:pointer;margin:8px 0}
.bv-check input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--brand)}
.bv-co-profile{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ink-100);border-radius:var(--r-md);margin-bottom:14px;font-size:13.5px}
.bv-co-profile>svg{width:18px;height:18px;color:var(--ink-500);flex:none}
.bv-co-profile>div{flex:1;min-width:0;display:flex;flex-direction:column}
.bv-radios{display:flex;flex-direction:column;gap:8px}
.bv-radio{display:flex;align-items:center;gap:11px;border:1.5px solid var(--ink-100);border-radius:var(--r-md);padding:11px 13px;cursor:pointer}
.bv-radio.on{border-color:var(--brand);background:var(--brand-tint)}
.bv-radio input{width:17px;height:17px;flex:none;accent-color:var(--brand)}
.bv-radio-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14px}
.bv-radio-main .muted{flex-basis:100%;font-size:12.5px}
.bv-radio-amt{font-weight:800;white-space:nowrap}
.bv-co-totals{background:var(--surface-muted);border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px}
.bv-co-totals .r{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.bv-co-totals .r span:last-child{white-space:nowrap}
.bv-co-totals .r.t{font-weight:800;font-size:15px;border-top:1px solid var(--ink-100);margin-top:5px;padding-top:8px}
.bv-fine{font-size:12px;color:var(--ink-500);line-height:1.55;margin:0 0 10px}
.bill-rows{margin-top:4px}
.bill-row{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--ink-100)}
.bill-row:first-child{border-top:none}
.bill-row .k{width:150px;flex:none;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500)}
.bill-row .v{flex:1;min-width:180px;font-size:14px}
.bill-row .a{display:flex;gap:8px;flex:none}
.bv-sim-tag{padding:2px 8px;font-size:11.5px}

/* The receipt. Class names are coach-specific on purpose: this stylesheet is also
   loaded by the admin site (assemble-hosting.sh), which has receipts of its own. */
.coach-receipt .plan-band{margin-bottom:14px}
.coach-receipt .rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.coach-receipt .rc-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--brand);letter-spacing:-.02em}
.coach-receipt .rc-brand img{width:30px;height:30px}
.coach-receipt .rc-no{font-weight:800;font-size:15px}
.coach-receipt .rc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 18px;margin:18px 0}
.coach-receipt .rc-meta .k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500)}
.coach-receipt .rc-meta .v{font-size:14px;margin-top:2px}
.coach-receipt .rc-lines{width:100%;border-collapse:collapse}
.coach-receipt .rc-lines th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);padding:0 6px 8px;border-bottom:1px solid var(--ink-100)}
.coach-receipt .rc-lines td{padding:7px 6px;font-size:13.5px;vertical-align:top}
.coach-receipt .rc-cat td{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);padding-top:14px}
.coach-receipt .rc-qty{width:48px;text-align:center}
.coach-receipt .rc-amt{text-align:right;white-space:nowrap}
.coach-receipt .rc-tot td{border-top:1px solid var(--ink-100);font-weight:700}
.coach-receipt .rc-grand td{border-top:2px solid var(--ink-900);font-weight:800;font-size:16px;padding-top:9px}
.coach-receipt .rc-foot{font-size:12px;color:var(--ink-500);line-height:1.5;margin-top:12px}

/* PRINT ONLY THE OPEN RECEIPT. Two copies of each rule rather than one selector
   list: a browser without :has() drops a whole list it cannot parse, which would
   take the class-based rule down with it. */
@media print{
  body.coach-receipt-printing > :not(#overlay){display:none!important}
  body:has(#overlay .coach-receipt) > :not(#overlay){display:none!important}
  body.coach-receipt-printing #overlay .modal-bg{position:static;background:none;backdrop-filter:none;padding:0;display:block;overflow:visible}
  body:has(#overlay .coach-receipt) #overlay .modal-bg{position:static;background:none;backdrop-filter:none;padding:0;display:block;overflow:visible}
  body.coach-receipt-printing #overlay .modal{box-shadow:none;max-width:none;border-radius:0;animation:none;margin:0}
  body:has(#overlay .coach-receipt) #overlay .modal{box-shadow:none;max-width:none;border-radius:0;animation:none;margin:0}
  body.coach-receipt-printing #overlay .modal-head, body.coach-receipt-printing #overlay .modal-foot{display:none!important}
  body:has(#overlay .coach-receipt) #overlay .modal-head{display:none!important}
  body:has(#overlay .coach-receipt) #overlay .modal-foot{display:none!important}
  body.coach-receipt-printing #overlay .modal-body{max-height:none;overflow:visible;padding:0}
  body:has(#overlay .coach-receipt) #overlay .modal-body{max-height:none;overflow:visible;padding:0}
  .coach-receipt{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:#000}
}

/* ===========================================================================
   SHORT DESKTOP WINDOWS on the signed-out pages. AT THE END OF THE FILE ON
   PURPOSE: .auth-card h1, .auth-card .sub, .auth-switch and .auth-or are all
   declared further down than the footer block above, and a media query adds NO
   specificity -- so written up there, four of these six rules were silently
   losing to the base declarations that follow them and the trim did nothing.
   The symptom was a page that still scrolled 64px with a stylesheet that
   looked like it said otherwise.
   =========================================================================== */
@media (min-width:621px) and (max-height:900px){
  /* The bar costs 68px this page did not have to find before. */
  .auth-hero{min-height:56px}
  .auth-pane{padding:20px 22px}
  .auth-sitefoot{padding:18px 28px 13px}
  .auth-sitefoot .af-inner{gap:14px 26px}
  .auth-sitefoot .af-bot{margin-top:12px;padding-top:10px}
  /* The COACH card is the tall one -- it carries a password form AND four
     alternative routes in (login link, create account, business admin), where
     the clinic card has two. At 1280x800 that came to 864px against 800 and
     the footer's last line was cut off. Only the rhythm gives way: the inputs
     and the buttons keep their sizes, because those are what a person aims at
     and this is a page you arrive at to TYPE. */
  .auth-card{padding:20px 32px}
  .auth-card h1{font-size:23px}
  .auth-card .sub{margin-bottom:14px}
  .field{margin-bottom:10px}
  .auth-switch{margin-top:12px}
  .auth-or{margin-top:12px;margin-bottom:9px}
  .auth-card .auth-switch:last-child{margin-top:14px}
}

/* One step tighter, for an iPad on its side (1024x768) and anything shorter.
   Same rule as the step above: rhythm gives way, controls do not. */
@media (min-width:621px) and (max-height:800px){
  /* THE LAST 8px COME OUT OF THE BAR, not the form. On an iPad in landscape
     this page came to 772 against 768, and the tempting place to find four
     pixels is the log-in card -- which is the one thing on the page somebody
     has to READ and TYPE INTO. The bar holds a logo and nothing else: it can
     lose 8px and still be a bar. Mark and wordmark come down with it so the
     logo keeps its proportions rather than filling a shorter band. */
  .auth-hero{min-height:44px}
  .auth-hero .logo{gap:9px}
  .auth-hero .mark{padding:4px;border-radius:8px}
  .auth-hero .mark svg,.auth-hero .mark img{width:26px;height:26px}
  .auth-hero .logo .w{font-size:19px}
  .auth-pane{padding:15px 22px}
  .field{margin-bottom:8px}
  .auth-sitefoot{padding:11px 28px 9px}
  .auth-sitefoot .af-bot{margin-top:8px;padding-top:7px}
  .auth-card{padding:16px 26px}
  .auth-card h1{font-size:21px}
  .auth-card .sub{margin-bottom:11px;font-size:13.5px}
  .auth-switch{margin-top:8px;font-size:13.5px}
  .auth-or{margin-top:9px;margin-bottom:7px}
  .auth-card .auth-switch:last-child{margin-top:9px}
  .auth-sitefoot{padding:14px 28px 11px}
  .auth-sitefoot .af-bot{margin-top:9px;padding-top:8px}
}

/* 100svh for the page shell. 100vh on a tablet is the height the page WOULD
   have with the browser toolbars collapsed, so a footer pinned to the bottom of
   a 100vh box lands ~140px below what is actually on screen -- present, correct
   by measurement, and invisible. svh is the same measurement with the bars
   showing. On a desktop browser the two are identical, so this changes nothing
   there. Same bug, and same fix, as pricing.html's first panel. */
@supports (height:100svh){ .auth-wrap{min-height:100svh} }

/* Specialized package details (#/account/addon/<id>) */
.addon-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:12px}
.addon-item{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--ink-100);border-radius:12px;cursor:pointer;background:#fff}
.addon-item:hover{border-color:var(--brand,#2B86F0)}
.addon-ic{width:40px;height:40px;border-radius:10px;background:var(--ink-50,#f4f7fb);display:flex;align-items:center;justify-content:center;flex:none}
.addon-ic svg{width:20px;height:20px}
.addon-thumb{width:64px;height:48px;border-radius:8px;overflow:hidden;flex:none;position:relative;background:var(--ink-50,#f4f7fb);display:flex;align-items:center;justify-content:center}
.addon-thumb img{width:100%;height:100%;object-fit:cover}