/* Sentinel ladder viewer — SVG styling.
 * All colors drive from tokens.css so both phosphor and blueprint themes
 * render cleanly. No inline colors in ladder.js.
 */

.ldr {
  background: var(--bg-base);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 10px;
  overflow-x: auto;
  outline: none;
}
.ldr:focus { border-color: var(--brand); }

.ldr-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 10px;
  color: var(--txt-m);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--bdr);
  flex-wrap: wrap;
}
.ldr-hd-loc { color: var(--brand); font-family: var(--mono); }
.ldr-hd-cmt { color: #a3c58a; font-style: italic; }
/* Keyboard hint + active-feature badge */
.ldr-hd::after {
  content: "D = descriptions";
  margin-left: auto; color: var(--txt-m); font-size: 9px; opacity: 0.45;
  font-family: var(--mono);
}
.ldr.show-desc .ldr-hd::after { content: "\2713 descriptions"; color: #9fc77a; opacity: 1; }

.ldr-svg { display: block; width: 100%; font-family: var(--mono); }
.ldr-empty { color: var(--txt-m); font-size: 11px; padding: 10px 0; }

/* Rails + wires ────────────────────────────────────────────────────────── */
.ldr-rail  { stroke: #5a7a9a; stroke-width: 2.5; }
.ldr-wire  { stroke: #4a5468; stroke-width: 2; }
.ldr-wire.e { stroke: var(--acc); }
.ldr-wire.e.c { stroke: var(--acc); }

/* Contacts ─────────────────────────────────────────────────────────────── */
.ldr-cx-bar { stroke: var(--txt-m); stroke-width: 2; }
.ldr-cx-neg { stroke: var(--warn); stroke-width: 2; }
.ldr-cx.e .ldr-cx-bar { stroke: var(--acc); }
.ldr-cx.c.e .ldr-cx-bar { stroke: var(--acc); }

/* Comparator boxes */
.ldr-cmp-box { fill: var(--bg-el); stroke: var(--bdr-a); stroke-width: 1; }
.ldr-cmp-txt { fill: var(--txt); font-size: 11px; font-family: var(--mono); }

/* Coils ────────────────────────────────────────────────────────────────── */
.ldr-coil-ring { fill: none; stroke: var(--txt-m); stroke-width: 2; }
.ldr-coil-letter { fill: var(--txt); font-size: 10px; font-family: var(--mono); font-weight: 700; }
.ldr-coil.e .ldr-coil-ring { stroke: var(--acc); filter: drop-shadow(0 0 2px var(--acc)); }
.ldr-coil.e .ldr-coil-letter { fill: var(--acc); }

/* AFI — struck through red */
.ldr-afi-box { fill: rgba(229,85,97,.10); stroke: var(--crit); stroke-width: 1.5; }
.ldr-afi-txt { fill: var(--crit); font-size: 10px; font-family: var(--mono); font-weight: 700; text-decoration: line-through; }

/* Function blocks — compact, tag + value per operand line */
.ldr-block-box { fill: var(--bg-el); stroke: var(--bdr-a); stroke-width: 1; }
.ldr-block-mnem { fill: var(--brand); font-size: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: .05em; }
.ldr-block-op { font-size: 10px; font-family: var(--mono); }
.ldr-block-op-name { fill: var(--txt-s); }
.ldr-block-op-eq { fill: var(--txt-m); }
.ldr-block-op-val { fill: var(--txt); font-weight: 700; }
.ldr-block.e .ldr-block-box { stroke: var(--acc); }

/* Tag + value labels above/below shape */
.ldr-tag { fill: var(--txt); font-size: 10px; font-family: var(--mono); }
.ldr-val { fill: var(--txt-s); font-size: 10px; font-family: var(--mono); }
/* Optional engineer-description overlay, toggled with D */
.ldr-desc { fill: #9fc77a; font-size: 9px; font-family: var(--font, sans-serif); font-style: italic; display: none; }
.ldr.show-desc .ldr-desc { display: inline; }

/* Branch group */
.ldr-branch .ldr-wire { stroke: #4a5468; }
.ldr-branch.e .ldr-wire { stroke: var(--acc); }

/* Hover / selection — applied via class delegation */
g.ldr-elem { cursor: pointer; }
g.ldr-elem:hover .ldr-cx-bar,
g.ldr-elem:hover .ldr-coil-ring,
g.ldr-elem:hover .ldr-cmp-box,
g.ldr-elem:hover .ldr-block-box { stroke-width: 2.5; }
g.ldr-elem.selected { filter: drop-shadow(0 0 4px var(--brand)); }

/* Diff highlights */
g.ldr-elem.d-added       { filter: drop-shadow(0 0 4px var(--acc)); }
g.ldr-elem.d-added .ldr-cx-bar,
g.ldr-elem.d-added .ldr-block-box,
g.ldr-elem.d-added .ldr-coil-ring { stroke: var(--acc); stroke-width: 2.5; }
g.ldr-elem.d-modified .ldr-block-box,
g.ldr-elem.d-modified .ldr-cx-bar,
g.ldr-elem.d-modified .ldr-coil-ring { stroke: var(--warn); stroke-width: 2.5; }
g.ldr-elem.d-modified { filter: drop-shadow(0 0 3px var(--warn)); }
g.ldr-elem.d-removed { opacity: .4; }

/* Diff summary chip row */
.ldr-diff-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 10px; }
.ldr-diff-summary .bdg { padding: 2px 6px; border-radius: 3px; font-family: var(--mono); }
.ldr-diff-summary .b-ok   { background: rgba(61,184,130,.12); color: var(--acc); }
.ldr-diff-summary .b-warn { background: rgba(229,169,65,.12); color: var(--warn); }
.ldr-diff-summary .b-info { background: rgba(84,153,232,.12); color: var(--info); }
.ldr-diff-summary .b-err  { background: rgba(229,85,97,.12); color: var(--crit); }

/* Removed-instruction fallback list (unified mode) */
.ldr-diff-removed { margin-top: 8px; padding: 6px 8px; background: rgba(229,85,97,.04); border-left: 2px solid var(--crit); border-radius: 3px; }
.ldr-diff-removed-hd { font-size: 10px; color: var(--crit); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.ldr-removed-row { font-size: 10px; text-decoration: line-through; color: var(--txt-m); padding: 1px 0; }

/* Side-by-side wrapper */
.ldr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ldr-split-side { min-width: 0; }
.ldr-split-side::before { content: attr(data-side); display: block; font-size: 9px; color: var(--txt-m); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; font-family: var(--mono); }