/* =====================================================================
   NARCISSOS · MENTAL HEALTH CLUB · COMPONENT LIBRARY  (v1.0 "Club Noir")
   ---------------------------------------------------------------------
   Load order: fonts.css → tokens.css → components.css
   Rules:
   · Components read ROLE tokens only (--fg, --accent, --signal …). No hex here.
   · Inline styles are allowed ONLY for data custom properties:
     --v (0..1 progress), --p (0..1 share), --tilt, --x/--y/--c/--w/--r/--dl (confetti), --gap.
   · Paper surfaces (.postit, .sheet--paper, .paper, .inv) re-scope the role tokens,
     so any component dropped on them adapts with no modifier class.
   · "Loud frame, quiet page": tickers, confetti, die-cut stickers and motion live
     only on splash, celebrations, games and rewards. Never on scan results, case
     analysis, articles or help lines.
   ===================================================================== */

/* ===================== 0. Base ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page)}
body{margin:0;background-color:var(--page);background-image:var(--page-glow);background-repeat:no-repeat;color:var(--fg);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ol,ul,figure,blockquote,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit}
img,svg{display:block}
mark{background:none;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}   /* the inlined icon sprite */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}
/* Long words (7 languages, German compounds): hyphenate by <html lang>, break as a last resort.
   Never rely on translators inserting &shy;. */
.display,.h1,.h2,.h3,.lede,.body,.prose,.row__t,.opt,.pat__t,.toc__t,.feature__t,.chap__t,.seg__opt,.tab__l,.btn,.chip,.statcell__v,.verdict__v,.onb__t,.empty__t,.modal__t,.toast__t{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}

/* ===================== 1. Layout utilities ===================== */
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:var(--gap,var(--s3))}          /* vertical rhythm without margins */
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--s2))}
.split{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.grow{flex:1;min-width:0}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}.mt-8{margin-top:var(--s8)}.mt-9{margin-top:var(--s9)}
.hr{height:0;border:0;border-top:var(--hair) solid var(--rule);margin:0}
.hr--strong{border-top:var(--bold) solid var(--rule-strong)}

/* ===================== 2. Icons ===================== */
/* <svg class="ic"><use href="#i-scan"/></svg> · stroke = currentColor · 24px grid, 2px marker line */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic--xs{width:14px;height:14px;stroke-width:2.6}
.ic--s{width:18px;height:18px;stroke-width:2.3}
.ic--l{width:32px;height:32px;stroke-width:1.8}
.ic--xl{width:44px;height:44px;stroke-width:1.6}
.ic--signal{color:var(--signal)}
.ic--inline{display:inline-block;vertical-align:-2px;margin-right:6px}
.pipsa{display:block;fill:currentColor;stroke:none}
/* the MHC black heart: always black, always on paper (yellow / cream / white) */
.heart{width:16px;height:16px;flex:none;color:var(--heart);fill:currentColor;stroke:none}

/* ===================== 3. Typography ===================== */
.eyebrow,.tw{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:var(--tr-label);text-transform:uppercase}
.eyebrow{color:var(--fg-2)}
.tw--plain{text-transform:none;letter-spacing:.02em}
.display{font-weight:var(--w-black);font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);text-transform:uppercase}
/* .fit poster heads: the widest unbreakable segment always fits its container (.mast is one). --ch = that segment
   in characters, set with the text, or its measured width in the same unit (progress.js _hmCh). 1.25 = 100cqi at
   0.8 em per character, so wide Montserrat Black capitals (W, M, O, D: "KNOWLEDGE") fit too. An h1 keeps the h1 size
   as its maximum. */
.display.fit{font-size:min(var(--t-display),calc(100cqi * 1.25 / var(--ch,1)))}
.h1.fit{font-size:min(var(--t-h1),calc(100cqi * 1.25 / var(--ch,1)))}
.mega{font-weight:var(--w-black);font-size:var(--t-mega);line-height:.78;letter-spacing:-.05em}
.h1{font-weight:var(--w-black);font-size:var(--t-h1);line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase}
.h2{font-weight:var(--w-heavy);font-size:var(--t-h2);line-height:1.12;letter-spacing:-.01em}
.h3{font-weight:var(--w-heavy);font-size:var(--t-h3);line-height:1.2;letter-spacing:-.005em}
.lede{font-size:var(--t-lead);line-height:1.45;font-weight:var(--w-body);color:var(--fg-2);text-wrap:pretty}
.body{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}
.small{font-size:var(--t-small);line-height:1.45;color:var(--fg-3)}
.quote{font-weight:var(--w-heavy);font-style:italic;font-size:clamp(25px,7.6vw,30px);line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
.quote--m{font-size:23px;line-height:1.25;text-wrap:pretty}
.fg{color:var(--fg)} .muted{color:var(--fg-3)} .signal{color:var(--signal)}
/* yellow highlighter swipe: the one phrase that is "for you". Max one per view. */
.mark{background:linear-gradient(transparent 56%,var(--accent) 56%,var(--accent) 92%,transparent 92%);color:inherit;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* hand-drawn terracotta underline on a detected phrase (wraps across lines) */
.hit{color:var(--fg);font-weight:var(--w-heavy);background:var(--scribble) repeat-x 0 100%/48px 8px;padding-bottom:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* hand-drawn marker ring around a SHORT phrase. In flow, so it can never misregister. */
.ring{position:relative;display:inline-block;max-width:100%;margin:0 7px 0 5px}
.ring::after{content:"";position:absolute;inset:-9px -13px -8px -15px;background:var(--signal);pointer-events:none;
  -webkit-mask:var(--doodle-ring) center/100% 100% no-repeat;mask:var(--doodle-ring) center/100% 100% no-repeat}
.ring--accent::after{background:var(--accent)}
/* hand-drawn marker underline under the last line of a poster headline (accent). Max one per view. */
.uline{position:relative;display:inline-block}
.uline::after{content:"";position:absolute;left:-1%;right:-3%;bottom:-.2em;height:.2em;background:var(--accent);pointer-events:none;
  -webkit-mask:var(--doodle-under) center/100% 100% no-repeat;mask:var(--doodle-under) center/100% 100% no-repeat}

/* ===================== 4. Paper surfaces (token re-scoping) ===================== */
.postit,.sticker,.diecut,.paper,.sheet--paper,.modal{
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --rule:var(--ink-rule); --rule-2:var(--ink-rule-2); --rule-strong:var(--ink);
  --inv-bg:var(--ink); --accent-text:var(--ink); --signal:var(--signal-ink);
  --progress:var(--ink); --progress-track:var(--ink-rule);
  --cta-bg:var(--ink); --cta-edge:var(--ink); --focus:var(--ink);
  --ok-bg:var(--ink);
  color:var(--fg)}
.postit,.sticker,.diecut{--bg:var(--accent); --inv-fg:var(--accent); --cta-fg:var(--accent); --ok-fg:var(--accent)}
.paper,.sheet--paper,.modal{--bg:var(--paper); --page:var(--paper); --bg-raise:var(--paper); --inv-fg:var(--paper); --cta-fg:var(--paper); --ok-fg:var(--paper); background:var(--paper)}
/* inverted poster block: white on Noir, ink on Paperi */
.inv{--bg:var(--inv-bg); --fg:var(--inv-fg); --fg-2:var(--inv-fg-2); --fg-3:var(--inv-fg-3); --rule:var(--inv-rule); --rule-2:var(--inv-rule-2); --rule-strong:var(--inv-fg);
  --progress:var(--inv-fg); --progress-track:var(--inv-rule); --cta-bg:var(--inv-fg); --cta-fg:var(--inv-bg); --cta-edge:var(--inv-fg); --focus:var(--inv-fg);
  background:var(--inv-bg); color:var(--inv-fg)}

/* ===================== 5. App shell ===================== */
.app{position:relative;min-height:100vh;min-height:100dvh;padding-bottom:calc(var(--tabbar-h) + var(--sab) + var(--s8))}
.app--notabs{padding-bottom:calc(var(--sab) + var(--s7))}
/* header: Pipsa logo · streak + points · language · theme · settings */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:2px;height:calc(var(--appbar-h) + var(--sat));padding:var(--sat) 8px 0 6px;background:var(--page);border-bottom:var(--hair) solid transparent}
.appbar.is-scrolled{border-bottom-color:var(--rule)}
.appbar__logo{width:48px;height:44px;display:grid;place-items:center;color:var(--fg);flex:none}
.appbar__logo .pipsa{width:34px;height:30px}
.appbar__sp{flex:1}
.statpair{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;border-radius:var(--r1)}
.stat{display:inline-flex;align-items:center;gap:5px;font-weight:var(--w-heavy);font-size:15px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.stat .ic{width:19px;height:19px;stroke-width:2.1}
.statpair__sep{width:1px;height:16px;background:var(--rule-2)}
.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;flex:none;border-radius:var(--r1);color:var(--fg);transition:transform var(--d1) var(--ease-out)}
.iconbtn:active{transform:scale(.92)}
.langbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;flex:none}
.langbtn span{display:grid;place-items:center;min-width:30px;height:26px;padding:0 5px;border:var(--line) solid var(--fg);border-radius:var(--r1);font-family:var(--f-type);font-weight:700;font-size:12.5px;letter-spacing:.08em}
/* sub bar for detail views: back + 0-2 actions */
.subbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:52px;padding:0 8px;border-bottom:var(--hair) solid var(--rule)}
.backbtn{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 10px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:var(--tr-label);text-transform:uppercase;text-decoration:none}
.subbar__acts{display:flex;align-items:center;gap:var(--s2)}
.subbar .link{padding:0 8px}

/* ===================== 6. Tab bar (6 tabs, safe-area aware) ===================== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  padding:4px 2px var(--sab);background:var(--page);border-top:var(--hair) solid var(--rule)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;min-height:var(--tabbar-h);padding:6px 1px 4px;color:var(--fg-3);text-decoration:none}
.tab__ic{width:46px;height:30px;display:grid;place-items:center;border-radius:var(--r1);transition:transform var(--d2) var(--ease-stick),background-color var(--d1)}
.tab__ic .ic{width:23px;height:23px}
/* Montserrat 11px mixed case: legible, and fits "Tapaukset", "Aufgaben", "Apprendre". Wraps, never truncates. */
.tab__l{max-width:100%;font-weight:600;font-size:var(--t-tab);line-height:1.12;letter-spacing:0;text-align:center}
.tab[aria-current="page"]{color:var(--fg)}
.tab[aria-current="page"] .tab__l{font-weight:var(--w-heavy)}
.tab[aria-current="page"] .tab__ic{background:var(--accent-paper);color:var(--on-accent);transform:rotate(-4deg);box-shadow:0 3px 0 -1px var(--accent-lo)}
.tab:active .tab__ic{transform:scale(.92)}

/* ===================== 7. Page structure ===================== */
.mast{padding:var(--s7) var(--gutter) 0;container-type:inline-size}
.mast__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.mast .lede{margin-top:var(--s4);max-width:32ch}
.sec{margin-top:var(--s9);padding:0 var(--gutter)}
.sec--tight{margin-top:var(--s7)}
.sec-h+.postit,.sec-h+.card{margin-top:var(--s6)}
/* section header: 02 · TITLE ······ META over a 2px rule */
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);padding-bottom:var(--s3);margin-bottom:var(--s1);border-bottom:var(--bold) solid var(--rule-strong)}
.sec-h__n{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;color:var(--fg-3);white-space:nowrap}
.sec-h__t{flex:1 1 auto;min-width:0;font-weight:var(--w-black);font-size:15px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.sec-h__m{margin-left:auto;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;color:var(--fg-2);text-transform:uppercase;white-space:nowrap}

/* ===================== 8. Buttons & links ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 var(--s5);
  border:var(--bold) solid var(--fg);border-radius:var(--r1);background:transparent;color:var(--fg);
  font-weight:var(--w-heavy);font-size:15px;line-height:1.15;letter-spacing:var(--tr-button);text-transform:uppercase;text-decoration:none;text-align:center;
  transition:transform var(--d1) var(--ease-out),background-color var(--d1),color var(--d1)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn--primary{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-edge)}        /* THE action. One per view. */
.btn--secondary{border-color:var(--fg)}                                                          /* = default outline */
.btn--strong{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}            /* poster white (ink on paper) */
.btn--ghost{border:var(--line) solid var(--rule-2);font-weight:var(--w-strong)}
.btn--calm{border:var(--line) solid var(--signal);color:var(--signal)}                         /* destructive, calm: never red */
.btn--block{display:flex;width:100%;justify-content:space-between;text-align:left}
.btn--center{justify-content:center}
.btn--sm{min-height:var(--tap);font-size:13px;padding:0 var(--s4)}
.btn--icon{width:var(--tap);min-height:var(--tap);padding:0;border-color:var(--rule-2)}
.btn .ic{flex:none}
.link{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;color:var(--fg)}
.link--plain{font-family:var(--f-sans);font-size:15px;font-weight:var(--w-strong);letter-spacing:0;text-transform:none}

/* action dock: keeps THE action reachable above the tab bar on long forms */
.dock{position:sticky;bottom:calc(var(--tab-h) + var(--sab) + 3px);z-index:15;margin:var(--s5) calc(-1 * var(--gutter)) 0;padding:var(--s4) var(--gutter) var(--s3);
  background:linear-gradient(to bottom,transparent,var(--page) 22px)}
.app--notabs .dock{bottom:calc(var(--sab) + 2px)}

/* ===================== 9. Chips & segmented control ===================== */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px;border:var(--hair) solid var(--rule-2);border-radius:var(--r1);
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.chip--solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip--signal{border-color:var(--signal);color:var(--signal)}
.chip--pro{border-color:var(--fg);color:var(--fg)}
.chip--btn{min-height:var(--tap);padding:6px 14px}
.chip--btn[aria-checked="true"],.chip--btn[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* segmented: icon over label, 58px, wraps long labels ("Soziale Medien") */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:var(--line) solid var(--rule-2);border-radius:var(--r1)}
.seg__opt{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;
  border-left:var(--line) solid var(--rule-2);font-weight:var(--w-strong);font-size:13px;line-height:1.15;text-align:center;color:var(--fg-2)}
.seg__opt:first-child{border-left:0}
.seg__opt .ic{width:20px;height:20px}
.seg__opt[aria-checked="true"],.seg__opt[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* ===================== 10. Cards ===================== */
.card{position:relative;display:block;padding:var(--s5);border:var(--line) solid var(--rule-2);border-radius:var(--r2);background:var(--bg);color:inherit;text-decoration:none}
.card--raise{background:var(--bg-raise);border-color:var(--rule)}
.card--strong{border:var(--bold) solid var(--fg)}
.card__h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:28px}

/* ===================== 11. Post-it · tape · fold · stickers (the signature) ===================== */
/* Rule: ONE big post-it per view. Post-its carry short, glanceable "for you" content.
   Long text, inputs and lists never sit on rotated paper (max tilt for text: .8deg). */
.postit{position:relative;display:block;padding:var(--s7) var(--s5) var(--s6);border-radius:var(--r1);color:var(--fg);
  background:var(--sheen),var(--accent-paper);
  box-shadow:var(--sh-postit);transform:rotate(var(--tilt,0deg))}
.postit--l{--tilt:var(--tilt-l)} .postit--r{--tilt:var(--tilt-r)} .postit--xs{--tilt:var(--tilt-xs)} .postit--xs-r{--tilt:.8deg}
.postit--tight{padding:var(--s5) var(--s4) var(--s4)}
/* colour variants: categories and rewards only, max ONE non-yellow note per view */
.postit--pink{--accent:var(--note-pink);--accent-paper:var(--note-pink);--accent-lo:var(--note-pink-lo)}
.postit--blue{--accent:var(--note-blue);--accent-paper:var(--note-blue);--accent-lo:var(--note-blue-lo)}
.postit--green{--accent:var(--note-green);--accent-paper:var(--note-green);--accent-lo:var(--note-green-lo)}
.postit--orange{--accent:var(--note-orange);--accent-paper:var(--note-orange);--accent-lo:var(--note-orange-lo)}
.postit--cream{--accent:var(--note-cream);--accent-paper:var(--note-cream);--accent-lo:var(--note-cream-lo)}
/* folded bottom-right corner: one pseudo paints the page through the cut + the flap */
.postit--fold::after{content:"";position:absolute;right:0;bottom:0;width:var(--fold);height:var(--fold);pointer-events:none;
  background:linear-gradient(315deg,transparent 50%,var(--sheen-hi) 100%),linear-gradient(315deg,var(--under,var(--page)) 50%,var(--accent-lo) 50%)}
/* pink striped washi tape (theme swaps the stripes) */
.tape{position:absolute;top:-13px;left:50%;width:104px;height:26px;transform:translateX(-50%) rotate(-3deg);pointer-events:none;z-index:2;
  background:repeating-linear-gradient(-45deg,var(--tape-a) 0 7px,var(--tape-b) 7px 14px);
  clip-path:polygon(0 8%,4% 0,100% 0,97% 22%,100% 46%,97% 70%,100% 100%,3% 100%,0 78%,3% 52%,0 28%)}
.tape--l{left:24%;width:86px;transform:translateX(-50%) rotate(-7deg)}
.tape--r{left:auto;right:-16px;top:-6px;width:78px;transform:rotate(36deg)}
.tape--sm{width:64px;height:20px;top:-10px}
/* sticker: small note for labels, quota, legend. Never placed over inputs or text. */
.sticker{display:inline-flex;align-items:center;gap:8px;position:relative;padding:8px 11px 9px;border-radius:var(--r1);
  background:var(--accent-paper);box-shadow:var(--sh-sticker);transform:rotate(var(--tilt,2.5deg));
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
.sticker b{font-family:var(--f-sans);font-weight:var(--w-black);font-size:20px;line-height:.9;letter-spacing:-.02em}
/* die-cut reward sticker with a white edge. Rewards only (Oikein!, streak, unlock). */
.diecut{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px 9px;border:3px solid var(--sticker-edge);border-radius:var(--r2);
  background:var(--accent-paper);box-shadow:var(--sh-sticker);transform:rotate(var(--tilt,-4deg))}
.diecut b{font-weight:var(--w-black);font-size:22px;line-height:1;letter-spacing:-.015em;text-transform:uppercase}
.diecut span{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase}
.diecut--row{flex-direction:row;align-items:center;gap:8px}
/* the black heart on a tiny yellow post-it: the MHC sign-off */
.heartnote{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;background:var(--note-yellow);border-radius:var(--r1);
  transform:rotate(-6deg);box-shadow:var(--sh-sticker)}
.heartnote .heart{width:17px;height:17px}

/* ===================== 12. Progress ===================== */
.bar{position:relative;height:6px;background:var(--progress-track);overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*100%);background:var(--progress);transform-origin:0 50%;animation:grow var(--d3) var(--ease-out) both}
.bar--thin{height:3px}
.bar--thick{height:10px}
/* "Päivän minuutti" as a measuring tape: 12 ticks (5 s each), long ticks at 0 / 30 / 60 s */
.mruler{position:relative;height:22px;
  background:
    linear-gradient(var(--fg),var(--fg)) 0 100%/2px 14px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 50% 100%/2px 11px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 100% 100%/2px 14px no-repeat,
    repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px 100%) 0 100%/calc((100% - 1px) / 12) 7px repeat-x,
    linear-gradient(var(--rule-2),var(--rule-2)) 0 100%/100% 1px no-repeat}
.mruler>i{position:absolute;left:0;bottom:3px;height:9px;width:calc(var(--v,0)*100%);background:var(--progress);opacity:.95;transform-origin:0 50%;animation:grow var(--d3) var(--ease-out) both}
.mruler>i::after{content:"";position:absolute;right:-1px;bottom:-3px;width:2px;height:20px;background:var(--fg)}
/* segmented progress (quiz 10 steps, weekly challenge 5 steps) */
.segbar{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:3px}
.segbar>i{height:5px;background:var(--progress-track)}
.segbar>i.on{background:var(--fg)}
.segbar>i.now{background:var(--progress)}
.segbar--tall>i{height:10px}
/* reading progress (top of reading view) */
.readprog{height:3px;background:var(--progress-track)}
.readprog>i{display:block;height:100%;width:calc(var(--v,0)*100%);background:var(--progress)}

/* ===================== 13. Checklist rows ===================== */
.row{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule);color:inherit;text-decoration:none}
.row__t{flex:1;min-width:0;font-weight:var(--w-strong);font-size:17px;line-height:1.25}
.row__s{display:block;margin-top:2px;font-weight:var(--w-body);font-size:var(--t-small);color:var(--fg-3)}
.row__m{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;color:var(--fg-3);white-space:nowrap;text-transform:uppercase}
.row__chev{width:18px;height:18px;stroke-width:2.3;color:var(--fg-3)}
.tick{width:28px;height:28px;flex:none;display:grid;place-items:center;border:var(--bold) solid var(--fg);border-radius:var(--r1);transition:transform var(--d2) var(--ease-stick)}
.tick .ic{width:18px;height:18px;stroke-width:3;opacity:0}
.is-done .tick{background:var(--accent-paper);border-color:var(--accent);color:var(--on-accent);transform:rotate(-5deg)}
.is-done .tick .ic{opacity:1}
.is-done .row__t{color:var(--fg-3);text-decoration:line-through;text-decoration-thickness:2px}

/* ===================== 14. Stats ===================== */
/* two-up data box (level | minute of the day) */
.statgrid{display:grid;grid-template-columns:1fr 1fr;border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule)}
.statcell{display:flex;flex-direction:column;gap:6px;min-width:0;padding:var(--s4) var(--s4) var(--s4) 0}
.statcell+.statcell{padding:var(--s4) 0 var(--s4) var(--s4);border-left:var(--hair) solid var(--rule)}
.statcell__v{font-weight:var(--w-black);font-size:21px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}
.statcell__of{font-weight:600;font-size:14px;letter-spacing:0;color:var(--fg-3)}
.statcell__m{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;color:var(--fg-3);text-transform:uppercase}
/* small typewriter count badge (+10, 2/5, Pro) */
.badge{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 7px;border:var(--line) solid currentColor;border-radius:var(--r1);
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge--accent{background:var(--accent-paper);color:var(--on-accent);border-color:var(--accent)}

/* ===================== 15. Answer options ===================== */
/* states: default · [aria-pressed=true] selected · .is-correct · .is-wrong · .is-dim / [disabled]
   Correct = check + the word "Oikein" + --ok fill. Wrong = calm terracotta edge + "Valintasi".
   Never dashed borders, never colour alone. */
.opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{position:relative;display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:10px 12px;
  border:var(--line) solid var(--rule-2);border-radius:var(--r1);background:transparent;color:var(--fg);
  font-weight:600;font-size:16px;line-height:1.3;text-align:left;transition:background-color var(--d1),border-color var(--d1)}
.postit .opt{border:var(--bold) solid var(--ink)}
.opt__k{width:28px;height:28px;flex:none;display:grid;place-items:center;border:var(--line) solid currentColor;border-radius:var(--r1);font-family:var(--f-type);font-weight:700;font-size:13px}
.opt__t{flex:1;min-width:0}
.opt__tag{display:inline-flex;align-items:center;gap:5px;flex:none;margin-left:auto;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase}
.opt__tag .ic{width:18px;height:18px;stroke-width:2.8}
.opt:active{transform:scale(.99)}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border:var(--bold) solid var(--fg)}
.opt[aria-pressed="true"] .opt__k,.opt[aria-checked="true"] .opt__k{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.opt.is-correct{background:var(--ok-bg);color:var(--ok-fg);border:var(--bold) solid var(--ok-bg)}
.opt.is-correct .opt__k{background:var(--ok-fg);color:var(--ok-bg);border-color:var(--ok-fg)}
.opt.is-wrong{border:var(--bold) solid var(--signal)}
.opt.is-wrong .opt__k{background:transparent;border-color:var(--signal);color:var(--signal)}
.opt.is-wrong .opt__tag{color:var(--signal)}
.opt.is-dim,.opt[disabled]:not(.is-correct):not(.is-wrong){color:var(--fg-3);border-color:var(--rule)}
.postit .opt.is-dim{border-color:var(--ink-rule-2)}
/* feedback line under options */
.fb{display:flex;align-items:flex-start;gap:var(--s4)}
.fb__t{font-weight:600;font-size:15.5px;line-height:1.45;color:var(--fg-2)}

/* ===================== 16. Level grid & chapters ===================== */
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.lvl{position:relative;aspect-ratio:1/1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:var(--line) solid var(--rule-2);border-radius:var(--r1);font-weight:var(--w-black);font-size:22px;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.lvl small{font-family:var(--f-type);font-weight:700;font-size:var(--t-tab);letter-spacing:.06em;text-transform:uppercase}
.lvl .ic{width:16px;height:16px;stroke-width:2.6}
.lvl--done{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lvl--now{background:var(--accent-paper);color:var(--on-accent);border-color:var(--accent);transform:rotate(-3deg);box-shadow:0 3px 0 -1px var(--accent-lo)}
.lvl--lock{background:var(--bg-raise);border-color:var(--rule);color:var(--fg-3);font-size:17px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:13px;height:13px;border:var(--line) solid var(--rule-2);border-radius:1px}
.legend .is-done{background:var(--fg);border-color:var(--fg)}
.legend .is-now{background:var(--accent);border-color:var(--accent);transform:rotate(-6deg)}
.legend .is-lock{background:var(--bg-raise);border-color:var(--rule)}
/* locked chapters: one row per 10 levels, one Pro CTA (never 45 tiny locked tiles) */
.chaps{border-top:var(--bold) solid var(--rule-strong)}
.chap{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) 0;border-bottom:var(--hair) solid var(--rule)}
.chap__n{width:52px;flex:none;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.04em;color:var(--fg-3)}
.chap__t{flex:1;min-width:0;font-weight:var(--w-strong);font-size:17px;line-height:1.25}
.chap .ic{color:var(--fg-3)}

/* ===================== 17. Signal: verdict, meter, patterns, red flag ===================== */
/* The scan verdict describes the MESSAGE, at h2 scale, in a contained card, with n/5 and the disclaimer under it. */
.verdict{padding:var(--s5) var(--s4) var(--s4);background:var(--bg-raise);border:var(--hair) solid var(--rule);border-radius:var(--r2)}
.verdict__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)}
.verdict__v{font-weight:var(--w-heavy);font-size:var(--t-h2);line-height:1.1;letter-spacing:-.01em;color:var(--signal)}
.verdict__n{font-weight:var(--w-strong);font-size:16px;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 5-step signal meter. Set data-level="0..4" (JS maps the 0-100 score to 5 buckets) */
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:var(--s4)}
.meter>i{height:12px;background:var(--progress-track)}
.meter[data-level="0"]>i:nth-child(-n+1),.meter[data-level="1"]>i:nth-child(-n+2),.meter[data-level="2"]>i:nth-child(-n+3),
.meter[data-level="3"]>i:nth-child(-n+4),.meter[data-level="4"]>i:nth-child(-n+5){background:var(--signal)}
.meter__scale{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:var(--s2)}
.meter__scale span{font-weight:600;font-size:var(--t-tab);line-height:1.2;color:var(--fg-3);overflow-wrap:break-word;hyphens:auto}
.meter__scale .is-on{color:var(--signal);font-weight:var(--w-heavy)}
.verdict__note{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4);padding-top:var(--s3);border-top:var(--hair) solid var(--rule);font-size:var(--t-small);line-height:1.45;color:var(--fg-2)}
.verdict__note .ic{margin-top:1px;flex:none}
/* strength dots (pattern rows) */
.dots{display:inline-flex;gap:4px;flex:none}
.dots>i{width:10px;height:10px;border:var(--line) solid var(--signal);border-radius:50%}
.dots>i.on{background:var(--signal)}
/* detected pattern rows */
.pat{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:4px var(--s3);padding:var(--s4) 0;border-bottom:var(--hair) solid var(--rule)}
.pat__n{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);color:var(--fg-3)}
.pat__t{font-weight:var(--w-heavy);font-size:var(--t-h3);line-height:1.2}
.pat__d{grid-column:2/-1;font-size:15.5px;line-height:1.45;color:var(--fg-2)}
/* red-flag quote: context greyed, only the phrase is marked */
.flagq{font-weight:600;font-size:20px;line-height:1.5;letter-spacing:-.01em;color:var(--fg-3)}
/* inline note line with icon */
.note{display:flex;gap:var(--s2);align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--fg-3)}
.note .ic{flex:none;margin-top:1px;color:var(--fg-2)}

/* ===================== 18. Help line (never animated, never red) ===================== */
.help{padding:var(--s5) var(--s4) var(--s2);border:var(--line) solid var(--rule-2);border-radius:var(--r2)}
.help__t{margin-top:var(--s2);font-weight:var(--w-strong);font-size:17px;line-height:1.4}
.help__l{margin-top:var(--s3)}
.help__a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:2px var(--s3);min-height:64px;padding:var(--s3) 0;border-top:var(--hair) solid var(--rule);text-decoration:none;color:inherit}
.help__ic{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border:var(--line) solid var(--fg);border-radius:var(--r1)}
.help__a--first .help__ic{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.help__n{font-weight:var(--w-heavy);font-size:16px;line-height:1.25}
.help__no{font-weight:var(--w-heavy);font-size:16px;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.help__d{grid-column:2/4;font-size:13.5px;line-height:1.35;color:var(--fg-3)}
/* compact help link (home footer, case end, AI result, settings) */
.helplink{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) 0;border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule);text-decoration:none;color:inherit}
.helplink strong{display:block;font-weight:var(--w-strong);font-size:15.5px;color:var(--fg)}
/* only the second line is quiet: the .grow wrapper around both lines keeps the text colour */
.helplink strong+span{display:block;font-size:13.5px;color:var(--fg-3)}

/* ===================== 19. Chat transcript · annotations · vote ===================== */
.chat{display:flex;flex-direction:column;gap:var(--s4)}
.chat__day{display:flex;align-items:center;gap:var(--s3);color:var(--fg-3)}
.chat__day::before,.chat__day::after{content:"";flex:1;height:1px;background:var(--rule)}
.msg{max-width:86%;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.msg__who{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.msg__b{padding:12px 15px 13px;border-radius:var(--r2);font-size:16.5px;line-height:1.5;font-weight:var(--w-body)}
.msg--them .msg__b{border:var(--line) solid var(--rule-2);border-top-left-radius:0}
.msg--me{align-self:flex-end;align-items:flex-end}
.msg--me .msg__b{background:var(--fg);color:var(--bg);border-top-right-radius:0;font-weight:600}
/* numbered footnote marker inside a bubble, matching the numbered analysis list */
.fn{display:inline-grid;place-items:center;min-width:21px;height:21px;margin:0 1px 0 4px;padding:0 4px;vertical-align:2px;border:var(--line) solid var(--signal);border-radius:var(--r1);
  color:var(--signal);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1;font-style:normal}
/* therapist annotation under a bubble: hand-drawn arrow + label, in flow */
.annot{display:flex;align-items:center;gap:6px;margin-left:8px;color:var(--signal);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase}
.annot .ic{width:30px;height:22px;stroke-width:1.8}
/* numbered analysis list */
.fnlist>li{display:grid;grid-template-columns:30px 1fr;gap:2px var(--s3);padding:var(--s4) 0;border-bottom:var(--hair) solid var(--rule)}
.fnlist .fn{margin:2px 0 0;justify-self:start}
.fnlist strong{font-weight:var(--w-heavy);font-size:17px;line-height:1.3}
.fnlist p{grid-column:2;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
/* 3-way vote with results */
.vote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.vote__o{position:relative;min-height:92px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px 16px;border:var(--line) solid var(--rule-2);border-radius:var(--r1);text-align:left;min-width:0}
.vote__o b{display:flex;align-items:center;gap:6px;width:100%;font-weight:var(--w-heavy);font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--fg-2)}
.vote__o b .ic{width:16px;height:16px;stroke-width:3;margin-left:auto}
.vote__o span{font-weight:var(--w-black);font-size:26px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vote__o::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:3px;background:linear-gradient(90deg,var(--fg) calc(var(--p,0)*100%),var(--rule) 0)}
.vote__o[aria-checked="true"],.vote__o[aria-pressed="true"]{border:var(--bold) solid var(--fg);padding:9px 11px 15px}
.vote__o[aria-checked="true"] b,.vote__o[aria-pressed="true"] b{color:var(--fg)}

/* ===================== 20. Learn: article list + reading view ===================== */
.feature{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:var(--bold) solid var(--fg);border-radius:var(--r1);color:inherit;text-decoration:none}
.feature__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:34px}
.feature__t{font-weight:var(--w-black);font-size:32px;line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase}
.feature__d{font-size:16px;line-height:1.45;color:var(--fg-2)}
.feature__f{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2);padding-top:var(--s3);border-top:var(--hair) solid var(--rule)}
.toc-list{border-top:var(--bold) solid var(--rule-strong)}
.toc{display:flex;align-items:center;gap:var(--s4);min-height:68px;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule);color:inherit;text-decoration:none}
.toc__n{width:30px;flex:none;font-weight:var(--w-black);font-size:20px;letter-spacing:-.02em;color:var(--fg-3);font-variant-numeric:tabular-nums}
.toc__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.toc__t{font-weight:var(--w-heavy);font-size:18px;line-height:1.2}
.toc__m{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.toc.is-read .toc__n{color:var(--fg)}
.toc__ok{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--fg);color:var(--bg);border-radius:var(--r1)}
.toc__ok .ic{width:16px;height:16px;stroke-width:3}
/* reading view: tab bar hidden, warm off-white, 18/1.7, max 36em */
.readbar{position:sticky;top:0;z-index:20;background:var(--page);padding-top:var(--sat)}
.readbar__row{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 8px}
.readbar__aa{font-weight:var(--w-heavy);font-size:17px;letter-spacing:-.01em}
.article{padding:var(--s7) var(--gutter) 0;color:var(--read-fg)}
.article__t{margin-top:var(--s4);color:var(--fg)}
.byline{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);padding:var(--s3) 0;border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule)}
.byline .pipsa{width:30px;height:27px;color:var(--fg);flex:none}
.byline p{font-size:13.5px;line-height:1.4;color:var(--read-fg-2)}
.byline strong{color:var(--fg);font-weight:var(--w-strong)}
.article .lede{margin-top:var(--s6);color:var(--fg);font-size:20px;line-height:1.45;font-weight:600}
.prose{margin-top:var(--s5);max-width:var(--measure);font-size:var(--t-read);line-height:var(--lh-read);font-weight:var(--w-read);color:var(--read-fg)}
.prose p+p{margin-top:1.05em}
.prose h2{margin:1.8em 0 .6em;font-weight:var(--w-heavy);font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--fg)}   /* sentence case */
.prose strong{font-weight:var(--w-strong);color:var(--fg)}
.dropcap::first-letter{float:left;margin:.06em .1em 0 -.02em;font-weight:var(--w-black);font-size:5.2em;line-height:.78;color:var(--fg)}
.pull{margin:1.5em 0;padding:var(--s2) 0 var(--s2) var(--s5);border-left:6px solid var(--fg);font-weight:var(--w-heavy);font-style:italic;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.keypoints li{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s2) 0;border-bottom:var(--line) solid var(--rule);font-weight:var(--w-strong);font-size:17px;line-height:1.35}
.keypoints li:last-child{border-bottom:0}
.keypoints .ic{flex:none;transform:translateY(3px)}

/* ===================== 21. Forms ===================== */
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field__l{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:28px}
.input,.textarea{display:block;width:100%;min-height:52px;padding:12px 14px;border:var(--line) solid var(--rule-2);border-radius:var(--r1);background:var(--bg-raise);color:var(--fg);font-size:17px;line-height:1.5;font-weight:var(--w-body)}
.textarea{min-height:120px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px var(--focus)}
/* scanner input: viewfinder corners + notebook ruling */
.scanbox{position:relative;background:var(--bg-raise);border-radius:var(--r1)}
.scanbox::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--fg),var(--fg)) 0 0/24px 2px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 0/2px 24px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 100% 0/24px 2px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 0/2px 24px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 0 100%/24px 2px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 100%/2px 24px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 100% 100%/24px 2px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 100%/2px 24px no-repeat}
.scanbox:focus-within{box-shadow:0 0 0 3px var(--focus)}
.scanbox__ta{display:block;width:100%;min-height:168px;resize:none;border:0;background:transparent;color:var(--fg);padding:14px 18px 8px;
  font-weight:var(--w-body);font-size:17px;line-height:32px;
  background-image:repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-position:0 13px;background-attachment:local}
.scanbox__ta::placeholder{color:var(--fg-3)}
.scanbox__ta:focus{outline:none}
.scanbox__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s2);border-top:var(--hair) solid var(--rule)}
.scanbox__bar .btn{text-transform:none;letter-spacing:0;font-weight:var(--w-strong);font-size:14px;border-width:var(--line)}
.scanbox__count{padding-right:var(--s3);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);color:var(--fg-3);font-variant-numeric:tabular-nums}
.quota{display:flex;align-items:center;gap:var(--s3);font-weight:600;font-size:14px;color:var(--fg-2)}
.quota .sticker{--tilt:-4deg;padding:5px 9px}
/* square poster switch; put role="switch" on the whole .toggle-row */
.switch{position:relative;width:52px;height:30px;flex:none;border:var(--bold) solid var(--fg);border-radius:var(--r1)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--fg);border-radius:1px;transition:transform var(--d2) var(--ease-out)}
[aria-checked="true"]>.switch,.switch[aria-checked="true"]{background:var(--fg)}
[aria-checked="true"]>.switch::after,.switch[aria-checked="true"]::after{background:var(--bg);transform:translateX(22px)}
.toggle-row{display:flex;width:100%;align-items:center;gap:var(--s4);min-height:64px;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule);text-align:left}
.toggle-row__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.toggle-row strong{font-weight:var(--w-strong);font-size:17px;line-height:1.3}
.toggle-row__t span{font-size:14px;line-height:1.4;color:var(--fg-3)}
/* 1-10 level ruler: ONE role="slider" (drag or tap), the chosen value sits on a post-it */
.ruler{display:grid;grid-template-columns:repeat(10,1fr);border-top:var(--bold) solid var(--fg);cursor:pointer;touch-action:none}
.ruler__t{position:relative;isolation:isolate;min-height:50px;padding-top:17px;display:flex;justify-content:center;font-weight:var(--w-heavy);font-size:15px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ruler__t::before{content:"";position:absolute;top:0;left:50%;width:2px;height:9px;background:var(--rule-2);transform:translateX(-50%)}
.ruler__t--zone::before{height:14px;background:var(--signal)}
.ruler__t[aria-current="true"]{color:var(--on-accent)}
.ruler__t[aria-current="true"]::after{content:"";position:absolute;inset:9px 1px 5px;z-index:-1;background:var(--accent-paper);border-radius:var(--r1);transform:rotate(-5deg);box-shadow:0 3px 0 -1px var(--accent-lo)}
.ruler__scale{display:grid;grid-template-columns:repeat(10,1fr);margin-top:var(--s2);font-weight:600;font-size:12px;color:var(--fg-3)}
.ruler__scale span:nth-child(1){grid-column:1/4}
.ruler__scale span:nth-child(2){grid-column:4/7;text-align:center}
.ruler__scale span:nth-child(3){grid-column:7/11;text-align:right;color:var(--signal)}
/* native range fallback (current <input type=range>) */
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent}
.range::-webkit-slider-runnable-track{height:2px;background:var(--fg)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-14px;background:var(--accent-paper);border-radius:var(--r1);transform:rotate(-5deg)}

/* ===================== 22. Overlays: scrim, sheet, modal, toast ===================== */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:92vh;overflow:auto;padding:10px var(--gutter) calc(var(--sab) + var(--s5));
  background:var(--bg-raise);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--sh-sheet);animation:sheet-in var(--d3) var(--ease-out) both}
.grabber{width:40px;height:5px;margin:0 auto var(--s2);border-radius:3px;background:var(--rule-2)}
.sheet__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--tap);margin-right:-10px}
.modal{position:fixed;left:50%;top:50%;z-index:50;width:min(340px,calc(100% - 40px));transform:translate(-50%,-50%);padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r2);box-shadow:var(--sh-card)}
.modal__t{font-weight:var(--w-black);font-size:24px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}
.modal__acts{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5)}
/* toast: role="status", auto-dismiss (--d-toast), sits above the tab bar, never over the header */
.toast{position:fixed;left:var(--s4);right:var(--s4);bottom:calc(var(--tabbar-h) + var(--sab) + var(--s4));z-index:45;display:flex;align-items:center;gap:var(--s3);
  min-height:64px;padding:8px 4px 8px 10px;background:var(--inv-bg);color:var(--inv-fg);border-radius:var(--r1);box-shadow:var(--sh-toast);
  transform:rotate(-1deg);animation:toast-in var(--d3) var(--ease-stick) both}
.toast__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--accent-paper);color:var(--on-accent);border-radius:var(--r1);transform:rotate(-5deg)}
.toast__ic .ic{width:22px;height:22px;stroke-width:3}
.toast__b{flex:1;min-width:0}
.toast__t{display:block;font-weight:var(--w-heavy);font-size:15.5px;line-height:1.25}
.toast__s{display:block;margin-top:2px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.toast__pts{font-weight:var(--w-black);font-size:18px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.toast .iconbtn{color:inherit}

/* ===================== 23. Celebration ===================== */
.celebrate{position:relative;isolation:isolate;min-height:100%;display:flex;flex-direction:column;padding:var(--sat) var(--gutter) calc(var(--sab) + var(--s4));overflow:hidden}
.celebrate__bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:56px;margin-right:-10px}
.celebrate__acts{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s5)}
/* streak grid: one small post-it per day */
.streakgrid{display:grid;grid-template-columns:repeat(7,minmax(0,38px));gap:9px}
.streakgrid>i{aspect-ratio:1/1;border:var(--line) solid var(--rule-2);border-radius:var(--r1)}
.streakgrid>i.on{background:var(--accent-paper);border-color:var(--accent);transform:rotate(var(--r,-3deg));box-shadow:var(--sh-sticker)}
.streakgrid>i.today{display:grid;place-items:center}
.streakgrid>i.today .heart{width:55%;height:55%}
.streakgrid>i.rest{border-style:solid;background:var(--progress-track)}
/* confetti = little post-it squares (max ~14, static under reduced motion) */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.confetti>i{position:absolute;left:var(--x);top:var(--y);width:var(--w,14px);height:var(--w,14px);background:var(--c,var(--accent));border-radius:1px;transform:rotate(var(--r,10deg));
  animation:drift 5s ease-in-out var(--dl,0s) infinite alternate}
/* typewriter ticker tape: splash + celebrations ONLY. Decorative + redundant (aria-hidden). */
.ticker{position:relative;overflow:hidden;background:var(--paper);color:var(--on-paper);transform:rotate(var(--tilt,-3deg));box-shadow:var(--sh-sticker)}
.ticker__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker__g{display:flex;align-items:center;gap:14px;padding:8px 7px;font-family:var(--f-type);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ticker__g .heart{width:15px;height:15px}
.ticker__g .ast{font-family:var(--f-sans);font-weight:var(--w-black);font-size:16px;letter-spacing:0}

/* ===================== 24. Brand moments ===================== */
.splash{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:calc(var(--sat) + var(--s3)) var(--gutter) calc(var(--sab) + var(--s5));overflow:hidden}
.splash__stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:280px;padding:var(--s6) 0 var(--s7)}
.splash__note{width:248px;height:248px;display:grid;place-items:center;padding:0}
.splash__pipsa{width:172px;height:152px;color:var(--ink);animation:breathe 4.8s ease-in-out infinite}
.splash__word{font-weight:var(--w-black);font-size:clamp(40px,14.6vw,60px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase}
.splash__load{height:2px;background:var(--progress-track)}
.splash__load>i{display:block;height:100%;background:var(--fg);transform-origin:0 50%;animation:load 1.8s var(--ease-out) both}
/* quote on cream typewriter paper (from the app's own quote library) */
.slip{position:relative;padding:var(--s4) var(--s4) var(--s3);background:var(--paper);color:var(--on-paper);transform:rotate(var(--tilt,.8deg));box-shadow:var(--sh-sticker);
  --fg:var(--ink);--fg-3:var(--ink-3)}
.slip blockquote{font-family:var(--f-type);font-weight:700;font-size:16px;line-height:1.45;letter-spacing:0}
.slip figcaption{margin-top:var(--s2);color:var(--fg-3)}
/* label-maker strip: "by Mental Health Club" + black heart */
.labeltape{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 14px;background:var(--paper);color:var(--on-paper);transform:rotate(-2deg);
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,98.5% 50%,100% 100%,0 100%,1.5% 50%)}
/* MHC member card (paywall) */
.mcard{position:relative;height:122px;padding:var(--s4);background:var(--ink);color:var(--chalk);border-radius:var(--r2);transform:rotate(-1.2deg);box-shadow:var(--sh-card);
  --fg:var(--chalk);--fg-3:var(--chalk-3)}
.mcard__top{display:flex;justify-content:space-between;color:var(--fg-3)}
.mcard__name{position:absolute;left:var(--s4);bottom:13px;font-weight:var(--w-black);font-size:56px;line-height:.8;letter-spacing:-.04em;text-transform:uppercase}
.mcard__pipsa{position:absolute;right:18px;bottom:14px;width:62px;height:55px;color:var(--chalk)}
.mcard__st{position:absolute;top:-14px;right:96px;--tilt:7deg}
/* sign-off: Pipsa or heart-note + "opetustyökalu, ei diagnoosi" */
.signoff{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s5) 0 var(--s3)}
.signoff p{font-size:13.5px;line-height:1.5;color:var(--fg-3)}
.signoff strong{color:var(--fg-2);font-weight:var(--w-strong)}

.splash__ticker{margin:var(--s4) -40px 0}
.splash__stage .postit{margin-left:6px}
.splash__slip{margin-top:var(--s6);max-width:320px}
.splash__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);margin-top:var(--s7)}
.splash__foot .splash__load{align-self:stretch}

/* ===================== 25. Onboarding step ===================== */
.onb{position:relative;min-height:100%;display:flex;flex-direction:column;padding:calc(var(--sat) + var(--s2)) var(--gutter) calc(var(--sab) + var(--s4))}
.onb__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:56px}
.onb__steps{flex:1;--n:8}
.onb__art{position:relative;margin:var(--s8) 0 var(--s7);display:flex;justify-content:center}
.onb__t{font-weight:var(--w-black);font-size:clamp(36px,11vw,46px);line-height:var(--lh-display);letter-spacing:-.025em;text-transform:uppercase}
.onb__acts{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s6)}

/* ===================== 26. Empty state ===================== */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s7) var(--s5);border:var(--line) solid var(--rule-2);border-radius:var(--r2)}
.empty__ic{width:56px;height:56px;display:grid;place-items:center;border:var(--bold) solid var(--fg);border-radius:var(--r1);transform:rotate(-4deg)}
.empty__t{font-weight:var(--w-black);font-size:24px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}

/* ===================== 27. Settings ===================== */
.setgroup+.setgroup{margin-top:var(--s7)}
.setrow{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:var(--hair) solid var(--rule);text-decoration:none;color:inherit}
.setrow__t{flex:1;min-width:0;font-weight:600;font-size:16px}
.setrow__v{font-size:14px;color:var(--fg-3)}
/* 7 languages */
.langs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.lang{min-height:var(--tap);display:grid;place-items:center;border:var(--line) solid var(--rule-2);border-radius:var(--r1);font-family:var(--f-type);font-weight:700;font-size:13px;letter-spacing:.06em}
.lang[aria-checked="true"]{background:var(--accent-paper);color:var(--on-accent);border-color:var(--accent);transform:rotate(-3deg)}
/* theme picker: each swatch is a real [data-theme] preview: wall colour + its post-it */
.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s2)}
.tsw{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.tsw__wall{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;background:var(--page);border:var(--hair) solid var(--rule-2);border-radius:var(--r1)}
.tsw__wall--auto{background:linear-gradient(135deg,var(--ink) 50%,var(--note-cream) 50%)}
.tsw__wall>i{width:52%;height:52%;background:var(--accent-paper);transform:rotate(-7deg);box-shadow:var(--sh-sticker)}
.tsw__wall>.tape{width:30px;height:11px;top:14%;left:50%}
.tsw__l{font-weight:var(--w-strong);font-size:12px;line-height:1.2;color:var(--fg-2);overflow-wrap:anywhere}
.tsw__d{display:inline-flex;align-items:center;gap:3px;font-family:var(--f-type);font-weight:700;font-size:var(--t-tab);color:var(--fg-3)}
.tsw__d .ic{width:12px;height:12px;stroke-width:2.6}
.tsw[aria-checked="true"] .tsw__wall{outline:var(--bold) solid var(--fg);outline-offset:3px}
.tsw.is-locked .tsw__wall>i{opacity:.35}
.tsw.is-locked .tsw__wall::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:.4}

/* ===================== 28. Motion ===================== */
@keyframes stick{from{transform:translateY(-10px) rotate(calc(var(--tilt,0deg) - 4deg)) scale(1.04);opacity:0}to{transform:rotate(var(--tilt,0deg));opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toast-in{from{transform:translateY(14px) rotate(2deg);opacity:0}to{transform:rotate(-1deg);opacity:1}}
@keyframes sheet-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes breathe{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(2deg) scale(1.035)}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drift{to{transform:translateY(14px) rotate(calc(var(--r,10deg) + 24deg))}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(.6) rotate(-8deg);opacity:0}70%{transform:scale(1.06) rotate(1deg);opacity:1}100%{transform:none}}
.anim-stick{animation:stick var(--d3) var(--ease-stick) both}
.anim-pop{animation:pop var(--d3) var(--ease-stick) both}
.quiet *{animation:none!important}   /* wrap sensitive content: scan result, case analysis, article, help */

/* ===================== 29. Motion safety ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .confetti>i,.ticker__track,.splash__pipsa{animation:none!important}
}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important}

/* ===================== 30. Screen components ===================== */
/* daily dose question card (a .postit) */
.dose{padding:var(--s7) var(--s5) var(--s5)}
.dose__top{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:var(--line) solid var(--rule-2)}
.dose__scn{margin-top:var(--s4);font-weight:var(--w-strong);font-size:19px;line-height:1.35;letter-spacing:-.005em}
.dose__q{margin-top:var(--s2);font-weight:var(--w-black);font-size:28px;line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.dose__opts{margin-top:var(--s5)}
.dose__fb{margin-top:var(--s4);padding-top:var(--s3);border-top:var(--line) solid var(--rule-2);font-weight:600;font-size:15px;line-height:1.45}
/* weekly challenge row */
.challenge{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3) var(--s4);padding:var(--s4) 0 var(--s5);border-bottom:var(--hair) solid var(--rule)}
.challenge__t{grid-column:1/-1;font-weight:var(--w-heavy);font-size:19px;line-height:1.25}
.challenge__n{font-weight:var(--w-black);font-size:19px}
/* scan tips (a .postit) */
.tips{padding:var(--s7) var(--s5) var(--s4)}
.tips__l{margin-top:var(--s2)}
.tips__l li{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:var(--line) solid var(--rule);font-weight:var(--w-strong);font-size:18px;line-height:1.35}
.tips__n{width:20px;flex:none;font-weight:var(--w-black);font-size:24px;line-height:.9}
/* validating memo (a .postit): sentence case, never shouted */
.memo{padding:var(--s7) var(--s5) var(--s6)}
.memo__t{margin-top:var(--s2);font-weight:var(--w-heavy);font-size:21px;line-height:1.3;letter-spacing:-.01em}
/* speed game card (an .inv block) */
.speed{padding:var(--s5) var(--s4) var(--s4);border-radius:var(--r2)}
.speed__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.speed__t{display:flex;align-items:center;gap:8px;font-family:var(--f-type);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.speed__time{font-weight:var(--w-black);font-size:30px;line-height:1;letter-spacing:-.02em}
.speed__k{margin-top:var(--s1);font-weight:600;font-size:15px;color:var(--fg-2)}
.speed__card{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--bold) solid var(--fg)}
.speed__sit{margin-top:var(--s1);font-weight:var(--w-strong);font-size:18px;line-height:1.3}
.speed__q{margin-top:var(--s2);font-weight:var(--w-black);font-style:italic;font-size:clamp(24px,7.4vw,29px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.speed__bar{margin-top:var(--s5)}
.speed__acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
.speed__acts .btn{min-height:60px;padding:0 8px}
.speed__meta{display:flex;justify-content:space-between;margin-top:var(--s4);color:var(--fg-3)}
/* big value next to a field label (AI level) */
.valnum{font-weight:var(--w-black);font-size:40px;line-height:.8;letter-spacing:-.03em}
.valnum small{margin-left:2px;font-size:16px;font-weight:var(--w-strong);letter-spacing:0;color:var(--fg-3)}
/* paywall (inside .sheet--paper) */
.paywall__list{border-top:var(--hair) solid var(--rule)}
.paywall__list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:var(--hair) solid var(--rule);font-weight:var(--w-strong);font-size:15.5px}
.paywall__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.paywall__price .small{flex-basis:100%}
.paywall__amt{font-weight:var(--w-black);font-size:38px;line-height:1;letter-spacing:-.03em}
.paywall__per{font-weight:var(--w-strong);font-size:16px}
.paywall__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s1)}
.paywall__legal{display:flex;gap:var(--s4)}
.paywall__club{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s2);padding-top:var(--s3);border-top:var(--hair) solid var(--rule);font-weight:600;font-size:14px;color:var(--fg-2)}
/* celebration rewards row */
.celebrate__num{margin-left:-8px;margin-top:var(--s1);font-size:clamp(110px,38vw,170px)}
.rewards{display:flex;align-items:center;gap:var(--s4)}
.unlock{flex:1;min-width:0}
.unlock__t{margin-top:var(--s1);font-weight:var(--w-black);font-size:24px;line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase}
.reward__freeze{--tilt:5deg}
/* onboarding art */
.onb__note{width:250px;padding:var(--s6) var(--s5) var(--s5)}
.onb__quote{margin-top:var(--s3);font-weight:var(--w-heavy);font-style:italic;font-size:24px;line-height:1.2}
.onb__annot{margin:var(--s3) 0 0}