/* Author — adapted from Mac's language: Inter/system, #fafaf9, ink #222322,
   white surfaces, 1px #e1e3df, 20-21px radius, monochrome line icons (1.65),
   one black primary per surface, outline pills, toggles, phone-first. */
:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222322;background:#fafaf9;--surface:#fff;--line:#e1e3df;--muted:#646962;--soft:#f1f2ef;--ink:#222322;--purple:#7c3aed;--radius:21px;--radius-sm:14px;--danger:#a42424}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-width:280px;background:#fafaf9}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p{margin:0}h1{font-size:clamp(1.65rem,6vw,2.2rem);line-height:1.15;letter-spacing:-.045em;overflow-wrap:anywhere}
h2{font-size:1.05rem;line-height:1.4;letter-spacing:-.02em}h3{font-size:.92rem}
p{line-height:1.55}:focus-visible{outline:3px solid #7c3aed;outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px;min-height:44px;width:100%;max-width:100%}
textarea{line-height:1.55;resize:vertical}
.app-shell{max-width:880px;margin:0 auto}
.app-header{position:relative;min-height:72px;padding:14px 20px;display:flex;align-items:center;gap:10px}
.brand{font-size:1.3rem;font-weight:750;letter-spacing:-.04em;margin-right:auto;min-height:44px;display:flex;align-items:center;gap:9px}
.brand-mark{display:grid;place-items:center}.brand-mark svg{width:34px;height:30px;color:var(--ink)}
.brand-dot{color:var(--purple);font-style:normal}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);flex:none}
.icon-btn svg{width:20px;height:20px}
.menu{position:absolute;top:64px;right:16px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;min-width:180px;box-shadow:0 12px 32px #0002;display:grid}
.menu a,.menu button{min-height:44px;display:flex;align-items:center;padding:8px 12px;border-radius:9px;text-align:left;font-size:.92rem}
.menu a:hover,.menu button:hover{background:var(--soft)}
main{padding:8px 16px calc(40px + env(safe-area-inset-bottom));display:grid;gap:18px;max-width:100%}
.view{display:grid;gap:16px;min-width:0}.view[hidden]{display:none}
.page-heading{display:grid;gap:8px;padding:8px 0 2px;min-width:0}
.muted{color:var(--muted);font-size:.92rem;line-height:1.5}.small{font-size:.82rem}.pad{padding:24px 0}
.surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:14px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;gap:10px;min-width:0;overflow-wrap:anywhere}
a.card:active{background:var(--soft)}
.btn-primary{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;border:1px solid #222322;border-radius:12px;background:#222322;color:#fff;font-size:.94rem;font-weight:600;cursor:pointer;width:100%}
.btn-primary:disabled{opacity:.5;cursor:wait}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.86rem;cursor:pointer}
.btn-outline svg{width:16px;height:16px}
.link-btn{min-height:44px;color:var(--muted);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.field{display:grid;gap:6px;font-size:.9rem;font-weight:550}
.error{color:var(--danger);font-size:.9rem}.error:empty{display:none}
.notice{font-size:.9rem;line-height:1.5}.notice:empty{display:none}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:650}
.pill{display:inline-flex;align-items:center;gap:5px;width:fit-content;max-width:100%;padding:4px 10px;background:var(--soft);color:#454a44;font-size:.72rem;font-weight:650;border-radius:999px;line-height:1.35;overflow-wrap:anywhere}
.pill.outline{background:var(--surface);border:1px solid var(--line)}
.pill button,.pill{white-space:normal}
button.pill{cursor:pointer;min-height:28px}
.pill[data-active="true"]{background:#222322;color:#fff;border-color:#222322}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.7rem;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 10px;display:grid;gap:2px;min-width:0}
.stat b{font-size:1.05rem;letter-spacing:-.02em}.stat span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.row{display:flex;align-items:center;gap:10px;min-width:0}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.nav-list{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.nav-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;min-width:0}
.nav-row+.nav-row{border-top:1px solid var(--line)}
.nav-row svg{width:18px;height:18px;color:var(--muted)}
.nav-row .grow{display:grid;gap:2px;overflow-wrap:anywhere}
/* Collapsible sections — collapsed by default everywhere */
details.section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 20px;min-width:0}
details.section>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 0}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary .chev{margin-left:auto;color:var(--muted);display:grid;place-items:center}
details.section>summary .chev svg{width:16px;height:16px;transition:transform 160ms}
details.section[open]>summary .chev svg{transform:rotate(180deg)}
details.section>.body{padding:4px 0 18px;display:grid;gap:12px;min-width:0}
details.plain{border:0;background:transparent;padding:0}
details.plain>summary{min-height:40px}
/* Outline */
.chapter-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:0 18px;min-width:0}
.chapter-card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:60px;padding:12px 0;flex-wrap:wrap}
.chapter-card>summary::-webkit-details-marker{display:none}
.scene-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line);min-width:0;flex-wrap:wrap}
.scene-row .grow{overflow-wrap:anywhere}
/* Reader — not collapsible, confined scroll */
.reader{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:12px;min-width:0}
.reader-scroll{max-height:62dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.reader-text{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-size:1.06rem;line-height:1.75;display:grid;gap:1em;overflow-wrap:anywhere}
.reader-text p{text-indent:1.4em}.reader-text p:first-child{text-indent:0}
/* Text blocks in assessments / documents */
.sections{display:grid;gap:14px}.kv{display:grid;gap:4px}.kv b{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:.94rem}
blockquote.evidence{margin:0;padding:10px 14px;background:var(--soft);border-radius:10px;font-size:.88rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.rating-row{display:flex;gap:6px;flex-wrap:wrap}
.searchbar{display:flex;gap:8px}.searchbar input{flex:1;min-width:0}
.toggle{position:relative;width:48px;height:28px;flex:none}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
.toggle i{position:absolute;inset:0;background:#d8dbd5;border-radius:999px;transition:background 160ms;pointer-events:none}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform 160ms;box-shadow:0 1px 3px #0003}
.toggle input:checked+i{background:#222322}.toggle input:checked+i::after{transform:translateX(20px)}
.toggle input:focus-visible+i{outline:3px solid var(--purple);outline-offset:2px}
/* Sheet / toast */
.sheet-backdrop{position:fixed;inset:0;background:#0007;z-index:50;display:grid;align-items:end}
.sheet{background:var(--surface);border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));display:grid;gap:14px;max-height:88dvh;overflow-y:auto}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;background:#222322;color:#fff;border-radius:12px;padding:13px 16px;font-size:.9rem;text-align:center}
.toast[hidden]{display:none}
.audio-row audio{width:100%;height:40px}
.token-value{word-break:break-all;background:var(--soft);border-radius:10px;padding:12px;font-family:ui-monospace,monospace;font-size:.82rem}
@media(min-width:700px){main{padding-left:24px;padding-right:24px}.stats{grid-template-columns:repeat(4,1fr)}.sheet-backdrop{align-items:center;justify-items:center}.sheet{border-radius:22px;width:min(480px,calc(100% - 32px))}}
@media(max-width:359px){main{padding-left:12px;padding-right:12px}.surface,.reader{padding:16px}details.section{padding-left:16px;padding-right:16px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}