/* osir.co.uk: Global Situation Monitor — wall / war-room display. Dark, edge-to-edge, fits one screen, no page scroll. */
.wl-body {
  --wl-bg: #080b12; --wl-panel: #0f1420; --wl-panel2: #0b1019; --wl-border: #1d2838;
  --wl-text: #e7eef8; --wl-muted: #8a97a9; --wl-accent: #38bdf8;
  margin: 0; padding: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden;
  background: var(--wl-bg); color: var(--wl-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wall { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; }

/* ---- top bar ---- */
.wl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 16px; background: linear-gradient(180deg, #0f1726, #0b1019); border-bottom: 1px solid var(--wl-border); }
/* Links that look like plain text (brand line, sponsor): same colour, no underline; a focus ring only for keyboard users. Kept above the
   brand rules so a class's own colour (the muted .wl-brand-sub) still wins over "inherit". */
.wl-plain { color: inherit; text-decoration: none; }   /* no :hover/:visited rules: they would outrank the muted colour */
.wl-plain:focus { outline: none; }
.wl-plain:focus-visible { outline: 1px solid var(--wl-accent); outline-offset: 2px; border-radius: 2px; }
.wl-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wl-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; align-self: center;
  box-shadow: 0 0 10px #22c55e; animation: wl-pulse 2.4s ease-in-out infinite; }
@keyframes wl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wl-brand-name { font-weight: 800; letter-spacing: .06em; font-size: clamp(14px, 1.5vw, 22px); }
.wl-brand-sub { color: var(--wl-muted); font-size: clamp(10px, .8vw, 13px); letter-spacing: .08em; text-transform: uppercase; }
.wl-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wl-lv { font-weight: 800; letter-spacing: .08em; font-size: clamp(13px, 1.25vw, 19px); padding: 4px 14px; border-radius: 6px; border: 1px solid; }
.wl-lv-calm { color: #22c55e; border-color: #1c7a3f; background: rgba(34,197,94,.1); }
.wl-lv-elev { color: #eab308; border-color: #8a6d12; background: rgba(234,179,8,.1); }
.wl-lv-high { color: #f97316; border-color: #9a4a15; background: rgba(249,115,22,.12); }
.wl-lv-crit { color: #f05252; border-color: #9b2c2c; background: rgba(240,82,82,.14); animation: wl-flash 1.4s steps(1) infinite; }
@keyframes wl-flash { 50% { background: rgba(240,82,82,.3); } }
.wl-tiers { display: flex; gap: 6px; }
.wl-tier { font-size: clamp(10px, .85vw, 13px); font-weight: 700; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--wl-border); color: var(--wl-muted); }
.wl-tier.wl-t1 { color: #f05252; border-color: #5a2020; } .wl-tier.wl-t2 { color: #f97316; border-color: #5a3418; } .wl-tier.wl-t3 { color: #eab308; border-color: #55470f; }
.wl-space { display: flex; align-items: center; gap: 6px; font-size: clamp(10px, .85vw, 13px); color: var(--wl-muted); }
.wl-space-dot { width: 8px; height: 8px; border-radius: 50%; }
.wl-clockwrap { text-align: right; }
.wl-clock { font-size: clamp(18px, 2vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.wl-clock-sub { font-size: clamp(9px, .75vw, 12px); color: var(--wl-muted); }

/* ---- main grid ---- */
.wl-main { display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(0, 2.3fr) minmax(280px, 1.2fr);
  gap: 10px; padding: 10px; min-height: 0; }
.wl-col { background: var(--wl-panel); border: 1px solid var(--wl-border); border-radius: 10px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wl-h { margin: 0; padding: 9px 13px; font-size: clamp(11px, 1vw, 14px); text-transform: uppercase; letter-spacing: .06em;
  color: var(--wl-accent); border-bottom: 1px solid var(--wl-border); background: var(--wl-panel2); }
.wl-h-c { color: var(--wl-muted); font-weight: 600; }

/* events */
.wl-list { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: #2a3647 transparent; }
.wl-list::-webkit-scrollbar { width: 7px; } .wl-list::-webkit-scrollbar-thumb { background: #2a3647; border-radius: 4px; }
.wl-empty { color: var(--wl-muted); padding: 14px; font-size: 13px; }
.wl-ev { display: flex; gap: 9px; padding: 8px 9px; border-radius: 8px; border-left: 3px solid #39465a; margin-bottom: 6px; background: var(--wl-panel2); }
.wl-ev.wl-t1 { border-left-color: #f05252; } .wl-ev.wl-t2 { border-left-color: #f97316; } .wl-ev.wl-t3 { border-left-color: #eab308; }
.wl-ev-ic { font-size: 18px; line-height: 1.2; }
.wl-ev-body { min-width: 0; flex: 1; }
.wl-ev-top { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; margin-bottom: 2px; }
.wl-ev-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #cbd5e1; }
.wl-ev-tier.wl-t1 { color: #f05252; } .wl-ev-tier.wl-t2 { color: #f97316; } .wl-ev-tier.wl-t3 { color: #eab308; }
.wl-ev-unc { font-size: 10px; color: #0b1019; background: #d9a706; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.wl-ev-when { margin-left: auto; font-size: 11px; color: var(--wl-muted); white-space: nowrap; }
.wl-ev-title { font-size: clamp(13px, 1.05vw, 15px); line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wl-ev-meta { font-size: 11px; color: var(--wl-muted); margin-top: 3px; }

/* map column: map on top (landscape) + internet-outage panel below */
.wl-mapcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.wl-mapwrap2 { position: relative; flex: 1; min-height: 0; border: 1px solid var(--wl-border); border-radius: 10px; overflow: hidden; background: #0a1420; }
.wl-map { position: absolute; inset: 0; width: 100%; height: 100%; background: #0a1420; }   /* dark base so poles/sea gaps aren't white */

/* right column */
.wl-rightcol { background: transparent; border: none; gap: 10px; overflow: hidden; }
.wl-uk, .wl-trend { background: var(--wl-panel); border: 1px solid var(--wl-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.wl-uk { flex: none; }
.wl-trend { flex: 1; min-height: 0; }
.wl-uk-warn { margin: 8px 10px 0; padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 700;
  color: #f05252; background: rgba(240,82,82,.12); border: 1px solid rgba(240,82,82,.4); }
.wl-gs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; }
.wl-g { background: var(--wl-panel2); border: 1px solid var(--wl-border); border-radius: 8px; padding: 8px 10px; }
.wl-g-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--wl-muted); font-weight: 700; }
.wl-g-row { display: flex; align-items: baseline; gap: 8px; margin: 1px 0 5px; }
.wl-g-val { font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wl-g-lvl { font-size: 11px; font-weight: 700; color: var(--wl-muted); }
.wl-g-bar { height: 7px; border-radius: 99px; background: #1c2635; overflow: hidden; }
.wl-g-fill { height: 100%; border-radius: 99px; }
.wl-uk-facts { padding: 0 10px 4px; }
.wl-uk-fact { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; max-width: 100%; }
.wl-uk-fact-l { font-size: 12px; color: #c3cedd; width: 82px; flex: none; }
.wl-uk-fact-bar { flex: 1 1 0; min-width: 24px; height: 8px; border-radius: 99px; background: #1c2635; overflow: hidden; }
.wl-uk-fact-fill { display: block; height: 100%; border-radius: 99px; }
.wl-uk-fact-p { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; text-align: right; color: #c3cedd; min-width: 26px; }
.wl-uk-foot { padding: 6px 10px 9px; font-size: 11px; color: var(--wl-muted); }

/* trending panels — 2×2 (War, News, Search, Social); 1px gap shows the panel background as separator lines */
.wl-tp-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 1px;
  background: var(--wl-border); overflow: hidden; flex: 1; min-height: 0; }
.wl-tp { padding: 6px 11px; overflow: hidden; background: var(--wl-panel); min-height: 0; }
.wl-tp-h { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--wl-accent); font-weight: 700; margin-bottom: 3px; }
.wl-tp-i { font-size: clamp(12px, .9vw, 13.5px); line-height: 1.25; color: #d1dae6; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 11px; position: relative; }
.wl-tp-i::before { content: '›'; position: absolute; left: 0; color: var(--wl-muted); }
.wl-tp-empty { color: var(--wl-muted); font-size: 12px; }

/* ticker */
.wl-ticker { overflow: hidden; white-space: nowrap; background: #0b1019; border-top: 1px solid var(--wl-border); height: 34px; display: flex; align-items: center; }
.wl-ticker-track { display: inline-flex; align-items: center; gap: 10px; padding-left: 100%; animation: wl-marquee 60s linear infinite; }
@keyframes wl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wl-tk-i { font-size: 14px; color: #cdd7e4; }
.wl-tk-sep { color: var(--wl-accent); font-size: 9px; }
.wl-ticker:hover .wl-ticker-track { animation-play-state: paused; }

/* narrow screens: stack so it still works if opened on a laptop/tablet */
@media (max-width: 900px) {
  .wl-main { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); overflow-y: auto; }
  .wall { grid-template-columns: minmax(0, 1fr); }   /* stop the widest unwrapped line setting the page width */
  .wl-mapwrap2 { flex: none; height: 62vh; min-height: 300px; }   /* stacked layout: give the map a real height */
  .wall { height: auto; min-height: 100dvh; }
  .wl-body { overflow: auto; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-brand-dot, .wl-lv-crit, .wl-ticker-track { animation: none; }
}

/* full-screen toggle button */
.wl-fs { background: var(--wl-panel2); border: 1px solid var(--wl-border); color: var(--wl-muted); border-radius: 7px;
  width: 36px; height: 36px; font-size: 17px; cursor: pointer; line-height: 1; flex: none; }
.wl-fs:hover { color: var(--wl-text); border-color: var(--wl-accent); }

/* Layers toggle (wall) */
.wl-layers-wrap { position: absolute; top: 8px; right: 8px; z-index: 20; }
.wl-layers-btn { background: rgba(8,11,18,.8); border: 1px solid var(--wl-border); color: var(--wl-text);
  border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(3px); }
.wl-layers-btn:hover { border-color: var(--wl-accent); }
.wl-layers-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
  background: rgb(10,14,22); border: 1px solid var(--wl-border); border-radius: 9px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); backdrop-filter: blur(4px); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .wl-layers-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 72vh; z-index: 1000; }
  .wl-layers-panel .ml-row { white-space: normal; padding: 8px 4px; font-size: 14px; }
}
.wl-layers-panel .ml-row { color: var(--wl-text); }

/* Internet-outage panel (wall, under the map) */
.wl-net { flex: none; max-height: 30%; background: var(--wl-panel); border: 1px solid var(--wl-border); border-radius: 10px;
  padding: 8px 12px; overflow: hidden; display: flex; flex-direction: column; }
.wl-net-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex: none; }
.wl-net-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--wl-accent); font-weight: 700; }
.wl-net-c { font-size: 11px; color: var(--wl-muted); margin-left: auto; }
.wl-net-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wl-net-list { display: flex; flex-wrap: wrap; gap: 4px 14px; overflow: hidden; }
.wl-net-i { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #d1dae6; }
.wl-net-i .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wl-net-i .m { color: var(--wl-muted); font-size: 11px; }
.wl-net-ok { font-size: 12px; color: var(--wl-muted); }
/* Internet outages + financial indicators share the strip under the map */
.wl-netrow { flex: none; display: flex; flex-direction: column; gap: 8px; max-height: 42%; min-height: 0; }   /* outages, then finance, both the map's width */
.wl-netrow .wl-net { max-height: none; overflow: hidden; min-width: 0; }
.wl-fin > * { flex: none; }
.wl-fin .wl-net-head { flex-wrap: nowrap; min-width: 0; }
.wl-fin .wl-net-h { white-space: nowrap; }
.wl-fin-st { display: flex; gap: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.wl-fin .wl-net-c { white-space: nowrap; }
.wl-fin-risk { font-size: 12px; color: #e5edf7; margin-bottom: 5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wl-fin-risk-k { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fbbf24; border: 1px solid rgba(251,191,36,.5); border-radius: 4px; padding: 0 4px; margin-right: 6px; vertical-align: 1px; }
.wl-fin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.wl-fin-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto auto; gap: 1px 9px; font-size: 12px; align-items: baseline; }
@media (max-width: 1400px) { .wl-fin-cols { grid-template-columns: minmax(0, 1fr); } .wl-fin-cols .wl-fin-grid + .wl-fin-grid .wl-fin-th { display: none; } }
.wl-fin-th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--wl-muted); text-align: right; }
.wl-fin-th:first-child { text-align: left; }
.wl-fin-n { color: #d1dae6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 92px; }
.wl-fin-ar { display: inline-block; width: 13px; font-size: 9px; }
.wl-fin-v { color: #f1f5f9; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wl-fin-p { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-size: 11.5px; }
.wl-fin .tone-good { color: #4ade80; } .wl-fin .tone-bad { color: #f87171; } .wl-fin .tone-neutral { color: #cbd5e1; } .wl-fin .tone-flat { color: var(--wl-muted); }
.wl-fin-sum { font-size: 11.5px; color: var(--wl-muted); margin-top: 5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 900px) { .wl-netrow { max-height: none; } }
@media (max-width: 640px) { .wl-fin-cols { grid-template-columns: minmax(0, 1fr); } }

/* aircraft alert chip (wall) */
.wl-air.crit { color: #f05252; font-weight: 800; }

.wl-sound.on, .wl-focus.on { color: var(--wl-accent); border-color: var(--wl-accent); }
.wl-focus.focusing { color: #f59e0b; border-color: #f59e0b; }

/* Outlook strip (wall) — explicit grid rows so a hidden strip doesn't shift the map */
.wall { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.wl-top { grid-row: 1; }
.wl-chips { grid-row: 2; }
.wl-outlook { grid-row: 3; }
.wl-main { grid-row: 4; }
.wl-ticker { grid-row: 5; }
.wl-outlook { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 16px;
  background: rgba(240,82,82,.1); border-bottom: 1px solid var(--wl-border); overflow: hidden; }
.wl-outlook-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--wl-accent); flex: none; }
.wl-outlook-i { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e7eef8; white-space: nowrap; }
.wl-outlook-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* outlook scope tags (wall) */
.wl-outlook-scope { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; margin-right: 2px; }
.wl-outlook-scope.scope-UK { background: rgba(56,189,248,.18); color: #7dd3fc; }
.wl-outlook-scope.scope-Global { background: rgba(249,115,22,.2); color: #fb923c; }

/* Wall display sponsor credit (bottom-left of active events) */
.wl-sponsor { flex: none; padding: 8px 10px 2px; color: var(--wl-muted); font-size: clamp(10px, .8vw, 13px); letter-spacing: .08em; text-transform: uppercase; }

/* "What's new" highlighting — fresh (< 5 min) vs recent (< 30 min). Sky-blue, never a severity colour. */
.wl-ev.is-fresh { background: linear-gradient(0deg, rgba(56,189,248,.13), rgba(56,189,248,.13)), var(--wl-panel2);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.6); animation: wl-new-glow 1.6s ease-in-out 2; }
.wl-ev.is-recent { background: linear-gradient(0deg, rgba(56,189,248,.05), rgba(56,189,248,.05)), var(--wl-panel2);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.22); }
.wl-new { font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; }
.wl-new-fresh { background: #0ea5e9; color: #04131d; }
.wl-new-recent { background: rgba(56,189,248,.16); color: #7dd3fc; }
/* trending headlines new in the last 30 min: light yellow, just off the normal near-white */
.wl-tp-i.is-fresh, .wl-tp-i.is-recent { color: #fdf0b8; }
.wl-tp-i.is-fresh::before, .wl-tp-i.is-recent::before { color: #e8c86a; }
@keyframes wl-new-glow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(56,189,248,.6); } 50% { box-shadow: inset 0 0 0 2px rgba(56,189,248,.9); } }
@media (prefers-reduced-motion: reduce) { .wl-ev.is-fresh { animation: none; } }
.wl-ev-cc { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(148,163,184,.16); color: #cbd5e1; }
.wl-ev-cc-uk { background: #000; color: #fff; box-shadow: inset 0 0 0 1.5px #facc15; }

/* Phones: let the top bar, status chips and outlook wrap instead of widening the page. */
@media (max-width: 640px) {
  .wl-top { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .wl-status { justify-content: flex-start; min-width: 0; }
  .wl-space { white-space: normal; }
  .wl-clockwrap { text-align: left; }
  .wl-outlook { padding: 6px 12px; gap: 6px 12px; }
  .wl-outlook-i { white-space: normal; }
}

/* "Most important now" block above the wall map */
.wl-topstory { flex: none; background: var(--wl-panel); border: 1px solid var(--wl-border); border-left: 4px solid #f97316; border-radius: 10px; padding: 8px 12px; }
.wl-topstory.lv-critical { border-left-color: #f05252; background: linear-gradient(90deg, rgba(240,82,82,.14), var(--wl-panel) 60%); }
.wl-topstory.lv-high { border-left-color: #f97316; background: linear-gradient(90deg, rgba(249,115,22,.12), var(--wl-panel) 60%); }
.wl-topstory.lv-elevated { border-left-color: #eab308; }
.wl-topstory.is-calm { border-left-color: #22c55e; }
.wl-ts-hl { font-size: clamp(14px, 1.15vw, 19px); font-weight: 800; line-height: 1.3; color: var(--wl-text); }
.wl-ts-why { font-size: clamp(11px, .85vw, 14px); color: #c3cedc; margin-top: 3px; line-height: 1.35; }
.wl-ts-calm { font-size: 13px; color: var(--wl-muted); }
.wl-topstory[hidden] { display: none; }

/* Bottom-of-map stack: the aircraft distress block (only when an aircraft is squawking) */
.wl-mapbottom { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.wl-mapbottom > * { pointer-events: auto; }
.wl-airalert { background: rgba(28,8,10,.88); border: 1px solid #f97316; border-left: 4px solid #f97316; border-radius: 8px; padding: 8px 11px;
  display: flex; gap: 9px; align-items: flex-start; backdrop-filter: blur(3px); }
.wl-airalert.is-crit { border-color: #f05252; border-left-color: #f05252; animation: wl-air-pulse 1.6s ease-in-out infinite; }
@keyframes wl-air-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,82,82,0); } 50% { box-shadow: 0 0 0 4px rgba(240,82,82,.35); } }
@media (prefers-reduced-motion: reduce) { .wl-airalert.is-crit { animation: none; } }
.wl-airalert[hidden] { display: none; }
.wl-airalert-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #dc2626; padding: 2px 7px; border-radius: 4px; flex: none; margin-top: 1px; white-space: nowrap; }
.wl-airalert-rows { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wl-airalert-row { font-size: clamp(12px, 1vw, 14px); line-height: 1.35; color: #f1e4e4; }
.wl-airalert-row strong { color: #fff; }
.wl-airalert-sq { color: #fca5a5; font-weight: 700; }
.wl-airalert-m { color: #cbb7b7; }

/* Top bar: title, level and clock on one line; the status chips sit in their own strip below. */
.wl-brand { flex: none; }
.wl-brand-name, .wl-brand-sub { white-space: nowrap; }
.wl-status { flex: 1 1 auto; min-width: 0; }
.wl-clockwrap { flex: none; white-space: nowrap; }
.wl-top > .wl-fs { flex: none; }
.wl-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; padding: 5px 16px;
  background: var(--wl-panel2); border-bottom: 1px solid var(--wl-border); }
.wl-chips:empty { display: none; }
.wl-chips .wl-space { white-space: nowrap; }
@media (max-width: 1100px) { .wl-brand-sub { display: none; } }
@media (max-width: 640px) {
  .wl-brand { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
  .wl-brand-sub { display: block; flex-basis: 100%; box-sizing: border-box; padding-left: 20px; }
  .wl-brand-name { font-size: 15px; }
  .wl-chips { padding: 5px 12px; gap: 4px 12px; }
  .wl-chips .wl-space { white-space: normal; }
}

/* Breaking lead stories (top of the events column) and resolved outages */
.wl-breaking { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 0; }
.wl-bk { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 7px; text-decoration: none; color: var(--wl-text);
  background: linear-gradient(90deg, rgba(240,82,82,.16), var(--wl-panel2) 70%); border: 1px solid #5a2020; }
.wl-bk:hover, .wl-bk:focus-visible { border-color: #f05252; }
.wl-bk-top { display: flex; align-items: center; gap: 7px; }
.wl-bk-tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; background: #dc2626; color: #fff; }
.wl-bk-m { font-size: 10.5px; color: var(--wl-muted); }
.wl-bk-t { font-size: clamp(12px, .9vw, 14px); font-weight: 600; line-height: 1.3; }
.wl-ev-res { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(34,197,94,.16); color: #4ade80; }
.wl-ts-link { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--wl-accent); }

/* Short screens (e.g. 1366x768): tighter bars so the map keeps a usable height. */
@media (min-width: 901px) and (max-height: 860px) {
  .wl-top { padding: 5px 16px; }
  .wl-clock { font-size: 20px; }
  .wl-chips { padding: 3px 16px; }
  .wl-outlook { padding: 3px 16px; gap: 2px 14px; }
  .wl-outlook-i { font-size: 12px; }
  .wl-topstory { padding: 6px 10px; }
  .wl-ts-hl { font-size: 14px; }
  .wl-ts-why { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .wl-netrow { max-height: 34%; }
}

/* Header 25% shorter (86 -> ~64 px at 1080p): smaller clock with the date under it; "updated" lives in the sponsor line. */
.wl-top { padding-top: 8px; padding-bottom: 8px; }
.wl-clock { font-size: clamp(17px, 1.6vw, 25px); line-height: 1.05; }
.wl-clock-date { font-size: clamp(9px, .7vw, 12px); color: var(--wl-muted); letter-spacing: .03em; margin-top: 1px; }
.wl-lv { padding: 2px 12px; }
.wl-top > .wl-fs { width: 38px; height: 38px; font-size: 20px; }   /* 20% up from 32, to fit the sun/moon tile */
/* Sun & moon tile (wall.js renderSky): picture on top, the next sunset / sunrise / moonrise time under it */
.wl-top > .wl-sky { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; cursor: default; }
.wl-sky-img { width: 20px; height: 20px; display: block; }
.wl-sky-img.wl-sky-dim { opacity: .5; }
.wl-sky-t { font-size: 9px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.wl-sky-sun { color: #fbbf24; }    /* sunset / sunrise */
.wl-sky-moon { color: #cbd5e1; }   /* moonrise */
.wl-sponsor { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wl-updated { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* UK Risk Index ~8% shorter: tighter spacing only (font sizes unchanged) — the room goes to Trending now. */
.wl-uk > .wl-h { padding-top: 7px; padding-bottom: 7px; }
.wl-uk .wl-gs { padding: 8px 10px; }
.wl-uk .wl-g { padding: 6px 10px; }
.wl-uk .wl-g-row { margin-bottom: 4px; }
.wl-uk-fact { margin-bottom: 3px; }
.wl-uk-fact-bar { height: 7px; }
.wl-uk-foot { padding: 4px 10px 6px; }

/* New-event highlighting, easier to spot from across a room: a sky-blue edge, a stronger tint and a bigger pill. */
.wl-ev.is-fresh { background: linear-gradient(0deg, rgba(56,189,248,.22), rgba(56,189,248,.22)), var(--wl-panel2);
  box-shadow: inset 4px 0 0 #38bdf8, inset 0 0 0 1px rgba(56,189,248,.85); animation: wl-new-glow2 1.4s ease-in-out 4; }
.wl-ev.is-recent { background: linear-gradient(0deg, rgba(56,189,248,.11), rgba(56,189,248,.11)), var(--wl-panel2);
  box-shadow: inset 4px 0 0 rgba(56,189,248,.7), inset 0 0 0 1px rgba(56,189,248,.35); }
@keyframes wl-new-glow2 { 0%, 100% { box-shadow: inset 4px 0 0 #38bdf8, inset 0 0 0 1px rgba(56,189,248,.85); }
  50% { box-shadow: inset 4px 0 0 #7dd3fc, inset 0 0 0 2px #7dd3fc, 0 0 14px rgba(56,189,248,.45); } }
.wl-new { font-size: 10px; padding: 2px 8px; }
.wl-new-fresh { background: #38bdf8; color: #04131d; box-shadow: 0 0 8px rgba(56,189,248,.6); }
.wl-new-recent { background: rgba(56,189,248,.28); color: #bae6fd; }
@media (prefers-reduced-motion: reduce) { .wl-ev.is-fresh { animation: none; } }

/* A developing story with a new report in the last 15 min: a fainter sky-blue edge and an outlined pill (amber would clash with the Notable tier colour). */
.wl-ev.is-updated { box-shadow: inset 4px 0 0 rgba(56,189,248,.4); background: linear-gradient(0deg, rgba(56,189,248,.05), rgba(56,189,248,.05)), var(--wl-panel2); }
.wl-new-updated { background: transparent; color: #7dd3fc; box-shadow: inset 0 0 0 1px rgba(125,211,252,.6); }

/* Severe-weather badge in the top bar, beside the event counts (red flashes; amber solid; yellow quieter) */
.wl-wxa { display: inline-flex; align-items: baseline; gap: 8px; font: inherit; cursor: pointer; padding: 4px 12px; border-radius: 6px; border: 1px solid; white-space: nowrap; max-width: 34vw; overflow: hidden; }
.wl-wxa strong { font-size: clamp(11px, .95vw, 15px); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.wl-wxa-sub { font-size: clamp(10px, .75vw, 12px); color: #c3cedc; overflow: hidden; text-overflow: ellipsis; }
.wl-wxa.lv-red { color: #fecaca; border-color: #dc2626; background: rgba(220,38,38,.28); animation: wl-flash 1.4s steps(1) infinite; }
.wl-wxa.lv-red strong { color: #fff; }
.wl-wxa.lv-amber { color: #fdba74; border-color: #ea580c; background: rgba(249,115,22,.2); }
.wl-wxa.lv-amber strong { color: #fed7aa; }
.wl-wxa.lv-yellow { color: #fde047; border-color: #a16207; background: rgba(234,179,8,.1); }
.wl-wxa:hover, .wl-wxa:focus-visible { filter: brightness(1.15); outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
@media (min-width: 901px) { .wl-status { flex-wrap: nowrap; } .wl-wxa { flex: 0 1 auto; min-width: 0; } .wl-wxa strong { overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1500px) { .wl-wxa-sub { display: none; } }   /* the details are in the tooltip */
@media (prefers-reduced-motion: reduce) { .wl-wxa.lv-red { animation: none; } }

/* UK Risk Index a further ~10% shorter: the bar rows inherited the site's 1.6 line height; 1.3 keeps the same font sizes. */
.wl-uk-fact { line-height: 1.3; }

/* World View Wall 4K: on big screens shown at 100% scaling (a 4K TV or monitor with no OS scaling), draw the whole wall
   bigger, so text is as readable from across a room as on a 1080p screen: 1.5x from about 1440p, 2x at 4K (which gives
   exactly the 1080p layout, just sharper). CSS zoom scales viewport units too, so the heights divide by the zoom. */
@media (min-width: 2500px) and (min-height: 1350px) { .wl-body { --wl-z: 1.5; } }
@media (min-width: 3400px) and (min-height: 1900px) { .wl-body { --wl-z: 2; } }
@media (min-width: 2500px) and (min-height: 1350px) {
  .wl-body { zoom: var(--wl-z); height: calc(100dvh / var(--wl-z)); }
  .wall { height: calc(100dvh / var(--wl-z)); }
}

/* trending rows are clickable links (open the article); keep them looking like plain text */
a.wl-tp-i { color: inherit; text-decoration: none; display: block; }
a.wl-tp-i:hover { text-decoration: underline; }

/* Auto-focus tour banner: shown on the map only while it's zoomed in on a new event (wall.js focusTick) */
.wl-focusbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 15; max-width: min(56%, 600px); display: flex; align-items: stretch;   /* top-centre: clear of the zoom buttons (left) and Layers (right) */
  background: rgba(8,11,18,.86); border: 1px solid var(--wl-border); border-radius: 8px; overflow: hidden; pointer-events: none;
  backdrop-filter: blur(3px); box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: wl-fb-in .35s ease-out; }
.wl-focusbar[hidden] { display: none; }
.wl-fb-stripe { flex: none; width: 4px; }
.wl-fb-body { position: relative; min-width: 0; padding: 6px 12px 8px 10px; display: flex; gap: 9px; align-items: center; }
.wl-fb-ico { flex: none; font-size: 20px; line-height: 1; }
.wl-fb-txt { min-width: 0; }
.wl-fb-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-fb-meta b { color: var(--wl-accent); font-weight: 800; }
.wl-fb-title { font-size: 14px; font-weight: 700; color: var(--wl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-fb-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.wl-fb-prog > i { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--wl-accent); animation: wl-fb-drain linear forwards; }
@keyframes wl-fb-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes wl-fb-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .wl-focusbar, .wl-fb-prog > i { animation: none; } }
@media (max-width: 640px) { .wl-focusbar { left: 52px; right: 96px; max-width: none; transform: none; animation: none; } }