: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}*{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.4 Inter,system-ui,-apple-system,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 14px;padding:7px 16px;background:rgba(2,17,13,.97);position:sticky;top:0;z-index:2000}.logo{display:flex;gap:9px;align-items:center;color:#fff;text-decoration:none;min-width:0;flex:0 1 auto}.globe{font-size:32px;color:var(--green)}.logo b{font-size:18px}.logo small{display:block;font-size:9px;color:#cbe5da}.top nav{display:flex;height:100%;align-items:stretch}.top nav a{color:#e6f4ee;text-decoration:none;padding:19px 10px 16px;border-bottom:2px solid transparent;font-size:12px}.top nav a.active,.top nav a:hover{color:#8ff0ca;border-bottom-color:var(--green);background:rgba(37,226,156,.08)}.live{color:#65e7b6;text-decoration:none;border:1px solid #187858;background:#06251b;padding:8px 11px;border-radius:8px;font-weight:800}.hero{padding:22px 18px 18px;border-bottom:1px solid var(--line2);background:linear-gradient(90deg,#03130f,#073328 62%,#041a14)}.hero h1{font-size:34px;margin:0 0 4px}.hero p{margin:0;color:#cbe0d7}.wrap{max-width:1500px;margin:auto;padding:14px 16px 30px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.input,.select,.btn{border:1px solid #285f4b;background:#09251d;color:#eef8f3;border-radius:8px;padding:10px 12px}.input{min-width:280px;flex:1}.btn{cursor:pointer}.panel{background:linear-gradient(180deg,#07251b,#051b14);border:1px solid #1d654c;border-radius:10px;overflow:hidden;margin-bottom:10px}.ph{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:10px 12px;border-bottom:1px solid #1b5745}.ph h2,.ph h3{font-size:13px;margin:0;flex:1 1 auto;min-width:min(100%,170px)}.viewall{color:#eaf7f0;text-decoration:none;font-size:11px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{border:1px solid #285c49;background:#09231b;border-radius:9px;padding:12px}.card b{font-size:15px}.muted{color:var(--muted)}.big{font-size:27px;font-weight:850}.table{width:100%;border-collapse:collapse;font-size:11px}.table th,.table td{padding:8px 10px;border-bottom:1px solid #153f33;text-align:left}.table th{color:#8eaa9e;text-transform:uppercase;font-size:9px;letter-spacing:.06em}.table tr[data-href]{cursor:pointer}.table tr[data-href]:hover{background:#0b3125}.badge{display:inline-block;border-radius:7px;padding:3px 7px;font-weight:800;font-size:9px}/* The level colours these classes used to carry now come from the one risk scale at the end of this file. */.source{font-size:9px;border:1px solid #2b624e;border-radius:999px;padding:2px 6px;color:#9fd0bb}
/* Whether a source answered, in the badge it already has. Colour is never
   the only carrier: each badge says what it means in words. */
.source.status-ok{border-color:#25e29c;color:#8ff0cb}.source.status-warn{border-color:#e9b949;color:#f2d894}.source.status-bad{border-color:#ef5261;color:#ffa7b0}.source.status-muted{border-color:#9aa7a2;color:#c2cfca}.statusbar{display:flex;gap:10px;align-items:center;color:#a8c6b9;font-size:10px}.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px}.event-card{border:1px solid #285c49;background:#09231b;border-radius:9px;padding:11px;cursor:pointer}.event-card:hover{border-color:#35d79a}.event-card h3{font-size:13px;margin:7px 0 4px}.event-card p{font-size:10px;color:#abc7bb}.map{width:100%;aspect-ratio:2/1;min-height:300px;max-height:min(70vh,700px)}.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px}.detail{padding:14px}.detail dl{display:grid;grid-template-columns:160px 1fr;gap:8px 14px}.detail dt{color:#89ab9d}.detail dd{margin:0}.notice{padding:10px 12px;background:#17160e;border:1px solid #66541f;color:#d7cda5;border-radius:9px;margin:10px 0}.ok{color:#62e8b5}.warn{color:#ffc25b}#pndTimezone{margin-left:auto}.foot{border-top:1px solid #174638;margin-top:15px;padding-top:10px;color:#91b4a6;font-size:10px}.navcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.navcards a{text-decoration:none;color:#fff}.navcards .card{min-height:110px}.navcards .card:hover{border-color:var(--green)}.cols>*,.split>*,.grid>*,.event-grid>*,.navcards>*,.detailGrid>*,.sectionGrid>*,.related>*,.contextCards>*,.miniGrid>*,.utility-grid>*,.stats>*,.alertGrid>*{min-width:0}.map,.mapTall{min-width:0}@media(max-width:1100px){.top nav a:nth-child(n+7){display:none}.grid{grid-template-columns:repeat(2,1fr)}.event-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.logo{min-width:0}}@media(max-width:760px){.top nav{display:none}.logo{min-width:0}.grid,.event-grid,.navcards{grid-template-columns:1fr}.hero h1{font-size:28px}.wrap{padding:10px}.input{min-width:100%}.detail dl{grid-template-columns:1fr}.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}
/* Emergency utility panels */
.utility-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.action-panel{border-left:4px solid #ffb15e}.provenance{font-size:10px;font-weight:900;letter-spacing:.06em;border:1px solid #39715d;border-radius:999px;padding:4px 8px;display:inline-block}.stale{border:1px solid #a96e28;background:#2a1b09;padding:10px;border-radius:8px}@media(max-width:800px){.utility-grid{grid-template-columns:1fr 1fr}}@media(max-width:500px){.utility-grid{grid-template-columns:1fr}}
.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}

/* ------------------------------------------------ the outlook table (12)
 *
 * Ten columns on a desktop and the same rows as stacked cards on a phone.
 * A table that scrolls sideways is a table nobody reads, so below 760px the
 * header row goes, each row becomes a card, and every cell carries its own
 * label. Five columns fold away there - they are on the page the row opens -
 * and two appear that only make sense folded: the window as one line, and
 * whether it is still open.
 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tablewrap{overflow-x:auto;padding:0 2px}
.ftable{font-size:11px;table-layout:fixed;width:100%}
.ftable th,.ftable td{overflow-wrap:anywhere}
.ftable td b{font-size:12px;font-weight:800}
.ftable .clamp{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* The provenance badge is styled once, in risk.css, beside the scale it is deliberately not on. */
.ftable .only-narrow{display:none}
.toolbar-sticky{position:sticky;top:58px;z-index:5;background:rgba(2,17,13,.97);padding:8px 0;margin-bottom:0}
@media(max-width:760px){
  .tablewrap{overflow-x:visible}
  .ftable thead{display:none}
  .ftable,.ftable tbody,.ftable tr,.ftable td{display:block;width:100%}
  .ftable tr{border:1px solid #1b5745;border-radius:9px;background:#08211a;margin:0 0 8px;padding:8px 0}
  .ftable td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:3px 11px;text-align:right}
  .ftable td::before{content:attr(data-label);color:#8eaa9e;font-size:9px;letter-spacing:.06em;text-transform:uppercase;text-align:left;flex:0 0 auto}
  .ftable td[data-label=Starts],.ftable td[data-label=Ends],.ftable td[data-label=Provenance],
  .ftable td[data-label=Source],.ftable td[data-label=Updated]{display:none}
  .ftable td.only-narrow{display:flex}
  .toolbar-sticky{position:static;padding:0}
}
/* Column widths, on a desktop only - the phone fold above makes every cell a
   full-width line. Shared out evenly, ten columns gave the outlook's name a
   tenth of the row and it broke after every few letters; now the name takes
   whatever the fixed columns leave, and a date or a hazard name takes what it
   needs. The badge column fits the longest level, "Extreme", on one line. */
@media(min-width:761px){
  .ftable .c-risk{width:104px}
  .ftable .c-geography{width:14%}
  .ftable .c-hazard,.ftable .c-starts,.ftable .c-ends,.ftable .c-class,.ftable .c-provenance{width:8%}
  .ftable .c-source{width:11%}
  .ftable .c-updated{width:6%}
  .ftable th,.ftable td{vertical-align:top}
}
/* An observed alert beside the forecasts: its level, its name, what and
   where, and who reported it - a link to its own page, not a table row with
   a window and a class it does not have. */
.obsList{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;padding:10px}
.obsrow{display:flex;flex-direction:column;gap:5px;padding:10px 11px;border:1px solid #1d654c;border-radius:9px;background:#08251c;color:inherit;text-decoration:none}
.obsrow:hover{background:#0b3125}.obsrow b{font-size:13px}.obsrow .muted{font-size:12px}
/* 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:760px){.top 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)}.top 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}.top nav a.active{border-top-color:#25e29c;color:#8ff0ca}body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}}
/* Figures in a hero read as one line - "14 forecasts · 11 high priority" - not as six boxes that fill a phone screen before the first record. */.stats.statline{display:flex!important;flex-wrap:wrap;gap:4px 18px;margin-top:10px}.statline .stat{display:inline-flex;flex-direction:row-reverse;align-items:baseline;gap:6px;border:0;background:none;padding:0;min-height:0}.statline .stat.lead{flex-direction:row}.statline .stat strong{font-size:17px;line-height:1.3}.statline .stat .muted{text-transform:lowercase;font-size:13px;letter-spacing:0}
/* 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:760px){.top{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* Place picker (place-search.js): every match, with its level, to choose from */
.placechoices{margin:8px 12px 10px;display:grid;gap:6px}.placechoices .pc-head{margin:0;font-weight:700}
.pc-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;background:#07251b;border:1px solid #1d654c;border-radius:10px;padding:9px 12px;color:#eafff6;cursor:pointer;font:inherit}
.pc-item:hover,.pc-item:focus-visible{border-color:#25e29c;outline:none}.pc-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
.pc-level{font-size:11px;color:#9fe9c8;border:1px solid #2d7a5d;border-radius:999px;padding:1px 8px;align-self:start;white-space:nowrap}
.pc-full{grid-column:1/-1;font-size:11px;color:#9db9ad;overflow-wrap:anywhere}
.placeanswer{margin:8px 0 0;max-width:900px;line-height:1.5}.placeanswer .risk{margin-right:6px;vertical-align:middle}