/* Mindanao Grid Mimic Board
   Dark console, pale enamel mimic plate. Barlow Condensed for engraved
   labels and figures, Barlow for running text. */

:root {
  --console: #1a1f22;
  --console-2: #232a2e;
  --console-3: #2d3539;
  --console-ink: #eceee8;
  --console-muted: #a9b3ae;

  --plate: #e4e7df;
  --plate-ink: #12171a;
  --plate-muted: #4a544f;

  --k138: #12171a;
  --k69: #1b4f9e;
  --dead: #8a918b;
  --closed: #d0302a;
  --open: #15703b;
  --over: #d9480f;
  --warn: #f5a800;
  --bad: #b3221c;
  --bad-text: #ff8d84;
  --ok-text: #9fdcb2;

  --focus: #6aa8ff;

  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--console);
  color: var(--console-ink);
  font: 400 18px/1.55 var(--text);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--warn); color: var(--plate-ink); }
.log { scrollbar-color: var(--console-3) var(--console); scrollbar-width: thin; }
.brk-btn:active, .reset:active { transform: translateY(1px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- masthead ---- */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 24px var(--gutter);
  align-items: end;
  padding: clamp(24px, 3.5vw, 44px) var(--gutter) clamp(20px, 2.5vw, 28px);
}

h1 {
  font: 600 clamp(44px, 6.4vw, 84px)/0.95 var(--display);
  letter-spacing: -0.012em;
}

.lede {
  margin-top: 14px;
  max-width: 54ch;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--console-ink);
}

.study-note {
  background: var(--plate);
  color: var(--plate-ink);
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.45;
}

/* ---- workbench ---- */

main { padding: 0 var(--gutter) var(--gutter); }

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--gutter);
  align-items: start;
}

/* ---- board ---- */

.board {
  background: var(--plate);
  color: var(--plate-ink);
  border: 8px solid #0b0e0f;
}

.status {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  min-height: 76px;
  background: var(--plate-ink);
  color: var(--console-ink);
}
.status p { font: 600 18px/1.35 var(--text); }
.status-mark { flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--ok-text); }
.status[data-state="warn"] { background: var(--warn); color: var(--plate-ink); }
.status[data-state="warn"] .status-mark { background: var(--plate-ink); }
.status[data-state="bad"] { background: var(--bad); color: #fff; }
.status[data-state="bad"] .status-mark { background: #fff; }

.diagram { padding: 12px 8px 4px; }
.sld { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--display); }
.noscript { padding: 24px; }

.wire { fill: none; }
.kv138 .wire { stroke: var(--k138); stroke-width: 7; }
.kv69 .wire { stroke: var(--k69); stroke-width: 5; }
.line.dead .wire { stroke: var(--dead); stroke-width: 3; stroke-dasharray: 9 7; }
.line.over .wire { stroke: var(--over); }

.flow {
  fill: none;
  stroke: var(--plate);
  stroke-width: 2.5;
  stroke-dasharray: 3 21;
  animation: flow 1s linear infinite;
}
.flow.rev { animation-direction: reverse; }
.line.dead .flow { display: none; }
@keyframes flow { to { stroke-dashoffset: -24; } }

.xf circle { fill: var(--plate); stroke: var(--plate-ink); stroke-width: 3; }
.line.dead .xf circle { stroke: var(--dead); }

.bar { fill: none; stroke: var(--plate-ink); stroke-width: 11; }
.bus.dead .bar { stroke: var(--dead); }
.load-arrow { fill: none; stroke: var(--plate-ink); stroke-width: 4; }
.bus.dead .load-arrow { stroke: var(--dead); }
.gen-disc { fill: var(--plate); stroke: var(--plate-ink); stroke-width: 5; }
.gen-g { font: 700 30px var(--display); text-anchor: middle; fill: var(--plate-ink); }

.bus-name { font: 700 24px var(--display); fill: var(--plate-ink); }
.bus-val { font: 500 20px var(--display); fill: var(--plate-ink); letter-spacing: 0.01em; }
.bus.dead .bus-name { fill: var(--plate-muted); }
.bus.dead .bus-val, .bus.short .bus-val { fill: var(--bad); font-weight: 700; }

.breaker { cursor: pointer; outline: none; }
.breaker .hit { fill: transparent; stroke: none; }
.breaker .sym { stroke-width: 3.5; transition: fill 120ms; }
.breaker.closed .sym { fill: var(--closed); stroke: var(--plate-ink); }
.breaker.open .sym { fill: var(--plate); stroke: var(--open); stroke-width: 5; }
.breaker .slash { stroke: var(--open); stroke-width: 4; display: none; }
.breaker.open .slash { display: block; }
.breaker:hover .hit { fill: rgba(18, 23, 26, 0.1); }
.breaker:focus-visible .hit { stroke: var(--k69); stroke-width: 4; fill: rgba(27, 79, 158, 0.12); }

.tag-box { fill: transparent; }
.tag.over .tag-box { fill: var(--warn); stroke: var(--plate-ink); stroke-width: 3; }
.tag-id, .tag-val { text-anchor: start; fill: var(--plate-ink); }
.tag-arrow { fill: var(--plate-ink); }
.tag-id { font: 700 17px var(--display); letter-spacing: 0.02em; }
.tag-val { font: 600 20px var(--display); }
.tag.isopen .tag-val { fill: var(--open); font-weight: 700; }
.tag.tripped .tag-val { fill: var(--bad); }
.tag.dead .tag-val { fill: var(--plate-muted); }

.sld-tall .bus-name { font-size: 21px; }
.sld-tall .bus-val { font-size: 17px; }
.sld-tall .tag-id { font-size: 14px; }
.sld-tall .tag-val { font-size: 17px; }
.sld-tall .gen-g { font-size: 26px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 12px 18px 18px;
  font: 500 16px var(--display);
  letter-spacing: 0.02em;
}
.legend li { display: flex; align-items: center; gap: 8px; }
.legend svg { width: 36px; height: 16px; flex: none; }
.legend .k138 { stroke: var(--k138); stroke-width: 7; }
.legend .k69 { stroke: var(--k69); stroke-width: 5; }
.legend .kdead { stroke: var(--dead); stroke-width: 3; stroke-dasharray: 7 5; }
.legend .symClosed { fill: var(--closed); stroke: var(--plate-ink); stroke-width: 2.5; }
.legend .symOpen { fill: var(--plate); stroke: var(--open); stroke-width: 3; }
.legend .symOver { fill: var(--warn); stroke: var(--plate-ink); stroke-width: 2.5; }
.legend li:nth-child(4) svg, .legend li:nth-child(5) svg { width: 16px; }

/* ---- console ---- */

.stage { display: grid; gap: 16px; min-width: 0; }
.console { display: grid; gap: 16px; }

.panel { background: var(--console-2); padding: 20px; }
.panel h2 { font: 600 26px/1 var(--display); letter-spacing: 0.01em; margin-bottom: 16px; }

.try-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip, .reset {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: 600 17px/1.1 var(--text);
}
.chip { background: var(--plate); color: var(--plate-ink); }
.chip:hover { background: var(--warn); }
.chip:active { transform: translateY(1px); }
.reset { margin-top: 18px; background: var(--console-3); color: var(--console-ink); width: 100%; }
.reset:hover { background: #3b454a; }

.field { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; margin-bottom: 18px; }
.field label { font: 600 18px var(--text); }
.field output { font: 600 22px var(--display); }
.field input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--warn); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.35; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--warn); }

.readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.readout dt { font: 500 16px var(--text); color: var(--console-muted); }
.readout dd { font: 600 32px/1.05 var(--display); letter-spacing: 0.005em; white-space: nowrap; }
.readout .r-un.bad dd { color: var(--bad-text); }

.gens { display: grid; gap: 12px; }
.gens li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 118px; gap: 12px; align-items: center; font-size: 16px; }
.g-name { font-weight: 600; }
.g-bar { height: 12px; background: var(--console-3); display: block; }
.g-bar i { display: block; height: 100%; width: 0; background: var(--console-ink); transition: width 300ms; }
.g-val { text-align: right; font-family: var(--display); font-size: 18px; font-weight: 500; }

.log-panel { min-height: 0; }
.log { max-height: 240px; overflow-y: auto; display: grid; gap: 2px; font-size: 16px; line-height: 1.35; }
.log li { padding: 6px 10px; background: var(--console); color: var(--console-muted); }
.log time { font: 600 15px var(--display); color: var(--console-ink); margin-right: 6px; letter-spacing: 0.03em; }
.log li.act { color: var(--console-ink); }
.log li.warn { background: var(--warn); color: var(--plate-ink); }
.log li.warn time { color: var(--plate-ink); }

/* ---- lines table ---- */

.lines, .about { margin-top: clamp(48px, 7vw, 96px); }
.lines h2, .about h2 { font: 600 clamp(32px, 4.5vw, 52px)/1 var(--display); letter-spacing: -0.005em; margin-bottom: 14px; }
.lines-intro { max-width: 62ch; color: var(--console-muted); margin-bottom: 24px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; vertical-align: middle; font-size: 17px; }
thead th { font: 600 16px var(--text); color: var(--console-muted); padding-bottom: 10px; }
tbody tr { background: var(--console-2); }
tbody tr:nth-child(even) { background: #20272b; }
tbody tr.over { background: #3a2a14; }
.num { text-align: right; }
td.num { font: 600 22px var(--display); }

.brk-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 14px 6px 10px;
  background: var(--console-3); border: 0; border-radius: 0; cursor: pointer;
  font: 600 20px var(--display); letter-spacing: 0.02em;
}
.brk-btn:hover { background: #3b454a; }
.brk-btn svg { width: 22px; height: 22px; flex: none; }
.brk-btn.closed rect { fill: var(--closed); stroke: var(--console-ink); stroke-width: 2.5; }
.brk-btn.open rect { fill: none; stroke: #5fcf8a; stroke-width: 3.5; }
.brk-state { font: 500 16px var(--text); color: var(--console-muted); letter-spacing: 0; }

.kv-tag { display: inline-block; margin-left: 6px; padding: 0 8px; background: var(--console-3); font: 600 15px var(--display); color: var(--console-muted); }

.load-meter { display: inline-block; vertical-align: middle; width: 96px; height: 12px; margin-right: 10px; background: var(--console-3); }
.load-meter i { display: block; height: 100%; width: 0; background: var(--console-ink); transition: width 300ms; }
.load-meter.high i { background: var(--warn); }
.load-meter.over i { background: var(--bad-text); }
.c-load { font-size: 16px; color: var(--console-muted); white-space: nowrap; }

.c-cont.ok { color: var(--ok-text); }
.c-cont.warn { color: var(--warn); }
.c-cont.bad { color: var(--bad-text); }
.c-cont.muted { color: var(--console-muted); }

/* ---- about ---- */

.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.about h3 { font: 600 26px var(--display); margin-bottom: 10px; }
.about p, .about li { max-width: 60ch; }
.about ol { counter-reset: s; display: grid; gap: 10px; }
.about ol li { counter-increment: s; padding-left: 40px; position: relative; }
.about ol li::before {
  content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px;
  background: var(--plate); color: var(--plate-ink); font: 700 18px/26px var(--display); text-align: center;
}

.colophon { padding: 28px var(--gutter) 40px; color: var(--console-muted); font-size: 15px; }

/* ---- tablet and phone ---- */

@media (max-width: 1020px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .study-note { max-width: 520px; }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  .console { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .board { border-width: 5px; }
  .status { padding: 12px 14px; min-height: 0; }
  .status p { font-size: 17px; }
  .diagram { padding: 8px 0 0; }
  .console { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 16px; }
  .gens li { grid-template-columns: 82px minmax(0, 1fr) 100px; gap: 10px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }

  table, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody { display: grid; gap: 8px; }
  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px 12px; }
  tbody th, tbody td { padding: 4px 0; }
  tbody th { grid-column: 1 / -1; }
  tbody td::before {
    content: attr(data-label); display: block; font: 500 14px var(--text); color: var(--console-muted);
  }
  td.num { text-align: left; }
  .load-meter { width: 64px; margin-right: 8px; }
  td[data-label="Path"], td[data-label="If it opened alone"] { grid-column: 1 / -1; }
  td[data-label="Path"]::before, td[data-label="If it opened alone"]::before { display: inline; margin-right: 8px; }
}

@media (max-width: 380px) {
  .legend { gap: 6px 14px; }
  .field output { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow { animation: none; display: none; }
  .g-bar i, .load-meter i, .breaker .sym { transition: none; }
}