:root {
  --navy: #013244;
  --teal: #005777;
  --teal-dark: #003f57;
  --gold: #f4bd15;
  --orange: #d44427;
  --ink: #173039;
  --muted: #52656d;
  --line: #87969c;
  --line-soft: #c4cdd1;
  --paper: #ffffff;
  --ground: #f4f6f6;
  --teal-wash: #eaf2f5;
  --gold-wash: #fff8dc;
  --danger-wash: #fdf1ed;
  --radius: 10px;
  --radius-sm: 6px;
  --font: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}
button, input, textarea { font: inherit; }
a { color: var(--teal); }
.hidden, [hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.testbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px max(20px, calc((100vw - 1220px) / 2));
  color: #fff;
  background: var(--navy);
  font-size: 13px;
}
.testbar .chip {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.frame {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  width: min(1220px, calc(100% - 40px));
  margin: 30px auto 64px;
}

.rail {
  position: sticky;
  top: 20px;
  padding: 22px;
  border: 2px solid var(--line);
  border-top: 6px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper);
  /* B-147 R5, Jacques 2026-09-19. Sticky alone stops solving this the moment the rail is
     taller than the viewport: you cannot see its bottom without scrolling the page, and by
     then its top has gone. The two panes scroll independently instead, which is the ordinary
     pattern for a sidebar beside long content. `auto` means no scrollbar appears unless the
     rail actually overflows, so short paths are unchanged. `contain` stops the page from
     taking over when the rail reaches its end, which is the surprise this is meant to remove.
     Only above 900px: below that `.rail` is `display: contents` and its children join the
     single-column flow, where a second scroll region would be wrong. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A quiet scrollbar, so an overflowing rail does not read as a broken one. */
.rail::-webkit-scrollbar { width: 10px; }
.rail::-webkit-scrollbar-thumb {
  border: 3px solid var(--paper);
  border-radius: 999px;
  background: var(--line-soft);
}
.rail { scrollbar-width: thin; scrollbar-color: var(--line-soft) var(--paper); }
.brand .wordmark { display: block; max-width: 100%; height: auto; margin-bottom: 16px; }
.brand h1 {
  margin: 0;
  color: var(--teal);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.beta {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.howlink { margin: 12px 0 20px; }
.linkish, .reset-link {
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  color: var(--teal);
  background: transparent;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.progress-nav { margin-top: 4px; }
.steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  overflow: hidden;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.steps li > div, .steps li > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font-weight: 600;
}
.steps li > button { cursor: pointer; }
.steps .n {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.steps .is-active { border-color: var(--teal); color: #fff; background: var(--teal); }
.steps .is-active .n { border-color: var(--gold); color: var(--navy); background: var(--gold); }
.steps .is-done { border-color: var(--line); background: #f8faf9; }
.steps .is-done .n { border-color: var(--teal); color: #fff; background: var(--teal); }
.steps .is-done > button:hover { background: var(--teal-wash); }
.steps .is-available { border-color: var(--line); background: var(--paper); }
.steps .is-available .n { border-color: var(--teal); color: var(--teal); }
.steps .is-available > button:hover { background: var(--teal-wash); }
.steps .is-active > button:hover { background: var(--teal-dark); }

/* B-147 R5: Results is a destination rather than a numbered step, so it sits apart from the
   sequence above it. `.is-active` already paints the current view, so only the resting state
   needs describing here. */
.steps .is-result-step { margin-top: 6px; border-color: var(--teal); }
.steps .is-result-step .n { border-color: var(--teal); color: #fff; background: var(--teal); }
.steps .is-result-step > button:hover { background: var(--teal-wash); }

/* B-147 R5: the rail as the instruction, after a refusal the participant can fix.
   Two affordances in two colours, because they are two different invitations. ORANGE marks the
   written answers, which are the only places a guardrail refusal can come from. Teal marks
   Review, which is where to see everything at once. Same shape, different meaning.
   Orange rather than gold (Jacques, 2026-09-19): gold is the brand's own accent and already
   carries the active step's number badge and the Beta chip, so a gold glow read as chrome
   rather than as an instruction. White on `--orange` measures 4.51:1, which clears AA for the
   small bold tab; `--ink` on both washes clears it comfortably.
   The tabs sit INSIDE the item: `.steps li` is `overflow: hidden`, so anything hung outside
   the border is clipped away rather than floating beside it. */
.steps .is-fix-target,
.steps .is-fix-review { position: relative; }
/* The repair step is almost always ALSO `.is-active` - reopenForEditing lands on Review, and
   clicking a written answer makes that one active. `.is-active` paints white text for its
   solid teal fill, and inheriting that onto these light washes is white-on-cream. Same
   specificity, so these win only by source order; the colour is restated rather than left to
   cascade luck. */
.steps .is-fix-target,
.steps .is-fix-target > button,
.steps .is-fix-target > div,
.steps .is-fix-review,
.steps .is-fix-review > button,
.steps .is-fix-review > div { color: var(--ink); }
.steps .is-fix-target {
  border-color: var(--orange);
  background: var(--danger-wash);
  box-shadow: 0 0 0 3px rgba(212, 68, 39, .26);
}
.steps .is-fix-review {
  border-color: var(--teal);
  background: var(--teal-wash);
  box-shadow: 0 0 0 3px rgba(0, 87, 119, .22);
}
.steps .is-fix-target > button:hover { background: #fbe4dc; }
.steps .is-fix-review > button:hover { background: #dceaf0; }
/* Room for the tab, so it never sits on top of a long section name. */
.steps .is-fix-target > button,
.steps .is-fix-target > div,
.steps .is-fix-review > button,
.steps .is-fix-review > div { padding-right: 54px; }
.steps .is-fix-target::after,
.steps .is-fix-review::after {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Decorative: the accessible name is set as an aria-label on the control itself, so a
     screen reader hears "Edit your written answer: Your Needs" rather than a bare "Edit". */
  pointer-events: none;
}
.steps .is-fix-target::after { content: "Edit"; color: #fff; background: var(--orange); }
.steps .is-fix-review::after { content: "Open"; color: #fff; background: var(--teal); }
/* The number badge follows the step's own colour rather than the active gold, so the two
   invitations stay legible as a pair when one of them is the current screen. */
.steps .is-fix-target .n { border-color: var(--orange); color: #fff; background: var(--orange); }
.steps .is-fix-review .n { border-color: var(--teal); color: #fff; background: var(--teal); }
/* The glow breathes, so the eye finds it without a sentence telling it to. Motion only for
   those who have not asked for less; the colour and the tab carry the meaning on their own. */
@media (prefers-reduced-motion: no-preference) {
  .steps .is-fix-target { animation: fix-pulse-orange 2.4s ease-in-out infinite; }
  .steps .is-fix-review { animation: fix-pulse-teal 2.4s ease-in-out infinite; }
}
@keyframes fix-pulse-orange {
  50% { box-shadow: 0 0 0 6px rgba(212, 68, 39, .15); }
}
@keyframes fix-pulse-teal {
  50% { box-shadow: 0 0 0 6px rgba(0, 87, 119, .12); }
}
.substep {
  width: max-content;
  margin: 8px 0 0 36px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--ground);
  font-size: 12px;
  font-weight: 600;
}
.substep:empty { display: none; }
.reset-link { margin: 8px 0 0 36px; color: var(--muted); font-size: 13px; }

.rail-support { margin-top: 24px; }
.promo {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.promo h2 {
  margin: 4px 0 7px;
  color: var(--teal);
  font-size: 17px;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.promo p { margin: 0; color: var(--muted); font-size: 13px; }
.promo a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-top: 10px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}
#promo-slot { margin-top: 16px; }
.promo { position: relative; padding-top: 20px; }
.promo .tag {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  background: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.promo .inner { padding: 0; }
.survey-card { padding: 16px 14px 10px; background: var(--gold-wash); }
.survey-card h2 { font-size: 15px; text-transform: none; letter-spacing: 0; }
.survey-card a { min-height: 36px; margin-top: 4px; }

.main { min-width: 0; }
.panel > * + * { margin-top: 22px; }
.phasebanner {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border: 2px solid var(--teal-dark);
  border-bottom: 6px solid var(--gold);
  border-radius: var(--radius);
  color: #fff;
  background: var(--teal);
}
.phasebanner::after {
  position: absolute;
  top: -58px;
  right: -48px;
  width: 160px;
  height: 160px;
  border: 16px solid rgba(244, 189, 21, .22);
  border-radius: 50%;
  content: "";
}
.phasebanner h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 700px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.phasebanner .caption {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 640px;
  margin-top: 10px;
  font-size: 16px;
}
.phasebanner h2:focus-visible { outline-color: var(--gold); }

.card, .navbar, .score-hero {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.card { padding: 28px 30px; }
.cardhead {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line-soft);
}
.eyebrow {
  margin: 0 0 5px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cardhead h3, .welcome-card h3, .email-fallback h3 {
  margin: 0;
  color: var(--teal);
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.welcome-lede { max-width: 680px; margin: 16px 0; font-size: 18px; }
.welcome-points { margin: 0 0 24px; padding-left: 22px; }
.welcome-points li + li { margin-top: 7px; }

.field-stack { max-width: 720px; }
fieldset[data-field-block] { margin: 0; padding: 0; border: 0; }
fieldset[data-field-block] + fieldset[data-field-block] {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
fieldset[data-field-block] legend {
  padding: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.req { color: var(--orange); }
.hint { max-width: 680px; margin: 7px 0 12px; color: var(--muted); font-size: 14px; }
.options { display: grid; grid-template-columns: 1fr; gap: 9px; }
.options label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 46px;
  padding: 11px 13px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
}
.options label:hover { border-color: var(--teal); background: var(--teal-wash); }
.options label:has(input:checked) { border-color: var(--teal); color: #fff; background: var(--teal); }
.options label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.options input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.options.rating { grid-template-columns: repeat(5, minmax(52px, 1fr)); max-width: 480px; }
.options.rating label { align-items: center; justify-content: center; }
input[type="text"], input[type="email"], input[type="search"], textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper);
}
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--teal); }
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 18px;
}
.details-grid fieldset[data-field-block] { min-width: 0; margin: 0; padding: 0; border: 0; }
.details-grid fieldset[data-field-block] + fieldset[data-field-block] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.detail-field.field-email { grid-column: 1 / -1; }
.prior-picker {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.prior-picker summary { min-height: 48px; padding: 12px 14px; color: var(--teal); font-weight: 700; cursor: pointer; }
.prior-picker[open] summary { border-bottom: 2px solid var(--line-soft); }
.prior-picker-body { padding: 14px; }
.prior-search { margin-bottom: 12px; }
.prior-options { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.prior-empty { display: none; margin: 10px 0 0; color: var(--muted); }
.prior-empty.visible { display: block; }
.gate-card .options { grid-template-columns: 1fr 1fr; max-width: 680px; }
.gate-card .options label { min-height: 110px; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; }
.idea-note {
  max-width: 680px;
  padding: 22px;
  border: 2px solid var(--teal);
  border-left: 8px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--teal-wash);
}
.idea-note h4 { margin: 0 0 8px; color: var(--teal); font-size: 20px; text-transform: uppercase; }
.idea-note p { margin: 0; }
.field-error, .error-note {
  margin-top: 10px;
  padding: 9px 11px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  color: #812812;
  background: var(--danger-wash);
  font-size: 14px;
  font-weight: 600;
}

.navbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
}
button.nb, .edit-btn {
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper);
  font-weight: 700;
  cursor: pointer;
}
button.nb:hover, .edit-btn:hover { border-color: var(--teal); background: var(--teal-wash); }
/* B-136. The engine ships the v2 report's start-over control as its own underlined
   link; wireV2Report re-homes it onto button.nb so both report versions end with the
   same CTA. This only sets the spacing the report section needs around it. */
.result-doc .obe-section > button.nb { margin-top: 4px; }
button.nb.primary {
  border-color: var(--orange);
  color: #fff;
  background: var(--orange);
}
button.nb.primary:hover { border-color: #b9341d; background: #b9341d; }
button:disabled { opacity: .55; cursor: wait; }

.review-group + .review-group { margin-top: 22px; }
.review-group {
  overflow: hidden;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--teal-wash);
}
.review-head > div { flex: 1; }
.review-phase { display: block; color: var(--orange); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.review-head h4 { margin: 2px 0 0; color: var(--teal); font-size: 18px; text-transform: uppercase; }
.edit-btn { min-height: 38px; padding: 7px 13px; }
.review-list { margin: 0; padding: 4px 15px; }
.review-list .row { display: grid; grid-template-columns: minmax(170px, 35%) 1fr; gap: 16px; padding: 10px 0; }
.review-list .row + .row { border-top: 1px solid var(--line-soft); }
.review-list dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.review-list dd { margin: 0; overflow-wrap: anywhere; }

#result.is-ready .waiting-card { display: none; }
#result.is-waiting .result-doc-frame,
#result.is-waiting .result-ctas,
#result.is-waiting .result-actions { display: none; }
.waiting-card { padding: 26px 28px; }
.activity-row { display: flex; align-items: center; gap: 12px; }
.activity-dot {
  width: 18px;
  height: 18px;
  border: 3px solid var(--line-soft);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: rotate 1.1s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.pipeline-loader { margin: 0; font-size: 18px; font-weight: 700; }
.wait-expectation { margin: 16px 0 2px; font-size: 18px; }
.wait-email { max-width: 680px; margin: 0; color: var(--muted); }
.elapsed { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* B-136. Once a score is on screen the waiting card collapses to one line, so the
   score and its pending notice own the attention instead of competing with it. */
#result.is-waiting.is-scored .waiting-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 20px;
}
#result.is-waiting.is-scored .wait-expectation,
#result.is-waiting.is-scored .wait-email { display: none; }
#result.is-waiting.is-scored .pipeline-loader { font-size: 16px; }
#result.is-waiting.is-scored .activity-dot { width: 14px; height: 14px; border-width: 2px; }
#result.is-waiting.is-scored .elapsed { margin: 0 0 0 auto; }

.score-hero { margin-top: 22px; padding: 28px 30px; }
.score-hero:empty { display: none; }
.score-pending {
  margin-top: 26px;
  padding: 18px 20px;
  border-top: 2px solid var(--gold);
  background: var(--gold-wash);
}
.score-pending p { margin: 0; max-width: 680px; }
.score-pending p + p { margin-top: 6px; }
.score-pending-head { font-size: 18px; font-weight: 700; }
.score-pending-eta { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-heading { padding-bottom: 20px; border-bottom: 2px solid var(--line-soft); }
.score-total { display: flex; align-items: center; gap: 18px; }
.score-num { flex: none; color: var(--teal); font-size: 72px; font-weight: 700; line-height: 1; }
.score-total h2 { margin: 0; color: var(--teal); font-size: 30px; line-height: 1.1; text-transform: uppercase; letter-spacing: .025em; }
.score-total p { margin: 5px 0 0; color: var(--muted); }
.score-grid { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr); gap: 32px; align-items: center; padding: 26px 0; }
.radar-panel { min-width: 0; text-align: center; }
.score-radar { display: block; width: min(100%, 540px); height: auto; margin: 0 auto; background: #fff; }
.score-bars h3 { margin: 0 0 18px; color: var(--teal); font-size: 20px; text-transform: uppercase; }
.bar-row + .bar-row { margin-top: 17px; }
.bar-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.bar-label { font-weight: 700; }
.bar-val { color: var(--teal); font-weight: 700; }
.bar-track { display: block; height: 14px; overflow: hidden; border: 2px solid var(--line); border-radius: 999px; background: var(--ground); }
.bar-fill { display: block; width: 0; height: 100%; border-radius: 999px; transition: width .6s ease; }
.area-meanings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.area-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--teal); background: var(--paper); text-align: left; font-weight: 700; cursor: pointer; }
.area-head::after { margin-left: auto; content: "›"; font-size: 24px; line-height: 1; transform: rotate(0deg); transition: transform .18s ease; }
.area-head[aria-expanded="true"]::after { transform: rotate(90deg); }
.area-text { display: none; margin: 7px 4px 12px; color: var(--muted); font-size: 14px; }
.area-text.open { display: block; }
.result-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.result-ctas a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 18px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.result-ctas a.secondary { border-color: var(--line); color: var(--teal); background: var(--paper); }
.result-ctas:empty, .result-actions:empty { display: none; }
.result-doc-frame { padding: 10px; background: #eef1f1; }
.result-doc { overflow-x: auto; padding: 4px; background: #fff; }
#result.is-v2 .result-doc-frame { padding: 0; background: #fff; }
#result.is-v2 .result-doc { overflow: visible; padding: 24px 30px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.email-fallback { max-width: 680px; padding: 22px; border-left: 7px solid var(--gold); background: var(--teal-wash); }
/* B-141, 2026-09-17. A terminal state was a bare paragraph in a gold-bar box with no
   heading, unrelated to the branded card the same participant gets by email minutes later.
   It now uses the app's own card: the frame around .result-doc IS the card, so the Logic App
   sends the CONTENTS - eyebrow, heading, body, action - and these rules only undo the
   report-frame padding and pull the action row inside. Same structure, in Arial, in the
   email. */
#result.is-terminal .result-doc-frame { padding: 0; background: var(--paper); }
#result.is-terminal .result-doc { overflow: visible; padding: 26px 28px; max-width: 760px; }
#result.is-terminal .waiting-card { display: none; }
#result.is-terminal .result-doc > *:first-child { margin-top: 0; }
#result.is-terminal .result-doc p { margin: 0 0 14px; }
#result.is-terminal .result-doc p:last-of-type { margin-bottom: 0; }
/* The start-over button is moved into the card for a terminal state, so its own top margin
   would double the card's padding. */
#result.is-terminal .result-doc .result-actions { margin-top: 22px; }
/* The branch CTA, matching the button the same message carries into the email. */
.terminal-cta {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.terminal-cta:hover { background: var(--teal-dark); }
.retry-spent { flex-basis: 100%; margin: 0 0 4px; color: var(--ink-soft, #4A5A63); }
.email-fallback p { margin: 10px 0 0; }

/* B-147, 2026-09-18. C2 (personal information) and B3 (cannot process) are drawn by the page
   rather than arriving as a stored fragment, so they need the same contents the Logic App
   sends for the other branches. Everything structural is already inherited from
   #result.is-terminal and .cardhead: these rules only hold the measure, and give C2 a
   secondary contact button because its primary action is the Start another assessment button
   in the row below. Per-kind targeting beyond that is available on the card's own
   data-obe-result-terminal attribute, so no state class is parked on #result to go stale. */
.terminal-card { max-width: 680px; }
.terminal-card .cardhead { margin-bottom: 20px; }
.terminal-note { color: var(--muted); }
/* B-147 R5, Jacques 2026-09-19: one contact treatment across every mode. C2 had an outlined
   secondary variant while B3 and the crisis card had a solid one, so the same action changed
   weight depending on which card you landed on. Solid everywhere; the outlined variant is
   retired rather than left to be re-applied by a future card. */

.info-h { margin: 0 0 14px; color: var(--teal); font-size: 25px; text-transform: uppercase; }
.flow { display: grid; gap: 9px; }
.flow-stage { overflow: hidden; border: 2px solid var(--line-soft); border-radius: var(--radius-sm); }
.flow-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; color: var(--ink); background: var(--paper); text-align: left; font-weight: 700; cursor: pointer; }
.flow-node { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--gold); font-size: 12px; }
.flow-caret { margin-left: auto; width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 8px solid var(--teal); }
.flow-detail { display: none; padding: 0 14px 13px 48px; color: var(--muted); }
.flow-detail.open { display: block; }
.flow-detail p { margin: 0; }
.privacy-card { border-left: 8px solid var(--gold); }
.mock-wrap { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 28px; align-items: start; }
.mockform { position: relative; display: flex; gap: 10px; min-height: 250px; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--ground); }
.mf-rail { display: flex; flex-direction: column; gap: 7px; width: 58px; }
.mf-chip { height: 11px; border-radius: 3px; background: var(--gold); }
.mf-step { height: 16px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.mf-step.is-on { background: var(--teal); }
.mf-main { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.mf-banner { height: 34px; border-radius: 4px; background: var(--teal); }
.mf-card { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.mf-line { height: 7px; background: var(--ink); opacity: .65; }
.mf-line.w60 { width: 60%; } .mf-line.w40 { width: 40%; }
.mf-opt, .mf-input { height: 15px; border: 1px solid var(--line); border-radius: 3px; }
.mf-opt.is-sel { border-color: var(--teal); background: var(--teal); }
.mockform .dot { position: absolute; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--gold); font-size: 11px; font-weight: 700; }
.dot.d1 { top: -12px; left: 34%; } .dot.d2 { top: 38%; left: -12px; }
.dot.d3 { top: 56%; right: -12px; } .dot.d4 { bottom: 26%; left: -12px; }
.dot.d5 { right: 20%; bottom: -12px; }
.callout-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; }

.foot { padding: 34px max(20px, calc((100vw - 1220px) / 2)); border-top: 1px solid var(--line-soft); color: var(--ink); background: var(--teal-wash); }
.foot a { color: var(--teal); }
.foot-inner { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: 34px; align-items: start; }
.foot-about img { display: block; max-width: 100%; height: auto; }
.foot-about p { max-width: 440px; margin: 13px 0 0; }
.foot-links { display: grid; gap: 8px; }
.foot-links a { font-weight: 700; }
.foot address { font-style: normal; }
.foot-legal { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.foot-legal a { margin-left: 10px; }

@media (max-width: 900px) {
  .frame { display: flex; flex-direction: column; width: min(100% - 28px, 760px); margin-top: 18px; }
  .rail { display: contents; }
  .brand { order: 0; padding: 18px; border: 2px solid var(--line); border-top: 5px solid var(--gold); border-radius: var(--radius); background: var(--paper); }
  .brand .wordmark { width: 160px; margin-bottom: 10px; }
  .brand h1 { font-size: 21px; }
  .howlink { order: 0; margin: -18px 18px 0 auto; }
  .progress-nav { order: 0; width: 100%; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .steps li > div, .steps li > button { flex-direction: column; justify-content: center; gap: 3px; min-height: 70px; padding: 7px 3px; text-align: center; }
  .phase-label { font-size: 11px; line-height: 1.1; }
  .substep { order: 0; margin: 0 0 0 4px; }
  .reset-link { order: 0; margin: -38px 4px 0 auto; }
  .main { order: 1; width: 100%; }
  .rail-support { order: 2; width: 100%; margin-top: 0; }
  #promo-slot { max-width: none; }
  .rail.result-mode .rail-support { display: none; }
  .score-grid { grid-template-columns: 1fr; }
  .mock-wrap { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .testbar { align-items: flex-start; padding: 8px 14px; }
  .frame { width: min(100% - 20px, 600px); }
  .phasebanner { padding: 23px 20px; }
  .phasebanner h2 { font-size: 28px; }
  .card, .score-hero { padding: 22px 18px; }
  #result.is-v2 .result-doc { padding: 20px 18px; }
  .cardhead h3, .welcome-card h3, .email-fallback h3 { font-size: 25px; }
  .details-grid { grid-template-columns: 1fr; }
  .detail-field.field-email { grid-column: auto; }
  .gate-card .options { grid-template-columns: 1fr; }
  .options.rating { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .options.rating label { min-height: 44px; padding: 8px 3px; }
  .navbar { position: sticky; bottom: 8px; z-index: 2; }
  button.nb { padding: 9px 12px; }
  .review-list .row { grid-template-columns: 1fr; gap: 3px; }
  .score-total { align-items: flex-start; }
  .score-num { font-size: 60px; }
  .score-total h2 { font-size: 23px; }
  .area-meanings { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot-about { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media print {
  .testbar, .rail, .result-ctas, .result-actions, .navbar, .waiting-card { display: none !important; }
  body { background: #fff; }
  .frame { display: block; width: 100%; margin: 0; }
  .phasebanner, .score-hero, .card { break-inside: avoid; }
  .foot { color: var(--ink); background: #fff; }
  .foot a { color: var(--ink); }
}