/* 438 SHARED·DOORGRID — the six-door record switcher grid.
   ═══════════════════════════════════════════════════════════════════════════════
   Copy-first port, byte-identical values, from workbench/weaning/_shared/logger-surface.css
   (git 4339f83, confirmed byte-identical to this worktree's HEAD before porting — see
   ~/BabyWeeks-inbox/door-grid-plan-2026-08-29.md §A1). Class names UNCHANGED (.roads/.road/
   .road-slot/.road-menu/.lg-kind-menu/.lg-kind-o/.k-*) — check 65's KEPT-REF marker resolves
   ONE selector against both this port and the kept reference page, so a renamed class would
   break the fidelity mechanism rather than route around it (mirror-page-pattern Rule 1).

   This is the FOUNDING INCIDENT this repo's check-65 gate exists to close: Andrew personally
   rejected an earlier rebuild of exactly this grid for fidelity drift. Every value below is
   copied from the kept source, not remembered or re-derived from a screenshot.

   ⚠️ THE FAN'S OPEN-STATE CHILDREN ARE TEXT ROWS (.lg-kind-o), NOT TILES. This is the KEPT
   4339f83 shape — sleep.js's screenAfter() inherits the topbar's own kind-switcher menu
   wholesale. A separate, unreviewed, unclaimed in-flight change in another worktree
   (~/bw-primarycta, "propagate the door", 2026-08-28) redesigns this into tile children —
   that redesign is not committed anywhere and is not what check-65's pin proves against, so
   copy-first here means the proven text-row shape, not the in-flight one. */

  /* 🔴 GRID, NOT FLEX (2026-08-05, kept comment). Sleep's screen 2 carries every kind the app
     can log — a flex row put eight tiles on one line. Four columns, wraps to two rows.
     ⚠️ SHARED STYLESHEET IN THE KEPT SOURCE: this rule is also used at four-per-row by other
     loggers there; .r3 below is this atom's own opt-in for the six-door case. */
  .roads { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
  /* 🔴 .r3 IS AN OPT-IN (2026-08-06, kept comment). Six doors in a four-column grid orphans
     two tiles alone on the second row. Three columns gives 3 + 3. */
  .roads.r3 { grid-template-columns: repeat(3, 1fr); }
  /* 🔴 THE SLOT EXISTS SO THE MENU HAS SOMETHING TO HANG FROM (2026-08-06, kept comment). The
     grid item is a positioned wrapper, not the button, because an absolutely-positioned menu
     needs a relative parent and the button is also the thing being sized by the grid. */
  .road-slot { position: relative; display: flex; }
  .road-slot > .road { flex: 1; min-width: 0; }
  /* Inherits .lg-kind-menu wholesale — same object as the topbar's kind switcher (kept
     comment). Only the anchoring differs below: it hangs under its own tile, clear of it, and
     sits above whatever follows so a six-tile grid never covers its own answer. */
  /* no --dim-48 exists yet; the menu's own min-width, not a gap — minting a new size token
   * is a design-system call, not this port's to make */
  .lg-kind-menu { position: absolute; top: 100%; left: 0; z-index: 5; min-width: var(--space-48); /* token-exception */
    background: var(--surface-card); border-radius: var(--radius-card);
    padding: var(--space-4); display: flex; flex-direction: column; }
  .lg-kind-menu[hidden] { display: none; }
  .lg-kind-o { background: none; border: 0; text-align: left; cursor: pointer;
    font-family: var(--font-body); font-size: var(--size-14); color: var(--text-primary);
    padding: var(--space-8) var(--space-16); border-radius: var(--radius-control); }
  /* ⚠️ INHERITED CONTRAST DEBT, NOT A NEW CHOICE (mirror-page-pattern Rule 8) — --accent on
     --surface-card measures 4.23:1, needs 4.5:1. Byte-copied from logger-surface.css's own
     .lg-kind-o.on (unmodified there too); recorded in _contrast-baseline.json rather than
     changed, same as 430/431's own inherited D-711 debt — copy-first means the colour isn't
     this port's to fix. */
  .lg-kind-o.on { color: var(--accent); font-weight: var(--weight-600); }
  .lg-kind-o:active { background: var(--surface-well); }
  /* ⚠️ IT NEEDS ELEVATION OR IT IS NOT A MENU (kept comment). --shadow-card is the palette's
     own elevation and is what every floating card in the app already uses; the hairline border
     stays for the light-on-light case where a shadow alone is not enough separation. */
  .road-menu { top: calc(100% + var(--space-4)); min-width: 100%; white-space: nowrap;
    border: var(--radius-2) solid var(--border-hairline); box-shadow: var(--shadow-card);
    z-index: 6; }
  /* An open door is held down, so the row under it is visibly attached to the tile that
     opened it rather than floating under the whole grid (kept comment). */
  .road.on { border-color: var(--accent); background: var(--surface-well); }
  .road { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
    background: var(--surface-card); border: var(--radius-2) solid var(--border-hairline);
    border-radius: var(--radius-12); padding: var(--space-12) var(--space-8);
    font-family: var(--font-body); cursor: pointer; }
  .road i { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
    display: grid; place-items: center; font-style: normal; }
  .road i svg { width: var(--dim-16); height: var(--dim-16); }
  .road .n { display: block; font-size: var(--size-13); font-weight: var(--weight-600); color: var(--text-primary); }
  .road:active { border-color: var(--accent); }
  .road:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-2); }
  /* Kind tint = which door. Shape says kind, tone says family (D-379/D-454, kept comments). */
  /* Feed's door wears the bottle glyph/tint — workbench/home/all-tools.html already draws the
     Feeds tool with it, so the combined door has to match (kept comment). */
  .k-bottle { background: var(--slate-100); color: var(--text-primary); }
  .k-nappy { background: var(--cream-100); color: var(--text-primary); }
  .k-sleep { background: var(--slate-100); color: var(--text-primary); }
  .k-growth { background: var(--slate-100); color: var(--text-primary); }
  .k-milestone { background: var(--slate-100); color: var(--text-primary); }
  /* Portrait is not a log kind — it is a surface. Teal because it is the app's own nav tab
     (kept comment). */
  .k-portrait { background: var(--teal-100); color: var(--accent-hover); }