/* ============================================================
   TEAM ROCHEEZ PLATFORM
   Committed dark: the brand lives on black + brushed steel +
   electric blue, and the primary surface is a phone held in a
   gym. Every colour is painted explicitly so the page holds on
   any host ground.
   ============================================================ */
:root{
  /* ground: near-black, biased blue toward the accent - not neutral grey */
  --ground:#0A0C10; --surface:#12161D; --raised:#1A2029; --sunk:#0D1116;
  --edge:#262E3A; --edge-hi:#39445A;
  /* brushed-steel ink ramp, straight off the wordmark */
  --steel:#C7CFDA; --dim:#8B95A5; --faint:#6C7787;
  /* electric blue, the logo's own */
  --volt:#3987E5; --volt-hi:#6FB4FF; --volt-deep:#0B4FA8; --volt-wash:#3987E51F;
  /* judges' lights - powerlifting's own status vocabulary */
  --good:#F2F5F8; --no:#E5484D; --pend:#4A5568;
  /* chart series: the dataviz skill's validated dark categorical theme,
     re-validated against surface #12161D. Slot 1 is the brand blue. */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  /* IPF calibrated plate colours - real kit, not decoration */
  --p25:#D32F2F; --p20:#1976D2; --p15:#FBC02D; --p10:#388E3C;
  --p5:#ECEFF1; --p2:#232323; --p1:#B0BEC5;
  --warn:#E0A215;
  --r:4px; --r-lg:8px; --pill:999px;
  --f-d:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --shell:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  margin:0; background:var(--ground); color:var(--steel);
  font-family:var(--f-d); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:700; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button,a,label,select,summary,[role="switch"]{touch-action:manipulation}
html{-webkit-tap-highlight-color:rgba(57,135,229,.24)}
button{cursor:pointer; background:none; border:none}
:focus-visible{outline:2px solid var(--volt-hi); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* must beat the class selectors below, which set display and would
   otherwise keep [hidden] elements on screen */
[hidden]{display:none!important}

.mono{font-family:var(--f-m); font-variant-numeric:tabular-nums}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.hide{display:none!important}

/* ---------- shell ---------- */
.app{min-height:100vh; display:flex; flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:40; background:var(--ground);
  border-bottom:1px solid var(--edge);
}
.topbar-in{
  max-width:var(--shell); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand img{width:38px; height:38px; border-radius:var(--r); display:block; flex:none}
.brand-tx{min-width:0}
.brand-tx b{display:block; font-size:15px; font-weight:800; letter-spacing:.02em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-tx span{display:block; font-size:11px; color:var(--faint); letter-spacing:.06em}
.topbar-sp{flex:1}

.seg{display:flex; background:var(--sunk); border:1px solid var(--edge); border-radius:var(--pill); padding:2px}
.seg button{
  padding:5px 13px; border-radius:var(--pill); font-size:12.5px; font-weight:600;
  color:var(--dim); white-space:nowrap; transition:background .12s,color .12s;
}
.seg button[aria-pressed="true"]{background:var(--volt); color:#fff}

.sync{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--faint); white-space:nowrap}
.sync i{width:7px; height:7px; border-radius:50%; background:var(--pend); display:block; flex:none}
.sync.on i{background:var(--s3)} .sync.local i{background:var(--warn)}

/* ---------- nav ---------- */
.nav{background:var(--surface); border-bottom:1px solid var(--edge)}
.nav-in{max-width:var(--shell); margin:0 auto; display:flex; gap:2px; padding:0 10px; overflow-x:auto; scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav button{
  padding:11px 14px; font-size:13px; font-weight:600; color:var(--dim);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.nav button[aria-current="page"]{color:var(--steel); border-bottom-color:var(--volt)}
.nav .badge{
  display:inline-block; margin-left:6px; min-width:17px; padding:0 5px; border-radius:var(--pill);
  background:var(--no); color:#fff; font-size:10.5px; font-weight:700; line-height:17px;
  font-family:var(--f-m); text-align:center; vertical-align:1px;
}

main{flex:1; max-width:var(--shell); width:100%; margin:0 auto; padding:18px 16px 92px}
.view{display:flex; flex-direction:column; gap:18px}

/* ---------- primitives ---------- */
.panel{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg)}
.panel-h{
  display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--edge);
  flex-wrap:wrap;
}
/* the heading breaks the sub-line onto its own row rather than itself —
   "How did / it go?" is not a heading anyone reads twice */
.panel-h h2{font-size:14px; font-weight:700; letter-spacing:.01em; white-space:nowrap}
.panel-h .sub{font-size:12px; color:var(--faint); font-weight:400}
.panel-b{padding:15px}
.sp{flex:1}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r); border:1px solid var(--edge-hi);
  background:var(--raised); color:var(--steel); font-size:13.5px; font-weight:600;
  transition:border-color .12s, background .12s; min-height:38px;
}
.btn:hover{border-color:var(--faint)}
.btn-p{background:var(--volt); border-color:var(--volt); color:#fff}
.btn-p:hover{background:var(--volt-hi); border-color:var(--volt-hi)}
.btn-q{background:none; border-color:transparent; color:var(--dim); padding:7px 10px}
.btn-q:hover{background:var(--raised); color:var(--steel)}
.btn-sm{padding:5px 10px; min-height:30px; font-size:12.5px}
.btn-dg{color:var(--no); border-color:#5A2326}
.btn-dg:hover{background:#2A1417; border-color:var(--no)}
.btn:disabled{opacity:.4; cursor:not-allowed}

.inp,.sel,.ta{
  width:100%; padding:9px 11px; background:var(--sunk); border:1px solid var(--edge-hi);
  border-radius:var(--r); font-size:14px; min-height:38px;
}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--volt); outline:none}
.inp:focus-visible,.sel:focus-visible,.ta:focus-visible{
  outline:2px solid var(--volt-hi); outline-offset:1px;
}
.ta{font-family:var(--f-m); font-size:13px; line-height:1.65; resize:vertical; min-height:160px}
.sel{appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.lab{display:block; font-size:11.5px; font-weight:600; color:var(--faint); letter-spacing:.05em; margin-bottom:5px}
.field{display:flex; flex-direction:column}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.row{display:flex; align-items:center; gap:9px; flex-wrap:wrap}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--pill);
  background:var(--raised); border:1px solid var(--edge-hi);
  font-size:11px; font-weight:600; color:var(--dim); white-space:nowrap;
}
.chip.volt{background:var(--volt-wash); border-color:#3987E566; color:var(--volt-hi)}
.chip.no{background:#2A1417; border-color:#5A2326; color:#F08B8E}
.chip.ok{background:#11291F; border-color:#1E4A38; color:#5BC99B}
.chip.warn{background:#2A2110; border-color:#54421A; color:#E5B84B}
.chip.sample{background:none; border-style:dashed; border-color:var(--edge-hi); color:var(--faint)}

.empty{padding:34px 20px; text-align:center; color:var(--faint)}
.empty b{display:block; color:var(--dim); font-size:14px; margin-bottom:5px}

/* ---------- stat tiles ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px}
.stat{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg); padding:12px 13px}
.stat .k{font-size:11px; color:var(--faint); letter-spacing:.05em; margin-bottom:5px}
.stat .v{font-family:var(--f-m); font-size:25px; font-weight:600; line-height:1.05; letter-spacing:-.02em}
.stat .u{font-size:12px; color:var(--dim); font-weight:400; margin-left:2px}
.stat .d{font-size:11.5px; margin-top:4px; font-family:var(--f-m)}
.d.up{color:#5BC99B} .d.dn{color:#F08B8E} .d.flat{color:var(--faint)}

/* ---------- roster ---------- */
.roster{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:11px}
.cli{
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg);
  padding:13px; display:flex; flex-direction:column; gap:10px; text-align:left; width:100%;
  transition:border-color .12s;
}
.cli:hover{border-color:var(--edge-hi)}
.cli.flag{border-left:3px solid var(--warn)}
.cli-t{display:flex; align-items:center; gap:10px}
.av{
  width:38px; height:38px; border-radius:var(--r); flex:none; display:grid; place-items:center;
  background:var(--raised); border:1px solid var(--edge-hi);
  font-family:var(--f-m); font-size:13px; font-weight:600; color:var(--volt-hi);
}
.cli-n{min-width:0; flex:1}
.cli-n b{display:block; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cli-n span{font-size:11.5px; color:var(--faint)}
.cli-m{display:flex; gap:14px; font-family:var(--f-m); font-size:12px; color:var(--dim)}
.cli-m b{color:var(--steel); font-weight:600}

/* ---------- attention queue ---------- */
.att{display:flex; flex-direction:column}
.att-i{
  display:flex; align-items:flex-start; gap:11px; padding:11px 15px;
  border-bottom:1px solid var(--edge); text-align:left; width:100%;
}
.att-i:last-child{border-bottom:none}
.att-i:hover{background:var(--raised)}
.att-d{width:6px; height:6px; border-radius:50%; margin-top:7px; flex:none}
.att-x{min-width:0; flex:1}
.att-x b{display:block; font-size:13.5px; font-weight:600; margin-bottom:1px}
.att-x span{font-size:12px; color:var(--dim); line-height:1.45}
/* an alert is a prompt, so it carries the two things you can do about it */
.att-a{display:flex; gap:7px; flex:none; align-items:center}
@media (max-width:620px){
  .att-i{flex-wrap:wrap}
  .att-a{width:100%; justify-content:flex-end; margin-top:4px}
}

/* ---------- session / exercise ---------- */
.sess-h{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.sess-h h1{font-size:26px; font-weight:800; letter-spacing:-.02em}
.sess-h .meta{font-family:var(--f-m); font-size:12.5px; color:var(--faint); margin-top:3px}

.ex{background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg); overflow:hidden}
.ex-h{display:flex; align-items:flex-start; gap:11px; padding:13px 14px}
.ex-n{
  font-family:var(--f-m); font-size:12px; font-weight:600; color:var(--volt-hi);
  background:var(--volt-wash); border-radius:var(--r); padding:3px 7px; flex:none; margin-top:1px;
}
.ex-t{flex:1; min-width:0}
.ex-t h3{font-size:15px; font-weight:700; line-height:1.3; letter-spacing:0}
.ex-alt{font-size:12px; color:var(--faint); margin-top:2px}
.ex-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}

/* set rows - the hero. This is what gets touched mid-set. */
.sets{border-top:1px solid var(--edge)}
.set{
  display:grid; grid-template-columns:26px 1fr auto; gap:11px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--edge);
}
.set:last-child{border-bottom:none}
.set.done{background:#0E1A14}
/* amber, not red: they did the work, it just was not what was written */
.set.off{background:#1C1608; box-shadow:inset 3px 0 0 var(--warn)}
/* everything writes as you type, which in a gym reads as nothing happening —
   so the row says where it is up to instead of leaving you guessing */
.set[data-save]{position:relative}
.set[data-save]::after{
  content:'saving…'; position:absolute; top:6px; right:12px;
  font-family:var(--f-m); font-size:10px; letter-spacing:.04em; color:var(--faint);
}
.set[data-save="saved"]::after{content:'saved ✓'; color:var(--s3)}
.set[data-save="failed"]::after{content:'not saved'; color:var(--no)}
.set-i{
  font-family:var(--f-m); font-size:12px; color:var(--faint); text-align:center;
}
.set-p{min-width:0}
.presc{font-family:var(--f-m); font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.presc .at{color:var(--faint); font-weight:400; margin:0 1px}
.presc .kg{color:var(--volt-hi)}
.presc .amrap{color:var(--s4)}
.presc-s{font-size:11.5px; color:var(--faint); margin-top:2px; font-family:var(--f-m)}
.ask{color:var(--s4); font-weight:600}

.logrow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:end;
  padding:0 14px 10px; grid-column:1/-1;
}
.logrow .lab{font-size:10px; margin-bottom:3px}
.logrow .inp{font-family:var(--f-m); text-align:center; padding:7px 4px; min-height:36px; font-size:15px}
.rpe-d{font-family:var(--f-m); font-size:11px; text-align:center; margin-top:3px}
.rpe-d.over{color:#F08B8E} .rpe-d.under{color:#E5B84B} .rpe-d.on{color:#5BC99B}

/* the remark replaces the judges' lights: what happened, in their words */
.remark{padding:0 14px 12px; grid-column:1/-1}
/* the explicit "it did not go to plan" tick, sat right above the box that
   asks why — 44px of tappable label, not a bare 13px checkbox */
.chk{
  display:inline-flex; align-items:center; gap:9px; min-height:34px;
  margin-bottom:6px; font-size:12.5px; color:var(--dim); cursor:pointer;
}
.chk input{width:17px; height:17px; accent-color:var(--warn); flex:none; margin:0; cursor:pointer}
.set.off .chk{color:#E5B84B}
.remark .lab{font-size:10px; margin-bottom:3px}
.remark .inp{font-size:13px; min-height:34px; padding:6px 10px}
.remark-r{
  padding:8px 14px 11px; grid-column:1/-1; font-size:12.5px; color:var(--dim); line-height:1.45;
}
.remark-r b{color:var(--faint); font-size:11px; letter-spacing:.04em; margin-right:6px}
.remark-r .off-tag{color:#E5B84B}

/* what the athlete actually did, read-only, for the coach. The whole point of
   the review is the difference from what was asked, so that is what is marked. */
.result{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:0 14px 11px; grid-column:1/-1;
}
.result.none{color:var(--faint); font-size:12px; font-style:italic; padding-top:2px}
.rc{display:inline-flex; align-items:baseline; gap:5px; font-size:12.5px; color:var(--dim)}
.rc b{font-family:var(--f-m); font-size:15px; font-weight:600; color:var(--steel)}
.rc i{font-style:normal; font-size:11px; color:var(--faint); font-family:var(--f-m)}
.rc.diff b{color:#E5B84B}
.rc.diff i{color:#E5B84B; opacity:.75}
.rc-note{font-size:12.5px; color:var(--dim); font-style:italic; flex-basis:100%; line-height:1.45}
.result .off-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#E5B84B;
  border:1px solid #5A4A18; background:#231C0A; border-radius:var(--pill); padding:2px 9px;
}
@media (min-width:760px){
  .result{grid-column:2/-1; grid-row:2; padding:2px 0 0}
}

.ex-f{display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--edge); flex-wrap:wrap}
.note-b{
  padding:11px 14px; border-top:1px solid var(--edge); background:var(--sunk);
  font-size:13px; line-height:1.5;
}
.note-b .who{font-size:11px; color:var(--faint); letter-spacing:.05em; margin-bottom:3px}
.note-b.coach{border-left:3px solid var(--volt)}

/* ---------- tools ---------- */
.plate-vis{display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:14px; background:var(--sunk); border-radius:var(--r); min-height:74px}
.bar-stub{width:26px; height:7px; background:linear-gradient(180deg,#D8DEE6,#7A828E); border-radius:2px}
.plate{
  border-radius:2px; display:grid; place-items:center; font-family:var(--f-m);
  font-size:9.5px; font-weight:600; color:#fff; text-shadow:0 1px 2px #0008; flex:none;
}
.collar{width:9px; height:20px; background:#8B95A5; border-radius:2px}

.timer-face{
  font-family:var(--f-m); font-size:54px; font-weight:600; letter-spacing:-.03em;
  text-align:center; line-height:1; padding:10px 0; font-variant-numeric:tabular-nums;
}
.timer-face.go{color:var(--volt-hi)} .timer-face.up{color:var(--s3)}

.wu-row{
  display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--edge);
  font-family:var(--f-m); font-size:14px;
}
.wu-row:last-child{border-bottom:none}
.wu-p{font-size:11px; color:var(--faint); width:42px; flex:none}
.wu-w{font-weight:600; color:var(--volt-hi); width:72px; flex:none}
.wu-x{color:var(--dim)}

/* ---------- charts ---------- */
.chart-wrap{overflow-x:auto}
.legend{display:flex; gap:14px; flex-wrap:wrap; padding:0 15px 13px}
.legend button{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); font-weight:500}
.legend button[aria-pressed="false"]{opacity:.35}
.legend i{width:10px; height:10px; border-radius:2px; display:block; flex:none}
.tip{
  position:fixed; z-index:90; pointer-events:none; background:var(--raised);
  border:1px solid var(--edge-hi); border-radius:var(--r); padding:8px 10px;
  font-size:12px; box-shadow:0 8px 22px #000A; max-width:220px;
}
.tip .tt{font-weight:700; font-size:12px; margin-bottom:5px}
.tip .tr{display:flex; align-items:center; gap:7px; font-family:var(--f-m); font-size:11.5px; margin-top:2px}
.tip .tr i{width:8px; height:8px; border-radius:2px; flex:none}
.tip .tr .tv{margin-left:auto; font-weight:600}

table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{
  text-align:left; padding:8px 11px; font-size:11px; color:var(--faint); font-weight:600;
  letter-spacing:.05em; border-bottom:1px solid var(--edge); white-space:nowrap;
}
table.data td{padding:8px 11px; border-bottom:1px solid var(--edge); font-family:var(--f-m); font-size:13px}
table.data tr:last-child td{border-bottom:none}
table.data th.num,table.data td.num{text-align:right}

/* ---------- modal ---------- */
.scrim{
  position:fixed; inset:0; z-index:100; background:#000C; display:grid; place-items:center; padding:16px;
}
.modal{
  background:var(--surface); border:1px solid var(--edge-hi); border-radius:var(--r-lg);
  width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 60px #000C;
}
.modal-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--edge)}
.modal-h h2{font-size:16px; font-weight:700}
.modal-b{padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:13px}
.modal-f{display:flex; gap:9px; padding:13px 16px; border-top:1px solid var(--edge)}

.toast{
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%); z-index:120;
  background:var(--raised); border:1px solid var(--edge-hi); border-radius:var(--pill);
  padding:10px 18px; font-size:13.5px; font-weight:600; box-shadow:0 10px 30px #000C;
  max-width:90vw; text-align:center;
}

/* ---------- mobile bottom nav ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:var(--surface); border-top:1px solid var(--edge);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 7px;
  font-size:10.5px; font-weight:600; color:var(--faint); position:relative;
}
.tabbar button[aria-current="page"]{color:var(--volt-hi)}
.tabbar svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8}
.tabbar .badge{
  position:absolute; top:4px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--pill); background:var(--no); color:#fff; font-size:10px; line-height:16px;
  font-family:var(--f-m); font-weight:700;
}

@media (min-width:760px){
  .nav{display:block} .tabbar{display:none}
  main{padding-bottom:26px}
  .set{grid-template-columns:30px 1fr auto; gap:14px}
  .logrow{grid-column:3; grid-row:1; padding:0; grid-template-columns:repeat(3,70px); align-items:center}
  .logrow .lab{display:none}
  .remark{grid-column:2/-1; grid-row:2; padding:0 0 2px}
  .remark .lab{display:none}
  .remark-r{grid-column:2/-1; grid-row:2; padding:2px 0 0}
}
@media (max-width:759px){
  .nav{display:none}
  .topbar-in{padding:9px 13px}
  main{padding:14px 12px 92px}
  .sess-h h1{font-size:22px}
}
/* the wordmark is the brand — it never gets clipped to make room for chrome */
@media (max-width:640px){
  .sync span{display:none}
  .brand{flex:0 0 auto}
  .brand img{width:34px; height:34px}
  .brand-tx b{font-size:13px}
  .brand-tx span{font-size:10px}
  .seg button{padding:5px 11px; font-size:12px}
  .legend{gap:10px}
  .legend button{font-size:11.5px}
}

/* ============================================================
   Additions for the hosted app: sign-in, exercise library,
   and the progress filter bar.
   ============================================================ */

/* ---------- auth ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--ground)}
.auth-card{width:100%; max-width:400px; display:flex; flex-direction:column; gap:18px}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.auth-brand img{width:96px; height:96px; border-radius:var(--r-lg)}
.auth-brand b{font-size:21px; font-weight:800; letter-spacing:.04em}
.auth-brand span{font-size:13px; color:var(--faint)}
.auth-form{display:flex; flex-direction:column; gap:13px}
.auth-err{
  padding:10px 13px; border-radius:var(--r); background:#2A1417; border:1px solid #5A2326;
  color:#F08B8E; font-size:13px; line-height:1.5;
}
.auth-ok{
  padding:10px 13px; border-radius:var(--r); background:#11291F; border:1px solid #1E4A38;
  color:#5BC99B; font-size:13px; line-height:1.5;
}
.auth-alt{text-align:center; font-size:13px; color:var(--faint)}
.auth-alt button{color:var(--volt-hi); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---------- filter bar ---------- */
.filters{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  padding:13px 15px; border-bottom:1px solid var(--edge);
}
.fgroup{display:flex; flex-direction:column; gap:6px; min-width:0}
.fgroup > .lab{margin:0}
.rangebar{display:flex; background:var(--sunk); border:1px solid var(--edge); border-radius:var(--r); padding:2px; flex-wrap:wrap}
.rangebar button{
  padding:5px 11px; border-radius:3px; font-size:12.5px; font-weight:600; color:var(--dim);
  white-space:nowrap;
}
.rangebar button[aria-pressed="true"]{background:var(--volt); color:#fff}
.custom-range{display:flex; gap:8px; align-items:center}
.custom-range .inp{min-height:34px; padding:6px 9px; font-size:13px; width:auto}
.custom-range span{font-size:12px; color:var(--faint)}

/* ---------- personal records ---------- */
.pr-list{display:flex; flex-direction:column; border-top:1px solid var(--edge)}
.pr-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:12px 2px; border-bottom:1px solid var(--edge); text-align:left; width:100%;
  background:transparent; color:inherit;
}
.pr-row.on{background:var(--sunk)}
.pr-n{min-width:0}
.pr-n b{display:block; font-size:14px; font-weight:600}
.pr-n span{font-size:11.5px; color:var(--faint); font-family:var(--f-m)}
.pr-b{display:flex; flex-direction:column; gap:2px; text-align:right; flex:none}
.pr-k{font-size:10px; color:var(--faint); letter-spacing:.04em}
.pr-v{font-family:var(--f-m); font-size:14px; font-weight:600; color:var(--volt-hi)}
.pr-detail{padding:4px 2px 14px; border-bottom:1px solid var(--edge); overflow-x:auto}
.pr-t{width:100%; border-collapse:collapse; font-size:13px; min-width:340px}
.pr-t th{
  text-align:left; font-size:10px; letter-spacing:.05em; color:var(--faint);
  font-weight:600; padding:6px 10px 6px 0; border-bottom:1px solid var(--edge);
}
.pr-t td{padding:7px 10px 7px 0; border-bottom:1px solid var(--edge)}
.pr-t tr:last-child td{border-bottom:none}
.pr-t .up{color:var(--s3)}
.pr-t .dim{color:var(--faint)}
/* confirmation that a session reached the coach, left on screen */
.sent-note{
  margin-top:10px; font-size:12.5px; color:var(--s3);
  background:#11291F; border:1px solid #1E4A38; border-radius:var(--r); padding:9px 11px;
}
/* the quiet "Remove" beside a claimed record */
.lnk-x{
  margin-left:8px; font-size:11.5px; color:var(--faint); text-decoration:underline;
  text-underline-offset:2px; background:none; border:0; padding:0; cursor:pointer;
}
.lnk-x:hover{color:var(--no)}
/* The record line sits under the table it explains, separated by a rule so the
   two read as one movement rather than two panels. */
.pr-chart{margin-top:14px; padding-top:12px; border-top:1px solid var(--edge)}
.pr-chart .legend{padding:2px 2px 10px}
.pr-chart .legend i{border-radius:50%}

@media (max-width:620px){
  .pr-row{grid-template-columns:1fr auto; gap:9px}
  .pr-row .pr-b:last-child{grid-column:2; grid-row:2}
}

/* ---------- the recovery scale ---------- */
/* a fixed grid, not flex-wrap: ten uneven boxes over two ragged rows is
   harder to hit and harder to read than two even rows of five */
.scale{display:grid; grid-template-columns:repeat(10,1fr); gap:6px}
@media (max-width:620px){ .scale{grid-template-columns:repeat(5,1fr)} }
.sc{
  min-height:44px; border-radius:var(--r);
  border:1px solid var(--edge-hi); background:var(--sunk); color:var(--dim);
  font-family:var(--f-m); font-size:15px; font-weight:600;
}
.sc:hover{border-color:var(--faint)}
.sc.on{background:var(--volt); border-color:var(--volt); color:#fff}
.scale-k{display:flex; gap:10px; margin-top:7px; font-size:11px; color:var(--faint)}
.saved-note{font-size:12px; color:var(--faint); font-family:var(--f-m)}

/* the check-in that has to be answered before the session opens */
.gate{border-color:#3987E566}
.gate .panel-h{background:var(--volt-wash)}

/* what the coach calls the day: Upper, Push, Legs */
.tag{
  display:inline-block; padding:1px 8px; border-radius:var(--pill); vertical-align:middle;
  background:var(--volt-wash); border:1px solid #3987E566; color:var(--volt-hi);
  font-size:11px; font-weight:600; font-family:var(--f-m); letter-spacing:.02em;
}

/* ---------- building a session by hand ---------- */
.setedit{border:1px solid var(--edge); border-radius:var(--r-lg); margin:4px 0 15px}
.setedit-h{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-bottom:1px solid var(--edge); font-size:11px; letter-spacing:.05em;
  color:var(--faint); font-weight:600;
}
.setedit-r{
  display:grid; grid-template-columns:20px auto 62px auto 112px auto 78px auto 62px 60px 40px;
  gap:7px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--edge);
}
.setedit-r:last-child{border-bottom:none}
.setedit-n{font-family:var(--f-m); font-size:12px; color:var(--faint); text-align:center}
.setedit-r .lab{font-size:10px; margin:0}
.setedit-r .inp,.setedit-r .sel{min-height:34px; padding:6px 8px; font-size:13px}
.setedit-x{font-family:var(--f-m); color:var(--faint); text-align:center}
/* On a phone the nine-column row collapsed so far that the weight field came
   out 20px wide — too narrow to read a number in, let alone type one. Below
   620px it becomes a labelled two-column block instead, with every field at a
   usable width and its label visible. */
@media (max-width:620px){
  .setedit-r{
    grid-template-columns:1fr 1fr; gap:9px 10px; padding:12px;
    align-items:end; position:relative;
  }
  .setedit-n{
    position:absolute; top:12px; right:12px; text-align:right;
    font-size:11px; letter-spacing:.05em;
  }
  .setedit-n::before{content:'SET '}
  .setedit-r .lab{grid-column:1/-1; margin-bottom:-4px}
  /* each control gets its own cell rather than being squeezed into a track */
  .setedit-r > .lab + .inp{grid-column:1/-1}
  .setedit-r .sel{grid-column:1/-1}
  .setedit-r .inp,.setedit-r .sel{min-height:42px; font-size:15px}
  .setedit-x{grid-column:1/-1; text-align:left}
  .setedit-r [data-act="exask"]{grid-column:1}
  .setedit-r [data-act="exdelset"]{grid-column:2; justify-self:end; min-width:56px}
}

/* ---------- library ---------- */
.lib-row{
  display:grid; grid-template-columns:1fr auto; gap:11px; align-items:center;
  padding:11px 15px; border-bottom:1px solid var(--edge);
}
.lib-row:last-child{border-bottom:none}
.lib-n{min-width:0}
.lib-n b{display:block; font-size:14px; font-weight:600}
.lib-n span{font-size:11.5px; color:var(--faint); font-family:var(--f-m)}
@media (max-width:620px){
  .filters{gap:11px}
}

/* native select popup on Firefox/Linux does not inherit the page colours */
.sel option{background:var(--surface); color:var(--steel)}

/* stop scroll chaining from a modal to the page behind it */
.scrim,.modal,.modal-b{overscroll-behavior:contain}

/* the check-in, read back to the coach */
.ci-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.ci{
  display:flex; flex-direction:column; gap:3px; padding:10px 12px;
  background:var(--sunk); border:1px solid var(--edge); border-radius:var(--r);
}
.ci-k{font-size:10.5px; letter-spacing:.04em; color:var(--faint)}
.ci-v{font-size:13px; color:var(--steel); line-height:1.35}
.ci.bad{border-color:#5A4A18; background:#1C1608}
.ci.bad .ci-v{color:#E5B84B}
.gate-off{border-color:var(--edge-hi); opacity:.85}

/* who this is, in one line, above Progress */
.bio-strip{display:flex; gap:9px; flex-wrap:wrap}
.bio{
  display:inline-flex; align-items:baseline; gap:7px; padding:6px 12px;
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--pill);
}
.bio-k{font-size:10.5px; letter-spacing:.04em; color:var(--faint)}
.bio-v{font-family:var(--f-m); font-size:13px; font-weight:600; color:var(--steel)}
.claimed{
  font-family:var(--f-d); font-size:10px; letter-spacing:.04em; color:var(--faint);
  border:1px solid var(--edge-hi); border-radius:var(--pill); padding:1px 7px; margin-left:6px;
}

/* ---------- form checks ---------- */
.clips{display:flex; flex-direction:column; gap:9px; padding:11px 14px; border-top:1px solid var(--edge)}
.clip{background:var(--sunk); border:1px solid var(--edge); border-radius:var(--r); padding:10px 12px}
.clip.gone{opacity:.7; border-style:dashed}
.clip-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.clip-h b{font-size:13px; font-weight:600}
.clip-m{font-family:var(--f-m); font-size:11px; color:var(--faint)}
.clip-n{font-size:12.5px; color:var(--dim); line-height:1.45; margin-top:6px}
.clip-n b{font-size:10.5px; letter-spacing:.04em; color:var(--faint); margin-right:6px}
.clip-n.coach{border-left:3px solid var(--volt); padding-left:9px}

/* the compression progress bar */
.prog{height:7px; background:var(--sunk); border:1px solid var(--edge); border-radius:var(--pill); overflow:hidden}
.prog i{display:block; height:100%; background:var(--volt); transition:width .2s}