/* ═══════════════════════════════════════════════════════════════
   VAULT Pro Coach — design tokens
   Brand: Tiber #023440 · Turquoise #25EAE6 · Soapstone #FFFDF9
          Wan White #E6E1DB · Onix #121212 · Gray #A8A8A8
   ═══════════════════════════════════════════════════════════════ */
:root{
  --tiber:#023440; --turq:#25EAE6; --soap:#FFFDF9; --wan:#E6E1DB; --onix:#121212; --gray:#A8A8A8;

  --ground:#F1EDE6;   --surface:#FFFDF9;   --surface-2:#F5F1EA;  --surface-3:#EBE6DD;
  --ink:#121212;      --ink-2:#463F32;     --ink-3:#7A756D;      --ink-4:#A8A8A8;
  --line:#E6E1DB;     --line-2:#BDB5A9;
  --accent:#023440;   --accent-ink:#023440; --accent-wash:#E4ECEC; --on-accent:#FFFFFF;
  --cta:#023440;      --on-cta:#FFFFFF;
  --c-train:#14A0A0;  --c-trial:#B4507A;   --c-dexa:#B8791A;    --c-nutri:#6B5BD2;   --c-grid:#E6E1DB;
  --brand:#023440;    --brand-ink:#FFFFFF;  --brand-2:#0A4652;    --brand-3:#125A66; --brand-text:#B8CDD1; --brand-line:rgba(255,255,255,.09);
  --good:#17724B;     --good-wash:#DCF1E7;
  --warn:#8A5A0E;     --warn-wash:#F8EEDA;
  --bad:#A83822;      --bad-wash:#FAE3DE;
  --shadow:0 1px 2px rgba(2,52,64,.05), 0 8px 24px -14px rgba(2,52,64,.22);
  --shadow-lift:0 2px 8px rgba(2,52,64,.10), 0 24px 56px -20px rgba(2,52,64,.35);
  --r:10px; --r-sm:7px; --r-lg:16px;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Onest", "Inter", ui-sans-serif, system-ui, sans-serif;
  --nav-w:224px; --list-w:300px; --safe-b:env(safe-area-inset-bottom, 0px);
  color-scheme:light;
}
:root[data-vpc-theme="dark"]{
  --ground:#04161B;  --surface:#0A2730;  --surface-2:#0F323C;  --surface-3:#16414C;
  --ink:#EAF4F4;     --ink-2:#B4C9CD;    --ink-3:#8AA3A8;      --ink-4:#6E8A90;
  --line:#153E48;    --line-2:#2B6270;
  --accent:#25EAE6;  --accent-ink:#25EAE6; --accent-wash:#0B3A40; --on-accent:#022A2E;
  --cta:#25EAE6;     --on-cta:#022A2E;
  --c-train:#1FA29E; --c-trial:#D46B9C;  --c-dexa:#BD8628;    --c-nutri:#8F7FEE;   --c-grid:#153E48;
  --brand:#031E26;   --brand-2:#062B36;  --brand-3:#0B3B48;
  --good:#43C489;    --good-wash:#0B3227;
  --warn:#DFA33C;    --warn-wash:#33280E;
  --bad:#E9705A;     --bad-wash:#3A1B15;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.9);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0; touch-action:manipulation}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent-wash); color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
h1,h2,h3{text-wrap:balance}
svg.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ─────────────── SHELL ─────────────── */
.app{display:grid; grid-template-columns:var(--nav-w) 1fr; height:100dvh; overflow:hidden}

.nav{
  background:var(--brand); color:var(--brand-ink); display:flex; flex-direction:column;
  border-right:1px solid var(--brand-line); min-height:0;
}
.nav-brand{display:flex; align-items:center; gap:8px; padding:24px 24px 18px}
.nav-mark{width:24px; height:24px; color:#fff; flex:none}
.nav-word{height:14px; width:auto; color:#fff; display:block}
.nav-brand-sub{font-family:var(--display); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--turq); font-weight:600; margin-top:4px}
.nav-items{display:flex; flex-direction:column; gap:2px; padding:8px 10px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--brand-text); font-weight:500; font-size:13.5px; text-align:left; width:100%;
  transition:background .12s, color .12s;
}
.nav-item:hover{background:var(--brand-2); color:#fff}
.nav-item[aria-current="true"]{background:var(--brand-3); color:#fff}
.nav-item[aria-current="true"] svg{color:var(--turq)}
.nav-item .badge{margin-left:auto; background:var(--turq); color:#022A2E; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:100px; min-width:20px; text-align:center}
.nav-sep{height:1px; background:var(--brand-line); margin:8px 4px}
.nav-label{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-text); opacity:.7; padding:10px 12px 4px; font-weight:700}
.nav-foot{padding:12px 14px 14px; border-top:1px solid var(--brand-line); display:flex; align-items:center; gap:10px}
.nav-me{display:flex; align-items:center; gap:9px; min-width:0; flex:1; text-align:left; border-radius:var(--r-sm); padding:4px}
.nav-me:hover{background:var(--brand-2)}
.nav-me-name{font-weight:600; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-me-role{font-size:11px; color:var(--brand-text)}
.avatar{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.02em;
  background:var(--surface-3); color:var(--ink-2);
}
.avatar.on-dark{background:var(--turq); color:#022A2E}
.avatar-lg{width:46px; height:46px; border-radius:14px; font-size:15px}
.sync{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--brand-text); white-space:nowrap}
.sync-dot{width:7px; height:7px; border-radius:50%; background:var(--gray)}
.sync[data-state="cloud"] .sync-dot{background:#43C489; box-shadow:0 0 0 3px rgba(67,196,137,.25)}
.sync[data-state="saving"] .sync-dot{background:#DFA33C}
.sync[data-state="local"] .sync-dot{background:#DFA33C}
.sync[data-state="error"] .sync-dot{background:#E9705A}

.stage{display:grid; grid-template-columns:var(--list-w) 1fr; min-height:0; overflow:hidden}
.stage[data-layout="single"]{grid-template-columns:1fr}
.stage[data-layout="single"] .list{display:none}
.list{background:var(--surface); border-right:1px solid var(--line); display:grid; grid-template-rows:auto 1fr; min-height:0}
.list-head{padding:16px 14px 10px; display:grid; gap:10px}
.list-title{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.list-title h2{font-family:var(--display); font-size:15px; font-weight:700; margin:0; letter-spacing:-.01em}
.list-count{font-size:11.5px; color:var(--ink-3); font-weight:600}
.list-body{overflow-y:auto; padding:0 8px 24px; min-height:0; -webkit-overflow-scrolling:touch}
.main{overflow-y:auto; min-width:0; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; position:relative}

.mobile-bar{display:none}
.topbar-m{display:none}

/* ─────────────── CONTROLS ─────────────── */
.field{
  width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:8px 11px; color:var(--ink); font-size:14px; transition:border-color .12s, box-shadow .12s; min-height:38px;
}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.field::placeholder{color:var(--ink-4)}
textarea.field{resize:vertical; min-height:70px; line-height:1.5}
select.field{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size:5px 5px; background-repeat:no-repeat; padding-right:30px}
.field-sm{padding:5px 9px; font-size:13px; min-height:32px}
.search-wrap{position:relative; display:flex; align-items:center}
.search-wrap svg{position:absolute; left:10px; width:15px; height:15px; color:var(--ink-3); pointer-events:none}
.search-wrap .field{padding-left:31px}
.btn{
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 13px; border-radius:var(--r-sm); font-size:13px; font-weight:600; min-height:36px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface);
  transition:background .12s, border-color .12s, color .12s; white-space:nowrap;
}
.btn:hover{border-color:var(--ink-4); color:var(--ink)}
.btn svg{width:15px; height:15px}
.btn-primary{background:var(--cta); border-color:var(--cta); color:var(--on-cta)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-accent{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn-accent:hover{filter:brightness(1.08)}
.btn-ghost{border-color:transparent; background:transparent}
.btn-ghost:hover{background:var(--surface-2); border-color:transparent}
.btn-danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.btn-danger:hover{border-color:var(--bad); background:var(--bad-wash)}
.btn-sm{padding:5px 10px; font-size:12px; min-height:30px}
.btn-full{width:100%}
.btn-icon{padding:0; width:36px}
.btn-icon.btn-sm{width:30px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  padding:5px 11px; border-radius:100px; font-size:12px; font-weight:600; min-height:30px;
  border:1px solid var(--line-2); color:var(--ink-3); background:var(--surface); display:inline-flex; align-items:center; gap:5px;
}
.chip[aria-pressed="true"], .chip.on{background:var(--cta); border-color:var(--cta); color:var(--on-cta)}
.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.pill.good{background:var(--good-wash); color:var(--good)}
.pill.warn{background:var(--warn-wash); color:var(--warn)}
.pill.bad{background:var(--bad-wash); color:var(--bad)}
.pill.muted{background:var(--surface-3); color:var(--ink-3)}
.pill.accent{background:var(--accent-wash); color:var(--accent-ink)}
.label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.modal .label{font:600 14px/1.2 var(--display); text-transform:none; letter-spacing:-.01em; padding:8px 0 6px; border-bottom:1px solid var(--line); color:var(--ink)}
.muted{color:var(--ink-3)}
.small{font-size:12px}

/* ─────────────── LIST ROWS ─────────────── */
.row-btn{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  width:100%; text-align:left; padding:9px 10px; border-radius:var(--r-sm); margin-bottom:1px; min-height:48px;
  transition:background .1s;
}
.row-btn:hover{background:var(--surface-2)}
.row-btn[aria-current="true"]{background:var(--accent-wash)}
.row-btn[aria-current="true"] .row-name{color:var(--accent-ink)}
.row-meta{min-width:0}
.row-name{display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em}
.row-sub{display:block; font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none}
.dot.paused{background:var(--warn)} .dot.gone{background:var(--ink-4)}
.list-section{padding:14px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.empty{flex:1; display:grid; place-items:center; padding:40px 24px; text-align:center}
.empty-in{max-width:360px}
.empty h2{font-family:var(--display); font-size:19px; font-weight:700; margin:0 0 8px; letter-spacing:-.015em}
.empty p{color:var(--ink-3); margin:0 0 18px; font-size:13.5px}
.empty-mini{padding:18px 12px; color:var(--ink-3); font-size:13px; text-align:center}

/* ─────────────── PAGE / CLIENT HEADER ─────────────── */
.page{padding:22px 28px 80px; display:grid; gap:18px; align-content:start; width:100%; max-width:1180px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.page-head h1{font-family:var(--display); font-size:24px; font-weight:700; margin:0; letter-spacing:-.022em; line-height:1.15}
.page-head p{margin:4px 0 0; color:var(--ink-3); font-size:13px}
.chead{padding:20px 28px 0; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:5}
.chead-top{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.chead-id{display:flex; align-items:center; gap:13px; min-width:0; flex:1}
.chead h1{font-family:var(--display); font-size:22px; font-weight:700; margin:0; letter-spacing:-.022em; line-height:1.2}
.chead-facts{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; align-items:center}
.fact{font-size:12px; color:var(--ink-3); font-weight:500}
.fact b{color:var(--ink-2); font-weight:600}
.chead-actions{display:flex; gap:7px; flex-wrap:wrap}
.tabs{display:flex; align-items:center; gap:2px; margin-top:14px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:9px 14px 10px; font-size:13.5px; font-weight:600; color:var(--ink-3);
  border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px; min-height:40px;
}
.tab:hover{color:var(--ink)}
.tab[aria-current="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab svg{width:15px; height:15px; opacity:.8}
.alert{
  display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:var(--r);
  background:var(--warn-wash); color:var(--warn); font-weight:500; font-size:13px; border:1px solid transparent;
}
.alert.bad{background:var(--bad-wash); color:var(--bad)}
.alert.info{background:var(--accent-wash); color:var(--accent-ink)}
.alert svg{width:17px; height:17px; flex:none; margin-top:1px}
.alert .t{flex:1; white-space:pre-wrap}

/* ─────────────── CARDS & GRIDS ─────────────── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:0}
.card-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.card-title{font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.012em; margin:0; flex:1; min-width:120px}
.card-body{padding:16px 18px}
.card-foot{padding:10px 18px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.kv{display:grid; grid-template-columns:fit-content(150px) minmax(0,1fr); gap:6px 14px; font-size:13.5px}
.kv dt{color:var(--ink-3); font-weight:500; min-width:0; overflow-wrap:anywhere} .kv dd{margin:0; font-weight:500; min-width:0; overflow-wrap:anywhere}
.stat{display:grid; gap:2px}
.stat-k{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.stat-v{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.stat-v small{font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-left:3px}
.stat-d{font-size:11.5px; font-weight:600}
.stat-d.up{color:var(--good)} .stat-d.down{color:var(--bad)} .stat-d.flat{color:var(--ink-3)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px}
.table-wrap{overflow-x:auto; scrollbar-width:thin}
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.tbl th.num{text-align:right}
.tbl tr.clickable{cursor:pointer} .tbl tr.clickable:hover td{background:var(--surface-2)}
.form-grid{display:grid; gap:13px}
.form-row{display:grid; gap:5px}
.form-row label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.form-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px}
.yesno{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.yesno label{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; background:var(--surface)}
.yesno label.yes{border-color:var(--warn); background:var(--warn-wash)}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden}
.seg button{padding:5px 11px; font-size:12px; font-weight:600; color:var(--ink-3); min-height:30px}
.seg{background:var(--surface-2)}
.seg button[aria-pressed="true"]{background:var(--cta); color:var(--on-cta)}
.scale{display:grid; grid-template-columns:repeat(10,1fr); gap:4px}
.scale button{min-height:38px; border-radius:7px; border:1px solid var(--line-2); font-weight:600; font-size:12.5px; color:var(--ink-3)}
.scale button[aria-pressed="true"]{background:var(--cta); border-color:var(--cta); color:var(--on-cta)}
.note-list{display:grid; gap:10px}
.note{padding:11px 13px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; display:grid; gap:4px; min-width:0}
.note-meta{font-size:11.5px; color:var(--ink-3); display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0}
.note-meta b{color:var(--ink-2)}
.note-txt{white-space:pre-wrap; min-width:0; overflow-wrap:anywhere}
.note.flag{background:var(--bad-wash); border-color:transparent}
.link-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-decoration:none; color:inherit}
.link-row:hover{border-color:var(--accent)}
.link-row .ic{width:36px; height:36px; border-radius:9px; background:var(--accent-wash); color:var(--accent-ink); display:grid; place-items:center; flex:none}

/* ─────────────── TRAINING ─────────────── */
.prog-list{display:grid; gap:12px}
.prog{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 16px; text-align:left; width:100%; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); transition:border-color .12s}
.prog:hover{border-color:var(--accent)}
.prog-month{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-wash); padding:6px 9px; border-radius:8px; text-align:center; line-height:1.15; min-width:58px}
.prog-month b{display:block; font-size:18px; letter-spacing:-.01em}
.prog-title{display:block; font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.012em}
.prog-sub{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.prog-bars{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.wbar{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--surface-2); padding:3px 8px 3px 6px; border-radius:100px}
.wbar i{font-style:normal; font-family:var(--display); font-weight:700; width:18px; height:18px; border-radius:5px; background:var(--cta); color:var(--on-cta); display:grid; place-items:center; font-size:11px}
.wbar.done i{background:var(--good)}
.prog.archived{opacity:.75}
.prog.archived .prog-month{background:var(--surface-3); color:var(--ink-3)}

.wtabs{display:flex; gap:6px; flex-wrap:wrap}
.wtab{display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); font-weight:600; font-size:13px; color:var(--ink-2); min-height:44px}
.wtab[aria-current="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.wtab .l{font-family:var(--display); font-weight:700; width:28px; height:28px; border-radius:7px; background:var(--surface-3); display:grid; place-items:center; font-size:13px}
.wtab[aria-current="true"] .l{background:var(--cta); color:var(--on-cta)}
.wtab small{color:var(--ink-3); font-weight:600}
.srail{display:flex; gap:6px; overflow-x:auto; padding:2px 2px 6px; align-items:stretch; scrollbar-width:thin}
.schip{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:8px 11px; min-width:92px; text-align:left; display:grid; gap:2px; align-content:start; flex:none; min-height:56px;
}
.schip:hover{border-color:var(--ink-4)}
.schip[aria-current="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.schip-n{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.01em}
.schip[aria-current="true"] .schip-n{color:var(--accent-ink)}
.schip-d{font-size:11px; color:var(--ink-3); font-weight:500}
.schip-c{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.schip-add{min-width:64px; display:grid; place-items:center; border-style:dashed; color:var(--accent-ink); font-weight:700; font-size:12px; text-align:center}
.schip-add:hover{border-color:var(--accent)}

.sess{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.sess-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.sess-code{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink)}
.sess-code small{font-size:13px; color:var(--ink-3); font-weight:600; margin-left:6px; letter-spacing:0}
.sess-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto}
.sess-body{padding:14px 18px 18px; display:grid; gap:14px}
.rules{background:var(--accent-wash); border-radius:var(--r); padding:10px 13px}
.rules .label{color:var(--accent-ink); margin-bottom:4px; display:block}
.rules textarea{width:100%; background:transparent; border:none; resize:none; overflow:hidden; min-height:40px; font-size:13px; line-height:1.55; color:var(--ink); padding:0}
.rules textarea:focus{outline:none}
.block{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.block-head{display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.block-name{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.01em; background:transparent; border:none; padding:3px 5px; border-radius:5px; flex:1; min-width:0}
.block-name:focus{outline:none; background:var(--surface); box-shadow:0 0 0 1px var(--accent)}
.block-count{font-size:11.5px; color:var(--ink-3); font-weight:600}
.sess-body{container-type:inline-size}
.ex-head,.ex{display:grid; grid-template-columns:minmax(220px,1.2fr) minmax(300px,1.3fr) 108px 100px; gap:10px; align-items:start; padding:9px 12px; min-width:0}
.ex-head{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); padding-top:6px; padding-bottom:6px}
.ex{border-bottom:1px solid var(--line)}
.ex:last-child{border-bottom:none}
.ex:hover{background:var(--surface-2)}
.ex-name{background:transparent; border:none; font-size:13.5px; font-weight:600; width:100%; padding:5px 6px; border-radius:5px; letter-spacing:-.005em; min-height:32px; resize:none; overflow:hidden; line-height:1.35; display:block}
.ex-name:focus{outline:none; background:var(--surface); box-shadow:0 0 0 1px var(--accent)}
.ex-name::placeholder{color:var(--ink-4); font-weight:400}
.ex-note{background:transparent; border:none; font-size:12px; color:var(--ink-3); width:100%; padding:3px 6px; border-radius:5px; margin-top:1px; min-height:26px; resize:none; overflow:hidden; line-height:1.4; display:block}
.ex-note:focus{outline:none; background:var(--surface); box-shadow:0 0 0 1px var(--accent); color:var(--ink)}
.ex-note::placeholder{color:var(--ink-4)}
.sets{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.setchip{
  border:1px solid var(--line-2); border-radius:7px; padding:5px 8px; font-size:12.5px; min-height:32px;
  font-weight:600; color:var(--ink-2); background:var(--surface); white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1.3;
}
.setchip:hover{border-color:var(--accent); color:var(--accent-ink)}
.setchip .kg{color:var(--ink-3); font-weight:500} .setchip .rir{color:var(--ink-3); font-weight:500}
.setchip.add{border-style:dashed; color:var(--ink-3); width:32px; padding:0; display:inline-grid; place-items:center}
.setchip.empty{color:var(--ink-4); font-weight:500; font-style:italic; border-style:dashed}
.setchip.planned{border-style:dashed; color:var(--ink-3); background:transparent}
.setchip.planned b{color:var(--ink-3)}
.hard{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:100px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--ink-2)}
.hard.short{background:var(--warn-wash); color:var(--warn)}
.hard.ok{background:var(--good-wash); color:var(--good)}
.schip .miss{position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--warn)}
.schip{position:relative}
.dot.risk{background:var(--warn)}
.warmup{display:flex; gap:10px; align-items:center; padding:8px 12px; border:1px dashed var(--line-2); border-radius:var(--r)}
.warmup input{flex:1; background:transparent; border:none; font-size:13px; padding:2px 0}
.warmup input:focus{outline:none}
.last{font-size:12px; color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums}
.last b{color:var(--ink-2); font-weight:600}
.trend{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:6px; white-space:nowrap; font-variant-numeric:tabular-nums}
.trend.up{background:var(--good-wash); color:var(--good)} .trend.flat{background:var(--surface-2); color:var(--ink-3)} .trend.down{background:var(--bad-wash); color:var(--bad)} .trend.none{color:var(--ink-4)}
.trend svg{width:11px; height:11px}
.ex-tools{display:flex; gap:2px; justify-content:flex-end}
.tool{width:30px; height:30px; border-radius:6px; display:grid; place-items:center; color:var(--ink-4)}
.tool:hover{background:var(--surface-3); color:var(--ink)}
.tool.video{color:var(--accent-ink)}
.tool.video.has{color:var(--accent-ink); background:var(--accent-wash)}
.tool svg{width:15px; height:15px}
.block-foot{padding:8px 12px; display:flex; gap:7px; border-top:1px solid var(--line); flex-wrap:wrap}
.metcon{border:1px dashed var(--line-2); border-radius:var(--r); padding:12px 14px; display:grid; gap:8px}
.metcon-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:8px}
.metcon-grid .form-row label{font-size:10.5px}
.nextcoach{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r); padding:10px 13px; background:var(--surface-2)}
.nextcoach textarea{width:100%; background:transparent; border:none; resize:none; overflow:hidden; min-height:44px; font-size:13px; line-height:1.55; color:var(--ink); padding:0}
.nextcoach textarea:focus{outline:none}

/* history chart */
.chart-wrap{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:12px}
canvas.chart{display:block; width:100%; height:170px}

/* ─────────────── TASKS ─────────────── */
.board{display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:14px; align-items:start}
.col{background:var(--surface-2); border-radius:var(--r-lg); padding:10px; display:grid; gap:8px; align-content:start; min-height:120px; border:1px solid var(--line)}
.col-head{display:flex; align-items:center; justify-content:space-between; padding:4px 6px 6px; font-family:var(--display); font-weight:700; font-size:13px}
.col-head .n{font-size:11.5px; color:var(--ink-3); font-weight:600}
.task{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; display:grid; gap:7px; text-align:left; width:100%; box-shadow:var(--shadow); cursor:pointer}
.task:hover{border-color:var(--accent)}
.task-t{font-weight:600; font-size:13.5px; letter-spacing:-.005em; line-height:1.35}
.task-t.done{text-decoration:line-through; color:var(--ink-3)}
.task-m{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--ink-3)}
.prio{width:8px; height:8px; border-radius:50%; flex:none}
.prio.high{background:var(--bad)} .prio.medium{background:var(--warn)} .prio.low{background:var(--good)}
.due{display:inline-flex; align-items:center; gap:3px}
.due svg{width:12px; height:12px}
.due.overdue{color:var(--bad); font-weight:700}
.due.today{color:var(--warn); font-weight:700}
.task.row{grid-template-columns:auto 1fr; align-items:start; gap:10px}
.task.row .check{margin-top:2px; cursor:pointer}
.task.row .check:hover{border-color:var(--good); color:var(--good)}
.task-list{display:grid; gap:8px}
.check{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-2); display:grid; place-items:center; flex:none; color:transparent}
.check.on{background:var(--good); border-color:var(--good); color:#fff}
.check svg{width:13px; height:13px}
.task.row{grid-template-columns:auto 1fr; align-items:start}

/* ─────────────── VACATIONS ─────────────── */
.vac{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.vac > span:nth-child(2){flex:1 1 150px; min-width:0}
.vac > span:last-child{flex:0 0 auto; flex-wrap:wrap}
.vac-d{font-family:var(--display); font-weight:700; font-size:13px; text-align:center; line-height:1.15; background:var(--surface-2); border-radius:8px; padding:6px 8px; min-width:64px}
.vac-d small{display:block; font-size:10px; letter-spacing:.06em; color:var(--ink-3); font-weight:700}
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px}
.cal-h{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); text-align:center; padding:4px 0}
.cal-d{aspect-ratio:1; min-width:0; overflow:hidden; border-radius:7px; display:grid; place-items:center; font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-2); background:var(--surface-2); position:relative}
.cal-d.off{color:var(--ink-4); background:transparent}
.cal-d.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal.mini .cal-d{aspect-ratio:auto; min-height:34px; cursor:pointer; border:none}
.cal.mini .cal-d:hover{background:var(--accent-wash)}
.cal.mini .cal-d.sel{background:var(--cta); color:var(--on-cta); font-weight:700}
.task.row.unread{border-color:var(--accent)}
#bellBtn .badge{background:var(--turq); color:#022A2E; font-size:9.5px; font-weight:700; padding:0 5px; border-radius:100px; min-width:16px; line-height:16px}
.cal-d .who{position:absolute; bottom:3px; left:0; right:0; display:flex; gap:2px; justify-content:center}
.cal-d .who i{width:6px; height:6px; border-radius:50%; background:var(--accent)}
.cal-d .who i.p{background:var(--warn)}
.cal-nav{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cal-nav h3{margin:0; font-family:var(--display); font-size:15px; font-weight:700}

/* ─────────────── LIBRARY ─────────────── */
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.res{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); text-decoration:none; color:inherit; align-items:start; box-shadow:var(--shadow)}
.res:hover{border-color:var(--accent)}
.res .ic{width:42px; height:42px; border-radius:11px; background:var(--brand); color:var(--turq); display:grid; place-items:center}
.res .ic svg{width:20px; height:20px}
.res-t{display:block; font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:-.005em; line-height:1.3}
.res-d{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.45}
.res-m{display:block; font-size:11px; color:var(--ink-3); margin-top:6px; font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.lib-cat{display:grid; gap:10px}
.lib-cat h3{margin:0; font-family:var(--display); font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px}
.lib-cat h3 .n{font-size:12px; color:var(--ink-3); font-weight:600}

/* ─────────────── KPI CHARTS ─────────────── */
.kpi-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.kpi-head .muted{font-size:12px}
.monthsel{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.monthsel::-webkit-scrollbar{display:none}
.monthsel button{flex:none; padding:5px 10px; border-radius:100px; font-size:12px; font-weight:600; border:1px solid var(--line-2); color:var(--ink-3); min-height:30px}
.monthsel button[aria-pressed="true"]{background:var(--cta); border-color:var(--cta); color:var(--on-cta)}
.monthsel button.partial{border-style:dashed}
.chart{width:100%; height:auto; display:block; overflow:visible}
.chart .grid{stroke:var(--c-grid); stroke-width:1}
.chart .axis{fill:var(--ink-3); font-size:10.5px; font-family:var(--sans)}
.chart .lbl{fill:var(--ink-2); font-size:11px; font-weight:600; font-family:var(--sans)}
.chart rect.bar{transition:opacity .12s}
.chart .hit{fill:transparent; cursor:crosshair}
.chart .hit:hover ~ rect.bar{opacity:1}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:8px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:5px}
.tip{position:fixed; z-index:400; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; box-shadow:var(--shadow-lift); padding:8px 10px; font-size:12px; pointer-events:none; min-width:140px}
.tip b{display:block; font-family:var(--display); font-size:12.5px; margin-bottom:3px}
.tip .r{display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums}
.tip .r i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px}
.share{display:flex; height:10px; border-radius:100px; overflow:hidden; background:var(--surface-3); gap:2px}
.share span{display:block; height:100%}
.report{display:grid; gap:10px}
.report .stats .stat-v{font-size:19px}
.report details summary{cursor:pointer; font-weight:600; font-size:13px; color:var(--accent-ink); list-style:none}
.report details summary::before{content:"› "; color:var(--ink-3)}
.report details[open] summary::before{content:"⌄ "}
.report ul{margin:6px 0 0; padding-left:18px; font-size:13px; display:grid; gap:4px; color:var(--ink-2)}

/* ─────────────── SESSIONS BY MONTH · ROUTINES · ADAPTATIONS ─────────────── */
.sessrow-wrap{display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center}
.sessrow-wrap .tool{width:38px; height:38px; color:var(--accent-ink); background:var(--accent-wash)}
.sessrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow)}
.sessrow:hover{border-color:var(--accent)}
.sessrow-code{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.02em; min-width:54px}
.sessrow-code small{font-size:12px; color:var(--ink-3); font-weight:600}
.sessrow-main{min-width:0; font-size:13.5px}
.sessrow-main .row-sub{white-space:normal}
/* "not done": the writing stays, struck through — what the coach wrote is still readable, but nothing counts */
.ex.skipped .ex-name, .ex.skipped .ex-note, .ex.skipped .setchip, .ex.skipped .last{text-decoration:line-through; text-decoration-color:var(--warn); text-decoration-thickness:1.5px; opacity:.62}
.ex.skipped{background:repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface) 10px 20px)}
.ex.skipped .trend{opacity:.5}
.ex.alt{background:var(--accent-wash); border-left:3px solid var(--accent)}
.bday{display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.bday .label{width:100%}
.bday .chip{background:var(--warn-wash); border-color:transparent; color:var(--warn); min-height:30px}
.link-row{cursor:pointer; width:100%}
.monthsel button .muted{font-weight:600}

/* ─────────────── MODAL / SHEET ─────────────── */
.scrim{position:fixed; inset:0; background:rgba(2,26,32,.55); backdrop-filter:blur(3px); display:grid; place-items:center; padding:16px; z-index:100}
.modal{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lift); width:100%; max-width:580px; max-height:88dvh; display:flex; flex-direction:column; border:1px solid var(--line); overflow:hidden}
.modal.wide{max-width:760px}
.modal-head{padding:16px 18px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px}
.modal-title{font-family:var(--display); font-size:17px; font-weight:700; margin:0; letter-spacing:-.018em; flex:1}
.modal-sub{font-size:12.5px; color:var(--ink-3); margin:3px 0 0}
.modal-body{padding:18px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.modal-foot{padding:12px 18px calc(12px + var(--safe-b)); border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); flex-wrap:wrap}
.modal-foot .left{margin-right:auto}
.seteditor{display:grid; gap:8px}
.set-line,.set-line-head{display:grid; grid-template-columns:30px 1fr 1fr 1fr 34px; gap:8px; align-items:center}
.set-line-head{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.set-n{font-family:var(--display); font-weight:700; font-size:12px; color:var(--ink-3); text-align:center; background:var(--surface-2); border-radius:6px; padding:8px 0}
.numfield{width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 6px; font-size:16px; font-variant-numeric:tabular-nums; text-align:center; font-weight:600; min-height:42px}
.numfield:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.numfield::-webkit-inner-spin-button,.numfield::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.numfield{-moz-appearance:textfield}
.set-details{border:1px solid var(--line); border-radius:var(--r); padding:8px 12px}
.set-details summary{cursor:pointer; font-weight:600; font-size:13px; color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:6px; min-height:32px}
.set-details summary::before{content:"›"; display:inline-block; transition:transform .12s; color:var(--ink-3)}
.set-details[open] summary::before{transform:rotate(90deg)}
.set-details > div{display:grid; gap:10px; padding-top:8px}
.quick{display:flex; gap:8px; align-items:center}
.hint{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.hint code{background:var(--surface-2); padding:1px 5px; border-radius:4px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px}
.ac{position:fixed; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-lift); z-index:200; max-height:240px; overflow-y:auto; padding:4px; min-width:240px}
.ac-item{display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm); font-size:13px; font-weight:500}
.ac-item:hover,.ac-item[data-active="true"]{background:var(--accent-wash); color:var(--accent-ink)}
.ac-item small{display:block; font-size:10.5px; color:var(--ink-4); font-weight:500}
.menu{position:fixed; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-lift); z-index:210; padding:5px; min-width:200px; display:grid; gap:1px}
.menu button{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border-radius:var(--r-sm); font-size:13px; font-weight:500; min-height:38px}
.menu button:hover{background:var(--surface-2)}
.menu button svg{width:15px; height:15px; color:var(--ink-3)}
.menu .sep{height:1px; background:var(--line); margin:3px 0}
.toast{position:fixed; bottom:calc(20px + var(--safe-b)); left:50%; transform:translateX(-50%) translateY(60px); background:var(--cta); color:var(--on-cta); padding:10px 16px; border-radius:100px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lift); z-index:300; transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s; opacity:0; pointer-events:none; max-width:90vw; text-align:center}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.identity{display:grid; gap:8px}
.identity button{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r); text-align:left; font-weight:600; min-height:52px}
.identity button:hover{border-color:var(--accent); background:var(--accent-wash)}
.identity button small{display:block; font-weight:500; color:var(--ink-3); font-size:12px}
.kpi-note{display:grid; gap:6px; font-size:13px; color:var(--ink-2)}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width:1100px){
  :root{--nav-w:72px; --list-w:270px}
  .nav-brand{padding:20px 0 12px; justify-content:center}
  .nav-brand .wordmark, .nav-brand-sub, .nav-item span, .nav-label, .nav-me-name, .nav-me-role, .sync span{display:none}
  .nav-item{justify-content:center; padding:12px}
  .nav-item .badge{position:absolute; transform:translate(16px,-12px); margin:0}
  .nav-item{position:relative}
  .nav-foot{flex-direction:column; align-items:center; gap:8px}
  .page{padding:18px 20px 80px}
  .chead{padding:16px 20px 0}
  .board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .nav{display:none}
  .mobile-bar{
    display:grid; grid-template-columns:repeat(var(--tabs,4),1fr); background:var(--brand); border-top:1px solid var(--brand-line);
    padding:6px 4px calc(6px + var(--safe-b)); z-index:50;
  }
  .mobile-bar button{display:grid; justify-items:center; gap:3px; padding:6px 2px; color:var(--brand-text); font-size:10px; font-weight:600; border-radius:8px; position:relative}
  .mobile-bar button[aria-current="true"]{color:#fff}
  .mobile-bar button[aria-current="true"] svg{color:var(--turq)}
  .mobile-bar .badge{position:absolute; top:2px; right:14%; background:var(--turq); color:#022A2E; font-size:9.5px; font-weight:700; padding:0 5px; border-radius:100px; min-width:16px}
  .stage{grid-template-columns:1fr}
  .stage[data-layout="split"][data-mobile="list"] .main{display:none}
  .stage[data-layout="split"][data-mobile="main"] .list{display:none}
  .stage[data-layout="single"] .list{display:none}
  .list{border-right:none}
  .topbar-m{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:6; min-height:52px}
  .topbar-m .mark{width:20px; height:20px; color:var(--brand); flex:none}
  .topbar-m .me-m{display:flex; align-items:center; gap:6px}
  .topbar-m .me-m .sync-dot{width:8px; height:8px}
  .page-head > div > p{display:none}
  .topbar-m .t{font-family:var(--display); font-weight:700; font-size:15px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .page{padding:14px 14px 40px; gap:14px}
  .chead{padding:14px 14px 0; position:static}
  .chead h1{font-size:19px}
  .grid-2,.grid-3,.form-2,.form-3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr; gap:2px 0} .kv dt{margin-top:8px}
  .setchip{min-height:38px; font-size:13.5px; padding:6px 10px}
  .chead-top{flex-direction:column; align-items:stretch; gap:10px}
  .chead h1{display:none}
  .chead-actions{display:grid; grid-template-columns:1fr 1fr}
  .tabs{display:flex; gap:0; margin-left:-16px; margin-right:-16px; padding:0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
  .tab{padding:9px 12px; justify-content:center; font-size:13px; min-height:46px; white-space:nowrap; flex:0 0 auto; scroll-snap-align:start}
  .tab svg{display:none}
  .toast{bottom:calc(76px + var(--safe-b))}
  .mobile-bar .badge{right:calc(50% - 22px)}
  .card-head .muted.small{flex-basis:100%; order:3}
  .schip{min-width:84px}
  .metcon-grid{grid-template-columns:1fr}
  .board{grid-template-columns:1fr}
  .scrim{padding:0; align-items:end}
  .modal{max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:94dvh}
  .set-line,.set-line-head{grid-template-columns:28px 1fr 1fr 1fr 30px; gap:6px}
  .stats{grid-template-columns:1fr 1fr}
  .page-head h1{font-size:20px}
  .prog{grid-template-columns:auto 1fr; }
  .prog > .prog-go{display:none}
}
@container (max-width:720px){
  .ex-head{display:none}
  /* minmax(0,…): a textarea has an intrinsic width of ~20 characters and would otherwise push the row wider than the phone */
  .ex{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name tools" "sets sets" "last last"; gap:8px; padding:12px}
  .ex > .c-name{grid-area:name} .ex > .c-sets{grid-area:sets} .ex > .c-trend{grid-area:last; display:flex; gap:8px; align-items:center; flex-wrap:wrap} .ex > .ex-tools{grid-area:tools}
  .ex .last{margin-top:0}
}
@media (max-width:1100px){
  .sync .sync-dot{display:block}
  .chead-id{flex-basis:100%}
}
@media (pointer:coarse){
  .field,.field-sm,select.field,.ex-name,.ex-note,.block-name,.rules textarea,.nextcoach textarea,.warmup input,#f-quick,.metcon-in{font-size:16px}
  .tool{width:40px; height:40px}
  .btn-sm{min-height:40px}
  .setchip{min-height:44px; padding:8px 12px; font-size:14px}
  .setchip.add{width:44px}
  .chip{min-height:38px}
  .field-sm{min-height:40px}
  .seg button{min-height:40px}
  .tab{min-height:46px}
  .yesno input{width:22px; height:22px}
  .check{width:26px; height:26px}
  .ex-name{border-bottom:1px dashed var(--line-2); border-radius:0}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important; animation-duration:.01ms !important}}

/* team calendar: coloured initials per person */
.cal-d .n{line-height:1}
.cal-d.busy{grid-template-rows:auto auto; align-content:center; gap:2px; padding:3px 2px}
.cal-d .who2{display:flex; gap:2px; justify-content:center; flex-wrap:wrap; max-width:100%}
.cal-d .who2 i{font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.02em; color:#fff; padding:1px 3px; border-radius:4px; line-height:1.2; min-width:14px; text-align:center}
.cal-d .who2 i.k-homeoffice{background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px)}
.cal-d .who2 i.k-special, .cal-d .who2 i.k-event{outline:2px dotted rgba(255,255,255,.85); outline-offset:-2px}
@media (max-width:720px){ .cal-d .who2 i{font-size:7.5px; padding:1px 2px; min-width:12px} }

/* injury log */
.injlog{display:grid; gap:6px}
.inj{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--surface)}
.inj-meta{display:flex; gap:8px; align-items:center; margin-bottom:2px}
.inj-text{display:block}
.inj.resolved{opacity:.6}
.inj.resolved .inj-text{text-decoration:line-through; text-decoration-color:var(--ink-4)}

/* DEXA progress small multiples */
.dexa-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px}
.dexa-c{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:grid; gap:4px}
.dexa-c-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px}
.dexa-c .stat-d{font-size:12px}

/* routine tiers */
.tiers{display:grid; gap:10px}
.tier{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.tier.open{border-color:var(--line-2)}
.tier-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; width:100%; padding:12px 14px; background:transparent; border:none; text-align:left; cursor:pointer; font:inherit; color:inherit}
.tier-head:hover{background:var(--surface-2)}
.tier-t{display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:15px; white-space:nowrap}
.tier-t svg{width:18px; height:18px; color:var(--accent)}
.tier-t .n{font-family:var(--sans); font-size:12px; color:var(--ink-3); font-weight:500}
.tier-sub{font-size:12.5px; color:var(--ink-3); line-height:1.35}
@media (max-width:720px){ .tier-head{grid-template-columns:1fr auto} .tier-sub{grid-column:1 / -1} }

/* in-app document viewer */
.viewer iframe{width:100%; height:min(70vh, 720px); border:1px solid var(--line); border-radius:8px; background:#fff}
.modal-foot .left{margin-right:auto}

/* ── Client report ── */
.rp-ctl{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.rp-notes summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-2)}
.rp-wrap{margin-top:16px}
.report-doc{background:#FFFDF9; color:#1B2A33; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; max-width:820px; margin:0 auto; font-family:var(--sans); font-size:14px; line-height:1.5; box-shadow:var(--shadow)}
.rp-head{background:#023440; color:#fff; padding:28px 32px 24px}
.rp-word{height:22px; width:auto; color:#fff; fill:#fff; margin-bottom:22px; display:block}
.rp-kicker{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#25EAE6; font-weight:600}
.rp-head h1{font-family:var(--display); font-weight:600; font-size:28px; margin:4px 0 6px; color:#fff; letter-spacing:-.01em}
.rp-meta{font-size:13px; color:rgba(255,255,255,.78)}
.rp-sec{padding:22px 32px; border-top:1px solid #E7E1D6}
.rp-sec:first-of-type{border-top:none}
.rp-sec h2{font-family:var(--display); font-weight:600; font-size:18px; margin:0 0 4px; color:#023440}
.rp-sec h3{font-family:var(--display); font-weight:600; font-size:14.5px; margin:14px 0 4px; color:#023440}
.rp-sec p{margin:8px 0 0}
.rp-sub{color:#5E6A72; font-size:13px; margin:0 0 10px !important}
.rp-lead{font-size:15.5px; line-height:1.55; margin:14px 0 0 !important}
.rp-note{font-size:13.5px; color:#2C3A44}
.rp-quote{font-style:italic; color:#2C3A44; border-left:3px solid #25EAE6; padding-left:12px}
.rp-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px}
.rp-stats > div{background:#F1EDE6; border-radius:10px; padding:12px 14px; display:grid; gap:2px}
.rp-stats b{font-family:var(--display); font-size:24px; font-weight:600; color:#023440; line-height:1.1}
.rp-stats b small{font-size:12px; font-weight:500; color:#5E6A72; margin-left:3px}
.rp-stats span{font-size:12px; color:#5E6A72}
.rp-stats.sm b{font-size:19px}
.rp-tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.rp-tbl th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#5E6A72; padding:6px 8px; border-bottom:1px solid #D9D2C6}
.rp-tbl td{padding:8px; border-bottom:1px solid #EEE9E0; vertical-align:middle}
.rp-tbl .num, .rp-tbl th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.rp-dim{font-size:11.5px; color:#7A756D}
.rp-tbl .good, .rp-note .good{color:#17724B; font-weight:600} .rp-tbl .bad{color:#A83822; font-weight:600} .rp-tbl .flat{color:#7A756D}
.spark{width:120px; height:28px; display:block}
.rp-list{margin:6px 0 0; padding-left:18px} .rp-list li{margin:4px 0}
.rp-foot{padding:20px 32px 26px; border-top:1px solid #E7E1D6; background:#F7F4EE}
.rp-foot p{margin:0 0 6px}
.rp-send{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px}
.rp-send .btn{justify-content:flex-start}
.btn.disabled{opacity:.5; pointer-events:none}
@media (max-width:720px){ .rp-head, .rp-sec, .rp-foot{padding-left:18px; padding-right:18px} .rp-head h1{font-size:23px} .spark{width:80px} }
#printRoot{display:none}
@media print{
  body.printing > :not(#printRoot){display:none !important}
  body.printing #printRoot{display:block}
  body.printing{background:#fff}
  #printRoot .report-doc{max-width:none; border:none; box-shadow:none; border-radius:0}
  #printRoot .rp-head{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  #printRoot .rp-stats > div, #printRoot .rp-foot{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  #printRoot .rp-sec{break-inside:avoid}
  @page{size:A4; margin:12mm}
}

/* exercise library */
.ex-ctl{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.ex-list{display:grid; padding:0 12px 12px}
.exrow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:9px 6px; border-top:1px solid var(--line)}
.exrow:first-child{border-top:none}
.exrow-main{display:grid; gap:2px; min-width:0; font-size:13.5px}
.exrow-meta{font-size:12px; color:var(--ink-3)}
.exrow-cue{font-size:12.5px; color:var(--ink-2); line-height:1.4}
.exrow-act{display:flex; gap:6px; align-items:center; white-space:nowrap}
@media (max-width:720px){ .exrow{grid-template-columns:1fr} .exrow-act{justify-content:flex-start} }

/* pack / membership facts and alerts */
.fact.pack, .fact.memb{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line)}
.fact.pack svg, .fact.memb svg{width:12px; height:12px}
.fact.bad{background:var(--bad-wash); color:var(--bad); border-color:transparent}
.fact.bad b{color:var(--bad)}
.row-alert{display:block; color:var(--bad); font-weight:600}
.sub-h{margin:0 0 8px; font-family:var(--display); font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px}
.sub-h .n{font-family:var(--sans); font-size:12px; color:var(--ink-3); font-weight:500}

/* owners to do */
.ot-add{display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center}
.ot-list{display:grid; gap:6px}
.ot{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.ot.done{opacity:.6}
.ot.done .ot-title{text-decoration:line-through; text-decoration-color:var(--ink-4)}
.ot-check{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-2); background:var(--surface); cursor:pointer; display:grid; place-items:center; color:var(--good); padding:0; margin-top:1px}
.ot-check svg{width:14px; height:14px}
.ot-main{display:grid; gap:4px; min-width:0}
.ot-title{font-size:13.5px; line-height:1.4}
.ot-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px}
@media (max-width:720px){ .ot-add{grid-template-columns:1fr 1fr} .ot-add input#ot-title{grid-column:1 / -1} .ot-add button{grid-column:1 / -1} }
.card-body.grid-2 > div{min-width:0}
@media (max-width:1100px){ .card-body.grid-2{grid-template-columns:1fr} }

/* leads */
.lead-filters{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-left:auto}
.tbl.leads td{vertical-align:middle}
.tbl.leads tr.warnrow td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.fu-cell{white-space:nowrap}
.fu-cell label{display:inline-flex; align-items:center; gap:2px; margin-right:6px; font-size:11px; color:var(--ink-3); cursor:pointer}
.lead-st.client{color:var(--good); font-weight:600} .lead-st.unqualified{color:var(--ink-4)} .lead-st.booked, .lead-st.in-contact{color:var(--warn); font-weight:600}
.lead-filters .field{width:auto; max-width:170px}
.lead-filters .search{flex:0 1 220px}
@media (max-width:720px){ .lead-filters{margin-left:0; width:100%} }

/* assessment additions */
.scale.five{grid-template-columns:repeat(5, 1fr)}
.rm-out{display:flex; align-items:center; font-weight:700; color:var(--accent); background:var(--surface-2)}
.mob-row{align-items:end}

/* VAULT score card */
.scorecard{display:grid; grid-template-columns:minmax(220px, 1fr) minmax(260px, 320px); gap:18px; align-items:center}
.scorecard.compact{grid-template-columns:1fr}
.sc-overall{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; margin-bottom:12px}
.sc-overall b{grid-row:1 / span 2; font-family:var(--display); font-size:52px; font-weight:700; line-height:1; color:var(--accent); letter-spacing:-.02em}
.sc-overall span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.sc-overall em{font-style:normal; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink-2)}
.sc-overall small{grid-column:2; font-size:12px; color:var(--ink-3)}
.sc-overall small.up{color:var(--good)} .sc-overall small.down{color:var(--bad)}
.sc-row{display:grid; grid-template-columns:92px 1fr 56px; gap:10px; align-items:center; margin:6px 0; font-size:13px}
.sc-k{font-weight:600; color:var(--ink-2)}
.sc-bar{height:9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden}
.sc-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--c-train)); border-radius:999px}
.sc-v{text-align:right; font-weight:700} .sc-v small{font-weight:600; margin-left:4px; color:var(--ink-3)} .sc-v small.up{color:var(--good)} .sc-v small.down{color:var(--bad)}
.chart.radar{max-width:320px; margin:0 auto}
.chart.radar .axis{font-family:var(--sans)}
@media (max-width:720px){ .scorecard{grid-template-columns:1fr} }
.report-doc .scorecard{color:#1B2A33}
.report-doc .sc-overall b{color:#023440} .report-doc .sc-bar{background:#F1EDE6; border-color:#E7E1D6} .report-doc .sc-bar i{background:linear-gradient(90deg, #023440, #14A0A0)}
.report-doc .chart.radar polygon[fill="var(--surface-2)"]{fill:#F7F4EE}
#printRoot .scorecard{grid-template-columns:1fr 300px}
.tbl tr.tbl-sub td{background:var(--surface-2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:5px 10px}
.linkish{background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px}
.pill-btn{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-3); cursor:pointer; font-family:inherit}
.pill-btn.good{background:var(--good-wash); color:var(--good); border-color:transparent}
.pill-btn:hover{border-color:var(--accent)}

/* my space · HR files */
.hr-list{display:grid; gap:6px}
.hr-file{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px}
.hr-file .ic{width:32px; height:32px; border-radius:8px; background:var(--brand); color:var(--turq); display:grid; place-items:center}
.hr-file .ic svg{width:16px; height:16px}
@media (max-width:720px){ .hr-file{grid-template-columns:auto 1fr} .hr-file > span:last-child{grid-column:2} }

/* ── v1.9 · blocks with a colour identity (A · B · C / core · power), strike-through button ── */
.block{border-left:4px solid var(--line)}
.block-dot{width:10px; height:10px; border-radius:50%; background:var(--line); flex:none}
.block.tone-a{border-left-color:var(--c-train)} .block.tone-a .block-dot{background:var(--c-train)} .block.tone-a .block-head{background:color-mix(in srgb, var(--c-train) 9%, var(--surface))}
.block.tone-b{border-left-color:var(--c-nutri)} .block.tone-b .block-dot{background:var(--c-nutri)} .block.tone-b .block-head{background:color-mix(in srgb, var(--c-nutri) 9%, var(--surface))}
.block.tone-c{border-left-color:var(--c-dexa)}  .block.tone-c .block-dot{background:var(--c-dexa)}  .block.tone-c .block-head{background:color-mix(in srgb, var(--c-dexa) 10%, var(--surface))}
.block.tone-p{border-left-color:var(--c-trial)} .block.tone-p .block-dot{background:var(--c-trial)} .block.tone-p .block-head{background:color-mix(in srgb, var(--c-trial) 9%, var(--surface))}
.block.tone-a .block-name{color:var(--c-train)} .block.tone-b .block-name{color:var(--c-nutri)} .block.tone-c .block-name{color:var(--c-dexa)} .block.tone-p .block-name{color:var(--c-trial)}
.tool.skip.on{color:var(--warn); background:var(--warn-wash)}
.tool.ok{color:var(--good)} .tool.ok:hover{background:var(--good-wash); color:var(--good)}
.ex-tools{flex-wrap:wrap}
.ex.skipped .ex-name{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--warn)}
.btn.hc-locked{opacity:.5; border-style:dashed}
.btn.hc-locked:hover{border-color:var(--line-2); color:var(--ink-2)}

/* ── Program builder wizard ── */
.pb-steps{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pb-dot{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line-2); flex:none}
.pb-dot.on{background:var(--cta); color:var(--on-cta); border-color:var(--cta)}
.pb-dot.done{background:var(--good-wash); color:var(--good); border-color:transparent}
.pb-dot .i{width:13px; height:13px}
.pb-steps i{flex:1; height:1px; background:var(--line-2)}
.pb-tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.pb-card{display:grid; gap:4px; text-align:left; padding:12px 13px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); min-height:104px; align-content:start}
.pb-card:hover{border-color:var(--accent)}
.pb-card.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-wash)}
.pb-card b{font-family:var(--display); font-size:15px}
.pb-card span{font-size:12px; color:var(--ink-3); line-height:1.4}
.pb-card small{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4)}
.pb-pick{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)}
.pb-sw{border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; display:grid; gap:8px}
.pb-swaps{display:grid; gap:5px}
.pb-swap{display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; font-size:12.5px}
.pb-swap s{color:var(--ink-3)}
@media (max-width:720px){ .pb-swap{grid-template-columns:auto 1fr} .pb-swap > span:last-child{grid-column:2} }

/* ── Session: warm-up, blocks and metcon as three separate sections ── */
.sess-sec{display:grid; gap:10px}
.sec-h{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:-.01em; color:var(--ink-2)}
.sec-h svg{width:15px; height:15px; color:var(--ink-3)}
.sec-h .muted{margin-left:auto; font-weight:500; font-family:var(--sans)}
.warm-sec .warm-in{width:100%; background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r); padding:10px 13px; font-size:13px; line-height:1.5; resize:none; overflow:hidden; min-height:42px}
.warm-sec .warm-in:focus{outline:none; border-style:solid; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-wash)}
.warm-sec .warm-in::placeholder{color:var(--ink-4)}
.blocks{display:grid; gap:12px}
.metcon-sec .mc-badge{display:inline-flex; align-items:center; gap:5px; background:var(--brand); color:var(--turq); padding:3px 9px; border-radius:100px; font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.metcon-sec .mc-badge svg{width:12px; height:12px; color:var(--turq)}
.card-metcon{border:1px solid var(--brand); border-left-width:4px; border-style:solid; background:linear-gradient(180deg, var(--accent-wash), var(--surface) 70%)}
:root[data-vpc-theme="dark"] .card-metcon{background:linear-gradient(180deg, var(--surface-3), var(--surface) 70%)}
.card-metcon .form-row label{color:var(--accent-ink)}
.quick-chips{margin-bottom:6px}
.quick-chips .chip[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink)}
@media (pointer:coarse){ .yesno label{min-height:52px; font-size:14px} .quick-chips .chip{min-height:40px; font-size:13px} .modal-body{padding:16px 16px 26px} }
.sc-row{grid-template-columns:118px 1fr 56px}
.sc-k small{display:block; font-weight:500; font-size:10.5px; line-height:1.2}
@media (max-width:720px){ .sc-row{grid-template-columns:104px 1fr 52px} }

/* ── Body map ── */
.bodymap .card-title{display:flex; align-items:center; gap:7px; flex:0 1 auto}
.bodymap .card-title svg{width:16px; height:16px; color:var(--ink-3)}
.bm-wrap{display:grid; grid-template-columns:auto auto 1fr; gap:18px; align-items:start}
.bm-fig{display:grid; justify-items:center; gap:4px}
.bm-svg{width:118px; height:auto; display:block; touch-action:manipulation}
.bm-cap{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4)}
.bm-body{fill:var(--surface-3); stroke:var(--line-2); stroke-width:.8}
.bm-r{cursor:pointer}
.bm-r *{fill:var(--accent-wash); stroke:var(--accent-ink); stroke-width:.8; stroke-opacity:.35; transition:fill .12s}
.bm-r:hover *{fill:color-mix(in srgb, var(--accent) 35%, var(--surface))}
.bm-r.on *{fill:var(--accent); stroke:var(--accent); stroke-opacity:1}
.bm-r:focus-visible{outline:none} .bm-r:focus-visible *{stroke:var(--accent); stroke-width:2; stroke-opacity:1}
.bm-list{display:grid; gap:8px; align-content:start; min-width:0}
@media (max-width:760px){ .bm-wrap{grid-template-columns:1fr 1fr} .bm-list{grid-column:1 / -1} .bm-svg{width:100%; max-width:150px} }

/* nothing inside a session row may set its own minimum width — the phone decides */
.ex > div, .ex > .c-name, .ex > .c-sets{min-width:0}
.ex-name, .ex-note{min-width:0; max-width:100%; box-sizing:border-box}
.sec-h{flex-wrap:wrap; min-width:0}
.sec-h > span{min-width:0}
@media (max-width:760px){
  .sec-h .muted{margin-left:0; flex-basis:100%}
  .blocks, .block, .sess-sec{min-width:0}
}

/* grid children default to min-width:auto, which lets a long word or an input's intrinsic size push the page
   sideways on a phone. Nothing in a session or a card may do that. */
.sess-sec, .sess-sec > *, .blocks > *, .metcon, .metcon-grid, .metcon-grid > *, .sec-h > *{min-width:0; max-width:100%}
.card, .card-body, .card-body > *, .page > *{min-width:0}

/* the metcon row is three fields side by side; on a phone they go one under the other and never wider than the screen */
@media (max-width:760px){ .metcon-grid{grid-template-columns:minmax(0,1fr)} }
.metcon-grid, .metcon > *{width:100%; min-width:0} .metcon-grid > .form-row{min-width:0}
.field, .field-sm{max-width:100%}

/* a vacation row on a phone: dates + text, and the buttons on their own line instead of pushing the page sideways */
@media (max-width:760px){
  .vac{gap:8px 10px}
  .vac > span:last-child{flex-basis:100%; justify-content:flex-start}
}

/* the month calendar on a phone: seven columns have to fit, so the initials shrink instead of widening the grid */
@media (max-width:760px){
  .cal{gap:2px}
  .cal-d{min-width:0; overflow:hidden; font-size:11px; padding:2px 1px}
  .cal-d .who2{gap:1px; max-width:100%}
  .cal-d .who2 i{font-size:7px; min-width:0; padding:0 1px; letter-spacing:0}
  .cal-h{font-size:9px}
}

/* On an iPad the client pane is narrow even though the window is wide, so the session has to react to its own
   width (container query), not the viewport's — otherwise the phone rules never fire and the pane scrolls sideways. */
.sess-body > *{min-width:0}
@container (max-width:720px){
  .metcon-grid{grid-template-columns:minmax(0,1fr)}
  .sec-h .muted{margin-left:0; flex-basis:100%}
  .blocks, .block, .sess-sec, .sess-sec > *, .metcon, .metcon > *{min-width:0}
  .set-line, .set-line-head{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30px; gap:6px}
  .alert, .alert > *{min-width:0}
}

/* a pasted URL is one long unbreakable word: let it wrap instead of widening the card */
.alert .t, .note-txt, .ex-note, .sess-note, .card-body p, .muted.small{overflow-wrap:anywhere}

/* ── Narrow panes (iPad, split view): react to the pane's width, not the window's ──
   On a tablet the window is wide but the client/owner pane is ~400px, so the phone media queries never fire
   and two-column cards get squeezed to 170px. The page is a container, so its own width decides. */
.page{container-type:inline-size}
@container (max-width:620px){
  .grid-2, .grid-3, .form-2, .form-3, .board{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:520px){
  .kv{grid-template-columns:minmax(0,1fr); gap:2px 0}
  .kv dt{margin-top:8px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
}

/* ── Walk-in: the coach's page ── */
.wi-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start}
@container (max-width:880px){ .wi-grid{grid-template-columns:minmax(0,1fr)} }
.wi-chips{gap:6px}
.wi-chips .chip{min-height:36px; font-size:12.5px}
.wi-hint{font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-4)}
.wi-req{color:var(--bad)}
.wi-check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink-2); cursor:pointer}
.wi-check input{width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--cta)}
.wi-err{margin:0; padding:10px 13px; border-radius:var(--r-sm); background:var(--bad-wash); color:var(--bad); font-size:13px; font-weight:600}
.wi-fu{display:inline-flex; align-items:center; gap:6px}
.wi-fu svg{width:14px; height:14px}
.wi-list{display:grid}
.wi-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left; padding:10px 16px; border-bottom:1px solid var(--line)}
.wi-row:last-child{border-bottom:none}
.wi-row:hover{background:var(--surface-2)}
.wi-d{font-family:var(--display); font-weight:700; font-size:12px; color:var(--ink-3); min-width:36px}
.wi-m{display:grid; min-width:0}
.wi-m b{font-size:13.5px; font-weight:600}
.wi-m .small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wi-s{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.wi-s .pill svg{width:11px; height:11px}
.wi-details{border:1px solid var(--line); border-radius:var(--r); padding:4px 12px 12px; background:var(--surface-2)}
.wi-details .kv{font-size:13px}

/* ── Walk-in: the screen the client fills in (covers the whole app) ── */
#kiosk{position:fixed; inset:0; z-index:90; background:var(--ground); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(40px + var(--safe-b))}
.k-top{display:flex; align-items:center; gap:10px; max-width:720px; margin:0 auto 14px}
.k-mark{width:28px; height:28px; color:var(--brand)}
:root[data-vpc-theme="dark"] .k-mark{color:var(--accent)}
.k-brand{font-family:var(--display); font-weight:700; letter-spacing:.14em; font-size:14px}
.k-lang{margin-left:auto}
.k-lang button{min-height:36px; padding:6px 12px; font-size:13px}
.k-exit{position:relative; overflow:hidden; min-height:36px; padding:6px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:12px; font-weight:600; color:var(--ink-4);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none}
.k-exit span{position:relative; z-index:1}
.k-exit::after{content:""; position:absolute; inset:0; background:var(--accent-wash); transform:scaleX(0); transform-origin:left; transition:transform .15s}
.k-exit.holding{color:var(--accent-ink)}
.k-exit.holding::after{transform:scaleX(1); transition:transform 1.5s linear}
.k-card{max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:26px 28px 28px}
.k-card h1{font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.025em; margin:0; line-height:1.15}
.k-sub{color:var(--ink-3); margin:6px 0 20px; font-size:15px; line-height:1.5}
.k-form{gap:16px}
.k-form .field{font-size:17px; min-height:50px}
.k-form textarea.field{min-height:84px}
.k-form .chip{min-height:44px; font-size:14.5px; padding:8px 15px}
.k-form .wi-check{font-size:14.5px}
.k-form .wi-check input{width:22px; height:22px}
.k-btn{min-height:54px; font-size:16px; width:100%}
.k-thanks{max-width:560px; margin:14vh auto 0; text-align:center; display:grid; justify-items:center; gap:8px}
.k-thanks > svg{width:60px; height:60px; padding:14px; border-radius:50%; background:var(--good-wash); color:var(--good)}
.k-thanks h1{font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:-.02em; margin:8px 0 0}
.k-thanks p{color:var(--ink-3); font-size:16px; margin:0 0 16px}
.k-thanks .k-btn{max-width:280px}
@media (max-width:760px){ .k-card{padding:18px 16px 20px} .k-card h1{font-size:23px} .k-brand{display:none} }

/* ── Owners → Projects (Gantt) ── */
.pj-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pj-sum{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--ink3); padding-top:12px; padding-bottom:12px}
.pj-sum b{color:var(--ink); font-family:var(--display); font-size:15px}
.pj-dot{width:10px; height:10px; border-radius:3px; margin:0 8px 0 4px}
.gantt-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line); scrollbar-width:thin}
.gantt{--lbl:250px; position:relative; min-width:100%}
@container (max-width:620px){ .gantt{--lbl:150px} }
.gt-head, .gt-row{display:grid; grid-template-columns:var(--lbl) var(--tw)}
.gt-head{background:var(--surface-2); border-bottom:1px solid var(--line)}
.gt-corner{position:sticky; left:0; z-index:5; background:var(--surface-2); display:flex; align-items:flex-end; padding:0 14px 7px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); border-right:1px solid var(--line)}
.gt-scale{position:relative; height:48px}
.gt-m{position:absolute; top:0; height:26px; padding:6px 8px 0; font-size:12px; font-weight:700; color:var(--ink2); border-left:1px solid var(--line-2); white-space:nowrap; overflow:hidden}
.gt-w{position:absolute; top:26px; height:22px; padding-top:3px; font-size:10.5px; color:var(--ink3); text-align:center; font-variant-numeric:tabular-nums}
.gt-w.now{color:var(--bad); font-weight:700}
.gt-now{position:absolute; bottom:2px; transform:translateX(-50%); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--bad); padding:1px 6px; border-radius:100px; white-space:nowrap}
.gt-body{position:relative}
.gt-grid{position:absolute; top:0; bottom:0; left:var(--lbl); width:var(--tw); pointer-events:none; z-index:1}
.gt-grid.weeks{background-image:linear-gradient(to right, var(--line) 1px, transparent 1px); background-size:var(--ww) 100%}
.gt-sep{position:absolute; top:0; bottom:0; width:1px; background:var(--line-2)}
.gt-today{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--bad); opacity:.7}
.gt-row{min-height:44px; border-bottom:1px solid var(--line)}
.gt-row.proj{min-height:54px; border-top:2px solid var(--line-2)}
.gt-row.proj:first-of-type{border-top:none}
.gt-row.add{min-height:36px}
.gt-lbl{position:sticky; left:0; z-index:3; background:var(--surface); display:grid; align-content:center; gap:1px; width:100%; text-align:left; padding:6px 12px 6px 14px; border-right:1px solid var(--line); min-width:0}
.gt-lbl:hover{background:var(--surface-2)}
.gt-row.proj .gt-lbl{background:var(--surface-2)}
.gt-lbl b{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.gt-row.proj .gt-lbl b{font-family:var(--display); font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:7px}
.gt-row.proj .gt-lbl b em{font-style:normal; overflow:hidden; text-overflow:ellipsis}
.gt-lbl .sw{width:11px; height:11px; border-radius:3px; flex:none}
.gt-lbl span{font-size:11.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gt-lbl.sub{padding-left:33px}
.gt-lbl.add{display:flex; align-items:center; gap:5px; color:var(--accent-ink); font-weight:600; font-size:12.5px; padding-left:33px}
.gt-lbl.add svg{width:14px; height:14px}
.gt-track{position:relative; z-index:2}
.gt-b{position:absolute; top:50%; transform:translateY(-50%); height:26px; border-radius:7px; background:color-mix(in srgb, var(--c) 20%, var(--surface)); border:1.5px solid var(--c); overflow:hidden; display:flex; align-items:center; min-width:8px; padding:0}
.gt-b i{position:absolute; left:0; top:0; bottom:0; background:var(--c)}
.gt-b span{position:relative; z-index:1; font-size:11px; font-weight:700; padding:0 7px; color:var(--ink); white-space:nowrap; text-shadow:0 0 3px var(--surface)}
.gt-b.done{background:var(--c)}
.gt-b.done span{color:#fff; text-shadow:none}
.gt-b.upcoming{border-style:dashed}
.gt-b.late{border:2px solid var(--bad); box-shadow:0 0 0 2px color-mix(in srgb, var(--bad) 22%, transparent)}
.gt-b:hover, .gt-ms:hover{filter:brightness(1.06); box-shadow:0 0 0 3px var(--accent-wash)}
.gt-ms{position:absolute; top:50%; width:17px; height:17px; transform:translate(-50%,-50%) rotate(45deg); background:var(--c); border-radius:3px; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--c); padding:0}
.gt-ms.open{background:var(--surface)}
.gt-ms.late{background:var(--bad); box-shadow:0 0 0 1.5px var(--bad)}
.gt-sumbar{position:absolute; top:50%; transform:translateY(-50%); height:10px; border-radius:5px; background:color-mix(in srgb, var(--c) 22%, var(--surface)); overflow:hidden}
.gt-sumbar i{position:absolute; left:0; top:0; bottom:0; background:var(--c)}
.gt-target{position:absolute; top:9px; bottom:9px; width:0; border-left:2px dashed var(--c)}
.pj-legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12px; color:var(--ink3); padding:10px 18px 14px; border-top:1px solid var(--line)}
.pj-legend i{display:inline-block; width:18px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:6px; box-sizing:border-box}
.pcolors{display:flex; gap:8px; flex-wrap:wrap}
.pcolors button{width:36px; height:36px; border-radius:10px; border:3px solid transparent}
.pcolors button[aria-pressed="true"]{border-color:var(--surface); box-shadow:0 0 0 2px var(--ink)}
.gprog{display:flex; align-items:center; gap:12px}
.gprog input{flex:1; accent-color:var(--cta); height:28px}
.gprog output{font-family:var(--display); font-weight:700; min-width:48px; text-align:right}
.goal-form:has(#f-gms:checked) .gms-start{visibility:hidden}
@container (max-width:620px){
  .gt-lbl.sub b{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.25; font-size:12.5px}
  .gt-lbl.sub{padding-left:22px; padding-right:8px}
  .gt-lbl.add{padding-left:22px}
  .gt-lbl{padding-left:10px}
}

/* ── Client tabs: several coaches on one computer, each with their client open ── */
.ctabs{display:flex; align-items:stretch; gap:6px; margin:-6px -4px 14px; padding:0 4px 2px; overflow-x:auto; scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctab-all, .ctab-add{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface)}
.ctab-all svg, .ctab-add svg{width:16px; height:16px}
.ctab-all[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink)}
.ctab-add{width:42px; justify-content:center; padding:0; border-style:dashed; color:var(--accent-ink)}
.ctab-add:hover, .ctab-all:hover{border-color:var(--accent)}
.ctab{flex:none; display:flex; align-items:center; border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2); min-height:42px; max-width:250px}
.ctab.on{background:var(--surface); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.ctab-co{flex:none; margin-left:6px; min-width:32px; height:28px; padding:0 6px; border-radius:7px; color:#fff; font-family:var(--display); font-size:11.5px; font-weight:700; display:grid; place-items:center}
.ctab-go{display:flex; align-items:center; gap:6px; min-width:0; padding:0 4px 0 9px; min-height:42px; font-size:13.5px; font-weight:600; color:var(--ink-3)}
.ctab.on .ctab-go{color:var(--ink)}
.ctab-n{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctab-s{flex:none; font-family:var(--display); font-size:11.5px; font-weight:700; color:var(--accent-ink); background:var(--accent-wash); padding:1px 6px; border-radius:6px}
.ctab-x{flex:none; width:32px; height:42px; display:grid; place-items:center; color:var(--ink-4); border-radius:0 10px 10px 0}
.ctab-x:hover{color:var(--bad)}
.ctab-x svg{width:14px; height:14px}
@media (max-width:760px){ .ctabs{margin:0 -14px 10px; padding:0 14px 2px} .ctab-all span{display:none} }
.tp-coaches .chip{min-height:40px}
.tp-coaches .tp-cn{font-weight:500; opacity:.8}
.tp-list{display:grid; gap:2px; max-height:50vh; overflow-y:auto; margin:0 -6px}
.tp-sec{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:10px 8px 4px}
.tp-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left; padding:8px; border-radius:var(--r-sm); min-height:52px}
.tp-row:hover, .tp-row:focus-visible{background:var(--surface-2)}
.tp-row b{display:block; font-size:14px; font-weight:600}
.tp-row small{display:block; font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-none{padding:12px 8px}

/* ── Client → Nutrition ── */
.nu-list{display:grid}
.nu-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px 18px; border-top:1px solid var(--line)}
.nu-ic{width:36px; height:36px; border-radius:9px; background:var(--accent-wash); color:var(--accent-ink); display:grid; place-items:center}
.nu-ic svg{width:17px; height:17px}
.nu-m{display:grid; gap:2px; min-width:0}
.nu-m b{font-size:14px; font-weight:600}
.nu-note{margin:6px 0 0; font-size:13px; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}
.nu-a{display:flex; gap:4px; align-items:center}

/* ── Tasks: repeating tasks + calendar ── */
.rep-pill{font-weight:600}
.rep-days .chip{min-width:48px; justify-content:center}
.tcal{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px}
.tcal-h{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); text-align:center; padding:2px 0 4px}
.tcal-d{min-height:98px; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:4px; display:flex; flex-direction:column; gap:3px; cursor:pointer; overflow:hidden}
.tcal-d:hover{border-color:var(--line-2)}
.tcal-d.off{background:transparent; opacity:.5}
.tcal-d.today .tcal-n{background:var(--cta); color:var(--on-cta)}
.tcal-d.sel{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.tcal-n{align-self:flex-start; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2); min-width:22px; height:22px; border-radius:6px; display:grid; place-items:center; padding:0 4px}
.tcal-chips{display:flex; flex-direction:column; gap:2px; min-width:0}
.tc-chip{display:flex; align-items:center; gap:4px; width:100%; min-width:0; padding:2px 5px; border-radius:5px; font-size:11px; font-weight:600; text-align:left; background:color-mix(in srgb, var(--c) 14%, var(--surface)); color:var(--ink); border-left:3px solid var(--c)}
.tc-chip i{font-style:normal; font-size:9.5px; font-weight:700; color:var(--c); flex:none}
.tc-chip span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.tc-chip.future{background:transparent; border:1px dashed color-mix(in srgb, var(--c) 55%, transparent); border-left:3px solid color-mix(in srgb, var(--c) 55%, transparent); color:var(--ink-3)}
.tc-chip.logged, .tc-chip.done{opacity:.55}
.tc-chip.logged span, .tc-chip.done span{text-decoration:line-through}
.tc-chip.skipped{opacity:.4}
.tc-chip.late{background:var(--bad-wash); border-left-color:var(--bad); color:var(--bad)}
.tc-chip.late i{color:var(--bad)}
.tcal-more{font-size:10.5px; font-weight:700; color:var(--ink-3); padding-left:5px}
.tcal-dots{display:none; gap:3px; flex-wrap:wrap; justify-content:center}
.tcal-dots i{width:7px; height:7px; border-radius:50%; background:var(--c)}
.tcal-dots i.future{background:transparent; box-shadow:inset 0 0 0 1.5px var(--c)}
.tcal-dots i.late{background:var(--bad)}
.tcal-dots i.logged, .tcal-dots i.done, .tcal-dots i.skipped{opacity:.35}
.tcal-legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink-3); margin-top:10px}
.tcal-legend i{display:inline-block; width:14px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.lg-late{background:var(--bad-wash); box-shadow:inset 3px 0 0 var(--bad)}
.lg-future{border:1px dashed var(--ink-4)}
.tag-list{border-top:1px solid var(--line); display:grid; gap:4px}
.tag-row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center}
.tag-row span.check{cursor:default}
.tag-m{display:grid; text-align:left; min-width:0; padding:5px 0}
.tag-m b{font-size:13.5px; font-weight:600}
.tag-row.logged .tag-m b, .tag-row.done .tag-m b{text-decoration:line-through; color:var(--ink-3)}
.tag-row.late .tag-m b{color:var(--bad)}
.tag-row.future{opacity:.7}
@container (max-width:620px){
  .tcal-d{min-height:50px; align-items:center; padding:4px 2px}
  .tcal-chips{display:none}
  .tcal-dots{display:flex}
  .tcal-n{align-self:center}
}

/* ── Sign-in gate (Swiss server only — swiss.js) ── */
#auth-gate{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px 16px calc(24px + var(--safe-b)); overflow:auto;
  background:radial-gradient(120% 90% at 20% 0%, #0B4C5B 0%, var(--tiber) 45%, var(--onix) 100%)}
#auth-gate .ag-card{width:min(400px, 100%); background:var(--surface); color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-lift); padding:28px 24px 22px; display:grid; gap:14px}
#auth-gate .ag-brand{display:flex; align-items:center; gap:12px; margin-bottom:4px}
#auth-gate .ag-mark{width:40px; height:40px; color:var(--c-train)}
#auth-gate .ag-word{font-family:var(--display); font-size:22px; letter-spacing:.08em; color:var(--ink)}
#auth-gate .ag-word span{font-weight:300} #auth-gate .ag-word b{font-weight:700}
#auth-gate h1{font-family:var(--display); font-size:22px; margin:4px 0 0}
#auth-gate .ag-sub{margin:0; color:var(--ink-3); font-size:14px; line-height:1.5}
#auth-gate form{display:grid; gap:12px}
#auth-gate label{display:grid; gap:6px; font-size:13px; color:var(--ink-2); font-weight:500}
#auth-gate .btn{justify-content:center; min-height:44px}
#auth-gate .ag-google{gap:10px; background:var(--surface); border:1px solid var(--line-2)}
#auth-gate .ag-or{display:flex; align-items:center; gap:10px; color:var(--ink-4); font-size:12px}
#auth-gate .ag-or::before, #auth-gate .ag-or::after{content:""; flex:1; height:1px; background:var(--line)}
#auth-gate .ag-forgot{justify-self:start; font-size:13px}
#auth-gate .ag-msg{margin:0; min-height:1.2em; font-size:13px; color:var(--ink-3)} #auth-gate .ag-msg.bad{color:var(--bad)}
#auth-gate .ag-qr{display:grid; place-items:center; background:#fff; border-radius:var(--r); padding:12px}
#auth-gate .ag-qr img{width:200px; height:200px}
#auth-gate .ag-secret summary{cursor:pointer; font-size:13px; color:var(--ink-3)}
#auth-gate .ag-secret code{display:block; margin-top:6px; word-break:break-all; font-size:13px; background:var(--surface-2); padding:8px; border-radius:var(--r-sm)}
#auth-gate .ag-code{font-size:22px; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums}