/* Switchboard at dusk: deep petrol ground, conductors carrying coloured current.
   Colour is never decoration here — each hue names a direction energy can travel. */
:root {
  --ground: #0b1620;
  --panel:  #10212d;
  --rule:   #1d3949;
  --ink:    #e6f0f4;
  --dim:    #7fa0b2;
  --faint:  #4d6c7e;

  --sun:   #ffc247;  /* generation */
  --store: #9d8df1;  /* battery */
  --draw:  #ff7a66;  /* coming in from the grid */
  --send:  #35d6bc;  /* going out to the grid */
  --load:  #cfe3ec;  /* the house */

  --gutter: 16px;
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  padding: 0 var(--gutter) 64px;
}

/* ─── header ─────────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.bar h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

.bar-right { display: flex; align-items: baseline; gap: 14px; color: var(--dim); font-size: 0.85rem; }

#clock { font-variant-numeric: tabular-nums; }

.pulse { display: inline-flex; align-items: center; gap: 7px; }
.pulse::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pulse[data-state="live"]    { color: var(--send); }
.pulse[data-state="waiting"] { color: var(--dim); }
.pulse[data-state="lost"]    { color: var(--draw); }
.pulse[data-state="live"]::before { animation: beat 5s ease-in-out infinite; }

@keyframes beat { 0%, 88%, 100% { opacity: 1; } 94% { opacity: 0.25; } }

/* ─── layout ─────────────────────────────────────────────────────────── */

main { max-width: 1040px; margin: 0 auto; }

section { padding: 30px 0; border-bottom: 1px solid var(--rule); }
section:last-child { border-bottom: 0; }

.schematic { padding: 8px 0 18px; border-bottom: 1px solid var(--rule); }

h2 {
  margin: 0 0 18px;
  font-size: 0.82rem;
  font-weight: 500;
  font-stretch: 100%;
  color: var(--dim);
}

/* ─── the schematic ──────────────────────────────────────────────────── */

#flow { width: 100%; height: auto; display: block; overflow: visible; }

.conductor      { fill: none; stroke-linecap: round; }
.conductor-idle { stroke: var(--rule); stroke-width: 2; }
.current        { fill: none; stroke-linecap: round; stroke-dasharray: 17 16; }
.bus            { stroke: var(--faint); stroke-width: 3; stroke-linecap: square; }

.node-plate  { fill: var(--panel); stroke: var(--rule); stroke-width: 1; }
.node-name   { fill: var(--dim);  font-size: 15px; font-weight: 500; }
.node-value  { font-size: 38px; font-weight: 600; font-stretch: 118%; }
.node-unit   { font-size: 17px; font-weight: 500; }
.node-note   { font-size: 14px; font-weight: 400; fill: var(--faint); }
.node-empty  { fill: var(--faint); font-size: 14px; }

.tap { fill: var(--ground); stroke: var(--faint); stroke-width: 2.5; }

@media (prefers-reduced-motion: reduce) {
  .current { animation: none !important; }
  .pulse[data-state="live"]::before { animation: none; }
}

/* ─── today ──────────────────────────────────────────────────────────── */

.ledger dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px 32px;
  margin: 0;
}

.ledger div { display: flex; flex-direction: column-reverse; gap: 4px; }

.ledger dt { color: var(--dim); font-size: 0.82rem; }

.ledger dd {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 600;
  font-stretch: 116%;
  line-height: 1.1;
}

.ledger dd small { font-size: 0.85rem; font-weight: 500; font-stretch: 100%; color: var(--dim); margin-left: 3px; }
.ledger dd.unknown {
  color: var(--faint);
  font-size: 0.95rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  padding-bottom: 6px;
}

/* ─── trace ──────────────────────────────────────────────────────────── */

#chart { width: 100%; height: 180px; display: block; }

.grid-line { stroke: var(--rule); stroke-width: 1; }
.zero-line { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 5; }
.axis-text { fill: var(--faint); font-size: 12px; }

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--dim);
}

.key li { display: flex; align-items: center; gap: 8px; }
.key i { width: 14px; height: 2px; background: currentColor; border-radius: 1px; }

/* ─── hardware ───────────────────────────────────────────────────────── */

.kit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.kit li {
  background: var(--ground);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 0.87rem;
}

.kit b { font-weight: 600; font-stretch: 108%; }
.kit span { color: var(--dim); }
.kit .state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.kit .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kit .up   { color: var(--send); }
.kit .down { color: var(--draw); }

.kit .missing { display: block; width: 100%; color: var(--faint); margin-top: 2px; }
.kit code { background: var(--panel); padding: 1px 6px; border-radius: 3px; color: var(--ink); font-size: 0.92em; }

/* ─── small screens ──────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .ledger dd { font-size: 1.5rem; }
  .bar { flex-wrap: wrap; }
}

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* ─── sign in ────────────────────────────────────────────────────────── */

body.signin {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--gutter);
}

.gate { width: min(100%, 340px); }

.gate h1 {
  margin: 0 0 30px;
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 112%;
}

.gate form { display: flex; flex-direction: column; gap: 10px; }

.gate label { color: var(--dim); font-size: 0.82rem; }

.gate input {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 11px 13px;
  width: 100%;
}

.gate input:focus-visible { border-color: var(--sun); outline: none; box-shadow: 0 0 0 1px var(--sun); }

#code { font-size: 1.5rem; font-stretch: 112%; letter-spacing: 0.22em; }

.gate button {
  background: var(--ink);
  border: 0;
  border-radius: 3px;
  color: var(--ground);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-stretch: 106%;
  margin-top: 4px;
  padding: 11px 13px;
}

.gate button:hover:not(:disabled) { background: #fff; }
.gate button:disabled { opacity: 0.55; cursor: default; }

.gate .hint { color: var(--faint); font-size: 0.82rem; margin: 4px 0 0; }
.gate .problem { color: var(--draw); font-size: 0.85rem; margin: 4px 0 0; }

/* Author display rules outrank the user-agent [hidden] rule, so restate it. */
[hidden] { display: none !important; }

/* An estimated value is never drawn as a solid, measured one. */
.node-plate-soft { stroke-dasharray: 5 4; }

/* ─── sky ────────────────────────────────────────────────────────────── */

/* The sun's real path across today, drawn behind everything. Kept low in
   contrast: it is orientation, not decoration, and the schematic on top of it
   has to stay the thing you read first. */
/* Anchored to the top of the page rather than the viewport: fixed would drag
   the arc across every section as you scroll. */
#sky {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: min(62vh, 560px);
  z-index: 0;
  pointer-events: none;
}

body { position: relative; }

body > header,
body > main { position: relative; z-index: 1; }

.sky-horizon { stroke: var(--rule); stroke-width: 1; }
.sky-arc     { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 2 6; }
.sky-arc-past{ fill: none; stroke: var(--sun); stroke-width: 1.5; opacity: 0.28; }
.sky-tick    { stroke: var(--rule); stroke-width: 1; }
.sky-label   { fill: var(--faint); font-size: 11px; }

.sun-readout { color: var(--dim); font-size: 0.85rem; }
.sun-readout b { color: var(--sun); font-weight: 500; }

/* ─── roof ───────────────────────────────────────────────────────────── */

.roof-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 34px 46px;
}

#compass { width: 230px; height: 230px; flex: none; }

.compass-ring  { fill: none; stroke: var(--rule); stroke-width: 1; }
.compass-tick  { stroke: var(--rule); stroke-width: 1; }
.compass-point { fill: var(--faint); font-size: 12px; font-weight: 500; }
.compass-north { fill: var(--dim); }
.compass-ray   { stroke: var(--sun); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.7; }

.arrays { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 200px; }

.arrays li { display: grid; gap: 3px; }

.arrays .facing { color: var(--dim); font-size: 0.82rem; }

.arrays .output {
  font-size: 1.5rem;
  font-weight: 600;
  font-stretch: 116%;
  line-height: 1.1;
}

.arrays .output small { font-size: 0.8rem; font-weight: 500; font-stretch: 100%; color: var(--dim); margin-left: 3px; }
.arrays .aim { color: var(--faint); font-size: 0.8rem; }

@media (max-width: 560px) {
  .roof-body { gap: 24px; }
  #compass { width: 100%; max-width: 260px; margin: 0 auto; }
}