/* ===================================================================
   ProcIntel V2 — EVENT INTELLIGENCE DOSSIER
   Stage 4 of the approved V1 UI/UX redesign.

   Every value is a Stage 1 token. Loaded after shell.css so it may
   refine shell-level rules for this page only.

   THE GOVERNING DECISION. This page was nine tabs over one narrative,
   and the tab bar's last item — the Readout, the only complete view —
   was clipped off the right edge at 1440px. The dossier is now the
   page. What this stylesheet has to do is make a long document
   READABLE: a measure for prose, hairlines instead of nested cards, and
   a clear rhythm between chapters so length reads as thoroughness
   rather than as a wall.
   =================================================================== */

/* A reading width. The old workspace widened itself purely so nine tabs
   would fit; with the tabs gone the page can take the width prose
   actually wants. */
.content-event-dossier { max-width: 1080px; }
.ev-dossier { min-width: 0; }

/* -------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------- */
.ev-masthead-detail {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
}
.ev-masthead-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
}
.ev-doc-eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}
.ev-masthead-action { flex: none; }

/* The headline dominates, and it is not inside a card. */
.ev-doc-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 30ch;
}
.ev-doc-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.ev-sep { color: var(--text-disabled); }

.ev-doc-thread {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--provenance-synthesis);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.ev-doc-thread a { color: var(--text-primary); }

/* -------------------------------------------------------------------
   DECISION STRIP

   One hairline-divided surface, like the Home metric rail and the Stage
   3 portfolio summary — not six filled badges of equal weight.
   ------------------------------------------------------------------- */
.ev-strip {
  display: flex;
  flex-wrap: wrap;
  margin: var(--sp-6) 0 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  overflow: hidden;
}
.ev-strip-item {
  flex: 1 1 0;
  min-width: 128px;
  padding: var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--border-subtle);
}
.ev-strip-item:first-child { border-left: none; }
.ev-strip dt {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ev-strip-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--text-primary);
}
.ev-strip-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular, 400);
  color: var(--text-muted);
}
/* An unassessed value is quietened, never alarmed and never hidden: the
   reader must be able to tell "not assessed" from "not applicable".
   Urgency is unassessed across the entire corpus today. */
.ev-strip-item.is-unknown .ev-strip-value { color: var(--text-muted); font-weight: var(--fw-medium); }

/* Direction, not severity. */
.ev-impact-negative { color: var(--status-critical); }
.ev-impact-positive { color: var(--status-positive); }
.ev-impact-neutral-or-mixed, .ev-impact-mixed { color: var(--text-primary); }

/* -------------------------------------------------------------------
   SECTION NAVIGATION — anchors, sticky under the shell's top bar.
   ------------------------------------------------------------------- */
.ev-doc-nav {
  position: sticky;
  top: var(--topbar-height);
  z-index: 20;
  margin-top: var(--sp-7);
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ev-doc-nav { background: var(--surface-base); }
}
.ev-doc-nav-admin { color: var(--accent-primary); }

/* Anchored sections must clear the sticky bar when jumped to, and the
   focus target must not sit under it either. */
.ev-doc-section { scroll-margin-top: calc(var(--topbar-height) + 56px); }
.ev-doc-section:focus { outline: none; }
.ev-doc-section:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------------------
   THE DOCUMENT

   Chapters separated by space and a hairline, not by stacking cards
   inside cards. The section macros bring their own .event-section
   markup; this restyles it for a continuous document.
   ------------------------------------------------------------------- */
.ev-doc-body { margin-top: var(--sp-7); }

.ev-doc-section + .ev-doc-section { margin-top: var(--sp-9); }

/* The macros' own panel chrome is removed here: inside a dossier a
   bordered box per chapter reads as a dashboard, and the chapters
   already have headings. */
.ev-doc-section .event-section {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.ev-doc-section .event-section + .event-section { margin-top: var(--sp-8); }

.ev-doc-section .event-section-title {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--text-primary);
}

/* Prose gets a measure. Evidence tables and chip lists deliberately do
   not — they are scanned, not read. */
.ev-doc-section .intel-block-body,
.ev-doc-section .procintel-analysis-lede,
.ev-doc-section .event-subsection-lede { max-width: 74ch; }

/* Methodology is explainability, not the story: quieter, and last. */
.ev-doc-section-methodology { padding-top: var(--sp-7); border-top: 1px solid var(--border-subtle); }
.ev-doc-section-methodology .event-section-title { color: var(--text-secondary); }

/* -------------------------------------------------------------------
   RESPONSIVE — Stage 1 breakpoints only.
   ------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .ev-strip-item { flex: 1 1 40%; min-width: 0; padding: var(--sp-5); }
  .ev-strip-item:nth-child(odd) { border-left: none; }
  .ev-strip-item:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 639.98px) {
  .ev-doc-headline { font-size: 22px; max-width: none; }
  .ev-doc-section + .ev-doc-section { margin-top: var(--sp-8); }
  /* The strip stays two-up rather than collapsing to one tall column of
     six, which would push the intelligence off a phone screen. */
  .ev-strip-item { padding: var(--sp-4) var(--sp-5); }
  .ev-strip-value { font-size: var(--fs-body); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-doc-nav { transition: none; }
}