/* ===========================================================================
   Aurora - SA Power Networks outage tracker
   Dark by default, with a light theme on the toggle. Every colour is a token
   declared in both themes; nothing hard-codes a colour that only works in one.
   =========================================================================== */

@font-face{
  font-family:"Onest"; src:url("/static/fonts/onest.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/static/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------------------ dark */
:root, :root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#070b12;
  --surface:rgba(16,22,33,.72);
  --surface-solid:#101621;
  --surface-2:rgba(255,255,255,.035);
  --field:#151d29;
  --surface-3:rgba(255,255,255,.07);
  --edge:rgba(255,255,255,.10);

  --ink:#f2f6fb;
  --ink-2:#adbacd;
  --ink-3:#7c8ca1;

  --cyan:#4fd6e8;
  --cyan-ink:#04222a;
  --cyan-soft:rgba(79,214,232,.16);
  --cyan-edge:rgba(79,214,232,.30);

  --red:#ff5d73;
  --red-soft:rgba(255,93,115,.15);
  --red-edge:rgba(255,93,115,.30);
  --red-ink:#ff8fa1;

  --amber:#ffb020;
  --amber-soft:rgba(255,176,32,.14);
  --amber-edge:rgba(255,176,32,.28);
  --amber-ink:#ffc964;

  --ok:#42d6a0;
  --ok-soft:rgba(66,214,160,.13);
  --ok-edge:rgba(66,214,160,.28);
  --ok-ink:#7fe6c2;

  --blur:blur(18px) saturate(1.3);
  --lift:0 18px 44px rgba(0,0,0,.42);
  --lift-sm:0 8px 22px rgba(0,0,0,.34);
  --map-ground:#0a0f18;
}

/* ----------------------------------------------------------------- light */
:root[data-theme="light"]{
  color-scheme:light;

  --bg:#eef2f6;
  --surface:rgba(255,255,255,.80);
  --surface-solid:#ffffff;
  --surface-2:rgba(12,22,38,.035);
  --field:#ffffff;
  --surface-3:rgba(12,22,38,.07);
  --edge:rgba(12,22,38,.11);

  --ink:#0d1622;
  --ink-2:#49596e;
  --ink-3:#71829a;

  --cyan:#0f7f96;
  --cyan-ink:#ffffff;
  --cyan-soft:rgba(15,127,150,.12);
  --cyan-edge:rgba(15,127,150,.28);

  --red:#c9304a;
  --red-soft:rgba(201,48,74,.10);
  --red-edge:rgba(201,48,74,.26);
  --red-ink:#a32137;

  --amber:#a86a00;
  --amber-soft:rgba(168,106,0,.11);
  --amber-edge:rgba(168,106,0,.26);
  --amber-ink:#875600;

  --ok:#0e7f5c;
  --ok-soft:rgba(14,127,92,.11);
  --ok-edge:rgba(14,127,92,.26);
  --ok-ink:#0a6147;

  --blur:blur(18px) saturate(1.15);
  --lift:0 14px 38px rgba(14,26,44,.14);
  --lift-sm:0 6px 18px rgba(14,26,44,.10);
  --map-ground:#dfe6ec;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Onest",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden;                    /* the map owns the viewport */
}
body.scrolls{overflow:auto}           /* inner pages scroll normally */
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.02em}
a{color:var(--cyan)}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px}

.glass{
  background:var(--surface); border:1px solid var(--edge); border-radius:16px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--lift);
}

/* ============================================================ live / map */
.app{position:fixed; inset:0; display:flex; flex-direction:column}
.app #map{position:absolute; inset:0; z-index:0}
#map{background:var(--map-ground)}
.leaflet-container{background:var(--map-ground); font-family:inherit}

.overlay{
  position:absolute; inset:0; z-index:500; pointer-events:none;
  display:grid; grid-template-columns:340px minmax(0,1fr);
  gap:16px; padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
}
.overlay > *{pointer-events:auto}
.col-left{display:flex; flex-direction:column; gap:12px;
  min-height:0; min-width:0; align-items:stretch;
  justify-content:flex-start}
.col-right{display:flex; flex-direction:column; align-items:flex-end;
  justify-content:space-between; gap:12px; min-width:0;
  pointer-events:none}
.col-right > *{pointer-events:auto}

/* header card */
.head{padding:15px 17px; display:grid; gap:14px; flex:none}
.brand{display:flex; align-items:center; gap:11px}
.brand .mark{
  width:32px; height:32px; border-radius:10px; flex:none; display:grid;
  place-items:center; font-size:16px;
  background:linear-gradient(145deg, var(--cyan), color-mix(in srgb, var(--cyan) 55%, #000));
  color:var(--cyan-ink);
}
.brand-text{min-width:0}
.brand .name{display:block; font-size:15px; font-weight:600; line-height:1.2}
.brand .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px;
  font-weight:400; letter-spacing:0; line-height:1.35}
.theme{
  margin-left:auto; width:32px; height:32px; border-radius:9px; flex:none;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--edge);
}
.theme:hover{background:var(--surface-3); color:var(--ink)}
.theme svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

.figs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.fig b{display:block; font-size:22px; font-weight:600; line-height:1;
  letter-spacing:-.03em}
.fig span{display:block; font-size:10.5px; color:var(--ink-3); margin-top:5px}
.fig.hot b{color:var(--red)}

.tabs{display:flex; gap:4px; padding:4px; border-radius:11px;
  background:var(--surface-2)}
.tabs button{
  flex:1; padding:6px 10px; border:none; background:none; border-radius:8px;
  font:inherit; font-size:13px; color:var(--ink-3); cursor:pointer;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surface-3); color:var(--ink);
  font-weight:500}

.searchbox{display:flex; gap:8px}
.searchbox input{
  flex:1; min-width:0; padding:9px 12px; border-radius:10px; font:inherit;
  font-size:13.5px; background:var(--surface-2); border:1px solid var(--edge);
  color:var(--ink);
}
.searchbox input::placeholder{color:var(--ink-3)}

/* outage list */
.list{padding:7px; display:grid; gap:7px; align-content:start;
  overflow:auto; min-height:0; flex:0 1 auto; max-height:100%}
.item{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px;
  align-items:center; padding:11px 12px; border-radius:12px;
  background:var(--surface-2); border:1px solid transparent; cursor:pointer;
  text-align:left; font:inherit; color:inherit; width:100%;
  text-decoration:none;               /* server-rendered rows are links */
  transition:background .15s, border-color .15s;
}
.item:hover{background:var(--surface-3); border-color:var(--edge)}
.item.active{border-color:var(--cyan-edge); background:var(--cyan-soft)}
.item .ring{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:10.5px; font-weight:600;
}
.item.un .ring{background:var(--red-soft); color:var(--red-ink);
  border:1px solid var(--red-edge)}
.item.pl .ring{background:var(--amber-soft); color:var(--amber-ink);
  border:1px solid var(--amber-edge)}
.item .mid{min-width:0}
.item .nm{display:block; font-size:13.5px; font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.item .sb{display:block; font-size:11px; color:var(--ink-3); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.item .rt{text-align:right; font-size:12px; color:var(--ink-2)}
.item .rt small{display:block; font-size:10.5px; color:var(--ink-3)}
.item .rt small.late{color:var(--red-ink)}

.empty{padding:22px 14px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* right-hand floating controls */
.pill{display:flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:99px; font-size:12.5px; color:var(--ink-2)}

/* Freshness readout with a manual refresh beside it. */
.statusbar{display:flex; align-items:center; gap:2px; padding:4px 4px 4px 13px;
  border-radius:99px}
.status-text{display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--ink-2); white-space:nowrap}
.icon-btn{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid;
  place-items:center; border:none; background:none; cursor:pointer;
  color:var(--ink-2); transition:background .15s, color .15s;
}
.icon-btn:hover{background:var(--surface-3); color:var(--ink)}
.icon-btn svg{width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.icon-btn[aria-busy="true"]{opacity:.55; cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn.spinning svg{animation:spin .8s linear infinite;
  transform-origin:50% 50%}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--ok)}
.dot.live{box-shadow:0 0 0 0 var(--ok-edge); animation:ping 2.6s infinite}
.dot.warn{background:var(--amber)} .dot.bad{background:var(--red)}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}}

.tools{display:flex; flex-direction:column; padding:5px; gap:3px}
.tool{width:36px; height:36px; border-radius:10px; display:grid;
  place-items:center; color:var(--ink-2); cursor:pointer; border:none;
  background:none}
.tool:hover{background:var(--surface-3); color:var(--ink)}
.tool.on{background:var(--cyan-soft); color:var(--cyan)}
.tool svg{width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

.legend{display:flex; gap:14px; padding:9px 14px; border-radius:12px;
  font-size:11.5px; color:var(--ink-2); flex-wrap:wrap}
.legend i{width:8px; height:8px; border-radius:50%; display:inline-block;
  margin-right:6px}
.legend i.un{background:var(--red)} .legend i.pl{background:var(--amber)}

/* popups */
.leaflet-popup-content-wrapper{
  background:var(--surface-solid); color:var(--ink); border-radius:14px;
  border:1px solid var(--edge); box-shadow:var(--lift); padding:2px;
}
.leaflet-popup-content{margin:12px 14px; font-size:13.5px; line-height:1.5}
.leaflet-popup-tip{background:var(--surface-solid); border:1px solid var(--edge)}
.leaflet-popup-close-button{color:var(--ink-3) !important}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--ink) !important}
.pop h4{font-size:14.5px; margin-bottom:8px}
.pop dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0}
.pop dt{color:var(--ink-3); font-size:12px}
.pop dd{margin:0; font-size:12.5px}
.pop .tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px;
  font-weight:600; padding:2px 8px; border-radius:99px; margin-bottom:7px}
.pop .tag.un{background:var(--red-soft); color:var(--red-ink);
  border:1px solid var(--red-edge)}
.pop .tag.pl{background:var(--amber-soft); color:var(--amber-ink);
  border:1px solid var(--amber-edge)}
.leaflet-control-attribution{
  background:var(--surface) !important; color:var(--ink-3) !important;
  border-radius:8px 0 0 0; font-size:10px !important; backdrop-filter:var(--blur);
}
.leaflet-control-attribution a{color:var(--ink-2) !important}

/* ==================================================== inner pages shell */
.page{position:relative; min-height:100%; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 18px; background:var(--surface); border-bottom:1px solid var(--edge);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.topbar nav{display:flex; gap:3px; flex-wrap:wrap}
.topbar nav a{
  color:var(--ink-3); text-decoration:none; font-size:13.5px; padding:6px 11px;
  border-radius:9px;
}
.topbar nav a:hover{color:var(--ink); background:var(--surface-2)}
.topbar nav a.on{color:var(--ink); background:var(--surface-3); font-weight:500}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:10px}

.content{padding:18px; display:grid; gap:16px; max-width:1320px; width:100%;
  margin:0 auto; padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px))}
.card{background:var(--surface-solid); border:1px solid var(--edge);
  border-radius:16px; padding:16px; box-shadow:var(--lift-sm)}
.card > h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:13px}
.row{display:flex; gap:10px; align-items:end; flex-wrap:wrap}
.field{display:grid; gap:5px}
.field label{font-size:11.5px; color:var(--ink-3)}
input, select{
  padding:8px 11px; border-radius:9px; font:inherit; font-size:13.5px;
  background:var(--field); border:1px solid var(--edge); color:var(--ink);
}
/* The dropdown list is an OS-drawn popup: it needs its colours stated
   outright, or the options inherit a near-white text colour onto a white
   popup and disappear. */
select option{background:var(--field); color:var(--ink)}
select option:checked{background:var(--cyan-soft); color:var(--ink)}
input[type=checkbox]{width:auto; accent-color:var(--cyan)}
.btn{
  padding:8px 14px; border-radius:9px; font:inherit; font-size:13.5px;
  border:1px solid var(--cyan); background:var(--cyan); color:var(--cyan-ink);
  cursor:pointer; text-decoration:none; display:inline-block; font-weight:500;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface-2); color:var(--ink); border-color:var(--edge)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.danger{background:var(--red); border-color:var(--red); color:#fff}
.btn.small{padding:5px 10px; font-size:12.5px}

.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:0 10px 8px 0;
  border-bottom:1px solid var(--edge); white-space:nowrap}
td{padding:9px 10px 9px 0; border-bottom:1px solid var(--surface-2);
  color:var(--ink-2)}
td.lead{color:var(--ink); font-weight:500}
tbody tr:hover{background:var(--surface-2)}
.num{text-align:right; font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums}

.stat-grid{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.stat{background:var(--surface-2); border:1px solid var(--edge);
  border-radius:13px; padding:14px}
.stat b{display:block; font-size:24px; font-weight:600; letter-spacing:-.03em;
  line-height:1.05}
.stat span{display:block; font-size:11px; color:var(--ink-3); margin-top:6px}

.tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px;
  font-weight:600; padding:2px 9px; border-radius:99px; white-space:nowrap}
.tag.un{background:var(--red-soft); color:var(--red-ink);
  border:1px solid var(--red-edge)}
.tag.pl{background:var(--amber-soft); color:var(--amber-ink);
  border:1px solid var(--amber-edge)}
.tag.live{background:var(--ok-soft); color:var(--ok-ink);
  border:1px solid var(--ok-edge)}
.tag.gap{background:var(--amber-soft); color:var(--amber-ink);
  border:1px solid var(--amber-edge)}

.bar-row{display:grid; grid-template-columns:150px 1fr 72px; gap:10px;
  align-items:center; padding:3px 0; font-size:13px}
.bar-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{background:var(--surface-2); border-radius:5px; height:16px}
.bar-fill{display:block; height:100%; border-radius:5px; background:var(--cyan)}
.bar-value{text-align:right; color:var(--ink-3);
  font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}

.banner{padding:11px 16px; border-radius:12px; font-size:13.5px;
  border:1px solid var(--edge)}
.banner.warn{background:var(--amber-soft); color:var(--amber-ink);
  border-color:var(--amber-edge)}
.banner.info{background:var(--cyan-soft); color:var(--ink-2);
  border-color:var(--cyan-edge)}
.banner code{font-family:"JetBrains Mono",monospace; font-size:12px}

.rule{border:1px solid var(--edge); border-radius:14px; padding:14px;
  background:var(--surface-2); display:grid; gap:11px}
.rule.off{opacity:.62}
.rule header{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rule header .grow{flex:1; min-width:140px}
.flash{padding:10px 13px; border-radius:11px; font-size:13.5px}
.flash.ok{background:var(--ok-soft); color:var(--ok-ink);
  border:1px solid var(--ok-edge)}
.flash.err{background:var(--red-soft); color:var(--red-ink);
  border:1px solid var(--red-edge)}
.muted{color:var(--ink-3)} .small{font-size:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.ev{display:grid; grid-template-columns:14px 1fr auto; gap:11px;
  align-items:start; padding-bottom:14px; position:relative}
.ev:last-child{padding-bottom:0}
.ev .pip{width:8px; height:8px; border-radius:50%; background:var(--surface-3);
  border:2px solid var(--ink-3); margin-top:4px}
.ev.now .pip{background:var(--cyan); border-color:var(--cyan)}
.ev .ln{position:absolute; left:3.5px; top:15px; bottom:0; width:1px;
  background:var(--edge)}
.ev:last-child .ln{display:none}

/* page headings, prose and the attribution footer */
.page-head{padding:4px 2px 0}
.page-head h1{font-size:24px; font-weight:600; letter-spacing:-.03em; line-height:1.2}
.page-head p{margin:6px 0 0; color:var(--ink-2); font-size:14px; max-width:75ch}
.prose{color:var(--ink-2); line-height:1.6}
.prose > :first-child{margin-top:0}
.card.prose > h2{font-size:16px; color:var(--ink); margin:24px 0 6px;
  text-transform:none; letter-spacing:-.02em}
.card.prose > h2:first-child{margin-top:0}
.prose h3{font-size:14.5px; color:var(--ink); margin:16px 0 4px}
.prose p, .prose ul{margin:0 0 10px; max-width:72ch}
.prose ul{padding-left:20px}
.site-foot{margin-top:auto; max-width:1320px; width:100%; margin-inline:auto;
  padding:0 20px calc(26px + env(safe-area-inset-bottom, 0px));
  font-size:12px; line-height:1.55; color:var(--ink-3)}
.site-foot p{margin:0; max-width:95ch}
.site-foot a{color:var(--ink-2)}

/* ------------------------------------------------------------ responsive */
@media (max-width:860px){
  .overlay{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    gap:10px; padding:10px;
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  .col-left{max-height:62%}
  /* Let the list keep its own scroll and a few rows of height, rather than
     collapsing to a single row under the header card. */
  .col-left .list{flex:1 1 auto; min-height:112px; max-height:none}
  .col-right{flex-direction:row; align-items:flex-end; justify-content:flex-end;
    align-self:end; flex-wrap:wrap}
  .tools{flex-direction:row}
  .figs{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
  .bar-row{grid-template-columns:110px 1fr 62px}
}
@media (max-width:560px){
  .pill{display:none}
  .status-label{display:none}
  .statusbar{padding:4px}
  .legend{font-size:11px; gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}