/* Dengue importation dashboard. Upshot-style: white page, near-black type, thin grey rules, one warm hue. */
:root {
  /* Ink: type, rules, target region */
  --text: #14213D;
  --text-2: #2E4165;
  --text-3: #6B7C9C;
  --rule: #E4E9F1;
  --rule-2: #BCC6D8;
  --bg: #ffffff;
  --bg-2: #F3F5F9;
  --land: #ECEFF4;
  --land-line: #ffffff;
  --nodata: #F3F5F9;
  --target: #6B7C9C; /* hatch colour for the target region */
  /* Lagoon ramp: destinations */
  --dest-1: #E3F3F3; --dest-2: #B6E0E1; --dest-3: #5FBFC4; --dest-4: #1C9AA3; --dest-5: #0A5560; --dest-6: #06333A;
  --bar-dest: #1C9AA3;
  /* Red ramp: sources */
  --src-1: #FCECEE; --src-2: #F5C6C9; --src-3: #E06A72; --src-4: #C8102E; --src-5: #A80E28; --src-6: #8E0C21;
  --bar-src: #C8102E;
  /* Ochre: caution (forecast months) */
  --caution-bg: #FBF0D9;
  --caution: #8A5A12;
  --sans: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--text); }
button { font: inherit; color: inherit; }
svg text { font-family: var(--sans); }

.frame { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .frame { padding: 0 16px; } }

/* Masthead */
.masthead .frame { padding-top: 34px; padding-bottom: 10px; border-bottom: 1px solid var(--text); }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.kicker a { text-decoration: none; color: inherit; }
.kicker a:hover { text-decoration: underline; }
h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.01em; max-width: 22em; }
.dek { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--text-2); max-width: 44em; margin-top: 14px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 12px; color: var(--text-3); align-items: center; }
.byline strong { color: var(--text-2); font-weight: 600; }
.ghost-btn { background: none; border: 1px solid var(--rule-2); border-radius: 2px; padding: 5px 11px; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.byline-about { margin-left: auto; }
.ghost-btn:hover, .ghost-btn:focus-visible { border-color: var(--text); color: var(--text); outline: none; }

/* View tabs */
.tabs { border-bottom: 1px solid var(--rule); }
.tabs .frame { display: flex; gap: 28px; overflow-x: auto; }
.tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 14px 0 11px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--text); border-bottom-color: var(--text); }

/* Controls (inside the left column, level with the detail card) */
.controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.control { display: flex; flex-direction: column; gap: 5px; }
.control .label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.control-row { display: flex; align-items: center; gap: 6px; }
select { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 2px; padding: 6px 10px; min-height: 34px; }
select:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--rule-2); background: var(--bg); border-radius: 2px; cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.icon-btn:hover { border-color: var(--text); color: var(--text); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 2px; overflow: hidden; }
.seg button { border: none; background: var(--bg); padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button.is-on { background: var(--text); color: var(--bg); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.chip.forecast { background: var(--caution-bg); color: var(--caution); margin-right: 6px; vertical-align: 1px; }
.chip.estimate { background: var(--bg-2); color: var(--text-2); margin-right: 6px; vertical-align: 1px; }
.info-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--bg); color: var(--text-3); font: 700 11px/1 var(--serif); font-style: italic; cursor: help; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.info-btn:hover, .info-btn:focus-visible { border-color: var(--text); color: var(--text); outline: none; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.legend-row { display: flex; align-items: flex-end; gap: 12px; }
.legend-row .legend { flex: 1 1 auto; min-width: 0; }
.legend-row .info-btn { margin-bottom: 1px; }
.chip.observed { background: var(--bg-2); color: var(--text-2); }

/* View */
main.frame { padding-top: 26px; padding-bottom: 40px; }
.view-head { margin-bottom: 14px; }
.view-head h2 { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; }
.hero { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin-top: 6px; max-width: 46em; }
.hero-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-text strong { color: var(--text); font-weight: 600; }
.hero-int { display: block; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.map-wrap { position: relative; }
.map-wrap svg { display: block; width: 100%; height: auto; }
.map-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.map-tools .icon-btn { width: 28px; height: 28px; font-size: 12px; }
.unit { stroke: var(--land-line); stroke-width: 0.7; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill 0.2s ease; }
.unit.no-data { fill: var(--nodata); }
.unit.other { fill: var(--land); cursor: default; }
.unit.is-target { fill: url(#hatch); stroke: var(--text-3); stroke-width: 0.6; cursor: pointer; }
.unit.is-hover { stroke: var(--text); stroke-width: 1.4; }
.unit.is-selected { stroke: var(--text); stroke-width: 2; }
.outline { fill: none; stroke: var(--rule-2); stroke-width: 0.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.sphere { fill: #fbfbfb; stroke: var(--rule); stroke-width: 0.6; }
.unit-label { font-size: 9.5px; font-weight: 600; fill: var(--text); pointer-events: none; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.5px; stroke-linejoin: round; }
.unit-label.on-dark { fill: #fff; stroke: none; }
.target-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text); pointer-events: none; }

.legend { margin-top: 12px; }
.legend-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.legend-swatches { display: flex; align-items: flex-start; }
.legend-swatch { flex: 1 1 0; min-width: 0; }
.legend-swatch .sw { height: 11px; }
.legend-swatch .lb { font-size: 10.5px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.legend-swatch.nodata { flex: 0 0 auto; margin-right: 14px; }
.legend-swatch.nodata .sw { width: 34px; background: var(--nodata); border: 1px solid var(--rule); }
.legend-swatch.target { flex: 0 0 auto; margin-right: 14px; }
.legend-swatch.target .sw { width: 34px; background: repeating-linear-gradient(135deg, #6B7C9C 0 1.6px, #ffffff 1.6px 6px); border: 1px solid var(--rule-2); }
.mini-legend { margin-top: 8px; }
.mini-legend .legend-title { font-size: 11px; }
.mini-legend .legend-swatch .sw { height: 8px; }
.mini-legend .legend-swatch .lb { font-size: 10px; text-align: center; }
.mini-legend .legend-swatch.nodata .sw, .mini-legend .legend-swatch.target .sw { width: 26px; }
.note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.45; }
.note strong { color: var(--text-2); font-weight: 600; }

/* Side column */
.side h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--text); margin-bottom: 10px; }
.detail { padding: 14px 16px; background: var(--bg-2); border-radius: 2px; margin-bottom: 22px; }
.detail-title { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.2; }
.detail-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 16px; margin-top: 10px; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.stat-value { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 1px; }
.stat-sub { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.detail-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.detail-section { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.detail-section h4 { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
.detail-section .strip { margin-top: 6px; }

#sources-panel { margin-bottom: 24px; }
.map-wrap.mini .unit { stroke-width: 0.5; }
.mini-rank { list-style: none; margin-top: 8px; }
.mini-rank li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--rule); cursor: pointer; font-size: 13px; }
.mini-rank li:hover { background: var(--bg-2); }
.mini-rank .rk-n { font-size: 11px; color: var(--text-3); }
.mini-rank .rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip { margin-top: 10px; }
.strip .strip-svg { display: block; width: 100%; overflow: visible; }
.strip-lb { font-family: var(--sans); font-size: 10.5px; fill: #000; font-variant-numeric: tabular-nums; }
.strip-lb.strong { fill: #000; font-weight: 600; }
td.strip, th.strip { width: 34%; min-width: 140px; }
table[data-kind="src"] td.strip, table[data-kind="src"] th.strip { width: 22%; min-width: 120px; }
td.strip { padding-right: 0; }
td.strip .strip-svg { display: block; width: 100%; }
.mini-rank .rk-val { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dest-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; max-width: 960px; margin: 34px auto 0; }
@media (max-width: 900px) { .dest-pair { grid-template-columns: minmax(0, 1fr); } }
.dest-pair.single { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.table-section { margin-top: 34px; }
.table-section table { font-size: 14px; }
.table-section th, .table-section td { padding: 8px 12px 8px 0; }
.table-section td.strip { width: 40%; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--rule-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.dim { color: var(--text-3); }
td.bar { width: 30%; min-width: 90px; }
td.bar > div { height: 9px; background: var(--bar-dest); }
table[data-kind="src"] td.bar > div { background: var(--bar-src); }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--bg-2); }
tr.is-selected td { font-weight: 600; }
tr.is-selected td.bar > div { background: var(--text); }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.link-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Tooltip */
.tooltip { position: fixed; z-index: 50; pointer-events: none; display: none; background: var(--bg); color: var(--text); border: 1px solid var(--rule-2); border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); padding: 9px 12px; font-size: 12.5px; max-width: 280px; line-height: 1.4; }
.tooltip.show { display: block; }
.tooltip .tt-title { font-weight: 700; font-size: 13.5px; }
.tooltip .tt-sub { color: var(--text-3); font-size: 11px; margin-bottom: 4px; }
.tooltip .tt-val { font-weight: 700; font-size: 17px; }
.tooltip .tt-int { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tooltip .tt-key { display: inline-block; width: 14px; height: 8px; vertical-align: middle; border-radius: 1px; }
.tooltip .tt-key.tick { width: 3px; height: 12px; background: var(--text); }
.tooltip .tt-key.ring { width: 9px; height: 9px; border-radius: 50%; border: 1.8px solid var(--text); background: #fff; }
.strip-svg { cursor: help; }
.strip-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.table-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--text); padding-bottom: 8px; margin-bottom: 10px; }
.table-head h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
#table-legend .strip-legend { justify-content: flex-end; margin: 0 0 2px; }
.lg-item { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.lg-key { display: inline-block; width: 14px; height: 8px; border-radius: 1px; }
.lg-key.tick { width: 3px; height: 12px; background: var(--text); }
.lg-key.ring { width: 9px; height: 9px; border-radius: 50%; border: 1.8px solid var(--text); background: #fff; }

/* Footer */
footer { border-top: 1px solid var(--text); margin-top: 10px; }
footer .frame { padding-top: 16px; padding-bottom: 40px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
footer .frame > div + div { margin-top: 6px; }
.logo-placeholder { display: inline-block; padding: 5px 10px; border: 1px dashed var(--rule-2); border-radius: 2px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-right: 10px; }

/* About modal */
.about-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: none; z-index: 100; align-items: flex-start; justify-content: center; padding: 60px 24px; overflow-y: auto; }
.about-overlay.active { display: flex; }
.about-modal { background: var(--bg); width: 100%; max-width: 760px; border-radius: 2px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.about-header { padding: 28px 36px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.about-header .kicker { margin-bottom: 8px; }
.about-title { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.about-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-3); padding: 2px 8px; line-height: 1; }
.about-close:hover { color: var(--text); }
.about-toc { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 36px 12px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--rule); }
.about-toc button { background: none; border: none; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.about-toc button:hover, .about-toc button:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.about-body { padding: 8px 36px 36px; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.about-body section { padding-top: 26px; scroll-margin-top: 20px; }
.about-body section + section { margin-top: 8px; border-top: 1px solid var(--rule); }
.about-body h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.about-body h4 { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text); margin: 20px 0 4px; }
.about-body h2 + h4 { margin-top: 0; }
.about-body p + p { margin-top: 10px; }
.about-body strong { color: var(--text); }
.about-body sup { font-family: var(--sans); font-size: 0.62em; line-height: 0; }
.about-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 6px; }
.about-steps li { counter-increment: step; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--bg-2); border-radius: 2px; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.about-steps li::before { content: counter(step); flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: -1px; }
.about-figure { margin: 18px 0 4px; padding: 14px 16px 12px; background: var(--bg-2); border-radius: 2px; }
.about-figure svg { display: block; width: 100%; height: auto; max-width: 560px; }
.about-figure .fig-lb text { font-family: var(--sans); font-size: 11px; fill: var(--text-3); }
.about-figure .fig-lb text.fig-strong { fill: var(--text); font-weight: 600; }
.about-figure figcaption { font-family: var(--sans); font-size: 12px; color: var(--text-3); margin-top: 6px; }
.about-authors { font-size: 17px; color: var(--text); }
.about-affil { list-style: none; margin-top: 8px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--text-3); }
.about-affil sup { margin-right: 3px; }
.about-logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.about-logos img { display: block; height: 32px; width: auto; }
.about-logos a { text-decoration: none; }
@media (max-width: 640px) {
  td.strip, th.strip { min-width: 96px; width: 28%; }
  .about-overlay { padding: 24px 12px; }
  .about-header, .about-body, .about-toc { padding-left: 18px; padding-right: 18px; }
  .about-steps { grid-template-columns: minmax(0, 1fr); }
  .about-title { font-size: 23px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logos */
.footer-logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.footer-logos img { display: block; height: 32px; width: auto; }
footer a, .about-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
footer a:hover, .about-body a:hover { text-decoration-color: currentColor; }
.footer-logos a { text-decoration: none; }


/* Status label inline with the headline sentence */
.status-tag { font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; }
.nowrap { white-space: nowrap; }
/* Dots for countries too small to click on the world map */
.dot { stroke: #93A3BB; stroke-width: 0.6; vector-effect: non-scaling-stroke; cursor: pointer; }
.dot.no-data { fill: var(--nodata); }
.dot.is-hover { stroke: var(--text); stroke-width: 1.4; }
.dot.is-selected { stroke: var(--text); stroke-width: 2.2; }
/* Highest-risk list in the traveler risk card */
.risk-top { margin-top: 10px; font-size: 13px; }
.risk-top th, .risk-top td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule-2); }
.risk-top th { font-size: 10px; padding-top: 0; border-bottom-color: var(--text-3); }
.risk-top th:last-child, .risk-top td:last-child { padding-right: 0; }
.risk-top tr.row-link:hover td { background: #fff; }

/* Compact side panel so it ends level with the map */
.mini-rank li { padding: 3px 0; }
.share-line { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.share-line strong { font-size: 15px; }
#sources-panel { margin-bottom: 0; }

.mini-rank li { cursor: default; }
.mini-rank li:hover { background: none; }

/* Gray card: place and month on one line */
.detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.detail-date { font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* Country search on the traveler risk tab */
.country-control { margin-bottom: 12px; }
#country-search { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 2px; padding: 6px 10px; min-height: 34px; width: 100%; }
#country-search:focus { outline: 2px solid var(--text); outline-offset: 1px; }
/* Source lists: name, interval strip, value on one line */
.mini-rank li { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr) auto; }
.mini-rank .strip-svg { display: block; }
/* Median dot (traveler risk strips and legends) */
.lg-key.dot, .tooltip .tt-key.dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.6px solid var(--text); }
/* Sortable columns */
.sort-btn { background: none; border: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.sort-btn:hover, .sort-btn:focus-visible { color: var(--text); outline: none; text-decoration: underline; text-underline-offset: 3px; }
th.is-sorted { color: var(--text); }
.sort-btn .arrow { display: inline-block; margin-left: 3px; opacity: 0.35; }
th.is-sorted .sort-btn .arrow { opacity: 1; }
.detail-section .risk-top { margin-top: 6px; }
.risk-top tr.is-selected td { font-weight: 600; }
/* Phones: the big tables drop the strip column (the 90% interval is in the numbers) so every column fits */
@media (max-width: 640px) {
  .table-section table { font-size: 13px; }
  .table-section th, .table-section td { padding: 8px 8px 8px 0; }
  .table-section td.strip, .table-section th.strip, #table-legend { display: none; }
  .table-section th.num, .table-section .sort-btn { white-space: normal; }
}