/* ===========================================================================
   shell.css — the app-shell sidebar, shared by every marketing page.

   MIRRORS components/web/DesktopShell.tsx (AppSidebar). Every value below is
   the token that file reads, via tokens.css:

     sidebar        width layout.sidebar 200 · surface.card · hairline right rule
                    paddingTop space.xl · paddingHorizontal space.md
     brandRow       centred · paddingBottom space.xl · logo 64 (space.xxxl x 2)
     scroll         gap space.lg          group  gap space.xs
     navItem        gap space.md · padding space.md / space.sm · radius.lg
     navItemActive  surface.sunken   (NOT accent — sunken means "you are here")
     navLabel       text.secondary bodyLg 14/700 -> active text.primary /800
     quietItem      gap space.md · padding space.sm / space.sm · radius.lg
     quietLabel     text.tertiary body 13/600
     modeGroup      hairline border · radius.lg · marginTop space.xs
     modeRowActive  accent.tint      (a mode is not a place, so not sunken)
     radio          glyph.sm 16 · borderWidth.medium · border.strong
     sidebarFooter  hairline top rule · paddingTop space.sm · bottom space.lg
     icons          destinations glyph.md + 6 = 26 · quiet rows glyph.md = 20

   DELIBERATE DIFFERENCES from the app, all because there is no session here:
     - Home is a LIVE link. In the app it is disabled with a SOON pill,
       because the marketing site did not exist when that was written.
     - Search, Notifications and the mode toggle are inert and greyed.
     - Settings leaves for app.brickhq.app.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sb-w: var(--bh-layout-sidebar);          /* 200px */
  /* Every web screenshot in images/ is 2484x1453 — the app viewport ONLY.
     Two crops got it there, both measured rather than eyeballed:
       2708x1954 -> 2484x1730  removed a flat black desktop surround
                               (112 left/right, 76 top, 148 bottom)
       2484x1730 -> 2484x1453  removed 242 rows of browser chrome from the top
                               (tab strip, address bar showing localhost:8081,
                               bookmarks bar, Ask Gemini) and 35 rows from the
                               bottom, where the window's rounded corners left
                               black wedges.
     Pinning the ratio means a real screenshot drops in without shifting the
     page. */
  --web-shot-ratio: 2484 / 1453;
}

/* ── The frame ───────────────────────────────────────────────────────────── */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.shell-main { flex: 1; min-width: 0; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  flex: 0 0 var(--sb-w);
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  background: var(--bh-surface-card);
  border-right: var(--bh-borderWidth-hairline) solid var(--bh-border-hairline);
  padding: var(--bh-space-xl) var(--bh-space-md) 0;
}
.sb-brand { display: flex; justify-content: center; padding: 0 var(--bh-space-sm) var(--bh-space-xl); }
.sb-brand img { width: 64px; height: 64px; display: block; }

.sb-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-lg);
  padding-bottom: var(--bh-space-xl);
}
.sb-group { display: flex; flex-direction: column; gap: var(--bh-space-xs); }

/* Destinations — the "loud" rows */
.sb-nav {
  display: flex;
  align-items: center;
  gap: var(--bh-space-md);
  padding: var(--bh-space-md) var(--bh-space-sm);
  border-radius: var(--bh-radius-lg);
  text-decoration: none;
  color: var(--bh-text-secondary);
  font-size: var(--bh-type-bodyLg-size);
  font-weight: var(--bh-type-bodyLg-weight);
  line-height: var(--bh-type-bodyLg-lineHeight);
}
.sb-nav svg { width: 26px; height: 26px; flex-shrink: 0; fill: currentColor; }
.sb-nav:hover { background: var(--bh-surface-raised); }
.sb-nav.is-active {
  background: var(--bh-surface-sunken);
  color: var(--bh-text-primary);
  font-weight: var(--bh-type-rowTitle-weight);
}

/* Quiet rows — Search · Notifications · Settings */
.sb-quiet {
  display: flex;
  align-items: center;
  gap: var(--bh-space-md);
  padding: var(--bh-space-sm);
  border-radius: var(--bh-radius-lg);
  text-decoration: none;
  color: var(--bh-text-tertiary);
  font-size: var(--bh-type-body-size);
  font-weight: var(--bh-type-body-weight);
  line-height: var(--bh-type-body-lineHeight);
}
.sb-quiet svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
a.sb-quiet:hover { background: var(--bh-surface-raised); color: var(--bh-text-secondary); }
/* Inert rows read as present-but-unavailable, not broken. */
.is-inert { opacity: 0.45; cursor: default; }

/* Mode toggle — greyed, not clickable */
.sb-mode {
  border: var(--bh-borderWidth-hairline) solid var(--bh-border-hairline);
  border-radius: var(--bh-radius-lg);
  overflow: hidden;
  margin-top: var(--bh-space-xs);
  opacity: 0.55;
  cursor: default;
}
.sb-mode-row {
  display: flex;
  align-items: center;
  gap: var(--bh-space-md);
  padding: var(--bh-space-sm);
  color: var(--bh-text-tertiary);
  font-size: var(--bh-type-body-size);
  font-weight: var(--bh-type-body-weight);
  line-height: var(--bh-type-body-lineHeight);
}
.sb-mode-divider { border-bottom: var(--bh-borderWidth-hairline) solid var(--bh-border-hairline); }
.sb-radio {
  width: 16px; height: 16px;
  border-radius: 999px;
  border: var(--bh-borderWidth-medium) solid var(--bh-border-strong);
  flex-shrink: 0;
  margin: 0 2px;   /* (glyph.md - glyph.sm) / 2, same column as the 20px icons */
}
.sb-mode-note {
  display: block;
  padding: 0 var(--bh-space-sm) var(--bh-space-sm);
  color: var(--bh-text-tertiary);
  font-size: var(--bh-type-micro-size);
  font-weight: var(--bh-type-micro-weight);
  line-height: var(--bh-type-micro-lineHeight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sb-foot {
  border-top: var(--bh-borderWidth-hairline) solid var(--bh-border-hairline);
  padding-top: var(--bh-space-sm);
  padding-bottom: var(--bh-space-lg);
}

/* ── Below the desktop breakpoint the sidebar goes away, exactly as the app's
      shell does — DesktopShell only mounts it at >= layout.breakpoint.desktop
      and the phone keeps its bottom tab bar. ─────────────────────────────── */
@media (max-width: 899px) {
  .sidebar { display: none; }
  .shell { display: block; }
}