/* ===== shared components ===== */

/* app top bar (per view) */
.topbar{
  padding:calc(14px + var(--safe-t)) 0 6px;
}
.topbar .ttl{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;}
.topbar h1{font-size:24px; line-height:1.05;}
.topbar .sub{color:var(--muted); font-size:13px; font-weight:600; margin-top:3px;}

/* flame / streak chip */
.flame{
  display:inline-flex; align-items:center; gap:5px; background:rgba(255,106,43,.14);
  border:1px solid rgba(255,106,43,.3); color:#ffb38a; font-weight:800; font-size:13px;
  padding:6px 11px; border-radius:999px; white-space:nowrap;
  animation:flameglow 2.6s ease-in-out infinite;
}
@keyframes flameglow{0%,100%{box-shadow:0 0 0 rgba(255,106,43,0)}50%{box-shadow:0 0 14px rgba(255,106,43,.45)}}

/* pill */
.pill{font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px; white-space:nowrap; letter-spacing:.03em;}
.pill.lift{background:rgba(200,250,60,.15); color:var(--lime);}
.pill.cardio{background:rgba(52,224,161,.16); color:#7fe6c4;}
.pill.rest{background:rgba(255,194,75,.16); color:#ffce85;}

/* generic card */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px;}

/* segmented kg/lb toggle */
.unitseg{display:inline-flex; flex:0 0 auto; align-self:flex-start; background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:0;}
.unitseg span{padding:6px 11px; font-size:11px; font-weight:800; color:var(--faint); transition:.12s;}
.unitseg span.on{background:var(--grad); color:var(--lime-ink);}
.unitseg:active{transform:scale(.96);}

/* chips */
.chip{background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:10px 15px; border-radius:11px; font-weight:800; font-size:13px;}
.chip.sel{border-color:var(--lime); color:var(--lime);}

/* tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding:0 max(0px, calc(50vw - 340px)) var(--safe-b);
  display:flex; background:var(--bg2);
  border-top:1px solid var(--line);
}
.tabbar button{
  flex:1; background:none; border:none; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; position:relative; transition:color .15s;
}
.tabbar button .ic{font-size:20px; line-height:1; filter:grayscale(.4) opacity(.8); transition:.15s;}
.tabbar button.active{color:var(--lime);}
.tabbar button.active .ic{filter:none; transform:translateY(-1px);}
.tabbar button.active::before{
  content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--lime);
  box-shadow:0 0 12px var(--lime);
}
.tabbar button:active{transform:scale(.93);}

/* collapsible section (used across More / Fuel / Progress) */
.sect{margin-bottom:2px;}
.sect-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:none; padding:18px 2px 8px; color:var(--muted);
  font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.sect-head .chev{color:var(--faint); font-size:12px; transition:rotate .22s ease;}
.sect.closed .sect-head .chev{rotate:-90deg;}
.sect-body{display:grid; grid-template-rows:1fr; transition:grid-template-rows .26s ease;}
.sect.closed .sect-body{grid-template-rows:0fr;}
.sect-body>.sect-inner{overflow:hidden; min-height:0;}

/* theme toggle (Dark / Light) — reuses the segmented look */
.themeseg{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:11px; overflow:hidden;}
.themeseg button{background:none; border:none; color:var(--faint); padding:9px 16px; font-weight:800; font-size:13px;}
.themeseg button.on{background:var(--grad); color:var(--lime-ink);}

/* segmented tabs (inside a view, e.g. Progress) */
.segtabs{display:flex; gap:6px; margin-top:12px;}
.segtab{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--muted);
  border-radius:11px; padding:10px 0; font-weight:800; font-size:13px;}
.segtab.active{background:var(--grad); color:var(--lime-ink); border-color:transparent;}

/* bottom sheets (overlay: plate, summary) */
.sheet-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:70; opacity:0; pointer-events:none; transition:.2s;}
.sheet-bg.open{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:71; max-height:90vh;
  width:100%; max-width:600px; margin-inline:auto;
  background:var(--bg2); border-top:1px solid var(--line2); border-radius:22px 22px 0 0;
  transform:translateY(100%); display:flex; flex-direction:column;
  padding:0 0 calc(18px + var(--safe-b));
  /* shadow + visibility only while open — a closed sheet parked below the
     viewport would otherwise cast its shadow up over the tab bar */
  visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.85,.25,1), visibility 0s .28s;
}
.sheet.open{transform:translateY(0); visibility:visible; box-shadow:0 -20px 50px rgba(0,0,0,.5); transition-delay:0s;}
.sheet .grip{width:42px; height:5px; background:var(--line2); border-radius:99px; margin:10px auto 4px;}
.sheet .shead{display:flex; align-items:center; justify-content:space-between; padding:6px 18px 14px; border-bottom:1px solid var(--line);}
.sheet .shead h2{font-size:19px;}
.sheet .sbody{overflow:auto; padding:16px;}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 20px + var(--safe-b)); transform:translateX(-50%) translateY(16px);
  background:var(--grad); color:var(--lime-ink); font-weight:800; padding:11px 18px; border-radius:12px; z-index:90;
  opacity:0; transition:.25s; pointer-events:none; box-shadow:0 10px 28px rgba(0,0,0,.45); font-size:14px; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* charts */
.chart{width:100%; height:auto; display:block;}
.chart .ln{fill:none; stroke:url(#cg); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round;}
.chart .area{fill:url(#cgf);}
.chart .dot{fill:var(--lime);}
.chart .goal{stroke:var(--orange); stroke-width:1.5; stroke-dasharray:5 4; fill:none;}
.chart text{fill:var(--faint); font-size:9px; font-weight:700;}
.chart text.lastval{fill:#c8fa3c; font-weight:800;}
.chart text.xl{font-size:8px;}
.chart .bar{fill:#3a4456;}
.chart .bar.cur{fill:url(#cg);}
[data-theme="light"] .chart .bar{fill:#cdd5df;}

/* chart entrance animations */
.chart .ln{stroke-dasharray:1; stroke-dashoffset:1; animation:chartdraw 1s ease .1s forwards;}
@keyframes chartdraw{to{stroke-dashoffset:0}}
.chart .area{opacity:0; animation:fadein .7s ease .65s forwards;}
.chart .dot{transform-box:fill-box; transform-origin:center; transform:scale(0); opacity:0;
  animation:dotpop .3s cubic-bezier(.2,.8,.3,1.4) forwards;}
@keyframes dotpop{to{transform:scale(1); opacity:1}}
.chart .bar{transform-box:fill-box; transform-origin:bottom; animation:bargrow .55s cubic-bezier(.2,.8,.2,1) backwards;}
@keyframes bargrow{from{transform:scaleY(0)}}
.chart text.val{opacity:0; animation:fadein .4s ease forwards;}
@keyframes fadein{to{opacity:1}}

/* confetti (finish-session celebration) */
.confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:9;}
.confetti i{position:absolute; top:-16px; border-radius:2px; animation:confall linear forwards;}
@keyframes confall{to{transform:translateY(92vh) rotate(640deg); opacity:.8}}

@media (prefers-reduced-motion: reduce){
  .chart .ln,.chart .area,.chart .dot,.chart .bar,.chart text.val,.confetti i,
  .flame,.heat .hd,.ex,.prog .bar i::after{animation:none !important;}
  .chart .ln{stroke-dashoffset:0;}
  .chart .area,.chart text.val{opacity:1;}
  .chart .dot{transform:scale(1); opacity:1;}
}

/* consistency heatmap */
.heat{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:4px;}
.heat .hd{aspect-ratio:1; border-radius:7px; background:var(--panel2); border:1px solid var(--line); position:relative;
  animation:cellpop .3s cubic-bezier(.2,.8,.3,1.3) backwards;}
@keyframes cellpop{from{opacity:0; transform:scale(.4)}}
.heat .hd.lift{background:var(--grad); border-color:transparent;}
.heat .hd.cardio{background:rgba(52,224,161,.35); border-color:rgba(52,224,161,.4);}
.heat .hd.today::after{content:""; position:absolute; inset:auto auto 3px 50%; translate:-50% 0; width:4px; height:4px; border-radius:50%; background:var(--orange);}
.heat-lbls{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;}
.heat-lbls span{text-align:center; font-size:9px; font-weight:800; color:var(--faint); text-transform:uppercase;}
.heat-legend{display:flex; gap:14px; margin-top:10px; font-size:11px; color:var(--muted); font-weight:700;}
.heat-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}

/* stat tiles + readouts (shared) */
.statline{display:flex; gap:8px; margin-top:12px;}
.stat{flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:10px 6px; text-align:center;}
.stat b{display:block; font-size:17px; color:var(--text); font-variant-numeric:tabular-nums;}
.stat small{color:var(--muted); font-size:10.5px;}
.ontrack{margin-top:12px; padding:10px 12px; border-radius:11px; font-size:12.5px; font-weight:700; line-height:1.4;}
.ontrack.good{background:rgba(52,224,161,.12); border:1px solid rgba(52,224,161,.3); color:#7fe6c4;}
.ontrack.warn{background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.3); color:#ffce85;}

/* PR badge */
.pr{display:inline-block; background:var(--grad-hot); color:#240a02; font-size:10px; font-weight:900;
  padding:2px 7px; border-radius:6px; margin-left:6px; letter-spacing:.04em;}

/* rest timer FAB + popover */
.rest-fab{
  position:fixed; right:max(16px, calc(50vw - 324px)); bottom:calc(var(--tabbar-h) + 18px + var(--safe-b)); z-index:62;
  width:58px; height:58px; border-radius:50%; background:var(--panel2); color:var(--text);
  font-weight:800; font-size:15px; border:1px solid var(--line); box-shadow:0 8px 22px rgba(0,0,0,.5);
  display:grid; place-items:center; padding:0; transition:transform .12s;
}
.rest-fab::before{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--panel); z-index:0;}
.rest-fab>span{position:relative; z-index:1;}
.rest-fab:active{transform:scale(.92);}
.rest-fab.running .lbl{font-size:16px; font-variant-numeric:tabular-nums; color:var(--text);}
.rest-fab.warn{animation:pulse .5s ease-in-out infinite;}
.rest-fab.done::before{background:var(--good);}
.rest-fab.done{color:#06281d;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.rest-pop{
  position:fixed; right:max(16px, calc(50vw - 324px)); bottom:calc(var(--tabbar-h) + 84px + var(--safe-b)); z-index:63;
  width:min(290px,calc(100vw - 32px)); background:var(--panel); border:1px solid var(--line2);
  border-radius:16px; padding:13px; box-shadow:0 16px 40px rgba(0,0,0,.6);
  transform:translateY(8px) scale(.97); opacity:0; pointer-events:none; transition:.16s;
}
.rest-pop.open{transform:none; opacity:1; pointer-events:auto;}
.rph{font-weight:800; font-size:13px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
.rph span{color:var(--lime); font-weight:800; font-variant-numeric:tabular-nums; font-size:15px;}
.rp-presets{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:9px;}
.rp-presets button,.rp-controls button{background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px 0; font-weight:800; font-size:12px;}
.rp-presets button.sel{border-color:var(--lime); color:var(--lime);}
.rp-controls{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.rp-controls button#rpStop{color:var(--hot); border-color:rgba(255,77,87,.3);}