* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font: var(--text-base, 14px)/1.55 var(--font-sans); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .5rem .8rem; border-radius: var(--radius-sm, 4px); background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; min-width: 0; }
.masthead { display: flex; align-items: center; gap: var(--space-4, 16px); min-height: 64px; padding: .5rem clamp(1rem, 2.5vw, 2rem); border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; color: var(--heading); text-decoration: none; white-space: nowrap; }
.brand-logo, .brand-logo svg { display: block; width: 36px; height: 36px; flex: none; }
.brand-logo svg { background: var(--seal-ground); }
#brand-name { overflow: hidden; font: 700 1.25rem/1.1 var(--font-display); letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: var(--space-4, 16px); min-width: 0; margin-left: auto; }
.header-actions > a { color: var(--muted); font-size: var(--text-sm, 12px); font-weight: 700; white-space: nowrap; }
.menu-button, .drawer-head button { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--link); }
.workspace { display: grid; grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); min-height: 0; }
.sidebar { min-height: 0; overflow: auto; border-right: 1px solid var(--line); background: var(--surface); }
.sidebar nav, #mobile-nav { padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-5, 24px); }
.nav-section + .nav-section { margin-top: var(--space-5, 24px); }
.eyebrow { margin: 0 0 .45rem; color: var(--gold); font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; }
.nav-section .eyebrow { padding: 0 .55rem; }
.nav-section ul { margin: 0; padding: 0; list-style: none; }
.nav-section li { min-width: 0; }
.nav-section a { display: block; padding: .4rem .55rem; border-radius: var(--radius-sm, 4px); color: var(--ink); line-height: 1.35; text-decoration: none; }
.nav-section a:hover, .nav-section a[aria-current="page"] { background: var(--accent-soft); color: var(--link); }
.nav-section a[aria-current="page"] { font-weight: 700; }
.nav-group-name { padding: .8rem .55rem .2rem; color: var(--gold); font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-search { width: calc(100% - 1.1rem); margin: 0 .55rem .45rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--paper); color: var(--ink); }
.main { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scroll-padding-top: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.main > * { width: min(100%, 70rem); margin-right: auto; margin-left: auto; }
.reading-page > *, .handbook > * { max-width: 53rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .25rem .45rem; margin-bottom: var(--space-4, 16px); color: var(--muted); font-size: var(--text-sm, 12px); }
.breadcrumbs a { color: var(--muted); }
.separator { color: var(--muted); }
.view-head { margin-bottom: var(--space-5, 24px); }
.view-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3, 12px) var(--space-5, 24px); padding-bottom: var(--space-4, 16px); border-bottom: 1px solid var(--line); }
.view-head-copy { min-width: 0; max-width: 48rem; }
.view-head h1 { margin: 0; color: var(--heading); font: 700 clamp(2rem, 3.3vw, 2.7rem)/1.12 var(--font-display); letter-spacing: -.02em; overflow-wrap: break-word; }
.dek { margin: .45rem 0 0; color: var(--muted); font-size: var(--text-lg, 17px); line-height: 1.45; }
.view-actions { display: flex; align-items: center; gap: .5rem; }
.quiet-button { min-height: 36px; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--link); font-weight: 700; }
.quiet-button:hover, .quiet-button[aria-pressed="true"] { background: var(--accent-soft); }
.section { margin-top: var(--space-5, 24px); }
.section-title { margin: 0 0 var(--space-3, 12px); color: var(--heading); font: 700 1.5rem/1.2 var(--font-display); }
.section-meta { display: flex; justify-content: space-between; gap: 1rem; margin: -.4rem 0 .8rem; }
.count { color: var(--muted); font-size: var(--text-sm, 12px); }
.subject-grid, .material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-3, 12px); }
.subject-card, .material-card { min-width: 0; padding: var(--space-4, 16px); border: 1px solid var(--line); border-radius: var(--radius-md, 6px); background: var(--surface); }
.subject-card h3, .material-card h3 { margin: 0; color: var(--heading); font: 700 1.25rem/1.25 var(--font-display); }
.subject-card h3 a, .material-card h3 a { text-decoration: none; }
.subject-card h3 a:hover, .material-card h3 a:hover { text-decoration: underline; }
.subject-card p, .card-description { margin: .45rem 0 .8rem; color: var(--muted); }
.card-meta { margin: 0 0 .55rem; color: var(--gold); font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card-foot { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm, 12px); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); padding: var(--space-4, 16px); border: 1px solid var(--line); border-radius: var(--radius-md, 6px); background: var(--surface); }
.filter-field { display: grid; flex: 1 1 10rem; gap: .3rem; min-width: 0; color: var(--muted); font-size: var(--text-sm, 12px); font-weight: 700; }
.filter-field:first-child { flex-grow: 2; }
.filter-field input, .filter-field select { width: 100%; min-height: 38px; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--paper); color: var(--ink); }
.empty { padding: var(--space-4, 16px); color: var(--muted); }
.reading-page, .handbook { padding-bottom: var(--space-6, 32px); }
.prose { min-width: 0; font-size: var(--text-lg, 17px); line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose li + li { margin-top: .3rem; }
.prose h2, .notes h2, .chapter h2 { margin: 1.8rem 0 .55rem; color: var(--heading); font: 700 1.55rem/1.2 var(--font-display); }
.prose h3, .chapter h3 { margin: 1.4rem 0 .4rem; color: var(--heading); font: 700 1.22rem/1.25 var(--font-display); }
.prose a { overflow-wrap: anywhere; }
.prose blockquote, .reflection-prompt { margin: 1.2rem 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--gold); }
.prose pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--surface); font: .875rem/1.55 var(--font-mono); }
.prose code { font-family: var(--font-mono); font-size: .88em; }
.prose img, .prose svg, .prose video { max-width: 100%; height: auto; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0; }
.table-scroll table { width: 100%; border-collapse: collapse; }
.table-scroll th, .table-scroll td { min-width: 7rem; padding: .5rem .65rem; border: 1px solid var(--line); text-align: left; vertical-align: top; word-break: normal; overflow-wrap: normal; }
.table-scroll th:first-child, .table-scroll td:first-child { min-width: 7rem; white-space: normal; }
.depth { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius-md, 6px); background: var(--surface); }
.depth summary { padding: .65rem .8rem; color: var(--link); font-weight: 700; cursor: pointer; }
.depth > .prose { padding: .8rem; border-top: 1px solid var(--line); }
.depth > .prose > :last-child { margin-bottom: 0; }
.notes { padding-top: var(--space-4, 16px); border-top: 1px solid var(--line); }
.notes .section-title { margin-top: 0; }
.note-label { display: block; margin: .7rem 0 0; font-weight: 700; }
.note-label textarea { display: block; width: 100%; min-height: 8rem; margin-top: .35rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--surface); color: var(--ink); resize: vertical; }
.note-help, .note-status { margin: .4rem 0; color: var(--muted); font-size: var(--text-sm, 12px); }
.note-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-top: var(--space-5, 24px); padding-top: var(--space-4, 16px); border-top: 1px solid var(--line); }
.pager a { max-width: 48%; }
.pager-label { display: block; color: var(--muted); font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.chapter { padding-top: var(--space-5, 24px); border-top: 1px solid var(--line); }
.chapter + .chapter { margin-top: var(--space-5, 24px); }
.handbook-contents ol { columns: 2; gap: 2rem; }
.handbook-contents li { break-inside: avoid; margin-bottom: .35rem; }
.resource-list, .download-list { padding-left: 1.3rem; }
.resource-list li, .download-list li { padding: .3rem 0; }
.missing-links { display: flex; gap: .5rem; }
.brand-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-3, 12px); }
.brand-examples figure { min-width: 0; margin: 0; padding: var(--space-3, 12px); border: 1px solid var(--line); border-radius: var(--radius-md, 6px); background: var(--surface); }
.brand-examples svg, .shell-map svg { display: block; max-width: 100%; height: auto; }
.token-samples { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.token-samples > * { min-width: min(100%, 10rem); padding: var(--space-3, 12px); border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); }
.sample-surface { background: var(--surface); }
.sample-text { color: var(--text); }
.sample-accent { border-bottom: 4px solid var(--accent); }
.sample-gold { border-bottom: 4px solid var(--gold); }
.shell-map { max-width: 100%; overflow-x: auto; }
.shell-map > * { padding: .5rem .7rem; border: 1px solid var(--line); }
#nav-drawer { width: min(90vw, 23rem); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink); }
#nav-drawer::backdrop { background: var(--backdrop, rgba(6, 10, 12, .62)); }
.drawer-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
#mobile-nav { height: calc(100% - 64px); overflow: auto; }
@media (max-width: 800px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .no-js .workspace { grid-template-rows: minmax(0, 34dvh) minmax(0, 1fr); }
  .no-js .sidebar { display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-button, .drawer-head button { display: inline-flex; }
  .masthead { padding: .45rem .75rem; }
  .main { padding: var(--space-4, 16px); }
}
@media (max-width: 520px) {
  .masthead { gap: .45rem; }
  .header-actions { gap: .3rem; }
  .header-actions > a { display: none; }
  #brand-name { max-width: 10rem; font-size: 1.08rem; }
  .view-head h1 { font-size: 2rem; }
  .view-head-row { align-items: start; }
  .filters { padding: var(--space-3, 12px); }
  .filter-field { flex-basis: 100%; }
  .subject-grid, .material-grid { grid-template-columns: minmax(0, 1fr); }
  .handbook-contents ol { columns: 1; }
  .pager a { max-width: 100%; }
}
@media print {
  @page { size: A4; margin: 18mm 17mm 20mm; }
  body { font-size: 10.5pt; }
  html, body, .shell { height: auto; overflow: visible; }
  .shell, .workspace { display: block; }
  .masthead, .sidebar, #nav-drawer, .filters, .view-actions, .notes, .skip-link { display: none; }
  .main { overflow: visible; padding: 0; }
  .main > * { width: 100%; max-width: none; }
  .chapter { break-before: auto; }
  .chapter > .eyebrow, .depth summary { break-after: avoid; }
  .depth { border: 0; border-radius: 0; }
  .depth summary { padding: 0; margin-bottom: .4rem; }
  .depth > .prose { padding: 0; border: 0; }
  .prose p { orphans: 3; widows: 3; }
  .prose pre { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  .table-scroll table { width: 100%; min-width: 0; }
  .table-scroll th, .table-scroll td, .table-scroll th:first-child, .table-scroll td:first-child { min-width: 0; white-space: normal; }
  .prose { font-size: 10.5pt; line-height: 1.5; }
  .prose pre { font-size: 9pt; }
  .chapter h2 { break-after: avoid; }
  .table-scroll tr, .lesson-diagram { break-inside: avoid; }
  .depth > .prose { display: block; }
}