/* Onboarding — the first interview. Chromeless, one centered column, quiet.
   Tokens come from app.css; nothing here invents a colour. Coral stays inside
   the mark's own pixels, as everywhere else. */

.ob {
  min-height: 100dvh;
  display: grid;
  justify-items: center;
}
.ob-col {
  width: 100%;
  /* NO max-width here. The scroller, the composer and every dock row
     centre their own content against var(--measure) (thread.css and the
     padding-inline rules below), exactly as the chat pane does. A cap on
     the column ON TOP of that padding double-constrained the content:
     feedback read at 672px while chat read at 720px — measured, 2026-08-09,
     during the unification. One centring mechanism, owned by the content,
     not two stacked. */
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; /* lockup, conversation, dock */
}

/* The signature, once. 28px is the floor where the mark still reads on its
   own (docs/brand.md); width follows from the file's own 699:915. */
.ob-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 20px 12px;
}
.ob-mark { height: 28px; width: auto; flex: none; }
.ob-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------- conversation */

/* The scroller, bubbles, dots, skeletons and composer come from
   thread.css, rendered by thread.js (docs/build-one-chat.md). The ob-
   bubble dialect is DEAD — test/one-chat.test.js fails its return. What
   remains in this file is interview FURNITURE: the things only an
   interview has, which keep their prefix. */

/* Turn 2: a link, never a turn. The body replaces it in place when pressed. */
.ob-why {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 4px 4px;
  margin: 4px 0 0 8px;
  color: var(--accent-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ob-why:hover { text-decoration: underline; }
.ob-why-body {
  align-self: flex-start;
  max-width: 62%;
  margin: 6px 0 0 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Record-voice notes: the resume line. Mono, centered, quiet. */
.ob-note {
  align-self: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 0 4px;
}

/* The honest line above a step built from a thin answer. */
.ob-thin {
  align-self: flex-start;
  max-width: 62%;
  margin-top: 10px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* The proposed step, as structure: title and body, a card rather than a
   bubble, because it is the thing being decided on. */
.ob-card {
  align-self: stretch;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.ob-card h3 { font-size: 16px; }
.ob-card p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The 7a quote: curated, sourced, and visibly an offering rather than a turn. */
.ob-quote {
  align-self: flex-start;
  max-width: 62%;
  margin: 10px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 2px solid var(--accent-text);
  border-radius: var(--r-s) var(--r-m) var(--r-m) var(--r-s);
}
.ob-quote blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.ob-quote-src {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* Load failure: one calm control that says what happened and tries again. */
.ob-retry {
  margin: auto;
  border: 0;
  background: none;
  padding: 8px;
  color: var(--accent-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ob-retry:hover { text-decoration: underline; }
.ob-retry[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------ dock */

/* The composer (thread.css) brings its own padding, border and safe-area;
   the dock only stacks it with the furniture rows beneath. */
.ob-dock {
  padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Accept and decline are the same control in the same row, at the same
   weight. A decline that looks like a cancel link is not really offered.
   The furniture rows carry the composer's own gutter so the column reads
   as one surface. */
.ob-actions {
  display: flex; gap: 10px;
  padding-inline: max(20px, (100% - var(--measure)) / 2);
}
.ob-actions .btn { flex: 1 1 0; }

.ob-leave { width: 100%; }

/* The storage disclosure, said before the first storing question. It is
   the terms the conversation happens under, not the facilitator making
   reassuring noises — quiet, bordered, visibly not a bubble. Styled by the
   data attribute the engine sets (never by an ob- class on a thread
   bubble — test/one-chat.test.js forbids mixing the dialects), and the
   attribute is also immersive mode's plain-render contract. */
.grp.theirs .msg[data-ob="disclosure"] {
  align-self: flex-start;
  max-width: 62%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* The row under the compose box: the decline affordance and the quiet note.
   NOT inside the compose flex row — a third child there competes with the
   textarea for space, which is what once collapsed it to a character wide. */
/* Shares the app measure so the skip row lines up with the composer above it
   rather than starting at the pane edge. No fallback: --measure is on :root
   now, so every surface sees it — the old fallback existed only because the
   variable was scoped to `.chat`, which was the variable being in the wrong
   place. */
.ob-under {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-inline: max(20px, (100% - var(--measure)) / 2);
}
.ob-under-note { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Skip is always available and never styled as the discouraged path —
   refusal is calibration, not failure. Quieter than Send only because Send
   is primary, never because declining is unwelcome. */
.ob-skip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ob-skip:hover { color: var(--text); }
.ob-skip:disabled { opacity: .6; cursor: default; }

/* The closing verify offer: one email field, one submit, the same row shape
   as the compose box so it reads as part of the conversation's furniture. */
.ob-verify {
  display: flex; align-items: center; gap: 10px;
  padding-inline: max(20px, (100% - var(--measure)) / 2);
}
.ob-verify-email {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 21px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}
.ob-verify-email::placeholder { color: var(--muted); }
.ob-verify-email:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ob-verify .btn { flex: none; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 760px) {
  .ob-brand { padding: 16px 16px 8px; }
  .ob-dock { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Same phone cap as thread.css's .msg — below the breakpoint the column
     and the viewport are the same thing, so the furniture loosens the same
     way. Two rules, one value: the furniture and the disclosure stay in
     separate rules because test/one-chat.test.js forbids any single rule
     mixing the thread vocabulary with an ob- class — that mixing is the
     two-dialect split growing back. The disclosure override repeats its
     full selector so it keeps its base rule's specificity (critic two). */
  .ob-why-body, .ob-thin, .ob-quote { max-width: 82%; }
  .grp.theirs .msg[data-ob="disclosure"] { max-width: 82%; }
}