/* F8 Sounds — shell: app grid, library sidebar, top bar, mobile drawer and tab bar,
   lesson header with the spectrum, meta row, Mark complete, pager, footer. */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.stage { display: flex; flex-direction: column; min-width: 0; }
main { flex: 1; width: 100%; padding: 0 40px 48px; }
main > * { max-width: 920px; }
main > :is(p, ul, ol, blockquote) { max-width: var(--measure); } /* prose keeps a readable measure; demos, tables and quizzes keep 920px */
main > .lhead, main > .footer, main > [data-full] { max-width: none; }

/* Sidebar */
.side { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; height: 100vh; padding: 14px 12px 32px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); scrollbar-width: thin; }
.brand-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 6px 14px; }
.brand { display: inline-flex; align-items: center; gap: 4px; color: var(--text) !important; font: 700 17px var(--wordmark); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.drawer-close { display: none !important; }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 2px 16px; padding: 0 12px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--accent-text); }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: 500 14px var(--font); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font-size: 11px; }
.search-results { position: absolute; top: 46px; left: 0; right: 0; z-index: 40; display: none; max-height: 60vh; margin: 0; padding: 6px; overflow: auto; list-style: none; border-radius: var(--radius); background: var(--raise); box-shadow: var(--raise-ring), var(--shadow); }
.search-results.open { display: block; }
.search-results ul { margin: 0; padding: 0; list-style: none; }
.search-results li { max-width: none; }
.search-results a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text) !important; font-size: 14px; text-decoration: none; }
.search-results a small { display: block; color: var(--muted); font-size: 12px; }
.search-results a:hover, .search-results a.sel { background: var(--panel); }
.search-results a.sel { box-shadow: inset 0 0 0 2px var(--accent-text); }
.search-results .empty { padding: 8px; color: var(--muted); font-size: 13.5px; }
.lib-h { display: flex; justify-content: space-between; margin: 0 8px 6px; color: var(--muted); font: 700 12px var(--font); }
.lib-note { display: flex; gap: 6px; margin: 0 6px 8px; padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); font-size: 12.5px; line-height: 1.4; }
.lib-note[hidden] { display: none; }
.lib-note .ic { margin-top: 2px; color: var(--bad); }
.lib { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.lib li { max-width: none; }
.mod-row { display: flex; align-items: center; border-radius: 8px; }
.mod-row:hover, .mod.open > .mod-row { background: var(--raise); }
.mod.open > .mod-row { box-shadow: var(--raise-ring); }
.mod-link { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 4px 6px 8px; color: var(--text) !important; font-size: 13.5px; text-decoration: none; }
.mod-link > span { flex: 1; min-width: 0; }
.mod-link b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mod-link small { display: block; color: var(--muted); font-size: 12px; }
.mod-link > .ic { color: var(--ok); }
.mod-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.mod-toggle .ic { transition: transform var(--dur-base) var(--ease-out); }
.mod-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
.tracks { margin: 2px 0 6px; padding: 0; list-style: none; }
.tracks[hidden] { display: none; }
.tk { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px 4px 54px; border-radius: 6px; color: var(--muted) !important; font-size: 13.5px; text-decoration: none; }
.tk:hover { background: var(--raise); color: var(--text) !important; }
.tk .n { width: 14px; font: 500 11px var(--mono); text-align: center; }
.tk.d .ic { color: var(--accent-text); }
.tk.now { background: var(--raise); color: var(--accent-text) !important; font-weight: 700; }
.eqi { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; }
.eqi i { width: 3px; height: 100%; background: var(--accent); transform: scaleY(.35); transform-origin: bottom; }
body.demo-playing .eqi i { animation: f8-bounce .9s ease-in-out infinite; }
body.demo-playing .eqi i:nth-child(2) { animation-delay: -.3s; }
body.demo-playing .eqi i:nth-child(3) { animation-delay: -.6s; }

/* Top bar: transparent over the header tint, solid once scrolled */
.tb { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: var(--top-h); margin-bottom: calc(var(--top-h) * -1); padding: 0 24px; }
.tb.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.tb .grow { flex: 1; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); cursor: pointer; transition: transform var(--dur-base) var(--ease-spring); }
.icon-btn:active { transform: scale(.92); }
.menu-btn, .brand-top { display: none !important; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 99px; background: var(--text); color: var(--bg) !important; font: 700 13px var(--font); text-decoration: none; white-space: nowrap; }
.pill[aria-disabled="true"] { cursor: default; }

/* Lesson header: tinted by the module band */
.lhead { --tint-a: color-mix(in srgb, var(--band) var(--tint-1), var(--tint-base)); --tint-b: color-mix(in srgb, var(--band) var(--tint-2), var(--tint-base));
  margin: 0 -40px; padding: calc(var(--top-h) + 16px) 40px 0; background: linear-gradient(180deg, var(--tint-a) 0%, var(--tint-b) 60%, var(--bg) 100%); }
.lhero { display: flex; align-items: flex-end; gap: 20px; max-width: 1000px; }
.lhero .cover { border-radius: 6px; box-shadow: var(--shadow); }
.lhero-t { min-width: 0; }
.lhero h1 { display: -webkit-box; margin: 6px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lhero h1 .accent { color: inherit; }
.eb { margin: 0; color: var(--text); font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.eb .dot { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--band); }
.spec-wrap { margin-top: 18px; }
.spec { display: flex; align-items: flex-end; gap: 2px; }
.spec i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--c); opacity: var(--unlit); cursor: pointer; transform-origin: bottom; transition: opacity var(--dur-fast); }
.spec i:hover { opacity: .7; }
.spec i.d { opacity: 1; }
.spec i.now { opacity: 1; outline: 1.5px solid var(--text); outline-offset: 1px; animation: f8-pulse 1.6s ease-in-out 3; }
.spec i.lit { position: relative; animation: f8-jump var(--dur-slow) var(--ease-out) both; }
.spec i.lit::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); animation: f8-ring 600ms ease-out both; }
.scale { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 12px; color: var(--text); font: 500 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.scale b { color: var(--text); font-weight: 500; }
.scale .here { color: var(--accent-text); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 6px; color: var(--muted); font-size: 13.5px; }

/* Mark complete + pager */
.complete-box { display: flex; justify-content: center; margin: 40px 0 8px; }
.btn-complete.is-done { background: var(--raise); box-shadow: var(--raise-ring); color: var(--text) !important; }
.btn-complete.is-done .ic { color: var(--ok); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 8px; }
.pg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text) !important; text-decoration: none; }
.pg:hover { background: var(--panel); }
.pg small { display: block; color: var(--muted); font-size: 12px; }
.pg b { font-size: 15px; }
.pg.next { justify-content: flex-end; text-align: right; }

.footer { margin: 48px -40px 0; padding: 28px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer p { max-width: none; margin: 4px 0; }
.footer a { color: var(--text); }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
.scrim[hidden] { display: none; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(320px, 86vw); height: auto; border-radius: 0 18px 18px 0; box-shadow: 12px 0 40px rgba(0, 0, 0, .35); transform: translateX(-102%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  body.drawer-open .side { transform: none; visibility: visible; transition-delay: 0s; }
  .drawer-close { display: grid !important; }
  .menu-btn { display: grid !important; }
  .brand-top { display: inline-flex !important; font-size: 15px; }
  .nav-back, .nav-fwd { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  .mod-toggle { width: 44px; height: 44px; }
  .tb { padding: 0 8px; }
  main { padding: 0 16px 32px; }
  .lhead { margin: 0 -16px; padding: calc(var(--top-h) + 8px) 16px 0; }
  .lhero { gap: 14px; }
  .lhero .cover { width: 64px; height: 64px; }
  .scale .lo, .scale .hi { display: none; }
  .pager { grid-template-columns: 1fr; }
  .footer { margin: 40px -16px 0; padding: 24px 16px calc(var(--tab-h) + 24px); }
  .tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; justify-content: space-around; padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); transition: transform var(--dur-base) var(--ease-out); }
  .tabbar.away { transform: translateY(100%); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 44px; border: 0; background: none; color: var(--muted) !important; font: 600 11px var(--font); text-decoration: none; cursor: pointer; }
  .tabbar .on { color: var(--text) !important; }
}

.spec.sweep i { animation: f8-grow var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--n) * 9ms + 80ms); }
.rise { animation: f8-rise var(--dur-slow) var(--ease-out) both; }

@media (max-width: 480px) {
  .lhero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lhero .cover { width: 56px; height: 56px; }
  .lhero h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; }
  .pill { padding: 0 12px; }
}

/* iOS Safari zooms the page when a focused field is under 16px. On touch screens every text field,
   select and textarea is at least 16px. The :not() chain lifts specificity over the per-component
   font rules (.search input, .ctl select …) so the order of the stylesheets does not matter.
   The viewport stays zoomable; maximum-scale is never set. */
@media (pointer: coarse) {
  :is(input, select, textarea):not([type="range"]):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}