/* The answers list, one stylesheet ==========================================
   Four surfaces render the same markup: the client check-your-answers page
   (intake/check.html), the sponsor's own check page
   (business/widgets/screening_check.html), and the live "Your answers" panel
   on both run pages (documents/questionnaire/_answers_panel.html). All four
   go through documents/questionnaire/_check_answers_rows.html or that panel
   partial, so the classes below ARE the contract, and they were skinned twice
   -- once scoped to .im-formpage in design-system/forms.css, once to
   #answers-panel / .business-check-answers in business/business-sidebar.css.
   The two copies had already drifted on the row gap, the question font, the
   Change control's size and the stacking breakpoint.

   Keyed on the answers classes ALONE, so a surface gets the list by loading
   this file rather than by carrying the right wrapper class. Both sheets above
   keep only what is genuinely their skin's -- the rail's viewport cap against
   the sponsor rail's, the sponsor rail's denser rows and type scale, and the
   client surface's own panel chrome -- and each of those out-specifies this
   file, so load order is not doing any work here.

   Tokens only. The sponsor portal does not load forms.css at all on its check
   page, which is the other half of why this file can carry no page-level
   declarations and reference nothing but design-system/tokens.css.
   ------------------------------------------------------------------------- */

/* ---- The list ------------------------------------------------------------
   A two-column reading list, not a form: question on the left, what was said
   on the right, one hairline between rows. A <dl> with a wrapper <div> per
   pair, which is the only markup that lets a grid put dt and dd on one row. */
.im-answers { margin: 0 0 var(--im-space-6); }

.im-answers__row { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--im-space-3);
  padding: var(--im-space-3) 0; border-bottom: 1px solid var(--im-hairline); }

.im-answers__q { margin: 0; font-family: var(--im-font-display);
  font-weight: 600; font-size: 14px; color: var(--im-ink); }

/* white-space: pre-wrap, not a template filter: a multi-line text answer's
   newlines are real characters in the stored answer, and a page whose whole
   job is reading answers back has to show them rather than collapse them. */
.im-answers__a { margin: 0; font-family: var(--im-font-display);
  font-size: 14px; color: var(--im-text-200); white-space: pre-wrap; }

/* The answer is the client's own words, and a client pastes reference
   numbers, URLs and run-together text with no space to break at. Without a
   break opportunity a long token sets the cell's minimum width and walks out
   of the rail (Rohan, 2026-09-19, intake run panel). `anywhere` rather than
   `break-word`: only the former lets the token contribute nothing to the
   minimum width, which is what a flex row with a Change control beside the
   answer needs. `min-width: 0` for the same reason on the flex surfaces. */
.im-answers__value { overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; }

/* 860px, the width the client shell's .im-book--flow rail reflows at
   (design-system/forms.css), rather than a Bootstrap breakpoint: the reason
   to stack is that two columns of prose stop being readable, which happens at
   the same width whichever chassis the list is sitting on. */
@media (max-width: 860px) {
  .im-answers__row { grid-template-columns: 1fr; gap: var(--im-space-1); }
}

/* ---- Sections ------------------------------------------------------------
   A flow can carry section headings, and both lists group by them: the GOV.UK
   check-your-answers shape, where the heading sits OUTSIDE the list it heads
   (https://design-system.service.gov.uk/patterns/check-answers/). A heading
   takes no number and no Change control, and it is an h3 in the run panel and
   an h2 on the check pages: one class, two ranks, because the two surfaces'
   heading outlines differ. The face is the serif the run's own section heading
   uses (.im-intake__section), so a section reads as the same thing in the
   list as it does above the question (Rohan, 2026-09-19). The wrapper is what
   a surface caps and scrolls. */
.im-answers-list { margin: 0 0 var(--im-space-6); }

.im-answers-list .im-answers { margin: 0; }

.im-answers__section { margin: var(--im-space-5) 0 var(--im-space-1);
  font-family: var(--im-font-serif); font-weight: 400; font-size: 1.0625rem;
  line-height: 1.3; color: var(--im-ink); }

.im-answers-list > .im-answers__section:first-child { margin-top: 0; }

/* The section the client is standing in. Accent ink, and never accent ink
   alone: the row inside it already says "Answering now" in words (WCAG 1.4.1). */
.im-answers__section--current { color: var(--im-accent-200); }

/* The hairline separates one row from the next, so the last row of a list has
   nothing to separate itself from and drops it. Scoped to .im-answers, which
   is one section's own list: what follows it is either the next section's
   heading, which separates the two on its own, or the end of the panel, where
   the surface draws its own edge. Every surface, one rule, which is why the
   sponsor rail and the sponsor check page no longer carry a copy of it
   (business/business-sidebar.css). */
.im-answers .im-answers__row:last-child { border-bottom: none; }

/* ---- The Change control --------------------------------------------------
   A text link, not a button skin: it sits inline with the answer it changes.
   The partial ships no Bootstrap btn classes, so without the reset here the
   browser paints its default bordered button. The 44px floor keeps it
   tappable despite the small type a rail column needs, and the negative
   margin pulls that floor back out of the row's own rhythm. */
.im-answers__change { display: inline-flex; align-items: center;
  justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 var(--im-space-2);
  margin: calc(-1 * var(--im-space-2)) calc(-1 * var(--im-space-2)) 0 0;
  background: none; border: 0; flex-shrink: 0; cursor: pointer;
  font-family: var(--im-font-display); font-weight: 600; font-size: 13px;
  color: var(--im-accent-200); text-decoration: none; }

.im-answers__change:hover { text-decoration: underline; }

.im-answers__change:focus-visible { outline: 2px solid var(--im-accent-200);
  outline-offset: 2px; }

/* Flattened while a request is out (assets/js/documents/questionnaire.js's
   setRunControlsDisabled), so it has to LOOK unavailable as well as be it: a
   control that reads live and does nothing is worse than one that reads
   dead. */
.im-answers__change:disabled { opacity: .5; cursor: not-allowed; }

/* A <form> per row on a check page, because reopening a run is a POST. It
   carries no layout of its own -- the row above is what places it. */
.im-answers__change-form { margin: 0; flex-shrink: 0;
  /* The answer cell is pre-wrap so a multi-line answer keeps its breaks, and
     a block-level form inherits that: the template's newlines between the
     hidden inputs and the button became line boxes and stacked the Change
     control 80px below the answer (Rohan, 2026-09-18). Normal here; the
     answer text itself is a sibling, not a descendant. */
  white-space: normal; }

/* ---- The live run panel --------------------------------------------------
   documents/questionnaire/_answers_panel.html, rendered whenever a run is
   drafting. The partial carries no chrome of its own: the client shell wraps
   it in .im-answers-panel's own card (design-system/forms.css) and the sponsor
   portal wraps it in a Bootstrap .card, so nothing here paints a container.

   The LIST is capped in viewport units and scrolls inside the panel, because
   the sponsor-licence flow this panel was built for runs well past a hundred
   questions and an unbounded list pushes the rail's legal row off the screen.
   Flex sizing cannot do the job on the client shell: the panel sits inside a
   <details>, which lays its content out in its own box and is not a flex item
   of the aside, so "shrink to the spare height" never reaches the list
   (Rohan, 2026-09-17). The sponsor rail raises the cap; see
   business/business-sidebar.css. */
.im-answers-panel .im-answers-list { margin: 0; max-height: 45vh;
  overflow-y: auto;
  /* The containing block for the Change buttons' screen-reader-only labels,
     which Bootstrap positions absolutely. Without this their containing block
     is the sticky aside, so the labels of rows scrolled out of view escape the
     list's clip, land below the rail at their static position, and stretch the
     document by the height of the hidden rows: the blank space under the page
     Rohan reported (2026-09-17). */
  position: relative; }

/* Overrides the check page's two-column grid: a run panel is a narrow rail
   column, not a full-width page, so fixed columns would crush the answer
   text. Answer and Change stack under the question instead, inside one flex
   row that drops Change onto its own line only when the answer is too long to
   share one. */
.im-answers-panel .im-answers__row { display: block; }

.im-answers-panel .im-answers__a { display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--im-space-2); flex-wrap: wrap; }

/* ---- Projected rows ------------------------------------------------------
   The panel lists the run as it WILL read once the question on screen is
   confirmed, so two of its three row states are not answers the server has
   walked yet and must not read as though they were.

   `--current` is the question in front of the answerer; `--kept` is one ahead
   of them carrying an answer the draft remembers. The QUESTION is muted on
   both and nothing else is: the answer text is their own words and stays at
   full contrast. A kept row says what it is in words instead, in a
   .visually-hidden prefix the partial renders ("Not yet confirmed."), because
   a difference carried by colour alone says nothing to a screen reader or to
   anyone who cannot tell the two greys apart (WCAG 1.4.1). The visible tag
   names the CURRENT row only -- a visible word on a kept row was tried and
   dropped (Rohan, 2026-09-18). */
.im-answers__row--current .im-answers__q,
.im-answers__row--kept .im-answers__q { color: var(--im-text-muted); }

.im-answers__tag { display: inline-flex; align-items: center;
  flex-shrink: 0; padding: 0 var(--im-space-1);
  border: 1px solid var(--im-hairline); border-radius: 3px;
  font-family: var(--im-font-display); font-weight: 600;
  font-size: 11px; line-height: 18px; letter-spacing: 0.02em;
  color: var(--im-text-muted); }

/* ---- The rail disclosure -------------------------------------------------
   documents/questionnaire/run_shell.html wraps the panel in a <details> on the
   client surfaces only; the sponsor portal shows the panel open in a card and
   never renders this element. It stays here rather than in forms.css because
   the classes are the answers list's own, and because the shell is what
   decides which surfaces get a disclosure -- not which stylesheet is loaded. */
.im-answers-details { flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; }

/* A disclosure control is a tap target: 44px tall, with the keyboard focus
   ring the rest of the run's controls carry. The browser's default outline on
   a <summary> is easy to lose against the rail's paper.

   `display: flex` costs a <summary> two things it gets for free, and both are
   given back here: the whitespace between "Your answers" and its count is a
   text node a flex container drops, so the gap is a token; and a flex
   <summary> paints no disclosure marker, so the caret is drawn at the END of
   the row, because this control fills a rail column and the label should
   begin at the same left edge as everything under it. */
.im-answers-details__summary { font-family: var(--im-font-display);
  font-weight: 600; font-size: 13px; color: var(--im-ink);
  cursor: pointer; margin-bottom: var(--im-space-2);
  display: flex; align-items: center; gap: var(--im-space-1);
  min-height: 44px; list-style: none; }

.im-answers-details__summary::-webkit-details-marker { display: none; }

.im-answers-details__summary::after { content: ""; margin-left: auto;
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease; }

.im-answers-details[open] .im-answers-details__summary::after {
  transform: translateY(2px) rotate(-135deg); }

.im-answers-details__summary:focus-visible { outline: 2px solid var(--im-accent-200);
  outline-offset: 2px; }

/* The summary already names the panel, so the panel's own heading would say it
   a second time. Hidden rather than removed from the partial: the sponsor
   portal includes the same partial with no disclosure around it, and there the
   heading is the only thing naming the card.

   Off-screen rather than display: none, which is the treatment
   .im-formpage .im-intake__status takes for the same reason
   (design-system/forms.css): this h2 is the panel's rank in the page outline,
   and the section headings under it are h3. Take it out of the accessibility
   tree and those h3s follow the run shell's own h1 with nothing between them,
   which is a skipped level (axe heading-order). */
.im-answers-details .im-answers-panel__title { position: absolute; width: 1px;
  height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }