/* ldu/pages-entry.css: the entry pages in the LDU look (slice 8). Sign-in, sign-up and the password pages (the landing's
   form column), verify-email, the six-digit code pages (connect a terminal, link expired), the invite page, onboarding and
   and its stepper.

   main's own markup, restyled: every rule keys on a class the views already carry (.signin, .otp__code, .invite-steps,
   .ob, .ob2, .landing__*). Nothing is removed or renamed; the visual order is the DOM order. Source:
   ui-cleanup/milan's ldu/entry.css. Colours are var() of fraction-ds tokens; hover moves colour, a border step or a wash in
   150ms and never lifts or casts a shadow. --s3, --s5 and --s6 are held back in ldu/tokens.css, so 12, 24 and 32px are px. */

/* ── the narrow card: verify-email, connect a terminal ─────────────────────────────────────────── */
.main--pad > .card.signin { max-width: 480px; margin: 24px auto 0; padding: 24px; gap: 16px; }
.signin__form { gap: 16px; }
.signin__form .btn { margin-top: 0; }
.signin .pairing__hint, .signin .expert__blurb { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }
.signin .expert__blurb a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur); }
.signin .expert__blurb a:hover { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); }
.signin > p:has(> .btn) { margin: 0; }

/* the six digits: the thing the person came for, so the biggest thing on the page */
.signin .otp__code {
  margin: 0; padding: 24px 16px 24px calc(16px + 0.16em);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ldu-recess);
  text-align: center; font-size: clamp(2rem, 10vw, 2.875rem); font-weight: 600; line-height: 1.1;
  letter-spacing: 0.16em; font-variant-numeric: tabular-nums; user-select: all;
}
.signin [data-testid="email-code"] { height: 56px; text-align: center; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.3em; text-indent: 0.3em; }
.signin [data-testid="email-code"]::placeholder { letter-spacing: 0.3em; font-weight: 400; }

/* fields and buttons on these pages are the DS .input / .btn (ldu/components.css), 44px under 720px there too */

/* ── the landing's form column ─────────────────────────────────────────────────────────────────── */
.landing__form { background: var(--bg-2); }
.landing__card .landing__heading { font-size: var(--fs-h1); }
.landing__card .landing__hint { margin: 4px 0 24px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.landing__card .signin__form { gap: 12px; }
.landing__card .signin__form .btn { margin-top: 4px; }
.landing__links { margin: 16px 0 0; font-size: var(--fs-ui); color: var(--ink-2); }
.landing__links a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur), text-decoration-thickness var(--dur); }
.landing__links a:hover { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); text-decoration-thickness: 2px; }

/* the For businesses / For experts switch (and The problem / Our solution): the DS .ldu-seg, its two segments sharing the width */
.landing__switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 48px; }
.landing__switch--panel { margin-bottom: 0; }

/* ── the invite: numbered steps, the prompt in a recess ────────────────────────────────────────── */
.invite-page { max-width: 640px; margin-inline: auto; }
.invite-steps { list-style: none; counter-reset: step; padding: 0; gap: 24px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.invite-steps > li { counter-increment: step; position: relative; min-width: 0; padding-left: 44px; }
.invite-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--ldu-wash); color: var(--ink-2); font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums;
}
.invite-steps strong { font-weight: 600; color: var(--ink); }
.invite-steps .connect-cmd { box-sizing: border-box; width: 100%; max-height: none; margin: 12px 0; padding: 12px 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ldu-recess); font-size: var(--fs-meta); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.invite-page > .pairing__hint { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }

/* ── onboarding: welcome (two role cards) ──────────────────────────────────────────────────────── */
.ob { gap: 12px; }
.ob__ask { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; text-align: left; }
.ob__cards { gap: 16px; }
.ob__card { gap: 16px; min-height: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--ldu-r-xl, 14px); background: var(--bg-2); transition: color var(--dur), background-color var(--dur), border-color var(--dur); }
.ob__card:hover { transform: none; border-color: var(--ink-4); background: var(--ldu-raise, var(--bg-2)); }
.ob__card:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.ob__icon { width: 48px; height: 48px; background: var(--ldu-wash); color: var(--ink-2); transition: color var(--dur), background-color var(--dur); }
.ob__card:hover .ob__icon { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.ob__card strong { font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.ob__card > span:not(.ob__icon):not(.tag) { color: var(--ink-2); }
.ob__skip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; color: var(--ink-2); }
.ob__skip a { color: var(--accent); text-underline-offset: 3px; }
.ob__skip .pairing__hint { font-size: var(--fs-ui); color: var(--ink-2); }

/* ── onboarding: the stepper. Steps are rows like the rail's; the panel is a card ──────────────── */
.ob2 { grid-template-columns: 264px minmax(0, 1fr); gap: 24px; max-width: none; margin: 0; }
.ob2__steps { gap: 2px; }
.ob2__step { padding: 8px 12px; border: 0; background: transparent; color: var(--ink-2); transition: color var(--dur), background-color var(--dur); }
.ob2__step:hover { background: var(--ldu-wash); color: var(--ink); }
.ob2__step:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.ob2__step strong { font-weight: 500; color: inherit; }
.ob2__step small { line-height: 1.4; }
.ob2__n { border-color: var(--line); background: var(--bg-2); color: var(--ink-2); font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--dur), background-color var(--dur), border-color var(--dur); }
.ob2__step--on { background: var(--accent-soft); color: var(--ink); border: 0; /* ds-lint: allow, the current step of the stepper, like the rail's current item */ }
.ob2__step--on:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ob2__step--on strong { font-weight: 600; color: var(--ink); }
/* a done step shows a green tick in place of its number; it can still be opened again */
.ob2__tick { display: none; }
.ob2__step--done .ob2__n { background: var(--ok); border-color: transparent; color: var(--bg); }
.ob2__step--done .ob2__num { display: none; }
.ob2__step--done .ob2__tick { display: block; }
.ob2 .ob2__panel { padding: 24px; gap: 16px; border-color: var(--line); border-radius: var(--ldu-r-xl, 14px); }
.ob2__count { font-weight: 500; letter-spacing: 0.04em; }
.ob2__body { gap: 16px; }
.ob2__body h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.ob2__fine { color: var(--ink-2); }
.ob2__field { gap: 6px; }
.ob2__field > span { font-weight: 500; color: var(--ink); }
.ob2__short { max-width: 12.5rem; }
.ob2__box { gap: 4px; padding: 12px 16px; border-color: var(--line); background: var(--ldu-recess); }
.ob2__box--row { gap: 12px; }
.ob2__box small { color: var(--ink-2); }
.ob2__box code { margin: 4px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 6px); background: var(--bg-2); }
.ob2__service { gap: 12px; padding: 16px; border-color: var(--line); background: var(--bg); }
.ob2__check { gap: 12px; font-size: var(--fs-body); }
.ob2__check input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.ob2__nav { align-items: center; padding-top: 16px; border-top-color: var(--line); }
.conf { display: grid; gap: 6px; margin: 0 0 var(--s4, 16px); }
.conf__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3, 12px); }
.conf__num { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; }
.conf__line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-3); }
.conf__hint { margin: 0; }
.ob2__nav .btn.is-locked, .ob2__nav .btn[aria-disabled="true"] { cursor: not-allowed; }

/* ── the "finish setting up" popup ─────────────────────────────────────────────────────────────── */

/* ── under 720px: 44px controls, one column, the stepper's steps as a strip of numbers ──────────── */
@media (max-width: 720px) {
  .ob2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ob2__steps { flex-direction: row; gap: 4px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
  .ob2__steps > li { flex: none; }
  .ob2__step { width: auto; padding: 4px; }
  .ob2__step > span:not(.ob2__n) { display: none; }
  .ob2 .ob2__panel { padding: 16px; }
  .ob2__nav { flex-wrap: wrap; }
  .ob2__nav .btn { flex: 1 1 auto; }
  .ob2__step--on { background: transparent; }
  .ob2__box--row { flex-wrap: wrap; }
  .ob2__box--row > .btn { flex: 1 0 100%; }
}

.signin__remember { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--ink-2); cursor: pointer; }
.signin__remember label { cursor: pointer; }

/* ── onboarding, full page (layouts/onboarding): no app nav or sidebar; a slim bar with the brand, the theme switch and Skip for now ── */
.obpage { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-2); }
.obpage__bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--bg); } /* fixed at the top while the page scrolls (Sam) */
.obpage__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.obpage__brand .brand__logo { width: 28px; height: 28px; }
.obpage__brand .brand__name { font-weight: 600; font-size: var(--fs-ui); }
.obpage__tools { display: inline-flex; align-items: center; gap: 8px; }
.obpage__skip { margin: 0; }
.obpage__main { flex: 1 1 auto; width: min(1040px, 100%); margin: 0 auto; padding: 32px 24px 48px; }
@media (max-width: 640px) { .obpage__bar { padding: 10px 16px; } .obpage__main { padding: 24px 16px 32px; } }
/* expert onboarding: work history rows (role, company, from, to) and the one instruction for the AI */
.ob2__roles { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.ob2__roles legend { margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.ob2__roles legend small { color: var(--ink-3); font-weight: 400; }
.ob2__role { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 88px 88px; gap: 8px; }
@media (max-width: 640px) { .ob2__role { grid-template-columns: 1fr 1fr; } }
.ob2__box--prompt code { white-space: normal; line-height: 1.5; }
/* expert onboarding: the two square cards first (with AI / manually) */
.ob__cards--square { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.ob__card--square { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.ob__card--square > span:not(.ob__icon):not(.ob__badge) { max-width: 30ch; min-height: 4.5em; }   /* the same text block height on both cards, so the titles line up */
.ob__card--square .ob__badge { position: absolute; top: 12px; right: 12px; }
@media (max-width: 640px) { .ob__cards--square { grid-template-columns: 1fr; } .ob__card--square { aspect-ratio: auto; } }
/* Fill in with AI wizard (on the onboarding stepper): the waiting / done line under a step, and AI chat in the last step */
.obai__state .obai__ok { display: none; color: var(--ok); }
.ob2__body.is-done .obai__state .obai__ok { display: inline; }
.ob2__body.is-done .obai__state .obai__wait { display: none; }
.ob2__box code { overflow-wrap: anywhere; min-width: 0; }
.obai__chat .aichat { height: 420px; border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; }
/* My Profile > Edit profile (expert_profile_edits/edit) */
.pfedit { display: grid; gap: 14px; max-width: 760px; padding: 24px; }
.pfedit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .pfedit__grid { grid-template-columns: 1fr; } }
.obai__cv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.obai__cvpick { cursor: pointer; }
.obai__cvname { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }

/* Manual expert form: OfferingGuide's nudge under a service name, with narrower kinds to pick */
.ob2__hint { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); color: var(--ink); font-size: var(--fs-ui); line-height: 1.5; }
.ob2__hint[hidden] { display: none; }
.ob2__hint p { margin: 0; }
.ob2__choices { display: flex; flex-wrap: wrap; gap: 6px; }

/* The voice onboarding (components/voice_orb): the orb fills the page, the AI's words under it, the controls at the bottom. */
.vorbpage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: calc(100dvh - 64px); padding: 16px; }
.vorb { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 720px; }
.vorb__stage { display: grid; place-items: center; width: 100%; }   /* the grid fills the width; its rows set the height */
.vorb__words { display: grid; gap: 10px; max-width: 40rem; margin: 12px 0 20px; text-align: center; }   /* room round the AI's words (Sam) */
.vorb__status { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); }
.vorb__line { margin: 0; color: var(--ink); font-size: 1.25rem; line-height: 1.45; }
.vorb__heard { margin: 0; color: var(--ink-2); font-style: italic; }
.vorb__note { margin: 0; }
.vorb__controls { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.vorb__type { display: flex; gap: 8px; width: min(100%, 36rem); }
.vorb__type .input { flex: 1; }
/* Speak: on while listening (accent, a slow pulse so the person can see the page hears them) */
.vorb__mic { flex: none; }
.vorb__mic--on { background: var(--accent); border-color: var(--accent); color: var(--bg); animation: vorb-mic 1.6s ease-in-out infinite; }
@keyframes vorb-mic { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .vorb__mic--on { animation: none; } }
.voicekey { display: grid; gap: 10px; }
.voicekey__form { display: grid; gap: 8px; }
.voicekey__state { display: flex; align-items: center; gap: 6px; margin: 0; }
.voicekey__part { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.voicekey__title { margin: 0; font-size: var(--fs-body); }
.vorb__links { display: flex; gap: 8px; }
.vorb__scrim { position: fixed; }
.vorb__backdrop { position: absolute; inset: 0; border: 0; background: transparent; cursor: default; }
.drawer.vorb__draft { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(560px, 100vw); overflow: hidden; }
/* the title and Confirm stay put; only the cards scroll between them, so Confirm is always in view (Sam) */
.vorb__draft .drawer__head, .vorb__draft .vorb__confirm { flex: none; }
.vorb__rows { display: grid; align-content: start; gap: 10px; flex: 1 1 auto; min-height: 0; margin: 0 -6px; padding: 0 6px; overflow-y: auto; }
/* one card per detail: its label and Revisit on top, the value under it */
.vorb__row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--ldu-r-lg, 12px); background: var(--bg); font-size: var(--fs-ui); }
.vorb__row dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: var(--fs-meta); letter-spacing: .02em; }
.vorb__row dd { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.vorb__redo { padding-inline: 8px; }
.vorbpage__fine { max-width: 40rem; margin: 0; text-align: center; }
.obai__voice { margin: 0; }

/* the voice page's connect state, until the AI is in; Alpine shows what fits once it starts (x-cloak hides it before) */
[x-cloak] { display: none !important; }
.vorb__connect { display: grid; gap: 12px; width: min(100%, 36rem); padding: 20px 24px; }
.vorb__connect h2 { margin: 0; font-size: var(--fs-body); }
.vorb__steps { display: grid; gap: 12px; margin: 0; padding-left: 1.25rem; }
.vorb__steps li { display: grid; gap: 6px; }
.vorb__wait { margin: 0; }

/* above the orb: the confidence bar and Finish, in one thin row */
/* fixed to the bottom, full width, its content kept to the page's column; the page leaves room for it (Sam) */
.vorb__progress { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0;
  padding: 14px max(24px, calc((100% - 720px) / 2)); border-top: 1px solid var(--line); background: var(--bg); }
.vorbpage { padding-bottom: 140px; }
.vorb__progress .conf { flex: 1 1 20rem; }
.vorb__voicebar { display: flex; align-items: center; gap: 12px; }
.vorb__voice { display: flex; align-items: center; gap: 8px; }

/* The dot-matrix visualizer (grid_visualizer.js, after LiveKit Agents UI's Grid): dim dots in our purple, lit ones full strength with a soft glow;
   the Fraction mark's shaded edge cells at their own level (--level). */
.gridviz { display: grid; gap: 9px; color: var(--accent); }
.gridviz__cell { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.12; place-self: center; transition-property: opacity, box-shadow; transition-timing-function: ease-out; }
.gridviz__cell.is-on { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, currentColor 70%, transparent); }
.gridviz__cell.is-half { opacity: calc(0.12 + 0.88 * var(--level, 0.5)); }
/* at rest the mark is quiet: just a few steps brighter than the grid, no glow (Sam) */
/* at rest the mark is a darker grey than the grid, its edge cells shaded lighter so the dots read round, no glow (Sam) */
.gridviz[data-state="idle"] .gridviz__cell.is-on { background: black; opacity: 0.38; box-shadow: none; }
.gridviz[data-state="idle"] .gridviz__cell.is-half { background: black; opacity: calc(0.38 * var(--level, 0.5)); }
@media (max-width: 640px) { .gridviz { gap: 6px; } .gridviz__cell { width: 6px; height: 6px; } }

/* Profile capture: lit once everything is collected, with a slow pulse so the eye finds it while the AI says so */
.vorb__capture--ready { animation: vorb-capture 1.8s ease-in-out infinite; }
@keyframes vorb-capture { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .vorb__capture--ready { animation: none; } }
.vorb__confirm { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.vorb__confirm p { margin: 0; }

/* the onboarding header's middle: the current step (onboardings/_voice_step); the voice controls sit in its tools */
.obpage__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.obpage__tools { justify-self: end; }
.obpage__step { margin: 0; color: var(--ink); font-size: var(--fs-ui); font-weight: 500; text-align: center; }
@media (max-width: 640px) { .obpage__bar { grid-template-columns: auto 1fr auto; } .obpage__step { font-size: var(--fs-meta); } }
.vorb__voice select { padding-right: 14px; }   /* room between the arrow and the edge (Sam) */
/* Profile capture: the confidence summary on top, gap cards (what the meter still counts) dashed, with Add */
.vorb__row[data-state="summary"] { background: var(--bg-2); }
.vorb__conf { display: grid; gap: 6px; margin: 0; }
.vorb__conf .conf__head { display: flex; justify-content: flex-end; }
/* anything not filled in yet (a detail still missing, or a gap the meter counts) is colour-coded in the warning tone (Sam) */
.vorb__row[data-state="missing"], .vorb__row[data-state="gap"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg)); }
.vorb__row[data-state="missing"] dt, .vorb__row[data-state="gap"] dt { color: var(--warn); }
.vorb__row[data-state="gap"] { border-style: dashed; }

/* the code shown when the app's link did not open the app (connects/app_connected) */
.appcode { margin: 8px 0; font-size: 2rem; letter-spacing: 0.2em; }
/* Continue with LinkedIn on the sign-in page: a full-width outline button under the form */
.signin__or { margin: 12px 0 0; }
.signin__linkedin { width: 100%; justify-content: center; }

/* ── the username form (profiles/_username_form): the expert onboarding's choice page and My Profile's Username popup ─────────────── */
.uname { display: flex; flex-direction: column; gap: 8px; }
.uname__row { display: flex; gap: 8px; }
.uname__row .input { flex: 1; min-width: 0; }
.uname__hint { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.uname__addr { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink); overflow-wrap: anywhere; }
.ob__uname { box-sizing: border-box; width: 100%; max-width: 536px; padding: 16px; }
.pf__rename { vertical-align: middle; margin-left: 4px; color: var(--ink-2); }