/* =========================================================
   IO Trainer (theme-aware, responsive, stacked layout)
   Uses your site tokens: --bg, --panel, --text, --brand, --ok, --border, --muted
   Everything is namespaced under .tool-root to avoid leaks.
   ========================================================= */

/* -------- Local derived tokens (follow your global light/dark) -------- */
.tool-root {
  --wire: color-mix(in srgb, var(--text) 18%, var(--bg));
  --wire-live: var(--brand);
  --node: color-mix(in srgb, var(--text) 28%, var(--bg));
  --node-live: color-mix(in srgb, var(--brand) 85%, var(--panel));
  --cmp: color-mix(in srgb, var(--text) 50%, var(--bg));
  --lamp-off: color-mix(in srgb, var(--panel) 80%, var(--bg));
  --lamp-on: var(--ok);
  --panel-grad-a: color-mix(in srgb, var(--panel) 92%, var(--bg));
  --panel-grad-b: color-mix(in srgb, var(--bg) 92%, var(--panel));
  --accent-soft: color-mix(in srgb, var(--brand) 65%, transparent);
}

/* -------- Header / chrome -------- */
.tool-root .tool-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(16px,4vw,48px);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.tool-root .title{ display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.2px; }
.tool-root .badge{ color: var(--brand); font-weight:600; }
.tool-root .controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.tool-root .muted{ color: var(--muted); }

.tool-root button{
  background: var(--panel); color: var(--text); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer;
}

/* -------- Card containment -------- */
.tool-root .card{ overflow: hidden; } /* keep internals inside the card */

/* -------- Card content layout (always stacked) -------- */
.tool-root .card .content{
  display:grid;
  grid-template-columns: 1fr;   /* stacked on desktop & mobile */
  gap:16px; padding:16px;
}
.tool-root .card .content > * { min-width: 0; width: 100%; } /* prevent child overflow */

/* Side panel hosting the SVG */
.tool-root .side{
  display:flex; align-items:center; justify-content:center;
  min-height:0; padding:8px;
  background: radial-gradient(600px 300px at -10% -10%, color-mix(in srgb, var(--brand) 8%, transparent), transparent);
}

/* Controls column */
.tool-root .ui{ display:grid; gap:12px; align-content:start; width:100%; }

/* =========================================================
   Slider rows & pills — prevent overflow at ~1180px and on mobile
   ========================================================= */

/* Override inline grid on labels to allow stacking at narrower widths */
.tool-root label.block{
  display:grid !important;
  grid-template-columns: minmax(120px, 180px) 1fr !important; /* comfy on wide */
  gap: 10px !important;
  align-items: start !important; /* allow multi-line content without clipping */
}

/* Stack the label and controls below ~1180px so pills never overflow */
@media (max-width: 1180px){
  .tool-root label.block{
    grid-template-columns: 1fr !important;
  }
}

/* The right-hand controls container inside the label (slider + pill) */
.tool-root label.block > div{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap: wrap !important;     /* allow pill to drop to its own line */
  width:100%;
}

/* Range input should shrink gracefully */
.tool-root label.block > div input[type="range"]{
  flex: 1 1 180px;                 /* grow, but may shrink */
  min-width: 140px;                /* don't disappear */
  max-width: 100%;                 /* no overflow */
}

/* Pills: keep content on one line, never shrink to zero, wrap to next row if needed */
.tool-root .pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border:1px solid var(--border);
  background: var(--panel);
  padding:8px 12px;
  border-radius:999px;
  white-space: nowrap;            /* avoid stacked text inside */
  max-width: 100%;
  flex: 0 0 auto;                 /* do not shrink; move to next line instead */
}
.tool-root .pill *{ white-space: nowrap; }

/* Pills/rows that might appear next to buttons (e.g., DO row) */
.tool-root .row{ display:flex; flex-wrap: wrap; gap:8px; align-items:center; }

/* Smaller phones: ensure pills remain visible below the slider */
@media (max-width: 520px){
  .tool-root label.block > div input[type="range"]{ flex-basis: 100%; } /* slider full-width */
  .tool-root label.block > div .pill{ width: auto; }                    /* pill sits on its own line */
}

/* -------- LEDs / buttons -------- */
.tool-root .led{
  width:14px; height:14px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: var(--lamp-off);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--shadow) 60%, transparent);
}
.tool-root .led.on{
  background: var(--lamp-on);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--shadow) 40%, transparent),
              0 0 12px color-mix(in srgb, var(--ok) 50%, transparent);
}
.tool-root .btn{
  background: var(--panel); color: var(--text); border:1px solid var(--border);
  padding:10px 14px; border-radius:12px; cursor:pointer; min-width:120px;
}

/* =========================================================
   Schematic SVG — responsive + never collapses
   ========================================================= */
.tool-root svg.sch{
  width:100%;
  height:auto;              /* used with aspect-ratio below */
  display:block;
  min-height:160px;         /* floor so it never vanishes */
  max-height:60vh;          /* don’t dominate on short screens */
  overflow:visible;         /* avoid clipping tiny dots etc. */
}

/* Match each viewBox for ideal aspect ratio */
.tool-root #diSvg,
.tool-root #doSvg,
.tool-root #aoSvg { aspect-ratio: 26 / 11; }   /* 520 × 220 */
.tool-root #aiSvg { aspect-ratio: 13 / 6; }     /* 520 × 240 */

@media (max-width: 480px){
  .tool-root svg.sch{ min-height:140px; }
}

/* Lines, nodes, labels, components */
.tool-root .wire{
  stroke: var(--wire); stroke-width:3; fill:none;
  transition: stroke .2s, filter .2s;
}
.tool-root .wire.live{
  stroke: var(--wire-live);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 55%, transparent));
}
.tool-root .node{
  fill: var(--node); stroke: color-mix(in srgb, var(--border) 80%, transparent);
  stroke-width:1; transition: fill .2s;
}
.tool-root .node.live{ fill: var(--node-live); }
.tool-root .label{ fill: color-mix(in srgb, var(--text) 70%, var(--muted)); font-size:12px; }
.tool-root .cmp{ stroke: var(--cmp); stroke-width:2; fill:none; }
.tool-root .iomod{ fill:none; stroke: var(--cmp); stroke-width:3; }
.tool-root .lamp{ fill: var(--lamp-off); }
.tool-root .lamp.on{
  fill: var(--lamp-on);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 66%, transparent));
}

/* Contact arm: pivot at top terminal (420,95). Closed = vertical */
.tool-root .arm{
  stroke: var(--cmp); stroke-width:2;
  transform-origin: 420px 95px;
  transition: transform .2s ease;
}
.tool-root .arm.closed{ transform: rotate(0deg); }
.tool-root .arm.open  { transform: rotate(28deg); }

/* =========================================================
   Widgets (pump, thermometer, valve)
   ========================================================= */
.tool-root .pump{
  position:relative; width:180px; height:180px; border-radius:18px; border:1px solid var(--border);
  background: radial-gradient(120px 120px at 50% 35%, var(--panel-grad-a) 0%, var(--panel-grad-b) 60%);
  display:grid; place-items:center;
}
.tool-root .impeller{
  width:90px; height:90px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--text) 22%, var(--bg));
  position:relative;
}
.tool-root .blade{
  position:absolute; left:50%; top:50%; width:8px; height:46px; background: var(--brand);
  transform-origin:50% 10px; border-radius:6px;
}
.tool-root .blade:nth-child(1){ transform: translate(-50%,-50%) rotate(0deg); }
.tool-root .blade:nth-child(2){ transform: translate(-50%,-50%) rotate(120deg); }
.tool-root .blade:nth-child(3){ transform: translate(-50%,-50%) rotate(240deg); }
@keyframes spin{ to{ transform: rotate(360deg); } }
.tool-root .pump.running .impeller{
  animation: spin 1.2s linear infinite;
  filter: drop-shadow(0 0 12px var(--accent-soft));
}
.tool-root .pump .state{
  position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-weight:700; font-size:12px; color: var(--muted);
}

.tool-root .thermo{
  position:relative; width:60px; height:160px; border-radius:30px;
  background: var(--panel); border:1px solid var(--border);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
}
.tool-root .column{
  width:100%; height:20%;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--ok)));
  transition: height .25s ease;
}
.tool-root .bulb{
  position:absolute; bottom:-18px; left:50%; transform: translateX(-50%);
  width:70px; height:70px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--brand) 70%, white), var(--brand) 60%);
  border:1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.tool-root .ohm{
  font: 700 28px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing:1px;
}

.tool-root .valve{
  position:relative; width:180px; height:180px; border:1px solid var(--border); border-radius:18px;
  background: radial-gradient(150px 150px at 50% 50%, var(--panel-grad-a), var(--panel-grad-b));
  display:grid; place-items:center;
}
.tool-root .valve .ring{
  width:110px; height:110px; border-radius:50%;
  border:12px solid color-mix(in srgb, var(--text) 26%, var(--bg));
  position:relative; overflow:hidden;
}
.tool-root .valve .open{
  position:absolute; left:0; bottom:0; width:100%; height:0;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--ok)));
  transition: height .25s ease;
}