/*
  Screen 02 — Alert Investigation.
  Layout traces to SCREEN_02_ALERT_INVESTIGATION.md,
  SCREEN_02_ALERT_INVESTIGATION_VISUAL_CONCEPT.md, and the Design Review's
  accepted fixes (closing statement added, duplicated criteria bullet
  removed, accent consolidated to a single moment, Strategy Recall given
  its own label). No cards anywhere — every region is separated by
  whitespace and, where genuinely needed, a single hairline rule, per the
  Visual Concept's single most consequential constraint.
*/

.page-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-9);
}

/* .back-route moved to base.css (Experience Prototype Sprint 4) — shared
   with Screen 03, which also needs a quiet return route. */

/* ---------- Hero: label-plus-sentence pairs, no boxes, no grid ---------- */

.hero-block { padding-bottom: var(--space-7); }

.hero-answer + .hero-answer { margin-top: var(--space-5); }

.hero-answer__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-1);
}

.hero-answer__text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  line-height: var(--leading-normal);
  max-width: 40rem;
}

.hero-answer--first .hero-answer__text { font-weight: 500; }

/* ---------- Affected Companies ---------- */

.affected-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }

.affected-entry {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--colour-hairline);
  padding: var(--space-3) 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--size-body);
  color: var(--colour-text-muted);
  cursor: default;
  width: 100%;
}

.affected-list--selectable .affected-entry { cursor: pointer; }
.affected-list--selectable .affected-entry:hover { color: var(--colour-text); }
.affected-list--selectable .affected-entry:focus-visible { outline: 1px solid var(--colour-accent); outline-offset: 2px; }

.affected-entry__name { color: var(--colour-text); font-weight: 600; }

.affected-entry[aria-pressed="true"] .affected-entry__name {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--colour-hairline-strong);
  text-underline-offset: 3px;
}

.affected-entry__detail {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
}

/* ---------- Strategy Recall ---------- */

.strategy-recall { max-width: 40rem; }

.strategy-recall__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-2);
}

.strategy-recall__text {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
}

.strategy-recall__criterion {
  font-family: var(--font-mono);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--colour-hairline-strong);
  text-underline-offset: 3px;
  white-space: normal;
}

/* ---------- Evidence Hierarchy ---------- */

.evidence-summary {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  max-width: 38rem;
}

.confidence-line {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

.evidence-stack { margin-top: var(--space-6); }

.evidence-domain {
  border-bottom: 1px solid var(--colour-hairline);
  padding: var(--space-4) 0;
}
.evidence-domain:last-child { border-bottom: none; }

.evidence-domain summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.evidence-domain summary::-webkit-details-marker { display: none; }

.evidence-domain summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--colour-text-faint);
  width: 0.9em;
}
.evidence-domain[open] summary::before { content: "\2212"; }

.evidence-domain__mark {
  color: var(--colour-text-faint);
  text-transform: none;
  letter-spacing: normal;
  margin-left: auto;
}

.evidence-domain__body {
  margin-top: var(--space-3);
  padding-left: 1.7em;
}

.evidence-fact {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  max-width: 36rem;
}
.evidence-fact + .evidence-fact { margin-top: var(--space-3); }

.evidence-fact__source {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}

.evidence-pointer {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  max-width: 38rem;
}

.evidence-pointer__reveal {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-left: 2px solid var(--colour-hairline-strong);
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  line-height: var(--leading-loose);
  max-width: 36rem;
}
.evidence-pointer__reveal.visible { display: block; }

/* ---------- Commercial Interpretation ---------- */

.interpretation-block { padding: var(--space-3) 0; }

.interpretation-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-2);
}

.interpretation-text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  max-width: 38rem;
}

/* ---------- Explainability ---------- */

.explain-line + .explain-line { margin-top: var(--space-4); }

.explain-line__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-bottom: var(--space-1);
}

.explain-line__text {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  max-width: 38rem;
}

.selectivity {
  margin-top: var(--space-6);
  max-width: 38rem;
}

.selectivity p {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
}
.selectivity p + p { margin-top: var(--space-3); }

.selectivity__count {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* ---------- Intelligence Timeline ---------- */

.timeline-trend {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  max-width: 38rem;
  margin-bottom: var(--space-6);
}

.timeline {
  position: relative;
  padding-left: var(--space-5);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--colour-hairline-strong);
}

.timeline-event {
  position: relative;
  padding-bottom: var(--space-6);
}
.timeline-event:last-child { padding-bottom: 0; }

.timeline-event::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) - 3px);
  top: 5px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--colour-text-faint);
  background: var(--colour-base);
}

/* The single, deliberate remaining use of the accent on this entire
   screen — the current event, and nowhere else (Design Review: consolidate
   to one accent-tinted moment, not two). */
.timeline-event--current::before {
  border-color: var(--colour-accent);
  background: var(--colour-accent-low);
}

.timeline-event--current .timeline-event__date,
.timeline-event--current .timeline-event__text {
  color: var(--colour-text);
}

.timeline-event__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}

.timeline-event__text {
  margin-top: var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--size-body);
  color: var(--colour-text-muted);
  max-width: 34rem;
}

.timeline-event--prior .timeline-event__date,
.timeline-event--prior .timeline-event__text {
  opacity: 0.72;
  font-size: var(--size-small);
}

.timeline-link {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--size-small);
}

/* ---------- Investigation Pathways ---------- */

.pathways { display: flex; flex-direction: column; gap: var(--space-3); }
.pathway { font-family: var(--font-serif); font-size: var(--size-body); }

.watchlist-line { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }

.watchlist-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--size-body);
  color: var(--colour-text);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--colour-hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.watchlist-toggle:hover { color: var(--colour-accent-strong); }

.watchlist-line__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}

/* ---------- Closing statement ---------- */

.closing-statement { padding-top: var(--space-7); }

.closing-statement__line {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  max-width: 36rem;
}

.closing-statement__reviewed {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--colour-text-faint);
  display: none;
}
.closing-statement__reviewed.visible { display: block; }

/* A "previously reviewed" indicator — demo-state only, deliberately
   understated, not a badge. */
.reviewed-note {
  display: none;
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--colour-text-faint);
}
.reviewed-note.visible { display: block; }

/* ---------- Timeline settle-in motion (the one motion moment on this screen) ---------- */

.timeline-settle { animation: timelineSettle var(--duration-settle) var(--ease-settle); }
@keyframes timelineSettle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Prototype-only demo state switcher (shared pattern, page-scoped) ---------- */

body { padding-bottom: 3.75rem; }

.demo-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--colour-base-raised);
  border-top: 1px dashed var(--colour-hairline-strong);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  opacity: 0.7;
  transition: opacity var(--duration-quick) ease;
}
.demo-controls:hover, .demo-controls:focus-within { opacity: 1; }

.demo-controls__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #d98a4f;
  white-space: nowrap;
}

.demo-controls__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.demo-controls button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--colour-hairline-strong);
  color: var(--colour-text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.demo-controls button[aria-pressed="true"] {
  background: var(--colour-text);
  color: var(--colour-base);
  border-color: var(--colour-text);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .page-shell { padding: var(--space-7) var(--space-5) var(--space-8); }
}

@media (max-width: 720px) {
  .page-shell { padding: var(--space-6) var(--space-4) var(--space-8); }
  .hero-answer__text { max-width: 100%; }
  .evidence-domain__body { padding-left: 1.2em; }
  .timeline { padding-left: var(--space-4); }
  .timeline-event::before { left: calc(-1 * var(--space-4) - 3px); }
  .demo-controls { justify-content: center; }
  body { padding-bottom: 4.75rem; }
}