/* ===================================================================
   ProcIntel V2 — DEVELOPING INTELLIGENCE
   Stage 5 of the approved V1 UI/UX redesign.

   Every value is a Stage 1 token. Loaded after shell.css.

   WHAT MAKES THIS DIFFERENT FROM EVENTS. An Event is a development: the
   Stage 3 ledger is right for it, because a reader scans many and opens
   one. A Situation is an accumulation: few of them exist, each spans
   several Events, and the questions are how much evidence supports it
   and how that has moved. So situations get narrative rows with room
   for an assessment, not table cells — and the figures that lead are
   the two that no single Event can have: how many Events it spans, and
   how many INDEPENDENT sources underpin it.

   THE TWO SEMANTIC TRAPS THIS FILE IS BUILT TO AVOID:

     1. Evidence is not severity. There is no red-to-green bar here and
        no gauge. Evidence Strength is a row of neutral marks with its
        band named in words beside them, because a bar implies a target
        and 100% of a bar implies "full" -- neither is true of evidence.

     2. Evidence activity is not escalation. The stored vocabulary says
        "Escalating"; the number means evidence was linked faster. It is
        rendered as plain text with no arrow and no colour, because any
        directional glyph would reinstate exactly the reading the
        translation exists to remove.
   =================================================================== */

.content-di-monitor { max-width: 1120px; }

/* -------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------- */
.di-masthead {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 1180px) {
  .di-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--sp-9);
  }
  .di-masthead .di-summary { margin-top: 0; }
}
.di-masthead-main { min-width: 0; }

/* Violet is the Developing Intelligence provenance channel, used on the
   eyebrow and on situation structure -- never as a page-wide wash, and
   never on lifecycle states, which carry their own meaning. */
.di-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(--provenance-synthesis);
}
.di-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.di-standfirst {
  margin: var(--sp-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 64ch;
}

.di-summary {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  overflow: hidden;
}
.di-summary-item {
  flex: 1 1 0;
  min-width: 116px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: var(--motion-hover);
}
.di-summary-item:first-child { border-left: none; }
.di-summary-item:hover { background: var(--surface-raised); }
.di-summary-item:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.di-summary-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.di-summary-label { font-size: var(--fs-caption); color: var(--text-muted); }
.di-summary-item.is-zero .di-summary-value { color: var(--text-disabled); }

.di-operator-action { margin: 0 0 var(--sp-5); font-size: var(--fs-caption); }

/* -------------------------------------------------------------------
   CONTROLS
   ------------------------------------------------------------------- */
.di-controls {
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
}
.di-search { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.di-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
}
.di-search input::placeholder { color: var(--text-muted); }
.di-search input:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: -1px;
  border-color: var(--accent-primary);
}
.di-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.55); }
.di-search-go {
  flex: none;
  padding: 0 var(--sp-7);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--motion-hover);
}
.di-search-go:hover { background: var(--surface-hover); border-color: var(--accent-muted); }
.di-search-go:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.di-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  align-items: end;
}

.di-result-bar { margin-bottom: var(--sp-5); }
.di-result-count { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); }
.di-result-count .num { color: var(--text-primary); font-weight: var(--fw-semibold); }
.di-result-note { color: var(--text-muted); }

/* -------------------------------------------------------------------
   THE SITUATION MONITOR
   ------------------------------------------------------------------- */
.di-monitor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Situations are separate surfaces rather than rows on one, because
   each is a self-contained account rather than an entry in a register.
   A violet left edge marks the DI provenance channel; it is 2px, not a
   purple card. */
.di-situation {
  position: relative;
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--provenance-synthesis);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.di-situation:hover { background: var(--surface-raised); border-color: var(--border-default); }
.di-situation:focus-within { background: var(--surface-raised); }

.di-situation-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.di-situation-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -3px;
}
.di-situation-ops { position: relative; z-index: 2; margin-top: var(--sp-4); }

.di-situation-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-3);
}

/* LIFECYCLE — the word leads; the dot is a second channel. Deliberately
   not five saturated pills, and deliberately not all violet: the stage
   of a situation is its own dimension, not its provenance. */
.di-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.di-stage-dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}
.di-stage-emerging   { color: var(--status-warning); }
.di-stage-active     { color: var(--status-critical); }
.di-stage-monitoring { color: var(--text-secondary); }
.di-stage-dormant    { color: var(--text-muted); }
.di-stage-resolved   { color: var(--status-positive); }
/* Resolved is a finished situation, not an alarm: hollow, not filled. */
.di-stage-resolved .di-stage-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* EVIDENCE STRENGTH — named band plus neutral marks.

   NOT a progress bar. A bar implies a target and a maximum worth
   reaching; evidence has neither. Four marks, the reached ones filled
   in the DI channel colour, with the band spelled out beside them so
   the meaning never depends on counting or on colour. */
.di-evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-caption);
}
.di-evidence-chip-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.di-evidence-chip-value { color: var(--text-primary); font-weight: var(--fw-medium); }
.di-evidence-marks { display: inline-flex; gap: 3px; }
.di-evidence-mark {
  width: 14px;
  height: 4px;
  border-radius: 1px;
  background: var(--surface-hover);
}
.di-evidence-mark.is-lit { background: var(--provenance-synthesis); }

/* A word, not another coloured pill. The situation card already carries
   lifecycle and evidence; a third saturated badge would turn it into the
   badge collection the brief rules out. */
.di-significance {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.di-significance::before {
  content: "Significance ";
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.di-situation-updated {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.di-situation-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-primary);
  text-wrap: pretty;
  max-width: 70ch;
}
.di-situation:hover .di-situation-title { color: var(--accent-primary); }

.di-situation-summary {
  margin: var(--sp-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  line-height: 1.55;
  max-width: 80ch;
}

.di-situation-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.di-fact { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.di-fact-value { color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.di-fact-key {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Evidence activity is plain text. No arrow, no colour, no emphasis --
   a directional glyph here would say "the situation is escalating",
   which is precisely what the stored value does not mean. */
.di-fact-activity { color: var(--text-muted); }

.di-situation.is-fictional { opacity: 0.72; }
.di-monitor-empty { list-style: none; }

.di-monitor-note {
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  max-width: 78ch;
}

/* -------------------------------------------------------------------
   RESPONSIVE — Stage 1 breakpoints only.
   ------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .di-search { flex-direction: column; }
  .di-search-go { padding: var(--sp-4) var(--sp-7); }
  .di-summary-item { padding: var(--sp-5); min-width: 104px; }
}

@media (max-width: 639.98px) {
  .di-summary-item { flex: 1 1 44%; min-width: 0; }
  .di-summary-item:nth-child(odd) { border-left: none; }
  .di-summary-item:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
  .di-controls { padding: var(--sp-5); }
  .di-filters { grid-template-columns: minmax(0, 1fr); }
  .di-situation { padding: var(--sp-5); }
  .di-situation-title { font-size: var(--fs-card-title); }
  /* The timestamp sits under the badges rather than against an edge
     that no longer exists at this width. */
  /* A word, not another coloured pill. The situation card already carries
   lifecycle and evidence; a third saturated badge would turn it into the
   badge collection the brief rules out. */
.di-significance {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.di-significance::before {
  content: "Significance ";
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.di-situation-updated { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .di-situation, .di-summary-item, .di-search-go { transition: none; }
}

/* ===================================================================
   THE SITUATION WORKSPACE (Stage 5B)

   The Sprint 6 brief was ALREADY one vertically readable dossier with
   the right chapters -- synthesis, why-tracking, evidence, development,
   implications, exposure, sources. Stage 5 did not rebuild it. What it
   adds is a spine (anchor navigation), the V2 surface treatment, and
   the evidence-activity relabelling; the section markup is untouched.
   =================================================================== */

.di-doc-nav {
  position: sticky;
  top: var(--topbar-height);
  z-index: 20;
  margin: var(--sp-6) 0 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)) {
  .di-doc-nav { background: var(--surface-base); }
}

/* Anchored sections must clear the sticky bar when jumped to. */
.di-brief [id] { scroll-margin-top: calc(var(--topbar-height) + 56px); }

/* Chapters separated by space and a hairline rather than stacked
   panels: inside a dossier a bordered box per chapter reads as a
   dashboard, and each chapter already carries a heading. */
.di-brief .di-section {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: var(--sp-9);
}
.di-brief .di-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);
}
.di-brief .di-section-lede,
.di-brief .di-synthesis-lede { max-width: 76ch; }

/* The situation title leads, outside any card. */
.di-brief .di-hero-title {
  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;
}
.di-brief .di-eyebrow { color: var(--provenance-synthesis); }

/* The state strip: one hairline surface, matching Home, Events and the
   Event dossier rather than inventing a fourth treatment. */
.di-brief .di-hero-metrics {
  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;
}
.di-brief .di-hero-metric {
  flex: 1 1 0;
  min-width: 132px;
  padding: var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--border-subtle);
}
.di-brief .di-hero-metric:first-child { border-left: none; }
.di-brief .di-hero-metric 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);
}
.di-brief .di-hero-metric dd {
  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);
}

/* ProcIntel's synthesis is INTERPRETATION and is marked as such: the
   violet provenance rule is the signal that a reader has crossed from
   reported fact into ProcIntel's reading of it. */
.di-brief .di-synthesis {
  padding-left: var(--sp-6);
  border-left: 2px solid var(--provenance-synthesis);
  background: transparent;
}

@media (max-width: 899.98px) {
  .di-brief .di-hero-metric { flex: 1 1 40%; min-width: 0; padding: var(--sp-5); }
  .di-brief .di-hero-metric:nth-child(odd) { border-left: none; }
  .di-brief .di-hero-metric:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 639.98px) {
  .di-brief .di-hero-title { font-size: 22px; }
  .di-brief .di-section { margin-top: var(--sp-8); }
}