/* Text uses rem units; appearance.js changes the root percentage, not page zoom. */
:root { --surface-soft: #eef1ef; --selection: #edf5f1; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
.appearance-dialog {
  inset: 78px 18px auto auto;
  width: min(370px, calc(100% - 24px));
  max-height: calc(100dvh - 102px);
  margin: 0;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 12px 48px #0003;
}
.appearance-dialog::backdrop { background: #10182040; }
.appearance-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.appearance-dialog h2 { margin: 4px 0 0; font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; hyphens: none; }
.appearance-dialog > header button { flex: 0 0 auto; }
.appearance-section { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.appearance-section legend, .appearance-section h3 { margin: 0 0 10px; padding: 0; font-size: .8125rem; font-weight: 650; }
.appearance-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; background: var(--surface-soft); border-radius: 6px; }
.appearance-themes label { position: relative; cursor: pointer; min-width: 0; }
.appearance-themes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.appearance-themes label > span { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-height: 74px; height: 100%; padding: 10px 3px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); font-size: .75rem; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.appearance-themes svg { width: 20px; height: 20px; flex: 0 0 auto; }
.appearance-themes input:checked + span { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: 0 1px 3px #0001; }
.appearance-themes input:focus-visible + span, .appearance-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.appearance-font-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.appearance-font-controls button { width: 44px; height: 44px; }
.appearance-font-controls output { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.appearance-font-controls button:disabled { opacity: .35; cursor: not-allowed; }
.appearance-dialog footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.appearance-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: .75rem; text-align: left; cursor: pointer; }
.appearance-reset svg { width: 16px; height: 16px; flex: 0 0 16px; }
.appearance-reset:hover { color: var(--ink); }
#appearance-trigger { flex-shrink: 0; }

/* Keep shared navigation stable when text is larger or a page has older header rules. */
body .topbar { display: grid; align-items: center; height: 64px; min-height: 64px; grid-template-columns: minmax(160px, 1fr) auto minmax(180px, 1fr); padding: 0 18px; gap: 10px; }
body .topbar-actions { flex-wrap: nowrap; margin-top: 0; }
.topbar-utilities { flex-shrink: 0; }
.topbar .brand-logo { max-width: 100%; }
.topbar .primary-nav-link { white-space: nowrap; }
.language-switcher { min-height: 32px; height: auto; }
.language-switcher select { width: auto; max-width: 128px; }
.news-card-copy, .event-result-copy, .site-footer a span { min-width: 0; overflow-wrap: anywhere; }
.site-footer { flex-wrap: wrap; }
.news-filter input, .news-filter select, .search-form input, .search-form select { min-height: 36px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.country-hazard-values { white-space: normal; text-align: right; }
.country-card-metrics { flex-wrap: wrap; }
.climate-actions a, .source-link { white-space: normal; overflow-wrap: anywhere; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf0f2;
  --muted: #adb7b7;
  --line: #414749;
  --surface: #242729;
  --canvas: #17191b;
  --surface-soft: #303638;
  --selection: #2e423a;
  --accent: #8ad4b0;
  --shadow: 0 8px 24px #0005;
  --news-red: #ff8d7e;
  --news-blue: #8cbee9;
  --news-green: #8ad4b0;
  --climate-red: #ff8d7e;
  --climate-blue: #8cbee9;
  --climate-teal: #73d2c2;
}
:root[data-theme="dark"] :is(.news-body, .climate-body, .archive-body) { background: var(--canvas); }
:root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }
:root[data-theme="dark"] :is(
  .primary-navigation, .dataset-switch, .chart-segments, .climate-data-table th,
  .source-table th, .event-table th, .advanced-filter-grid, .dataset-button,
  .archive-detail, .archive-score-track, .score-track, .chart-shell,
  .history-chart, .history-empty, .archive-history-chart, .ai-toolbar, .ai-table th,
  .queue-lane > header, .locale-lane > header, .worker-icon, .locale-bar
) { background: var(--surface-soft); }
:root[data-theme="dark"] :is(
  .section-navigation, .place-input-row, .place-results, .place-results button,
  .time-dates input, .hazard-trigger, .hazard-dialog, .hazard-dialog footer, .hazard-cancel,
  .news-filter, .news-filter input, .news-filter select, .source-state,
  .news-card, .news-card-copy, .news-map-panel, .news-fact, .news-impact-grid,
  .news-coverage-list, .news-source-box, .media-empty, .news-empty,
  .event-result-card, .hazard-filter, .reset-search,
  .climate-secondary, .source-link, .evidence-step > a, .climate-footer
) { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] :is(
  .primary-nav-link, .dataset-switch span, .news-timeline-label,
  .news-card-actions a, .news-card-actions button, .detail-action, .news-coverage-list a,
  .place-results button, .hazard-options label, .hazard-options input:checked ~ span,
  #time-trigger, .map-empty, .news-card-copy p, .original-copy,
  .news-detail-lead, .climate-lead, .evidence li, .ai-detail-result p, .ai-section p,
  .weight-list dt, .limits-list span, .source-table td:nth-child(2)
) { color: var(--ink); }
:root[data-theme="dark"] :is(
  .news-intro p, .news-stream-header span, .news-card-meta, .news-detail-meta, .news-filter label,
  .news-map-panel > footer, .news-method-note p, .news-detail-loading,
  .news-fact span, .news-impact-grid p, .news-coverage-list small,
  .coverage-policy, .news-source-box p, .media-credits li,
  .place-breadcrumbs, .place-directory, .place-results small, #place-feedback,
  .explore-filter label, .explore-filter legend, .time-dates label,
  #time-summary, .time-ranges label, #time-caption, .coverage-note,
  .chronicle-status-date, .chronicle-options p, .explore-region-mode #clear-region
) { color: var(--muted); }
:root[data-theme="dark"] :is(.place-breadcrumbs a, .place-directory a, .map-empty-actions button, .explore-popup a, .place-input-row > svg) { color: var(--accent); }
:root[data-theme="dark"] :is(.primary-nav-link:hover, .content-nav-link:hover, .place-results button:hover, .hazard-options label:hover, .hazard-trigger:hover, .source-register > a:hover, .event-row:hover, .event-result-card:hover, .event-card:hover, #time-trigger:hover) { background: var(--surface-soft); color: var(--ink); }
:root[data-theme="dark"] :is(.primary-nav-link[aria-current="page"], .content-nav-link[aria-current="page"], .dataset-switch input:checked + span, .dataset-button.active, .event-result-card.selected, .event-card.active, .event-row.selected, .map-empty) { color: var(--ink); background: var(--selection); border-color: var(--line); }
:root[data-theme="dark"] :is(.search-submit, .filter.active, .hazard-filter.active, .method-command, .climate-primary, .news-filter-submit, .news-more, .chart-segment.is-active, .hazard-dialog .hazard-apply, .run-button, .status-filter.active, .ai-action.primary) { color: #13261d; background: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] :is(.search-submit:hover, .method-command:hover, .climate-primary:hover, .news-filter-submit:hover, .news-more:hover, .run-button:hover) { background: #b0e4c9; }
:root[data-theme="dark"] :is(.formula-panel, .climate-rule, .measurement-summary) { background: #101b17; border: 1px solid var(--line); }
:root[data-theme="dark"] :is(.news-stream-header, .news-method-note, .evidence-boundaries, .evidence-steps, .standard-grid, .source-register, .chart-shell) { border-color: var(--line); }
:root[data-theme="dark"] :is(.news-card, .news-map-panel, .news-fact, .news-impact-grid, .news-impact-grid > div, .news-coverage-list, .news-coverage-list li, .news-source-box, .media-empty, .original-copy, .explore-controls, .place-input-row, .place-results, .place-results button, .hazard-trigger, .hazard-dialog, .hazard-dialog footer, .hazard-all, .chronicle-options, .time-dates input, .event-result-card) { border-color: var(--line); }
:root[data-theme="dark"] .explore-layout .news-card[data-record="event"] .news-card-visual { background: #293b35; color: var(--accent); }
:root[data-theme="dark"] .news-timeline-label { background: transparent; }
:root[data-theme="dark"] .explore-layout .news-card[data-record="event"] .news-card-visual svg { color: var(--accent); }
:root[data-theme="dark"] .news-alert { color: #b7e9cc; background: #244637; }
:root[data-theme="dark"] .news-alert[data-alert="Orange"] { color: #ffcd99; background: #553821; }
:root[data-theme="dark"] .news-alert[data-alert="Red"] { color: #ffb7af; background: #512c2b; }
:root[data-theme="dark"] .chronicle-status { color: #a2d4b6; }
:root[data-theme="dark"] .chronicle-status[data-tone="contained"] { color: #93c6e5; }
:root[data-theme="dark"] .chronicle-status[data-tone="unverified"], :root[data-theme="dark"] .chronicle-status[data-tone="probable"] { color: #edc58e; }
:root[data-theme="dark"] :is(.chronicle-status[data-tone="ended"], .chronicle-status[data-tone="archived"], .chronicle-status[data-tone="unknown"]) { color: var(--muted); }
:root[data-theme="dark"] :is(.source-disclaimer, .demo-notice, .interpretation-band, .evidence-step.is-current, .setup-notice) { background: #383326; color: #f3d6a1; border-color: #786747; }
:root[data-theme="dark"] :is(.ai-kicker, .ai-detail-kicker, .pipeline-kicker, .ai-flow svg, .detail-action svg) { color: #c5b5ef; }
:root[data-theme="dark"] :is(.ai-row:hover, .ai-row.selected) { background: var(--selection); }
:root[data-theme="dark"] :is(.interpretation-band p, .evidence-step.is-current .step-state, .method-warning) { color: #edce9a; }
:root[data-theme="dark"] :is(.explore-error, .source-state.is-error, .climate-data-error) { color: #ffada2; }
:root[data-theme="dark"] .activity-none { background: var(--surface); }
:root[data-theme="dark"] .activity-history { background: #293945; }
:root[data-theme="dark"] .activity-watch { background: #45412c; }
:root[data-theme="dark"] .activity-active { background: #513a29; }
:root[data-theme="dark"] .activity-confirmed { background: #513031; }
:root[data-theme="dark"] :is(.country-hazard-breakdown, .country-year-total) { border-color: #ffffff30; }
:root[data-theme="dark"] .chart-axis-label { fill: var(--muted); }
:root[data-theme="dark"] .chart-grid { stroke: var(--line); }
:root[data-theme="dark"] .chart-selected-line { stroke: var(--ink); }
:root[data-theme="dark"] .chart-selected-dot { fill: var(--surface); stroke: var(--ink); }
:root[data-theme="dark"] .chart-year-control { accent-color: var(--accent); }
/* Change map chrome, never recolour satellite photos or warning/map tiles. */
:root[data-theme="dark"] :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip, .leaflet-control-layers, .leaflet-bar a, .leaflet-control-attribution, .legend) { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] :is(.leaflet-control-attribution a, .leaflet-popup-content a, .leaflet-container a.leaflet-popup-close-button) { color: var(--accent); }

@media (max-width: 1100px) and (min-width: 701px) {
  body .topbar { grid-template-columns: minmax(100px, 1fr) auto auto; }
  .topbar .brand-logo { width: 140px; }
  .content-nav-link { width: 32px; justify-content: center; padding: 0; }
  .content-nav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .topbar .mode-badge { display: none; }
}
@media (max-width: 700px) {
  body .topbar { height: 58px; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 0 10px; gap: 4px; }
  .topbar .brand-logo { width: 140px; height: 46px; }
  body .topbar-actions { justify-content: flex-end; overflow: visible; }
  .topbar-utilities { gap: 3px; }
  .language-switcher select { width: 42px; }
  .appearance-dialog { top: 70px; right: 12px; max-height: calc(100dvh - 94px); padding: 18px; }
  .primary-navigation { height: 66px; }
  body { padding-bottom: 66px; }
  .workspace { height: calc(100% - 124px); }
  .topbar .primary-nav-link { white-space: normal; text-align: center; }
}
@media (max-width: 380px) {
  .topbar .brand-logo { width: 108px; }
  .topbar .language-switcher { width: 32px; }
  .topbar .language-switcher select { width: 32px; }
  .appearance-themes label > span { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}