@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 { display: none; }
  .shell[data-layout="focus"] { grid-template-columns: minmax(0, 1fr); }
  .shell[data-layout="focus"] .sidebar,
  .shell[data-layout="focus"] .topbar { 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 { display: none; }

  #main { min-width: 0; }
  .page { max-width: 1040px; margin: 0 auto; padding: 36px clamp(16px, 4vw, 44px) 80px; }
  .page.narrow { max-width: 720px; }

  @media (max-width: 860px) {
    .shell, .shell[data-layout] { grid-template-columns: minmax(0, 1fr); }
    .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: 24px; }
  }
}