/* ==========================================================================
   APP STYLES — Masohi PWA
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Reduced motion: kill everything non-essential */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
/* iOS Safari zooms the whole page when a focused input has font-size <16px —
   the "wordt ingezoomd" bug from user testing. 16px floor fixes it. */
input, textarea, select { font-size: 16px; }

/* ---- App shell ----------------------------------------------------------
   Full-viewport on real mobile (the actual install target). On wider
   viewports (desktop testing) it centers as a phone-width column so you can
   still preview it, but nothing here depends on a decorative "phone frame". */
#app {
  /* fixed height (not min-height) is load-bearing: with min-height the shell
     grows with long content and the bottom nav + FAB slide below the fold.
     A fixed height forces .scroll to be the scrolling element instead.
     Found via headless screenshot review. */
  height: 100vh;
  height: 100dvh;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
@media (min-width: 540px) {
  body { background: var(--bg-elevated); display: flex; justify-content: center; }
  #app { box-shadow: 0 0 0 1px var(--line), 0 40px 100px -30px rgba(0,0,0,.8); height: calc(100vh - 48px); margin: 24px auto; border-radius: var(--radius-lg); }
}

/* ---- Screens -------------------------------------------------------------
   Each screen is a full section; only one has .active at a time. */
.screens { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--duration-med) var(--ease-standard), transform var(--duration-med) var(--ease-standard);
  overflow: hidden;
}
/* flex:1 + min-height:0 are load-bearing: without them the active screen grows
   with its content, pushing the bottom nav and FAB below the fold instead of
   pinning them to the viewport. Found via headless screenshot review. */
.screen.active { position: relative; opacity: 1; pointer-events: auto; transform: none; flex: 1; min-height: 0; }

.scroll { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-6); -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { display: none; }

/* ---- Typography ----
   Display = Fraunces (headings, big numbers, article titles).
   UI = Inter (body, buttons, labels). */
h1 { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.15; }
h2 { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.25; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.muted { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.tiny { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.big-number { font-family: var(--font-display); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.icon { vertical-align: middle; flex: 0 0 auto; }
.flip-x { transform: scaleX(-1); }

/* ---- Buttons ---- */
.btn {
  min-height: var(--tap-min);
  width: 100%;
  border-radius: var(--radius-md);
  padding: 15px 20px;
  font-size: 15.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--duration-fast) ease, filter var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.btn:active { transform: scale(.975); }
.btn.primary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
/* subtle reward-colored glow along the bottom edge — the one place color
   bleeds into everyday chrome, echoing Opal's gradient-edged primary CTA */
.btn.primary::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
  background: var(--gradient-brand);
  opacity: .55; filter: blur(1px);
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn.link { background: none; color: var(--text-secondary); font-weight: 500; padding: 12px; }
.btn.danger-text { color: var(--danger); background: none; }
.btn:disabled { opacity: .4; pointer-events: none; }
/* ---- Luxury CTA (intro / quiz / Today milestone only) ------------------------
   Thin mint→orchid gradient ring on a near-black interior (not a fill), soft
   dual-tone glow, white label + right arrow. The two-layer background paints an
   opaque interior over the gradient so only the border shows the gradient. */
.btn.lux {
  border-radius: var(--radius-pill);
  color: #fff;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 0 22px -6px rgba(158, 217, 205, .40), 0 0 26px -10px rgba(167, 138, 216, .48);
}
.btn.lux::after { content: none; }
.btn.lux .icon { margin-left: 2px; }
.btn.lux:disabled { box-shadow: none; }
/* pill shape modifier — a rounded secondary next to a lux primary, no glow */
.btn.pill { border-radius: var(--radius-pill); }
.btn-row { display: flex; flex-direction: column; gap: 11px; padding: var(--space-4) var(--space-5) calc(var(--space-6) + var(--safe-bottom)); flex: 0 0 auto; }

/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.card + .card { margin-top: var(--space-3); }

/* ---- Progress dots (onboarding) ---- */
.prog { display: flex; gap: 6px; padding: var(--space-2) 0 var(--space-5); }
.prog i { height: 3px; flex: 1; border-radius: 3px; background: var(--line-strong); }
.prog i.done { background: var(--text-secondary); }
.prog i.on { background: var(--text); }

/* ---- Conversation onboarding (Opal pattern 1/2) --------------------------
   Answered questions collapse upward into a faded transcript; the live
   question sits at full weight below it. */
/* scrollable when tall, but the short case still sits near the bottom (via
   .convo-inner margin-top:auto). Continue lives in a sibling .btn-row that is
   always pinned in frame. justify-content:flex-end would clip the top and
   break scrolling — margin-top:auto is the flex-safe way to bottom-align. */
.convo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: calc(52px + var(--safe-top)) var(--space-5) var(--space-4); }
.convo::-webkit-scrollbar { display: none; }
.convo-inner { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.convo-log { display: flex; flex-direction: column; gap: var(--space-3); opacity: .55; }
.convo-log .q { font-family: var(--font-display); font-size: 14px; color: var(--text-secondary); letter-spacing: var(--tracking-display); }
.convo-log .a { font-size: 13.5px; color: var(--text); font-weight: 600; }
.convo-live { display: flex; flex-direction: column; gap: var(--space-4); }
.convo-live .q { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.25; }
.convo-mirror { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; min-height: 1.2em; }
.convo-mirror b { color: var(--text); font-weight: 600; }

/* ---- Cold-open (hero object + tap to continue) ---- */
.cold-open { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--space-8); gap: var(--space-6); }
.hero-object { width: 132px; height: 132px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-object .glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, var(--gradient-glow), transparent 65%); }
.hero-object .core {
  width: 100%; height: 100%; border-radius: 46% 54% 61% 39% / 40% 45% 55% 60%;
  background: linear-gradient(150deg, #3a3d45, #1c1e23 60%);
  box-shadow: inset 0 2px 12px rgba(255,255,255,.05), 0 20px 50px -12px rgba(0,0,0,.6);
  transition: background var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard);
}
.hero-object.revealed .core {
  background: var(--gradient-brand);
  box-shadow: 0 0 60px -8px var(--gradient-glow), inset 0 2px 12px rgba(255,255,255,.25);
}
.cold-open-line { font-size: 18px; line-height: 1.5; font-weight: 500; min-height: 3.2em; max-width: 300px; }
.tap-continue { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }

/* ---- Commitment ritual ---- */
.commit-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-5); padding: 0 var(--space-6); }
.commit-emoji { font-size: 40px; }
.commit-orchid { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 26px rgba(158, 217, 205, .28)); }

/* ---- Choice cards (product buyer vs trial) ---- */
.choice { display: flex; gap: var(--space-4); align-items: flex-start; text-align: left; cursor: pointer; transition: border-color var(--duration-fast); }
.choice:active { transform: scale(.99); }
.choice .ic { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--surface-2); }
.choice h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.choice p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.choice .chev { color: var(--text-tertiary); align-self: center; margin-left: auto; }

/* ---- Onboarding option list ---- */
.opt-list { display: flex; flex-direction: column; gap: var(--space-3); }
.opt {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 15px;
  padding: 15px 16px; min-height: var(--tap-min);
  font-size: 14.5px; font-weight: 500;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.opt:active { transform: scale(.99); }
.opt.sel { border-color: var(--mint-line); background: var(--mint-soft); }
.opt .box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 13px; }
/* empty outline until selected — the check only appears once picked (point 6) */
.opt .box .icon { opacity: 0; transition: opacity var(--duration-fast) ease; }
.opt.sel .box { background: var(--mint); color: #0d221d; border-color: var(--mint); }
.opt.sel .box .icon { opacity: 1; }

/* ---- Week strip (Zero pattern) — dots cascade in one by one ---- */
.week-strip { display: flex; justify-content: space-between; padding: var(--space-2) 0 var(--space-5); }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.week-day .lbl { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--text-tertiary); }
.week-day .lbl.today { color: var(--text); }
.week-day .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: border-color var(--duration-fast), background var(--duration-fast); animation: dotIn .4s var(--ease-standard) backwards; }
.week-day .dot.done { background: var(--mint-soft); border-color: var(--mint); color: var(--mint); }
.week-day .dot.missed { border-style: dashed; border-color: var(--text-tertiary); }
.week-day .dot.today-empty { border-color: var(--text); }
@keyframes dotIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Greeting (human touch, Fraunces) ---- */
.greeting { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--text-secondary); margin: 0 2px 14px; letter-spacing: var(--tracking-display); }
/* the name carries the Masohi mint→orchid gradient (background-clip: text) */
.greeting b {
  font-weight: 500;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- The ring (day-of-90) ------------------------------------------------
   Three stacked circles: track, gray progress, gradient progress. The gray
   one animates its dashoffset on mount (JS sets the target on the next
   frame); the gradient layer sits on top at opacity 0 and fades in when
   today's check-in is done — color arriving as the reward. */
.ringwrap { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0 var(--space-2); position: relative; }
.ring { width: 176px; height: 176px; position: relative; display: flex; align-items: center; justify-content: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .prog-circle { transition: stroke-dashoffset .9s var(--ease-standard); }
.ring .done-layer { transition: opacity .7s var(--ease-standard); }
.ring .day-count { font-size: 54px; line-height: 1; }
.ring .day-of { font-size: 12px; color: var(--text-secondary); margin-top: 4px; letter-spacing: .04em; }
.ring .state-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 7px; transition: color var(--duration-med); }
.ring.done .state-label { color: var(--text-secondary); }
.streakline { display: flex; align-items: center; gap: 7px; margin-top: var(--space-4); font-size: 13px; color: var(--text-secondary); }
.streakline b { color: var(--text); font-weight: 600; }
.streakline .icon { color: var(--sand); }

/* check spring-pop — applied per toggle via JS, not on render */
@keyframes springPop { 0% { transform: scale(.3); } 55% { transform: scale(1.25); } 80% { transform: scale(.92); } 100% { transform: scale(1); } }
.check.pop { animation: springPop .42s var(--ease-standard); }

/* ---- Section headers ---- */
.sectionhead { display: flex; align-items: center; justify-content: space-between; margin: var(--space-6) 2px var(--space-3); gap: 10px; }
.sectionhead button { color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }

/* ---- Routine task rows ---- */
.task { display: flex; align-items: center; gap: 14px; padding: 14px 15px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 9px; min-height: var(--tap-min); transition: transform var(--duration-fast); }
.task:active { transform: scale(.99); }
.task .check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background var(--duration-fast), border-color var(--duration-fast); }
.task.done .check { background: var(--mint); border-color: var(--mint); color: #0d221d; }
.task .t-main { flex: 1; min-width: 0; }
.task .t-name { font-size: 14.5px; font-weight: 500; }
.task.done .t-name { color: var(--text-tertiary); text-decoration: line-through; }
.task .t-when { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.task .drag, .task .chev { color: var(--text-tertiary); font-size: 16px; }
.task .del { color: var(--danger); font-size: 18px; padding: 4px 8px; }

/* ---- Widgets grid (progress) ---- */
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 15px; }
.widget .wlabel { font-size: 10.5px; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.widget .wbig { font-size: 25px; font-weight: 300; }
.widget .wsub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }
.bar { height: 7px; border-radius: var(--radius-pill); background: var(--line-strong); margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gradient-brand); border-radius: var(--radius-pill); transition: width var(--duration-med) var(--ease-standard); }
.bar.grad i { background: var(--gradient-brand); }

/* ---- Metric cards (This week / Your orchid) — routine section ----
   Internal flex grid + margin-top:auto on the bar so both cards align layer
   for layer regardless of copy length. */
.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); align-items: stretch; }
.metric-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); min-width: 0; }
.metric-card .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 30px; }
.metric-card .info-dot { margin: -4px -4px -4px 0; }
.mc-label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.mc-value { font-family: var(--font-display); font-weight: 500; font-size: 23px; letter-spacing: var(--tracking-display); line-height: 1.1; white-space: nowrap; }
.mc-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); margin-top: 5px; margin-bottom: 14px; line-height: 1.3; }
.mc-sub svg { flex: 0 0 auto; opacity: .85; }
/* margin-top:auto keeps both bars pinned to the card bottom (aligned across
   cards); mc-sub's margin-bottom guarantees a >=14px gap even when tight */
.metric-card .bar { margin-top: auto; }
/* very narrow phones: stack the pair rather than crush it */
@media (max-width: 340px) { .metric-row { grid-template-columns: 1fr; } }

/* ---- Gradient value text (Average itch / Peak itch) ---- */
.grad-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Top triggers (one wide widget, three equal boxes) ---- */
.tt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
.tt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.tt-title { font-size: 14.5px; font-weight: 600; }
.tt-period { font-size: 11.5px; color: var(--text-tertiary); }
.tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tt-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 11px 12px; }
.tt-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; color: var(--sand); flex: 0 0 auto; }
/* reserve two lines for the name so every count sits on the same baseline */
.tt-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-count { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: var(--tracking-display); margin-top: auto; }
/* very narrow: let the three boxes scroll horizontally rather than shrink */
@media (max-width: 360px) {
  .tt-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .tt-box { flex: 0 0 46%; scroll-snap-align: start; }
}

/* ---- List card (product timeline, reports) ---- */
.list-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }

/* ---- Card subtitle (same scale everywhere: factors, report) ---- */
.card-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; margin: 4px 0 14px; }

/* ---- Segmented period control (7D / 30D / 90D) ---- */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px; gap: 2px; }
.seg-btn { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); padding: 5px 11px; border-radius: var(--radius-pill); min-height: 30px; }
.sectionhead .seg-btn.on { color: var(--text); background: var(--surface-hover); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* ---- Chart card head + summaries ---- */
.chart-caption { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.chart-caption .cc-title { font-size: 14.5px; font-weight: 600; }
.chart-caption .cc-period { font-size: 11.5px; color: var(--text-tertiary); }
.chart-caption .info-dot { margin-left: auto; }
.linechart text.ax, svg text.ax { fill: var(--text-tertiary); font-size: 9px; font-family: var(--font-ui); }
.stat-chips { display: flex; gap: 10px; margin-bottom: 12px; }
.stat-chip { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.stat-chip span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 3px; }
.stat-chip b { font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.chart-oneline { font-size: 13.5px; font-weight: 600; color: var(--mint); margin-bottom: 3px; }
.chart-sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.chip-mini { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* ---- Preview (dim sample) empty state ---- */
.preview-wrap { position: relative; min-height: 132px; }
.preview-chart { filter: saturate(.55); opacity: .32; pointer-events: none; }
.freq-preview { padding: 4px 0; }
/* Product preview holds two text rows; give it more height and push the rows to
   the top/bottom edges so the overlay copy lands in the clear middle */
.preview-wrap.pv-prod { min-height: 184px; }
.pv-prod-chart { display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; }
.preview-badge { position: absolute; top: 0; left: 0; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); z-index: 2; }
.preview-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: var(--space-4); }
.preview-overlay .po-title { font-size: 14px; font-weight: 600; }
.preview-overlay .po-sub { font-size: 12.5px; color: var(--text-secondary); max-width: 240px; }

/* ---- Read-only detail rows (point / sleep / day sheets) ---- */
.read-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.read-row:last-child { border-bottom: none; }
.read-row span { font-size: 13px; color: var(--text-secondary); flex: 0 0 auto; }
.read-row b { font-size: 13.5px; font-weight: 600; text-align: right; }
.read-note { padding: 11px 0; border-top: 1px solid var(--line); }
.read-note span { font-size: 13px; color: var(--text-secondary); }
.read-note p { font-size: 13px; margin-top: 5px; line-height: 1.5; }

/* ---- Month comfort calendar ---- */
.cal-count { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.cal-head span { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-tertiary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.cal-cell.blank { border: none; }
.cal-cell .cal-num { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.cal-cell.calm { background: rgba(158, 217, 205, .75); border-color: transparent; }
.cal-cell.mild { background: rgba(158, 217, 205, .42); border-color: transparent; }
.cal-cell.irritated { background: rgba(158, 217, 205, .18); border-color: transparent; }
.cal-cell.flare { background: rgba(167, 138, 216, .42); border-color: transparent; }
.cal-cell.calm .cal-num, .cal-cell.flare .cal-num { color: var(--text-on-reward); font-weight: 600; }
.cal-cell.today { outline: 1.5px solid var(--text); outline-offset: 1px; }
.cal-cell.future .cal-num { opacity: .35; }
.cal-cell:active:not(.blank):not(.future) { transform: scale(.94); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.cal-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cal-legend .sw.calm { background: rgba(158, 217, 205, .75); }
.cal-legend .sw.mild { background: rgba(158, 217, 205, .42); }
.cal-legend .sw.irritated { background: rgba(158, 217, 205, .18); border: 1px solid var(--line-strong); }
.cal-legend .sw.flare { background: rgba(167, 138, 216, .42); }
.cal-legend .sw.none { background: transparent; border: 1px solid var(--line-strong); }

/* ---- Factors logged (relative frequency bars) ---- */
.freq-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.freq-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--sand); flex: 0 0 auto; }
.freq-main { flex: 1; min-width: 0; }
.freq-name { font-size: 13px; font-weight: 600; }
.freq-bar { height: 7px; border-radius: var(--radius-pill); background: var(--line); margin-top: 6px; overflow: hidden; }
.freq-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--gradient-brand); }
.factor-empty { padding: 6px 0 4px; }

/* ---- Insight card ("Something to watch") ---- */
.insight-card { background: var(--surface); border: 1px solid var(--orchid-line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.insight-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orchid); margin-bottom: 8px; }
.insight-text { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: var(--tracking-display); }
.insight-basis { font-size: 12px; color: var(--text-tertiary); margin: 6px 0 12px; }
.insight-disc { font-size: 11.5px; color: var(--text-tertiary); margin-top: 12px; }

/* ---- Timeline / list rows (product changes) ---- */
.tl-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tl-row:last-of-type { border-bottom: none; }
.tl-date { font-size: 11.5px; color: var(--text-tertiary); flex: 0 0 46px; }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-main b { font-size: 13.5px; font-weight: 600; }
.tl-note { font-size: 11.5px; color: var(--text-tertiary); }
.tl-change { font-size: 11.5px; font-weight: 600; color: var(--mint); flex: 0 0 auto; text-align: right; }
.list-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; font-weight: 600; padding: 12px 2px 2px; margin-top: 4px; }

/* ---- Supporting habits: category selector + habit cards ---- */
.cat-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 10px; margin: 0 -2px 6px; scroll-snap-type: x proximity; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; min-height: 38px; white-space: nowrap; scroll-snap-align: start; }
.cat-chip svg { color: var(--text-tertiary); }
.cat-chip.on { color: var(--text); border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-brand) border-box; }
.cat-chip.on svg { color: var(--mint); }
.habit-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; }
.habit-card .hc-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--mint); flex: 0 0 auto; }
.habit-card .hc-main { flex: 1; min-width: 0; }
.habit-card .hc-title { font-size: 14px; font-weight: 600; }
.habit-card .hc-sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.habit-card .hc-info { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-tertiary); }
.habit-card .hc-add { flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; gap: 5px; }
.habit-card .hc-add.on { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }

/* ---- Habit guide sheet (full height) ---- */
/* guide sheet: caps at 75% so the backdrop above stays tappable to dismiss;
   content scrolls, Add button stays pinned with safe area */
.modal-sheet.hg-sheet { max-height: 75vh; padding-bottom: 0; }
.hg-sheet .sheet-scroll { flex: 1 1 auto; padding-bottom: 6px; }
.hg-sheet .btn-row.hg-actions { flex: 0 0 auto; padding: 14px 0 calc(16px + var(--safe-bottom)); background: var(--bg-elevated); border-top: 1px solid var(--line); }
.hg-label { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: var(--radius-pill); padding: 3px 10px; margin-bottom: 10px; }
.hg-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: var(--tracking-display); margin-bottom: 8px; line-height: 1.15; }
.hg-summary { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 4px; }
.hg-h { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin: 18px 0 6px; }
.hg-p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.hg-list { margin: 4px 0 0 18px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.hg-review { font-size: 12px; color: var(--text-tertiary); margin-top: 12px; }

/* ---- Insight chart (simple bar chart, no external lib) ---- */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 8px; }
.chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chart .bar-col .fill { width: 100%; border-radius: 3px 3px 0 0; background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom: none; }
.chart .bar-col .lbl { font-size: 9px; color: var(--text-tertiary); }
.pattern-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-top: var(--space-3); }
.pattern-note b { color: var(--text); }

/* ---- Locked / faded data (Zero pattern 9 — never a hard wall) ---- */
.locked-wrap { position: relative; }
.locked-wrap .locked-content { filter: blur(3px) saturate(.6); opacity: .6; pointer-events: none; user-select: none; }
.locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: var(--space-4);
  background: linear-gradient(180deg, transparent, var(--bg) 70%);
}
.locked-overlay .msg { font-size: 13.5px; font-weight: 600; max-width: 240px; }

/* ---- Trigger chips ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* min-height was 36px — below the 44px tap-target floor (UX-REVIEW.md finding #4) */
.chip { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 9px 14px; font-size: 13px; font-weight: 500; min-height: var(--tap-min); display: inline-flex; align-items: center; }
.chip.sel { background: var(--mint-soft); border-color: var(--mint-line); color: var(--mint); }

/* ---- Score picker (comfort/sleep 1-5) ---- */
.score-row { display: flex; gap: 8px; }
.score-dot { flex: 1; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; min-height: var(--tap-min); }
.score-dot.sel { background: var(--mint); color: #0d221d; border-color: var(--mint); }

/* ---- Milestone / reward screen (Opal gem pattern, fully alive) ----------
   Sequence on unlock: particles rise from below, the gem reveals with a
   scale+blur pop, then breathes with a slow glow pulse; text and pill fade
   in staggered. All of it collapses to a static frame under reduced-motion
   (global rule at the top of this file). */
.reward-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); padding: 0 var(--space-6); position: relative; overflow: hidden; }
.gem { width: 128px; height: 128px; border-radius: 46% 54% 61% 39% / 40% 45% 55% 60%; display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; animation: gemReveal .8s var(--ease-standard) backwards; }
.gem::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, var(--gradient-glow), transparent 65%); z-index: -1; animation: glowPulse 3.2s ease-in-out 1s infinite alternate; }
@keyframes gemReveal { 0% { transform: scale(.5) rotate(-8deg); opacity: 0; filter: blur(6px); } 60% { transform: scale(1.07) rotate(1deg); opacity: 1; filter: blur(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes glowPulse { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
.reward-hero > div:not(.gem):not(.particle) { animation: riseIn .6s var(--ease-standard) .25s backwards; }
.reward-hero .owned-pill { animation: riseIn .6s var(--ease-standard) .45s backwards; }
@keyframes riseIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.owned-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
/* celebration particles — spawned by JS on the unlock screen */
.particle { position: absolute; bottom: -24px; left: var(--px); width: var(--ps); height: var(--ps); border-radius: 50%; background: var(--pc); opacity: 0; pointer-events: none; animation: floatUp var(--pd) ease-in var(--pdel) forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .6; } 100% { transform: translateY(-78vh) translateX(var(--pdx)) scale(1.05); opacity: 0; } }

/* ---- Milestone collection grid ---- */
.gem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gem-slot { aspect-ratio: 1; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.gem-slot.locked { opacity: .4; }
.gem-slot .mini-gem { width: 40px; height: 40px; border-radius: 46% 54% 61% 39% / 40% 45% 55% 60%; }
.gem-slot .lbl { font-size: 10.5px; color: var(--text-secondary); font-weight: 600; }

/* ---- Paywall plan cards ---- */
.plan { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 18px var(--space-4); position: relative; background: var(--surface); min-height: 104px; display: flex; flex-direction: column; justify-content: center; }
.plan + .plan { margin-top: 12px; }
.plan.sel { border-color: var(--text); background: var(--surface-2); }
.plan .ptop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan h3 { font-size: 16px; font-weight: 600; }
.plan .price { font-size: 24px; font-weight: 300; line-height: 1; white-space: nowrap; }
.plan .price small { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.plan p { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }
.badge { position: absolute; top: -10px; right: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .04em; }
.trust-line { margin-top: 18px; color: var(--text-secondary); }

/* ---- Faded-history paywall state (trial expired) ---- */
.trial-expired-banner { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.trial-expired-banner .tt { font-weight: 600; font-size: 14px; margin-bottom: 4px; }

/* ---- Nav bar (5 tabs incl. Learn) ---- */
.nav { flex: 0 0 auto; display: flex; justify-content: space-around; padding: 9px 6px calc(13px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(8,9,11,.85); backdrop-filter: blur(16px); }
.nav button { color: var(--text-tertiary); font-size: 10px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: var(--tap-min); min-height: var(--tap-min); justify-content: center; transition: color var(--duration-fast); }
.nav button.on { color: var(--mint); }
.nav .icon { display: block; }

/* ---- Learn tab ---- */
.learn-featured { position: relative; height: 190px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; cursor: pointer; display: flex; align-items: flex-end; }
.learn-featured:active { transform: scale(.99); }
.lf-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,11,.85) 100%); }
.lf-body { position: relative; padding: 16px 18px; }
.lf-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.85); }
.lf-title { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: var(--tracking-display); margin-top: 6px; line-height: 1.25; color: #fff; }
.learn-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; min-height: var(--tap-min); }
.learn-row:active { opacity: .8; }
.lr-thumb { width: 58px; height: 58px; border-radius: 14px; flex: 0 0 auto; }
.lr-main { flex: 1; min-width: 0; }
.lr-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.lr-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }
.lr-chev { color: var(--text-tertiary); }

/* ---- Learn topic feed (v9) ---- */
.topic-row { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 0 12px; margin: 2px -2px 6px; }
.topic-row::-webkit-scrollbar { display: none; }
.topic-card { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 56px; max-width: 220px; padding: 9px 12px 9px 9px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); scroll-snap-align: start; }
.topic-card .tc-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-on-reward); flex: 0 0 auto; }
.topic-card .tc-main { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.topic-card .tc-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--text-secondary); }
.topic-card .tc-sub { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.topic-card .tc-check { width: 14px; display: inline-flex; align-items: center; color: var(--mint); flex: 0 0 auto; }
.topic-card.on { border: 1px solid transparent; background: linear-gradient(var(--surface-hover), var(--surface-hover)) padding-box, var(--gradient-brand) border-box; box-shadow: 0 8px 26px -12px rgba(167,138,216,.5); }
.topic-card.on .tc-name { color: var(--text); }

/* per-topic product widget */
.prod-widget { display: block; position: relative; min-height: 96px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff; margin-bottom: 16px; border: 1px solid var(--orchid-line); }
.pw-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.62), rgba(8,9,11,.22)); }
.prod-widget.reward-day7 .pw-scrim { background: linear-gradient(90deg, rgba(8,9,11,.34), rgba(8,9,11,.1)); }
.pw-body { position: relative; padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; }
.pw-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pw-title { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.2; }
.pw-desc { font-size: 12.5px; color: rgba(255,255,255,.88); }
.pw-cta { margin-top: 9px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(4px); }

/* featured "Start here" card */
.feat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 6px; cursor: pointer; }
.feat-card:active { transform: scale(.995); }
.feat-cover { height: 150px; background-size: cover; background-position: center; }
.feat-main { padding: 14px 16px 16px; }
.feat-title { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.feat-sum { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
.feat-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); margin-top: 10px; }

/* article list rows */
.art-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.art-row:last-of-type { border-bottom: none; }
.art-row:active { opacity: .82; }
.ar-thumb { width: 64px; height: 64px; border-radius: 14px; flex: 0 0 auto; background-size: cover; background-position: center; }
.ar-main { flex: 1; min-width: 0; }
.ar-title { font-size: 14px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-sum { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); margin-top: 5px; }
.learn-empty { text-align: center; padding: 30px 16px 20px; }
.learn-empty .le-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin-bottom: 6px; }
.search-field { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 10px 16px; color: var(--text-tertiary); }
.search-field input { flex: 1; background: none; border: none; color: var(--text); font-size: 15px; outline: none; }

/* ---- Article view ---- */
.art-cover { height: 210px; position: relative; }
.art-back { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(8,9,11,.55); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; }
.art-wrap { padding: 20px var(--space-5) 0; }
.art-title { margin: 8px 0 14px; }
.art-body .art-h { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin: 22px 0 8px; letter-spacing: var(--tracking-display); }
.art-body .art-p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 10px 0; }
.art-body .art-p b, .art-body .art-p strong { color: var(--text); }
.art-body .art-p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.art-body .art-q { font-family: var(--font-display); font-size: 18px; font-style: italic; line-height: 1.5; color: var(--text); border-left: 2px solid var(--line-strong); padding: 4px 0 4px 16px; margin: 20px 0; }
.art-body .art-fig { margin: 18px 0; }
.art-body .art-fig img { width: 100%; border-radius: var(--radius-md); display: block; }
.art-body .art-fig figcaption { font-size: 11.5px; color: var(--text-tertiary); margin-top: 7px; }
/* v9 article view extras */
.art-topicmeta { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .09em; font-weight: 600; color: var(--text-secondary); }
.art-topicmeta .atm-dot { opacity: .55; }
.art-intro { font-size: 16px; line-height: 1.6; color: var(--text); margin: 2px 0 16px; }
.art-body .art-ul, .art-body .art-ol { margin: 12px 0 12px 20px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.art-body .art-ul li, .art-body .art-ol li { margin: 6px 0; }
.art-callout { border-radius: var(--radius-md); padding: 14px 16px; margin: 18px 0; border: 1px solid var(--line); }
.art-callout.info { background: var(--mint-soft); border-color: var(--mint-line); }
.art-callout.important { background: var(--orchid-soft); border-color: var(--orchid-line); }
.art-callout .ac-title { font-weight: 700; font-size: 12.5px; margin-bottom: 5px; }
.art-callout.info .ac-title { color: var(--mint); }
.art-callout.important .ac-title { color: var(--orchid); }
.art-callout .ac-text { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.art-product-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--orchid-line); border-radius: var(--radius-lg); padding: 14px; margin: 22px 0; background: var(--surface); }
.apc-img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.apc-body { flex: 1; min-width: 0; }
.apc-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-tertiary); }
.apc-title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; margin-top: 2px; }
.apc-desc { font-size: 13px; color: var(--text-secondary); margin: 5px 0 0; line-height: 1.45; }
.apc-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid var(--mint-line); background: var(--mint-soft); color: var(--mint); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.ra-eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.ra-title { font-family: var(--font-display); font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.art-related { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.art-sources { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.art-sources summary { font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.art-sources ul { margin: 10px 0 0 18px; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.6; }
.art-sources a { color: var(--text-secondary); }
.art-extra-disc { font-size: 12px; color: var(--text-secondary); margin-top: 16px; line-height: 1.5; }
.art-disclaimer { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; margin: 14px 0 10px; }
.art-task.added { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }
.art-product { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 13px; margin: 20px 0; }
.art-product .ap-img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.art-product .ap-ph { background: var(--gradient-brand); }
.art-product .ap-main { flex: 1; min-width: 0; }
.art-product .ap-main b { font-size: 14px; }
.art-product .ap-main p { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.art-product .ap-btn { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--text); min-height: 36px; display: inline-flex; align-items: center; }

/* ---- Floating log button + fan menu (Zero pattern 8) ---- */
.fab-wrap { position: absolute; right: 18px; bottom: 84px; z-index: 40; }
.fab { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transition: transform var(--duration-fast); }
.fab.open { transform: rotate(45deg); }
/* bottom must clear the FAB (bottom 84px + 54px height): with the old 66px the
   lowest fan item sat underneath the FAB and its taps were intercepted.
   Found via headless drive test. */
.fan-menu { position: absolute; right: 23px; bottom: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--duration-med), transform var(--duration-med); z-index: 41; }
.fan-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.fan-item { display: flex; align-items: center; gap: 10px; }
.fan-item .lbl { font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line-strong); padding: 7px 12px; border-radius: var(--radius-pill); }
.fan-item .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity var(--duration-med); z-index: 35; }
.scrim.show { opacity: 1; pointer-events: auto; }

/* ---- Modal (check-in etc.) ---- */
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; z-index: 60; opacity: 0; pointer-events: none; transition: opacity var(--duration-med); }
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal-sheet { width: 100%; background: var(--bg-elevated); border-radius: 26px 26px 0 0; padding: var(--space-5); max-height: 84%; overflow-y: auto; transform: translateY(24px); transition: transform var(--duration-med) var(--ease-standard); border: 1px solid var(--line); border-bottom: none; }
.modal-backdrop.show .modal-sheet { transform: none; }
.modal-handle { width: 36px; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 0 auto var(--space-4); }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }

/* ---- Toast ---- */
/* pointer-events: none is load-bearing — the toast now lives permanently in the
   app shell, and an invisible (opacity:0) element without it intercepts every
   tap on whatever sits underneath. Found via headless-browser drive test. */
.toast { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); padding: 12px 18px; border-radius: 14px; font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity var(--duration-med), transform var(--duration-med); z-index: 80; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Misc structural ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0 var(--space-2); }
.backbtn { color: var(--text-secondary); font-size: 14px; display: flex; align-items: center; gap: 6px; padding: var(--space-2) 0; margin-bottom: var(--space-2); min-height: var(--tap-min); }
/* was 40x40 — below the 44px tap-target floor (UX-REVIEW.md finding #4) */
.iconbtn { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.addfield { display: flex; gap: 9px; margin-bottom: var(--space-3); }
.addfield input { flex: 1; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 13px; padding: 13px 14px; font-size: 14px; min-height: var(--tap-min); }
.addfield input:focus { border-color: var(--text-secondary); outline: none; }
.addfield button { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 13px; width: var(--tap-min); min-height: var(--tap-min); font-size: 20px; flex: 0 0 auto; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); min-height: var(--tap-min); }
.setting-row:last-child { border-bottom: none; }
.setting-row .name { font-size: 14.5px; font-weight: 500; }
.setting-row .sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.toggle { width: 46px; height: 27px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line-strong); position: relative; flex: 0 0 auto; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--duration-fast), background var(--duration-fast); }
.toggle.on { border-color: var(--mint-line); background: var(--mint-soft); }
.toggle.on .knob { transform: translateX(19px); background: var(--mint); }

/* ---- Consistent subscreen back button ---- */
.btn-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 8px 15px 8px 11px; min-height: var(--tap-min); font-size: 13.5px; font-weight: 600; margin-bottom: var(--space-4); }
.btn-back .bb-ic { display: inline-flex; transform: scaleX(-1); }
.help-title { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: var(--tracking-display); margin: 6px 0 14px; line-height: 1.15; }
.help-list { margin: 0 0 0 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.help-list li { margin-bottom: 4px; }
.help-textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text); font: inherit; font-size: 14px; resize: vertical; margin-bottom: 12px; }
.input-error { border-color: var(--danger) !important; }
.error-text { color: var(--danger) !important; }
.success-check { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; background: var(--mint-soft, rgba(120,200,170,.16)); color: var(--mint, #8fd6b6); }

/* ---- Legal documents (Terms, Privacy policy) ---- */
.legal-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 18px; }
.legal-toc .toc-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 5px; font-size: 13.5px; line-height: 1.4; }
.legal-toc a { color: var(--text-secondary); text-decoration: none; }
.legal-toc a:hover { color: var(--text); }
.legal-updated { font-size: 12px; color: var(--text-tertiary); margin: -6px 2px 16px; }
.legal-sec { margin-bottom: 22px; scroll-margin-top: 12px; }
.legal-sec h2 { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: var(--tracking-display); margin: 0 0 8px; line-height: 1.25; }
.legal-sec p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 10px; }
.legal-sec ul { margin: 0 0 10px 18px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.legal-sec li { margin-bottom: 5px; }
.legal-sec b { color: var(--text); }
.legal-callout { background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--mint, #8fd6b6); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px; }
.legal-callout p { margin: 0; }

/* ---- FAQ (collapsible) ---- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 16px 2px; font-size: 14.5px; font-weight: 600; color: var(--text); min-height: var(--tap-min); }
.faq-chev { color: var(--text-tertiary); transition: transform var(--duration-fast); flex: 0 0 auto; }
.faq-item.open .faq-chev { transform: rotate(90deg); }
.faq-a { display: none; padding: 0 2px 14px; }
.faq-item.open .faq-a { display: block; }
.faq-a .muted { font-size: 13.5px; line-height: 1.6; }

/* ---- Plans: member reviews ---- */
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }
.review-card .rc-stars { color: var(--sand); font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; }
.review-card .rc-text { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.review-card .rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.review-card .rc-name { font-size: 13px; font-weight: 600; }
.review-card .rc-type { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mint); background: var(--mint-soft); border: 1px solid var(--mint-line); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }

/* ---- Dev drawer (prototype-only testing panel, see js/devtools.js) ---- */
.dev-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  background: #ff5d5d; color: #fff; font-size: 10px; font-weight: 700;
  padding: 10px 6px; border-radius: 8px 0 0 8px; z-index: 200;
  writing-mode: vertical-rl; letter-spacing: .08em;
}
.dev-drawer {
  position: fixed; inset: 0; z-index: 210; background: rgba(0,0,0,.6);
  display: flex; justify-content: flex-end; opacity: 0; pointer-events: none;
  transition: opacity var(--duration-med);
}
.dev-drawer.open { opacity: 1; pointer-events: auto; }
.dev-panel {
  width: min(360px, 90vw); height: 100%; background: #1a1005; color: #fff;
  padding: var(--space-5); overflow-y: auto; border-left: 2px solid #ff5d5d;
  transform: translateX(16px); transition: transform var(--duration-med);
}
.dev-drawer.open .dev-panel { transform: none; }
.dev-panel h2 { color: #ffb347; font-size: 16px; margin-bottom: var(--space-4); }
.dev-panel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #ffb347; margin: var(--space-5) 0 var(--space-2); }
.dev-panel button { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 6px; min-height: 40px; }
.dev-panel button:active { background: rgba(255,255,255,.12); }
.dev-panel .dev-state { font-size: 11px; color: #ffb347; background: rgba(0,0,0,.3); border-radius: 8px; padding: 10px; margin-bottom: var(--space-4); white-space: pre-wrap; word-break: break-word; font-family: monospace; }

/* ---- Dev-only offline banner (visual simulation, see devtools.js) ---- */
body.dev-offline-sim::before {
  content: "⚡ Offline (simulated) — check-ins queue until back online";
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  background: #3a2a10; color: #ffb347; font-size: 11px; text-align: center; padding: 6px;
}

/* ==========================================================================
   v4 ADDITIONS — living color, fixed onboarding layouts, task icons,
   milestones redesign, quiz flow, progress charts
   ========================================================================== */

/* ---- soft background glow on hero screens (today + cold open) ---- */
/* Soft blurred mint+orchid haze behind the top of the screen. The blur is
   load-bearing: without it the element's rounded edge reads as a hard
   half-moon line instead of a glow. Colors fade out well before the edge so
   the blur has nothing crisp to reveal. */
.bg-glow {
  position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
  width: 480px; height: 380px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 32% 46%, rgba(158,217,205,.26) 0%, rgba(158,217,205,.10) 30%, transparent 58%),
    radial-gradient(circle at 70% 56%, rgba(167,138,216,.24) 0%, rgba(167,138,216,.09) 32%, transparent 60%);
  filter: blur(44px);
  opacity: .95;
}
.scroll { position: relative; z-index: 1; }

/* ---- cold-open color phases: object gains color with every tap ---- */
.cold-open { position: relative; }
.cold-open .phase-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-slow); background: radial-gradient(circle at 50% 38%, rgba(158,217,205,.16), rgba(167,138,216,.10) 45%, transparent 72%); }
.cold-open.phase-1 .phase-glow { opacity: .5; }
.cold-open.phase-2 .phase-glow { opacity: 1; }
.hero-object .core { transition: background var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard), border-radius var(--duration-slow) var(--ease-standard); }
.cold-open.phase-1 .hero-object .core { background: linear-gradient(150deg, #4a5a55, #2a3a38 60%, #3a3128); box-shadow: 0 0 30px -8px rgba(143,212,193,.3), inset 0 2px 12px rgba(255,255,255,.08); }
.cold-open.phase-2 .hero-object .core { background: var(--gradient-brand); box-shadow: 0 0 70px -6px rgba(158,217,205,.5), 0 0 90px -10px rgba(167,138,216,.4), inset 0 2px 14px rgba(255,255,255,.3); border-radius: 52% 48% 55% 45% / 45% 52% 48% 55%; }

/* ---- onboarding: fixed (non-scroll) layout + subtle back button ---- */
.ob-fixed { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: calc(52px + var(--safe-top)) var(--space-5) var(--space-4); min-height: 0; overflow-y: auto; position: relative; }
.ob-fixed::-webkit-scrollbar { display: none; }
/* matches the "‹ Back" style used elsewhere in the app (settings/article),
   pinned top-left over the scrolling conversation */
.ob-back { position: absolute; top: calc(8px + var(--safe-top)); left: var(--space-3); display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 14px; font-weight: 500; padding: 8px 14px; min-height: 40px; z-index: 20; background: rgba(8,9,11,.72); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.ob-back:active { opacity: .7; }

/* projection dot-visual: 7 day-dots per scenario instead of number cards */
.proj-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 15px; margin-bottom: 10px; }
.proj-row.win { border-color: var(--mint-line); background: var(--mint-soft); }
.proj-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.proj-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.proj-dots i.f { background: var(--text-tertiary); border-color: var(--text-tertiary); }
.proj-row.win .proj-dots i.f { background: var(--mint); border-color: var(--mint); }
.proj-main { flex: 1; min-width: 0; }
.proj-main b { font-size: 14px; }
.proj-main span { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

/* projection: single honest stat (66 days) + range + a day 1→90 track */
.stat-hero { text-align: center; margin: 8px 0 6px; }
.stat-hero .big { display: inline-block; font-family: var(--font-display); font-size: 46px; font-weight: 500; letter-spacing: var(--tracking-display); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-hero .lbl { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.stat-hero .rng { font-size: 12.5px; color: var(--text-tertiary); margin-top: 8px; }
.day-track { display: flex; align-items: center; gap: 10px; margin: 22px auto 4px; max-width: 320px; }
.day-track .cap { font-size: 11px; color: var(--text-secondary); letter-spacing: .08em; text-transform: uppercase; flex: 0 0 auto; }
.day-track .line { flex: 1; height: 2px; border-radius: 2px; background: var(--gradient-brand); opacity: .85; }

/* projection: consistency vs short-bursts hero graph + plain 66-day stat */
.cg-wrap { margin: 22px auto 8px; max-width: 360px; }
.consistency-graph { width: 100%; height: auto; display: block; }
.consistency-graph .cg-grid { stroke: var(--line); stroke-width: 1; opacity: .45; }
.consistency-graph .cg-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .03em; }
.consistency-graph .cg-miss { fill: var(--text-tertiary); }
.consistency-graph .cg-bursts { fill: var(--text-secondary); }
.consistency-graph .cg-cons { font-weight: 600; } /* fill set via url(#cgText) gradient on the element */
.stat-plain { text-align: center; margin: 40px auto 0; max-width: 320px; }
.stat-line { display: inline-flex; align-items: center; gap: 7px; }
.stat-num { font-family: var(--font-display); font-size: 42px; font-weight: 500; letter-spacing: var(--tracking-display); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.02; }
.stat-plain .info-dot { width: 22px; height: 22px; }
.stat-desc { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; max-width: 280px; margin-left: auto; margin-right: auto; }
.stat-kicker { font-size: 13.5px; font-weight: 500; color: var(--mint); margin-top: 10px; }
.info-dot { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--line); }
/* invisible 44x44 hit area for accessibility without enlarging the visual dot */
.info-dot::after { content: ""; position: absolute; inset: -8px; }
.info-dot:active { opacity: .6; }

/* 66-days card: compact, centered, info-dot pinned top-right */
.stat-card { position: relative; margin: 18px auto 0; max-width: 300px; text-align: center; padding: 18px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat-card .info-dot { position: absolute; top: 10px; right: 10px; }
.stat-card-num { font-family: var(--font-display); font-size: 34px; font-weight: 500; letter-spacing: var(--tracking-display); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.05; }
.stat-card-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }

/* access page: labelled field with an in-field confirm (no loose tick button) */
.field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.field-check { position: relative; }
.field-check input { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 13px; padding: 13px 44px 13px 14px; font-size: 14px; min-height: var(--tap-min); letter-spacing: .02em; }
.field-check input:focus { border-color: var(--mint-line); outline: none; }
.field-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.7); color: #6fd0b4; opacity: 0; transition: opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-standard); }
.field-ok.show { opacity: 1; transform: translateY(-50%) scale(1); }

/* info sheet: content scrolls, "Got it" button stays pinned at the bottom */
.modal-sheet.info-sheet { display: flex; flex-direction: column; overflow: hidden; }
.info-sheet .sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.info-sheet .sheet-scroll::-webkit-scrollbar { display: none; }
.info-sheet .sheet-scroll p:not(.tiny) { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.info-sheet .sheet-scroll p + p { margin-top: 10px; }
.sheet-sub { font-family: var(--font-display); font-size: 16.5px; font-weight: 500; margin: 16px 0 8px; color: var(--text); }

/* compact icon rows (plan summary + privacy) — leading chip, title, one line */
.icon-row { display: flex; gap: 14px; align-items: flex-start; padding: 15px 2px; }
.icon-row + .icon-row { border-top: 1px solid var(--line); }
.icon-row .ir-ic { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--mint); }
.icon-row .ir-main b { font-size: 15px; }
.icon-row .ir-main p { font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }

/* ---- task rows with icon chips + description ---- */
.task .t-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--mint); }
.task.done .t-icon { opacity: .5; }

/* ---- add/edit task modal ---- */
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: var(--space-4); }
.icon-choice { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); min-height: var(--tap-min); }
.icon-choice.sel { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }

/* ---- milestones collection redesign ---- */
.ms-card { display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 11px; position: relative; overflow: hidden; }
.ms-card:active { transform: scale(.99); }
.ms-gem { width: 62px; height: 62px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: rgba(13,18,16,.7); position: relative; }
/* orchid thumbnail on a soft gradient disc + tiny collectible stone marker */
.orchid { display: block; }
.orchid svg { display: block; }
.ms-orchid { flex: 0 0 auto; border-radius: 20px; position: relative; display: flex; align-items: center; justify-content: center; overflow: visible; }
.ms-orchid::before { content: ""; position: absolute; inset: 0; border-radius: 20px; opacity: 0.28; background: inherit; }
.ms-stone { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; background: inherit; box-shadow: 0 0 0 2px var(--surface); }
/* locked: simplified + desaturated preview, NOT heavy blur (per color system) */
.ms-card.locked .ms-orchid { filter: saturate(0.3) brightness(0.82); opacity: 0.7; }
.ms-card.locked { border-style: dashed; }
.ms-lock { position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); width: 62px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); z-index: 3; }
/* big orchid on the unlock/celebration screen */
.orchid-hero { width: 146px; height: 146px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; animation: gemReveal .8s var(--ease-standard) backwards; }
.orchid-hero::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, var(--gradient-glow), transparent 62%); z-index: -1; animation: glowPulse 3.2s ease-in-out 1s infinite alternate; }
.orchid-hero::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0.16; }
.ms-main { flex: 1; min-width: 0; }
.ms-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: var(--tracking-display); }
.ms-card.locked .ms-name { color: var(--text-secondary); }
.ms-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
/* unlocked = mint (reached progress); locked stays neutral/unsaturated */
.ms-reward-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--mint); }
.ms-card.unlocked { border-color: var(--mint-line); }
.ms-days-left { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; }

/* reward code row with copy button */
.code-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px dashed var(--sand-dim); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 12px; }
.code-row .code { flex: 1; font-family: monospace; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--sand); text-align: left; }
.code-row .copy-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--sand-soft); border: 1px solid var(--sand-dim); color: var(--sand); border-radius: var(--radius-pill); padding: 9px 15px; font-size: 12.5px; font-weight: 600; min-height: 38px; }

/* v9 unlock redesign: reached pill, rectangular reward card, gradient code row */
.reached-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.reward-hero .reached-pill { animation: riseIn .6s var(--ease-standard) .45s backwards; }
/* reward card + code row share ONE width, stacked tight (10–12px apart) */
.reward-block { width: 100%; max-width: 320px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.reward-card { width: 100%; border-radius: var(--radius-lg); padding: 22px 20px; color: var(--text-on-reward); text-align: center; }
.reward-card .reward-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.15; }
/* code row + Copy get the mint→orchid gradient border (uniform radius, no glow) */
.code-row.lux { margin-top: 0; border: 1.5px solid transparent; border-radius: var(--radius-md); background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box, var(--gradient-brand) border-box; }
.code-row.lux .code { color: var(--text); }
.code-row.lux.compact { padding: 9px 8px 9px 14px; }
.copy-btn.lux-thin { background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box, var(--gradient-brand) border-box; border: 1px solid transparent; color: #fff; }
.copy-btn.lux-thin.icon-only { padding: 0; width: 38px; min-height: 38px; justify-content: center; }
.copy-btn.copied { color: var(--mint); }

/* milestones: feedback quiz heading + bloomed-orchid collection */
.ms-quiz-title { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: var(--tracking-display); margin: 26px 0 2px; }
.collection-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.collect-orchid { width: 66px; height: 66px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }

/* quiz cards on milestones screen */
.quiz-card { border: 1px solid var(--mint-line); background: var(--mint-soft); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: 11px; }
.quiz-card .qc-top { display: flex; align-items: center; gap: 10px; }
.quiz-card .qc-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(143,212,193,.2); display: flex; align-items: center; justify-content: center; color: var(--mint); flex: 0 0 auto; }
.quiz-card b { font-size: 14.5px; }
.quiz-card .qc-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.quiz-card .qc-reward { margin-top: 10px; font-size: 12.5px; color: var(--sand); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* quiz flow */
/* shared calm progress indicator — onboarding questions AND the reward quiz use
   this same markup. Filled bars run mint→orchid across the steps (each bar sets
   --p = its position 0..1); upcoming bars stay a faint line. */
.quiz-progress { display: flex; gap: 5px; padding: var(--space-2) 0 var(--space-5); }
.quiz-progress i { height: 3px; flex: 1; border-radius: 3px; background: var(--line-strong); }
.quiz-progress i.on { background: color-mix(in srgb, var(--mint), var(--orchid) calc(var(--p, 0) * 100%)); }
.quiz-q { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.3; margin-bottom: var(--space-5); }
.quiz-scale { display: flex; gap: 8px; }
.quiz-open { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 13px 14px; min-height: 110px; resize: none; }
.quiz-open:focus { border-color: var(--mint-line); outline: none; }

/* ---- progress charts ---- */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.chart-legend { display: flex; gap: 14px; margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- v8: pill choices + 0–10 symptom row + Today's log ---- */
.pill-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-opt { flex: 1 1 auto; min-width: 72px; min-height: var(--tap-min); padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; }
.pill-opt.sel { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }
.score-row-11 { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.score-row-11 .score-dot.sm { width: auto; min-width: 0; height: 30px; font-size: 12px; border-radius: 8px; }

.log-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.log-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 5px 0; }
.log-row .icon { color: var(--mint); }
.log-row .lval { color: var(--text); font-weight: 600; }
.log-row .lmuted { color: var(--text-tertiary); }
.log-quick { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.log-quick button { border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--radius-pill); padding: 7px 12px; font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; min-height: 34px; }
.log-quick button.done { border-color: var(--mint-line); color: var(--mint); background: var(--mint-soft); }

/* ---- v9: Today circle milestone line + How-was-today quick check-ins ---- */
.milestone-line { text-align: center; font-size: 13.5px; color: var(--text-secondary); margin-top: 16px; }
.grad-num { font-weight: 700; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qc-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); min-height: 62px; text-align: left; transition: border-color var(--duration-fast), background var(--duration-fast); }
.qc-item:active { transform: scale(.99); }
.qc-item .qc-ic { color: var(--text-secondary); }
.qc-item .qc-lbl { font-size: 14.5px; font-weight: 600; color: var(--text); }
.qc-item .qc-status { font-size: 12px; color: var(--text-tertiary); }
.qc-item.done { border-color: var(--mint-line); background: var(--mint-soft); }
.qc-item.done .qc-ic, .qc-item.done .qc-status { color: var(--mint); }

/* stacked single-choice option rows (skin/sleep/products pop-ups) */
.pill-col { display: flex; flex-direction: column; gap: 8px; }
.pill-row { width: 100%; text-align: left; min-height: var(--tap-min); padding: 13px 15px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 500; }
.pill-row.sel { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }

/* range slider with a value bubble above the thumb */
.slider-wrap { position: relative; padding-top: 30px; }
.slider-top { position: relative; height: 0; }
.slider-bubble { position: absolute; top: -26px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.slider-wrap.unset .slider-bubble { color: var(--text-tertiary); }
.rslider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--mint), var(--orchid)) 0 / var(--fill, 50%) 100% no-repeat, var(--line-strong); outline: none; }
.slider-wrap.unset .rslider { background: var(--line-strong); }
.rslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--mint); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
.rslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--mint); cursor: pointer; }
.slider-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); }
.mini-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 4px 0; }
.mini-link.on { color: var(--mint); }
.tbar-note { color: var(--text-tertiary); margin-top: 2px; }

/* ---- v8: doctor report (screen + print) ---- */
.date-mini { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); }
.report-actions { display: flex; justify-content: space-between; gap: 10px; padding: calc(10px + var(--safe-top)) var(--space-5) 10px; flex: 0 0 auto; }
.report-actions .btn { width: auto; padding: 10px 16px; }
.report-print { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-6); }
.rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--line-strong); padding-bottom: 10px; margin-bottom: 10px; }
.rp-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.rp-brand { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--text-tertiary); flex: 0 0 auto; }
.rp-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.rp-chart { margin: 10px 0 4px; }
.rp-legend { display: flex; gap: 14px; margin-bottom: 8px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rp-line { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 8px 0; }
.rp-muted { color: var(--text-tertiary); }
.rp-h { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.rp-kv { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.rp-kv td { padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); overflow-wrap: break-word; vertical-align: top; }
.rp-kv td:nth-child(odd) { width: 27%; }
.rp-kv td:last-child { border-right: none; }
.rp-kv tr:last-child td { border-bottom: none; }
.rp-kv td:nth-child(odd) { color: var(--text-secondary); }
.rp-kv td:nth-child(even) { font-weight: 600; }
.rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.rp-table th, .rp-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.rp-table th:last-child, .rp-table td:last-child { border-right: none; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-table th { background: var(--surface-2); font-weight: 600; }
.rp-daydate { font-weight: 600; white-space: nowrap; }
.rp-note-cell { overflow-wrap: anywhere; }
.rp-list { margin: 6px 0 0 18px; font-size: 13.5px; line-height: 1.6; }

/* legend for missing values — a small card, shown on screen and in print */
.rp-legendcard { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); padding: 12px 14px; margin: 12px 0 6px; }
.rp-legendtitle { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.rp-legendgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rp-legendgrid > div { display: flex; flex-direction: column; gap: 2px; }
.rp-legendgrid b { font-size: 12.5px; }
.rp-legendgrid span { font-size: 11px; color: var(--text-secondary); }
@media (max-width: 520px) { .rp-legendgrid { grid-template-columns: 1fr; } }

/* mobile: turn wide report tables into stacked day cards (screen only; print keeps tables) */
@media screen and (max-width: 560px) {
  .rp-stack { border: none; border-radius: 0; overflow: visible; }
  .rp-stack thead { display: none; }
  .rp-stack, .rp-stack tbody, .rp-stack tr, .rp-stack td { display: block; width: auto; }
  .rp-stack tr { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px 14px; margin-bottom: 10px; }
  .rp-stack td { border: none !important; padding: 5px 0; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
  .rp-stack td::before { content: attr(data-label); color: var(--text-secondary); font-weight: 600; flex: 0 0 auto; }
  .rp-stack td.rp-daydate { display: block; font-family: var(--font-display); font-size: 16px; border-bottom: 1px solid var(--line) !important; padding-bottom: 8px; margin-bottom: 6px; }
  .rp-stack td.rp-daydate::before { display: none; }
  .rp-stack td.rp-note-cell { display: block; }
  .rp-stack td.rp-note-cell::before { display: block; margin-bottom: 3px; }
}
.rp-disclaimer { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.5; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 10px; }

/* ---- Reports: dashboard card ---- */
.report-card .rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.report-card .rc-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: var(--tracking-display); }
.report-card .card-sub { margin-top: 4px; }
.report-card .rc-meta { font-size: 12px; color: var(--text-tertiary); }
.report-card .btn.lux { width: 100%; }
.report-card .list-more { justify-content: center; width: 100%; color: var(--text-secondary); }

/* ---- Reports: 3-step builder ---- */
.rb-steps { display: flex; gap: 6px; }
.rb-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.rb-dot.on { background: var(--gradient-brand); }
.rb-dot.done { background: var(--mint); }
.rb-list { display: flex; flex-direction: column; gap: 10px; }
.rb-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 500; min-height: var(--tap-min); }
.rb-opt.sel { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }
.rb-count { font-size: 13px; color: var(--text-secondary); margin-top: 14px; text-align: center; }
.rb-dates { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rb-dates label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.rb-dates .date-mini { font-size: 14px; }
.rb-selrow { display: flex; gap: 16px; margin-bottom: 12px; }
.rb-selrow .mini-link { font-size: 13px; }
.rb-checks { display: flex; flex-direction: column; gap: 8px; }
.rb-check { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; min-height: var(--tap-min); }
.rb-check.on { border-color: var(--mint-line); background: var(--mint-soft); }
.rb-check .rb-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--mint); flex: 0 0 auto; }
.rb-check.on .rb-box { border-color: var(--mint-line); background: var(--mint-soft); }

/* ---- Weekly reviews ---- */
.wr-range { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.wr-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }

/* print: hide app chrome, force the report to flow across A4 pages in B/W */
@media print {
  @page { size: A4; margin: 16mm; }
  body { background: #fff !important; color: #000 !important; }
  #app { position: static !important; height: auto !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; }
  .screens, .screen, .screen.active, .report-print { position: static !important; height: auto !important; overflow: visible !important; inset: auto !important; }
  /* force every app container light so nothing dark shows behind the report */
  #app, .screens, .screen, .screen.active, .report-print, .rp-chart { background: #fff !important; }
  .rp-kv, .rp-table td { background: #fff !important; }
  .screen:not(.active) { display: none !important; }
  .nav, .report-actions, .dev-tab, .dev-drawer, .bg-glow, .fab-wrap, .fan-menu { display: none !important; }
  .report-print { padding: 0 !important; color: #10141b !important; }
  .rp-title, .rp-h, .rp-kv td:nth-child(even), .rp-line, .rp-list, .rp-legendtitle, .rp-legendgrid b, .rp-daydate { color: #10141b !important; }
  .rp-brand, .rp-meta, .rp-muted, .rp-disclaimer, .rp-kv td:nth-child(odd), .rp-legendgrid span { color: #45505f !important; }
  .rp-head { border-color: #10141b !important; }
  .rp-kv, .rp-table { border-color: #b9c0c9 !important; border-radius: 0 !important; }
  .rp-kv td, .rp-table th, .rp-table td { border-color: #b9c0c9 !important; }
  .rp-table th { background: #eef0f3 !important; }
  .rp-legendcard { background: #f4f5f7 !important; border-color: #cdd3da !important; }
  .rp-h { break-inside: avoid; break-after: avoid; } /* no orphaned section title */
  .rp-table thead { display: table-header-group; } /* repeat headers on every printed page */
  .rp-table tr, .rp-kv tr { break-inside: avoid; }
  .rp-chart svg text.ax { fill: #45505f !important; }
}

/* ---- v8: Learn knowledge base ---- */
.learn-product { display: block; position: relative; min-height: 92px; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: #fff; margin-bottom: 6px; }
.lp-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.55), rgba(8,9,11,.15)); }
.lp-body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 92px; }
.lp-text b { font-family: var(--font-display); font-weight: 500; font-size: 16px; display: block; }
.lp-text span { font-size: 12.5px; color: rgba(255,255,255,.85); }
.lp-btn { flex: 0 0 auto; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); padding: 9px 14px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; backdrop-filter: blur(4px); }

.kb-section { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; }
.kb-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; background: var(--surface); text-align: left; }
.kb-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.kb-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.kb-chev { color: var(--text-secondary); transition: transform var(--duration-fast); }
.kb-section.open .kb-chev { transform: rotate(90deg); }
.kb-body { display: none; padding: 0 14px 8px; }
.kb-section.open .kb-body { display: block; }

.art-tasks { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; }
.art-task { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mint-line); background: var(--mint-soft); color: var(--mint); border-radius: var(--radius-pill); padding: 9px 14px; font-size: 13px; font-weight: 600; margin: 0 8px 8px 0; min-height: 38px; }
.habit-toggle { flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; min-height: 34px; display: inline-flex; align-items: center; gap: 5px; }
.habit-toggle.on { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }

/* ---- Utility ---- */
.center-text { text-align: center; }
.flex-row { display: flex; align-items: center; gap: 10px; }
.spacer-sm { height: var(--space-3); }
.spacer-md { height: var(--space-6); }
.hidden { display: none !important; }