[hidden]{display:none!important} *{box-sizing:border-box}
/* PSC Wallboard: one dark screen for a monitor or TV, in the site's storm-desk style. Everything is sized in rem and
   the root font size follows the screen (about 17px at 1920 by 1080, up to 34px on a 4K TV), so the layout keeps its
   proportions at any resolution and nothing scrolls. */
:root {
  --bg: #0d131b; --panel: #151e2a; --panel-2: #1b2533; --rule: #263244; --ink: #e9eef5; --ink-2: #9aa7b8;
  --amber: #f2a33a; --red: #e0261b; --orange: #f28c00; --yellow: #ffd23f; --green: #3fbf6f; --sky: #8fb6e6;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gap: .75rem; --r: 6px;
  font-size: clamp(12px, 0.62vw + 0.45vh, 34px);
  color-scheme: dark;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.4; }
a { color: inherit; }
h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* Hidden while the first warnings load (see wallboard.php); in full screen the pointer hides when the mouse is still */
.booting body { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { body { transition: opacity .2s ease-out; } }
body.idle, body.idle * { cursor: none !important; }

.wb { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--gap); padding: var(--gap); overflow: hidden; }

/* Header: logo, clock and live status on the left; fire danger and the full screen button on the right */
.wb-head { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; padding: 0 .25rem; }
.wb-logo { flex: none; line-height: 0; }
.wb-logo img { height: 4.8rem; width: auto; }
.wb-clock { display: grid; line-height: 1.05; }
.wb-time { font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.wb-date { color: var(--ink-2); font-size: .9rem; }
.wb-live { display: flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.wb-checked { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.wb-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink-2); }
.wb-live[data-level="clear"] .wb-dot { background: var(--green); }
.wb-live[data-level="advice"] .wb-dot { background: var(--yellow); }
.wb-live[data-level="warning"] .wb-dot { background: var(--orange); }
.wb-live[data-level="emergency"] .wb-dot { background: var(--red); }
.wb-fdr { margin-left: auto; display: flex; align-items: center; gap: .9rem; padding: .45rem 1rem .45rem .7rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.wb-gauge { display: block; width: 6.4rem; height: auto; }
.wb-gauge .band:not(.on) { opacity: .35; }
.wb-fdr-text { display: grid; gap: .2rem; }
.wb-k { font-family: var(--mono); font-size: .7rem; color: var(--ink-2); }
.wb-fdr-row { display: flex; align-items: center; gap: .65rem; }
.wb-fdr-chip { padding: .1rem .6rem; border-radius: var(--r); background: #e6e6e6; color: #111; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.wb-fdr-msg { font-weight: 600; }
.wb-fdr-more { font-size: .8rem; color: var(--ink-2); }
.wb-ban { padding: .05rem .45rem; border-radius: var(--r); background: #b0170f; color: #fff; font-weight: 600; }
.wb-fdr[data-ban="today"] { border-color: #b0170f; }
@media (prefers-reduced-motion: no-preference) {
  .wb-fdr[data-ban="today"], .wb-fdr[data-level="catastrophic"] { animation: wb-pulse 1.4s ease-in-out infinite; }
  .wb-fdr[data-level="extreme"] { --pulse: var(--orange); animation: wb-pulse 1.8s ease-in-out infinite; }
}
.wb-fdr { --pulse: #b0170f; }
@keyframes wb-pulse { 50% { border-color: var(--pulse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 45%, transparent), 0 0 32px color-mix(in srgb, var(--pulse) 40%, transparent); } }
.wb-full { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border: 1.5px solid var(--amber); border-radius: var(--r); background: transparent; color: var(--amber); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wb-full:hover { background: var(--amber); color: #1a1206; }
.wb-full svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Main: the radar and lightning maps, then RFS incidents above storm and flood warnings */
.wb-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(24rem, .95fr); gap: var(--gap); min-height: 0; }
.wb-side { display: grid; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.wb-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.wb-panel-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .55rem .9rem; border-bottom: 1px solid var(--rule); }
.wb-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .7rem; color: var(--ink-2); }
.wb-count { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--amber); }
.wb-frame { position: relative; flex: 1; min-height: 0; background: #0a0f15; }
.wb-frame::before { content: attr(data-loading); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.wb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Lightning legend (inc/layout/bolt-key.php) along the bottom of the lightning panel */
.bolt-key { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .45rem .9rem; border-top: 1px solid var(--rule); }
.bolt-key-title { margin: 0; font-size: .75rem; font-weight: 600; }
.bolt-key ul { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; padding: 0; list-style: none; }
.bolt-key li { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-2); font-family: var(--mono); font-size: .7rem; white-space: nowrap; }
.bolt-key svg { width: .9rem; height: .9rem; stroke: #0d131b; stroke-width: .8; }
/* A map being refreshed loads behind the one on screen and takes its place once it has drawn */
.wb-frame iframe.loading { opacity: 0; pointer-events: none; }

.wb-list { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: .5rem; margin: 0; padding: .6rem; list-style: none; }
.wb-item { display: grid; gap: .2rem; padding: .55rem .75rem; background: var(--panel-2); border: 1px solid var(--rule); border-left: 4px solid var(--ink-2); border-radius: var(--r); }
.wb-item[data-level="advice"] { border-left-color: var(--yellow); }
.wb-item[data-level="watch-and-act"] { border-left-color: var(--orange); }
.wb-item[data-level="emergency-warning"], .wb-item[data-level="bom-warning"] { border-left-color: var(--red); }
.wb-item[data-level="planned-burn"] { border-left-color: var(--sky); }
.wb-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wb-level { padding: .08rem .45rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wb-level[data-level="advice"] { background: var(--yellow); border-color: var(--yellow); color: #111; }
.wb-level[data-level="watch-and-act"] { background: var(--orange); border-color: var(--orange); color: #111; }
.wb-level[data-level="emergency-warning"], .wb-level[data-level="bom-warning"] { background: #b0170f; border-color: #b0170f; color: #fff; }
.wb-level[data-level="planned-burn"] { border-color: var(--sky); color: var(--sky); }
.wb-status { padding: .05rem .45rem; border: 1px solid currentColor; border-radius: var(--r); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.wb-status[data-status="out-of-control"] { background: var(--red); border-color: var(--red); color: #fff; }
.wb-status[data-status="not-yet-controlled"] { border-color: var(--red); color: #ff8a80; }
.wb-status[data-status="responding"], .wb-status[data-status="being-controlled"] { color: var(--amber); }
.wb-status[data-status="under-control"] { color: #4cc77f; }
.wb-new { padding: .08rem .45rem; border-radius: 999px; background: var(--amber); color: #1a1206; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.wb-title { font-size: 1.05rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.wb-meta { color: var(--ink-2); font-size: .82rem; }
.wb-empty { padding: .8rem .9rem; border: 1px dashed var(--rule); border-radius: var(--r); color: var(--ink-2); }
.wb-empty.clear { display: flex; align-items: center; gap: .6rem; border-style: solid; color: var(--ink); }
.wb-empty.clear::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); }
.wb-more { flex: none; margin: 0; padding: .1rem .9rem .5rem; color: var(--amber); font-family: var(--mono); font-size: .75rem; }
/* A new incident or warning flashes when it first appears */
@media (prefers-reduced-motion: no-preference) { .wb-item.arrived { animation: wb-arrive 1.2s ease-out 3; } }
@keyframes wb-arrive { 40% { background: color-mix(in srgb, var(--amber) 28%, var(--panel-2)); } }

/* Footer: each area's conditions now, with a red dot when a warning covers it, and the data credits */
.wb-foot { display: grid; gap: .45rem; }
.wb-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.wb-area { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "temp rain" "temp wind"; column-gap: .9rem; align-items: center; padding: .5rem .9rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.wb-area.warn { border-color: color-mix(in srgb, var(--red) 60%, var(--rule)); }
.wb-area-name { grid-area: name; display: flex; align-items: center; gap: .45rem; font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wb-area-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); }
.wb-area-temp { grid-area: temp; font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.wb-area-temp small { font-size: 1.1rem; color: var(--ink-2); }
.wb-area-rain { grid-area: rain; font-size: .85rem; }
.wb-area-wind { grid-area: wind; color: var(--ink-2); font-size: .85rem; }
.wb-credit { margin: 0; color: var(--ink-2); font-size: .68rem; text-align: center; }

/* Narrower desktops drop the long fire danger message; portrait screens stack the maps and put the lists side by side */
@media (max-width: 1280px) { .wb-fdr-msg, .wb-date { display: none; } }
@media (orientation: portrait) {
  .wb-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .wb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .wb-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones and small tablets get a note instead of a squashed wallboard */
.wb-small { display: none; }
@media (max-width: 899px) {
  .wb { display: none; }
  .wb-small { display: grid; gap: 1rem; justify-items: start; max-width: 32rem; margin: 0 auto; padding: 2.5rem 16px; font-size: 16px; }
  .wb-small img { width: 14rem; height: auto; }
  .wb-small p { margin: 0; color: var(--ink-2); }
  .wb-small a { color: var(--amber); font-weight: 600; }
}