/* Single-line diagram — tokens from DESIGN.md. The sheet is a fixed single-look drawing on paper. */
:root {
  --paper: #F3F4EF; --ink: #1C2126; --ink-2: #59626B; --hair: #C9CEC8; --tile: #FFFFFF;
  --c-energy: #B4471E;
  --c-design: #7E5A2B; --c-build: #94680F; --c-prod: #6E6A5E;
  --c-integ: #3D5A80; --c-power: #1D5F99; --c-cool: #237F96; --c-it: #233F72;
  --c-dev: #3C7A4A; --c-ops: #1E4D36;
  --c-env: #A0507A; --c-svc: #7A3A63;
  --f-title: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-head: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-label: "Sofia Sans Semi Condensed", "Arial Narrow", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --lw-1: 0.5px; --lw-2: 1px; --lw-3: 2px; --lw-bus: 6px;
  --tile-w: 92px; --tile-h: 40px; --head-h: 26px; --sub-h: 18px;
  --gap-stage: 12px; --gap-box: 10px; --sheet-pad: 26px;
  /* read by map.js → layoutSheet(): title + busbar band, title block, busbar offset from the sheet top */
  --chrome: 150px; --tb-h: 232px; --bus-y: 130px;
  /* read by map.js: stage node ring size, and the box every logo is fitted into at one common area */
  --node: 16px; --logo-max-w: 76px; --logo-max-h: 30px; --logo-area: 1250;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-label); display: flex; flex-direction: column; }

/* viewer chrome */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: var(--lw-2) solid var(--ink); }
.bar-title { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.bar-title em { font-style: normal; font-family: var(--f-mono); font-weight: 400; font-size: 11px; color: var(--ink-2); margin-left: 6px; }
.bar-tools { display: flex; gap: 6px; align-items: center; }
.bar-tools button, .bar-tools a { font-family: var(--f-mono); font-size: 12px; color: var(--ink); background: var(--tile);
  border: var(--lw-2) solid var(--ink); min-width: 34px; height: 30px; padding: 0 10px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; }
.bar-tools button:hover, .bar-tools a:hover { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.viewport { flex: 1; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.stage-holder { position: relative; margin: 0 auto; }
.sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--paper);
  border: var(--lw-3) solid var(--ink); outline: var(--lw-2) solid var(--ink); outline-offset: -10px; }

/* frame references */
.refs { position: absolute; display: flex; justify-content: space-around; font-family: var(--f-mono); font-size: 9px; color: var(--ink-2); }
.refs.rt { top: 1px; left: var(--sheet-pad); right: var(--sheet-pad); }
.refs.rb { bottom: 1px; left: var(--sheet-pad); right: var(--sheet-pad); }
.refs.rl { left: 3px; top: var(--sheet-pad); bottom: var(--sheet-pad); flex-direction: column; }
.refs.rr { right: 3px; top: var(--sheet-pad); bottom: var(--sheet-pad); flex-direction: column; }

/* title line */
.sheet-title { position: absolute; left: var(--sheet-pad); right: var(--sheet-pad); top: calc(var(--sheet-pad) + 4px);
  display: flex; justify-content: space-between; align-items: flex-end; }
.sheet-title h1 { margin: 0; font-family: var(--f-title); font-weight: 900; font-size: 64px; line-height: .85; text-transform: uppercase; letter-spacing: -.005em; }
.sheet-title p { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); text-align: right; line-height: 1.7; }
.sheet-title p b { color: var(--ink); font-weight: 500; }
.sheet-title p .cur { color: var(--ink); font-size: 13px; }

/* busbar, nodes, feeders */
.bus { position: absolute; height: var(--lw-bus); background: var(--ink); }
.bus::after { content: ""; position: absolute; right: -14px; top: -5px; border-left: 14px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.node { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--paper); padding-right: 10px; }
.node i { width: var(--node); height: var(--node); border-radius: 50%; border: var(--lw-3) solid var(--ink); background: var(--paper); display: block; }
.node b { font-family: var(--f-head); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.node em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.feeder { position: absolute; width: var(--lw-3); background: var(--ink); }

/* columns and boxes */
.col { position: absolute; display: flex; flex-direction: column; gap: var(--gap-box); }
.cat { display: flex; flex-direction: column; border: var(--lw-2) solid var(--ink); background: var(--tile); min-height: 0; }
.cat-h { height: var(--head-h); flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; color: #fff; }
.cat-h b { font-family: var(--f-head); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-h em { font-style: normal; font-family: var(--f-mono); font-size: 10px; opacity: .92; margin-left: 8px; }
.sub-l { height: var(--sub-h); flex: none; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  padding: 0 8px; display: block; line-height: var(--sub-h); border-top: var(--lw-1) solid var(--hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles { display: flex; flex-wrap: wrap; align-content: stretch; border-top: var(--lw-1) solid var(--hair); min-height: 0; }
.t { min-height: var(--tile-h); display: flex; align-items: center; justify-content: center; padding: 5px 7px;
  box-shadow: inset calc(-1 * var(--lw-1)) calc(-1 * var(--lw-1)) 0 var(--hair); color: var(--ink); text-decoration: none; overflow: hidden; }
.t img { max-width: 100%; max-height: var(--logo-max-h); object-fit: contain; display: block; }
/* white/very light logos: drawn as ink silhouettes so every cell stays white */
.t.light img { filter: brightness(0); opacity: .85; }
.t span { max-width: 80px; font-family: var(--f-label); font-weight: 700; font-size: 12.5px; line-height: 1; text-align: center; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
a.t:hover, a.t:focus-visible { outline: var(--lw-2) solid var(--ink); outline-offset: -1px; }
a.t:active { background: var(--paper); }

/* title block */
.tblock { flex: none; margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); border: var(--lw-3) solid var(--ink); background: var(--paper);
  font-family: var(--f-mono); font-size: 10.5px; }
.tblock > div { padding: 5px 8px; border: var(--lw-1) solid var(--ink); min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; }
.tblock .k { color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; font-size: 8.5px; display: flex; align-items: center; }
.tblock .big { grid-column: 1 / 3; font-family: var(--f-head); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.tblock a { color: inherit; }

@media (prefers-reduced-motion: no-preference) { .sheet { transition: none; } }