/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--ink); text-decoration: none; flex-shrink: 0;
}
.brand-mark { width: 30px; height: 30px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; }
.brand-mark circle { fill: var(--amber); stroke: none; }
.brand-name { font-family: var(--font-read); font-weight: 700; font-size: var(--step-1); }
.brand-sub { color: var(--ink-2); font-size: var(--step--1); padding-left: var(--space-2); border-left: 1px solid var(--rule); }

.topbar-search { flex: 1; max-width: 28rem; margin-left: auto; }
.topbar-search input {
  width: 100%; padding: var(--space-2) var(--space-3);
  background: var(--bench); border: 1px solid var(--rule); border-radius: var(--radius-m);
}
.menu-toggle { display: none; }

.preview-band {
  background: var(--amber-wash); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2) var(--space-5); font-size: var(--step--1);
}

/* Shell: navigation + content */
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: calc(100vh - 56px);
}
.sidenav {
  position: sticky; top: 56px; align-self: start;
  max-height: calc(100vh - 56px); overflow-y: auto;
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--rule);
}
.nav-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.nav-list li + li { margin-top: 2px; }
.nav-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-s);
  color: var(--ink); text-decoration: none;
}
.nav-list a:hover { background: var(--sheet-2); }
.nav-list a[aria-current="page"] { background: var(--teal-wash); color: var(--teal); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal); }
.nav-heading { font-size: var(--step--1); color: var(--ink-2); margin: 0 0 var(--space-2) var(--space-3); }
.nav-count {
  min-width: 1.6em; padding: 0 0.4em; border-radius: 999px; text-align: center;
  background: var(--amber); color: var(--sheet); font-size: 0.8rem; font-weight: 700;
}
.nav-prefs { display: grid; gap: var(--space-1); font-size: var(--step--1); color: var(--ink-2); padding: 0 var(--space-3); }
.nav-prefs select { padding: var(--space-1) var(--space-2); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-s); }

main { min-width: 0; }
.view { padding: var(--space-6) var(--space-6) var(--space-7); max-width: 72rem; }
.prose { max-width: var(--measure); }
.read { font-family: var(--font-read); font-size: 1.125rem; line-height: 1.65; }

/* Lesson layout: content + section rail */
.lesson-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) 14rem; gap: var(--space-6); align-items: start; }
.lesson-rail { position: sticky; top: 80px; font-size: var(--step--1); }
.lesson-rail ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.lesson-rail li { margin: 0; }
.lesson-rail a { display: block; padding: var(--space-1) var(--space-3); color: var(--ink-2); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.lesson-rail a:hover { color: var(--ink); }
.lesson-rail a.is-current { color: var(--teal); border-left-color: var(--teal); font-weight: 600; }

@media (max-width: 1100px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); }
  .lesson-rail { display: none; }
}

@media (max-width: 820px) {
  .brand-sub { display: none; }
  .menu-toggle {
    display: inline-block; padding: var(--space-2) var(--space-3);
    background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-m); cursor: pointer;
  }
  .topbar { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
  .topbar { flex-wrap: wrap; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidenav {
    display: none; position: fixed; inset: 0 auto 0 0; top: 0; z-index: 40;
    width: min(18rem, 85vw); max-height: none; height: 100vh;
    background: var(--sheet); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  }
  .sidenav.is-open { display: block; }
  .view { padding: var(--space-5) var(--space-4) var(--space-7); }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
}