/* ══════════════════════════════════════════════════════════════════════════
   db-system.css — The Defense Brief interface system
   Loaded AFTER components.css on every page, so it wins specificity ties.

   ─────────────────────────────────────────────────────────────────────────
   THE LANGUAGE
   Every primitive here is extended from a motif already present on the
   landing page. Nothing is invented:

     the rule, not the box   .how-step's 2px border-top with no card
     the eyebrow             11px/900/uppercase label above every heading
     the red underline       .db-brand-accent's 2.5px red bottom border
     the red edge            .db-card-accent-red's 3px left border
     the red mark            the hero's live dot, squared off
     alternating bands       card / page / card section rhythm
     dark bookends           .landing-hero, .final-cta-section

   RULES
     • Geometry is 2–6px. Nothing is a pill, nothing is a bubble.
     • Structure comes from rules, hairlines and edges — not from shadows.
       Only genuinely layered surfaces (dropdown, drawer, modal) cast one.
     • Red is a marker, never a field: active nav, escalation, selection,
       emphasis, alert. It is never more than a few percent of the pixels.
     • Monospace is for machine data only — timestamps, counts, tickers,
       coordinates, reference ids. Never for prose, never for headings.
     • Motion reports system state. It never decorates.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. EYEBROW — the single label primitive
   Replaces .hp-kicker, .hero-eyebrow, .ti-kicker, .page-kicker, .kicker,
   .db-kicker, .db-section-label, .db-page-kicker and the four bespoke
   variants on the landing page, which between them used seven different
   tracking values for one idea.
   ══════════════════════════════════════════════════════════════════════════ */
.db-eyebrow {
  display: block;
  font-family: var(--db-font);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
  margin: 0 0 var(--db-space-sm);
  line-height: 1.3;
}
.db-eyebrow-red { color: var(--db-red-ink); }
.db-eyebrow-strong { color: var(--db-navy); font-weight: var(--db-weight-title); }

/* Inline variant — sits on one line with a value or a marker beside it */
.db-eyebrow-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--db-space-sm);
  margin: 0;
}

/* Ruled variant — the label closes with a hairline that runs to the edge.
   This is the section divider used across dashboards and the admin console. */
.db-eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--db-space-md);
}
.db-eyebrow-rule::after {
  content: "";
  flex: 1 1 auto;
  height: var(--db-rule);
  background: var(--db-border);
}

/* Module identifier — DB-01, INTEL-04, SIG-03. Monospace, because it is a
   reference, not a word. Use ONLY where it genuinely aids hierarchy; these
   are not decoration and must never be invented for pages that have no real
   identifier scheme. */
.db-ident {
  font-family: var(--db-font-mono);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
}
.db-ident-red { color: var(--db-red-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   2. MONO / METADATA
   The machine-data voice. Timestamps, counts, coordinates, tickers, ids.
   ══════════════════════════════════════════════════════════════════════════ */
.db-mono {
  font-family: var(--db-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.db-num {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Metadata strip — a row of mono facts separated by hairline verticals.
   Wraps to multiple lines without losing the separator logic. */
.db-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--db-space-md);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-medium);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  line-height: 2;
  margin: 0;
}
.db-meta > * { display: inline-flex; align-items: center; gap: 6px; }
/* Vertical separator instead of a dot — an edge, not a bubble */
.db-meta > * + *::before {
  content: "";
  width: var(--db-rule);
  height: 11px;
  margin-right: var(--db-space-md);
  background: var(--db-border-strong);
}
.db-meta-key { color: var(--db-muted); opacity: .8; }
.db-meta-val { color: var(--db-char); font-weight: var(--db-weight-label); }


/* ══════════════════════════════════════════════════════════════════════════
   3. LIVE STATUS
   Restrained freshness indicators. A 6px SQUARE, not a dot.
   Only render these when backed by real application data — never decorate a
   static page with a fake LIVE mark.
   ══════════════════════════════════════════════════════════════════════════ */
.db-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
}
.db-live::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--db-slate);
}
/* Actively streaming / refreshed within the window */
.db-live-on { color: var(--db-red-ink); }
.db-live-on::before {
  background: var(--db-red);
  animation: dbLivePulse 2.6s var(--db-ease) infinite;
}
/* Data present but ageing */
.db-live-stale::before { background: var(--db-level-elevated); }
/* Feed known to be down */
.db-live-off::before { background: var(--db-border-strong); }

@keyframes dbLivePulse {
  0%        { box-shadow: 0 0 0 0 var(--db-red-wash-strong); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(139, 30, 30, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .db-live-on::before { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. PAGE HEADER SYSTEM
   Every major tool wears this. It answers, in order: where am I, what does
   this do, is the information current, what can I control.

     eyebrow      DB / TONE TRACKER
     title        Tone Tracker
     subtitle     Media sentiment and narrative intelligence
     ── rule ──   navy fading to red
     meta         UPDATED 09:42 ET · 41,284 ARTICLES · COVERAGE GLOBAL
     actions      [ Export ] [ Methodology ]

   Replaces five incompatible patterns: .tracker-intro, .ct-hero / .ri-hero,
   .page-masthead, .page-header, and the "title inside a card" idiom.
   ══════════════════════════════════════════════════════════════════════════ */
.db-pagehead {
  box-sizing: border-box;
  margin: 0 0 var(--db-space-xl);
  padding-top: var(--db-space-xl);
}
.db-pagehead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--db-space-xl);
  flex-wrap: wrap;
}
.db-pagehead-main { min-width: 0; flex: 1 1 420px; }

.db-pagehead-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--db-space-sm);
  font-family: var(--db-font);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
  margin: 0 0 10px;
}
/* The "DB /" prefix — the wordmark reduced to a mark, in red */
.db-pagehead-eyebrow::before {
  content: "DB";
  color: var(--db-red-ink);
  font-weight: var(--db-weight-title);
  border-bottom: var(--db-rule-strong) solid var(--db-red-ink);
  padding-bottom: 1px;
  line-height: 1;
}
.db-pagehead-eyebrow-plain::before { content: none; }

.db-pagehead-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: var(--db-weight-title);
  line-height: var(--db-leading-tight);
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-navy);
}
.db-pagehead-sub {
  margin: 8px 0 0;
  font-size: var(--db-text-md);
  line-height: var(--db-leading-body);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}

/* The closing rule. Navy at the left, dissolving through red — the same
   gradient the daily brief and exposure mastheads already used, promoted to
   the system so it appears once. */
.db-pagehead-rule {
  height: var(--db-rule-strong);
  margin: var(--db-space-lg) 0 0;
  background: linear-gradient(90deg, var(--db-navy) 0%, var(--db-red) 62%, transparent 100%);
  opacity: .85;
}
html.dark-mode .db-pagehead-rule { opacity: 1; }

.db-pagehead-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-lg);
  flex-wrap: wrap;
  padding-top: 10px;
}
.db-pagehead-actions {
  display: flex;
  gap: var(--db-space-sm);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Inverse treatment — for tools that earn a dark masthead (the daily brief,
   situation rooms). Dark in both themes, like the landing bookends. */
.db-pagehead-inverse {
  background:
    radial-gradient(900px 340px at 18% -40%, #11304f 0%, rgba(17, 48, 79, 0) 62%),
    linear-gradient(180deg, var(--db-surface-inverse) 0%, var(--db-surface-inverse-2) 100%);
  color: var(--db-ink-inverse);
  padding: var(--db-space-2xl) var(--db-space-xl) var(--db-space-xl);
  margin-left: calc(-1 * var(--db-space-xl));
  margin-right: calc(-1 * var(--db-space-xl));
}
.db-pagehead-inverse .db-pagehead-title { color: #fff; }
.db-pagehead-inverse .db-pagehead-sub,
.db-pagehead-inverse .db-pagehead-eyebrow,
.db-pagehead-inverse .db-meta { color: var(--db-ink-inverse-muted); }
.db-pagehead-inverse .db-meta-val { color: var(--db-ink-inverse); }
.db-pagehead-inverse .db-meta > * + *::before { background: rgba(234, 241, 248, .26); }

@media (max-width: 760px) {
  .db-pagehead { padding-top: var(--db-space-lg); margin-bottom: var(--db-space-lg); }
  .db-pagehead-row { align-items: flex-start; gap: var(--db-space-md); }
  .db-pagehead-actions { width: 100%; }
  .db-pagehead-actions > * { flex: 1 1 auto; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. SECONDARY NAVIGATION RAIL
   Sits under the global header and carries the tools inside the active group,
   so the growing tool count stays navigable without hiding anything.
   Absorbs .nr-adminbar and the hand-rolled admin <a> strips.
   ══════════════════════════════════════════════════════════════════════════ */
.db-subnav {
  position: sticky;
  top: var(--db-header-height);
  z-index: 90;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: var(--db-subnav-height);
  padding: 0 var(--db-space-xl);
  background: var(--db-surface-rail);
  border-bottom: var(--db-rule) solid var(--db-border);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.db-subnav::-webkit-scrollbar { height: 3px; }
.db-subnav::-webkit-scrollbar-thumb { background: var(--db-border-strong); }

.db-subnav-label {
  display: inline-flex;
  align-items: center;
  padding-right: var(--db-space-lg);
  margin-right: var(--db-space-md);
  border-right: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.db-subnav-item {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--db-space-md);
  border: 0;
  border-bottom: var(--db-rule-strong) solid transparent;
  background: none;
  font-family: var(--db-font);
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-normal);
  color: var(--db-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-subnav-item:hover { color: var(--db-navy); border-bottom-color: var(--db-border-strong); }
.db-subnav-item.active,
.db-subnav-item[aria-current="page"] {
  color: var(--db-navy);
  font-weight: var(--db-weight-label);
  border-bottom-color: var(--db-red-ink);
}
.db-subnav-item:focus-visible {
  outline: 2px solid var(--db-border-focus);
  outline-offset: -2px;
}
.db-subnav-spacer { flex: 1 1 auto; }

@media (max-width: 760px) {
  .db-subnav { padding: 0 var(--db-space-md); }
  .db-subnav-label { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. MODULE — the panel primitive
   Replaces the card. A module is defined by its rules and its edges, not by
   a rounded shadowed box.
   ══════════════════════════════════════════════════════════════════════════ */
.db-module {
  position: relative;
  background: var(--db-card);
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: var(--db-space-lg);
  transition: border-color var(--db-motion-base) var(--db-ease);
}
.db-module:hover { border-color: var(--db-border-hover); }
.db-module + .db-module { margin-top: var(--db-space-md); }

.db-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  padding-bottom: var(--db-space-sm);
  margin-bottom: var(--db-space-md);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-module-title {
  margin: 0;
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-navy);
}
.db-module-body { min-width: 0; }
.db-module-foot {
  margin-top: var(--db-space-md);
  padding-top: var(--db-space-sm);
  border-top: var(--db-rule) solid var(--db-border);
}

/* ── Variants ── */

/* The signature: a rule, no box. Extended from .how-step on the landing page. */
.db-module--rule {
  background: none;
  border: 0;
  border-top: var(--db-rule-strong) solid var(--db-border-strong);
  border-radius: 0;
  padding: var(--db-space-lg) 0 0;
}
.db-module--rule:hover { border-color: var(--db-border-strong); }
.db-module--rule.is-emphasis { border-top-color: var(--db-red-ink); }

/* Escalation / selection edge */
.db-module--edge { border-left: var(--db-edge-width) solid var(--db-navy); }
.db-module--edge-red { border-left: var(--db-edge-width) solid var(--db-red); }
.db-module--edge-level { border-left: var(--db-edge-width) solid var(--db-level-moderate); }

/* Recessed — control rails, sub-panels, table wells */
.db-module--sunken {
  background: var(--db-surface-sunken);
  border-color: transparent;
}

/* No padding — for wrapping a table or a chart edge to edge */
.db-module--flush { padding: 0; }
.db-module--flush > .db-module-head {
  padding: var(--db-space-md) var(--db-space-lg) var(--db-space-sm);
  margin-bottom: 0;
}
.db-module--flush > .db-module-foot {
  margin-top: 0;
  padding: var(--db-space-sm) var(--db-space-lg) var(--db-space-md);
}

/* Notched corner — used sparingly, on the single most important module on a
   page. A 10px clip at the top-right reads as an instrument bezel. */
.db-module--notch {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Module grid */
.db-modules {
  display: grid;
  gap: var(--db-space-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.db-modules-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.db-modules-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }


/* ══════════════════════════════════════════════════════════════════════════
   7. STATUS MARKS
   Square marks with a level colour, not coloured pills. Absorbs .iw-badge,
   .ct-status, .level-badge, .severity-pill and the parallel .badge-* set in
   the editorial queue.
   ══════════════════════════════════════════════════════════════════════════ */
.db-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border: var(--db-rule) solid var(--db-border);
  border-left: var(--db-edge-width) solid var(--db-level-moderate);
  border-radius: var(--db-radius-xs);
  background: var(--db-level-moderate-bg);
  font-family: var(--db-font);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-char);
  line-height: 1.5;
  white-space: nowrap;
}
/* Bare variant — the label alone, for dense tables where a box is too loud */
.db-status--bare {
  padding: 0 0 0 9px;
  border: 0;
  background: none;
  position: relative;
}
.db-status--bare::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--db-level-moderate);
}

.db-status-low      { border-left-color: var(--db-level-low);      background: var(--db-level-low-bg); }
.db-status-moderate { border-left-color: var(--db-level-moderate); background: var(--db-level-moderate-bg); }
.db-status-elevated { border-left-color: var(--db-level-elevated); background: var(--db-level-elevated-bg); }
.db-status-high     { border-left-color: var(--db-level-high);     background: var(--db-level-high-bg); }
.db-status-severe   { border-left-color: var(--db-level-severe);   background: var(--db-level-severe-bg); }
.db-status-neutral  { border-left-color: var(--db-border-strong);  background: transparent; color: var(--db-muted); }

.db-status--bare.db-status-low::before      { background: var(--db-level-low); }
.db-status--bare.db-status-moderate::before { background: var(--db-level-moderate); }
.db-status--bare.db-status-elevated::before { background: var(--db-level-elevated); }
.db-status--bare.db-status-high::before     { background: var(--db-level-high); }
.db-status--bare.db-status-severe::before   { background: var(--db-level-severe); }

/* Tag — topic, country, classification. Square, hairline, quiet. */
.db-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  background: transparent;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  color: var(--db-muted);
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  transition: border-color var(--db-motion-fast) var(--db-ease),
              color var(--db-motion-fast) var(--db-ease);
}
a.db-tag:hover { border-color: var(--db-border-hover); color: var(--db-navy); }
.db-tag-red { border-color: var(--db-border-red); color: var(--db-red-ink); }
.db-tag-strong { color: var(--db-navy); font-weight: var(--db-weight-title); border-color: var(--db-border-strong); }
.db-tags { display: flex; flex-wrap: wrap; gap: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   8. SEGMENTED CONTROL
   Adjacent rectangles sharing hairline borders. Selected state is a red
   underline bar plus weight — never a filled bubble.
   Replaces .chip, .ct-chip, .gwb, .mode-btn, .layer-btn, .quick-btn.
   ══════════════════════════════════════════════════════════════════════════ */
.db-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-card);
  overflow: hidden;
}
.db-seg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-left: var(--db-rule) solid var(--db-border);
  border-bottom: var(--db-rule-strong) solid transparent;
  background: none;
  font-family: var(--db-font);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--db-motion-fast) var(--db-ease),
              background var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-seg-btn:first-child { border-left: 0; }
.db-seg-btn:hover { color: var(--db-navy); background: var(--db-surface-sunken); }
.db-seg-btn.active,
.db-seg-btn[aria-pressed="true"],
.db-seg-btn[aria-selected="true"] {
  color: var(--db-navy);
  font-weight: var(--db-weight-title);
  background: var(--db-surface-sunken);
  border-bottom-color: var(--db-red-ink);
}
.db-seg-btn:focus-visible { outline: 2px solid var(--db-border-focus); outline-offset: -3px; }
.db-seg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Loose variant — standalone rectangles with their own borders, for when the
   options do not form a single mutually-exclusive control. */
.db-seg--loose {
  border: 0;
  background: none;
  gap: 6px;
  overflow: visible;
}
.db-seg--loose .db-seg-btn {
  border: var(--db-rule) solid var(--db-border);
  border-bottom-width: var(--db-rule-strong);
  border-radius: var(--db-radius-xs);
}
.db-seg--loose .db-seg-btn.active { border-color: var(--db-border-strong); border-bottom-color: var(--db-red-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   9. FILTER SYSTEM
   Structured analytical controls, not floating chips. One implementation for
   Tone Tracker, Conflict Tracker, Risk Index, Market Intelligence, Exposure,
   Scenarios, DB Wire, the maps and the admin console.
   ══════════════════════════════════════════════════════════════════════════ */

/* Layout: a fixed control rail beside the results */
.db-worksplit {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--db-space-xl);
  align-items: start;
}
.db-worksplit-wide { grid-template-columns: 280px minmax(0, 1fr); }

.db-filters {
  border: var(--db-rule) solid var(--db-border);
  border-top: var(--db-rule-strong) solid var(--db-navy);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-rail);
}
.db-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-sm);
  padding: 10px var(--db-space-md);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-filters-title {
  margin: 0;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-navy);
}
.db-filters-count {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  color: var(--db-red-ink);
}
.db-filters-body { padding: var(--db-space-md); }

.db-field { margin-bottom: var(--db-space-md); }
.db-field:last-child { margin-bottom: 0; }
.db-field-label {
  display: block;
  margin: 0 0 6px;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-field-row { display: flex; gap: var(--db-space-sm); }
.db-field-row > * { min-width: 0; flex: 1 1 0; }

/* Inputs and selects, sharp-edged and dark-mode safe */
.db-control {
  width: 100%;
  padding: 7px 9px;
  border: var(--db-rule) solid var(--db-border-strong);
  border-radius: var(--db-radius-xs);
  background: var(--db-card);
  color: var(--db-char);
  font-family: var(--db-font);
  font-size: var(--db-text-sm);
  line-height: 1.4;
  transition: border-color var(--db-motion-fast) var(--db-ease),
              box-shadow var(--db-motion-fast) var(--db-ease);
}
.db-control::placeholder { color: var(--db-muted); opacity: .75; }
.db-control:hover { border-color: var(--db-border-hover); }
.db-control:focus {
  outline: none;
  border-color: var(--db-red-ink);
  box-shadow: inset 0 -2px 0 var(--db-red);
}
select.db-control {
  appearance: none;
  padding-right: 26px;
  /* Chevron drawn as a background gradient pair so no image request is made
     and it recolours with the theme. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.db-control option { background: var(--db-card); color: var(--db-char); }
.db-control-mono { font-family: var(--db-font-mono); font-variant-numeric: tabular-nums; }

/* Checkbox / radio list — the alternative to chip rows for multi-select */
.db-checklist { display: flex; flex-direction: column; gap: 2px; }
.db-check {
  display: flex;
  align-items: center;
  gap: var(--db-space-sm);
  padding: 5px 7px;
  margin-left: -7px;
  border-left: var(--db-edge-width) solid transparent;
  font-size: var(--db-text-sm);
  color: var(--db-char);
  cursor: pointer;
  transition: background var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-check:hover { background: var(--db-surface-sunken); }
.db-check input { accent-color: var(--db-red-ink); margin: 0; }
.db-check.is-on,
.db-check:has(input:checked) {
  border-left-color: var(--db-red-ink);
  background: var(--db-red-wash);
  font-weight: var(--db-weight-title);
}

/* Applied-filter summary — what is currently narrowing the data */
.db-filters-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--db-space-sm) var(--db-space-md);
  border-top: var(--db-rule) solid var(--db-border);
}
.db-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 7px;
  border: var(--db-rule) solid var(--db-border-red);
  border-left: var(--db-edge-width) solid var(--db-red);
  border-radius: var(--db-radius-xs);
  background: var(--db-red-wash);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-char);
}
.db-filter-chip button {
  border: 0;
  background: none;
  padding: 0 3px;
  color: var(--db-muted);
  font-size: var(--db-text-sm);
  line-height: 1;
  cursor: pointer;
}
.db-filter-chip button:hover { color: var(--db-red-ink); }

/* Reset — a text action, never a button-shaped object */
.db-filters-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-bottom: var(--db-rule) solid var(--db-border-strong);
  background: none;
  font-family: var(--db-font);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
  cursor: pointer;
  transition: color var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-filters-reset:hover { color: var(--db-red-ink); border-bottom-color: var(--db-red-ink); }
.db-filters-reset[disabled] { opacity: .4; cursor: default; }

/* Horizontal bar variant — for pages where a rail would waste width */
.db-filterbar {
  display: flex;
  align-items: flex-end;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  padding: var(--db-space-md);
  border: var(--db-rule) solid var(--db-border);
  border-top: var(--db-rule-strong) solid var(--db-navy);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-rail);
}
.db-filterbar .db-field { margin: 0; min-width: 150px; }
.db-filterbar-title {
  align-self: center;
  margin-right: var(--db-space-sm);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-navy);
  white-space: nowrap;
}
.db-filterbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--db-space-md); }

/* Mobile — the rail becomes a drawer */
.db-filters-trigger { display: none; }

@media (max-width: 1000px) {
  .db-worksplit, .db-worksplit-wide { grid-template-columns: minmax(0, 1fr); gap: var(--db-space-md); }
}
@media (max-width: 760px) {
  .db-filters-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--db-space-sm);
    width: 100%;
    padding: 10px var(--db-space-md);
    border: var(--db-rule) solid var(--db-border);
    border-left: var(--db-edge-width) solid var(--db-navy);
    border-radius: var(--db-radius-xs);
    background: var(--db-card);
    font-family: var(--db-font);
    font-size: var(--db-text-xs);
    font-weight: var(--db-weight-title);
    letter-spacing: var(--db-tracking-wider);
    text-transform: uppercase;
    color: var(--db-navy);
    cursor: pointer;
  }
  .db-filters-trigger[aria-expanded="true"] { border-left-color: var(--db-red-ink); }
  .db-filters-trigger .db-filters-count { font-size: var(--db-text-xs); }
  /* Collapsed by default on small screens; the trigger toggles [data-open].
     Keyed off the attribute rather than the class, because the rails carry
     four different class names across the tools (.db-filters, .filter-panel,
     .filter-bar, .db-filterbar) and js/db-filters.js attaches to whichever
     one the page has.
     The attribute is doubled to reach specificity 0,2,0: each page declares
     its own rail class (.filter-panel { display: flex }) in an inline block
     that loads after this file, so a single 0,1,0 selector loses the tie. */
  [data-collapsible="true"][data-collapsible="true"] { display: none; }
  [data-collapsible="true"][data-open="true"] { display: flex; }
  .db-filterbar { flex-direction: column; align-items: stretch; }
  .db-filterbar-end { margin-left: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   10. TABS
   One tab strip. .sr-tab, .viz-tab, .nr-tab and .tab all alias in.
   ══════════════════════════════════════════════════════════════════════════ */
.db-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--db-rule) solid var(--db-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.db-tabs::-webkit-scrollbar { display: none; }
.db-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px var(--db-space-md);
  border: 0;
  border-bottom: var(--db-rule-strong) solid transparent;
  margin-bottom: calc(-1 * var(--db-rule));
  background: none;
  font-family: var(--db-font);
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-tab:hover { color: var(--db-navy); border-bottom-color: var(--db-border-strong); }
.db-tab.active,
.db-tab[aria-selected="true"] {
  color: var(--db-navy);
  font-weight: var(--db-weight-title);
  border-bottom-color: var(--db-red-ink);
}
.db-tab:focus-visible { outline: 2px solid var(--db-border-focus); outline-offset: -3px; }
.db-tab-count {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  padding: 1px 5px;
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  color: var(--db-muted);
}
.db-tab.active .db-tab-count { border-color: var(--db-border-red); color: var(--db-red-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   11. KPI / READOUT TILES
   One implementation. .kpi-card (tone-tracker) and .nr-stat (newsroom) alias
   in below.
   ══════════════════════════════════════════════════════════════════════════ */
.db-stats {
  display: grid;
  gap: var(--db-rule);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--db-border);
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-sm);
  overflow: hidden;
}
.db-stat {
  padding: var(--db-space-md) var(--db-space-lg);
  background: var(--db-card);
  border-top: var(--db-rule-strong) solid transparent;
}
.db-stat-label {
  display: block;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
  margin-bottom: 5px;
}
.db-stat-value {
  display: block;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xl);
  font-weight: var(--db-weight-label);
  line-height: 1.1;
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-navy);
}
.db-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  color: var(--db-muted);
}
.db-stat-up { color: var(--db-level-severe); }
.db-stat-down { color: var(--db-level-low); }
.db-stat.is-alert { border-top-color: var(--db-red-ink); }
.db-stat.is-alert .db-stat-value { color: var(--db-red-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   12. CHART CHROME
   All charts are hand-written d3 v7 SVG, so this is the shared skin the
   renderers draw into. Chart maths is untouched — see js/db-chart.js.
   ══════════════════════════════════════════════════════════════════════════ */
.db-chart-frame {
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-card);
}
.db-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  padding: var(--db-space-md) var(--db-space-lg);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-chart-title {
  margin: 0;
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-navy);
}
.db-chart-sub {
  margin: 4px 0 0;
  font-size: var(--db-text-sm);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}
.db-chart-plot { padding: var(--db-space-md); min-height: 220px; }
.db-chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  padding: var(--db-space-sm) var(--db-space-lg) var(--db-space-md);
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
  color: var(--db-muted);
}
.db-chart-source { font-family: var(--db-font-num); font-size: var(--db-text-2xs); letter-spacing: var(--db-tracking-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.db-chart-source a { color: inherit; text-decoration: none; border-bottom: var(--db-rule) solid var(--db-border-strong); }
.db-chart-source a:hover { color: var(--db-red-ink); border-bottom-color: var(--db-red-ink); }

/* SVG primitives — set as classes so the theme switch repaints without a
   redraw wherever possible. */
.db-chart-svg { display: block; width: 100%; overflow: visible; }
.db-chart-svg .db-grid { stroke: var(--db-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.db-chart-svg .db-axis-line { stroke: var(--db-chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
.db-chart-svg .db-axis text,
.db-chart-svg .db-axis-label {
  fill: var(--db-chart-label);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  letter-spacing: var(--db-tracking-wide);
}
.db-chart-svg .db-axis .domain { stroke: var(--db-chart-axis); }
.db-chart-svg .db-axis .tick line { stroke: var(--db-chart-grid); }
.db-chart-svg .db-zero { stroke: var(--db-chart-zero); stroke-width: 1; stroke-dasharray: 4 3; }
.db-chart-svg .db-series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.db-chart-svg .db-series-1 { stroke: var(--db-chart-1); }
.db-chart-svg .db-series-2 { stroke: var(--db-chart-2); }
.db-chart-svg .db-series-3 { stroke: var(--db-chart-3); }
.db-chart-svg .db-series-4 { stroke: var(--db-chart-4); }
.db-chart-svg .db-series-5 { stroke: var(--db-chart-5); }
.db-chart-svg .db-series-6 { stroke: var(--db-chart-6); }
.db-chart-svg .db-series-emphasis { stroke: var(--db-chart-emphasis); stroke-width: 2.4; }
/* stroke-width tracks the radius set in js/db-chart.js (POINT_R). At the 2px
   resting radius a 1.5 stroke leaves almost no fill and the mark reads as a
   blob rather than an open marker, so it is 1 here. */
.db-chart-svg .db-point { fill: var(--db-card); stroke: var(--db-chart-1); stroke-width: 1; }
.db-chart-svg .db-point.is-selected { fill: var(--db-chart-emphasis); stroke: var(--db-chart-emphasis); }
.db-chart-svg .db-threshold { stroke: var(--db-chart-emphasis); stroke-width: 1; stroke-dasharray: 5 3; }

/* Legend — squares, not dots */
.db-legend { display: flex; flex-wrap: wrap; gap: var(--db-space-md); }
.db-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  color: var(--db-muted);
  cursor: default;
}
.db-legend-swatch { width: 10px; height: 10px; flex: 0 0 auto; }
.db-legend-item.is-muted { opacity: .45; }

/* Intelligence readout — replaces the native/browser tooltip.
   A compact fielded panel, not a bubble. */
.db-readout {
  /* fixed, not absolute: showReadout() is fed event.clientX/clientY, which is
     viewport space. Absolute made it drift by the scroll offset. */
  position: fixed;
  z-index: 400;
  min-width: 190px;
  max-width: 300px;
  padding: 0;
  border: var(--db-rule) solid var(--db-border-strong);
  border-top: var(--db-rule-strong) solid var(--db-red);
  border-radius: var(--db-radius-xs);
  background: var(--db-card);
  box-shadow: var(--db-shadow-dropdown);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--db-motion-fast) var(--db-ease);
}
.db-readout.is-visible { opacity: 1; }
.db-readout-head {
  padding: 7px 10px;
  border-bottom: var(--db-rule) solid var(--db-border);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-readout-body { padding: 8px 10px; display: grid; gap: 4px; }
.db-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--db-space-md);
  font-size: var(--db-text-xs);
}
.db-readout-k {
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
}
.db-readout-v {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--db-weight-label);
  color: var(--db-char);
  text-align: right;
}
.db-readout-note {
  padding: 7px 10px;
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
  line-height: 1.45;
  color: var(--db-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   13. EDITORIAL / ARTICLE SYSTEM
   One reading column, one headline hierarchy, one byline, for analysis,
   intel cases, the daily brief and situation rooms.
   ══════════════════════════════════════════════════════════════════════════ */
.db-article { max-width: var(--db-read-col); margin: 0 auto; }
.db-article-wide { max-width: var(--db-max-width); margin: 0 auto; }

.db-article-head { padding-bottom: var(--db-space-lg); margin-bottom: var(--db-space-lg); border-bottom: var(--db-rule) solid var(--db-border); }
.db-article-title {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: var(--db-weight-title);
  line-height: 1.14;
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-navy);
  max-width: 22ch;
}
.db-article-standfirst {
  margin: var(--db-space-md) 0 0;
  font-size: var(--db-text-lg);
  font-weight: var(--db-weight-medium);
  line-height: var(--db-leading-snug);
  color: var(--db-muted);
  max-width: 52ch;
}

/* Byline — promoted from analysis.html's .post-author, the best one present */
.db-byline {
  display: flex;
  align-items: center;
  gap: var(--db-space-md);
  padding: var(--db-space-md) 0;
  margin: var(--db-space-lg) 0 0;
  border-top: var(--db-rule) solid var(--db-border);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-byline-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--db-radius-round);
  object-fit: cover;
  object-position: center top;
  border: var(--db-rule) solid var(--db-border);
}
.db-byline-info { min-width: 0; }
.db-byline-name { display: block; font-size: var(--db-text-base); font-weight: var(--db-weight-label); color: var(--db-navy); line-height: 1.3; }
.db-byline-role { display: block; font-size: var(--db-text-sm); color: var(--db-muted); line-height: 1.4; }
.db-byline-meta {
  margin-left: auto;
  text-align: right;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-medium);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  line-height: 1.7;
  white-space: nowrap;
}

.db-article-body { font-size: var(--db-text-md); line-height: var(--db-leading-relaxed); color: var(--db-char); }
.db-article-body > * { max-width: var(--db-read-measure); }
.db-article-body h2 {
  margin: var(--db-space-2xl) 0 var(--db-space-sm);
  font-size: var(--db-text-xl);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-tight);
  line-height: var(--db-leading-snug);
  color: var(--db-navy);
}
.db-article-body h3 {
  margin: var(--db-space-xl) 0 var(--db-space-xs);
  font-size: var(--db-text-lg);
  font-weight: var(--db-weight-label);
  color: var(--db-navy);
}
.db-article-body p { margin: 0 0 var(--db-space-lg); }
.db-article-body a { color: var(--db-navy); text-decoration: none; border-bottom: 1.5px solid var(--db-border-red); }
.db-article-body a:hover { border-bottom-color: var(--db-red-ink); }
.db-article-body blockquote {
  margin: var(--db-space-xl) 0;
  padding: 0 0 0 var(--db-space-lg);
  border-left: var(--db-edge-width) solid var(--db-red);
  font-size: var(--db-text-lg);
  font-weight: var(--db-weight-medium);
  line-height: var(--db-leading-snug);
  color: var(--db-navy);
}
.db-article-body figure { margin: var(--db-space-xl) 0; max-width: 100%; }
.db-article-body figure img { width: 100%; display: block; border: var(--db-rule) solid var(--db-border); }
.db-article-body figcaption {
  margin-top: var(--db-space-sm);
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-normal);
  color: var(--db-muted);
}

/* Sources and references */
.db-sources { margin-top: var(--db-space-2xl); padding-top: var(--db-space-lg); border-top: var(--db-rule-strong) solid var(--db-border-strong); }
.db-sources ol { margin: 0; padding-left: var(--db-space-lg); }
.db-sources li { margin-bottom: var(--db-space-sm); font-size: var(--db-text-sm); line-height: var(--db-leading-body); color: var(--db-muted); }
.db-sources a { color: var(--db-navy); text-decoration: none; border-bottom: var(--db-rule) solid var(--db-border-strong); }
.db-sources a:hover { border-bottom-color: var(--db-red-ink); }

/* Related intelligence */
.db-related { margin-top: var(--db-space-2xl); }
.db-related-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.db-related-item { border-top: var(--db-rule) solid var(--db-border); }
.db-related-item:last-child { border-bottom: var(--db-rule) solid var(--db-border); }
.db-related-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--db-space-lg);
  padding: var(--db-space-md) 0 var(--db-space-md) var(--db-space-md);
  margin-left: calc(-1 * var(--db-space-md));
  border-left: var(--db-edge-width) solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--db-motion-fast) var(--db-ease),
              background var(--db-motion-fast) var(--db-ease);
}
.db-related-link:hover { border-left-color: var(--db-red-ink); background: var(--db-surface-sunken); }
.db-related-title { font-size: var(--db-text-base); font-weight: var(--db-weight-title); color: var(--db-navy); line-height: var(--db-leading-snug); }
.db-related-meta {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Share controls — text actions on a rule, not a row of coloured buttons */
.db-share { display: flex; align-items: center; gap: var(--db-space-md); flex-wrap: wrap; padding: var(--db-space-md) 0; border-top: var(--db-rule) solid var(--db-border); }
.db-share-label { font-size: var(--db-text-2xs); font-weight: var(--db-weight-label); letter-spacing: var(--db-tracking-wider); text-transform: uppercase; color: var(--db-muted); }
.db-share-btn {
  border: 0;
  background: none;
  padding: 2px 0;
  border-bottom: var(--db-rule) solid var(--db-border-strong);
  font-family: var(--db-font);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  cursor: pointer;
  transition: color var(--db-motion-fast) var(--db-ease), border-color var(--db-motion-fast) var(--db-ease);
}
.db-share-btn:hover { color: var(--db-red-ink); border-bottom-color: var(--db-red-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   14. SIDE PANEL
   Map dossiers, intelligence detail, drawers.
   ══════════════════════════════════════════════════════════════════════════ */
.db-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--db-card);
  border: var(--db-rule) solid var(--db-border);
  border-top: var(--db-rule-strong) solid var(--db-navy);
  border-radius: var(--db-radius-sm);
}
.db-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--db-space-md);
  padding: var(--db-space-md) var(--db-space-lg);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-panel-title { margin: 0; font-size: var(--db-text-lg); font-weight: var(--db-weight-label); line-height: var(--db-leading-snug); color: var(--db-navy); letter-spacing: var(--db-tracking-tight); }
.db-panel-close {
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  background: none;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--db-muted);
  font-size: var(--db-text-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--db-motion-fast) var(--db-ease), color var(--db-motion-fast) var(--db-ease);
}
.db-panel-close:hover { border-color: var(--db-border-red); color: var(--db-red-ink); }
.db-panel-body { padding: var(--db-space-lg); overflow-y: auto; min-height: 0; flex: 1 1 auto; }

/* Key/value rows — the dossier voice */
.db-kv { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 0; }
.db-kv > dt,
.db-kv-k {
  padding: 7px 0;
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-kv > dd,
.db-kv-v {
  padding: 7px 0;
  margin: 0;
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-sm);
  color: var(--db-char);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.db-kv > dt:first-of-type, .db-kv > dd:first-of-type { border-top: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   15. STATES — empty, loading, error
   One definition each, replacing the per-page reimplementations.
   ══════════════════════════════════════════════════════════════════════════ */
.db-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--db-space-sm);
  padding: var(--db-space-2xl) var(--db-space-lg);
  border: var(--db-rule) dashed var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-rail);
}
.db-state-center { align-items: center; text-align: center; }
.db-state-label {
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-state-title { margin: 0; font-size: var(--db-text-md); font-weight: var(--db-weight-label); color: var(--db-navy); }
.db-state-body { margin: 0; font-size: var(--db-text-sm); line-height: var(--db-leading-body); color: var(--db-muted); max-width: 56ch; }
.db-state-error { border-style: solid; border-color: var(--db-border-red); border-left: var(--db-edge-width) solid var(--db-red); background: var(--db-red-wash); }
.db-state-error .db-state-label { color: var(--db-red-ink); }

/* Loading — a scan bar, not a spinner. Reads as a system acquiring data. */
.db-loading {
  position: relative;
  overflow: hidden;
  height: var(--db-rule-strong);
  background: var(--db-border);
}
.db-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--db-red), transparent);
  animation: dbScan 1.5s var(--db-ease) infinite;
}
@keyframes dbScan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(390%); }
}
@media (prefers-reduced-motion: reduce) {
  .db-loading::after { animation: none; width: 100%; opacity: .35; }
}
.db-loading-label {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   16. CONSOLE — the denser admin variant
   Same language, tighter metrics. Applied by putting .db-console on <body>.
   ══════════════════════════════════════════════════════════════════════════ */
.db-console { background: var(--db-bg); color: var(--db-char); }
.db-console .db-page,
.db-console .db-console-page {
  max-width: var(--db-max-width-console);
  margin: 0 auto;
  padding: 0 var(--db-space-lg) var(--db-space-3xl);
}
.db-console .db-pagehead { padding-top: var(--db-space-lg); margin-bottom: var(--db-space-lg); }
.db-console .db-pagehead-title { font-size: var(--db-text-xl); }
.db-console .db-module { padding: var(--db-space-md); border-radius: var(--db-radius-sm); }
.db-console .db-table th,
.db-console .db-table td { padding: 7px 10px; font-size: var(--db-text-sm); }
.db-console .db-stat { padding: var(--db-space-sm) var(--db-space-md); }
.db-console .db-stat-value { font-size: var(--db-text-lg); }

/* Operations row — a dense horizontal fact strip for console headers */
.db-opsrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-card);
  overflow: hidden;
}
.db-opsrow > * {
  padding: var(--db-space-sm) var(--db-space-md);
  border-left: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
}
.db-opsrow > *:first-child { border-left: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   17. MAP CHROME
   Structured toolbars and rails instead of floating rounded white controls.
   ══════════════════════════════════════════════════════════════════════════ */
.db-maptoolbar {
  display: flex;
  align-items: center;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  padding: 0 var(--db-space-md);
  min-height: 40px;
  background: var(--db-card);
  border-bottom: var(--db-rule) solid var(--db-border);
}
.db-maptoolbar-label {
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wider);
  text-transform: uppercase;
  color: var(--db-muted);
  white-space: nowrap;
}
.db-maptoolbar-sep { width: var(--db-rule); align-self: stretch; margin: 8px 0; background: var(--db-border); }
.db-maptoolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--db-space-sm); }

/* Vertical layer rail, docked flush to the map edge */
.db-maprail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 40px;
  background: var(--db-card);
  border-right: var(--db-rule) solid var(--db-border);
}
.db-maprail-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: var(--db-rule) solid var(--db-border);
  border-left: var(--db-edge-width) solid transparent;
  background: none;
  color: var(--db-muted);
  cursor: pointer;
  transition: color var(--db-motion-fast) var(--db-ease),
              background var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.db-maprail-btn:hover { color: var(--db-navy); background: var(--db-surface-sunken); }
.db-maprail-btn.is-active { color: var(--db-red-ink); border-left-color: var(--db-red-ink); background: var(--db-red-wash); }

/* Legend, docked rather than floating */
.db-maplegend {
  position: absolute;
  left: 40px;
  bottom: 0;
  z-index: 600;
  width: 214px;
  max-height: 58%;
  display: flex;
  flex-direction: column;
  background: var(--db-card);
  border-top: var(--db-rule) solid var(--db-border);
  border-right: var(--db-rule) solid var(--db-border);
}
.db-maplegend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-sm);
  padding: 7px var(--db-space-md);
  border-bottom: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-navy);
}
.db-maplegend-body { padding: var(--db-space-sm) var(--db-space-md) var(--db-space-md); overflow-y: auto; }
.db-maplegend-row { display: flex; align-items: center; gap: var(--db-space-sm); padding: 3px 0; font-size: var(--db-text-xs); color: var(--db-char); }
.db-maplegend-swatch { width: 12px; height: 12px; flex: 0 0 auto; border: var(--db-rule) solid rgba(11, 31, 51, .18); }

@media (max-width: 760px) {
  .db-maprail { flex-direction: row; inset: auto 0 0 0; width: auto; height: 44px; border-right: 0; border-top: var(--db-rule) solid var(--db-border); overflow-x: auto; }
  .db-maprail-btn { flex: 0 0 auto; border-bottom: 0; border-left: 0; border-top: var(--db-edge-width) solid transparent; border-right: var(--db-rule) solid var(--db-border); }
  .db-maprail-btn.is-active { border-left-color: transparent; border-top-color: var(--db-red-ink); }
  .db-maplegend { left: 0; right: 0; bottom: 44px; width: auto; max-height: 40%; border-right: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   18. UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.db-rule-h { height: var(--db-rule); background: var(--db-border); border: 0; margin: var(--db-space-lg) 0; }
.db-rule-strong { height: var(--db-rule-strong); background: var(--db-border-strong); border: 0; margin: var(--db-space-lg) 0; }
.db-stack > * + * { margin-top: var(--db-space-md); }
.db-stack-lg > * + * { margin-top: var(--db-space-xl); }
.db-row { display: flex; align-items: center; gap: var(--db-space-md); flex-wrap: wrap; }
.db-row-end { margin-left: auto; }
.db-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Alternating section bands — the landing page rhythm, available anywhere */
.db-band { padding: clamp(32px, 5vh, 60px) var(--db-space-xl); }
.db-band-inner { max-width: var(--db-max-width-wide); margin: 0 auto; }
.db-band-alt { background: var(--db-card); }
.db-band-inverse {
  background:
    radial-gradient(900px 420px at 50% -20%, #11304f 0%, rgba(17, 48, 79, 0) 62%),
    linear-gradient(180deg, var(--db-surface-inverse) 0%, var(--db-surface-inverse-2) 100%);
  color: var(--db-ink-inverse);
}
.db-band-inverse h1, .db-band-inverse h2, .db-band-inverse h3 { color: #fff; }
.db-band-inverse .db-eyebrow { color: var(--db-ink-inverse-muted); }


/* ══════════════════════════════════════════════════════════════════════════
   19. ALIASES
   Legacy class names from before the system existed, repointed so the pages
   that still emit them inherit the new language without a markup rewrite.
   These are a migration surface, not an API — new work uses the db- names.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tab strips: situation room, intel-case viz, newsroom, watchlist */
.sr-tabs, .viz-tabs, .nr-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--db-rule) solid var(--db-border);
}
.sr-tab, .viz-tab, .nr-tab {
  border-bottom: var(--db-rule-strong) solid transparent;
  border-radius: 0;
}
.sr-tab.active, .viz-tab.active, .nr-tab.active {
  border-bottom-color: var(--db-red-ink);
  color: var(--db-navy);
  font-weight: var(--db-weight-title);
}

/* Stat tiles */
.kpi-card, .nr-stat { border-radius: var(--db-radius-sm); }
.kpi-value, .nr-stat-value {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--db-tracking-tight);
}
.nr-stat-value.nr-alert { color: var(--db-red-ink); }

/* Anything still emitting a rounded chip/badge gets squared off rather than
   left as the one bubble on the page. */
.chip, .ct-chip, .quick-btn, .gwb, .mode-btn, .layer-btn,
.pill, .theme-pill, .drift-pill, .sr-chip, .dd-tag, .cat-badge,
.level-badge, .severity-pill, .confidence-pill, .signal-pill,
.stock-pill, .mag-badge, .badge, .iw-badge, .nr-chip, .nr-right-chip,
.classification-tag, .intel-tag, .activity-badge, .civic-type-tag,
.graph-stats-pill, .live-pill, .ct-status, .ct-ai-badge, .sr-type-badge,
.db-pill, .db-nav-badge, .db-nav-pill-pro-badge, .gauge-level,
.entity-chip, .dev-severity, .tab-badge {
  border-radius: var(--db-radius-xs) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   20. FOOTER + ICON SAFETY
   site-footer.js is injected on every page, so its dependencies belong in the
   shared layer rather than an optional per-page stylesheet. The icon sizing
   below is deliberately redundant with social-links.css: when the private/
   pages first mounted the shared footer without that stylesheet, the five
   social SVGs rendered at their intrinsic 1389px and pushed the page to
   7,000px tall. An inline SVG with no CSS has no sensible default size, so
   the shared layer states one.
   ══════════════════════════════════════════════════════════════════════════ */
/* max-width/height rather than width/height, so social-links.css's real
   sizes win when it is present and an un-styled inline SVG still cannot
   render at its intrinsic size when it is not. */
.db-social-icon-link svg,
.social-link svg,
.db-social-row svg { max-width: 20px; max-height: 20px; flex: 0 0 auto; display: block; }

.site-footer {
  border-top: var(--db-rule) solid var(--db-border);
  background: var(--db-card);
}
.site-footer-inner {
  max-width: var(--db-max-width-wide);
  margin: 0 auto;
  padding: var(--db-space-lg) var(--db-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-lg);
  flex-wrap: wrap;
}
.site-footer-copy,
.site-footer-motto {
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}
.site-footer-motto {
  font-weight: var(--db-weight-title);
  width: 100%;
  text-align: center;
  margin-top: var(--db-space-xs);
}
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--db-space-md);
  width: 100%;
  justify-content: center;
}
/* The platform row sits above the company row and carries the two conversions
   (Organizations, Individuals). Same treatment, heavier ink, so it reads as
   the primary of the two rows without needing a heading of its own. */
.site-footer-platform { margin-top: var(--db-space-sm); }
.site-footer-platform .site-footer-nav a { color: var(--db-char); }
.site-footer-nav a,
.site-footer-legal a {
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  color: var(--db-muted);
  text-decoration: none;
  border-bottom: var(--db-rule) solid transparent;
  transition: color var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.site-footer-nav a:hover,
.site-footer-legal a:hover { color: var(--db-navy); border-bottom-color: var(--db-red-ink); }
.site-footer-nav a[aria-current="page"],
.site-footer-legal a[aria-current="page"] { color: var(--db-navy); border-bottom-color: var(--db-red-ink); }
/* The <hr> is inset to the inner content box rather than to the band, so the
   rule starts and stops where the columns above it do. */
.site-footer-sep {
  border: none;
  border-top: var(--db-rule) solid var(--db-border);
  max-width: calc(var(--db-max-width-wide) - var(--db-space-xl) * 2);
  margin: var(--db-space-md) auto 0;
  padding: 0;
  color: var(--db-border-strong);
}
.site-footer-legal {
  max-width: var(--db-max-width-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--db-space-sm);
  flex-wrap: wrap;
  padding: var(--db-space-md) var(--db-space-xl) var(--db-space-xs);
}
.site-footer { margin-top: var(--db-space-sm); }

@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--db-space-sm);
  }
  .site-footer-legal { justify-content: flex-start; }
}


/* ══════════════════════════════════════════════════════════════════════════
   21. HEADER NAV OVERFLOW
   The signed-in nav carries nine top-level groups. As wrapping pills that
   pushed the masthead to a second row and broke its 56px height; the fix is
   to let the nav scroll inside its track instead, so the header stays one
   deterministic row at every width and nothing is hidden. Below 900px the
   existing drawer takes over and this track is display:none'd.
   ══════════════════════════════════════════════════════════════════════════ */
.db-header-nav {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.db-header-nav::-webkit-scrollbar { display: none; }
.db-header-nav > * { flex: 0 0 auto; }

/* The masthead is a fixed-height row; its three regions must not grow it. */
.db-header { flex-wrap: nowrap; }
.db-brand { flex: 0 0 auto; }
.db-header-right { flex: 0 0 auto; }

/* Reclaim horizontal space before the nav has to scroll. */
@media (max-width: 1400px) {
  .db-header-nav .db-nav-pill { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 1180px) {
  .db-header-nav .db-nav-pill { padding-left: 7px; padding-right: 7px; letter-spacing: var(--db-tracking-wide); }
}

/* The landing header is the exception: it has no drawer of its own, so its
   nav must stay wrappable rather than scroll out of reach. */
.landing-header .db-header-nav { flex-wrap: wrap; overflow: visible; gap: 2px; }
.landing-header { flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════════════════════════
   22. .db-page-header — upgraded in place
   The five pages already using the shared page header (the contributor and
   editorial screens) get the new treatment without a markup change: the
   eyebrow gains the red DB mark, the title takes the display scale, and the
   navy-into-red rule closes the block.
   ══════════════════════════════════════════════════════════════════════════ */
.db-page-header {
  margin-bottom: var(--db-space-xl);
  padding-bottom: var(--db-space-md);
  border-bottom: var(--db-rule-strong) solid transparent;
  border-image: linear-gradient(90deg, var(--db-navy) 0%, var(--db-red) 62%, transparent 100%) 1;
}
.db-page-kicker {
  display: flex;
  align-items: center;
  gap: var(--db-space-sm);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
  margin-bottom: 10px;
}
.db-page-kicker::before {
  content: "DB";
  color: var(--db-red-ink);
  font-weight: var(--db-weight-title);
  border-bottom: var(--db-rule-strong) solid var(--db-red-ink);
  padding-bottom: 1px;
  line-height: 1;
}
.db-page-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-tight);
  line-height: var(--db-leading-tight);
}
.db-page-subtitle {
  font-size: var(--db-text-md);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}


/* ══════════════════════════════════════════════════════════════════════════
   23. RESPONSIVE STACKING
   components.css introduced the mobile quickbar as "the single visible mobile
   entry point", sticky at top:var(--db-header-height) and replacing the
   hamburger below 900px. The sub-nav rail claims the same offset, so on a
   phone the two stuck to the same line.

   Below 900px the rail gives up its sticky position: it scrolls away under
   the quickbar, which keeps the persistent mobile chrome at header +
   quickbar instead of 150px of an 812px screen. The tools it lists stay
   reachable -- mobile-nav.js already lists the same group items in the
   drawer, so nothing becomes unreachable, it just stops being duplicated.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .db-subnav {
    position: static;
    min-height: 38px;
  }
  .db-subnav-item { font-size: var(--db-text-xs); padding: 0 10px; }
}

/* Below the tablet breakpoint the analytical layouts stop competing for
   width: rails go full-bleed above their results, module grids drop to one
   column, and charts keep a legible floor rather than collapsing to a
   sliver. */
@media (max-width: 760px) {
  .db-modules, .db-modules-2, .db-modules-3 { grid-template-columns: minmax(0, 1fr); }
  .db-chart-plot { min-height: 200px; }
  .db-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .db-pagehead-inverse { margin-left: 0; margin-right: 0; padding: var(--db-space-lg) var(--db-space-md); }
  /* Tables scroll inside their own module; the page body never does. */
  .db-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .db-table { white-space: nowrap; }
  .db-worksplit, .db-worksplit-wide { gap: var(--db-space-md); }
}

/* Touch targets. The rule in components.css covers nav pills; these are the
   controls the redesign introduced. */
@media (max-width: 640px) {
  .db-seg-btn, .db-tab, .db-subnav-item, .db-filters-trigger, .db-panel-close {
    min-height: 44px;
  }
  .db-control { padding: 10px 11px; font-size: var(--db-text-body); /* prevents iOS zoom */ }
}


/* The auth modal's forgot-password link. It used to carry its hover state as
   inline onmouseover/onmouseout handlers assigning hard-coded navy values,
   which cannot follow the theme -- on the dark modal it hovered to navy on
   navy. Same text-action treatment as .db-share-btn. */
.account-forgot-link {
  font-size: var(--db-text-sm);
  color: var(--db-muted);
  text-decoration: none;
  border-bottom: var(--db-rule) solid var(--db-border-strong);
  transition: color var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease);
}
.account-forgot-link:hover {
  color: var(--db-red-ink);
  border-bottom-color: var(--db-red);
}


/* ══════════════════════════════════════════════════════════════════════════
   24. VISUALIZATION MARKS + PANEL DOCKING
   The producer side of §12 and §14. Ranked bars are DOM rather than SVG so
   they reflow at any width without a redraw; the panel docks beside the
   visual on desktop and becomes a drawer on the analytical breakpoint.
   Z-ORDER, declared together on purpose:
     .db-readout 400  ·  .db-panel-scrim 490  ·  .db-panel-drawer 500
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ranked bars / level strip ── */
.db-bars { display: grid; gap: 0; }
.db-bar-row {
  display: grid;
  grid-template-columns: minmax(88px, 30%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--db-space-md);
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-top: var(--db-rule) solid var(--db-border);
  border-left: var(--db-edge-width) solid transparent;
  padding-left: var(--db-space-sm);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--db-motion-fast) var(--db-ease),
              border-left-color var(--db-motion-fast) var(--db-ease);
}
.db-bar-row:first-child { border-top: 0; }
button.db-bar-row { cursor: pointer; }
button.db-bar-row:hover { background: var(--db-surface-rail); }
button.db-bar-row:focus-visible { outline: 2px solid var(--db-red-ink); outline-offset: -2px; }
.db-bar-row.is-selected { background: var(--db-surface-rail); border-left-color: var(--db-red); }
.db-bar-label {
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-label);
  color: var(--db-char);
  line-height: var(--db-leading-snug);
}
.db-bar-track {
  position: relative;
  display: block;
  height: 8px;
  min-width: 40px;
  background: var(--db-surface-sunken);
  border-radius: var(--db-radius-xs);
  overflow: hidden;
}
.db-bar-fill { display: block; height: 100%; }
.db-bar-value {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  color: var(--db-muted);
  white-space: nowrap;
  text-align: right;
}
.db-bar-note {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: var(--db-text-xs);
  line-height: var(--db-leading-body);
  color: var(--db-muted);
}
@media (max-width: 640px) {
  .db-bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; min-height: 44px; }
  .db-bar-track { grid-column: 1 / -1; }
}

/* ── Panel: docked beside the visual, drawer on mobile ── */
.db-panel-eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-panel[data-level="low"]      { border-top-color: var(--db-level-low); }
.db-panel[data-level="moderate"] { border-top-color: var(--db-level-moderate); }
.db-panel[data-level="elevated"] { border-top-color: var(--db-level-elevated); }
.db-panel[data-level="high"]     { border-top-color: var(--db-level-high); }
.db-panel[data-level="severe"]   { border-top-color: var(--db-level-severe); }

.db-panel-dock {
  position: sticky;
  top: calc(var(--db-header-height) + var(--db-space-md));
  max-height: calc(100vh - var(--db-header-height) - var(--db-space-2xl));
}
.db-panel-analysis {
  margin: var(--db-space-md) 0 0;
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-body);
  color: var(--db-char);
}
.db-panel-section { margin-top: var(--db-space-lg); }
.db-panel-section-label {
  display: block;
  margin-bottom: var(--db-space-sm);
  font-size: var(--db-text-2xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-panel-record {
  padding: 8px 0;
  border-top: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
}
.db-panel-record-label a { color: var(--db-char); text-decoration: none; border-bottom: var(--db-rule) solid var(--db-border-strong); }
.db-panel-record-label a:hover { color: var(--db-red-ink); border-bottom-color: var(--db-red-ink); }
.db-panel-record-meta {
  display: block;
  margin-top: 3px;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-2xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}
.db-panel-source {
  margin-top: var(--db-space-lg);
  padding-top: var(--db-space-md);
  border-top: var(--db-rule-strong) solid var(--db-border-strong);
  font-size: var(--db-text-sm);
}
.db-panel-source a { color: var(--db-red-ink); text-decoration: none; border-bottom: var(--db-rule) solid var(--db-red-ink); }
.db-panel-actions { display: flex; flex-wrap: wrap; gap: var(--db-space-sm); margin-top: var(--db-space-lg); }

.db-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(7, 17, 31, .55);
}
@media (max-width: 760px) {
  .db-panel-drawer {
    position: fixed;
    z-index: 500;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
    box-shadow: var(--db-shadow-modal);
  }
  .db-panel-drawer .db-panel-close { width: 44px; height: 44px; }
}
.db-panel-action {
  padding: 7px var(--db-space-md);
  border: var(--db-rule) solid var(--db-border-strong);
  border-radius: var(--db-radius-xs);
  background: none;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--db-navy);
  cursor: pointer;
  transition: border-color var(--db-motion-fast) var(--db-ease), color var(--db-motion-fast) var(--db-ease);
}
.db-panel-action:hover { border-color: var(--db-border-red); color: var(--db-red-ink); }
@media (max-width: 640px) { .db-panel-action { min-height: 44px; } }

/* .db-panel sets display:flex, which outranks the UA [hidden] rule. Without
   this the panel can never be hidden by el.hidden. */
.db-panel[hidden], .db-panel-scrim[hidden] { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   25. CONVERGENCE
   components.css and this sheet are two generations of the same system, and
   the older one was never retired. The result was that the same idea had two
   or three visual forms depending on which page you landed on: two page
   headers, three stat tiles, six navy primary buttons with four different
   radii, two label recipes, two link-hover idioms in one footer.

   This section does not rename anything. Every class stays exactly where it
   is in the markup; the losing selectors are pointed at the winning
   treatment, so the convergence costs no HTML change and no risk to any
   page's structure. New work uses the db- names directly and never needs
   this section.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── One label ──
   .db-kicker, .db-section-label and .db-page-kicker were three near-misses of
   .db-eyebrow: 11px/700/wider, 10px/700/widest and 11px/900/widest. On a page
   carrying two of them the difference read as an accident, because it was.
   .db-section-label keeps its closing rule -- that is a variant, not a second
   idiom. */
.db-kicker,
.db-section-label,
.db-page-kicker {
  font-family: var(--db-font);
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
  line-height: 1.3;
}

/* ── One badge ── */
.db-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  background: transparent;
  font-size: var(--db-text-xs);
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-wide);
  color: var(--db-muted);
  line-height: 1.5;
  white-space: nowrap;
}

/* ── One stat tile ──
   .db-stat marks itself with a 2px top rule and nothing else. .db-kpi and
   .mkt-stat adopt the same mark so a KPI row reads the same on the homepage,
   inside a member tool and in the admin console. */
.db-kpi,
.mkt-stat {
  border-top: var(--db-rule-strong) solid transparent;
}
.db-kpi-value,
.mkt-stat-value,
.kpi-value {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--db-weight-label);
  letter-spacing: var(--db-tracking-tight);
  line-height: 1.1;
}

/* ── One control ladder ──
   Nothing declared a height, so a button, a select and a filter input in the
   same toolbar settled at three different heights from their padding alone.
   These are minimums, so a control with more padding still grows. */
.db-btn,
.db-input,
select.db-input,
.plan-cta,
.account-btn-primary,
.db-wall-btn-primary {
  min-height: var(--db-control-h-lg);
}
.db-control,
select.db-control,
.db-seg-btn,
.db-filter-chip,
.upgrade-ribbon-btn,
.db-mobile-upgrade-btn {
  min-height: var(--db-control-h-md);
}
.db-btn-sm { min-height: var(--db-control-h-sm); }

/* Touch targets. The operational chrome is deliberately dense on the desktop
   console; on a phone it has to clear the floor regardless. */
@media (max-width: 760px) {
  .db-btn,
  .db-input,
  select.db-input,
  .db-control,
  select.db-control,
  .db-seg-btn,
  .db-tab,
  .plan-cta,
  .account-btn-primary,
  .db-wall-btn-primary,
  .db-mobile-upgrade-btn,
  .db-mobile-account-item,
  .db-mobile-panel-close {
    min-height: var(--db-touch-min);
  }
  /* The drawer close button is square, so it needs the floor on both axes. */
  .db-mobile-panel-close { min-width: var(--db-touch-min); }
}

/* ── One primary button ──
   Five navy primaries had four radii (4px, 4px, 3px, none), five paddings and
   three type sizes between them, and every one used `border: none`, so none of
   them could answer a hover with a border change the way .db-btn does. Width
   and display are left alone: a full-width plan CTA stays full-width. */
.plan-cta,
.account-btn-primary,
.db-wall-btn-primary,
.db-mobile-upgrade-btn {
  border: var(--db-rule) solid var(--db-navy);
  border-radius: var(--db-radius-md);
  font-family: var(--db-font);
  font-size: var(--db-text-sm);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  padding: 10px 16px;
  transition: background var(--db-motion-fast) var(--db-ease),
              border-color var(--db-motion-fast) var(--db-ease),
              color var(--db-motion-fast) var(--db-ease);
}
.plan-cta:hover,
.account-btn-primary:hover,
.db-wall-btn-primary:hover,
.db-mobile-upgrade-btn:hover {
  background: var(--db-card);
  color: var(--db-navy);
}
/* The ribbon sits on the inverse surface, so its button inverts the other way.
   --db-navy is the INK token and flips in dark mode, hence the paired
   --db-card foreground rather than a literal white. */
.upgrade-ribbon-btn {
  border: var(--db-rule) solid var(--db-ink-inverse);
  border-radius: var(--db-radius-md);
  background: var(--db-ink-inverse);
  color: var(--db-surface-inverse);
  font-weight: var(--db-weight-title);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  font-size: var(--db-text-xs);
}
.upgrade-ribbon-btn:hover {
  background: transparent;
  color: var(--db-ink-inverse);
}

/* ── The ladder holds against relative weights ──
   A <strong> inside a control that is already 700 inherits the UA's `bolder`,
   which resolves to 900: the one weight the ladder retired, arriving by
   computation rather than by declaration. The language toggle's active
   <strong>EN</strong> was rendering at 900 on every page. */
strong, b { font-weight: var(--db-weight-title); }

/* ── One empty frame ──
   .db-empty-state-box and .db-state were the same dashed recessed frame drawn
   twice, at different radii and on different grounds. */
.db-empty-state-box {
  border: var(--db-rule) dashed var(--db-border-strong);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-rail);
}