/* ==========================================================================
   IRONLOG — mobile-first dark UI
   Palette: charcoal greys + black, deep burgundy / red accents
   ========================================================================== */

:root{
  --black:#08080a;
  --bg:#131316;
  --bg-2:#0f0f12;
  --surface:#1c1c20;
  --surface-2:#25252b;
  --surface-3:#2f2f36;
  --line:#34343c;
  --line-soft:#26262d;

  --txt:#eceaea;
  --dim:#9d9aa1;
  --faint:#6d6a73;

  --burg:#6f1626;          /* deep burgundy */
  --burg-2:#8c1c30;
  --burg-lit:#a92639;
  --red:#d3374b;           /* bright accent */
  --red-glow:rgba(211,55,75,.28);

  --ok:#4a9d6a;
  --warn:#c8912f;

  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --tabbar-h:64px;

  --ease:cubic-bezier(.22,.8,.3,1);

  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

html{
  background:var(--black);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--ff);
  color:var(--txt);
  background:var(--black);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
input,textarea,select{ -webkit-appearance:none; appearance:none; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::-webkit-scrollbar{ width:0; height:0; }

/* ---------- desktop gate ---------------------------------------------- */

#desktop-gate{ display:none; }

@media (min-width:721px){
  #desktop-gate{
    display:flex; position:fixed; inset:0; z-index:9000;
    align-items:center; justify-content:center; padding:24px;
    background:
      radial-gradient(900px 600px at 50% -10%, rgba(111,22,38,.30), transparent 65%),
      var(--black);
  }
  #phone{ display:none; }
  .dg-card{
    max-width:440px; text-align:center;
    background:linear-gradient(180deg,var(--surface),var(--bg));
    border:1px solid var(--line); border-radius:var(--r-xl);
    padding:44px 32px 36px;
    box-shadow:0 40px 90px rgba(0,0,0,.7);
  }
  .dg-mark{
    font-weight:800; letter-spacing:.34em; font-size:13px;
    color:var(--red); margin-bottom:22px;
  }
  .dg-card h1{ font-size:27px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px; }
  .dg-card p{ color:var(--dim); font-size:15px; line-height:1.6; }
  .dg-url{
    margin:22px 0 14px; padding:13px 16px; border-radius:var(--r);
    background:var(--black); border:1px solid var(--line);
    font-family:var(--ff-mono); font-size:13px; color:var(--red);
    word-break:break-all;
  }
  .dg-fine{ margin-top:20px !important; font-size:12.5px; color:var(--faint); }
}

/* ---------- phone frame ------------------------------------------------ */

#phone{
  position:fixed; inset:0;
  max-width:520px; margin:0 auto;
  background:var(--bg);
  overflow:hidden;
}

#screens{ position:absolute; inset:0; }

.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  background:var(--bg);
}
.screen.is-active{ display:flex; }

/* ---------- primitives ------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r); font-weight:650; letter-spacing:.01em;
  padding:13px 20px; font-size:15px; line-height:1;
  transition:transform .12s var(--ease), filter .16s var(--ease), background .16s;
  border:1px solid transparent; white-space:nowrap;
}
.btn:active{ transform:scale(.975); }
.btn:disabled{ opacity:.4; pointer-events:none; }

.btn-primary{
  background:linear-gradient(160deg,var(--burg-lit),var(--burg));
  color:#fff; border-color:rgba(211,55,75,.42);
  box-shadow:0 8px 22px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.13);
}
.btn-ghost{
  background:var(--surface-2); color:var(--txt);
  border-color:var(--line);
}
.btn-quiet{ background:transparent; color:var(--dim); border-color:var(--line-soft); }
.btn-danger{ background:transparent; color:var(--red); border-color:rgba(211,55,75,.4); }
.btn-lg{ width:100%; padding:16px 20px; font-size:16px; border-radius:var(--r-lg); }
.btn-sm{ padding:9px 14px; font-size:13.5px; border-radius:10px; }
.btn-xs{ padding:6px 11px; font-size:12px; border-radius:8px; }

.icon-btn{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:50%; color:var(--dim); font-size:17px;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.icon-btn:active{ background:var(--surface-3); }

.field{ display:block; margin-bottom:14px; }
.field > span{
  display:block; font-size:12px; font-weight:650; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); font-size:16px; color:var(--txt);
  transition:border-color .16s, background .16s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--burg-lit); background:var(--surface-2);
}
.field input::placeholder{ color:var(--faint); }
.field[data-only]{ display:none; }
.field[data-only].show{ display:block; }

.form-msg{ min-height:18px; font-size:13.5px; color:var(--red); margin:2px 0 10px; }
.form-msg.ok{ color:var(--ok); }

.fine{ font-size:12.5px; line-height:1.55; color:var(--faint); margin-top:14px; text-align:center; }

.or{ position:relative; text-align:center; margin:22px 0 16px; }
.or::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-soft); }
.or span{ position:relative; background:var(--bg); padding:0 12px; font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.14em; }

.seg{
  display:flex; gap:4px; padding:4px; margin-bottom:22px;
  background:var(--black); border:1px solid var(--line-soft); border-radius:var(--r);
}
.seg-btn{
  flex:1; padding:11px 8px; border-radius:10px; font-size:14px; font-weight:600;
  color:var(--dim); transition:all .18s var(--ease);
}
.seg-btn.is-on{ background:var(--surface-2); color:var(--txt); box-shadow:0 2px 8px rgba(0,0,0,.4); }

.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:18px;
}
.card + .card{ margin-top:12px; }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:650;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--surface-2); color:var(--dim); border:1px solid var(--line-soft);
}
.pill-red{ background:rgba(211,55,75,.13); color:var(--red); border-color:rgba(211,55,75,.3); }
.pill-ok{ background:rgba(74,157,106,.13); color:var(--ok); border-color:rgba(74,157,106,.3); }

.eyebrow{
  font-size:11px; font-weight:750; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.h-xl{ font-size:28px; font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.h-lg{ font-size:21px; font-weight:750; letter-spacing:-.015em; }
.h-md{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.muted{ color:var(--dim); font-size:14px; line-height:1.6; }
.tiny{ color:var(--faint); font-size:12.5px; line-height:1.5; }

.divider{ height:1px; background:var(--line-soft); margin:16px 0; }

.empty{
  text-align:center; padding:48px 26px; color:var(--faint);
}
.empty .ei{ font-size:34px; color:var(--surface-3); margin-bottom:14px; }
.empty h3{ font-size:16px; color:var(--dim); font-weight:650; margin-bottom:7px; }
.empty p{ font-size:13.5px; line-height:1.6; }

/* ---------- boot ------------------------------------------------------- */

#s-boot{ background:var(--black); }
.boot-wrap{
  flex:1; display:grid; place-content:center; justify-items:center; gap:26px;
  background:radial-gradient(600px 400px at 50% 42%, rgba(111,22,38,.35), transparent 70%);
}
.boot-mark{
  font-size:22px; font-weight:800; letter-spacing:.4em; color:var(--txt);
  text-indent:.4em;
}
.boot-bar{ width:120px; height:3px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.boot-bar i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg,var(--burg),var(--red));
  animation:bootslide 1.1s var(--ease) infinite;
}
@keyframes bootslide{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(360%);} }

/* ---------- auth ------------------------------------------------------- */

#s-auth{ overflow-y:auto; }
.auth-hero{
  padding:calc(var(--safe-t) + 74px) 26px 40px;
  background:
    radial-gradient(520px 340px at 50% -8%, rgba(140,28,48,.44), transparent 68%),
    linear-gradient(180deg,var(--black),var(--bg));
  text-align:center;
  border-bottom:1px solid var(--line-soft);
}
.brand-mark{
  font-size:30px; font-weight:800; letter-spacing:.28em; text-indent:.28em;
  background:linear-gradient(180deg,#fff,#c9c6c8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{
  margin-top:10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); font-weight:650;
}
.auth-body{ padding:26px 22px calc(var(--safe-b) + 40px); }

/* ---------- survey ----------------------------------------------------- */

.sv-head{
  display:flex; align-items:center; gap:14px;
  padding:calc(var(--safe-t) + 14px) 18px 14px;
  border-bottom:1px solid var(--line-soft); background:var(--bg-2);
}
.sv-progress{ flex:1; height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; }
.sv-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--burg),var(--red));
  transition:width .38s var(--ease);
}
.sv-count{ font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:30px; text-align:right; }

.sv-body{ flex:1; overflow-y:auto; padding:30px 22px 24px; -webkit-overflow-scrolling:touch; }
.sv-foot{
  padding:14px 22px calc(var(--safe-b) + 18px);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(19,19,22,.6), var(--bg));
  backdrop-filter:blur(12px);
}

.q-eyebrow{ font-size:11px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.q-title{ font-size:25px; font-weight:800; letter-spacing:-.025em; line-height:1.2; margin-bottom:9px; }
.q-help{ font-size:14px; color:var(--dim); line-height:1.55; margin-bottom:26px; }

.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 17px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line-soft);
  transition:all .16s var(--ease);
}
.opt:active{ transform:scale(.985); }
.opt.is-on{
  border-color:var(--burg-lit);
  background:linear-gradient(150deg, rgba(169,38,57,.18), var(--surface));
  box-shadow:0 0 0 1px rgba(169,38,57,.32), 0 10px 24px -16px var(--red-glow);
}
.opt-ico{
  width:40px; height:40px; flex:0 0 40px; border-radius:11px;
  display:grid; place-items:center; font-size:19px;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.opt.is-on .opt-ico{ background:rgba(169,38,57,.24); border-color:rgba(211,55,75,.36); }
.opt-txt{ flex:1; min-width:0; }
.opt-txt b{ display:block; font-size:15px; font-weight:650; margin-bottom:2px; }
.opt-txt span{ display:block; font-size:12.8px; color:var(--faint); line-height:1.45; }
.opt-check{
  width:21px; height:21px; flex:0 0 21px; border-radius:50%;
  border:2px solid var(--line); display:grid; place-items:center;
  font-size:11px; color:transparent; transition:all .16s;
}
.opt.is-on .opt-check{ border-color:var(--red); background:var(--red); color:#fff; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }

.chip{
  padding:14px 8px; border-radius:var(--r); text-align:center;
  background:var(--surface); border:1px solid var(--line-soft);
  font-size:15px; font-weight:650; transition:all .16s var(--ease);
}
.chip small{ display:block; font-size:11.5px; color:var(--faint); font-weight:500; margin-top:3px; }
.chip.is-on{
  border-color:var(--burg-lit); color:#fff;
  background:linear-gradient(150deg, rgba(169,38,57,.24), var(--surface));
  box-shadow:0 0 0 1px rgba(169,38,57,.3);
}
.chip.is-on small{ color:rgba(255,255,255,.66); }

.unit-row{ display:flex; gap:10px; }
.unit-row .field{ flex:1; margin-bottom:0; }

/* ---------- plan reveal ------------------------------------------------ */

.reveal-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sticky-foot{
  padding:14px 20px calc(var(--safe-b) + 18px);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(19,19,22,.75), var(--bg));
  backdrop-filter:blur(14px);
}

.reveal-hero{
  padding:calc(var(--safe-t) + 44px) 24px 34px;
  background:
    radial-gradient(560px 320px at 50% 0%, rgba(140,28,48,.42), transparent 70%),
    linear-gradient(180deg,var(--black),var(--bg));
  text-align:center; border-bottom:1px solid var(--line-soft);
}

.macro-ring{ display:flex; justify-content:center; margin:24px 0 6px; }
.kcal-big{
  font-size:52px; font-weight:800; letter-spacing:-.045em; line-height:1;
  background:linear-gradient(180deg,#fff,var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.kcal-unit{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:8px; }

.macro-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:22px; }
.macro{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:14px 8px; text-align:center;
}
.macro b{ display:block; font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; }
.macro span{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:4px; }
.macro i{ display:block; height:3px; border-radius:2px; margin:0 auto 10px; width:26px; }
.m-p i{ background:var(--red); }
.m-c i{ background:var(--warn); }
.m-f i{ background:#5b7fa8; }

.sec{ padding:26px 20px 6px; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sec-head h3{ font-size:17px; font-weight:750; letter-spacing:-.01em; }

.day-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:11px;
}
.day-top{
  display:flex; align-items:center; gap:13px; padding:15px 17px;
  border-left:3px solid var(--burg-lit);
}
.day-top.rest{ border-left-color:var(--surface-3); }
.day-dow{
  width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  background:var(--surface-2); display:grid; place-items:center;
  font-size:11.5px; font-weight:750; letter-spacing:.06em; color:var(--dim);
  text-transform:uppercase;
}
.day-info{ flex:1; min-width:0; }
.day-info b{ display:block; font-size:15.5px; font-weight:700; }
.day-info span{ display:block; font-size:12.5px; color:var(--faint); margin-top:2px; }
.day-ex{
  padding:2px 17px 15px 68px; display:flex; flex-direction:column; gap:7px;
  border-top:1px solid var(--line-soft); padding-top:13px; margin-top:0;
}
.day-ex li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--dim); }
.day-ex li span{ color:var(--faint); font-variant-numeric:tabular-nums; flex:0 0 auto; }

.meal{
  display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.meal:last-child{ border-bottom:0; }
.meal-kcal{
  flex:0 0 62px; text-align:center; padding-top:2px;
}
.meal-kcal b{ display:block; font-size:17px; font-weight:750; color:var(--red); font-variant-numeric:tabular-nums; }
.meal-kcal span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.meal-body b{ display:block; font-size:14.5px; font-weight:650; margin-bottom:4px; }
.meal-body p{ font-size:13px; color:var(--faint); line-height:1.55; }

/* ---------- tabs ------------------------------------------------------- */

.tabview{
  position:absolute; inset:0 0 var(--tabbar-h) 0;
  display:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:24px;
}
.tabview.is-active{ display:block; }

#tabbar{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(12,12,14,.93);
  backdrop-filter:blur(20px) saturate(1.3);
  border-top:1px solid var(--line-soft);
  z-index:50;
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--faint);
  transition:color .16s;
}
.tab .ti{ font-size:15px; line-height:1; }
.tab.is-on{ color:var(--red); }

.view-head{
  padding:calc(var(--safe-t) + 22px) 20px 16px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:1px solid var(--line-soft);
}
.view-head .eyebrow{ margin-bottom:6px; }
.view-pad{ padding:20px; }

/* ---------- today ------------------------------------------------------ */

.hero-workout{
  margin:20px; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid rgba(169,38,57,.3);
  background:
    radial-gradient(420px 260px at 88% -20%, rgba(169,38,57,.4), transparent 70%),
    linear-gradient(160deg,var(--surface-2),var(--bg-2));
  box-shadow:0 20px 44px -26px rgba(0,0,0,.9);
}
.hw-top{ padding:22px 20px 18px; }
.hw-name{ font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:8px 0 10px; }
.hw-meta{ display:flex; flex-wrap:wrap; gap:7px; }
.hw-list{ padding:0 20px 6px; }
.hw-list li{
  display:flex; align-items:center; gap:11px; padding:11px 0;
  border-top:1px solid var(--line-soft); font-size:14px;
}
.hw-list li .n{
  width:22px; height:22px; flex:0 0 22px; border-radius:6px;
  background:var(--surface-3); color:var(--dim);
  display:grid; place-items:center; font-size:11px; font-weight:700;
}
.hw-list li .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-list li .sr{ color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums; }
.hw-cta{ padding:16px 20px calc(var(--safe-b) + 4px); }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 20px; }
.stat{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:15px 10px; text-align:center;
}
.stat b{ display:block; font-size:23px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat span{ display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:5px; }
.stat.hot b{ color:var(--red); }

.macro-track{ margin-top:12px; }
.mt-row{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.mt-row:last-child{ margin-bottom:0; }
.mt-lbl{ flex:0 0 54px; font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.mt-dot{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; }
.mt-bar{ flex:1; height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.mt-bar i{ display:block; height:100%; border-radius:4px; transition:width .45s var(--ease); }
.mt-val{ flex:0 0 auto; font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums; }

/* ---------- session runner --------------------------------------------- */

.sheet-full{
  position:absolute; inset:0; z-index:400;
  background:var(--bg); display:none; flex-direction:column;
}
.sheet-full.is-open{ display:flex; animation:slideUp .3s var(--ease); }
@keyframes slideUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }

.run-head{
  display:flex; align-items:center; gap:12px;
  padding:calc(var(--safe-t) + 12px) 16px 12px;
  border-bottom:1px solid var(--line-soft); background:var(--bg-2);
}
.run-title{ flex:1; min-width:0; }
.run-title strong{ display:block; font-size:16px; font-weight:750; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.run-title span{ display:block; font-size:12.5px; color:var(--red); font-variant-numeric:tabular-nums; margin-top:2px; }
.run-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 14px 120px; }

.ex-block{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden;
}
.ex-block.done{ border-color:rgba(74,157,106,.3); }
.ex-head{ display:flex; align-items:flex-start; gap:12px; padding:15px 16px 12px; }
.ex-head .idx{
  width:26px; height:26px; flex:0 0 26px; border-radius:8px; margin-top:1px;
  background:var(--surface-3); color:var(--dim);
  display:grid; place-items:center; font-size:12px; font-weight:750;
}
.ex-block.done .ex-head .idx{ background:rgba(74,157,106,.2); color:var(--ok); }
.ex-head-txt{ flex:1; min-width:0; }
.ex-head-txt b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.ex-head-txt span{ display:block; font-size:12.5px; color:var(--faint); margin-top:3px; }
.ex-info{ color:var(--faint); font-size:15px; padding:2px 4px; }

.set-tbl{ padding:0 12px 12px; }
.set-hdr{
  display:grid; grid-template-columns:34px 1fr 1fr 44px; gap:8px;
  padding:0 4px 8px; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); font-weight:650;
}
.set-row{
  display:grid; grid-template-columns:34px 1fr 1fr 44px; gap:8px;
  align-items:center; margin-bottom:8px;
}
.set-n{
  height:42px; border-radius:10px; background:var(--surface-2);
  display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--dim);
}
.set-row.on .set-n{ background:rgba(169,38,57,.22); color:var(--red); }
.set-row input{
  width:100%; height:42px; text-align:center; font-size:16px; font-weight:650;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:10px; color:var(--txt); font-variant-numeric:tabular-nums;
}
.set-row input:focus{ outline:none; border-color:var(--burg-lit); background:var(--surface-3); }
.set-row input::placeholder{ color:var(--faint); font-weight:400; }
.set-ck{
  height:42px; border-radius:10px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-soft);
  color:var(--faint); font-size:16px; transition:all .16s;
}
.set-row.on .set-ck{
  background:linear-gradient(160deg,var(--burg-lit),var(--burg));
  border-color:rgba(211,55,75,.4); color:#fff;
}
.set-add{
  width:100%; padding:11px; border-radius:10px; margin-top:2px;
  background:transparent; border:1px dashed var(--line);
  color:var(--faint); font-size:13px; font-weight:600;
}
.set-prev{ font-size:11.5px; color:var(--faint); padding:0 4px 8px; font-variant-numeric:tabular-nums; }

#rest-bar{
  position:absolute; left:14px; right:14px; bottom:calc(var(--safe-b) + 16px);
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--burg-lit),var(--burg));
  box-shadow:0 16px 34px -14px rgba(0,0,0,.9);
  z-index:20;
}
#rest-bar[hidden]{ display:none; }
#rest-bar span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }
#rest-bar strong{ flex:1; font-size:22px; font-weight:750; font-variant-numeric:tabular-nums; color:#fff; }
#rest-bar .btn{ background:rgba(0,0,0,.28); color:#fff; border-color:rgba(255,255,255,.2); }

/* ---------- sheet ------------------------------------------------------- */

.sheet{ position:absolute; inset:0; z-index:600; display:none; }
.sheet.is-open{ display:block; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.68); animation:fade .22s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.sheet-panel{
  /* Lifted clear of the on-screen keyboard and shrunk to match, so the field
     you are typing into and the list you are choosing from both stay
     reachable. --kb-inset is maintained in ui.js. */
  position:absolute; left:0; right:0;
  bottom:var(--kb-inset, 0px);
  max-height:calc(92% - var(--kb-inset, 0px));
  transition:bottom .18s var(--ease), max-height .18s var(--ease);
  display:flex; flex-direction:column;
  background:var(--surface); border-top:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  animation:slideUp .3s var(--ease);
  padding-bottom:var(--safe-b);
}
.sheet-grab{ width:38px; height:4px; border-radius:2px; background:var(--surface-3); margin:10px auto 4px; }
.sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 16px 12px; border-bottom:1px solid var(--line-soft);
}
.sheet-head strong{ font-size:17px; font-weight:750; letter-spacing:-.01em; }
.sheet-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 18px 26px; }

.pick-row{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 14px; border-radius:var(--r); margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.pick-row b{ display:block; font-size:14.5px; font-weight:650; }
.pick-row span{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }
.pick-row .pr-txt{ flex:1; min-width:0; }

/* ---------- feed -------------------------------------------------------- */

.post{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:14px;
}
.post-head{ display:flex; align-items:center; gap:12px; padding:15px 16px 13px; }
.avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; font-weight:750; color:#fff;
  background:linear-gradient(155deg,var(--burg-lit),var(--burg));
  border:1px solid rgba(211,55,75,.32);
}
.post-who{ flex:1; min-width:0; }
.post-who b{ display:block; font-size:14.5px; font-weight:700; }
.post-who span{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }

.post-photo{
  width:100%; display:block; aspect-ratio:4/5; object-fit:cover;
  background:var(--black); border-block:1px solid var(--line-soft);
}
.proof-tag{
  position:relative; margin:-38px 12px 0; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:rgba(8,8,10,.8); backdrop-filter:blur(10px);
  border:1px solid rgba(211,55,75,.45);
}
.post-title{ padding:14px 16px 4px; font-size:17px; font-weight:750; letter-spacing:-.015em; }
.post-stats{ display:flex; gap:18px; padding:8px 16px 14px; }
.post-stats div b{ display:block; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.post-stats div span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.post-ex{ padding:0 16px 14px; }
.post-ex li{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--dim);
}
.post-ex li span{ color:var(--faint); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.post-note{ padding:0 16px 14px; font-size:13.5px; color:var(--dim); line-height:1.55; font-style:italic; }
.post-foot{
  display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line-soft);
  background:var(--bg-2);
}
.react{
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--line-soft);
  font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums;
}
.react.on{ background:rgba(211,55,75,.16); border-color:rgba(211,55,75,.35); color:var(--red); }

.crew-strip{ display:flex; gap:12px; overflow-x:auto; padding:16px 20px 4px; }
.crew-mini{ flex:0 0 auto; text-align:center; width:62px; }
.crew-mini .avatar{ width:52px; height:52px; flex-basis:52px; margin:0 auto 6px; font-size:18px; }
.crew-mini.dim .avatar{ background:var(--surface-2); color:var(--faint); border-color:var(--line-soft); }
.crew-mini b{ display:block; font-size:11px; font-weight:600; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crew-mini i{ display:block; font-size:10px; color:var(--faint); font-style:normal; margin-top:1px; }

/* ---------- progress ----------------------------------------------------- */

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-cell{
  aspect-ratio:1; border-radius:6px; background:var(--surface-2);
  display:grid; place-items:center; font-size:10px; color:var(--faint);
}
.cal-cell.hit{ background:linear-gradient(150deg,var(--burg-lit),var(--burg)); color:#fff; font-weight:700; }
.cal-cell.today{ box-shadow:0 0 0 1.5px var(--red); }
.cal-dow{ font-size:10px; text-align:center; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }

.chart{ height:120px; display:flex; align-items:flex-end; gap:5px; padding-top:8px; }
.bar{ flex:1 1 0; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--burg-lit),var(--burg));
  min-height:3px; align-self:flex-end; position:relative; }
/* NB: not ".bar.empty" — that collides with the .empty empty-state
   utility below, whose 48px padding forced these bars to 96px tall. */
.bar.blank{ background:var(--surface-2); }
.chart-x{ display:flex; gap:5px; margin-top:7px; }
.chart-x span{ flex:1; text-align:center; font-size:9.5px; color:var(--faint); }

.hist-row{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px 15px; border-radius:var(--r); margin-bottom:9px;
  background:var(--surface); border:1px solid var(--line-soft);
}
.hist-date{
  flex:0 0 46px; text-align:center; padding:6px 0; border-radius:9px;
  background:var(--surface-2);
}
.hist-date b{ display:block; font-size:16px; font-weight:750; line-height:1; }
.hist-date span{ display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:3px; }
.hist-body{ flex:1; min-width:0; }
.hist-body b{ display:block; font-size:14.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-body span{ display:block; font-size:12px; color:var(--faint); margin-top:3px; }
.hist-thumb{ width:40px; height:40px; flex:0 0 40px; border-radius:9px; object-fit:cover; background:var(--black); }

.pr-row{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.pr-row:last-child{ border-bottom:0; }
.pr-row .pr-n{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-row .pr-v{ font-size:14px; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; }

/* ---------- me ----------------------------------------------------------- */

.me-hero{
  padding:calc(var(--safe-t) + 34px) 20px 26px; text-align:center;
  background:radial-gradient(400px 240px at 50% 0%, rgba(140,28,48,.34), transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:1px solid var(--line-soft);
}
.me-hero .avatar{ width:74px; height:74px; flex-basis:74px; margin:0 auto 14px; font-size:27px; }
.me-name{ font-size:21px; font-weight:750; letter-spacing:-.015em; }
.me-mail{ font-size:13px; color:var(--faint); margin-top:4px; }

.list-item{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:15px 16px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--r); margin-bottom:9px;
}
.list-item .li-txt{ flex:1; min-width:0; }
.list-item b{ display:block; font-size:14.5px; font-weight:600; }
.list-item span{ display:block; font-size:12.5px; color:var(--faint); margin-top:3px; line-height:1.45; }
.list-item .chev{ color:var(--surface-3); font-size:16px; }

/* ---------- photo capture ------------------------------------------------- */

.proof-drop{
  width:100%; aspect-ratio:4/5; border-radius:var(--r-lg);
  border:1.5px dashed var(--line); background:var(--bg-2);
  display:grid; place-items:center; align-content:center; gap:10px;
  color:var(--faint); text-align:center; padding:20px; overflow:hidden;
}
.proof-drop .pi{ font-size:32px; color:var(--surface-3); }
.proof-drop b{ font-size:14.5px; color:var(--dim); font-weight:650; }
.proof-drop p{ font-size:12.5px; line-height:1.5; }
.proof-drop img{ width:100%; height:100%; object-fit:cover; border-radius:calc(var(--r-lg) - 2px); }
.proof-drop.has{ border-style:solid; border-color:rgba(211,55,75,.4); padding:0; }

/* ---------- toast --------------------------------------------------------- */

#toast{
  /* --kb-inset tracks the on-screen keyboard (set in ui.js). Without it a
     toast renders underneath the keyboard, which is precisely when it is
     needed: every validation message fires while someone is typing. */
  position:absolute; left:16px; right:16px;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px + var(--kb-inset, 0px));
  transition:bottom .18s var(--ease);
  z-index:900; pointer-events:none;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.toast{
  max-width:100%; padding:12px 18px; border-radius:999px;
  background:rgba(20,20,24,.96); border:1px solid var(--line);
  backdrop-filter:blur(14px); font-size:13.5px; font-weight:600;
  box-shadow:0 14px 32px -12px rgba(0,0,0,.9);
  animation:toastIn .26s var(--ease);
}
.toast.err{ border-color:rgba(211,55,75,.45); color:var(--red); }
.toast.ok{ border-color:rgba(74,157,106,.45); color:var(--ok); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{ opacity:1; transform:none;} }

/* ---------- misc ---------------------------------------------------------- */

.spin{
  width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.skel{
  background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));
  background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:var(--r);
}
@keyframes shimmer{ to{ background-position:-200% 0;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- a number field holding something that is not a number ---------
   type="number" reports an empty value for input it cannot parse, so the
   digits stay visible while the app has nothing. The field is marked so the
   mismatch is visible at a glance rather than discovered on save. */
.in-bad,
input.in-bad:focus {
  border-color: var(--red) !important;
  background: rgba(211, 55, 75, .08) !important;
}

/* Explains, in place, why a set will not record. Persistent on purpose: a
   toast can land behind the on-screen keyboard and then vanish. */
.set-warn{
  margin:10px 2px 0; padding:9px 12px;
  border:1px solid rgba(211,55,75,.42); border-radius:var(--r-sm, 10px);
  background:rgba(211,55,75,.09);
  color:var(--red); font-size:12.5px; line-height:1.45; font-weight:600;
}

/* A pure-bodyweight movement has no weight to record, so the column goes
   rather than sitting there empty inviting a number that means nothing. */
.set-hdr.no-weight,
.set-row.no-weight{ grid-template-columns:34px 1fr 44px; }

/* Four macro inputs on one line. Needs its own rule: .field carries a bottom
   margin and full-size padding that make four of them collide on a phone. */
.macro-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  margin-bottom:14px;
}
.macro-row .field{ margin-bottom:0; }
.macro-row .field > span{ font-size:10.5px; letter-spacing:.06em; margin-bottom:5px; }
.macro-row .field input{ padding:12px 10px; font-size:15px; text-align:center; }

/* The row above a macro row needs its own breathing space back — .unit-row
   zeroes the margin so two of them can sit flush. */
.unit-row + .macro-row{ margin-top:14px; }

/* The meal total: the number that actually gets logged, so it reads as a
   conclusion rather than another input to fill. */
.meal-total{
  margin-top:16px; padding:14px 15px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2);
}
.meal-total .macro-row{ margin-bottom:0; }
.meal-total-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}

/* Checkboxes get no styling anywhere else in the app, and the browser default
   renders dark-on-dark here — the control was invisible, leaving a label with
   nothing beside it. */
.check-row{
  display:flex; align-items:center; gap:10px;
  margin:2px 0 12px; cursor:pointer;
}
.check-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; flex:0 0 20px; margin:0;
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface);
  display:grid; place-content:center;
  transition:background .14s, border-color .14s;
}
.check-row input[type="checkbox"]::before{
  content:'✓'; font-size:13px; font-weight:800; line-height:1;
  color:var(--bg); transform:scale(0); transition:transform .14s;
}
.check-row input[type="checkbox"]:checked{
  background:var(--red); border-color:var(--red);
}
.check-row input[type="checkbox"]:checked::before{ transform:scale(1); }
.check-row input[type="checkbox"]:focus-visible{
  outline:2px solid var(--red); outline-offset:2px;
}
.check-row span{ font-size:13px; color:var(--dim); line-height:1.4; }

/* Effort, asked once per set while the barbell is still in reach. The rest
   bar is the only moment where it costs nothing to ask. */
#rest-bar{ flex-direction:column; align-items:stretch; gap:9px; }
.rest-line{ display:flex; align-items:center; gap:12px; }
.rest-line #rest-time{ flex:1; }
.rpe-row{ display:flex; align-items:center; gap:6px; }
.rpe-q{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-right:2px;
}
.rpe{
  flex:1; padding:7px 0; border-radius:9px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:14px; font-weight:700;
}
.rpe.is-on{ background:#fff; color:var(--red); border-color:#fff; }
.rpe-row.done .rpe:not(.is-on){ opacity:.4; }

/* What to aim for this session, when something has programmed it. Sits above
   "last time" because it is an instruction, not a memory. */
.set-target{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 8px; padding:9px 12px;
  border:1px solid rgba(211,55,75,.35); border-radius:var(--r-sm, 10px);
  background:rgba(211,55,75,.08);
  font-size:14px; font-weight:700; color:var(--txt);
}
.set-target-tag{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--red);
}
.set-target-note{
  flex-basis:100%; font-size:12px; font-weight:500; color:var(--dim);
}

/* Links inside the app shell. Without this they fall back to the browser's
   default blue, which on this background reads as a rendering fault. */
.fine a, .muted a, .tiny a{
  color:var(--dim); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.28);
}
.fine a:hover, .muted a:hover, .tiny a:hover{ color:var(--txt); }
.fine a:focus-visible, .muted a:focus-visible, .tiny a:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:3px;
}

/* A lighter week reads as amber rather than red: it is an instruction to do
   less, and it should not look like a target to beat. */
.set-target.is-easy{
  border-color:rgba(214,158,46,.4);
  background:rgba(214,158,46,.09);
}
.set-target.is-easy .set-target-tag{ color:var(--warn); }

/* Stat tiles are buttons now, so they need to stop looking like inputs and
   start giving feedback when pressed. */
button.stat{
  font:inherit; color:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease), background .12s;
}
button.stat:active{ transform:scale(.97); }
#macro-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
#macro-tap:active{ opacity:.75; }

/* The weekly check-in: amber, because it is a prompt rather than a problem. */
.check-in{ border-color:rgba(214,158,46,.35); background:rgba(214,158,46,.06); }

/* Measurement list on Progress: site, value, and which way it moved. */
.meas-list{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.meas-row{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.meas-row:last-child{ border-bottom:0; }
.meas-site{ flex:1; font-size:14px; color:var(--dim); }
.meas-val{ font-size:15px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums; }
.meas-val i{ font-style:normal; font-size:12px; font-weight:600; color:var(--faint); }
/* No colour judgement on direction: a bigger arm and a bigger waist are not
   the same news, and the app does not know which one you are after. */
.meas-delta{
  min-width:46px; text-align:right;
  font-size:12.5px; font-weight:650; color:var(--faint);
  font-variant-numeric:tabular-nums;
}

/* A list row that represents a choice, with the current one marked. */
.pick-row.is-on{ border-color:rgba(211,55,75,.45); background:rgba(211,55,75,.07); }
.pick-row.is-on .chev{ color:var(--red); }

/* --- new training block ---------------------------------------------------
   Same shape as the weekly check-in, in the app's own red rather than amber:
   this is the plan talking about itself, not a chore that is overdue. */
.card.block-card{
  border-color:rgba(211,55,75,.35);
  background:linear-gradient(180deg, rgba(211,55,75,.06), transparent 60%), var(--surface);
}

/* What rotation would swap, one line per change. The old name is struck
   through rather than coloured, so the direction is readable without relying
   on telling two reds apart. */
.swap-list{ display:flex; flex-direction:column; gap:10px; }
.swap-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:11px 13px; border:1px solid var(--line-soft); border-radius:var(--r-sm, 10px);
  background:var(--surface-2);
}
.swap-out{ font-size:14px; color:var(--faint); text-decoration:line-through; }
.swap-arrow{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.swap-in{ font-size:14px; font-weight:650; color:var(--txt); text-align:right; }

/* --- the daily line -------------------------------------------------------
   Empty (no height, no border) until there is something to show — an empty
   card above the check-in nudge would read as the app having broken, not as
   the coach having nothing to say yet. */
.daily-line{ margin:14px 20px 0; }
.daily-line:empty{ margin:0; }
.daily-line-text{
  font-size:15px; font-weight:600; color:var(--txt); line-height:1.4;
  padding:13px 16px; border:1px solid var(--line-soft); border-radius:var(--r, 14px);
  background:var(--surface-2);
}
.daily-line-when{ font-size:11px; color:var(--faint); margin:5px 2px 0; }
.daily-line.is-loading .daily-line-text{ opacity:.6; }