/* Palette: keep in sync with dashboard/theme.py */
:root {
  --bg: #faf8f4;
  --bg-strong: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --surface-3: #fbfaf7;
  --border: #e2ddd3;
  --border-strong: #c9c2b5;
  --accent: #1e5c4f;
  --text: #1f1b16;
  --text-soft: #423c33;
  --muted: #6b655c;
  --positive: #2e6b4f;
  --negative: #9b3d2e;
  --warning: #b07a2e;
  --shadow-tooltip: 0 4px 14px rgba(31, 27, 22, 0.12);
  --hover-wash: rgba(31, 27, 22, 0.035);
  --accent-wash: rgba(30, 92, 79, 0.08);
  --accent-border: rgba(30, 92, 79, 0.35);
  --accent-soft: rgba(30, 92, 79, 0.06);
  --focus-ring: rgba(30, 92, 79, 0.2);
  --focus-ring-tight: rgba(30, 92, 79, 0.18);
  --focus-outline-strong: rgba(30, 92, 79, 0.45);
  --tooltip-surface: #ffffff;
  --font-main: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Type scale - one source of truth for every size used across the app. */
  --fs-micro: 0.72rem;   /* kicker / overline */
  --fs-meta: 0.82rem;    /* captions, deltas, secondary text */
  --fs-body: 0.95rem;    /* form labels, body */
  --fs-lede: 1.05rem;    /* lead paragraphs, section titles */
  --fs-h2: 1.7rem;       /* page lede, segment KPI */
  --fs-h1: 1.85rem;      /* masthead */

  /* Spacing scale - 4 / 8 / 12 / 20 / 32 / 56 px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1.25rem;
  --s-5: 2rem;
  --s-6: 3.5rem;

  --radius: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Measure - constrain content to a centred editorial column with margins.
   The masthead and every page share one width so nothing sprawls. Nested
   containers (a page's own Container inside the shell's) are neutralised so
   horizontal padding is applied once. */
.dashboard-app .container-fluid {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.dashboard-app .container-fluid .container-fluid {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Masthead: editorial nameplate instead of an app navbar */
.dashboard-app .masthead {
  padding: 1.4rem 0 0;
  background-color: var(--bg);
}

.dashboard-app .masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--text);
}

.dashboard-app .masthead-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--text);
}

.dashboard-app .masthead-standfirst {
  font-family: var(--font-main);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--muted);
}

/* Source / dateline line below the standfirst. Picks up the FT/NYT
   attribution slug pattern: small, italic, mono separator dot. */
.dashboard-app .masthead-dateline {
  margin-top: 0.5rem;
  font-family: var(--font-main);
  font-size: var(--fs-meta);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.dashboard-app .masthead-dateline strong {
  font-weight: 600;
  color: var(--text-soft);
}

.dashboard-app .masthead-dateline .sep {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0.55rem;
  background: var(--border-strong);
  vertical-align: middle;
}

.dashboard-app .masthead-dateline .dateline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.dashboard-app .masthead-dateline .dateline-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Section navigation - understated serif text links with an accent underline.
   The nav is sticky to the viewport so it stays available on long pages while
   the masthead nameplate scrolls away. */
.dashboard-app .dashboard-tabs.nav {
  gap: 0.35rem 1.6rem;
  padding: 0.7rem 0 0;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--bg);
}

.dashboard-app .dashboard-tabs .nav-link,
.dashboard-app .dashboard-tabs .dashboard-nav-link {
  padding: 0.2rem 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 500;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}

.dashboard-app .dashboard-tabs .nav-link:hover,
.dashboard-app .dashboard-tabs .dashboard-nav-link:hover {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}

.dashboard-app .dashboard-tabs .nav-link.active,
.dashboard-app .dashboard-tabs .dashboard-nav-link.active {
  color: var(--accent);
  background: transparent;
  font-weight: 600;
  /* Pull the accent rule down by 1px so it overlays the container's 1px
     bottom border instead of sitting flush against it. FT-style tab. */
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}

/* Cards: quiet surfaces on a single hairline, no fills or accent stripes */
.dashboard-app .dashboard-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.dashboard-app .dashboard-card > .card-body {
  padding: 1.1rem 1.2rem;
}

.dashboard-app .dashboard-card > .card-header {
  padding: 0.6rem 1.1rem;
  background-color: var(--surface-3);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: 600;
}

.dashboard-app .tab-content {
  background-color: var(--bg);
  padding-bottom: 2rem;
}

/* KPI ledger: a stack of metrics reads as one panel with hairline-divided rows */
.dashboard-app .kpi-stack {
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--surface);
}

.dashboard-app .kpi-stat {
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--border);
}

.dashboard-app .kpi-stack .kpi-stat:last-child {
  border-bottom: none;
}

/* Accordion */
.dashboard-app .accordion-item {
  margin-bottom: 0;
  background-color: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
}

.dashboard-app .accordion-button {
  background-color: var(--surface);
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
}

.dashboard-app .accordion-button:not(.collapsed) {
  background-color: var(--surface);
  color: var(--accent);
}

.dashboard-app .accordion-button:focus {
  box-shadow: none;
  border-color: var(--border);
}

.dashboard-app .accordion-body {
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Segmented control */
.dashboard-app .segmented-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dashboard-app .segmented-control .form-check {
  display: flex;
  margin: 0;
  padding-left: 0;
}

.dashboard-app .segmented-control .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.dashboard-app .segmented-control .form-check-label {
  padding: 0.42rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.88rem;
  line-height: 1.2;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.dashboard-app .segmented-control .form-check-label:hover {
  color: var(--text);
  background: var(--hover-wash);
}

.dashboard-app
  .segmented-control
  .form-check-input:checked
  + .form-check-label {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--border-strong);
}

.dashboard-app
  .segmented-control
  .form-check-input:focus-visible
  + .form-check-label {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 1px;
}

/* Disclosure toggle - quiet editorial link, no glyph */
.dashboard-app .btn-methodology {
  padding: 0.3rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.dashboard-app .btn-methodology:hover,
.dashboard-app .btn-methodology:focus {
  background: transparent;
  border-bottom-color: var(--accent);
  box-shadow: none;
  color: var(--accent);
  outline: none;
}

/* Radio groups */
.dashboard-app .dashboard-radio-group .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.dashboard-app .dashboard-radio-group .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.dashboard-app .dashboard-radio-group .form-check-label {
  color: var(--text);
  font-family: var(--font-main);
  font-size: 0.92rem;
}

/* Inputs */
.dashboard-app .dashboard-input {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
}

.dashboard-app .dashboard-input:focus {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem var(--focus-ring-tight);
  color: var(--text);
}

.dashboard-app .dashboard-input-group-text {
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.dashboard-app label.small,
.dashboard-app .text-muted {
  color: var(--muted) !important;
}

/* Info affordance: dotted underline on the term, no glyph */
.dashboard-app .info-term {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.dashboard-app .methodology-section {
  margin-top: 2.5rem;
  padding-top: 1rem;
}

.dashboard-app .methodology-content.dashboard-card {
  border: none;
  border-left: 2px solid var(--border-strong);
  border-radius: 0;
  background-color: transparent;
}

.dashboard-app .methodology-content .card-body {
  padding: 0.4rem 0 0.4rem 1.1rem;
  background-color: transparent;
}

/* Tooltips: light surface, hairline, subtle shadow */
.dashboard-app .tooltip .tooltip-inner {
  max-width: 260px;
  padding: 0.5rem 0.75rem;
  background-color: var(--tooltip-surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: var(--shadow-tooltip);
  color: var(--text-soft);
  font-family: var(--font-main);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
}

.dashboard-app .tooltip .tooltip-arrow::before {
  border-right-color: var(--border-strong);
}

/* Dash DataTable */
.dashboard-app .dash-table-container td.focused,
.dashboard-app .dash-table-container td.cell--selected {
  background-color: var(--surface-2) !important;
  box-shadow: none !important;
}

/* Dash DataTable: export control has a noisy default label; hide it and show ours. */
.dashboard-app .export {
  margin-bottom: 0.5rem;
  padding: 0.3rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.dashboard-app .export::after {
  content: "Export to CSV";
  font-family: var(--font-main);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-app .export:hover,
.dashboard-app .export:focus {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* Context / dateline strip */
.dashboard-app .overview-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 0.86rem;
}

.dashboard-app .overview-context strong {
  color: var(--text);
  font-weight: 600;
}

.dashboard-app .overview-context .sep {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: var(--border-strong);
  vertical-align: middle;
}

/* Segment stat blocks: rule-separated columns */
.dashboard-app .segment-card {
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  border: none;
  border-top: 2px solid var(--text);
  border-radius: 0;
}

.dashboard-app .segment-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.65rem 0 0.7rem;
  background-color: transparent;
  border-bottom: 1px solid var(--border);
}

.dashboard-app .segment-card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--text);
  font-family: var(--font-main);
  font-size: 1.02rem;
  font-weight: 600;
}

.dashboard-app .segment-card-name {
  line-height: 1.2;
}

.dashboard-app .segment-card-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.dashboard-app .segment-card-count strong {
  color: var(--text);
  font-weight: 600;
}

.dashboard-app .segment-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4rem;
}

.dashboard-app .segment-metric {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 110px;
  padding: 0.95rem 0 0.4rem;
  background-color: transparent;
}

.dashboard-app .segment-metric:first-child {
  border-right: 1px solid var(--border);
  padding-right: 1.4rem;
}

.dashboard-app .segment-metric-label {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 500;
}

.dashboard-app .segment-metric-value {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.dashboard-app .segment-metric-delta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 0.82rem;
}

.dashboard-app .segment-metric-delta .delta-num {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Significance read as small-caps text */
.dashboard-app .segment-sig-badge {
  font-family: var(--font-main);
  font-size: 0.74rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.dashboard-app .segment-metric-baseline {
  margin-top: 0.55rem;
  color: var(--muted);
  font-family: var(--font-main);
  font-style: italic;
  font-size: 0.8rem;
}

/* Headline finding tile - the two projection cards on the overview lede.
   Number leads (per FT/NYT lede tile), arm kicker sits above the rule. */
.dashboard-app .headline-tile {
  padding-top: 0.75rem;
  border-top: 2px solid var(--border-strong);
}

.dashboard-app .headline-tile--sig {
  border-top-color: var(--tile-accent, var(--border-strong));
}

.dashboard-app .headline-tile__kicker {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.dashboard-app .headline-tile__value {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.dashboard-app .headline-tile__value--sig {
  color: var(--tile-accent, var(--text));
}

.dashboard-app .headline-tile__label {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.dashboard-app .headline-tile__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  color: var(--muted);
}

.dashboard-app .headline-tile__meta .label {
  color: var(--muted);
  margin-right: 0.35rem;
}

/* Page headline lede - serif H2, no left bar, kicker above. */
.dashboard-app .page-lede {
  margin-bottom: 2.5rem;
}

.dashboard-app .page-lede__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.dashboard-app .page-lede__headline {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--text);
  max-width: 52rem;
  margin-bottom: 1.5rem;
}

.dashboard-app .page-lede__caveat {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin-bottom: 0;
}

/* Spec strip: the dateline-style methodology kicker repeated under each tab. */
.dashboard-app .spec-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  margin: 0.25rem 0 1.6rem;
  padding: 0.45rem 0 0.7rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-main);
  font-size: var(--fs-meta);
}

.dashboard-app .spec-strip strong {
  color: var(--text);
  font-weight: 600;
}

.dashboard-app .spec-strip .sep {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: var(--border-strong);
}

/* Accordion chevron: replace bootstrap's blue SVG with a typographic + / − */
.dashboard-app .accordion-button::after {
  width: auto;
  height: auto;
  background-image: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  content: "+";
  transform: none;
  transition: color 0.15s ease;
}

.dashboard-app .accordion-button:not(.collapsed)::after {
  background-image: none;
  color: var(--accent);
  content: "−";
  transform: none;
}

/* Plotly modebar: dial down the contrast so the chart chrome reads quiet. */
.dashboard-app .js-plotly-plot .modebar {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.dashboard-app .js-plotly-plot:hover .modebar {
  opacity: 1;
}

.dashboard-app .js-plotly-plot .modebar-btn path {
  fill: var(--muted) !important;
}

.dashboard-app .js-plotly-plot .modebar-btn:hover path {
  fill: var(--accent) !important;
}