/* SHARED·TOOLTOPBAR (440) — the header row every logger opens with. Copy-first port off
 * logger-surface.css's own `.lg-top` block — class names unchanged for check 65. Owns
 * `.lg-top`/`.lg-kind`/`.lg-kind-menu`/`.lg-kind-o`/`.lg-eb`/`.lg-top-r`/`.lg-x`/`.lg-back`; does NOT own
 * `.lg-guide-foot` (448, interleaved in the same source block) or `.lg-who`/`.lg-multi` (441,
 * the .lg-top-r slot's own contents — composed via renderWhoRow(), not declared here). */
.lg-top { position: relative; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-20); }
/* ⚠️ TWO DELIBERATE DEVIATIONS FROM THE KEPT SOURCE, BOTH CONTRAST: .lg-kind's --accent measures
 * 3.41:1 on the bare page ground (--surface-ground) — under the 4.5:1 floor; --accent-hover
 * clears it at 4.69:1, the same fix the tool eyebrow (.eyebrow-tool, app.css) carries. */
.lg-kind { display: inline-flex; align-items: center; gap: var(--space-4);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-600);
  letter-spacing: var(--tracking-10); text-transform: uppercase; color: var(--accent-hover); }
/* D-453: REST = right-caret, OPEN = rotate 90° down — the app-wide chevron rule, not a local
 * choice. The first build had it backwards (down at rest, the web dropdown convention), which
 * was the one departure from every other chevron in this app.
 * ⚠️ --text-tertiary IS THE WRONG TOKEN HERE, BY THE TOKEN'S OWN DOCUMENTATION: tokens.css names
 * it "NON-TEXT ONLY (chevrons, icons, rules) — 3:1 floor, NEVER on --surface-ground (2.69):
 * D-740" — and this chevron sits directly on --surface-ground (.lg-kind has no background of
 * its own). The kept source predates that rule. --text-secondary (5.38:1) is the D-740-compliant
 * choice for a mark on bare ground. */
.lg-kind svg { width: var(--dim-16); height: var(--dim-16); color: var(--text-secondary);
  transition: transform var(--duration-200) ease; }
.lg-kind.open svg { transform: rotate(90deg); }
.lg-kind:active { color: var(--accent-hover); }
.lg-kind:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-3); }
/* 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 (same gap doorgrid.css/timeinput.css/
 * toggleswitch.css already hit and resolved the same way). */
.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(--text-body-sm); color: var(--text-primary);
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-control); }
/* ⚠️ ONE DELIBERATE DEVIATION FROM THE KEPT SOURCE: --accent measures 4.23:1 here (14px/600 on
 * --surface-card) — under the 4.5:1 floor (check: contrast-audit). --accent-hover clears it at
 * 5.82:1, same fix as 441's .lg-multi .lb for the identical reason. */
.lg-kind-o.on { color: var(--accent-hover); font-weight: var(--weight-600); }
.lg-kind-o:active { background: var(--surface-well); }
/* pin 9 — the eyebrow is teal. Sleep.js's fixed alternative to the switcher: it is the only
 * thing left in the header, so it carries the whole job of saying which tool this is.
 * Since 2026-09-15 (job 92) its type is 1123 SHARED·EYEBROW's tool variant (`.eyebrow.eyebrow-tool`,
 * app.css): 11px · 700 · tracking-12 · uppercase · --accent-hover. It was 600 here against the
 * Portrait hero's 700 — drift inside the tool type, settled by the standing look-follows-the-page-
 * type rule; the contrast fix (--accent 4.23:1 → --accent-hover 5.82:1 at 11px on --surface-card)
 * now lives in that shared rule. `.lg-eb` stays on the span as 440's own name for the static
 * title (the row's state "static", the gallery, the sleep.js call sites) and declares nothing. */
.lg-eb { }
.lg-top-r { display: flex; align-items: center; gap: var(--space-8); flex: 0 0 auto; }
/* THE EXIT (Andrew, 2026-08-04). Tool screens have no tab bar, so without this there is no way
 * out — not a back button, a tool is a place entered and left, not a page in a stack. Aligned
 * to the phase article's × (web/css/cards/phase/article.css:74, "Option E, sunken"): recessed
 * into the paper rather than raised off it, which differentiates by depth, not by hue. */
/* THE BACK DISC (locked week/area page render, 2026-09-14) is the SAME disc, by the type's
 * own standard for a round control in this bar (2026-09-15 standing look rule) — at the row's
 * LEFT, carrying the left arrow instead of the ×. A week or area page is entered from the
 * portrait and ← is the way out, so the back state renders no × at all. */
.lg-x, .lg-back { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round);
  background: var(--surface-well); box-shadow: none; color: var(--green-900); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex: none; padding: 0; }
.lg-x svg, .lg-back svg { width: var(--size-18); height: var(--size-18); display: block; }
.lg-x:active, .lg-back:active { opacity: 0.72; }
.lg-x:focus-visible, .lg-back:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* the back row reads as one left-hand group: justify-content drops its space-between (which
 * would otherwise push the eyebrow to the far edge), and the disc-to-eyebrow gap is the locked
 * render's own measured 20px, not the row's 12px slot gap. */
.lg-top.is-back { justify-content: flex-start; gap: var(--space-20); }