/* Klauvy UI layer: Mono + Signal Orange, Sora / Figtree / IBM Plex Mono, Gavvy.
   Loaded after style.css. Tokens live in style.css :root and body.dark. */

@font-face{font-family:Sora;font-weight:400;font-display:swap;src:url(vendor/Sora-400.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(vendor/Sora-600.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(vendor/Sora-700.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(vendor/Figtree-400.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:400;font-style:italic;font-display:swap;src:url(vendor/Figtree-400i.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:600;font-display:swap;src:url(vendor/Figtree-600.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:700;font-display:swap;src:url(vendor/Figtree-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(vendor/IBMPlexMono-500.woff2) format('woff2')}

:root{--action:#c43e00;--action-hover:#ad3700;--action-ink:#fff;--action-soft:#fff1ea}
body.dark{--action:#ff793e;--action-hover:#ff935f;--action-ink:#111214;--action-soft:#392115}

/* ---------- Base refinements ---------- */
body{-webkit-font-smoothing:antialiased}
h3{font-family:var(--display);letter-spacing:-.01em}
.eyebrow{font:500 var(--fs-overline)/1.4 var(--mono);letter-spacing:.08em;color:var(--muted)}
.button,button{border-radius:10px;font-size:var(--fs-caption)}
.button:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.primary{background:var(--action);border-color:var(--action);color:var(--action-ink);font-weight:700;box-shadow:none}
.primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--action-ink);opacity:1}
.secondary{background:transparent;border:1.5px solid var(--action);color:var(--action);font-weight:700;box-shadow:none}
.secondary:hover{background:var(--action-soft);border-color:var(--action);color:var(--action)}
.primary:focus-visible,.secondary:focus-visible{outline-color:var(--action)}
textarea,input,select{border-radius:10px}
.link-button{border:0;background:none;padding:0;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px;cursor:pointer}
.link-button:hover{color:var(--signal)}
.badge{font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:6px;background:var(--soft);border:0;padding:3px 8px;color:var(--muted)}
.page-description{font-size:var(--fs-body);line-height:1.7}
.quiet{font-size:var(--fs-caption)}
mark{background:var(--hl);color:var(--hl-ink);border-radius:3px;padding:0 1px}

/* Sidebar */
#sidebar{background:var(--paper)}
.brand{font:700 var(--fs-h2)/1 var(--display);letter-spacing:-.02em;gap:10px}
.brand i,.p-logo i{font-style:normal;color:var(--signal)}
.brand-symbol{border-radius:10px;width:40px;height:40px;font-size:var(--fs-h3)}
.brand small{letter-spacing:.12em}

/* Klauvy's document mascot is a scalable mark with restrained interaction states. */
.brand{margin-bottom:43px;gap:10px;white-space:nowrap}
.brand-symbol{width:46px;height:46px;flex:none;background:transparent;color:inherit;border-radius:0;overflow:visible}
.brand-symbol>img,.brand-symbol>.klauvy-mascot{display:block;width:100%;height:100%}
.brand-name{font:700 var(--fs-h2)/1 var(--display);letter-spacing:-.02em}
body.dark .brand-symbol{background:#fff;border-radius:10px;padding:3px}
nav a{font-size:var(--fs-ui);border-radius:10px}
nav a>span{display:grid;place-items:center;width:20px;height:20px}
nav a.active{color:var(--ink);background:var(--soft);font-weight:700}
nav a.active .icon{color:var(--signal)}
header{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.search-trigger{border-radius:10px;font-size:var(--fs-caption)}
footer{font-size:var(--fs-caption)}

/* ---------- Learn / module / old lesson pages ---------- */
.path-module p,.lesson-index p,.lesson-objective{font-size:var(--fs-ui)}
.path-module li a{font-size:var(--fs-ui)}
.path-module li small{font:500 var(--fs-overline) var(--mono)}
.lesson-index small{font:500 var(--fs-overline) var(--mono)}
.prose{font-size:var(--fs-body);line-height:1.75;max-width:68ch}
.prose h2{font-size:var(--fs-h2)}
.lesson-outline{font-size:var(--fs-caption)}
.lesson-outline details a{font-size:var(--fs-caption)}
.content-tabs a,.content-tabs button{font-size:var(--fs-ui)}
.content-tabs .active{border-bottom-color:var(--signal);color:var(--ink)}
.quiz legend{font:600 var(--fs-lead)/1.5 var(--display);letter-spacing:-.01em}
.quiz-option{font-size:var(--fs-body);border-radius:12px;border-width:1.5px;padding:13px 15px}
.quiz-feedback{font-size:var(--fs-ui)}
.go-deeper{border:1.5px dashed var(--line);border-radius:16px;padding:14px 18px;margin:28px 0}
.go-deeper>summary{cursor:pointer;font:700 var(--fs-body) var(--display);letter-spacing:-.01em;list-style:none;display:flex;gap:10px;align-items:center}
.go-deeper>summary::-webkit-details-marker{display:none}
.go-deeper>summary>span{font:500 var(--fs-overline) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hl-ink);background:var(--hl);padding:3px 8px;border-radius:6px}
.go-deeper[open]>summary{margin-bottom:12px}
.outline-sources{margin:22px 0 4px;padding-top:18px;border-top:1px solid var(--line)}
.outline-source{padding:10px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.outline-source .link-button,.outline-source a{font-size:var(--fs-caption);text-align:left;line-height:1.4}
.outline-source small{color:var(--muted);font-size:var(--fs-caption);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.type-badge{display:inline-block;width:max-content;font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--soft);color:var(--muted)}

/* ---------- Library ---------- */
.lib-filters input{border-radius:12px;font-size:var(--fs-ui);padding:12px 14px}
.lib-filters select{font-size:var(--fs-caption);max-width:220px}
#savedFilter[aria-pressed="true"]{background:var(--action-soft);color:var(--action);border-color:var(--action)}
.lib-count{font:500 var(--fs-overline) var(--mono);color:var(--muted);margin:-14px 0 8px}
.resource-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-caption);font-weight:500}
.resource-title h2{font-size:var(--fs-h3)}
.resource-summary{font-size:var(--fs-body);line-height:1.7}
.resource-use{font-size:var(--fs-caption)}
.resource-open{font-size:var(--fs-caption);font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}

/* ---------- ⌘K palette ---------- */
#search{border-radius:18px}
.scope-chips{display:flex;gap:6px;flex-wrap:wrap;padding:12px 25px;border-bottom:1px solid var(--line)}
.scope-chips button{font:600 var(--fs-caption) var(--sans);padding:6px 12px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper)}
.scope-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.search-group{padding:8px 0 4px}
.search-group h3{font:500 var(--fs-overline) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px;display:flex;gap:8px}
.search-group h3 span{color:var(--signal)}
.search-result{border-radius:10px!important;padding:10px 12px!important;margin:0 -12px;width:calc(100% + 24px)!important;border-bottom:0!important}
.search-result:hover,.search-result:focus-visible{background:var(--soft)!important;outline:none}
.search-result small{font:500 var(--fs-overline) var(--mono);letter-spacing:.04em;text-transform:uppercase}
.search-result span{font:600 var(--fs-body) var(--sans)}
.search-result em{display:block;font-style:normal;font-size:var(--fs-caption);color:var(--muted);margin-top:3px;line-height:1.5}
.more-in-group{font-size:var(--fs-caption);margin:4px 0 6px}
.search-hint{padding:18px 0;color:var(--muted);font-size:var(--fs-ui)}
.search-hint p{margin:0 0 8px}

/* ---------- Tooltips (terms and citations) ---------- */
.tt{position:relative;display:inline}
.tt>button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;line-height:inherit;display:inline;border-radius:3px;text-align:inherit}
.term>button{font-weight:600;background:linear-gradient(transparent 58%,var(--hl) 58%);padding:0 1px}
.term>button:after{content:"?";display:inline-grid;place-items:center;width:14px;height:14px;margin-left:3px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 var(--fs-caption)/1 var(--sans);vertical-align:2px}
.cite>button{font:700 var(--fs-caption)/1 var(--sans);color:var(--paper);background:var(--ink);border-radius:99px;padding:3px 7px;vertical-align:3px;margin-left:3px;cursor:pointer}
.cite>button:hover{background:var(--signal)}
.pop{--shift:0px;position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(calc(-50% + var(--shift)));width:310px;z-index:60;visibility:hidden;opacity:0;transition:opacity .12s;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;font:400 var(--fs-ui)/1.55 var(--sans);color:var(--ink);text-align:left;box-shadow:0 18px 40px -14px #11121459;white-space:normal;text-transform:none;letter-spacing:0}
.pop:after{content:"";position:absolute;left:calc(50% - var(--shift));bottom:-8px;width:13px;height:13px;background:var(--paper);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.tt.below .pop{bottom:auto;top:calc(100% + 12px)}
.tt.below .pop:after{bottom:auto;top:-8px;transform:translateX(-50%) rotate(225deg)}
.tt:hover .pop,.tt:focus-within .pop,.tt.open .pop{visibility:visible;opacity:1}
.tt.closed .pop{visibility:hidden!important;opacity:0!important}
.cite .pop{width:340px}
.pop .ph{display:flex;justify-content:space-between;align-items:center;gap:8px;font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pop .pt{display:block;font:700 var(--fs-lead)/1.3 var(--display);letter-spacing:-.02em;margin-bottom:4px}
.pop .pa,.pop .pw,.pop .pv{display:block;margin-top:8px;font-size:var(--fs-caption);color:var(--muted)}
.pop .pa b,.pop .pw b,.pop .pv b{display:block;font:500 var(--fs-overline) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hl-ink)}
.pop .pf{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font:600 var(--fs-caption) var(--sans);color:var(--muted)}
.pop a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}

/* ---------- Home ---------- */
.home{max-width:1000px}
.home-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 24px;flex-wrap:wrap}
.home-top h1{font-size:var(--fs-h1);line-height:1.1;margin:0;max-width:640px}
.continue-card{display:block;background:var(--paper);border:1.5px solid var(--line);border-radius:24px;padding:28px 30px;margin-bottom:16px}
.cc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;line-height:1.5;font:500 var(--fs-overline) var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.continue-card h2{font-size:var(--fs-h2);line-height:1.15;margin:0 0 10px}
.continue-card p{font-size:var(--fs-body);color:var(--muted);max-width:560px}

.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.stat-card{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:4px;align-content:start}
.stat-card .eyebrow{margin:0}
.stat-card b{font:700 var(--fs-h3) var(--display);letter-spacing:-.02em}
.stat-card b span{font:500 var(--fs-caption) var(--sans);color:var(--muted);letter-spacing:0}
.stat-card a{font-size:var(--fs-caption);font-weight:600;margin-top:4px}
.stat-card small{font-size:var(--fs-caption);color:var(--muted)}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0}
.meter i{display:block;height:100%;background:var(--signal);border-radius:99px}
.review-due{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:22px}
.review-due a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-weight:600}
.review-due a:first-of-type{border-top:0}
.review-due small{font:500 var(--fs-overline) var(--mono);color:var(--signal);white-space:nowrap}
.home .home-actions{margin-top:8px}

/* ---------- Glossary ---------- */
.glossary-filter{border:0;padding:0 0 18px}
.glossary-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;max-width:1100px}
.gloss-item{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;scroll-margin-top:100px}
.gloss-item.is-focus{border-color:var(--signal);box-shadow:0 0 0 3px var(--hl)}
.gi-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gloss-item h2{font-size:var(--fs-h3);margin:0}
.gloss-item p{font-size:var(--fs-ui);margin:8px 0 0}
.gi-alias{font:500 var(--fs-overline) var(--mono);color:var(--muted)}
.gi-analogy{background:var(--tip);border-radius:12px;padding:8px 10px}
.gi-analogy b{display:block;font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--hl-ink)}
.gi-source,.gi-uses,.gi-see{font-size:var(--fs-caption)!important;color:var(--muted)}
.gloss-item a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media(max-width:760px){
 .home-grid{grid-template-columns:1fr}
 .continue-card{padding:22px 18px}
 .glossary-list{grid-template-columns:1fr}
}
@media(max-width:640px){
 .pop,.cite .pop{position:fixed;left:12px;right:12px;bottom:16px;top:auto!important;transform:none;width:auto;max-height:60vh;overflow:auto}
 .pop:after{display:none}
 .lib-filters select{max-width:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---------- Task-specific landing pages ---------- */
.course-page,.documents-page,.verification-page{max-width:1160px}
.course-page h1,.documents-page h1,.verification-page h1{font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}

/* Learn: a route with a clear next stop and visible stages. */
.course-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:32px;align-items:stretch;margin:0 0 52px}
.course-lead-copy{position:relative;overflow:hidden;background:var(--hl);border-radius:22px;padding:36px 38px 42px;min-height:320px;display:flex;flex-direction:column;align-items:flex-start}
.course-lead-copy:after{content:"";position:absolute;width:220px;height:220px;border:36px solid color-mix(in srgb,var(--signal) 13%,transparent);border-radius:50%;right:-118px;bottom:-116px;pointer-events:none}
.course-lead-copy .eyebrow{color:var(--hl-ink)}
.course-lead-copy h1{max-width:560px;margin:6px 0 16px}
.course-lead-copy>p{font-size:var(--fs-body);line-height:1.65;max-width:50ch;color:var(--ink);margin-bottom:25px}
.course-lead-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:auto;position:relative;z-index:1}

.course-next{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px 30px;display:flex;flex-direction:column;align-items:flex-start}
.next-index{width:100%;display:flex;justify-content:space-between;gap:10px;font:500 var(--fs-overline) var(--mono);letter-spacing:.06em;color:var(--muted)}
.next-index b{color:var(--signal);font-weight:500}
.course-next h2{font-size:var(--fs-h2);margin:30px 0 12px;line-height:1.2}
.course-next p{font-size:var(--fs-ui);color:var(--muted);line-height:1.6;margin-bottom:22px}

.course-next small{font-size:var(--fs-caption);line-height:1.5;color:var(--muted);margin-top:16px}
.course-map-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px}
.course-map-heading .eyebrow{margin-bottom:7px}
.course-map-heading h2{font-size:var(--fs-h2);margin:0}
.course-map-heading>p{max-width:340px;font-size:var(--fs-caption);color:var(--muted);margin:0}
.course-chapter{display:grid;grid-template-columns:205px minmax(0,1fr);gap:34px;margin:0 0 54px}
.chapter-intro{position:sticky;top:102px;align-self:start}
.chapter-index{font:500 var(--fs-overline) var(--mono);color:var(--signal)}
.chapter-intro h2{font-size:var(--fs-lead);margin:14px 0 8px}
.chapter-intro p{font-size:var(--fs-caption);line-height:1.55;color:var(--muted)}
.chapter-modules{border-top:1px solid var(--line)}
.course-module{display:grid;grid-template-columns:48px minmax(0,1fr);gap:17px;padding:25px 0;border-bottom:1px solid var(--line)}
.module-rail{position:relative;font:600 var(--fs-caption) var(--mono);color:var(--signal);padding-top:2px}
.module-rail:after{content:"";position:absolute;top:30px;left:10px;bottom:-26px;width:1px;background:var(--line)}
.course-module:last-child .module-rail:after{display:none}
.module-topline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font:500 var(--fs-overline) var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.025em}
.module-topline span:first-child{color:var(--hl-ink)}
.module-content h3{font-size:var(--fs-h3);margin:9px 0 6px}
.module-content h3 a:hover{color:var(--signal)}
.module-content>p{font-size:var(--fs-ui);color:var(--muted);line-height:1.6;max-width:640px;margin:0 0 12px}
.module-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 25px}

.module-actions details{position:relative;font-size:var(--fs-caption);color:var(--muted)}
.module-actions summary{cursor:pointer;font-weight:600}
.module-actions ol{margin:10px 0 0;padding:0;list-style:none;min-width:min(550px,65vw)}
.module-actions li a{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);font-size:var(--fs-caption)}
.module-actions li small{white-space:nowrap;color:var(--muted)}

/* Draft: browse by matter, then inspect a real starting document. */
.documents-lead{max-width:750px;padding:8px 0 30px}
.documents-lead h1{margin:4px 0 12px}
.documents-lead>p{font-size:var(--fs-body);color:var(--muted);line-height:1.6;max-width:610px}
.document-feature{border-top:1px solid var(--line);padding-top:22px;margin:10px 0 55px}
.document-feature-label{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:17px}
.document-feature-label>span{font:500 var(--fs-overline) var(--mono);letter-spacing:.07em;color:var(--signal)}
.document-feature-label p{font-size:var(--fs-caption);color:var(--muted);margin:0}
.document-feature-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.featured-document{background:var(--ink);color:var(--paper);border-radius:18px;padding:25px 28px;min-height:270px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s ease,box-shadow .18s ease}
.featured-document:hover{transform:translateY(-3px);box-shadow:0 12px 28px -20px var(--ink)}
.featured-document.feature-light{background:var(--hl);color:var(--ink)}
.featured-number{font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;opacity:.75}
.featured-document h2{font-size:var(--fs-h2);line-height:1.2;margin:24px 0 10px;max-width:460px}
.featured-document p{font-size:var(--fs-ui);line-height:1.6;max-width:54ch;opacity:.78}
.featured-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:var(--fs-caption);font-weight:700}
.catalogue-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:17px}
.catalogue-heading h2{font-size:var(--fs-h2);margin:0}
.catalogue-heading .eyebrow{margin:0 0 6px}
.catalogue-heading>p{font-size:var(--fs-caption);color:var(--muted);max-width:350px;margin:0}
.document-filters{margin:0 0 26px;display:grid;grid-template-columns:minmax(0,1fr) 220px}
.document-filters input,.document-filters select{font-size:var(--fs-ui);padding:11px 13px;min-width:0}
.document-group{display:grid;grid-template-columns:205px minmax(0,1fr);gap:34px;border-top:1px solid var(--line);padding:23px 0 28px}
.document-group-title h3{font-size:var(--fs-body);margin:0 0 6px}
.document-group-title p{font-size:var(--fs-caption);line-height:1.55;color:var(--muted)}
.document-group-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.document-choice{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:start;gap:13px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:134px;transition:border-color .16s ease,transform .16s ease}
.document-choice:hover{border-color:var(--signal);transform:translateY(-2px)}
.choice-icon{width:34px;height:38px;border-radius:7px;background:var(--soft);display:grid;place-items:center;color:var(--signal)}
.choice-copy{display:grid;gap:5px}
.choice-category{font:500 var(--fs-overline) var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.choice-copy strong{font:700 var(--fs-body)/1.35 var(--display);letter-spacing:-.02em}
.choice-use{font-size:var(--fs-caption);line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.choice-arrow{color:var(--muted)}
.document-empty{border-top:1px solid var(--line)}

/* Updates: a manually maintained queue beside the selected review. */
.verification-lead{display:flex;justify-content:space-between;align-items:end;gap:35px;padding:8px 0 28px;border-bottom:1px solid var(--line);margin-bottom:22px}
.verification-lead>div:first-child{max-width:650px}
.verification-lead h1{margin:4px 0 12px}
.verification-lead p{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin:0}
.verification-baseline{max-width:260px;display:grid;gap:4px;padding:14px 0 0 18px;border-left:2px solid var(--signal)}
.verification-baseline span,.verification-list-head,.detail-topline{font:500 var(--fs-overline) var(--mono);letter-spacing:.055em;color:var(--muted)}
.verification-baseline strong{font:700 var(--fs-ui) var(--display)}
.verification-baseline small{font-size:var(--fs-caption);line-height:1.5;color:var(--muted)}
.verification-workspace{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr);gap:26px;align-items:start}
.verification-list{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.verification-list-head{display:flex;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.verification-list-head small{font:inherit}
.verification-item{width:100%;display:grid;grid-template-columns:25px minmax(0,1fr) 16px;gap:10px;text-align:left;justify-content:stretch;align-items:center;padding:17px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.verification-item:last-child{border-bottom:0}
.verification-item:hover{background:var(--soft)}
.verification-item.is-active{background:var(--hl);box-shadow:inset 4px 0 var(--signal)}
.verification-item-count{align-self:start;font:500 var(--fs-overline) var(--mono);color:var(--signal);padding-top:3px}
.verification-item strong{display:block;font:700 var(--fs-ui)/1.35 var(--display);letter-spacing:-.02em}
.verification-item small{display:block;color:var(--muted);font-size:var(--fs-caption);margin-top:5px}
.verification-item>.icon{color:var(--muted)}
.verification-detail{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:27px 32px 30px;min-height:600px}
.detail-topline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.detail-topline span:last-child{color:var(--hl-ink)}
.verification-detail h2{font-size:var(--fs-h2);margin:28px 0 7px}
.detail-question{font-size:var(--fs-body);color:var(--muted);margin-bottom:29px}
.detail-section{border-top:1px solid var(--line);padding:20px 0 21px}
.detail-section h3,.detail-note label{font:700 var(--fs-ui) var(--display);margin-bottom:9px;display:block}
.detail-section p{font-size:var(--fs-ui);line-height:1.65;color:var(--ink);max-width:65ch;margin:0}
.detail-sources{display:grid;gap:7px;margin-top:9px}
.detail-sources button{border:0;border-radius:7px;padding:8px 0;justify-content:space-between;text-align:left;color:var(--ink);font-size:var(--fs-caption);font-weight:600}
.detail-sources button:hover{color:var(--signal)}

.detail-note{background:var(--soft);padding:19px;border-radius:12px;margin-top:7px}
.detail-note p{font-size:var(--fs-caption);line-height:1.55;color:var(--muted);margin:0 0 12px}
.detail-note textarea{background:var(--paper);font-size:var(--fs-caption);min-height:145px}
.detail-note small{display:block;font-size:var(--fs-caption);color:var(--muted);margin-top:7px}

@media(max-width:1000px){
 .course-lead{grid-template-columns:1fr}.course-lead-copy{min-height:270px}.course-next h2{margin-top:18px}
 .course-chapter,.document-group{grid-template-columns:165px minmax(0,1fr);gap:22px}
 .document-group-list{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .course-lead{gap:12px;margin-bottom:36px}.course-lead-copy{padding:27px 23px;min-height:260px}.course-next{padding:22px 23px}
 .course-map-heading,.catalogue-heading,.document-feature-label,.verification-lead{display:block}
 .course-map-heading>p,.catalogue-heading>p,.document-feature-label p{margin-top:9px}
 .course-chapter,.document-group{display:block}.chapter-intro{position:static;margin-bottom:16px}.chapter-intro h2{margin:5px 0}
 .course-module{grid-template-columns:32px minmax(0,1fr);gap:10px}.module-topline span:last-child{display:none}
 .document-feature-grid,.document-group-list,.verification-workspace{grid-template-columns:1fr}
 .featured-document{min-height:220px;padding:22px}.document-group-title{margin-bottom:16px}
 .document-filters{grid-template-columns:1fr}.document-filters select{max-width:none}
 .verification-baseline{margin-top:20px;max-width:none}.verification-workspace{gap:13px}.verification-list{display:flex;overflow-x:auto;border-radius:10px}.verification-list-head{display:none}.verification-item{min-width:190px;max-width:230px;border-bottom:0;border-right:1px solid var(--line);grid-template-columns:1fr 16px;align-items:start}.verification-item-count{display:none}.verification-item small{line-height:1.35}.verification-detail{padding:23px 20px;min-height:0}
}
.brand-symbol{display:grid;place-items:center}.brand-symbol .icon{width:22px;height:22px;stroke-width:2;color:var(--paper)}
.gloss-item .gi-alias{font:500 var(--fs-overline)/1.5 var(--mono);color:var(--muted);margin-top:4px}

/* ---------- Icons (Lucide) ---------- */
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke-width:1.9}
nav a .icon{width:18px;height:18px;vertical-align:0}
.has-icon{display:inline-flex;align-items:center;gap:.4em}
a.has-icon .icon-arrow-right,button.has-icon .icon-arrow-right{transition:transform .15s}
a.has-icon:hover .icon-arrow-right,button.has-icon:hover .icon-arrow-right{transform:translateX(2px)}
.icon-arrow-up-right{width:1em;height:1em}
.icon.is-filled,.bookmark[aria-pressed="true"] .icon{fill:var(--signal);stroke:var(--signal)}
#menu .icon,#theme .icon{width:20px;height:20px;vertical-align:-.25em}
.search-trigger{display:inline-flex;align-items:center;gap:8px}.search-trigger>span{display:grid}.search-trigger .icon{width:16px;height:16px}
[data-close] .icon{width:20px;height:20px}
.action-icon .icon{width:26px;height:26px;stroke-width:1.6}
.import-symbol .icon{width:34px;height:34px;stroke-width:1.6}
.editor-tools .icon{width:18px;height:18px}
.lib-filters #savedFilter{display:inline-flex;align-items:center;gap:6px}

/* ---------- Library cards ---------- */
.library-list{display:grid;gap:10px;max-width:900px}
.library-item{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:0;transition:border-color .15s}
.library-item:hover{border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.lib-card>summary{position:relative;list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:16px 64px 16px 20px}
.lib-card>summary::-webkit-details-marker{display:none}
.lib-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 var(--fs-overline) var(--mono);color:var(--muted)}
.lib-meta>span:not(.type-badge):not(:last-child):after{content:"·";margin-left:10px;color:var(--muted);opacity:.5}
.lib-card h2{grid-column:1;font-size:var(--fs-lead);line-height:1.3;margin:8px 0 4px}
.lib-blurb{grid-column:1;margin:0;font-size:var(--fs-ui);color:var(--muted);line-height:1.5}
.lib-body{padding:2px 20px 18px;border-top:1px solid var(--line);margin:0 20px;padding-left:0;padding-right:0}
.lib-body h3{font:500 var(--fs-overline) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.lib-points{margin:0 0 12px;padding-left:20px;font-size:var(--fs-ui);line-height:1.6}
.lib-points li{margin:5px 0}
.lib-points li::marker{color:var(--signal)}
.lib-use{font-size:var(--fs-ui);margin:0 0 8px;color:var(--ink)}
.lib-use b{display:block;font:500 var(--fs-overline) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.lib-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lib-actions .button{display:inline-flex;align-items:center;gap:7px}
.library-item>.bookmark{position:absolute;right:12px;top:12px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted);border-radius:10px}
.library-item>.bookmark:hover{background:var(--soft);color:var(--ink)}
.library-item>.bookmark .icon{width:18px;height:18px}
@media(max-width:640px){.lib-card>summary{padding:14px 52px 14px 16px}.lib-body{margin:0 16px}.lib-card h2{font-size:var(--fs-lead)}.library-item>.bookmark{right:6px;top:6px}}

/* Client playbooks */
.playbook-list>a{align-items:start}
.playbook-list>a>.icon{color:var(--muted);margin-top:8px}
.pb-meta{display:block;margin-top:8px;font:var(--fs-overline) var(--mono);letter-spacing:.4px;color:var(--muted)}
.pb-head{max-width:760px}
.pb-layout{display:grid;grid-template-columns:minmax(0,680px) 280px;gap:56px;align-items:start}
.pb-main>section{margin-bottom:40px}
.pb-main h2{font-size:var(--fs-h3);margin-bottom:14px}
.pb-when ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.pb-when li{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:7px 12px;line-height:1.5;font-size:var(--fs-caption)}
.pb-steps-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pb-progress{font:var(--fs-overline) var(--mono);color:var(--muted)}
.pb-steps{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.pb-steps label{display:grid;grid-template-columns:18px 24px 1fr;gap:10px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui);line-height:1.65;cursor:pointer}
.pb-steps input{margin:4px 0 0;accent-color:var(--signal);width:16px;height:16px}
.pb-n{font:600 var(--fs-overline)/1.9 var(--mono);color:var(--signal)}
.pb-steps input:checked~span:last-child{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.pb-route{margin-bottom:18px}
.pb-route h3{font-size:var(--fs-caption);margin-bottom:8px}
.pb-route ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 4px;font-size:var(--fs-caption)}
.pb-route li{background:var(--soft);border-radius:4px;padding:4px 9px}
.pb-route li:not(:last-child):after{content:"→";margin-left:8px;color:var(--muted)}
.pb-outputs,.pb-team,.pb-terms{margin:0}
.pb-outputs>div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-caption)}
.pb-outputs dt{font-weight:600}
.pb-outputs dd,.pb-team dd,.pb-terms dd{margin:0;color:var(--muted)}
.pb-watch{background:var(--tip);border:1px solid var(--tip-b);border-radius:8px;padding:20px 22px}
.pb-watch h2{font-size:var(--fs-body);margin-bottom:8px}
.pb-watch ul{margin:0;padding-left:18px;font-size:var(--fs-caption);line-height:1.7}
.pb-watch li{margin:6px 0}
.pb-practice{background:var(--soft);border-radius:8px;padding:20px 22px}
.pb-practice .eyebrow{margin-bottom:8px;color:var(--signal)}
.pb-practice p{margin:0;font-size:var(--fs-caption);line-height:1.7}
.pb-side{position:sticky;top:98px;max-height:calc(100vh - 120px);overflow:auto;font-size:var(--fs-caption)}
.pb-side>section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.pb-side>section:last-child{border:0}
.pb-side .eyebrow{margin-bottom:10px}
.pb-team>div,.pb-terms>div{margin-bottom:12px;line-height:1.55}
.pb-team dt,.pb-terms dt{font-weight:600;color:var(--ink)}
.pb-link{display:flex;gap:8px;align-items:flex-start;padding:6px 0;line-height:1.45;color:var(--ink)}
.pb-link .icon{flex:none;margin-top:2px;color:var(--muted)}
.pb-link:hover span{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.pb-layout{grid-template-columns:1fr;gap:10px}.pb-side{position:static;max-height:none;border-top:1px solid var(--line);padding-top:26px}}
@media(max-width:760px){.pb-outputs>div{grid-template-columns:1fr;gap:2px}.pb-steps label{font-size:var(--fs-caption)}.pb-watch,.pb-practice{padding:16px}}

/* Pinpoint citations: open the source in the reader at the cited page or passage */
.cite{display:inline;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:500 var(--fs-caption)/1.2 var(--mono);letter-spacing:0;padding:1px 6px 2px;margin:0 1px;border-radius:5px;cursor:pointer;white-space:nowrap;vertical-align:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cite:hover{border-color:var(--signal);color:var(--signal)}
.cite-note{font-size:var(--fs-caption);color:var(--muted);margin:4px 0 12px;padding:8px 12px;border-radius:8px;background:var(--soft)}
.cite-note b{color:var(--ink);font-weight:600}
@media (max-width:640px){.cite{white-space:normal}}

/* Buttons inside lesson prose keep button colours, not prose link colours */
.prose a.button{color:var(--ink);text-decoration:none}
.prose a.button.primary,.prose a.primary{color:var(--action-ink)}

/* Step diagram inside lesson text: a line starting "=> " with steps separated by " | " */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin:14px 0 18px}
.flow span{flex:1 1 0;min-width:120px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:var(--fs-ui);line-height:1.45}
.flow i{display:flex;align-items:center;color:var(--muted);font-style:normal}
.flow i .icon{width:16px;height:16px}
@media (max-width:640px){.flow{flex-direction:column}.flow span{min-width:0}.flow i{justify-content:center;transform:rotate(90deg);height:18px}}
/* Focused Home, source finder and matter catalogue */
.home-focus,.source-page,.matter-page{max-width:1180px}
.home-focus-heading,.source-intro,.matter-intro{margin:0 0 24px}
.home-focus-heading h1,.source-intro h1,.matter-intro h1{font-size:var(--fs-h1);line-height:1.13;max-width:800px;margin:0 0 10px;text-wrap:balance}
.home-focus-heading p,.source-intro p,.matter-intro p{font-size:var(--fs-body);color:var(--muted);max-width:650px;margin:0;line-height:1.55}
.home-focus-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:18px;align-items:stretch}
.home-focus .continue-card{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:25px 30px;margin:0}
.home-focus .continue-card h2{font-size:var(--fs-h2);max-width:660px}
.home-focus .continue-card p{font-size:var(--fs-ui);line-height:1.55;margin-bottom:0}
.home-focus .continue-card .actions{margin:18px 0 0}

.home-course-link .icon,.home-route a .icon,.home-review a .icon{width:15px;height:15px;vertical-align:-.2em}
.home-route{border-top:2px solid var(--ink);padding:19px 0 0 3px}
.home-route h2{font-size:var(--fs-h3);margin:4px 0 9px}
.home-route p{font-size:var(--fs-caption);color:var(--muted);line-height:1.55;margin-bottom:18px}
.home-route a{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:11px 2px;font-size:var(--fs-caption);font-weight:600}
.home-route a:hover,.home-course-link:hover{color:var(--signal)}
.home-review{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--soft);padding:18px 22px;margin:0 0 22px}
.home-review h2{font-size:var(--fs-lead);margin:0 0 3px}.home-review p{font-size:var(--fs-caption);color:var(--muted);margin:0}
.source-search{display:flex;gap:12px;align-items:end;margin:0 0 14px}.source-search-field{flex:1;min-width:0}.source-search label{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.source-search input{display:block;margin-top:7px;width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper);font-size:var(--fs-body);color:var(--ink)}
.source-search #savedFilter{min-height:50px;border-radius:12px;font-size:var(--fs-caption)}.source-search #savedFilter.selected{background:var(--action-soft);border-color:var(--action);color:var(--action)}
.source-filter-drawer{border-bottom:1px solid var(--line);margin-bottom:12px}.source-filter-drawer>summary{cursor:pointer;display:flex;align-items:center;gap:16px;padding:8px 0 13px;font-size:var(--fs-caption);font-weight:600;list-style:none}.source-filter-drawer>summary::-webkit-details-marker{display:none}.source-filter-drawer>summary span{font-size:var(--fs-caption);color:var(--muted);font-weight:400}.source-filter-drawer .icon{width:14px;height:14px;vertical-align:-.2em}
.source-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:5px 0 17px}.source-filter-grid label{font-size:var(--fs-caption);color:var(--muted)}.source-filter-grid select{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:var(--paper);font-size:var(--fs-caption);color:var(--ink)}
.source-chips{display:flex;flex-wrap:wrap;gap:7px}.source-chips:empty{display:none}.source-chips button{border:1px solid var(--line);background:var(--soft);color:var(--muted);border-radius:8px;padding:5px 10px;font-size:var(--fs-caption)}
.source-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:24px;align-items:start;margin-top:20px}.source-results-head{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin:0 0 12px}.source-results-head h2{font-size:var(--fs-lead);margin:0}.source-results-head p{font:var(--fs-overline) var(--mono);color:var(--muted);margin:0;text-align:right}
.source-page .library-list{max-width:none}.source-page .library-item{border-radius:10px}.source-page .lib-card>summary{padding:14px 47px 14px 17px}.source-page .lib-card h2{font-size:var(--fs-lead);margin:6px 0 3px}.source-page .lib-blurb{font-size:var(--fs-caption);line-height:1.45}.source-page .lib-meta{font-size:var(--fs-caption)}.source-page .library-item>.bookmark{right:5px;top:5px}
.source-focus,.matter-preview{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:23px;min-width:0}.focus-kicker{font:600 var(--fs-overline) var(--mono);letter-spacing:.08em;color:var(--signal);margin-bottom:16px}.focus-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:var(--fs-overline) var(--mono);color:var(--muted);margin-bottom:15px}.source-focus h2,.matter-preview h2{font-size:var(--fs-h3);line-height:1.25;margin:0 0 10px}.source-focus>p,.matter-preview>p{font-size:var(--fs-caption);line-height:1.55;color:var(--muted)}.focus-note{border-top:1px solid var(--line);padding:11px 0;font-size:var(--fs-caption);line-height:1.5}.focus-note b{display:block;font:600 var(--fs-overline) var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}.focus-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}.focus-actions a:not(.button){font-size:var(--fs-caption);font-weight:600}.focus-actions .icon,.matter-preview .icon{width:15px;height:15px}.library-focus-empty{font-size:var(--fs-caption);color:var(--muted)}
.matter-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.65fr);gap:26px;align-items:start}.matter-page .playbook-list{max-width:none}.matter-group{border-top:2px solid var(--ink);padding-top:15px;margin-top:25px}.matter-group:first-child{margin-top:0}.matter-group h2{font-size:var(--fs-lead);margin:0 0 3px}.matter-group p{font-size:var(--fs-caption);color:var(--muted);margin:0 0 5px}.matter-page .playbook-list>a{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:14px;align-items:start;padding:14px 2px;border-bottom:1px solid var(--line)}.matter-page .playbook-list>a>span:first-child{font:700 var(--fs-body) var(--display);color:var(--signal)}.matter-page .playbook-list h3{font:600 var(--fs-body)/1.35 var(--display);margin:0 0 3px}.matter-page .playbook-list>a p{font-size:var(--fs-caption);line-height:1.4;color:var(--muted);margin:0}.matter-page .playbook-list>a:hover h3,.matter-page .playbook-list>a:focus-visible h3{color:var(--signal)}.matter-page .playbook-list>a>.icon{width:17px;height:17px;margin:3px 0 0}.matter-preview{top:96px}.matter-preview .button{margin-top:12px}.matter-preview small{display:block;color:var(--muted);font:var(--fs-overline) var(--mono);margin-top:12px}
@media(max-width:950px){.home-focus-layout,.source-workspace,.matter-layout{grid-template-columns:1fr}.home-route{border-top:1px solid var(--line);padding-top:17px}.source-focus,.matter-preview{position:static}.matter-preview{grid-row:1}}
@media(max-width:640px){.home-focus-heading h1,.source-intro h1,.matter-intro h1{font-size:var(--fs-h1)}.home-focus .continue-card{padding:20px}.home-focus .continue-card h2{font-size:var(--fs-h2)}.home-review{display:block}.source-search{align-items:stretch;display:block}.source-search #savedFilter{margin-top:9px;min-height:40px}.source-filter-grid{grid-template-columns:1fr 1fr}.source-filter-drawer>summary{display:block}.source-filter-drawer>summary span{display:block}.source-results-head{display:block}.source-results-head p{text-align:left}.matter-preview{display:none}}

/* Consistent disclosure control: native details behaviour with the app's Lucide chevron. */
details > summary{position:relative;list-style:none;cursor:pointer;padding-right:28px}
details > summary::marker{content:""}
details > summary::-webkit-details-marker{display:none}
details > summary .disclosure-icon{position:absolute;right:0;top:50%;display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;color:var(--muted);transform:translateY(-50%);transition:transform .18s ease,color .18s ease;pointer-events:none}
details > summary .disclosure-icon .icon{width:16px;height:16px}
details[open] > summary .disclosure-icon{transform:translateY(-50%) rotate(180deg)}
details > summary:hover .disclosure-icon{color:var(--signal)}
.lib-card > summary::after{content:none}
.lib-card > summary .disclosure-icon{right:23px;top:auto;bottom:17px;transform:none}
.lib-card[open] > summary .disclosure-icon{transform:rotate(180deg)}
.course-module{scroll-margin-top:105px}



.module-actions{gap:8px 24px}
.module-actions details{order:3;flex-basis:100%;width:100%;min-width:0}
.module-actions details summary{border-top:1px solid var(--line);padding:12px 28px 10px 0;color:var(--ink);font-size:var(--fs-caption)}
.module-actions details ol{min-width:0;width:100%;margin:0 0 8px}
.module-actions details li a{padding:10px 0}

/* Approved Klauvy document symbols: one 24px outline set across the Draft catalogue and template headers. */
.draft-icon{display:block;width:22px;height:22px;flex:none}
.choice-icon{color:var(--ink);transition:color .16s ease}
.document-choice:is(:hover,:focus-visible) .choice-icon{color:var(--signal)}
.featured-document{position:relative}
.featured-document h2{margin-top:38px}
.featured-icon{position:absolute;top:22px;right:24px;width:42px;height:44px;border-radius:9px;background:var(--soft);color:var(--ink);display:grid;place-items:center;transition:color .16s ease}
.featured-document:is(:hover,:focus-visible) .featured-icon{color:var(--signal)}
.featured-icon .draft-icon{width:24px;height:24px}
.template-page-heading{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:37px}
.template-page-heading .page-heading{margin:0}
.template-page-icon{width:48px;height:50px;border-radius:10px;background:var(--soft);color:var(--ink);display:grid;place-items:center;transition:color .16s ease}
.template-page-icon:hover{color:var(--signal)}
.template-page-icon .draft-icon{width:24px;height:24px}
@media(max-width:640px){.template-page-heading{grid-template-columns:40px minmax(0,1fr);gap:12px;margin-bottom:28px}.template-page-icon{width:40px;height:42px}.template-page-icon .draft-icon{width:22px;height:22px}}
/* Device-only storage notice and backup reminder (Review desk and editor). */
.device-notice{display:flex;align-items:flex-start;gap:14px;max-width:900px;margin:0 0 22px;padding:14px 16px;border:1px solid var(--tip-b);background:var(--tip);border-radius:8px;font-size:var(--fs-caption);line-height:1.7}
.device-notice strong{display:block;font-size:var(--fs-caption);margin-bottom:2px}
.device-notice p{margin:0;color:var(--muted);max-width:68ch}
.device-notice>div:not(.device-notice-actions){flex:1;min-width:0}
.device-notice-icon{color:var(--signal);display:grid;place-items:center;padding-top:2px}
.device-notice-icon svg{width:18px;height:18px}
.device-notice>button,.device-notice-actions button{white-space:nowrap;font-size:var(--fs-caption);padding:6px 12px}
.device-notice-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.backup-reminder{border-color:var(--line);background:var(--paper)}
.editor-main .device-notice{max-width:none;margin:14px 0}
.not-backed-up{color:var(--hl-ink)}
@media(max-width:640px){.device-notice{flex-wrap:wrap}.device-notice-actions,.device-notice>button{margin-left:32px}}

/* Home: learning record cards and other tools */
.home-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.home-section-head h2{font:700 var(--fs-lead)/1.3 var(--display);letter-spacing:-.01em;margin:0}
.home-section-head a{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.home-section-head a:hover{color:var(--signal)}.home-section-head .icon{width:14px;height:14px}
.home-records{margin:30px 0 28px}
.record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.record-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 18px 15px}
.record-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.record-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--soft);flex:none}.record-icon .icon{width:16px;height:16px}
.record-count{font:700 var(--fs-h1)/1 var(--display);letter-spacing:-.02em}.record-count small{font:500 var(--fs-ui) var(--sans);color:var(--muted);letter-spacing:0}
.record-strip{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px}
.record-strip i{height:8px;border-radius:2px;background:var(--soft)}
.record-strip i.on{background:var(--ink)}.record-strip i.next{background:var(--signal)}
.record-strip i.locked{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 5px)}
.record-card>p{margin:0;font-size:var(--fs-caption);line-height:1.45;color:var(--muted)}
.record-next{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:auto 0 0;padding-top:11px;border-top:1px solid var(--line);font-size:var(--fs-caption);font-weight:600}
.record-next .icon{width:15px;height:15px;flex:none}.record-next .lock-badge{margin-left:auto}
a.record-next:hover{color:var(--signal)}
.record-next.is-quiet{font-weight:500;color:var(--muted)}
.home-tools-section{margin:0 0 30px}
.home-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-tool{display:flex;align-items:flex-start;gap:13px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;transition:border-color .15s,background .15s}
.home-tool:hover,.home-tool:focus-visible{border-color:var(--ink);background:var(--paper)}
.home-tool-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--paper);flex:none}.home-tool-icon .icon{width:17px;height:17px}
.home-tool-copy{min-width:0}.home-tool-copy b{display:block;font:600 var(--fs-ui)/1.3 var(--display)}
.home-tool-copy small{display:block;margin-top:3px;font-size:var(--fs-caption);line-height:1.45;color:var(--muted)}
.home-tool-go{margin-left:auto;align-self:center;color:var(--muted)}.home-tool-go .icon{width:16px;height:16px}
.home-tool:hover .home-tool-go{color:var(--signal)}
.home-tool.is-locked .home-tool-icon{background:var(--soft);color:var(--muted)}
.home-tool.is-locked .home-tool-go{display:none}.home-tool.is-locked .lock-badge{margin-left:auto;align-self:center}
@media(max-width:950px){.record-grid,.home-tools{grid-template-columns:1fr}}
/* Footer: where the learner's work is kept */
footer{align-items:center}
.foot-brand{display:inline-flex;align-items:center;gap:8px;font:700 var(--fs-caption) var(--display);color:var(--ink)}
.foot-brand img{width:20px;height:20px}
body.dark .foot-brand img{filter:invert(1) hue-rotate(180deg)}
.foot-where{display:inline-flex;align-items:center;padding:5px 11px;border-radius:12px;background:var(--soft);font-size:var(--fs-caption);line-height:1.4}
@media(max-width:640px){.foot-where{margin-top:10px}}
/* Type system. One scale (tokens on :root in style.css): 11 overline · 13 caption ·
   14 interface · 16 body · 18 lead · 22 h3 · 28 h2 · 36 h1 · 48 display.
   Headings get tight leading and tracking; reading text gets 1.6 and tidy wraps. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{text-wrap:balance}
h1,h2{letter-spacing:-.02em}
h3{letter-spacing:-.01em}
p,li,dd,.page-description{text-wrap:pretty}
.badge,.lock-badge{white-space:nowrap}
.record-count,.home-section-head,.glossary-count,.source-results-head p,.library-table td,.stat-card b,.progress-page b,.account-steps,.account-code{font-variant-numeric:tabular-nums}
@media(max-width:640px){:root{--fs-h1:1.875rem;--fs-h2:1.5rem;--fs-display:2.25rem}input,select,textarea{font-size:max(var(--fs-body),1em)}}