:root {
  --bg: #36362f; --bg-deep: #2b2b25; --panel: #3c3c34;
  --ink: #e8e4d8; --ink-dim: #c4c0b3; --ink-faint: #8a8778;
  --orange: #d95d2a; --orange-bright: #e87140;
  --line: #6a6759; --line-faint: #4a4740;
  --green: #9fb673; --amber: #e0ad4a; --blue: #7fa8b0;
  /* phase bands */
  --front: #7fa8b0; --reactor: #e87140; --back: #9fb673;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 44px 28px 56px; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 14px; text-decoration: none; transition: color .15s;
}
.kicker::before { content: ''; width: 34px; height: 2px; background: var(--orange); }
.kicker:hover { color: var(--orange-bright); }
h1 {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(30px, 5vw, 52px); line-height: 0.95; letter-spacing: 0.005em;
  text-transform: uppercase; margin: 0;
}
h1 .accent { color: var(--orange); }
.lede { margin: 16px 0 0; max-width: 74ch; font-size: clamp(14px, 1.7vw, 16px); color: var(--ink-dim); }

.controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 30px 0 10px;
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.legend .item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim);
}
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.ctl-right { display: flex; gap: 8px; align-items: center; }
.toggle-btn, .snapshot-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); background: transparent;
  border: 1px solid var(--line-faint); border-radius: 6px;
  padding: 7px 12px; cursor: pointer; transition: all .15s;
}
.toggle-btn:hover, .snapshot-btn:hover { color: var(--ink); border-color: var(--line); }
.toggle-btn[aria-pressed="true"] {
  color: #fff; background: var(--green); border-color: var(--green);
}

#stage { position: relative; }
#canvas { width: 100%; height: auto; display: block; }

/* ---- ring diagram ---- */
.ring { fill: none; stroke: var(--line-faint); stroke-width: 2; }
.flow { fill: none; stroke: var(--line); stroke-width: 2; marker-end: url(#arrow); }
.recycle {
  fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 7 6;
  marker-end: url(#arrow-recycle); opacity: .5; transition: opacity .2s, stroke-width .2s;
}
#canvas.loop .recycle { opacity: 1; stroke-width: 3; }
#canvas.loop .node.disposal { opacity: .4; }
.recycle-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; fill: var(--green);
  opacity: .55; text-anchor: middle;
}
#canvas.loop .recycle-label { opacity: 1; }

.node { cursor: pointer; transition: opacity .2s; }
.node rect {
  stroke-width: 2; transition: filter .15s;
  fill: var(--panel);
}
.node.phase-front rect { stroke: var(--front); }
.node.phase-reactor rect { stroke: var(--reactor); }
.node.phase-back rect { stroke: var(--back); }
.node:hover rect { filter: brightness(1.25); }
.node.selected rect { fill: var(--bg-deep); stroke-width: 3.5; }
.node .nname {
  font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; fill: var(--ink);
  text-anchor: middle; pointer-events: none;
}
.node .ncount {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
  fill: var(--ink-faint); text-anchor: middle; pointer-events: none;
}
.node.selected .ncount { fill: var(--ink-dim); }
.node .norder {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-anchor: middle; pointer-events: none;
}
.node.phase-front .norder { fill: var(--front); }
.node.phase-reactor .norder { fill: var(--reactor); }
.node.phase-back .norder { fill: var(--back); }
.band-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle;
}
.core-label {
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; text-anchor: middle; fill: var(--ink-faint);
}

/* ---- mobile stage picker (desktop: hidden; the ring drives selection) ---- */
#stageNav { display: none; }

/* ---- detail panel ---- */
#detail { margin: 26px 0 0; min-height: 200px; }
.d-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.d-head h2 {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0;
}
.d-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px;
}
.d-blurb { margin: 6px 0 20px; max-width: 78ch; color: var(--ink-dim); font-size: 14.5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line-faint); border-left-width: 3px;
  border-radius: 8px; padding: 13px 15px;
}
.card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.card .co { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--ink); }
.card .status { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.s-operating { background: var(--green); }
.s-construction { background: var(--amber); }
.s-development { background: var(--blue); }
.s-announced { background: var(--ink-faint); }
.card .role { font-size: 13px; color: var(--ink-dim); margin: 0 0 10px; }
.card .foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card .prod {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink); background: var(--bg-deep);
  border-radius: 4px; padding: 3px 8px;
}
.card a { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; text-decoration: none; }
.card a.src { color: var(--ink-faint); }
.card a.src:hover { color: var(--ink); }
.card a.rx { color: var(--orange-bright); }
.card a.rx:hover { color: var(--orange); }
.card.integrated { border-left-color: var(--orange-bright); }

footer { margin-top: 34px; border-top: 1px solid var(--line-faint); padding-top: 16px; }
footer p { margin: 4px 0; font-size: 12px; color: var(--ink-faint); }
footer a { color: var(--blue); }
footer .prov { color: var(--amber); }

@media (max-width: 720px) {
  .wrap { padding: 32px 18px 44px; }
  .cards { grid-template-columns: 1fr; }
  #canvas { display: none; }               /* ring is unreadable at phone width */
  .snapshot-btn { display: none; }
  #stageNav {
    display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 4px;
  }
  #stageNav button {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.03em; color: var(--ink-dim); background: transparent;
    border: 1px solid var(--line-faint); border-left-width: 3px; border-radius: 6px;
    padding: 6px 10px; cursor: pointer;
  }
  #stageNav button.sel { color: #fff; background: var(--bg-deep); }
  #stageNav button.p-front { border-left-color: var(--front); }
  #stageNav button.p-reactor { border-left-color: var(--reactor); }
  #stageNav button.p-back { border-left-color: var(--back); }
}

/* Export gating -- see the inline script in index.html. The snapshot control is
   hidden unless the page is opened with the export key. */
html:not(.exports-on) .snapshot-btn { display: none !important; }