:root{
  --bg:#F4F7FB; --ink:#0E1B2C; --mut:#5C6B82; --line:#E3EAF3; --line2:#EEF2F8;
  --acc:#0EA5A6; --acc2:#6D5BF6; --grad:linear-gradient(120deg,#0EA5A6,#6D5BF6);
  --ok:#16A34A; --warn:#D97706; --bad:#DC2626;
  --eng:#F59E0B; --pro:#10B981; --set:#6366F1;
  --glass:rgba(255,255,255,clamp(.12,calc(.70*var(--gm,1)),.98)); --bord:rgba(255,255,255,.85);
  --shadow:0 10px 30px rgba(20,60,90,.08), 0 2px 8px rgba(20,60,90,.05);
  --surface:#ffffff; --glass2:rgba(255,255,255,clamp(.14,calc(.78*var(--gm,1)),1));
  --soft:#F6F8FB; --soft2:#EEF2F8; --soft4:#F1F4F9;
  --track:#E8EDF5; --trackln:#C3CCDA;
  --accSoft:#EFEDFE; --okSoft:#E7F6EC; --warnSoft:#FCF0DF; --badSoft:#FBE7E7; --infoSoft:#EBEAFE;
  --info:#6366F1;
  --vzOk:rgba(16,185,129,.20); --vzHi:rgba(245,158,11,.20); --vzLine:rgba(71,85,105,.45);
  --accGlow:rgba(14,165,166,.32); --acc2Glow:rgba(109,91,246,.35); --acc2Glow2:rgba(109,91,246,.45);
  --accT05:rgba(14,165,166,.05); --accT07:rgba(14,165,166,.07); --accT08:rgba(14,165,166,.08); --accT14:rgba(14,165,166,.14); --accT22:rgba(14,165,166,.22);
  --thumb:#D6DEE9; --railbg:rgba(255,255,255,.62); --tabbg:rgba(255,255,255,.80); --thbg:rgba(255,255,255,.94);
  --r:20px; --disp:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Segoe UI,Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --rail:280px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--body);color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden;overflow-x:clip}
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.aurora i:nth-child(1){width:46vmax;height:46vmax;left:-10vmax;top:-16vmax;background:#CFF3EE}
.aurora i:nth-child(2){width:40vmax;height:40vmax;right:-12vmax;top:10vmax;background:#E4DFFB}
.aurora i:nth-child(3){width:38vmax;height:38vmax;left:30vmax;bottom:-20vmax;background:#DDEBFA}
.aurora:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.045'/></svg>")}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50;display:none;flex-direction:column;padding:20px 14px;gap:6px;background:var(--railbg);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-right:1px solid var(--bord)}
.rail .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px}
.rail .mark{width:34px;height:34px;border-radius:11px;background:var(--grad);box-shadow:0 6px 16px var(--acc2Glow);position:relative;flex:none}
.rail .mark:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff;opacity:.92}
.rail .brand b{font:700 19px var(--disp);letter-spacing:.2px;display:block;line-height:1}
.rail .brand small{font:500 10px var(--body);color:var(--mut);letter-spacing:.7px;text-transform:uppercase}
.rail button{display:flex;align-items:center;gap:12px;border:0;background:transparent;width:100%;text-align:left;font:600 14px var(--body);color:var(--ink);padding:11px 12px;border-radius:13px;cursor:pointer;transition:.15s}
.rail .ric{width:24px;display:flex;align-items:center;justify-content:center;flex:none}
.rail .ric .tic{width:20px;height:20px}
.rail .ric .tmark{width:24px;height:24px;border-radius:8px;box-shadow:0 2px 7px rgba(6,10,14,.3)}
.rail .rlab{font:inherit}
.rail button[data-v="analysis"].on{background:transparent;color:var(--ink);box-shadow:none}
.rail button[data-v="analysis"].on .ric .tmark{box-shadow:0 0 0 2px var(--acc),0 4px 12px var(--accGlow)}
.rail button:hover{background:var(--accT07);color:var(--ink)}
.rail button.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px var(--accGlow)}
.rail .spacer{flex:1}
.rail .foot{font:500 10.5px var(--body);color:var(--mut);padding:8px;line-height:1.5}
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:3px;background:var(--glass2);backdrop-filter:saturate(150%) blur(24px);-webkit-backdrop-filter:saturate(150%) blur(24px);border:.5px solid var(--bord);border-radius:26px;padding:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 36px -8px rgba(20,40,80,.28)}
.tabbar button{border:0;background:none;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 8.5px var(--body);letter-spacing:.03em;color:var(--ink);cursor:pointer;padding:8px 0 7px;border-radius:18px;min-width:0;min-height:48px;transition:background-color .16s ease,color .16s ease}
.tabbar .tic{width:22px;height:22px;display:block}
.tabbar .tic-em{font-size:19px;line-height:1}
.tabbar .tlab{max-height:0;opacity:0;overflow:hidden;transition:max-height .24s ease,opacity .24s ease}
.tabbar button.on .tlab{max-height:12px;opacity:1}
.tabbar button.on{color:#fff;background:var(--acc)}
.tmark{width:31px;height:31px;border-radius:10px;display:block;flex:none;background:#0C1116 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%230C1116%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%225.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2049.5%20L32%2027.5%20L54%2049.5%22%2F%3E%3Cpath%20d%3D%22M16%2038.5%20L32%2022.5%20L48%2038.5%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2228%22%20y%3D%229%22%20width%3D%228%22%20height%3D%2246%22%20fill%3D%22%230C1116%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2215.5%22%20r%3D%223.6%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;box-shadow:0 3px 10px rgba(6,10,14,.32)}
.tabbar button[data-v="analysis"]{flex:1.12}
.tabbar button[data-v="analysis"].on{background:transparent;color:var(--ink)}
.tabbar button[data-v="analysis"].on .tmark{box-shadow:0 0 0 2px var(--acc),0 5px 14px var(--accGlow)}
.mtop{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 0 4px;min-height:38px}
@media(max-width:1023px){.wrap>.view .hd h1{font-size:23px}.wrap>.view .hd{margin-bottom:12px}}
.mtop.empty{display:none}
.iconb{padding:8px 9px;line-height:0}
.pmwrap{position:relative;display:inline-flex;flex:none}
.main{min-height:100vh}
.wrap{width:100%;max-width:1640px;margin:0 auto;padding:10px 26px calc(96px + env(safe-area-inset-bottom))}
@media(min-width:1024px){.rail{display:flex}.tabbar{display:none}.mtop{padding:2px 0 6px;min-height:0}.main{margin-left:var(--rail)}.wrap{padding:24px 34px 40px}}
@media(min-width:1500px){.wrap{padding:30px 48px 40px}}
.bento{display:grid;gap:16px;grid-template-columns:1fr}
.bento>.card,.bento>*{min-width:0}
@media(min-width:680px){.bento{grid-template-columns:repeat(12,1fr)}}
.s2{grid-column:span 4}.s3{grid-column:span 6}.s4{grid-column:span 8}.s6{grid-column:span 12}
@media(max-width:679px){.s2,.s3,.s4,.s6{grid-column:auto}}
.card{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;animation:pop .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card{animation:none}}
.logwrap{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.logwrap{grid-template-columns:1.45fr 1fr}}
.logcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.kicker{font:600 10.5px var(--body);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:6px;margin-bottom:12px}
.kicker:before{content:"";width:7px;height:7px;border-radius:3px;background:var(--grad);flex:none}
h1{font:700 25px/1.12 var(--disp);letter-spacing:-.3px}
.pgttl{color:var(--acc)}
html[data-skin="eclipse"] .pgttl{color:var(--ink)}
h2{font:700 17px var(--disp)}
.big{font:700 30px var(--disp);letter-spacing:-.5px}
.mut{color:var(--mut);font-size:12.5px;line-height:1.5}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{border:0;cursor:pointer;font:600 13px var(--body);padding:9px 14px;border-radius:13px;background:var(--surface);color:var(--ink);border:1px solid var(--line);transition:.15s;box-shadow:0 1px 3px rgba(20,60,90,.06)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(20,60,90,.10)}
.btn:active{transform:none}
.btn.pri{background:var(--grad);color:#fff;border:0;box-shadow:0 6px 16px var(--accGlow)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.sm{padding:7px 11px;font-size:12px;border-radius:11px}
.btn.danger{color:var(--bad);border-color:#F3C9C9;background:var(--surface)}
.btn.danger:hover{background:var(--badSoft)}
input,select,textarea{font:500 14px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 11px;outline:none;width:100%;min-width:0;transition:.15s;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accT14)}
/* checkbox — rounded square, visible border (3:1 contrast), checkmark on select, focus ring; label perimeter is the touch target (WCAG 2.5.8) */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;min-height:20px;box-sizing:border-box;border:2px solid var(--mut);border-radius:6px;background:var(--surface);cursor:pointer;flex:none;position:relative;padding:0;margin:0;vertical-align:-4px;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:none}
input[type=checkbox]:hover{border-color:var(--acc)}
input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accT22)}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;border:0;border-radius:999px;background:var(--soft);box-shadow:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--soft)}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--soft)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--acc);border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--surface);border-radius:50%;background:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
input[type=date],input[type=time]{min-height:40px}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%235C6B82' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
label.f{display:block;font:600 11px var(--body);color:var(--mut);margin:0 0 5px 2px;letter-spacing:.3px;text-transform:uppercase}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
@media(max-width:560px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--mono);background:var(--surface);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:5px 10px;white-space:nowrap}
.chip b{color:var(--ink)}
.chip.acc{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1px solid transparent}
.pill{font:700 11px var(--body);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill.ok{background:var(--okSoft);color:var(--ok)}.pill.warn{background:var(--warnSoft);color:var(--warn)}.pill.bad{background:var(--badSoft);color:var(--bad)}.pill.info{background:var(--infoSoft);color:var(--info)}
/* .msg — a pill carrying a SENTENCE, not a one-word status. The base .pill is nowrap on purpose (it
   holds things like "Synced ✓"), so a full sentence would run straight off the card. This variant
   wraps, breaks long email addresses instead of overflowing, and squares the radius to suit a block. */
.pill.msg{display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-word;border-radius:13px;padding:9px 12px;font-size:12.5px;font-weight:600;line-height:1.55;text-align:left}
.trow{display:grid;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);background:var(--glass2);border-radius:14px;margin-bottom:9px}
/* ===== CARDIO ROW =====
   Five controls (activity, time, effort, minutes, burn) plus a delete never fit one phone line:
   the activity select collapsed to a sliver behind the intensity picker because the burn chip is
   auto-width and refuses to shrink. So the phone gets two lines - what it was + what it cost on
   line 1, when / how hard / how long on line 2 - and >=620px puts it back on a single line.
   Column minima are deliberately small so the grid can never overflow a 320px screen. */
.actrow{grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:"nm x" "sub sub" "kc kc";align-items:end;gap:8px}
.ar-f{display:block;min-width:0}
.ar-f>small{display:block;font:800 9.5px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 3px 2px}
.actrow>.ar-nm{grid-area:nm}
.actrow>.ar-kc{grid-area:kc;justify-self:start;white-space:nowrap;margin-top:2px}
.actrow>.ar-x{grid-area:x;justify-self:end;align-self:start}
.ar-sub{grid-area:sub;display:grid;gap:8px;min-width:0;grid-template-columns:minmax(74px,1.2fr) minmax(62px,1fr) minmax(46px,.62fr)}
@media(min-width:620px){
 .ar-sub{grid-template-columns:104px 94px 66px}
}
/* ===== LOGGING DEFAULTS SHEET - meal name / time pairs ===== */
.ld-mrow{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px;align-items:center;margin-bottom:7px}
.ld-mnum{font:600 13px var(--body);color:var(--mut);padding-left:2px}
/* processed / whole per-entry toggle on a food row (only shown in "ask per entry" mode) */
.upfchip{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:var(--soft2);color:var(--mut);font:600 10.5px var(--body);padding:2px 7px;border-radius:999px;cursor:pointer;white-space:nowrap;vertical-align:1px;line-height:1.5}
.upfchip:hover{border-color:var(--acc);color:var(--ink)}
.upfchip.on{background:var(--warnSoft);border-color:transparent;color:var(--warn)}


/* ---- mobile-first Log rows (redesigned) ---- */
.foodrow{padding:11px 12px;border:1px solid var(--line);background:var(--glass2);border-radius:14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(20,60,90,.04)}
.mealgrp{background:var(--soft2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:13px;padding:11px 12px;margin:0 0 12px;box-shadow:0 1px 3px rgba(20,60,90,.05)}
.mealgrp .rows{margin-top:7px}
.exrow{background:var(--glass2);border:1px solid var(--line);border-radius:11px;padding:10px 11px;margin-bottom:8px;box-shadow:0 1px 2px rgba(20,60,90,.04)}
.exwrap .mut{padding-left:2px}
.btn.additem{background:var(--pro);color:#fff;border-color:transparent;box-shadow:0 1px 3px rgba(16,185,129,.28)}
.btn.additem:hover{filter:brightness(1.06)}
.foodrow .fr-top{margin-bottom:8px}
.foodrow.editing{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"nm nm nm" "qt dn xx" "mc mc mc";gap:8px 8px;align-items:center}
.foodrow.editing .fr-top{grid-area:nm;margin-bottom:0}
.foodrow.editing .fr-qty{grid-area:qt;justify-self:start;width:84px}
.foodrow.editing .ll-done{grid-area:dn;justify-self:end}
.foodrow.editing .fr-x{grid-area:xx;justify-self:end}
.foodrow.editing .fr-mac{grid-area:mc;margin-top:1px}
.fr-qty{flex:0 0 56px;text-align:center;padding-left:6px;padding-right:6px}
.fr-mac{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fr-x{flex:0 0 auto;margin-left:auto}
.mmini{font:600 12.5px var(--mono);color:var(--mut)}.rtrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rtcell{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 3px;text-align:center}
.rtn{font:700 11px var(--mono);color:var(--acc2);letter-spacing:.03em}
.rtv{font:800 15px/1.1 var(--body);margin-top:3px}
.rtv span{font-size:9px;color:var(--mut);font-weight:600;margin-left:1px}
.rtp{font-size:9.5px;color:var(--mut);margin-top:2px}
.rref{font-family:var(--mono);color:var(--acc2);cursor:pointer;font-style:normal;font-size:.92em;padding:0 1px}
.lvltbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
/* ===== STRENGTH LAB — rep explorer + personal rep-max baselines ===== */
.strk{display:inline-block;font:700 10px var(--mono);color:var(--acc2);background:var(--accSoft);border:1px solid var(--accT22);border-radius:20px;padding:2px 8px;vertical-align:middle;letter-spacing:.02em;white-space:nowrap}
.repchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 11px}
.repchip{flex:1 1 auto;min-width:38px;border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:9px;padding:7px 4px;font:700 12.5px var(--body);cursor:pointer;transition:.15s}
.repchip:hover{border-color:var(--acc)}
.repchip.on{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
.rxrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rxcell{border:1px solid var(--line);border-radius:11px;padding:10px 9px;text-align:center;background:var(--bg)}
.rxcell.rxme{border-color:var(--accT22);background:var(--accSoft)}
.rxcell.off{opacity:.62}
.rxlab{font:700 10px var(--mono);letter-spacing:.04em;color:var(--mut);text-transform:uppercase}
.rxcell.rxme .rxlab{color:var(--acc2)}
.rxv{font:800 21px/1.15 var(--body);margin-top:4px}
.rxv span{font-size:10px;color:var(--mut);font-weight:600;margin-left:2px}
.rxsub{font-size:10px;color:var(--mut);margin-top:3px;line-height:1.35}
.rxread{margin-top:9px;padding:9px 11px;border-radius:9px;background:var(--soft2);border:1px solid var(--line);font-size:11.5px;line-height:1.55}
.rmfit{margin-bottom:11px;padding:10px 12px;border-radius:10px;background:var(--accSoft);border:1px solid var(--accT22);font-size:11.5px;line-height:1.6}
.rmfit.rmfit1{background:var(--soft2);border-color:var(--line)}
.rmold{margin-bottom:11px;padding:9px 12px;border-radius:10px;background:var(--infoSoft);border:1px dashed var(--line);font-size:11px;line-height:1.55;color:var(--mut)}
.rmform{background:var(--soft2);border:1px dashed var(--line);border-radius:11px;padding:11px;margin-bottom:12px}
.rmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rmgrid input{margin:0;width:100%}
.rmlist{display:flex;flex-direction:column;gap:7px}
.rmrow{display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.rmmain{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;min-width:0}
.rmside{display:flex;align-items:center;gap:7px;flex:0 0 auto;font-size:10.5px}
.rmtag{font:600 10px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:1px 7px;white-space:nowrap}
@media(max-width:520px){.rmgrid{grid-template-columns:1fr 1fr}.rxv{font-size:19px}}
/* ---- Strength Lab chart (Stage 2): layer toggles + span selector ---- */
.chartlayers{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.lchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:20px;padding:5px 11px;font:600 11.5px var(--body);cursor:pointer;transition:.15s}
.lchip:hover{border-color:var(--acc)}
.lchip .lcdot{width:9px;height:9px;border-radius:50%;background:var(--mut);flex:0 0 auto;opacity:.45;transition:.15s}
.lchip.on{color:var(--ink);border-color:var(--soft)}
.lchip.on .lcdot{opacity:1}
.lchip.lc-actual.on .lcdot{background:var(--acc2)}
.lchip.lc-trend.on .lcdot{background:var(--acc2);box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1px var(--acc2)}
.lchip.lc-base.on .lcdot{background:var(--gold);border-radius:1px;transform:rotate(45deg)}
.lchip.lc-conf.on .lcdot{background:var(--acc);opacity:.35}
.lchip.lc-bands.on .lcdot{background:var(--mut);border-radius:1px;opacity:.7}
.chartspan{display:inline-flex;border:1px solid var(--soft);border-radius:8px;overflow:hidden;flex:0 0 auto}
.chartspan button{border:0;background:transparent;color:var(--mut);padding:4px 9px;font:600 11px var(--body);cursor:pointer;border-left:1px solid var(--soft)}
.chartspan button:first-child{border-left:0}
.chartspan button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
/* ---- Stage 3A: rep-max view, display-options disclosure, level progress, tap-detail ---- */
.viewsel{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 9px}
.viewsel .vlab{font:700 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.viewsel button{border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:8px;padding:5px 10px;font:700 11.5px var(--body);cursor:pointer;transition:.15s}
.viewsel button:hover{border-color:var(--acc)}
.viewsel button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}
.lchip.lmore{border-style:dashed}
.lchip .lcar{font-size:9px;opacity:.7;margin-left:1px}
.chartadv{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:7px;padding-top:8px;border-top:1px dashed var(--line)}
.lvlbar{height:10px;border-radius:20px;background:var(--soft2);border:1px solid var(--line);overflow:hidden}
.lvlbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:20px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.lvlfoot{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--mut);margin-top:6px;flex-wrap:wrap}
.lvlscale{display:flex;justify-content:space-between;gap:3px;margin-top:9px}
.lvlscale span{flex:1 1 0;text-align:center;font:600 9.5px var(--body);color:var(--mut);opacity:.5;padding:4px 1px;border-top:2px solid var(--line);line-height:1.2}
.lvlscale span.on{opacity:1;border-top-color:var(--acc)}
.lvlscale span.now{color:var(--ink);font-weight:800;border-top-color:var(--acc2)}
.pdbig{font:800 30px/1.1 var(--body);margin:2px 0 4px}
.pdbig span{font-size:12px;color:var(--mut);font-weight:600}
.pdset{font-size:12.5px;color:var(--mut);padding:9px 11px;border-radius:9px;background:var(--accSoft);border:1px solid var(--accT22);margin-bottom:11px;line-height:1.5}
.pdrows{display:flex;flex-direction:column;gap:0}
.pdrow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.pdrow:last-child{border-bottom:0}
.pdrow span{color:var(--mut)}
.pthit:active{opacity:1}
@media(max-width:520px){.viewsel button{padding:5px 8px;font-size:11px}.lvlscale span{font-size:8.5px}.pdbig{font-size:26px}}
/* ---- Stage 3B: goals + context-aware trend ---- */
.trendnote{font-size:11px;line-height:1.5;color:var(--mut);flex:1 1 190px;min-width:0}
.trctx{display:block;margin-top:5px;padding:7px 9px;border-radius:8px;background:var(--soft2);border:1px solid var(--line);font-size:11px;line-height:1.55;color:var(--mut)}
.goalcard{margin-top:12px;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:var(--bg)}
.goalcard.hit{border-color:var(--ok);background:var(--okSoft)}
.goalhead{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:9px}
.goalhead b{flex:1 1 auto;min-width:0}
.goalhead .gby{font:600 10px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:1px 7px;white-space:nowrap}
.goaleta{margin-top:6px;font-size:11px;color:var(--mut)}
.goalmsg{font-size:12.5px;line-height:1.55}
.lchip.lc-goal.on .lcdot{background:var(--ok)}




.lvltbl th{text-align:left;font:700 10px var(--mono);color:var(--mut);letter-spacing:.04em;padding:4px 6px;border-bottom:1px solid var(--line)}
.lvltbl td{padding:6px;border-bottom:1px solid var(--line)}
.lvltbl tr:last-child td{border-bottom:0}
.lvltbl td.rch{color:var(--ok);font-weight:700}
.lvlnow td{background:var(--soft2)}
.blegend{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:10.5px;color:var(--mut);margin-top:8px;align-items:center}
.blegend i{width:14px;height:3px;border-radius:2px;display:inline-block;margin-right:5px}
.fr-cust{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.fr-cust input{flex:1 1 60px;width:auto;min-width:56px;text-align:center;padding-left:6px;padding-right:6px}
.mg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.mg-head .mg-num,.mg-head .mg-time{width:auto;flex:0 0 auto}
.mg-head .mg-sp{flex:1 1 auto;min-width:8px}
.exr .er-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.exr .er-name{flex:1 1 100%;min-width:0}
.exr .er-n{flex:0 0 54px;width:auto;text-align:center;padding-left:6px;padding-right:6px}
.exr.editing{position:relative}
.exr.editing .er-line{padding-right:32px}
.exr .er-x{position:absolute;top:8px;right:8px;margin:0;flex:none;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--mut);font-size:14px;cursor:pointer;z-index:3}
.exr .er-x:hover{color:var(--ink);border-color:var(--acc)}
.feelrow{display:flex;gap:6px;align-items:center;margin:8px 0 2px;flex-wrap:wrap}
.feelbtn{border:1px solid var(--line);background:var(--surface);border-radius:9px;width:34px;height:30px;font-size:15px;line-height:1;cursor:pointer;padding:0}
.feelbtn.on{border-color:var(--acc);background:var(--accT14)}
.painbtn{border:1px solid var(--line);background:var(--surface);color:var(--mut);border-radius:9px;padding:4px 10px;font-size:11.5px;cursor:pointer;flex:0 0 auto}
.painbtn.on{color:#EF4444;border-color:#EF4444;background:rgba(239,68,68,.08)}
.exr .er-sec{display:flex;flex-direction:column;gap:9px}
.er-adv>select{flex:1 1 30%;min-width:104px;width:auto}
.totbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:transparent;border:0;padding:0}
.tstat{font:600 12px var(--mono);color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.tstat b{color:var(--ink)}
.tstat.kc{color:var(--acc);border-color:var(--acc)}
/* ---- daily recap: bullet target bars + day chips ---- */
.mrow{margin-bottom:13px}
.mrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.mname{font-size:13px;font-weight:600;color:var(--ink)}
.mval{font:600 12.5px var(--mono);color:var(--mut);white-space:nowrap}
.mval b{color:var(--ink)}
.mbar{position:relative;height:13px;border-radius:99px;background:var(--track);overflow:hidden}
.mbar>b{display:block;height:100%;border-radius:99px;transition:width .35s ease}
.mtick{position:absolute;top:-2px;height:17px;width:2px;background:var(--ink);opacity:.5;border-radius:2px}
.mdelta{font-size:11px;font-weight:700;margin-top:3px;letter-spacing:.2px}
.mdelta.ok{color:#10B981}.mdelta.warn{color:#F59E0B}.mdelta.bad{color:#EF4444}.mdelta.mut{color:var(--mut)}
.dstrip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.dchip{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:7px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:46px;transition:.15s}
.dchip.on{border-color:var(--acc);background:var(--glass2);box-shadow:0 0 0 1px var(--acc) inset}
.dchip .dwd{font-size:10px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.dchip .dnum{font-size:15px;font-weight:800;color:var(--ink);line-height:1}
.dchip .ddot{width:7px;height:7px;border-radius:99px}
.exmtag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;border-radius:99px;padding:2px 8px;border:1px solid var(--line);color:var(--mut);background:var(--surface);margin:2px 3px 0 0}
.exmtag.pri{color:var(--ink);border-color:var(--acc)}
.exitem{padding:9px 0;border-bottom:1px dashed var(--line)}.exrow{display:flex;justify-content:space-between;align-items:center;gap:7px 14px;flex-wrap:wrap}.exleft{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}.exmix{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto;min-width:0}.exmix .exmtag{margin:0}.chip.poolon{background:var(--accT14);border-color:var(--acc);color:var(--ink);font-weight:700}.chip.poolon b{color:var(--ink)}
.exitem:last-child{border-bottom:0}
@media(min-width:680px){
  .foodrow{display:flex;align-items:center;gap:10px}
  .foodrow .fr-top{flex:1 1 auto;margin-bottom:0;min-width:0}
  .foodrow.editing{display:flex;grid-template-areas:none}
.foodrow.editing .fr-qty{width:auto;justify-self:auto}
.foodrow.editing .fr-mac{flex:1 1 auto;justify-self:auto;margin-top:0}
.foodrow.editing .ll-done{justify-self:auto}
.foodrow.editing .fr-x{justify-self:auto}
  .fr-cust{width:auto}
  .exr .er-name{flex:1 1 auto}
  .er-adv>select{flex:0 1 auto;min-width:120px}
}
.trow .x{border:0;background:var(--soft);color:var(--mut);width:28px;height:28px;border-radius:9px;cursor:pointer;font-size:13px;flex:none}
.trow .x:hover{background:var(--badSoft);color:var(--bad)}
.rows{display:block}
.empty{padding:22px;text-align:center;color:var(--mut);font-size:13px;border:1.5px dashed var(--line);border-radius:16px}
.tblwrap{overflow:auto;border-radius:14px;border:1px solid var(--line2)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font:600 10.5px var(--body);text-transform:uppercase;letter-spacing:.5px;color:var(--mut);text-align:left;padding:9px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--thbg);backdrop-filter:blur(8px);z-index:1}
td{padding:9px;border-bottom:1px solid var(--line2)}
tr.click{cursor:pointer}tr.click:hover td{background:var(--accT05)}
/* fixed + above every layer: the picker has to be usable inside a sheet (import review) */
.ac{position:relative;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(20,60,90,.14);max-height:340px;overflow:auto;-webkit-overflow-scrolling:touch;width:100%;margin:7px 0 3px;display:none}
.ac div{padding:10px 13px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line2)}
.ac div:last-child{border-bottom:0}
.ac div:hover,.ac div.hot{background:var(--accT08)}
.ac small{color:var(--mut);font-family:var(--mono);font-size:10.5px;flex:none}
.ring{position:relative;width:210px;height:210px;margin:6px auto 2px}
.ring svg{transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .mid b{font:700 31px var(--disp);letter-spacing:-1px}
.legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.legend span{font-size:12px;color:var(--mut)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}
.bar{height:9px;border-radius:99px;background:var(--track);overflow:hidden;flex:1;min-width:60px}
.bar b{display:block;height:100%;border-radius:99px;background:var(--set);transition:width .5s}
.ins{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--glass2);border:1px solid var(--line);margin-bottom:9px;font-size:13px;line-height:1.5}
.ins em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--acc2);background:var(--accSoft);border-radius:6px;padding:2px 7px;white-space:nowrap;cursor:pointer;flex:none}
.ins.ok{border-left:3px solid var(--ok)}.ins.warn{border-left:3px solid var(--warn)}.ins.bad{border-left:3px solid var(--bad)}.ins.info{border-left:3px solid var(--acc2)}
.sci{padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--glass2);margin-bottom:11px}
.sci b{font-family:var(--disp)}
.sci .cit{font:500 11.5px var(--mono);color:var(--mut);margin-top:7px;display:block;word-break:break-word}
.sci .rule{margin-top:7px;font-size:12.5px;color:var(--acc2);font-weight:600}
.aiout{white-space:pre-wrap;font-size:13.5px;line-height:1.55;background:var(--glass2);border:1px solid var(--line);border-radius:16px;padding:15px}
.tag{font:600 10px var(--body);color:var(--mut);background:var(--soft4);border-radius:7px;padding:3px 7px;white-space:nowrap}
.seg{display:flex;background:var(--soft2);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;font:600 12px var(--body);color:var(--mut);padding:8px;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(20,60,90,.10)}
/* option-list selector (self-describing single-choice rows; >6 options → list beats segmented/chips) */
.optlist{display:flex;flex-direction:column;gap:7px}
.opt-grp{font:800 10px var(--body);letter-spacing:.6px;text-transform:uppercase;color:var(--mut);opacity:.62;margin:12px 0 1px 2px}
.opt-grp:first-child{margin-top:2px}
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:11px 13px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;min-height:44px}
.opt:hover{border-color:var(--acc)}
.opt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.opt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opt-name{font:700 13.5px var(--body);color:var(--ink)}
.opt-tick{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.opt-desc{display:block;font:500 12px var(--body);color:var(--mut);line-height:1.45;margin-top:3px}
.opt.sel{border-color:var(--acc);background:var(--accT08);box-shadow:0 3px 12px var(--accGlow)}
.opt.sel .opt-name{color:var(--ink)}
.opt.sel .opt-tick{border-color:var(--acc);background:var(--acc)}
.opt.sel .opt-tick:after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.opt-more{margin:1px 0 4px;padding:10px 12px;background:var(--accT05);border:1px solid var(--accT14);border-radius:11px;font:500 12px var(--body);color:var(--ink);line-height:1.55}
.view{display:none}.view.on{display:block;animation:fade .3s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sp{height:10px}

/* collapsible section header */
.sec{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;width:100%;border:0;background:transparent;text-align:left;padding:0}
.sec .chev{margin-left:auto;color:var(--ink);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--soft2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s ease,background .15s ease;flex:none}
.sec:hover .chev{background:var(--accT08,var(--soft))}
.sec.col .chev{transform:rotate(-90deg)}


.delrow{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14px}
.delrow:hover{background:var(--soft2)}

/* training session cards */
.sesscard{border:1px solid var(--line);border-left:3px solid var(--acc2);border-radius:13px;padding:12px;margin-bottom:12px;background:var(--soft2);box-shadow:0 1px 3px rgba(20,60,90,.05)}
.seshd{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.seshd .sname{flex:1 1 100%;min-width:0;font-weight:600;text-overflow:ellipsis} .seshd select.sname{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px}
@media (min-width:560px){.seshd .sname{flex:1 1 auto}}
.seshd input[type=time]{order:2}
.seshd input[type=time]{width:104px;flex:none}
.snote{margin-top:8px}
.exrow{padding:7px 0;border-top:1px dashed var(--line)}
.exrow:first-child{border-top:0;padding-top:0}
/* clean energy-method select */
.msel{appearance:none;-webkit-appearance:none;background:var(--soft2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:600 12.5px/1 var(--body);padding:9px 30px 9px 12px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2390A0B8' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
.seshead{display:flex;align-items:center;gap:8px;font:700 12.5px var(--body);color:var(--acc2);letter-spacing:.04em;text-transform:uppercase;margin:4px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.subnav{display:flex;gap:6px;background:var(--soft2);border-radius:14px;padding:4px;margin-bottom:16px;overflow:auto}
.subnav button{flex:1;min-width:max-content;border:0;background:transparent;font:600 13px var(--body);color:var(--mut);padding:9px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;justify-content:center}
.subnav button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(20,60,90,.10)}
/* modal / onboarding */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;background:rgba(8,14,24,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto;padding:24px 14px}
.modal.on{display:flex}
/* the ⓘ sheet stacks ABOVE an open sheet rather than replacing it */
#infoModal{z-index:360;background:rgba(8,14,24,.42)}
.sheet{background:var(--bg);border:1px solid var(--bord);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.4);width:100%;max-width:520px;padding:24px 22px;margin:auto;animation:pop .4s cubic-bezier(.2,.8,.3,1) both}
.steps{counter-reset:st;display:flex;flex-direction:column;gap:12px}
.steps li{list-style:none;position:relative;padding-left:36px;font-size:13.5px;line-height:1.55}
.steps li:before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font:700 12px var(--body);display:flex;align-items:center;justify-content:center}
.hr{height:1px;background:var(--line);margin:13px 0}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:9px}::-webkit-scrollbar-track{background:transparent}

/* ============ DARK THEME ============ */
html[data-theme="dark"]{
 color-scheme:dark;
 --bg:#0B1220; --ink:#E6EDF7; --mut:#9AA8BE; --line:#27313F; --line2:#1B2433;
 --acc:#22C1C3; --acc2:#8B7DF8; --grad:linear-gradient(120deg,#22C1C3,#8B7DF8);
 --ok:#34D399; --warn:#FBBF24; --bad:#F87171; --eng:#FBBF24; --pro:#34D399; --set:#818CF8;
 --glass:rgba(22,30,44,clamp(.12,calc(.72*var(--gm,1)),.96)); --glass2:rgba(26,34,49,clamp(.14,calc(.6*var(--gm,1)),.94)); --bord:rgba(255,255,255,.08);
 --surface:#161E2C; --soft:#1C2533; --soft2:#1C2533; --soft4:#1E2737;
 --track:#2A3547; --trackln:#3C4A63;
 --accSoft:rgba(139,125,248,.20); --okSoft:rgba(52,211,153,.16); --warnSoft:rgba(251,191,36,.16); --badSoft:rgba(248,113,113,.20); --infoSoft:rgba(139,125,248,.20);
 --info:#818CF8;
 --vzOk:rgba(52,211,153,.22); --vzHi:rgba(251,191,36,.20); --vzLine:rgba(148,163,184,.55);
 --thumb:#33415A; --railbg:rgba(13,19,30,.78); --tabbg:rgba(16,23,36,.88); --thbg:rgba(20,28,42,.94);
 --shadow:0 14px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .aurora i{opacity:.13}
html[data-theme="dark"] .aurora i:nth-child(1){background:#0E5C5A}
html[data-theme="dark"] .aurora i:nth-child(2){background:#3B2F7A}
html[data-theme="dark"] .aurora i:nth-child(3){background:#163A6B}
html[data-theme="dark"] .aurora:after{opacity:.05}
html[data-theme="dark"] .btn.danger{border-color:rgba(248,113,113,.4)}
html[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%239AA8BE' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>")}

/* ===== Log readability + compact logged rows ===== */
.logwrap2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.logline{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);background:var(--glass2);border-radius:12px;margin-bottom:7px}
.logline .ll-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.logline .ll-name{font-weight:700;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.logline .ll-sub{font:600 12px var(--mono);color:var(--mut);overflow-wrap:anywhere}
.logline .ll-flag{color:var(--warn);font-weight:700}
.ll-edit{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--mut);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px}
.ll-edit:hover{color:var(--acc2);border-color:var(--acc2)}
.logline .x{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--mut);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px;margin-left:0}
.logline .x:hover{color:var(--bad);border-color:var(--bad)}
.btn.ll-done{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 1px 3px var(--acc2Glow);flex:0 0 auto}
.foodrow.editing,.exrow.editing{border-left:3px solid var(--acc)}
/* session title — properly themed in both modes (fixes odd white select in dark) */
.sname{font-weight:700}
html[data-theme="dark"] .sname,html[data-theme="dark"] .sname-custom,html[data-theme="dark"] .sname:focus{background:var(--surface)!important;color:var(--ink)!important;color-scheme:dark}
/* clearer hierarchy + separation */
.sec .kicker{color:var(--ink)}
html[data-theme="dark"] .foodrow,html[data-theme="dark"] .exrow,html[data-theme="dark"] .logline,html[data-theme="dark"] .trow{border-color:#3A4658}
html[data-theme="dark"] .mealgrp,html[data-theme="dark"] .sesscard{border-color:#3A4658}

/* ===== consolidated logged rows (flat dense list) + copy affordances ===== */
.logline{display:flex;align-items:flex-start;gap:8px;border:0!important;background:none!important;border-radius:0!important;padding:6px 2px!important;margin:0!important;border-bottom:1px solid var(--line)!important}
.rows .logline:last-of-type,.exwrap .logline:last-of-type{border-bottom:0!important}
.logline .li-txt{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;color:var(--ink)}
.logline .li-name{font-weight:700;color:var(--ink)}
.logline .li-mac{font:600 12px var(--mono);color:var(--mut);white-space:normal}
.logline .li-tag{font:700 11px var(--mono);color:var(--acc2)}
.logline .hf{color:var(--warn);font-weight:700}
.logline .li-act{flex:0 0 auto;display:flex;gap:5px;user-select:none}
.logline .ll-edit,.logline .x{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--mut);width:27px;height:27px;border-radius:8px;cursor:pointer;font-size:12px;padding:0;user-select:none}
.logline .ll-edit:hover{color:var(--acc2);border-color:var(--acc2)}
.logline .x:hover{color:var(--bad);border-color:var(--bad)}
html[data-theme="dark"] .logline{border-bottom-color:#2C3848!important}
/* copy-clean: keep action chrome out of text selections */
.additem,.mg-copy,.sess-copy,.mg-head select,.mg-head input,.seshd select,.seshd input,.seshd .chip,.mg-head .chip{user-select:none}
.mg-copy,.sess-copy{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--mut);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:14px;line-height:1}
.mg-copy:hover,.sess-copy:hover{color:var(--acc);border-color:var(--acc)}
.mg-copy.ok,.sess-copy.ok{color:var(--ok);border-color:var(--ok)}
.mealgrp .rows{margin-top:4px!important}

/* ===== window separation + elevation (light: shadow+tinted stroke · dark: lighter surface+stroke+overlay) ===== */
.logflow{display:flex;flex-direction:column;gap:16px}
/* LIGHT — more solid surface, a visible TINTED border (not white-on-white), clearer soft shadow */
.card{background:rgba(255,255,255,.9);border-color:rgba(16,42,76,.11);box-shadow:0 1px 2px rgba(16,42,76,.06),0 12px 28px rgba(16,42,76,.11)}
/* DARK — elevation by lightness: surface clearly lighter than page, light 11% stroke, subtle top overlay; shadow secondary */
html[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),rgba(30,41,60,.92);border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.45)}
/* hover lift so a section feels tangible */
.card:hover{box-shadow:0 1px 2px rgba(16,42,76,.06),0 16px 34px rgba(16,42,76,.14)}
html[data-theme="dark"] .card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 46px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.5)}

/* ===== coach logic tree ===== */
.ct-group{border:1px solid var(--line);border-radius:13px;margin-bottom:9px;overflow:hidden;background:var(--glass2)}
.ct-group.open{box-shadow:0 1px 2px rgba(16,42,76,.05)}
.ct-ghead{width:100%;display:flex;align-items:center;gap:9px;padding:12px 14px;border:0;background:transparent;cursor:pointer;text-align:left;font-weight:800;color:var(--ink);font-size:14px}
.ct-chev{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--soft2);transition:transform .2s ease,background .15s ease;color:var(--ink);font-size:11px;flex:0 0 auto}
.ct-group.open>.ct-ghead .ct-chev,.ct-rule.open>.ct-rhead .ct-chev{transform:rotate(90deg)}
.ct-gi{font-size:15px;flex:0 0 auto}
.ct-glabel{flex:1 1 auto;min-width:0}
.ct-badge{display:flex;gap:8px;font-size:11px;flex:0 0 auto}
.ct-badge b{font-weight:800}
.b-warn{color:var(--warn)}.b-ok{color:var(--ok)}
.ct-gbody{padding:2px 12px 12px}
.ct-sub{margin-top:6px}
.ct-sublabel{font:800 10px var(--body);letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin:10px 4px 5px;opacity:.85}
.ct-rule{border-left:2px solid var(--line);margin-left:6px}
.ct-rule.warn{border-left-color:var(--warn)}
.ct-rule.pos{border-left-color:var(--ok)}
.ct-rule.note{border-left-color:var(--acc2)}
.ct-rhead{width:100%;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 9px;border:0;background:transparent;cursor:pointer;text-align:left}
.ct-rhead:hover{background:var(--soft2)}
.ct-pill{font:800 9.5px var(--mono);padding:3px 7px;border-radius:999px;white-space:nowrap;flex:0 0 auto;letter-spacing:.3px}
.ct-pill.warn{background:var(--warnSoft);color:var(--warn)}
.ct-pill.pos{background:var(--okSoft);color:var(--ok)}
.ct-pill.na{background:var(--soft2);color:var(--mut)}
.ct-pill.note{background:var(--accSoft);color:var(--acc2)}
.ct-rname{font-weight:600;font-size:13px;color:var(--ink)}
.ct-rval{font:600 11px var(--mono);color:var(--mut);margin-left:auto;text-align:right}
.ct-sci{font:800 9.5px var(--mono);color:var(--acc2);background:var(--accSoft);padding:3px 6px;border-radius:7px;cursor:pointer;flex:0 0 auto}
.ct-sci:hover{filter:brightness(.95)}
.ct-detail{padding:2px 12px 11px 26px;font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:4px;line-height:1.5}
.ct-detail b{color:var(--ink);font-weight:700}
.ct-why{font-style:italic;opacity:.92;margin-top:2px;padding-top:6px;border-top:1px dashed var(--line)}

.subtabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:14px}
.subtab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:transparent;color:var(--ink);padding:7px 6px;border-radius:10px;cursor:pointer;font:inherit;opacity:.6;transition:background .15s,opacity .15s}
.subtab .st-main{font-size:13px;font-weight:700;line-height:1.15}
.subtab .st-sub{font-size:9.5px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:1px}
.subtab.on{background:var(--acc);color:#fff;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.subtab:not(.on):hover{opacity:.92;background:var(--surface)}
.mg-end{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.trend-plot{position:relative}
.trend-ymax{position:absolute;top:-2px;left:1px;font-size:8.5px;font-weight:600;color:var(--mut);background:var(--surface);padding:0 3px;border-radius:3px;pointer-events:none}
.trend-x{display:flex;gap:0;margin-top:3px}
.trend-x span{flex:1 1 0;text-align:center;font-size:9.5px;font-weight:600;color:var(--mut)}
.arrlist{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.arr-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--soft);border-radius:12px;background:var(--surface)}
.arr-row.arr-off{opacity:.5}
.arr-row.dragging{box-shadow:0 8px 24px rgba(0,0,0,.18);border-color:var(--acc)}
.arr-grip{cursor:grab;border:0;background:none;color:var(--mut);font-size:18px;line-height:1;padding:2px 5px;touch-action:none;flex:0 0 auto}
.arr-grip:active{cursor:grabbing}
.arr-name{flex:1;display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;min-width:0}
.arr-name input{flex:0 0 auto}
.arr-acts{display:flex;gap:4px;flex:0 0 auto}
.arr-acts button{border:1px solid var(--soft);background:var(--surface);border-radius:8px;width:30px;height:30px;font-size:14px;cursor:pointer;color:inherit;line-height:1}
.arr-drop{height:3px;border-radius:3px;background:var(--acc);margin:2px 2px}
/* shared date navigator — native calendar chip + clean day-pill strip (replaces the ring strip) */
.datebar{display:flex;flex-direction:column;gap:10px}
.dbnav{flex-wrap:wrap;gap:8px;align-items:center}
.dchip-wrap{position:relative;display:inline-block}
.dchip{min-width:128px}
.dchip-wrap input[type=date]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;margin:0;padding:0}
.dstrip2{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:2px}
.dstrip2::-webkit-scrollbar{height:0}
.daypill{flex:1 1 0;min-width:42px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 6px 6px;border:1px solid var(--soft);border-radius:13px;background:var(--surface);color:inherit;cursor:pointer;line-height:1;transition:background .12s ease,border-color .12s ease}
.daypill .dp-dow{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--mut)}
.daypill .dp-num{font-size:15px;font-weight:700}
.daypill .dp-dot{width:5px;height:5px;border-radius:50%;background:var(--acc)}
.daypill.today{border-color:var(--acc)}
.daypill.today .dp-num{color:var(--acc)}
.daypill.on{background:var(--acc);border-color:var(--acc);box-shadow:0 4px 12px rgba(0,0,0,.14)}
.daypill.on .dp-dow,.daypill.on .dp-num{color:#fff}
.daypill.on .dp-dot{background:#fff}
.daypill.on.today .dp-num{color:#fff}
/* grouped customizer lists (Customize Log / Customize Analysis) */
.arr-group{margin:2px 0}
.arr-gh{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin:13px 2px 6px}
.arr-group:first-of-type .arr-gh{margin-top:4px}
/* notes spans the full check-in grid so it can be reordered among the other fields */
.ci-grid .ci-notes{grid-column:1 / -1}

/* ============================================================
   GOAT — the signature default skin (internal id stays "eclipse", like apex_v1).
   Light reduced to black and white: monochrome chrome, space-grey
   neutrals, colour reserved for data. Variable overrides only —
   every component keeps reading the same var(--…) names.
   ============================================================ */
html[data-skin="eclipse"]{
 --bg:#F5F6F8; --ink:#10161D; --mut:#4E5862; --line:#E1E5EA; --line2:#EDF0F4;
 --acc:#3D4855; --acc2:#3D4855; --grad:linear-gradient(120deg,#3D4855,#4A5665);
 --ok:#15A34A; --warn:#B4741A; --bad:#B93A2E; --info:#4E6E92;
 --glass:rgba(255,255,255,clamp(.12,calc(.85*var(--gm,1)),.99)); --glass2:rgba(255,255,255,clamp(.14,calc(.92*var(--gm,1)),1)); --bord:rgba(16,22,29,.07);
 --shadow:0 1px 2px rgba(16,22,29,.05), 0 10px 28px -14px rgba(16,22,29,.13);
 --surface:#FFFFFF; --soft:#F0F2F5; --soft2:#EAEDF1; --soft4:#F1F3F6;
 --track:#E7EAEE; --trackln:#C7CDD5;
 --accSoft:rgba(61,72,85,.08); --okSoft:#E4F4EA; --warnSoft:#F5EDDD; --badSoft:#F7E7E4; --infoSoft:#E9EFF5;
 --vzOk:rgba(21,163,74,.16); --vzHi:rgba(180,116,26,.16); --vzLine:rgba(78,88,98,.45);
 --thumb:#CDD3DA; --railbg:rgba(250,251,252,.86); --tabbg:rgba(252,253,254,.93); --thbg:rgba(255,255,255,.96);
 --r:18px;
 --accGlow:rgba(61,72,85,.18); --acc2Glow:rgba(61,72,85,.15); --acc2Glow2:rgba(61,72,85,.24);
 --accT05:rgba(61,72,85,.05); --accT07:rgba(61,72,85,.07); --accT08:rgba(61,72,85,.08); --accT14:rgba(61,72,85,.12); --accT22:rgba(61,72,85,.2);
}
html[data-skin="eclipse"][data-theme="dark"]{
 --bg:#0C1116; --ink:#E8ECF1; --mut:#98A2AE; --line:#242C35; --line2:#1A222A;
 --acc:#C9D2DC; --acc2:#C9D2DC; --grad:linear-gradient(120deg,#39434F,#434F5D);
 --ok:#31C97F; --warn:#D2913B; --bad:#E05548; --info:#7E9CC0;
 --glass:rgba(18,24,31,clamp(.12,calc(.8*var(--gm,1)),.97)); --glass2:rgba(21,27,34,clamp(.14,calc(.66*var(--gm,1)),.95)); --bord:rgba(255,255,255,.10);
 --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -16px rgba(0,0,0,.62);
 --surface:#151B22; --soft:#1A222A; --soft2:#1A222A; --soft4:#1D2630;
 --track:#232B34; --trackln:#3A454F;
 --accSoft:rgba(201,210,220,.10); --okSoft:rgba(49,201,127,.15); --warnSoft:rgba(210,145,59,.15); --badSoft:rgba(224,104,90,.16); --infoSoft:rgba(126,156,192,.15);
 --vzOk:rgba(49,201,127,.2); --vzHi:rgba(210,145,59,.18); --vzLine:rgba(152,162,174,.5);
 --thumb:#33404C; --railbg:rgba(10,15,20,.84); --tabbg:rgba(12,17,23,.9); --thbg:rgba(15,21,27,.95);
 --accGlow:rgba(0,0,0,.3); --acc2Glow:rgba(0,0,0,.28); --acc2Glow2:rgba(0,0,0,.36);
 --accT05:rgba(201,210,220,.05); --accT07:rgba(201,210,220,.07); --accT08:rgba(201,210,220,.08); --accT14:rgba(201,210,220,.13); --accT22:rgba(201,210,220,.22);
}
/* Dark elevation is a LIGHTER GREY SURFACE, never white — so the app-wide
   white text on --grad surfaces is correct as-is, everywhere, no overrides. */
/* The rail is the reference: dark elevated pill, white text. In dark, --acc stays a
   LIGHT foreground (text, ticks, borders) — so every place that paints --acc as a
   BACKGROUND is re-pointed at the rail surface instead. Audited list, all 11: */
html[data-skin="eclipse"][data-theme="dark"] .tabbar button.on,
html[data-skin="eclipse"][data-theme="dark"] input[type=checkbox]:checked,
html[data-skin="eclipse"][data-theme="dark"] .opt.sel .opt-tick,
html[data-skin="eclipse"][data-theme="dark"] .subtab.on,
html[data-skin="eclipse"][data-theme="dark"] .arr-drop,
html[data-skin="eclipse"][data-theme="dark"] .daypill .dp-dot,
html[data-skin="eclipse"][data-theme="dark"] .daypill.on,
html[data-skin="eclipse"][data-theme="dark"] .infob:hover,
html[data-skin="eclipse"][data-theme="dark"] .infob:active,
html[data-skin="eclipse"][data-theme="dark"] .ob-dot.on{background:#3A4553}
html[data-skin="eclipse"][data-theme="dark"] .subtab.on,
html[data-skin="eclipse"][data-theme="dark"] .daypill.on,
html[data-skin="eclipse"][data-theme="dark"] .tabbar button.on{color:#FFFFFF}
/* slider thumbs stay light on purpose — a light thumb on a dark track is the iOS norm */
/* Links stay ink, so they declare themselves by the underline instead of a hue */
html[data-skin="eclipse"] .linkbtn{text-decoration:underline;text-underline-offset:2px}
/* Eclipse signature: no colour blobs — flat paper with the faintest film of grain */
html[data-skin="eclipse"] .aurora i{display:none}
html[data-skin="eclipse"] .aurora{background:var(--bg)}
html[data-skin="eclipse"] .aurora:after{opacity:.02}

/* ===== P2 · one date navigator, one size (Log + Analysis) ===== */
.dbnav .btn.sm{min-height:40px;border-radius:12px}
.dbnav .dchip{min-height:40px;flex-direction:row;justify-content:center;gap:6px}
.daypill{min-height:52px;border:1px solid var(--line);border-radius:12px}
.daypill .dp-num{font:600 15px var(--mono);font-variant-numeric:tabular-nums}

/* ===== P3 · Log polish: sticky totals, ⋯ day menu, inline info toggle, thumb-size inputs ===== */
.sticky-tot{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:35;margin:10px 0 0}
.sticky-tot .totbar{background:var(--thbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--bord);border-radius:14px;padding:8px 12px;box-shadow:var(--shadow)}
.menuwrap{position:relative;display:inline-block}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:196px;background:var(--glass2);-webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);border:1px solid var(--bord);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:none;z-index:120}
.menu.on{display:block;animation:pop .28s cubic-bezier(.2,.8,.3,1) both}
.menu .mi-hr{height:1px;background:var(--line);margin:5px 8px}
.menu.open{display:block}
.menu button{display:flex;width:100%;gap:9px;align-items:center;border:0;background:transparent;font:600 13.5px var(--body);color:var(--ink);padding:11px 10px;border-radius:9px;cursor:pointer;text-align:left;min-height:44px}
.menu button:hover{background:var(--soft)}
.menu button.danger{color:var(--bad)}
.linkbtn{border:0;background:transparent;color:var(--acc2);font:600 11.5px var(--body);cursor:pointer;padding:0 2px}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select{min-height:42px}
.dchip-wrap input[type=date]{min-height:0}

/* ===== P4 · glance: kcal ring + macro meters (pure CSS, no library) ===== */
.glance{display:flex;gap:16px;align-items:center}
.ringwrap{position:relative;width:104px;height:104px;flex:none}
@property --p{syntax:'<number>';inherited:false;initial-value:0}
.gring{--p:0;--rc:var(--acc);position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--track) 0);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 56%);mask:radial-gradient(circle at 50% 50%,transparent 55%,#000 56%)}
.rval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;padding:0 6px}
.rval b{font:700 21px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.05}
.rval small{font:600 8px var(--body);color:var(--mut);text-transform:uppercase;letter-spacing:.03em;line-height:1.2;max-width:62px}
.gms{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.gm .gm-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.gm .gm-row b{font:600 12.5px var(--body)}
.gm .gm-row span{font:600 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--mut)}
.gm .gm-bar{position:relative;height:8px;border-radius:4px;background:var(--track)}
.gm .gm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;display:block}
.gm .gm-tick{position:absolute;right:0;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--trackln);display:block}
.gstats{display:flex;gap:12px;flex-wrap:wrap;font:600 12px var(--mono);color:var(--mut)}
.gstats b{color:var(--ink)}

/* ===== P5 · per-muscle volume band bars (MEV→MRV zone + weekly dose dot) ===== */
.vband{position:relative;height:10px;border-radius:5px;background:var(--track);margin-top:2px}
.vband i{display:block}
.vb-zone{position:absolute;top:0;bottom:0;background:var(--vzOk,var(--okSoft));border-left:1.5px solid var(--vzLine,var(--trackln));border-right:1.5px solid var(--vzLine,var(--trackln))}
.vb-zone.hi{background:var(--vzHi,var(--warnSoft));border-left:0}
.vb-mrv{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:1px;background:var(--vzLine,var(--trackln))}
.vb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;opacity:.62}
.vb-dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);border:2.5px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.28)}

/* ===== P6 · set editor: labelled grid, RIR tap-segment, last-session ghost ===== */
.er-ghost{font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--mut);margin:1px 0 9px;line-height:1.5}
.er-ghost b{color:var(--ink);font-weight:600}
.er-cols,.er-grid{display:grid;grid-template-columns:78px 1fr 1fr;gap:7px}
.er-cols{margin-bottom:3px}
.er-cols small{font:600 11px var(--body);color:var(--mut);text-align:center}
.er-grid{margin-bottom:9px}
.er-grid input,.er-grid select{width:100%;text-align:center;font-variant-numeric:tabular-nums}
.er-rirrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.er-lab{font:600 11.5px var(--body);color:var(--mut)}
.er-copy{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:8px 10px;cursor:pointer}
.er-copy .er-copyhint{float:right;font:500 10.5px var(--body);color:var(--mut);opacity:.85;margin-left:8px}
.er-copy:active{transform:scale(.99)}
.er-more{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;padding:8px 2px;margin:0;color:var(--mut);font:600 12.5px var(--body);cursor:pointer;text-align:left}
.er-more:hover{color:var(--ink)}
.er-chev{font-size:13px;width:15px;flex:none;color:var(--ink)}
.er-msum{margin-left:auto;font:500 11px var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64%}
.er-opts{border-top:1px dashed var(--line);padding-top:9px;margin-bottom:9px;display:flex;flex-direction:column;gap:8px}
.er-opt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.er-olab{font:600 12px var(--body);color:var(--mut);flex:none}
.er-opt select{flex:0 1 auto;width:auto;min-width:150px;max-width:64%}
.er-opts .painbtn{align-self:flex-start}
.er-done{display:block;width:100%;margin-top:2px}
.li-mac2{display:block;margin-top:2px}
.rirseg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.rirseg button{border:0;background:transparent;color:var(--mut);font:600 13.5px var(--mono);min-width:46px;min-height:42px;cursor:pointer}
.rirseg button+button{border-left:1px solid var(--line)}
.rirseg button.on{background:var(--accSoft);color:var(--acc)}

/* ===== P7 · chrome icons + micro-interactions ===== */
.ic{width:15px;height:15px;vertical-align:-2.5px}
.ic.icL{width:18px;height:18px;vertical-align:-4px}
@media (prefers-reduced-motion:no-preference){
 .btn,.chip,.daypill,.dchip,.ll-edit,.x,.rirseg button,.subtab,.painbtn{transition:transform .12s ease,background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
 .btn:active,.chip:active,.daypill:active,.dchip:active,.subtab:active{transform:scale(.96)}
 .ll-done:active,.painbtn:active,.rirseg button:active{transform:scale(.93)}
}

/* ===== sync pill: constant footprint so status changes never reflow the header ===== */
.pill.bk{display:inline-flex;align-items:center;justify-content:center;min-width:104px;font-size:10.5px;padding:4px 10px;white-space:nowrap}

/* ===== Database: keep the food table inside the card on phones ===== */
.ftbl{table-layout:auto}
@media(max-width:560px){
 .ftbl th,.ftbl td{padding:8px 6px;font-size:12px}
 .ftbl th:nth-child(2),.ftbl td:nth-child(2),  /* Cat  — redundant with the category filter */
 .ftbl th:nth-child(8),.ftbl td:nth-child(8){display:none} /* Src */
}
/* ===== Add-a-food: grouped macro inputs ===== */
.fform label.f{margin-top:2px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:400px){.mgrid{grid-template-columns:repeat(2,1fr)}}
.mgrid input{text-align:center;font-variant-numeric:tabular-nums}
.fgroup{border:1px solid var(--line2);border-radius:14px;padding:12px;margin-top:10px;background:var(--soft4)}
.fgroup>.glab{font:600 10.5px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:9px;display:block}
.fform .hr{height:1px;background:var(--line2);border:0;margin:14px 0 10px}

/* ============================================================
   PRISM — third selectable skin, modelled on iOS 26 Liquid Glass.
   Apple system colours, SF Pro (native stack), translucent panels
   over a soft wallpaper. Glass responds to the --gm slider.
   ============================================================ */
html[data-skin="prism"]{
 --bg:#EDEEF3; --ink:#000000; --mut:rgba(60,60,67,.6); --line:rgba(60,60,67,.20); --line2:rgba(60,60,67,.12);
 --acc:#007AFF; --acc2:#007AFF; --grad:linear-gradient(180deg,#3D9BFF,#007AFF);
 --ok:#34C759; --warn:#FF9500; --bad:#FF3B30; --info:#5856D6;

 --glass:rgba(255,255,255,clamp(.12,calc(.60*var(--gm,1)),.96)); --glass2:rgba(255,255,255,clamp(.14,calc(.72*var(--gm,1)),.98)); --bord:rgba(255,255,255,.65);
 --glassHi:rgba(255,255,255,.85);
 --shadow:inset 0 1px 0 var(--glassHi), 0 1px 1px rgba(0,0,0,.04), 0 12px 34px -8px rgba(20,30,60,.18);
 --surface:rgba(255,255,255,.80); --soft:rgba(120,120,128,.10); --soft2:rgba(120,120,128,.16); --soft4:rgba(120,120,128,.08);
 --track:rgba(120,120,128,.20); --trackln:rgba(60,60,67,.35);
 --accSoft:rgba(0,122,255,.14); --okSoft:rgba(52,199,89,.16); --warnSoft:rgba(255,149,0,.16); --badSoft:rgba(255,59,48,.14); --infoSoft:rgba(88,86,214,.14);
 --vzOk:rgba(52,199,89,.22); --vzHi:rgba(255,149,0,.20); --vzLine:rgba(60,60,67,.4);
 --thumb:rgba(120,120,128,.45); --railbg:rgba(255,255,255,.55); --tabbg:rgba(255,255,255,.6); --thbg:rgba(255,255,255,.68);
 --r:22px;
 --accGlow:rgba(0,122,255,.32); --acc2Glow:rgba(0,122,255,.30); --acc2Glow2:rgba(0,122,255,.40);
 --accT05:rgba(0,122,255,.05); --accT07:rgba(0,122,255,.07); --accT08:rgba(0,122,255,.08); --accT14:rgba(0,122,255,.14); --accT22:rgba(0,122,255,.22);
}
html[data-skin="prism"][data-theme="dark"]{
 --bg:#000000; --ink:#FFFFFF; --mut:rgba(235,235,245,.6); --line:rgba(84,84,88,.6); --line2:rgba(84,84,88,.4);
 --acc:#0A84FF; --acc2:#0A84FF; --grad:linear-gradient(180deg,#0A84FF,#0060DF);
 --ok:#30D158; --warn:#FF9F0A; --bad:#FF453A; --info:#5E5CE6;

 --glass:rgba(44,44,46,clamp(.12,calc(.55*var(--gm,1)),.95)); --glass2:rgba(54,54,58,clamp(.14,calc(.62*var(--gm,1)),.96)); --bord:rgba(255,255,255,.14);
 --glassHi:rgba(255,255,255,.20);
 --shadow:inset 0 1px 0 var(--glassHi), 0 1px 1px rgba(0,0,0,.4), 0 16px 40px -10px rgba(0,0,0,.6);
 --surface:rgba(44,44,46,.7); --soft:rgba(120,120,128,.24); --soft2:rgba(120,120,128,.32); --soft4:rgba(120,120,128,.18);
 --track:rgba(120,120,128,.32); --trackln:rgba(235,235,245,.4);
 --accSoft:rgba(10,132,255,.24); --okSoft:rgba(48,209,88,.20); --warnSoft:rgba(255,159,10,.20); --badSoft:rgba(255,69,58,.22); --infoSoft:rgba(94,92,230,.24);
 --vzOk:rgba(48,209,88,.24); --vzHi:rgba(255,159,10,.20); --vzLine:rgba(235,235,245,.5);
 --thumb:rgba(120,120,128,.55); --railbg:rgba(20,20,22,.55); --tabbg:rgba(20,20,22,.6); --thbg:rgba(30,30,32,.6);
 --accGlow:rgba(10,132,255,.35); --acc2Glow:rgba(10,132,255,.30); --acc2Glow2:rgba(10,132,255,.45);
 --accT05:rgba(10,132,255,.06); --accT07:rgba(10,132,255,.08); --accT08:rgba(10,132,255,.10); --accT14:rgba(10,132,255,.16); --accT22:rgba(10,132,255,.26);
}
/* stronger real-time blur on the frosted chrome */
html[data-skin="prism"] .card,html[data-skin="prism"] .tabbar,html[data-skin="prism"] .menu,html[data-skin="prism"] .sheet,html[data-skin="prism"] .rail,html[data-skin="prism"] .sticky-tot .totbar{-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}
/* the wallpaper the glass refracts (replaces the aurora blobs for this skin) */
html[data-skin="prism"] .aurora i{display:none}
html[data-skin="prism"] .aurora{background:
 radial-gradient(40vmax 40vmax at 12% 8%, #7FB5FF, transparent 55%),
 radial-gradient(38vmax 38vmax at 88% 4%, #FFC7E6, transparent 55%),
 radial-gradient(44vmax 44vmax at 82% 88%, #8FE3D0, transparent 55%),
 radial-gradient(40vmax 40vmax at 6% 92%, #C9B8FF, transparent 55%), var(--bg)}
html[data-skin="prism"][data-theme="dark"] .aurora{background:
 radial-gradient(42vmax 42vmax at 12% 8%, #12386B, transparent 55%),
 radial-gradient(38vmax 38vmax at 88% 4%, #3A1746, transparent 55%),
 radial-gradient(44vmax 44vmax at 82% 90%, #0B3A34, transparent 58%),
 radial-gradient(40vmax 40vmax at 6% 92%, #241A54, transparent 58%), var(--bg)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html[data-skin="prism"] .card,html[data-skin="prism"] .tabbar{background:var(--glass2)}}

/* ===== Glass-effect slider (Appearance) ===== */
.glass-range{-webkit-appearance:none;appearance:none;width:100%;height:32px;min-height:0;background:transparent;border:0;padding:0;margin:6px 0 0;cursor:pointer}
.glass-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--track)}
.glass-range::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
.glass-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.25);margin-top:-9px}
.glass-range::-moz-range-thumb{width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ===== tab bar: shrink on scroll-down (both axes), restore on scroll-up (Safari/Instagram pattern) =====
   transform:scale narrows AND shortens (anchored to bottom-centre); the label collapse removes the label row
   for extra vertical shrink. Both animate together for a smooth "settle into a pill". */
.tabbar{transition:left .34s cubic-bezier(.32,.72,0,1),right .34s cubic-bezier(.32,.72,0,1),padding .34s cubic-bezier(.32,.72,0,1)}
html.kb-open .tabbar{display:none}
.tabbar button{transition:font-size .34s cubic-bezier(.32,.72,0,1),gap .34s cubic-bezier(.32,.72,0,1),padding .34s cubic-bezier(.32,.72,0,1),background-color .16s ease,color .16s ease}
/* minimized: narrower (~65% of full width, centred via bigger insets) but a touch taller than a bare icon row */
.tabbar.min{left:19%;right:19%;padding:6px 8px}
.tabbar.min button{font-size:0;gap:0;padding:8px 0}
@media (prefers-reduced-motion:reduce){.tabbar,.tabbar button{transition:none}}

/* ===== page transition: directional slide-in when the view changes (swipe or tab tap) ===== */
@keyframes pbSlideR{from{opacity:.15;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes pbSlideL{from{opacity:.15;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
.view.slide-r{animation:pbSlideR .3s cubic-bezier(.32,.72,0,1)}
.view.slide-l{animation:pbSlideL .3s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){.view.slide-r,.view.slide-l{animation:none}}

/* ⓘ info button — one-time explainers live behind this instead of inline text walls (tone system) */
.infob{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;padding:0;margin:0 1px;border:1.2px solid var(--acc);border-radius:50%;background:transparent;color:var(--acc);font:italic 700 10.5px/1 Georgia,'Times New Roman',serif;cursor:pointer;vertical-align:-3px;opacity:.85;transition:background .15s,color .15s,opacity .15s}
.infob:hover,.infob:active{background:var(--acc);color:#fff;opacity:1}

/* Food database — vertical card list (Phase 1: no sideways scrolling, mobile-first) */
.flist{max-height:560px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.fcard{padding:9px 4px;border:0;border-bottom:1px dashed var(--line);background:none;border-radius:0;margin-bottom:0;cursor:pointer}
.fcard .fc-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.fcard .fc-name{font-size:13.5px;line-height:1.3;flex:1;min-width:140px}
.fcard .fc-cat{margin-left:auto;opacity:.8}
.fcard .fc-mac{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:12px;font-family:var(--mono);color:var(--mut)}
.fcard .fc-mac b{color:var(--ink);font-size:12.5px}
.fcard .fc-per{font-size:10.5px;opacity:.8}
.fcard:hover{background:var(--accT08);border-radius:8px}

/* ===== Mobile browser professionalization ===== */
/* iOS auto-zooms into any text control rendered under 16px; at 16px+ it never zooms — and pinch-zoom
   stays fully available (no maximum-scale / user-scalable hacks, which break Android accessibility). */
@media (max-width:760px){
 input,select,textarea,.seshd select.sname{font-size:16px}
}
/* No accidental double-tap zoom on controls (pinch untouched) + no grey tap flash */
html{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea,label,.seg,.tag,.click,.tabbar,.rail,.wk,.infob{touch-action:manipulation}

/* ============ GUIDED ONBOARDING (Ship 1a) ============ */
.sheet.ob{max-width:480px;padding:20px 20px 22px}
.ob-top{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;margin-bottom:8px}
.ob-top b{text-align:center;font:600 13px var(--body);color:var(--mut);letter-spacing:.4px;text-transform:uppercase}
.ob-back{border:0;background:transparent;color:var(--ink);font:400 26px/1 var(--body);cursor:pointer;padding:2px 8px;border-radius:10px}
.ob-back:hover{background:var(--accT07)}
.ob-prog{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:18px}
.ob-prog i{display:block;height:100%;background:var(--grad);border-radius:2px;transition:width .3s ease}
.ob-hero{text-align:center;padding:26px 4px 8px}
.ob-h1{font-size:26px;font-weight:800;letter-spacing:-.3px;margin:0 0 10px}
.ob-sub{color:var(--mut);font-size:14px;line-height:1.55;max-width:360px;margin:0 auto}
.ob-q{font-size:21px;font-weight:800;letter-spacing:-.2px;margin:4px 0 6px}
.ob-sub2{color:var(--mut);font-size:12.5px;line-height:1.5;margin-bottom:14px}
.ob-in{width:100%;font-size:16px;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);margin-top:6px}
.ob-seg{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:3px;margin:2px 0 10px}
.ob-seg button{border:0;background:transparent;color:var(--mut);font:600 13px var(--body);padding:7px 16px;border-radius:10px;cursor:pointer}
.ob-seg button.on{background:var(--grad);color:#fff}
.ob-seg-sm button{padding:6px 12px;font-size:12px}
.ob-opt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:13px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);cursor:pointer;margin-bottom:8px;transition:.15s;color:var(--ink)}
.ob-opt:hover{border-color:var(--acc)}
.ob-opt.on{border-color:var(--acc);background:var(--accT07);box-shadow:0 0 0 3px var(--accT14)}
.ob-optT{font:600 14px var(--body)}
.ob-optT small{display:block;font:400 12px var(--body);color:var(--mut);margin-top:2px;line-height:1.45}
.ob-dot{flex:none;width:19px;height:19px;border-radius:50%;border:2px solid var(--line);position:relative}
.ob-dot.on{border-color:var(--acc);background:var(--acc)}
.ob-dot.on:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.ob-bfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.ob-bf{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:8px 6px 7px;cursor:pointer;color:var(--ink);transition:.15s;display:flex;flex-direction:column;align-items:center;gap:4px}
.ob-bf svg{width:100%;height:auto;display:block;color:var(--ink)}
.ob-bf span{font:600 11.5px var(--body);color:var(--mut);border:1px solid var(--line);border-radius:9px;padding:2px 8px}
.ob-bf:hover{border-color:var(--acc)}
.ob-bf.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--accT14)}
.ob-bf.on span{color:var(--acc);border-color:var(--acc)}
.ob-foot{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.ob-next{width:100%;padding:15px;font-size:15.5px;font-weight:700;border-radius:15px;box-shadow:0 8px 22px var(--accGlow),0 2px 6px rgba(0,0,0,.14);transition:transform .12s,box-shadow .12s}
.ob-next:hover{transform:translateY(-1px);box-shadow:0 11px 26px var(--accGlow),0 3px 8px rgba(0,0,0,.16)}
.ob-next:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.ob-check{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font:700 22px/46px var(--body);text-align:center;margin:0 auto 14px;box-shadow:0 6px 16px var(--accGlow)}
.ob-stat{text-align:center;margin-top:16px}
.ob-stat b{font-size:36px;font-weight:800;letter-spacing:-.5px}
.ob-stat span{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.ob-stat.sm b{font-size:22px}

/* ---- Ship 1b: account-first hello + expenditure reveal ---- */
.ob-kick{font:600 11px var(--body);letter-spacing:.8px;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.ob-sent{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font:400 13px/1.5 var(--body);text-align:center;margin:8px 0 2px}
.ob-sent span{color:var(--mut);font-size:12.5px}
.ob-err{color:#e5484d;font:500 12.5px var(--body);text-align:center;margin-top:8px}
.ob-codewrap{text-align:center;font:500 12.5px var(--body);margin-top:10px}
.ob-codewrap a{color:var(--acc);text-decoration:none;font-weight:600}
.ob-coderow{display:flex;gap:8px;margin:4px 0 2px}
.ob-coderow .ob-in{flex:1;margin-top:0}
.ob-coderow .btn{padding:0 18px;border-radius:14px}
.ob-calc{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font:400 12.5px/1.6 var(--body)}
.ob-calcrow{color:var(--mut);margin-top:4px}
.ob-calcref{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--mut);font-size:11.5px}

/* ---- Ship 1c: roadmap, goal rate, summary, program reveal ---- */
.ob-map{margin:6px 2px}
.ob-node{display:flex;gap:14px;align-items:flex-start;padding:10px 4px;position:relative}
.ob-node+.ob-node:before{content:"";position:absolute;left:17px;top:-14px;height:18px;width:2px;background:var(--line)}
.ob-node i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--mut);font:700 15px/32px var(--body);font-style:normal;text-align:center}
.ob-node.on i{background:var(--grad);border-color:transparent;color:#fff}
.ob-node b{font:700 15px var(--body)}
.ob-node span{display:block;color:var(--mut);font:400 12.5px/1.5 var(--body);margin-top:2px}
.ob-node:not(.on) b{color:var(--mut)}
.ob-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ob-mini{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;text-align:center}
.ob-mini b{font:800 16px var(--body);display:block}
.ob-mini span{color:var(--mut);font:400 11.5px var(--body)}
.ob-ratehead{display:flex;justify-content:space-between;align-items:baseline;margin:14px 2px 4px;font:600 13px var(--body)}
.ob-ratehead b{font-size:16px;color:var(--acc)}
.ob-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;margin:12px 0 8px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--acc) 0,var(--acc) var(--fill,50%),var(--line) var(--fill,50%),var(--line) 100%)}
.ob-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--acc);box-shadow:0 2px 7px rgba(0,0,0,.28);cursor:pointer;margin-top:-1px}
.ob-range::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--acc);border-radius:50%;background:#fff;cursor:pointer}
.ob-range::-moz-range-track{height:8px;border-radius:6px;background:transparent}
.ob-defnote{text-align:center;color:var(--mut);font:500 12px var(--body);margin-top:2px}
.ob-raterow{text-align:center;color:var(--mut);font:500 13px var(--body);margin-top:4px}
.ob-sumcard{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.ob-sumcard.acc{border-color:var(--acc);background:var(--accT07)}
.ob-sumcard span{display:block;color:var(--mut);font:600 11.5px var(--body);letter-spacing:.4px;text-transform:uppercase}
.ob-sumcard b{font:700 16px var(--body)}
.ob-sumcard small{display:block;color:var(--mut);font:400 12px/1.5 var(--body);margin-top:4px}
.ob-macros{display:flex;gap:8px;justify-content:center;margin-top:12px}
.ob-macros span{font:700 12.5px var(--body);padding:6px 12px;border-radius:11px;color:#1c1c1c}
.ob-macros .mP{background:#ff9d6c}.ob-macros .mF{background:#ffd166}.ob-macros .mC{background:#7fd8a5}

/* ---- Startup revisit pass: exit ✕, skip link ---- */
.sheet.ob{position:relative}
.ob-x{font-size:17px;line-height:1;justify-self:end}
.ob-x.abs{position:absolute;top:12px;right:12px;z-index:2;border:0;background:transparent;color:var(--mut);font:400 17px/1 var(--body);cursor:pointer;padding:6px 9px;border-radius:10px}
.ob-x.abs:hover{background:var(--accT07);color:var(--ink)}
.ob-top .ob-x{border:0;background:transparent;color:var(--mut);cursor:pointer;padding:2px 8px;border-radius:10px}
.ob-top .ob-x:hover{background:var(--accT07);color:var(--ink)}
.ob-skip{background:none;border:0;width:100%;margin-top:4px;padding:8px;font:500 12px var(--body);color:#c9707a;opacity:.72;cursor:pointer}
.ob-skip:hover{opacity:1;text-decoration:underline}

/* ---- Ship 1d/1e: compact grids, detail strip, focus chips, tighter cards ---- */
.ob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:4px 0 8px}
.ob-opt.sm{padding:11px 10px;border-radius:13px;margin:0;justify-content:center;text-align:center;font:600 13px var(--body)}
.ob-opt.sm.on{border-color:var(--acc);background:var(--accT07);box-shadow:0 0 0 2px var(--accT14)}
.ob-opt.sm.more{color:var(--mut);font-weight:500;border-style:dashed}
.ob-detail{border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:10px 12px;font:400 12.5px/1.5 var(--body);color:var(--mut);min-height:52px}
.ob-detail b{color:var(--ink)}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.ob-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:9px 14px;font:600 13px var(--body);cursor:pointer;transition:.15s}
.ob-chip.on{border-color:var(--acc);background:var(--accT07);color:var(--acc);box-shadow:0 0 0 2px var(--accT14)}
.ob-bfgrid{gap:6px}
.ob-bf{padding:5px 4px 6px}
.ob-bf svg{max-height:12vh}
.ob-sumcard{padding:10px 12px;margin-bottom:6px}
.ob-sumcard small{font-size:11.5px}
.ob-sumcard b{font-size:15px}

/* ---- Ship 1f: training week preview rows ---- */
.ob-sess{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:10px 12px;margin-bottom:6px;font:400 13px var(--body)}
.ob-sess small{color:var(--mut);font-size:11.5px;flex:0 0 auto}

/* ---- Ship 2b: weekly check-in card + sheet ---- */
.ci-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ci-mini{border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:11px;text-align:center}
.ci-mini.on{border-color:var(--acc);background:var(--accT07)}
.ci-mini b{display:block;font:800 19px var(--body);letter-spacing:-.3px}
.ci-mini.on b{color:var(--acc)}
.ci-mini span{color:var(--mut);font:400 11px var(--body)}
.ci-prog{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.ci-prog i{display:block;height:100%;background:var(--grad);border-radius:4px;transition:width .3s}
.ci-need{font:600 12.5px var(--body);color:var(--ink)}
.ci-rows{margin-top:10px}
.ci-rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.ci-rows>div:last-child{border-bottom:0}
.ci-rows span{color:var(--mut)}
.ci-thin{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;margin-top:10px;font:400 12.5px/1.5 var(--body)}
.ci-prop{border:1px solid var(--acc);background:var(--accT07);border-radius:13px;padding:11px 13px;margin-top:10px}
.ci-prop span{display:block;color:var(--mut);font:600 11px var(--body);letter-spacing:.4px;text-transform:uppercase}
.ci-prop b{font:700 16px var(--body)}
.ci-prop b i{font-style:normal;color:var(--acc)}
.ci-prop small{display:block;color:var(--mut);font:400 11.5px/1.5 var(--body);margin-top:5px}
.ci-acts{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.ci-acts .btn{width:100%;padding:12px;border-radius:13px}
.ci-adj{display:flex;gap:7px}
.ci-adj input{flex:1;padding:11px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px}
.ci-adj .btn{width:auto;flex:0 0 auto;padding:0 16px}


/* ============================================================
   GOAT PATH — brand mark + wordmark (all skins)
   The tile is the shipped icon; the old CSS gradient circle is gone.
   ============================================================ */
.rail .mark{background:#0C1116 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%230C1116%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%225.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2049.5%20L32%2027.5%20L54%2049.5%22%2F%3E%3Cpath%20d%3D%22M16%2038.5%20L32%2022.5%20L48%2038.5%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2228%22%20y%3D%229%22%20width%3D%228%22%20height%3D%2246%22%20fill%3D%22%230C1116%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2215.5%22%20r%3D%223.6%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;box-shadow:0 4px 12px rgba(6,10,14,.28)}
.rail .mark:after{display:none}
html[data-theme="dark"] .rail .mark{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 4px 14px rgba(0,0,0,.45)}
.rail .brand b .wm2{font-weight:300;color:var(--mut)}

/* ============================================================
   EARNED GOLD — worn by exactly three moments, in every skin:
   target landed · personal best · training week complete.
   Never a button, never a tab, never chrome.
   ============================================================ */
:root{--gold:#A8873F;--goldInk:#7E6730;--goldSoft:#F2EBDA;--goldLine:#DFCFA6;--wt1:#0EA5A6;--wt2:#6D5BF6;--carb:#3B72C4;--fat:#7C5CC4}
html[data-theme="dark"]{--gold:#D8BE84;--goldInk:#E0C892;--goldSoft:rgba(216,190,132,.13);--goldLine:rgba(216,190,132,.34);--carb:#5B93E0;--fat:#9B82DC}
.gring.gold{--rc:var(--gold)}
.rval.gold b{color:var(--goldInk)}
.goldrow{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.prband{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:10px;background:var(--goldSoft);border:1px solid var(--goldLine);color:var(--goldInk);font:600 11.5px var(--body);width:fit-content;max-width:100%}
.prband svg{width:13px;height:13px;flex:none;stroke:var(--goldInk);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prband b{font-weight:700}
/* ===== Stage 6 · Exercise library (grouped, dense, two-line rows) ===== */
.exgroupseg{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.exgroupseg button{flex:1;background:transparent;border:0;padding:8px 4px;font-size:12px;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap}
.exgroupseg button+button{border-left:1px solid var(--line)}
.exgroupseg button.on{background:var(--accT14);color:var(--ink)}
.exgrp-h{font-size:13px;font-weight:700;letter-spacing:.01em;padding:13px 2px 5px;display:flex;align-items:baseline;gap:7px;position:sticky;top:0;background:var(--thbg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);z-index:3}
.exgrp-h:first-child{padding-top:2px}
.exgrp-h span{font-size:11px;font-weight:500;font-family:var(--mono);color:var(--mut)}
.exlr{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line);cursor:pointer}
.exlr:hover{background:var(--glass2)}
.exlr-pl{width:24px;height:24px;flex:0 0 24px;margin-top:1px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--mut);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;cursor:pointer}
.exlr.pooled .exlr-pl{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.exlr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.exlr-l1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.exlr-nm{font-size:14px;line-height:1.3;font-weight:500}
.exlr.pooled .exlr-nm{font-weight:700}
.exlr-yours{opacity:.5;font-size:9.5px;font-weight:700;letter-spacing:.04em}
.exlr-meta{display:flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto}
.exlr-pat{font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:2px 5px;border-radius:5px;line-height:1}
.exlr-pat.comp{color:var(--acc);background:var(--accT14)}
.exlr-pat.iso{color:var(--mut);background:var(--surface);border:1px solid var(--line)}
.exlr-eq{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:2px 5px;white-space:nowrap}
.exlr-mx{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.exlr-mx .exmtag{margin:0}
.exlr-del{border:none;background:none;cursor:pointer;color:var(--mut);font-size:17px;line-height:1;padding:0 2px;flex:0 0 auto;margin-top:1px}
.exlr-ed{border:none;background:none;cursor:pointer;color:var(--mut);font-size:14px;line-height:1;padding:0 3px;flex:0 0 auto;margin-top:2px}
.exlr-ed:hover{color:var(--acc)}
.exlr-del:hover{color:var(--warn,#e06)}
.exmore{font-size:10.5px;font-weight:700;border:1px solid var(--line);color:var(--mut);background:var(--surface);border-radius:99px;padding:2px 8px;cursor:pointer;line-height:1.3}
.exrest{display:none;gap:4px;flex-wrap:wrap}
.exrest.on{display:inline-flex}
#exList.flist{max-height:min(620px,68vh)}
/* desktop: let the two lines collapse to one when there's room */
@media(min-width:900px){
 .exlr-main{flex-direction:row;align-items:center;gap:12px}
 .exlr-l1{flex:0 1 auto;flex-wrap:nowrap}
 .exlr-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
 .exlr-meta{margin-left:0}
 .exlr-mx{margin-left:auto;justify-content:flex-end}
}

/* ===== S7 · log-picker row meta ===== */
.ac div.acx{flex-wrap:wrap;gap:2px 10px}
.ac div.acx small{flex:1 1 100%;font-family:var(--body);font-size:10.5px}
.acx-ok{color:var(--ok);font-weight:800;margin-left:6px}
.acx-eq{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:0 5px;margin-right:6px;font:600 9.5px var(--body);letter-spacing:.3px;text-transform:uppercase;color:var(--mut);font-style:normal;vertical-align:1px}
.acx-m{display:inline-block;background:var(--accT08);border-radius:5px;padding:0 5px;margin-right:4px;font:600 9.5px var(--body);color:var(--ink);font-style:normal;vertical-align:1px}
/* ===== S8 · mini-seg selected state, now themable. Default = the exact former inline styling
   (Aurora / Prism unchanged); Eclipse dark joins the same repaint the audited 11 use. ===== */
.msegb{background:transparent;color:inherit}
.msegb.on{background:var(--acc);color:#fff}
html[data-skin="eclipse"][data-theme="dark"] .msegb.on{background:#3A4553;color:#FFFFFF}

/* ===== S9 · program builder consolidation ===== */
.psarrow{display:inline-block;width:14px;color:var(--mut);font-size:11px}
.psesshead{cursor:pointer;user-select:none;-webkit-user-select:none}
#progSessList{max-height:min(640px,70vh)}

/* ===== S10 · Month view ===== */
html.cal-lock,html.cal-lock body{overflow:hidden}
.calov{position:fixed;inset:0;z-index:420;display:none;align-items:flex-start;justify-content:center;background:rgba(8,11,15,.52);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:max(16px,env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom));opacity:0;transition:opacity .22s ease;overflow-y:auto}
.calov.on{opacity:1}
.calpanel{width:min(880px,100%);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;box-shadow:0 24px 70px rgba(0,0,0,.35);transform:translateY(16px) scale(.975);transition:transform .28s cubic-bezier(.18,.9,.24,1.04)}
.calov.on .calpanel{transform:none}
.calhdr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;text-align:center;font-size:10px;letter-spacing:.12em;color:var(--mut)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calgrid.sL{animation:calSL .26s ease}.calgrid.sR{animation:calSR .26s ease}
@keyframes calSL{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes calSR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.calcell{position:relative;aspect-ratio:1/1.05;border:1px solid transparent;border-radius:11px;background:var(--soft);display:flex;flex-direction:column;align-items:center;padding-top:7px;gap:3px;cursor:pointer;font:inherit;color:inherit;transition:transform .13s ease,background .16s ease,border-color .16s ease}
.calcell:active{transform:scale(.93)}
.calcell.off{background:transparent;cursor:default;pointer-events:none}
.calcell .cd{font-size:12.5px;font-weight:600;line-height:1;min-width:21px;min-height:21px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1.4px solid transparent}
.calcell.tdy{border-color:var(--acc)}
.calcell.sel{background:var(--accT08,var(--soft));border-color:var(--acc)}
.calcell.miss .cd{border-color:var(--mut);color:var(--mut)}
.calpop{animation:calPop .2s ease}
@keyframes calPop{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}
.calm{display:flex;gap:3px;min-height:6px;align-items:center}
.cm{display:inline-block;width:5.5px;height:5.5px;border-radius:999px}
.cm.t{background:var(--acc)}.cm.f{background:var(--ok)}.cm.w{background:var(--mut)}
.cm.s{background:transparent;border:1.3px solid var(--acc);width:4.6px;height:4.6px}
.calstar{position:absolute;top:3px;right:5px;font-size:9px;color:var(--gold)}
.calspan{position:absolute;left:16%;right:16%;bottom:4px;height:2.5px;border-radius:2px;background:var(--acc);opacity:.32}
.caldet{border-top:1px dashed var(--line);margin-top:8px;padding-top:9px;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .22s ease}
.caldet.on{max-height:360px;opacity:1;overflow-y:auto}
@media (prefers-reduced-motion:reduce){.calov,.calpanel,.calcell,.caldet{transition:none!important}.calgrid.sL,.calgrid.sR,.calpop{animation:none!important}}


/* ═══ v2026.07.18.0001–0002 · TOP-RIGHT AI CHIP · ⋯ MENU · CLEAR-GLASS TAB BAR · AI OVERLAY · THEME-ROBUST OVERLAYS ═══ */

/* AI chip — the wordmark's light "Path" weight (see .wm2) wearing a gradient hairline ring */
.aibtn{position:relative;border:0;cursor:pointer;font:300 14px/1 var(--disp);letter-spacing:.26em;text-indent:.26em;color:var(--ink);background:var(--glass);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);padding:9px 14px;border-radius:999px;box-shadow:0 4px 14px -7px var(--accGlow);transition:transform .18s ease,box-shadow .25s ease;flex:none;-webkit-tap-highlight-color:transparent}
.aibtn:before{content:"";position:absolute;inset:0;border-radius:999px;padding:1.2px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.6;transition:opacity .25s ease;pointer-events:none}
.aibtn:hover:before,.aibtn:active:before{opacity:1}
.aibtn:hover{box-shadow:0 6px 20px -7px var(--accGlow)}
.aibtn:active{transform:scale(.93)}

/* Tab bar glass ×3 — one-third the tint, deeper blur + saturation so what's behind stays legible but visible (blur does the readability work, the tint keeps icon contrast) */
.tabbar{background:color-mix(in srgb,var(--glass2) 34%,transparent);-webkit-backdrop-filter:saturate(200%) blur(30px);backdrop-filter:saturate(200%) blur(30px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),0 14px 36px -8px rgba(20,40,80,.30)}
html[data-theme="dark"] .tabbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 36px -8px rgba(0,0,0,.5)}
@supports not (background:color-mix(in srgb,#000 5%,transparent)){.tabbar{background:var(--glass2)}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tabbar{background:var(--surface)}}

/* AI overlay — a glass sheet ABOVE the app: rise + settle, backdrop frosts in, one sheen pass */
.ailayer{position:fixed;inset:0;z-index:300;display:none;align-items:stretch;justify-content:center;background:rgba(6,10,16,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease;padding:max(10px,env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}
.ailayer.on{background:rgba(6,10,16,.44);-webkit-backdrop-filter:saturate(130%) blur(10px);backdrop-filter:saturate(130%) blur(10px)}
.aiwin{position:relative;width:min(860px,100%);margin:auto 0;max-height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--bord);border-radius:24px;box-shadow:0 30px 80px -20px rgba(4,8,16,.6),inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden;transform:translateY(46px) scale(.955);opacity:0;transition:transform .46s cubic-bezier(.32,.72,0,1),opacity .32s ease}
.ailayer.on .aiwin{transform:none;opacity:1}
.aiwin>*{position:relative;z-index:2}
.aiwin:before{content:"";position:absolute;top:0;left:0;right:0;height:130px;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.15) 47%,transparent 62%);transform:translateX(-120%);pointer-events:none;z-index:1}
.ailayer.on .aiwin:before{animation:aisheen 1.15s .16s cubic-bezier(.4,.1,.3,1) both}
@keyframes aisheen{to{transform:translateX(115%)}}
.aihead{display:flex;align-items:baseline;gap:9px;padding:15px 16px 12px;border-bottom:1px solid var(--line);flex:none}
.aiwm{font:300 21px/1 var(--disp);letter-spacing:.3em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aisub{font:600 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.aix{margin-left:auto;align-self:center;border:0;background:var(--soft);color:var(--ink);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .15s ease,background-color .15s ease}
.aix:active{transform:scale(.9)}
.aibody{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 14px calc(18px + env(safe-area-inset-bottom))}
.aibody .view{display:block;animation:none}
html.ai-lock,html.ai-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.ailayer,.aiwin{transition:none}.ailayer.on .aiwin:before{animation:none}.aibtn,.aix{transition:none}}
/* AI overlay: extra breathing room once the window is genuinely wide */
/* Desktop AI overlay. MUST stay after the base .aiwin/.aihead/.aibody rules above —
   same specificity, so source order decides. Sizing here was previously in the
   min-width:1024px block near the top of this file and was silently overridden. */
@media(min-width:1024px){
 .aiwin{width:min(2360px,96vw);max-height:94vh}
 .aihead{padding:18px 22px 14px}
 .aibody{padding:20px 22px calc(22px + env(safe-area-inset-bottom))}
 .ai-prov{grid-column:span 4}.ai-dev{grid-column:span 8}
 .ai-act{grid-column:span 4}.ai-resp{grid-column:span 8}.ai-hist{grid-column:span 12}
 .ai-desc{grid-column:span 5}.ai-rev{grid-column:span 7}
}
/* Wide desktop: everything on one row so there is nothing to scroll past */
@media(min-width:1500px){
 .aiwin{max-height:96vh}
 .aihead{padding:20px 28px 16px}
 .aibody{padding:24px 28px calc(26px + env(safe-area-inset-bottom))}
 .ai-prov{grid-column:span 3}.ai-dev{grid-column:span 9}
 .ai-act{grid-column:span 3}.ai-resp{grid-column:span 6}.ai-hist{grid-column:span 3}
 .ai-desc{grid-column:span 4}.ai-rev{grid-column:span 8}
 .ai-resp .aiout{min-height:60vh}
 .ai-rev #aiPropBox{min-height:60vh}
 .ai-dev .aiprompt{min-height:58vh}
 .ailogta{min-height:26vh}
}
/* long answers scroll inside their card instead of stretching the window */
@media(min-width:1024px){.aiout{max-height:70vh;overflow:auto}#aiPropBox{max-height:70vh;overflow:auto}}
.aifields{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:10px}
.aifields>div{min-width:0}
.aifields .aifull{grid-column:1/-1}
.aifields select,.aifields input{width:100%}
.aikeyst{font-size:12.5px;line-height:1.45}
.aiatt{gap:8px;flex-wrap:wrap;margin-top:10px}
.aiatt .btn{cursor:pointer}
.aithumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.aithumb{position:relative;display:flex;align-items:center;gap:8px;padding:6px 30px 6px 6px;border:1px solid var(--line2);border-radius:12px;background:var(--glass2);max-width:100%}
.aithumb img{width:40px;height:40px;object-fit:cover;border-radius:8px;flex:none}
.aithumb .aithau{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--line2);font-style:normal;font-size:17px;flex:none}
.aithumb b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aithumb small{color:var(--mut);font-size:11px;flex:none}
.aithumb .x{position:absolute;top:3px;right:4px}
.aithumb img{cursor:zoom-in}
.aiaud{width:100%;max-width:320px;height:34px;margin-top:6px}
.aizoom{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.aizoom img{max-width:96%;max-height:88vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.aizx{position:absolute;top:16px;right:18px;color:#fff;font-size:13px;font-weight:600;opacity:.85}
/* developer prompt viewer */
.aiprompt{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;background:var(--glass2);border:1px solid var(--line);border-radius:14px;padding:13px;margin-top:10px;max-height:62vh;overflow:auto}
/* inline editor inside a proposed row */
.apr{position:relative;padding-right:64px}
.aprE{position:absolute;top:8px;right:0}
.aiedit{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.aiE{display:flex;flex-direction:column;gap:3px;min-width:0}
.aiE>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.aiE input,.aiE select{width:100%;padding:7px 9px;font-size:13px}
/* conversation */
.aimode{margin:2px 0 10px}
.aithread{display:flex;flex-direction:column;gap:8px;margin:10px 0;max-height:44vh;overflow:auto;padding-right:2px}
.aimsg{white-space:pre-wrap;font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:14px;max-width:88%}
.aimsg.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:5px}
.aimsg.ai{align-self:flex-start;background:var(--glass2);border:1px solid var(--line);border-bottom-left-radius:5px}
.aichatin{min-height:64px}
@media(min-width:1500px){.aithread{max-height:38vh}}
.aitabs{gap:8px;margin-bottom:14px}
.aitop{color:var(--mut);font-size:11px;line-height:1.45;letter-spacing:.01em;margin-bottom:9px}
@media(min-width:1024px){.aihead{padding:11px 22px 9px}}
@media(min-width:1500px){.aihead{padding:12px 28px 10px}}
.aihint{color:var(--mut);font-size:12.5px;line-height:1.5;margin-top:7px}
.ailogta{width:100%;resize:vertical;min-height:120px;line-height:1.5}
/* Log-with-AI proposal rows */
.apr{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line2);cursor:pointer}
.apr:last-of-type{border-bottom:0}
.apr>input{margin-top:4px;flex:none}
.apr-b{min-width:0;font-size:13.5px}
.apr-b small{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.tag.aprnew{color:var(--ok)}


/* ═══ v2026.07.18.0003 · CUSTOM-EX EDIT + YOURS FILTER · POOL UNDO TOAST · MORE-COLLAPSE · PROG MIN ROW · POP CHEVRONS ═══ */
/* [6] "More" toggle chrome */
.er-more{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;max-width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:8px 13px;font:600 12.5px var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.er-more:active{transform:scale(.97)}
.er-mchev{display:inline-block;transition:transform .2s ease;color:var(--mut);font-size:11px;flex:none}
.er-more[aria-expanded="true"] .er-mchev{transform:rotate(90deg)}
.er-msum{color:var(--mut);font-weight:500;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.er-adv{display:none;gap:6px;flex-wrap:wrap}
.er-adv.on{display:flex}
.er-donerow{display:flex;justify-content:flex-end}
@media(min-width:900px){
 .er-more{display:none}
 .er-adv{display:flex !important}
 .er-donerow{justify-content:flex-start}
}

/* [3] undo toast — fixed dark chip, legible in every theme */
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:rgba(22,28,38,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border-radius:13px;padding:11px 8px 11px 15px;display:flex;align-items:center;gap:10px;font:600 13px var(--body);box-shadow:0 14px 38px -8px rgba(0,0,0,.55);z-index:360;opacity:0;pointer-events:none;max-width:min(460px,92vw);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.3,1)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-act{flex:none;border:0;background:rgba(255,255,255,.12);color:#8CD0FF;font:700 12.5px var(--body);cursor:pointer;padding:6px 12px;border-radius:9px}
.toast-act:active{transform:scale(.94)}
@media(min-width:1024px){.toast{bottom:24px}}
@media (prefers-reduced-motion:reduce){.toast,.er-mchev,.sec .chev,.ct-chev{transition:none}}

/* ══════════ AI · mode toggle, waiting states, history ══════════
   Every colour here routes through a token, never a literal, so all three skins and dark mode
   inherit correctly — the one time an accent was hardcoded inline, Eclipse rendered it at
   1.5:1 contrast and nobody could see which side was selected. Placed at the end of the file
   on purpose: same-specificity rules earlier in the cascade would otherwise win. */
.aiseg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft2);border:1px solid var(--line);border-radius:16px;padding:5px;margin:2px 0 12px}
.aiseg button{border:1px solid transparent;background:transparent;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--mut);transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease}
.aiseg button b{font:700 14.5px var(--disp);letter-spacing:.1px}
.aiseg button small{font:500 11px var(--body);opacity:.85;line-height:1.25}
.aiseg button:active{transform:scale(.985)}
.aiseg button.on{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 6px 18px -6px var(--accGlow)}
.aiseg button.on small{opacity:.92}
.aiseg button:not(.on):hover{background:var(--glass2);color:var(--ink)}
@media(max-width:380px){.aiseg button small{display:none}}

.aiph{display:flex;align-items:center;gap:10px;margin:10px 0 2px;min-height:26px;font:600 12.5px var(--body);color:var(--mut)}
.aiplab{opacity:.95}
.aipdots{display:inline-flex;gap:4px;flex:none}
.aipdots i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:aipd 1.05s ease-in-out infinite}
.aipdots i:nth-child(2){animation-delay:.16s}
.aipdots i:nth-child(3){animation-delay:.32s}
@keyframes aipd{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.aipbars{display:inline-flex;align-items:flex-end;gap:3px;height:20px;flex:none}
.aipbars i{width:4px;height:6px;border-radius:2px;background:var(--bad);animation:aipb .9s ease-in-out infinite}
.aipbars i:nth-child(2){animation-delay:.12s}
.aipbars i:nth-child(3){animation-delay:.24s}
.aipbars i:nth-child(4){animation-delay:.36s}
.aipbars i:nth-child(5){animation-delay:.48s}
@keyframes aipb{0%,100%{height:6px;opacity:.55}50%{height:20px;opacity:1}}
.aipscan{position:relative;width:34px;height:22px;border-radius:5px;border:1.5px solid var(--acc);overflow:hidden;flex:none;background:var(--accT07)}
.aipscan:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--acc);box-shadow:0 0 8px var(--accGlow);animation:aips 1.5s ease-in-out infinite}
@keyframes aips{0%{top:2px}50%{top:16px}100%{top:2px}}
@media (prefers-reduced-motion:reduce){
 .aipdots i,.aipbars i,.aipscan:after{animation:none}
 .aipdots i{opacity:.8}.aipbars i{height:13px;opacity:.8}
 .aiseg button{transition:none}
}

.aicont{font:600 12px var(--body);color:var(--mut);background:var(--accT07);border:1px solid var(--line);border-radius:11px;padding:8px 11px;margin:2px 0 8px}
.aihitem{border:1px solid var(--line);border-radius:14px;margin-bottom:8px;background:var(--glass2);overflow:hidden}
.aihitem.open{border-color:var(--acc)}
.aihhead{width:100%;display:flex;align-items:flex-start;gap:9px;background:transparent;border:0;cursor:pointer;padding:11px 12px;text-align:left;color:var(--ink)}
.aihchev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--soft2);color:var(--mut);font-size:11px;transition:transform .18s ease}
.aihitem.open .aihchev{transform:rotate(90deg);background:var(--acc);color:#fff}
.aihmain{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.aihmain b{font:700 13px var(--disp)}
.aihmain small{flex-basis:100%;font:500 11.5px var(--body);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aihwhen{flex:none;font:600 10.5px var(--body);color:var(--mut);opacity:.8;padding-top:2px}
.aihwarn{background:var(--warnSoft);color:var(--warn)}
.aihthread{display:flex;flex-direction:column;gap:8px;padding:0 12px 4px;max-height:52vh;overflow:auto}
.aihstale{margin:0 12px;font:600 11.5px var(--body);color:var(--warn);background:var(--warnSoft);border-radius:10px;padding:8px 10px}
.aihitem .aiatt{padding:0 12px 12px}
@media (prefers-reduced-motion:reduce){.aihchev{transition:none}}

.aprwarn{background:var(--warnSoft);color:var(--warn)}
.aprneed{background:var(--badSoft);color:var(--bad)}
.aineed{color:var(--bad)}
.aiE.aiEneed input{border-color:var(--bad)}
@media(max-width:520px){.aihwhen{display:none}}

/* ══════════ AI · info discs, assumptions, correction box, diagnostics ══════════
   Same rule as above: tokens only, and appended so nothing earlier in the cascade beats it. */
.aikick{display:flex;align-items:center;gap:7px}
.aiI{flex:none;width:19px;height:19px;border-radius:50%;border:1px solid var(--line);background:var(--soft2);color:var(--mut);font:700 11px var(--body);line-height:1;cursor:pointer;padding:0;transition:background .16s ease,color .16s ease}
.aiI:hover{color:var(--ink)}
.aiI.on{background:var(--acc);border-color:var(--acc);color:#fff}
.aitip{margin:-2px 0 10px}
.aigoes{font:700 12.5px var(--disp);color:var(--acc);margin:0 0 8px}
.aiassume{border:1px solid var(--line);background:var(--accT05);border-radius:13px;padding:10px 12px;margin-bottom:10px}
.aiassume b{font:700 11.5px var(--body);letter-spacing:.4px;text-transform:uppercase;color:var(--mut)}
.aiassume ul{margin:6px 0 0;padding-left:17px}
.aiassume li{font-size:12.8px;line-height:1.45;margin-bottom:3px}
.aifixed{font:600 11.5px var(--body);color:var(--ok);background:var(--okSoft);border-radius:10px;padding:7px 10px;margin-bottom:10px}
.aifix{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.aifixin{flex:1;min-width:0}
.aisave{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--body);color:var(--mut);cursor:pointer}
.aidiag{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:600 12.5px var(--body);margin-top:8px}
.aidiag.ok{border-color:var(--ok);background:var(--okSoft);color:var(--ok)}
.aidiag.bad{border-color:var(--bad);background:var(--badSoft);color:var(--bad)}
.aidiagerr,.aidiags{margin-top:5px;font-weight:500;line-height:1.45;word-break:break-word}
.aidiags{opacity:.85;font-style:italic}
.aidiagt{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.aidiagt div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font:500 11.5px var(--body);color:var(--mut);border-bottom:1px dashed var(--line2);padding-bottom:4px}
.aidiagt b{font-weight:700;color:var(--ink)}
.aidiagt i{flex-basis:100%;font-style:normal;color:var(--bad);word-break:break-word}
.aiout.aiouterr{color:var(--bad)}

/* ══════════ AI · a window that stays one size, and puts itself away ══════════
   It used to grow and shrink with whatever card was showing, which made every tab change feel
   like a jolt. Fixed footprint, scroll inside. The header is thinner because the only control
   in it is minimise — and minimise is what it does: the panel flies back into the AI button it
   came from, so it reads as put away rather than destroyed. */
.aiwin{width:min(1180px,100%);height:min(880px,100%);max-height:100%;margin:auto 0}
@media(max-width:860px){.aiwin{height:100%}}
.aihead{padding:9px 14px 8px}
.aihead .aiwm{font-size:15px}
.aihead .aisub{font-size:10.5px;letter-spacing:1.4px}
.aix{width:28px;height:28px}
.aix .ic{width:17px;height:17px}
.aiwin.flying{transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .34s ease .06s}
@keyframes aigotback{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}}
.aibtn.gotback{animation:aigotback .5s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){.aiwin.flying{transition:none}.aibtn.gotback{animation:none}}
/* the pane scrolls; the tab strip should not scroll away with it */
.aitabs{position:sticky;top:calc(-16px - env(safe-area-inset-top));z-index:6;background:var(--surface);padding:8px 0 10px;margin:-4px 0 0}

/* ══════════ AI · window sizing, header, minimise ══════════
   Appended last on purpose: the header padding is set in three earlier media queries and a
   same-specificity rule only wins if it comes after them.

   SIZE. A fixed 1180px looked right on a 14" laptop and marooned on a 32" monitor, so the
   footprint is now viewport-relative with a ceiling — it scales with the screen but never
   sprawls into an unreadable line length. It is still stable *during* use, which was the
   original complaint: it tracks the window, not the content.
   HEADER. Collapsed to the height of the wordmark itself.
   MINIMISE. A chevron points somewhere, and wherever it pointed was wrong — the button it
   flies to sits top-right. A bar is the universal minimise mark and has no direction at all. */
.aiwin{width:min(1720px,96vw);height:min(1180px,94vh);max-height:100%;margin:auto 0}
.aihead{display:flex;align-items:center;gap:8px;padding:7px 14px;min-height:0}
.aiwm{font-size:16px;letter-spacing:.26em}
.aisub{font-size:9.5px;letter-spacing:.14em;line-height:1}
.aix{width:20px;height:20px;border-radius:6px;background:transparent;color:var(--mut)}
.aix:hover{background:var(--soft);color:var(--ink)}
.aixbar{display:block;width:11px;height:2px;border-radius:2px;background:currentColor}
@media(min-width:1024px){.aihead{padding:7px 18px}}
@media(min-width:1500px){.aihead{padding:8px 22px}}

/* Wide screens: stop stretching two cards across a metre of glass and give the panes that
   actually hold content the room. Settings becomes one row of three; the coach response gets
   twice the width of its controls; the review column gets more than the input beside it. */
@media(min-width:1400px){
 .bento>.ai-prov,.bento>.ai-beh,.bento>.ai-dev{grid-column:span 4}
 .bento>.ai-act{grid-column:span 4}
 .bento>.ai-resp{grid-column:span 8}
 .bento>.ai-desc{grid-column:span 5}
 .bento>.ai-rev{grid-column:span 7}
 .aibody{padding:18px 22px calc(20px + env(safe-area-inset-bottom))}
}
@media(min-width:1900px){
 .bento>.ai-desc{grid-column:span 4}
 .bento>.ai-rev{grid-column:span 8}
}

/* Phone held sideways: almost no height, plenty of width. Full-bleed, tighter chrome, and
   two columns so the input and its result sit next to each other instead of stacking off-screen. */
@media(orientation:landscape) and (max-height:560px){
 .ailayer{padding:0}
 .aiwin{width:100%;height:100%;border-radius:0;border-left:0;border-right:0}
 .aihead{padding:5px 12px}
 .aiwm{font-size:14px}
 .aibody{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
 .bento{gap:10px}
 .bento{grid-template-columns:repeat(12,1fr)}
 .s2,.s3,.s4{grid-column:span 6}.s6{grid-column:span 12}
 .card{padding:12px}
 .aitabs{padding:4px 0 6px}
 .ailogta{min-height:88px}
 .aihthread{max-height:34vh}
}

/* ══════════ AI · the conversation ══════════
   Rebuilt to the shape every chat app converged on, because the reasons are real: a transcript
   that scrolls on its own, a composer docked beneath it that never moves, and a send target big
   enough for a thumb. The card takes the full pane in conversation mode — a review panel sitting
   beside a chat you are reading is stealing half the width from the thing in use. */
.ai-chat{display:flex;flex-direction:column;min-height:0}
.aichatlog{flex:1;min-height:260px;max-height:min(58vh,720px);overflow-y:auto;overscroll-behavior:contain;
 display:flex;flex-direction:column;gap:10px;padding:4px 2px 8px;scroll-behavior:smooth}
@media(min-width:1400px){.aichatlog{max-height:min(64vh,880px)}}
.aichatlog .aimsg{max-width:min(76ch,88%)}
.aichatlog .aimsg.me{align-self:flex-end}
.aichatlog .aimsg.ai{align-self:flex-start}
.aicomp{display:flex;gap:8px;align-items:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.aichatin{flex:1;min-width:0;min-height:46px;max-height:180px;resize:vertical;
 background:var(--soft2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
 color:var(--ink);font:500 14px/1.45 var(--body)}
.aichatin:focus{outline:none;border-color:var(--acc)}
.aisend{flex:none;min-width:84px;min-height:46px;border-radius:14px}
.aichatbar{margin-top:9px;align-items:center;flex-wrap:wrap;gap:8px}
.aisaved{font:600 11.5px var(--body);color:var(--ok)}
.aihbrief{margin:8px 12px 0;border:1px solid var(--line);border-radius:12px;background:var(--soft2);padding:10px 12px}
.aihbrief b{display:block;font:700 11px var(--body);letter-spacing:.4px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.aihbrief pre{margin:0;max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word;
 font:500 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.aichatlog{scroll-behavior:auto}}
@media(orientation:landscape) and (max-height:560px){
 .aichatlog{max-height:38vh;min-height:120px}
 .aichatin{min-height:40px}.aisend{min-height:40px}
}

/* Hormone-status row on the onboarding experience step. Tokens only -- no literal
   colours, so all three skins and dark mode inherit correctly. */
.ob-pedlab{margin-top:14px}
.ob-pednote{margin-top:8px;font-size:.78rem;line-height:1.45;opacity:.72}
.opt-note{margin:10px 2px 2px;font-size:.78rem;line-height:1.45;opacity:.72}

/* ── Find-my-level: entry button, wizard, result ─────────────────────────────
   Tokens only. A literal colour here would look right in Eclipse and fail in
   Aurora/Prism, which is the exact bug that bit the accent toggles before. */
.kickrow{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin-bottom:10px}
.kickrow .kicker{margin-bottom:0}
/* ^ was flex-start + a 12px kicker margin: the pill button is taller than the kicker's single line,
   so on phones it hung down into the paragraph beneath (which was pulled up with a negative margin).
   Centred, wrap-tolerant, and the ROW owns the spacing — the button can never overlap what follows. */
.lvlbtn{display:inline-flex;align-items:center;gap:7px;flex:none;padding:7px 13px;border-radius:999px;
 border:1px solid transparent;background:var(--grad);color:#fff;font:600 12px/1 var(--body);
 letter-spacing:.2px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease,opacity .12s ease}
.lvlbtn:hover{transform:translateY(-1px)}
.lvlbtn:active{transform:translateY(0);opacity:.9}
.lvlbtn-i{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid currentColor;position:relative}
.lvlbtn-i:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
 background:currentColor;transform:translate(-50%,-50%)}
.lvlbtn.wide{display:flex;width:100%;justify-content:center;margin-top:14px;padding:12px 16px;font-size:13.5px}
.lvlbtn.wide small{opacity:.82;font-weight:500;margin-left:6px}

.lvl-eta{font:500 11.5px var(--body);color:var(--mut);letter-spacing:.3px;margin:-4px 0 14px}
.lvl-list{margin:4px 0 6px}
.lvl-list>div{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.lvl-list>div:last-child{border-bottom:0}
.lvl-lifts{display:grid;gap:9px;margin:6px 0 4px}
.lvl-lift{display:grid;grid-template-columns:1fr 78px 14px 78px;align-items:center;gap:8px}
.lvl-lift label{font:600 13px var(--body);color:var(--ink)}
.lvl-lift span{text-align:center;color:var(--mut);font-size:12px}
.lvl-lift input{width:100%;padding:9px 8px;text-align:center;border-radius:10px;
 border:1px solid var(--line);background:var(--glass);color:var(--ink);font:600 14px var(--body)}
.lvl-hint{font-size:12.2px;line-height:1.45;color:var(--mut);margin-top:12px}
.lvl-bfconf{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 4px}
.lvl-bfconf b{font:700 18px var(--body)}

.lvl-res{text-align:center;padding:6px 0 2px}
.lvl-badge{display:inline-block;padding:9px 18px;border-radius:999px;background:var(--grad);color:#fff;
 font:700 17px/1.2 var(--disp),var(--body);box-shadow:var(--shadow)}
.lvl-ped{margin-top:8px;font:600 12.5px var(--body);color:var(--mut);text-transform:uppercase;letter-spacing:.9px}
.lvl-conf{display:inline-block;margin-top:10px;padding:4px 11px;border-radius:999px;
 border:1px solid var(--line);font:600 11px var(--body);letter-spacing:.6px;text-transform:uppercase}
.lvl-conf.hi{color:var(--ok);border-color:var(--ok)}
.lvl-conf.mid{color:var(--gold);border-color:var(--gold)}
.lvl-conf.lo{color:var(--mut)}
.lvl-desc{margin-top:13px;font-size:13.4px;line-height:1.55;text-align:left}
.lvl-why,.lvl-changes{margin-top:20px}
.lvl-w{padding:9px 0;border-bottom:1px solid var(--line);font-size:12.9px;line-height:1.5;color:var(--ink)}
.lvl-w:last-child{border-bottom:0}
.lvl-changes .lvl-w{color:var(--mut)}

.lvl-recheck{margin:0 0 12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
 background:var(--glass);font-size:12.8px;line-height:1.5}
.lvl-rcbtns{display:flex;gap:8px;margin-top:10px}

/* ── Deep-dive sheet: fixed frame, scrolling middle, no repaint flash ─────────
   TWO BUGS FIXED HERE, both the same root cause.
   1) .sheet carries `animation:pop .4s` and the wizard rewrites innerHTML on every
      tap, so the entry animation replayed each time -- a fade-up from transparent
      INSIDE a backdrop-filter blur, which Safari repaints as a dark blink.
      The sheet is already on screen by then, so .noanim kills it after first paint.
   2) Hovering a button that does `transform:translateY(-1px)` inside that same
      backdrop-filter forces the blurred backdrop to re-composite -- the flash Sam
      saw just moving the mouse near Next. Brightness gives the same feedback
      without moving geometry, so nothing behind it needs re-blurring. */
.sheet.noanim{animation:none}
.sheet.ob.lvl{animation:lvlin .26s ease both}
.sheet.ob.lvl.noanim{animation:none}
@keyframes lvlin{from{opacity:0}to{opacity:1}}
.modal .ob-next:hover,.modal .btn:hover,.modal .lvlbtn:hover{transform:none;filter:brightness(1.06)}

/* one window size for every step, like the AI sheet: head and footer pinned,
   only the question scrolls, so tall steps stop resizing the whole dialog */
.sheet.ob.lvl{display:flex;flex-direction:column;height:min(680px,86vh);max-height:86vh;
 padding:18px 0 0;overflow:hidden}
.sheet.ob.lvl>.ob-top,.sheet.ob.lvl>.ob-prog,.sheet.ob.lvl>.lvl-eta{flex:none;margin-left:20px;margin-right:20px}
.lvl-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;padding:0 20px 6px}
.lvl-foot{flex:none;padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--bg)}
.lvl-foot .ob-foot{margin:0}
.sheet.ob.lvl .ob-bfgrid{grid-template-columns:repeat(3,1fr)}
.sheet.ob.lvl .ob-bf svg{max-height:104px;width:auto}
.lvl-bfconf svg{max-height:150px;width:auto}
@media(max-width:520px){.sheet.ob.lvl{height:min(640px,92vh);max-height:92vh}}

/* optional MM/YYYY on a lift, and the exact-percentage escape hatch on body fat */
.lvl-lift{grid-template-columns:1fr 68px 12px 62px 82px}
.lvl-when{width:100%;padding:9px 4px;text-align:center;border-radius:10px;border:1px solid var(--line);
 background:var(--glass);color:var(--ink);font:600 12px var(--body)}
.lvl-bfexact{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:12.8px;color:var(--mut)}
.lvl-bfexact label{flex:1}
.lvl-bfexact input{width:84px;padding:8px;text-align:center;border-radius:10px;border:1px solid var(--line);
 background:var(--glass);color:var(--ink);font:600 14px var(--body)}
@media(max-width:520px){.lvl-lift{grid-template-columns:1fr 60px 10px 56px;row-gap:4px}
 .lvl-when{grid-column:2 / -1}}

/* Lift rows: name + variant on top, numbers underneath. The old five-column grid squeezed
   MM/YYYY into a sliver and wrapped unevenly -- two clean rows beat one cramped one. */
.lvl-lift{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
.lvl-lift:last-child{border-bottom:0}
.lvl-lrow1{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.lvl-lrow1 label{font:600 13.5px var(--body);color:var(--ink);flex:none}
.lvl-lvar{flex:1;min-width:0;padding:6px 26px 6px 8px;border-radius:9px;border:1px solid var(--line);
 background-color:var(--glass);color:var(--mut);font:500 12px var(--body)}
/* ^ background-COLOR on purpose: the 'background' shorthand resets background-repeat to repeat and
   position to 0 0, while html[data-theme=dark] select re-wins the chevron image at higher specificity
   — the combination tiled chevrons across the whole select in dark mode. Longhand keeps the base
   select rule's single right-aligned arrow in both themes; the right padding clears it. */
.lvl-lrow2{display:grid;grid-template-columns:1fr 14px 1fr 1.25fr;align-items:center;gap:8px}
.lvl-lrow2 span{text-align:center;color:var(--mut);font-size:12px}
.lvl-lrow2 input{width:100%;padding:9px 6px;text-align:center;border-radius:10px;
 border:1px solid var(--line);background:var(--glass);color:var(--ink);font:600 14px var(--body)}
.lvl-lrow2 .lvl-when{font-size:12px}


/* ===== S14 · gold builder controls — label column, graceful wrapping, the gold-standard marker.
   .pseg = joined segment for short choices (never wraps mid-box; scrolls if it must).
   .pchips/.pchip = free-wrapping pills for long choice sets (Split, Focus) — wrapping is designed-in,
   not a broken seg. .pchip.goldstd carries the small gold star = the actual gold standard option. */
.pctl{display:grid;grid-template-columns:84px minmax(0,1fr);gap:5px 12px;align-items:center;margin:0 0 7px;font-size:12px}
.pctl-l{font:700 10.5px/1.35 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pctl-n{grid-column:2;font-size:10.5px;line-height:1.5;color:var(--mut)}
.pseg{display:flex;width:100%;border:1px solid var(--soft);border-radius:10px}
.pseg button{border:0;flex:1 1 0;padding:6px 12px;font-size:11.5px;cursor:pointer;white-space:nowrap;text-align:center}
.pseg button+button{border-left:1px solid var(--soft)}
.pchips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pchip{border:1px solid var(--soft);background:transparent;color:inherit;border-radius:999px;padding:6px 12px;font:500 11.5px/1 var(--body);cursor:pointer}
.pchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-skin="eclipse"][data-theme="dark"] .pchip.on{background:#3A4553;border-color:#3A4553;color:#FFFFFF}
.pchip.goldstd{border-color:var(--goldLine);color:var(--goldInk)}
.pchip.goldstd::before{content:"\2605";font-size:9px;margin-right:5px;color:var(--gold);vertical-align:1px}
.pchip.goldstd.on{background:var(--goldSoft);border-color:var(--goldLine);color:var(--goldInk)}
@media(max-width:560px){.pctl{grid-template-columns:1fr;gap:5px 12px}.pctl-n{grid-column:1}}

/* ---- Phases 1-3: picker scope chips / DEV chip / feedback sheet / portal (.dv*) ---- */
.acscope{display:flex;gap:4px;padding:7px 8px 5px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.ac .acscope button{flex:1;border:1px solid var(--line);background:transparent;color:var(--mut);font:600 10.5px/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;padding:5px 4px;border-radius:8px;cursor:pointer;transition:.15s}
.ac .acscope button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.devbtn{font-size:11px;padding:8px 12px;letter-spacing:.22em;text-indent:.22em}
#fbModal .fbcard,#shModal .fbcard{max-width:520px;width:100%;margin:8vh auto 24px}
@media(max-width:560px){#fbModal .fbcard,#shModal .fbcard{margin-top:4vh}}
/* portal layout (dev.html only; cards/buttons/inputs reuse the app's base classes) */
.dvmain{min-height:100vh}
.dvwrap{width:100%;max-width:1080px;margin:0 auto;padding:18px 20px 60px}
.dvhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dvtabs{display:flex;gap:6px;margin:10px 0 14px}
.dvtabs button{border:1px solid var(--line);background:transparent;color:var(--mut);font:600 12px/1 var(--disp);letter-spacing:.05em;padding:8px 14px;border-radius:999px;cursor:pointer}
.dvtabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.dvkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.dvkpi{padding:12px 14px}
.dvkpi b{display:block;font:700 24px/1.1 var(--disp);margin-top:4px}
.dvchart svg{display:block;width:100%;height:auto}
.dvbar{display:grid;grid-template-columns:150px 1fr 52px;gap:8px;align-items:center;margin:5px 0;font-size:12.5px}
.dvbar i{display:block;height:9px;border-radius:5px;background:var(--acc);min-width:2px}
.dvbar small{text-align:right;color:var(--mut)}
.dvfb{border-top:1px solid var(--line);padding:10px 2px}
.dvfb:first-of-type{border-top:0}
.dvfb .msg{white-space:pre-wrap;margin:6px 0;font-size:13.5px}
.dvpill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.dvrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dvrow select{width:auto;min-width:110px;padding:7px 10px}
.dvnote{font-size:11.5px;color:var(--mut)}
@media(max-width:640px){.dvbar{grid-template-columns:110px 1fr 46px}}

/* ---- Phase 4-5: portal flag map + community queue ---- */
.dvcode{display:inline-block;font:600 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin:2px 3px 2px 0;color:var(--mut)}
.dvcode.hot{border-color:var(--acc);color:var(--acc)}
.flmap svg{display:block;width:100%;height:auto}
.flmap text{font:600 11px var(--disp);fill:currentColor}
.flview{display:flex;gap:6px}
.flview button{border:1px solid var(--line);background:transparent;color:var(--mut);font:600 11px/1 var(--disp);letter-spacing:.05em;padding:6px 11px;border-radius:999px;cursor:pointer}
.flview button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.flrow{border-top:1px solid var(--line);padding:12px 2px}
.flrow:first-of-type{border-top:0}
.flrow .seg{max-width:200px}
.floff{opacity:.55}
.dvjson{font:500 11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;background:var(--soft2,rgba(127,127,127,.08));border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:6px}

/* Shared add-form panel — one master style for the Food + Exercise "add" forms; `html .card.addpanel` (0,2,1) wins over html[data-theme] .card in every skin. Tokens keep it correct in light & dark. */
html .card.addpanel{background:var(--soft2);border:1px dashed var(--line)}

/* ============ BODY-WEIGHT CHART ============
   Appended at the end deliberately: these are new class names, so nothing here overrides
   an earlier rule, and a later same-specificity rule cannot silently beat them.
   Point colours are SKIN-NEUTRAL on purpose - like the other dashboard data colours they
   must read the same in Eclipse, Aurora and Prism, because the colour carries meaning
   (imported vs logged), not decoration. Shape carries it too, so the distinction survives
   colour-blindness and greyscale screenshots. */
.wtcard .kicker{margin-bottom:10px}
.wtstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.wtstat{background:var(--soft2);border-radius:12px;padding:9px 10px;min-width:0}
.wtsl{font:600 10.5px var(--body);color:var(--mut);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtsv{font:700 17px var(--disp);color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtsv i{font-style:normal;font-size:11px;font-weight:600;color:var(--mut)}
.wtok{color:var(--ok)}.wtwarn{color:var(--warn)}.wtbad{color:var(--bad)}
.wtread{font:600 12.5px var(--body);color:var(--ink);min-height:20px;margin-bottom:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.wtread .mut{font-weight:600}
.wtbadge{margin-left:2px}
.wtwrap{width:100%;touch-action:pan-y;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.wtwrap svg{display:block;width:100%;height:auto}
.wtwrap .empty{padding:22px 6px}
.wtchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.wtchips .chip{cursor:pointer;padding:5px 11px;min-width:34px;justify-content:center}
.wtsp{flex:1 1 auto}
.wtlegend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font:600 11px var(--body);color:var(--mut)}
.wtk{width:9px;height:9px;border-radius:2px;display:inline-block;flex:0 0 auto}
.wtk:not(:first-child){margin-left:8px}
.wtklog{border-radius:50%;background:#2A78D6}
.wtkimp{background:#EB6834}
.wtkline{width:15px;height:2.5px;border-radius:2px;background:var(--grad)}
.wtfoot{margin-top:9px;font-size:11.5px;line-height:1.55;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
circle.wtlog{fill:#2A78D6;opacity:.85}
rect.wtimp{fill:#EB6834;opacity:.9}
.wtsheet{max-width:760px}
.wtsheet .wtwrap{cursor:crosshair}

/* ============ PROVENANCE MARKERS ============
   Same skin-neutral import colour as the body-weight chart, and always paired with a shape
   change - never colour alone, so the distinction survives greyscale and colour-blindness. */
rect.strimp{fill:#EB6834;opacity:.95}
.strimpn{display:inline-flex;align-items:center;gap:4px;margin-left:9px;font-size:11px;color:var(--mut);white-space:nowrap}
.strimpn i{width:7px;height:7px;background:#EB6834;border-radius:1px;display:inline-block}
.cm.t.imp{background:#EB6834}
.provcard{border-left:3px solid #EB6834}
.provcard .kicker{margin-bottom:6px}

/* ============ IMPORT REVIEW ============
   Appended after the chart block, all new class names, so nothing above is overridden. */
.impdiv{height:1px;background:var(--line);margin:14px 0 12px}
.impbatch{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.impbrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft2);border-radius:10px;padding:8px 10px}
.impbrow span{display:flex;flex-direction:column;min-width:0}
.impbrow b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impbrow small{font-size:10.5px;color:var(--mut)}
.impsheet{max-width:620px}
/* ---- Excel export chooser ---- */
.xlsheet{max-width:560px}
.xlsec{font:700 10.5px/1 var(--disp);letter-spacing:.10em;text-transform:uppercase;color:var(--mut);margin:0 0 9px}
.xlchips{display:flex;flex-wrap:wrap;gap:7px}
.xlchip{border:1px solid var(--line);background:transparent;color:var(--mut);font:600 12px/1 var(--body);padding:8px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.xlchip:hover{border-color:var(--acc);color:var(--ink)}
.xlchip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.xlrows{display:flex;flex-direction:column;gap:7px}
.xlrow{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;cursor:pointer;transition:border-color .15s,background .15s}
.xlrow.on{border-color:var(--acc);background:var(--accT08)}
.xlrow.fixed{cursor:default;opacity:.9;justify-content:space-between;align-items:center}
.xlrow input{width:auto;margin:2px 0 0;flex:none}
.xlrow span{display:block;min-width:0}
.xlrow b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.xlrow small{display:block;font-size:11.5px;line-height:1.5;color:var(--mut);margin-top:2px}
.xlrow i{font:600 10px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-style:normal;flex:none}
.xlrecv{margin-top:16px;border:1px solid var(--line);border-radius:15px;padding:13px 14px;background:var(--soft2)}
.xlrh{font:700 10px/1 var(--disp);letter-spacing:.10em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.xlrg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xlrg span{display:block;text-align:center}
.xlrg b{display:block;font:700 19px/1.1 var(--disp);color:var(--ink)}
.xlrg small{display:block;font-size:10.5px;color:var(--mut);margin-top:3px}
.xlrf{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut);text-align:center}
@media(max-width:420px){.xlrg{grid-template-columns:repeat(2,1fr)}}
.impgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-bottom:12px}
.impstat{background:var(--soft2);border-radius:12px;padding:10px 11px}
.impflag{background:var(--soft2);border-left:3px solid var(--acc);border-radius:10px;padding:10px 12px;margin-bottom:9px;font-size:12.5px;line-height:1.55}
.impflag.warn{border-left-color:var(--warn)}
.impflag b{display:block;margin-bottom:3px}
.impflag>div{color:var(--mut)}
.impsm{margin-top:7px;font-size:11.5px;color:var(--mut);font-family:var(--mono)}
.impbad{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11.5px}
.impbad code{font:600 11px var(--mono);background:var(--warnSoft);color:var(--warn);border-radius:5px;padding:2px 6px}
.impmap{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.impmn{flex:1 1 40%;min-width:0;display:flex;flex-direction:column}
.impmn b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impmn small{font-size:10.5px;color:var(--mut)}
.impmp{flex:1 1 55%;position:relative;display:flex;align-items:center;gap:5px}
.impmp input{width:100%;font-size:12.5px}
.impmap.on .impmp input{border-color:var(--ok);font-weight:600}
.impmap .x{flex:0 0 auto}
@media(max-width:520px){
 .impmap{flex-direction:column;align-items:stretch;gap:5px}
 .impmn b{white-space:normal}
}

@media(max-width:520px){
 .wtstats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wtsv{font-size:16px}
 .wtread{font-size:12px}
}

/* ===== COMPACT CHROME: one header band, one date block, one-line sub-tabs =====
   The AI / page-menu buttons used to own a whole row above every title. The band is now
   zero-height and floats over the top-right corner, which is how Settings always looked -
   so every screen opens with its title on the first line and gains ~42px of usable page. */
.mtop{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;padding:0;height:0;min-height:0;position:relative;z-index:6;pointer-events:none}
.mtop>*{pointer-events:auto}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ph-t{flex:1 1 220px;padding-right:var(--mtopw,0px)}
.ph-t h1{margin:0;overflow-wrap:break-word}
.ph-sub{font-size:12.5px;line-height:1.45;margin-top:3px}
.ph-r{flex:0 1 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:var(--mtopw,0px)}

/* One date object: controls, week strip and (on Log) the day's target line, in one card */
.datebar{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:6px;margin:0 0 12px}
.dbtop{display:flex;align-items:center;gap:4px;min-width:0}
.dbsp{flex:1 1 auto}
.dbnavb{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:1px solid var(--soft);background:var(--surface);color:var(--ink);border-radius:10px;font:600 11.5px/1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dbnavb:active{transform:scale(.94)}
.dbtoday.now{opacity:.42}
.dbdate{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:1px solid var(--soft);background:var(--surface);color:var(--ink);border-radius:10px;font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.datebar .dchip-wrap{display:inline-flex;flex:0 1 auto;min-width:0}
.datebar .dstrip2{gap:4px;padding:0}
.datebar .daypill{min-height:44px;border:0;background:transparent;border-radius:10px;gap:2px;padding:5px 4px}
.datebar .daypill .dp-dow{font-size:9.5px}
.datebar .daypill .dp-num{font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.datebar .daypill.today{box-shadow:inset 0 0 0 1px var(--acc)}
.datebar .daypill.on{background:var(--acc);box-shadow:none}
.dbfoot{font-size:11.5px;line-height:1.5;padding:7px 4px 2px;margin-top:1px;border-top:1px dashed var(--line)}
.dbfoot:empty{display:none}
.subtabs{margin-bottom:10px}
@media(max-width:699px){
 .phead h1{font-size:22px}
 .ph-r{padding-right:0}
 .subtab{padding:8px 6px}
 .subtab .st-sub{display:none}
 .subtab .st-main{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ===== AI CHAT ERGONOMICS =====
   Three things were wrong on the phone. The composer sat below the fold after "Ask about this",
   so the keyboard came up over a box you could not see; iOS zoomed the whole overlay on focus
   because the textarea was under 16px; and every send rebuilt the pane at scroll 0. The first
   two are here, the third is in rAI(). */
.aicomp{position:sticky;bottom:0;z-index:3;background:var(--surface);padding-bottom:8px;margin-bottom:-4px}
.ai-resp .airkeep{font-size:11.5px;margin-top:8px;line-height:1.45}
@media(pointer:coarse){
 /* Safari zooms in on any focused field under 16px - and never zooms back out */
 .aichatin,.ailogta{font-size:16px}
}

/* Session-level delete: distinct from the neutral copy icon beside it, so "remove this session"
   reads as a real action rather than decoration. Colour + separation, tuned to stay premium. */
.seshd .sess-del{order:3;margin-left:0}

/* ================= COMPACTION PASS (premium/clean Log) =================
   Picker inputs (select / time / date) open native pickers, NOT the keyboard, so they can drop below
   16px without triggering iOS focus-zoom. Text/number inputs stay 16px on purpose (zoom-safe). */
select,input[type=date],input[type=time]{font-size:15px}
/* Meal + session headers read tighter, and the meal header stays on ONE line so the kcal + copy
   controls sit up beside the meal/time instead of wrapping to their own row. */
.mg-head{gap:6px}
.mg-head .mg-num{min-width:0}
.mg-head .mg-num,.mg-head .mg-time,.seshd select.sname,.seshd input[type=time]{font-size:13.5px;min-height:32px;padding-top:5px;padding-bottom:5px}
/* Logged-item + food-card readouts one notch down */
.logline .li-txt{font-size:12px}
.logline .li-mac{font-size:11px}
.fcard .fc-name{font-size:13px}
.fcard .fc-mac{font-size:11.5px}
.fcard .fc-mac b{font-size:12px}
.chip{font-size:11px}
.tag{font-size:9.5px}
.mmini{font-size:12px}
/* Collapsed program bar: shorter + quieter once it is only an "added" marker */
.prog-min{padding:7px 12px!important;margin-bottom:10px!important}
.prog-min b{font-size:12px}
/* A little air between a section header and its panel, so the collapse chip doesn't crowd the box */
.card>.sec:not(.col){margin-bottom:10px}
/* Empty session-time gets a visible hint (type=time has no native placeholder) */
.th-time{position:relative;display:inline-flex;align-items:center}
.seshd .th-time{order:2;width:104px;flex:none}
.th-time input[type=time]{width:100%}
.th-time .th-hint{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--mut);opacity:.55;pointer-events:none;transition:opacity .12s}
.th-time input:focus~.th-hint,.th-time input:valid~.th-hint{opacity:0}

/* ---- Meal header fits on one line WITHIN the card: collapse the spacer, tighten pickers/chip/icons ---- */
.mg-head .mg-sp{flex:1 1 0;min-width:0}
.mg-head .mg-num{padding-left:9px;padding-right:22px;background-position:right 7px center}
.mg-head .mg-time{padding-left:8px;padding-right:8px}
.mg-end{gap:5px}
.mg-end .chip{padding:4px 8px;font-size:10.5px}
.mg-copy,.sess-copy{width:26px;height:26px;font-size:12px}
/* Whole-meal / whole-session delete: a real button, clearly a delete, consistent + not crammed */
.sess-del,.mg-del{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line);background:var(--surface);color:var(--bad,#DC2626);border-radius:8px;font-size:13px;line-height:1;padding:0;cursor:pointer;opacity:.9;flex:none}
.sess-del:hover,.mg-del:hover,.sess-del:active,.mg-del:active{opacity:1;border-color:var(--bad,#DC2626);background:rgba(220,38,38,.10)}

/* ===== STRUCTURAL PASS: compact date selector + collapsible fit panel ===== */
.datebar{padding:5px;gap:5px}
.datebar .dbnavb{min-height:30px;padding:5px 9px;font-size:11px}
.datebar .dbdate{min-height:30px;padding:5px 9px;font-size:11.5px}
.datebar .daypill{min-height:36px;padding:4px 3px}
.datebar .daypill .dp-num{font-size:13px}
.datebar .daypill .dp-dow{font-size:9px}
/* the "Does this week hit the standard?" panel is now a tap-to-open details */
.fitpanel{overflow:hidden}
.fitpanel>summary.fitsum{cursor:pointer;list-style:none;font-size:12px;font-weight:700;color:var(--ink);padding:9px 12px;display:flex;align-items:center;justify-content:space-between}
.fitpanel>summary.fitsum::-webkit-details-marker{display:none}
.fitpanel>summary.fitsum::after{content:"\203A";font-size:16px;color:var(--mut);transition:transform .15s;line-height:1}
.fitpanel[open]>summary.fitsum::after{transform:rotate(90deg)}

/* ===== FIX PASS: red delete crosses, meal kcal placement, gut row grid, settings group ===== */
/* Universal red delete cross on content rows (copy uses .sess-copy/.mg-copy; closes use .ob-x/.btn — untouched) */
.trow .x,.logline .x,.fr-x,.er-x,.xdel{color:var(--bad,#DC2626)}
.trow .x:hover,.logline .x:hover,.fr-x:hover,.er-x:hover,.xdel:hover{background:rgba(220,38,38,.10);border-color:var(--bad,#DC2626)}
.sess-copy,.mg-copy{color:var(--mut)}
/* Meal total sits bottom-right, under the controls */
.mg-kcal{display:flex;justify-content:flex-end;margin:5px 0 2px}
/* Gut row wraps to fit mobile: time+bristol+del, then urg/pain/gi, then a full-width note */
.gutrow{grid-template-columns:repeat(3,1fr) 30px;grid-template-areas:"time bristol bristol del" "urg pain gi gi" "note note note note";gap:6px;align-items:center}
.gutrow input,.gutrow select{min-width:0}
/* Goal/Rest/Split/Focus as one grouped settings block */
.pgroup{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 14px 8px;margin:2px 0 14px}

.mgfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.sesscard{position:relative}
.sesscard>.sess-del{position:absolute;top:10px;right:10px;z-index:3}
.seshd{padding-right:34px}

/* Four program windows: separate collapsible cards sharing an accent cue (= same program) */
.progwin{border-left:3px solid var(--acc);overflow:hidden;margin-bottom:12px}
.progwin>summary.progwin-h{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.progwin>summary.progwin-h::-webkit-details-marker{display:none}
.progwin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.progwin-t{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pw-chev{font-size:19px;color:var(--mut);transition:transform .15s;line-height:1;flex:none}
.progwin[open]>summary.progwin-h .pw-chev{transform:rotate(90deg)}
.progwin-b{margin-top:12px}

/* activated "Your program" window gets a distinct (green) accent, works light+dark */
.progwin.active{border-left-color:#22c55e}
/* Split as full-width stacked options */
.pchips-col{flex-direction:column}
.pchips-col .pchip{width:100%;text-align:center;border-radius:10px}
/* Focus "Specialise" expander */
.pchip-more{border-style:dashed;opacity:.9}
/* session header: title + wrapping summary (no more cut-off) */
.psesshead{cursor:pointer}
.psesssum{font-size:11px;line-height:1.45;margin-top:3px;color:var(--mut)}