/* Gen Outages -- the Godswood UI guidelines (docs/GODSWOOD_UI_GUIDELINES.md): navy surfaces, GBE Yellow for
   interaction only, Manrope for UI, DM Mono for numbers / dates / ids. Dark by default, light by the top-bar toggle
   (static/theme.js sets <html data-theme>). Only the --gbe-* tokens carry colour; data colours never follow the theme.
   Deliberate departures are listed in the README, under Design notes. */
@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(fonts/manrope-400.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 500; font-display: swap; src: url(fonts/manrope-500.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 600; font-display: swap; src: url(fonts/manrope-600.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(fonts/manrope-700.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-400.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-500.woff2) format("woff2"); }

:root, :root[data-theme="dark"] {
  --gbe-bg: #0B1420;
  --gbe-surface: #111B26;
  --gbe-raised: #172331;
  --gbe-raised-hover: #1f2d3e;
  --gbe-border: #26313d;
  --gbe-border-strong: #3a4652;
  --gbe-text: #f4f6f8;
  --gbe-text-2: #aeb8c1;
  --gbe-muted: #7d8994;
  --gbe-accent-text: #E7BF1F;
  --gbe-focus: #E7BF1F;
  --gbe-selected: rgba(231, 191, 31, .2);
  --shadow: var(--shadow);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --gbe-bg: #eef1f4;
  --gbe-surface: #ffffff;
  --gbe-raised: #f4f6f8;
  --gbe-raised-hover: #e6eaee;
  --gbe-border: #d8dee4;
  --gbe-border-strong: #b9c2cb;
  --gbe-text: #0B1420;
  --gbe-text-2: #46535f;
  --gbe-muted: #6b7884;
  --gbe-accent-text: #8a6c00;
  --gbe-focus: #b89210;
  --gbe-selected: rgba(231, 191, 31, .3);
  --shadow: rgba(11, 20, 32, .14);
  color-scheme: light;
}
:root {
  --gbe-yellow: #E7BF1F;
  --gbe-yellow-hover: #d4ad14;
  --gbe-yellow-active: #b89210;
  --gbe-on-yellow: #0B1420;
  --gbe-danger: #ce4a4a;
  --gbe-app: #4879DB;            /* Gen Outages' tile: favicon, login mark, login card edge */
  --gbe-app-ink: #FFFFFF;
  --gbe-motion: 180ms;
  /* mixed from the tokens above, not new colours */
  --hl: color-mix(in srgb, var(--gbe-yellow) 10%, transparent);                 /* hovered / highlighted option */
  --sel-text: color-mix(in srgb, var(--gbe-accent-text) 55%, var(--gbe-text));  /* pale yellow on dark, dark gold on light */
  --scrim: color-mix(in srgb, var(--gbe-surface) 92%, transparent);            /* panels floating over the map */
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --left-w: 270px;
  --right-w: 254px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--gbe-bg); color: var(--gbe-text); font: 500 13px/1.4 var(--sans); overflow: hidden; }
#app { height: 100%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--gbe-text-2); }
button { font: inherit; color: inherit; }
svg { width: 16px; height: 16px; flex: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: 2px; }

/* scrollbars: yellow thumb on navy track */
* { scrollbar-width: thin; scrollbar-color: var(--gbe-yellow) var(--gbe-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gbe-bg); }
::-webkit-scrollbar-thumb { background: var(--gbe-yellow); border: 2px solid var(--gbe-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gbe-yellow) 75%, #fff); }
::-webkit-scrollbar-corner { background: var(--gbe-bg); }

/* ── top bar (guide 2.2) ─────────────────────────────────────────────────── */
.topbar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 6px; background: var(--gbe-surface);
  border-bottom: 1px solid var(--gbe-border); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; padding: 0 2px; border-radius: 4px; }
.brand img { display: block; width: 26px; height: 26px; }
.app-name { font-weight: 700; font-size: 13px; color: var(--gbe-text); white-space: nowrap; }
.scope { color: var(--gbe-text-2); font-size: 11px; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grow { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 11px; font-weight: 600; color: var(--gbe-accent-text); white-space: nowrap; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gbe-yellow); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0;
  background: transparent; border: 0; color: var(--gbe-text-2); cursor: pointer; transition: color var(--gbe-motion) var(--ease); }
.theme-toggle:hover { color: var(--gbe-text); }
.theme-toggle .to-dark, :root[data-theme="light"] .theme-toggle .to-light { display: none; }
:root[data-theme="light"] .theme-toggle .to-dark { display: block; }
.account { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; }
.account .email { font: 400 12px var(--mono); color: var(--gbe-text-2); white-space: nowrap; }
.signout { height: 24px; padding: 0 8px; background: transparent; border: 1px solid var(--gbe-border-strong); border-radius: 6px;
  color: var(--gbe-text-2); font: 600 12px var(--sans); cursor: pointer; transition: color var(--gbe-motion) var(--ease), border-color var(--gbe-motion) var(--ease); }
.signout:hover { color: var(--gbe-accent-text); border-color: var(--gbe-yellow); }
.top-link { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 8px; background: transparent;
  border: 0; color: var(--gbe-text-2); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 4px;
  transition: background-color var(--gbe-motion) var(--ease), color var(--gbe-motion) var(--ease); }
.top-link:hover, .top-link[aria-expanded="true"] { background: var(--gbe-raised); color: var(--gbe-text); }
.chev { width: 14px; height: 14px; color: var(--gbe-accent-text); transition: transform var(--gbe-motion) var(--ease); }
[aria-expanded="true"] > .chev, [aria-expanded="true"] .chev { transform: rotate(180deg); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px;
  background: transparent; border: 0; color: var(--gbe-text-2); cursor: pointer; border-radius: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; transition: background-color var(--gbe-motion) var(--ease), color var(--gbe-motion) var(--ease); }
.icon-btn:hover { background: var(--gbe-raised); color: var(--gbe-text); }
.icon-btn[aria-expanded="false"], .icon-btn[aria-pressed="false"] { color: var(--gbe-muted); }

/* menus (Bookmark / Help) */
.menu-wrap { position: relative; }
.menu, .dd-menu { position: fixed; z-index: 60; min-width: 180px; max-height: 320px; overflow: auto; margin: 0; padding: 4px 0;
  list-style: none; background: var(--gbe-surface); border: 1px solid var(--gbe-border-strong); box-shadow: 0 8px 24px var(--shadow); }
.menu li, .dd-menu li { padding: 6px 12px; cursor: pointer; color: var(--gbe-text); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.menu li.hl, .dd-menu li.hl { background: var(--hl); }
.dd-menu li[aria-selected="true"] { background: var(--gbe-selected); color: var(--sel-text); }
.dd-menu li .tick { width: 12px; height: 12px; border: 1px solid var(--gbe-border-strong); flex: none; position: relative; }
.dd-menu li[aria-selected="true"] .tick { background: var(--gbe-yellow); border-color: var(--gbe-yellow); }
.dd-menu li[aria-selected="true"] .tick::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px;
  border: solid var(--gbe-on-yellow); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dd-menu li.none { color: var(--gbe-muted); cursor: default; }
.dd-menu li .sub { color: var(--gbe-muted); font-family: var(--mono); font-size: 11px; margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]), .dd-menu:not([hidden]) { animation: pop var(--gbe-motion) var(--ease); }
}
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w); height: calc(100% - 38px);
  transition: grid-template-columns var(--gbe-motion) var(--ease); }
.shell.no-left { grid-template-columns: 0 minmax(0, 1fr) var(--right-w); }
.shell.no-right { grid-template-columns: var(--left-w) minmax(0, 1fr) 0; }
.shell.no-left.no-right { grid-template-columns: 0 minmax(0, 1fr) 0; }
/* each piece keeps its own column, so a closed panel leaves an empty one rather than pulling the rest left */
.shell > .left { grid-area: 1 / 1; } .shell > .main { grid-area: 1 / 2; } .shell > .right { grid-area: 1 / 3; }
/* a closing panel slides shut with its content at full width (clipped, not reflowed), then hides */
.shell > .left > * { width: calc(var(--left-w) - 1px); }
.shell > .right > * { width: calc(var(--right-w) - 1px); }
.shell.no-left .left, .shell.no-right .right { visibility: hidden; transition: visibility 0s linear var(--gbe-motion); }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } .shell.no-left .left, .shell.no-right .right { transition: none; } }
.panel { background: var(--gbe-surface); overflow-y: auto; overflow-x: hidden; }
.left { border-right: 1px solid var(--gbe-border); }
.right { border-left: 1px solid var(--gbe-border); }
.sec { padding: 12px 10px 14px; border-bottom: 1px solid var(--gbe-border); }
.lbl { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gbe-text); margin-bottom: 7px; }
.help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; background: transparent;
  border: 0; color: var(--gbe-muted); cursor: pointer; border-radius: 50%; }
.help:hover, .help:focus-visible { color: var(--gbe-accent-text); }
.help svg { width: 14px; height: 14px; }

/* radios + checks */
.radios, .checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.checks.two { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.radios label, .checks label, .inline-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--gbe-text); min-height: 22px; }
.radios input, .checks input, .inline-check input { appearance: none; margin: 0; flex: none; cursor: pointer; transition: background-color var(--gbe-motion) var(--ease), border-color var(--gbe-motion) var(--ease); }
.radios input { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gbe-border-strong); background: var(--gbe-bg); }
.radios input:checked { background: var(--gbe-yellow); border-color: var(--gbe-yellow); }
.checks input, .inline-check input { width: 9px; height: 9px; border: 1px solid var(--gbe-border-strong); background: var(--gbe-bg); }
.checks input:checked, .inline-check input:checked { background: var(--gbe-yellow); border-color: var(--gbe-yellow); }
.radios label:hover input:not(:checked), .checks label:hover input:not(:checked) { border-color: var(--gbe-yellow); }
.radios input:focus-visible, .checks input:focus-visible, .inline-check input:focus-visible { outline-offset: 2px; }
.inline-check { font-size: 12px; font-weight: 600; }
.inline-check .tz { margin-left: 3px; font-weight: 400; }

/* fields */
.chips-field, .combo, .select, .num { display: flex; align-items: stretch; background: var(--gbe-raised); border: 1px solid var(--gbe-border); min-height: 34px; }
.chips-field:hover, .combo:hover, .select:hover, .num:hover { border-color: var(--gbe-border-strong); }
.chips-field { min-height: 46px; }
.chips { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px; min-width: 0; cursor: pointer; }
.chips.under { padding: 6px 0 0; cursor: default; }
.chips.under:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 2px; background: var(--gbe-selected); border: 1px solid color-mix(in srgb, var(--gbe-yellow) 35%, transparent);
  color: var(--gbe-text); font-size: 12px; max-width: 100%; }
.chip button { display: inline-flex; padding: 0 4px; height: 100%; align-items: center; background: transparent; border: 0;
  border-right: 1px solid color-mix(in srgb, var(--gbe-yellow) 35%, transparent); color: var(--gbe-accent-text); cursor: pointer; }
.chip button svg { width: 11px; height: 11px; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips .ph { color: var(--gbe-muted); font-size: 12px; padding-left: 2px; }
.field-x, .field-chev { display: inline-flex; align-items: center; justify-content: center; width: 30px; background: transparent; border: 0;
  color: var(--gbe-muted); cursor: pointer; flex: none; }
.field-x:hover { color: var(--gbe-text); }
.field-chev { border-left: 1px solid var(--gbe-border); }
.field-chev:hover { background: var(--gbe-raised-hover); }
.select { width: 100%; height: 34px; align-items: center; justify-content: space-between; padding: 0 0 0 9px; cursor: pointer; text-align: left; font-size: 12px; }
.sel-chev { display: flex; align-items: center; justify-content: center; width: 30px; align-self: stretch; border-left: 1px solid var(--gbe-border); flex: none; }
.combo input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--gbe-text); padding: 0 9px; font: 500 12px var(--sans); }
.combo input::placeholder, .num input::placeholder { color: var(--gbe-muted); }
.date-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 22px; gap: 4px; margin-top: 6px; }
.step { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--gbe-raised); border: 0; color: var(--gbe-accent-text); cursor: pointer; height: 30px; }
.step:hover { background: var(--gbe-raised-hover); }
.step svg { width: 13px; height: 13px; }
.date { display: block; background: var(--gbe-raised); min-width: 0; }
.date input { width: 100%; min-width: 0; height: 30px; background: transparent; border: 0; color: var(--gbe-text); font: 400 12px var(--mono); padding: 0 2px 0 6px; }
.date input::-webkit-datetime-edit { padding: 0; }
.date input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.date input::-webkit-calendar-picker-indicator { filter: invert(78%) sepia(62%) saturate(600%) hue-rotate(5deg); cursor: pointer; opacity: .9;
  width: 12px; height: 12px; padding: 0; margin: 0 0 0 1px; }
:root[data-theme="light"] .date input::-webkit-calendar-picker-indicator { filter: invert(42%) sepia(80%) saturate(900%) hue-rotate(15deg) brightness(.85); }
.date input::-webkit-datetime-edit-text { padding: 0; }
.date input::-webkit-datetime-edit-year-field, .date input::-webkit-datetime-edit-month-field, .date input::-webkit-datetime-edit-day-field { padding: 0; }
.cs-row { display: flex; align-items: center; gap: 5px; }
.cs-row .date { flex: 1 1 0; min-width: 0; }
.cs-row .num { flex: none; }
.cs-row.off { opacity: .45; }
.colon { color: var(--gbe-text-2); font-weight: 700; }
.tz { color: var(--gbe-muted); font-size: 11px; }
.num { min-height: 30px; width: 50px; background: var(--gbe-raised); }
.num.wide { width: auto; flex: 1; min-width: 0; }
.num.full { width: 100%; }
.num input { width: 100%; min-width: 0; background: transparent; border: 0; color: var(--gbe-text); font: 400 12px var(--mono); padding: 0 2px 0 7px; -moz-appearance: textfield; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spin { display: flex; flex-direction: column; border-left: 1px solid var(--gbe-border); }
.spin button { flex: 1; display: flex; align-items: center; justify-content: center; width: 20px; padding: 0; background: transparent; border: 0; color: var(--gbe-accent-text); cursor: pointer; }
.spin button:hover { background: var(--gbe-raised-hover); }
.spin button svg { width: 10px; height: 10px; }
.spin button:first-child svg { transform: rotate(180deg); }
.cap-row { display: flex; align-items: center; gap: 6px; }
.cap-arrow { color: var(--gbe-text); width: 14px; height: 14px; }

/* ── main ────────────────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gbe-bg); }
.tabs-bar { display: flex; align-items: flex-end; justify-content: space-between; height: 44px; padding: 0 8px 0 10px; background: var(--gbe-surface); border-bottom: 1px solid var(--gbe-border); }
.tabs { display: flex; gap: 6px; height: 100%; }
.tabs [role="tab"] { position: relative; background: transparent; border: 0; padding: 0 10px; height: 100%; font-size: 15px; font-weight: 500;
  color: var(--gbe-text-2); cursor: pointer; transition: color var(--gbe-motion) var(--ease); }
.tabs [role="tab"]:hover { color: var(--gbe-text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--gbe-text); }
.tabs [role="tab"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--gbe-yellow);
  transform: scaleX(0); transition: transform var(--gbe-motion) var(--ease); }
.tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tools { display: flex; align-items: center; gap: 2px; align-self: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600;
  background: var(--gbe-raised); color: var(--gbe-text); border: 1px solid var(--gbe-border-strong); border-radius: 0; cursor: pointer;
  transition: background-color var(--gbe-motion) var(--ease), border-color var(--gbe-motion) var(--ease); }
.btn:hover { background: var(--gbe-raised-hover); }
.btn.primary { background: var(--gbe-yellow); color: var(--gbe-on-yellow); border-color: var(--gbe-yellow); }
.btn.primary:hover { background: var(--gbe-yellow-hover); border-color: var(--gbe-yellow-hover); }
.rt { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; background: transparent; border: 0;
  color: var(--gbe-text-2); font: 600 11px var(--sans); cursor: pointer; }
.rt:hover { background: var(--gbe-raised); color: var(--gbe-text); }
.rt .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gbe-muted); transition: background-color var(--gbe-motion) var(--ease); }
.rt[aria-pressed="true"] { color: var(--gbe-text); }
.rt[aria-pressed="true"] .dot { background: var(--gbe-yellow); }
.sumline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; padding: 3px 10px; font-size: 12px; color: var(--gbe-text); }
.sumline #summary { white-space: nowrap; }
.notice { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gbe-text-2); }
.notice.err { color: var(--gbe-danger); }
.view { flex: 1; min-height: 0; position: relative; }
.status { height: 24px; display: flex; align-items: center; gap: 14px; padding: 0 10px; font-size: 11px; color: var(--gbe-muted);
  background: var(--gbe-surface); border-top: 1px solid var(--gbe-border); white-space: nowrap; overflow: hidden; }
.status b { color: var(--gbe-text-2); font-weight: 500; }
.busy .table-wrap, .busy #map { opacity: .55; transition: opacity var(--gbe-motion) var(--ease); }

/* ── table ───────────────────────────────────────────────────────────────── */
.grid-bar { position: absolute; top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.qf { width: 240px; height: 26px; padding: 0 9px; background: var(--gbe-raised); border: 1px solid var(--gbe-border); color: var(--gbe-text); font: 500 12px var(--sans); }
.qf::placeholder { color: var(--gbe-muted); }
.qf:focus { border-color: var(--gbe-yellow); outline: none; }
.cf-note { display: inline-flex; align-items: center; gap: 6px; color: var(--gbe-text-2); font-size: 12px; }
.cf-note svg { width: 12px; height: 12px; color: var(--gbe-accent-text); }
.link-btn { all: unset; color: var(--gbe-accent-text); cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: 2px; }
.table-wrap { position: absolute; inset: 36px 0 0; overflow: auto; }
.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; }
.grid th { position: sticky; top: 0; z-index: 2; background: var(--gbe-surface); color: var(--gbe-text-2); font-weight: 600; text-align: left;
  height: 28px; padding: 0; border-bottom: 1px solid var(--gbe-border-strong); border-right: 1px solid var(--gbe-border); white-space: nowrap; user-select: none; }
.grid th .th { display: flex; align-items: stretch; height: 28px; }
.grid th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; height: 100%; }
.grid th button:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: -2px; }
.grid th .th-sort { flex: 1; min-width: 0; padding: 0 2px 0 8px; overflow: hidden; }
.grid th.r .th-sort { justify-content: flex-end; }
.grid th .th-menu { flex: none; width: 22px; justify-content: center; color: var(--gbe-muted); opacity: 0; }
.grid th:hover .th-menu, .grid th .th-menu:focus-visible, .grid th .th-menu[aria-expanded="true"] { opacity: 1; }
.grid th .th-menu:hover, .grid th .th-menu[aria-expanded="true"] { color: var(--gbe-text); background: var(--gbe-raised); }
.grid th .th-menu svg { width: 13px; height: 13px; }
.grid th .fi { display: none; width: 11px; height: 11px; color: var(--gbe-accent-text); flex: none; }
.grid th.filtered .fi { display: inline; }
.grid th .th-resize { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: 1; cursor: col-resize; }
.grid th .th-resize:hover { background: linear-gradient(var(--gbe-yellow), var(--gbe-yellow)) center / 2px 100% no-repeat; }
.col-resizing, .col-resizing * { cursor: col-resize !important; user-select: none; }
.col-moving, .col-moving * { cursor: grabbing !important; user-select: none; }
.th-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; padding: 5px 10px; background: var(--gbe-surface);
  border: 1px solid var(--gbe-yellow); color: var(--gbe-text); font: 600 12px var(--sans); box-shadow: 0 6px 18px var(--shadow); }
.th-drop { position: fixed; z-index: 79; width: 2px; background: var(--gbe-yellow); pointer-events: none; }

/* column menu: Column / Filter / Columns */
.colmenu { position: fixed; z-index: 70; width: 250px; background: var(--gbe-surface); border: 1px solid var(--gbe-border-strong);
  box-shadow: 0 8px 24px var(--shadow); font-size: 12px; }
.cm-tabs { display: flex; border-bottom: 1px solid var(--gbe-border); }
.cm-tabs button { all: unset; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; color: var(--gbe-text-2);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cm-tabs button:hover { color: var(--gbe-text); background: var(--gbe-raised); }
.cm-tabs button[aria-selected="true"] { color: var(--gbe-text); border-bottom-color: var(--gbe-yellow); }
.cm-tabs button:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: -2px; }
.cm-tabs svg { width: 13px; height: 13px; }
.cm-panel { padding: 6px 0 8px; }
.cm-list { display: flex; flex-direction: column; }
.cm-item { all: unset; padding: 6px 14px; color: var(--gbe-text); cursor: pointer; }
.cm-item:hover, .cm-item:focus-visible { background: var(--hl); }
.cm-item:disabled { color: var(--gbe-muted); cursor: default; background: none; }
.cm-panel hr { border: 0; border-top: 1px solid var(--gbe-border); margin: 5px 0; }
.cm-search { display: block; width: calc(100% - 28px); height: 28px; margin: 4px 14px 8px; padding: 0 9px; background: var(--gbe-raised);
  border: 1px solid var(--gbe-border); color: var(--gbe-text); font: 500 12px var(--sans); }
.cm-search:focus { border-color: var(--gbe-yellow); outline: none; }
.cm-vals { max-height: 250px; overflow: auto; padding: 0 14px; display: flex; flex-direction: column; }
.cm-vals label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; min-width: 0; }
.cm-vals.checks { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
.cm-vals > * { flex: none; }
.cm-vals.checks label { font-size: 12px; min-height: 0; }
.cm-vals .cm-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-vals .cm-v.blank { color: var(--gbe-muted); font-style: italic; }
.cm-vals .ct { margin-left: auto; padding-left: 8px; color: var(--gbe-muted); font: 11px var(--mono); }
.cm-note { padding: 4px 0; color: var(--gbe-muted); }
.cm-btns { display: flex; gap: 6px; padding: 10px 14px 2px; }
.cm-btns .btn { flex: 1; height: 26px; padding: 0 8px; }
.grid th .ar { width: 10px; height: 10px; color: var(--gbe-accent-text); opacity: 0; transition: transform var(--gbe-motion) var(--ease); }
.grid th[aria-sort] .ar { opacity: 1; }
.grid th[aria-sort="ascending"] .ar { transform: rotate(180deg); }
.grid td { height: 26px; padding: 0 8px; border-bottom: 1px solid var(--gbe-border); border-right: 1px solid color-mix(in srgb, var(--gbe-border) 50%, transparent); white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.grid tbody tr.row { cursor: pointer; }
.grid tbody tr.row { --row-bg: var(--gbe-bg); }
.grid tbody tr.row:nth-child(even of .row) { --row-bg: var(--gbe-raised); }
.grid tbody tr.row:hover { --row-bg: var(--gbe-raised-hover); }
.grid tbody tr.row td { background-color: var(--row-bg); }
.grid tbody tr.row.open td { background: linear-gradient(var(--hl), var(--hl)), var(--gbe-bg); }   /* opaque, so pinned cells hide what scrolls under */
.grid tbody tr.row:focus-visible td { box-shadow: inset 0 1px 0 var(--gbe-focus), inset 0 -1px 0 var(--gbe-focus); }
.grid td.r { text-align: right; }
.grid td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.grid td.mw { font-weight: 500; color: var(--gbe-text); }
.grid td.na { color: var(--gbe-muted); }
.grid td.work { max-width: 420px; color: var(--gbe-text-2); }
.grid td .fd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.grid td .tag { font: 500 10px var(--mono); color: var(--gbe-muted); margin-left: 4px; }
.grid td.twin { color: var(--gbe-muted); }
.grid td.unpl { color: var(--gbe-text); font-weight: 600; }
.grid td.pl { color: var(--gbe-text-2); }
.grid tr.detail td { white-space: normal; max-width: none; background: var(--gbe-surface); padding: 10px 14px 12px; cursor: default; }
.det { display: grid; grid-template-columns: minmax(280px, 640px) minmax(220px, 1fr); gap: 8px 28px; font-size: 12px; }
.det .work-full { color: var(--gbe-text); line-height: 1.5; white-space: pre-wrap; }
.det dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.det dt { color: var(--gbe-muted); }
.det dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--gbe-text-2); }
.det .acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.det a { color: var(--gbe-accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.det a:hover { text-decoration: underline; }
.det a svg { width: 12px; height: 12px; }
.empty { padding: 40px 20px; text-align: center; color: var(--gbe-text-2); }
.more { padding: 10px; text-align: center; }

/* ── by zone & fuel ──────────────────────────────────────────────────────── */
#view-sum { overflow: auto; }
.sum { padding: 14px 16px 24px; }
.sum-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.sum-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--gbe-text); }
.sum-sub { margin-top: 3px; color: var(--gbe-text-2); font-size: 12px; }
.sum-sub b { color: var(--gbe-text); font-weight: 500; }
.sum-legend { display: flex; gap: 16px; color: var(--gbe-text-2); font-size: 12px; }
.sum-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--gbe-border-strong); }
.seg button { height: 26px; padding: 0 12px; background: transparent; border: 0; color: var(--gbe-text-2); font: 600 12px var(--sans); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--gbe-border-strong); }
.seg button:hover { color: var(--gbe-text); background: var(--gbe-raised); }
.seg button[aria-checked="true"] { background: var(--gbe-selected); color: var(--sel-text); }
.seg button:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: -2px; }
.sum-legend span, .sum-tip div { display: inline-flex; align-items: center; gap: 6px; }
.key-bar { display: inline-block; width: 10px; height: 10px; border-radius: 2px 2px 0 0; background: #3987e5; }
.key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: #d95926; }
.key-line.pjm { background: #199e70; }
.key-line.pjm.last { opacity: .45; }
.sum-chart { width: 100%; min-height: 260px; }
.sum-svg { display: block; }
.sum-svg .grid-l { stroke: var(--gbe-border); stroke-width: 1; }
.sum-svg .ax { fill: var(--gbe-muted); font: 11px var(--mono); }
.sum-svg .xhair { stroke: var(--gbe-border-strong); stroke-width: 1; }
.sum-svg .pick { fill: color-mix(in srgb, var(--gbe-text-2) 9%, transparent); }
.sum-svg .pick-l { fill: var(--gbe-text-2); font: 600 10px var(--sans); }
.sum-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 3px; padding: 8px 10px; background: var(--gbe-surface);
  border: 1px solid var(--gbe-border-strong); box-shadow: 0 8px 24px var(--shadow); font-size: 12px; color: var(--gbe-text-2); white-space: nowrap; }
.sum-tip .d { color: var(--gbe-text); font-weight: 600; }
.sum-tip b { color: var(--gbe-text); font-weight: 500; }
.sum-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 18px; }
.sum-tables h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gbe-text); }
.sum-tables h3 .hint { font-size: 11px; font-weight: 500; color: var(--gbe-muted); }
.sum-tables h3 .link-btn { margin-left: auto; font-size: 12px; font-weight: 600; }
.sum-ctrl-row { display: flex; align-items: center; gap: 8px; }
#sum-reset { height: 28px; }
#sum-reset:disabled { color: var(--gbe-muted); border-color: var(--gbe-border); cursor: default; background: transparent; }
/* a row is a checkbox: the same square as the side panel's */
.sum-table .box { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1px solid var(--gbe-border-strong); background: var(--gbe-bg);
  vertical-align: 0; transition: background-color var(--gbe-motion) var(--ease), border-color var(--gbe-motion) var(--ease); }
.sum-table tr:hover .box { border-color: var(--gbe-yellow); }
.sum-table tr.on .box { background: var(--gbe-yellow); border-color: var(--gbe-yellow); }
.sum-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sum-table th { text-align: left; color: var(--gbe-text-2); font-weight: 600; padding: 0 10px 6px 0; border-bottom: 1px solid var(--gbe-border-strong); }
.sum-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--gbe-border); color: var(--gbe-text); }
.sum-table th:last-child, .sum-table td:last-child { padding-right: 0; }
.sum-table .n { text-align: right; }
.sum-table td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sum-table td.na { color: var(--gbe-muted); }
.sum-table tbody tr[data-key] { cursor: pointer; }
.sum-table tbody tr[data-key]:hover td { background: var(--gbe-raised); }
.sum-table tbody tr.on td { background: var(--hl); }
.sum-table tbody tr.on td:first-child { box-shadow: inset 2px 0 0 var(--gbe-yellow); }
.sum-table tbody tr:focus-visible { outline: 2px solid var(--gbe-focus); outline-offset: -2px; }

/* ── map ─────────────────────────────────────────────────────────────────── */
#map { position: absolute; inset: 0; background: var(--gbe-bg); }
.map-tools { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; background: var(--scrim); border: 1px solid var(--gbe-border); z-index: 3; }
.map-tools .icon-btn { width: 32px; height: 32px; }
.legend { position: absolute; left: 10px; bottom: 26px; z-index: 3; background: var(--scrim); border: 1px solid var(--gbe-border);
  padding: 8px 10px; font-size: 11px; color: var(--gbe-text-2); max-width: 260px; }
.legend .row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.legend .fuels { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin-top: 6px; }
.legend .mk { width: 15px; height: 15px; overflow: visible; }
.legend .note { color: var(--gbe-muted); margin-top: 6px; }
.map-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gbe-text-2); padding: 20px; text-align: center; }
.map-msg.bar { inset: 10px 60px auto; z-index: 3; padding: 8px 12px; background: var(--scrim); border: 1px solid var(--gbe-border); pointer-events: none; }
.maplibregl-popup-content { background: var(--gbe-surface) !important; color: var(--gbe-text); border: 1px solid var(--gbe-border-strong); border-radius: 0 !important;
  padding: 12px 14px !important; font: 500 12px/1.4 var(--sans); box-shadow: 0 8px 24px var(--shadow) !important; }
.maplibregl-popup-tip { border-top-color: var(--gbe-border-strong) !important; border-bottom-color: var(--gbe-border-strong) !important; }
.maplibregl-popup-close-button { top: 8px; right: 8px; width: 22px; height: 22px; padding: 0; color: var(--gbe-text-2); font-size: 18px; line-height: 20px; }
.maplibregl-popup-close-button:hover { background: var(--gbe-raised); color: var(--gbe-text); }
/* the title, the card and the table all start on the same left edge */
.pop h3, .pop-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.pop.card dl { display: grid; grid-template-columns: repeat(4, max-content); gap: 5px 10px; margin: 0; font-size: 12px; }
.pop.card dt { color: var(--gbe-text-2); }
.pop.card dd { margin: 0; font-family: var(--mono); white-space: nowrap; }
.pop.card dd:nth-of-type(odd) { margin-right: 16px; }
/* the plant name is a link to its rows in the Data Table: it reads as one before the hover */
.pop-title { display: block; margin-right: 28px; padding: 0; border: 0; background: none; color: var(--gbe-accent-text); text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color var(--gbe-motion) var(--ease); }
.pop-title:hover, .pop-title:focus-visible { color: var(--gbe-text); }
.pop-scroll { max-height: 260px; overflow: hidden auto; }
.pop table { border-collapse: collapse; font-size: 12px; }
.pop th { position: sticky; top: 0; background: var(--gbe-surface); color: var(--gbe-text-2); font-weight: 600; text-align: left; padding: 0 16px 6px 0;
  border-bottom: 1px solid var(--gbe-border-strong); white-space: nowrap; }
.pop td { padding: 6px 16px 6px 0; white-space: nowrap; border-bottom: 1px solid var(--gbe-border); }
.pop tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.pop th:last-child, .pop td:last-child { padding-right: 0; }
.pop .n { text-align: right; }
.pop td.n { font-family: var(--mono); }
.pop-card .maplibregl-popup-content { pointer-events: none; }
.maplibregl-ctrl-group { background: var(--scrim) !important; border: 1px solid var(--gbe-border); border-radius: 0 !important; box-shadow: none !important; }
.maplibregl-ctrl-group button { width: 32px !important; height: 32px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--gbe-border) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(.85); }
:root[data-theme="light"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
.maplibregl-ctrl-attrib { background: var(--scrim) !important; color: var(--gbe-muted); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--gbe-text-2) !important; }

/* ── tooltip + dialogs ───────────────────────────────────────────────────── */
.tip { position: fixed; z-index: 80; max-width: 300px; padding: 7px 9px; background: var(--gbe-surface); border: 1px solid var(--gbe-border-strong);
  color: var(--gbe-text); font-size: 12px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px var(--shadow); }
.dialog-back { position: fixed; inset: 0; z-index: 70; background: rgba(5, 10, 16, .6); display: flex; align-items: flex-start; justify-content: center; padding: 70px 16px 16px; }
.dialog { width: min(760px, 100%); max-height: calc(100vh - 100px); overflow: auto; background: var(--gbe-surface); border: 1px solid var(--gbe-border-strong);
  padding: 14px 16px 16px; box-shadow: 0 16px 40px var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .dialog-back:not([hidden]) .dialog { animation: pop var(--gbe-motion) var(--ease); } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dialog h2 { margin: 0; font-size: 15px; font-weight: 700; }
.dialog p { margin: 0 0 10px; font-size: 12px; }
.code-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 12px; }
.code-row pre { flex: 1; margin: 0; padding: 8px 10px; background: var(--gbe-bg); border: 1px solid var(--gbe-border); font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--sel-text); }
.about { font-size: 13px; line-height: 1.55; color: var(--gbe-text-2); }
.about h3 { color: var(--gbe-text); font-size: 13px; margin: 12px 0 4px; }
.about p { margin: 0 0 8px; }
.about .mono { color: var(--gbe-text); font-size: 12px; }

/* ── sign-in (guide 2.6): a loading mark until /api/auth/me answers, then the login card ─────────────── */
.boot, .login { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--gbe-bg); overflow: auto; }
.boot { place-content: center; justify-items: center; gap: 10px; }
.boot-text { font: 400 12px/1.5 var(--mono); color: var(--gbe-muted); }
.tile { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px; background: var(--gbe-app);
  color: var(--gbe-app-ink); font: 700 26px/1 var(--sans); letter-spacing: -.5px; }
.login .theme-toggle { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; background: var(--gbe-surface);
  border: 1px solid var(--gbe-border-strong); border-radius: 8px; transition: border-color var(--gbe-motion) var(--ease), color var(--gbe-motion) var(--ease); }
.login .theme-toggle:hover { border-color: var(--gbe-yellow); }
.login-card { width: min(400px, 100%); padding: 32px 28px 28px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--gbe-surface); border: 1px solid var(--gbe-border); border-top: 2px solid var(--gbe-app); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .login-card { animation: fade-up var(--gbe-motion) ease-out; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.login-card .tile { margin-bottom: 16px; }
.login-title { margin: 0; font: 600 20px/1.3 var(--sans); color: var(--gbe-text); }
.login-sub { margin: 6px 0 0; max-width: 300px; font: 400 12px/1.5 var(--mono); color: var(--gbe-text-2); }
/* Google's button is an iframe: a dark colour scheme would paint a white box behind it */
.login-google { margin-top: 24px; min-height: 44px; display: grid; place-items: center; color-scheme: normal; }
.login-note { margin-top: 12px; font-size: 12px; color: var(--gbe-muted); }
.login-error { margin-top: 12px; font-size: 13px; color: var(--gbe-danger); }

/* ── narrow screens: side panels slide over the work surface ──────────────── */
@media (max-width: 900px) {
  .shell, .shell.no-left, .shell.no-right, .shell.no-left.no-right { grid-template-columns: minmax(0, 1fr); }
  .shell > .main { grid-area: 1 / 1; }
  .shell > .left > *, .shell > .right > * { width: auto; }
  .shell.no-left .left, .shell.no-right .right { display: none; }
  .panel { position: fixed; top: 38px; bottom: 0; width: min(300px, 86vw); z-index: 40; box-shadow: 0 0 30px var(--shadow); }
  .left { left: 0; } .right { right: 0; }
  .shell:not(.no-left) .left, .shell:not(.no-right) .right { display: block; }
  .scope { margin-left: 4px; }
  .account .email { display: none; }
  .tools .rt, .tools #btn-csv { display: none; }
}
.scope .short { display: none; }
@media (max-width: 600px) {
  .scope .long { display: none; }
  .scope .short { display: inline; }
  .menu-wrap:has(#m-bookmark) { display: none; }
  .sumline { flex-wrap: wrap; }
  .sumline #summary { white-space: normal; }
}
@media (pointer: coarse) {
  .icon-btn, .top-link, .btn, .rt, .step, .tabs [role="tab"], .theme-toggle, .signout { min-height: 44px; }
  .radios label, .checks label { min-height: 44px; }
  .grid td { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }