/* Single-line diagram, component rail and network outline.
   Every colour is a token. The diagram reads its paints from --sld-* custom
   properties set here from tokens, so the dark theme and the print/export
   colours are one remap each. State is drawn from attributes the scripts set
   (data-selected, data-hover, data-drop, aria-pressed, aria-selected). */

/* ---- Drawing paints ----------------------------------------------------------------- */
.hc-sld, .hc-sld-ghost {
  --sld-ink: var(--ink-900);          /* symbol outlines, bus bars */
  --sld-feeder: var(--ink-700);       /* feeders and supply wiring */
  --sld-paper: var(--paper-0);        /* symbol and card fill */
  --sld-sunken: var(--paper-2);
  --sld-text: var(--text-primary);
  --sld-text-2: var(--text-secondary);
  --sld-muted: var(--ink-300);        /* disabled strokes and text */
  --sld-line: var(--line-default);
  --sld-sel-fill: var(--surface-brand-subtle);
}
[data-theme='dark'] .hc-sld, [data-theme='dark'] .hc-sld-ghost {
  --sld-ink: var(--text-primary);
  --sld-feeder: var(--text-body);
  --sld-muted: var(--text-muted);
}
/* Print colours (report, SVG and PNG export): ink on white whatever the theme.
   --text-inverse is white in both themes. */
.hc-sld--print, [data-theme='dark'] .hc-sld--print {
  --sld-ink: var(--ink-900);
  --sld-feeder: var(--ink-700);
  --sld-paper: var(--text-inverse);
  --sld-sunken: var(--ink-50);
  --sld-text: var(--ink-900);
  --sld-text-2: var(--ink-400);
  --sld-muted: var(--ink-300);
  --sld-line: var(--ink-100);
  --sld-sel-fill: var(--text-inverse);
}

/* ---- Canvas --------------------------------------------------------------------------- */
.hc-sld-host { user-select: none; -webkit-user-select: none; }
.hc-sld { display: block; overflow: hidden; }
.hc-sld-host > .hc-sld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: default;
}
.hc-sld-host > .hc-sld:focus { outline: none; }
.hc-sld-host > .hc-sld:focus-visible { outline: 2px solid var(--red-500); outline-offset: -2px; box-shadow: none; }
.hc-sld.is-space, .hc-sld.is-space * { cursor: grab; }
.hc-sld.is-panning, .hc-sld.is-panning *, .hc-sld.is-dragging, .hc-sld.is-dragging * { cursor: grabbing; }
html.hc-sld-dragging, html.hc-sld-dragging * { cursor: grabbing !important; }

.hc-sld__grid-minor { fill: none; stroke: var(--grid-line); }
.hc-sld__grid-major { fill: none; stroke: var(--grid-line-major); }
[data-theme='dark'] .hc-sld__grid-minor { stroke: var(--grid-line-inverse); }
[data-theme='dark'] .hc-sld__grid-major { stroke: var(--line-hairline); }

/* ---- Symbols ------------------------------------------------------------------------------ */
.hc-sym__body { fill: var(--sld-paper); stroke: var(--sld-ink); stroke-width: 1.75; stroke-linejoin: round; transition: stroke var(--dur-slow) var(--ease-out); }
.hc-sym__fine { fill: none; stroke: var(--sld-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-slow) var(--ease-out); }
.hc-sym__fill { fill: var(--sld-paper); stroke: none; }
.hc-sym__outline { fill: none; stroke: var(--sld-ink); stroke-width: 1.75; transition: stroke var(--dur-slow) var(--ease-out); }
.hc-sym__dot { fill: var(--sld-ink); stroke: none; }
.hc-sym__blade { stroke: var(--sld-ink); stroke-width: 1.75; stroke-linecap: round; }
.hc-sym__letter { font: 700 18px/1 var(--font-sans); fill: var(--sld-ink); transition: fill var(--dur-slow) var(--ease-out); }

/* ---- Feeders -------------------------------------------------------------------------------- */
.hc-feeder__line { fill: none; stroke: var(--sld-feeder); stroke-width: 1.5; stroke-linejoin: round; }
.hc-feeder__dot { fill: var(--sld-ink); stroke: none; }
.hc-feeder__cable { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; fill: var(--sld-text-2); }
.hc-feeder.is-off .hc-feeder__line,
.hc-feeder.is-lifted .hc-feeder__line { stroke: var(--sld-muted); stroke-dasharray: 5 4; }
.hc-feeder.is-off .hc-feeder__dot { fill: var(--sld-muted); }

/* ---- Buses ------------------------------------------------------------------------------------ */
.hc-bus { cursor: grab; }
.hc-bus--root { cursor: pointer; }
.hc-bus__frame { fill: transparent; stroke: transparent; stroke-width: 1; }
.hc-bus__bar { fill: var(--sld-ink); transition: fill var(--dur-fast) var(--ease-out); }
.hc-bus__name { font: 600 13px/1 var(--font-sans); fill: var(--sld-text); }
.hc-bus[data-hover='true'] .hc-bus__frame, .hc-bus:hover .hc-bus__frame { stroke: var(--line-strong); }
.hc-bus[data-selected='true'] .hc-bus__bar { fill: var(--red-500); }
.hc-bus[data-drop='true'] .hc-bus__frame { stroke: var(--red-500); stroke-dasharray: 4 3; }
.hc-bus.is-off .hc-bus__bar, .hc-bus.is-lifted .hc-bus__bar { fill: var(--sld-muted); }
.hc-bus.is-off .hc-bus__name, .hc-bus.is-lifted .hc-bus__name { fill: var(--sld-muted); }
.hc-bus.is-off[data-selected='true'] .hc-bus__bar { fill: var(--red-500); }

.hc-chip { fill: var(--sld-paper); stroke: var(--sld-line); stroke-width: 1; }
.hc-chip__text { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; fill: var(--sld-text); }
.hc-chip__dot { fill: var(--red-500); }

/* ---- Drives and loads ------------------------------------------------------------------------ */
.hc-node { cursor: grab; }
.hc-node__frame { fill: transparent; stroke: transparent; stroke-width: 1; }
.hc-node[data-hover='true'] .hc-node__frame, .hc-node:hover .hc-node__frame { stroke: var(--line-strong); }
.hc-node[data-selected='true'] .hc-node__frame { stroke: var(--red-500); stroke-width: 2; }
.hc-node.is-lifted .hc-node__frame { stroke: var(--line-strong); stroke-dasharray: 4 3; stroke-width: 1; }

.hc-card { fill: var(--sld-paper); stroke: var(--sld-line); stroke-width: 1; filter: drop-shadow(var(--shadow-1)); }
.hc-sld.is-busy .hc-card, .hc-sld--static .hc-card { filter: none; }
.hc-node[data-selected='true'] .hc-card { fill: var(--sld-sel-fill); }
.hc-card__name { font: 600 13px/1 var(--font-sans); fill: var(--sld-text); }
.hc-card__line { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; fill: var(--sld-text-2); }
.hc-card__line--result { fill: var(--sld-text); }

.hc-node__qtybg { fill: var(--sld-ink); }
.hc-node__qty { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; fill: var(--sld-paper); }

.hc-off__bg { fill: var(--sld-sunken); stroke: var(--sld-line); stroke-width: 1; }
.hc-off__text { font: var(--type-label); letter-spacing: var(--tracking-label); fill: var(--sld-text-2); }

/* Disabled (effectively): muted outlines and text, dashed feeder, OFF badge. Never opacity. */
.hc-node.is-off .hc-sym__body, .hc-node.is-off .hc-sym__fine,
.hc-node.is-lifted .hc-sym__body, .hc-node.is-lifted .hc-sym__fine { stroke: var(--sld-muted); }
.hc-node.is-off .hc-card__name, .hc-node.is-off .hc-card__line,
.hc-node.is-lifted .hc-card__name, .hc-node.is-lifted .hc-card__line { fill: var(--sld-muted); }
.hc-node.is-off .hc-node__qtybg { fill: var(--sld-muted); }

/* ---- Supply chain ------------------------------------------------------------------------------ */
.hc-src__wire { fill: none; stroke: var(--sld-feeder); stroke-width: 1.75; stroke-linejoin: round; transition: stroke var(--dur-slow) var(--ease-out); }
.hc-src__wire.is-inactive { stroke: var(--sld-muted); stroke-dasharray: 5 4; }
.hc-src__part { cursor: pointer; }
.hc-src__part.is-inactive .hc-sym__body, .hc-src__part.is-inactive .hc-sym__fine,
.hc-src__part.is-inactive .hc-sym__outline { stroke: var(--sld-muted); }
.hc-src__part.is-inactive .hc-sym__letter, .hc-src__part.is-inactive .hc-src__name { fill: var(--sld-muted); }
.hc-src__frame { fill: transparent; stroke: transparent; stroke-width: 1; }
.hc-src__part:hover .hc-src__frame { stroke: var(--line-strong); }
.hc-src__part[data-selected='true'] .hc-src__frame { stroke: var(--red-500); stroke-width: 2; }
.hc-src__name { font: 600 13px/1 var(--font-sans); fill: var(--sld-text); transition: fill var(--dur-slow) var(--ease-out); }
.hc-src__line { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; fill: var(--sld-text-2); }
.hc-src__tag { font: 600 11px/1 var(--font-mono); letter-spacing: var(--tracking-label); fill: var(--sld-text); }
.hc-src__tick { fill: none; stroke: var(--sld-ink); stroke-width: 2; stroke-dasharray: 3 2; }

/* ---- First-run hint, drop marker ----------------------------------------------------------------- */
.hc-sld__hint { font: var(--type-body-sm); fill: var(--text-secondary); }
.hc-drop { pointer-events: none; }
.hc-drop__caret { fill: none; stroke: var(--red-500); stroke-width: 2; }
.hc-drop__tip { fill: var(--red-500); }

/* ---- Enter, exit (fades and a 6 px rise only) ------------------------------------------------------ */
.hc-node__body.is-entering, .hc-bus__body.is-entering, .hc-feeder.is-entering {
  animation: hc-sld-rise var(--dur-slow) var(--ease-out) both;
}
.hc-node.is-exiting, .hc-bus.is-exiting, .hc-feeder.is-exiting {
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
@keyframes hc-sld-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Floating controls ---------------------------------------------------------------------------- */
.hc-sld__labels { position: absolute; top: 12px; right: 12px; z-index: 2; box-shadow: var(--shadow-1); }
.hc-sld__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--surface-card); border: 1px solid var(--line-default); border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}
.hc-sld__zoomval { min-width: 58px; justify-content: center; font: var(--type-mono-sm); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.hc-sld__zoomsep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--line-default); }
.hc-sld__rename {
  position: absolute; z-index: 3; height: auto; min-height: 24px; padding: 2px 6px;
  font-family: var(--font-sans); font-weight: 600; line-height: 1.2;
  box-shadow: var(--shadow-2);
}
.hc-sld__rename[aria-invalid='true'] { border-color: var(--red-500); }

/* Drag ghost (follows the pointer; a lightweight copy of the symbol and name). */
.hc-sld-ghost {
  position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  will-change: transform;
}
.hc-sld-ghost__sym { display: block; overflow: visible; }
.hc-sld-ghost__sym .hc-bus__bar { fill: var(--sld-ink); }
.hc-sld-ghost__label {
  display: flex; align-items: center; gap: 6px; padding: 2px 6px;
  background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: var(--radius-1);
  box-shadow: var(--shadow-2); font: 600 12px/1.3 var(--font-sans); color: var(--text-primary); white-space: nowrap;
}
.hc-sld-ghost__extra { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.hc-sld-ghost__hint {
  padding: 1px 6px; border: 1px solid var(--line-default); border-radius: var(--radius-1);
  background: var(--surface-card); font: var(--type-mono-sm); color: var(--text-secondary); white-space: nowrap;
}
.hc-sld-ghost__hint:empty { display: none; }
.hc-sld-ghost[data-valid='true'] .hc-sld-ghost__hint { border-color: var(--red-500); color: var(--text-primary); }
.hc-sld-ghost.is-returning { opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }

/* ---- Component rail ------------------------------------------------------------------------------- */
.hc-glyph { display: block; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hc-glyph * { vector-effect: non-scaling-stroke; }
.hc-glyph .hc-glyph__bar { stroke-width: 3; stroke-linecap: butt; }
.hc-glyph .hc-glyph__dot { fill: currentColor; stroke: none; }
.hc-rail__comp { touch-action: none; cursor: grab; }
.hc-rail__comp:active { cursor: grabbing; }
.hc-rail__sep { flex: none; height: 1px; margin: 6px 6px; background: var(--line-chrome); }
/* Rail captions at the 11px brand floor (the vendored chrome sets 10px). */
.hc-rail--sld .ar-rail__label { font-family: var(--font-sans); font-size: 11px; }
.ar-rail__btn[aria-pressed='true'] { color: var(--text-inverse); background: var(--ink-700); }
.ar-rail__btn[aria-pressed='true']::before { content: ''; position: absolute; left: -5px; top: 6px; bottom: 6px; width: 2px; background: var(--red-500); }
.hc-rail--sld .ar-rail__btn:focus-visible { outline: none; box-shadow: var(--focus-ring-inverse); }

@media (max-width: 760px) {
  .hc-rail--sld .ar-rail__btn { width: auto; min-width: 60px; flex: 0 0 auto; }
  .hc-rail--sld .hc-rail__sep { width: 1px; height: auto; margin: 6px 4px; align-self: stretch; }
  .hc-rail--sld .hc-rail__outline { display: none; }
  .ar-rail__btn[aria-pressed='true']::before { left: 6px; right: 6px; top: auto; bottom: -4px; width: auto; height: 2px; }
  .hc-sld__labels { top: 8px; right: 8px; }
  .hc-sld__zoom { right: 8px; bottom: 8px; }
}

/* ---- Network outline --------------------------------------------------------------------------------- */
.hc-ol { display: flex; flex-direction: column; }
.hc-ol[hidden] { display: none; }
.hc-ol__head { position: sticky; top: 0; z-index: 1; padding-right: 4px; }
.hc-ol__count { color: var(--text-secondary); }
.hc-ol__close { margin-left: auto; }
.hc-ol__tree { position: relative; padding: 4px 0 12px; user-select: none; -webkit-user-select: none; }
.hc-ol__row {
  position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px 0 calc(10px + var(--hc-ol-depth, 0) * 14px);
  font: var(--type-body-sm); color: var(--text-primary); cursor: pointer;
  transition: var(--transition-control);
}
.hc-ol__row:hover, .hc-ol__row[data-hover='true'] { background: var(--surface-hover); }
.hc-ol__row[aria-selected='true'] { background: var(--surface-brand-subtle); box-shadow: inset 2px 0 0 var(--red-500); }
.hc-ol__row:focus { outline: none; }
.hc-ol__row:focus-visible { outline: 2px solid var(--red-500); outline-offset: -2px; box-shadow: inset 2px 0 0 var(--red-500); }
.hc-ol__glyph { display: grid; place-items: center; color: var(--text-secondary); }
.hc-ol__row[aria-selected='true'] .hc-ol__glyph { color: var(--text-primary); }
.hc-ol__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ol__row[data-kind='bus'] .hc-ol__name, .hc-ol__row[aria-expanded] .hc-ol__name { font-weight: 600; }
.hc-ol__fig { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.hc-ol__row.is-off .hc-ol__name, .hc-ol__row.is-off .hc-ol__fig { color: var(--text-muted); }
.hc-ol__row.is-dragging .hc-ol__name { color: var(--text-muted); }
.hc-ol__tree.is-dragging .hc-ol__row { cursor: grabbing; }
.hc-ol__row[data-drop='true'] { box-shadow: inset 0 0 0 1px var(--red-500); background: var(--surface-brand-subtle); }
.hc-ol__drop {
  position: absolute; left: calc(10px + var(--hc-ol-depth, 0) * 14px); right: 8px; height: 2px;
  background: var(--red-500); pointer-events: none;
}
.hc-ol__drop[hidden] { display: none; }

/* Phones show one pane at a time and have no outline, whatever the saved
   preference says (this file loads after app.css, so it must say so too). */
@media (max-width: 760px) {
  .hc-ol, .hc-ol:not([hidden]) { display: none; }
}

@media (pointer: coarse) {
  .hc-ol__row { min-height: 44px; }
}