/* First-run onboarding — the console's zero state.
   Uses console.css's theme tokens throughout, so it follows the light/dark
   toggle and inherits the type scale. Nothing here is themed on its own. */

#onboarding { min-height: 100vh; display: flex; flex-direction: column; }

/* Progress rail — one segment per step after the welcome. */
.ob-rail { display: flex; gap: 6px; padding: 0 24px; max-width: 1180px; margin: 18px auto 0; width: 100%; }
.ob-rail-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.ob-rail-seg > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s ease; }
.ob-rail-seg.done > i { width: 100%; }
.ob-rail-seg.now > i { width: 100%; opacity: .5; }
.ob-rail[hidden] { display: none; }

.ob-stage { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 24px 72px; }
.ob-step { display: none; }
.ob-step.on { display: block; animation: ob-in .45s ease both; }
@keyframes ob-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ob-eyebrow {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.ob-h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; margin: 0 0 20px; }
.ob-h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; margin: 0 0 12px; }
.ob-dot { color: var(--accent); }
.ob-lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0 0 28px; }
.ob-lede strong { color: var(--fg); font-weight: 500; }
.ob-sub { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 0 0 24px; }

.ob-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
button.ob-link { background: none; color: var(--muted); padding: 10px 2px; text-decoration: underline; text-underline-offset: 3px; }
button.ob-link:hover { color: var(--fg); }

/* Welcome value props */
.ob-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.ob-prop {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); padding: 20px;
}
.ob-prop-ico {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px;
  border-radius: var(--radius-sm); background: var(--card-bg-2); border: 1px solid var(--border);
}
.ob-prop-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ob-prop b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ob-prop span.t { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Step 1 — recommendation note */
.ob-rec {
  display: flex; gap: 13px; align-items: flex-start; margin: 0 0 24px; padding: 15px 17px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--card-bg);
  font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 88ch;
}
.ob-rec b { color: var(--fg); font-weight: 600; }
.ob-rec-mark {
  flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fff;
  display: grid; place-items: center; border: 1px solid var(--border-2);
}
.ob-rec-mark img { width: 15px; height: 15px; }
.ob-rec-mark svg { width: 15px; height: 15px; fill: none; stroke: #202020; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The note variant, under the grid: same block, so a picked provider's caveat
   reads as the next sentence of the same conversation. Deliberately NOT a
   warning colour — the login persists, only the frequency of the re-checks
   differs, and an alarm here would say the opposite. */
.ob-rec.note { margin-top: -12px; }
.ob-rec.note .ob-rec-mark {
  background: var(--card-bg-2); border-color: var(--border-2);
}
.ob-rec.note .ob-rec-mark svg { stroke: var(--muted); }

/* Step 1 — site tiles */
.ob-sites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.ob-site {
  position: relative; text-align: left; display: flex; align-items: center; gap: 11px;
  padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); color: var(--fg); font-size: 14px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.ob-site:hover { border-color: var(--border-2); background: var(--card-bg-2); }
.ob-site.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ob-site-mark {
  flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff;
  display: grid; place-items: center; border: 1px solid var(--border-2);
}
.ob-site-mark img { width: 17px; height: 17px; }
.ob-site-mark.plus { background: var(--card-bg-2); color: var(--muted); font-size: 15px; }
.ob-site-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-site-host { font-size: 11px; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-site-check { margin-left: auto; flex: none; color: var(--accent); font-size: 13px; opacity: 0; }
.ob-site.on .ob-site-check { opacity: 1; }

.ob-add { display: flex; gap: 10px; margin-bottom: 24px; max-width: 560px; }
.ob-add input { flex: 1; }

/* Step 1 — summary bar (name + egress) */
.ob-summary {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg);
}
.ob-flabel { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ob-summary input { width: 100%; }
.ob-hint { font-size: 12px; color: var(--muted-2); margin-top: 7px; line-height: 1.5; }

.ob-egress { position: relative; }
.ob-egress-btn {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  background: var(--input-bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px;
}
.ob-egress-btn::after { content: "⌄"; margin-left: auto; color: var(--muted); }
.ob-egress-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden;
}
.ob-egress-opt { display: block; width: 100%; text-align: left; background: none; padding: 11px 13px; font-size: 13.5px; }
.ob-egress-opt:hover { background: var(--card-bg-2); }
.ob-egress-opt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.ob-flag { font-size: 15px; }

/* Step 2 — boot */
.ob-boot { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: start; margin-top: 8px; }
.ob-bootlog {
  font-family: var(--mono); font-size: 12.5px; line-height: 2.1;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); padding: 18px 20px;
}
.ob-bootlog div { color: var(--muted-2); opacity: 0; transition: opacity .3s; }
.ob-bootlog div.on { opacity: 1; color: var(--muted); }
.ob-bootlog div.ok { color: var(--fg); }
.ob-bootlog div.ok::before { content: "✓ "; color: var(--ok); }
.ob-bootlog div.run::before { content: "› "; color: var(--accent); }

/* Live browser chrome (steps 2 & 3) */
.ob-browser { border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.ob-bbar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--card-bg); }
.ob-bdot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); flex: none; }
.ob-url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0 6px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 99px;
  padding: 4px 12px; font-size: 11.5px; font-family: var(--mono); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob-livebadge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ok); font-weight: 600; }
.ob-livebadge i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: ob-pulse 1.6s infinite; }
@keyframes ob-pulse { 50% { opacity: .3; } }
.ob-screen { position: relative; aspect-ratio: 16 / 10; background: var(--bg); }
.ob-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ob-skel { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ob-skel i { display: block; height: 11px; border-radius: 6px; background: var(--card-bg-2); animation: ob-sheen 1.8s infinite; }
@keyframes ob-sheen { 50% { opacity: .45; } }

/* Step 3 — live sign-in */
.ob-live { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
.ob-head3 { display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.ob-coachcol { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.ob-coachfoot { flex: none; }
.ob-coachfoot .ob-hint { margin-top: 12px; }
.ob-coach { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); padding: 19px; }
.ob-coach h4 { margin: 0 0 9px; font-size: 15px; font-weight: 600; }
.ob-coach p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ob-keyline {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 15px; padding-top: 15px;
  border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.ob-keyline svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; }
.ob-todo { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ob-todo-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ob-todo-row .ob-site-mark { width: 24px; height: 24px; border-radius: 6px; }
.ob-todo-row .ob-site-mark img { width: 13px; height: 13px; }

/* Step 3 fills the window — and that is not cosmetic. embed.html runs noVNC
   with scaleViewport=false + resizeSession=true, so the remote X display is
   resized to exactly the pixels this iframe gets: a small box means a small
   desktop, a cramped sign-in form, and scrolling inside a cross-origin iframe
   the user cannot reach. So on this step only, the stage drops its 1180px cap,
   the page itself never scrolls, and the screen takes every pixel left over
   after the header, the rail and the coach column.
   Guarded on a viewport with room to spend — but the guard is deliberately low
   (a 560px-tall window still leaves the screen ~300px, and not scrolling beats
   a slightly taller box you have to scroll to). Below it the step falls back to
   the ordinary flow layout (fixed aspect ratio, page scrolls). */
@media (min-width: 940px) and (min-height: 560px) {
  #onboarding[data-step="3"] { height: 100dvh; min-height: 0; overflow: hidden; }
  #onboarding[data-step="3"] .ob-stage {
    max-width: min(1720px, 100%); padding: 18px 24px 24px;
    display: flex; flex-direction: column; min-height: 0;
  }
  #onboarding[data-step="3"] .ob-step.on {
    flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none;
  }
  #onboarding[data-step="3"] .ob-h2 { font-size: 26px; margin: 0; }
  #onboarding[data-step="3"] .ob-eyebrow { margin: 0 0 6px; }
  #onboarding[data-step="3"] .ob-sub { font-size: 13.5px; margin: 0; max-width: 58ch; }
  #onboarding[data-step="3"] .ob-head3 { flex: none; margin-bottom: 16px; }
  #onboarding[data-step="3"] .ob-live {
    flex: 1; min-height: 0; gap: 22px; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px);
  }
  #onboarding[data-step="3"] .ob-browser { display: flex; flex-direction: column; min-height: 0; }
  #onboarding[data-step="3"] .ob-screen { flex: 1; min-height: 0; aspect-ratio: auto; }
  /* Only the coach copy scrolls, and only if it has to — never the page. */
  #onboarding[data-step="3"] .ob-coach { min-height: 0; overflow: auto; }
}

/* Step 4 — the release contract */
.ob-save { display: grid; grid-template-columns: auto auto 1fr; gap: 22px; align-items: center; margin: 4px 0 26px; }
.ob-mini { width: 190px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card-bg); transition: opacity .6s, transform .6s; }
.ob-mini.gone { opacity: .25; transform: scale(.95); }
.ob-mini-bar { display: flex; gap: 5px; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.ob-mini-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); }
.ob-mini-body { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.ob-mini-body i { display: block; height: 8px; border-radius: 4px; background: var(--card-bg-2); }
.ob-arrow { text-align: center; color: var(--muted); }
.ob-arrow span { display: block; font-size: 22px; color: var(--accent); }
.ob-arrow small { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.ob-vault { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--card-bg); padding: 18px; }
.ob-vault-top { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; }
.ob-vault-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--card-bg-2); border: 1px solid var(--border); }
.ob-vault-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--ok); stroke-width: 1.7; stroke-linecap: round; }
.ob-vault-top b { display: block; font-size: 15px; }
.ob-vault-top span span { font-size: 12.5px; color: var(--muted); }
.ob-rule {
  border-left: 2px solid var(--accent); padding: 3px 0 3px 16px; margin: 0 0 8px;
  font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 84ch;
}
.ob-rule b { color: var(--fg); font-weight: 600; }
.ob-sitelist { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.ob-siterow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ob-siterow:last-child { border-bottom: 0; }
.ob-sitehost { font-family: var(--mono); font-size: 12.5px; }
.ob-siterow .badges { margin: 0 0 0 auto; }

/* Step 5 — payoff */
.ob-connect { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--card-bg); padding: 24px; margin-bottom: 18px; }
.ob-connect h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.ob-connect > p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 78ch; }
.ob-clients { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ob-client {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px;
  border: 1px solid var(--border); border-radius: 99px; background: var(--card-bg-2);
  font-size: 13.5px; font-weight: 500;
}
.ob-client.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ob-cl-mark { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #fff; display: grid; place-items: center; border: 1px solid var(--border-2); }
.ob-cl-mark img { width: 14px; height: 14px; }
.ob-cl-mark.plus { background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; border-color: transparent; }
/* Not a brand mark and not a selected state — just a glyph. */
.ob-cl-mark.glyph { background: var(--card-bg-2); color: var(--muted); font-size: 13px; border-color: var(--border-2); }
.ob-how { font-size: 13px; line-height: 1.65; color: var(--muted); padding: 15px 17px; border: 1px dashed var(--border-2); border-radius: var(--radius-sm); margin-bottom: 18px; }
.ob-how b { color: var(--fg); }
.ob-how ol { margin: 8px 0 0; padding-left: 20px; }
.ob-how li { margin-bottom: 5px; }
.ob-connect-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ob-snippet {
  display: flex; align-items: center; gap: 10px; background: var(--input-bg);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 8px 8px 14px;
  font-family: var(--mono); font-size: 12.5px; flex: 1; min-width: 260px;
}
.ob-snippet span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-snippet button { margin-left: auto; flex: none; }
.ob-ready { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); padding: 22px 24px; }
.ob-ready h3 { margin: 0 0 7px; font-size: 17px; font-weight: 600; }
.ob-ready p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 68ch; }

.ob-err { color: var(--accent); font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; }

@media (max-width: 900px) {
  .ob-props, .ob-sites { grid-template-columns: repeat(2, 1fr); }
  .ob-boot, .ob-live, .ob-summary { grid-template-columns: 1fr; }
  .ob-save { grid-template-columns: 1fr; }
  .ob-arrow { display: none; }
  .ob-ready { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ob-props, .ob-sites { grid-template-columns: 1fr; }
  .ob-stage { padding: 28px 16px 56px; }
  .ob-rail { padding: 0 16px; }
}