/*
 * Onboarding styles — Loracta-tokenised palette + atom classes ported
 * from the React redesign verbatim. Atom geometry (paddings, borders,
 * radii, animations) is preserved; only the colors are remapped to the
 * Loracta cream palette so the surface matches the marketing site.
 */

:root {
  /* Surfaces */
  --bg:          oklch(0.985 0.005 85);
  --bg-2:        oklch(0.97 0.006 80);
  --panel:       oklch(0.99 0.004 85);
  --paper:       oklch(0.99 0.004 85);
  --soft:        oklch(0.945 0.008 80);
  --soft-2:      oklch(0.92 0.01 78);

  /* Foreground */
  --ink:         oklch(0.18 0.012 70);
  --ink-2:       oklch(0.26 0.012 70);
  --ink-3:       oklch(0.48 0.012 70);
  --ink-4:       oklch(0.62 0.012 70);
  --ink-5:       oklch(0.78 0.012 70);

  /* Lines */
  --line:        oklch(0.88 0.01 75);
  --line-2:      oklch(0.85 0.01 75);
  --line-3:      oklch(0.80 0.01 75);

  /* Accent / primary CTA — dark ink, matching the marketing site's
     primary-button treatment. The brand sienna is reserved for italicised
     emphasis as --brand-accent. */
  --accent:      oklch(0.18 0.012 70);
  --accent-ink:  oklch(0.985 0.005 85);
  --accent-soft: oklch(0.945 0.008 80);

  --brand-accent:      oklch(0.42 0.09 35);
  --brand-accent-soft: oklch(0.93 0.03 60);

  --rust:        oklch(0.48 0.13 28);
  --rust-soft:   oklch(0.94 0.03 28);
  --amber:       oklch(0.55 0.12 75);
  --amber-soft:  oklch(0.95 0.05 75);
  --rose-soft:   oklch(0.95 0.03 28);

  --shadow-sm: 0 1px 2px 0 rgba(20, 18, 14, 0.04);
  --shadow-md: 0 1px 3px 0 rgba(20, 18, 14, 0.08), 0 1px 2px -1px rgba(20, 18, 14, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(20, 18, 14, 0.08), 0 4px 6px -4px rgba(20, 18, 14, 0.08);
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  12px;
}

/* Dark theme — the whole onboarding/auth shell is built on these variables,
   so overriding them is all the explicit theme toggle (theme_toggle.js, which
   flips `html.dark`) needs to actually change anything. Foregrounds lighten,
   surfaces darken, and the primary CTA inverts (light pill on dark). */
html.dark {
  --bg:          oklch(0.185 0.008 80);
  --bg-2:        oklch(0.215 0.008 80);
  --panel:       oklch(0.225 0.008 80);
  --paper:       oklch(0.225 0.008 80);
  --soft:        oklch(0.265 0.010 80);
  --soft-2:      oklch(0.305 0.010 78);

  --ink:         oklch(0.965 0.004 85);
  --ink-2:       oklch(0.880 0.006 85);
  --ink-3:       oklch(0.720 0.008 80);
  --ink-4:       oklch(0.585 0.008 80);
  --ink-5:       oklch(0.430 0.008 80);

  --line:        oklch(0.340 0.010 80);
  --line-2:      oklch(0.385 0.010 80);
  --line-3:      oklch(0.445 0.010 80);

  --accent:      oklch(0.965 0.004 85);
  --accent-ink:  oklch(0.185 0.012 70);
  --accent-soft: oklch(0.300 0.010 80);

  --brand-accent:      oklch(0.640 0.100 38);
  --brand-accent-soft: oklch(0.300 0.040 50);

  --rust-soft:   oklch(0.300 0.050 28);
  --amber-soft:  oklch(0.320 0.060 75);
  --rose-soft:   oklch(0.300 0.040 28);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.45);
}
html.dark .onb ::selection { background: oklch(0.36 0.02 80); }

/* =========================================================
   Page-level
   ========================================================= */

html, body.onb {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
}
body.onb {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.onb * { box-sizing: border-box; }
.onb .mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
.onb .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.005em; }
.onb .num   { font-variant-numeric: tabular-nums; }

.onb ::selection { background: oklch(0.945 0.008 80); }
.onb ::-webkit-scrollbar { width: 10px; height: 10px; }
.onb ::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.onb ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; border: 2px solid transparent; }
.onb ::-webkit-scrollbar-track { background: transparent; }

.onb button:focus-visible,
.onb input:focus-visible,
.onb select:focus-visible,
.onb textarea:focus-visible,
.onb [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

@keyframes onb-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes onb-pop     { from { opacity: 0; transform: scale(.985) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes onb-slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.onb-stage-fade { animation: onb-slideUp .25s ease both; }

/* =========================================================
   Brand badge (square-in-square, fixed top-left)
   ========================================================= */

.onb-brand {
  position: fixed; top: 22px; left: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.onb-brand-badge {
  position: relative; display: inline-block;
  width: 20px; height: 20px; flex: none;
  border-radius: 3px; background: var(--ink);
}
.onb-brand-badge::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid var(--bg); opacity: 0.7; border-radius: 1px;
  display: block;
}
.onb-brand-word {
  /* Match the marketing header wordmark (its .font-serif = Source Serif 4). */
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink);
}
.onb-brand-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-left: 2px; white-space: nowrap;
}
@media (max-width: 640px) { .onb-brand-tag { display: none; } }

.onb-step-indicator {
  position: fixed; top: 28px; right: 24px; z-index: 40;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}

/* =========================================================
   Shells — auth (centered, no rail) + wizard (rail + main + plate)
   ========================================================= */

.onb-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
}
.onb-shell main.onb-auth-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 80px 24px 40px; overflow: auto;
}
.onb-shell .onb-auth-card {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 20px;
  animation: onb-slideUp .25s ease both;
}
.onb-shell .onb-auth-footer {
  padding: 24px;
  text-align: center;
  color: var(--ink-4);
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.onb-shell .onb-auth-footer a {
  color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
  margin: 0 8px;
}

/* Wizard layout */
.onb-wizard {
  height: 100vh; display: flex; flex-direction: row;
  background: var(--bg); color: var(--ink);
  overflow: hidden;
}
.onb-wizard .onb-rail {
  width: 312px; flex-shrink: 0;
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 24px; gap: 24px; overflow: auto;
}
/* Main column is a flex column with its own height; only `.onb-main-inner`
   scrolls. `.onb-step-footer` is `flex-shrink: 0` so it stays pinned at the
   bottom — Continue is always visible without scrolling. */
.onb-wizard .onb-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.onb-wizard .onb-main-inner {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 48px 32px 24px;
  width: 100%;
  display: flex; flex-direction: column; gap: 24px;
}
/* Inner content centres itself within the available width. The body's
   `data-step-width` attribute picks the max-width per step (see below). */
.onb-wizard .onb-main-inner > * { max-width: 100%; }
.onb-wizard .onb-main-inner-bounds {
  width: 100%; max-width: var(--step-max-width, 760px);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}
body[data-step-width="wide"]   { --step-max-width: 1180px; }
body[data-step-width="medium"] { --step-max-width: 960px;  }
body[data-step-width="narrow"] { --step-max-width: 760px;  }

.onb-wizard .onb-step-footer {
  flex-shrink: 0;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 -6px 16px -10px rgba(20, 18, 14, .12);
}
.onb-wizard .onb-step-footer-inner {
  width: 100%; max-width: var(--step-max-width, 760px);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.onb-wizard .onb-plate {
  width: 360px; flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  display: none;
}
@media (min-width: 1280px) {
  .onb-wizard .onb-plate { display: flex; flex-direction: column; }
}
@media (max-width: 920px) {
  .onb-wizard { flex-direction: column; }
  .onb-wizard .onb-rail { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
}

/* =========================================================
   Atoms
   ========================================================= */

/* Buttons */
.onb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 8px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  border: 1px solid transparent;
}
.onb-btn:disabled { opacity: .5; cursor: not-allowed; }
.onb-btn-sm { padding: 6px 10px; font-size: 12px; height: 28px; }
.onb-btn-md { padding: 9px 14px; font-size: 13px; height: 36px; }
.onb-btn-lg { padding: 12px 20px; font-size: 14px; height: 44px; }
.onb-btn-primary   { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.onb-btn-primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.onb-btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.onb-btn-secondary:hover:not(:disabled) { background: var(--soft); }
.onb-btn-ghost     { background: transparent; color: var(--ink-2); border-color: transparent; }
.onb-btn-ghost:hover:not(:disabled) { background: var(--soft); }
.onb-btn-link {
  background: transparent; color: var(--ink-2); border: none;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0; height: auto;
}
.onb-btn-block { width: 100%; justify-content: center; }

/* Pills */
.onb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
}
.onb-pill-neutral { background: var(--soft); color: var(--ink-2); }
.onb-pill-accent  { background: var(--ink);  color: var(--accent-ink); border-color: var(--ink); }
.onb-pill-rust    { background: var(--rust-soft);  color: var(--rust); }
.onb-pill-amber   { background: var(--amber-soft); color: var(--amber); }
.onb-pill-paper   { background: var(--paper); color: var(--ink-3); border-color: var(--line); }
.onb-pill-locked  { background: var(--soft);  color: var(--ink-3); }

/* Fields */
.onb-field { display: flex; flex-direction: column; gap: 6px; }
.onb-field-label {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 8px;
}
.onb-field-optional {
  color: var(--ink-4); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.onb-field-hint  { font-size: 11.5px; color: var(--ink-3); }
.onb-field-error { font-size: 11.5px; color: var(--rust); }

/* Text input */
.onb-input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.onb-input:focus { border-color: var(--ink); }
.onb-input::placeholder { color: var(--ink-4); }

/* Textarea */
.onb-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 88px;
  transition: border-color .15s;
}
.onb-textarea:focus { border-color: var(--ink); }

/* Cards (radio + check share a base) */
.onb-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--ink);
  font: inherit;
}
.onb-card.is-selected { border-color: var(--ink); }
.onb-card.is-dense { padding: 12px 14px; gap: 10px; }
.onb-card-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.onb-card.is-dense .onb-card-icon { width: 28px; height: 28px; }
.onb-card-body {
  flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.onb-card-label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.onb-card.is-dense .onb-card-label { font-size: 13.5px; }
.onb-card-blurb { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.onb-card.is-dense .onb-card-blurb { font-size: 12px; }
.onb-card-sample { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.onb-card-right {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding-top: 2px;
}
.onb-card-radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--ink-5);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.onb-card.is-selected .onb-card-radio { border-color: var(--ink); background: var(--ink); }
.onb-card-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); display: none; }
.onb-card.is-selected .onb-card-radio::after { display: block; }
.onb-card-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--ink-5);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
}
.onb-card.is-selected .onb-card-check { border-color: var(--ink); background: var(--ink); }

/* Toggle */
.onb-toggle {
  width: 36px; height: 22px; border-radius: 999px;
  background: #cfcab8; border: none; position: relative;
  cursor: pointer; transition: background .15s; padding: 0;
  flex-shrink: 0;
}
.onb-toggle.is-on { background: var(--accent); }
.onb-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .18s ease;
}
.onb-toggle.is-on::after { left: 16px; }
.onb-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Step header */
.onb-step-header {
  display: flex; flex-direction: column; gap: 8px;
}
.onb-step-header-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.onb-step-header-title {
  margin: 0; font-size: 28px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.02em; color: var(--ink);
}
.onb-step-header-sub {
  margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.55;
  max-width: 540px;
}

/* Section label */
.onb-section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.onb-section-label-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--ink-4); font-weight: 500;
}

/* =========================================================
   Read-only pill (Step A stage 2 — confirmed email display)
   ========================================================= */

.onb-readonly-pill {
  display: flex; align-items: center; min-height: 40px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  word-break: break-all;
}

/* =========================================================
   OAuth buttons (Screen A)
   ========================================================= */

.onb-oauth {
  display: inline-flex; align-items: center; gap: 12px;
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink); font-size: 13.5px;
  cursor: pointer; transition: background .15s, border-color .15s;
  font-family: inherit;
}
.onb-oauth:hover { background: var(--soft); }
.onb-oauth-label { flex: 1; text-align: left; }

/* OR divider */
.onb-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0;
}
.onb-divider-line { flex: 1; height: 1px; background: var(--line); }
.onb-divider-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4);
}

/* =========================================================
   6-input verify code row
   ========================================================= */

.onb-code-row {
  display: flex; gap: 8px; width: 100%;
}
.onb-code-cell {
  flex: 1 1 0; min-width: 0;
  height: 56px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  color: var(--ink);
  outline: none;
  padding: 0;
  box-sizing: border-box;
  transition: border-color .15s;
}
.onb-code-cell:focus { border-color: var(--ink); }
.onb-code-cell.is-filled { border-color: var(--ink-3); }

/* =========================================================
   Status / inline feedback
   ========================================================= */

.onb-status {
  font-size: 12.5px; color: var(--ink-3);
  min-height: 1.2em;
}
.onb-status.is-error { color: var(--rust); }

/* =========================================================
   Identity prelude — role/org grids
   ========================================================= */

.onb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.onb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) {
  .onb-grid-2, .onb-grid-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Left-rail (wizard layout)
   ========================================================= */

.onb-rail-step {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; background: transparent;
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; font: inherit; text-align: left;
  position: relative; color: var(--ink);
  text-decoration: none;
}
.onb-rail-step.is-current { background: var(--paper); border-color: var(--line); }
.onb-rail-step-marker {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-2); border: 1.5px solid var(--line-3);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600; z-index: 1;
}
.onb-rail-step-marker.is-current {
  background: var(--paper); border-color: var(--ink-2);
}
.onb-rail-step-marker.is-done {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink);
}
.onb-rail-step-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.onb-rail-step-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.onb-rail-step.is-current .onb-rail-step-label { font-weight: 600; color: var(--ink); }
.onb-rail-step-eyebrow { font-size: 11.5px; color: var(--ink-4); }

/* =========================================================
   Audience pills (Step 02)
   ========================================================= */

.onb-audience-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 8px 12px; border-radius: 999px;
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.onb-audience-pill:hover { background: var(--soft); }
.onb-audience-pill.is-selected {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
}
/* Render both icons; CSS picks based on selected state. */
.onb-audience-pill .onb-pill-icon-check { display: none; }
.onb-audience-pill.is-selected .onb-pill-icon-plus { display: none; }
.onb-audience-pill.is-selected .onb-pill-icon-check { display: inline-block; }

/* =========================================================
   Chip list (themes + geography) — Step 02
   ========================================================= */

.onb-chiplist {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 8px 10px; min-height: 44px;
  transition: border-color .15s;
}
.onb-chiplist:focus-within { border-color: var(--ink); }
.onb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--soft); border-radius: 999px;
  padding: 4px 8px 4px 12px;
  font-size: 12.5px; color: var(--ink);
  animation: onb-pop .15s ease both;
}
.onb-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); padding: 2px; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.onb-chip-remove:hover { color: var(--ink); }
.onb-chiplist input.onb-chiplist-input {
  flex: 1; min-width: 120px;
  border: none; outline: none; background: transparent;
  font-size: 13.5px; color: var(--ink);
  font-family: inherit; padding: 4px 6px;
}
.onb-chiplist-input::placeholder { color: var(--ink-4); }

/* =========================================================
   Tag input (themes + geography) — Step 02 (legacy class names kept
   so anything still referencing them survives)
   ========================================================= */

.onb-tag-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 8px 10px; min-height: 44px;
}
.onb-tag-input:focus-within { border-color: var(--ink); }
.onb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--soft); border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font-size: 12.5px; color: var(--ink);
}
.onb-tag-remove {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); padding: 0; display: flex;
  font-size: 14px; line-height: 1;
}
.onb-tag-input input {
  flex: 1; min-width: 120px;
  border: none; outline: none; background: transparent;
  font-size: 13.5px; color: var(--ink);
  font-family: inherit;
  padding: 4px 6px;
}
.onb-tag-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px;
}
.onb-tag-suggestion {
  background: transparent; border: 1px dashed var(--line-3);
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-3);
}
.onb-tag-suggestion:hover { border-color: var(--ink-3); color: var(--ink-2); }

/* =========================================================
   Language tiles (Step 05)
   ========================================================= */

.onb-lang-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 10px; cursor: pointer; color: var(--ink);
  text-align: left; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.onb-lang-tile:hover { border-color: var(--ink-3); }
.onb-lang-tile.is-selected {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px var(--soft-2);
}
.onb-lang-tile-body { flex: 1; min-width: 0; }
.onb-lang-primary-mark {
  color: var(--brand-accent); display: inline-flex; align-items: center;
}
.onb-lang-tile-marker {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--ink-5); background: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--accent-ink);
}
.onb-lang-tile-marker.is-check { border-radius: 4px; }
.onb-lang-tile.is-selected .onb-lang-tile-marker {
  border-color: var(--accent); background: var(--accent);
}
.onb-lang-tile.is-selected .onb-lang-tile-marker:not(.is-check)::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink);
}

/* Primary-language picker (chip row) */
.onb-primary-pickerbox {
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.onb-primary-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 8px 12px; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.onb-primary-chip.is-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
}

/* =========================================================
   Info / disclosure panels
   ========================================================= */

.onb-info-panel {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 10px;
  font-size: 12.5px; color: var(--ink-2);
  max-width: 720px;
}
.onb-info-panel.is-amber {
  background: var(--amber-soft); border-color: #e6d5af; color: var(--amber);
}

/* =========================================================
   Template card (Step 07)
   ========================================================= */

.onb-template-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.onb-template-card:hover { border-color: var(--ink-3); }
.onb-template-card.is-selected {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px var(--soft-2);
}
.onb-template-swatch {
  display: block; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden; position: relative;
}
.onb-template-swatch > .onb-swatch-canvas {
  position: absolute; inset: 0; display: block;
}
.onb-template-swatch .onb-swatch-canvas > span {
  position: absolute; display: block;
}
/* Polished "magazine cover" swatch — replaces the previous 5-block sketch. */
.onb-swatch-headline { top: 14%; left: 8%; right: 8%; height: 9%; border-radius: 1px; opacity: .92; }
.onb-swatch-byline   { top: 28%; left: 8%; width: 38%; height: 5%; border-radius: 1px; opacity: .7; }
.onb-swatch-rule     { top: 40%; left: 8%; right: 8%; height: 1.5%; opacity: .55; }
.onb-swatch-row      { top: 50%;  left: 8%; right: 8%; height: 3.5%; opacity: .45; }
.onb-swatch-row-2    { top: 58%; right: 18%; opacity: .35; }
.onb-swatch-row-3    { top: 66%; right: 28%; opacity: .25; }
.onb-swatch-footer   { bottom: 6%; left: 8%; right: 8%; height: 14%; border-radius: 2px; opacity: .12; }

/* =========================================================
   Module row (Step 08)
   ========================================================= */

.onb-module-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}
.onb-module-row:first-child { border-top: none; }
.onb-module-row.is-locked { background: var(--bg-2); }
.onb-module-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--soft); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.onb-module-row.is-locked .onb-module-icon {
  background: var(--bg-2); color: var(--ink-4);
}

/* Toggle wrap (clickable wrapper around hidden checkbox + visual switch) */
.onb-toggle-wrap {
  position: relative; display: inline-flex; align-items: center;
  cursor: pointer; user-select: none;
}
.onb-toggle-wrap input[type="checkbox"] {
  position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0;
}

/* =========================================================
   Legal copy block
   ========================================================= */

.onb-legal {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
.onb-legal a {
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
}

/* =========================================================
   Marketing-style theme + language affordances (pinned top-right).
   Mirrors public/base.html — globe + language label + chevron-down,
   dropdown lists flag + full language name.
   ========================================================= */

.onb-affordances {
  position: fixed; top: 20px; right: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
}
.onb-lang { position: relative; }
/* Marketing-header parity: borderless globe + uppercase code, mono + tracked. */
.onb-lang-toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px;
  color: var(--ink-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1; transition: color 0.12s;
}
.onb-lang-toggle::-webkit-details-marker { display: none; }
.onb-lang-toggle::marker { content: ''; }
.onb-lang:hover .onb-lang-toggle,
details.onb-lang[open] .onb-lang-toggle { color: var(--ink); }
.onb-lang-globe { display: inline-flex; align-items: center; color: currentColor; }
.onb-lang-current { white-space: nowrap; }
.onb-theme-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; padding: 0;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.onb-theme-toggle:hover { border-color: var(--line-3); color: var(--ink); }
.onb-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px;
  display: flex; flex-direction: column; gap: 2px; min-width: 176px;
  box-shadow: var(--shadow-md);
}
.onb-lang-option {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  background: transparent; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--ink-2);
  text-align: left; text-decoration: none;
}
.onb-lang-option-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); width: 22px; flex: none;
}
.onb-lang-option-label { font-weight: 500; white-space: nowrap; flex: 1; }
.onb-lang-option-check { color: var(--brand-accent); font-weight: 700; }
.onb-lang-option:hover { background: var(--soft); border-color: var(--line); color: var(--ink); }
.onb-lang-option.is-current { color: var(--ink); }
.onb-theme-icon { display: none; }
.onb-theme-icon-moon { display: inline-flex; }
html.dark .onb-theme-icon-moon { display: none; }
html.dark .onb-theme-icon-sun  { display: inline-flex; }
/* Tiny dot marker when the saved preference is 'system' (auto-tracks OS). */
.onb-theme-toggle { position: relative; }
html[data-theme-pref="system"] .onb-theme-toggle::after {
  content: ""; position: absolute; bottom: 3px; right: 3px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3);
}