/* HOP — day score meters (Progress) and the small "yesterday" chip (Today).
   Band colour is never the only signal: every band has a name, every day
   shows its percentage, and the 7-day bars also encode the value in height. */
:root{
  --sc-nailed:#0d8a79;  --sc-nailed-bg:#dcf2ee;
  --sc-solid:#1b86c9;   --sc-solid-bg:#e1f0fa;
  --sc-mixed:#b87d0e;   --sc-mixed-bg:#fbf0dc;
  --sc-slipped:#cf5b4a; --sc-slipped-bg:#fbe6e2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sc-nailed:#3fc4b0;  --sc-nailed-bg:#0d2a2a;
    --sc-solid:#4aa3dc;   --sc-solid-bg:#0e2236;
    --sc-mixed:#f0b43e;   --sc-mixed-bg:#2e2210;
    --sc-slipped:#ff8a78; --sc-slipped-bg:#341714;
  }
}
:root[data-theme="dark"]{
  --sc-nailed:#3fc4b0;  --sc-nailed-bg:#0d2a2a;
  --sc-solid:#4aa3dc;   --sc-solid-bg:#0e2236;
  --sc-mixed:#f0b43e;   --sc-mixed-bg:#2e2210;
  --sc-slipped:#ff8a78; --sc-slipped-bg:#341714;
}

.is-nailed{ --c:var(--sc-nailed);  --cbg:var(--sc-nailed-bg); }
.is-solid{  --c:var(--sc-solid);   --cbg:var(--sc-solid-bg); }
.is-mixed{  --c:var(--sc-mixed);   --cbg:var(--sc-mixed-bg); }
.is-slipped{--c:var(--sc-slipped); --cbg:var(--sc-slipped-bg); }
.is-none{   --c:var(--border-strong); --cbg:transparent; }

.sc-card{ padding:16px; margin-bottom:14px; }
.sc-sub{ margin:0 0 12px; font-size:15px; line-height:1.4; color:var(--text-muted); }
.sc-link{ background:none; border:0; padding:0; font:inherit; font-size:15px; color:var(--accent-500); text-decoration:underline; cursor:pointer; }

.sc-band{
  display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700;
  padding:3px 10px; border-radius:999px; background:var(--cbg); color:var(--text); border:1px solid var(--c);
}
.sc-band::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c); }

/* Yesterday */
.sc-yday{
  display:block; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-left:6px solid var(--c);
  border-radius:var(--radius-sm, 12px); padding:14px 14px 12px; margin-bottom:6px;
}
.sc-yday:active{ background:var(--surface-3); }
.sc-yday.is-none{ border-style:dashed; border-left-width:1px; cursor:default; }
.sc-yday-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.sc-yday-title{ font-weight:800; font-size:18px; font-family:var(--font-display, inherit); }
.sc-yday-date{ font-size:14px; color:var(--text-muted); }
.sc-yday-row{ display:flex; align-items:center; gap:14px; }
.sc-meter{ flex:1; height:18px; border-radius:999px; background:var(--surface-3); overflow:hidden; border:1px solid var(--border); }
.sc-meter > i{ display:block; height:100%; background:var(--c); border-radius:999px; min-width:6px; transition:width .5s ease; }
.sc-yday-pct{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:92px; }
.sc-yday-pct b{ font-family:var(--font-display, inherit); font-size:34px; line-height:1; font-weight:800; }
.sc-yday-line{ margin-top:10px; font-size:15px; color:var(--text-muted); line-height:1.35; }

/* Section heads */
.sc-block{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.sc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.sc-head h3{ margin:0; font-size:18px; font-family:var(--font-display, inherit); }
.sc-avg{ font-size:14px; color:var(--text-muted); }
.sc-avg b{ color:var(--text); }

/* 7 days */
.sc-cols{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end; }
.sc-col{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0 6px; font:inherit; color:var(--text);
  background:transparent; border:1px solid transparent; border-radius:12px; cursor:pointer; min-height:44px;
}
.sc-col:active{ background:var(--surface-2); }
.sc-col .sc-pct{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.sc-col .sc-track{ position:relative; width:100%; max-width:34px; height:96px; border-radius:10px; background:var(--surface-3); overflow:hidden; display:flex; align-items:flex-end; }
.sc-col .sc-track > i{ display:block; width:100%; background:var(--c); border-radius:10px 10px 0 0; min-height:5px; transition:height .5s ease; }
.sc-col.is-none .sc-track{ background:transparent; border:1px dashed var(--border-strong); }
.sc-col.is-none .sc-track > i{ display:none; }
.sc-col .sc-dow{ font-size:13px; color:var(--text-muted); font-weight:700; }
.sc-col .sc-dn{ font-size:12px; color:var(--text-faint); }

.sc-insights{ margin-top:12px; display:grid; gap:8px; }
.sc-ins{ font-size:15px; line-height:1.4; }
.sc-ins b{ display:block; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }
.sc-ins ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.sc-ins li{ display:inline-flex; }
.sc-tag{ font:inherit; font-size:14px; padding:5px 11px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); }
button.sc-tag{ cursor:pointer; }
.sc-tag.is-strong{ border-color:var(--sc-nailed); background:var(--sc-nailed-bg); }
.sc-tag.is-weak{ border-color:var(--sc-mixed); background:var(--sc-mixed-bg); }

/* 28 days */
.sc-dist{ display:flex; height:16px; border-radius:999px; overflow:hidden; background:var(--surface-3); border:1px solid var(--border); }
.sc-dist > i{ display:block; height:100%; background:var(--c); }
.sc-dist-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 12px; padding:0; list-style:none; font-size:14px; color:var(--text-muted); }
.sc-dist-legend li{ display:inline-flex; align-items:center; gap:6px; }
.sc-dist-legend li::before{ content:""; width:11px; height:11px; border-radius:3px; background:var(--c); }
.sc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.sc-cell{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; min-height:46px; padding:3px 0;
  font:inherit; color:var(--text); background:var(--cbg); border:1px solid var(--c); border-radius:10px; cursor:pointer;
}
.sc-cell .sc-cn{ position:absolute; top:2px; left:5px; font-size:10px; color:var(--text-muted); }
.sc-cell .sc-cp{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:6px; }
.sc-cell.is-none{ border:1px dashed var(--border-strong); background:transparent; }
.sc-cell.is-none .sc-cp{ color:var(--text-faint); font-weight:600; }
.sc-note{ margin:10px 0 0; font-size:15px; color:var(--text-muted); line-height:1.4; }

/* Day sheet */
.sc-sheet-score{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:14px; background:var(--cbg); border:1px solid var(--c); margin:0 0 10px; }
.sc-sheet-score b{ font-family:var(--font-display, inherit); font-size:40px; line-height:1; font-weight:800; }
.sc-sheet-blurb{ margin:0 0 6px; font-size:15px; color:var(--text-muted); }
.sc-sec{ margin-top:14px; }
.sc-sec h3{ margin:0 0 6px; font-size:16px; }
.sc-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.sc-list li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.35; padding:8px 10px; border-radius:10px; background:var(--surface-2); }
.sc-list li svg{ flex-shrink:0; margin-top:2px; }
.sc-list li.is-good svg{ color:var(--sc-nailed); }
.sc-list li.is-gap svg{ color:var(--sc-mixed); }
.sc-list .sc-li-note{ display:block; color:var(--text-muted); font-size:14px; }
.sc-try{ display:block; margin-top:6px; font:inherit; font-size:14px; color:var(--accent-500); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; text-align:left; }
.sc-left-out{ margin:12px 0 0; font-size:14px; color:var(--text-muted); }
.sc-explain p{ margin:0 0 10px; font-size:15px; line-height:1.45; }
.sc-explain ul{ margin:0 0 10px; padding-left:18px; font-size:15px; line-height:1.45; }

/* Today chip */
.sc-chip{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px 2px; padding:6px 12px; font:inherit; font-size:14px; font-weight:700;
  color:var(--text); background:var(--cbg); border:1px solid var(--c); border-radius:999px; cursor:pointer;
}
.sc-chip::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c); }
.sc-chip span{ font-weight:600; color:var(--text-muted); }

@media (prefers-reduced-motion: reduce){
  .sc-meter > i, .sc-col .sc-track > i{ transition:none; }
}
@media (max-width:360px){
  .sc-yday-pct b{ font-size:28px; }
  .sc-yday-pct{ min-width:78px; }
  .sc-col .sc-track{ height:80px; }
}

/* Yesterday: Easy 8 attention line */
.sc-yday-attn{ margin-top:6px; font-size:15px; color:var(--text); line-height:1.35; }
.sc-yday-attn b{ color:var(--sc-mixed); }

/* Your Easy 8 */
.d8-toggle{ display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; }
.d8-toggle button{ font:inherit; font-size:14px; font-weight:700; padding:6px 12px; background:transparent; color:var(--text-muted); border:0; cursor:pointer; min-height:36px; }
.d8-toggle button.is-on{ background:var(--accent-500); color:#fff; }
.d8-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.d8-row{
  display:grid; grid-template-columns:1fr; gap:4px; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-left:5px solid var(--border-strong); border-radius:12px; padding:10px 12px; min-height:44px;
}
.d8-row.is-strong{ border-left-color:var(--sc-nailed); }
.d8-row.is-steady{ border-left-color:var(--sc-solid); }
.d8-row.is-attention{ border-left-color:var(--sc-mixed); background:var(--sc-mixed-bg); }
.d8-row:active{ background:var(--surface-3); }
.d8-main{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.d8-name{ font-weight:700; font-size:16px; }
.d8-tag{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--border-strong); }
.d8-tag.is-attn{ border-color:var(--sc-mixed); color:var(--text); }
.d8-tag.is-good{ border-color:var(--sc-nailed); color:var(--text); }
.d8-meter{ display:flex; align-items:center; gap:10px; }
.d8-bar{ flex:1; height:10px; border-radius:999px; background:var(--surface-3); overflow:hidden; border:1px solid var(--border); }
.d8-bar > i{ display:block; height:100%; background:var(--sc-solid); border-radius:999px; min-width:3px; }
.d8-row.is-strong .d8-bar > i{ background:var(--sc-nailed); }
.d8-row.is-attention .d8-bar > i{ background:var(--sc-mixed); }
.d8-pct{ font-weight:800; font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.d8-none{ flex:1; font-size:14px; color:var(--text-muted); }
.d8-days{ font-size:13px; color:var(--text-muted); }
.d8-nudge{ margin-top:12px; font-size:15px; line-height:1.4; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px dashed var(--border-strong); }

/* Day sheet: Easy 8 list */
.sc-d8 li.is-unk{ opacity:.75; }
.sc-d8 .sc-dash{ flex-shrink:0; width:16px; text-align:center; color:var(--text-muted); font-weight:800; }
.sc-d8-link{ font:inherit; color:var(--text); background:none; border:0; padding:0; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }

/* Library detail page: Easy 8 panel */
.d8-panel{ padding:14px; margin-bottom:12px; }
.d8-panel p{ margin:0 0 10px; font-size:15px; line-height:1.4; }
.d8-badge{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:3px 10px; border-radius:999px; background:var(--sc-nailed-bg); border:1px solid var(--sc-nailed); margin-bottom:8px; }
.d8-recent b{ font-variant-numeric:tabular-nums; }

/* Check-in: "?" and "what got in the way" */
.ci-item{ border-radius:12px; }
.ci-line{ display:flex; align-items:center; gap:6px; }
.ci-line .ci-row{ flex:1; min-width:0; }
.ci-q{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface-2);
  color:var(--accent-500); font:inherit; font-size:20px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.ci-q:active{ background:var(--surface-3); }
.ci-why{ margin:0 8px 8px 44px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }
.ci-why[hidden]{ display:none; }
.ci-why-q{ font-size:15px; font-weight:700; margin-bottom:8px; }
.ci-why-q span{ display:block; font-weight:500; font-size:13px; color:var(--text-muted); }
.ci-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ci-chip{ font:inherit; font-size:14px; padding:6px 11px; min-height:36px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; }
.ci-chip.is-on{ border-color:var(--sc-mixed); background:var(--sc-mixed-bg); font-weight:700; }
.ci-why-input{ width:100%; font:inherit; font-size:16px; padding:9px 11px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); box-sizing:border-box; }

/* Easy 8: patterns */
.d8-patterns{ margin-top:12px; padding:12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }
.d8-pat-head{ font-weight:800; font-size:15px; margin-bottom:6px; }
.d8-pat-head span{ font-weight:500; font-size:13px; color:var(--text-muted); margin-left:6px; }
.d8-pat-line{ margin:0 0 6px; font-size:15px; line-height:1.4; }

/* Unfinished check-in: return bar on info pages */
.ci-return-bar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 10px; padding:10px 14px; background:var(--warning-100); color:var(--text);
  border-bottom:1px solid var(--border-strong); font-size:15px; font-weight:700;
}
.ci-return-bar .btn{ white-space:nowrap; min-height:40px; }

/* Your 90 days */
.jy-bars{display:flex;gap:14px;align-items:flex-end;height:130px;margin:8px 0 6px}
.jy-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.jy-bar{flex:1;width:100%;max-width:64px;background:var(--surface-3);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden}
.jy-bar i{display:block;width:100%;background:var(--accent-500);border-radius:8px 8px 0 0}
.jy-pct{font-weight:700;font-size:14px}
.jy-lab{font-size:12px;opacity:.75}
.jy-line{margin:8px 0 4px;font-size:14px}
.d8-then{font-variant-numeric:tabular-nums}

/* v81: each Easy 8 habit's 0-10 trend, last 12 weeks */
.d8-trend{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); }
.d8-trend small{ font-size:11px; }
.d8-spark{ flex-shrink:0; overflow:visible; }
.d8-spark polyline{ fill:none; stroke:var(--sc-solid); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.d8-spark circle{ fill:var(--sc-solid); }
.d8-spark-base{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:2 3; }
.d8-row.is-strong .d8-spark polyline{ stroke:var(--sc-nailed); }
.d8-row.is-strong .d8-spark circle{ fill:var(--sc-nailed); }

/* v86: Your Easy 8 compared over 7 / 28 / 90 days / All */
.d8-sum{ margin:2px 0 6px; font-size:15px; line-height:1.4; }
.d8-s-up{ color:var(--sc-nailed); }
.d8-s-down{ color:var(--sc-mixed); }
.d8-v{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:800; padding:3px 9px; border-radius:999px; border:1.5px solid var(--border-strong); white-space:nowrap; }
.d8-v b{ font-size:10px; }
.d8-v span{ font-variant-numeric:tabular-nums; }
.d8-v.is-better{ border-color:var(--sc-nailed); color:var(--sc-nailed); }
.d8-v.is-worse{ border-color:var(--sc-mixed); color:var(--sc-mixed); }
.d8-v.is-steady{ color:var(--text-muted); }
.d8-v.is-new{ color:var(--text-faint); font-weight:600; border-style:dashed; }
.d8-row.v-better{ border-left-color:var(--sc-nailed); }
.d8-row.v-worse{ border-left-color:var(--sc-mixed); }
.d8-miss{ font-size:13px; color:var(--text-muted); }
.d8-toggle button{ padding:6px 10px; }

/* v118: inside the % box: where the missing points went, and the challenge's Easy 8 */
.sc-sheet-score{ flex-wrap:wrap; }
.sc-lost, .sc-ch{ flex:1 1 100%; border-top:1px solid color-mix(in srgb, var(--c) 35%, transparent); padding-top:9px; margin-top:2px; }
.sc-lost-h{ font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.sc-lost ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.sc-lost li{ display:flex; gap:10px; align-items:baseline; font-size:14.5px; line-height:1.4; }
.sc-lost li b{ flex:none; min-width:42px; font-size:14.5px; font-weight:800; color:var(--text); font-family:inherit; line-height:1.4; }
.sc-lost li span{ color:var(--text); }
.sc-ch{ display:flex; flex-direction:column; gap:1px; }
.sc-ch span{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#d43e6e; }
.sc-ch b{ font-size:16px; font-weight:800; line-height:1.3; font-family:inherit; }
.sc-ch i{ font-style:normal; font-size:13px; color:var(--text-muted); }