/* Shared presentation for the ResearchWatch tools. */
:root {
  --rw-font: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --rw-ink: #172537;
  --rw-muted: #5d6c7e;
  --rw-paper: #f8f9fc;
  --rw-line: #d8dfe8;
  --rw-accent: #365bc0;
  --rw-copper: #b9744b;
  --rw-night: #101b29;
  --rw-body: 15px;
  --rw-small: 13px;
  --rw-label: 12px;
  --rw-h1: clamp(36px, 4.4vw, 58px);
  --rw-h2: clamp(26px, 2.6vw, 32px);
  --rw-h3: 22px;
  --rw-gutter: 32px;
  --ink: var(--rw-ink);
  --muted: var(--rw-muted);
  --paper: var(--rw-paper);
  --cream: var(--rw-paper);
  --white: #fff;
  --line: var(--rw-line);
  --green: var(--rw-accent);
  --teal: var(--rw-accent);
  --pale: #edf0f5;
  --navy: var(--rw-night);
  --font: var(--rw-font);
  --font-sans: var(--rw-font);
}
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rw-paper); color: var(--rw-ink); font-family: var(--rw-font); font-size: var(--rw-body); line-height: 1.7; }
*, *::before, *::after { box-sizing: border-box; }
img, canvas, video { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--rw-font) !important; font-style: normal; font-weight: 600; letter-spacing: -.025em; overflow-wrap: break-word; }
h1 { font-size: var(--rw-h1); line-height: 1.14; }
h2 { font-size: var(--rw-h2); line-height: 1.25; }
h3 { font-size: var(--rw-h3); line-height: 1.35; }
.observatory h2, .section-title h2, .brief-heading h2, .brief-queue-title h2 { font-size: var(--rw-h2); line-height: 1.25; }
.observatory h3, .panel-title h3, .brief-map-panel .panel-title h3, .brief-area-card h3, .brief-meaning h3, .playbook-header h3 { font-size: var(--rw-h3); line-height: 1.35; }
.observatory p, .rw-product p { font-size: var(--rw-body); line-height: 1.75; }
.observatory main p:not(.eyebrow), .rw-product main p:not(.eyebrow) { font-size: var(--rw-body); line-height: 1.75; }
.rw-product .masthead > div > p:not(.eyebrow) { margin: 0; }
.eyebrow, .section-kicker { font-family: var(--rw-font); font-size: var(--rw-label); font-weight: 600; line-height: 1.6; letter-spacing: .12em; }
.observatory .eyebrow, .rw-product .eyebrow { font-size: var(--rw-label); line-height: 1.6; letter-spacing: .12em; }
.small, .small-note, .muted, .reading-footer, .forecast-caption, .view-intro p, .time-note, .source-note { font-size: var(--rw-small); line-height: 1.7; }
:is(body.rw-product, .observatory) :is(main, footer) :is(small, .small, .small-note, .reading-footer, .forecast-caption, .source-note) { font-size: var(--rw-small); line-height: 1.7; }
.site-header, .topbar {
  min-height: 104px; margin: 0; padding: 22px max(var(--rw-gutter), calc((100% - 1280px) / 2));
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px;
  background: var(--rw-night); color: #f1f4fa; border: 0; border-bottom: 1px solid #2a3748;
}
.site-header .brand, .topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; color: #f1f4fa; font-family: var(--rw-font); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; }
.site-header .brand b, .topbar .brand b { display: block; margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; letter-spacing: inherit; }
.site-header .brand small, .topbar .brand small { display: block; max-width: none; margin-top: 6px; color: #b1bfd0; font-size: 10px; line-height: 1.5; font-weight: 400; letter-spacing: .07em; }
.brand-mark { flex-shrink: 0; width: 42px; height: 46px; border-color: #8e9bad; color: #d0a07e; }
.topbar .brand > svg { flex-shrink: 0; width: 42px; height: 46px; color: #d0a07e; }
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-width: 0; }
.topbar nav { gap: 20px; min-width: 0; font-size: 13px; }
.topbar nav a { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.site-header .methods-link, .rw-suite-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; color: #d8e2f0; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.creator.rw-suite-link { text-align: start; }
.site-header .language-toggle { border-color: #5d6c7e; }
.site-header .language-toggle button { min-width: 42px; min-height: 40px; font-size: 12px; color: #d8e2f0; }
.site-header .language-toggle button.active { background: #365bc0; color: #fff; }
.observatory main, .rw-product > main { max-width: 1280px; width: 100%; margin: 0 auto; padding-inline: var(--rw-gutter); }
.intro, .masthead { display: flex; align-items: center; justify-content: space-between; min-height: 300px; gap: 36px; padding: 48px 0 36px; }
.intro h1, .masthead h1 { max-width: 900px; margin: 18px 0; font-family: var(--rw-font) !important; font-size: var(--rw-h1); font-weight: 600; line-height: 1.14; letter-spacing: -.035em; }
.intro h1 em, .masthead h1 span { color: var(--rw-copper); font-style: normal; }
.intro p, .masthead .lead, .masthead p { font-size: var(--rw-body); line-height: 1.75; }
.intro-note p, .masthead-aside p { font-family: var(--rw-font); font-size: 18px; line-height: 1.6; }
.intro-note small, .masthead-aside small { font-size: var(--rw-label); line-height: 1.6; }
.workspace-switcher-heading { margin-bottom: 12px; }
.workspace-switcher-heading p, .workspace-switcher-heading span { font-size: var(--rw-small); }
.view-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; border: 0; min-height: 0; }
.view-tabs:has(> a.workspace-tab) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.view-tabs > button, .view-tabs > a.workspace-tab {
  min-width: 0; min-height: 88px; margin: 0; padding: 18px 16px; border: 1px solid var(--rw-line);
  border-bottom: 3px solid #bdcbe9; border-radius: 8px; background: #fff; color: var(--rw-ink);
  font-family: var(--rw-font); font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: 0;
  white-space: normal; box-shadow: 0 3px 8px #17253706; align-self: stretch;
}
.view-tabs > button { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 12px; gap: 11px; align-items: center; justify-content: normal; text-align: start; }
.view-tabs .tab-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dce3f5; border-radius: 8px; background: #edf1ff; color: var(--rw-accent); }
.view-tabs .tab-icon svg { display: block; width: 23px; height: 23px; }
.view-tabs .tab-content { display: block; min-width: 0; }
.view-tabs .tab-content strong, .view-tabs .tab-content small { display: block; }
.view-tabs > button.active .tab-icon { color: #fff; border-color: #7f90de; background: #ffffff17; }
.view-tabs > button.active .tab-content strong { color: #fff; }
.view-tabs > button.active .tab-content small { color: #d4ddff; }
.view-tabs .tab-index { position: absolute; inset-inline-end: 12px; top: 7px; color: #8b99bb; font-size: 10px; }
.view-tabs > button.active .tab-index { color: #c0ceff; }
.view-tabs > button.active, .view-tabs > a.workspace-tab.active { color: #fff; background: var(--rw-accent); border-color: var(--rw-accent); border-bottom-color: #c98c5c; }
.view-tabs > button > svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.view-tabs > .tabs-aside, .view-tabs > .region-tag { grid-column: 1 / -1; justify-self: end; margin: 0; font-size: var(--rw-small); }
.view-tabs .tab-content strong { font-size: 14px; line-height: 1.4; }
.view-tabs .tab-content small { margin-top: 4px; font-size: 12px; line-height: 1.5; }
.view-tabs .workspace-tab .tab-index { font-size: 10px; }
.outline-button, .solid-button, .button, .briefing-export-buttons > a,
.briefing-actions button, .regional-exports button, .result-actions button {
  min-height: 44px; padding: 11px 16px; border-radius: 5px; font-size: 14px; line-height: 1.45;
  font-weight: 500; white-space: normal; text-align: center; overflow-wrap: break-word;
}
.text-button, .insights a, .insights .text-button, .map-tools a, .map-tools button { min-height: 40px; font-size: 13px; line-height: 1.6; }
label { font-size: 13px; line-height: 1.6; }
input:not([type=checkbox]):not([type=range]), select, textarea { min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px; line-height: 1.5; border-radius: 5px; }
.audience-tabs button, .activity-tabs button, .setting-tabs button, .classification-modes button, .brief-audience button, .place-chips button, .timeline button, .capacity-target button { min-height: 44px; max-width: 100%; padding: 9px 12px; font-size: 13px; line-height: 1.5; white-space: normal; }
.map-modes button, .map-controls button, .map-zoom button { min-width: 40px; min-height: 40px; }
.map-modes button { font-size: 12px; }
.country-map { background: #192b4a; }
.country-map h3 { color: #f1f4fa; }
.aqi-reading > strong { font-size: 64px; letter-spacing: -.035em; }
.pollutant-grid > button { min-width: 0; }
.pollutant-grid > button > span:not(.pollutant-top), .pollutant-grid > button > small, .pollutant-index { font-size: 12px; line-height: 1.6; }
.panel-title, .section-heading, .section-title, .brief-heading { gap: 16px; min-width: 0; }
.section-heading > *, .section-title > *, .brief-heading > *, .panel-title > * { min-width: 0; }
.hourly-scroll, .validation-table-wrap, .table-scroll { max-width: 100%; overflow-x: auto; }
footer { margin-top: 40px; padding: 30px max(var(--rw-gutter), calc((100% - 1280px) / 2)); gap: 18px 28px; border-top: 1px solid var(--rw-line); background: #edf0f5; font-size: 13px; line-height: 1.7; }
footer p, footer > p, footer span, .footer-identity span { font-size: 12px !important; line-height: 1.8; }
footer > a, footer > button, .footer-identity strong { font-size: 13px; min-height: 40px; line-height: 1.6; }
.observatory[lang=ar], .observatory[lang=ar] h1, .observatory[lang=ar] h2, .observatory[lang=ar] h3 { font-family: 'Noto Sans Arabic', var(--rw-font) !important; letter-spacing: 0; }
.observatory[lang=ar] .intro h1 { font-size: var(--rw-h1); line-height: 1.65; }
.observatory[lang=ar] .brand small { font-size: 10px; line-height: 1.7; }
@media (max-width: 1100px) {
  .topbar nav { display: none; }
  .intro-note { min-width: 200px; padding-inline-start: 22px; }
  .view-tabs > button, .view-tabs > a.workspace-tab { min-height: 112px; grid-template-columns: 32px minmax(0, 1fr); }
  .view-tabs .tab-chevron { display: none; }
  .view-tabs .tab-icon { width: 32px; height: 34px; }
}
@media (max-width: 760px) {
  :root { --rw-gutter: 20px; --rw-h1: clamp(32px, 8.2vw, 42px); --rw-h2: 26px; --rw-h3: 21px; }
  .site-header, .topbar { min-height: 92px; gap: 12px 20px; padding-top: 18px; padding-bottom: 18px; }
  .site-header .brand, .topbar .brand { font-size: 16px; gap: 10px; letter-spacing: .03em; }
  .site-header .brand small, .topbar .brand small { font-size: 10px; line-height: 1.6; letter-spacing: .04em; }
  .brand-mark, .topbar .brand > svg { width: 36px; height: 40px; }
  .header-tools { gap: 10px 14px; }
  .intro, .masthead { min-height: 0; padding: 32px 0 28px; gap: 20px; }
  .intro h1, .masthead h1 { margin: 14px 0 18px; }
  .intro-note, .masthead-aside, .masthead .orbit { display: none; }
  .intro p, .masthead .lead, .masthead p { max-width: 100%; font-size: var(--rw-body); line-height: 1.75; }
  .view-tabs, .view-tabs:has(> a.workspace-tab) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
  .view-tabs > button, .view-tabs > a.workspace-tab { min-height: 112px; padding: 16px 12px; font-size: 14px; line-height: 1.45; }
  .view-tabs > button:nth-child(3):last-of-type { grid-column: 1 / -1; }
  .view-tabs .tab-content strong { font-size: 14px; }
  .view-tabs .tab-content small { font-size: 12px; }
  .view-tabs .workspace-tab .tab-index { font-size: 10px; }
  .outline-button, .solid-button, .button, .briefing-export-buttons > a, .briefing-actions button, .regional-exports button, .result-actions button { min-height: 46px; padding: 11px 13px; font-size: 14px; }
  input:not([type=checkbox]):not([type=range]), select, textarea { min-height: 46px; font-size: 16px; }
  .audience-tabs, .activity-tabs, .setting-tabs, .classification-modes, .brief-audience, .place-chips { flex-wrap: wrap; gap: 8px; }
  .audience-tabs button, .activity-tabs button, .setting-tabs button, .classification-modes button, .brief-audience button, .place-chips button, .timeline button { font-size: 13px; min-height: 44px; padding: 9px 11px; }
  .brief-controls { gap: 14px; }
  .brief-controls .button, .brief-heading .button { font-size: 14px; }
  .brief-audience { flex-wrap: wrap; }
  .brief-audience button { flex: 1 1 120px; }
  .map-legend, .brief-map-legend { flex-wrap: wrap; gap: 8px 12px; font-size: 12px; }
  .current-panel, .brief-map-panel, .brief-meaning, .brief-lower-grid > *, .regional-plan-grid > article { min-width: 0; }
  .section-heading, .section-title, .panel-title { flex-wrap: wrap; }
  .section-heading > .small-note { max-width: 100%; font-size: 13px; }
  .aqi-reading > strong { font-size: 54px; }
  .insights a, .insights .text-button, .map-tools a, .map-tools button, .reading-footer, .forecast-caption { font-size: 13px; }
  .map-modes { flex-wrap: wrap; }
  .map-modes button { font-size: 12px; min-height: 40px; }
  .location-bar { gap: 10px; }
  .location-bar .location-button { min-width: 46px; min-height: 46px; }
  .location-bar .location-button { width: 46px; height: 46px; padding: 0; flex: 0 0 46px; gap: 0; font-size: 0; }
  .location-bar .location-button svg { width: 18px; height: 18px; margin: 0; }
  .location-bar .icon-button { width: 46px; height: 46px; min-width: 46px; }
  .workspace-switcher-heading { display: block; }
  footer { padding-top: 26px; padding-bottom: 26px; gap: 16px; }
  footer > a, footer > button { max-width: none; font-size: 13px; }
  .footer-identity strong { font-size: 14px; }
  .observatory[lang=ar] .view-tabs > button, .observatory[lang=ar] .setting-tabs button, .observatory[lang=ar] .regional-exports button { font-size: 13px; }
}
@media (max-width: 480px) {
  :root { --rw-gutter: 16px; }
  .site-header, .topbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .site-header .brand, .topbar .brand { width: 100%; font-size: 16px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .site-header .methods-link { display: none; }
  .topbar .creator { align-self: flex-start; }
  .view-tabs > button, .view-tabs > a.workspace-tab { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .view-tabs .workspace-tab .tab-icon { width: 28px; height: 32px; }
  .view-tabs .workspace-tab .tab-icon svg { width: 20px; height: 20px; }
  .tab-content small { overflow-wrap: break-word; }
  .brief-controls { grid-template-columns: minmax(0, 1fr); }
  .brief-controls .button { width: 100%; }
  .brief-lead { padding: 24px 20px; }
  .brief-heading .button { width: 100%; }
  .briefing-export-buttons { grid-template-columns: minmax(0, 1fr); }
  .pollutant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pollutant-grid > button { padding: 14px 12px; }
  footer { grid-template-columns: minmax(0, 1fr); }
  footer > *, footer > p { grid-column: 1; grid-row: auto; }
}
@media (max-width: 360px) {
  .view-tabs > button, .view-tabs > a.workspace-tab { min-height: 128px; }
}
@media print {
  :root { --rw-h1: 30px; --rw-h2: 23px; --rw-h3: 18px; --rw-body: 12px; }
  .site-header, .topbar, .rw-suite-link, .view-tabs { display: none !important; }
  body { background: #fff; }
}