/* app.css — Rocket Media client intake.
   Every value derives from css/brand.css. Rocket Green owns progress and primary actions.
   The secondary palette (Booster, Ignition, Nebula, Nova) appears only as section accents:
   a top bar, a status dot, a tinted well. Never as body text, never as a page surface. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink:        var(--rm-color-outerspace);
  --ink-soft:   var(--rm-color-gray-700);
  --ink-faint:  var(--rm-color-gray-500);
  --line:       var(--rm-color-gray-100);
  --surface:    var(--rm-color-gray-50);
  --spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* brand-tokens.css only ships radius-card, radius-button, radius-pill and radius-none, but
     brand-guide.md documents a full sm/md/lg/xl scale. Filling the gap here with the guide's
     values. Worth reconciling upstream so the token file and the guide agree. */
  --rm-radius-sm: 8px;
  --rm-radius-md: 12px;
  --accent:     var(--rm-color-rocket-green);   /* overridden per section group */
  --accent-text:#36792E;
  --accent-tint:#EEF8EC;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--rm-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--rm-color-moonlight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-font-weight-semibold);
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

a { color: var(--rm-color-hover); text-underline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--rm-space-4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--rm-space-12); } }
.wrap-narrow { max-width: 1000px; }

.hidden { display: none !important; }
.muted  { color: var(--ink-soft); }
.faint  { color: var(--ink-faint); }
.tiny   { font-size: 0.8125rem; line-height: 1.5; }
.spacer { flex: 1; }

/* ============================ eyebrow ============================ */
.eyebrow {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-font-weight-semibold);
  font-size: 0.75rem;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: var(--rm-letter-spacing-section-marker);
}

/* ============================ top bar ============================ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.93);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: var(--rm-space-4); padding: 14px 0; }
.topbar-logo { height: 30px; width: auto; display: block; }
.topbar-client {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.9375rem; padding-left: var(--rm-space-4); border-left: 1px solid var(--line);
}

/* ==================== SIGNATURE: section rail ====================
   Counts sections, not questions. "3 of 12 sections" is a finish line a client can see.
   "72 required answers left" is a wall. Same data, completely different feeling. */
.rail { padding-bottom: 14px; }
.rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rail-count {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.375rem; line-height: 1; color: var(--rm-color-rocket-green);
  font-variant-numeric: tabular-nums;
}
.rail-label { font-size: 0.9375rem; color: var(--ink-soft); }
.rail-track { display: flex; gap: 3px; }
.rail-seg {
  flex: 1; height: 7px; border-radius: var(--rm-radius-pill);
  background: var(--line); border: none; padding: 0; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 200ms var(--rm-ease-ease);
}
.rail-seg:hover { transform: translateY(-2px); }
.rail-seg-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-color-rocket-green);
  transition: width 420ms var(--rm-ease-ease-out);
}
.rail-seg.is-current { box-shadow: 0 0 0 2px rgba(83,181,71,0.3); }
.rail-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rail-seg.is-locked { opacity: 0.38; cursor: not-allowed; transform: none; }

/* ============================ overview ============================ */
.ov-hero { padding: var(--rm-space-12) 0 var(--rm-space-6); }
.ov-hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-top: 10px; }
.ov-hero p { color: var(--ink-soft); max-width: 58ch; margin: var(--rm-space-4) 0 0; }

.ov-meter { margin-top: var(--rm-space-6); }
.ov-meter-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ov-meter-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 2.75rem; line-height: 1; color: var(--rm-color-rocket-green);
  font-variant-numeric: tabular-nums;
}
.ov-meter-of { font-size: 1.0625rem; color: var(--ink-soft); }
.ov-meter-track { display: flex; gap: 4px; }
.ov-meter-seg {
  flex: 1; height: 10px; border-radius: var(--rm-radius-pill);
  background: var(--line); overflow: hidden; position: relative;
}
.ov-meter-seg i {
  position: absolute; inset: 0 auto 0 0; display: block; width: 0;
  background: var(--rm-color-rocket-green); border-radius: var(--rm-radius-pill);
  transition: width 500ms var(--rm-ease-ease-out);
}

.ov-group { margin-top: var(--rm-space-8); }
.ov-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--rm-space-4); }
.ov-group-bar { width: 28px; height: 4px; border-radius: var(--rm-radius-pill); background: var(--accent); }
.ov-group-label {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text);
}
.ov-group-count { font-size: 0.8125rem; color: var(--ink-faint); }

/* Full-width rows, not a card grid. A section is a step in a sequence, and a row reads as one
   line of a list you work down. Squares read as unrelated tiles. */
.ov-rows { display: flex; flex-direction: column; gap: 8px; }

.ov-row {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 16px; padding: 16px 20px 16px 22px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--rm-radius-md);
  background: var(--rm-color-moonlight); font-family: var(--rm-font-body); color: var(--ink);
  transition: transform 200ms var(--rm-ease-ease), box-shadow 200ms var(--rm-ease-ease),
              background 200ms var(--rm-ease-ease);
}
@media (min-width: 700px) { .ov-row { grid-template-columns: auto 1fr auto auto; } }
.ov-row:hover { transform: translateX(3px); box-shadow: var(--rm-shadow-md); background: var(--accent-tint); }
.ov-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ov-row.is-done { background: #F5FBF4; border-left-color: var(--rm-color-rocket-green); }
.ov-row.is-done:hover { background: #EEF8EC; }
.ov-row.is-locked {
  opacity: 0.62; cursor: not-allowed; background: var(--surface);
  border-left-color: var(--line); box-shadow: none;
}
.ov-row.is-locked:hover { transform: none; box-shadow: none; background: var(--surface); }

.ov-row-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.125rem; color: var(--accent-text); font-variant-numeric: tabular-nums;
  min-width: 26px;
}
.ov-row.is-done .ov-row-num { color: var(--rm-color-active); }
.ov-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-row-title {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem;
}
.ov-row-sub { font-size: 0.9375rem; color: var(--ink-soft); }
.ov-row-status { display: flex; align-items: center; gap: 8px; }
.ov-row-arrow { color: var(--ink-faint); display: none; }
@media (min-width: 700px) { .ov-row-arrow { display: block; } }
.ov-row:hover .ov-row-arrow { color: var(--accent-text); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 600; padding: 5px 12px;
  border-radius: var(--rm-radius-pill); background: var(--surface);
  color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap;
}
.pill svg { width: 14px; height: 14px; }
.pill svg circle { fill: currentColor; opacity: 0.25; }
.pill svg path { stroke: #fff; stroke-width: 2.6; fill: none; }
.pill.is-done   { background: var(--rm-color-rocket-green); color: #fff; border-color: transparent; }
.pill.is-done svg circle { fill: rgba(255,255,255,0.3); }
.pill.is-active { background: var(--accent-tint); color: var(--accent-text); border-color: transparent; }
.pill.is-review { background: #FFF9E5; color: #8A6D00; border-color: #FFEFBF; }

/* ============================ save bar ============================ */
.savebar {
  display: flex; align-items: center; gap: var(--rm-space-4); flex-wrap: wrap;
  margin-top: var(--rm-space-8); padding: 14px var(--rm-space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rm-radius-card); font-size: 0.875rem; color: var(--ink-soft);
}
.savebar-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rm-color-rocket-green);
  flex: 0 0 8px; animation: pulse 2.4s var(--rm-ease-ease) infinite;
}
.save-state { color: var(--rm-color-active); }
.save-state-text { font-weight: 700; }
.save-state.is-saving { color: var(--ink-soft); }
.save-state.is-browser { color: var(--rm-color-warning-dark, #8A5B00); }
.section-save-state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 0.8125rem; white-space: nowrap;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================ section ============================ */
.section { padding: var(--rm-space-6) 0 var(--rm-space-12); }
.section-crumb {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--rm-font-body); font-size: 0.875rem; color: var(--ink-soft);
  margin-bottom: var(--rm-space-8);
}
.section-crumb:hover { color: var(--accent-text); }
/* A tinted block instead of naked text on white. Carries the group colour, gives the section
   a top edge, and stops the page reading as a wall of paragraphs. */
.section-head {
  margin-bottom: var(--rm-space-6);
  padding: 20px 24px; border-radius: var(--rm-radius-card);
  background: var(--accent-tint); border-left: 4px solid var(--accent);
}
.section-head .section-intro { margin-bottom: 0; }

.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px; background: var(--accent-tint);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--rm-radius-card) var(--rm-radius-card) 0 0;
}
.panel-head-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.panel-head-title {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem;
}
.panel-head-count { font-size: 0.8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.panel-head + .fields { border-radius: 0 0 var(--rm-radius-card) var(--rm-radius-card); }
.section-title { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-top: 10px; }
.section-intro { color: var(--ink-soft); margin-top: 10px; max-width: 64ch; font-size: 1.0625rem; }
.section-meta { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 10px; }

/* ============================ fields ============================
   Questions live inside one bordered panel with hairline dividers, and each row splits into
   label-left / control-right on desktop. That halves the vertical run of the old stacked
   layout and reads as a built form rather than a list of floating labels. */
.fields {
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
  background: var(--rm-color-moonlight); overflow: hidden;
}

.field {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 18px 20px; border-top: 1px solid var(--line); position: relative;
}
.field.needs-answer {
  border-color: #D99A00;
  background: #FFF9E8;
  box-shadow: 0 0 0 3px rgba(217, 154, 0, 0.16);
}
.field.needs-answer::before {
  content: "Required — please answer before continuing";
  grid-column: 1 / -1;
  color: #765000;
  font-size: 0.8125rem;
  font-weight: 700;
}
.field:first-child { border-top: none; }
.field:nth-child(even) { background: #FCFCFD; }

@media (min-width: 760px) {
  .field { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 28px; align-items: start; padding: 16px 24px; }
  .field.is-stacked { grid-template-columns: 1fr; gap: 14px; }

  /* A control is 42px tall while a single line of label text is 24px, so top-aligning the two
     leaves the label looking high. This nudges the label column down by the control's own top
     padding plus border, which lines the first line of the label up with the control's text.
     Stacked fields put the label above the control, so they are exempt. */
  .field:not(.is-stacked) > div:first-child { padding-top: 9px; }
}

.field-label-row { display: flex; align-items: flex-start; gap: 9px; }
.field-label {
  display: block; font-family: var(--rm-font-display);
  font-weight: var(--rm-font-weight-semibold); font-size: 1.0625rem; line-height: 1.4;
}
.field-check {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px;
  opacity: 0; transform: scale(0.4);
  transition: opacity 220ms var(--spring), transform 300ms var(--spring);
}
.field.is-answered .field-check { opacity: 1; transform: scale(1); }
.field-check circle { fill: var(--rm-color-rocket-green); }
.field-check path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.field-help { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; margin: 5px 0 0; }
.field-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.field-control { margin: 0; min-width: 0; }
.field-control > *:first-child { margin-top: 0; }

.tag {
  font-size: 0.75rem; padding: 2px 8px; border-radius: var(--rm-radius-pill);
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line);
  line-height: 1.5;
}
.tag.req      { color: #8A6D00; background: #FFF9E5; border-color: #FFEFBF; }
.tag.internal { color: #6B4B8C; background: #F4EFF9; border-color: #E4D9EF; }
.tag.shared   { color: #1F6FB8; background: #EAF5FF; border-color: #CFE6FA; }

input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=number], select, textarea {
  width: 100%; max-width: 100%;
  font-family: var(--rm-font-body); font-size: 1rem; color: var(--ink);
  padding: 10px 13px;
  border: 1px solid var(--rm-color-gray-500); border-radius: var(--rm-radius-sm);
  background: var(--rm-color-moonlight);
  transition: border-color 180ms var(--rm-ease-ease), box-shadow 180ms var(--rm-ease-ease);
}
textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rm-color-rocket-green);
  box-shadow: 0 0 0 3px rgba(83,181,71,0.16);
}
select { cursor: pointer; max-width: 420px; }
/* One consistent width per kind of answer, so a column of fields reads as a set. */
input[type=text], input[type=email], input[type=url] { max-width: 100%; }
input[type=number] { max-width: 130px; }
input[type=tel] { max-width: 180px; }
input[type=time] { max-width: 140px; }
.money-wrap { position: relative; max-width: 160px; }
.money-wrap input { max-width: 160px; }
.money-wrap span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.9375rem; }
.money-wrap input { padding-left: 25px; }

/* ---- answers that came from us: read, then confirm or fix ---- */
.prefilled {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  padding: 16px 20px; border-top: 1px solid var(--line);
  background: #FFFCF2; border-left: 3px solid var(--rm-color-ignition);
}
.prefilled:first-child { border-top: none; }
@media (min-width: 760px) {
  .prefilled { grid-template-columns: 1fr auto; align-items: center; padding: 14px 24px; gap: 20px; }
}
.prefilled.is-confirmed { background: #F5FBF4; border-left-color: var(--rm-color-rocket-green); }

.prefilled-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prefilled-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8A6D00;
}
.prefilled.is-confirmed .prefilled-flag { color: var(--rm-color-active); }
.prefilled-flag svg { width: 14px; height: 14px; }
.mini-dot circle { fill: var(--rm-color-ignition); }
.mini-check circle { fill: var(--rm-color-rocket-green); }
.mini-check path { stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.prefilled-label { font-size: 0.9375rem; color: var(--ink-soft); }
.prefilled-value {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem; overflow-wrap: anywhere;
}
.prefilled-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.prefill-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 14px; font-size: 0.9375rem;
  background: #FFFCF2; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-md);
  color: var(--ink-soft);
}
.prefill-note strong { color: var(--ink); }
.prefill-note-icon { display: flex; flex: 0 0 18px; }
.prefill-note .btn { margin-left: auto; }

/* ---- "I do not have this" ---- */
.optout {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: none; border: 1px dashed var(--rm-color-gray-500);
  border-radius: var(--rm-radius-pill); padding: 7px 15px; cursor: pointer;
  font-family: var(--rm-font-body); font-size: 0.875rem; color: var(--ink-soft);
  transition: border-color 180ms var(--rm-ease-ease), color 180ms var(--rm-ease-ease);
}
.optout::before { content: '\2715'; font-size: 0.75rem; }
.optout:hover { border-color: var(--ink-soft); color: var(--ink); border-style: solid; }
.optout:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.optout-set {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--rm-radius-md);
}
.optout-set-text { font-size: 0.9375rem; color: var(--ink-soft); }
.optout-set-text::before { content: '\2713  '; color: var(--rm-color-rocket-green); font-weight: 700; }
.optout-undo {
  background: none; border: none; padding: 2px; cursor: pointer;
  font-family: var(--rm-font-body); font-size: 0.875rem; font-weight: 600;
  color: var(--rm-color-hover); margin-left: auto;
}
.optout-undo:hover { text-decoration: underline; }

/* ---- file upload ---- */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 20px; cursor: pointer; text-align: center;
  border: 2px dashed var(--rm-color-gray-500); border-radius: var(--rm-radius-card);
  background: var(--surface); color: var(--ink-soft);
  transition: border-color 200ms var(--rm-ease-ease), background 200ms var(--rm-ease-ease),
              color 200ms var(--rm-ease-ease);
}
.drop:hover, .drop:focus-within {
  border-color: var(--rm-color-rocket-green); background: #F4FBF3; color: var(--ink);
}
.drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { color: var(--rm-color-rocket-green); }
.drop-main {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.9375rem;
}
.drop-sub { font-size: 0.8125rem; color: var(--ink-faint); }

.filelist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.filelist li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; background: var(--rm-color-moonlight);
  border: 1px solid var(--line); border-radius: var(--rm-radius-sm); font-size: 0.9375rem;
}
.filelist-name { font-weight: 600; overflow-wrap: anywhere; }
.filelist-size { color: var(--ink-faint); font-size: 0.8125rem; margin-left: auto; white-space: nowrap; }
.filelist-del {
  background: none; border: none; padding: 2px; cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-faint); font-family: var(--rm-font-body);
}
.filelist-del:hover { color: var(--rm-color-nova); }

/* ---- setup page ---- */
.setup-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rm-radius-md);
  font-size: 0.9375rem; color: var(--ink-soft);
}
.setup-bar-stat b {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.25rem; color: var(--rm-color-rocket-green); margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.setup-sec { margin-bottom: var(--rm-space-6); }
.setup-foot {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 20px 0; margin-top: var(--rm-space-4); border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
}

/* ============================ schedule ============================ */
.sched-all {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 13px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rm-radius-md);
  transition: background 180ms var(--rm-ease-ease), border-color 180ms var(--rm-ease-ease);
}
.sched-all:hover { border-color: var(--rm-color-rocket-green); }
.sched-all.is-on { background: #F4FBF3; border-color: #C9E7C3; }
.sched-all input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; accent-color: var(--rm-color-rocket-green); }
.sched-all span { font-size: 0.9375rem; line-height: 1.45; }
.sched-br { display: none; }

.sched {
  border: 1px solid var(--line); border-radius: var(--rm-radius-md); overflow: hidden;
  transition: opacity 200ms var(--rm-ease-ease);
}
.sched.is-off { opacity: 0.42; pointer-events: none; }
.sched-row {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line);
  align-items: center;
}
.sched-row:first-child { border-top: none; }
.sched-row.is-on { background: #F8FCF7; }
@media (min-width: 560px) { .sched-row { grid-template-columns: 150px 1fr; gap: 14px; } }
.sched-day { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.9375rem; }
.sched-day input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--rm-color-rocket-green); }
.sched-row.is-on .sched-day { font-weight: 600; }
.sched-times { display: flex; align-items: center; gap: 9px; }
.sched-times input { padding: 6px 9px; font-size: 0.9375rem; }
.sched-to { font-size: 0.875rem; color: var(--ink-faint); }
.sched .matrix-bulk { margin: 10px 14px 12px; }

/* ============================ chips ============================ */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--rm-font-body); font-size: 0.9375rem; font-weight: 500;
  padding: 8px 16px; border-radius: var(--rm-radius-pill);
  border: 1px solid var(--rm-color-gray-500); background: var(--rm-color-moonlight);
  color: var(--ink-soft); cursor: pointer;
  transition: transform 380ms var(--spring), background 180ms var(--rm-ease-ease),
              color 180ms var(--rm-ease-ease), border-color 180ms var(--rm-ease-ease);
}
.chip:hover { border-color: var(--rm-color-rocket-green); color: var(--ink); transform: translateY(-2px); }
.chip:active { transform: scale(0.95); }
.chip.is-on {
  background: var(--rm-color-rocket-green); border-color: var(--rm-color-rocket-green);
  color: #fff; font-weight: 600;
}
.chip.is-on:hover { background: var(--rm-color-hover); border-color: var(--rm-color-hover); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip-add { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.chip-add input { max-width: 240px; }
.yn { display: flex; gap: 7px; }
.yn .chip { min-width: 68px; justify-content: center; text-align: center; }

/* ============================ note ============================ */
.note {
  padding: 14px 18px; border-radius: var(--rm-radius-md);
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  margin-bottom: var(--rm-space-6);
}
/* A note rendered inside the question panel is a row of that panel, not a floating card. */
.fields > .note {
  margin: 0; border-radius: 0; border-top: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.fields > .note:first-child { border-top: none; }
.note strong { display: block; margin-bottom: 4px; }
.note p { font-size: 0.9375rem; line-height: 1.55; }
.note strong { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }

/* ============================ repeater ============================ */
.rep-row {
  display: grid; gap: 12px; grid-template-columns: 1fr; align-items: end;
  padding: 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--rm-radius-card); background: var(--surface);
}
@media (min-width: 700px) { .rep-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.rep-row > div { min-width: 0; }
.rep-row label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; line-height: 1.4; }
.rep-row input, .rep-row select { max-width: 100%; width: 100%; padding: 7px 10px; font-size: 0.875rem; }
.rep-del {
  border: none; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 0.875rem; padding: 10px; align-self: end;
  transition: color 180ms var(--rm-ease-ease);
}
.rep-del:hover { color: var(--rm-color-nova); }

/* ============================ matrix ============================ */
.matrix-group { margin-bottom: var(--rm-space-6); }
.matrix-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.matrix-group-title { font-size: 1.25rem; }
.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rm-radius-card); }
table.matrix { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 0.9375rem; }
table.matrix th, table.matrix td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); }
table.matrix thead th {
  background: var(--surface); font-family: var(--rm-font-display);
  font-weight: var(--rm-font-weight-semibold); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  position: sticky; top: 0; z-index: 1;
}
table.matrix tbody tr { transition: background 180ms var(--rm-ease-ease); }
table.matrix tbody tr:hover { background: var(--accent-tint); }
table.matrix tbody tr:last-child td { border-bottom: none; }
table.matrix td:first-child { font-weight: 600; white-space: nowrap; }
table.matrix input, table.matrix select { max-width: none; padding: 5px 8px; font-size: 0.875rem; }
table.matrix tr.row-off td:not(:first-child) { opacity: 0.4; }
table.matrix tr.row-off td:first-child { color: var(--ink-faint); font-weight: 400; }
.matrix-bulk {
  border: 1.5px solid var(--line); background: var(--rm-color-moonlight); color: var(--ink-soft);
  border-radius: var(--rm-radius-pill); padding: 7px 14px; font-size: 0.8125rem;
  cursor: pointer; font-family: var(--rm-font-body); font-weight: 500;
  transition: border-color 180ms var(--rm-ease-ease), color 180ms var(--rm-ease-ease),
              transform 180ms var(--rm-ease-ease);
}
.matrix-bulk:hover { border-color: var(--rm-color-rocket-green); color: var(--ink); transform: translateY(-1px); }

/* ============================ buttons ============================ */
.btn {
  font-family: var(--rm-font-body); font-weight: 600; font-size: 1rem;
  padding: 11px 22px; border-radius: var(--rm-radius-pill);
  border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform 220ms var(--spring), background 180ms var(--rm-ease-ease),
              box-shadow 220ms var(--rm-ease-ease), border-color 180ms var(--rm-ease-ease);
}
.btn-primary { background: var(--rm-color-rocket-green); color: #fff; box-shadow: 0 2px 8px rgba(83,181,71,0.28); }
.btn-primary:hover { background: var(--rm-color-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(83,181,71,0.34); }
.btn-primary:active { background: var(--rm-color-active); transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-primary:disabled { background: var(--line); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--rm-color-moonlight); color: var(--rm-color-hover); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--rm-color-rocket-green); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: none; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); }
.btn-sm { padding: 9px 18px; font-size: 0.9375rem; }
.btn-xs { padding: 7px 14px; font-size: 0.875rem; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ==================== section complete banner ==================== */
.done-banner {
  display: flex; align-items: center; gap: 12px;
  margin: var(--rm-space-4) 0 0; padding: 13px 18px;
  background: #EEF8EC; border: 1px solid #C9E7C3; border-radius: var(--rm-radius-card);
  animation: rise 420ms var(--rm-ease-ease-out) both;
}
.done-banner-icon {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--rm-color-rocket-green); display: grid; place-items: center;
}
.done-banner-icon svg { width: 17px; height: 17px; }
.done-banner-icon path {
  stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: draw 460ms var(--rm-ease-ease-out) 140ms forwards;
}
.done-banner strong { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============================ section footer ============================ */
.section-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--rm-space-4);
  padding-top: var(--rm-space-4); margin-top: var(--rm-space-6);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}

/* ============================ PM dashboard ============================ */
.pm-hero { padding: var(--rm-space-12) 0 var(--rm-space-6); }
.pm-hero h1 { font-size: clamp(2rem, 5vw, 2.5rem); margin-top: 10px; }
.pm-grid { display: grid; gap: var(--rm-space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .pm-grid { grid-template-columns: 1.15fr 0.85fr; } }
.card {
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
  padding: 20px; background: var(--rm-color-moonlight);
}
.card + .card { margin-top: var(--rm-space-4); }
.card h2 { font-size: 1.25rem; }
.card-sub { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 6px; }
.prod-group { margin-top: 18px; }
.prod-group-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 12px;
}
.stat-row { display: flex; gap: var(--rm-space-8); flex-wrap: wrap; margin-top: var(--rm-space-4); }
.stat-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-top: 6px; }
.dedup-list { margin: var(--rm-space-4) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.dedup-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.dedup-list li span { color: var(--rm-color-hover); }
.nav-num { font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--ink-faint); }

/* ============================ preview banner ============================ */
.preview-banner {
  background: var(--rm-color-outerspace); color: #fff;
  padding: 12px 0; font-size: 0.9375rem; position: sticky; top: 0; z-index: 50;
}
.preview-banner .wrap { display: flex; align-items: center; gap: var(--rm-space-4); flex-wrap: wrap; }
.preview-banner strong { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }
.preview-banner .btn-ghost { color: #fff; border-color: #4a4a4a; }
.preview-banner .btn-ghost:hover { color: #fff; border-color: #fff; }
body.is-preview .topbar { top: 52px; }

/* ============================ audit ============================ */
.audit-sec { padding: var(--rm-space-6) 0; border-top: 1px solid var(--line); }
.audit-q { padding: 10px 0; border-top: 1px solid var(--line); }
.audit-q b { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }
.audit-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 7px; color: var(--ink-soft);
}

/* ============================ finished ============================ */
.finished { text-align: center; padding: var(--rm-space-24) 0; }
.finished img { width: 68px; height: 68px; margin-bottom: var(--rm-space-6); animation: rise 500ms var(--rm-ease-ease-out) both; }
.finished h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.finished p { color: var(--ink-soft); max-width: 54ch; margin: var(--rm-space-4) auto 0; }

/* ============================ toast ============================ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--rm-color-outerspace); color: #fff;
  padding: 13px 22px; border-radius: var(--rm-radius-pill);
  font-size: 0.9375rem; z-index: 90; box-shadow: var(--rm-shadow-lg);
  animation: toastin 300ms var(--rm-ease-ease-out) both;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Staff authentication is intentionally a small shell around the existing application. */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: linear-gradient(145deg, var(--rm-color-white) 0%, var(--rm-color-green-50) 100%);
}
.auth-card {
  width: min(100%, 920px);
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--rm-color-gray-200);
  border-top: 5px solid var(--rm-color-green-500);
  border-radius: var(--rm-radius-lg);
  background: var(--rm-color-white);
  box-shadow: var(--rm-shadow-lg);
}
.auth-card > img { width: min(190px, 55vw); height: auto; margin-bottom: 28px; }
.auth-card h1 { max-width: 20ch; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; }
.auth-intro { max-width: 62ch; margin: 12px 0 0; color: var(--ink-soft); line-height: 1.6; }
.auth-card #clerk-sign-in { margin-top: 22px; }
.auth-google { width: 100%; justify-content: center; }
.auth-message {
  margin: 20px 0;
  padding: 12px 14px;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-color-yellow-50);
  color: var(--rm-color-gray-900);
}
.auth-options { display: grid; gap: 24px; margin-top: 34px; text-align: left; }
.auth-option { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--rm-radius-card); background: var(--surface); }
.auth-option h2 { font-size: 1.25rem; }
.auth-option > p { margin: 6px 0 0; color: var(--ink-soft); line-height: 1.55; }
.auth-option form { display: grid; gap: 10px; margin-top: 18px; }
.auth-option form .btn { width: 100%; min-height: 44px; justify-content: center; margin-top: 4px; white-space: normal; text-align: center; line-height: 1.25; }
.auth-option form .auth-message { margin: 2px 0 0; min-height: 1.4em; }
.auth-link-help { margin-top: 18px; color: var(--ink-soft); }
.auth-link-help summary { cursor: pointer; color: var(--rm-color-active); font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 0.8125rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
@media (min-width: 760px) {
  .auth-options { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .auth-divider { height: 100%; flex-direction: column; }
  .auth-divider::before, .auth-divider::after { width: 1px; height: auto; }
}

.portal-card {
  margin: 20px 0 24px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
}
.portal-card h2 { font-size: 1.25rem; }
.portal-email-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px;
  align-items: end; margin-top: 16px;
}
.portal-email-row label { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 600; }
.portal-email-row input { width: 100%; }
.portal-credentials {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.portal-credential-field { display: grid; gap: 7px; min-width: 0; }
.portal-credential-field label { font-size: 0.8125rem; font-weight: 600; }
.portal-credential-field input { width: 100%; }
.portal-credential-note { margin: 9px 0 0; color: var(--ink-soft); font-size: 0.8125rem; }
@media (max-width: 760px) {
  .portal-credentials { grid-template-columns: 1fr; align-items: stretch; }
  .portal-credentials .btn { width: 100%; justify-content: center; }
}
.portal-sent { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--rm-color-active); font-size: 0.875rem; }
.portal-time {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--rm-radius-sm);
  background: var(--rm-color-green-50); color: var(--ink); font-size: 0.875rem;
}
@media (max-width: 620px) {
  .portal-email-row { grid-template-columns: 1fr; }
  .portal-email-row .btn { width: 100%; justify-content: center; }
}

/* ============================ footer ============================ */
.foot {
  margin-top: var(--rm-space-16); border-top: 1px solid var(--line);
  padding: var(--rm-space-8) 0; font-size: 0.8125rem; color: var(--ink-faint);
  background: var(--surface);
}

/* ============================ print ============================ */
@media print {
  .topbar, .preview-banner, .btn, .savebar, .foot { display: none !important; }
  body { font-size: 11pt; }
  .audit-sec { page-break-inside: avoid; }
}

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:hover, .chip:hover, .rail-seg:hover, .ov-row:hover, .matrix-bulk:hover { transform: none; }
  .savebar-dot { animation: none; }
}

/* ============================ client roster ============================ */
.cl-block { margin-top: var(--rm-space-8); }
.cl-block-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.cl-block-head h2 { font-size: 1.125rem; }

.cl-row {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  padding: 18px 20px; margin-bottom: 10px;
  border: 1px solid var(--line); border-left: 4px solid var(--rm-color-rocket-green);
  border-radius: var(--rm-radius-md); background: var(--rm-color-moonlight);
  transition: box-shadow 200ms var(--rm-ease-ease);
}
.cl-row:hover { box-shadow: var(--rm-shadow-md); }
/* Five action buttons plus a name plus a progress block does not fit on one line at any width
   worth designing for; the client name was wrapping mid-word at 1440px. Content gets the full
   row and the actions sit under it, right-aligned behind a hairline. */
@media (min-width: 760px) {
  .cl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .cl-actions {
    grid-column: 1 / -1; justify-content: flex-end;
    padding-top: 13px; border-top: 1px solid var(--line);
  }
}
.cl-name {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.1875rem; line-height: 1.3;
}
.cl-sub { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 2px; }
.cl-progress-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.cl-progress-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.25rem; color: var(--rm-color-rocket-green); font-variant-numeric: tabular-nums;
}
.cl-bar { height: 7px; border-radius: var(--rm-radius-pill); background: var(--line); overflow: hidden; }
.cl-bar i {
  display: block; height: 100%; background: var(--rm-color-rocket-green);
  border-radius: var(--rm-radius-pill); transition: width 500ms var(--rm-ease-ease-out);
}
.cl-when { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 6px; }
.cl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-empty {
  padding: var(--rm-space-12); text-align: center;
  background: var(--surface); border: 1px dashed var(--rm-color-gray-500);
  border-radius: var(--rm-radius-card);
}
.cl-empty p { margin: 0 0 8px; }

/* ============================ assist banner ============================ */
.assist-banner {
  background: var(--rm-color-booster); color: #fff;
  padding: 12px 0; font-size: 0.9375rem; position: sticky; top: 0; z-index: 50;
}
.assist-banner .wrap { display: flex; align-items: center; gap: var(--rm-space-4); flex-wrap: wrap; }
.assist-banner strong { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }
.assist-banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.assist-banner .btn-ghost:hover { color: #fff; border-color: #fff; }
body.is-assisting .topbar { top: 52px; }

/* ==================== progress animation ====================
   The number and the bar are the payoff for finishing a section, so they get the one piece of
   real motion in the app. Everything else stays restrained. */
@keyframes countPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes segFlash {
  0%   { box-shadow: 0 0 0 0 rgba(83,181,71,0.55); }
  100% { box-shadow: 0 0 0 9px rgba(83,181,71,0); }
}
@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}

.rail.is-bumped .rail-count,
.ov-meter.is-bumped .ov-meter-num {
  animation: countPop 620ms var(--spring) both;
  display: inline-block;
}
.rail.is-bumped .rail-seg.is-full:last-of-type,
.ov-meter.is-bumped .ov-meter-seg.is-full:last-of-type { animation: segFlash 700ms var(--rm-ease-ease-out) both; }

/* A light sweeps across each completed bar so progress reads as momentum, not a static fill. */
.rail-seg.is-full .rail-seg-fill::after,
.ov-meter-seg.is-full i::after {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
}
.rail.is-bumped .rail-seg.is-full .rail-seg-fill::after,
.ov-meter.is-bumped .ov-meter-seg.is-full i::after { animation: sweep 900ms var(--rm-ease-ease-out) both; }
.rail-seg-fill, .ov-meter-seg i { overflow: hidden; }

.ov-meter-seg.is-full i { background: var(--rm-color-rocket-green); }
.ov-meter-num { display: inline-block; }

/* A row that just flipped to done gets one pulse, then settles. */
@keyframes rowDone {
  0%   { background: #DCF2D7; transform: translateX(0); }
  30%  { background: #DCF2D7; transform: translateX(5px); }
  100% { background: #F5FBF4; transform: translateX(0); }
}
.ov-row.just-done { animation: rowDone 900ms var(--rm-ease-ease-out) both; }
.ov-row.is-done .ov-row-num svg { width: 20px; height: 20px; }

/* ============================ handoff ============================
   The answers are the page. One control bar above them, and the red flags behind a closed panel
   so a specialist opening a client record reads the record rather than a wall of warnings. */
.ho-hero { padding: var(--rm-space-12) 0 var(--rm-space-4); }
.ho-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.4rem); margin-top: 6px; }
.ho-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  font-size: 0.9375rem; color: var(--ink-soft);
}
.ho-meta > * + * { padding-left: 8px; border-left: 1px solid var(--line); }
.ho-draft { color: #8A6D00; font-weight: 600; }

/* ---- control bar ---- */
.ho-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: var(--rm-space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rm-radius-md);
  position: sticky; top: 62px; z-index: 20;
}
.ho-scope { display: flex; align-items: center; gap: 9px; font-size: 0.9375rem; color: var(--ink-soft); }
.ho-scope select {
  max-width: 320px; padding: 8px 12px; font-size: 0.9375rem; font-weight: 600;
  background: var(--rm-color-moonlight); border-color: var(--rm-color-gray-500);
}
.ho-answered { font-size: 0.9375rem; color: var(--ink-soft); white-space: nowrap; }
.ho-answered b {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem; color: var(--rm-color-rocket-green);
}
.ho-ghost, .ho-notes-btn {
  font-family: var(--rm-font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: var(--rm-radius-pill);
  border: 1px solid var(--rm-color-gray-500); background: var(--rm-color-moonlight);
  color: var(--ink-soft); white-space: nowrap;
  transition: border-color 160ms var(--rm-ease-ease), color 160ms var(--rm-ease-ease),
              background 160ms var(--rm-ease-ease);
}
.ho-ghost:hover, .ho-notes-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.ho-ghost.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ho-notes-btn { display: inline-flex; align-items: center; gap: 8px; }
.ho-notes-btn.is-open { background: var(--ink); border-color: var(--ink); color: #fff; }
.ho-notes-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rm-radius-pill);
  background: var(--line); color: var(--ink-soft); font-size: 0.75rem; font-weight: 700;
}
.ho-notes-n.is-talk { background: var(--rm-color-nova); color: #fff; }
.ho-notes-btn.is-open .ho-notes-n { background: rgba(255,255,255,0.22); color: #fff; }

/* ---- the notes panel ---- */
.ho-notes {
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
  background: var(--rm-color-moonlight); margin-bottom: var(--rm-space-6); overflow: hidden;
  animation: rise 300ms var(--rm-ease-ease-out) both;
}
.ho-notes-lede {
  margin: 0; padding: 14px 20px; font-size: 0.9375rem; color: var(--ink-soft);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.ho-notes-clean { padding: 16px 20px; font-size: 0.9375rem; color: var(--rm-color-active); }
.ho-note {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.ho-note:first-of-type { border-top: none; }
@media (min-width: 720px) { .ho-note { grid-template-columns: 152px 1fr; gap: 18px; align-items: start; } }
.ho-note-tag {
  display: inline-flex; align-items: center; justify-content: center; align-self: start;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--rm-radius-pill); white-space: nowrap;
}
.ho-note-tag.is-talk  { background: var(--rm-color-nova); color: #fff; }
.ho-note-tag.is-check { background: #FFE9A8; color: #7A5E00; }
.ho-note-tag.is-note  { background: #EAF5FF; color: #1F6FB8; }
.ho-note-title {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1rem; line-height: 1.4;
}
.ho-note-detail { margin: 5px 0 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; max-width: 76ch; }
.ho-note-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ho-note-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  padding: 3px 8px; color: var(--ink-soft); cursor: pointer;
}
.ho-note-link:hover { border-color: var(--rm-color-rocket-green); color: var(--ink); }

/* ---- team filter ---- */
.ho-filter {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: var(--rm-space-6);
}
.ho-filter-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint); margin-right: 4px;
}
.ho-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rm-font-body); font-size: 0.875rem; font-weight: 500; cursor: pointer;
  background: var(--rm-color-moonlight); border: 1px solid var(--rm-color-gray-500);
  border-radius: var(--rm-radius-pill); padding: 6px 14px; color: var(--ink-soft);
  transition: border-color 160ms var(--rm-ease-ease), color 160ms var(--rm-ease-ease),
              background 160ms var(--rm-ease-ease);
}
.ho-filter-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.ho-filter-btn.is-on {
  background: var(--rm-color-rocket-green); border-color: var(--rm-color-rocket-green);
  color: #fff; font-weight: 600;
}
.ho-filter-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--rm-radius-pill);
  background: var(--rm-color-nova); color: #fff; font-size: 0.6875rem; font-weight: 700;
}
.ho-filter-btn.is-on .ho-filter-n { background: rgba(255,255,255,0.28); }

/* ---- jump nav (kept for the note links to target) ---- */
.ho-jump {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: var(--rm-space-6);
}
.ho-jump-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint); margin-right: 4px;
}
.ho-jump-btn {
  font-family: var(--rm-font-body); font-size: 0.8125rem; cursor: pointer;
  background: var(--rm-color-moonlight); border: 1px solid var(--line);
  border-radius: var(--rm-radius-pill); padding: 4px 11px; color: var(--ink-soft);
  transition: border-color 160ms var(--rm-ease-ease), color 160ms var(--rm-ease-ease);
}
.ho-jump-btn:hover { border-color: var(--rm-color-rocket-green); color: var(--ink); }
.ho-jump-btn.is-gap { border-style: dashed; }

/* ---- the answers ---- */
.ho-sec { margin-bottom: var(--rm-space-6); scroll-margin-top: 140px; }
.ho-sec-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 20px; background: var(--accent-tint);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--rm-radius-card) var(--rm-radius-card) 0 0;
}
.ho-sec-head h3 { font-size: 1.0625rem; }
.ho-sec-count { font-size: 0.8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.ho-q {
  display: grid; grid-template-columns: 1fr; gap: 5px;
  padding: 13px 20px; border: 1px solid var(--line); border-top: none;
  background: var(--rm-color-moonlight); scroll-margin-top: 150px;
}
@media (min-width: 820px) {
  .ho-q { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 26px; align-items: start; }
}
.ho-q:nth-of-type(even) { background: #FCFCFD; }
.ho-q.is-gap { background: #FFFDF8; }
.ho-sec .ho-q:last-of-type { border-radius: 0 0 var(--rm-radius-card) var(--rm-radius-card); }
.ho-q-head { display: flex; flex-direction: column; gap: 3px; }
.ho-q-label { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.45; }
.ho-q-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ho-q-answer { min-width: 0; }
.ho-value {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem; overflow-wrap: anywhere;
}
.ho-value-long { font-family: var(--rm-font-body); font-weight: 400; font-size: 1rem; line-height: 1.55; }
.ho-missing { color: var(--ink-faint); font-size: 0.9375rem; }
.ho-none { color: var(--ink-soft); font-size: 0.9375rem; }
.ho-none::before { content: '\2715  '; color: var(--ink-faint); font-size: 0.8125rem; }
.ho-warn { color: #8A6D00; font-size: 0.8125rem; margin: 6px 0 0; }
.ho-hidden-note {
  padding: 9px 20px; font-size: 0.8125rem; color: var(--ink-faint);
  border: 1px solid var(--line); border-top: none; background: var(--surface);
  border-radius: 0 0 var(--rm-radius-card) var(--rm-radius-card);
}
.ho-empty {
  padding: var(--rm-space-12); text-align: center; color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--rm-color-gray-500);
  border-radius: var(--rm-radius-card);
}

.ho-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ho-chip {
  font-size: 0.875rem; padding: 3px 11px; border-radius: var(--rm-radius-pill);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600;
}
.ho-files { margin: 0; padding-left: 18px; font-size: 0.9375rem; }

/* Provenance stays quiet. A confirmed answer is just an answer. */
.ho-int, .ho-from, .ho-also {
  font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink-faint);
}
.ho-int { color: #6B4B8C; font-weight: 700; text-transform: uppercase; }
.ho-from.is-pending { color: #8A6D00; font-weight: 700; }

table.ho-rep { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
table.ho-rep th, table.ho-rep td { padding: 6px 10px; text-align: left; border: 1px solid var(--line); }
table.ho-rep th {
  background: var(--surface); font-family: var(--rm-font-display);
  font-weight: var(--rm-font-weight-semibold); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
}
.ho-matrix { margin-bottom: 14px; }
.ho-matrix h5 {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.9375rem; margin: 0 0 6px;
}

/* A row a note links to lights up briefly so the eye lands on it. */
.ho-q.is-lit, .ho-sec.is-lit { animation: lit 1600ms var(--rm-ease-ease-out) both; }
@keyframes lit { 0%, 55% { background: #FFF3C4; } 100% { background: transparent; } }

@media print {
  .ho-bar, .ho-jump, .ho-note-links { display: none !important; }
  .ho-sec, .ho-note { page-break-inside: avoid; }
}

/* ==================== scope changed after they started ====================
   A form that grows under a client is the fastest way to lose their trust, so the change gets
   announced, the reassurance is explicit, and the new sections are one click away. */
.whatsnew {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: var(--rm-space-4); padding: 15px 18px;
  background: #EAF5FF; border: 1px solid #CFE6FA; border-radius: var(--rm-radius-md);
  font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft);
  animation: rise 420ms var(--rm-ease-ease-out) both;
}
.whatsnew strong { color: var(--ink); }
.whatsnew em { font-style: normal; font-weight: 600; color: var(--rm-color-active); }
.whatsnew-icon { display: flex; flex: 0 0 18px; margin-top: 2px; }
.whatsnew-links { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.whatsnew-link {
  font-family: var(--rm-font-body); font-size: 0.875rem; font-weight: 600; cursor: pointer;
  background: var(--rm-color-moonlight); border: 1px solid #CFE6FA;
  border-radius: var(--rm-radius-pill); padding: 5px 13px; color: #1F6FB8;
  transition: transform 180ms var(--rm-ease-ease), border-color 180ms var(--rm-ease-ease);
}
.whatsnew-link:hover { transform: translateY(-1px); border-color: #1F6FB8; }

.pill.is-new { background: var(--rm-color-booster); color: #fff; border-color: transparent; }

.stale-note {
  margin-top: var(--rm-space-4); padding: 14px 18px;
  background: #FFF9E5; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-md);
  font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.stale-note strong { color: var(--ink); }
.stale-note .btn { margin-left: auto; }
.stale-inline {
  margin: 14px 0 0; padding: 10px 14px; font-size: 0.875rem; line-height: 1.5;
  background: #FFF9E5; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-sm);
  color: #7A5E00;
}

/* ==================== roster row, tightened ====================
   Four coloured pills stacked over two lines was eating the row. The status is the one thing that
   deserves a pill; the counts are secondary, so they read as quiet inline text on a single line
   with the timestamp. */
.cl-progress-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; margin-bottom: 0;
}
.cl-progress-num {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.125rem; line-height: 1; color: var(--rm-color-rocket-green);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cl-bar { height: 6px; min-width: 60px; }

.pill-sm {
  font-size: 0.75rem; padding: 3px 10px; white-space: nowrap;
}
.pill.is-quiet { background: transparent; color: var(--ink-faint); border-color: var(--line); }

.cl-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 0.8125rem; line-height: 1.4;
}
.cl-flag { font-weight: 600; white-space: nowrap; }
.cl-flag.is-talk  { color: var(--rm-color-nova); }
.cl-flag.is-check { color: #8A6D00; }
/* A thin separator between counts, without markup for it. */
.cl-meta > * + * { padding-left: 8px; border-left: 1px solid var(--line); }
.cl-when { color: var(--ink-faint); }

/* ==================== required fields ==================== */
.req-star { color: var(--rm-color-nova); font-weight: 700; }
.req-hint {
  margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.45; color: #8A6D00;
  background: #FFF9E5; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-sm);
  padding: 7px 11px;
}
input.is-empty-required { border-color: #E3C97A; background: #FFFDF7; }
input.is-empty-required:focus {
  border-color: var(--rm-color-rocket-green); background: var(--rm-color-moonlight);
}

/* ==================== send them off site and back ====================
   A link out of the form is a risk: people leave and do not return. So it looks like a primary
   action, says it opens in a new tab, and the step after it is a tick box that only makes sense
   once they are back. */
.extlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--rm-font-body); font-weight: 600; font-size: 1rem;
  padding: 12px 22px; border-radius: var(--rm-radius-pill);
  background: var(--rm-color-rocket-green); color: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(83,181,71,0.28);
  transition: transform 220ms var(--spring), background 180ms var(--rm-ease-ease),
              box-shadow 220ms var(--rm-ease-ease);
}
.extlink:hover {
  background: var(--rm-color-hover); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(83,181,71,0.34);
}
.extlink:active { background: var(--rm-color-active); transform: translateY(0) scale(0.98); box-shadow: none; }
.extlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ==================== AI research, and the PM reviewing it ====================
   Sits above the question panels on the setup page, because doing this first is what makes the
   rest of that page short. Blue rather than green: this is a suggestion, not a commitment. */
.rs {
  border: 1px solid #CFE6FA; border-radius: var(--rm-radius-card);
  background: #F7FBFF; margin-bottom: var(--rm-space-6); overflow: hidden;
}

.rs-sub { margin: 7px 0 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.55; max-width: 66ch; }

.rs-inputs { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.rs-known { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.9375rem; }
.rs-known-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint);
}
.rs-warn { color: #8A6D00; font-size: 0.875rem; }

.rs-drop {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 14px 16px; border: 1.5px dashed #B8D9F5; border-radius: var(--rm-radius-md);
  background: var(--rm-color-moonlight); font-size: 0.9375rem; color: var(--ink-soft);
  line-height: 1.5;
  transition: border-color 180ms var(--rm-ease-ease), background 180ms var(--rm-ease-ease);
}
.rs-drop:hover, .rs-drop:focus-within { border-color: var(--rm-color-booster); background: #F2F9FF; }
.rs-drop b { color: var(--ink); }
.rs-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-docs li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 13px; background: var(--rm-color-moonlight);
  border: 1px solid var(--line); border-radius: var(--rm-radius-sm); font-size: 0.9375rem;
}
.rs-docs li > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.rs-docs li > span:nth-child(2) { margin-left: auto; }
.rs-note { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.5; }

.rs-result { padding: 16px 22px; border-top: 1px solid #E3F0FB; background: var(--rm-color-moonlight); }
.rs-result-head { font-size: 0.9375rem; color: var(--ink-soft); }
.rs-result-head b { color: var(--rm-color-active); font-size: 1.0625rem; }
.rs-summary { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.6; max-width: 78ch; }
.rs-watch {
  margin-top: 14px; padding: 12px 16px; font-size: 0.9375rem;
  background: #FFF9E5; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-md);
}
.rs-watch ul { margin: 6px 0 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.55; }

/* ---- the review queue ---- */
.rq {
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
  background: var(--rm-color-moonlight); margin-bottom: var(--rm-space-6); overflow: hidden;
}
.rq-head {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.rq-head h2 { font-size: 1.25rem; }
.rq-head .btn { margin-left: auto; flex: 0 0 auto; }

.rq-row {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  padding: 15px 22px; border-top: 1px solid var(--line);
}
.rq-row:first-of-type { border-top: none; }
@media (min-width: 860px) { .rq-row { grid-template-columns: 1fr auto; align-items: center; gap: 24px; } }
.rq-row.is-low { background: #FFFDF8; }
.rq-main { min-width: 0; }
.rq-q { font-size: 0.9375rem; color: var(--ink-soft); }
.rq-v {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem; margin-top: 2px; overflow-wrap: anywhere;
}
.rq-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.rq-conf {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 9px; border-radius: var(--rm-radius-pill);
}
.rq-conf.is-high   { background: #EEF8EC; color: var(--rm-color-active); }
.rq-conf.is-medium { background: #EAF5FF; color: #1F6FB8; }
.rq-conf.is-low    { background: #FFF9E5; color: #8A6D00; }
.rq-src { font-size: 0.8125rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.rq-note { margin: 6px 0 0; font-size: 0.875rem; color: #8A6D00; line-height: 1.5; }
.rq-acts { display: flex; gap: 7px; flex-wrap: wrap; }

/* A field the PM jumped to from "Fix it" lights up so they land on the right row. */
.field.is-lit { animation: lit 1600ms var(--rm-ease-ease-out) both; }

.rq-held {
  padding: 12px 22px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft);
  background: #FFF9E5; border-bottom: 1px solid #F2E2A8;
}
.rq-held b { color: var(--ink); }

/* The two things research actually needs, side by side at the top of the card. Putting the website
   field here rather than only in the question panels below means the PM fills in the one thing that
   most improves the result before they press the button, not after. */
.rs-two { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 780px) { .rs-two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } }
.rs-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rs-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint);
}
.rs-field input[type=url] { max-width: 100%; background: var(--rm-color-moonlight); }
.rs-hint { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }
.rs-field .rs-drop { margin: 0; }

/* Staged progress. The run is several short calls, so the PM watches steps complete rather than
   guessing whether a spinner is stuck. */
.rs-prog { padding: 16px 22px; border-top: 1px solid #E3F0FB; background: var(--rm-color-moonlight); }
.rs-prog-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 0.9375rem; margin-bottom: 9px;
}
.rs-prog-head > span:first-child { font-weight: 600; }
.rs-prog-bar {
  height: 7px; border-radius: var(--rm-radius-pill); background: var(--line); overflow: hidden;
}
.rs-prog-bar i {
  display: block; height: 100%; border-radius: var(--rm-radius-pill);
  background: var(--rm-color-booster);
  transition: width 400ms var(--rm-ease-ease-out);
}
.rs-prog .rs-hint { margin-top: 9px; }

.rs-problems {
  margin-top: 14px; padding: 12px 16px; font-size: 0.875rem; line-height: 1.55;
  background: #FFF9E5; border: 1px solid #F2E2A8; border-radius: var(--rm-radius-md);
  color: var(--ink-soft);
}
.rs-problems b { color: var(--ink); display: block; margin-bottom: 4px; }
.rs-problems ul { margin: 0 0 6px; padding-left: 20px; }

/* Turning absence into action. Every "we could not find X" used to be a warning; the ones that
   matter are now a numbered list of things to ask on the call. */
.rs-ask {
  margin-top: 14px; padding: 13px 16px; font-size: 0.9375rem; line-height: 1.6;
  background: #EAF5FF; border: 1px solid #CFE6FA; border-radius: var(--rm-radius-md);
}
.rs-ask b { display: block; margin-bottom: 6px; color: #1F6FB8; }
.rs-ask ol { margin: 0; padding-left: 22px; color: var(--ink); }
.rs-ask li { margin-bottom: 4px; }

/* ============================ business hours ============================
   Restored: a wholesale rewrite of the handoff block above deleted these, which left the hours grid
   and the whole tailoring page unstyled. `validate.mjs` now fails if a class used in JS has no rule. */
.hours { border: 1px solid var(--line); border-radius: var(--rm-radius-md); overflow: hidden; }
.hours-row {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line); align-items: center;
}
.hours-row:first-child { border-top: none; background: #F8FCF7; }
.hours-row.is-closed { background: var(--surface); }
@media (min-width: 560px) { .hours-row { grid-template-columns: 150px 145px 1fr; gap: 12px; } }
.hours-day {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
  font-size: 0.9375rem; font-weight: 600;
}
.hours-follows {
  font-size: 0.6875rem; font-weight: 400; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hours-row select { max-width: 100%; padding: 6px 9px; font-size: 0.9375rem; }
.hours-times { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.hours-times.is-hidden { visibility: hidden; }
.hours-times select { max-width: 128px; }
.hours-to { font-size: 0.875rem; color: var(--ink-faint); flex: 0 0 auto; }
.hours-hint { font-size: 0.8125rem; color: var(--ink-faint); margin: 9px 0 0; }

/* ============================ review and tailor ============================ */
.tailor-sec { margin-bottom: var(--rm-space-6); }
.tailor-list { border: 1px solid var(--line); border-top: none; background: var(--rm-color-moonlight); }
.tailor-q {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 14px 20px; border-top: 1px solid var(--line); align-items: start;
}
.tailor-q:first-child { border-top: none; }
@media (min-width: 800px) { .tailor-q { grid-template-columns: auto 1fr auto; } }
.tailor-q.is-off { background: var(--surface); }
.tailor-q.is-off .tailor-label,
.tailor-q.is-off .field-help,
.tailor-q.is-off .field-tags { opacity: 0.45; }
.tailor-label {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1rem; line-height: 1.4; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.tailor-body { min-width: 0; }
.tailor-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.tailor-switch {
  position: relative; display: block; width: 42px; height: 24px; cursor: pointer;
  margin-top: 2px; flex: 0 0 42px;
}
.tailor-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tailor-track {
  position: absolute; inset: 0; border-radius: var(--rm-radius-pill);
  background: var(--rm-color-gray-500); transition: background 200ms var(--rm-ease-ease);
}
.tailor-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 220ms var(--spring);
}
.tailor-switch input:checked + .tailor-track { background: var(--rm-color-rocket-green); }
.tailor-switch input:checked + .tailor-track::after { transform: translateX(18px); }
.tailor-switch input:focus-visible + .tailor-track { outline: 2px solid var(--ink); outline-offset: 3px; }
.tailor-switch.is-locked { cursor: not-allowed; opacity: 0.5; }
.tailor-switch.is-locked input { cursor: not-allowed; }

.tailor-add {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 20px; background: var(--accent-tint);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--rm-radius-card) var(--rm-radius-card);
}
.tailor-add input { flex: 1 1 260px; max-width: none; background: var(--rm-color-moonlight); }

/* ---- structural leftovers the same deletion took out ---- */
.cl-main { min-width: 0; }
.cl-progress { min-width: 0; }
.ho-body { min-width: 0; }

@media print {
  .tailor-switch, .tailor-add, .tailor-actions { display: none !important; }
  .tailor-q.is-off { display: none !important; }
}

/* ============================ working spinner ============================ */
.spin {
  display: inline-block; width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px solid rgba(60,165,255,0.28); border-top-color: var(--rm-color-booster);
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spin { border-color: rgba(255,255,255,0.35); border-top-color: #fff; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* A week of hours, a licence row, a location: shown as a small table so it can be verified at a
   glance rather than read as a comma-joined sentence. */
table.wk { border-collapse: collapse; font-size: 0.9375rem; margin-top: 4px; }
table.wk td, table.wk th { padding: 3px 14px 3px 0; text-align: left; vertical-align: top; }
table.wk td:first-child { color: var(--ink-soft); white-space: nowrap; }
table.wk td:last-child { font-weight: 600; }
table.wk th {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-faint); padding-bottom: 5px;
}
table.wk-wide td:first-child { color: var(--ink); font-weight: 600; }
table.wk-wide td { font-weight: 400; }
.prefilled.is-wide { grid-template-columns: 1fr; }
@media (min-width: 760px) { .prefilled.is-wide { grid-template-columns: 1fr auto; align-items: start; } }
.prefilled.is-wide .prefilled-actions { padding-top: 4px; }

/* Research notes: closed by default on setup, and repeated in the handoff so the account team finds
   them weeks later without going back to the setup page. */
.rs-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rs-conflict {
  padding: 13px 16px; font-size: 0.9375rem; line-height: 1.55;
  background: #FDEDF3; border: 1px solid #F3C9D9; border-radius: var(--rm-radius-md);
}
.rs-conflict > b { display: block; margin-bottom: 8px; color: #B03567; }
.rs-conflict-item + .rs-conflict-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid #F3C9D9; }
.rs-conflict-q { font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); }
.rs-conflict-differs { margin: 3px 0 0; font-size: 0.875rem; color: var(--ink-soft); }

.ho-research {
  border: 1px solid var(--line); border-radius: var(--rm-radius-card);
  background: var(--rm-color-moonlight); margin-bottom: var(--rm-space-4); overflow: hidden;
}
.ho-research-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.ho-note-list { margin: 4px 0 0; padding-left: 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.ho-note-list li { margin-bottom: 3px; }
.ho-research .wk { margin-top: 6px; }

/* Correcting a proposal in place, so a nearly-right answer costs one interaction rather than
   accept-then-go-hunting for the field. */
.rq-row.is-editing { background: #F7FBFF; }
.rq-edit {
  margin-top: 6px; max-width: 460px; width: 100%;
  background: var(--rm-color-moonlight); border-color: var(--rm-color-booster);
}
textarea.rq-edit { min-height: 68px; }

/* Nothing overflows. Long URLs in a conflict table, a service-area list of nineteen cities, a
   research source that is a full path: all of it has to wrap inside its container. */
.rs-conflict, .ho-research, .rs-notes, .rq-row, .ho-q, .prefilled { min-width: 0; }
.rs-conflict table.wk, .ho-research table.wk { width: 100%; table-layout: fixed; }
.rs-conflict table.wk td, .ho-research table.wk td { overflow-wrap: anywhere; word-break: break-word; }
.rs-conflict table.wk td:first-child, .ho-research table.wk td:first-child { width: 34%; white-space: normal; }
.rs-conflict-differs, .rs-conflict-q, .ho-note-title, .ho-note-detail,
.rq-q, .rq-v, .rq-src, .rq-note, .rs-summary, .rs-note { overflow-wrap: anywhere; }
.rs-watch li, .rs-ask li, .ho-note-list li { overflow-wrap: anywhere; }
.rs-result-head { flex-wrap: wrap; row-gap: 8px; }
table.wk-wide { width: 100%; }
table.wk-wide td, table.wk-wide th { overflow-wrap: anywhere; }

/* The research card, tightened: the button row sits under the copy rather than fighting it. */

.rs-go .btn { flex: 0 0 auto; }

.btn .spin { margin-right: 7px; vertical-align: -2px; }

/* ==================== the research card, one layout ====================
   There were three competing .rs-go rules from successive edits, and the oldest one (margin-left:auto,
   column, flex-end) kept winning, which floated the button to the right at an odd height with the
   checkbox stranded under it. This is the only definition. */
.rs-head { display: block; padding: 20px 22px; border-bottom: 1px solid #E3F0FB; }
.rs-head h2 { font-size: 1.25rem; margin: 4px 0 0; }
.rs-head .rs-sub { max-width: 60ch; margin-top: 7px; }

.rs-go {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}
.rs-go .btn { flex: 0 0 auto; }
.rs-toggle {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  flex: 1 1 300px; min-width: 260px; max-width: 46ch;
  font-size: 0.875rem; line-height: 1.45; text-align: left;
  padding: 9px 12px; border-radius: var(--rm-radius-md);
  border: 1px solid transparent;
  transition: background 160ms var(--rm-ease-ease), border-color 160ms var(--rm-ease-ease);
}
.rs-toggle:hover { background: var(--rm-color-moonlight); border-color: #CFE6FA; }
.rs-toggle input {
  width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px;
  accent-color: var(--rm-color-booster); cursor: pointer;
}
.rs-toggle .faint { display: block; font-size: 0.8125rem; margin-top: 2px; }
.btn .spin { margin-right: 7px; vertical-align: -2px; }

/* A repeating row with more than four columns, as labelled pairs rather than a squeezed table. */
.rowset { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rowset-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 20px; padding: 11px 14px;
  background: var(--rm-color-moonlight); border: 1px solid var(--line);
  border-radius: var(--rm-radius-md);
}
.rowset-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rowset-key {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
}
.rowset-val { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }

/* Mismatches get their own view in the handoff: these are the things that quietly break a listing or
   a call-tracking swap, so they are not buried in a notes panel. */
.ho-mismatch {
  border: 1px solid #F3C9D9; border-radius: var(--rm-radius-card);
  background: var(--rm-color-moonlight); overflow: hidden;
}
.ho-mismatch-head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 20px; background: #FDEDF3; border-bottom: 1px solid #F3C9D9;
}
.ho-mismatch-head b { color: #B03567; }
.ho-mismatch-item { padding: 15px 20px; border-top: 1px solid var(--line); min-width: 0; }
.ho-mismatch-item:first-of-type { border-top: none; }
.ho-mismatch-q {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 1.0625rem; overflow-wrap: anywhere;
}
.ho-mismatch-differs { margin: 4px 0 8px; font-size: 0.9375rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ho-mismatch table.wk { width: 100%; table-layout: fixed; }
.ho-mismatch table.wk td { overflow-wrap: anywhere; }

/* A disabled action should look disabled, not merely fail to respond. */
.btn:disabled, .btn[disabled] {
  opacity: 0.42; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; }

/* Services grouped per trade. One run-on list of HVAC plus plumbing plus electrical reads as noise. */
.chip-group + .chip-group { margin-top: 14px; }
.chip-group-label {
  display: block; margin-bottom: 7px;
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint);
}

/* Dictation. Hidden until the browser proves it can do speech recognition. */
.dictate {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; cursor: pointer;
  font-family: var(--rm-font-body); font-size: 0.8125rem; font-weight: 600;
  padding: 6px 13px; border-radius: var(--rm-radius-pill);
  border: 1px solid var(--rm-color-gray-500); background: var(--rm-color-moonlight);
  color: var(--ink-soft);
  transition: border-color 160ms var(--rm-ease-ease), color 160ms var(--rm-ease-ease);
}
.dictate:hover { border-color: var(--rm-color-rocket-green); color: var(--ink); }
.dictate[hidden] { display: none; }
.dictate.is-live {
  background: var(--rm-color-nova); border-color: var(--rm-color-nova); color: #fff;
  animation: pulseMic 1.4s ease-in-out infinite;
}
@keyframes pulseMic { 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) { .dictate.is-live { animation: none; } }

.rq-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

/* The dictation clean-up, offered rather than applied. The client sees what changed and accepts it,
   which is the difference between helping them write and rewriting what they said. */
.tidy {
  margin-top: 10px; border: 1px solid #CFE6FA; border-radius: var(--rm-radius-md);
  background: #F7FBFF; overflow: hidden;
  animation: rise 300ms var(--rm-ease-ease-out) both;
}
.tidy.is-working {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; font-size: 0.875rem; color: var(--ink-soft);
}
.tidy-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 15px; background: #EAF5FF; border-bottom: 1px solid #CFE6FA;
  font-size: 0.8125rem;
}
.tidy-head b { color: #1F6FB8; font-size: 0.875rem; }
.tidy-body {
  padding: 13px 15px; font-size: 0.9375rem; line-height: 1.6;
  overflow-wrap: anywhere; white-space: normal;
}
.tidy-acts { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 15px 13px; }

.tidy-slot:empty { display: none; }

/* The in-progress view. Deliberately plainer than the handoff, and says so, because it is a
   check-in aid rather than the record a specialist builds from. */
.prog-note {
  padding: 13px 18px; margin-bottom: var(--rm-space-6);
  background: #EAF5FF; border: 1px solid #CFE6FA; border-radius: var(--rm-radius-md);
  font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft);
}
.prog-left {
  border: 1px solid #F2E2A8; border-radius: var(--rm-radius-card);
  background: #FFFDF7; margin-bottom: var(--rm-space-6); overflow: hidden;
}
.prog-left-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 18px; background: #FFF9E5; border-bottom: 1px solid #F2E2A8;
}
.prog-left-head b { color: #7A5E00; }
.prog-left-sec { padding: 12px 18px; border-top: 1px solid #F7F0DC; }
.prog-left-sec:first-of-type { border-top: none; }
.prog-left-title {
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold);
  font-size: 0.875rem;
}
.prog-left-sec ul { margin: 5px 0 0; padding-left: 20px; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.6; }
.prog-done {
  padding: 14px 18px; margin-bottom: var(--rm-space-6);
  background: #F4FBF3; border: 1px solid #C9E7C3; border-radius: var(--rm-radius-md);
  color: var(--rm-color-active); font-size: 0.9375rem;
}
.prog-secs { border: 1px solid var(--line); border-radius: var(--rm-radius-card); overflow: hidden; }
.prog-sec {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--rm-color-moonlight);
}
@media (min-width: 620px) { .prog-sec { grid-template-columns: minmax(0,1fr) 160px auto; align-items: center; gap: 16px; } }
.prog-sec:first-child { border-top: none; }
.prog-sec.is-done { background: #FAFDFA; }
.prog-sec-name { font-size: 0.9375rem; font-weight: 600; }
.prog-sec-bar { height: 6px; border-radius: var(--rm-radius-pill); background: var(--line); overflow: hidden; }
.prog-sec-bar i { display: block; height: 100%; background: var(--rm-color-rocket-green); }
.prog-sec-count { font-size: 0.8125rem; color: var(--ink-soft); white-space: nowrap; }
.prog-sec.is-done .prog-sec-count { color: var(--rm-color-active); font-weight: 600; }

/* Ben was right, it was tiny. */
.topbar-logo { height: 38px; }

/* A time estimate, measured from what previous clients actually took rather than guessed. */
.ov-time {
  margin-top: 8px; font-size: 0.9375rem; color: var(--ink-soft);
  display: inline-block; padding: 5px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rm-radius-pill);
}

.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--rm-color-active); text-decoration: underline;
}
.linkish:hover { color: var(--ink); }
#rsCrm { min-height: 68px; font-size: 0.875rem; }

/* 7. Numeric columns centred so a pricing matrix reads as a table rather than a ragged list. */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix input, .matrix select { text-align: center; }
.matrix input[type=text]:not([data-col=notes]):not([data-col=brands]):not([data-col=promo]) { text-align: center; }
.matrix td[data-col=notes] input, .matrix td[data-col=brands] input, .matrix td[data-col=promo] input { text-align: left; }
table.ho-rep td:not(:first-child), table.ho-rep th:not(:first-child) { text-align: center; }

/* Where a researched answer came from. Colour-coded by origin, because "our own diagnostic" and
   "a Yelp listing" deserve different amounts of trust. */
.rq-origin, .ho-origin {
  font-size: 0.6875rem; font-weight: 600; padding: 2px 8px;
  border-radius: var(--rm-radius-pill); white-space: nowrap; overflow-wrap: anywhere;
}
.rq-origin { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.rq-origin.is-drive, .rq-origin.is-crm, .rq-origin.is-diagnostic {
  background: #EEF8EC; color: var(--rm-color-active); border-color: #C9E7C3;
}
.rq-origin.is-website { background: #EAF5FF; color: #1F6FB8; border-color: #CFE6FA; }
.rq-origin.is-gbp, .rq-origin.is-social, .rq-origin.is-directories,
.rq-origin.is-licenses, .rq-origin.is-competitors {
  background: #FFF9E5; color: #7A5E00; border-color: #F2E2A8;
}
.ho-origin { color: var(--ink-faint); padding: 0; }
.ho-origin::before { content: '\00b7  '; }

/* The account brief. Above the answers and open by default, because a specialist opening a client for
   the first time needs the people and the promises before any field value means anything. */
.brf {
  border: 1px solid #CFE6FA; border-radius: var(--rm-radius-card);
  background: #F7FBFF; margin-bottom: var(--rm-space-6); overflow: hidden;
}
.brf-head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 15px 20px; background: #EAF5FF; border-bottom: 1px solid #CFE6FA;
}
.brf-head b { display: block; color: #1F6FB8; font-size: 1rem; }
.brf-head .faint { display: block; font-size: 0.8125rem; margin-top: 2px; max-width: 62ch; }
.brf-body { padding: 4px 20px 16px; }
.brf-part { padding: 13px 0; border-bottom: 1px solid #E3F0FB; min-width: 0; }
.brf-part:last-of-type { border-bottom: none; }
.brf-part > b {
  display: block; margin-bottom: 5px;
  font-family: var(--rm-font-display); font-weight: var(--rm-font-weight-semibold); font-size: 0.9375rem;
}
.brf-part p { margin: 0; font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.brf-part ul { margin: 0; padding-left: 20px; font-size: 0.9375rem; line-height: 1.65; }
.brf-part li { margin-bottom: 4px; overflow-wrap: anywhere; }
.brf-part.is-talk > b { color: var(--rm-color-nova); }
.brf-part.is-care > b { color: #B03567; }
.brf-part.is-time > b { color: #7A5E00; }
.brf-src { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

@media print { .brf-head button { display: none !important; } .brf { page-break-inside: avoid; } }

/* One site per line, with a plus to add another. A comma-separated box is fine for two and unreadable
   for five, and people paste one at a time anyway. */
.rs-extra-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.rs-extra-row input { flex: 1 1 auto; min-width: 0; }

/* What we already hold, stated rather than asked for. */
.rs-have { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.6; }
.rs-have li { padding: 5px 0; border-bottom: 1px solid #E3F0FB; overflow-wrap: anywhere; }
.rs-have li:last-child { border-bottom: none; }
.rs-have b { color: var(--ink); }

/* How far the research should go. Three tiers, because they differ in cost, speed and how much they
   can be trusted, not just in thoroughness. */
.rs-scope { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 260px; }
.rs-scope-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 13px; border-radius: var(--rm-radius-md);
  border: 1px solid transparent; font-size: 0.875rem; line-height: 1.45;
  transition: background 160ms var(--rm-ease-ease), border-color 160ms var(--rm-ease-ease);
}
.rs-scope-opt:hover { background: var(--rm-color-moonlight); border-color: #CFE6FA; }
.rs-scope-opt.is-on { background: var(--rm-color-moonlight); border-color: var(--rm-color-booster); }
.rs-scope-opt input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; accent-color: var(--rm-color-booster); }
.rs-scope-opt b { display: block; }
.rs-scope-opt .faint { display: block; font-size: 0.8125rem; margin-top: 1px; }

/* Choosing the customer rather than typing a name. */
.cust-chosen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--rm-radius-md);
  background: #EEF8EC; border: 1px solid #C9E7C3;
}
.cust-chosen b { display: block; font-size: 1.0625rem; }
.cust-chosen .faint { font-size: 0.8125rem; }
#clientPick { max-width: 100%; }

/* Products read out of the signed contract. Proposed with the contract's own wording beside each one,
   because a manager can check a quote in seconds and cannot check a bare product name. */
.ctr {
  margin: 0 0 16px; border: 1px solid #CFE6FA; border-radius: var(--rm-radius-md);
  background: #F7FBFF; overflow: hidden;
  animation: rise 300ms var(--rm-ease-ease-out) both;
}
.ctr.is-working, .ctr.is-quiet {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; font-size: 0.875rem; color: var(--ink-soft);
}
.ctr.is-quiet { background: var(--surface); border-color: var(--line); }
.ctr-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 15px; background: #EAF5FF; border-bottom: 1px solid #CFE6FA; font-size: 0.8125rem;
}
.ctr-head b { color: #1F6FB8; font-size: 0.9375rem; }
.ctr-head .faint { overflow-wrap: anywhere; }
.ctr-list { list-style: none; margin: 0; padding: 8px 15px 4px; }
.ctr-list li { padding: 5px 0; font-size: 0.9375rem; line-height: 1.5; }
.ctr-list li b { display: block; }
.ctr-list .faint { font-size: 0.8125rem; overflow-wrap: anywhere; }
.ctr-none, .ctr-note {
  margin: 0; padding: 6px 15px; font-size: 0.8125rem; color: var(--ink-soft); overflow-wrap: anywhere;
}
.ctr-acts { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 15px 13px; }