/* TEG brand guide v1.0: Slate Green, Straw, Cultured, Pale Spring, Charleston Green.
   Red Hat Text for the interface, Space Mono for numerals and small labels.
   Both fonts are served from this app (SIL Open Font License), so no third party is contacted. */
@font-face { font-family: "Red Hat Text"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/red-hat-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/red-hat-text-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/red-hat-text-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/red-hat-text-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  --slate: #325459;
  --slate-2: #5b7679;      /* slate tint, for secondary text on light */
  --slate-3: #cdd5d6;      /* slate tint, for rules */
  --straw: #d1cb4f;
  --straw-soft: #f0eed5;
  --cultured: #f5f5f5;
  --spring: #d3deb6;
  --spring-soft: #eef2e2;
  --charleston: #1c2821;
  --paper: #ffffff;
  --alert: #8f2f1f;
  --alert-soft: #f7e7e3;
  --text: var(--charleston);
  --muted: #55655f;
  --rule: #dfe3e2;
  --radius: 6px;
  --sans: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cultured); color: var(--text);
  font: 400 16px/1.5 var(--sans);
}
body.dark { background: var(--slate); }
h1, h2 { font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
a { color: var(--slate); }
small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; font-weight: 400; }
.num, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.fine { color: var(--muted); font-size: 0.875rem; }

/* ---------------------------------------------------------------- header */
.top { background: var(--slate); color: #fff; }
.top-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 500; letter-spacing: 0.02em; padding: 12px 0; }
.brand img { display: block; }
.tabs, .who { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.tabs { flex: 1; }
.top nav a, .top nav .soon, .top nav button.link {
  color: #fff; text-decoration: none; padding: 18px 12px 15px; border-bottom: 3px solid transparent; font-size: 0.9375rem;
}
.top nav a:hover, .top nav button.link:hover { border-bottom-color: rgba(255,255,255,0.4); }
.top nav a[aria-current="page"] { border-bottom-color: var(--straw); font-weight: 600; }
.top nav .soon { color: rgba(255,255,255,0.5); cursor: default; }
.top form { display: flex; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 24px 64px; }
.split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.card, .panel, .paper { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.card.narrow { max-width: 560px; }
.card.flush { padding: 0; }
.scroll { overflow-x: auto; }
.result { min-width: 0; }

/* ----------------------------------------------------------------- forms */
label { display: block; font-weight: 500; font-size: 0.9375rem; margin-bottom: 14px; }
label .opt { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: 400 1rem var(--sans); color: var(--text);
  background: #fff; border: 1px solid #9aa9a8; border-radius: 4px; min-height: 42px;
}
input[inputmode], input[type="date"] { font-family: var(--mono); font-size: 0.9375rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--straw); outline-offset: 1px; border-color: var(--slate);
}
label small { margin-top: 4px; }
label.bad input { border-color: var(--alert); border-width: 2px; }
small.err { color: var(--alert); font-weight: 600; }
fieldset { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 16px 0 4px; }
legend { font: 700 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); padding: 0 8px 0 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; flex: none; accent-color: var(--slate); }
.check.small { font-size: 0.875rem; margin: 0; align-items: center; }
.check.small input { margin: 0; }
.stack label { margin-bottom: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.row label { flex: 1 1 180px; margin: 0; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input { width: 8.5em; margin: 0; min-height: 34px; padding: 5px 8px; font-family: var(--mono); font-size: 0.875rem; }

.btn {
  display: inline-block; background: var(--slate); color: #fff; border: 1px solid var(--slate); border-radius: 4px;
  padding: 10px 18px; font: 600 1rem var(--sans); cursor: pointer; text-decoration: none; min-height: 42px;
}
.btn:hover { background: #274347; }
.btn.accent { background: var(--straw); border-color: var(--straw); color: var(--charleston); }
.btn.accent:hover { background: #dcd767; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.small { padding: 5px 12px; font-size: 0.875rem; min-height: 34px; }
.btn.ghost { background: transparent; color: var(--slate); }
.btn.ghost:hover { background: var(--spring-soft); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--slate); text-decoration: underline; cursor: pointer; }
.top button.link { text-decoration: none; }

.alert, .note, .ok { border-radius: 4px; padding: 10px 14px; font-size: 0.9375rem; border-left: 4px solid; }
.alert { background: var(--alert-soft); border-color: var(--alert); color: #5e1d12; }
.note { background: var(--straw-soft); border-color: var(--straw); margin-bottom: 12px; }
.note ul { margin: 6px 0 0; padding-left: 20px; }
.ok { background: var(--spring-soft); border-color: #8aa35a; }
.tag { display: inline-block; background: var(--straw-soft); border: 1px solid var(--straw); border-radius: 3px; padding: 1px 7px; font-size: 0.8125rem; }
.tag.muted { background: var(--cultured); border-color: var(--slate-3); color: var(--muted); }

/* --------------------------------------------------------------- sign-in */
.signin { width: 100%; max-width: 400px; color: #fff; }
.signin h1 { font-size: 1.75rem; margin-top: 28px; }
.signin .lede { color: var(--spring); }
.signin label { color: #fff; }
.signin input { border-color: transparent; }
.signin .fine { color: rgba(255,255,255,0.7); margin-top: 24px; }
.signin .btn { width: 100%; }

/* ------------------------------------------------------------ bill panel */
.panel { padding: 20px 20px 22px; }
.panel h1 { font-size: 1.125rem; }
.empty { border: 1px dashed var(--slate-3); border-radius: var(--radius); padding: 40px 32px; max-width: 620px; color: var(--muted); }
.empty h2 { color: var(--text); }

.paper { padding: 0; overflow: hidden; }
.paper > .note { margin: 16px 28px 0; }
.paper-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 28px 24px; border-bottom: 1px solid var(--rule); }
.paper-head h2 { font-size: 1.5rem; margin: 0 0 4px; }
.eyebrow { font: 700 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); margin: 0 0 6px; }
.sub { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.sub.num { font-size: 0.875rem; margin-top: 6px; }
table { border-collapse: collapse; width: 100%; }
.lines { margin-top: 12px; }
.lines th { font: 700 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--slate); }
.lines th.r { text-align: right; }
.lines td { padding: 9px 12px; vertical-align: top; }
.lines th:first-child, .lines td:first-child { padding-left: 28px; }
.lines th:last-child, .lines td:last-child { padding-right: 28px; white-space: nowrap; }
.lines tr.line td { border-top: 1px solid var(--rule); font-weight: 500; }
.lines tbody tr.line:first-child td { border-top: 0; }
.lines tr.sub td { padding-top: 3px; padding-bottom: 3px; color: var(--muted); font-size: 0.875rem; }
.lines tr.sub.l1 td:first-child { padding-left: 48px; }
.lines tr.sub.l2 td:first-child { padding-left: 68px; }
.lines .math { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.lines tr.line .math { font-weight: 400; }
.lines .num.r { font-size: 0.9375rem; }
.lines tr.sub .num.r { font-size: 0.8125rem; }
.lines .src { display: none; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 2px; }
.lines.show-sources .src { display: block; }
.lines tfoot td { padding-top: 6px; padding-bottom: 6px; }
.lines tfoot tr:first-child td { border-top: 2px solid var(--slate); padding-top: 12px; }
.lines tfoot .subtotal td { color: var(--muted); font-size: 0.9375rem; }
.lines tfoot .total td { font-weight: 700; font-size: 1.125rem; padding-top: 10px; }
.lines tfoot .total .num { font-size: 1.25rem; }
.lines tfoot .perkwh td, .lines tfoot .gerow td { color: var(--slate); font-weight: 500; }
.lines tfoot .gerow td { padding-bottom: 20px; }
.ge-math { font: 400 0.75rem var(--mono); color: var(--muted); margin-left: 10px; }
.paper-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 14px 28px; background: var(--cultured); border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--muted); }
.tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- admin */
.list th, .list td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; vertical-align: middle; }
.list th { font: 700 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); white-space: nowrap; }
.list th.r, .list td.r { text-align: right; }
.list tr:last-child td { border-bottom: 0; }
.list tr.off td { color: var(--muted); }
.list .actions { white-space: nowrap; text-align: right; }
.list .actions form { display: inline; margin-left: 12px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 20px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.reveal { border-color: var(--straw); border-width: 2px; }
.secret { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.secret code { font-size: 1.125rem; background: var(--cultured); padding: 8px 12px; border-radius: 4px; user-select: all; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding: 20px 16px 48px; }
  .top-in { padding: 0 16px; gap: 0 16px; }
  .who { margin-left: auto; }
  .tabs { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
  .tabs a, .tabs .soon { white-space: nowrap; }
  .top nav a, .top nav .soon, .top nav button.link { padding: 10px 10px 8px; }
  .paper-head { padding: 20px 16px; }
  .lines th:first-child, .lines td:first-child { padding-left: 16px; }
  .lines th:last-child, .lines td:last-child { padding-right: 16px; }
  .lines tr.sub.l1 td:first-child { padding-left: 28px; }
  .lines tr.sub.l2 td:first-child { padding-left: 40px; }
}

/* On a phone the calculation moves under the charge name, so nothing is squeezed. */
@media (max-width: 640px) {
  .lines, .lines tbody, .lines tfoot { display: block; }
  .lines thead { display: none; }
  .lines tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .lines tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .lines tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .lines tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding: 0 16px 8px; white-space: normal; }
  .lines tbody td:nth-child(2):empty { display: none; }
  .lines tr.sub.l1 td:nth-child(2) { padding-left: 28px; }
  .lines tr.sub.l2 td:nth-child(2) { padding-left: 40px; }
  .lines tfoot td:first-child { grid-column: 1; }
  .ge-math { display: block; margin: 2px 0 0; }
  .row label { flex-basis: 100%; }
  .paper > .note { margin: 12px 16px 0; }
  .paper-foot { padding: 12px 16px; }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  .top, .panel, .tools, .empty { display: none !important; }
  .wrap, .split { display: block; padding: 0; max-width: none; }
  .paper { border: 0; }
  .lines.show-sources .src { display: block; }
  .paper-foot { background: #fff; }
}

/* ------------------------------------------------------------ comparison */
label.nested { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--slate-3); }
.headline { margin: 16px 28px 0; font-weight: 500; }
.cmp th .role { display: block; font: 700 0.625rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; }
.cmp tfoot .saving td { color: var(--slate); font-weight: 600; padding-bottom: 6px; }
.cmp th small { font: 400 0.6875rem var(--sans); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.cmp th.r, .cmp td.r { min-width: 8em; }
.cmp th.r { font: 600 0.8125rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.cmp th:first-child, .cmp td:first-child { min-width: 15em; }
.cmp td { vertical-align: middle; }
.cmp tr.section td { font: 700 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 14px; padding-bottom: 4px; background: var(--cultured); }
.cmp tbody tr.line td { border-top: 1px solid var(--rule); font-weight: 400; }
.cmp td.low { background: var(--spring); font-weight: 700; color: var(--charleston); }
.lowtag { display: block; font: 700 0.625rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); }
.cmp tfoot .total td.low { background: var(--spring); }
@media (max-width: 640px) {
  .cmp { display: table; }
  .cmp thead { display: table-header-group; }
  .cmp tbody { display: table-row-group; }
  .cmp tfoot { display: table-footer-group; }
  .cmp tr { display: table-row; }
  .cmp tbody td:nth-child(2) { padding: 9px 12px; white-space: nowrap; }
  .cmp th.r, .cmp td.r { min-width: 6.5em; }
  .cmp th:first-child, .cmp td:first-child { min-width: 9em; }
  .headline { margin: 12px 16px 0; }
}
@media print { .cmp td.low { background: #e6e6e6 !important; } }

/* ---------------------------------------------------------------- history */
.hist th.r, .hist td.r { min-width: 6em; padding-left: 8px; }
.hist th:first-child, .hist td:first-child { min-width: 11em; }
.hist td.up { color: var(--alert); }
.hist td.down { color: #2f5d1e; }
.hist .arrow { font-family: var(--sans); margin-right: 4px; }

/* -------------------------------------------------------------- GE table */
.note.plain { background: var(--cultured); border-color: var(--slate-3); margin: 12px 28px 0; }
.chartwrap { position: relative; padding: 20px 28px 4px; }
.chart-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 6px; }
.legend { list-style: none; display: flex; gap: 6px 20px; flex-wrap: wrap; margin: 0; padding: 0; font-size: 0.875rem; }
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; }
.swatch.dashed { border-top-style: dashed; }
.chart { touch-action: pan-y; cursor: crosshair; }
.chart svg { display: block; max-width: 100%; height: auto; font-family: var(--sans); }
.tip { position: absolute; background: var(--charleston); color: #fff; border-radius: 4px; padding: 10px 12px; font-size: 0.8125rem; pointer-events: none; min-width: 210px; margin-top: 44px; margin-left: 28px; }
.tip strong { display: block; font: 700 0.9375rem var(--mono); }
.tip span { font-family: var(--mono); font-size: 0.75rem; color: var(--spring); }
.tip table { margin-top: 6px; width: 100%; }
.tip th { font: 400 0.6875rem var(--mono); color: var(--spring); text-align: right; padding: 2px 0 2px 12px; }
.tip td { padding: 2px 0 2px 12px; text-align: right; font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }
.tip td:first-child { text-align: left; padding-left: 0; font-family: var(--sans); font-size: 0.8125rem; }
.tip td .swatch { width: 14px; margin-right: 6px; }
.tip .tipsw0 { border-top-color: #9db7ba; }
.tip .tipsw1 { border-top-color: var(--straw); }
.tip p { margin: 6px 0 0; color: var(--straw); font-weight: 600; }
.axis-note { margin: 4px 0 8px; }
.scroll.tall { max-height: 460px; overflow-y: auto; border-top: 1px solid var(--rule); position: relative; }
.getable { margin-top: 0; }
.getable thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; box-shadow: 0 2px 0 var(--slate); border-bottom: 0; vertical-align: bottom; }
.getable th small { font: 400 0.6875rem var(--sans); text-transform: none; letter-spacing: 0; }
.getable td { padding: 6px 12px; border-top: 1px solid var(--rule); font-size: 0.875rem; white-space: nowrap; }
.getable th:first-child, .getable td:first-child { padding-left: 28px; }
.getable td.low { background: var(--spring); font-weight: 700; }
.getable tr.now td { border-top: 2px solid var(--straw); border-bottom: 2px solid var(--straw); background: var(--straw-soft); }
.getable tr.now td.low { background: var(--spring); }
.getable tr.cross td:first-child { box-shadow: inset 4px 0 0 var(--charleston); }
@media (max-width: 640px) {
  .getable { display: table; }
  .getable thead { display: table-header-group; }
  .getable tbody { display: table-row-group; }
  .getable tr { display: table-row; }
  .getable tbody td:nth-child(n) { padding: 6px 10px; white-space: nowrap; grid-column: auto; }
  .getable th:first-child, .getable td:first-child { padding-left: 16px; }
  .chartwrap { padding: 16px 16px 4px; }
  .note.plain { margin: 12px 16px 0; }
  .tip { margin-left: 16px; }
}
@media print {
  .scroll.tall { max-height: none; overflow: visible; }
  .tip, #ge-full, .axis-note { display: none !important; }
}