/* App shell shared by the home, syllabus and reading views. */
[hidden] { display:none!important; }
.app-nav { display:flex; justify-content:center; gap:8px; background:var(--white); border-bottom:1px solid var(--line); padding:8px 20px; }
.app-nav a { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 24px; border-radius:8px; color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; }
.app-nav a[aria-current="page"] { color:var(--navy); background:#fff3d2; }
.app-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-nav a:hover { color:var(--navy); background:#f4f6f8; }
.filter-toggle { display:none; }
.unit-search { max-width:520px; margin:24px 0; }
.unit-search input { min-height:48px; }
@media screen and (max-width:767px) {
  html { scroll-padding-bottom:100px; }
  body { padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)); background:var(--paper); }
  header,.topbar { position:sticky; top:0; z-index:50; padding:12px 0; border-bottom:2px solid var(--yellow); }
  header .container,.topbar .container { min-height:38px; gap:10px; }
  header .brand,.topbar .brand { display:flex; align-items:center; font-family:var(--font-brand); font-size:clamp(17px,4.4vw,23px); line-height:1.2; white-space:nowrap; }
  .mark,.brand-mark { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:7px; margin-right:9px; border-radius:10px; font-size:11px; }
  header .small,.edition { display:none; }
  main.container { padding:26px 18px 32px; }
  h1 { font-size:34px; line-height:1.12; max-width:24ch; }
  .eyebrow { font-size:10px; }
  .subtext,.muted { font-size:14px; }
  .app-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); border-bottom:0; box-shadow:0 -8px 30px #19253b0a; background:#fff; }
  .app-nav a { flex-direction:column; gap:4px; min-height:56px; padding:7px; font-size:10px; border-radius:12px; }
  .app-nav a[aria-current="page"] { background:var(--navy); color:var(--yellow); }
  .app-nav svg { width:21px; height:21px; }
  button,input,select,a.btn { touch-action:manipulation; }
  input.form-control,select.form-select { font-size:16px; min-height:48px; border-radius:12px; }
  .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; }
  .unit-search { margin:24px 0 20px; max-width:none; }
  .unit-search label { font-size:11px; }
  #units { --bs-gutter-y:16px; }
  .unit-card { padding:22px; min-height:0; border-radius:16px; border-top-width:3px; box-shadow:0 4px 18px #212d4504; }
  .unit-card h2 { font-size:26px; margin-top:18px; }
  .unit-card .topic-picker { padding-top:18px; }
  .unit-code { padding:5px 10px; font-size:11px; }
  .unit-link { min-height:44px; display:inline-flex; align-items:center; margin-top:12px; }
  .all-link { width:auto; padding:10px 16px; font-size:12px; min-height:44px; display:inline-flex; align-items:center; }
  .stat { border-radius:14px; padding:16px 18px; }
  .stat-label { font-size:11px; }
  .stat-number { font-size:32px; }
  .stat::after { left:18px; width:30px; }
  .table-card { border:0; background:transparent; box-shadow:none; overflow:visible; }
  .table-heading { border-radius:14px; padding:20px; }
  .table-heading h2 { font-size:25px; }
  .filter-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:46px; padding:10px 16px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--navy); font-size:13px; font-weight:600; margin-top:16px; }
  .filters { background:transparent; border:0; padding:0 0 16px; --bs-gutter-x:12px; --bs-gutter-y:12px; }
  .filters>div { padding-top:0; }
  .filters>div:first-child { width:100%; }
  .filters>div:not(:first-child) { display:none!important; }
  .filters.filters-open>div:not(:first-child) { display:flex!important; flex-direction:column; width:50%; }
  .filters.filters-open>div:last-child { justify-content:flex-end; }
  .table-wrap { padding:0; overflow-x:visible!important; }
  #syllabus { display:block; margin:0; }
  #syllabus thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #syllabus tbody { display:grid; gap:12px; }
  #syllabus tr { display:flex; flex-wrap:wrap; padding:18px; background:white; border:1px solid var(--line); border-radius:14px; }
  #syllabus td { display:block; border:0; padding:0; min-width:0; max-width:none; background:transparent; box-shadow:none; }
  #syllabus .subtopic { order:0; width:100%; font-size:16px; font-weight:600; line-height:1.5; padding-bottom:12px; }
  #syllabus .subtopic .code { color:#8b6200; font-size:11px; letter-spacing:.06em; }
  #syllabus .unit { order:1; width:100%; font-size:12px; color:var(--muted); padding-bottom:4px; }
  #syllabus .topic { order:2; width:100%; color:var(--muted); font-size:12px; padding-bottom:14px; }
  #syllabus .unit .code,#syllabus .topic .code { display:inline; margin-right:5px; letter-spacing:0; }
  #syllabus td[data-label="Level"] { order:3; display:flex; align-items:center; margin-right:auto; }
  #syllabus .row-action { order:4; }
  #syllabus .row-action a { min-height:44px; padding:10px 16px; background:var(--navy); color:var(--yellow); border-color:var(--navy); }
  #syllabus td[colspan] { width:100%; font-size:14px; }
  .table-controls { padding:18px 0 0; gap:12px!important; }
  .table-controls>div:first-child { display:flex; align-items:center; gap:8px; }
  .table-controls label { margin:0; font-size:11px; }
  .table-controls select { min-height:40px; padding:6px 28px 6px 10px; font-size:13px; }
  #page-info { width:100%; order:3; text-align:center; font-size:11px; color:var(--muted); }
  .table-controls>div:last-child { margin-left:auto; display:flex; }
  .table-controls .btn { padding:8px 12px; font-size:11px; }
  .back { margin-bottom:24px; min-height:36px; display:inline-flex; align-items:center; }
  #context { font-size:12px; }
  .notes-card { margin-top:24px; padding:24px 18px; border-radius:16px; }
  .lesson-section { scroll-margin-top:90px; }
  .lesson-section p,.lesson-section li { font-size:15px; line-height:1.85; }
  .lesson-toc { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px; padding:14px; scroll-snap-type:x proximity; }
  .lesson-toc strong { display:none; }
  .lesson-toc a { flex:0 0 auto; white-space:nowrap; padding:8px 12px; min-height:44px; display:flex; align-items:center; background:#ffffff10; border-radius:8px; scroll-snap-align:start; }
  .lesson-figure { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .lesson-figure svg { min-width:600px; }
  .lesson-figure::before { content:'Swipe diagram to explore →'; display:block; color:var(--muted); font-size:10px; margin:6px 8px 12px; }
  .lesson-figure figcaption { min-width:220px; }
  summary { padding:18px 14px; font-size:14px; min-height:48px; }
  .trace-controls { position:sticky; bottom:82px; padding:12px 16px; background:var(--paper); border-top:1px solid var(--line); }
  .site-footer { padding:24px 0; }
  .footer-brand { font-size:22px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
  .site-footer small { font-size:11px; }
}
@media print { .app-nav,.filter-toggle,.unit-search { display:none!important; } body { padding-bottom:0; } }

.notes-actions { display:flex; align-items:center; gap:8px; }
.btn-generate { background:var(--yellow); border:1px solid var(--yellow); color:var(--navy); border-radius:8px; padding:9px 13px; font-size:12px; font-weight:700; }
.btn-generate:hover { background:#ffd16f; border-color:#ffd16f; color:var(--navy); }
.btn-generate:disabled { opacity:.65; cursor:wait; }
.notes-toolbar { display:flex; align-items:flex-end; gap:16px; justify-content:space-between; margin-top:24px; }
.notes-toolbar>div { max-width:500px; flex:1; }
.notes-toolbar label { display:block; }
.notes-toolbar select { width:100%; min-height:44px; }
.notes-toolbar button { min-height:44px; }
.generation-notice { position:fixed; right:24px; bottom:24px; z-index:200; max-width:430px; background:var(--navy); color:white; padding:20px; border-radius:12px; border-top:3px solid var(--yellow); box-shadow:0 12px 40px #19253b30; }
.generation-notice p { font-size:13px; line-height:1.7; margin:0 0 10px; }
.generation-notice a,.generation-notice button { color:var(--yellow); font-size:12px; }
.generation-notice button { min-height:44px; background:transparent; border:1px solid #ffffff40; border-radius:8px; padding:8px 12px; margin-right:14px; }
.generation-error { border-top-color:#ffa4a4; }
.lesson-section pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#edf0f6; border-radius:8px; padding:18px; }
.lesson-figure details ul { margin:0 18px 18px; }
@media screen and (max-width:767px) {
  #syllabus .row-action { width:100%; margin-top:14px; }
  .notes-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #syllabus .row-action .btn-generate { background:var(--yellow); color:var(--navy); border-color:var(--yellow); min-height:44px; }
  .notes-toolbar { flex-direction:column; align-items:stretch; }
  .notes-toolbar>div { max-width:none; }
  .notes-toolbar .btn-generate { min-height:48px; }
  .generation-notice { left:12px; right:12px; bottom:calc(90px + env(safe-area-inset-bottom,0px)); max-width:none; padding:18px; }
}
@media print { .notes-toolbar,#version-info,.generation-notice { display:none!important; } }