/* ===========================================================================
   unit4-explore.css — Unit 4 Explore (chemical reactions)
   ---------------------------------------------------------------------------
   eq-tiles.js: the tap-first equation builder (.eqt-*). Uses the house tokens
   (house.css) and explore-lab.css (.xl-btn, .xl-fb, .xl-k, .xl-row); Unit 4's
   potassium lilac arrives as --unit. Every tap target is at least 40 px tall,
   the coefficient field is 16 px (no iOS zoom), and the builder lays itself
   out by its own width (a container), so it fits the SimLab side panel, a
   wide host, or a 375 px phone without sideways scrolling.
   =========================================================================== */

/* ---------- the builder ---------- */
.eqt { container-type: inline-size; position: relative; min-width: 0; padding: 16px; border: 1px solid var(--h-line); border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--unit) 8%, var(--h-panel-2)) 0%, var(--h-panel-2) 55%);
  transition: border-color .35s, box-shadow .35s; }
.eqt.is-solved { border-color: rgba(126,211,162,.5); box-shadow: 0 0 0 1px rgba(126,211,162,.18), 0 0 32px -8px rgba(126,211,162,.4); }
.eqt-body { display: grid; gap: 12px; min-width: 0; }
.eqt p { margin: 0; }
.eqt-top { display: grid; gap: 8px; }
.eqt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.eqt .eqt-k { color: var(--unit); }
.eqt-form { padding: 4px 10px; border-radius: var(--h-pill); background: color-mix(in srgb, var(--unit) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unit) 30%, transparent); color: color-mix(in srgb, var(--unit) 55%, #fff); font: 700 .66rem/1.2 var(--h-sans); letter-spacing: .12em; text-transform: uppercase; }
.eqt-prompt { color: var(--h-text); font: 500 1rem/1.5 var(--h-sans); }
.eqt-how { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.03); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--unit) 60%, transparent); color: var(--h-text-2); font-size: .86rem; line-height: 1.55; }

/* ---------- where a tapped tile goes ---------- */
.eqt-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.eqt-target-k { font: 600 .66rem/1.2 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-muted); }
.eqt-seg { display: inline-flex; padding: 3px; border-radius: var(--h-pill); background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.55), 0 0 0 1px var(--h-line); }
.eqt-seg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--h-pill); background: none; color: var(--h-text-2); font: 600 .88rem/1 var(--h-sans) !important; cursor: pointer; touch-action: manipulation; transition: background-color .2s, color .2s, box-shadow .2s; }
.eqt-seg button:hover { color: var(--h-text); }
.eqt-seg button[aria-pressed="true"] { background: var(--h-gold-grad); color: var(--h-on-gold); box-shadow: 0 2px 10px rgba(242,191,94,.25); }

/* ---------- the tray and the tiles ---------- */
.eqt-tray { display: flex; flex-wrap: wrap; gap: 10px 8px; padding: 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.2)); box-shadow: inset 0 2px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(242,191,94,.08); }
/* a tile: a slightly raised key with a lit top edge and a hard bottom lip, pressed down when tapped */
.eqt-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; padding: 0 12px;
  border: 1px solid rgba(255,232,190,.15); border-radius: 10px;
  background: linear-gradient(180deg, #37302A 0%, #29241F 46%, #201C18 100%);
  color: var(--h-text); font: 600 1.02rem/1 var(--h-sans) !important; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #0A0908, 0 7px 14px -7px rgba(0,0,0,.85);
  transition: transform .12s ease, box-shadow .12s ease, border-color .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.eqt-tile::before { content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 2px; border-radius: 0 0 3px 3px; background: transparent; }
.eqt-tile.is-cat::before { background: var(--h-info); box-shadow: 0 0 8px rgba(143,184,232,.5); }    /* cation: blue, as in the MolArt figures */
.eqt-tile.is-an::before { background: var(--h-bad); box-shadow: 0 0 8px rgba(240,132,110,.5); }      /* anion: red */
.eqt-tile.is-e::before { background: var(--h-gold-2); box-shadow: 0 0 8px rgba(242,191,94,.55); }     /* electron */
.eqt-tile:hover { border-color: rgba(242,191,94,.5); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 0 #0A0908, 0 10px 18px -8px rgba(0,0,0,.9); }
.eqt-tile:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3), 0 0 0 #0A0908, 0 2px 5px -3px rgba(0,0,0,.8); transition-duration: .05s; }
.eqt-tile.is-used::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--h-gold-2); box-shadow: 0 0 6px rgba(242,191,94,.7); }
.eqt-tile.is-placed { padding-right: 24px; }
.eqt-tile.is-placed::after { content: none; }
.eqt-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--h-muted); font: 600 .72rem/1 var(--h-sans); transition: background-color .15s, color .15s; }
.eqt-tile.is-placed:hover .eqt-x { background: rgba(240,132,110,.22); color: #FFC4B6; }

/* formulas: sub- and superscripts that never push the line apart */
.eqt-f { letter-spacing: .01em; }
.eqt :is(.eqt-f, .eqt-fm, .eqt-how, .eqt-msg, .eqt-prompt) :is(sub, sup) { position: relative; font-size: .7em; line-height: 0; vertical-align: baseline; }
.eqt :is(.eqt-f, .eqt-fm, .eqt-how, .eqt-msg, .eqt-prompt) sub { top: .32em; }
.eqt :is(.eqt-f, .eqt-fm, .eqt-how, .eqt-msg, .eqt-prompt) sup { top: -.56em; margin-left: .04em; }
.eqt-st { margin-left: 2px; font: 500 .72em/1 var(--h-sans); letter-spacing: 0; color: var(--h-muted); }
.eqt-fm { font-weight: 700; color: var(--h-text); white-space: nowrap; }

/* ---------- the equation: stacked in a narrow host, side by side when there is room ---------- */
.eqt-eq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.eqt-side { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 6px 10px 10px; border: 1.5px dashed var(--h-line-2); border-radius: 14px; background: rgba(255,255,255,.015); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.eqt-side.is-target { border-style: solid; border-color: color-mix(in srgb, var(--unit) 55%, transparent); background: color-mix(in srgb, var(--unit) 6%, rgba(255,255,255,.01)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--unit) 10%, transparent); }
.eqt-side-hd { display: flex; }
.eqt-side-h { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none; color: var(--h-muted); font: 600 .7rem/1.2 var(--h-sans) !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.eqt-side-h:hover { color: var(--h-text); }
.eqt-side.is-target .eqt-side-h { color: var(--h-text); cursor: default; }
.eqt-here { padding: 3px 8px; border-radius: var(--h-pill); background: color-mix(in srgb, var(--unit) 22%, transparent); color: color-mix(in srgb, var(--unit) 50%, #fff); font-size: .6rem; letter-spacing: .1em; }
.eqt-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; min-height: 48px; min-width: 0; }
.eqt-empty { font-size: .86rem; line-height: 1.4; color: var(--h-muted); }
.eqt-term { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.eqt-term.is-new { animation: eqt-pop .32s cubic-bezier(.25,1.4,.5,1); }
.eqt-plus { margin-right: 2px; color: var(--h-text-2); font: 500 1.15rem/1 var(--h-sans); }
.eqt-arrow { display: grid; place-items: center; min-height: 30px; color: var(--h-gold-1); font: 500 1.7rem/1 var(--h-sans); text-shadow: 0 0 14px rgba(242,191,94,.35); transform: rotate(90deg); user-select: none; }
@container (min-width: 600px) {
  .eqt-eq { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 8px; }
  .eqt-arrow { transform: none; font-size: 2rem; }
}

/* the coefficient stepper: − [n] + in a recessed well, set before the tile like a coefficient on paper */
.eqt-coef { display: inline-flex; align-items: center; flex: none; padding: 2px; border-radius: 12px; background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.22)); box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px var(--h-line); }
.eqt-coef button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--h-gold-1); font: 600 1.3rem/1 var(--h-sans) !important; cursor: pointer; touch-action: manipulation; transition: background-color .15s, color .15s; }
.eqt-coef button:hover:not(:disabled) { background: rgba(242,191,94,.12); }
.eqt-coef button:active:not(:disabled) { background: rgba(242,191,94,.24); }
.eqt-coef button:disabled { color: var(--h-muted); opacity: .32; cursor: default; }
.eqt .eqt-n { width: 2.2em; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--h-text); font: 700 16px/1 var(--h-sans) !important; text-align: center; font-variant-numeric: tabular-nums; }
.eqt .eqt-n.is-one { color: var(--h-muted); font-weight: 600 !important; }   /* a coefficient of 1 is not written */
.eqt .eqt-n:focus { outline: none; background: rgba(242,191,94,.1); box-shadow: inset 0 0 0 1.5px var(--h-gold-2); color: var(--h-text); }

/* ---------- the live tally under each side ---------- */
.eqt-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 34px; padding-top: 8px; border-top: 1px solid var(--h-line); transition: border-color .25s; }
.eqt.is-even .eqt-tally { border-top-color: rgba(126,211,162,.4); }
.eqt-tally-empty { font-size: .78rem; color: var(--h-muted); }
.eqt-ct { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--h-text); font: 700 .84rem/1.15 var(--h-sans); font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s, box-shadow .25s; }
.eqt-ct b { font-weight: 600; color: var(--h-text-2); }
.eqt-ct.is-q b { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-muted); }
.eqt-ct.is-ok { background: rgba(126,211,162,.12); color: var(--h-good); box-shadow: inset 0 0 0 1px rgba(126,211,162,.25); }
.eqt-ct.is-ok b { color: #B4E8CA; }
.eqt-ct.is-off { background: rgba(240,132,110,.1); color: #F7A893; box-shadow: inset 0 0 0 1px rgba(240,132,110,.3); }
.eqt-ct.is-off b { color: #F7C2B4; }
.eqt-note { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.035); color: var(--h-text-2); font-size: .88rem; line-height: 1.5; transition: background-color .25s, color .25s, box-shadow .25s; }
.eqt-note.is-ok { background: rgba(126,211,162,.08); box-shadow: inset 3px 0 0 var(--h-good); color: var(--h-good); }
.eqt-note.is-off { box-shadow: inset 3px 0 0 var(--h-gold-2); color: var(--h-text); }

/* ---------- check and feedback ---------- */
.eqt-actions { gap: 10px; }
.eqt-fb:empty { display: none; }
.eqt-msg { animation: eqt-in .3s cubic-bezier(.25,1,.5,1); }
.eqt-msg-k { margin-right: 2px; color: var(--h-bad); }
.eqt-msg.is-right .eqt-fm { color: var(--h-good); }
.eqt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.eqt :is(button, input):focus-visible { outline: 2px solid var(--h-gold-1); outline-offset: 2px; }

@keyframes eqt-pop { from { opacity: 0; transform: scale(.82) translateY(4px); } }
@keyframes eqt-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 760px) {
  .eqt { padding: 12px; }
  .eqt-tray { padding: 10px; gap: 8px 6px; }
  .eqt-side { padding: 4px 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .eqt-term.is-new, .eqt-msg { animation: none; }
  .eqt-tile, .eqt-tile:hover, .eqt-tile:active { transition: none; transform: none; }
}