/* styles-stepbloch.css — Phase C3: one Bloch sphere per qubit under the
   step-through (ui/stepblochs.js). The cards themselves are viz.js's own
   .bloch-card markup; this only sizes them for a strip and gives the strip
   its frame. Everything uses the theme tokens, so light and dark follow. */

.step-blochs{
  margin:8px 0 0;min-width:0;
  border:1px solid var(--rule);border-radius:9px;
  background:var(--surface);
}
.step-blochs-head{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
  padding:6px 10px;
}
.step-blochs-title{font-size:12px;font-weight:700;color:var(--ink)}
.step-blochs-hint{font-size:11.5px;color:var(--ink-3)}
.step-blochs-sum{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);
  padding:1px 7px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--rule);
}
.step-blochs-sum:empty{display:none}
.step-blochs-sum.mixed{
  color:var(--signal);
  border-color:color-mix(in srgb, var(--signal) 45%, transparent);
  background:color-mix(in srgb, var(--signal) 9%, transparent);
}
.step-blochs-toggle{margin-left:auto}

/* The row scrolls inside itself — never the page — so six qubits stay one
   readable line on a phone, q0 first like the wires. */
.step-blochs-row{
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  padding:0 10px 10px;min-width:0;
}
.step-blochs-row[hidden]{display:none}
/* Fixed width, wide enough for the caption lines in 9px mono (up to
   "x -1.00 · y 0.00 · z 0.00"), so a card never changes width between
   steps — cards jumping sideways during Play would hide the one motion that
   matters, the arrows. Only a rare three-negatives readout wraps. */
.step-blochs-row .bloch-card{
  flex:0 0 auto;scroll-snap-align:start;
  width:calc(var(--sb-size, 104px) + 32px);
}
.step-blochs-row .bloch-card canvas{margin:0 auto}
.step-blochs-row .bloch-cap{
  font-size:9px;letter-spacing:-.01em;line-height:1.4;margin-top:2px;
  white-space:nowrap;
}
.step-blochs-row .bloch-cap b{font-size:11px;letter-spacing:0}
.step-blochs-row .bloch-cap .xyz{font-size:9px;white-space:normal}

.step-blochs.collapsed .step-blochs-hint{display:none}

@media (max-width:640px){
  .step-blochs-hint{display:none}
}