/* answers.css — Answers' own stylesheet (lane V3).

   New Answers UI is styled here, in the kit's tokens (docs/brand-kit.md), never in
   console.css. Existing Answers rules stay where they are until the owner's visual
   port: this file adds, it does not restyle. */

/* Engine searches under an open question: the kid rows' indent and ground, so the
   line reads as part of the question it sits under. */
.v2-an-gsearch { padding: 10px 16px 12px 52px; background: var(--sunk); border-top: 1px solid var(--line-light); }
.v2-an-gsearch:empty { display: none; }
.v2-an-srch-lead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.v2-an-srch-lead .v2-mono-note { min-width: 0; }
.v2-an-gsearch .v2-pl-fanrow .bd .q { font-size: var(--text-sm); }

/* A searches row with nothing to open: the fold's rule and spacing, no disclosure. */
.v2-rd-quiet { display: flex; align-items: baseline; gap: 10px; }
.v2-rd-quiet .v2-mono-note { margin-left: auto; }

/* ── The band (P2, owner ruling R1): four sections ─────────────────────────
   Segment colours carry one meaning each, and none carries it alone: every
   segment has a labelled legend chip, and Couldn't check is hatched as well as
   coloured (foundation §5, "never by colour alone"). The reason palette is the
   Missed tab's own, so one reason wears one colour across the screen. */
.v2-an-seg-verdict-named { background: var(--ok); }
.v2-an-seg-verdict-not { background: var(--neutral-bar); }
.v2-an-seg-verdict-check {
  background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--warn);
}
.v2-an-seg-why-not_indexed { background: var(--warn); }
.v2-an-seg-why-retrieved_not_selected { background: var(--danger); }
.v2-an-seg-why-cited_not_named { background: var(--series-1); }
.v2-an-seg-why-parametric { background: var(--series-3); }
.v2-an-seg-why-unknown { background: var(--line-hover); }
.v2-an-legbtn .fdot { border-radius: 2px; }

/* A section's head: the label, and its one door ("All", "Compare engines") on the
   right in the flow, text-sized, never a second filled control in the band. */
.v2-an-sec { display: flex; flex-direction: column; min-width: 0; }
.v2-an-sechead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.v2-an-sechead > .v2-lbl { min-width: 0; }
.v2-an-all {
  flex: none; margin-left: auto; padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-weight: 400; font-size: var(--text-xs); line-height: 1; color: var(--accent-text);
}
.v2-an-all:hover, .v2-an-all:focus-visible { text-decoration: underline; }
.v2-an-econ { flex: none; font-size: var(--text-xs); color: var(--body); white-space: nowrap; }
/* A check that lands on the rate (guardrails 4a, 4b): count, the shortfall where one
   topic is short, and the door onto the set in Prompts. Text-sized, under the figure. */
.v2-an-adv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; min-width: 0; font-size: var(--text-xs); line-height: 1.4; }
.v2-an-adv .c { color: var(--ink); }
.v2-an-adv .d { font: 400 var(--text-2xs)/1.5 var(--mono); color: var(--faint); }
.v2-an-advgo { padding: 0; border: none; background: none; cursor: pointer; font-family: inherit; font-size: var(--text-xs); color: var(--accent-text); }
.v2-an-advgo:hover, .v2-an-advgo:focus-visible { text-decoration: underline; }

/* ── Narrow screens (P6; answers plan "On narrow screens") ─────────────────
   The core columns stay: Engine, Prompt, Outcome. A row becomes two lines, the
   engine and its outcome, then the question at full width beneath. Cites and the
   open chevron fold away: the whole row opens the reader, which holds both. The
   page never scrolls sideways. */
@media (max-width: 600px) {
  .v2-an-row, .v2-an-listhead { padding-left: 16px; padding-right: 16px; column-gap: 10px; row-gap: 4px; flex-wrap: wrap; }
  .v2-an-row .ce, .v2-an-listhead .he { flex: 1 1 auto; width: auto; min-width: 0; }
  .v2-an-row .cp, .v2-an-listhead .hp { order: 3; flex: 1 0 100%; min-width: 0; }
  .v2-an-row .cc, .v2-an-listhead .hc, .v2-an-row .ca, .v2-an-listhead .ha { display: none; }
  .v2-an-gsearch { padding-left: 28px; padding-right: 16px; }
}

/* ── A date range (P3; reading-range.js) ──────────────────────────────────
   The refusal a screen that cannot read a range shows in its own section, in place
   of its content. */
[data-range-refused] > :not(.rr-refusal) { display: none !important; }
.rr-refusal { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 48px auto; padding: 0 16px; }
.rr-refusal b { font-size: var(--text-md); color: var(--ink); }
.rr-refusal span { font-size: var(--text-sm); color: var(--body); }
.rr-actions { display: flex; flex-wrap: wrap; gap: 8px; }


/* Sources by claim (CIT P3): each sentence naming a tracked brand, with its three groups as a
   two-column list. The engine's sentence reads as a quote; a page tied to the claim is the ink,
   the other groups muted. */
.an-claim { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-light); }
.an-claim:first-of-type { border-top: 0; }
.an-claim-q { margin: 0; color: var(--body); font-size: var(--text-sm); line-height: 1.45; }
.an-claim-brands { font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--faint); }
.an-claim-tiers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: var(--text-xs); }
.an-claim-tiers .k { color: var(--muted); }
.an-claim-tiers .v { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.an-claim-tiers .v.on { color: var(--ink); }
.an-claim-given { margin: 2px 0 0; padding-left: 10px; border-left: 2px solid var(--accent); color: var(--body); font-size: var(--text-xs); line-height: 1.45; }
.an-claim-given span { font-family: var(--mono); color: var(--faint); }

/* The identity slot (CIT, for WHY and TRK): the lanes' pieces in a row under the verdict. */
.v2-rd-ident { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 6px 0; }

/* The work on a lever's finding (CIT P4 (c); PRF-contracts §2): PRF's mark, a second line in the row's
   outcome cell only where the work says something, and a line under the reader's lever. */
.v2-an-row .cv .v2-an-wv, .v2-ms-row .cwd .v2-an-wv { display: block; margin-top: var(--sp-1); white-space: normal; }
.v2-an-dkwork { margin-top: var(--sp-3); }

/* What the searches did to a question, and the site: searches (CIT P7): three groups of word
   chips, and a list whose look-alike row carries its move. */
.an-wd { margin-top: var(--sp-3); }
.an-wd-g { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; }
.an-wd-g > .v2-lbl { flex: none; width: 64px; }
.an-wd-ws { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.an-wd-w { font: 500 var(--text-2xs)/1.4 var(--mono); color: var(--ink); }
.an-wd-w i { font-style: normal; color: var(--muted); }
.an-site-list { margin-top: var(--sp-3); }
.an-site.warn .q { color: var(--warn); }

/* The two answers' searches side by side in the reader's diff (CIT P7): the words both kept in bold. */
.an-sb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.an-sb > .v2-lbl { grid-column: 1 / -1; }
.an-sb-side .w { display: block; font: 500 var(--text-2xs)/1.4 var(--mono); color: var(--muted); }
.an-sb-q { font: 500 var(--text-2xs)/1.5 var(--mono); color: var(--body); overflow-wrap: anywhere; }
.an-sb-q b { color: var(--ink); font-weight: 600; }