/* VioVerse Mockup — Question flow */

/* FS-D5 (2026-08-03): smoothing normalized to match .home app-wide. */
.questions { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(100dvh - var(--shell-top-gap, 10px) - var(--shell-nav-h, 60px)); padding: 8vh 24px 40px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* FS-2 (2026-08-02). The root above has ALWAYS declared the family
   correctly -- and every form control below still rendered wrong, because
   controls do not inherit font-family at all. The UA stylesheet hard-sets
   Arial on button/input/select and monospace on textarea, and neither the
   root nor a `font-size`/`font-weight` rule can reach past that. Measured:
   .q-back and .q-next (the Back and Continue buttons on every step of the
   flow) were Arial, the Q1 date pills were Arial, and the Q9a/Q9c
   free-text boxes were monospace.

   Grouped rather than per-selector so a control added here later inherits
   by default instead of silently arriving in Arial. Known limitation:
   <option> inside a <select> is OS-rendered on most platforms and will
   not follow this.

   This rule is descendant-scoped and therefore does NOT reach `.q-back`
   on the auth screens -- index.html:1252 and :1265 give the Sign in /
   Create your account Back button class="q-back auth-back", outside
   .questions entirely. `.q-back` carries its own declaration below for
   that reason; it is the one q-* control used off this screen. */
.questions button,
.questions input,
.questions select,
.questions textarea { font-family: inherit; }

.q-container { width: 100%; max-width: 520px; }
.q-context-bar { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 28px; font-size: clamp(35px, 4.13vw, 56px); font-weight: 700; color: var(--text); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.04em; line-height: 0.95; text-align: center; }
.q-context-bar strong { font-weight: 700; color: var(--coral); }
.q-context-bar .detect-icon { display: none; }

.q-card { background: rgba(255,255,255,0.52); border: 1px solid rgba(31,24,19,0.09); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.q-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.q-dot { height: 4px; border-radius: 2px; flex: 1; background: rgba(31,24,19,0.1); }
.q-dot.done { background: var(--coral); }
.q-dot.current { background: var(--coral); opacity: 0.5; }
.q-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.04em; }
.q-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.45; }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-option {
  padding: 12px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 15px;
  cursor: pointer; transition: all 0.15s; background: rgba(95,90,84,0.04); display: flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 500; position: relative; isolation: isolate;
}
.q-option:hover { color: var(--text); font-weight: 500; }
.q-option.selected { font-weight: 500; color: var(--text); border-color: var(--coral); }
.q-option .q-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: rgba(95, 90, 84, 0.18); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.q-option.selected .q-radio { border: 6px solid var(--coral); background: transparent; }
.q-option.selected .q-radio::after { content: none; }
.q-date-pills { display: flex; gap: 8px; margin-bottom: 8px; }
.q-date-pill { flex: 1; padding: 14px 12px; border: 1px solid rgba(31,24,19,0.12); border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; background: rgba(255,255,255,0.5); color: var(--text-secondary); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%235d4f42' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; outline: none; transition: all 0.15s; }
.q-date-pill:focus { border-color: var(--coral); }
.q-date-pill.has-value { color: var(--text); font-weight: 600; }
#pill-month { flex: 1.4; }
#pill-day { flex: 0.7; }
#pill-year { flex: 1; }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.q-next { padding: 10px 24px; border: none; border-radius: 999px; background: var(--ink-0); color: var(--bone-0); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s, opacity 0.2s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); min-width: 150px; text-align: center; }
.q-next:hover { filter: brightness(1.1); }
/* Continue, locked. A CLASS rather than :disabled on purpose: q12's
   _autoAdvanceQ12Bulk already sets .q-next[disabled] during its bulk
   auto-advance, and a :disabled rule would silently restyle that other screen
   too. This applies only where the JS puts it. Matches the .rv-door-submit
   .is-off idiom in report-view.css. The button also carries the real disabled
   attribute, so it cannot be activated by keyboard either. */
.q-next.is-off { opacity: 0.35; cursor: default; }
.q-next.is-off:hover { filter: none; }
.q12a-nav-right { display: flex; align-items: center; gap: 12px; }
.q12a-counter { font-size: 13px; font-weight: 600; color: rgba(30, 42, 53, 0.55); white-space: nowrap; }
.q-skip { font-size: 14px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; border: none; background: none; }
/* FS-2: declared on the class, not via the .questions descendant rule
   above, because this button is ALSO the auth screens' Back button
   (class="q-back auth-back" at index.html:1252 / :1265). That is the
   element David flagged. A descendant-scoped fix would have left it in
   Arial on exactly the two screens he was looking at. */
.q-back { padding: 10px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.q-back:hover { border-color: var(--ink-0); background: rgba(30,42,53,0.04); }
.q-info-link { margin-top: 12px; font-size: 13px; color: var(--coral); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.q-info-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.q-info-icon { font-size: 15px; }
.q-explainer { margin-top: 12px; padding: 12px; background: rgba(255,255,255,0.4); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); display: none; border: 1px solid rgba(31,24,19,0.06); }
.q6-show-more { padding: 10px 16px; font-size: 13px; color: var(--coral); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.q6-show-more:hover { color: var(--coral); filter: brightness(1.2); }
.q6-unknown-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; margin-left: 8px; flex-shrink: 0; cursor: help; }
#q6-account-list .q-option { align-items: flex-start; }
#q6-account-list .q-checkbox { margin-top: 1px; }
.q6-label { display: flex; flex-direction: column; min-width: 0; }
.q6-label strong { font-weight: 600; }
.q6-detail { font-size: 0.85em; opacity: 0.55; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q6-hint { font-size: 0.85em; opacity: 0.55; font-weight: 400; }

/* Q6 two-zone layout: Quick answer (meta-options) / Specific accounts (scroll) */
.q6-eyebrow { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; opacity: 0.65; }
.q6-meta-options { margin-bottom: 4px; }
.q6-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--text-secondary); opacity: 0.65; }
.q6-divider::before, .q6-divider::after { content: ''; flex: 1; height: 1px; background: rgba(31,24,19,0.12); }
.q6-divider span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.q6-scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }
/* q12a grows to fit rather than clipping at the shared 260px cap. Each q12a
   row is a name plus THREE stacked options, so two accounts already measure
   444px on desktop -- the second account's buttons sat 184px below a fold with
   no visual affordance, which is how an answered account went uncredited.
   Sized to three rows from the measured desktop row height: 3*212 + 2*20 gap
   = 676. Past three accounts it scrolls, and the Continue lock makes that
   safe -- an unanswered row below the fold holds the button and the counter
   names the shortfall. Two-class selector (0,2,0) so it beats the shared
   .q6-scroll rule (0,1,0) regardless of source order; q6's own box, and every
   other .q6-scroll consumer (qr1, qr3, q9c, q10c, q10f, q11, q11b), is
   untouched by construction. */
.q6-scroll.q12a-scroll { max-height: 680px; }
.q6-scroll::-webkit-scrollbar { width: 12px; }
.q6-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.q6-scroll::-webkit-scrollbar-button { display: none; }
.q6-scroll::-webkit-scrollbar-thumb {
  background: #E0E3E7;
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 99px;
}
.q6-scroll::-webkit-scrollbar-thumb:hover,
.q6-scroll::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background-color: #D5D8DC;
}
@supports not selector(::-webkit-scrollbar) {
  .q6-scroll {
    scrollbar-width: thin;
    scrollbar-color: #E0E3E7 transparent;
  }
}
.q-option .q-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid transparent; background: rgba(95, 90, 84, 0.18); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.q-option.selected .q-checkbox { border-color: var(--coral); background: var(--coral); }
.q-option.selected .q-checkbox::after { content: '\2713'; color: white; font-size: 12px; font-weight: 700; line-height: 1; }
/* Guided flow: PDF excerpt callout (injected between <p> and .q-options) */
.q-pdf-excerpt {
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(31,24,19,0.08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.55;
}
.q-excerpt-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.q-excerpt-line { color: var(--text); padding: 2px 0; }
.q-excerpt-value { font-weight: 600; }
.q-excerpt-dates { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.q-excerpt-bucket { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; flex-wrap: wrap; }
.q-excerpt-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em;
}
.q-excerpt-neg { background: rgba(30,42,53,0.06); color: var(--text); }
.q-excerpt-aff { background: rgba(214,88,76,0.10); color: var(--coral); }
.q-excerpt-status { font-style: italic; color: var(--text-secondary); }


/* No-BK warning card on Q1 */
.q-no-bk-warning {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.q-no-bk-warning a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }

/* P3 (discharge-date lane, 2026-08-08): the grounded ask.
   Four classes, no new tokens. The fact row deliberately reuses
   .q-pdf-excerpt / .q-excerpt-header / .q-excerpt-value above, because it is
   the same gesture those already serve: quoting the consumer's document back
   to them. */
.q-alert-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.q-date-text {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  /* 16px minimum: anything smaller triggers iOS Safari's auto-zoom on focus,
     which the mobile.css rules for the other inputs already work around. */
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(31,24,19,0.18);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.q-date-text:focus {
  outline: none;
  border-color: var(--coral);
}
/* The same-as-filing confirm. Shown when the typed date equals the filing
   date the card just quoted; a second Continue accepts it. Deliberately NOT
   a modal and NOT a new pair of buttons -- the sentence is the whole
   intervention, so the approved copy is the only copy on screen. */
.q-date-confirm {
  background: rgba(242,100,25,0.08);
  border: 1px solid rgba(242,100,25,0.22);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.q-date-confirm[hidden] { display: none; }
.q-undercard {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(30,42,53,0.62);
}

.q-step { display: none; }
.q-step.active { display: block; }

/* Q4 inline "Almost ready..." status. Shows only when submitQ4's
   inline data-wait actually triggers (extraction not yet complete by
   the time the user reaches Q4 Continue). Surfaces visible feedback
   during the Q4-to-Q5/Q6 transition's silent wait on slow bureaus
   (TU especially). The full pre-terminal wait card stays at
   submitQuestions per the 2026-05-10 PM chokepoint; this is a smaller
   intra-flow indicator, NOT a wait card. */
.q-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 18px;
  font-size: 15px;
  color: var(--text);
  opacity: 0.85;
}
.q-checking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.q-checking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: q-checking-bounce 1.2s infinite ease-in-out both;
}
.q-checking-dots span:nth-child(1) { animation-delay: -0.32s; }
.q-checking-dots span:nth-child(2) { animation-delay: -0.16s; }
.q-checking-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes q-checking-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1.0); opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
  .q-checking-dots span { animation: none; opacity: 0.85; transform: none; }
}

/* C8: q12a per-account paid/settled disposition rows */
.q12a-row { margin-bottom: 20px; }
.q12a-row:last-child { margin-bottom: 0; }
.q12a-row-name { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 8px; }
.q12a-options { gap: 8px; }
.q12a-sub { display: block; font-size: 12px; font-weight: 400; color: rgba(30, 42, 53, 0.55); margin-top: 3px; line-height: 1.4; }

/* Ruling (b) mockup 1c: delta context bar. Sits above the step's headline and
   names how many things this report makes stale ("Two accounts are new."), so
   the scoped list below it reads as deliberate rather than as a short list.
   Shares the q6-eyebrow type ramp; coral because it is the reason this step
   is on screen at all. Hidden inline by default; the populate functions show
   it only when carry actually scoped the step. */
.q-carry-context {
  font-size: 11px;
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}