/* ProcessStat learning centre. Mellow UI (/tools/assets/mellow-ui/mellow-ui.css) is linked first and owns tokens,
   base type, .btn, header, footer and dark mode; this sheet lays out lessons with the tokens only.
   The downloadable workbook embeds Mellow UI + this file. */
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-size:15.5px;line-height:1.75}
button,input,select{font:inherit}
a{color:var(--ink);text-underline-offset:4px}
.mw-app{text-decoration:none;color:var(--ink)}

/* base controls = .btn.small / .input */
:where(button:not(.btn)){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:4px 12px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.25;cursor:pointer;user-select:none}
:where(button:not(.btn)):hover{background:var(--surface)}
:where(button:not(.btn)):active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){:where(button:not(.btn)){min-height:40px}}

h1,h2,h3,p{margin:0}
h1{font-size:clamp(30px,4vw,46px);line-height:1.25;letter-spacing:-.02em}
h2{font-size:24px;letter-spacing:-.01em;line-height:1.45;margin-bottom:14px}
h3{font-size:17px;line-height:1.55;margin-bottom:8px}
p+p{margin-top:12px}
small,.small{font-size:13px;color:var(--ink-2)}
.eyebrow{font:600 12.5px/1.4 var(--font-num);letter-spacing:.1em;color:var(--ink-3);margin-bottom:10px}

/* header (Mellow UI .mw-header) stays on top while reading */
.learn-header{position:sticky;top:0;z-index:5}
.learn-layout{display:grid;grid-template-columns:255px minmax(0,1fr);max-width:1600px;margin:auto}
.learn-rail{position:sticky;top:57px;height:calc(100dvh - 57px);overflow:auto;padding:24px 16px;background:var(--surface);border-right:1px solid var(--line)}
.home-link{display:block;font-weight:700;margin-bottom:16px;text-decoration:none}
.lesson-search{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lesson-search input{display:block;width:100%;min-height:40px;padding:8px 11px;margin-top:6px;border:1px solid var(--ink-3);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:14.5px;font-weight:400}
.lesson-search input:hover{border-color:var(--ink)}
.lesson-search input:focus{outline:2px solid var(--ink);outline-offset:0;box-shadow:0 0 0 4px var(--tape)}
.search-count{font-size:12.5px;color:var(--ink-3);margin:8px 0}
#lesson-nav a{display:flex;gap:8px;padding:8px 9px;text-decoration:none;color:var(--ink-2);border-radius:var(--radius);font-size:13.5px;line-height:1.6;margin-bottom:2px}
#lesson-nav a[aria-current=page]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:inset 4px 0 0 var(--tape)}
#lesson-nav a:hover{background:var(--surface-2);color:var(--ink)}
.lesson-number{font:600 13px/1.65 var(--font-num);color:var(--ink-3);min-width:19px}
.read-badge{margin-left:auto;color:var(--ok);font-size:12px;font-weight:600;white-space:nowrap}
.rail-links{display:grid;gap:7px;font-size:13.5px;margin:22px 7px}
.learning-progress{margin:20px 7px}
.learning-progress label{font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.learning-progress label span{font-family:var(--font-num)}
.learning-progress progress{width:100%;height:6px;accent-color:var(--ink);display:block;margin:10px 0}
.learning-progress small{font-size:12px;color:var(--ink-3);line-height:1.6;display:block}

main{max-width:1180px;width:100%;padding:30px 38px 64px;min-width:0}
.learn-hero{padding:22px 0 34px}
.learn-hero>p{max-width:640px;font-size:17px;color:var(--ink-2);margin-top:18px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:26px 0;font-size:15px}
.primary-link{display:inline-flex;align-items:center;min-height:42px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:8px 18px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:15px}
.primary-link:hover{background:var(--ink-2);border-color:var(--ink-2)}
.learning-promise{display:flex;gap:8px 22px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px}
.learning-promise span::before{content:"✓";margin-right:7px;color:var(--ok);font-weight:700}

/* cards and panels */
.learn-card{padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);margin:0 0 22px}
.learn-card>p{color:var(--ink-2);margin-bottom:16px}
.anchor-section{scroll-margin-top:80px}
.situation-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}
.situation-tabs button{font-size:13.5px;border-color:var(--line);border-radius:99px}
.situation-tabs button:hover{border-color:var(--ink)}
.situation-tabs [aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.situation-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.situation-card{display:block;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);padding:14px 17px;text-decoration:none;color:var(--ink)}
.situation-card strong{display:block;font-size:15px;line-height:1.6}
.situation-card small{display:block;font-size:13px;color:var(--ink-3);margin-top:5px}
.situation-card:hover{border-color:var(--ink);background:var(--surface)}
.gentle-note{padding:12px 16px;margin-top:20px;border-inline-start:4px solid var(--ink-3);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;color:var(--ink-2)}
.gentle-note strong{display:block;margin-bottom:4px;color:var(--ink)}
.basics-steps{padding-left:25px;margin:20px 0}
.basics-steps li{padding:0 0 15px 8px}
.basics-steps li::marker{color:var(--ink);font-weight:700;font-family:var(--font-num)}
.basics-steps p{font-size:14.5px;color:var(--ink-2);margin-top:4px}
.table-reading{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:15px}
.table-reading p{font-size:14px;color:var(--ink-2);margin-top:10px}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
caption{text-align:left;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
th,td{padding:8px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);color:var(--ink-2);font-weight:600}
td{font-variant-numeric:tabular-nums}
thead th{white-space:nowrap}

/* the "touch it" mean demo — SVG attributes from learn.js are recoloured here so dark mode works */
.concept-lab>label{display:block;font-size:14.5px;font-weight:600;color:var(--ink-2);margin:20px 0 12px}
.concept-lab output{font:700 17px var(--font-num);color:var(--ink);margin-left:16px}
.concept-lab input[type=range]{display:block;width:100%;accent-color:var(--ink);margin-top:14px}
#toy-plot svg{width:100%;max-height:150px;display:block}
#toy-plot line{stroke:var(--ink-3)}
#toy-plot line[stroke-dasharray]{stroke:var(--chart-3)}
#toy-plot text{fill:var(--ink-2);font-family:var(--font-num)}
#toy-plot text:last-of-type{fill:var(--chart-3);font-weight:600}
#toy-plot circle{fill:var(--chart-2);opacity:.75}
#toy-plot circle:first-of-type{fill:var(--chart-1);opacity:1}
.toy-values{display:flex;gap:30px;flex-wrap:wrap;margin:8px 0 16px}
.toy-values span{font-size:14px;color:var(--ink-2)}
.toy-values strong{font:600 22px var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink);margin-left:10px}

/* lessons */
.lesson-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);padding:30px;margin-bottom:22px;scroll-margin-top:80px}
.lesson-panel[hidden]{display:none}
.lesson-kicker{font:600 12.5px var(--font-num);color:var(--ink-3);letter-spacing:.08em}
.lesson-panel h2{font-size:28px;margin:10px 0 14px}
.lesson-story{font-size:16.5px;color:var(--ink-2);line-height:1.85;margin-bottom:20px}
.lesson-why{border-inline-start:4px solid var(--info);background:var(--info-soft);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;font-size:15px;color:var(--ink);margin:20px 0}
.when-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.when-grid h3{font-size:15px}
.when-grid p{font-size:14px;color:var(--ink-2)}
.when-grid>div{border-top:1px solid var(--line);padding-top:12px}
.practice-launch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0}
.practice-launch p{font-size:13.5px;color:var(--ink-3);flex-basis:100%;line-height:1.7}
.lesson-panel details{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:16px 0}
.lesson-panel summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-2)}
.lesson-data{margin-top:14px}
.lesson-data table{font-size:13.5px}
.lesson-data pre{overflow:auto;font:13px var(--mono);background:var(--surface);border-radius:var(--radius);padding:12px}
.tutorial-steps{list-style:none;margin:24px 0;padding:0;counter-reset:step}
.tutorial-steps>li{position:relative;counter-increment:step;padding:0 0 22px 46px;border-left:1px solid var(--line);margin-left:15px}
.tutorial-steps>li::before{content:counter(step);position:absolute;left:-15px;top:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);text-align:center;font:600 15px/30px var(--font-num)}
.tutorial-steps>li:last-child{border-left-color:transparent}
.tutorial-steps h3{font-size:16.5px;margin-bottom:5px}
.tutorial-steps p{font-size:14.5px;color:var(--ink-2)}
.expected-box{background:var(--surface);border-radius:var(--radius-lg);padding:18px 20px;margin:10px 0 22px}
.expected-box th{width:48%;background:transparent}
.expected-box td{font:600 16px var(--font-num);font-variant-numeric:tabular-nums}
.lesson-reading,.try-it,.common-mistake{margin:22px 0}
.lesson-reading p,.try-it p,.common-mistake p{font-size:14.5px;color:var(--ink-2)}
.try-it{padding:14px 18px;border-inline-start:4px solid var(--ok);background:var(--ok-soft);border-radius:0 var(--radius) var(--radius) 0}
.try-it h3{color:var(--ink)}
.try-it p{color:var(--ink-2)}
.common-mistake{padding:14px 18px;border-inline-start:4px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--radius) var(--radius) 0}
.common-mistake h3{color:var(--ink)}
.sentence-box{padding:16px 20px;border:1px dashed var(--ink-3);border-radius:var(--radius-lg);margin:20px 0}
.sentence-box p{font-size:15px;line-height:2.05}

/* quiz */
.quiz{padding:20px;border-radius:var(--radius-lg);background:var(--surface);margin-top:24px}
.quiz fieldset{border:0;margin:0;padding:0;min-width:0}
.quiz legend{font-weight:700;margin-bottom:12px;font-size:16px}
.quiz label{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:9px 12px;margin:6px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer}
.quiz label:hover{border-color:var(--ink)}
.quiz label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.quiz input{margin-top:6px;accent-color:var(--ink);flex-shrink:0}
.quiz-feedback{padding:10px 14px;border-inline-start:4px solid var(--ok);background:var(--ok-soft);border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;margin-top:12px;color:var(--ink)}
.quiz-feedback.retry{border-color:var(--warn);background:var(--warn-soft);color:var(--ink)}
.answer-key{display:none;font-size:14px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--ink-3)}
.lesson-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.lesson-bottom a{font-size:14px}
.lesson-bottom .mark-read[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.lesson-neighbors{display:flex;gap:18px;flex-wrap:wrap}

/* glossary, FAQ, teaching material */
.glossary-item,.faq-item{border-bottom:1px solid var(--line);padding:13px 0}
.glossary-item summary,.faq-item summary{cursor:pointer;font-size:15.5px;font-weight:600}
.glossary-item p,.faq-item p{font-size:14.5px;color:var(--ink-2);margin-top:9px}
.glossary-item small{display:block;margin-top:7px;font-size:13.5px}
.class-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}
.class-plans article{padding:16px 18px;border-radius:var(--radius-lg);background:var(--surface)}
.class-plans h3{font-size:16px}
.class-plans ol{padding-left:20px;font-size:13.5px}
.class-plans li{margin-bottom:8px}
.class-plans p{font-size:13.5px;color:var(--ink-2)}
.worksheet{padding:20px;background:var(--paper);border:1px dashed var(--ink-3);border-radius:var(--radius-lg)}
.worksheet ol{padding-left:24px;font-size:15px}
.worksheet li{padding:6px 0;overflow-wrap:anywhere}
.material-actions{margin-top:24px}
.material-actions>label{display:flex;gap:8px;align-items:center;font-size:14.5px}
.material-actions input{accent-color:var(--ink);width:17px;height:17px}
.material-actions>div{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.source-notes p,.source-notes li{font-size:13.5px}
.source-notes h2{font-size:18px}
.skip-link{position:absolute;top:-80px;left:20px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);padding:8px 12px;z-index:20}
.skip-link:focus{top:24px}
#learn-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:99px;box-shadow:0 6px 24px rgb(0 0 0 / .25);max-width:90vw;font-size:14px;z-index:30}
.noscript-note{margin:20px;padding:20px;background:var(--surface);border-radius:var(--radius-lg)}
.empty-search{font-size:14px;color:var(--ink-3);padding:12px 0}

@media(max-width:1150px){.learn-layout{grid-template-columns:220px minmax(0,1fr)}main{padding:26px 24px}.learn-card{padding:23px}.class-plans{grid-template-columns:1fr}.table-reading{grid-template-columns:1fr}}
@media(max-width:800px){html{scroll-padding-top:16px}.learn-header{position:static}.learn-layout{display:block}.learn-rail{position:static;height:auto;padding:16px;border:0;border-bottom:1px solid var(--line)}.learn-rail .home-link{margin-bottom:8px}.lesson-search{display:flex;align-items:center;gap:12px}.lesson-search input{margin:0;flex:1;min-width:0}#lesson-nav{display:flex;overflow:auto;gap:5px;padding:8px 0}#lesson-nav a{flex-shrink:0;max-width:210px;padding:7px 11px;border:1px solid var(--line);background:var(--paper)}#lesson-nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--tape);border-color:var(--ink)}.learning-progress{margin:8px 0}.learning-progress small{display:none}.rail-links{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 0;font-size:13px}main{padding:20px 16px}.learn-hero{padding:8px 2px 26px}.learn-card,.lesson-panel{padding:20px 16px}.anchor-section,.lesson-panel{scroll-margin-top:16px}.lesson-panel h2{font-size:24px}.when-grid{grid-template-columns:1fr}.hero-actions{gap:14px}.situation-cards{grid-template-columns:1fr}.tutorial-steps>li{padding-left:30px}.lesson-story{font-size:15.5px}h2{font-size:21px}.quiz{padding:16px}.quiz label{font-size:14px}}
.table-reading>*{min-width:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@page{size:A4;margin:16mm}
@media print{html{scroll-behavior:auto}body{font-size:11pt;line-height:1.65}.mw-tape,.mw-header,.mw-footer,.learn-header,.learn-rail,.skip-link,#learn-toast,.hero-actions,.situation-tabs,.practice-launch button,.lesson-bottom,.quiz button,.quiz-feedback,.material-actions,.concept-lab input,.learn-footer{display:none!important}.learn-layout{display:block}main{padding:0;max-width:none}.learn-card,.lesson-panel{border:0;padding:0;margin:0 0 20pt;border-radius:0;background:none}.lesson-panel[hidden]{display:block}.lesson-panel{break-before:page}.learn-hero{padding:0 0 20pt}h1{font-size:26pt}h2,.lesson-panel h2{font-size:19pt}h3{font-size:13pt}h2,h3{break-after:avoid}.expected-box,.quiz,.try-it,.sentence-box,.tutorial-steps>li,.worksheet,.class-plans article{break-inside:avoid}.expected-box{background:var(--surface)}.quiz label{font-size:11pt}.quiz-feedback{display:none}.answer-key{display:none!important}body.with-answers .answer-key{display:block!important}.when-grid,.table-reading{grid-template-columns:1fr 1fr}.class-plans{grid-template-columns:1fr}.table-scroll{overflow:visible}table{font-size:10pt}.table-scroll th,.table-scroll td{overflow-wrap:anywhere}.situation-cards{grid-template-columns:1fr 1fr}.concept-lab svg{max-height:120px}.practice-launch a{background:none;color:var(--ink);border:1px solid var(--line);font-size:10pt}.learning-promise{font-size:10pt}.read-badge{display:none}body.print-one main>section:not(#lesson-area){display:none!important}body.print-one .lesson-panel:not(.print-target){display:none!important}body.print-one .print-target{break-before:auto}}