/* ============================================================================
   PMI Survey — components on top of the i-Metrics design system.
   The survey inherits the site's tokens exactly: accent brand, ink ramp, both
   themes, same spacing and type. Only survey-specific parts are defined here.
   ========================================================================= */

/* ── shell ───────────────────────────────────────────────────────────────── */
.sv { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-2); }

.sv-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-1);
}
.sv-bar__inner {
  max-width: 1080px; margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}
.sv-bar__logo { height: 30px; width: auto; }
:root[data-theme="dark"] .sv-bar__logo--light { display: none; }
:root[data-theme="dark"] .sv-bar__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sv-bar__logo--light { display: none; }
  :root:not([data-theme="light"]) .sv-bar__logo--dark { display: block; }
}
.sv-bar__logo--dark { display: none; }
/* min-width:0 lets the title actually shrink: without it a long template name
   refuses to truncate, the header overflows the viewport, and the whole page
   gains horizontal scroll on a phone. */
.sv-bar__meta { min-width: 0; flex: 1 1 auto; }
.sv-bar__title {
  font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-bar__period { font: var(--t-xs); color: var(--ink-3); }
.sv-bar__right { margin-left:auto; flex: none; display: flex; align-items: center; gap: var(--s-4); }

.sv-save {
  display: inline-flex; align-items: center; gap:6px;
  font: var(--t-xs); color: var(--ink-3);
  transition: color var(--d-2) var(--ease-standard);
}
.sv-save__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; }
.sv-save.is-saving .sv-save__dot { background: var(--warn); }
.sv-save.is-saved .sv-save__dot { background: var(--up); }

/* ── progress ────────────────────────────────────────────────────────────── */
/* `width: 100%` is load-bearing. This is a flex item of the .sv column, and
   `margin-inline: auto` on a flex item absorbs the free space instead of
   stretching it — so with max-width alone the whole progress block shrank to
   its content and floated in the middle of the page. The track was ~360px wide
   on a 1280px screen, which looked like a design choice and was not. */
.sv-progress {
  width: 100%; max-width: 1080px; margin-inline: auto;
  padding-inline: var(--gutter);
}
.sv-progress__track { height: 3px; background: var(--line-1); border-radius: var(--r-full); overflow: hidden; }
.sv-progress__fill {
  height: 100%; background: var(--accent); border-radius: var(--r-full);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--d-4) var(--ease-decel);
}
.sv-progress__meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0 var(--s-4); font: var(--t-xs); color: var(--ink-3);
}
.sv-progress__label { font-variant-numeric: tabular-nums; }

/* ── step rail ─────────────────────────────────────────────────────────────
   A segmented track: one equal-width cell per step, so eleven steps fit a
   390px phone and nine fit comfortably anywhere. It never scrolls sideways.

   The row of full-text pills this replaces was 1352px wide for 9 steps and
   1709px for 11, against a ~1080px column, with the scrollbar hidden — the
   respondent could not see the whole journey, and it cost a full row of
   height on every one of 80 questions. */

.sv-rail { padding-bottom: var(--s-1); }
.sv-rail__list {
  display: flex; align-items: flex-end; gap:clamp(2px, 0.6vw, 8px);
  margin:0; padding:0; list-style: none;
}
.sv-rail__list { justify-content: flex-start; }
.sv-rail__li { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; }

.sv-step {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* 24x24 is the WCAG 2.5.8 floor; this clears it and shrinks gracefully */
  inline-size: clamp(24px, 6vw, 32px); block-size: clamp(24px, 6vw, 32px);
  padding:0; margin:0; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font: 600 0.75rem/1 var(--font-ui);
  transition: color var(--d-2) var(--ease-standard);
}
.sv-step[hidden] { display: none !important; }

/* The ring is the component AND the state graphic, so it needs 3:1 against
   what is behind it, and must never rely on hue alone. */
.sv-step__ring {
  position: absolute; inset: 0; border-radius: var(--r-full);
  border: 1.5px solid var(--line-2); background: var(--surface-1);
  display: grid; place-items: center;
  transition: border-color var(--d-2) var(--ease-standard),
              background var(--d-2) var(--ease-standard),
              box-shadow var(--d-2) var(--ease-standard);
}
/* Partial progress as a conic ring — no extra elements, and it reads as a
   dial rather than a colour. Falls back to a solid border in forced colours. */
.sv-step[data-state="doing"] .sv-step__ring {
  border-color: var(--accent);
  background:
    conic-gradient(var(--accent) calc(var(--fill, 0) * 1%), transparent 0)
    border-box;
}
.sv-step__num { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }

/* Completion is shape-first: hollow → solid → check. Colour is the third
   signal, never the only one (WCAG 1.4.1). */
.sv-step__tick { display: none; position: relative; z-index: 1; font-size: 0.875rem; }
.sv-step[data-state="done"] .sv-step__ring { background: var(--accent-deep, var(--accent)); border-color: var(--accent); }
.sv-step[data-state="done"] .sv-step__num { display: none; }
.sv-step[data-state="done"] .sv-step__tick { display: block; color: var(--on-accent); }

.sv-step[aria-current="step"] { color: var(--accent-text); }
.sv-step[aria-current="step"] .sv-step__ring {
  border-color: var(--accent); border-width: 2px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sv-step[aria-current="step"] .sv-step__num { font-weight: 700; }

/* Red is reserved for validation, and only after an attempted submit. It is
   never used for "not started" — on first open that would paint eight steps
   red before the respondent has typed anything. */
.sv-step[data-error="1"] .sv-step__ring { border-color: var(--down); }
.sv-step[data-error="1"] { color: var(--down); }

.sv-step:focus-visible { outline: none; }
.sv-step:focus-visible .sv-step__ring {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Skipped steps stay in the row, dimmed — removing them would shift every
   number and make the count jump. */
.sv-step[data-skipped="1"] {
  opacity: .4; cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* ── the label: hover AND focus, which hover-only cannot do ───────────────── */
.sv-step__tip {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, -4px);
  z-index: 20; pointer-events: none;
  padding:4px 8px; border-radius: var(--r-sm); white-space: nowrap;
  max-inline-size: 60vw; overflow: hidden; text-overflow: ellipsis;
  background: var(--ink-1); color: var(--surface-1);
  font: 500 0.75rem/1.4 var(--font-ui); letter-spacing: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-2) var(--ease-standard),
              transform var(--d-2) var(--ease-standard);
}
.sv-step:hover .sv-step__tip,
.sv-step:focus-visible .sv-step__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Touch has no hover; the caption already names the current step, so the
   tooltip simply does not exist there rather than sticking after a tap. */
@media (hover: none) { .sv-step__tip { display: none; } }

.sv-step__sr, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding:0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sv-progress__count { font-variant-numeric: tabular-nums; }
.sv-progress__meta { align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }

/* Narrow screens: eleven 24px cells plus gaps stop fitting, so drop the track
   and keep the caption — which already says everything the track said. */
@media (max-width: 560px) {
  .sv-rail { display: none; }
  .sv-progress__label { font-weight: 600; color: var(--ink-1); }
  /* the save state is restated by the Save draft button below it */
  .sv-save { display: none; }
}

/* Three actions have to fit a 390px phone. Wrap rather than clip — the primary
   button was running off the right edge. */
.sv-actions__inner { flex-wrap: wrap; row-gap: var(--s-2); }
@media (max-width: 420px) {
  .sv-actions__inner .btn { padding-inline: var(--s-4); }
}

/* High contrast / forced colours drops backgrounds, which is where a filled
   vs hollow ring and the tick have to carry the state on their own. */
@media (forced-colors: active) {
  .sv-step__ring { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .sv-step[data-state="done"] .sv-step__ring { background: Highlight; border-color: Highlight; }
  .sv-step[data-state="done"] .sv-step__tick { color: Canvas; }
  .sv-step[aria-current="step"] .sv-step__ring { border-color: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-step__ring, .sv-step__tip, .sv-progress__fill { transition: none; }
}

/* ── the question sheet ──────────────────────────────────────────────────── */
.sv-main { flex: 1 1 auto; padding-block: var(--s-7) var(--s-13); }
.sv-sheet { max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }
.sv-sheet__head { margin-bottom: var(--s-7); }
.sv-sheet__step { font: 600 0.75rem/1 var(--font-mono); letter-spacing: .04em; color: var(--accent-text); }
.sv-sheet__title { font: var(--t-h2); letter-spacing: var(--track-snug); color: var(--ink-1); margin-top: var(--s-3); }
.sv-sheet__hint { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-3); max-width: 62ch; }

/* keyboard legend */
.sv-keys {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-6);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
  font: var(--t-xs); color: var(--ink-3);
}
.sv-keys__group { display: inline-flex; align-items: center; gap: var(--s-2); }
.sv-keys__k {
  font: 600 0.75rem/1 var(--font-mono); color: var(--ink-1);
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: var(--r-xs); padding:4px 6px; min-width: 20px; text-align: center;
}

/* ── a question ──────────────────────────────────────────────────────────── */
/* ── one question open, the rest collapsed ─────────────────────────────────
   A step can hold 21 questions. Rendering all 21 open is a wall; the answer is
   not smaller cards but a different structure: the active question is full size
   and everything already answered collapses to a single scannable line that is
   also the edit surface.

   Structure now comes from a hairline divider and space, not from a box per
   question — the borders were doing no work the spacing could not do. */
/*
 * ── A follow-up to an "Other" choice must not look like the next question ──
 *
 * Reported: "I didn't notice that there is a text box there. When I selected, the
 * reason is other … it must have that separation in terms of content so that we can
 * easily identify it."
 *
 * A "please specify" box is an ordinary question in every other respect — its own
 * number, its own row, its own summary line — so in a long collapsed list it read as
 * the next item rather than as the field the choice just demanded. It is usually
 * REQUIRED, so missing it blocks the interview.
 *
 * Three cues, and no one of them carries the meaning alone:
 *
 *   · a RULE down the left edge, which is the separation the owner asked for and
 *     survives greyscale and forced colours;
 *   · an INDENT, so it reads as belonging to the question above;
 *   · a WORDED badge — "because you chose Other" — because a rule and an indent say
 *     "related", not "type here", and only text can say the second thing.
 *
 * Deliberately NOT a heavy fill or a coloured panel: this is the same form, and
 * shouting would make every Other look like an error.
 */
.sv-q[data-follows-other="1"] {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--s-4);
  background: var(--surface-2);
}

.sv-q__because {
  display: inline-block;
  font: 500 0.75rem/1 var(--font-ui);
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  padding: 3px var(--s-2);
  margin-inline-end: var(--s-2);
  white-space: nowrap;
}

/* The open header stacks the badge above the label so a long question does not wrap
   awkwardly around it. */
.sv-q__head .sv-q__because { display: inline-block; margin-bottom: var(--s-2); }

@media (max-width: 560px) {
  /* On a phone the indent costs width the question needs, so the rule does the work
     and the padding shrinks. */
  .sv-q[data-follows-other="1"] { padding-inline-start: var(--s-2); }
}

.sv-q {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-1);
  border-radius: 0;
  margin:0;
  scroll-margin-top:140px;   /* clears the two sticky bars when focused */
}
.sv-q:last-of-type { border-bottom: 0; }

.sv-q[data-state="open"] { padding-block: var(--s-5); }
.sv-q[data-state="open"] .sv-q__body { display: block; }
.sv-q[data-state="open"] .sv-q__summary { display: none; }

/* BOTH the head and the body have to go — hiding only the body left the
   question label rendered twice, once in the summary row and once in the head. */
.sv-q[data-state="collapsed"] .sv-q__head { display: none; }
.sv-q[data-state="collapsed"] .sv-q__body { display: none; }
.sv-q[data-state="collapsed"] .sv-q__summary { display: flex; }
.sv-q[data-state="collapsed"] { padding-block: 0; }

/* the advance: a small upward settle, gated on motion preference below */
@media (prefers-reduced-motion: no-preference) {
  .sv-q[data-state="open"] .sv-q__body { animation: sv-open 240ms var(--ease-decel); }
  @keyframes sv-open { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.sv-q__head {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
}
.sv-q__no {
  font: 600 0.75rem/1.6 var(--font-mono); color: var(--ink-4);
  min-width: 26px; flex: none; font-variant-numeric: tabular-nums;
}
.sv-q__label { font: 500 1.0625rem/1.5 var(--font-ui); color: var(--ink-1); }
.sv-q__req { color: var(--down); margin-left:2px; }
.sv-q__period {
  display: inline-block; font: 600 0.75rem/1 var(--font-mono);
  color: var(--accent-text); background: var(--accent-soft);
  padding:2px 6px; border-radius: var(--r-xs); margin:0 2px;
}
.sv-q__body { padding: 0 var(--s-6) var(--s-5); }

/* the up / same / down control — the workhorse */
/* ── direction chips (the Up / Same / Down scale) ──────────────────────────
   The dominant interaction — repeated ~17 times a form. Three equal chips whose
   meaning is carried by a GLYPH and the fill, never by hue. "Lower" used to be
   painted in the same red the product uses for validation errors, which tells a
   respondent that answering honestly is a mistake. */
.sv-scale { display: grid; gap: var(--s-3); width: 100%; max-width: 520px; }
.sv-scale--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-scale--multi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.sv-scale__opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); text-align: center;
  min-height: 56px; padding: var(--s-3);
  border: 0; border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--ink-2);
  font: 600 0.875rem/1.25 var(--font-ui);
  cursor: pointer;
  transition: background var(--d-2) ease-out, color var(--d-2) ease-out, transform var(--d-2) ease-out;
}
.sv-scale__icon { width: 20px; height: 20px; flex: none; opacity: .75; }
.sv-scale__text { min-width: 0; }
.sv-scale__opt:hover { background: var(--surface-3); transform: translateY(-1px); }
.sv-scale__opt:active { transform: translateY(0); }
.sv-scale__opt:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Selected: one accent for every direction. No judgement about the answer. */
.sv-scale__opt[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.sv-scale__opt[aria-pressed="true"] .sv-scale__icon { opacity: 1; }
.sv-scale__opt[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 6px; right: 8px; font-size: 0.75rem; opacity: .9;
}
.sv-scale__opt { position: relative; }

.sv-scale__key {
  font: 600 0.625rem/1 var(--font-mono); letter-spacing: .04em;
  color: currentColor; opacity: .45;
}
@media (hover: none) { .sv-scale__key { display: none; } }

/* Thumb-first: three targets in ONE row, never stacked. The old rule wrapped
   them to full width below 760px, which turned step 1 into ~1,700px of stacked
   buttons on the device most people use. */
@media (max-width: 760px) {
  .sv-scale { gap:8px; width: 100%; max-width: none; }
  .sv-scale--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-scale__opt { min-height: var(--s-10); padding: var(--s-3) var(--s-2); font-size: 0.875rem; }
  .sv-scale__icon { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
  .sv-scale__text { font-size: 0.875rem; }
}

/* choice list (checkbox / select) */
.sv-choices { display: grid; gap: var(--s-2); }
.sv-choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--line-1); background: var(--surface-1);
  font: var(--t-sm); color: var(--ink-2); text-align: left;
  transition: all var(--d-2) var(--ease-standard);
}
.sv-choice:hover { border-color: var(--ink-4); }
.sv-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-1); }
.sv-choice__box {
  width: 18px; height: 18px; border: 1.5px solid var(--line-control);
  border-radius: var(--r-xs); flex: none; margin-top:1px;
  display: grid; place-items: center; font-size: 11px; color: transparent;
  transition: all var(--d-2) var(--ease-standard);
}
.sv-choice[aria-pressed="true"] .sv-choice__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.sv-text {
  width: 100%; padding: 0 var(--ctl-px); block-size: var(--ctl-h);
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink-1); font: var(--t-body);
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.sv-text:hover { border-color: var(--ink-4); }
.sv-text:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(18, 115, 206, .2); }
select.sv-text { appearance: none; padding-right: var(--s-8); cursor: pointer;
                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236B7488' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
                 background-repeat: no-repeat; background-position: right var(--ctl-px) center; }

/* conditional follow-up */
.sv-follow {
  margin: var(--s-4) 0 0 var(--s-9);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-2);
}
.sv-follow__label { font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-2); margin-bottom: var(--s-3); }

/* answered summary — collapses the question to one line */
.sv-q__summary {
  display: none; align-items: center; gap: var(--s-4);
  width: 100%; min-height: 56px; padding: var(--s-3) 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: color var(--d-2) ease-out;
}
.sv-q__summary:hover { color: var(--ink-1); }
.sv-q__summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-xs); }
.sv-q__summary-val { font: 600 0.875rem/1 var(--font-ui); color: var(--ink-1); white-space: nowrap; }
.sv-q__summary-val::before {
  content: ""; display: inline-block; inline-size: 6px; block-size: 6px;
  border-radius: 50%; background: var(--accent); margin-right:6px; vertical-align: 2px;
}
.sv-q__summary-change { font: 600 0.75rem var(--font-ui); color: var(--accent-text); opacity: 0; white-space: nowrap; }
.sv-q__summary:hover .sv-q__summary-change,
.sv-q__summary:focus-visible .sv-q__summary-change { opacity: 1; }
@media (hover: none) { .sv-q__summary-change { opacity: 1; } }
.sv-q__summary-no { font: 600 0.75rem/1 var(--font-mono); color: var(--ink-4); min-width: 26px; }
.sv-q__summary-label { font: var(--t-sm); color: var(--ink-3); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-q__summary-val { font: 600 0.875rem/1 var(--font-ui); color: var(--ink-1); }
.sv-q__edit { font: var(--t-xs); color: var(--accent-text); font-weight: 600; }

/* ── footer actions ──────────────────────────────────────────────────────── */
.sv-actions {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line-1);
}
.sv-actions__inner {
  max-width: 1080px; margin-inline: auto; padding: var(--s-4) var(--gutter);
  display: flex; align-items: center; gap: var(--s-4);
}
.sv-actions__count { font: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sv-actions__spacer { flex: 1 1 auto; }

/* ── review screen ───────────────────────────────────────────────────────── */
.sv-review { display: grid; gap: var(--s-4); }
.sv-review__row {
  display: grid; grid-template-columns: minmax(0,1fr) 180px;
  gap: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
}
.sv-review__q { font: var(--t-sm); color: var(--ink-2); }
.sv-review__a { font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-1); text-align: right; }
.sv-review__row.is-missing { border-color: var(--down); background: var(--down-soft); }

/* The token-chip styles that used to live here were the deleted prototype's.
   `.tok` collided outright with the live component in components.css — and
   because this sheet loads first, its `.tok:hover` still turned the editor's
   chip solid blue on hover. The live component is the one in components.css. */

/* period picker */
.period-card {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.period-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--s-4); }
.period-out {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-1);
  font: var(--t-sm);
}
.period-out:last-child { border-bottom: 0; }
.period-out__k { font: 600 0.75rem/1.4 var(--font-mono); color: var(--accent-text); }
.period-out__v { color: var(--ink-1); font-weight: 500; }

@media (max-width: 760px) {
  .sv-q__head { padding: var(--s-4) var(--s-4) var(--s-3); }
  .sv-q__body { padding: 0 var(--s-4) var(--s-4); }
  .sv-keys { display: none; }
  .sv-review__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .sv-review__a { text-align: left; }
  .sv-follow { margin-left: var(--s-4); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IM.builder — the questionnaire editor. Same tokens as everything else.
   ═══════════════════════════════════════════════════════════════════════ */
.qb-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap; padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg);
}
.qb-toolbar__group { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.qb-sel { display: flex; flex-direction: column; gap: var(--s-2); }
.qb-sel > span { font: 600 0.875rem/1 var(--font-ui); color: var(--ink-2); }
.qb-toolbar .select, .qb-toolbar .input { height: 40px; }

.qb-tokens {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg);
}
.tok__val {
  font-family: var(--font-ui); font-weight: 500; font-size: 0.75rem;
  opacity: .7; margin-left:6px; padding-left:6px;
  border-left: 1px solid currentColor;
}

.qb-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-5); }
.qb-tab {
  padding:8px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-1);
  background: var(--surface-1); color: var(--ink-3);
  font: 500 0.875rem/1 var(--font-ui);
  transition: all var(--d-2) var(--ease-standard);
}
.qb-tab:hover { color: var(--ink-1); border-color: var(--line-2); }
.qb-tab.is-on { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); font-weight: 600; }
.qb-tab--add { border-style: dashed; color: var(--accent-text); }

.qb-list { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.qb-q {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard);
}
.qb-q.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18, 115, 206, .13); }
.qb-q__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); background: var(--surface-2);
  border-bottom: 1px solid var(--line-1);
}
.qb-q__grip { color: var(--ink-4); cursor: grab; font-size: 1rem; }
.qb-q__no { font: 600 0.75rem/1 var(--font-mono); color: var(--ink-4); min-width: 18px; }
.qb-q__type { font: 600 0.75rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qb-q__acts { margin-left:auto; display: flex; gap:4px; }
.qb-icon {
  width: 30px; height: 30px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 0.875rem; border: 1px solid transparent;
  transition: all var(--d-2) var(--ease-standard);
}
.qb-icon:hover { background: var(--surface-3); color: var(--ink-1); border-color: var(--line-2); }
.qb-q__body { padding: var(--s-5); display: grid; gap: var(--s-5); }

.qb-field__label { display: block; font: 600 0.875rem/1 var(--font-ui); color: var(--ink-2); margin-bottom: var(--s-3); }
.qb-label-input {
  width: 100%; padding: var(--s-3) var(--s-4); min-height: 66px;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink-1);
  font: var(--t-body); line-height: 1.6; resize: vertical;
}
.qb-label-input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(18, 115, 206, .2); }
.qb-preview { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-3); }
.qb-preview b { color: var(--ink-1); }
.qb-warn { color: var(--down); font-weight: 600; }

.qb-choices { display: grid; gap: var(--s-2); }
.qb-choice { display: flex; align-items: center; gap: var(--s-3); }
.qb-choice__grip { color: var(--ink-4); cursor: grab; }
.qb-choice__input {
  flex: 1 1 auto; padding: 10px var(--s-4); min-height: 42px;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink-1); font: var(--t-sm);
}
.qb-choice__input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(18, 115, 206, .2); }

.qb-settings { display: flex; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.qb-check { display: inline-flex; align-items: center; gap: var(--s-3); font: var(--t-sm); color: var(--ink-2); }
.qb-check input { width: 17px; height: 17px; accent-color: var(--accent); }

.qb-add { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-6); }
.qb-add__title { font: 600 0.875rem/1 var(--font-ui); color: var(--ink-2); margin-bottom: var(--s-5); }
.qb-add__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-3); }
.qb-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--line-control); border-radius: var(--r-md);
  background: var(--surface-1); text-align: left;
  transition: all var(--d-2) var(--ease-standard);
}
.qb-type:hover { border-color: var(--accent); background: var(--accent-soft); }
.qb-type__icon { font-size: 1.125rem; color: var(--accent-text); line-height: 1; }
.qb-type__name { font: 500 0.875rem/1.35 var(--font-ui); color: var(--ink-1); }

.qb-toast {
  position: fixed; bottom: var(--s-7); left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--surface-inverse); color: #fff;
  padding:12px 16px; border-radius: var(--r-md); box-shadow: var(--sh-28);
  font: 500 0.875rem/1.3 var(--font-ui); z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-3) var(--ease-decel), transform var(--d-3) var(--ease-decel);
}
.qb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) { .qb-add__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .qb-add__grid { grid-template-columns: 1fr; } }

/* ── Required-answer enforcement ─────────────────────────────────────────────
   A submission missing a required answer is refused by the server and the
   respondent is returned here. The questions that blocked it are named, and
   the first one is marked in place so it can be found without hunting. */

.sv-missing { margin:8px 0 0; padding-left:16px; display: flex; flex-direction: column; gap:4px; }
.sv-missing li { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.sv-missing li b { color: var(--ink-1); font-weight: 600; }

.sv-q.is-missing {
  border-color: var(--down);
  box-shadow: 0 0 0 3px rgba(200, 60, 45, .13);
}
.sv-q.is-missing .sv-q__no { background: var(--down); color: #fff; }
.sv-q.is-missing .sv-q__label::after {
  content: 'needs an answer';
  display: inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius: var(--r-full);
  font: 600 .75rem var(--font-ui);
  background: var(--down);
  color: #fff;
  vertical-align: middle;
}

.sv-progress__right { display: inline-flex; align-items: baseline; gap: var(--s-3); }
.sv-progress__count { white-space: nowrap; }
.sv-progress__est { color: var(--ink-4); }
@media (max-width: 560px) { .sv-progress__est { display: none; } }

/* ── undo, after an auto-advance ────────────────────────────────────────────
   Auto-advance is only safe if a mis-tap is a one-tap fix. Six seconds, and it
   restores the previous value rather than merely re-opening the question. */
.sv-undo {
  position: fixed; left: 50%; bottom: calc(var(--s-10) + 8px); z-index: 45;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-4);
  max-width: min(92vw, 420px);
  padding:8px 12px; border-radius: var(--r-full);
  background: var(--ink-1); color: var(--surface-1);
  font: 500 0.875rem var(--font-ui);
  box-shadow: var(--sh-4, 0 8px 28px rgba(0,0,0,.22));
}
.sv-undo__btn {
  background: none; border: 0; padding:2px 4px; cursor: pointer;
  color: var(--accent-line, #C3DDF2); font: 700 0.875rem var(--font-ui);
  text-decoration: underline; text-underline-offset: 2px;
}
.sv-undo__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--r-xs); }
@media (prefers-reduced-motion: no-preference) {
  .sv-undo { animation: sv-undo-in 200ms var(--ease-decel); }
  @keyframes sv-undo-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* a collapsed row that is NOT yet answered: quieter, and no value dot */
.sv-q[data-state="collapsed"][data-answered="0"] .sv-q__summary-label { color: var(--ink-4); }
/* no value yet, so no value dot */
.sv-q[data-state="collapsed"][data-answered="0"] .sv-q__summary-val,
.sv-q[data-state="collapsed"][data-answered="0"] .sv-q__summary-change { display: none; }
.sv-q[data-state="collapsed"][data-answered="0"] .sv-q__summary-no { opacity: .6; }

/* per-question help text — 878 fields in the live estate carry one */
.sv-q__help { margin:6px 0 0 40px; font-size:.875rem; line-height:1.55; color:var(--ink-3); max-width:64ch; }
.sv-hint { margin:6px 0 0; font-size:.75rem; color:var(--ink-4); }

/* a content block collects nothing, so it should not look like a question */
.sv-q[data-presentational="1"] .sv-q__no { visibility:hidden; }
.sv-q[data-presentational="1"] .sv-q__label { color:var(--ink-2); font-weight:600; }


/* ── phones ──────────────────────────────────────────────────────────────────
   The runner is used on a phone, standing up, often with one bar of signal. It
   was laid out as a desktop header that happened to shrink, which showed up as
   a truncated survey name, cramped controls, and every collapsed question cut
   off mid-sentence. None of that is a small cosmetic matter on the screen most
   interviewers actually use. */

.sv-kbtoggle { gap: var(--s-2); }
.sv-kbtoggle__icon { inline-size: 15px; block-size: 15px; flex: none; }

@media (max-width: 700px) {
  /* more room between the mark and the controls, and the row may wrap rather
     than squeeze anything */
  .sv-bar__inner { gap: var(--s-3); flex-wrap: wrap; row-gap: var(--s-2); }

  /* Two lines for the questionnaire name. One line with an ellipsis turned
     "Manufacturing Survey (2026-08)" into "Manufacturing…", which at a glance
     is indistinguishable from the retail survey. */
  .sv-bar__title {
    white-space: normal; overflow: visible; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .9375rem; line-height: 1.25;
  }

  /* and two lines for a collapsed question, so it reads as a sentence rather
     than a stump */
  .sv-q__summary { align-items: flex-start; }
  .sv-q__summary-label {
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.4;
  }
  /* the answer sits under the label rather than competing with it for width */
  .sv-q__summary-val { white-space: normal; text-align: right; }
}

@media (max-width: 560px) {
  /* the word costs a quarter of the header on a phone; the icon does not */
  .sv-kbtoggle__label { display: none; }
  .sv-kbtoggle { padding-inline: var(--s-3); }

  /* a bigger mark in the same 44px target — it was 36px inside padding, so the
     thing you actually aim at was smaller than the thing you see */
  .sv-bar__brand { min-block-size: 46px; padding: var(--s-1) var(--s-2); margin-inline-start: calc(var(--s-2) * -1); }
  .sv-bar__logo { height: 40px; }

  /* the step heading is the thing being read; give it the left edge */
  .sv-q__head { padding: var(--s-4) var(--s-4) var(--s-3); }
  .sv-q__body { padding: 0 var(--s-4) var(--s-4); }
}

/* ── touch ───────────────────────────────────────────────────────────────────
   WCAG 2.5.8 asks for 24px; a thumb on a moving bus wants more. Every control
   the interviewer touches is at least 44. */
@media (pointer: coarse) {
  .sv-scale__opt { min-block-size: 68px; }
  .sv-choice { min-block-size: 48px; }
  .btn { min-block-size: 46px; }
  .sv-step { min-inline-size: 34px; min-block-size: 34px; }
  .sv-q__summary { min-block-size: 56px; }
  .sv-undo__btn { min-block-size: 44px; padding-inline: var(--s-4); }
}

/* a phone held sideways has almost no height; the sticky header must not eat it */
@media (max-height: 480px) and (pointer: coarse) {
  .sv-bar { position: static; }
}

/* ══ Tier 5 capability ═══════════════════════════════════════════════════════
   Matrix grids, rankings, "Other", the quota badge, the end-interview panel and
   the resume link. All of them touch-first: the runner is a phone held in one
   hand, standing up, and every control here is at least 44px on a coarse
   pointer. Design tokens only — no literal colour anywhere below.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the language switch ───────────────────────────────────────────────────
   An interviewer switching to Filipino is doing it once, at the start of a
   shift. It does not get to take the header on a 390px phone, so the label is
   dropped there and the icon carries it with an accessible name. */
.sv-lang { margin: 0; }
.sv-lang__btn { gap: var(--s-2); }
.sv-lang__icon { inline-size: 15px; block-size: 15px; flex: none; }
@media (max-width: 560px) {
  .sv-lang__btn span { display: none; }
  .sv-lang__btn { padding-inline: var(--s-3); }
}

/* ── the resume link ───────────────────────────────────────────────────────
   Folded away by default: it matters twice per interview (once when someone
   needs it) and costs a row of height on every page otherwise. */
.sv-resume { padding: var(--s-4) var(--s-5); }
.sv-resume > summary {
  cursor: pointer; font: 500 .875rem/1.4 var(--font-ui); color: var(--ink-2);
  min-block-size: 44px; display: flex; align-items: center;
}
.sv-resume > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-xs); }
.sv-resume__body { margin: var(--s-2) 0 var(--s-3); font: var(--t-sm); color: var(--ink-3); max-width: 62ch; }
.sv-resume__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sv-resume__field {
  flex: 1 1 220px; min-inline-size: 0;
  font: 400 .8125rem/1.4 var(--font-mono, ui-monospace, monospace);
}

/* ── a matrix / Likert grid ────────────────────────────────────────────────
   A real <table>, because that is what a grid IS: a screen reader announces the
   row and the column header for every cell, which is the whole reason this
   cannot be a pile of divs. The scroll wrapper exists because a 5-point scale
   plus a two-line row label does not fit 390px, and a table that overflows its
   container takes the whole page sideways with it. */
.sv-grid__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; border: 1px solid var(--line-1); border-radius: var(--r-md);
}
.sv-grid { border-collapse: collapse; width: 100%; min-width: 0; }
.sv-grid__corner { border-bottom: 1px solid var(--line-1); background: var(--surface-2); }
.sv-grid__col {
  padding: var(--s-2) var(--s-1); text-align: center; vertical-align: bottom;
  font: 600 .75rem/1.3 var(--font-ui); color: var(--ink-3);
  border-bottom: 1px solid var(--line-1); background: var(--surface-2);
  hyphens: auto; overflow-wrap: anywhere;
}
.sv-grid__row {
  padding: var(--s-2) var(--s-3); text-align: left; vertical-align: middle;
  font: 500 .875rem/1.35 var(--font-ui); color: var(--ink-1);
  border-right: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1);
  max-width: 46vw; overflow-wrap: anywhere;
}
.sv-grid tbody tr:last-child .sv-grid__row,
.sv-grid tbody tr:last-child .sv-grid__cell { border-bottom: 0; }
.sv-grid__cell { border-bottom: 1px solid var(--line-1); padding: 0; text-align: center; }
.sv-grid__opt {
  display: block; inline-size: 100%; min-block-size: 44px; min-inline-size: 44px;
  padding: var(--s-1); background: none; border: 0; cursor: pointer;
  color: var(--ink-4); font: 600 .8125rem/1 var(--font-ui);
  transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard);
}
.sv-grid__opt:hover { background: var(--surface-3); }
.sv-grid__opt:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
/* Selection is carried by a FILL AND A MARK, not by hue: the tick is there in
   greyscale and in forced-colours mode, where the fill is not. */
.sv-grid__opt.is-on,
.sv-grid__opt[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.sv-grid__mark { display: block; }
@media (prefers-color-scheme: dark) {
  .sv-grid__opt.is-on, .sv-grid__opt[aria-pressed="true"] { background: var(--accent-soft); }
}

/* ── a ranking ─────────────────────────────────────────────────────────────
   The up and down buttons are the interaction. Drag is layered on top and is
   never the only route: drag-only fails a keyboard, fails a screen reader, and
   fails a thumb on a moving bus. */
.sv-rank__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.sv-rank__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); min-block-size: 52px;
}
.sv-rank__item[draggable="true"] { cursor: grab; }
.sv-rank__pos {
  flex: none; inline-size: 26px; block-size: 26px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--ink-1); color: var(--surface-1);
  font: 600 .75rem/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.sv-rank__label { flex: 1 1 auto; min-width: 0; font: 500 .9375rem/1.35 var(--font-ui); color: var(--ink-1); overflow-wrap: anywhere; }
.sv-rank__moves { flex: none; display: flex; gap: var(--s-1); }
.sv-rank__btn {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer;
}
.sv-rank__btn svg { inline-size: 16px; block-size: 16px; }
.sv-rank__btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-1); }
.sv-rank__btn:disabled { opacity: .4; cursor: default; }
.sv-rank__btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* ── "Other, please specify" ───────────────────────────────────────────────
   A choice that reveals a text box. The reveal is `hidden` on the wrapper, so
   the box is out of the accessibility tree as well as off screen — a `display`
   toggle alone leaves it reachable by a screen reader, which on a revealed
   follow-up means reading out a question nobody was asked. */
.sv-other { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line-2); }
.sv-other__label { display: block; margin-bottom: var(--s-2); font: 500 .875rem/1.4 var(--font-ui); color: var(--ink-2); }
.sv-choice--other { border-style: dashed; }
.sv-scale__opt--other { grid-column: 1 / -1; }

/* ── a per-choice quota ────────────────────────────────────────────────────
   Offered, never disabled: the interviewer must be able to record what the
   company actually said, and an untappable choice corrupts the ANSWER rather
   than the quota. The cap is stated here and kept at submission. */
.sv-quota {
  margin-inline-start: auto; flex: none;
  padding: 2px var(--s-2); border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn);
  font: 600 .6875rem/1.6 var(--font-ui); white-space: nowrap;
}

/* ── the inline rule failure ───────────────────────────────────────────────
   One line, always in the markup and merely hidden, so a message appearing
   never shifts the button a thumb is already moving towards. */
.sv-q__error {
  margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--down-soft); color: var(--down);
  font: 500 .875rem/1.4 var(--font-ui);
}
.sv-q.is-invalid .sv-q__head { border-inline-start: 3px solid var(--down); }
.sv-q.is-invalid .sv-q__error { display: block; }
.sv-missing__why { color: var(--ink-3); font-size: .8125rem; }

/* ── ending an interview ───────────────────────────────────────────────────
   A disclosure, not a bar button: an interviewer reaches for this once in
   fifty calls and the space belongs to Save draft and Continue. The panel
   states what will happen, because "end" reads like "delete" and it is not. */
.sv-end { position: relative; }
.sv-end > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center;
  min-block-size: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface-1); color: var(--ink-2);
  font: 500 .875rem var(--font-ui);
}
.sv-end > summary::-webkit-details-marker { display: none; }
.sv-end > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sv-end[open] > summary { background: var(--surface-3); color: var(--ink-1); }
.sv-end__panel {
  position: absolute; z-index: 30; inset-inline-start: 0; bottom: calc(100% + var(--s-2));
  inline-size: min(92vw, 420px);
  padding: var(--s-4); display: grid; gap: var(--s-3);
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-4, 0 8px 28px rgba(0,0,0,.22));
}
.sv-end__body { margin: 0; font: var(--t-sm); color: var(--ink-3); }
.sv-end__row { display: grid; gap: var(--s-1); }
.sv-end__label { font: 500 .75rem/1.4 var(--font-ui); color: var(--ink-3); }
.sv-end__panel .btn { justify-self: start; }

/* ── touch ─────────────────────────────────────────────────────────────────
   WCAG 2.5.8 asks for 24px; a thumb on a moving bus wants more. Everything
   added by Tier 5 clears 44. */
@media (pointer: coarse) {
  .sv-grid__opt { min-block-size: 48px; min-inline-size: 48px; }
  .sv-rank__btn { inline-size: 48px; block-size: 48px; }
  .sv-resume > summary { min-block-size: 48px; }
}

/* ── phones ────────────────────────────────────────────────────────────────
   At 390px a five-column grid cannot show its row labels and its scale at once.
   The row label stays pinned (it is what identifies the answer) and the scale
   columns compress; the table scrolls inside its own wrapper if it still does
   not fit, which is the one place a scroll here is honest. */
@media (max-width: 560px) {
  .sv-grid__col { font-size: .6875rem; padding: var(--s-1) 2px; }
  .sv-grid__row { padding: var(--s-2); font-size: .8125rem; max-width: 34vw; }
  .sv-grid__opt { min-inline-size: 40px; }
  .sv-rank__item { padding: var(--s-2); gap: var(--s-2); }
  .sv-end { inline-size: 100%; }
  .sv-end__panel { inset-inline-start: 0; inline-size: min(100%, 420px); }
  .sv-resume { padding: var(--s-3) var(--s-4); }
}

/* ── the builder's Tier 5 authoring panels ─────────────────────────────────
   The builder is normally styled by console.css, and this tier's additions to
   its question card are here instead only because console.css belongs to
   another workstream. They are scoped to `.qc__` so nothing can reach a console
   page that does not render a question card. Move them to console.css when that
   file is free. */
.qc__rules { display: grid; gap: var(--s-2); }
.qc__rule-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* NOT `.qc__rule`, deliberately: that class is the four-column CONDITION row and
   a rule field inheriting its grid would be squeezed into a quarter width. */
.qc__rule-field { display: grid; gap: var(--s-1); }
.qc__rule-field > span { font: 500 .75rem/1.4 var(--font-ui); color: var(--ink-3); }
.qc__rule-field .qc__input { inline-size: 100%; }
.qc__rule--wide { grid-column: 1 / -1; }
.qc__quota-name { flex: 1 1 auto; min-width: 0; font: 400 .875rem var(--font-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.qc__quota-input { inline-size: 96px; flex: none; }
.qc__flags { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-end; }
.qc__flags .qc__rule-field { inline-size: min(320px, 100%); }