/* ============================================================
   PLC Academy — industrial dark theme
   Colour language mirrors a real PLC online-monitoring view:
   green = power flow / TRUE, grey = no power / FALSE.
   ============================================================ */

:root {
  --bg:            #0b0f14;
  --bg-2:          #111823;
  --bg-3:          #16202e;
  --panel:         #131c27;
  --panel-2:       #1a2634;
  --line:          #24344a;
  --line-soft:     #1b2836;
  --text:          #dce6f2;
  --text-dim:      #8fa3bb;
  --text-faint:    #5d708a;

  --live:          #35e07a;      /* energised / power flow */
  --live-glow:     #35e07a55;
  --live-dark:     #12351f;
  --dead:          #47597a;      /* de-energised */

  --amber:         #ffb020;
  --red:           #ff4d5e;
  --blue:          #4aa8ff;
  --violet:        #a97bff;
  --cyan:          #2fd8d8;

  --accent:        #ffb020;

  --ok:            #35e07a;
  --fail:          #ff4d5e;

  --radius:        10px;
  --radius-sm:     6px;
  --mono: "Cascadia Mono", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;

  /* power-flow rendering: colour is only ONE of three channels.
     The other two — stroke weight and motion — carry the same
     information for anyone who cannot separate the hues. */
  --seg-w-dead:    2.4px;
  --seg-w-live:    4px;
  --flow-speed:    0.55s;
}

/* ------------------------------------------------------------
   Palettes. Colour vision deficiency affects roughly 1 in 12 men,
   which is a large slice of this audience, so green-on-slate is a
   default rather than an assumption.
   ------------------------------------------------------------ */

/* High contrast — separated by luminance, so it survives any CVD,
   including monochromacy. */
:root[data-palette="contrast"] {
  --live:       #ffffff;
  --live-glow:  #ffffff66;
  --live-dark:  #1d2b3a;
  --dead:       #33455e;
  --ok:         #ffffff;
  --bg:         #05080c;
  --bg-2:       #0b111a;
  --bg-3:       #101a26;
  --line:       #2c405c;
}

/* Blue / orange — the classic CVD-safe opposing pair. Keeps a sense
   of colour identity where the high-contrast palette is monochrome. */
:root[data-palette="amber"] {
  --live:       #ff9f1c;
  --live-glow:  #ff9f1c55;
  --live-dark:  #3a2708;
  --dead:       #3f6796;
  --ok:         #ff9f1c;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#app { height: 100%; display: flex; flex-direction: column; }
button { font-family: inherit; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #253549; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #33475f; }

/* ============================================================
   TOP BAR
   ============================================================ */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 54px; flex: 0 0 54px;
  background: linear-gradient(180deg, #131d29, #0e151e);
  border-bottom: 1px solid var(--line);
  z-index: 40;
}
#brand { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .3px; font-size: 17px; }
#brand .bolt { color: var(--amber); filter: drop-shadow(0 0 6px #ffb02066); }
.brand-accent { color: var(--amber); }
.spacer { flex: 1; }

.tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: .15s;
}
.tb-btn:hover { background: #22334a; color: var(--text); border-color: #33486a; }
.tb-btn.icon-only { padding: 7px 9px; }
#btn-home { display: none; }
body.in-level #btn-home { display: inline-flex; }
body.in-level #brand { display: none; }

#level-title-wrap { display: none; flex-direction: column; line-height: 1.15; }
body.in-level #level-title-wrap { display: flex; }
#level-chapter { font-size: 11px; color: var(--amber); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
#level-title { font-size: 15px; font-weight: 700; }

#stats { display: flex; gap: 8px; align-items: center; }
.stat {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700;
}
.stat-ico { color: var(--cyan); }
.stat-ico.star { color: var(--amber); }
#stat-rank { color: var(--violet); font-size: 12px; letter-spacing: .4px; }

/* ============================================================
   SCREENS
   ============================================================ */
.screen { display: none; flex: 1; min-height: 0; overflow: auto; }
.screen.active { display: block; }
#screen-level.active { display: flex; flex-direction: column; overflow: hidden; }

/* ============================================================
   MAP / HOME
   ============================================================ */
.map-hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px;
  padding: 42px 40px 30px; max-width: 1240px; margin: 0 auto; align-items: center;
}
.hero-badge {
  display: inline-block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--amber); border: 1px solid #ffb02044; background: #ffb0200f;
  padding: 5px 11px; border-radius: 20px; font-weight: 700; margin-bottom: 16px;
}
.map-hero h1 { font-size: 40px; line-height: 1.12; margin: 0 0 14px; letter-spacing: -.5px; }
.hero-sub { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin: 0 0 24px; max-width: 52ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-progress { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; }
.hero-progress b { color: var(--text); }
.hero-art { min-height: 260px; }

#chapter-list { max-width: 1240px; margin: 0 auto; padding: 10px 40px 60px; }

.chapter {
  background: linear-gradient(180deg, var(--panel), #101822);
  border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 18px; overflow: hidden;
}
.chapter.locked { opacity: .5; }
.ch-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.ch-num {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: #1d2b3d; border: 1px solid var(--line); color: var(--amber);
}
.ch-meta h3 { margin: 0; font-size: 17px; }
.ch-meta p { margin: 3px 0 0; color: var(--text-dim); font-size: 13px; }
.ch-lang {
  margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; letter-spacing: .5px;
  background: #16283a; border: 1px solid #24405c; color: var(--blue);
}
.ch-lang.lad { color: var(--live); border-color: #1d5738; background: #10241a; }
.ch-lang.fbd { color: var(--cyan); border-color: #1c4a4a; background: #0f2222; }
.ch-lang.scl { color: var(--violet); border-color: #3c2d5e; background: #1a1428; }
.ch-lang.stl { color: var(--amber); border-color: #5a4318; background: #241c0c; }
.ch-lang.mix { color: var(--red); border-color: #58212a; background: #241016; }

.level-grid-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; padding: 16px 20px 20px; }

.lvl-node {
  position: relative; text-align: left; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; transition: .16s; color: inherit; font: inherit;
}
.lvl-node:hover:not(.locked) { transform: translateY(-3px); border-color: var(--amber); box-shadow: 0 8px 22px #0007; }
.lvl-node.locked { cursor: not-allowed; opacity: .42; }
.lvl-node.done { border-color: #1d5738; background: linear-gradient(180deg, #12241b, #101a16); }
.lvl-node .ln-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lvl-node .ln-idx { font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-weight: 700; }
.lvl-node .ln-lock { margin-left: auto; font-size: 12px; }
.lvl-node .ln-name { font-weight: 700; font-size: 14px; line-height: 1.25; margin-bottom: 6px; }
.lvl-node .ln-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; min-height: 32px; }
.ln-stars { margin-top: 8px; letter-spacing: 2px; font-size: 13px; color: #33455e; }
.ln-stars .on { color: var(--amber); }

#map-footer { text-align: center; color: var(--text-faint); font-size: 12px; padding: 0 20px 40px; }
.footer-links { margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--amber); text-decoration: underline; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer;
  font-weight: 700; font-size: 14px; transition: .15s;
}
.btn:hover { background: #22334a; border-color: #3a5375; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-primary { background: linear-gradient(180deg, #ffc14d, #f0980a); color: #201503; border-color: #d1870a; }
.btn-primary:hover { background: linear-gradient(180deg, #ffcf74, #ffa816); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-run { background: linear-gradient(180deg,#2a9d5c,#1d7b45); border-color:#2f9e60; color:#eafff2; }
.btn-run:hover { background: linear-gradient(180deg,#33b76c,#238a4e); }
.btn-run.running { background: linear-gradient(180deg,#c9483f,#a13129); border-color:#c9483f; }
.btn-test { background: linear-gradient(180deg,#2d6fd0,#1f57ab); border-color:#3a7ad8; color:#eaf3ff; }
.btn-test:hover { background: linear-gradient(180deg,#3a80e6,#2463bd); }

/* ============================================================
   LEVEL LAYOUT
   ============================================================ */
#level-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 42%) 1fr; gap: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
#pane-machine { border-right: 1px solid var(--line); }
.pane-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-2); flex: 0 0 auto;
}
.pane-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--text-dim); }
.pane-head-tools { margin-left: auto; display: flex; gap: 7px; align-items: center; }

.scan-indicator { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-weight: 700; letter-spacing: .5px; }
.scan-dot { width: 9px; height: 9px; border-radius: 50%; background: #33455e; }
.scan-indicator.on .scan-dot { background: var(--live); box-shadow: 0 0 9px var(--live); animation: scanpulse .55s infinite; }
.scan-indicator.on { color: var(--live); }
@keyframes scanpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

#scene-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; background:
  radial-gradient(ellipse at 50% 30%, #16202c 0%, #0b0f14 72%); }
#scene { width: 100%; height: 100%; max-height: 100%; user-select: none; }
.scene-hint { flex: 0 0 auto; padding: 9px 14px; font-size: 12.5px; color: var(--text-dim); border-top: 1px solid var(--line-soft); background: var(--bg-2); min-height: 36px; }
.scene-hint b { color: var(--amber); }

#editor-host { flex: 1; min-height: 0; overflow: auto; position: relative; }

/* ============================================================
   TAG TABLE
   ============================================================ */
#tagtable-wrap { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--bg-2); max-height: 34%; display: flex; flex-direction: column; }
#tagtable-wrap.collapsed #tagtable { display: none; }
.tt-head { display: flex; align-items: center; padding: 7px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--text-dim); font-weight: 700; }
.mini-toggle { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.mini-toggle:hover { background: #22334a; color: var(--text); }
#tagtable { overflow: auto; padding: 0 8px 10px; }
table.tt { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
table.tt th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 4px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; position: sticky; top: 0; background: var(--bg-2); }
table.tt td { padding: 4px 8px; border-top: 1px solid var(--line-soft); }
table.tt tr.kind-in td:first-child { border-left: 3px solid var(--blue); }
table.tt tr.kind-out td:first-child { border-left: 3px solid var(--amber); }
table.tt tr.kind-mem td:first-child { border-left: 3px solid var(--violet); }
.tt-name { color: var(--text); font-weight: 600; }
.tt-addr { color: var(--text-faint); }
.tt-cmt { color: var(--text-faint); font-family: var(--sans); font-size: 11.5px; }
.tt-val { font-weight: 800; text-align: right; }
.tt-val.t { color: var(--live); }
.tt-val.f { color: var(--dead); }
.tt-val.num { color: var(--cyan); }

/* ============================================================
   LADDER EDITOR
   ============================================================ */
#ladder-root { display: flex; flex-direction: column; height: 100%; }
.lad-toolbar {
  display: flex; gap: 5px; padding: 8px 10px; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--line); background: var(--bg-2); flex: 0 0 auto;
  position: sticky; top: 0; z-index: 6;
}
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 5px 8px 3px; cursor: pointer; min-width: 48px; transition: .12s;
}
.tool:hover { border-color: #3a5375; background: #22334a; }
.tool.active { border-color: var(--amber); background: #2a2113; box-shadow: 0 0 0 1px #ffb02055; }
.tool svg { display: block; }
.tool-label { font-size: 9.5px; color: var(--text-dim); font-weight: 700; letter-spacing: .3px; }
.tool.active .tool-label { color: var(--amber); }
.tool-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

.lad-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 12px 90px; }

.rung { margin-bottom: 6px; position: relative; }
.rung-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; padding-left: 4px; }
.rung-num { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-weight: 700; }
.rung-cmt { font-size: 11.5px; color: #6e8299; font-style: italic; }
.rung-del { margin-left: auto; opacity: 0; background: none; border: none; color: var(--red); cursor: pointer; font-size: 13px; padding: 0 6px; }
.rung:hover .rung-del { opacity: .8; }

.rung-body {
  display: flex; align-items: stretch; min-height: 62px;
  background: linear-gradient(180deg, #121a24, #0f151d);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 0;
  overflow-x: auto; overflow-y: hidden;
}
.rail { width: 5px; flex: 0 0 5px; background: var(--dead); border-radius: 2px; margin: 2px 0; transition: background .1s, box-shadow .1s, width .1s; }
.rail.live {
  width: 8px; flex-basis: 8px;
  background: var(--live); box-shadow: 0 0 8px var(--live-glow);
  background-image: repeating-linear-gradient(180deg, #0003 0 5px, transparent 5px 12px);
  animation: railflow var(--flow-speed) linear infinite;
}
@keyframes railflow { to { background-position: 0 12px; } }
.rail.l { margin-right: 0; }

.groups { display: flex; align-items: stretch; }
.outs { display: flex; flex-direction: column; justify-content: center; margin-left: auto; padding-right: 2px; }

/* a group = parallel branches */
.group { display: flex; flex-direction: column; justify-content: center; position: relative; }
.group.multi { padding: 0; }
.branch { display: flex; align-items: center; min-height: 46px; }
.wire { height: 3px; background: var(--dead); flex: 0 0 16px; transition: background .1s, height .1s; }
.wire.live {
  height: 5px; background: var(--live); box-shadow: 0 0 6px var(--live-glow);
  background-image: repeating-linear-gradient(90deg, #0003 0 5px, transparent 5px 12px);
  animation: wireflow var(--flow-speed) linear infinite;
}
@keyframes wireflow { to { background-position: 12px 0; } }
.wire.grow { flex: 1 1 auto; min-width: 16px; }

/* vertical branch connectors */
.group.multi::before, .group.multi::after {
  content: ''; position: absolute; width: 3px; background: var(--dead); top: var(--vt, 23px); bottom: var(--vb, 23px);
}
.group.multi::before { left: 0; }
.group.multi::after { right: 0; }
.group.multi.live-in::before,
.group.multi.live-out::after {
  width: 5px; background: var(--live); box-shadow: 0 0 6px var(--live-glow);
  background-image: repeating-linear-gradient(180deg, #0003 0 5px, transparent 5px 12px);
  animation: railflow var(--flow-speed) linear infinite;
}
.group.multi.live-in::before { left: -1px; }
.group.multi.live-out::after { right: -1px; }

/* Anyone who has asked the OS to calm things down gets weight and
   colour only — no travelling dashes. */
@media (prefers-reduced-motion: reduce) {
  .el.in-live .seg-in, .el.out-live .seg-out,
  .rail.live, .wire.live,
  .group.multi.live-in::before, .group.multi.live-out::after { animation: none; }
  .el.in-live .seg-in, .el.out-live .seg-out { stroke-dasharray: none; }
}
body.no-motion .el.in-live .seg-in,
body.no-motion .el.out-live .seg-out,
body.no-motion .rail.live,
body.no-motion .wire.live,
body.no-motion .group.multi.live-in::before,
body.no-motion .group.multi.live-out::after { animation: none; }
body.no-motion .el.in-live .seg-in,
body.no-motion .el.out-live .seg-out { stroke-dasharray: none; }

/* elements — real <button>s, so Tab reaches them and they speak to
   screen readers. Stripped back to look exactly as before. */
.el {
  position: relative; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; padding: 0 1px;
  background: none; border: none; font: inherit; color: inherit;
}
.el:disabled { cursor: default; }

/* A visible focus ring everywhere, but only for keyboard users. */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.el:focus-visible, .box:focus-visible, .slot:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.el .el-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text); white-space: nowrap; margin-bottom: 1px; }
.el .el-addr { font-family: var(--mono); font-size: 9px; color: var(--text-faint); white-space: nowrap; margin-top: 1px; }
.el.selected { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 5px; }
.el:hover .el-tag { color: var(--amber); }
.el-sym { color: var(--dead); transition: color .1s, filter .1s; }
.el.live .el-sym { color: var(--live); filter: drop-shadow(0 0 5px var(--live-glow)); }
.el.conducting .el-sym { color: var(--live); }

/* ------------------------------------------------------------
   Live power flow, carried on THREE channels at once:
     colour   green (or the chosen palette)
     weight   live conductors are visibly thicker
     motion   live conductors have a travelling dash
   Anyone who cannot separate the hues still reads the rung.
   ------------------------------------------------------------ */
.el-sym-wrap { display: block; line-height: 0; }
/* No transition here on purpose. These repaint every scan, a real
   online view snaps rather than fades, and a transition on a property
   fed by var() fights the per-frame class updates. */
.el-sym .seg {
  stroke: var(--dead); stroke-width: var(--seg-w-dead);
  stroke-linecap: round; fill: none;
}
.el-sym .seg-txt { fill: var(--dead); }

@keyframes segflow { to { stroke-dashoffset: -14; } }

.el.in-live  .seg-in,
.el.out-live .seg-out {
  stroke: var(--live);
  stroke-width: var(--seg-w-live);
  stroke-dasharray: 7 7;
  animation: segflow var(--flow-speed) linear infinite;
  filter: drop-shadow(0 0 3px var(--live-glow));
}
.el.conducting .seg-body { stroke: var(--live); stroke-width: var(--seg-w-live); }
.el.conducting .seg-txt { fill: var(--live); }
.tool .el-sym .seg { stroke: #7f93ad; stroke-width: 2.2; }
.tool .el-sym .seg-txt { fill: #7f93ad; }
.tool.active .el-sym .seg { stroke: var(--amber); }
.tool.active .el-sym .seg-txt { fill: var(--amber); }

.slot {
  width: 26px; height: 30px; margin: 0 1px; border-radius: 4px; cursor: pointer;
  border: 1px dashed #2e415a; background: transparent; display: grid; place-items: center;
  color: #3d5573; font-size: 15px; line-height: 1; transition: .12s; flex: 0 0 26px;
  font-family: inherit; padding: 0;
}
.slot:hover { border-color: var(--amber); color: var(--amber); background: #ffb0200f; }
.armed .slot { border-color: #43608a; }

.branch-add {
  align-self: center; margin-left: 2px; width: 20px; height: 20px; border-radius: 4px;
  border: 1px dashed #2e415a; background: none; color: #3d5573; cursor: pointer; font-size: 11px;
  display: grid; place-items: center; padding: 0;
}
.branch-add:hover { border-color: var(--cyan); color: var(--cyan); }

/* boxes (timers/counters/math) */
.box {
  border: 2px solid var(--dead); border-radius: 6px; background: #0f1721; min-width: 120px;
  padding: 4px 8px 6px; cursor: pointer; transition: .12s;
  font: inherit; color: inherit; text-align: left; display: block;
}
.box.live { border-color: var(--live); border-width: 3px; box-shadow: 0 0 12px var(--live-glow); }
.box.live .box-title::after { content: ' ▸'; }
.box.selected { outline: 2px solid var(--amber); outline-offset: 2px; }
.box-title { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--cyan); text-align: center; letter-spacing: .5px; border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 3px; }
.box.live .box-title { color: var(--live); }
.box-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.box-row b { color: var(--text); font-weight: 700; }
.box-bar { height: 4px; background: #1c2836; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.box-bar i { display: block; height: 100%; background: var(--cyan); width: 0%; transition: width .06s linear; }

.add-rung {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  border: 1px dashed #2e415a; background: transparent; color: var(--text-dim);
  border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13px;
}
.add-rung:hover { border-color: var(--amber); color: var(--amber); }

.el-actions {
  position: absolute; z-index: 20; display: flex; gap: 4px; padding: 5px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px #000a;
}
.el-actions button { font-size: 11.5px; padding: 5px 9px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); cursor: pointer; font-weight: 600; }
.el-actions button:hover { background: #22334a; }
.el-actions button.danger { color: var(--red); }

.lad-empty { text-align: center; color: var(--text-faint); padding: 30px 20px; font-size: 13px; line-height: 1.7; }

/* ============================================================
   FBD EDITOR
   ============================================================ */
#fbd-root { display: flex; flex-direction: column; height: 100%; }
#fbd-canvas-wrap { flex: 1; min-height: 0; overflow: auto; background:
  linear-gradient(#16202c 1px, transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg, #16202c 1px, transparent 1px) 0 0/22px 22px, #0d131b; }
#fbd-canvas { display: block; }
.fbd-hint { padding: 8px 12px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--line-soft); background: var(--bg-2); }

/* ============================================================
   CODE EDITOR (SCL / STL)
   ============================================================ */
#code-root { display: flex; flex-direction: column; height: 100%; }
.code-toolbar { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; align-items: center; }
.code-toolbar .snip {
  font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--cyan); cursor: pointer; font-weight: 700;
}
.code-toolbar .snip:hover { border-color: var(--cyan); background: #10222c; }
.code-wrap { flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; }
.code-gutter {
  flex: 0 0 46px; padding: 12px 8px 12px 0; text-align: right; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.55; color: #3c5170; background: #0d131b; border-right: 1px solid var(--line-soft); user-select: none; overflow: hidden;
}
.code-gutter .gl.err { color: var(--red); font-weight: 800; }
.code-gutter .gl.hit { color: var(--live); }
#code-area {
  flex: 1; min-width: 0; border: none; outline: none; resize: none;
  background: #0d131b; color: #dfe9f5; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  padding: 12px 14px; tab-size: 2; white-space: pre; overflow: auto;
}
.code-status { flex: 0 0 auto; padding: 8px 12px; font-family: var(--mono); font-size: 11.5px; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); min-height: 34px; }
.code-status.err { color: var(--red); }
.code-status.ok { color: var(--live); }

/* ============================================================
   TEST DRAWER
   ============================================================ */
.testdrawer {
  position: absolute; right: 0; bottom: 0; width: min(560px, 100%); max-height: 62%;
  background: var(--panel); border: 1px solid var(--line); border-bottom: none; border-right: none;
  border-radius: 12px 0 0 0; box-shadow: -8px -8px 30px #0009; transform: translateY(110%);
  transition: transform .28s cubic-bezier(.2,.8,.3,1); display: flex; flex-direction: column; z-index: 30;
}
.testdrawer.open { transform: translateY(0); }
.td-head { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.td-head .mini-toggle { margin-left: auto; }
#td-body { overflow: auto; padding: 10px 16px 18px; }
.tcase { margin-bottom: 12px; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.tcase-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--bg-3); font-weight: 700; font-size: 13px; }
.tcase.pass .tcase-head { color: var(--ok); }
.tcase.fail .tcase-head { color: var(--fail); }
.tcase-badge { font-size: 15px; }
.tstep { display: flex; gap: 9px; padding: 6px 12px 6px 34px; font-size: 12px; font-family: var(--mono); color: var(--text-dim); border-top: 1px solid var(--line-soft); }
.tstep.pass::before { content: '✓'; color: var(--ok); font-weight: 800; }
.tstep.fail::before { content: '✕'; color: var(--fail); font-weight: 800; }
.tstep .why { color: var(--text-faint); }
.td-summary { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.td-summary.pass { background: #12301f; border: 1px solid #1f6b3f; color: var(--ok); }
.td-summary.fail { background: #2c1219; border: 1px solid #6b2130; color: var(--fail); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-layer {
  position: fixed; inset: 0; background: #060a0ecc; backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal-layer.open { display: flex; }
.modal {
  background: linear-gradient(180deg, #16202d, #101822); border: 1px solid var(--line);
  border-radius: 16px; max-width: 660px; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: 0 30px 80px #000c; animation: pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop { from { transform: scale(.94) translateY(10px); opacity: 0 } }
.m-head { padding: 22px 26px 0; }
.m-kicker { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--amber); font-weight: 800; margin-bottom: 6px; }
.m-head h2 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.3px; }
.m-body { padding: 16px 26px 4px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }
.m-body p { margin: 0 0 12px; }
.m-body b, .m-body strong { color: var(--text); }
.m-body code { font-family: var(--mono); background: #0d151f; border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; color: var(--cyan); font-size: 12.5px; }
.m-foot { padding: 16px 26px 24px; display: flex; gap: 10px; justify-content: flex-end; }

.mentor { display: flex; gap: 14px; align-items: flex-start; background: #0f1a24; border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.mentor-face { flex: 0 0 46px; }
.mentor-txt { font-size: 14px; line-height: 1.6; color: var(--text); }
.mentor-txt .who { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cyan); font-weight: 800; margin-bottom: 4px; }

.goal-box { background: #12241b; border: 1px solid #1f5a38; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.goal-box h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--live); }
.goal-box ul { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.7; }

.teach { background: #14192b; border: 1px solid #2c3560; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.teach h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--violet); }
.teach p:last-child { margin-bottom: 0; }
.teach .sym-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 4px; }
.teach .sym-item { text-align: center; }
.teach .sym-item span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; font-family: var(--mono); }

.stars-big { text-align: center; font-size: 46px; letter-spacing: 8px; color: #2a3a51; margin: 6px 0 12px; }
.stars-big .on { color: var(--amber); text-shadow: 0 0 24px #ffb02066; animation: starpop .4s backwards; }
.stars-big .on:nth-child(2) { animation-delay: .16s }
.stars-big .on:nth-child(3) { animation-delay: .32s }
@keyframes starpop { from { transform: scale(0) rotate(-70deg); opacity: 0 } }
.reward-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.reward { background: #0f1a24; border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; text-align: center; }
.reward .rv { font-size: 20px; font-weight: 800; color: var(--cyan); }
.reward .rl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); }

/* tag picker */
.tagpick { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.tagpick button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; color: var(--text); font-family: var(--mono); font-size: 13px;
}
.tagpick button:hover { border-color: var(--amber); background: #22334a; }
.tagpick .tp-addr { color: var(--text-faint); font-size: 11px; }
.tagpick .tp-cmt { margin-left: auto; font-family: var(--sans); font-size: 11.5px; color: var(--text-dim); }
.tagpick .tp-kind { font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: 800; letter-spacing: .5px; }
.tp-kind.in { background: #13283f; color: var(--blue); }
.tp-kind.out { background: #2e2410; color: var(--amber); }
.tp-kind.mem { background: #221a33; color: var(--violet); }

.numfield { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.numfield input { flex: 1; background: #0d151f; border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 10px 12px; font-family: var(--mono); font-size: 14px; }
.numfield input:focus { outline: none; border-color: var(--amber); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.presets button { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-3); color: var(--cyan); cursor: pointer; }
.presets button:hover { border-color: var(--cyan); }

/* ============================================================
   TOASTS / CONFETTI
   ============================================================ */
#toast-layer { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: #182432; border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 11px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 30px #000a; animation: toastin .3s, toastout .3s 2.5s forwards;
}
.toast.ok { border-left-color: var(--live); }
.toast.bad { border-left-color: var(--red); }
@keyframes toastin { from { transform: translateY(-16px); opacity: 0 } }
@keyframes toastout { to { transform: translateY(-16px); opacity: 0 } }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 110; display: none; }
#confetti.on { display: block; }

/* ============================================================
   NOTEBOOK VIEW — the rung as you would sketch it on paper
   ============================================================ */
#notebook {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  color: #b9cbe0; background: #0d151f; border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0;
  padding: 14px 16px; margin: 0 0 16px; overflow-x: auto; white-space: pre;
}

/* ============================================================
   EMBED MODE  (?embed=1) — for dropping into another site
   ============================================================ */
body.embed #brand { display: none; }
body.embed #btn-reset { display: none; }
body.embed .map-hero { padding-top: 24px; }
body.embed #map-footer { display: none; }

/* ============================================================
   PRINT — the completion certificate is portfolio evidence, so it
   has to come out of a printer looking like a document rather than
   a screenshot of a dark website.
   ============================================================ */
@media print {
  body { background: #fff !important; color: #111 !important; overflow: visible; height: auto; }
  #topbar, #screen-map, #screen-level, #toast-layer, #confetti, .m-foot, .cert-actions { display: none !important; }
  .modal-layer { position: static !important; display: block !important; background: none !important; padding: 0 !important; backdrop-filter: none !important; }
  .modal {
    max-width: none !important; max-height: none !important; width: 100% !important;
    background: #fff !important; border: none !important; box-shadow: none !important;
    animation: none !important; overflow: visible !important;
  }
  .m-head, .m-body { padding: 0 !important; }
  .m-head h2 { color: #111 !important; font-size: 26pt; }
  .m-kicker { color: #666 !important; }
  .m-body { color: #222 !important; font-size: 11pt; }
  .m-body b, .m-body strong { color: #000 !important; }
  .goal-box, .teach, .mentor { background: #f4f4f4 !important; border: 1px solid #bbb !important; page-break-inside: avoid; }
  .goal-box h4, .teach h4, .mentor .who { color: #333 !important; }
  .mentor-txt, .goal-box p, .teach p { color: #222 !important; }
  .stars-big { color: #bbb !important; }
  .stars-big .on { color: #c98f00 !important; text-shadow: none !important; }
  .reward { background: #f4f4f4 !important; border: 1px solid #bbb !important; }
  .reward .rv { color: #111 !important; }
  .reward .rl { color: #555 !important; }
  .m-body pre { background: #f7f7f7 !important; border: 1px solid #ccc !important; color: #111 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .map-hero { grid-template-columns: 1fr; padding: 28px 22px 18px; }
  .hero-art { display: none; }
  .map-hero h1 { font-size: 30px; }
  #chapter-list { padding: 8px 22px 50px; }
}
@media (max-width: 900px) {
  #level-grid { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 34%) 1fr; }
  #pane-machine { border-right: none; border-bottom: 1px solid var(--line); }
  .testdrawer { width: 100%; max-height: 70%; border-radius: 12px 12px 0 0; border-right: 1px solid var(--line); }
  #stats .stat:nth-child(3) { display: none; }
}

/* ============================================================
   COMPACT / TOUCH MODE  (body.compact, set below 760px)

   A phone cannot usefully show a machine and a rung editor at the
   same time — you get two useless halves. So the panes become a
   view you switch between, the controls move to a thumb-reachable
   bar at the bottom, and every target grows to 44 px.
   ============================================================ */
body.compact { -webkit-text-size-adjust: 100%; }
body.compact button, body.compact .slot, body.compact .tool { touch-action: manipulation; }

#view-switch { display: none; }
#mobile-actions { display: none; }

body.compact #topbar { height: 48px; flex-basis: 48px; padding: 0 8px; gap: 6px; }
body.compact #brand { display: none; }
body.compact #level-title-wrap { min-width: 0; }
body.compact #level-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
body.compact #level-chapter { display: none; }
body.compact .stat { padding: 4px 9px; font-size: 12px; }
body.compact #stat-rank { display: none; }
body.compact .tb-label { display: none; }
body.compact .tb-btn { padding: 9px 11px; }

/* --- the view switcher --- */
body.compact.in-level #view-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 6px 8px; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#view-switch button {
  padding: 13px 8px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer;
}
#view-switch button[aria-pressed="true"] { background: #2a2113; border-color: var(--amber); color: var(--amber); }

body.compact #level-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.compact #pane-machine { border-bottom: none; }
body.compact.view-program #pane-machine { display: none; }
body.compact.view-machine #pane-program { display: none; }
body.compact .pane-head { padding: 7px 10px; }
body.compact .pane-head h2 { font-size: 11px; letter-spacing: 1px; }

/* controls move to a bottom bar so they are always in reach */
body.compact.in-level #mobile-actions {
  display: flex; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-2); border-top: 1px solid var(--line); flex: 0 0 auto;
}
body.compact #mobile-actions .btn { flex: 1; padding: 13px 6px; font-size: 13.5px; }
body.compact #pane-program .pane-head-tools:empty { display: none; }

/* --- ladder editor at thumb size --- */
body.compact .lad-toolbar {
  gap: 4px; padding: 7px 8px; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.compact .lad-toolbar::-webkit-scrollbar { display: none; }
body.compact .tool { min-width: 56px; padding: 7px 8px 5px; flex: 0 0 auto; }
body.compact .tool-label { font-size: 10.5px; }
body.compact .lad-scroll { padding: 10px 8px 40px; }
body.compact .rung-body { min-height: 76px; padding: 8px 0; }
body.compact .slot { width: 44px; height: 44px; flex: 0 0 44px; font-size: 19px; }
body.compact .branch { min-height: 56px; }
body.compact .branch-add { width: 32px; height: 32px; font-size: 14px; }
body.compact .el .el-tag { font-size: 11.5px; }
body.compact .el .el-addr { font-size: 10px; }
body.compact .rung-del { opacity: .8; font-size: 17px; padding: 0 10px; }
body.compact .add-rung { padding: 15px; font-size: 14px; }
body.compact .el-actions button { padding: 11px 14px; font-size: 13.5px; }

/* the tag table costs too much room to be open by default */
body.compact #tagtable-wrap { max-height: 42%; }
body.compact .tt-head { padding: 10px 12px; }
body.compact .mini-toggle { padding: 4px 10px; font-size: 16px; }

/* --- code editor: 16px stops iOS zooming on focus --- */
body.compact #code-area { font-size: 16px; line-height: 1.5; padding: 10px 12px; }
body.compact .code-gutter { font-size: 16px; line-height: 1.5; flex-basis: 40px; }
body.compact .code-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.compact .code-toolbar::-webkit-scrollbar { display: none; }
body.compact .code-toolbar .snip { padding: 9px 12px; font-size: 13px; flex: 0 0 auto; }

/* --- FBD: the canvas keeps its size and you pan it, which beats
       shrinking blocks below a fingertip. Dragging a block or pulling a
       wire must not scroll the page, so those targets opt out. --- */
#fbd-canvas [data-block], #fbd-canvas [data-pin] { touch-action: none; }
body.compact #fbd-canvas-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
body.compact .fbd-hint { font-size: 11.5px; padding: 7px 10px; }

/* --- drawers and dialogs become sheets --- */
body.compact .testdrawer { max-height: 82%; }
body.compact .modal-layer { padding: 0; align-items: flex-end; }
body.compact .modal { max-height: 92vh; border-radius: 16px 16px 0 0; }
body.compact .m-head { padding: 18px 18px 0; }
body.compact .m-head h2 { font-size: 21px; }
body.compact .m-body { padding: 14px 18px 4px; font-size: 14px; }
body.compact .m-foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); flex-direction: column-reverse; }
body.compact .m-foot .btn { width: 100%; padding: 14px; }
body.compact .tagpick button { padding: 14px 12px; }
body.compact .presets button { padding: 10px 14px; font-size: 13px; }
body.compact .numfield input { padding: 13px 12px; font-size: 16px; }

body.compact .map-hero { padding: 22px 16px 12px; }
body.compact .map-hero h1 { font-size: 25px; }
body.compact .hero-sub { font-size: 14.5px; }
body.compact .hero-actions .btn { width: 100%; }
body.compact #chapter-list { padding: 6px 14px 40px; }
body.compact .level-grid-nodes { grid-template-columns: 1fr; padding: 12px 14px 16px; }
body.compact .ch-head { padding: 13px 14px; }

@media (max-width: 400px) {
  body.compact #stats .stat { padding: 4px 7px; }
  body.compact #btn-reset { display: none; }
}

/* ============================================================
   Ladder editor alignment pass (2026-10-04).
   One main wire line, --wire-y below the top of the rung body:
   the rails stretch, everything else top-aligns to that line, the
   insertion handles sit ON the wire instead of interrupting it, and
   the parallel-branch handle hangs below its group on a dashed drop.
   ============================================================ */
:root { --wire-y: 28px; --slot-h: 30px; --slot-w: 26px; --badd: 20px; --rung-panel: #10161f; }
body.compact { --wire-y: 30px; --slot-h: 44px; --slot-w: 44px; --badd: 32px; }

/* every branch row is exactly two wire-heights tall, so the wire line is always at --wire-y */
.branch { min-height: calc(var(--wire-y) * 2); }
body.compact .branch { min-height: calc(var(--wire-y) * 2); }
.group.multi::before, .group.multi::after { top: var(--wire-y); bottom: var(--wire-y); }

.rung-body { align-items: flex-start; }
.rail { align-self: stretch; }
.groups { align-items: flex-start; }
.rung-body > .slot { margin-top: calc(var(--wire-y) - var(--slot-h) / 2); }
.wire.grow { margin-top: calc(var(--wire-y) - 1.5px); }
.wire.grow.live { margin-top: calc(var(--wire-y) - 2.5px); }
.outs { justify-content: flex-start; align-self: flex-start; }
.out-slot { margin: 2px auto; }
.outs > .out-slot:first-child { margin-top: calc(var(--wire-y) - var(--slot-h) / 2); }

/* insertion handle: the wire runs straight through; the + sits in a small dashed ring */
.slot { position: relative; border: none; background: none; width: var(--slot-w); height: var(--slot-h); flex: 0 0 var(--slot-w); }
.slot::before { content: ''; position: absolute; left: -1px; right: -1px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--dead); }
.slot::after {
  content: '+'; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 1px dashed #2e415a; border-radius: 50%; background: var(--rung-panel);
  display: grid; place-items: center; font-size: 13px; line-height: 1; color: #3d5573; transition: .12s;
}
body.compact .slot::after { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 17px; }
.slot:hover { background: none; }
.slot:hover::after { border-color: var(--amber); color: var(--amber); background: #1a1812; }
.armed .slot::after { border-color: #43608a; }

/* parallel-branch handle */
.branch-add { position: relative; width: var(--badd); height: var(--badd); margin-top: 6px; border-radius: 50%; }
.branch-add::before { content: ''; position: absolute; left: 50%; bottom: 100%; height: 6px; border-left: 1px dashed #2e415a; }
.group.multi.has-add::before, .group.multi.has-add::after { bottom: calc(var(--wire-y) + var(--badd) + 6px); }

/* ============================================================
   The job, on screen (2026-10-04). Goals come from level.brief.goals.
   ============================================================ */
.job-panel { flex: 0 0 auto; border-top: 1px solid var(--line-soft); background: var(--bg-2); padding: 10px 14px 9px; }
.job-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.job-label { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--amber); font-weight: 800; }
.job-sub { font-size: 11px; color: var(--text-faint); }
.job-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text); }
.job-list li { margin: 2px 0; }
.job-list li::marker { color: var(--amber); }
.job-panel .scene-hint { border-top: 0; background: none; padding: 7px 0 0; min-height: 0; font-size: 12px; color: var(--text-faint); }
.job-panel .scene-hint:not(:empty)::before { content: 'Try it: '; color: var(--text-dim); font-weight: 700; }
.goal-box h4 small { font-weight: 400; font-size: 11px; color: var(--text-faint); margin-left: 6px; text-transform: none; letter-spacing: 0; }

/* phone: the job is a strip above both tabs; the machine tab keeps only the Try-it line */
#job-compact { display: none; }
body.compact #job-compact { display: block; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); padding: 6px 12px; }
body.compact #job-compact summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; }
body.compact #job-compact summary::-webkit-details-marker { display: none; }
body.compact #job-compact summary::after { content: '▾'; margin-left: auto; color: var(--text-faint); font-size: 12px; }
body.compact #job-compact:not([open]) summary::after { content: '▸'; }
body.compact #job-compact .job-list { padding: 2px 0 6px 18px; font-size: 12.5px; }
body.compact #pane-machine .job-head, body.compact #pane-machine .job-list { display: none; }
body.compact #pane-machine .job-panel { padding: 6px 10px; }

/* ============================================================
   Drag and drop, phase 1 (2026-10-04). See js/ui/ladder-drag.js.
   ============================================================ */
.tool { touch-action: pan-x; }
.el, .box { touch-action: none; }
.wire { position: relative; }
.dragging .wire.can-drop::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 24px; margin: -12px 0 0 -7px; border: 1px dashed #3d5573; border-radius: 4px; background: #0f151dcc; }
.dragging .wire.can-drop.drop-hot::after { border: 2px solid #35e07a; background: #35e07a22; box-shadow: 0 0 0 4px #35e07a22; }
.slot.drop-hot::after { border: 2px solid #35e07a !important; color: #35e07a !important; background: #13261a !important; }
.branch-add.drop-hot { border: 2px solid #35e07a; color: #35e07a; }
.dragging .el.drop-target, .dragging .box.drop-target { outline: 1px dashed #3d5573; outline-offset: 3px; border-radius: 6px; }
.el.drop-hot, .box.drop-hot { outline: 2px solid #35e07a !important; outline-offset: 3px; border-radius: 6px; }
.drag-source { opacity: .35; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%) scale(1.15); display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .92; filter: drop-shadow(0 8px 18px #000c); }
.drag-ghost .el-sym .seg { stroke: var(--amber); stroke-width: 2.4; }
.drag-ghost .el-sym .seg-txt { fill: var(--amber); }
.drag-ghost span { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: .5px; }
.drag-bin { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed var(--red); border-radius: 8px; color: var(--red); font-size: 11px; font-weight: 600; white-space: nowrap; }
.drag-bin .bin-ico { font-size: 15px; }
.drag-bin.drop-hot { background: #ff4d5e22; border-style: solid; }
body.compact .drag-bin { position: fixed; top: 8px; right: 8px; z-index: 1001; background: var(--bg-2); }
body.lad-dragging, body.lad-dragging * { cursor: grabbing !important; }

/* ============================================================
   Build tag, brief voice picker, danger button, clear tool (2026-10-04)
   ============================================================ */
.build-tag { font-family: var(--mono); font-size: 10px; color: var(--text-faint); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 7px; margin-left: 8px; align-self: center; white-space: nowrap; }
.build-tag:empty { display: none; }
.build-foot { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
body.compact .build-tag { display: none; }
.voice-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12.5px; color: var(--text-faint); }
.voice-pick .vp-label { text-transform: uppercase; letter-spacing: 1px; font-size: 10.5px; font-weight: 800; color: var(--text-dim); }
.voice-pick button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); cursor: pointer; }
.voice-pick button.on { border-color: var(--amber); color: var(--amber); background: #ffb02014; }
.voice-pick .vp-hint { font-style: italic; }
.btn-danger { border-color: var(--red) !important; color: var(--red) !important; }
#btn-clear:hover .tool-label { color: var(--red); }

/* ---- nothing on the rung or in the toolbar is text to select; a press is a grab (build 7) ---- */
.lad-toolbar, .lad-scroll .rung, .lad-scroll .add-rung { user-select: none; -webkit-user-select: none; }
.tool, .el, .box, .slot, .branch-add, .el-tag, .el-addr { -webkit-user-drag: none; user-drag: none; }
.lad-scroll pre { user-select: text; -webkit-user-select: text; }
.el, .box { cursor: grab; }
.el:active, .box:active { cursor: grabbing; }

/* ---- the way back to the business (build 8) ---- */
.tb-site { font-size: 11px; color: var(--text-faint); text-decoration: none; margin-left: 10px; align-self: center; white-space: nowrap; border-bottom: 1px dotted transparent; }
.tb-site:hover { color: var(--text); border-bottom-color: var(--text-faint); }
body.compact .tb-site, body.embed .tb-site, body.embed .foot-cta { display: none; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px auto 6px; max-width: 920px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); text-align: left; }
.foot-cta-text { flex: 1 1 320px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.foot-cta-text b { color: var(--text); }