/* =====================================================================
   FEATURE · LEARN (Oppi, #vE) · golden mockup 07-learn · DESIGN-SPEC §8.16
   ---------------------------------------------------------------------
   List: .mast masthead + reading progress, .feature "start / continue here" card, four tracks
   (.sec-h + .toc-list of <button class="toc">), the trait-strength scale (#spSl, #spC) and the
   research forms of narcissism (#spT accordion). Rendered by assets/js/education.js (rEd).
   Reader: .edr, a full-screen layer on <body> at z 100: above the app bar (20), the tab bar (30)
   and the offline bar (35), below the legacy .mb modals (200), confetti (300) and the ui.js layers
   (700, help sheet / celebrations) and toasts (900). ui.js uiTrap makes the page behind inert and
   sets body.ui-lock, so only the article scrolls. Article content is .quiet: no motion.
   Role tokens and component classes only. Inline styles are data custom properties (--v, --ch).
   ===================================================================== */

/* ===================== 1. List ===================== */
/* #eC wraps the mockup blocks, so it takes over the .view>.mast/.sec/.pad gutter rule from shell.css */
#eC>.mast,#eC>.sec,#eC>.pad{padding-left:0;padding-right:0}
#eC>.mast{padding-top:var(--s4)}
.ed-prog .tw{white-space:nowrap}

/* feature card: the whole card opens the article (stretched button), the title fits long words */
.ed-feat{container-type:inline-size}
.ed-feat .feature__top{flex-wrap:wrap;row-gap:var(--s2)}
.ed-feat .feature__top .tw{min-width:0}
.ed-feat .feature__top .sticker{margin-left:auto}
.ed-feat .feature__t{overflow-wrap:break-word;font-size:32px;font-size:min(32px,calc(100cqi * 1.22 / var(--ch,1)))}
/* .ed-hy: the browser hyphenates this language (or the title carries soft hyphens), so long words keep a
   readable size and break with a hyphen instead of shrinking all the way to fit */
.ed-hy .ed-feat .feature__t{font-size:max(24px,min(32px,calc(100cqi * 1.22 / var(--ch,1))))}
.ed-feat .feature__d{text-wrap:pretty}
.ed-feat__go{position:static;gap:6px}
.ed-feat__go::after{content:"";position:absolute;inset:0;z-index:1}
/* keyboard focus rings the whole card (engines without :has() keep the ring on the button) */
@supports selector(:has(a)){
  .ed-feat__go:focus-visible{outline:none}
  .ed-feat:has(.ed-feat__go:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
}
.ed-feat:active{transform:translateY(1px)}
@media (hover:hover){.ed-feat:hover .feature__t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}

/* all read: one small post-it, calm */
.ed-done{padding:var(--s7) var(--s5) var(--s5)}
.ed-done__t{margin-top:var(--s2);font-weight:var(--w-heavy);font-size:21px;line-height:1.3;letter-spacing:-.01em}
.ed-done__b{margin-top:var(--s2);font-weight:600;font-size:15.5px;line-height:1.45;color:var(--fg-2)}

/* tracks */
.ed-trk .sec-h{margin-bottom:0}
.ed-trk__d{margin-top:var(--s3);color:var(--fg-3)}
.ed-toc{margin-top:var(--s3);border-top:var(--hair) solid var(--rule)}
.ed-toc .toc,.ed-nav .toc{width:100%;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent}
.ed-toc .toc:active,.ed-nav .toc:active{background:var(--bg-raise)}
.ed-toc .toc__t,.ed-nav .toc__t{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (hover:hover){.ed-toc .toc:hover .toc__t,.ed-nav .toc:hover .toc__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}
.ed-toc .row__chev{flex:none}
.toc .ed-toc__ic{width:30px;height:30px;display:grid;place-items:center;border:var(--line) solid var(--fg);border-radius:var(--r1);color:var(--fg)}
.ed-toc--help .toc__t{font-weight:var(--w-black)}
.ed-new{display:inline-block;margin-left:2px;padding:0 5px;border:var(--hair) solid currentColor;border-radius:var(--r1);color:var(--fg);white-space:nowrap}

/* trait-strength scale */
.ed-spec__d{margin-top:var(--s4)}
.ed-range{margin-top:var(--s5)}
.ed-range .range{display:block;margin:0;cursor:pointer}
.ed-range .range:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ed-range .range::-moz-range-track{height:2px;background:var(--fg)}
.ed-range .range::-moz-range-thumb{box-sizing:border-box;width:30px;height:30px;border:var(--bold) solid var(--on-accent);background:var(--accent-paper);border-radius:var(--r1);transform:rotate(-5deg)}
/* ink edge on the post-it thumb: it stays visible (3:1) on cream as well as on Noir */
.ed-range .range::-webkit-slider-thumb{box-sizing:border-box;border:var(--bold) solid var(--on-accent)}
.ed-range__scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s1);font-weight:600;font-size:12px;line-height:1.25;color:var(--fg-3);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.ed-range__scale span:nth-child(2){text-align:center}
.ed-range__scale span:nth-child(3){text-align:right}
.ed-lvl{margin-top:var(--s4)}
.ed-lvl__card{padding:var(--s5) var(--s4) var(--s2);background:var(--bg-raise);border:var(--hair) solid var(--rule);border-radius:var(--r2)}
.ed-lvl__top{display:flex;align-items:baseline;gap:var(--s3)}
.ed-lvl__n{flex:none;font-weight:var(--w-black);font-size:34px;line-height:.9;letter-spacing:-.03em}
.ed-lvl__n small{margin-left:1px;font-weight:var(--w-strong);font-size:15px;letter-spacing:0;color:var(--fg-3)}
.ed-lvl__t{min-width:0;font-weight:var(--w-heavy);font-size:19px;line-height:1.25;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.ed-lvl__d{margin-top:var(--s3);font-size:var(--t-body);line-height:1.5;color:var(--fg-2)}
.ed-lvl__dl{margin-top:var(--s4)}
.ed-lvl__dl>div{padding:var(--s3) 0;border-top:var(--hair) solid var(--rule)}
.ed-lvl__dl dd{margin:var(--s1) 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.ed-lvl__dl .ed-lvl__q{font-style:italic;font-weight:600;color:var(--fg)}
.ed-spec__n{margin-top:var(--s4)}

/* research forms: accessible accordion */
.ed-types{margin-top:var(--s1)}
.ed-type{border-bottom:var(--hair) solid var(--rule)}
.ed-type__h{font-size:inherit;font-weight:inherit}
.ed-type__b{display:flex;align-items:center;gap:var(--s4);width:100%;min-height:68px;padding:var(--s3) 0;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent}
.ed-type__b:active{background:var(--bg-raise)}
.ed-type__n{width:30px;flex:none;font-weight:var(--w-black);font-size:20px;letter-spacing:-.02em;color:var(--fg-3)}
.ed-type__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ed-type__t{font-weight:var(--w-heavy);font-size:18px;line-height:1.2;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.ed-type__d{font-size:var(--t-small);line-height:1.4;color:var(--fg-3)}
.ed-type__ch{width:20px;height:20px;color:var(--fg-3);transition:transform var(--d2) var(--ease-out)}
.ed-type__b[aria-expanded="true"] .ed-type__ch{transform:rotate(180deg);color:var(--fg)}
.ed-type__b[aria-expanded="true"] .ed-type__n{color:var(--fg)}
.ed-type__p{padding:0 0 var(--s5);font-size:var(--t-body);line-height:1.6;color:var(--read-fg)}
.ed-type__p p+p{margin-top:.8em}
.ed-type__p b,.ed-type__p strong{font-weight:var(--w-strong);color:var(--fg)}
.ed-type__p .safety{margin-top:var(--s4)}
.ed-sign{margin-top:var(--s7)}

/* hyphenation probe (education.js _edHyOK): measured once per language, never visible */
.ed-hyprobe{position:absolute;left:-9999px;top:0;width:60px;visibility:hidden;font-size:16px;line-height:1.2;white-space:normal;overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto}

/* narrow phones: long German / Finnish compounds keep fitting the rows */
@media (max-width:359px){
  .ed-toc .toc__t,.ed-nav .toc__t,.ed-type__t{font-size:16px}
  .ed-toc .toc,.ed-nav .toc,.ed-type__b{gap:var(--s3)}
}

/* ===================== 2. Reader (.edr) ===================== */
.edr{position:fixed;inset:0;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:var(--fg);
  background-color:var(--page);background-image:var(--grain),var(--page-glow);background-repeat:repeat,no-repeat;background-size:180px 180px,100% 100%;
  animation:ed-in var(--d1) var(--ease-out)}
@keyframes ed-in{from{opacity:0}to{opacity:1}}
.edr:focus{outline:none}
.edr__in{max-width:var(--app-w);margin:0 auto;padding:0 env(safe-area-inset-right,0px) calc(var(--sab) + var(--s9)) env(safe-area-inset-left,0px)}
/* sticky bar: the iOS status bar stays white, so cream themes keep an ink band under it (--status-band) */
.edr .readbar{background:linear-gradient(var(--status-band) 0 var(--sat),transparent 0),var(--grain),var(--page);background-size:auto,180px 180px,auto}
.edr .readbar__row{padding:0 6px 0 4px}
.edr .backbtn{border-radius:var(--r1)}
.edr__aa .readbar__aa{line-height:1}
.edr__aa[data-size="l"] .readbar__aa{font-size:20px}
.edr__aa[data-size="xl"] .readbar__aa{font-size:23px}
.edr__art{padding-top:var(--s6)}
.edr__tw{container-type:inline-size}
.edr__t{overflow-wrap:break-word}
.edr__t:focus{outline:none}   /* focused by script for screen readers, not an interactive control */
.edr__t--d{font-size:var(--t-display);font-size:min(var(--t-display),calc(100cqi * 1.22 / var(--ch,1)))}
.edr__t--h{font-size:var(--t-h1);font-size:min(var(--t-h1),calc(100cqi * 1.22 / var(--ch,1)))}
.edr.ed-hy .edr__t--d{font-size:max(34px,min(var(--t-display),calc(100cqi * 1.22 / var(--ch,1))))}
.edr.ed-hy .edr__t--h{font-size:max(26px,min(var(--t-h1),calc(100cqi * 1.22 / var(--ch,1))))}
.edr .lede{font-size:calc(var(--t-read) + 1px);line-height:1.5;font-weight:var(--w-body)}
.edr .safety{margin-top:var(--s6)}
/* long-form text: blocks, CAPS subheadings, lists, quoted speech, links */
.edr .prose{margin-top:var(--s6)}
.edr .lede+.prose{margin-top:var(--s7)}
.prose .ed-b+.ed-b{margin-top:1.15em}
.prose .ed-b+.ed-b--h{margin-top:2.1em}
.prose .ed-b--dc{display:flow-root}
.prose .ed-b p+p{margin-top:.5em}
.prose .ed-h{margin:0 0 .5em;font-weight:var(--w-heavy);font-size:calc(var(--t-read) - 1px);line-height:1.3;letter-spacing:.03em;color:var(--fg);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.prose .ed-h__s{display:block;margin-top:.2em;font-weight:600;font-size:calc(var(--t-read) - 2px);letter-spacing:0;color:var(--fg-2)}
.prose .ed-ul{margin-top:.55em}
.prose .ed-ul:first-child{margin-top:0}
.prose .ed-ul li{position:relative;padding-left:1.15em}
.prose .ed-ul li+li{margin-top:.45em}
.prose .ed-ul li::before{content:"";position:absolute;left:.12em;top:.7em;width:.36em;height:.36em;background:var(--fg-2);border-radius:1px;transform:rotate(-8deg)}
.prose .ed-ul+p{margin-top:.65em}
.prose .ed-q{font-style:italic;color:var(--fg)}
.edr .ed-a,.edr .ed-tel{color:var(--fg);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.edr .ed-tel{text-decoration-thickness:2px}
/* "Muista" post-it (only when the article ends with one) */
.ed-memo{margin-top:var(--s8)}
.ed-memo__t{margin-top:var(--s3);font-weight:var(--w-strong);font-size:18px;line-height:1.4}
/* mark as read, next / related / previous, help, sign-off */
.ed-mark{margin-top:var(--s8)}
.ed-mark__b .badge{flex:none}
.ed-mark__s{min-height:1.45em;margin-top:var(--s2)}
.ed-mark__s:empty{min-height:0}
.ed-nav{margin-top:var(--s5);border-top:var(--hair) solid var(--rule)}
.ed-nav .toc__b{gap:2px}
.ed-nav__ar{flex:none;color:var(--fg)}
.ed-help{margin-top:var(--s6)}
.ed-help>.ic:first-child{color:var(--fg-2)}
.edr .signoff{margin-top:var(--s3)}