/* The sandbox. Every colour here is a token from tokens.css — this file
   defines none of its own, and nothing in ui/sandbox.js writes a style
   attribute, because src/_headers sets style-src 'self' with no
   'unsafe-inline' and an attribute the app paints is simply refused. */

.sb-sub{color:var(--ink-soft);font-size:.92rem;margin:14px 2px 8px;}

.sb-dia{margin:6px 0 10px;display:flex;justify-content:center;}

/* ---------- headline readouts ---------- */
.sb-read,.sb-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
.sb-read>div,.sb-two>div{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;text-align:center;}
.sb-read-v{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:1.32rem;color:var(--ink);line-height:1.25;}
.sb-read-l{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:3px;}

/* ---------- cards ---------- */
.sb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin:12px 0;}
.sb-card h3{margin:0 0 10px;font-size:1rem;color:var(--ink);}
.sb-note{color:var(--ink-soft);font-size:.83rem;margin:8px 0 0;line-height:1.45;}

.sb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.sb-lab{font-size:.85rem;color:var(--ink-soft);}
.sb-lab b{color:var(--ink);font-family:'IBM Plex Mono',ui-monospace,monospace;}
.sb-row input[type=range]{flex:1 1 150px;min-width:120px;accent-color:var(--amber);}

.sb-in{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:.86rem;font-family:inherit;}
input.sb-in.sb-val{width:78px;font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* ---------- parts ---------- */
.sb-parts{display:flex;flex-direction:column;gap:8px;}
.sb-branch{display:flex;flex-direction:column;gap:6px;}
.sb-branch.par{border-left:3px solid var(--teal);padding-left:9px;}
.sb-bt{font-size:.72rem;color:var(--teal-text);text-transform:uppercase;letter-spacing:.06em;}
.sb-part{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px 9px;}
.sb-pk{font-size:.86rem;color:var(--ink);min-width:64px;}
.sb-pv{font-size:.84rem;color:var(--ink-soft);
  font-family:'IBM Plex Mono',ui-monospace,monospace;}
.sb-pi{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.86rem;color:var(--amber-text);}
/* 28 square. It was 20 x 22, under WCAG 2.2 SC 2.5.8's 24 x 24 AA floor,
   and it is the only control on a bench that destroys something — a bare
   glyph seven pixels from the reading beside it, reading as punctuation
   after a number rather than as a button. */
.sb-x{background:none;border:none;color:var(--ink-soft);font-size:1.1rem;
  line-height:1;cursor:pointer;border-radius:6px;
  min-width:28px;min-height:28px;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto;}
.sb-x:hover{background:var(--tint-warn);color:var(--coral-text);}

.sb-add{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.sb-chip{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-size:.83rem;font-family:inherit;cursor:pointer;}
.sb-chip:hover{border-color:var(--amber);}
.sb-flip{margin-top:10px;}

/* ---------- the E/I/R/P table ----------
   .sb-eirp, not .sb-tab. It was .sb-tab — as in table — and so is the
   workbench picker's button, as in tab. The table's width:100% therefore
   applied to every pill in the picker: flex-basis:auto means "use the width
   property", so each pill became as wide as the whole row and five of the six
   a paid account holds were off the side of the screen, on an app that hides
   every scrollbar. Both suites passed throughout, because both scope their
   selectors by id and the stylesheet did not. */
.sb-tw{overflow-x:auto;}
.sb-eirp{border-collapse:collapse;width:100%;font-size:.83rem;}
.sb-eirp th,.sb-eirp td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--line);
  white-space:nowrap;}
.sb-eirp th{color:var(--ink-soft);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.05em;}
.sb-eirp td{color:var(--ink);font-family:'IBM Plex Mono',ui-monospace,monospace;}
.sb-eirp td:first-child{font-family:inherit;}
.sb-tot td{border-top:2px solid var(--line);border-bottom:none;color:var(--amber-text);}

/* ---------- the body probe ---------- */
.sb-body{margin-top:10px;border-radius:12px;padding:12px 14px;text-align:center;
  border:1px solid var(--line);background:var(--surface-2);}
.sb-body .sb-read-l{margin-top:5px;}
.sb-ok{background:var(--tint-cool);}
.sb-ok .sb-read-v{color:var(--teal-text);}
.sb-mild .sb-read-v,.sb-warn .sb-read-v{color:var(--amber-text);}
.sb-warn{background:var(--tint-warm);}
.sb-bad{background:var(--tint-warn);}
.sb-bad .sb-read-v{color:var(--coral-text);}

/* ---------- alerts ---------- */
.sb-alert{background:var(--tint-warn);color:var(--coral-text);border-radius:10px;
  padding:9px 12px;font-size:.86rem;margin:8px 0;}
.sb-alert.ok{background:var(--tint-cool);color:var(--teal-text);}

/* ---------- the unlock ladder ---------- */
.sb-ladder{display:flex;flex-direction:column;gap:4px;margin:16px 0 4px;}
.sb-rung{display:grid;grid-template-columns:26px 1fr;gap:2px 10px;
  background:var(--locked-bg);border-radius:10px;padding:8px 11px;}
.sb-rung.on{background:var(--surface-2);border:1px solid var(--line);padding:7px 10px;}
.sb-rung-n{grid-row:span 2;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.9rem;color:var(--ink-soft);align-self:center;text-align:center;}
.sb-rung.on .sb-rung-n{color:var(--amber-text);}
.sb-rung-t{font-size:.88rem;color:var(--ink-soft);}
.sb-rung.on .sb-rung-t{color:var(--ink);}
.sb-rung-d{font-size:.78rem;color:var(--ink-soft);line-height:1.4;}

/* The rung for the module you are on right now. It is the one the learner
   came here for, so it says so rather than making them count. */
.sb-rung.here{border:1px solid var(--amber);}
.sb-rung.here .sb-rung-t{color:var(--amber-text);}

/* The pointer from the path to the workbench. It sits on the card for the
   module you are on, because a tool that unlocks a module early is useless
   if the only place it is mentioned is the tab you did not open. */
.cap-tool{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;width:100%;
  text-align:left;margin-top:10px;padding:9px 11px;cursor:pointer;
  background:var(--tint-cool);border:1px solid var(--teal);border-radius:10px;
  font-family:inherit;}
.cap-tool-k{grid-row:span 2;align-self:center;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--teal-text);}
.cap-tool-t{font-size:.88rem;color:var(--ink);}
.cap-tool-d{font-size:.78rem;color:var(--ink-soft);line-height:1.4;}

/* And the way out of the recap screen, after a second wrong answer. */
.rem-sb{text-align:center;font-size:.8rem;color:var(--ink-soft);margin:6px 0 0;}

/* ---------- the admin panel in Settings ----------
   Owner-only, and it looks like a tool rather than a feature on purpose. */
.set-sec.admin{border:1px dashed var(--line);}
.set-note{color:var(--ink-soft);font-size:.82rem;line-height:1.45;margin:0 0 10px;}
.adm-list{display:flex;flex-direction:column;gap:2px;}
.adm-row{display:grid;grid-template-columns:auto 62px 1fr;gap:1px 9px;
  align-items:center;padding:6px 7px;border-radius:8px;cursor:pointer;}
.adm-row:hover{background:var(--surface-2);}
.adm-row input{grid-row:span 2;accent-color:var(--amber);}
.adm-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;
  color:var(--amber-text);}
.adm-t{font-size:.86rem;color:var(--ink);}
.adm-m{grid-column:3;font-size:.75rem;color:var(--ink-soft);}
.adm-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}

/* The sandbox diagram is drawn at a pinned scale, so a long label widens the
   picture rather than shrinking everything in it. Wide ones scroll. */
.sb-dia{overflow-x:auto;justify-content:flex-start;}
.sb-dia .dia{margin:0 auto;}

/* ---------- the workbench picker ----------
   Everything earned stays earned; this chooses which one is open, so the
   screen is one workbench rather than a column of every workbench at once. */
.sb-pick{margin:2px 0 12px;}
.sb-pick-l{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft);margin-bottom:6px;}
/* Wraps. A row that scrolls sideways is a row nobody scrolls: the app hides
   every scrollbar by design, so the second line of workbenches would be
   invisible as well as off-screen. Ten pills take three lines on a 390px
   phone and one on a laptop. */
.sb-pick-row{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:4px;}
.sb-tab{flex:0 0 auto;display:flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-family:inherit;font-size:.83rem;}
.sb-tab b{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--ink-soft);}
.sb-tab.on{background:var(--tint-warm);border-color:var(--amber);color:var(--ink);}
.sb-tab.on b{color:var(--amber-text);}

/* One reading rather than two, before power has been taught. */
.sb-read.one{grid-template-columns:1fr;}

.sb-unit{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;
  color:var(--ink-soft);margin-left:-3px;}
.sb-shortcuts{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px;}
.sb-shortcuts .sb-chip{font-size:.76rem;padding:4px 10px;}

/* A range input the finger can actually grab. The real reason a drag failed
   was the panel rebuilding under it, but the default thumb is also small. */
.sb-card input[type=range],.sb-row input[type=range]{
  height:26px;accent-color:var(--amber);cursor:pointer;}

/* ---------- Stage C: the four benches that take time ----------
   No new colour here either. A spike is the only reading on these benches
   that means something has gone wrong, and it borrows the shock panel's
   coral; everything else borrows the picker's own "this one is chosen". */

/* A chip that is a choice rather than an action — charging or discharging,
   diode or no diode. It has to look picked, and .sb-tab.on above is already
   the pattern for that, so it takes that rather than inventing a second. */
.sb-chip.on{background:var(--tint-warm);border-color:var(--amber);color:var(--amber-text);}

/* A second question inside one card: the combining rules are not the same
   question as the charge on a single part, and without this they read as
   one paragraph that changed subject. */
.sb-h2{margin:18px 0 8px;font-size:.92rem;color:var(--ink);}

.sb-read-v.sb-badv{color:var(--coral-text);}
.sb-read-v.sb-okv{color:var(--teal-text);}