/* ============================================
   Birkly Admin — Onboarding wizard (P56)
   ============================================

   Full-page setup flow, rendered by admin/index.php WITHOUT the sidebar
   shell (body.onboarding-body > .onboarding-wrapper). Loaded after
   css/style.css, so components and u-* helpers are available.

   This file owns only what the framework has no primitive for: the wizard
   column, the step progress rail, and the starter-template choice grid.
   Panels are .card-like surfaces, actions are .btn, fields are
   .field/.input, inline errors are .callout, and every stack/row/cluster
   comes from u-* helpers in the template.

   Step visibility is the `hidden` attribute (admin/js/onboarding.js) —
   core/overrides.css makes it win over component display rules.
   ============================================ */

/* ---- Page shell ---- */
.onboarding-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.onboarding-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  padding: 32px var(--s-6);
  box-sizing: border-box;
}

.onboarding-page,
.onboarding-container {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.onboarding-page { max-width: var(--page-max-narrow); }

/* ---- Brand row ---- */
.onboarding-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.onboarding-header-title {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-title);
  color: var(--text-2);
}

/* ---- Progress rail ---- */
.progress-track {
  height: 0.1875rem;
  border-radius: var(--r);
  background: var(--surface-3);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r);
  background: var(--accent);
  transition: width var(--dur-3) var(--ease);
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.progress-step-dot {
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--line);
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.progress-step.active .progress-step-dot,
.progress-step.completed .progress-step-dot {
  background: var(--accent);
  border-color: var(--accent-line);
}

.progress-step-label {
  max-width: 100%;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--text-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-step.active .progress-step-label { color: var(--text); }
.progress-step.completed .progress-step-label { color: var(--text-2); }

/* ---- Step panel ---- */
.onboarding-step { width: 100%; min-width: 0; }

.onboarding-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ---- Step header ---- */
.step-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.step-header--brand { flex-direction: row; align-items: center; gap: var(--s-4); }
.step-header--optional { align-items: center; text-align: center; }

.step-brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* Kept: no longer in the template, but onboarding_e2e_test asserts the
   redesigned step header remains available for steps that add an icon. */
.step-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chrome-row);
  height: var(--chrome-row);
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.step-optional-badge {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding-inline: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.step-title {
  margin: 0;
  font-size: var(--size-page-title);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  color: var(--text);
}

.step-subtitle {
  margin: 0;
  max-width: var(--measure-md);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-2);
}

/* ---- Welcome step ---- */
.welcome-header h1 {
  margin: 0;
  font-size: var(--size-number);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  color: var(--text);
}

.welcome-subtitle {
  margin: 0;
  max-width: var(--measure-md);
  font-size: var(--size-slab-title);
  line-height: 1.6;
  color: var(--text-2);
}

/* ---- Forms ---- */
.label-optional {
  font-weight: var(--weight-regular);
  color: var(--text-3);
}

/* Reserve the error row so the panel does not jump when validation fires */
#first-user-error { min-height: 2.75rem; }

/* ---- Action rows ---- */
.onboarding-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.onboarding-actions--split,
.onboarding-actions--ai { justify-content: space-between; }
.onboarding-actions-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
}

/* ---- Choice grid — starter templates / use cases ---- */
.use-case-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.starter-template-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.use-case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--size-body);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.use-case-card:hover:not(.use-case-card--disabled) { background: var(--surface-2); }
.use-case-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
.use-case-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.use-case-card span { font-size: var(--size-small); color: var(--text-2); }
.use-case-card--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.starter-coming-soon {
  display: inline-flex;
  align-items: center;
  margin-block-start: var(--s-1);
  padding-inline: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--size-caption);
  font-style: normal;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

/* ---- Informational wells (install context, Ollama hint, MCP panel) ---- */
.install-context-card,
.ollama-hint-box {
  padding: var(--s-4);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-2);
}

.install-context-card p,
.ollama-hint-box p { margin: 0 0 var(--s-2); }
.install-context-card p:last-child,
.ollama-hint-box p:last-child { margin-block-end: 0; }
.install-context-card a { color: var(--accent-text); }

/* ---- Narrow screens ---- */
@media (max-width: 639px) {
  .onboarding-wrapper { padding: var(--s-5) var(--s-4); }
  .onboarding-content { padding: var(--s-6) var(--s-5); }
  .progress-step-label { display: none; }

  .onboarding-actions,
  .form-actions,
  .onboarding-actions-right,
  .onboarding-actions--ai { flex-direction: column; align-items: stretch; }

  .onboarding-actions-right { margin-inline-start: 0; }
  .onboarding-actions :is(.btn, .button),
  .form-actions :is(.btn, .button) { width: 100%; }
}

/* ============================================
   Birch (P96-M13): each step is a slab on the canvas; fields are grey
   inside it; starter and use-case cards are choice slabs with a blue ring
   when chosen; progress is a stepped meter with square dots.
   ============================================ */
.onboarding-content {
  padding: var(--s-6);
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
}

.onboarding-logo,
.step-brand-logo { border-radius: var(--r); }

.step-title,
.welcome-header h1 {
  color: var(--text);
  font: var(--weight-semibold) var(--size-page-title) / var(--lh-page-title) var(--font-sans);
  letter-spacing: 0;
}

.step-subtitle,
.welcome-subtitle { color: var(--text-3); }

.onboarding-content .input {
  border-color: transparent;
  background: var(--surface-2);
  box-shadow: none;
}

.onboarding-content .input:hover:not(:focus) { background: var(--surface-3); }
.onboarding-content .input:focus { border-color: var(--accent); background: var(--surface); box-shadow: none; }

.onboarding-content .field-label { color: var(--text); font-size: var(--size-small); font-weight: var(--weight-medium); }

.progress-track { height: 2px; border-radius: 0; background: var(--line); }
.progress-fill { border-radius: 0; background: var(--text); }

.progress-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--line-strong);
}

.progress-step.active .progress-step-dot { background: var(--text); }
.progress-step.completed .progress-step-dot { background: var(--success); }

.use-case-card {
  border: 0;
  border-radius: var(--r);
  background: var(--surface-2);
}

.use-case-card:hover:not(.use-case-card--disabled) { background: var(--surface-3); }

.use-case-card.selected {
  border: 0;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.use-case-card span { color: var(--text-3); }

.install-context-card {
  border: 0;
  border-radius: var(--r);
  background: var(--surface-2);
}