/* ===================================================================
   ProcIntel V2 — EVENTS INTELLIGENCE DISCOVERY WORKSPACE
   Stage 3 of the approved V1 UI/UX redesign.

   Built on Stage 1. Every value here is a Stage 1 token; no new
   colours, no new spacing scale, no second design system. Loaded after
   shell.css so it may refine shell-level rules for this page only.

   THE GOVERNING DECISION. The old page was a fourteen-column admin
   table in which the headline — the only thing a reader actually scans
   — occupied one narrow cell while PRI and Geography columns rendered
   an em-dash on every single row. This is a LEDGER, not a card farm and
   not a spreadsheet: one surface, hairline separators, the headline set
   at reading size, and every supporting fact rendered only when it is
   actually known.
   =================================================================== */

/* -------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------- */
.ev-masthead {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
}
/* From full desktop, the summary sits BESIDE the title rather than under
   it. Stacked, the masthead cost ~90px directly above the results, and
   on a discovery page vertical space is the budget that decides how much
   of the corpus a reader can take in at once.

   1440 -- the Stage 1 "full desktop workspace" breakpoint -- not 1180.
   Measured at 1180 the title column collapsed to 325px against the
   summary's 528px minimum, which cramped the masthead to buy the space
   this was supposed to free. Below 1440 it stacks, which is honest. */
@media (min-width: 1440px) {
  .ev-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--sp-9);
  }
  .ev-masthead .ev-summary { margin-top: 0; min-width: 420px; }
}
.ev-masthead-main { min-width: 0; }
.ev-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-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);
}
.ev-standfirst {
  margin: var(--sp-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 62ch;
}

/* The portfolio summary. Hairline-divided, like the Home metric rail —
   four numbers on one surface, not four bordered KPI tiles. */
.ev-summary {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  overflow: hidden;
}
.ev-summary-item {
  flex: 1 1 0;
  min-width: 132px;
  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);
}
.ev-summary-item:first-child { border-left: none; }
.ev-summary-item:hover { background: var(--surface-raised); }
.ev-summary-item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}
.ev-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;
}
.ev-summary-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
/* Zero is a real answer and is styled as one, never as an error. */
.ev-summary-item.is-zero .ev-summary-value { color: var(--text-disabled); }

/* -------------------------------------------------------------------
   INTELLIGENCE VIEWS

   Named ways of looking at the corpus. Quiet by default and gold only
   when selected — a row of six permanently-highlighted buttons would
   spend the accent on navigation that is not currently doing anything.
   ------------------------------------------------------------------- */
.ev-views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.ev-view {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--motion-hover);
}
.ev-view:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-raised);
}
.ev-view.is-active {
  border-color: var(--accent-muted);
  background: var(--wash-accent);
  color: var(--accent-primary);
  font-weight: var(--fw-semibold);
}
.ev-view:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   DISCOVERY CONTROL BAR
   ------------------------------------------------------------------- */
.ev-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);
}

.ev-search { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ev-search input {
  flex: 1 1 auto;
  min-width: 0;      /* flex items default to min-width:auto */
  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);
}
.ev-search input::placeholder { color: var(--text-muted); }
.ev-search input:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: -1px;
  border-color: var(--accent-primary);
}
.ev-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.55); }
.ev-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);
}
.ev-search-go:hover { background: var(--surface-hover); border-color: var(--accent-muted); }
.ev-search-go:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Auto-fit, so the row reflows instead of wrapping into a ragged
   two-then-one arrangement at intermediate widths. */
.ev-primary-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5);
}

/* From full-width desktop, search and the four controls share ONE row.

   Stacking them cost ~56px of vertical space directly above the
   results, and the whole point of this page is how many Events a reader
   can see at once. `display: contents` promotes the filter groups to
   direct grid items so they line up with the search field instead of
   forming a nested grid inside one cell.

   1180, NOT 900. Measured at 900 the five tracks needed 864px inside an
   849px box: the row silently overflowed its own panel and clipped the
   last control. Minimum track widths cannot shrink, so the honest fix
   is to give the single row enough width before using it -- below this
   the auto-fit grid above wraps cleanly instead. */
@media (min-width: 1180px) {
  .ev-controls {
    display: grid;
    grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(132px, 1fr));
    align-items: end;
    gap: var(--sp-5);
  }
  .ev-search { margin-bottom: 0; }
  .ev-primary-filters { display: contents; }
  .events-advanced { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------
   RESULT BAR
   ------------------------------------------------------------------- */
.ev-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.ev-result-count {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-meta);
}
.ev-result-count .num {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ev-result-note { color: var(--text-muted); }
.ev-result-tools { display: flex; align-items: center; gap: var(--sp-5); }

.ev-viewmode {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ev-viewmode-option {
  padding: var(--sp-3) var(--sp-5);
  border-left: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  text-decoration: none;
  transition: var(--motion-hover);
}
.ev-viewmode-option:first-child { border-left: none; }
.ev-viewmode-option:hover { background: var(--surface-raised); color: var(--text-primary); }
.ev-viewmode-option.is-active {
  background: var(--surface-hover);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.ev-viewmode-option:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }

/* -------------------------------------------------------------------
   THE LEDGER
   ------------------------------------------------------------------- */
.ev-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  overflow: hidden;
}

/* The row is a positioning context for one stretched link. The whole
   row is clickable, but there is exactly ONE link in the accessible
   tree rather than a headline link plus an invisible overlay — and the
   visible headline is aria-hidden so a screen reader hears it once. */
.ev-row {
  position: relative;
  padding: var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.ev-row:first-child { border-top: none; }
.ev-row:hover { background: var(--surface-raised); }
.ev-row:focus-within { background: var(--surface-raised); }

.ev-row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
  text-decoration: none;
}
.ev-row-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
/* Operator controls must stay clickable above the stretched link. */
.ev-row-ops { position: relative; z-index: 2; margin-top: var(--sp-4); }

.ev-row-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-2);
}

/* SIGNIFICANCE — a word, with the band on a short rule beside it.
   Deliberately not five saturated pills: the reader needs to rank these
   at a glance, and five competing fills on every row is the
   traffic-light dashboard this product is not. */
.ev-sig {
  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);
}
.ev-sig::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 1px;
  background: currentColor;
}
.ev-sig-5 { color: var(--status-critical); }
.ev-sig-4 { color: var(--status-warning); }
.ev-sig-3 { color: var(--text-secondary); }
.ev-sig-2, .ev-sig-1 { color: var(--text-muted); }
.ev-sig-none { color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.ev-priority {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* Personalisation PRIORITISES, never filters. A quiet marker. */
.ev-foryou {
  padding: 1px var(--sp-3);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-xs);
  font-size: var(--fs-micro);
  color: var(--accent-primary);
  white-space: nowrap;
}

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

/* The headline dominates. It is the one thing set at reading size. */
.ev-row-headline {
  margin: 0;
  font-family: var(--font-display);
  /* --fs-section, not --fs-card: the latter is not a token and silently
     fell back to inherited 14px, which left the headline the same size
     as its own metadata. Caught by measuring the rendered page. */
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: 1.32;
  color: var(--text-primary);
  text-wrap: pretty;
  max-width: 78ch;
}
.ev-row:hover .ev-row-headline { color: var(--accent-primary); }

.ev-row-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
/* Separators drawn by CSS, so an absent middle value cannot leave a
   stranded dot. */
.ev-row-context > span + span::before {
  content: "·";
  margin-right: var(--sp-4);
  color: var(--text-disabled);
}

.ev-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-7);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.ev-row-facts:empty { display: none; }
.ev-fact { display: inline-flex; align-items: baseline; gap: var(--sp-3); }
.ev-fact-key {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Direction, not severity: negative and positive must stay
   distinguishable without turning the row into a status board. */
.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-secondary); }

.ev-row-implication {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--provenance-assessment);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.5;
  max-width: 84ch;
}

.ev-row.is-fictional { opacity: 0.72; }
.ev-ledger-empty { padding: var(--sp-8) var(--sp-7); }

/* -------------------------------------------------------------------
   RESPONSIVE — the Stage 1 breakpoints, no new ones.
   ------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .ev-summary-item { padding: var(--sp-5) var(--sp-6); min-width: 118px; }
  .ev-summary-value { font-size: 22px; }
  .ev-search { flex-direction: column; }
  .ev-search-go { padding: var(--sp-4) var(--sp-7); }
}

@media (max-width: 639.98px) {
  /* Two rows of two, matching the Home rail's phone treatment. */
  .ev-summary { flex-wrap: wrap; }
  .ev-summary-item { flex: 1 1 44%; min-width: 0; }
  .ev-summary-item:nth-child(odd) { border-left: none; }
  .ev-summary-item:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }

  .ev-controls { padding: var(--sp-5); }
  .ev-primary-filters { grid-template-columns: minmax(0, 1fr); }

  .ev-row { padding: var(--sp-6) var(--sp-5); }
  .ev-row-headline { font-size: var(--fs-body); }
  /* On a phone the timestamp sits under the badges rather than being
     pushed to a far edge that no longer exists. */
  .ev-updated { margin-left: 0; }
  .ev-result-bar { align-items: flex-start; }
}

/* Stage 1's reduced-motion contract. */
@media (prefers-reduced-motion: reduce) {
  .ev-row, .ev-summary-item, .ev-view, .ev-viewmode-option { transition: none; }
}

/* V1 PREMIUM UX: the weather standfirst was pulled up into the tab bar
   by a legacy negative margin, so it touched the tabs' underline. */
.events-view-standfirst { margin: var(--sp-4) 0 var(--sp-5); max-width: 72ch; }