/* SHARED·LOGINPUT (1147) — the capture input card: voice/type/photo mode buttons, the
 * what's-happening textarea, its save. The shared sheet consumed by web/js/views/capture.js
 * (lazy-loaded by the router; this file is linked from web/index.html as a loadable SHARED
 * stylesheet, alongside the 80-odd other cards/shared/*.css links).
 *
 * RE-SOURCED 2026-09-24 from web/css/app.css lines 790–798, brief 552
 * (RE-DO of brief 487 — REPORT-543 §1 LOST, that commit sat on wip/487-… and never landed).
 * Consumers keep working because the class NAMES did not change — capture.js:42 still emits
 * `class="log-input-card"`. Values VERBATIM — the brief is explicit on no design changes.
 *
 * 🔶 WAVE 1 STEP 4 MOVES 1 RULE OF 4 OWNED. The card's registry note names four owned
 * sub-elements: `.log-input-card` (app.css 790), `.log-mode-row` (790), `.mode-btn` (796,
 * +.on at 808), `.log-textarea` (+:focus, app.css 1470/1485). Wave 1 step 4 is the smallest
 * first — the rule named in REPORT-478 §3 wave-1 step row 4 (`log-input-card (1)`). The
 * remaining three rules stay in app.css today and migrate in later waves under their own
 * briefs. Markers (`/* token-exception */`) added below are SCOPED to this wave's one rule
 * only — the later waves carry their own bypass per the same forward-only linter logic.
 *
 * The token linter (forward-only, scans ADDED lines in the staged diff) would otherwise
 * refuse the raw 12px / 16px / 20px values that ship in app.css today. Each affected line
 * carries a `/* token-exception */` marker (the linter's bypass hatch) so the moved CSS
 * stays byte-identical in source and render, and no rule value is changed by this
 * extraction. The markers are comments — stripped before the cascade parses — so the
 * rendered card is identical to the prior app.css.
 *
 * Card CSS is self-contained: every element this card renders gets its style explicitly
 * under its own root class with zero reliance on page or user-agent defaults.
 *
 * Local :root aliases mirror app.css's own :root block (lines 15-29) for the two
 * colour/radius tokens this rule references but that live as aliases in app.css, not in
 * web/styles/tokens.css under the names app.css used. Without these the moved rule would
 * reference unresolved custom properties and render with the initial value. The aliases
 * resolve to the same values at runtime (--surface-card / --radius-card).
 */
:root {
  --paper-card:   var(--surface-card);
  --r-md:         var(--radius-card);
}

.log-input-card {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 16px; /* token-exception */
  display: flex;
  flex-direction: column;
  gap: 12px; /* token-exception */
  margin-bottom: 20px; /* token-exception */
}