/* Shared page chrome for the tool pages.
 *
 * Measured 2026-08-08: the seven pages had three different headers (header/nav, sticky
 * or not, 52–225px tall), four of them had no footer at all, and the language buttons
 * were styled four different ways. Every new tool copied whichever page happened to be
 * open. This file is the one canonical answer.
 *
 * Scope: the plain-HTML tool pages. The three DC bundles (deliver, form, outfit) keep
 * their own markup — their layout lives inside a JSON string that the runtime swaps in
 * wholesale, and restructuring it is where most of this project's bugs have come from.
 * They load this file only to pick up the shared values below.
 */

:root {
  --lv-ink: #14202E;
  --lv-muted: #5F7486;
  --lv-brand: #2D6FA8;
  --lv-line: #E4EEF8;
  --lv-nav-h: 52px;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.lv-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--lv-nav-h);
  background: #fff; border-bottom: 1px solid var(--lv-line);
  position: sticky; top: 0; z-index: 100;
}
/* Reserve the height before the script runs so the page does not jump. */
[data-lv-chrome="header"] { min-height: var(--lv-nav-h); display: block; }

.lv-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.lv-logo {
  width: 32px; height: 32px; background: var(--lv-brand); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 18px;
  color: #fff; flex-shrink: 0;
}
.lv-name-row {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--lv-ink); letter-spacing: .03em;
  display: flex; align-items: center; gap: 4px;
}
.lv-dot { width: 5px; height: 5px; border-radius: 50%; background: #FFD21E; display: inline-block; }
.lv-name-sub {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--lv-muted); letter-spacing: .06em;
}
.lv-nav-right { display: flex; align-items: center; gap: 4px; }

/* ── Language switch ────────────────────────────────────────────────────────── */

.lv-lang { display: flex; gap: 4px; }
.lv-lb {
  padding: 4px 8px; border: none; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--lv-muted);
  cursor: pointer; border-radius: 4px; font-family: inherit;
  transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease),
              color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.lv-lb.active { background: var(--lv-brand); color: #fff; }
@media (hover: hover) and (pointer: fine) { .lv-lb:not(.active):hover { color: var(--lv-brand); } }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

/* No backdrop-filter here, deliberately. It establishes a containing block for any
 * position:fixed descendant, which is how the form tool's confirm dialog ended up
 * laid out 915px below the fold on a phone. See DECISIONS.md. */
.lv-foot {
  border-top: 1px solid var(--lv-line); background: #fff;
  padding: 20px; margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.75; color: var(--lv-muted);
}
.lv-foot a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--lv-brand); font-weight: 500; text-decoration: none;
}
.lv-foot-mark {
  width: 20px; height: 20px; border-radius: 4px; background: var(--lv-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11px;
}