/*
 * SecurityOak status site stylesheet. It is the visual mockup version 2 style block (design
 * tokens, light theme, both dark blocks, every component class) with two changes: the mockup
 * banner rule is now `.notice`, the stale-data banner, and every inline style of the mockup
 * became a utility class below, because the content security policy forbids inline styles.
 * Loaded by every page through the shared shell (site/templates/layout.html).
 */

/* Design tokens, light theme: sibling page tokens plus red, blue (maintenance) and grey (unknown) */
:root {
  color-scheme:light;
  --bg:#f6f8f6; --surface:#ffffff; --text:#101914; --muted:#56645b; --line:#dbe3dd;
  --accent:#1f6f4a; --accent-strong:#175a3b; --accent-soft:#e3f1e9;
  --warn:#8a5a00; --warn-soft:#fff4dc;
  --bad:#b3261e; --bad-soft:#fde9e7;
  --info:#1d5a9e; --info-soft:#e4eefb;
  --unk:#5b6670; --unk-soft:#eceff1;
  --shadow:0 1px 2px rgba(16,25,20,.05),0 10px 30px rgba(16,25,20,.07);
}
/* Design tokens, dark theme when the system prefers dark and the visitor has not forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#0d1410; --surface:#131c16; --text:#e6ede8; --muted:#9aa89f; --line:#2c3b33;
    --accent:#4cc38a; --accent-strong:#7ad4a6; --accent-soft:#14301f;
    --warn:#f3c56b; --warn-soft:#2d2410;
    --bad:#ff8f86; --bad-soft:#3a1714;
    --info:#8dbcff; --info-soft:#13243b;
    --unk:#b0bac1; --unk-soft:#1f282c;
    --shadow:none;
  }
}
/* Design tokens, dark theme when the visitor forces dark with the toggle or the query parameter */
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0d1410; --surface:#131c16; --text:#e6ede8; --muted:#9aa89f; --line:#2c3b33;
  --accent:#4cc38a; --accent-strong:#7ad4a6; --accent-soft:#14301f;
  --warn:#f3c56b; --warn-soft:#2d2410;
  --bad:#ff8f86; --bad-soft:#3a1714;
  --info:#8dbcff; --info-soft:#13243b;
  --unk:#b0bac1; --unk-soft:#1f282c;
  --shadow:none;
}

/* Base elements */
* { box-sizing:border-box; }
html { scroll-padding-top:130px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-wrap:anywhere; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--accent-strong); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
h1 { font-size:clamp(24px,4vw,32px); line-height:1.15; letter-spacing:-.025em; font-weight:700; margin:0 0 6px; }
h2 { font-size:17px; letter-spacing:-.01em; font-weight:600; margin:0; }
h3 { font-size:15px; font-weight:600; margin:0; }
p { margin:0 0 10px; }
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.num { font-variant-numeric:tabular-nums; }

/* Notice banner under the top bar: stale-data warning and load-failure message (hidden until used) */
.notice[hidden] { display:none; }
.notice { background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line); font-size:13px; font-weight:500; text-align:center; padding:4px 16px; }

/* Sticky top bar with brand, theme toggle and navigation (wraps on desktop, scrolls sideways on phones) */
header { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; height:52px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--text); text-decoration:none; white-space:nowrap; }
.brand svg { width:24px; height:24px; flex:none; }
.theme { font:inherit; font-size:13px; font-weight:500; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:4px 10px; cursor:pointer; white-space:nowrap; }
.theme:hover { border-color:var(--accent); }
nav { border-top:1px solid var(--line); }
nav ul { display:flex; flex-wrap:wrap; gap:0 2px; list-style:none; margin:0; padding:0; }
nav a { display:block; padding:7px 10px; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
nav a:hover { color:var(--text); }
nav a[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
@media (max-width:760px) {
  nav { overflow-x:auto; scrollbar-width:thin; }
  nav ul { flex-wrap:nowrap; width:max-content; }
  nav a { padding:9px 12px; }
}

/* Page heading row: title on the left, freshness stamp on the right */
main { padding:20px 16px 8px; min-height:60vh; }
.pagehead { display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-bottom:14px; }
.updated { font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.updated::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.lede { color:var(--muted); margin:0 0 14px; max-width:75ch; }

/* Status badges: always a shape plus a word, never color alone */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:2px 8px 2px 6px; border:1px solid transparent; border-radius:14px; max-width:100%; white-space:normal; line-height:1.3; }
.badge svg { width:14px; height:14px; flex:none; }
.s-operational { color:var(--accent); background:var(--accent-soft); }
.s-degraded, .s-delay { color:var(--warn); background:var(--warn-soft); }
.s-outage, .s-severe { color:var(--bad); background:var(--bad-soft); }
.s-maintenance { color:var(--info); background:var(--info-soft); }
.s-unknown { color:var(--unk); background:var(--unk-soft); }
.s-nofeed { color:var(--unk); background:var(--unk-soft); border:1px dashed var(--unk); }
.s-disagree { color:var(--text); background:transparent; border:1.5px dashed var(--bad); }

/* Verdict strip at the top of the overview */
.verdict { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--warn); border-radius:10px; padding:12px 14px; margin-bottom:14px; box-shadow:var(--shadow); }
.verdict .badge { flex:none; white-space:nowrap; }
.verdict.clear { border-left-color:var(--accent); }
.verdict strong { font-size:18px; letter-spacing:-.01em; }

/* Category summary tiles: compact grid of ten */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:8px; margin-bottom:20px; }
.tile { display:flex; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--text); text-decoration:none; box-shadow:var(--shadow); }
.tile:hover { border-color:var(--accent); color:var(--text); }
.tile .name { font-weight:600; font-size:14px; }
.tile .count { font-size:14px; line-height:1.3; color:var(--muted); }
.tile .count b { color:var(--text); font-size:16px; }

/* Section headings with a thin rule */
.sect { display:flex; align-items:baseline; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin:22px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }

/* Compact list rows shared by every page */
.list { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.item { display:grid; grid-template-columns:150px minmax(150px,220px) minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:8px 12px; border-top:1px solid var(--line); font-size:14px; }
.item:first-child { border-top:0; }
.item .headline { color:var(--muted); }
.item .headline em { font-style:normal; font-weight:600; color:var(--text); margin-left:6px; }
.item .meta { color:var(--muted); font-size:12.5px; text-align:right; white-space:nowrap; }
.item .meta a { margin-left:8px; font-weight:500; }
.item .nm { font-weight:600; }
.item .nm .sub { display:block; font-weight:400; font-size:12.5px; color:var(--muted); }
.item.problem { background:color-mix(in srgb, var(--surface) 92%, var(--warn)); }
.item.expand { padding:0; display:block; }
.item.expand > .row { display:grid; grid-template-columns:150px minmax(150px,220px) minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:8px 12px; width:100%; font:inherit; color:inherit; background:none; border:0; text-align:left; cursor:pointer; }
.item.expand > .row:hover { background:var(--accent-soft); }
.item.expand .caret { display:inline-block; transition:transform .15s; margin-right:4px; }
.item.expand .row[aria-expanded="true"] .caret { transform:rotate(90deg); }
.detail { padding:8px 12px 10px 12px; border-top:1px dashed var(--line); font-size:13.5px; }
.detail ul { margin:6px 0 0; padding-left:18px; color:var(--muted); }
.detail[hidden] { display:none; }
.detail.linkline { border-top:0; padding-top:0; }
@media (max-width:700px) {
  .item, .item.expand > .row { grid-template-columns:auto minmax(0,1fr); }
  .item .headline, .item .meta { grid-column:1 / -1; text-align:left; white-space:normal; }
}

/* Filter controls and group headings */
.controls { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:6px; }
.controls input[type="search"] { flex:1 1 220px; min-width:0; font:inherit; font-size:14px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); }
.controls input[type="search"]::placeholder { color:var(--muted); opacity:1; }
.controls label { display:inline-flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
input[type="checkbox"] { accent-color:var(--accent); width:16px; height:16px; }
.group-title { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:18px 0 6px; }
.empty { padding:14px; color:var(--muted); font-size:14px; }

/* Cards, comparison blocks and reachability grid */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow); }
.card.disagree { border:1.5px dashed var(--bad); }
.card .top { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; }
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; }
@media (max-width:480px) { .compare { grid-template-columns:1fr; } }
.compare > div { border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--bg); }
.compare .label { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.probes { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.probe { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; display:flex; flex-direction:column; gap:4px; }
.probe b { font-weight:600; }

/* Summary figures and tables */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:6px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.stat b { display:block; font-size:26px; letter-spacing:-.02em; line-height:1.15; }
.stat span { font-size:13px; color:var(--muted); }
.tablewrap { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:7px 12px; border-top:1px solid var(--line); vertical-align:top; }
tr:first-child td { border-top:0; }
td.dim { color:var(--muted); }
.code { font-weight:700; font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.statehead { font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:6px 12px; background:var(--bg); border-top:1px solid var(--line); }
.statehead:first-child { border-top:0; }
.alert { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:8px 12px; border-top:1px solid var(--line); font-size:14px; }
.alert:first-child { border-top:0; }
.alert .when { color:var(--muted); font-size:12.5px; white-space:nowrap; text-align:right; }
@media (max-width:600px) { .alert { grid-template-columns:auto minmax(0,1fr); } .alert .when { grid-column:1 / -1; text-align:left; white-space:normal; } }

/* Power grid capacity bar and space-weather scale pips */
.meter { height:12px; border-radius:6px; background:var(--bg); border:1px solid var(--line); overflow:hidden; margin:6px 0 4px; }
.meter i { display:block; height:100%; background:var(--accent); }
.meter.watch i { background:var(--warn); }
.meter.emergency i { background:var(--bad); }
.pips { display:flex; gap:3px; margin:8px 0 4px; }
.pips i { flex:1; height:10px; border-radius:3px; background:var(--bg); border:1px solid var(--line); }
.pips i.on { background:var(--warn); border-color:var(--warn); }
.pips i.zero { background:var(--accent); border-color:var(--accent); }
.bignum { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }

/* Footer with the standing disclaimer */
footer { border-top:1px solid var(--line); margin-top:28px; padding:16px 0 40px; color:var(--muted); font-size:13px; }
footer p { max-width:80ch; }

/* Skip link: hidden off screen until it receives keyboard focus, then shown at the top left */
.skip { position:absolute; left:8px; top:-60px; z-index:20; background:var(--surface); color:var(--text); border:1px solid var(--accent); border-radius:8px; padding:8px 12px; font-weight:600; text-decoration:none; }
.skip:focus { top:8px; }

/* The page area is focused by the skip link; no outline around the whole area, only around controls */
main:focus { outline:none; }

/* Utility classes that replace the mockup's inline style attributes (inline styles are blocked by the content security policy) */
.updated[hidden] { display:none; }
/* Top margin of 4 pixels (mockup: margin-top:4px on the group title under "Active right now") */
.mt-4 { margin-top:4px; }
/* Top margin of 6 pixels (mockup: margin-top:6px on credit and note lines) */
.mt-6 { margin-top:6px; }
/* Top margin of 6 pixels with no side or bottom margin (mockup: margin:6px 0 0 on detail lines inside cards) */
.mt-6-flush { margin:6px 0 0; }
/* Top margin of 10 pixels (mockup: margin-top:10px on the line under the airport table) */
.mt-10 { margin-top:10px; }
/* Top margin of 10 pixels with no side or bottom margin (mockup: margin:10px 0 0 on the Microsoft figures and out-of-band note) */
.mt-10-flush { margin:10px 0 0; }
/* Top margin of 12 pixels (mockup: margin-top:12px on the official sources line) */
.mt-12 { margin-top:12px; }
/* No margin at all (mockup: margin:0 on the last note in a card) */
.m-0 { margin:0; }
/* Margin of 8 pixels above and 6 below, none at the sides (mockup: margin:8px 0 6px on a power grid notice) */
.my-8-6 { margin:8px 0 6px; }
/* Normal font weight inside a heading (mockup: font-weight:400 on the region name) */
.weight-normal { font-weight:400; }
/* Flex row with the items pushed to both ends and wrapping (mockup: demand and capacity row on a power grid card) */
.row-between { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
/* Flex row with vertically centred items, wide gap and wrapping (mockup: the planetary K index row) */
.row-center { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
/* Label wrapping a checkbox, shown inline (mockup: the "show only problems" switch) */
.inline-control { display:inline-flex; gap:6px; align-items:center; cursor:pointer; font-size:14px; color:var(--text); }