[hidden]{display:none!important} body{margin:0} img{max-width:100%}
/* Layout: a storm-desk page — sky band hero with a radar sweep, then a numbered storm check, reference panels and the log, on overcast neutrals with one warning amber. */
:root {
  --sky: #eef1f5; --cloud: #ffffff; --ink: #18202b; --ink-2: #4d5868; --rule: #d5dbe3;
  --amber: #c26a00; --amber-ink: #ffffff; --cell: #1d3557; --cell-2: #3d6fa8; --hail: #b3261e;
  --band-hero: #1b2533; --band-hero-ink: #eef3f9; --band-hero-2: #a8b6c8;
  --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;
  --s1: 0.5rem; --s2: 0.75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.5rem; --s6: 4rem;
  --r: 6px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --sky: #10161f; --cloud: #18212d; --ink: #e6ecf3; --ink-2: #9aa7b8; --rule: #2a3544;
  --amber: #f2a33a; --amber-ink: #1a1206; --cell: #8fb6e6; --cell-2: #5b8fcb; --hail: #f08a80;
  --band-hero: #0a0f16; --band-hero-ink: #eef3f9; --band-hero-2: #8d9bb0; color-scheme: dark; } }
:root[data-theme="dark"] {
  --sky: #10161f; --cloud: #18212d; --ink: #e6ecf3; --ink-2: #9aa7b8; --rule: #2a3544;
  --amber: #f2a33a; --amber-ink: #1a1206; --cell: #8fb6e6; --cell-2: #5b8fcb; --hail: #f08a80;
  --band-hero: #0a0f16; --band-hero-ink: #eef3f9; --band-hero-2: #8d9bb0; color-scheme: dark; }

* { box-sizing: border-box; }
body { background: var(--sky); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.55; }
/* While the page loads (html.booting, see inc/layout/head.php) only the dark band colour shows, then it all fades in at once */
.booting { background: var(--band-hero); }
.booting body { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { body { transition: opacity .2s ease-out; } }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.wrap { max-width: 72rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; font-weight: 500; }
p { margin: 0; }

/* Hero */
/* The hero, top bar and footer stay dark in both themes, so they always use the bright amber and red. */
.hero, .topbar, footer { --amber: #f2a33a; --amber-ink: #1a1206; --hail: #f08a80; }
.hero { background: var(--band-hero); color: var(--band-hero-ink); }
.hero .wrap { padding-block: var(--s5) var(--s5); display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.hero .eyebrow { color: var(--band-hero-2); }
.hero h1 { font-size: clamp(3rem, 9vw, 6.2rem); text-transform: uppercase; margin-top: var(--s2); }
.hero h1 span { display: block; color: var(--amber); }
/* The logo is the hero heading. The hero is dark in both themes, so it always uses the dark-background version. */
.hero .hero-logo { margin-top: var(--s2); line-height: 0; }
.hero-logo img { display: block; width: min(100%, 34rem); height: auto; }
.hero-lede { margin-top: var(--s3); color: var(--band-hero-2); font-size: 1.08rem; }
.hero-cta { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: var(--r); font-weight: 600; text-decoration: none; border: 1.5px solid currentColor; }
.btn-ghost { color: var(--band-hero-ink); }
/* Facebook-blue button with the Facebook logo and a second line, so the page is one of the first things people see */
.btn-fb { gap: .65rem; padding: .55rem 1.15rem .55rem .75rem; background: #1877f2; border-color: #1877f2; color: #fff; text-align: left; }
.btn-fb svg { flex: none; width: 2rem; height: 2rem; fill: currentColor; }
.btn-fb-text { display: grid; line-height: 1.2; }
.btn-fb-text small { font-size: .78rem; font-weight: 400; opacity: .9; }
.btn:hover { filter: brightness(1.08); }
/* The three areas we cover, as tags with an amber dot */
.areas { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.areas li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; background: rgb(255 255 255 / .04); font-weight: 600; color: var(--band-hero-ink); }
.areas li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); }
.scope { width: 100%; max-width: 22rem; justify-self: center; aspect-ratio: 1; }
.scope circle, .scope line { fill: none; stroke: var(--band-hero-2); stroke-opacity: .35; }
.scope .blip { fill: var(--amber); stroke: none; }
.scope .blip-2 { fill: var(--hail); stroke: none; }
.scope .label { fill: var(--band-hero-2); font-family: var(--mono); font-size: 9px; }
.sweep { transform-origin: 150px 150px; }
@media (prefers-reduced-motion: no-preference) {
  .sweep { animation: sweep 4s linear infinite; }
  .blip, .blip-2 { animation: ping 4s ease-out infinite; }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes ping { 0%, 100% { opacity: .35; } 8% { opacity: 1; } }

/* Sections */
section.block { padding-block: var(--s6) 0; }
.head { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
/* Section intros use the page width, so short ones sit on one line; very long ones still stop at a readable length */
.head p { max-width: 120ch; }
.head p { color: var(--ink-2); }

/* Storm check steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); counter-reset: step; }
.step { background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.step-n { font-family: var(--mono); font-size: .8rem; color: var(--amber); font-weight: 500; }
.step p { color: var(--ink-2); font-size: .95rem; }
.feeds { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: .4rem; }
.feeds a { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: .55rem .75rem; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; font-weight: 500; font-size: .95rem; }
.feeds a:hover { border-color: var(--cell-2); background: var(--sky); }
.feeds a small { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.step-warn { border-color: var(--amber); }


/* Right now */
/* Area buttons above the warning strip: each shows the area's temperature and rain chance now, and a red dot when
   a warning covers it. Four across, two by two on phones. Switching slides the new area in from that side. */
.places { display: grid; gap: var(--s2); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s3); }
.place { position: relative; display: grid; gap: .1rem; justify-items: start; min-width: 0; padding: .6rem 1.6rem .65rem .9rem; background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.place:hover { border-color: var(--cell-2); }
.place[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.place-name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; line-height: 1.15; }
.place-sum { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); min-height: 1.2em; }
.place-dot { position: absolute; top: .7rem; right: .7rem; width: .6rem; height: .6rem; border-radius: 50%; background: #e0261b; }
@media (max-width: 600px) {
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place-name { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) { #now-panel.slide { animation: now-in .25s ease-out; } }
@keyframes now-in { from { opacity: 0; transform: translateX(var(--from, 0)); } }
.now-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.tile { background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s3) var(--s4); display: grid; gap: .2rem; min-width: 0; }
.tile .k { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tile .v { font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .v small { font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-left: .2rem; }
.tile .s { font-size: .85rem; color: var(--ink-2); }
.warn-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r); margin-bottom: var(--s3); border: 1px solid var(--rule); background: var(--cloud); }
.warn-strip.active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--cloud)); }
.warn-strip strong { font-weight: 600; }
.pill { font-family: var(--mono); font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.warn-strip.active .pill { border-color: var(--amber); color: var(--amber); }
.chart-card { margin-top: var(--s3); background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); min-width: 0; position: relative; }
.chart-card h3 { margin-bottom: .25rem; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .8rem; color: var(--ink-2); margin-bottom: var(--s2); }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-right: .35rem; }
.chart { width: 100%; min-height: 15rem; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); }
.tip { position: absolute; pointer-events: none; background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: .35rem .6rem; font-size: .8rem; box-shadow: 0 4px 14px rgb(0 0 0 / .12); display: grid; gap: .1rem; }
.tip b { font-weight: 600; }
.stamp { margin-top: var(--s2); font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
.stamp a { color: inherit; }


/* Reference */
.ref { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.panel { background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.scale { display: grid; gap: .35rem; }
.scale-title { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; font-weight: 600; }
.scale-title small { font-weight: 400; color: var(--ink-2); font-size: .82rem; }
.bar { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r); overflow: hidden; }
.bar div { padding: .45rem .5rem; font-size: .78rem; font-weight: 600; color: #fff; min-width: 0; }
.bar div:nth-child(1) { background: color-mix(in srgb, var(--ink-2) 55%, var(--cloud)); color: var(--ink); }
.bar div:nth-child(2) { background: var(--cell-2); }
.bar div:nth-child(3) { background: var(--amber); color: var(--amber-ink); }
.bar div:nth-child(4) { background: var(--hail); }
.ticks { display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--mono); font-size: .72rem; color: var(--ink-2); }
.ticks span { min-width: 0; }
.means { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; font-size: .78rem; color: var(--ink-2); }
.check { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.check li::marker { color: var(--amber); font-family: var(--mono); }

/* Log */
.tbl { overflow-x: auto; background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 38rem; }
th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
td { padding: .8rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-family: var(--mono); }
.hail { color: var(--hail); font-weight: 600; }

/* Footer */
footer { margin-top: var(--s6); background: var(--band-hero); color: var(--band-hero-2); }
footer .wrap { padding-block: var(--s5); display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
footer h3 { color: var(--band-hero-ink); margin-bottom: var(--s1); }
.phone { font-family: var(--mono); font-size: 1.6rem; color: var(--band-hero-ink); }
.phone a { text-decoration: none; }
.follow { margin-top: var(--s2); }
.follow a { color: var(--amber); font-weight: 600; }
.phone a:hover { color: var(--amber); }
footer p { font-size: .9rem; }
/* Every suburb we cover, under its council area, with the same amber dot as the hero tags */
.suburbs { border-top: 1px solid rgb(255 255 255 / .08); max-width: 72rem; margin-inline: auto; padding: var(--s5) max(16px, env(safe-area-inset-right, 0px)) var(--s5) max(16px, env(safe-area-inset-left, 0px)); }
.suburbs > h3 { color: var(--band-hero-ink); margin-bottom: var(--s3); }
.suburb-cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.suburb-cols h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 var(--s1); font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; color: var(--band-hero-ink); }
.suburb-cols h4::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); }
.suburb-list { list-style: none; margin: 0; padding: 0; font-size: .85rem; line-height: 1.75; color: var(--band-hero-2); }
.suburb-list li { display: inline; white-space: nowrap; }
.suburb-list li:not(:last-child)::after { content: " · "; color: rgb(255 255 255 / .3); }
.host { border-top: 1px solid rgb(255 255 255 / .08); max-width: 72rem; margin-inline: auto; padding: var(--s5) max(16px, env(safe-area-inset-right, 0px)) var(--s5) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
/* The site version (SITE_VERSION in inc/bootstrap.php), under the hosting credit */
.site-version { font-family: var(--mono); font-size: .7rem; color: var(--band-hero-2); opacity: .75; }
.host a { display: inline-flex; align-items: center; gap: var(--s4); text-decoration: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--band-hero-2); }
.host img { display: block; width: 160px; height: auto; }
.host a:hover img { filter: brightness(1.1); }

/* Fire danger bar, fixed across the bottom of every screen; the body gets matching bottom padding so nothing hides under it. */
body { padding-bottom: calc(3.4rem + 1px + env(safe-area-inset-bottom, 0px)); }
.fdr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--band-hero); border-top: 1px solid rgb(255 255 255 / .12); padding-bottom: env(safe-area-inset-bottom, 0px); --amber: #f2a33a; }
.fdr-bar > a { display: flex; align-items: center; gap: var(--s3); min-height: 3.4rem; color: var(--band-hero-ink); text-decoration: none; }
.fdr-bar-k { font-size: .85rem; color: var(--band-hero-2); white-space: nowrap; }
.fdr-bar-chip { flex: none; padding: .2rem .65rem; border-radius: var(--r); background: #e6e6e6; color: #111; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fdr-bar-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fdr-bar-ban { flex: none; margin-left: auto; font-size: .85rem; color: var(--band-hero-2); white-space: nowrap; }
.fdr-bar-ban.on { padding: .2rem .6rem; border-radius: var(--r); background: #b0170f; color: #fff; font-weight: 600; --glow: #b0170f; }
.fdr-bar-more { flex: none; font-size: .85rem; font-weight: 600; color: var(--amber); }
.fdr-bar > a:hover .fdr-bar-more { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .fdr-bar[data-level="high"] .fdr-bar-chip { animation: fdr-glow 2.4s ease-in-out infinite; }
  .fdr-bar[data-level="extreme"] .fdr-bar-chip { animation: fdr-glow 1.8s ease-in-out infinite; }
  .fdr-bar[data-level="catastrophic"] .fdr-bar-chip, .fdr-bar-ban.on { animation: fdr-glow 1.2s ease-in-out infinite; }
}
/* BOM warning row: appears above the fire danger line only while a BOM warning names our area, and flashes red */
.bom-row { background: #b0170f; color: #fff; }
.bom-row .wrap { display: flex; align-items: center; gap: var(--s2); min-height: 2.75rem; }
.bom-tag { flex: none; padding: .05rem .45rem; border: 1.5px solid #fff; border-radius: var(--r); font-family: var(--display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bom-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; text-underline-offset: 2px; }
.bom-more { flex: none; margin-left: auto; font-size: .85rem; color: #fff; white-space: nowrap; }
.bom-short { display: none; }
body.has-bom { padding-bottom: calc(6.15rem + 1px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) { .bom-row { animation: bom-flash 1.2s ease-in-out infinite; } }
@keyframes bom-flash { 50% { background: #e0261b; } }
@media (max-width: 600px) {
  /* Phones: drop the decorative radar and coordinates so the Hazards section reaches the first screen */
  .scope { display: none; }
  /* Phones: slightly smaller area tags so all three fit on one row */
  .areas { gap: .3rem; margin-top: var(--s3); }
  .areas li { gap: .3rem; padding: .28rem .55rem; font-size: .82rem; }
  .areas li::before { width: .42rem; height: .42rem; }
  .fdr-bar > a { gap: var(--s2); }
  .bom-short { display: inline; }
  .bom-full { display: none; }
  .fdr-bar-area, .fdr-bar-more, .fdr-bar-ban:not(.on) { display: none; }
  .fdr-bar[data-ban] .fdr-bar-msg { display: none; }
}

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .scope { max-width: 14rem; order: -1; }
}
.windy { margin-top: var(--s3); background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s3); }
.layers { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s2); }
.layers button { font: inherit; font-size: .85rem; font-weight: 500; padding: .4rem .8rem; border-radius: var(--r); border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.layers button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.map-box { position: relative; width: 100%; aspect-ratio: 13 / 9; min-height: 30rem; max-height: 75vh; border-radius: var(--r); overflow: hidden; background: var(--sky); }
.map-box::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); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Lightning legend (inc/layout/bolt-key.php): Blitzortung's strike colours by age. Three to a row on phones. */
.bolt-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: var(--s3); }
.bolt-key-title { font-size: .85rem; font-weight: 600; }
.bolt-key ul { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: 0; padding: 0; list-style: none; }
.bolt-key li { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); font-family: var(--mono); font-size: .78rem; white-space: nowrap; }
.bolt-key svg { width: 1rem; height: 1rem; stroke: #1b2533; stroke-width: .8; }
@media (max-width: 600px) { .bolt-key ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; } }
/* Facebook feed: Facebook's page plugin (500px at most), loaded only after the visitor asks for it */
.btn-line { justify-self: start; color: var(--ink); }
/* Shown only until the site has fetched Facebook posts once (after that the last posts stay up) */
.fb-follow { max-width: 40rem; }
.btn-line:hover { border-color: var(--cell-2); }
/* Posts from the Graph API, rendered by the server: 3 across on desktop, the newest 3 on phones */
.fb-posts { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.fb-post { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); }
.fb-post-img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--sky); }
.fb-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: rgb(0 0 0 / .55); }
.fb-play svg { width: 1.4rem; height: 1.4rem; margin-left: .15rem; fill: #fff; }
.fb-post-body { display: grid; gap: var(--s2); align-content: space-between; padding: var(--s3) var(--s4) var(--s4); }
.fb-post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; white-space: pre-line; }
.fb-post-meta { font-size: .82rem; color: var(--ink-2); }
/* Section heading with an action on the right (the Facebook follow button); on narrow screens the button drops below */
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
.head-row .head { flex: 1 1 28rem; margin-bottom: 0; }
.head-row > .btn { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 600px) { .fb-post:nth-child(n+4) { display: none; } }
.hz { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* Heading, list, then the source line pinned to the bottom so both cards' source lines sit level. */
.hz .panel { grid-template-rows: auto 1fr auto; }
.hz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-content: start; }
.hz-item { display: grid; gap: .3rem; justify-items: start; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: var(--r); min-width: 0; }
.hz-item a { font-weight: 600; text-decoration: none; }
.hz-item a:hover { text-decoration: underline; }
.hz-meta { font-size: .85rem; color: var(--ink-2); }
.hz-level { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.hz-level[data-level="advice"] { background: #ffd23f; border-color: #ffd23f; color: #111; }
.hz-level[data-level="watch-and-act"] { background: #f28c00; border-color: #f28c00; color: #111; }
.hz-level[data-level="bom-warning"] { background: #b0170f; border-color: #b0170f; color: #fff; }
.hz-level[data-level="emergency-warning"] { background: #b0170f; border-color: #b0170f; color: #fff; }
.hz-level[data-level="planned-burn"] { border-color: var(--cell-2); color: var(--cell-2); }
.hz-empty { padding: .7rem .8rem; border: 1px dashed var(--rule); border-radius: var(--r); color: var(--ink-2); font-size: .95rem; }
.hz-src { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
.fdr { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--cloud); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); }
.fdr-gauge { display: block; width: 100%; max-width: 26rem; margin-inline: auto; }
.fdr-gauge text { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; fill: #fff; }
/* The arc fills 300 of the gauge's 320 units, so the message box is 93.75% wide to line up with it. */
.fdr-msg { display: block; margin: var(--s2) auto 0; width: 93.75%; max-width: 24.375rem; text-align: center; padding: .7rem 1rem; border-radius: var(--r); font-family: var(--display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: #111; }
.fdr-facts { display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fdr-fact { border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s2) var(--s3); display: grid; gap: .2rem; }
.fdr-fact .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.fdr-fact .v { font-size: 1.15rem; font-weight: 600; }
.fdr-region { font-family: var(--display); font-size: 1.8rem; font-weight: 700; margin-bottom: var(--s2); }
.fdr-note { margin-top: var(--s2); font-size: .85rem; color: var(--ink-2); }
.fdr-ban { grid-column: 1 / -1; padding: .7rem 1rem; border-radius: var(--r); background: #b0170f; color: #fff; font-weight: 600; }
@media (max-width: 760px) { .fdr { grid-template-columns: 1fr; } }

/* Gauge motion. The needle rests at the left and sweeps to the rating when the gauge first scrolls into view,
   then the other bands dim. Attention effects scale with danger: High pulses the message, Extreme pulses the
   panel orange, Catastrophic or a Total Fire Ban today pulses it red. Moderate stays calm so the pulse keeps its meaning. */
.fdr-needle { transform-box: view-box; transform-origin: 160px 160px; transform: rotate(-180deg); }
.fdr-gauge.swept .fdr-band:not(.on) { opacity: .4; }
.fdr[data-level="extreme"] { border-color: #f28c00; }
.fdr[data-level="catastrophic"], .fdr[data-ban="today"] { border-color: #b0170f; }
@media (prefers-reduced-motion: no-preference) {
  .fdr-needle { transition: transform 1.6s cubic-bezier(.25, 1.4, .5, 1), opacity .3s; }
  .fdr-band { transition: opacity .6s ease 1.1s; }
  .fdr[data-level="high"] .fdr-msg { animation: fdr-glow 2.4s ease-in-out infinite; }
  .fdr[data-level="extreme"] .fdr-msg { animation: fdr-glow 1.8s ease-in-out infinite; }
  .fdr[data-level="extreme"] { --pulse: #f28c00; animation: fdr-pulse 1.8s ease-in-out infinite; }
  .fdr[data-level="catastrophic"] .fdr-msg { animation: fdr-glow 1.2s ease-in-out infinite; }
  .fdr[data-level="catastrophic"], .fdr[data-ban="today"] { --pulse: #b0170f; animation: fdr-pulse 1.2s ease-in-out infinite; }
}
@keyframes fdr-pulse { 50% { border-color: var(--pulse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse) 45%, transparent), 0 0 40px color-mix(in srgb, var(--pulse) 40%, transparent); } }
@keyframes fdr-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow) 40%, transparent), 0 0 28px color-mix(in srgb, var(--glow) 55%, transparent); } }
/* Sticky section bar with the colour theme switch and the live alerts ticker, and the warning bar under them */
.top { position: sticky; top: 0; z-index: 10; }
.topbar { background: var(--band-hero); color: var(--band-hero-ink); border-bottom: 1px solid rgb(255 255 255 / .08); }
.topbar .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 3.25rem; }
.jump { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
.jump::-webkit-scrollbar { display: none; }
.jump a { display: block; padding: .45rem .65rem; border-radius: var(--r); font-size: .88rem; font-weight: 500; color: var(--band-hero-2); text-decoration: none; white-space: nowrap; }
.jump a:hover { color: var(--band-hero-ink); background: rgb(255 255 255 / .07); }
/* Link to the wallboard (wallboard.php), a desktop-only view, so it hides below 1024 pixels */
.wall-link { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; color: var(--band-hero-2); font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.wall-link:hover { color: var(--band-hero-ink); border-color: var(--amber); }
.wall-link svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (max-width: 1023px) { .wall-link { display: none; } }
.theme { flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; }
.theme button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--band-hero-2); cursor: pointer; }
.theme button:hover { color: var(--band-hero-ink); }
.theme button[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); }
.theme svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jump svg { display: none; width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jump .short { display: none; }
.jump a[aria-current] { color: var(--band-hero-ink); background: rgb(255 255 255 / .1); box-shadow: inset 0 -2px 0 var(--amber); }
.jump a[aria-current] svg { color: var(--amber); }
/* On phones the theme switch moves out of the top bar to the top right of the hero, so the six tabs get the full width */
.hero { position: relative; }
.theme-hero { display: none; position: absolute; top: .65rem; right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) {
  /* Icon tabs: all six sections fit across a phone, so nothing hides off-screen */
  .topbar .theme { display: none; }
  .theme-hero { display: flex; }
  .hero .wrap { padding-top: 3.75rem; }
  .jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .jump a { display: grid; justify-items: center; gap: 3px; padding: .45rem 0 .35rem; font-size: .7rem; line-height: 1.1; }
  .jump svg { display: block; }
  .jump .long { display: none; }
  .jump .short { display: inline; }
}
section.block { scroll-margin-top: 6.5rem; }
.alert-bar { display: block; padding: .75rem max(16px, env(safe-area-inset-left, 0px)); text-align: center; font-weight: 600; text-decoration: none; background: #f28c00; color: #111; }
.alert-bar[data-level="emergency-warning"] { background: #b0170f; color: #fff; }
.alert-bar:hover { text-decoration: underline; }

/* Live alerts ticker: RFS incidents lead with a status chip, then storm and flood warnings. Level pills reuse
   .hz-level with the band's colours. The dot shows the highest level: red Emergency Warning, orange Watch and Act
   or a warning, yellow advice or an incident, green all clear, grey while checking or if the feeds are down. */
.ticker { --amber: #f2a33a; --ink-2: var(--band-hero-2); --rule: rgb(255 255 255 / .22); --cell-2: #8fb6e6; display: flex; align-items: stretch; height: 2.25rem; background: color-mix(in srgb, var(--band-hero) 78%, #000); color: var(--band-hero-ink); border-bottom: 1px solid rgb(255 255 255 / .08); font-size: .85rem; }
.tk-live { flex: none; display: flex; align-items: center; gap: .45rem; padding: 0 .8rem 0 max(16px, env(safe-area-inset-left, 0px)); border-right: 1px solid rgb(255 255 255 / .12); font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tk-time { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--band-hero-2); }
.tk-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--band-hero-2); }
.ticker[data-level="clear"] .tk-dot { background: #3fbf6f; }
.ticker[data-level="advice"] .tk-dot { background: #ffd23f; }
.ticker[data-level="warning"] .tk-dot { background: #f28c00; }
.ticker[data-level="emergency"] .tk-dot { background: #e0261b; }
.tk-view { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.tk-track { display: flex; width: max-content; }
.tk-group { display: flex; align-items: center; padding-left: var(--s3); }
.tk-item { display: inline-flex; align-items: center; gap: .5rem; padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid rgb(255 255 255 / .16); white-space: nowrap; color: inherit; text-decoration: none; }
.tk-item:hover .tk-title { text-decoration: underline; }
.tk-src { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .72rem; color: var(--band-hero-2); }
.tk-src svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk-item[data-kind="fire"] .tk-src { color: var(--amber); }
.tk-item[data-kind="storm"] .tk-src { color: #8fb6e6; }
.tk-item[data-kind="flood"] .tk-src { color: #5ec4e8; }
.tk-item .hz-level { font-size: .64rem; padding: .08rem .45rem; }
.tk-title { font-weight: 600; }
.tk-status { font-size: .74rem; font-weight: 700; padding: .08rem .45rem; border-radius: var(--r); border: 1px solid currentColor; color: var(--band-hero-ink); }
.tk-status[data-status="out-of-control"] { background: #e0261b; border-color: #e0261b; color: #fff; }
.tk-status[data-status="not-yet-controlled"] { border-color: #e0261b; color: #ff8a80; }
.tk-status[data-status="responding"], .tk-status[data-status="being-controlled"] { color: #f2a33a; }
.tk-status[data-status="under-control"] { color: #4cc77f; }
.tk-meta { color: var(--band-hero-2); }
.tk-msg { white-space: nowrap; color: var(--band-hero-2); padding-right: 2.5rem; }
.tk-pause { flex: none; display: grid; place-items: center; width: 2.25rem; padding: 0; border: 0; border-left: 1px solid rgb(255 255 255 / .12); background: transparent; color: var(--band-hero-2); cursor: pointer; margin-right: env(safe-area-inset-right, 0px); }
.tk-pause:hover { color: var(--band-hero-ink); }
.tk-pause svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tk-pause .tk-icon-play { fill: currentColor; stroke: none; }
.tk-pause[aria-pressed="true"] .tk-icon-pause, .tk-pause[aria-pressed="false"] .tk-icon-play { display: none; }
/* When everything fits, the label and items sit together in the middle of the band, without a trailing divider */
.ticker:not(.moving) { justify-content: center; }
.ticker:not(.moving) .tk-view { flex: 0 1 auto; }
.ticker:not(.moving) .tk-group { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ticker:not(.moving) .tk-item:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.ticker:not(.moving) .tk-msg { padding-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ticker.moving .tk-track { animation: tk-scroll var(--tk-time, 40s) linear infinite; }
  .ticker.paused .tk-track, .tk-view:hover .tk-track, .tk-view:focus-within .tk-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .tk-view { overflow-x: auto; scrollbar-width: none; } }
@keyframes tk-scroll { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .ticker { font-size: .8rem; }
  .tk-time { display: none; }
}
@media (max-width: 600px) {
  .layers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .layers::-webkit-scrollbar { display: none; }
  .layers button { flex: none; }
}