/* ==========================================================================
   SOFLO 365 — stylesheet
   Design tokens first; every colour in the app comes from one of these.
   ========================================================================== */

/* SoFlo Fit Club: black, white and grey. The accent IS the ink — black on the
   light theme, white on the dark one — so buttons and the logo read as one
   thing. Colour appears in exactly one job, status, which makes it mean
   something when it does show up. Every text pair below clears WCAG 4.5:1;
   green and red cannot be told apart under red-green colour blindness at these
   lightnesses, which is why every status carries a written label and never
   leans on its colour alone. */
:root{
  --ground:#F4F4F5; --surface:#FFFFFF; --surface-2:#FAFAFA; --raise:#EEEEF0;
  --ink:#0A0A0B; --ink-2:#52525B; --ink-3:#6B6B73;
  --line:#E3E3E6; --line-2:#EDEDEF;
  --accent:#111113; --accent-ink:#FFFFFF; --accent-soft:#EBEBED;
  --c1:#18181B;                /* the trend line. One series, so it wears ink. */
  --good:#0E5C33; --good-soft:#E0EEE6;
  --warn:#8A6200; --warn-soft:#F6EEDA;
  --crit:#C0322E; --crit-soft:#FBE7E3;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.16);
  --shadow-lg:0 2px 6px rgba(0,0,0,.07), 0 24px 48px -20px rgba(0,0,0,.26);
  --r:14px; --r-sm:9px; --r-lg:20px;
  --sans:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:"Bricolage Grotesque", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}
/* The dark theme is the logo's own ground, and is stepped for it rather than
   flipped: the status hues are lighter steps chosen against near-black. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0A0A; --surface:#151516; --surface-2:#1C1C1E; --raise:#252527;
    --ink:#F6F6F7; --ink-2:#A8A8B0; --ink-3:#84848C;
    --line:#2A2A2D; --line-2:#202022;
    --accent:#FFFFFF; --accent-ink:#0A0A0A; --accent-soft:#252527;
    --c1:#FAFAFA;
    --good:#6ADCA0; --good-soft:#102A1D;
    --warn:#E8BE40; --warn-soft:#2C2313;
    --crit:#FF7A66; --crit-soft:#30170F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 24px 48px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0A0A; --surface:#151516; --surface-2:#1C1C1E; --raise:#252527;
  --ink:#F6F6F7; --ink-2:#A8A8B0; --ink-3:#84848C;
  --line:#2A2A2D; --line-2:#202022;
  --accent:#FFFFFF; --accent-ink:#0A0A0A; --accent-soft:#252527;
  --c1:#FAFAFA;
  --good:#6ADCA0; --good-soft:#102A1D;
  --warn:#E8BE40; --warn-soft:#2C2313;
  --crit:#FF7A66; --crit-soft:#30170F;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 24px 48px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  padding-top:env(safe-area-inset-top,0px);
}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.015em; font-weight:700}
p{margin:0}
img{max-width:100%}
[hidden]{display:none !important}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
/* No blue. In a black-and-white app a link is ink with a quiet underline. */
a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--ink-3); text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink)}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)} .dim{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top chrome ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1200px; margin-inline:auto; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0; overflow:hidden}
.brand > div{min-width:0; overflow:hidden}
.brand b, .brand span{overflow:hidden; text-overflow:ellipsis; max-width:100%}
.seg, .iconbtn{flex:none}
.mark{width:30px;height:30px;border-radius:9px;flex:none;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:-.02em}
/* The logo artwork is white, so it always sits on its own black plate rather
   than on the page — that way it reads in both the light and the dark theme. */
.logoplate{background:#000; display:flex; align-items:center; justify-content:center;
  flex:none; line-height:0; overflow:hidden; border:1px solid var(--line)}
.logoplate.bar{border-radius:11px; padding:5px 9px}
.logoplate.bar img{display:block; height:34px; width:auto}
.logoplate.big{border-radius:18px; padding:26px 22px; width:100%; margin:0 auto 20px}
.logoplate.big img{display:block; width:min(272px,78%); height:auto}
@media (max-width:460px){ .logoplate.big{padding:22px 18px} }
.brand b{font-family:var(--display); font-size:15px; font-weight:700; white-space:nowrap; display:block}
.brand span{font-size:11px; color:var(--ink-3); white-space:nowrap}
.seg{display:flex; gap:2px; padding:3px; background:var(--raise); border-radius:11px; border:1px solid var(--line)}
.seg button{padding:6px 13px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
/* These must sit AFTER the .brand rules above, or the display:block on
   .brand b wins on specificity ties and the name truncates instead of hiding. */
@media (max-width:560px){
  .brand span{display:none}
  .seg button{padding:6px 10px; font-size:12px}
  .topbar-in{gap:8px; padding-inline:14px}
}
/* Below this the switch and the controls need the room; the mark carries the brand. */
@media (max-width:460px){ .brand b{display:none} }
.iconbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-2);flex:none}
.iconbtn:hover{background:var(--surface-2)}

/* ---------- shared pieces ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.stack{display:flex; flex-direction:column; gap:12px; min-width:0}
.row{display:flex; align-items:center; gap:10px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; border:1px solid transparent; white-space:nowrap}
.pill.ok{background:var(--good-soft); color:var(--good)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.crit{background:var(--crit-soft); color:var(--crit)}
.pill.neutral{background:var(--raise); color:var(--ink-2)}
.pill.accent{background:var(--accent-soft); color:var(--accent)}
.pill .tick{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 16px;
  border-radius:11px; font-size:14px; font-weight:650; background:var(--accent); color:var(--accent-ink);
  border:1px solid transparent; text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn.danger{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.btn.sm{padding:7px 12px; font-size:12.5px; border-radius:9px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; filter:none}
.delta{font-family:var(--mono); font-weight:600; font-size:12.5px}
.delta.down{color:var(--good)} .delta.up{color:var(--crit)} .delta.flat{color:var(--ink-3)}
.empty{text-align:center; padding:28px 16px; color:var(--ink-3)}
.empty h3{font-size:15px; color:var(--ink-2); margin-bottom:5px}
.empty p{font-size:13px; max-width:34ch; margin-inline:auto}

/* ---------- login ---------- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px 16px}
.gatebox{width:min(400px,100%); text-align:center}
.gatebox .mark{width:52px;height:52px;border-radius:15px;font-size:17px;margin:0 auto 16px}
.gatebox h1{font-size:26px; margin-bottom:6px}
.gatebox > p{color:var(--ink-2); font-size:14px; margin-bottom:22px}
.gatebox form{display:flex; flex-direction:column; gap:10px; text-align:left}
.gatenote{font-size:12px; color:var(--ink-3); margin-top:16px; line-height:1.55}
/* Shown when a link has already been spent. Text-left because it is two
   sentences of explanation, not a label. */
.gatewarn{background:var(--warn-soft); color:var(--warn); border-radius:12px;
  padding:13px 15px; margin:0 0 18px; text-align:left; font-size:13px; line-height:1.55}
.gatewarn b{display:block; margin-bottom:4px}
.gatewarn p{margin:0; color:var(--warn)}

/* ---------- client column ---------- */
.phone{max-width:460px; margin-inline:auto; padding:0 16px; display:flex; flex-direction:column;
  min-height:calc(100dvh - 60px)}
.phone-body{padding-block:16px 12px; display:flex; flex-direction:column; gap:14px}
.greet h1{font-size:23px; line-height:1.2}
.greet p{font-size:13px; color:var(--ink-2); margin-top:2px}
.progline{display:flex; align-items:center; gap:9px; margin-top:12px}
.track{flex:1; height:6px; border-radius:999px; background:var(--raise); overflow:hidden}
.track i{display:block; height:100%; border-radius:999px; background:var(--accent)}
.due{background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r-lg); padding:16px}
.due .eyebrow{color:inherit; opacity:.66}
.due h3{font-size:17px; margin:4px 0 3px}
.due p{font-size:12.5px; opacity:.82}
.due .btn{background:var(--accent-ink); color:var(--accent); margin-top:12px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 10px}
.tile .lab{font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.tile .val{font-family:var(--mono); font-size:19px; font-weight:600; margin-top:5px; letter-spacing:-.03em}
.tile .val small{font-size:11px; font-weight:500; color:var(--ink-3); margin-left:3px}
.tile .d{margin-top:2px}
.note{display:flex; gap:11px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:12px;background:var(--accent-soft);color:var(--accent)}
.avatar.lg{width:52px;height:52px;font-size:17px}
.note-body p{font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.55; white-space:pre-wrap}
.mealrow{display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line-2)}
.mealrow:first-of-type{border-top:none}

.tabbar{position:sticky; bottom:0; z-index:50; margin-top:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-bottom:none; border-radius:16px 16px 0 0;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px))}
.tabbar button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  font-size:10.5px; font-weight:600; color:var(--ink-3); border-radius:10px}
.tabbar button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-pressed="true"]{color:var(--accent)}
.tabbar button[aria-pressed="true"] svg{stroke-width:2.1}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:12px; font-weight:650; color:var(--ink-2)}
.inp{width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); font-family:var(--mono); font-size:15px}
.inp:focus{border-color:var(--accent); background:var(--surface); outline:none}
.inp.text{font-family:var(--sans)}
textarea.inp{font-family:var(--sans); resize:vertical; min-height:74px; line-height:1.5}
select.inp{padding-right:30px; font-family:var(--sans); font-size:14px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.unit{position:relative}
.unit span{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11.5px;
  color:var(--ink-3); pointer-events:none}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  font-size:12.5px; font-weight:600; color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.sectionlab{display:flex; align-items:center; gap:9px}
.sectionlab .line{flex:1; height:1px; background:var(--line)}

/* ---------- photos ---------- */
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.slot{position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
  border:1.5px dashed var(--line); background:var(--surface-2); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; color:var(--ink-3); font-size:11px;
  font-weight:600; cursor:pointer; padding:6px; text-align:center}
.slot:hover{border-color:var(--accent); color:var(--accent)}
.slot.filled{border-style:solid; border-color:var(--accent); color:var(--ink)}
.slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slot .cap{position:absolute; left:0; right:0; bottom:0; padding:5px 7px; font-size:10px; font-weight:700;
  background:linear-gradient(transparent, rgba(0,0,0,.82)); color:#fff; text-align:left}
.slot input{position:absolute; inset:0; opacity:0; cursor:pointer}
.slot svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.shot{border-radius:12px; overflow:hidden; border:1px solid var(--line); position:relative;
  background:var(--surface-2); aspect-ratio:3/4}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot .cap{position:absolute; left:0; right:0; bottom:0; padding:7px 9px;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); color:#fff}
.shot .cap b{display:block; font-size:12px}
.shot .cap span{font-size:10.5px; opacity:.85; font-family:var(--mono)}
.shot .missing{display:grid; place-items:center; height:100%; color:var(--ink-3); font-size:11px}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.timeline{display:flex; gap:9px; overflow-x:auto; padding-bottom:4px}
.timeline .shot{flex:none; width:104px}

/* ---------- charts ---------- */
.chartwrap{position:relative; width:100%}
.chartwrap svg{display:block; width:100%; height:auto; overflow:visible}
.tipbox{position:absolute; pointer-events:none; opacity:0; transition:opacity .12s;
  background:var(--ink); color:var(--ground); padding:7px 10px; border-radius:9px; font-size:11.5px;
  font-weight:600; white-space:nowrap; z-index:5; transform:translate(-50%,-125%); box-shadow:var(--shadow)}
.spark{width:84px; height:26px; display:block}

/* ---------- files & history ---------- */
.filerow{display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line-2)}
.filerow:first-of-type{border-top:none}
.fileicon{width:34px;height:42px;border-radius:5px;background:var(--crit-soft);color:var(--crit);
  display:grid;place-items:center;font-size:9px;font-weight:800;flex:none;
  border:1px solid color-mix(in srgb, var(--crit) 25%, transparent)}
.hist{display:flex; flex-direction:column}
.histrow{display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--line-2)}
.histrow:first-child{border-top:none}
.wk{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;flex:none}
.exrow{display:flex; justify-content:space-between; gap:10px; padding:9px 0;
  border-top:1px solid var(--line-2); font-size:13.5px}
.exrow:first-of-type{border-top:none}

/* ---------- coach ---------- */
.coach{max-width:1200px; margin-inline:auto; padding:18px 16px 48px}
.coachhead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:16px}
.coachhead h1{font-size:25px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; margin-bottom:16px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px}
.kpi .val{font-family:var(--mono); font-size:25px; font-weight:600; letter-spacing:-.03em;
  margin-top:6px; line-height:1.1}
.kpi .val small{font-size:12px; color:var(--ink-3); font-weight:500}
.kpi .sub{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.kpi.alert{border-color:color-mix(in srgb, var(--warn) 55%, var(--line))}
.kpi.alert .val{color:var(--warn)}
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(250px,330px)} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.panelhead{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; border-bottom:1px solid var(--line)}
.panelhead h3{font-size:14.5px}
.panelbody{padding:14px 15px}
.tablewrap{overflow-x:auto; overscroll-behavior-x:contain;
  background:
    linear-gradient(to right, var(--surface), transparent) left center / 22px 100% no-repeat local,
    linear-gradient(to left,  var(--surface), transparent) right center / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), transparent) left center / 9px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), transparent) right center / 9px 100% no-repeat scroll}
table{border-collapse:collapse; width:100%; min-width:560px; table-layout:auto}
th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 11px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface-2)}
td{padding:10px 11px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
.who{display:flex; align-items:center; gap:10px; min-width:0}
.who b{font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who span{font-size:11px; color:var(--ink-3); white-space:nowrap; display:block;
  overflow:hidden; text-overflow:ellipsis}
.who > div{min-width:0}
/* Cap the name cell so a long programme title cannot push the status pill past
   the panel's edge — it truncates instead. */
table.roster td:first-child{max-width:210px}
.adh{display:flex; align-items:center; gap:8px; min-width:88px}
.adh .bar{flex:1; height:5px; border-radius:999px; background:var(--raise); overflow:hidden}
.adh .bar i{display:block; height:100%; border-radius:999px}
.adh .pct{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); width:34px; text-align:right}
.flag{display:flex; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line-2);
  align-items:flex-start; width:100%; text-align:left}
.flag:last-child{border-bottom:none}
.flag:hover{background:var(--surface-2)}
.flagdot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.flag b{font-size:13.5px; font-weight:600}
.flag p{font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.45}
/* A button that reads as a link — used for "Forgot your password?" and the
   quieter escape hatches, where a full button would shout. */
.linkbtn{font-size:13px; font-weight:650; color:var(--ink); text-decoration:underline;
  text-underline-offset:2px; text-decoration-color:var(--ink-3); padding:10px 4px}
.linkbtn:hover{text-decoration-color:var(--ink)}
.linkbtn.danger{color:var(--crit); text-decoration-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.linkbtn.danger:hover{text-decoration-color:var(--crit)}

/* ---------- content library ----------
   A shelf you scan rather than read, so the picture leads and the words
   follow. auto-fill with a minimum means one column on a phone and as many as
   fit on a desktop, without a breakpoint for each step. */
.libgrid{display:grid; gap:14px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr))}
.libcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; min-width:0}
/* 4:5 is the shape most of this material is cut for — a portrait post. A clip
   or a flyer sits inside the same box so the rows stay level. */
.libface{display:block; width:100%; aspect-ratio:4/5; background:var(--surface-2);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden; padding:0}
.libface img{width:100%; height:100%; object-fit:cover; display:block}
.libface:hover img{transform:scale(1.02)}
.libface img{transition:transform .25s ease}
.libicon{position:absolute; inset:0; display:grid; place-items:center;
  font-size:34px; color:var(--ink-3)}
.libbody{padding:12px 13px 13px; display:flex; flex-direction:column; gap:6px; min-width:0; flex:1}
.libbody h3{font-size:14px; line-height:1.35; overflow-wrap:anywhere}
.libbody .dim{font-size:11.5px; color:var(--ink-3)}
.libnote{font-size:12.5px; color:var(--ink-2); line-height:1.5}
/* Pushed to the foot of the card so the buttons line up across a row however
   long the titles and notes run. */
.libbody .row{margin-top:auto; padding-top:8px; align-items:center; gap:10px}
/* Two up on a phone. One full-width card per row turns a shelf of ten things
   into a very long scroll, and the point of this screen is picking one out. */
@media (max-width:560px){
  .libgrid{gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 148px), 1fr))}
  .libbody{padding:10px 11px 11px}
  .libbody h3{font-size:13px}
  .libbody .row{gap:8px; flex-wrap:wrap}
}
.gatebox .linkbtn{margin-top:4px}
.gatenote .linkbtn{font-size:inherit; font-weight:600; padding:0}
.backlink{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:650;
  color:var(--ink-2); margin-bottom:12px}
.backlink:hover{color:var(--ink)}
.detailhead{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
/* minmax(0,…) not 1fr: a grid track defaults to min-width:auto, which lets a
   wide table inside stretch the whole page sideways on a phone. */
.detailgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media (min-width:860px){ .detailgrid{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)} }
.assign{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-2)}
.assign:first-of-type{border-top:none}

/* A client's file: their details, and the latest check-in laid out in full. */
/* The reach-them row: text first, because that is the one that gets answered. */
.reach{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.reach .btn{flex:1 1 auto; min-width:104px; text-decoration:none}
.reach .btn svg{flex:none}
.dl{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px 14px; margin-top:12px}
.dl.wide{grid-template-columns:1fr 1fr; margin-top:0}
.dl dt{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.dl dd{font-size:13.5px; font-weight:600; margin-top:2px; word-break:break-word}
.dl dd a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--ink-3)}
.dl dd a:hover{text-decoration-color:var(--ink)}
.poses{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.poses .shot{aspect-ratio:3/4}
.quote{margin-top:13px; padding:11px 13px; border-radius:11px; background:var(--surface-2);
  border-left:3px solid var(--accent); font-size:13px; line-height:1.55; white-space:pre-wrap}
/* The history table is for reading, not clicking, so no row cursor or hover. */
table.flat tbody tr{cursor:default}
table.flat tbody tr:hover{background:transparent}
table.flat{min-width:520px}
/* Checkbox with a line of explanation under its label. */
.check{display:flex; gap:10px; align-items:flex-start; cursor:pointer; padding:2px 0}
.check input{width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--accent)}
.check span{font-size:13.5px; font-weight:600; line-height:1.35}
.check small{display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:2px}

/* ---------- overlays ---------- */
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,16px); background:var(--ink); color:var(--ground); padding:11px 16px;
  border-radius:12px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:min(92vw,420px)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--crit); color:#fff}
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:16px}
.modal .scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.modal .sheet{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); width:min(520px,100%); max-height:86vh; overflow:auto;
  box-shadow:var(--shadow-lg); padding:18px}
.success{text-align:center; padding:26px 16px}
.success .ring{width:62px;height:62px;border-radius:50%;background:var(--good-soft);color:var(--good);
  display:grid;place-items:center;margin:0 auto 14px}
.success .ring svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid; place-items:center; min-height:50dvh; color:var(--ink-3); gap:10px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }