/* Sign-in, sign-up, password, confirmation, invitation and card pages: the light look of the central.to home page.
   Paper background with the dotted grid, the white pill bar with the wordmark, a white card, fire buttons. */
.auth-shell {
  --auth-soft: #4a4644;
  --auth-mute: #736d6a;
  --auth-rule: rgb(30 30 30 / 0.11);
  --auth-rule-2: rgb(30 30 30 / 0.18);
  --auth-ok: #0f7a55;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-brand-beige);
  color: var(--color-brand-black);
  font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* The home page's dotted grid, fading out towards the bottom. */
.auth-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(30 30 30 / 0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
}

/* Only the wordmark, centered above the card. */
.auth-brand {
  position: absolute;
  z-index: 20;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
}

.auth-brand a { display: block; }
.auth-brand svg { display: block; width: 108px; height: auto; }

.auth-main {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 112px 24px 96px;
}

.auth-card {
  width: 100%;
  border: 1px solid var(--auth-rule);
  border-radius: 20px;
  background: var(--color-white);
  padding: 32px;
  box-shadow: 0 1px 0 rgb(30 30 30 / 0.03), 0 30px 60px -36px rgb(30 30 30 / 0.35);
}

.auth-title { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; color: var(--color-brand-black); text-wrap: balance; }
.auth-muted { color: var(--auth-mute); }
.auth-link { color: var(--color-brand-black); text-decoration: underline; text-decoration-color: var(--auth-rule-2); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
.auth-link:hover { text-decoration-color: var(--color-signal-fire); }
.auth-divider { border-top: 1px solid var(--auth-rule); }
/* "Continue with Google", then the line that leads on to the e-mail form. */
.auth-google { gap: 10px; font-weight: 600; }
.auth-or { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--auth-mute); font-size: 13px; line-height: 18px; }
.auth-or > .auth-divider { flex: 1; }
.auth-check { color: var(--auth-ok); }

.auth-field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--auth-soft);
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
}

.auth-input {
  display: block;
  width: 100%;
  height: 46px;
  border: 1px solid var(--auth-rule-2);
  border-radius: 6px;
  background: var(--color-white);
  padding: 11px 14px;
  color: var(--color-brand-black);
  font-size: 15px;
  line-height: 22px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-input::placeholder { color: #9a9390; opacity: 1; }

.auth-input:focus {
  border-color: var(--color-brand-black);
  outline: none;
  box-shadow: 0 0 0 3px rgb(30 30 30 / 0.08);
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--color-white) inset;
  -webkit-text-fill-color: var(--color-brand-black);
  caret-color: var(--color-brand-black);
}

.auth-password-field { position: relative; }
.auth-password-field .auth-input { padding-right: 52px; }

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 6px;
  transform: translateY(-50%);
  color: var(--auth-mute);
  transition: background-color 150ms ease, color 150ms ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible,
.auth-password-toggle[aria-pressed="true"] { background: var(--color-brand-beige); color: var(--color-brand-black); }

.auth-password-toggle:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }

/* The home page's fire button, with brand-black text for WCAG AA contrast (white on Signal Fire is too faint). */
.auth-submit {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  background: var(--color-signal-fire);
  padding: 0 18px;
  color: var(--color-brand-black);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  transition: background-color 150ms ease, transform 100ms ease;
}

.auth-submit:hover { background: #ff3a22; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.auth-submit:disabled { background: var(--color-primary-100); color: var(--color-primary-400); cursor: not-allowed; transform: none; }

.auth-secondary {
  display: flex;
  width: 100%;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--auth-rule-2);
  border-radius: 6px;
  background: var(--color-white);
  padding: 0 14px;
  color: var(--color-brand-black);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 500;
  transition: border-color 150ms ease;
}

.auth-secondary:hover { border-color: var(--color-brand-black); }
.auth-secondary:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }

.auth-footer {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin: -64px auto 0;
  padding: 0 24px 24px;
  color: var(--auth-mute);
  font-size: 12.5px;
  line-height: 18px;
  text-align: center;
}

.auth-footer__legal p { margin: 0; }

.auth-footer a { color: var(--auth-soft); text-decoration: underline; text-underline-offset: 2px; }
.auth-footer a:hover { color: var(--color-brand-black); }

.auth-input:user-invalid, .auth-input[aria-invalid="true"] { border-color: var(--color-error); }
/* A field's own error, under it (sign-up). */
.auth-field-error { margin: 4px 0 0; color: var(--color-error); font-size: 12px; line-height: 16px; text-align: left; }
.auth-field-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The 6-digit code from the confirmation e-mail. */
.auth-code-input { height: 60px; text-align: center; font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace); font-size: 26px; letter-spacing: 0.5em; }

/* Something Central is doing right now (the shop being read while the person waits for the code). */
.auth-live-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--auth-ok); box-shadow: 0 0 0 4px rgb(15 122 85 / 0.15); vertical-align: 1px; animation: auth-live 1.6s ease-in-out infinite; }
.auth-live-dot--small { width: 7px; height: 7px; margin-right: 0; }
@keyframes auth-live { 50% { box-shadow: 0 0 0 7px rgb(15 122 85 / 0.05); } }
@media (prefers-reduced-motion: reduce) { .auth-live-dot { animation: none; } }

/* Cloudflare's Turnstile widget takes no room until Cloudflare needs the person (turnstile_controller.js opens it). */
.auth-turnstile.is-idle { height: 0; margin: 0; overflow: hidden; }
.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* The invitation page: the invited address is fixed. */
.auth-input[readonly] { background: var(--color-brand-beige); border-color: var(--auth-rule); color: var(--auth-soft); }

/* Flash messages sit on the white card. */
.auth-card .ds-alert { background: var(--color-brand-beige); border-color: var(--auth-rule); color: var(--color-brand-black); }
.auth-card .ds-alert--error { border-color: var(--color-error); }

@media (max-width: 767px) {
  .auth-brand { top: 26px; }
  .auth-brand svg { width: 96px; }
  .auth-main { align-items: flex-start; min-height: auto; padding: 88px 16px 32px; }
  .auth-card { padding: 22px 20px; border-radius: 16px; }
  .auth-title { font-size: 28px; }
  .auth-footer { margin-top: 0; padding: 0 16px 20px; }
}

/* A short window (a laptop at 720 px): the card starts higher, so the step fits on one screen. */
@media (min-width: 768px) and (max-height: 860px) {
  .auth-main { align-items: flex-start; padding-top: 96px; padding-bottom: 72px; }
  .auth-card { padding: 26px 28px; }
  .auth-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) { .auth-input, .auth-submit, .auth-password-toggle { transition: none; } }
/* Onboarding v2 in the look of central.to's home page (October 2026): paper with the dotted grid, the white pill bar,
   white cards with warm hairlines and rounder corners, sentence case, one Signal Fire action per screen. Buttons,
   fields, help text, alerts and chips come from design_components.css (ds-btn, ds-input, ds-field-*, ds-alert, chip);
   the end of this file gives them the home page's shape inside the onboarding only. */

.onboarding-v2-body {
  --ob-soft: #4a4644;
  --ob-mute: #736d6a;
  --ob-rule: rgb(30 30 30 / 0.11);
  --ob-rule-2: rgb(30 30 30 / 0.18);
  --ob-radius: 10px;
  --ob-radius-lg: 16px;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--color-brand-beige);
  color: var(--color-brand-black);
  font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
}

.onboarding-v2-outer { position: relative; z-index: 1; display: flex; min-height: 100dvh; flex-direction: column; overflow-x: clip; }

/* The home page's dotted grid behind every step, fading out towards the bottom. */
.onboarding-v2-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(30 30 30 / 0.12) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.4) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.4) 45%, transparent 85%);
}

/* The home page's pill bar: the wordmark, and signing out. */
.onboarding-v2-topbar { flex: 0 0 auto; padding: 14px clamp(16px, 4vw, 40px) 0; }

.onboarding-v2-topbar__bar {
  display: flex;
  width: 100%;
  max-width: 1120px;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 0 8px 0 22px;
  border: 1px solid var(--ob-rule);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 1px 0 rgb(30 30 30 / 0.03), 0 18px 40px -26px rgb(30 30 30 / 0.35);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}

.onboarding-v2-topbar__logo { display: block; width: 96px; height: auto; }
.onboarding-v2-topbar form { margin: 0; }

.onboarding-v2-signout {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ob-rule-2);
  border-radius: 999px;
  background: var(--color-white);
  padding: 0 16px;
  color: var(--color-brand-black);
  font-size: 13px;
  line-height: 18px;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}

.onboarding-v2-signout:hover { border-color: var(--color-brand-black); }
.onboarding-v2-signout:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.onboarding-v2-signout svg { width: 14px; height: 14px; }

.onboarding-v2-canvas { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }

.onboarding-v2-canvas > turbo-frame,
.onboarding-v2-canvas > #onboarding-content { display: flex; min-width: 0; min-height: 100%; flex: 1 1 auto; flex-direction: column; }

.onboarding-v2-canvas > .ds-alert,
.onboarding-v2-canvas > [data-controller~="flash"],
.onboarding-v2-canvas > div:has(> .ds-alert) { width: min(1120px, calc(100% - 32px)); margin: 14px auto 0; }
.onboarding-v2-canvas > div:has(> .ds-alert) > .ds-alert { border-radius: var(--ob-radius); }

.onboarding-v2-embedded-flow { width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px); }

.onboarding-v2-screen {
  display: flex;
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px) 32px;
}

.onboarding-v2-screen__heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); align-items: start; gap: 24px; }
.onboarding-v2-screen__heading-row--single { grid-template-columns: minmax(0, 1fr); }
.onboarding-v2-screen__heading { min-width: 0; max-width: 760px; }

.onboarding-v2-screen h1 {
  margin: 0;
  color: var(--color-brand-black);
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.035em;
  text-wrap: balance;
  outline: none;
}

.onboarding-v2-screen__subtitle { max-width: 680px; margin: 10px 0 0; color: var(--ob-soft); font-size: 16px; line-height: 24px; }

.onboarding-v2-kicker { color: var(--ob-soft); font-size: 13px; font-weight: 500; line-height: 18px; }

/* Progress: one quiet line under the bar, the step in words, the percentage in plain figures. */
.onboarding-v2-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 16px max(clamp(16px, 4vw, 40px), calc((100% - 1120px) / 2 + clamp(16px, 4vw, 40px))) 4px;
  background: transparent;
}

.onboarding-v2-progress__copy { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.onboarding-v2-progress__detail { overflow: hidden; color: var(--color-brand-black); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-v2-progress__activity { display: inline-flex; align-items: center; gap: 6px; color: var(--ob-soft); font-size: 13px; white-space: nowrap; }
.onboarding-v2-progress__pulse { width: 6px; height: 6px; border-radius: 999px; background: var(--color-signal-fire); box-shadow: 0 0 0 0 rgb(255 88 66 / 0.35); animation: onboarding-v2-pulse 1.8s ease-out infinite; }
.onboarding-v2-progress__value { color: var(--ob-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.onboarding-v2-progress__track { position: relative; grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: rgb(30 30 30 / 0.08); }
.onboarding-v2-progress__fill { display: block; height: 100%; border-radius: 999px; background: var(--color-signal-fire); transition: width 220ms ease-out; }

/* Short step states under the bar: what is done, where the customer is, and what comes next. */
.onboarding-v2-steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ob-soft); font-size: 12px; line-height: 16px; }
.onboarding-v2-steps li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.onboarding-v2-steps__mark { position: relative; flex: none; width: 14px; height: 14px; border: 1px solid var(--ob-rule-2); border-radius: 999px; background: var(--color-white); }
.onboarding-v2-steps .is-done { color: var(--color-brand-black); }
.onboarding-v2-steps .is-done .onboarding-v2-steps__mark { border-color: var(--color-success); background: var(--color-success); }
.onboarding-v2-steps .is-done .onboarding-v2-steps__mark::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px; border: solid var(--color-white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.onboarding-v2-steps .is-current { color: var(--color-brand-black); font-weight: 600; }
.onboarding-v2-steps .is-current .onboarding-v2-steps__mark { border-color: var(--color-signal-fire); background: var(--color-signal-fire); box-shadow: inset 0 0 0 3px var(--color-white); }
.onboarding-v2-steps .is-attention .onboarding-v2-steps__mark { border-color: var(--color-error); background: var(--color-error-soft); box-shadow: none; }
.onboarding-v2-steps__note { color: var(--ob-soft); font-weight: 400; }

@keyframes onboarding-v2-pulse {
  70% { box-shadow: 0 0 0 6px rgb(255 88 66 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 88 66 / 0); }
}

.onboarding-v2-panel { min-width: 0; border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 20px; }
.onboarding-v2-panel--outlined { border-color: var(--ob-rule); }
.onboarding-v2-panel__label { display: block; margin: 0 0 14px; color: var(--color-brand-black); font-size: 14px; font-weight: 600; line-height: 20px; }

/* The website step: one labelled field, its button, one line of help. The field alone shows focus. */
.onboarding-v2-url-form { width: 100%; }
.onboarding-v2-url-form__row { display: flex; align-items: stretch; gap: 8px; }
.onboarding-v2-url-form .ds-input { min-width: 0; height: 44px; flex: 1 1 auto; font-size: 15px; }
.onboarding-v2-note { margin: 8px 0 0; color: var(--ob-soft); font-size: 13px; line-height: 18px; }
.onboarding-v2-note strong { font-weight: 600; }

.onboarding-v2-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--ob-rule);
  padding-top: 16px;
}

.onboarding-v2-actions__group { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.onboarding-v2-actions form { margin: 0; }
.onboarding-v2-selection-summary { margin: 0 8px 0 0; color: var(--ob-soft); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }

/* Search inside a list: the field shell of the design system, with its icon. */
.onboarding-v2-search {
  position: relative;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ob-rule);
  border-radius: var(--ob-radius);
  background: var(--color-white);
  padding: 0 12px;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.onboarding-v2-search:hover { border-color: var(--color-primary-200); }
.onboarding-v2-search:focus-within { border-color: var(--color-brand-black); box-shadow: 0 0 0 3px rgb(30 30 30 / 0.08); }
.onboarding-v2-search svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-primary-400); }
.onboarding-v2-search input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; outline: none; box-shadow: none; }

.onboarding-v2-browser { border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 16px; }
.onboarding-v2-browser__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 10px; color: var(--ob-soft); font-size: 13px; }
.onboarding-v2-browser__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onboarding-v2-browser__grid--bounded { max-height: none; overflow: visible; }
.onboarding-v2-browser__empty { border: 1px dashed var(--ob-rule); border-radius: var(--ob-radius); padding: 20px; color: var(--ob-soft); font-size: 14px; text-align: center; }

/* Choices (countries, destinations, sources): white cards, the control first, the selected card filled brand black,
   as on the import page. */
.onboarding-v2-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ob-rule);
  border-radius: var(--ob-radius);
  background: var(--color-white);
  padding: 10px 12px;
  color: var(--color-brand-black);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.onboarding-v2-choice:hover { border-color: var(--color-primary-200); background: var(--color-primary-50); }
.onboarding-v2-choice:has(.onboarding-v2-choice__control:focus-visible) { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.onboarding-v2-choice:has(.onboarding-v2-choice__control:checked) { border-color: var(--color-brand-black); background: var(--color-brand-black); color: var(--color-white); }
.onboarding-v2-choice.is-disabled { cursor: not-allowed; }
.onboarding-v2-choice.is-disabled:hover { border-color: var(--ob-rule); background: var(--color-white); }
.onboarding-v2-choice.is-disabled .onboarding-v2-choice__label { color: var(--ob-soft); }
.onboarding-v2-choice__icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: var(--ob-radius); background: var(--color-white); }
.onboarding-v2-choice__image { display: block; width: 24px; height: 24px; object-fit: contain; }
.onboarding-v2-choice__glyph { width: 18px; height: 18px; }
.onboarding-v2-choice__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.onboarding-v2-choice__label { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-v2-choice__description { overflow: hidden; color: var(--ob-soft); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-v2-choice:has(.onboarding-v2-choice__control:checked) .onboarding-v2-choice__description { color: var(--color-primary-200); }
.onboarding-v2-choice:has(.onboarding-v2-choice__control:checked) .onboarding-v2-choice__control { border-color: var(--color-brand-beige); }
.onboarding-v2-choice__meta { flex: 0 0 auto; border-radius: var(--ob-radius); background: var(--color-primary-50); padding: 2px 8px; color: var(--ob-soft); font-size: 12px; line-height: 18px; }
.onboarding-v2-choice__control { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; cursor: inherit; }
.onboarding-v2-choice__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.onboarding-v2-choice__badges span { border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 0 6px; color: var(--ob-soft); font-size: 12px; line-height: 18px; }
.onboarding-v2-choice__badges .onboarding-v2-choice__badge--flag { display: inline-grid; width: 22px; height: 18px; place-items: center; padding: 1px; }
.onboarding-v2-choice__badge-flag { width: 14px; height: 14px; object-fit: contain; }

/* Destinations use the same card; their brand mark keeps a white tile on the filled state. */
.onboarding-v2-choice--channel { min-height: 64px; }
.onboarding-v2-choice--channel > .onboarding-v2-choice__icon { width: 36px; height: 36px; flex-basis: 36px; border: 1px solid var(--ob-rule); background: var(--color-white); }
.onboarding-v2-choice--channel .onboarding-v2-choice__image { width: 24px; height: 24px; }
.onboarding-v2-choice--channel.is-disabled { opacity: 1; }
.onboarding-v2-choice--channel.is-disabled > .onboarding-v2-choice__control { visibility: hidden; }

.onboarding-v2-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 4px; }
.onboarding-v2-filter {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ob-rule);
  border-radius: var(--ob-radius);
  background: var(--color-white);
  padding: 0 12px;
  color: var(--color-brand-black);
  font-size: 13px;
  cursor: pointer;
}
.onboarding-v2-filter:hover { border-color: var(--color-primary-200); background: var(--color-primary-50); }
.onboarding-v2-filter[aria-pressed="true"] { border-color: var(--color-brand-black); background: var(--color-brand-black); color: var(--color-white); }
.onboarding-v2-filter__flag { width: 16px; height: 16px; object-fit: contain; }

.onboarding-v2-filter:focus-visible,
.onboarding-v2-recovery-banner__action:focus-visible,
.onboarding-v2-recovery-banner__dismiss:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }

/* The shop screen: what Central read on the website, one fact beside the next, "Change" at the end of the row. */
.onboarding-v2-shop-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 18px; }
.onboarding-v2-shop-fact { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.onboarding-v2-shop-fact__marked { display: flex; align-items: center; gap: 6px; }
.onboarding-v2-shop-fact__marked img { width: 16px; height: 16px; flex: none; }
.onboarding-v2-shop-fact__flag { border-radius: 999px; }
.onboarding-v2-shop-fact__pending { display: block; width: 120px; height: 18px; }
.onboarding-v2-shop-facts__change { margin-left: auto; }
/* Fewer than three products: the cards, and the catalog for a better sample beside them. */
.onboarding-v2-shop-few { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.onboarding-v2-shop-few > form { flex: 0 1 400px; min-width: 0; }
.onboarding-v2-shop-few > form .onboarding-v2-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding-v2-shop-few > .onboarding-v2-panel { flex: 1 1 360px; }
.onboarding-v2-better-sample__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding-v2-choice--button { width: 100%; text-align: left; font: inherit; }
/* Dialogs on the onboarding screens take the panels' larger corners. */
.onboarding-v2-body [role="dialog"] .surface-card { overflow: hidden; border-radius: var(--ob-radius-lg); }

/* The working screen: each product with what Central has for it so far, then the next steps to take meanwhile. */
.onboarding-v2-working__run, .onboarding-v2-working__next { padding: 16px 18px; }
.onboarding-v2-working__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.onboarding-v2-working__product { display: flex; min-width: 0; align-items: center; gap: 12px; }
.onboarding-v2-working__thumb { width: 48px; height: 48px; flex: none; overflow: hidden; border-radius: var(--ob-radius); background: var(--color-primary-50); }
.onboarding-v2-working__thumb .ds-product-image { width: 100%; height: 100%; border-radius: 0; }
.onboarding-v2-working__title { display: -webkit-box; overflow: hidden; color: var(--color-brand-black); font-size: 13px; font-weight: 600; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.onboarding-v2-working__status { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ob-soft); font-size: 12px; line-height: 16px; }
.onboarding-v2-working__product[data-state="stopped"] .onboarding-v2-working__status { color: var(--color-error); }
.onboarding-v2-working__retry { display: inline-block; margin-top: 4px; color: var(--color-brand-black); font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; }
.onboarding-v2-working__retry:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.onboarding-v2-working__next-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.onboarding-v2-working__next-head .onboarding-v2-panel__label { margin: 0; }
.onboarding-v2-working__next-head p { margin: 0; color: var(--ob-soft); font-size: 13px; line-height: 18px; }
@media (max-width: 1023px) {
  .onboarding-v2-working__products { grid-template-columns: minmax(0, 1fr); }
}

/* Products as the shop shows them: the picture first, then brand, name and price. */
.onboarding-v2-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.onboarding-v2-product-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ob-rule);
  border-radius: var(--ob-radius-lg);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.onboarding-v2-product-card:hover { border-color: var(--color-primary-200); }
.onboarding-v2-product-card.is-disabled { cursor: default; }
.onboarding-v2-product-card.is-disabled:hover { border-color: var(--ob-rule); }
.onboarding-v2-product-card:has(.onboarding-v2-product-card__control:focus-visible) { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
/* A chosen card: the ring is drawn above the picture, so the picture never thins the border. */
.onboarding-v2-product-card:has(.onboarding-v2-product-card__control:checked),
.onboarding-v2-product-card.is-selected { border-color: var(--color-brand-black); }
.onboarding-v2-product-card:has(.onboarding-v2-product-card__control:checked)::after,
.onboarding-v2-product-card.is-selected::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--color-brand-black); border-radius: calc(var(--ob-radius-lg) - 1px); pointer-events: none; }
.onboarding-v2-product-card__control { position: absolute; z-index: 2; top: 10px; left: 10px; width: 20px; height: 20px; margin: 0; accent-color: var(--color-brand-black); }
/* A plan step that stopped (cancelled, or failed for every product). */
.onboarding-v2-milestone.is-stopped { border-color: var(--color-error-border); }
.onboarding-v2-milestone.is-stopped .onboarding-v2-milestone__mark { border-color: var(--color-error-border); background: var(--color-error-soft); color: var(--color-error); }
.onboarding-v2-milestone.is-stopped .onboarding-v2-milestone__status { background: var(--color-error-soft); color: var(--color-error); }
/* A product whose enrichment stopped: its data is unchanged. */
.onboarding-v2-product-card.is-stopped { border-color: var(--color-error-border); }
.onboarding-v2-product-card.is-stopped .ds-product-image img { opacity: 0.55; }
.onboarding-v2-product-card.is-stopped .onboarding-v2-product-card__field-count { color: var(--color-error); }
.onboarding-v2-product-card.is-stopped .onboarding-v2-product-card__field-count > span { background: var(--color-error); }
/* A product the reading has not reached yet. */
.onboarding-v2-product-card.is-loading { cursor: default; }
.onboarding-v2-product-card.is-loading .ds-product-image { background: rgb(30 30 30 / 0.05); }
.onboarding-v2-product-card__body { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.onboarding-v2-product-card__brand { color: var(--ob-soft); font-size: 12px; line-height: 16px; }
.onboarding-v2-product-card__title { display: -webkit-box; overflow: hidden; color: var(--color-brand-black); font-size: 14px; font-weight: 600; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.onboarding-v2-product-card__price { color: var(--color-brand-black); font-size: 14px; line-height: 20px; }
.onboarding-v2-product-card__field-count { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ob-soft); font-size: 12px; line-height: 16px; }
.onboarding-v2-product-card__field-count > span { width: 6px; height: 6px; border-radius: 999px; background: var(--color-success); }

/* Until a card is saved, the steps that will ask for it say so. */
.onboarding-v2-card-note { margin: 0; color: var(--ob-soft); font-size: 13px; line-height: 19px; }

/* A first project can start with what its website showed instead of a shop system or a file. */
.onboarding-v2-website-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 18px 20px; }
.onboarding-v2-website-source__copy { display: flex; min-width: 0; flex: 1 1 320px; flex-direction: column; gap: 4px; }
.onboarding-v2-website-source__copy h2 { margin: 0; color: var(--color-brand-black); font-size: 15px; font-weight: 600; line-height: 20px; }
.onboarding-v2-website-source__copy p,
.onboarding-v2-website-source__unavailable { margin: 0; color: var(--ob-soft); font-size: 14px; line-height: 20px; }

/* A short bold value and its quiet hint (the shop screen's facts, the source grid's notes). */
.onboarding-v2-found__label { margin: 0; color: var(--color-brand-black); font-size: 13px; font-weight: 600; line-height: 18px; }
.onboarding-v2-found__hint { margin: 0; color: var(--ob-soft); font-size: 13px; line-height: 19px; }
/* Countries as chips: every one on the screen at once, the chosen ones dark (the step's selection rule stays). */
.onboarding-v2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onboarding-v2-chip { position: relative; display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid var(--ob-rule); border-radius: 999px; background: var(--color-white); padding: 0 12px 0 6px; color: var(--color-primary-700); font-size: 13px; line-height: 18px; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.onboarding-v2-chip:hover { border-color: var(--color-primary-300); }
.onboarding-v2-chip__control { position: absolute; width: 1px; height: 1px; opacity: 0; }
.onboarding-v2-chip__flag { width: 20px; height: 20px; flex: none; border-radius: 999px; object-fit: cover; }
.onboarding-v2-chip:has(.onboarding-v2-chip__control:checked) { border-color: var(--color-brand-black); background: var(--color-brand-black); color: var(--color-white); }
.onboarding-v2-chip:has(.onboarding-v2-chip__control:focus-visible) { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }

/* A short window: a smaller heading leaves the step's content in view. */
@media (min-width: 701px) and (max-height: 820px) {
  .onboarding-v2-screen h1 { font-size: 30px; line-height: 34px; }
  .onboarding-v2-screen__subtitle { font-size: 15px; line-height: 22px; }
}

/* Website analysis: the steps on the left, what Central found on the right. */
.onboarding-v2-discovery-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.onboarding-v2-milestones { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.onboarding-v2-milestone { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); padding: 8px 12px; }
.onboarding-v2-milestone__mark { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--ob-rule); border-radius: 999px; color: var(--color-primary-400); }
.onboarding-v2-milestone__mark svg { width: 14px; height: 14px; }
.onboarding-v2-milestone.is-complete .onboarding-v2-milestone__mark { border-color: var(--color-success-border, #b6efc1); background: var(--color-success-soft); color: var(--color-success); }
.onboarding-v2-milestone.is-running { border-color: var(--color-primary-200); }
.onboarding-v2-milestone.is-running .onboarding-v2-milestone__mark { border-color: var(--color-signal-fire); color: var(--color-signal-fire); }
.onboarding-v2-milestone.is-running .onboarding-v2-milestone__mark svg { animation: onboarding-v2-running-mark 1.8s ease-in-out infinite; }
.onboarding-v2-milestone strong { display: block; font-size: 14px; font-weight: 500; line-height: 20px; }
.onboarding-v2-milestone small { display: block; color: var(--ob-soft); font-size: 12px; line-height: 16px; }
.onboarding-v2-milestone__status { border-radius: var(--ob-radius); background: var(--color-primary-50); padding: 2px 8px; color: var(--ob-soft); font-size: 12px; line-height: 18px; white-space: nowrap; }
.onboarding-v2-milestone.is-complete .onboarding-v2-milestone__status { background: var(--color-success-soft); color: var(--color-success); }
.onboarding-v2-milestone.is-running .onboarding-v2-milestone__status { background: var(--color-fire-50); color: var(--color-fire-700); }

@keyframes onboarding-v2-running-mark {
  50% { opacity: .45; transform: scale(.82); }
}

.onboarding-v2-context-list { display: flex; flex-direction: column; margin: 0; }
.onboarding-v2-context-list div { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-line); }
.onboarding-v2-context-list div:last-child { border-bottom: 0; }
.onboarding-v2-context-list dt { color: var(--ob-soft); font-size: 13px; }
.onboarding-v2-context-list dd { overflow: hidden; margin: 0; color: var(--color-brand-black); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

/* Notices and recovery: the design system's alert, with one action and a dismiss. */
.onboarding-v2-recovery-banner {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  border-radius: var(--ob-radius);
  padding: 10px 8px 10px 14px;
  color: var(--color-brand-black);
  font-size: 14px;
  line-height: 20px;
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}
.onboarding-v2-recovery-banner.is-dismissing { opacity: 0; transform: translateY(-4px); }
.onboarding-v2-recovery-banner--error { border-color: var(--color-error-border, #ffc6c3); background: var(--color-error-soft); }
.onboarding-v2-recovery-banner--warning { border-color: var(--color-warning-border, #f0d27d); background: var(--color-warning-soft); }
.onboarding-v2-recovery-banner--info { border-color: var(--color-info-border, #b5dcff); background: var(--color-info-soft); }
.onboarding-v2-recovery-banner--success { border-color: var(--color-success-border, #b6efc1); background: var(--color-success-soft); }
.onboarding-v2-recovery-banner--neutral { border-color: var(--ob-rule); background: var(--color-primary-50); }
.onboarding-v2-recovery-banner__icon { width: 18px; height: 18px; align-self: start; margin-top: 1px; }
.onboarding-v2-recovery-banner--error .onboarding-v2-recovery-banner__icon { color: var(--color-error); }
.onboarding-v2-recovery-banner--warning .onboarding-v2-recovery-banner__icon { color: var(--color-warning); }
.onboarding-v2-recovery-banner--success .onboarding-v2-recovery-banner__icon { color: var(--color-success); }
.onboarding-v2-recovery-banner__copy { display: flex; min-width: 0; flex-direction: column; }
.onboarding-v2-recovery-banner__copy strong { font-weight: 600; }
.onboarding-v2-recovery-banner__action { display: inline-flex; min-height: 32px; align-items: center; border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 0 12px; color: var(--color-brand-black); font-size: 13px; white-space: nowrap; }
.onboarding-v2-recovery-banner__action:hover { border-color: var(--color-primary-200); }
.onboarding-v2-recovery-banner__dismiss { display: grid; width: 44px; height: 44px; margin-block: -6px; place-items: center; border-radius: var(--ob-radius); color: var(--ob-soft); }
.onboarding-v2-recovery-banner__dismiss:hover { background: rgb(0 0 0 / 0.04); color: var(--color-brand-black); }
.onboarding-v2-recovery-stack { display: flex; flex-direction: column; gap: 16px; }

.onboarding-v2-source-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.onboarding-v2-source-tab { display: flex; min-height: 44px; align-items: center; gap: 8px; border: 1px solid var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 0 12px; font-size: 13px; }
.onboarding-v2-source-tab img { width: 18px; height: 18px; object-fit: contain; }
.onboarding-v2-source-tab.is-active { border-color: var(--color-brand-black); background: var(--color-brand-black); color: var(--color-white); }
.onboarding-v2-source-setup { display: grid; min-height: 156px; place-items: center; border: 1px dashed var(--ob-rule); border-radius: var(--ob-radius); background: var(--color-white); padding: 28px; text-align: center; }
.onboarding-v2-source-setup strong { display: block; font-size: 14px; font-weight: 600; }
.onboarding-v2-source-setup p { max-width: 520px; margin: 6px auto 0; color: var(--ob-soft); font-size: 13px; }
.onboarding-v2-source-setup__activity { display: block; width: 10px; height: 10px; margin: 16px auto 0; border-radius: 999px; background: var(--color-signal-fire); animation: onboarding-v2-pulse 1.8s ease-out infinite; }

.onboarding-v2-centered-state { display: grid; flex: 1 1 auto; place-items: center; text-align: center; }
.onboarding-v2-centered-state > div { max-width: 600px; }
.onboarding-v2-centered-state p { color: var(--ob-soft); font-size: 15px; line-height: 22px; }

[hidden] { display: none !important; }

@media (max-width: 1023px) {
  .onboarding-v2-screen__heading-row { grid-template-columns: minmax(0, 1fr); }
  .onboarding-v2-browser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding-v2-discovery-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .onboarding-v2-screen { gap: 20px; padding: 24px 16px 20px; }
  .onboarding-v2-embedded-flow { padding: 24px 16px; }
  .onboarding-v2-screen h1 { font-size: 28px; line-height: 32px; }
  .onboarding-v2-screen__subtitle { font-size: 15px; line-height: 22px; }
  .onboarding-v2-progress { padding-inline: 16px; }
  .onboarding-v2-progress__copy { flex-direction: column; align-items: flex-start; gap: 2px; }
  .onboarding-v2-browser__grid, .onboarding-v2-source-tabs { grid-template-columns: minmax(0, 1fr); }
  .onboarding-v2-url-form__row { flex-direction: column; }
  .onboarding-v2-url-form__row .ds-btn { width: 100%; }
  /* The step's actions stay in view at the bottom and keep the document's sequence (Back and "Set up later", the
     selection, then the main action across the width). */
  .onboarding-v2-actions {
    position: sticky; z-index: 5; bottom: 0;
    width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-brand-beige);
  }
  .onboarding-v2-actions__group { display: contents; }
  .onboarding-v2-actions > form:first-child, .onboarding-v2-actions > .ds-btn:first-child,
  .onboarding-v2-actions__group > form:has([data-testid="onboarding-v2-set-up-later"]) { flex: none; }
  .onboarding-v2-selection-summary { flex: 1 1 96px; margin: 0; text-align: center; }
  .onboarding-v2-actions__group > .ds-btn--primary,
  .onboarding-v2-actions__group > form:has(.ds-btn--primary) { flex: 1 1 140px; }
  .onboarding-v2-actions .ds-btn--primary,
  .onboarding-v2-actions form:has(.ds-btn--primary) .ds-btn { width: 100%; }
  .onboarding-v2-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding-v2-recovery-banner { grid-template-columns: 18px minmax(0, 1fr) 44px; }
  .onboarding-v2-recovery-banner__action { grid-column: 2; justify-self: start; }
  .onboarding-v2-recovery-banner__dismiss { grid-column: 3; grid-row: 1; }
}

@media (max-width: 420px) {
  .onboarding-v2-topbar__logo { width: 84px; }
  .onboarding-v2-signout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .onboarding-v2-signout { width: 44px; padding: 0; }
}

@media (pointer: coarse) {
  .onboarding-v2-filter,
  .onboarding-v2-choice,
  .onboarding-v2-search,
  .onboarding-v2-signout,
  .onboarding-v2-recovery-banner__action { min-height: 44px; }
  .onboarding-v2-filter { min-width: 44px; }
  .onboarding-v2-recovery-banner__dismiss { min-width: 44px; min-height: 44px; }
  .onboarding-v2-choice__control { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-v2-progress__fill,
  .onboarding-v2-choice,
  .onboarding-v2-signout,
  .onboarding-v2-recovery-banner { transition: none; }
  .onboarding-v2-progress__pulse,
  .onboarding-v2-milestone.is-running .onboarding-v2-milestone__mark svg,
  .onboarding-v2-source-setup__activity { animation: none; }
}

/* One screen: on a laptop or desktop window an onboarding step never scrolls as a page. The heading and the actions
   stay in view; when a step's content is longer than the window, only its own list or panel scrolls. Phones and very
   short windows keep the normal page scroll. */
@media (min-width: 701px) and (min-height: 560px) {
  .onboarding-v2-outer:has(.onboarding-v2-screen) { height: 100dvh; min-height: 0; }
  .onboarding-v2-outer:has(.onboarding-v2-screen) .onboarding-v2-canvas,
  .onboarding-v2-canvas > #onboarding-content { min-height: 0; }
  .onboarding-v2-screen { min-height: 0; gap: 20px; padding-top: clamp(20px, 4vh, 40px); padding-bottom: 20px; }
  .onboarding-v2-screen > :not(.onboarding-v2-screen__heading-row, .onboarding-v2-actions, .sr-only, .onboarding-v2-panel) {
    position: relative; /* contains the screen-reader-only live regions inside, so they cannot stretch the page */
    min-height: 0;
    flex: 0 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    margin: -4px; /* room for the cards' focus rings inside the scrolling area */
    padding: 4px;
  }
}

/* The home page's shapes on the onboarding's panels, fields and buttons. */
.onboarding-v2-panel,
.onboarding-v2-browser,
.onboarding-v2-website-source,
.onboarding-v2-source-setup { border-radius: var(--ob-radius-lg); }
.onboarding-v2-panel,
.onboarding-v2-website-source { box-shadow: 0 1px 0 rgb(30 30 30 / 0.02), 0 24px 48px -36px rgb(30 30 30 / 0.3); }
.onboarding-v2-actions { border-top-color: var(--ob-rule); }

.onboarding-v2-body .ds-btn { min-height: 40px; border-radius: 6px; }
.onboarding-v2-body .ds-btn--primary { font-weight: 600; }
.onboarding-v2-body .ds-btn--primary:hover { background: #ff3a22; }
.onboarding-v2-body .ds-btn--secondary { border-color: var(--ob-rule-2); }
.onboarding-v2-body .ds-btn--secondary:hover { border-color: var(--color-brand-black); background: var(--color-white); }
.onboarding-v2-body .ds-btn:focus-visible { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.onboarding-v2-body .ds-input { border-color: var(--ob-rule-2); border-radius: 6px; }
.onboarding-v2-body .ds-input:hover { border-color: rgb(30 30 30 / 0.3); }
.onboarding-v2-body .ds-input:focus { border-color: var(--color-brand-black); box-shadow: 0 0 0 3px rgb(30 30 30 / 0.08); }
.onboarding-v2-url-form .ds-input { height: 48px; font-size: 15px; }
.onboarding-v2-url-form .ds-btn { min-height: 48px; padding-inline: 20px; }

/* The website step continues the home page's call to action: the hero's centered heading, the address in Geist Mono
   beside the fire button. Equal room above and below keeps it in the middle of the screen. */
.onboarding-v2-screen--hero > .onboarding-v2-screen__heading-row { margin-top: auto; }
.onboarding-v2-screen--hero .onboarding-v2-screen__heading-row,
.onboarding-v2-screen--hero .onboarding-v2-url-form { width: 100%; max-width: 760px; margin-inline: auto; text-align: center; }
.onboarding-v2-screen--hero .onboarding-v2-screen__heading { max-width: none; }
.onboarding-v2-screen--hero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.04em; }
.onboarding-v2-screen--hero .onboarding-v2-screen__subtitle { max-width: 600px; margin-inline: auto; font-size: 18px; line-height: 1.55; }
.onboarding-v2-screen--hero .onboarding-v2-url-form > .ds-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.onboarding-v2-screen--hero .onboarding-v2-url-form .ds-input { font-family: "Geist Mono", ui-monospace, monospace; font-size: 15px; }
.onboarding-v2-screen--hero .ds-field-help { text-align: center; }
@media (max-width: 700px) {
  .onboarding-v2-screen--hero h1 { font-size: 32px; }
  .onboarding-v2-screen--hero .onboarding-v2-screen__subtitle { font-size: 16px; }
}

/* Recovery with two ways on (the website again, or another source): a switch shows one at a time, with its one main
   button. Without CSS :has() both stay visible, as before. */
.onboarding-v2-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--ob-rule); border-radius: 14px; background: var(--color-white); }
.onboarding-v2-paths label { position: relative; display: flex; min-height: 40px; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 10px; color: var(--ob-soft); font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.onboarding-v2-paths input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.onboarding-v2-paths label:hover { color: var(--color-brand-black); }
.onboarding-v2-paths label:has(input:checked) { background: var(--color-brand-black); color: var(--color-white); }
.onboarding-v2-paths label:has(input:focus-visible) { outline: 2px solid var(--color-brand-black); outline-offset: 2px; }
.onboarding-v2-screen:has(#onboarding-v2-path-website:checked) .onboarding-v2-recovery-path--source,
.onboarding-v2-screen:has(#onboarding-v2-path-source:checked) .onboarding-v2-recovery-path--website { display: none; }
/* In the first step's shape the choice and its path sit in the hero's centered column. */
.onboarding-v2-screen--hero .onboarding-v2-recovery-stack { width: 100%; max-width: 760px; margin-inline: auto; }
.onboarding-v2-screen--hero .onboarding-v2-paths { width: 100%; max-width: 440px; margin-inline: auto; }
/* Two sources per row in that column, so each one's description fits; phones keep one per row. */
@media (min-width: 701px) {
  .onboarding-v2-screen--hero .onboarding-v2-browser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.svelte-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.svelte-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.svelte-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.svelte-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.svelte-flow__pane {
  z-index: 1;
}
.svelte-flow__pane.draggable {
    cursor: grab;
  }
.svelte-flow__pane.dragging {
    cursor: grabbing;
  }
.svelte-flow__pane.selection {
    cursor: pointer;
  }
.svelte-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.svelte-flow__renderer {
  z-index: 4;
}
.svelte-flow__selection {
  z-index: 6;
}
.svelte-flow__nodesselection-rect:focus,
.svelte-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.svelte-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.svelte-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.svelte-flow .svelte-flow__edges {
  position: absolute;
}
.svelte-flow .svelte-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.svelte-flow__edge {
  pointer-events: visibleStroke;
}
.svelte-flow__edge.selectable {
    cursor: pointer;
  }
.svelte-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.svelte-flow__edge.animated path.svelte-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.svelte-flow__edge.inactive {
    pointer-events: none;
  }
.svelte-flow__edge.selected,
  .svelte-flow__edge:focus,
  .svelte-flow__edge:focus-visible {
    outline: none;
  }
.svelte-flow__edge.selected .svelte-flow__edge-path,
  .svelte-flow__edge.selectable:focus .svelte-flow__edge-path,
  .svelte-flow__edge.selectable:focus-visible .svelte-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.svelte-flow__edge-textwrapper {
    pointer-events: all;
  }
.svelte-flow__edge .svelte-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.svelte-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.svelte-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.svelte-flow__connection {
  pointer-events: none;
}
.svelte-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.svelte-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.svelte-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.svelte-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.svelte-flow__node.selectable {
    cursor: pointer;
  }
.svelte-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.svelte-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.svelte-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.svelte-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.svelte-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.svelte-flow__handle.connectingfrom {
    pointer-events: all;
  }
.svelte-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.svelte-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.svelte-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.svelte-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.svelte-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.svelte-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.svelte-flow__pane.selection .svelte-flow__panel {
  pointer-events: none;
}
.svelte-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.svelte-flow__panel.top {
    top: 0;
  }
.svelte-flow__panel.bottom {
    bottom: 0;
  }
.svelte-flow__panel.top.center, .svelte-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.svelte-flow__panel.left {
    left: 0;
  }
.svelte-flow__panel.right {
    right: 0;
  }
.svelte-flow__panel.left.center, .svelte-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.svelte-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.svelte-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.svelte-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.svelte-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.svelte-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.svelte-flow__minimap-svg {
    display: block;
  }
.svelte-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.svelte-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.svelte-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.svelte-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.svelte-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.svelte-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.svelte-flow__controls.horizontal {
    flex-direction: row;
  }
.svelte-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.svelte-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.svelte-flow__edge.updating .svelte-flow__edge-path {
      stroke: #777;
    }
.svelte-flow__edge-text {
    font-size: 10px;
  }
.svelte-flow__node.selectable:focus,
  .svelte-flow__node.selectable:focus-visible {
    outline: none;
  }
.svelte-flow__node-input,
.svelte-flow__node-default,
.svelte-flow__node-output,
.svelte-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.svelte-flow__node-input.selectable:hover, .svelte-flow__node-default.selectable:hover, .svelte-flow__node-output.selectable:hover, .svelte-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.svelte-flow__node-input.selectable.selected,
    .svelte-flow__node-input.selectable:focus,
    .svelte-flow__node-input.selectable:focus-visible,
    .svelte-flow__node-default.selectable.selected,
    .svelte-flow__node-default.selectable:focus,
    .svelte-flow__node-default.selectable:focus-visible,
    .svelte-flow__node-output.selectable.selected,
    .svelte-flow__node-output.selectable:focus,
    .svelte-flow__node-output.selectable:focus-visible,
    .svelte-flow__node-group.selectable.selected,
    .svelte-flow__node-group.selectable:focus,
    .svelte-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.svelte-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.svelte-flow__nodesselection-rect,
.svelte-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.svelte-flow__nodesselection-rect:focus,
  .svelte-flow__nodesselection-rect:focus-visible,
  .svelte-flow__selection:focus,
  .svelte-flow__selection:focus-visible {
    outline: none;
  }
.svelte-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.svelte-flow__controls-button:disabled {
      pointer-events: none;
    }
.svelte-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.svelte-flow__controls-button:last-child {
    border-bottom: none;
  }
.svelte-flow__controls.horizontal .svelte-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.svelte-flow__controls.horizontal .svelte-flow__controls-button:last-child {
    border-right: none;
  }
.svelte-flow__resize-control {
  position: absolute;
}
.svelte-flow__resize-control.left,
.svelte-flow__resize-control.right {
  cursor: ew-resize;
}
.svelte-flow__resize-control.top,
.svelte-flow__resize-control.bottom {
  cursor: ns-resize;
}
.svelte-flow__resize-control.top.left,
.svelte-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.svelte-flow__resize-control.bottom.left,
.svelte-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.svelte-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.svelte-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.svelte-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.svelte-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.svelte-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.svelte-flow__resize-control.handle.top.left {
  left: 0;
}
.svelte-flow__resize-control.handle.bottom.left {
  left: 0;
}
.svelte-flow__resize-control.handle.top.right {
  left: 100%;
}
.svelte-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.svelte-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.svelte-flow__resize-control.line.left,
.svelte-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.svelte-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.svelte-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.svelte-flow__resize-control.line.top,
.svelte-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.svelte-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.svelte-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.svelte-flow__edge-label {
  text-align: center;
  position: absolute;
  padding: 2px;
  font-size: 10px;
  color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
  background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.svelte-flow__container {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *


 */

/* SVG icon defaults — defined in tailwind/application.css, do not duplicate */

/* ═══════════════════════════════════════════════════════════════
   Blog / Article Content Styling
   Applied via .blog-content on the article wrapper.
   Styles all standard HTML elements for rich content rendering.
   Works for current and all future blog posts.
   ═══════════════════════════════════════════════════════════════ */
.blog-content {
  color: var(--color-primary-500);
  font-size: 1.125rem;
  line-height: 1.8;
}

.blog-content > *:first-child {
  margin-top: 0;
}

.blog-content p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

.blog-content h2 {
  color: var(--color-brand-black);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  letter-spacing: -0.01em;
}

.blog-content h3 {
  color: var(--color-brand-black);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.blog-content h4 {
  color: var(--color-brand-black);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.blog-content a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.blog-content a:hover {
  color: var(--color-primary-400);
}

.blog-content strong,
.blog-content b {
  color: var(--color-brand-black);
  font-weight: 600;
}

.blog-content em,
.blog-content i {
  font-style: italic;
}

.blog-content ul {
  list-style-type: disc;
  padding-left: 1.75em;
  margin-top: 0;
  margin-bottom: 1.5em;
}

.blog-content ol {
  list-style-type: decimal;
  padding-left: 1.75em;
  margin-top: 0;
  margin-bottom: 1.5em;
}

.blog-content li {
  margin-bottom: 0.5em;
  padding-left: 0.25em;
}

.blog-content li::marker {
  color: var(--color-mist-600);
}

.blog-content blockquote {
  border-left: 4px solid var(--color-mist-300);
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: var(--color-mist-50);
  border-radius: 0 4px 4px 0;
  color: var(--color-mist-600);
  font-style: italic;
}

.blog-content code {
  background: var(--color-mist-100);
  color: var(--color-primary-500);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: var(--font-mono);
}

.blog-content pre {
  background: var(--color-brand-black);
  color: var(--color-mist-100);
  padding: 1.25em 1.5em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.875em;
  line-height: 1.7;
}
.blog-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.blog-content hr {
  border: none;
  border-top: 1px solid var(--color-mist-200);
  margin: 2.5em 0;
}

.blog-content img {
  border-radius: 4px;
  margin: 2em 0;
  max-width: 100%;
  height: auto;
}

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.blog-content th {
  background: var(--color-mist-50);
  color: var(--color-brand-black);
  font-weight: 600;
  text-align: left;
  padding: 0.75em 1em;
  border-bottom: 2px solid var(--color-mist-200);
}
.blog-content td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-mist-100);
}