@layer layout {
  /* App shell: calm sidebar + one main column. "bare" layout (sign-in etc.) hides the sidebar. */
  .shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .shell[data-layout="bare"] { grid-template-columns: minmax(0, 1fr); }
  .shell[data-layout="bare"] .sidebar,
  .shell[data-layout="bare"] .topbar,
  .shell[data-layout="bare"] .tabbar { display: none; }
  /* the lesson player: the whole screen, nothing around it */
  .shell[data-layout="focus"] { grid-template-columns: minmax(0, 1fr); }
  .shell[data-layout="focus"] .sidebar,
  .shell[data-layout="focus"] .topbar,
  .shell[data-layout="focus"] .tabbar { display: none; }

  .sidebar {
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 18px 12px 14px; border-right: 1px solid var(--line); background: var(--bg-raise);
  }
  .topbar, .tabbar { display: none; }

  #main { min-width: 0; }
  /* Until the first screen renders: the wordmark, faded in only when the wait is long enough to notice. */
  .boot { min-height: 100dvh; display: grid; place-items: center; animation: boot-in 500ms ease 400ms both; }
  .boot .wordmark { color: var(--muted); }
  @keyframes boot-in { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .boot { animation-duration: 1ms; } }
  .page { max-width: 1040px; margin: 0 auto; padding: 36px clamp(16px, 4vw, 44px) 80px; }
  .page.narrow { max-width: 720px; }

  @media (max-width: 860px) {
    /* rows hug their content, or a short page stretches the top bar to fill the screen */
    .shell, .shell[data-layout] { grid-template-columns: minmax(0, 1fr); align-content: start; }
    .sidebar { display: none; }
    .shell:not([data-layout="bare"]):not([data-layout="focus"]) .topbar {
      display: flex; align-items: center; gap: 12px;
      position: sticky; top: 0; z-index: 20;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
      background: color-mix(in oklch, var(--bg) 85%, transparent);
      backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
      border-bottom: 1px solid var(--line);
    }
    .page { padding-top: 22px; }
    /* Phones: the sections along the bottom, where thumbs are. */
    .shell:not([data-layout="bare"]):not([data-layout="focus"]) .tabbar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
      height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
      background: color-mix(in oklch, var(--bg) 88%, transparent);
      backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
      border-top: 1px solid var(--line);
    }
    .shell:not([data-layout="bare"]):not([data-layout="focus"]) #main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  }
  /* The level bar in the sidebar's "you" row. */
}