/* ============================================================
   TOKENS
============================================================ */
:root{
  /* Surfaces, true cool black through dark greys */
  --bg:#0A0A0B;
  --bg-1:#101012;
  --bg-2:#16161A;
  --bg-3:#1C1C20;
  --bg-input:#121214;

  /* Ink, cool white through greys */
  --ink:#F0F0F2;
  --ink-2:#A8A8AC;
  --ink-3:#6E6E72;
  --ink-4:#454548;
  --ink-5:#2A2A2D;

  /* Lines */
  --line:#1F1F22;
  --line-2:#2A2A2E;
  --line-3:#34343A;

  /* Accent, restrained forest green, used sparingly */
  --acc:#4F9F6A;
  --acc-2:#2D6B45;
  --acc-soft:rgba(79,159,106,0.10);

  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono","Menlo",monospace;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;

  /* Safe areas */
  --safe-top:env(safe-area-inset-top,0);
  --safe-bot:env(safe-area-inset-bottom,0);

  /* Layout */
  --head-h:96px;
  --tab-h:60px;
  --maxw:560px;
}

/* ============================================================
   RESET + BASE
============================================================ */
*,*::before,*::after{
  box-sizing:border-box;margin:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
html{
  -webkit-text-size-adjust:100%;
  font-size:16px;
  background:var(--bg);
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-0.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
  padding-top:calc(var(--safe-top) + var(--head-h));
  padding-bottom:calc(var(--safe-bot) + var(--tab-h) + 20px);
}
::selection{background:var(--acc);color:#fff}
button,input,select,textarea{
  font:inherit;color:inherit;background:none;border:none;outline:none;
  -webkit-appearance:none;appearance:none;
}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}

/* ============================================================
   HEADER
============================================================ */
header.app{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:rgba(10,10,11,0.92);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);
}
.head-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px 8px;
  max-width:var(--maxw);margin:0 auto;
}
.brand{
  font-family:var(--mono);
  font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.brand .glyph{
  font-family:var(--serif);
  font-size:18px;font-weight:400;
  letter-spacing:-0.02em;line-height:1;
  color:var(--ink);
  transform:translateY(-1px);
}
.brand .glyph::after{
  content:'';display:block;height:2px;
  background:var(--acc);width:60%;margin:1px auto 0;
}
.head-meta{
  font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:10px;
}
.head-meta .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--acc);display:inline-block;
}

/* DAY STRIP */
.day-strip{
  display:grid;grid-template-columns:repeat(7,1fr);
  max-width:var(--maxw);margin:0 auto;
  border-top:1px solid var(--line);
}
.day{
  position:relative;padding:9px 0 11px;
  text-align:center;cursor:pointer;
  transition:background 0.15s ease;
}
.day:active{background:var(--bg-1)}
.day-l{
  display:block;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.14em;color:var(--ink-4);
  margin-bottom:3px;
}
.day-n{
  display:block;
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}
.day.is-today .day-l{color:var(--ink-2)}
.day.is-today .day-n{color:var(--ink)}
.day.is-today::after{
  content:'';position:absolute;left:50%;bottom:2px;
  width:14px;height:2px;background:var(--acc);
  transform:translateX(-50%);
}
.day.is-active{background:var(--bg-1)}
.day.is-active .day-l{color:var(--ink-2)}
.day.is-active .day-n{color:var(--ink)}
.day.is-active::after{
  content:'';position:absolute;left:50%;bottom:2px;
  width:14px;height:2px;background:var(--ink-3);
  transform:translateX(-50%);
}
.day.is-active.is-today::after{background:var(--acc)}

/* ============================================================
   MAIN
============================================================ */
main{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;
}
.view{display:none;animation:in .26s cubic-bezier(.2,.7,.2,1)}
.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ============================================================
   TODAY · HERO
============================================================ */
.hero{
  padding:28px 0 24px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.hero-date{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.hero-date::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.hero-day{
  font-family:var(--serif);
  font-size:74px;line-height:0.92;
  font-weight:380;letter-spacing:-0.035em;
  color:var(--ink);
  margin-bottom:8px;
}
.hero-day em{
  font-style:italic;color:var(--acc);font-weight:380;
}
.hero-focus{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);
  margin-top:10px;line-height:1.4;
}
.hero-prog{
  margin-top:18px;display:flex;align-items:center;gap:8px;
}
.hero-prog .pdot{
  width:9px;height:9px;border:1px solid var(--ink-4);
  background:transparent;border-radius:50%;
  transition:all .18s ease;
}
.hero-prog .pdot.on{
  background:var(--acc);border-color:var(--acc);
}
.hero-prog .ptxt{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
  margin-left:6px;font-variant-numeric:tabular-nums;
}
@media(max-width:380px){
  .hero-day{font-size:60px}
}

/* ============================================================
   SESSION BLOCK (AM / PM)
============================================================ */
.sess{
  border-bottom:1px solid var(--line);
  padding:20px 0 22px;
}
.sess-h{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:14px;align-items:baseline;margin-bottom:14px;
}
.sess-n{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.sess-l{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);
}
.sess-t{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.sess-title{
  font-size:24px;font-weight:600;letter-spacing:-0.022em;
  color:var(--ink);line-height:1.15;margin-bottom:4px;
}
.sess-sub{
  font-size:13.5px;color:var(--ink-3);line-height:1.5;
  margin-bottom:14px;max-width:46ch;
}
.sess-rest{
  font-family:var(--serif);font-style:italic;
  font-size:20px;color:var(--ink-2);font-weight:380;
  letter-spacing:-0.01em;
}

/* EXERCISE LIST */
ol.ex{padding:0;margin:6px 0 0}
ol.ex>li{
  display:grid;grid-template-columns:24px 1fr auto;
  gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:background .12s ease;
  position:relative;
}
ol.ex>li:last-child{border-bottom:none}
ol.ex>li:active{background:var(--bg-1)}
.ex-n{
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-4);letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.ex-body{min-width:0}
.ex-name{
  font-size:15px;font-weight:500;color:var(--ink);
  letter-spacing:-0.008em;line-height:1.3;
}
.ex-meta{
  margin-top:4px;font-size:12px;color:var(--ink-3);line-height:1.45;
  max-width:40ch;
}
.ex-meta .sub{
  display:block;font-family:var(--mono);font-size:11px;
  color:var(--ink-4);letter-spacing:0.02em;margin-top:2px;
}
.ex-meta .sub::before{content:'Substitute: '}
.ex-meta .cue{
  display:block;font-size:12px;color:var(--ink-2);
  margin-top:4px;padding-left:10px;
  border-left:2px solid var(--ink-5);
}
.ex-r{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--ink-2);letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  align-self:start;padding-top:2px;
  text-align:right;
  line-height:1.4;
  max-width:42%;
}
ol.ex>li.done .ex-n{color:transparent;position:relative}
ol.ex>li.done .ex-n::after{
  content:'';position:absolute;left:5px;top:8px;
  width:10px;height:5px;
  border-left:1.5px solid var(--acc);
  border-bottom:1.5px solid var(--acc);
  transform:rotate(-45deg);
}
ol.ex>li.done .ex-name{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ink-5)}
ol.ex>li.done .ex-r{color:var(--ink-4)}
ol.ex>li.done .ex-meta{opacity:.5}

/* DETAILS toggle */
.ex-detail-toggle{
  margin-top:4px;font-family:var(--mono);font-size:10px;
  color:var(--ink-4);letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;display:inline-block;
}

/* ============================================================
   LIFT LOG PANEL (per-exercise weight/rep input + history)
============================================================ */
.ex-caret{
  display:inline-block;width:8px;height:8px;
  margin-left:6px;vertical-align:middle;
  border-right:1.5px solid var(--ink-4);
  border-bottom:1.5px solid var(--ink-4);
  transform:translateY(-1px) rotate(45deg);
  transition:transform .2s ease, border-color .2s ease;
}
ol.ex>li.expanded .ex-caret{
  transform:translateY(2px) rotate(-135deg);
  border-color:var(--acc);
}
.ex-log{
  grid-column:1 / -1;
  margin:6px 0 4px 38px;
  padding:14px 0 6px;
  border-top:1px dashed var(--line-2);
  display:none;
}
ol.ex>li.expanded .ex-log{display:block;animation:in .18s ease}

.ex-log-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.ex-log-l{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
}
.ex-unit{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-3);background:var(--bg-1);
  padding:5px 10px;border-radius:2px;cursor:pointer;
  transition:all .15s ease;
}
.ex-unit:hover{color:var(--ink);border-color:var(--ink-3)}
.ex-unit-current{color:var(--acc)}

.ex-sets{margin:0;padding:0}
.ex-set{
  display:grid;grid-template-columns:18px 1fr auto 1fr auto auto;
  align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.ex-set:last-child{border-bottom:none}
.ex-set-n{
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-4);font-variant-numeric:tabular-nums;
}
.ex-set input{
  width:100%;font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--ink);background:var(--bg-input);
  border:1px solid var(--line-2);border-radius:2px;
  padding:7px 8px;text-align:center;
  font-variant-numeric:tabular-nums;line-height:1.15;
  transition:border-color .15s ease;
  min-width:0;
}
.ex-set input:focus{border-color:var(--ink-3);outline:none}
.ex-set input::placeholder{color:var(--ink-5)}
.ex-set-x{
  font-family:var(--mono);font-size:13px;color:var(--ink-3);
  font-weight:400;
}
.ex-set-u{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.1em;color:var(--ink-3);text-transform:uppercase;
}
.ex-set-del{
  width:22px;height:22px;border:none;background:transparent;
  color:var(--ink-4);cursor:pointer;font-size:14px;line-height:1;
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
}
.ex-set-del:hover{color:var(--acc)}
.ex-set-del:active{background:var(--bg-1)}

.ex-add{
  margin-top:8px;
  background:transparent;border:1px dashed var(--line-3);
  padding:9px 12px;width:100%;cursor:pointer;border-radius:2px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);
  transition:all .15s ease;
}
.ex-add:hover{color:var(--ink);border-color:var(--ink-3);border-style:solid}

.ex-hist{margin:14px 0 6px}
.ex-hist-h{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:8px;
}
.ex-hist-row{
  display:grid;grid-template-columns:60px 1fr;gap:10px;
  padding:5px 0;font-size:12px;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.ex-hist-row:last-child{border-bottom:none}
.ex-hist-d{
  font-family:var(--mono);font-size:10px;color:var(--ink-4);
  letter-spacing:0.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.ex-hist-s{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;line-height:1.5;
  word-break:break-word;
}
.ex-hist-empty{
  font-size:12px;color:var(--ink-4);font-style:italic;
  padding:6px 0;
}

/* ============================================================
   CARDIO LOG (inline in cardio session card)
============================================================ */
.c-log{
  margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line-2);
}
.c-log-h{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:10px;
}
.c-log-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.c-log-field{
  display:flex;flex-direction:column;gap:4px;
}
.c-log-l{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);
}
.c-log-input{
  display:flex;align-items:baseline;gap:4px;
  border:1px solid var(--line-2);background:var(--bg-input);
  border-radius:2px;padding:7px 9px;
  transition:border-color .15s ease;
}
.c-log-input:focus-within{border-color:var(--ink-3)}
.c-log-input input{
  width:100%;font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--ink);background:transparent;border:none;outline:none;
  text-align:right;font-variant-numeric:tabular-nums;
  line-height:1.15;min-width:0;
}
.c-log-input input::placeholder{color:var(--ink-5)}
.c-log-input .u{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  color:var(--ink-3);letter-spacing:0.06em;flex-shrink:0;
}
.c-log-notes{
  margin-top:8px;width:100%;
  border:1px solid var(--line-2);background:var(--bg-input);
  border-radius:2px;padding:8px 10px;
  font-family:var(--sans);font-size:13px;color:var(--ink);
  line-height:1.4;resize:vertical;min-height:34px;
  transition:border-color .15s ease;
}
.c-log-notes:focus{border-color:var(--ink-3);outline:none}
.c-log-notes::placeholder{color:var(--ink-4);font-style:italic}

/* ============================================================
   BLOCK GROUP (Daily / Check-in)
============================================================ */
.block{
  padding:24px 0 16px;border-bottom:1px solid var(--line);
}
.block:last-child{border-bottom:none}
.block-h{
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
}
.block-n{
  font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--ink-3);letter-spacing:0.14em;
  font-variant-numeric:tabular-nums;
}
.block-l{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
}
.block-l::after{content:''}
.block-meta{
  margin-left:auto;font-family:var(--mono);font-size:10px;
  color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   CHECKLIST
============================================================ */
ul.cl{margin:0;padding:0}
ul.cl>li{
  display:grid;grid-template-columns:22px 1fr auto;
  align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:background .12s ease;
}
ul.cl>li:last-child{border-bottom:none}
ul.cl>li:active{background:var(--bg-1)}
.cl-box{
  width:14px;height:14px;
  border:1px solid var(--ink-4);
  border-radius:2px;
  position:relative;background:transparent;
  transition:all .18s ease;
}
ul.cl>li.done .cl-box{
  background:var(--acc);border-color:var(--acc);
}
ul.cl>li.done .cl-box::after{
  content:'';position:absolute;left:3px;top:1.5px;
  width:5px;height:8px;
  border-right:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:rotate(45deg);
}
.cl-t{
  font-size:14.5px;color:var(--ink);font-weight:400;
  letter-spacing:-0.005em;
}
ul.cl>li.done .cl-t{
  color:var(--ink-3);text-decoration:line-through;
  text-decoration-color:var(--ink-5);text-decoration-thickness:1px;
}
.cl-meta{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-4);
  letter-spacing:0.06em;font-variant-numeric:tabular-nums;
}

/* ============================================================
   CHECK-IN (wellness)
============================================================ */
.ci{margin:0;padding:0}
.ci-row{
  display:grid;grid-template-columns:62px 1fr auto;
  align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.ci-row:last-child{border-bottom:none}
.ci-l{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);
}
.ci-dots{
  display:flex;gap:6px;align-items:center;
}
.ci-dot{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--ink-5);
  background:transparent;color:var(--ink-4);
  font-family:var(--mono);font-size:11px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.ci-dot:active{transform:scale(.94)}
.ci-dot.on{
  background:var(--ink);border-color:var(--ink);
  color:var(--bg);
}
.ci-num{
  width:74px;display:flex;align-items:baseline;gap:4px;
  border:1px solid var(--ink-5);
  background:var(--bg-input);
  padding:6px 8px;border-radius:2px;
  transition:border-color .15s ease;
}
.ci-num:focus-within{border-color:var(--ink-3)}
.ci-num input{
  width:100%;
  font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--ink);background:transparent;
  text-align:right;border:none;outline:none;
  font-variant-numeric:tabular-nums;
  min-width:0;
  line-height:1.15;
}
.ci-num input::placeholder{color:var(--ink-4)}
.ci-num .unit{
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--ink-3);letter-spacing:0.04em;
  flex-shrink:0;
}
.ci-saved{
  font-family:var(--mono);font-size:9.5px;
  color:var(--ink-4);letter-spacing:0.12em;text-transform:uppercase;
  padding:10px 0 0;
}

/* ============================================================
   PLAN VIEW
============================================================ */
.sub-nav{
  display:flex;overflow-x:auto;scroll-behavior:smooth;
  border-bottom:1px solid var(--line);
  margin:0 -20px 16px;padding:0 20px;
  scrollbar-width:none;
  position:sticky;
  top:calc(var(--safe-top) + var(--head-h));
  background:rgba(10,10,11,0.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  z-index:5;
}
.sub-nav::-webkit-scrollbar{display:none}
.sub-btn{
  flex:0 0 auto;
  padding:13px 14px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-4);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease;
}
.sub-btn:hover{color:var(--ink-2)}
.sub-btn.on{
  color:var(--ink);
  border-bottom-color:var(--acc);
}

.sub-panel{display:none}
.sub-panel.on{display:block;animation:in .22s ease}

/* SECTION number tag */
.secn{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.18em;color:var(--ink-3);
  margin:24px 0 6px;display:flex;align-items:center;gap:10px;
}
.secn::after{
  content:'';flex:1;height:1px;background:var(--line);
}

h2.sec-title{
  font-family:var(--serif);
  font-size:32px;font-weight:380;letter-spacing:-0.025em;
  color:var(--ink);line-height:1.05;margin:6px 0 8px;
}
h3.sec-sub{
  font-size:13px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-2);
  margin:20px 0 8px;
}
p.sec-p{
  color:var(--ink-2);font-size:14.5px;line-height:1.55;
  margin:0 0 12px;max-width:54ch;
}
p.sec-p.small{font-size:13px;color:var(--ink-3)}
p.sec-p strong{color:var(--ink);font-weight:600}
p.sec-p em{font-style:normal;color:var(--ink);font-weight:600}

/* ============================================================
   TABLE
============================================================ */
table.t{
  width:100%;border-collapse:collapse;
  margin:8px 0 16px;
}
table.t th{
  text-align:left;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
  padding:8px 8px 8px 0;border-bottom:1px solid var(--line-2);
}
table.t td{
  padding:10px 8px 10px 0;font-size:13.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line);vertical-align:top;
  line-height:1.4;
}
table.t td:first-child{color:var(--ink);font-weight:500}
table.t td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
table.t tr.hl td{color:var(--ink)}
table.t tr.hl td:first-child{font-weight:600;color:var(--ink)}
table.t tr.hl td:first-child::before{
  content:'';display:inline-block;width:6px;height:6px;
  background:var(--acc);margin-right:8px;border-radius:50%;
  transform:translateY(-1px);
}

/* ============================================================
   CODE / TIMETABLE
============================================================ */
pre.code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--bg-1);
  padding:14px 16px;margin:10px 0 18px;
  border-left:2px solid var(--ink-5);
  color:var(--ink-2);
  line-height:1.65;
  white-space:pre;overflow-x:auto;
  border-radius:0 2px 2px 0;
}
pre.code::-webkit-scrollbar{height:4px}
pre.code::-webkit-scrollbar-thumb{background:var(--line-3)}

/* ============================================================
   CALLOUT / WARN
============================================================ */
.callout{
  padding:14px 16px;margin:14px 0;
  background:var(--bg-1);
  border-left:2px solid var(--acc);
  border-radius:0 2px 2px 0;
}
.callout-h{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--acc);
  margin-bottom:6px;
}
.callout p{
  font-size:13.5px;color:var(--ink);line-height:1.55;margin:0;
}
.warn{
  padding:14px 16px;margin:14px 0;
  border:1px solid var(--line-3);
  background:var(--bg-1);
  border-radius:2px;
}
.warn h3{
  font-size:12px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink);margin:0 0 8px;
}
.warn p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5}
.warn .cl{margin-top:6px}
.warn .cl>li{border-color:var(--ink-5)}
.warn .cl>li:last-child{border-bottom:1px solid var(--ink-5)}

/* ============================================================
   PHASES (Hinge, Sprints)
============================================================ */
.phase{
  padding:14px 0 14px 16px;
  border-left:1px solid var(--line-3);
  margin-bottom:14px;position:relative;
}
.phase.active{border-left-color:var(--acc)}
.phase.active::before{
  content:'';position:absolute;left:-5px;top:18px;
  width:9px;height:9px;background:var(--acc);
  border-radius:50%;
}
.phase-tag{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.14em;color:var(--ink-3);
}
.phase.active .phase-tag{color:var(--acc)}
.phase-title{
  font-size:16px;font-weight:600;color:var(--ink);
  margin:4px 0 6px;letter-spacing:-0.012em;
}
.phase-body{
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.phase-body ul{padding-left:18px;margin-top:4px;list-style:disc}
.phase-body li{margin-bottom:4px}

/* ============================================================
   CUES / FAULTS inline
============================================================ */
.cue,.fault{
  display:block;padding:8px 0 8px 14px;margin:8px 0;
  border-left:2px solid;font-size:13px;line-height:1.45;
}
.cue{border-color:var(--ink-3);color:var(--ink)}
.cue::before{
  content:'Cue';font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.18em;color:var(--ink-3);margin-right:10px;text-transform:uppercase;
}
.fault{border-color:var(--ink-5);color:var(--ink-2)}
.fault::before{
  content:'×';font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--ink-3);margin-right:10px;
}

/* ============================================================
   DETAILS (accordion)
============================================================ */
details{
  border-bottom:1px solid var(--line);margin:0;
}
details summary{
  cursor:pointer;list-style:none;
  padding:14px 0;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--ink);
  letter-spacing:-0.005em;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:'+';font-family:var(--mono);font-size:18px;
  color:var(--ink-3);font-weight:300;
  transition:transform .15s ease;
}
details[open] summary::after{content:'−';color:var(--acc)}
details .db{padding:0 0 16px}
details .db ul{padding-left:18px;list-style:disc}
details .db li{font-size:13px;color:var(--ink-2);margin-bottom:5px;line-height:1.5}
details .db p{font-size:13px;color:var(--ink-2);margin:0 0 8px}

/* ============================================================
   STAT ROW (Refs etc)
============================================================ */
.stat-row{
  display:flex;border:1px solid var(--line-2);
  margin:14px 0 18px;border-radius:2px;
}
.stat{
  flex:1;padding:14px 10px;
  border-right:1px solid var(--line-2);
  text-align:center;
}
.stat:last-child{border-right:none}
.stat-n{
  font-family:var(--serif);font-size:24px;font-weight:380;
  color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;line-height:1;
}
.stat-l{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
  margin-top:6px;
}

/* ============================================================
   LOG VIEW
============================================================ */
.log-stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);margin:18px 0 24px;
  border:1px solid var(--line);
}
.log-stat{
  background:var(--bg);padding:18px 16px;
}
.log-stat-l{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:8px;
}
.log-stat-n{
  font-family:var(--serif);font-size:30px;font-weight:380;
  color:var(--ink);letter-spacing:-0.025em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.log-stat-n .u{
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-3);margin-left:4px;letter-spacing:0.04em;
}
.log-stat-d{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  margin-top:6px;letter-spacing:0.04em;
}
.log-stat-d.up{color:var(--acc)}
.log-stat-d.down{color:var(--ink-2)}

/* CALENDAR */
.cal{
  margin:18px 0;
}
.cal-h{
  display:grid;grid-template-columns:repeat(7,1fr);
  margin-bottom:8px;
}
.cal-h>div{
  text-align:center;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.12em;color:var(--ink-3);
}
.cal-g{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.cal-d{
  aspect-ratio:1;
  border:1px solid var(--line);
  padding:6px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-4);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;border-radius:2px;
  transition:background .15s ease;
}
.cal-d.muted{opacity:.35}
.cal-d.has{color:var(--ink-2);border-color:var(--line-2)}
.cal-d.full{color:var(--ink);background:var(--bg-1);border-color:var(--line-3)}
.cal-d.today{border-color:var(--acc);color:var(--ink)}
.cal-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--acc);align-self:flex-end;
  opacity:0;
}
.cal-d.has .cal-dot{opacity:.5}
.cal-d.full .cal-dot{opacity:1}

/* LOG actions */
.log-actions{
  display:flex;gap:10px;margin:24px 0;
}
.log-btn{
  flex:1;padding:13px 14px;
  border:1px solid var(--line-3);
  background:transparent;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);
  cursor:pointer;border-radius:2px;
  transition:all .15s ease;
}
.log-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.log-btn:active{background:var(--bg-1)}
.log-btn.danger{color:var(--ink-3)}
.log-btn.danger:hover{color:var(--acc);border-color:var(--acc-2)}

/* HISTORY rows */
.hist{margin:18px 0}
.hist-row{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);
  font-size:13px;
}
.hist-d{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  letter-spacing:0.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.hist-v{color:var(--ink);font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:-0.005em}
.hist-m{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* EMPTY state */
.empty{
  padding:40px 0;text-align:center;color:var(--ink-3);
  font-size:13.5px;line-height:1.6;
}
.empty .serif{
  font-family:var(--serif);font-style:italic;font-size:22px;
  color:var(--ink-2);font-weight:380;
  display:block;margin-bottom:8px;
}

/* ============================================================
   BOTTOM TAB BAR
============================================================ */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(10,10,11,0.94);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  backdrop-filter:saturate(140%) blur(18px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-bot);
}
.tabs-inner{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:var(--maxw);margin:0 auto;
  height:var(--tab-h);
}
.tab{
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:transparent;border:none;
  transition:color .15s ease;
  position:relative;
}
.tab-i{
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-4);
  transition:color .15s ease;
}
.tab-i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.tab-l{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-4);
  transition:color .15s ease;
}
.tab.on .tab-i,.tab.on .tab-l{color:var(--ink)}
.tab.on::before{
  content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:22px;height:2px;background:var(--acc);
}
.tab:active .tab-i{transform:scale(.92)}

/* ============================================================
   SECTION GRID (for refs, jump links)
============================================================ */
.grid-jump{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  margin:14px 0;border:1px solid var(--line);
  border-radius:2px;
}
.grid-jump button{
  background:var(--bg);padding:14px 14px;
  text-align:left;cursor:pointer;
  border:none;display:block;color:var(--ink);
  transition:background .15s ease;
}
.grid-jump button:active{background:var(--bg-1)}
.grid-jump .gj-t{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:0.14em;color:var(--ink-3);text-transform:uppercase;
  margin-bottom:6px;
}
.grid-jump .gj-n{
  font-size:13.5px;font-weight:600;color:var(--ink);
  letter-spacing:-0.008em;
}
.grid-jump .gj-s{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  margin-top:2px;letter-spacing:0.02em;
}

/* ============================================================
   SCROLL BEHAVIOR
============================================================ */
html{scroll-behavior:smooth}

/* ============================================================
   PRINT
============================================================ */
@media print{
  body{background:#fff;color:#000;padding:0}
  header.app,.tabs,.sub-nav{display:none}
  .view{display:block !important}
}

/* ============================================================
   LARGER SCREENS (desktop polish)
============================================================ */
@media(min-width:720px){
  :root{--head-h:108px}
  .hero{padding:36px 0 28px}
  main{padding:0 32px}
  .head-row{padding:14px 32px 10px}
}