/* Godswood UI (GODSWOOD_UI_GUIDE.md, from Nodal Profile's static/css/base.css). Rules use the --gw-* tokens only, so
   light mode is just the second block. Data colours (price bands, constraint and outage colours, voltage lines) live in
   the JS and never change with the theme. Layout and density are the app's own: a reskin, not a redesign. */
:root {
  --gw-bg-canvas: #0B1420;      /* page background */
  --gw-bg-surface: #111B26;     /* panels, top bar, cards */
  --gw-bg-elevated: #1A2836;    /* inputs, buttons, table header */
  --gw-bg-hover: #213245;
  --gw-border-subtle: #263544;
  --gw-border-strong: #405264;
  --gw-text-primary: #F2F5F8;
  --gw-text-secondary: #B6C2CF;
  --gw-text-muted: #91A1B3;
  --gw-accent: #E7BF1F;         /* GBE Yellow, for interaction only */
  --gw-accent-hover: #F3D25A;
  --gw-accent-text: #E7BF1F;    /* yellow used as text */
  --gw-on-accent: #0B1420;      /* text on a yellow or identity fill */
  --gw-focus: #E7BF1F;
  --gw-selected: #343424;
  --gw-selected-hover: #3F3D26;
  --gw-selected-border: #776628;
  --gw-danger-fill: #9F2F2A;
  --gw-danger-text: #F08A80;
  --gw-overlay: rgba(11, 20, 32, .55);
  --gw-shadow: rgba(0, 0, 0, .45);
  --app-brand: #FF3838;         /* identity: favicon, login mark and login card edge only */
  --font-ui: Manrope, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", Consolas, monospace;
  --picker-selected-text: color-mix(in srgb, var(--gw-accent) 72%, white);
  color-scheme: dark;
}

/* Light: same yellow for fills, darker gold where yellow is text or focus. */
:root[data-theme="light"] {
  --gw-bg-canvas: #F4F6F9;
  --gw-bg-surface: #FFFFFF;
  --gw-bg-elevated: #EDF1F5;
  --gw-bg-hover: #E3E9EF;
  --gw-border-subtle: #DCE3EA;
  --gw-border-strong: #B5C1CD;
  --gw-text-primary: #0B1420;
  --gw-text-secondary: #3B4A5A;
  --gw-text-muted: #5E6E7F;
  --gw-accent: #E7BF1F;
  --gw-accent-hover: #D3AC15;
  --gw-accent-text: #8A6A00;
  --gw-focus: #9C7A00;
  --gw-selected: #FBF0C4;
  --gw-selected-hover: #F7E6A6;
  --gw-selected-border: #D9C36A;
  --gw-danger-fill: #B42318;
  --gw-danger-text: #B42318;
  --gw-overlay: rgba(244, 246, 249, .6);
  --gw-shadow: rgba(11, 20, 32, .14);
  --picker-selected-text: var(--gw-accent-text);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--gw-bg-canvas); color: var(--gw-text-primary); font: 12px var(--font-ui); letter-spacing: 0; transition: background-color .16s ease, color .16s ease; }
button, input, select { font: inherit; }
button { cursor: pointer; }
main { flex: 1; display: flex; min-height: 0; }
#app { display: contents; }   /* the top bar and main stay flex children of body */
#app[hidden], .boot[hidden], .login[hidden] { display: none; }

/* ---- Shared Godswood top bar: panel toggle, mark, divider, app name, scope line; theme, user, Sign out ---- */
.ribbon { position: relative; z-index: 20; flex: 0 0 38px; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 16px; background: var(--gw-bg-surface); color: var(--gw-text-primary); border-bottom: 1px solid var(--gw-border-subtle); }
.ribbon-button { width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gw-text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.ribbon-button:hover { background: var(--gw-bg-elevated); color: var(--gw-text-primary); }
.ribbon-button svg { width: 16px; height: 16px; stroke-width: 2; }
.theme-toggle:hover { color: var(--gw-accent-text); }
:root[data-theme="light"] .theme-icon-dark, :root:not([data-theme="light"]) .theme-icon-light { display: none; }
.brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.ribbon-logo { width: 32px; height: 32px; object-fit: contain; }
.brand-divider { width: 1px; height: 20px; flex: 0 0 auto; background: var(--gw-border-strong); }
.app-identity { flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.module-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/1.4 var(--font-mono); color: var(--gw-text-secondary); }   /* scope line */
#live { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--gw-accent); }   /* live indicator */
#live[hidden] { display: none; }
.ribbon-spacer { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.ribbon-user { display: flex; align-items: center; gap: 8px; font: 12px var(--font-mono); color: var(--gw-text-secondary); white-space: nowrap; }
.ribbon-user[hidden] { display: none; }
.ribbon-signout { font: 600 12px var(--font-ui); color: var(--gw-text-secondary); background: transparent; padding: 3px 8px; border: 1px solid var(--gw-border-strong); border-radius: 6px; }
.ribbon-signout:hover { color: var(--gw-accent-text); border-color: var(--gw-accent); }
@media (max-width: 899px) { .ribbon-user > span { display: none; } }   /* hide the email, keep Sign out */

/* ---- Left panel ---- */
#panel { width: 300px; padding: 12px; background: var(--gw-bg-surface); border-right: 1px solid var(--gw-border-subtle); display: flex; flex-direction: column; min-height: 0; }
#panel.closed { display: none; }
.field { margin-bottom: 14px; }
.field > span { display: block; margin: 0 0 4px; color: var(--gw-text-primary); font-size: 11px; font-weight: 700; }
#outagetypes { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 16px; row-gap: 2px; }
#outagetypes > span { grid-column: 1 / -1; }
#outagetypes label, #layers label { color: var(--gw-text-secondary); }
#outagetypes input, #layers input { accent-color: var(--gw-accent); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }   /* prices and times in tooltips */

/* Constraints table: Manrope with tabular numerals, elevated sticky header; rows keep their shadow-price colours. */
#constraints { margin-top: auto; display: flex; flex-direction: column; min-height: 0; }
#constraints small { margin-bottom: 4px; color: var(--gw-text-muted); font: 11px var(--font-mono); }
#ctablewrap { overflow-y: auto; min-height: 0; }
#ctable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
#ctable col.shadowcol { width: 92px; }
#ctable th { position: sticky; top: 0; padding: 4px; background: var(--gw-bg-elevated); color: var(--gw-text-primary); font-weight: 600; }
#ctable td { padding: 3px 6px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ctable td:last-child { text-align: right; }
#ctable tr.unmapped { opacity: .45; }

/* ---- Map, Layers button and popover, tooltips ---- */
#mapwrap { position: relative; flex: 1; }
#map, #markers { position: absolute; inset: 0; width: 100%; height: 100%; }
#markers { pointer-events: none; }
#tools { position: absolute; left: 10px; top: 10px; }
#layersbtn { height: 26px; padding: 0 8px; border: 1px solid var(--gw-border-strong); border-radius: 6px; background: var(--gw-bg-elevated); color: var(--gw-text-secondary); font-size: 12px; font-weight: 600; }   /* secondary button */
#layersbtn:hover { background: var(--gw-bg-hover); }
#layers { width: 190px; margin-top: 6px; padding: 8px 10px; background: var(--gw-bg-surface); border: 1px solid var(--gw-border-strong); border-radius: 6px; box-shadow: 0 8px 24px var(--gw-shadow); }
#layers label { display: block; line-height: 20px; }
#layers .field { margin: 4px 0 8px; }
#tip, #rowtip { position: absolute; padding: 6px 8px; background: var(--gw-bg-surface); color: var(--gw-text-primary); border: 1px solid var(--gw-border-strong); border-radius: 6px; box-shadow: 0 8px 24px var(--gw-shadow); pointer-events: none; white-space: nowrap; }
#rowtip { position: fixed; z-index: 20; max-width: 420px; white-space: normal; }
#tip table { border-collapse: collapse; }
#tip td { padding: 1px 6px; text-align: right; }
#tip td:first-child { padding-left: 0; text-align: left; }
#tip table.left td { text-align: left; }
#tip table.left td:nth-child(3) { padding-left: 14px; }
#tip hr { border: 0; border-top: 1px solid var(--gw-border-subtle); margin: 4px 0; }
#tip.callout b { text-decoration: underline; }
#tip.callout::after { content: ''; position: absolute; top: 100%; left: var(--px); margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gw-border-strong); }
#tip.callout.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--gw-border-strong); }

/* ---- Custom dropdowns (dropdown.js), styled as the guide's picker ---- */
.dd { position: relative; }
.dd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 26px; padding: 0 8px; border: 1px solid var(--gw-border-subtle); border-radius: 6px; background: var(--gw-bg-elevated); color: var(--gw-text-primary); font-size: 12px; text-align: left; }
.dd-trigger:hover, .dd-trigger[aria-expanded=true] { border-color: var(--gw-accent); }
.picker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-chevron { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gw-accent-text); transition: transform 180ms ease; }
.dd-trigger[aria-expanded=true] .control-chevron { transform: rotate(180deg); }
.dd-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; overflow-y: auto; background: var(--gw-bg-surface); border: 1px solid color-mix(in srgb, var(--gw-accent) 24%, transparent); border-radius: 8px; box-shadow: 0 16px 40px var(--gw-shadow); display: none; }
.dd.up .dd-menu { top: auto; bottom: calc(100% + 4px); }
.dd.open .dd-menu { display: block; animation: picker-enter 160ms ease-out; }
.dd-menu li { padding: 6px 8px; border-radius: 6px; color: var(--gw-text-primary); cursor: pointer; font: 500 12px/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-menu li.hi { background: color-mix(in srgb, var(--gw-accent) 10%, transparent); }
.dd-menu li[aria-selected=true] { background: color-mix(in srgb, var(--gw-accent) 28%, transparent); color: var(--picker-selected-text); }
.dd-menu li[aria-selected=true].hi { background: color-mix(in srgb, var(--gw-accent) 34%, transparent); }
@keyframes picker-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Sign-in: loading screen, then the login card with the theme toggle fixed top right ---- */
.boot, .login { flex: 1; display: grid; place-items: center; padding: 24px; background: var(--gw-bg-canvas); }
.boot { place-content: center; justify-items: center; gap: 4px; }
.boot-text { font: 12px/1.5 var(--font-mono); color: var(--gw-text-muted); }
.login-theme { position: fixed; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid var(--gw-border-strong); background: var(--gw-bg-surface); }
.login-card { width: min(400px, 100%); padding: 32px 28px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--gw-bg-surface); border: 1px solid var(--gw-border-subtle); border-top: 2px solid var(--app-brand); border-radius: 8px; box-shadow: 0 8px 24px var(--gw-shadow); animation: login-enter 180ms ease-out; }
@keyframes login-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.login-mark { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 12px; background: var(--app-brand); color: var(--gw-on-accent); font: 700 26px/1 var(--font-ui); letter-spacing: -0.5px; }
.boot .login-mark { animation: boot-pulse 1.2s ease-in-out infinite; }
@keyframes boot-pulse { 50% { opacity: .55; } }
.login-title { margin: 0; font: 600 20px/1.3 var(--font-ui); color: var(--gw-text-primary); }
.login-sub { margin: 6px 0 0; font: 12px/1.5 var(--font-mono); color: var(--gw-text-secondary); }
.login-button-container { margin-top: 24px; min-height: 44px; display: grid; place-items: center; }
/* Google's button is an iframe with a light colour scheme; on a dark page Chrome paints a white box behind it. */
.login-button-container iframe { color-scheme: light; }
.login-note { margin-top: 12px; font-size: 12px; color: var(--gw-text-muted); }
.login-error { margin-top: 12px; font-size: 13px; color: var(--gw-danger-text); }
.login-note[hidden], .login-error[hidden] { display: none; }

/* ---- Shared interaction rules ---- */
button, a, input, select { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
:is(button, a, input, select, [tabindex]):focus-visible { outline: 2px solid var(--gw-focus); outline-offset: 2px; }
/* Yellow thumbs on navy tracks, everywhere that scrolls. */
* { scrollbar-width: thin; scrollbar-color: var(--gw-accent) var(--gw-bg-surface); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--gw-bg-surface); }
*::-webkit-scrollbar-thumb { background: var(--gw-accent); border: 2px solid var(--gw-bg-surface); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gw-accent-hover); }
*::-webkit-scrollbar-corner { background: var(--gw-bg-surface); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Phones: 56px bar and 44px touch targets ---- */
@media (max-width: 599px) {
  .ribbon { flex-basis: 56px; gap: 6px; padding: 0 8px; }
  .ribbon-button { width: 44px; height: 44px; }
  .brand-divider { display: none; }
  .dd-trigger, #layersbtn, .ribbon-signout { min-height: 44px; }
  .dd-menu li { min-height: 44px; display: flex; align-items: center; }
  #outagetypes label, #layers label { display: flex; align-items: center; min-height: 44px; }
}