:root{--bg:#02110d;--panel:#06261d;--panel2:#082e23;--line:#156047;--line2:#0d4535;--text:#f5fbf8;--link:#6fe3ff;--link-visited:#d7b8ff;--link-hover:#b7f5ff;--ink:#10130f;--muted:#91b4a6;--green:#25e29c;--red:#ef2639;--orange:#ff681e;--amber:#ffbf2f;--blue:#3a9df7;--purple:#9d34dd;--cyan:#3ad7d0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 32% -10%,#0b3c2d 0,#04130f 33%,#02100d 100%);color:var(--text);font:14px/1.35 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.top{min-height:58px;border-bottom:1px solid var(--line2);display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:7px 16px;background:rgba(2,17,13,.97);position:sticky;top:0;z-index:2000;backdrop-filter:blur(16px)}.logo{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}.globe{width:38px;height:38px;border:2px solid var(--green);border-radius:50%;position:relative;box-shadow:0 0 22px rgba(37,226,156,.2)}.globe:before{content:"";position:absolute;left:7px;right:7px;top:2px;bottom:2px;border-left:1px solid var(--green);border-right:1px solid var(--green);border-radius:50%}.globe:after{content:"";position:absolute;left:3px;right:3px;top:17px;border-top:1px solid var(--green);box-shadow:0 -8px 0 rgba(37,226,156,.55),0 8px 0 rgba(37,226,156,.55)}.brand{font-size:18px;font-weight:850}.tag{font-size:9px;color:#d5ede3}.nav{display:flex;height:100%;align-items:stretch;gap:1px;white-space:nowrap;flex-wrap:wrap;min-width:0}.nav a{color:#e7f4ee;text-decoration:none;padding:19px 10px 16px;border-bottom:2px solid transparent;font-size:12px}.nav a.active,.nav a:hover{background:linear-gradient(180deg,rgba(37,226,156,.05),rgba(37,226,156,.12));border-bottom-color:var(--green);color:#8ff0ca}.top-search{margin-left:auto;min-width:240px;max-width:330px;flex:1}.top-search input{width:100%;background:#09231b;border:1px solid #2c5c49;border-radius:10px;color:#fff;padding:9px 12px;outline:none}.updated{font-size:9px;line-height:1.15;border:1px solid #244f40;border-radius:8px;padding:6px 9px;min-width:125px;margin-left:auto}.live{border:1px solid #187858;color:#62e8b5;background:#06251b;border-radius:8px;padding:8px 11px;font-weight:800}.page{padding:18px 16px 28px}.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#71d9b0;font-weight:800}.page h1{font-size:34px;margin:4px 0 5px;letter-spacing:-.03em}.lead{margin:0;color:#c4d8cf;max-width:880px}.grid{display:grid;gap:10px}.kpis{grid-template-columns:repeat(4,1fr);margin:16px 0}.kpi,.panel{background:linear-gradient(180deg,#07251b,#051b14);border:1px solid #1d654c;border-radius:10px}.kpi{padding:13px}.kpi .label{font-size:10px;color:#86a99a;text-transform:uppercase;letter-spacing:.08em}.kpi strong{display:block;font-size:25px;margin-top:3px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:1px solid #1b5745}.panel-head h2,.panel-head h3{font-size:13px;margin:0}.panel-body{padding:11px}.two{grid-template-columns:1.5fr .8fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.table{width:100%;border-collapse:collapse;font-size:11px}.table th,.table td{padding:8px 9px;border-bottom:1px solid #153f33;text-align:left}.table th{color:#8eaa9e;text-transform:uppercase;font-size:9px;letter-spacing:.06em}.badge{display:inline-block;border-radius:6px;padding:3px 7px;font-weight:850;font-size:9px}/* The level colours these classes used to carry now come from the one risk scale at the end of this file. */.blue{background:#155a8f}.purple{background:#7f2aa7}.check{color:#69e7b7}.warn{color:#ffcc68}.muted{color:var(--muted)}.cardlist{display:grid;gap:8px}.item{border:1px solid #1b5745;background:#08251c;border-radius:8px;padding:10px}.item h3{font-size:13px;margin:0 0 4px}.item p{font-size:10px;color:#a9c1b6;margin:0}.metric{display:flex;justify-content:space-between;gap:10px;margin:7px 0;font-size:10px}.bar{height:6px;background:#15382e;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.tab{border:1px solid #285f4b;background:#0a251d;color:#edf8f3;border-radius:999px;padding:7px 10px;font-size:11px}.tab.active{background:#0d4a38;border-color:#2ed69b}.hero-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin:15px 0}.hero-card{min-height:150px;padding:16px;position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-85px;top:-170px;background:radial-gradient(circle at 30% 70%,rgba(53,164,225,.62),rgba(7,78,80,.52) 35%,transparent 70%)}.hero-card h2{font-size:24px;margin:0 0 6px}.hero-card p{color:#c3d8cf;max-width:620px}.statline{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}.statline b{font-size:18px}.statline span{display:block;font-size:9px;color:#8fb0a2}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.step{border:1px solid #1c6f51;background:#08271e;border-radius:8px;padding:10px}.step b{display:block;font-size:11px}.step span{font-size:9px;color:#91b4a6}.timeline{display:grid;gap:0}.row{display:grid;grid-template-columns:120px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid #153f33;align-items:center}.foot{margin-top:14px;border-top:1px solid #174638;padding-top:10px;color:#91ad9f;font-size:9px;display:flex;justify-content:space-between}.map{width:100%;aspect-ratio:2/1;min-height:300px;max-height:min(70vh,700px);border-radius:8px;overflow:hidden}.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.region{min-height:150px;padding:13px}.region h3{margin:0 0 5px}.region .big{font-size:27px;font-weight:850}.notice{border:1px solid #735c1c;background:#211c0b;color:#e6d7a6;border-radius:8px;padding:10px;font-size:10px}.source{display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid #153f33}.source b{font-size:11px}.source span{font-size:9px;color:#91ad9f}@media(max-width:1150px){.nav a:nth-child(n+7){display:none}.logo{min-width:0}.kpis{grid-template-columns:repeat(2,1fr)}.two,.three,.four,.hero-strip,.region-grid{grid-template-columns:1fr 1fr}}@media(max-width:800px){.nav,.top-search,.updated{display:none}.page{padding:14px 10px}.two,.three,.four,.hero-strip,.region-grid,.kpis{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}.live{margin-left:0}.page h1{font-size:28px}.map{max-height:60vh}}

/* Links. Without an author rule every bare <a> falls through to the browser's
   default #0000EE (and #551A8B once visited), which lands at 1.3:1 and 1.1:1 on
   these dark green surfaces -- effectively invisible. Both link colours below
   clear 7:1 on every surface the site paints, and differ from each other and
   from the green accent by hue as well as luminance. */
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:visited{color:var(--link-visited)}
a:hover{color:var(--link-hover)}
a:focus-visible{color:var(--link-hover);outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
/* Amber and orange badges are too light for white text (3.1:1 and 2.7:1);
   dark ink on the same background reads at 6:1 and keeps the colour coding. */
.badge.high,.badge.moderate,.risk.high,.risk.moderate,.badge.watch,.badge.routine,.badge.neutral,.risk.watch,.risk.routine,.risk.neutral{color:var(--ink)}
/* Leaflet paints its own chrome inside the map, on its own surfaces. Its
   attribution pill is near-white, where the link colours above are 1.7:1 and
   1.2:1, so that chrome keeps Leaflet's blue (4.9:1 there). The popups are
   painted dark by this app, where that same blue is only 3.3:1, so those take
   the site link colour instead. Both outrank `.leaflet-container a` whichever
   stylesheet the page happens to load first. */
.leaflet-container .leaflet-control-attribution a,.leaflet-container .leaflet-control-attribution a:visited,.leaflet-container .leaflet-control-attribution a:hover,
.leaflet-container .leaflet-control-layers a,.leaflet-container .leaflet-control-layers a:visited,.leaflet-container .leaflet-control-layers a:hover{color:#0078a8}
.leaflet-container .leaflet-popup-content a,.leaflet-container .leaflet-popup-content a:visited{color:var(--link)}
.leaflet-container .leaflet-popup-content a:hover{color:var(--link-hover)}
/* Anchors used as cards, chips and phone numbers are not inline links. With no
   colour or text-decoration of their own they take the browser's link treatment,
   which rendered whole cards blue and underlined -- and purple once visited, which
   is what a reader saw after clicking through. The `a.` prefix confines these to
   the anchor itself, leaving the text inside it alone. */
a.event-card,a.card,a.item,a.intelcard{color:var(--text);text-decoration:none}
a.event-card:hover h3,a.card:hover h3,a.item:hover h3,a.intelcard:hover h3{color:var(--link)}
a.intelphone{color:var(--link);text-decoration:none;font-weight:800}
a.btn,a.viewall,a.live,a.logo,a.action,a.countryLink,a.onward{text-decoration:none}

/* Forecast timeline: each outlook laid across the days it actually covers. */
.tl{overflow-x:auto;padding:4px 2px 10px}
.tl-head,.tl-row{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:center}
.tl-head{position:sticky;top:0;z-index:2;padding-bottom:6px;background:var(--panel)}
.tl-head .tl-track{display:flex;position:relative;min-width:520px}
.tl-day{flex:1 1 0;text-align:center;font-size:10px;line-height:1.25;color:#9ec7b6;border-left:1px solid #14432f;padding:2px 0}
.tl-day b{display:block;font-size:13px;color:var(--text)}
.tl-day.is-today{background:#0c3527;border-radius:6px 6px 0 0}
.tl-day.is-today b{color:#7ef0c0}
.tl-group{margin-top:12px}
.tl-group-name{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7fd8b4;margin:0 0 5px 2px}
.tl-row{margin-bottom:5px}
.tl-row .tl-label{display:flex;align-items:center;gap:7px;min-width:0;text-decoration:none;color:var(--text)}
.tl-where{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-row .tl-track{position:relative;height:26px;min-width:520px;background:#082a20;border-radius:6px;overflow:hidden}
.tl-bar{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;padding:0 8px;border-radius:5px;
  font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-decoration:none;color:var(--ink);
  background:#5fd3a6;border:1px solid rgba(0,0,0,.25)}
/* Timeline bars are on the one risk scale too. This file used to give them a
   fourth palette, in which a green level was drawn in cyan and a red one in
   salmon - the same level reading calmer here than in the table beside it. */
.tl-bar.high,.tl-bar.red{background:var(--risk-high);color:var(--risk-ink-dark)}
.tl-bar.moderate,.tl-bar.orange{background:var(--risk-moderate);color:var(--risk-ink-dark)}
.tl-bar.watch{background:var(--risk-watch);color:var(--risk-ink-dark)}
.tl-bar.low,.tl-bar.green{background:var(--risk-low);color:var(--risk-ink-dark)}
.tl-bar.severe{background:var(--risk-severe);color:var(--risk-ink-light)}
.tl-bar.extreme{background:var(--risk-extreme);color:var(--risk-ink-light)}
.tl-bar.is-live{box-shadow:0 0 0 2px #7ef0c0}
.tl-bar:hover{filter:brightness(1.12)}
.tl-bar span{overflow:hidden;text-overflow:ellipsis}
.tl-now{position:absolute;top:0;bottom:0;width:2px;background:#7ef0c0;pointer-events:none}
.tl-note{margin-top:12px;font-size:12px;line-height:1.55}
@media(max-width:700px){.tl-head,.tl-row{grid-template-columns:118px 1fr;gap:7px}.tl-where{font-size:11px}}
.sev{display:inline-block;border-radius:999px;padding:2px 8px;font-weight:800;font-size:9px;border:1px solid;letter-spacing:.04em}/* Severity pills take their colours from the one risk scale below. */.hazdef{border:1px solid #1b5745;background:#08251c;border-radius:8px;padding:10px;margin:8px 0}.hazdef b{display:block;font-size:11px;margin-bottom:3px}.hazdef p{margin:0 0 6px;font-size:10px;color:#b6cdc2}.hazdef dl{display:grid;grid-template-columns:120px 1fr;gap:4px 10px;margin:0;font-size:10px}.hazdef dt{color:#8fb0a2}.hazdef dd{margin:0;color:#cfe3da}
.hazard-observed span{color:#9fb8ad}.hazard-observed b{opacity:.92}.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:8px 0}.keyfact{border:1px solid #1b5745;background:#08251c;border-radius:8px;padding:8px 9px}.keyfact .kf-l{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#8fb0a2}.keyfact .kf-v{display:block;font-size:14px;font-weight:800;margin-top:2px;color:#eaf7f1}.keyfact.kf-missing .kf-v{font-size:11px;font-weight:600;color:#9fb8ad}
/* Present to a screen reader, absent to the eye: a label that names a
   control whose purpose is already obvious from its placeholder. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A message box with nothing in it is an empty amber bar. It was on
   Personal Risk for every reader whose saved places all had a country. */
.notice:empty,.stale:empty{display:none}
.sitefoot{border-top:1px solid #174638;margin-top:18px;padding:16px;background:#03140f;color:#9fbcb0;font-size:12px}.sitefoot nav{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px}.sitefoot nav a{color:#8ff0ca;text-decoration:none}.sitefoot nav a:hover{text-decoration:underline}.sitefoot p{margin:0;max-width:70ch}
/* Five destinations fit a phone, so the menu stays: as a tab bar along the bottom, where a thumb reaches it, instead of disappearing below this width. */@media(max-width:800px){header .nav{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:2500;height:auto;flex-wrap:nowrap;gap:0;background:rgba(2,17,13,.98);border-top:1px solid #174638;padding:0 0 env(safe-area-inset-bottom);box-shadow:0 -6px 18px rgba(0,0,0,.35)}header .nav a{flex:1 1 0;min-width:0;display:block!important;text-align:center;white-space:normal;line-height:1.15;padding:10px 2px 9px;font-size:11px;border-bottom:0;border-top:2px solid transparent;background:none}header .nav a.active{border-top-color:#25e29c;color:#8ff0ca}body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}}
/* A blurred backdrop makes the header the box a fixed child is placed in, which pinned the tab bar under the header instead of to the screen. */@media(max-width:800px){.top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}