/* ===================================================================
   ProcIntel V2 — SHARED COMPONENTS
   Stage 1 of the approved V1 UI/UX redesign.

   The primitives every later screen stage inherits: type, buttons,
   inputs and filters, badges and status chips, provenance treatments,
   cards, tabs, tables, tooltips and shared states.

   SCOPE DISCIPLINE. Stage 1 styles the PRIMITIVES, not the screens.
   Selectors here are either element-level (h1, table) or on the small
   set of shared class names the existing templates already use. No
   screen-specific class is redesigned here; those belong to that
   screen's own stage.

   COLOUR IS NEVER THE ONLY SIGNAL. Every status and provenance
   treatment below pairs its colour with a written label, and several
   add a shape or a rule as a third channel.
   =================================================================== */

/* -------------------------------------------------------------------
   TYPE
   ------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1;   /* Inter: a more legible lowercase l */
}

h1, h2, h3, h4, h5, h6,
.page-title, .briefing-title, .di-hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
h1, .page-title { font-size: var(--fs-page-title); }
/* Legacy draws a gold left rule on every `.page-title`. The shared page
   header puts gold in the eyebrow instead, so pages still using the
   legacy class match pages using the new header: no rule, no indent. */
.page-title { border-left: none; padding-left: 0; }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-card-title); }
h4, h5, h6 { font-size: var(--fs-body); }

/* Figures line up in columns wherever they are compared. */
.num, .pri-value, .pulse-value, td.num, th.num,
.metric-value, .kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The one uppercase label treatment. */
.v2-label,
.sidebar-group-label,
.intel-block-label,
.provenance-key-title {
  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(--text-muted);
}

a { color: var(--accent-primary); text-decoration-color: var(--accent-muted); }
a:hover { color: var(--accent-hover); }

hr, .rule { border: none; border-top: 1px solid var(--border-subtle); }

::selection { background: var(--accent-muted); color: var(--text-primary); }

/* -------------------------------------------------------------------
   FOCUS — one visible treatment, applied once, for every control.

   Preserved from the V1 foundation and strengthened: gold reads
   clearly against every surface in the ladder, and the offset keeps it
   off the control's own edge.
   ------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

/* -------------------------------------------------------------------
   PAGE HEADER -- V1 PREMIUM UX

   One structure for every product page, replacing four that had grown
   independently (a gold left-bar title, an eyebrow and stat strip, a
   bare title with a count, and a title with link-styled actions):

       eyebrow   where you are in the product      optional, short
       title     the page's one <h1>
       lede      what the page is for              optional, one sentence
       actions   the page's primary controls       optional, right-aligned
       aside     a compact figure or context       optional

   Rendered by the `page_header` macro in _macros.html so pages cannot
   drift apart again. The title carries no decorative gold bar: gold is
   the eyebrow's, and a second gold mark per heading was the opposite of
   a scarce accent.
   ------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6) var(--sp-9);
  margin: 0 0 var(--sp-8);
}
.page-header-text { flex: 1 1 420px; min-width: 0; }
.page-eyebrow {
  margin: 0 0 var(--sp-3);
  color: var(--accent-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.page-header .page-header-title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
}
.page-header .page-header-title::before { content: none; display: none; }
.page-header-lede {
  margin: var(--sp-4) 0 0;
  max-width: 72ch;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.page-header-actions,
.page-header-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* A compact figure row that can sit in a page header's aside or under a
   section heading. Only real counts belong here -- never a placeholder
   or a guessed metric -- and a zero is rendered quieter than a value,
   because a row of large zeros reads as a broken dashboard. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 96px;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
}
.stat:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.stat:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.stat:only-child  { border-radius: var(--radius-md); }
.stat-value {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-value.is-zero { color: var(--text-disabled); }
.stat-label { color: var(--text-muted); font-size: var(--fs-caption); }

/* -------------------------------------------------------------------
   SECTION HEADING -- the level below a page header.
   ------------------------------------------------------------------- */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.section-heading > h2,
.section-heading > .section-heading-title {
  margin: 0;
  font-size: var(--fs-section);
}
.section-heading-meta { color: var(--text-muted); font-size: var(--fs-meta); }

/* -------------------------------------------------------------------
   FACT LIST -- label / value pairs, for record attributes.

   A <dl>, because that is what this content is. Replaces the dozens of
   two-column tables and "Label: value" paragraphs detail pages had.
   ------------------------------------------------------------------- */
.fact-list {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-8);
  margin: 0;
}
.fact-list > dt {
  color: var(--text-muted);
  font-size: var(--fs-meta);
}
.fact-list > dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-meta);
  min-width: 0;
  overflow-wrap: anywhere;
}
.fact-list-compact { gap: var(--sp-3) var(--sp-7); }
@media (max-width: 639.98px) {
  .fact-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) 0; }
  .fact-list > dd { margin-bottom: var(--sp-4); }
}

/* An inline meta line: category - geography - date. */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-meta);
}
.meta-line > * + *::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  vertical-align: middle;
}

/* Lifecycle moves sit in one row, forward first. */
.lifecycle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.lifecycle-actions form, .rm-lifecycle-form { margin: 0; }

.filter-bar-compact { padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5); }

/* -------------------------------------------------------------------
   DETAIL PAGE -- V1 PREMIUM UX

   The shared anatomy of a record page (Signal, Entity, Event cluster):
   an eyebrow saying what kind of record it is, the title as the page's
   one <h1>, a meta line, optional actions, a compact stat row, then
   sections. One definition, so these pages cannot drift apart.
   ------------------------------------------------------------------- */
.detail-hero { margin: var(--sp-6) 0 var(--sp-8); }
.detail-hero .detail-hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
}
.detail-hero-lede {
  margin: var(--sp-5) 0 0;
  max-width: 72ch;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.detail-hero-meta { margin-top: var(--sp-5); }
.detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.detail-stats { margin-bottom: var(--sp-6); }
.detail-aside { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-caption); max-width: 80ch; }
.detail-section { margin-top: var(--section-gap); }
.table-spaced { margin-top: var(--sp-7); }
.cell-note { font-size: var(--fs-caption); }

/* EXPLAINER -- methodology a reader can open, instead of rules standing
   between them and the content. */
.v2-explainer {
  margin: 0 0 var(--sp-7);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.v2-explainer > summary {
  padding: var(--sp-5) var(--sp-7);
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style-position: inside;
}
.v2-explainer > summary:hover { color: var(--text-primary); }
.v2-explainer[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.v2-explainer-body { padding: var(--sp-6) var(--sp-7) var(--sp-7); color: var(--text-secondary); font-size: var(--fs-meta); }
.v2-explainer-body > p { margin: 0 0 var(--sp-5); max-width: 80ch; }
.v2-explainer-title { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* An operator-only region inside a page subscribers can also open. It
   is labelled, so an operator never mistakes it for subscriber content
   -- and it is only ever RENDERED for an operator session; this is how
   it looks, not what protects it. */
.operator-panel {
  margin-top: var(--section-gap);
  padding: var(--panel-padding);
  background: var(--surface-inset);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.operator-heading {
  margin: var(--sp-8) 0 var(--sp-5);
  color: var(--text-primary);
  font-size: var(--fs-card-title);
}
.operator-panel > .operator-heading:first-of-type,
.operator-grid .operator-heading { margin-top: 0; }
.operator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-8) var(--sp-10);
  margin-bottom: var(--sp-8);
}
.operator-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.operator-list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.operator-inline { display: flex; align-items: center; gap: var(--sp-5); }
.operator-inline form, .operator-list form { margin: 0; }
.operator-inline-form { display: flex; gap: var(--sp-4); align-items: center; }
.operator-inline-form > input { flex: 1 1 auto; }
.operator-inline-form > button { flex: none; white-space: nowrap; }
.operator-disclosure { margin-top: var(--sp-6); }
.operator-disclosure > summary { cursor: pointer; color: var(--text-secondary); font-size: var(--fs-meta); }
.operator-disclosure[open] > summary { margin-bottom: var(--sp-5); }

.operator-panel-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  color: var(--status-info);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------
   BUTTONS

   `.btn-flagship` IS THE OPT-OUT. This selector's specificity is (0,7,1)
   -- seven :not() clauses plus the element -- which silently beats any
   ordinary class rule a feature stylesheet can write, including a
   two-class one like `.content-signals .sig-apply` at (0,2,0). A page
   that styles its own buttons end to end therefore cannot win by
   writing a more specific class; it has to stop matching this rule at
   all, which is exactly what the :not() chain is for.

   Adding a clause here is safe by construction: it can only REMOVE this
   primitive from elements that carry the new class, and nothing carried
   `.btn-flagship` before it was introduced.

   V1 PREMIUM UX: THE VARIANTS ARE OPTED OUT TOO. The chain's
   (0,7,1) also beat every VARIANT class, so a <button class="btn
   btn-primary"> rendered as a plain grey button and a destructive
   "Remove" looked exactly as safe as "Save" -- only <a class="btn ...">
   links ever showed their variant. Each variant class is now removed
   from the element primitive and given the primitive's SHAPE through the
   class list above, so its own rule below applies at equal specificity
   and wins by source order. Still no !important.
   ------------------------------------------------------------------- */
.btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-destructive, .btn-danger, .btn-deny, .btn-approve,
button:not(.btn-link):not(.btn-flagship):not(.sidebar-collapse-toggle):not(.nav-toggle):not(.sidebar-close):not(.info-tooltip-trigger):not(.header-icon-btn):not(.header-help-trigger):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-destructive):not(.btn-danger):not(.btn-deny):not(.btn-approve):not(.btn-icon),
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 34px;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--border-default);
  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);
  line-height: 1;
  cursor: pointer;
  transition: var(--motion-hover);
}
.btn:hover,
button:not(.btn-link):not(.sidebar-collapse-toggle):not(.nav-toggle):not(.sidebar-close):not(.info-tooltip-trigger):not(.header-icon-btn):not(.header-help-trigger):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-destructive):not(.btn-danger):not(.btn-deny):not(.btn-approve):not(.btn-icon):hover,
input[type="submit"]:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
/* A link styled as a button is a button to the reader: no underline, and
   the variant's own text colour rather than the link gold. */
a.btn, a.btn:hover, a.btn:focus-visible { text-decoration: none; }
a.btn:not(.btn-primary):not(.btn-approve):not(.btn-destructive):not(.btn-danger):not(.btn-deny) { color: var(--text-primary); }
a.btn.btn-ghost { color: var(--text-secondary); }
a.btn.btn-ghost:hover { color: var(--text-primary); }
.btn:active { transform: translateY(0.5px); }
.btn[disabled], button[disabled], .btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* PRIMARY — gold, and therefore rare. One per view at most: a gold
   button is a claim that this is THE action. */
.btn-primary, .btn-approve {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-on);
  font-weight: var(--fw-semibold);
}
.btn-primary:hover, .btn-approve:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

.btn-secondary, .btn-watch, .btn-outline {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* DESTRUCTIVE -- outlined in the critical colour, never filled, so it
   is visibly different from the primary action standing next to it.
   `.btn-danger` and `.btn-deny` are the older names for exactly this
   role (removing an item, denying a proposal); they are mapped here
   rather than left rendering as ordinary grey buttons, which made
   "Remove" look as safe as "Save". */
.btn-destructive, .btn-danger, .btn-deny {
  background: transparent;
  border-color: var(--status-critical);
  color: var(--status-critical);
}
.btn-destructive:hover, .btn-danger:hover, .btn-deny:hover {
  background: var(--wash-critical);
  border-color: var(--status-critical);
  color: var(--status-critical);
}

.btn-icon {
  min-height: 32px;
  width: 32px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}
.btn-icon:hover { background: var(--surface-raised); color: var(--text-primary); }
.btn-icon svg { width: 16px; height: 16px; display: block; }

.btn-sm { min-height: 28px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-caption); }

/* A link that is genuinely a link, not a button wearing link clothes. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.btn-link:hover { color: var(--accent-hover); }

/* -------------------------------------------------------------------
   INPUTS AND FILTERS

   The single loudest "internal admin tool" signal in the current
   product is an unstyled native <select>. These rules replace the
   browser default across every existing form without touching a
   template.
   ------------------------------------------------------------------- */
input:not([type]), input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="url"], textarea, select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 34px;
  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);
  line-height: 1.4;
  transition: var(--motion-hover);
}
textarea { min-height: 84px; line-height: var(--lh-normal); resize: vertical; }

input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-primary);
  background: var(--surface-base);
}
::placeholder { color: var(--text-disabled); opacity: 1; }

/* The native dropdown arrow, redrawn as an inline SVG so it matches the
   icon family and inherits the dark ground. */
select {
  padding-right: var(--sp-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238494A3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  background-size: 14px 14px;
  cursor: pointer;
}
select option { background: var(--surface-panel); color: var(--text-primary); }

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  flex: none;
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  transition: var(--motion-hover);
}
input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"]    { border-radius: var(--radius-pill); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-pill);
  background: var(--text-inverse);
}

label { color: var(--text-secondary); font-size: var(--fs-meta); }

/* FORM LAYOUT -- V1 PREMIUM UX.

   Forms had no shared layout: each page stacked label, input, label,
   input down the left edge with inline margins. One grid now lays out
   every form field, so spacing is decided once.

     .form-grid         the form itself
     .form-field        one label + control (+ help / error)
     .form-field-wide   spans the full row
     .form-actions      the row of buttons, always last */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
  margin: 0;
}
.form-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.form-field-wide, .form-actions { grid-column: 1 / -1; }
.form-field > label {
  color: var(--text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}
.form-help { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.form-error { margin: 0; color: var(--status-critical); font-size: var(--fs-caption); }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--status-critical); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
/* A standalone form (create, new bulletin) sits on its own panel at a
   comfortable width rather than stretching across the workspace. */
.form-panel { max-width: 720px; }

/* Filter bars: the shared shape the existing screens already use. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.filter-group { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.filter-group > label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-checkbox label,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-meta);
  cursor: pointer;
}

/* Quick-filter chips (Events already renders these). */
.quick-filter, .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: var(--motion-hover);
}
.quick-filter:hover, .chip:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.quick-filter.is-active, .chip.is-active {
  background: var(--wash-accent);
  border-color: var(--accent-muted);
  color: var(--accent-primary);
}

/* -------------------------------------------------------------------
   BADGES AND STATUS CHIPS

   ProcIntel has several DISTINCT rated concepts -- Significance,
   Confidence, Impact direction, Event lifecycle, DI lifecycle, Evidence
   strength, source tier, review state. They are deliberately NOT
   collapsed into one generic badge merely because they look alike:
   their meanings differ and the reader must be able to tell them apart.

   What is shared is the SHAPE vocabulary:
     .v2-badge  - square-ish, a classification (significance, band)
     .v2-chip   - pill, a lifecycle or review STATE
     .v2-dot    - a leading dot, for a state shown beside a label
   Colour then carries severity within that shape, and the text always
   says which concept it is.
   ------------------------------------------------------------------- */
.v2-badge, .badge, .lifecycle-badge, .pri-band {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 2px var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.6;
}
.v2-chip {
  border-radius: var(--radius-pill);
  padding: 2px var(--sp-5);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.v2-critical, .badge-critical, .pri-band-critical {
  color: var(--status-critical);
  background: var(--wash-critical);
  border-color: var(--status-critical);
}
.v2-warning, .badge-high, .pri-band-high {
  color: var(--status-warning);
  background: var(--wash-warning);
  border-color: var(--status-warning);
}
.v2-positive, .badge-real {
  color: var(--status-positive);
  background: var(--wash-positive);
  border-color: var(--status-positive);
}
.v2-info, .pri-band-medium {
  color: var(--status-info);
  background: var(--wash-info);
  border-color: var(--status-info);
}
.v2-neutral, .pri-band-watch {
  color: var(--status-neutral);
  background: var(--wash-neutral);
  border-color: var(--border-strong);
}
.v2-accent {
  color: var(--accent-primary);
  background: var(--wash-accent);
  border-color: var(--accent-muted);
}

/* The dot is a second, non-colour channel: it has a position and a
   shape even where colour is unavailable. */
.v2-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

/* -------------------------------------------------------------------
   PROVENANCE — fact vs metric vs assessment vs synthesis.

   A left rule plus a written tag, never colour alone. The existing
   .intel-block system is carried forward onto the dark ground and
   extended with two channels the audit identified as needed.
   ------------------------------------------------------------------- */
.intel-block, .v2-provenance {
  border-left: 3px solid var(--provenance-fact);
  border-top: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-panel);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--card-padding) var(--sp-7);
  box-shadow: none;
}
.intel-block-fact,          .v2-provenance-fact       { border-left-color: var(--provenance-fact); }
.v2-provenance-metric      { border-left-color: var(--provenance-metric); }
.intel-block-assessment,    .v2-provenance-assessment { border-left-color: var(--provenance-assessment); }
.intel-block-consideration { border-left-color: var(--accent-primary); }
.v2-provenance-synthesis   { border-left-color: var(--provenance-synthesis); }

.v2-provenance-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: 1px var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.v2-provenance-fact       .v2-provenance-tag { color: var(--provenance-fact);       border-color: var(--provenance-fact); }
.v2-provenance-metric     .v2-provenance-tag { color: var(--provenance-metric);     border-color: var(--provenance-metric); }
.v2-provenance-assessment .v2-provenance-tag { color: var(--provenance-assessment); border-color: var(--accent-muted); }
.v2-provenance-synthesis  .v2-provenance-tag { color: var(--provenance-synthesis);  border-color: var(--provenance-synthesis); }

/* -------------------------------------------------------------------
   CARDS AND PANELS — one composable primitive, not forty bespoke ones.
   ------------------------------------------------------------------- */
.v2-panel, .home-panel, .di-section, .settings-section, .event-section {
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--panel-padding);
  box-shadow: var(--sheen-top);
}
.v2-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--sheen-top);
}
.v2-card-interactive { transition: var(--motion-hover), box-shadow var(--dur-fast) var(--ease-out); }
.v2-card-interactive:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.v2-panel-header, .home-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.v2-panel-header > h2, .home-panel-header > h2 { margin: 0; }
.v2-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--meta-gap);
  color: var(--text-muted);
  font-size: var(--fs-meta);
}
.v2-card-footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}

/* -------------------------------------------------------------------
   TABS AND WORKSPACE SUBNAVIGATION — one treatment, every pattern.

   V1 STAGE 2.1. THIS REPLACES A RULE THAT CAUSED A PRODUCTION DEFECT,
   and the defect was mine.

   Stage 1 wrote `.v2-tabs, .event-nav { display:flex; gap: var(--sp-7) }`
   plus `.event-nav-link { padding: var(--sp-5) 0 }`. Both halves were
   wrong for that markup:

     - `.event-nav` is the SCROLL container; the flex row is the
       `.event-nav-list` inside it, so the gap applied to nothing.
     - the padding override removed the legacy rule's HORIZONTAL padding
       and left `0`, so with the list's own 2px gap the labels sat two
       pixels apart and ran together:
       "OverviewWhy ProcIntel Rates ThisSuggested Considerations..."

   The fix is not a patch to Event detail. Every horizontal tab set in
   the application now shares this treatment, so spacing, hover, active
   and focus cannot drift apart again:

     .event-nav-list      Event workspace sections
     .section-nav         shared macro, also Collection Health
     .events-view-tabs    Events discovery
     .review-status-tabs  operator review queue
     .chart-period-nav    market instrument detail

   Spacing comes from the LINK'S OWN PADDING, not from a gap between
   bare text: that makes the hit area larger than the label, which is
   what stops two tabs reading as one word even if a future gap is lost.
   ------------------------------------------------------------------- */
.v2-tabs,
.event-nav-list,
.section-nav,
.events-view-tabs,
.review-status-tabs,
.chart-period-nav {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

/* The scrolling shell around a tab row. A long tab bar scrolls WITHIN
   itself; the document never scrolls sideways. */
.event-nav,
.v2-tabs-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--sp-7);

  /* A SELF-DETECTING scroll affordance.

     Two shadow layers are pinned to the scroll content
     (background-attachment: local) and two cover layers to the scroll
     PORT (scroll). When there is nothing to scroll the covers sit
     exactly over the shadows and nothing shows; as the row scrolls the
     covers move away and the shadow appears on the side there is more
     content. Pure CSS -- no JS, no resize observer -- and it cannot
     dim the end of a short row that does not scroll, which is what a
     plain always-on fade would do.  */
  background-image:
    linear-gradient(to right, var(--surface-base), transparent),
    linear-gradient(to left,  var(--surface-base), transparent),
    linear-gradient(to right, rgba(0, 0, 0, 0.34), transparent),
    linear-gradient(to left,  rgba(0, 0, 0, 0.34), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;

  /* The scrollbar itself stays out of the way; the shadow is the
     affordance. Keyboard users still tab through every control. */
  scrollbar-width: none;
}
.event-nav::-webkit-scrollbar, .v2-tabs-scroll::-webkit-scrollbar { height: 0; }

.v2-tab,
.event-nav-link,
.section-nav-link,
.events-view-tab,
.review-status-tab,
.chart-period-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* The load-bearing declaration. Horizontal padding is what separates
     one tab from the next and what makes the control bigger than its
     text. It is never zero. */
  padding: var(--sp-5) var(--sp-6);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.v2-tab:hover,
.event-nav-link:hover,
.section-nav-link:hover,
.events-view-tab:hover,
.review-status-tab:hover,
.chart-period-link:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
  border-bottom-color: var(--border-strong);
}

/* ACTIVE — three signals, not one: weight, colour and a gold rule. A
   reader who cannot distinguish the gold still sees the weight change,
   so the selected tab is never carried by colour alone. */
.v2-tab.is-active,
.event-nav-link.is-active,
.section-nav-link.is-active,
.events-view-tab.is-active,
.review-status-tab.is-active,
.chart-period-link.is-active,
.v2-tab[aria-current="page"],
.event-nav-link[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--accent-primary);
  background: transparent;
}

/* Focus sits INSIDE the control: an outset ring on a tab row is clipped
   by the scroll container and half disappears. */
.v2-tab:focus-visible,
.event-nav-link:focus-visible,
.section-nav-link:focus-visible,
.events-view-tab:focus-visible,
.review-status-tab:focus-visible,
.chart-period-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* A count or badge riding inside a tab. */
.events-view-tab-count,
.review-status-tab-count {
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.is-active .events-view-tab-count,
.is-active .review-status-tab-count {
  background: var(--wash-accent);
  color: var(--accent-primary);
}

/* The operator tab pushed to the far end of the Event row. */
.event-nav-item-admin { margin-left: auto; }
.event-nav-item-admin .event-nav-link { color: var(--text-muted); font-style: normal; }

/* -------------------------------------------------------------------
   TABLES — kept, and made premium. Dense intelligence still belongs in
   a table; what it does not need is a spreadsheet's chrome.
   ------------------------------------------------------------------- */
table, .items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-data);
}
thead th, .items-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-shell);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
tbody td, .items-table td {
  padding: var(--row-padding-y) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: top;
}
tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
tbody tr:hover { background: var(--surface-raised); }
tbody tr:last-child td { border-bottom: none; }
tbody td a { color: var(--text-primary); font-weight: var(--fw-medium); text-decoration: none; }
tbody td a:hover { color: var(--accent-primary); text-decoration: underline; }
.headline-cell { color: var(--text-primary); }
/* A headline is the reason the row exists: it must not be squeezed into a
   one-word column by the headers beside it. */
.items-table .headline-cell { min-width: 220px; }

/* Sortable headers. Legacy draws the sort link as a full-width block, so
   the info icon after it wrapped onto a second line and every sortable
   header was two rows tall. Inline, the label, chevron and icon sit on
   one line. */
.items-table th.sort-th { padding: 0 var(--sp-5) 0 0; white-space: nowrap; }
.items-table th.sort-th .sort-header-link {
  display: inline-flex;
  width: auto;
  padding: var(--sp-5) var(--sp-3) var(--sp-5) var(--sp-6);
  color: var(--text-muted);
}
.items-table th.sort-th .sort-header-link:hover,
.items-table th.sort-th .sort-header-link.is-active { color: var(--text-primary); }
.items-table th.sort-th .info-tooltip { vertical-align: middle; }
.sort-chevron.is-active { color: var(--accent-primary); }

/* A table's own panel: the table sits on a surface with rounded
   corners and scrolls sideways INSIDE it, never the page. */
.table-panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.table-panel > table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table-panel > table thead th:last-child  { border-top-right-radius: var(--radius-md); }
.table-panel > table tbody td { background: transparent; }

.table-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin: var(--sp-7) 0 var(--sp-4);
}
.table-meta-count { margin: 0; color: var(--text-muted); font-size: var(--fs-meta); }
.table-meta-count .num { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* A type or category shown in a row: quiet text, not a badge. */
.entity-type { color: var(--text-secondary); font-size: var(--fs-meta); }

/* An absent value is absent. An em-dash in every empty cell reads as a
   database null; this is quieter and says the same thing. */
td:empty::after { content: "—"; color: var(--text-disabled); }

/* -------------------------------------------------------------------
   TOOLTIPS — one style, replacing the several the audit found.
   ------------------------------------------------------------------- */
.info-tooltip-bubble, .v2-tooltip {
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  padding: var(--sp-5) var(--sp-6);
}
.info-tooltip-trigger {
  color: var(--text-muted);
  background: none;
  border: none;
  min-height: 0;
  padding: 0 2px;
  cursor: help;
}
.info-tooltip-trigger:hover { color: var(--text-secondary); }

/* -------------------------------------------------------------------
   SHARED STATES — empty, loading, error.
   ------------------------------------------------------------------- */
.empty-state, .v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-7);
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  text-align: center;
}
.empty-state-heading { color: var(--text-primary); font-weight: var(--fw-semibold); margin: 0; }
.empty-state-message { color: var(--text-muted); font-size: var(--fs-meta); margin: 0; max-width: 46ch; }
.empty-state-compact { padding: var(--sp-7) var(--sp-6); }

.v2-skeleton {
  background: linear-gradient(90deg,
    var(--surface-raised) 0%, var(--surface-hover) 50%, var(--surface-raised) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: v2-shimmer 1.4s linear infinite;
}
@keyframes v2-shimmer { to { background-position: -200% 0; } }

.flash-message, .v2-notice {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--accent-muted);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--wash-accent);
  color: var(--text-primary);
  font-size: var(--fs-meta);
}
.v2-notice-error { border-color: var(--status-critical); background: var(--wash-critical); }

/* -------------------------------------------------------------------
   REDUCED MOTION — one global rule, replacing the eight scattered
   blocks the audit found. Nothing here removes a state; it removes the
   transition between states.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------
   V1 TOKENS WITH TWO MEANINGS.

   `--navy` was used in the V1 stylesheet both as a dark FILL and as an
   emphasis TEXT colour. On a light page those coincide; on the new dark
   ground they are opposites, and no single bridged value can serve
   both -- see the note in tokens.css.

   The fills keep the V1 navy (and the frozen sign-in page with them).
   These are the ten text-role uses, re-pointed by name. They are
   enumerated rather than swept up by a broad selector so that the list
   is auditable and shrinks to nothing as each screen's own redesign
   stage lands.

   .signin-heading and .signin-alt a are deliberately ABSENT: the
   sign-in page is frozen, sits on its own light surface, and still
   wants navy text there.
   ------------------------------------------------------------------- */
.pulse-value,
.review-count-number,
.review-section-title,
.attention-matrix-panel .attention-matrix-count,
.briefing-wordmark {
  color: var(--text-primary);
}
.account-preferences-link,
.account-breadcrumb a:hover,
.briefing-contents-list a.is-current {
  color: var(--accent-primary);
}

/* `--brand` is the same story as `--navy`: 24 text uses (link hover,
   emphasis) against ONE fill. Bridging it to gold is right for the 24
   and wrong for the one -- which happened to be the Home collection
   ticker, turning it into a full-width gold bar carrying light text at
   1.9:1. Gold is an accent, not a surface. */
.intel-ticker { background: var(--surface-panel); border: 1px solid var(--border-default); }
.intel-ticker-label { color: var(--text-muted); }
.intel-ticker-item { color: var(--text-secondary); }

/* The rail's group labels were reading at 3.2:1 on --text-disabled.
   A label a reader must find is not decoration. */
.sidebar-group-label { color: var(--text-muted); }

/* -------------------------------------------------------------------
   FILLED STATUS BADGES.

   V1's badges were `color: #fff` on a DARK band fill -- correct on a
   light page. The band tokens are now bridged to the V2 status colours,
   which are light by design because their primary job on a dark ground
   is to be legible AS colour. White text on them lands at 2.6:1.

   The fill stays (it is how Significance is distinguished from the
   outlined Confidence badge, a distinction ProcIntel deliberately
   makes) and the TEXT inverts. Dark text on a light status fill is also
   how the approved mockup renders its impact chips.
   ------------------------------------------------------------------- */
.badge, .sig-badge, .health-badge, .quality-badge, .cluster-confidence-badge,
.crit-badge, .pri-badge, .lifecycle-badge {
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
}
/* REPORT LIFECYCLE -- tinted, not filled. Legacy draws each state as a
   solid fill; the V2 badge rule above (loaded later, equal specificity)
   replaced that fill with a dark surface while the inverse-text rule kept
   the text dark, so "IN REVIEW" was dark on dark and unreadable. Each
   state now has an explicit tint with legible text. Colour still is not
   the only signal: the state is written in the badge. */
.lifecycle-badge.lifecycle-draft     { color: var(--text-secondary);  background: var(--wash-neutral); border-color: var(--border-strong); }
.lifecycle-badge.lifecycle-in_review { color: var(--status-info);     background: var(--wash-info);    border-color: var(--status-info); }
.lifecycle-badge.lifecycle-approved  { color: var(--accent-primary);  background: var(--wash-accent);  border-color: var(--accent-muted); }
.lifecycle-badge.lifecycle-published { color: var(--status-positive); background: var(--wash-positive); border-color: var(--status-positive); }

/* Outlined badges keep coloured text on the page ground -- they have no
   fill to invert against. */
.conf-badge { color: var(--text-primary); }
/* `.badge-real` is re-tinted above (.v2-positive): a translucent wash,
   not a fill. The inverse-text rule turned its text dark on a dark wash
   and REAL was unreadable. `.badge-fictional` keeps its legacy SOLID
   fill, so inverse text remains correct for it and it is not listed. */
.badge.badge-real { color: var(--status-positive); }

/* -------------------------------------------------------------------
   COLLECTION HEALTH -- run status line (operator).
   ------------------------------------------------------------------- */
.health-run-summary { margin: var(--sp-5) 0 var(--sp-4); color: var(--text-secondary); font-size: var(--fs-meta); }
.health-run-detail { color: var(--text-muted); font-size: var(--fs-meta); }
h2.section-heading-title { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-section); }

/* -------------------------------------------------------------------
   OPERATOR RECORD FORMS -- create / link / merge / reassign pages.

   These share `article.item-detail` and `.edit-form`. The legacy title
   carried a gold left rail (removed from .page-title earlier in this
   sprint; gold is reserved for the primary action) and fields ran the
   full content width, far past a readable input length.
   ------------------------------------------------------------------- */
.item-detail > h1 {
  border-left: none;
  padding-left: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.item-detail > h1 + .muted,
.item-detail > h1 + p { max-width: 72ch; }
.item-detail .edit-form { max-width: 720px; }
.item-detail .edit-form > .btn { margin-top: var(--sp-5); }

/* Account and preference forms: their submit buttons borrowed the
   sign-in page's full-width block, which is a sign-in panel's single
   action, not a settings section's. They are ordinary primary buttons. */
.account-submit { justify-self: start; align-self: flex-start; margin-top: var(--sp-5); }

/* -------------------------------------------------------------------
   RESPONSIVE CONTAINMENT (V1 PREMIUM UX responsive pass)

   Measured at 1440/1280/1024/768/390 by walking every element whose
   box passes the viewport edge outside a scroll container -- html/body
   overflow-x:hidden otherwise hides the defect instead of fixing it.

   Tab rows without a scrolling shell (.section-nav, .events-view-tabs,
   .review-status-tabs) carried min-width:max-content from the shared
   tab treatment, so the row pushed past a phone screen and was clipped.
   They become their OWN scroll port instead: the row scrolls within
   itself, the document never does, and every tab stays reachable.
   ------------------------------------------------------------------- */
.section-nav,
.events-view-tabs,
.review-status-tabs {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar,
.events-view-tabs::-webkit-scrollbar,
.review-status-tabs::-webkit-scrollbar { height: 0; }
.section-nav-link,
.events-view-tab,
.review-status-tab { flex-shrink: 0; }

/* Operator analytics tables were never wrapped in a scroll container. */
.analytics-section { min-width: 0; overflow-x: auto; }

/* Grid and flex children default to min-width:auto, so one long word
   (a URL, a source list) sets the width of the whole column. */
.di-section, .di-timeline, .di-timeline-item > * { min-width: 0; }
.di-timeline-body { overflow-wrap: anywhere; }

/* -------------------------------------------------------------------
   CONTRAST CORRECTIONS (V1 PREMIUM UX accessibility pass)

   Measured in the browser against each element's resolved ground, not
   assumed. Every fix below keeps the element's meaning and hierarchy;
   only the ink or fill moves far enough to pass WCAG AA.
   ------------------------------------------------------------------- */
/* Significance 3 and "mixed quality" share the quiet gold fill, which
   gave dark text 4.36:1. A fill 20% of the way toward the accent reaches
   5.1:1 and still reads as the muted step below the full accent. */
.sig-3, .quality-mixed_quality {
  background: color-mix(in srgb, var(--accent-muted) 80%, var(--accent-primary));
}
/* Severity badges are solid status fills, but were left out of the
   inverse-text rule, so light text sat on them (2.7-3.2:1). */
.severity-badge { color: var(--text-inverse); font-weight: var(--fw-bold); }
/* Legacy light-theme greens and golds on the dark ground. */
.impact-positive, .impact-strongly-positive { color: var(--status-positive); }
.crit-override-badge { color: var(--accent-primary); border-color: var(--accent-muted); }
.account-verified-badge {
  color: var(--status-positive);
  background: var(--wash-positive);
  border-color: var(--status-positive);
}
/* Opacity-dimmed operator headers fell to 3.3:1; a token colour keeps
   the recessive look at 5.0:1. */
.rm-table thead th, .rm-sub { opacity: 1; color: var(--text-muted); }
.briefing-period { color: var(--accent-primary); }

/* FOCUS on the dark ground. Three text fields replace the global focus
   ring with a border change, and two of those borders were legacy NAVY
   (invisible on the V2 ground) or the quiet gold rule (barely distinct
   from a resting border). Each keeps its own treatment, but in a colour
   a keyboard user can actually see. */
.ms-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--wash-accent);
}
.sig-search:focus-within,
.src-search:focus-within { border-color: var(--accent-primary); }
/* Report Management uses a row-header <th> for the edition; it must end
   the table the same way its sibling cells do. */
.rm-table tbody tr:last-child th { border-bottom: none; }