/* Public onboarding — adaptive, mobile-first.
 *
 * No media queries: every size is a fluid clamp() between the small-
 * phone floor (iPhone SE 320) and the tablet ceiling (iPad mini 768).
 * All static style only — any runtime style tweaks go through
 * `element.style.X = Y` in JS (allowed under strict `style-src 'self'`;
 * inline `style="..."` attributes are NOT).
 */

:root {
  --bg:         #0b0d10;
  --surface:    #13171c;
  --surface-2:  #1b2029;
  --border:     #262d38;
  --text:       #e7eaf0;
  --text-dim:   #8a94a6;
  --accent:     #CB11AB;     /* WB фирменный фиолетовый */
  --accent-ink: #ffffff;
  --danger:     #ff6464;
  --ok:         #5dd39e;
  --radius:     12px;
  --radius-lg:  16px;
  --shadow:     0 8px 24px rgba(0,0,0,0.35);

  --tap:        clamp(44px, 12vw, 56px);
  --font:       clamp(15px, 4vw, 17px);
  --title:      clamp(22px, 6.2vw, 28px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

.onb-container {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: clamp(12px, 4vw, 24px);
}

/* ---- Header ---- */

.onb-header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,201,54,0.06), transparent);
}
.onb-brand {
  font-size: clamp(14px, 3.2vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 clamp(8px, 2vw, 12px);
  font-weight: 600;
}

.onb-progress {
  display: block;
}
.onb-progress__label {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--text-dim);
  margin: 0 0 6px;
}
.onb-progress__track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.onb-progress__fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 300ms ease;
}

/* ---- Main ---- */

.onb-main {
  padding-top: clamp(16px, 5vw, 28px);
  padding-bottom: clamp(24px, 8vw, 48px);
}

.onb-step {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 4vw, 20px);
}

.onb-title {
  font-size: var(--title);
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}
.onb-subtitle {
  font-size: clamp(17px, 4.6vw, 20px);
  margin: 0;
  font-weight: 600;
}
.onb-intro {
  margin: 0;
  color: var(--text-dim);
}
.onb-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(13px, 3.4vw, 15px);
}

.onb-error {
  background: rgba(255,100,100,0.08);
  border: 1px solid rgba(255,100,100,0.3);
  color: #ffdada;
  padding: clamp(10px, 3vw, 14px) clamp(12px, 4vw, 16px);
  border-radius: var(--radius);
  margin: 0;
}
.onb-error code {
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---- Forms ---- */

.onb-form {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3.5vw, 16px);
}

.onb-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
}
.onb-legend {
  padding: 0 0 clamp(6px, 2vw, 10px);
  font-weight: 600;
}

.onb-radio {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 14px);
  min-height: var(--tap);
  padding: 0 clamp(12px, 3vw, 14px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.onb-radio input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.onb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onb-field__label {
  font-size: clamp(13px, 3.4vw, 14px);
  color: var(--text-dim);
}
.onb-input {
  height: var(--tap);
  padding: 0 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font);
  width: 100%;
}
.onb-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* onb-hdf: per-field validation error state. The label gets
   ``onb-field--error`` so the input border + hint pick up the
   same rejection colour as ``.onb-error``. */
.onb-field--error .onb-input {
  border-color: rgba(255,100,100,0.55);
  background: rgba(255,100,100,0.06);
}
.onb-field__error {
  margin: 4px 0 0;
  color: #ffdada;
  font-size: clamp(12px, 3.2vw, 13px);
  line-height: 1.35;
}

.onb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap);
  padding: 0 clamp(14px, 4vw, 20px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}
.onb-btn:active { transform: translateY(1px); }
.onb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.onb-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.onb-btn--secondary {
  background: var(--surface);
}
.onb-btn--large {
  min-height: clamp(52px, 14vw, 64px);
  font-size: clamp(16px, 4.2vw, 18px);
}

/* ---- Upload ---- */

.onb-upload__actions {
  display: flex;
  gap: clamp(10px, 3vw, 14px);
  flex-wrap: wrap;
}
.onb-upload__actions > .onb-btn {
  flex: 1 1 0;
}
.onb-upload__preview {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 14px);
  padding: clamp(8px, 2vw, 12px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.onb-upload__preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #000;
}
.onb-upload__preview-actions {
  display: flex;
  gap: clamp(10px, 3vw, 14px);
}
.onb-upload__preview-actions > .onb-btn {
  flex: 1 1 0;
}
.onb-upload__progress {
  width: 100%;
  height: 6px;
  background: var(--surface-2);
}

/* ---- Preview (confirm) ---- */

.onb-preview {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}
.onb-preview__row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 1.5fr;
  gap: clamp(6px, 2vw, 12px);
  padding: clamp(10px, 3vw, 14px) clamp(12px, 3vw, 16px);
  background: var(--surface);
  align-items: center;
}
.onb-preview__label {
  color: var(--text-dim);
  font-size: clamp(13px, 3.4vw, 14px);
  margin: 0;
}
.onb-preview__value { margin: 0; }
.onb-preview__edit {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  min-height: var(--tap);
  flex-wrap: wrap;
}
.onb-preview__text {
  font-weight: 600;
}
.onb-preview__edit-hint {
  color: var(--accent);
  font-size: clamp(12px, 3vw, 13px);
  margin-left: auto;
}
.onb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: clamp(11px, 2.8vw, 12px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.onb-badge--driver {
  background: rgba(93, 211, 158, 0.15);
  color: var(--ok);
}
/* wbtaxi-17zo: amber badge + left border for rows that need driver
   confirmation (FUZZY_MID / NO_MATCH against WB Taxi catalogue). */
.onb-badge--needs-fix {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}
.onb-preview__row--needs-fix {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}
/* wbtaxi-ew4m: amber badge + left border for required Phase-A rows
   that have no OCR/manual value yet. Mirrors --needs-fix from
   wbtaxi-17zo so the visual language stays consistent. */
.onb-badge--incomplete {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}
.onb-preview__row--incomplete {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}
/* wbtaxi-ew4m: disabled submit when required fields are missing. */
.onb-btn:disabled,
.onb-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.onb-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--text);
  font-size: clamp(13px, 3.4vw, 14px);
  line-height: 1.5;
}

/* wbtaxi-17zo: catalog autocomplete + blocked screens. */
.onb-catalog__loading {
  margin: 12px 0;
  font-size: clamp(12px, 3vw, 13px);
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.2s;
}
.onb-catalog__loading.htmx-request {
  opacity: 1;
}
.onb-catalog__results {
  margin-top: 12px;
}
.onb-catalog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onb-catalog__item {
  margin: 0;
}
.onb-catalog__pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  cursor: pointer;
  min-height: var(--tap);
  text-align: left;
  font: inherit;
}
.onb-catalog__pick:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}
.onb-catalog__display {
  font-weight: 600;
  font-size: clamp(14px, 3.6vw, 15px);
}
.onb-catalog__wb-value {
  font-size: clamp(11px, 2.8vw, 12px);
  color: var(--text-dim);
}
.onb-catalog__empty {
  margin-top: 12px;
}
.onb-catalog__footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.onb-link {
  color: var(--accent);
  text-decoration: none;
  font-size: clamp(13px, 3.4vw, 14px);
}
.onb-link:hover {
  text-decoration: underline;
}
.onb-link--muted {
  color: var(--text-dim);
}
.onb-drawer__escape {
  margin: 12px 0 0;
  font-size: clamp(12px, 3vw, 13px);
}

/* Blocked screen */
.onb-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px 0;
}
.onb-info-card__title {
  margin: 0 0 8px;
  font-size: clamp(15px, 3.8vw, 16px);
}
.onb-info-card__list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  font-size: clamp(13px, 3.4vw, 14px);
}
.onb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* ---- Drawer ---- */

/* Drawer is hidden by default. The HTML `hidden` attribute on
 * `#drawer` combined with author CSS `display: flex` was a trap —
 * the author rule won specificity over the UA `[hidden]`
 * default, so the transparent-black backdrop covered the whole
 * page and swallowed every click on the wizard behind it.
 * We now opt-in explicitly via `data-open="true"` (set by app.js
 * on HTMX swap) and fall back to `display: none` otherwise. */
.onb-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.onb-drawer[hidden] { display: none; }
.onb-drawer[data-open="true"] { display: flex; }
.onb-drawer__panel {
  width: min(100%, 640px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: clamp(16px, 4vw, 24px);
  box-shadow: var(--shadow);
}
.onb-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(12px, 3vw, 16px);
}
.onb-drawer__title {
  margin: 0;
  font-size: clamp(18px, 5vw, 22px);
}
.onb-drawer__close {
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
}
.onb-drawer__body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 16px);
}
.onb-drawer__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: clamp(12px, 3vw, 13px);
}
.onb-drawer__divider::before,
.onb-drawer__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
body.onb-drawer-open { overflow: hidden; }

/* ---- Progress screen ---- */

.onb-progress-live {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 14px);
  padding: clamp(14px, 4vw, 20px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.onb-progress-live__track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.onb-progress-live__fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 300ms ease;
}
.onb-progress-live__stage {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.onb-progress-live__pct {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(13px, 3.4vw, 14px);
}

/* ---- Misc ---- */

.onb-contact {
  padding: clamp(12px, 3vw, 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.onb-contact__label {
  margin: 0 0 6px;
  font-size: clamp(12px, 3vw, 13px);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.onb-contact__value {
  margin: 0;
  font-weight: 600;
  font-size: clamp(16px, 4.2vw, 18px);
  color: var(--accent);
}

.onb-conditions__body {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--surface);
  padding: clamp(10px, 3vw, 14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---- Async OCR progress + review (onb-oc2) ---- */

.onb-step--progress {
  text-align: center;
}

.onb-progress-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 4vw, 20px);
  padding: clamp(16px, 5vw, 28px);
}

.onb-spinner {
  width: clamp(44px, 12vw, 64px);
  height: clamp(44px, 12vw, 64px);
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: onb-spin 0.9s linear infinite;
}

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

.onb-progress-wait__eta {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(14px, 3.6vw, 16px);
}

.onb-progress-wait__eta strong {
  color: var(--text);
  font-weight: 600;
}

/* Review list */

.onb-review {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 14px);
}

.onb-review__row {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.2vw, 12px);
  padding: clamp(12px, 4vw, 18px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.onb-review__row--ok {
  opacity: 0.75;
}

.onb-review__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onb-review__badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.onb-review__badge--ok      { background: var(--ok); }
.onb-review__badge--failed  { background: var(--danger); }
.onb-review__badge--manual  { background: var(--accent); }
.onb-review__badge--running,
.onb-review__badge--queued  { background: var(--text-dim); }

.onb-review__name {
  font-weight: 600;
}

.onb-review__status {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(13px, 3.4vw, 15px);
}

.onb-review__status--warn {
  color: var(--text);
}

.onb-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 12px);
}

.onb-review__actions .onb-btn {
  flex: 1 1 auto;
}

.onb-review__footer {
  margin-top: clamp(18px, 5vw, 28px);
  display: flex;
  justify-content: stretch;
}

.onb-review__footer .onb-btn {
  width: 100%;
}

/* Already-known fields on the manual-entry form (onb-oc2) */
.onb-known-fields {
  margin: 0 0 clamp(16px, 4.5vw, 24px);
  padding: clamp(12px, 3.5vw, 18px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 12px);
}

.onb-known-fields__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onb-known-fields__label {
  font-size: clamp(12px, 3vw, 13px);
  color: var(--text-dim);
  margin: 0;
}

.onb-known-fields__value {
  margin: 0;
  font-weight: 600;
}

/* wbtaxi-hz5y: error page (step_error.html) */
.onb-step--error {
  text-align: center;
}
.onb-error-code {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 0.25rem;
  user-select: all;
}