/* ===========================================================================
   explore-u3.css — Unit 3 Explore kit (explore-u3.js) and the 3.x benches
   Built on explore-lab.css: same banner, bench, notebook; these rules add the
   control strip, the single "Do this next" card and the bench drawings.
   =========================================================================== */
.u3-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.u3-ctl:empty { display: none; }
.u3-ctl label { display: grid; gap: 6px; min-width: 150px; flex: 1 1 160px; font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .03em; text-transform: none; color: var(--h-muted); }
.u3-ctl select, .u3-ctl input[type=range] { width: 100%; }
.u3-ctl select { min-height: 42px; padding: 0 12px; border: 1px solid var(--h-line-2); border-radius: 12px; background: var(--h-panel-2); color: var(--h-text); font: 500 .92rem/1.2 var(--h-sans); letter-spacing: 0; text-transform: none; }
.u3-ctl input[type=range] { accent-color: var(--h-gold-2); min-height: 32px; }
.u3-ctl output { font: 600 .95rem/1 var(--h-sans); letter-spacing: 0; text-transform: none; color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.u3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.u3-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text); font: 600 .88rem/1 var(--h-sans) !important; cursor: pointer; transition: background-color .2s, border-color .2s; }
.u3-chip:hover:not(:disabled) { border-color: rgba(242,191,94,.55); background: rgba(242,191,94,.06); }
.u3-chip[aria-pressed="true"] { border-color: var(--unit); background: color-mix(in srgb, var(--unit) 14%, transparent); color: var(--h-text); }
.u3-chip:disabled { opacity: .35; cursor: default; }
.u3-scene svg { display: block; width: 100%; height: auto; }
.u3-next .u3-now { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 .66rem/1.2 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--h-gold-1); }
.u3-next .u3-now::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--unit); animation: xl-pulse 1.6s ease-out infinite; }
.u3-text { margin: 0; color: var(--h-text-2); line-height: 1.6; }
.u3-text b { color: var(--h-text); }
.u3-big { font: 600 1.6rem/1.1 var(--h-sans); color: var(--h-gold-1); font-variant-numeric: tabular-nums; }

/* bench drawings */
.u3-glass { fill: rgba(255,255,255,.035); stroke: rgba(220,230,240,.55); stroke-width: 1.6; stroke-linejoin: round; }
.u3-liq { fill: rgba(140,185,235,.24); }
.u3-liq.is-blue { fill: rgba(46,118,214,.55); }
.u3-liq.is-violet { fill: rgba(150,60,190,.62); }
.u3-liq.is-amber { fill: rgba(214,150,60,.34); }
.u3-liq.is-oil { fill: rgba(232,190,70,.42); }
.u3-liq.is-hex { fill: rgba(235,225,200,.14); }
.u3-liq.is-pink { fill: rgba(200,40,140,.5); }
.u3-liq.is-green { fill: rgba(120,200,120,.35); }
.u3-liq.is-red { fill: rgba(205,70,60,.45); }
.u3-bub { fill: none; stroke: rgba(230,240,250,.7); stroke-width: 1; }
.u3-th-glass { fill: rgba(255,255,255,.05); stroke: rgba(220,230,240,.55); stroke-width: 1.3; }
.u3-th-fill { fill: #E5534B; }
.u3-th-read { fill: var(--h-gold-1); font: 700 13px var(--h-sans); }
.u3-plate-top { fill: #3a3531; stroke: rgba(255,255,255,.18); }
.u3-plate-body { fill: #24201d; stroke: rgba(255,255,255,.12); }
.u3-plate-led { fill: #3c2b22; }
.u3-plate.is-on .u3-plate-top { fill: #5a2d1e; stroke: rgba(240,120,70,.6); filter: drop-shadow(0 0 6px rgba(240,110,60,.55)); }
.u3-plate.is-on .u3-plate-led { fill: #ff7a3c; }
.u3-label { fill: var(--h-text); font: 600 13px var(--h-sans); }
.u3-small { fill: var(--h-text-2); font: 12px var(--h-sans); }
.u3-gold { fill: var(--h-gold-1); font: 700 13px var(--h-sans); }
.u3-vapor { fill: rgba(230,236,245,.18); }
.u3-arrow { stroke: var(--h-gold-1); stroke-width: 2; fill: none; }
.u3-ahead { fill: var(--h-gold-1); }
.u3-bench-line { stroke: rgba(255,255,255,.12); stroke-width: 2; }
.u3-big-svg { fill: var(--h-gold-1); font: 700 22px var(--h-sans); font-variant-numeric: tabular-nums; }
.x31-picks[hidden] { display: none; }
.u3-plate-read { fill: var(--h-gold-1); font: 700 13px var(--h-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* 3.2 mystery solids */
.x32-panel { fill: rgba(255,255,255,.02); stroke: var(--h-line); }
.x32-dish { fill: rgba(255,255,255,.05); stroke: rgba(220,230,240,.4); }
.x32-cube { fill: #efece6; stroke: #b9b2a5; stroke-width: .8; }
.x32-metal { fill: #c47a4a; stroke: #7d4526; stroke-width: 1.2; }
.x32-shine { stroke: rgba(255,230,200,.7); stroke-width: 2.5; stroke-linecap: round; }
.x32-grain { fill: #f3f0ea; stroke: #c9c2b5; stroke-width: .6; }
.x32-quartz { fill: rgba(220,235,245,.22); stroke: rgba(230,240,250,.8); stroke-width: 1.2; }
.x32-qface { stroke: rgba(230,240,250,.45); }
.x32-head { fill: #6b6f75; stroke: #3d4045; }
.x32-handle { fill: #8a5a35; stroke: #5b3a20; }
.x32-wire { fill: none; stroke: #c9a46a; stroke-width: 2.4; }
.x32-bulb { fill: rgba(255,255,255,.06); stroke: rgba(230,240,250,.6); stroke-width: 1.4; }
.x32-bulb.is-on { fill: #ffd76a; stroke: #ffe9a8; filter: drop-shadow(0 0 10px rgba(255,210,100,.9)); }
.x32-fil { fill: none; stroke: #8a7a5a; stroke-width: 1.2; }
.x32-batt { fill: #2c2724; stroke: rgba(255,255,255,.25); }
.x32-e { fill: #9ED0F0; }
.x32-probe { fill: #9aa0a6; stroke: #5d6267; }

/* 3.3 phase box */
.x33-box { fill: rgba(255,255,255,.02); stroke: rgba(220,230,240,.45); stroke-width: 1.6; }
.x33-piston { fill: #6c6f74; stroke: #9aa0a6; }
.x33-rod { fill: #4c4f53; stroke: #6c6f74; }
.u3-chip small { margin-left: 6px; font-weight: 500; color: var(--h-muted); }

/* 3.4 gas syringe */
.x34-bath { fill: rgba(255,255,255,.03); stroke: rgba(220,230,240,.4); stroke-width: 1.4; }
.x34-cyl { fill: rgba(255,255,255,.04); stroke: rgba(220,230,240,.6); stroke-width: 1.8; }
.x34-mol { fill: #9ED0F0; opacity: .9; }
.x34-piston { fill: #8b9096; stroke: #c3c8cd; }
.x34-rod { fill: #6c7075; stroke: #8b9096; }
.x34-clamp { fill: var(--h-gold-2); opacity: .8; }
.x34-tube { fill: none; stroke: #6c7075; stroke-width: 4; }
.x34-gauge { fill: #f1ede4; stroke: #8b8478; stroke-width: 3; }
.x34-tick { stroke: #3b3631; stroke-width: 2; }
.x34-tk { fill: #3b3631; font: 700 11px var(--h-sans); }
.x34-needle { stroke: #c0392b; stroke-width: 3; stroke-linecap: round; }
.x34-hub { fill: #3b3631; }
.x34-vlab.is-off { opacity: .45; }
.x34-calc { display: grid; gap: 10px; }

/* 3.5 speed lab */
.x35-box { fill: rgba(255,255,255,.02); stroke: rgba(220,230,240,.45); stroke-width: 1.6; }
.x35-hole { fill: #0E0C0A; stroke: rgba(220,230,240,.3); }
.x35-hole.is-open { fill: var(--h-gold-1); filter: drop-shadow(0 0 6px rgba(242,191,94,.8)); }
.x35-curve { fill: none; stroke-width: 1.6; opacity: .45; stroke-dasharray: 5 4; }
.x35-curve.is-live { stroke-width: 2.8; opacity: 1; stroke-dasharray: none; }
.x35-avg { stroke-width: 1; opacity: .4; stroke-dasharray: 3 3; }
.x35-avg.is-live { stroke-width: 1.6; opacity: .9; }

/* 3.6 real or ideal */
.x36-box { fill: rgba(255,255,255,.02); stroke: rgba(220,230,240,.45); stroke-width: 1.6; }
.x36-scale { fill: rgba(255,255,255,.04); stroke: var(--h-line-2); }
.x36-tick { stroke: rgba(255,255,255,.35); }
.x36-ideal { stroke: var(--h-text-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.x36-fill { fill: rgba(158,208,240,.6); }
.x36-fill.is-low { fill: rgba(229,115,115,.75); }
.x36-fill.is-high { fill: rgba(242,191,94,.8); }
.x36-mark { fill: var(--h-gold-1); }
.ma-imf.x36-att { stroke: rgba(242,191,94,.55); stroke-width: 1.4; }

/* 3.7 make a solution */
.x37-bal { fill: #2b2724; stroke: rgba(255,255,255,.2); }
.x37-pan { fill: #cfc9bf; }
.x37-disp { fill: #0c1410; stroke: rgba(126,211,162,.35); }
.x37-read { fill: #8fe3a8; font: 700 15px ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.x37-boat { fill: #f1ede4; stroke: #b9b2a5; }
.x37-xtal { fill: #f3f0ea; stroke: #b9b2a5; stroke-width: .6; }
.x37-xtal.blue { fill: #3C78E6; stroke: #1f4fae; }
.x37-mark { stroke: #f4f1ea; stroke-width: 1.6; }
.x37-stop { fill: #cfd6dc; stroke: #8d969c; }
.x37-zoom { fill: rgba(14,12,10,.92); stroke: var(--h-gold-2); stroke-width: 1.5; }
.x37-men { fill: none; stroke: #e8f0f8; stroke-width: 2; }
.x37-label { fill: #f4efe4; stroke: #b9b2a5; }
.x37-ltext { fill: #2b2724; font: 600 11px var(--h-sans); }
.x37-ltext.b { font: 800 13px var(--h-sans); }
.x37-calc { display: grid; gap: 10px; }

/* 3.8 draw the solution */
.x38-ctl { display: grid; gap: 10px; width: 100%; }
.x38-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.x38-step { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--h-line); border-radius: var(--h-pill); }
.x38-step b { min-width: 1.4em; text-align: center; font: 700 1.05rem/1 var(--h-sans); color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.x38-step .u3-chip { min-height: 34px; min-width: 34px; padding: 0 10px; }
.x38-k { font: 600 .92rem/1 var(--h-sans); color: var(--h-text); }
.x38-win { fill: rgba(120,170,230,.06); stroke: rgba(220,230,240,.45); stroke-width: 1.6; }

/* 3.9 ink detective */
.x39-rod { stroke: #c9ced4; stroke-width: 6; stroke-linecap: round; }
.x39-paper { fill: #f1ede4; stroke: #c9c1b2; }
.x39-wet { fill: rgba(120,150,180,.16); }
.x39-front { stroke: #7f93aa; stroke-width: 1.2; stroke-dasharray: 5 4; }
.x39-base { stroke: #8a8378; stroke-width: 1.2; }
.x39-ink { fill: #1c1a1d; }
.x39-lane { fill: #3b3631; font: 700 12px var(--h-sans); }
.x39-spot { filter: blur(1.3px); }

/* 3.10 will it dissolve */
.x310-rack { fill: #4a3524; stroke: #2e2016; opacity: .9; }
.x310-x.white { fill: #f3f0ea; stroke: #b9b2a5; stroke-width: .6; }
.x310-x.dark { fill: #4b2a55; stroke: #2a1630; stroke-width: .6; }

/* 3.11 light meets a molecule */
.x311-src { fill: #2b2724; stroke: rgba(255,255,255,.25); }
.x311-det { fill: #1d1a18; stroke: rgba(255,255,255,.2); }
.x311-det.is-full { stroke: var(--h-good); fill: rgba(126,211,162,.12); }
.x311-det.is-dim { stroke: var(--h-gold-2); fill: rgba(242,191,94,.06); }
.x311-wave { fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,255,255,.25)); }
.x311-wave.is-faint { stroke-width: 1.4; opacity: .35; stroke-dasharray: 4 6; }
.x311-inset { fill: rgba(14,12,10,.85); stroke: var(--h-line-2); }
.x311-lv { stroke: #9ED0F0; stroke-width: 2; }

/* 3.12 hydrogen spectroscope */
.x312-tube { fill: rgba(255,255,255,.05); stroke: rgba(230,240,250,.55); stroke-width: 1.4; }
.x312-glow { fill: #ff7ac8; filter: drop-shadow(0 0 10px rgba(255,110,200,.9)); opacity: .9; }
.x312-elec { fill: #8b9096; }
.x312-beam { stroke: rgba(255,170,220,.45); stroke-width: 6; stroke-linecap: round; }
.x312-view { fill: #050405; stroke: var(--h-line-2); }
.x312-tick { stroke: rgba(255,255,255,.55); }
.x312-tick.m { stroke: rgba(255,255,255,.25); }
.x312-tl { fill: var(--h-text-2); font: 11px var(--h-sans); }
.x312-line { cursor: pointer; filter: drop-shadow(0 0 6px currentColor); }
.x312-line:hover, .x312-line.is-sel { stroke: #fff; stroke-width: 1.5; }
.x312-lv { stroke: rgba(255,255,255,.45); stroke-width: 2; }
.x312-plug { fill: #3b3631; }
.x312-rod { fill: #c9a46a; }
.x312-zn { fill: #c9ced4; stroke: #8b9096; }
.x312-leaf { fill: #e9c46a; stroke: #b8860b; stroke-width: .6; }
.x312-lamp { fill: #2b2724; stroke: rgba(255,255,255,.25); }
.x312-e { fill: #9ED0F0; }
.x312-calc { display: grid; gap: 10px; }

/* 3.13 spectrophotometer lab */
.x313-body { fill: #2b2724; stroke: rgba(255,255,255,.22); }
.x313-disp { fill: #0c1410; stroke: rgba(126,211,162,.35); }
.x313-read { fill: #8fe3a8; font: 700 22px ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.x313-dl { fill: rgba(143,227,168,.7); font: 600 10px var(--h-sans); }
.x313-slot { fill: #121010; stroke: rgba(255,255,255,.3); }
.x313-cuv { stroke: rgba(230,240,250,.7); stroke-width: 1.2; }
.x313-pt { stroke: var(--bg-dark, #14110f); stroke-width: 2; }
.x313-fit { stroke: #9ED0F0; stroke-width: 2; }
.x313-read2 { stroke: var(--h-gold-1); stroke-dasharray: 4 4; }
.x313-u { fill: var(--h-gold-1); stroke: #14110f; stroke-width: 2; }
.x313-bar { fill: rgba(210,106,180,.8); }
.x313-calc { display: grid; gap: 10px; }

/* phones: keep bench drawings at a readable size and let them scroll sideways */
@media (max-width: 640px) {
  .u3-scene { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .u3-scene svg { min-width: 540px; }
  .u3-ctl label { min-width: 100%; }
}

/* the notebook, written as entries that run along the ruled lines (not a table) */
.xl .u3-nb { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.xl .u3-nb li { margin: 0; padding: 0; font: 700 1.08rem/var(--nb-line) 'Kalam', 'Segoe Print', cursive; color: var(--nb-ink); }
.xl .u3-nb li b { font-weight: 700; color: var(--nb-ink); }
.xl .u3-nb .u3-nb-k { font-weight: 400; color: var(--nb-pencil); }
.xl .u3-nb li.u3-nb-sub { padding-left: 1.1em; text-indent: -.7em; }
.xl .u3-nb li.u3-nb-sub::before { content: '– '; font-weight: 400; color: var(--nb-pencil); }