/* ========================================================================
   IronForge — design system. Dark, molten-ember, mobile-first, fluid.
   Big tap targets, tabular numerals for macros/timer, smooth view motion.
   ===================================================================== */
:root {
  --bg: #0c0d11;
  --bg-elev: #14161e;
  --bg-elev2: #1b1e28;
  --bg-elev3: #232733;
  --line: #2a2e3a;
  --line-soft: #20242e;
  --txt: #f3f5f9;
  --txt-dim: #aeb4c2;
  --txt-faint: #6c7180;

  --ember: #ff6a3d;
  --ember2: #ff9d4d;
  --ember-ink: #1a0f08;
  --lime: #c8f24e;
  --green: #36d399;
  --blue: #59a9ff;
  --red: #ff5470;
  --violet: #b388ff;

  --grad-ember: linear-gradient(135deg, #ff8a3d 0%, #ff4d3d 100%);
  --grad-cool: linear-gradient(135deg, #59a9ff 0%, #b388ff 100%);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --pad: 16px;
  --gap: 12px;
  --maxw: 920px;

  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.30);
  --ring-glow: 0 0 0 4px rgba(255,106,61,.14);

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

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}
/* iOS Safari ignores background-attachment: fixed — paint the ember glow on a
   real fixed layer instead so it doesn't scroll away / repaint weirdly. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 600px at 50% -10%, #1a1410 0%, var(--bg) 55%);
}
a { color: var(--ember2); text-decoration: none; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
/* never let media or charts force a horizontal scroll on a phone */
img, svg, video, canvas { max-width: 100%; }
input, select, textarea { font-size: 16px; }  /* >=16px stops iOS focus-zoom */
/* strip number-input spinners (desktop) — they fight the big tap targets */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
::selection { background: rgba(255,106,61,.3); }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--txt-dim); }
.faint { color: var(--txt-faint); }
.hide { display: none !important; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: var(--gap); }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.grow { flex: 1 1 auto; min-width: 0; }
.scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ---------- boot ---------- */
.boot { height: 100dvh; display: grid; place-content: center; gap: 22px; justify-items: center; }
.boot-mark { font-weight: 900; letter-spacing: 3px; font-size: 26px; }
.boot-mark span { color: var(--ember); }
.boot-spinner, .spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--ember);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- app shell ---------- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.appbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(var(--safe-t) + 10px) max(var(--pad), env(safe-area-inset-right)) 10px max(var(--pad), env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(12,13,17,.96), rgba(12,13,17,.78));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.appbar .brand { font-weight: 900; letter-spacing: 1.2px; font-size: 18px; }
.appbar .brand b { color: var(--ember); }
.appbar .pill {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--txt-dim);
  background: var(--bg-elev2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px;
}
.appbar .avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center;
  font-weight: 800; color: var(--ember-ink); background: var(--grad-ember); font-size: 14px;
}

.content {
  flex: 1 1 auto; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 18px max(var(--pad), env(safe-area-inset-right)) calc(var(--nav-h) + var(--safe-b) + 28px) max(var(--pad), env(safe-area-inset-left));
  overflow-x: hidden;  /* belt-and-suspenders against any stray wide child */
}
.view { animation: viewin .34s cubic-bezier(.22,.61,.36,1); }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- bottom nav ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 0 env(safe-area-inset-right) var(--safe-b) env(safe-area-inset-left);
  display: flex; align-items: stretch;
  background: linear-gradient(0deg, rgba(10,11,15,.99), rgba(14,16,22,.92));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft);
}
.tabbar button {
  flex: 1; background: none; border: 0; color: var(--txt-faint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; position: relative;
  transition: color .18s;
}
.tabbar button svg { width: 23px; height: 23px; stroke-width: 2; }
.tabbar button.on { color: var(--ember); }
.tabbar button.on::before {
  content: ""; position: absolute; top: 7px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,61,.20), transparent 70%);
}

/* ---------- cards ---------- */
.card {
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: var(--pad); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--gap); }
.card.flat { box-shadow: none; }
.card.glow { border-color: rgba(255,106,61,.35); box-shadow: 0 0 0 1px rgba(255,106,61,.12), var(--shadow); }
.section-title { font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--txt-faint); margin: 22px 4px 10px; }
.h1 { font-size: 26px; font-weight: 850; letter-spacing: -.5px; margin: 0; }
.h2 { font-size: 19px; font-weight: 800; margin: 0; }
.lead { color: var(--txt-dim); }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg-elev2); color: var(--txt);
  border-radius: var(--r); padding: 13px 16px; font-size: 15px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  transition: transform .08s ease, background .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; }
.btn.primary { background: var(--grad-ember); color: var(--ember-ink); border-color: transparent; font-weight: 850; box-shadow: 0 6px 20px rgba(255,77,61,.30); }
.btn.lime { background: var(--lime); color: #131a04; border-color: transparent; font-weight: 850; }
.btn.green { background: var(--green); color: #042018; border-color: transparent; font-weight: 850; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); border-color: rgba(255,84,112,.4); background: rgba(255,84,112,.08); }
.btn.sm { min-height: 38px; padding: 8px 12px; font-size: 13.5px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.icon { width: 48px; padding: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--bg-elev2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--txt-dim);
}
.chip.on { background: rgba(255,106,61,.16); border-color: rgba(255,106,61,.5); color: var(--ember2); }
.badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 7px; letter-spacing: .3px; }
.badge.est { background: rgba(179,136,255,.16); color: var(--violet); }
.badge.ok { background: rgba(54,211,153,.14); color: var(--green); }
.badge.warn { background: rgba(255,157,77,.15); color: var(--ember2); }

/* ---------- header / macro tally ---------- */
.today-head .phase {
  display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--ember2);
  font-size: 13px; letter-spacing: .4px; text-transform: uppercase;
}
.today-head .cue { color: var(--txt-dim); margin-top: 4px; font-size: 14.5px; }
.walkrow { margin-top: 12px; flex-wrap: wrap; row-gap: 8px; }

.macrobar { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.macro-rings { display: flex; gap: 14px; flex-wrap: wrap; }
.macro-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
.macro-mini .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: var(--txt-faint); text-transform: uppercase; }
.macro-mini .val { font-size: 12px; font-weight: 750; }
.bigring-wrap { display: flex; align-items: center; gap: 16px; }
.ring-center { display: grid; place-content: center; text-align: center; }
.ring-center .k { font-size: 23px; font-weight: 850; }
.ring-center .u { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--txt-faint); text-transform: uppercase; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.barrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barrow .nm { font-weight: 800; color: var(--txt-dim); font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; }
.track { height: 9px; background: var(--bg-elev3); border-radius: 999px; overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.track > i.p { background: linear-gradient(90deg, #ff5470, #ff8a3d); }
.track > i.c { background: linear-gradient(90deg, #59a9ff, #67e8f9); }
.track > i.f { background: linear-gradient(90deg, #ffd24d, #ff9d4d); }
.track > i.k { background: var(--grad-ember); }
.barrow .amt { font-weight: 800; font-size: 12.5px; min-width: 78px; text-align: right; }

/* ---------- meals / diary ---------- */
.meal-card { display: flex; gap: 12px; align-items: flex-start; }
.meal-card .slot { font-size: 11px; font-weight: 800; color: var(--ember2); letter-spacing: .5px; text-transform: uppercase; }
.meal-card .nm { font-weight: 800; font-size: 16px; margin-top: 2px; }
.meal-card .mac { color: var(--txt-faint); font-size: 12.5px; margin-top: 3px; }
.diary-entry { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.diary-entry:last-child { border-bottom: 0; }
.src-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-content: center; background: var(--bg-elev2); border: 1px solid var(--line); flex: none; }
.src-ico svg { width: 19px; height: 19px; color: var(--txt-dim); }
.diary-entry .nm { font-weight: 750; font-size: 14.5px; overflow-wrap: anywhere; }
.diary-entry .sub { color: var(--txt-faint); font-size: 12px; }
.kcal-pill { font-weight: 800; font-size: 13px; }

/* ---------- exercise checklist ---------- */
.exr { border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: var(--bg-elev); }
.exr + .exr { margin-top: 10px; }
.exr.done { opacity: .72; }
.exr-head { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.exr-thumb { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; background: var(--bg-elev3); border: 1px solid var(--line); flex: none; }
.exr-thumb.ph { display: grid; place-content: center; color: var(--txt-faint); font-weight: 800; }
.exr-name { font-weight: 800; font-size: 15.5px; overflow-wrap: anywhere; }
.exr-target { color: var(--txt-faint); font-size: 12.5px; font-weight: 700; }
.exr-check { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-content: center; flex: none; }
.exr.done .exr-check { background: var(--green); border-color: var(--green); color: #042018; }
.set-list { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.set-row { display: grid; grid-template-columns: 30px 1fr 1fr auto; gap: 8px; align-items: center; }
.set-row .sn { font-weight: 800; color: var(--txt-faint); font-size: 13px; text-align: center; }
.set-row.done .num { opacity: .5; text-decoration: line-through; }
.num {
  background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 12px; color: var(--txt);
  padding: 11px 8px; font-size: 16px; font-weight: 750; text-align: center; width: 100%; min-height: 46px;
}
.num:focus { outline: none; border-color: var(--ember); box-shadow: var(--ring-glow); }
.num-wrap { position: relative; }
.num-wrap .u { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; color: var(--txt-faint); pointer-events: none; }
.setdone { width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--bg-elev3); color: var(--txt-dim); display: grid; place-content: center; flex: none; }
.setdone.is-done { background: var(--green); color: #042018; }
.setdone svg { width: 20px; height: 20px; }
.session-banner { background: var(--grad-ember); color: var(--ember-ink); border-radius: var(--r); padding: 14px; font-weight: 850; text-align: center; box-shadow: 0 8px 24px rgba(255,77,61,.3); }
.session-tag { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: 8px; }
.session-tag.am { color: var(--blue); background: rgba(89,169,255,.14); }
.session-tag.pm { color: var(--ember2); background: rgba(255,106,61,.14); }

/* ---------- rest timer ---------- */
.timer-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 10px);
  z-index: 45; width: min(92%, 560px);
  background: var(--bg-elev2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 10px 12px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
  animation: slideup .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes slideup { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.timer-bar.alarm { animation: pulseb .5s ease-in-out infinite alternate; border-color: var(--ember); }
@keyframes pulseb { to { box-shadow: 0 0 0 3px rgba(255,106,61,.5), var(--shadow); } }
.timer-time { font-size: 30px; font-weight: 850; min-width: 92px; }
.timer-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--txt-faint); }
.timer-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- plan / weeks ribbon ---------- */
.ribbon { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.ribbon .seg { flex: none; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--bg-elev2); border: 1px solid var(--line); color: var(--txt-dim); white-space: nowrap; }
.ribbon .seg.on { background: var(--grad-ember); color: var(--ember-ink); border-color: transparent; }
.ribbon .seg.deload { border-color: rgba(89,169,255,.4); color: var(--blue); }
.weekgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px,1fr)); gap: 8px; }
.weekcell { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev2); display: grid; place-content: center; font-weight: 850; position: relative; }
.weekcell .ph { position: absolute; bottom: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; color: var(--txt-faint); text-transform: uppercase; }
.weekcell.on { background: var(--grad-ember); color: var(--ember-ink); border-color: transparent; }
.weekcell.cur { box-shadow: var(--ring-glow); }

/* ---------- adherence grid ---------- */
.adh { display: grid; grid-template-columns: 38px repeat(7, 1fr); gap: 6px; }
.adh .hd { font-size: 10px; font-weight: 800; color: var(--txt-faint); text-align: center; text-transform: uppercase; }
.adh .wk { font-size: 11px; font-weight: 800; color: var(--txt-faint); display: grid; place-content: center; }
.adh .cell { aspect-ratio: 1; border-radius: 9px; background: var(--bg-elev2); border: 1px solid var(--line-soft); position: relative; display: grid; grid-template-rows: 1fr 1fr; gap: 2px; padding: 4px; }
.adh .cell.rest { opacity: .45; }
.adh .dot { border-radius: 4px; background: var(--bg-elev3); }
.adh .dot.train { background: var(--ember); }
.adh .dot.miss { background: rgba(255,84,112,.35); }
.adh .cell .ind { position: absolute; bottom: 3px; right: 4px; display: flex; gap: 2px; }
.adh .ind i { width: 5px; height: 5px; border-radius: 50%; background: var(--bg-elev3); }
.adh .ind i.prot { background: var(--lime); }
.adh .ind i.walk { background: var(--blue); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--txt-dim); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- charts ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { fill: var(--txt-faint); font-size: 9px; font-weight: 700; }
.chart .linep { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: url(#emberfill); }
.chart .dot { fill: var(--ember); }
.chart .bar { fill: url(#embergrad); }
.chart .avgline { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 4; }

/* ---------- forms ---------- */
label.field { display: block; margin-bottom: 12px; }
label.field .lbl { font-size: 12.5px; font-weight: 800; color: var(--txt-dim); margin-bottom: 6px; display: block; letter-spacing: .2px; }
.input, select.input, textarea.input {
  width: 100%; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 14px;
  color: var(--txt); padding: 13px 14px; font-size: 16px; min-height: 50px; font-family: inherit;
}
textarea.input { min-height: 90px; resize: vertical; }
/* native selects render light/ugly on mobile — flatten + add our own chevron */
select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aeb4c2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.input:focus { outline: none; border-color: var(--ember); box-shadow: var(--ring-glow); }
.seg-toggle { display: flex; gap: 6px; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.seg-toggle button { flex: 1; border: 0; background: none; color: var(--txt-dim); padding: 10px; border-radius: 10px; font-weight: 800; font-size: 14px; }
.seg-toggle button.on { background: var(--grad-ember); color: var(--ember-ink); }
.toggle { width: 50px; height: 30px; border-radius: 999px; background: var(--bg-elev3); border: 1px solid var(--line); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--green); }
.toggle.on::after { transform: translateX(20px); }
.range { width: 100%; accent-color: var(--ember); height: 36px; }
.rating { display: flex; gap: 8px; }
.rating button { flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev2); color: var(--txt-dim); font-weight: 850; font-size: 17px; }
.rating button.on { background: var(--grad-ember); color: var(--ember-ink); border-color: transparent; }

/* ---------- toast / modal / sheet ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 10px); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--bg-elev3); border: 1px solid var(--line); color: var(--txt); padding: 11px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); animation: viewin .25s; max-width: 90%; }
.toast.ok { border-color: rgba(54,211,153,.5); }
.toast.err { border-color: rgba(255,84,112,.5); }

.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4,5,8,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.scrim.center { align-items: center; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-width: var(--maxw); background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 18px max(var(--pad), env(safe-area-inset-right)) calc(var(--pad) + var(--safe-b)) max(var(--pad), env(safe-area-inset-left));
  box-shadow: var(--shadow); animation: sheetup .3s cubic-bezier(.2,.7,.2,1);
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.scrim.center .sheet { border-radius: var(--r-xl); margin: 16px; animation: viewin .25s; max-width: 480px; }
@keyframes sheetup { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: -6px auto 14px; }
.sheet h3 { margin: 0 0 4px; font-size: 20px; font-weight: 850; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-content: center; padding: 24px; }
.login-card { width: min(420px, 92vw); }
.login .logo { font-weight: 900; letter-spacing: 3px; font-size: 30px; text-align: center; margin-bottom: 2px; }
.login .logo span { color: var(--ember); }
.login .tag { text-align: center; color: var(--txt-faint); font-size: 13px; margin-bottom: 24px; letter-spacing: .5px; }

/* ---------- misc ---------- */
.disclaimer { color: var(--txt-faint); font-size: 11.5px; line-height: 1.5; text-align: center; padding: 24px 8px 4px; }
.why { font-size: 12.5px; color: var(--txt-dim); background: rgba(89,169,255,.07); border: 1px solid rgba(89,169,255,.18); border-radius: 12px; padding: 10px 12px; display: flex; gap: 9px; }
.why svg { width: 16px; height: 16px; color: var(--blue); flex: none; margin-top: 1px; }
.empty { text-align: center; color: var(--txt-faint); padding: 30px 16px; font-size: 14px; }
.skel { background: linear-gradient(90deg, var(--bg-elev2) 25%, var(--bg-elev3) 50%, var(--bg-elev2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi .box { background: var(--bg-elev2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 13px; }
.kpi .box .k { font-size: 24px; font-weight: 850; }
.kpi .box .l { font-size: 11.5px; color: var(--txt-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
#scanvideo { width: 100%; border-radius: var(--r); background: #000; aspect-ratio: 4/3; object-fit: cover; }
.dot-ok { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); display: inline-block; }
.dot-bad { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; }
.dot-idle { width: 9px; height: 9px; border-radius: 50%; background: var(--txt-faint); display: inline-block; }
@media (min-width: 720px) {
  .macrobar { grid-template-columns: 120px 1fr; }
  .kpi { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- icons: default size (prevents unsized SVGs ballooning) ---------- */
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- avatar dropdown menu ("sandwich" menu) ---------- */
.appbar .avatar { cursor: pointer; }
.menu-layer { position: fixed; inset: 0; z-index: 80; animation: fade .12s; }
.menu {
  position: fixed; min-width: 248px; max-width: calc(100vw - 16px);
  background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 6px; overflow: hidden;
  animation: menuin .16s cubic-bezier(.2,.7,.2,1); transform-origin: top right;
}
@keyframes menuin { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  background: none; border: 0; color: var(--txt); border-radius: 11px; text-align: left;
}
.menu-item:hover, .menu-item:active { background: var(--bg-elev3); }
.menu-item .ico { color: var(--txt-dim); }
.menu-item.danger { color: var(--red); } .menu-item.danger .ico { color: var(--red); }
.menu-label { font-weight: 750; font-size: 14.5px; }
.menu-sub { font-size: 11.5px; color: var(--txt-faint); }
.menu-div { height: 1px; background: var(--line-soft); margin: 6px 8px; }

/* ---------- exercise demo animation + swap ---------- */
.exr-thumb.anim { object-fit: cover; cursor: pointer; }
.exr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.swap-btn { background: var(--bg-elev2); border: 1px solid var(--line); color: var(--txt-dim); border-radius: 10px; height: 34px; padding: 0 10px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.swap-btn .ico { width: 15px; height: 15px; }
.swapped-tag { font-size: 10px; font-weight: 800; color: var(--blue); background: rgba(89,169,255,.14); padding: 2px 7px; border-radius: 6px; letter-spacing: .3px; }
.alt-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.alt-row:last-child { border-bottom: 0; }
.alt-row .alt-thumb { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; background: var(--bg-elev3); border: 1px solid var(--line); flex: none; display: grid; place-content: center; color: var(--txt-faint); }
.demo-frames { width: 100%; border-radius: 16px; background: #0c0d11; display: block; aspect-ratio: 1; object-fit: contain; }

/* ---------- desktop: float the bottom nav as a centered pill ---------- */
@media (min-width: 720px) {
  .tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(560px, calc(100% - 32px)); bottom: 16px;
    height: auto; padding: 6px; border: 1px solid var(--line);
    border-radius: 22px; box-shadow: var(--shadow);
  }
  .tabbar button { padding: 8px 4px; border-radius: 16px; }
  .tabbar button.on { background: rgba(255,106,61,.10); }
  .tabbar button.on::before { display: none; }
  .content { padding-bottom: 110px; }
  .timer-bar { bottom: 92px; }
}
@media (min-width: 1000px) {
  /* a touch more breathing room on big screens */
  .content { padding-left: 24px; padding-right: 24px; }
}

/* ---------- viewport-height fallback (older mobile browsers without dvh) ---------- */
.boot { height: 100vh; height: 100dvh; }
.login { min-height: 100vh; min-height: 100dvh; }

/* ---------- phones ≤479px: stack the macro header so the bars never collapse ----- */
@media (max-width: 479px) {
  .macrobar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .macrobar .bars { width: 100%; }
}

/* ---------- small phones ≤399px: reclaim space, keep tap targets ---------- */
@media (max-width: 399px) {
  :root { --pad: 14px; }
  .swap-lbl { display: none; }                 /* Swap goes icon-only */
  .swap-btn { width: 34px; padding: 0; justify-content: center; }
  .exr-head { gap: 10px; }
  .barrow { grid-template-columns: 56px 1fr auto; gap: 8px; }
  .barrow .nm { font-size: 10px; }
  .barrow .amt { min-width: 62px; font-size: 11.5px; }
  .btn { padding: 12px 11px; font-size: 14px; }
  .h1 { font-size: 23px; }
  .timer-time { font-size: 26px; min-width: 78px; }
  .kpi .box .k { font-size: 21px; }
}

/* ---------- tiny phones ≤379px ---------- */
@media (max-width: 379px) {
  .appbar .pill { display: none; }             /* redundant with the avatar */
  .btn svg { width: 18px; height: 18px; }
  .ring-center .k { font-size: 21px; }
}

/* ---------- onboarding wizard ---------- */
.onb { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--safe-b)); }
.onb-card { width: min(440px, 94vw); }
.onb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.onb-logo { font-size: 18px; letter-spacing: 2px; }
.onb-dots { display: flex; gap: 6px; }
.onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-elev3); transition: background .2s, width .2s; }
.onb-dots i.on { background: var(--ember); width: 20px; border-radius: 999px; }
.onb-dots i.done { background: rgba(255,106,61,.45); }
.onb-q { font-size: 24px; font-weight: 850; letter-spacing: -.4px; margin: 0; }
.onb-sub { color: var(--txt-dim); margin: 6px 0 20px; font-size: 14.5px; line-height: 1.5; }
.onb-nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.onb-sex { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-sexcard { background: var(--bg-elev); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--txt); transition: border-color .15s, transform .08s; }
.onb-sexcard:active { transform: scale(.97); }
.onb-sexcard.on { border-color: var(--ember); box-shadow: var(--ring-glow); }
.onb-sexcard .ico { width: 30px; height: 30px; color: var(--ember2); }
.onb-sexcard .l { font-weight: 850; font-size: 17px; }
.onb-sexcard .s { font-size: 11.5px; color: var(--txt-faint); }
.onb-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-elev); border: 1.5px solid var(--line); border-radius: var(--r); padding: 15px 16px; color: var(--txt); text-align: left; }
.onb-act .l { font-weight: 800; font-size: 15.5px; }
.onb-act .s { font-size: 12.5px; color: var(--txt-faint); margin-top: 2px; }
.onb-act .ico { color: transparent; flex: none; }
.onb-act.on { border-color: var(--ember); box-shadow: var(--ring-glow); }
.onb-act.on .ico { color: var(--green); }
.onb-result, .onb-method { display: flex; flex-direction: column; }
.onb-method { align-items: center; text-align: center; gap: 10px; }
.onb-blurb { color: var(--txt-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.onb-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.onb-macro { background: var(--bg-elev2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px 6px; text-align: center; }
.onb-macro .v { font-size: 20px; font-weight: 850; }
.onb-macro .v .u { font-size: 11px; font-weight: 700; color: var(--txt-faint); margin-left: 1px; }
.onb-macro .l { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--txt-faint); margin-top: 2px; }

/* ---------- scroll wheel ---------- */
.onb-wheelwrap { display: flex; justify-content: center; }
.wheel { position: relative; width: 100%; max-width: 280px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.wheel-list { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wheel-list::-webkit-scrollbar { display: none; }
.wheel-item { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--txt-dim); transition: opacity .1s, transform .1s; }
.wheel-item.on { color: var(--ember2); font-weight: 850; }
.wheel-sel { position: absolute; left: 8px; right: 8px; top: 50%; height: 44px; transform: translateY(-50%); border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); border-radius: 12px; background: rgba(255,106,61,.06); pointer-events: none; }

/* ---------- Plan tab (redesigned) ---------- */
/* phase accent colours */
:root { --ph-ramp: #59a9ff; --ph-builda: #ff8a3d; --ph-buildb: #ff5470; --ph-deload: #b388ff; }
.phase-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 14px 2px 4px; }
.phase-legend .pl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--txt-dim); }
.phase-legend .pl i { width: 10px; height: 10px; border-radius: 3px; }
.pl.ramp i { background: var(--ph-ramp); } .pl.builda i { background: var(--ph-builda); }
.pl.buildb i { background: var(--ph-buildb); } .pl.deload i { background: var(--ph-deload); }

.week-rail { display: flex; gap: 8px; padding: 12px 2px 10px; }
.week-node {
  flex: none; width: 58px; height: 70px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg-elev); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--txt-dim); position: relative; scroll-snap-align: center; transition: transform .1s, border-color .15s;
  border-top-width: 3px;
}
.week-node:active { transform: scale(.94); }
.week-node.ramp { border-top-color: var(--ph-ramp); }
.week-node.builda { border-top-color: var(--ph-builda); }
.week-node.buildb { border-top-color: var(--ph-buildb); }
.week-node.deload { border-top-color: var(--ph-deload); }
.week-node .wn { font-size: 21px; font-weight: 850; color: var(--txt); }
.week-node .wp { font-size: 8.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--txt-faint); }
.week-node.cur::after { content: "NOW"; position: absolute; top: -7px; right: -4px; font-size: 8px; font-weight: 900; letter-spacing: .5px; background: var(--green); color: #042018; padding: 2px 5px; border-radius: 6px; }
.week-node.sel { border-color: var(--ember); background: var(--bg-elev2); box-shadow: var(--ring-glow); }
.week-node.sel .wp { color: var(--ember2); }

.week-hero { border-radius: var(--r-lg); padding: 18px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-elev2), var(--bg-elev)); box-shadow: var(--shadow-sm); }
.week-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.week-hero.ramp::before { background: var(--ph-ramp); } .week-hero.builda::before { background: var(--ph-builda); }
.week-hero.buildb::before { background: var(--ph-buildb); } .week-hero.deload::before { background: var(--ph-deload); }
.week-hero-k { font-size: 12px; font-weight: 850; letter-spacing: 1.5px; color: var(--txt-faint); }
.week-hero-phase { font-size: 24px; font-weight: 850; letter-spacing: -.4px; margin-top: 2px; }
.week-hero-badge { font-size: 11px; font-weight: 850; letter-spacing: .4px; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--bg-elev3); color: var(--txt-dim); border: 1px solid var(--line); }
.week-hero.ramp .week-hero-badge { color: var(--ph-ramp); border-color: rgba(89,169,255,.4); }
.week-hero.builda .week-hero-badge { color: var(--ph-builda); border-color: rgba(255,138,61,.4); }
.week-hero.buildb .week-hero-badge { color: var(--ph-buildb); border-color: rgba(255,84,112,.4); }
.week-hero.deload .week-hero-badge { color: var(--ph-deload); border-color: rgba(179,136,255,.4); }
.week-hero-note { color: var(--txt-dim); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.week-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.week-stat { background: rgba(0,0,0,.22); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 4px; text-align: center; }
.week-stat .v { font-size: 18px; font-weight: 850; }
.week-stat .l { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--txt-faint); margin-top: 1px; }

/* ---------- Users & access (redesigned) ---------- */
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 11px 12px; }
.user-av { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-content: center; font-weight: 850; font-size: 17px; color: #10131a; }
.user-name { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-you { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--txt-faint); background: var(--bg-elev3); padding: 2px 6px; border-radius: 6px; }
.user-sub { font-size: 12.5px; color: var(--txt-faint); margin-top: 2px; display: flex; align-items: center; }
.badge.est { background: rgba(179,136,255,.16); color: var(--violet); }