/* Pyre.Stream Get live: the Home card and the wizard that opens itself (support
   and onboarding plan 2026-10-29, Task 4.1). Tokens only: no raw colour, no px.
   The card sits in #sec-home; the wizard is a body-level overlay, so every rule
   here is keyed on its own gl- prefix rather than the Home section. */

/* ── the steps (card rows and wizard pages share them) ── */
.gl-card .card-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.gl-card .home-sub { flex-basis: 100%; }
.gl-prog { display: block; width: 100%; height: var(--space-1); margin: 0 0 var(--space-3); border: 0; border-radius: var(--r-pill); background: var(--surface-inset); overflow: hidden; appearance: none; -webkit-appearance: none; }
.gl-prog::-webkit-progress-bar { background: var(--surface-inset); border-radius: var(--r-pill); }
.gl-prog::-webkit-progress-value { background: var(--ok); border-radius: var(--r-pill); }
.gl-prog::-moz-progress-bar { background: var(--ok); border-radius: var(--r-pill); }
.gl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.gl-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-2); border-top: thin solid var(--border); min-width: 0; }
.gl-step:first-child { border-top: 0; }
.gl-step--now { background: var(--accent-wash); border-radius: var(--r-md); }
.gl-step__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; }
.gl-step__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.gl-step--done .gl-step__title { color: var(--text-dim); }
.gl-step__act { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.gl-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: thin solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; color: var(--text-faint); flex: none; }
.gl-num--done { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.gl-num--now { color: var(--on-strong); background: var(--accent); border-color: var(--accent); }
.gl-how { margin: 0; color: var(--text-dim); font-size: var(--fs-small); max-width: 60ch; }
.gl-note { margin: 0; color: var(--text-dim); font-size: var(--fs-small); }
.gl-err { margin: 0; color: var(--danger); font-size: var(--fs-small); }
.gl-wait { margin: 0; color: var(--warn); font-size: var(--fs-small); font-weight: 600; }
.gl-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gl-acts .btn, .gl-step__act .btn, .gl-wiz__foot .btn { min-height: var(--touch-min); display: inline-flex; align-items: center; text-decoration: none; }
.gl-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-2); }
.gl-choice { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; font: inherit; font-size: var(--fs-small); color: var(--text-dim); padding: var(--space-2) var(--space-3); border: thin solid var(--border); border-radius: var(--r-sm); background: var(--surface-inset); cursor: pointer; min-width: 0; }
.gl-choice b { color: var(--text); font-size: var(--fs-body); }
.gl-choice:hover { border-color: var(--border-strong); }
.gl-choice--on { border-color: var(--border-accent); background: var(--accent-wash); }
.gl-choice:focus-visible, .gl-linkbtn:focus-visible, .gl-x:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.125rem; }
.gl-keys { display: flex; flex-direction: column; gap: var(--space-2); }
.gl-key { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.gl-key__label { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; min-width: 5.5rem; }
.gl-kbd { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--surface-inset); border: thin solid var(--border); border-radius: var(--r-sm); padding: var(--space-1) var(--space-2); overflow-wrap: anywhere; user-select: all; min-width: 0; flex: 1 1 12rem; }
.gl-foot { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: thin solid var(--border); color: var(--text-faint); font-size: var(--fs-small); }
.gl-linkbtn { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ── the wizard ── */
.gl-clip { position: fixed; top: 0; left: 0; width: 0.0625rem; height: 0.0625rem; opacity: 0; pointer-events: none; }
.gl-overlay { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: var(--space-4); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.gl-wiz { width: min(34rem, 100%); max-height: calc(100vh - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto; background: var(--surface); border: thin solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; }
.gl-wiz:focus { outline: none; }
.gl-wiz__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: thin solid var(--border); }
.gl-wiz__title { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.gl-pill { display: inline-flex; align-items: center; border: thin solid var(--border-accent); border-radius: var(--r-pill); padding: 0 var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; color: var(--accent); background: var(--accent-wash); }
.gl-sp { flex: 1 1 auto; }
.gl-x { font: inherit; font-size: var(--fs-title); line-height: 1; color: var(--text-dim); background: none; border: thin solid var(--border); border-radius: var(--r-sm); min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; }
.gl-dots { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; }
.gl-dot { height: var(--space-1); flex: 1; border-radius: var(--r-pill); background: var(--surface-inset); }
.gl-dot--done { background: var(--ok); }
.gl-dot--now { background: var(--accent); }
.gl-wiz__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gl-wiz__step { margin: 0; font-size: var(--fs-title); }
.gl-wiz__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: thin solid var(--border); }
.gl-off { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-faint); min-height: var(--touch-min); }

@media (max-width: 40em) {
  .gl-step { grid-template-columns: auto minmax(0, 1fr); }
  .gl-step__act { grid-column: 2; justify-content: flex-start; }
  .gl-overlay { align-items: flex-end; padding: var(--space-2); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
  .gl-wiz__foot .gl-sp { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .gl-choice { transition: border-color .15s ease, background-color .15s ease; }
}