/* =========================================================
   SCHEMATIC ON-GRID — 24h cycle component
   Self-contained. Drop in as a single <div> + <script>.
   ========================================================= */
.hs-schematic {
  --c-ink: #0F1010;
  --c-ink-60: rgba(15,16,16,.6);
  --c-ink-45: rgba(15,16,16,.45);
  --c-ink-12: rgba(15,16,16,.12);
  --c-bg: #FAFAF8;
  --c-line: #D4D0C4;
  --c-yellow: #F2A800;
  --c-teal: #0D6E74;
  position: sticky; top: 96px;
  background: var(--c-bg);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(15,16,16,.08);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--c-ink);
}
.hs-schematic__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hs-schematic__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-60); }
.hs-schematic__mode { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--c-ink); color: var(--c-bg); transition: background 0.4s ease; }
.hs-schematic__mode[data-mode="injection"] { background: var(--c-yellow); color: var(--c-ink); }
.hs-schematic__mode[data-mode="grid"] { background: var(--c-teal); color: var(--c-bg); }
.hs-schematic__mode[data-mode="self"] { background: var(--c-ink); }
/* Off-Grid modes */
.hs-schematic__mode[data-mode="charging"]    { background: var(--c-yellow); color: var(--c-ink); }
.hs-schematic__mode[data-mode="discharging"] { background: var(--c-teal); color: var(--c-bg); }
.hs-schematic__mode[data-mode="low"]         { background: #8B1A1A; color: #FAFAF8; }

.hs-schematic__stage { aspect-ratio: 600 / 380; width: 100%; border-radius: 10px; overflow: hidden; position: relative; background: #0B1E2E; }
.hs-schematic__stage svg { display: block; width: 100%; height: 100%; }

.hs-schematic__readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-ink-12); margin-top: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-ink-12); }
.hs-schematic__cell { background: var(--c-bg); padding: 12px 14px; }
.hs-schematic__cell-label { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-60); }
.hs-schematic__cell-value { font-family: 'Outfit', -apple-system, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; line-height: 1; font-variant-numeric: tabular-nums; }
.hs-schematic__cell-unit { font-size: 11px; color: var(--c-ink-45); font-weight: 500; margin-left: 2px; }

.hs-schematic__controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.hs-schematic__play { min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--c-ink); color: var(--c-bg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; padding: 0; }
.hs-schematic__play:hover { background: var(--c-teal); }
.hs-schematic__play svg { width: 12px; height: 12px; fill: currentColor; }
.hs-schematic__scrub-wrap { flex: 1; position: relative; padding: 4px 0; }
.hs-schematic__scrub { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; }
.hs-schematic__scrub::-webkit-slider-runnable-track { height: 2px; background: var(--c-ink-12); border-radius: 999px; }
.hs-schematic__scrub::-moz-range-track { height: 2px; background: var(--c-ink-12); border-radius: 999px; }
.hs-schematic__scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c-yellow); margin-top: -6px; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 4px var(--c-ink-12); cursor: grab; }
.hs-schematic__scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--c-yellow); border: none; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 4px var(--c-ink-12); cursor: grab; }
.hs-schematic__ticks { display: flex; justify-content: space-between; margin-top: 2px; padding: 0 4px; }
.hs-schematic__tick { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--c-ink-45); letter-spacing: 0.04em; }

.hs-schematic__caption { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-ink-12); }
.hs-schematic__caption-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-60); }
.hs-schematic__caption-hint { font-size: 11px; color: var(--c-ink-45); font-family: 'JetBrains Mono', monospace; }

.hsg-flow { stroke-dasharray: 4 6; stroke-linecap: round; }
@keyframes hsg-dash-fwd { to { stroke-dashoffset: -100; } }
@keyframes hsg-dash-rev { to { stroke-dashoffset: 100; } }
.hsg-flow.is-fwd { animation: hsg-dash-fwd 2s linear infinite; }
.hsg-flow.is-rev { animation: hsg-dash-rev 2s linear infinite; }
.hsg-panel { transition: fill 0.6s ease, opacity 0.6s ease; }
.hsg-star { transition: opacity 0.8s ease; }
.hsg-window { transition: fill 0.8s ease, opacity 0.8s ease; }

@media (max-width: 640px) {
  .hs-schematic {
    padding: 16px;
  }
  .hs-schematic__readout {
    grid-template-columns: 1fr 1fr;
  }
  .hs-schematic__cell-value {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .hs-schematic__tick:nth-child(2),
  .hs-schematic__tick:nth-child(4) {
    display: none;
  }
}