/* SPDX-License-Identifier: MIT */
/* ──────────────────────────────────────────────────────────────────────────
   IPQuery — first-run bootstrap console (setup wizard only)

   Aesthetic: a deep-ink product surface with a bounded, elevated frame — the
   admin console's information architecture, given room to breathe. The rail
   is structural (the wizard is a six-step sequence), not decoration.

   Design system (ui-ux-pro-max, "ip geolocation developer infrastructure
   saas enterprise dark"):
     palette   ink #070B14 -> card #111A2B, accent #22D3EE, success #22C55E
     type      Plus Jakarta Sans (UI) / JetBrains Mono (data + micro-labels)
     effects   hairline borders, one soft ambient wash, no second accent

   This file loads AFTER base.css / layout.css / forms.css. Every rule that
   re-skins a shared component is scoped to `body.layout-setup` so the auth
   and dashboard views keep their own styling. No JavaScript: radio selection,
   focus rings and the mobile rail are pure CSS; the ETL progress page still
   polls with <meta http-equiv="refresh"> (CSP allows script-src 'self' only).
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces: a single ramp, darkest behind, lightest on top. */
  --boot-bg: #070b14;
  --boot-surface: #0c1322;
  --boot-card: #111a2b;
  --boot-card-2: #16213a;

  /* Lines. Hairlines carry the structure; never a heavy border. */
  --boot-line: #1e2b42;
  --boot-line-2: #2b3c5a;
  --boot-line-3: #3b5074;

  /* Text ramp, all AA-or-better on the surfaces above. */
  --boot-text: #f1f5f9;
  --boot-text-2: #cbd5e1;
  --boot-muted: #94a3b8;
  --boot-faint: #64748b;

  /* One accent. Cyan is the product's existing signature (admin.css). */
  --boot-accent: #22d3ee;
  --boot-accent-ink: #04222b;
  --boot-accent-soft: rgba(34, 211, 238, 0.1);
  --boot-accent-line: rgba(34, 211, 238, 0.34);

  --boot-ok: #22c55e;
  --boot-ok-soft: rgba(34, 197, 94, 0.1);
  --boot-fail: #f87171;
  --boot-fail-soft: rgba(248, 113, 113, 0.1);
  --boot-warn: #fbbf24;
  /* Aliases kept so layouts/public.hbs and the error views resolve the same
     tokens they did before the palette change. */
  --boot-cyan: #22d3ee;
  --boot-cyan-bright: #22d3ee;
  --boot-line-strong: #2b3c5a;
  --boot-paper: #0c1322;
  --boot-paper-2: #111a2b;

  --boot-font-sans:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", Roboto, sans-serif;
  --boot-font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --boot-radius: 14px;
  --boot-radius-sm: 10px;
  --boot-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  --boot-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Shell ─────────────────────────────────────────────────────────────── */
/* layout.css still gives .layout-setup the old flex/centre/white-card chrome;
   the product frame is a full-bleed grid, so cancel all of it here. The
   canvas is fixed dark on purpose — this surface is deliberately dark, not a
   theme that flips with the OS. */
body.layout-setup {
  display: block;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  color-scheme: dark;
  background: var(--boot-bg);
  color: var(--boot-text);
  font-family: var(--boot-font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .setup-container is kept in older markup but must stop being the 640px
   white card. .boot-content owns the measure. */
body.layout-setup .setup-container {
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

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

/* Keyboard users land here first; invisible until focused. */
.boot-skip {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: var(--boot-radius-sm);
  background: var(--boot-accent);
  color: var(--boot-accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.boot-skip:focus {
  top: 1rem;
}

.boot-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
  position: relative;
}

/* ─── Rail ──────────────────────────────────────────────────────────────── */
.boot-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--boot-surface) 0%, var(--boot-bg) 100%);
  border-right: 1px solid var(--boot-line);
  overflow-y: auto;
}

.boot-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem 1.5rem;
}

.boot-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--boot-accent-soft);
  border: 1px solid var(--boot-accent-line);
  color: var(--boot-accent);
}

.boot-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.boot-brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--boot-text);
  line-height: 1.2;
}

.boot-brand-tag {
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--boot-faint);
  line-height: 1.3;
}

.boot-rail-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0.25rem;
}

/* The stepper is a vertical numbered rail, not six side-by-side pills. The
   `setup-stepper` / `setup-step` class names are kept for the integration
   suite. */
body.layout-setup .setup-stepper {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
}

body.layout-setup .setup-step {
  position: relative;
  flex: none;
  min-width: 0;
  padding: 0;
  background: transparent;
  text-align: left;
}

body.layout-setup .setup-step a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--boot-radius-sm);
  color: var(--boot-muted);
  text-decoration: none;
  transition:
    background 180ms var(--boot-ease),
    color 180ms var(--boot-ease);
}

body.layout-setup .setup-step a:focus-visible {
  outline: 2px solid var(--boot-accent);
  outline-offset: 2px;
}

body.layout-setup .setup-step a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--boot-text-2);
}

/* The connector line between markers — drawn on the item, not a pseudo
   element on the link, so it never inherits the hover background. It starts
   below the marker's 26px circle and stops before the next one; the
   `setup-step-n` in each link paints over it. */
body.layout-setup .setup-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.75rem + 12.5px);
  top: calc(0.5rem + 28px);
  width: 1px;
  height: calc(100% - 56px);
  min-height: 6px;
  background: var(--boot-line);
  pointer-events: none;
}

body.layout-setup .setup-step.is-done:not(:last-child)::after {
  background: var(--boot-accent-line);
}

body.layout-setup .setup-step-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--boot-line-2);
  background: var(--boot-surface);
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--boot-faint);
  transition:
    border-color 180ms var(--boot-ease),
    background 180ms var(--boot-ease),
    color 180ms var(--boot-ease);
}

body.layout-setup .setup-step-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.layout-setup .setup-step.is-done .setup-step-n {
  border-color: var(--boot-accent-line);
  background: var(--boot-accent-soft);
  color: var(--boot-accent);
}

body.layout-setup .setup-step.is-done a {
  color: var(--boot-text-2);
}

body.layout-setup .setup-step.is-active a {
  background: var(--boot-accent-soft);
  color: var(--boot-text);
}

body.layout-setup .setup-step.is-active .setup-step-n {
  border-color: var(--boot-accent);
  background: var(--boot-accent);
  color: var(--boot-accent-ink);
}

body.layout-setup .setup-step.is-active .setup-step-label {
  font-weight: 600;
}

.boot-rail-foot {
  margin-top: auto;
  padding: 1.25rem 0.75rem 0;
  border-top: 1px solid var(--boot-line);
}

.boot-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.boot-progress-label {
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--boot-faint);
}

.boot-progress-meta {
  margin: 0;
  font-family: var(--boot-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--boot-text-2);
}

.boot-ticks {
  display: flex;
  gap: 4px;
}

.boot-tick {
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: var(--boot-line-2);
  transition: background 240ms var(--boot-ease);
}

.boot-tick.is-filled {
  background: var(--boot-accent);
}

.boot-tick.is-current {
  background: var(--boot-accent-line);
}

/* ─── Main: one bounded, elevated frame ─────────────────────────────────── */
.boot-main {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* A single soft ambient wash behind the frame — the only decoration on the
   page. Two radial stops, no animation. */
.boot-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 30rem at 70% -10%, rgba(34, 211, 238, 0.07), transparent 70%),
    radial-gradient(40rem 24rem at 20% 110%, rgba(59, 130, 246, 0.06), transparent 70%);
  pointer-events: none;
}

.boot-frame {
  position: relative;
  width: 100%;
  max-width: 700px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid var(--boot-line);
  border-radius: var(--boot-radius);
  background: var(--boot-card);
  box-shadow: var(--boot-shadow);
}

.boot-content {
  max-width: none;
}

.boot-step-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--boot-accent-line);
  background: var(--boot-accent-soft);
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--boot-accent);
}

.boot-step-head {
  margin: 0 0 2rem;
}

.boot-step-head h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--boot-text);
  text-wrap: balance;
}

.boot-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--boot-muted);
}

.boot-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boot-faint);
}

/* ─── Key/value blocks ──────────────────────────────────────────────────── */
.boot-kv {
  margin: 0 0 1.5rem;
  padding: 0.25rem 1.125rem;
  border: 1px solid var(--boot-line);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
}

.boot-kv > div {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.75rem 0;
}

.boot-kv > div + div {
  border-top: 1px solid var(--boot-line);
}

.boot-kv dt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--boot-muted);
}

.boot-kv dd {
  margin: 0;
  font-family: var(--boot-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--boot-text);
  overflow-wrap: anywhere;
}

.boot-kv dd code {
  font-family: var(--boot-font-mono);
  font-size: 0.75rem;
  color: var(--boot-fail);
  overflow-wrap: anywhere;
}

.boot-note {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--boot-line);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--boot-muted);
}

.boot-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-fail-soft);
}

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.boot-form {
  margin: 0;
}

body.layout-setup .boot-form .form-field {
  margin-bottom: 1.25rem;
}

body.layout-setup .boot-form .form-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--boot-text-2);
}

/* Overrides forms.css's white box (and its prefers-color-scheme: dark rule). */
body.layout-setup .boot-form .form-field input,
body.layout-setup .boot-form .form-field textarea,
body.layout-setup .boot-form .form-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--boot-line-2);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-bg);
  color: var(--boot-text);
  font-family: var(--boot-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition:
    border-color 160ms var(--boot-ease),
    background 160ms var(--boot-ease),
    box-shadow 160ms var(--boot-ease);
}

body.layout-setup .boot-form .form-field input::placeholder,
body.layout-setup .boot-form .form-field textarea::placeholder {
  color: var(--boot-faint);
}

body.layout-setup .boot-form .form-field input:hover,
body.layout-setup .boot-form .form-field textarea:hover {
  border-color: var(--boot-line-3);
}

body.layout-setup .boot-form .form-field input:focus,
body.layout-setup .boot-form .form-field textarea:focus,
body.layout-setup .boot-form .form-field select:focus {
  outline: none;
  border-color: var(--boot-accent);
  background: var(--boot-surface);
  box-shadow: 0 0 0 3px var(--boot-accent-soft);
}

/* Restore a real ring for keyboard users — the box-shadow above is the
   pointer affordance and is too subtle to serve as the focus indicator. */
body.layout-setup .boot-form .form-field input:focus-visible,
body.layout-setup .boot-form .form-field textarea:focus-visible,
body.layout-setup .boot-form .form-field select:focus-visible {
  outline: 2px solid var(--boot-accent);
  outline-offset: 2px;
}

body.layout-setup .boot-form input[aria-invalid="true"] {
  border-color: var(--boot-fail);
}

body.layout-setup .boot-form .form-help {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--boot-faint);
}

body.layout-setup .boot-form .form-error,
body.layout-setup .boot-alert .form-error {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--boot-fail);
}

/* ─── Actions ──────────────────────────────────────────────────────────── */
.boot-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--boot-line);
}

/* Shared primary button. Deliberately NOT scoped to body.layout-setup: the
   error pages (errors/csrf.hbs, errors/404.hbs, errors/403.hbs) render with
   `layouts/public` (body class `layout-public`) and reuse this vocabulary.
   Safe to make global because this file is loaded by exactly two shells —
   layouts/init.hbs and layouts/public.hbs — so admin/dashboard/app/marketing
   keep their own .btn-primary from admin.css / style.css. */
body.layout-setup button[type="submit"],
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6875rem 1.375rem;
  border: 0;
  border-radius: var(--boot-radius-sm);
  background: var(--boot-accent);
  color: var(--boot-accent-ink);
  font-family: var(--boot-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 24px -8px rgba(34, 211, 238, 0.55);
  transition:
    background 160ms var(--boot-ease),
    box-shadow 160ms var(--boot-ease),
    transform 160ms var(--boot-ease);
}

body.layout-setup button[type="submit"]:hover,
.btn-primary:hover {
  background: #67e8f9;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 10px 28px -8px rgba(34, 211, 238, 0.7);
}

body.layout-setup button[type="submit"]:active,
.btn-primary:active {
  transform: translateY(1px);
}

body.layout-setup button[type="submit"]:focus-visible,
.btn-primary:focus-visible,
.boot-back:focus-visible {
  outline: 2px solid var(--boot-accent);
  outline-offset: 3px;
}

.boot-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--boot-muted);
  text-decoration: none;
  transition: color 160ms var(--boot-ease);
}

.boot-back:hover {
  color: var(--boot-text);
}

/* ─── Flash messages ───────────────────────────────────────────────────── */
body.layout-setup .flash {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--boot-line-2);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--boot-text-2);
}

body.layout-setup .flash-success {
  border-color: rgba(34, 197, 94, 0.32);
  background: var(--boot-ok-soft);
  color: var(--boot-ok);
}

body.layout-setup .flash-error {
  border-color: rgba(248, 113, 113, 0.32);
  background: var(--boot-fail-soft);
  color: var(--boot-fail);
}

body.layout-setup .flash-warning {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.08);
  color: var(--boot-warn);
}

body.layout-setup .flash-info {
  border-color: var(--boot-accent-line);
  background: var(--boot-accent-soft);
  color: var(--boot-accent);
}

/* ─── Welcome checklist ────────────────────────────────────────────────── */
.boot-intro-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
}

.boot-intro-list li {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--boot-line);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--boot-text-2);
}

.boot-intro-n {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--boot-accent-line);
  background: var(--boot-accent-soft);
  font-family: var(--boot-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--boot-accent);
}

/* ─── Seed option cards ────────────────────────────────────────────────── */
.boot-options {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.boot-option {
  position: relative;
  min-width: 0;
}

/* Visually hidden but still focusable — never display: none. */
.boot-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.boot-option-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--boot-line-2);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
  cursor: pointer;
  transition:
    border-color 160ms var(--boot-ease),
    background 160ms var(--boot-ease);
}

/* Custom radio indicator, painted in the label's first grid column. The
   native input stays in the DOM for keyboard and screen-reader semantics. */
.boot-option-label::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--boot-line-3);
  background: var(--boot-bg);
  transition:
    border-color 160ms var(--boot-ease),
    background 160ms var(--boot-ease),
    box-shadow 160ms var(--boot-ease);
}

.boot-option-label:hover {
  border-color: var(--boot-line-3);
  background: var(--boot-card-2);
}

.boot-option input:checked + .boot-option-label {
  border-color: var(--boot-accent-line);
  background: var(--boot-accent-soft);
}

.boot-option input:checked + .boot-option-label::before {
  border-color: var(--boot-accent);
  background: var(--boot-accent);
  box-shadow: inset 0 0 0 3px var(--boot-card);
}

.boot-option input:focus-visible + .boot-option-label {
  outline: 2px solid var(--boot-accent);
  outline-offset: 2px;
}

/* The label is a two-column grid: column 1 holds the painted radio dot
   (`::before`), column 2 holds the copy. The title and hint are two separate
   children of the label, so without an explicit column both land in the grid
   and the hint wraps into an auto-created *second row, first column* — 20px
   wide, which renders the description one character per line. Pinning both
   to column 2 keeps them stacked in the single content cell. */
.boot-option-title,
.boot-option-hint {
  grid-column: 2;
}

.boot-option-title {
  display: block;
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--boot-text);
}

.boot-option input:checked + .boot-option-label .boot-option-title {
  color: var(--boot-accent);
}

.boot-option-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--boot-muted);
}

/* ─── ETL progress ─────────────────────────────────────────────────────── */
body.layout-setup .setup-progress-status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--boot-line-2);
  border-radius: var(--boot-radius-sm);
  background: var(--boot-surface);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--boot-text);
}

body.layout-setup .setup-progress-status--running {
  border-color: var(--boot-accent-line);
  background: var(--boot-accent-soft);
  color: var(--boot-accent);
}

body.layout-setup .setup-progress-status--success {
  border-color: rgba(34, 197, 94, 0.32);
  background: var(--boot-ok-soft);
  color: var(--boot-ok);
}

body.layout-setup .setup-progress-status--failed {
  border-color: rgba(248, 113, 113, 0.32);
  background: var(--boot-fail-soft);
  color: var(--boot-fail);
}

body.layout-setup .setup-progress-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 0 1.25rem;
  border: 2px solid var(--boot-line-2);
  border-top-color: var(--boot-accent);
  border-radius: 50%;
  animation: boot-spin 0.9s linear infinite;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

body.layout-setup .setup-progress-meta {
  margin: 1.25rem 0;
}

body.layout-setup .form-hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--boot-faint);
}

body.layout-setup .boot-status-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--boot-muted);
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .boot-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
  }

  .boot-rail {
    position: sticky;
    top: 0;
    z-index: 5;
    height: auto;
    padding: 0.875rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--boot-line);
    background: var(--boot-surface);
    overflow: visible;
  }

  .boot-brand {
    padding: 0;
    gap: 0.625rem;
  }

  .boot-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  /* On small screens the rail becomes a compact progress strip: numbers
     only, no labels, no connector lines. */
  .boot-rail-nav {
    margin-top: 0.75rem;
    padding-top: 0;
  }

  body.layout-setup .setup-stepper {
    flex-direction: row;
    gap: 0.375rem;
  }

  body.layout-setup .setup-step {
    flex: 1 1 0;
  }

  body.layout-setup .setup-step::after {
    display: none;
  }

  body.layout-setup .setup-step a {
    display: flex;
    justify-content: center;
    min-height: 44px;
    padding: 0.25rem;
    border-radius: 8px;
  }

  body.layout-setup .setup-step-label {
    display: none;
  }

  .boot-rail-foot {
    display: none;
  }

  .boot-main {
    padding: 1rem;
    align-items: stretch;
  }

  .boot-frame {
    padding: 1.5rem 1.125rem;
    border-radius: 12px;
  }

  .boot-step-head h1 {
    font-size: 1.5rem;
  }

  .boot-intro-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .boot-kv > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .boot-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
  }

  .boot-actions .btn-primary,
  .boot-actions button[type="submit"] {
    width: 100%;
  }

  .boot-back {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .boot-frame {
    padding: 1.25rem 1rem;
    border-radius: 10px;
    border-left: 0;
    border-right: 0;
  }

  .boot-brand-tag {
    display: none;
  }
}

/* ─── Keep the dark canvas even when the OS is light ────────────────────
   base.css only paints a dark body under prefers-color-scheme: dark. This
   surface opts into dark explicitly (color-scheme: dark above), so the
   light-OS default body background must be overridden too — and the dark-OS
   media blocks in base.css / forms.css must not reintroduce white inputs. */
@media (prefers-color-scheme: light) {
  body.layout-setup {
    background: var(--boot-bg);
    color: var(--boot-text);
  }
}

@media (prefers-color-scheme: dark) {
  body.layout-setup {
    background: var(--boot-bg);
    color: var(--boot-text);
  }

  body.layout-setup .boot-form .form-field input,
  body.layout-setup .boot-form .form-field textarea,
  body.layout-setup .boot-form .form-field select {
    background: var(--boot-bg);
    color: var(--boot-text);
    border-color: var(--boot-line-2);
  }

  body.layout-setup .boot-form .form-field input:focus,
  body.layout-setup .boot-form .form-field textarea:focus,
  body.layout-setup .boot-form .form-field select:focus {
    background: var(--boot-surface);
    border-color: var(--boot-accent);
  }
}

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.layout-setup .setup-progress-spinner {
    animation: none;
    border-top-color: var(--boot-line-2);
  }

  .boot-shell,
  .boot-shell *,
  .boot-shell *::before,
  .boot-shell *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}