/* Number Theatre part 2 — styles for the wonders5.js exhibits
   (Number Zoo, Equation Theatre, Sine Machine).
   Reuses the .wx-* vocabulary from screens.css; only adds what's new.
   Everything here is prefixed .nz- so it can never collide with the
   wonders4.js half of the wing. */

/* ---------------------------------------------------------------- shared */
/* A scrolling stage for the DOM-heavy exhibits. min-height:0 is load-bearing:
   without it a flex child refuses to shrink and the whole column overflows. */
.nz-stage {
  flex: 1; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px 18px 0;
}
.nz-stage h3 { font-size: 17px; letter-spacing: 1px; margin: 2px 0 2px; }
.nz-stage h3 .nz-sub { color: var(--tx2); font-size: 12.5px; letter-spacing: 0; margin-left: 8px; }
.nz-head p { color: var(--tx1); font-size: 13.5px; margin-bottom: 10px; max-width: 90ch; }
.nz-note { color: var(--tx2); font-size: 12.8px; line-height: 1.6; margin-top: 14px; max-width: 92ch; }
.nz-note b { color: var(--tx1); }

/* a row of controls INSIDE an exhibit body (the .wx-controls strip is reserved
   for the exhibit-level controls, so entries get their own) */
.nz-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 12px; font-size: 13.5px; color: var(--tx1);
}
.nz-row label { display: flex; gap: 6px; align-items: center; }
.nz-row input[type="text"] {
  width: 6.5em; font: 600 17px/1 Consolas, monospace; letter-spacing: 3px;
  text-align: center; background: var(--bg1);
}
.nz-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.nz-tabs button { font-size: 12.5px; padding: 5px 9px; }

.nz-big { font: 700 34px/1.1 Consolas, monospace; color: var(--gold); letter-spacing: 2px; }
.nz-big.nz-huge { font-size: 46px; }
.nz-good { color: var(--good); }
.nz-bad { color: var(--bad); }
.nz-warn { color: var(--bad); font-size: 13px; max-width: 60ch; line-height: 1.5; }
.nz-dim { color: var(--tx2); }

/* card-ish panel used all over the zoo */
.nz-panel {
  background: linear-gradient(180deg, #161b29, #11141f);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; min-width: 0;
}
/* auto-fitting grid of panels — never overflows sideways because the columns
   collapse to 1fr long before the iPad's 1366px runs out */
.nz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }

/* wide content (a 433-digit number, a long product) wraps or scrolls IN its box */
.nz-num {
  font: 15px/1.55 Consolas, monospace; color: var(--gold);
  overflow-wrap: anywhere; word-break: break-all; max-width: 100%;
}
.nz-scroll { overflow-x: auto; max-width: 100%; }

/* a fixed-height canvas for the small zoo visuals */
.nz-cv {
  display: block; width: 100%; height: 250px;
  border-radius: 12px; background: #0d1019; border: 1px solid var(--line);
}

/* ------------------------------------------------- digit tiles (Kaprekar) */
.nz-tile {
  display: inline-block; width: 30px; margin-right: 6px; /* pitch = 36px: the
     JS computes each tile's slide distance as (fromIndex - toIndex) * 36 */
  text-align: center; font: 700 19px/30px Consolas, monospace;
  background: #1b2233; border: 1px solid var(--line); border-radius: 7px;
  color: var(--tx0);
  animation: nz-slide .48s cubic-bezier(.2,.8,.25,1) both;
}
.nz-tile.nz-t-desc { border-color: #62b6f088; color: #cfe8ff; }
.nz-tile.nz-t-asc { border-color: #c792ea88; color: #e6d4ff; }
@keyframes nz-slide { from { transform: translateX(var(--from, 0px)); opacity: .25; } }

.nz-ksteps { display: flex; flex-direction: column; gap: 8px; }
.nz-kstep {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: #12161f; font-size: 14px;
}
.nz-klab { color: var(--tx2); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; min-width: 62px; }
.nz-op { color: var(--tx2); font-size: 19px; }
.nz-kres { font: 700 21px/1 Consolas, monospace; color: var(--gold); animation: nz-pop .4s ease-out both; }
.nz-kstep.nz-home { border-color: var(--gold); box-shadow: 0 0 0 1px #e8d47733 inset; }
@keyframes nz-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }

.nz-kend { margin-top: 14px; }
.nz-kend .nz-big { animation: nz-pop .55s ease-out both; }

/* ------------------------------------------------- staged reveal lines */
/* used by the Armstrong / taxicab / repdigit / 69 proofs and by the
   trig word problems — each line rises a beat after the one above it */
.nz-lines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.nz-eqline {
  font: 16px/1.5 Consolas, monospace; color: var(--tx0);
  animation: nz-rise .42s ease-out both; animation-delay: calc(var(--i, 0) * .34s);
  overflow-wrap: anywhere;
}
.nz-eqline .nz-why { color: var(--tx2); font: 12.5px/1.5 'Segoe UI', system-ui, sans-serif; margin-left: 10px; }
.nz-eqline b { color: var(--gold); }
.nz-eqline mark { background: #24406060; color: #cfe8ff; border-radius: 5px; padding: 1px 4px; }
@keyframes nz-rise { from { transform: translateY(9px); opacity: 0; } }

/* digit checklist for the 69 fact */
.nz-check { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nz-chk {
  width: 30px; height: 30px; text-align: center;
  font: 700 15px/28px Consolas, monospace; border-radius: 8px;
  border: 1px solid var(--line); color: #39405a; background: #12161f;
}
.nz-chk.on { color: #0b0e14; background: var(--gold); border-color: var(--gold);
  animation: nz-pop .4s ease-out both; animation-delay: calc(var(--i, 0) * .12s); }
.nz-d2 { color: #62b6f0; }  /* digits contributed by the square */
.nz-d3 { color: #f0a35e; }  /* digits contributed by the cube */

/* ------------------------------------------------- Equation Theatre */
/* the move menu under the beam — wraps, so it can never widen the page */
.nz-moves { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; min-height: 42px; }
.nz-moves button { font-size: 13px; text-align: left; }
.nz-moves button.nz-mv-illegal:hover { border-color: var(--bad); }
.nz-verdict { font-size: 13.5px; color: var(--tx1); min-height: 20px; padding-bottom: 4px; }
.nz-verdict .nz-bad { font-weight: 600; }

/* order-of-operations: two reductions side by side, the whole lesson */
.nz-ooo { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; }
.nz-ooo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.nz-ooo-col { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: #12161f; min-width: 0; }
.nz-ooo-col.nz-ok { border-color: #8fd18a55; }
.nz-ooo-col.nz-no { border-color: #ef7f8a55; }
.nz-ooo-col h4 { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; }
.nz-ooo-col.nz-ok h4 { color: var(--good); }
.nz-ooo-col.nz-no h4 { color: var(--bad); }
.nz-ooo-final { margin-top: 12px; font-size: 15px; color: var(--tx1); }

/* ------------------------------------------------- Sine Machine */
/* the word-problem strip under the canvas (hidden in machine mode) */
.nz-app {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px;
  max-height: 34vh; overflow-y: auto; min-width: 0;
}
.nz-app .nz-lines { margin-top: 4px; }
.nz-hidden { display: none !important; }
.nz-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--tx2); }
.nz-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ------------------------------------------------- small screens */
/* iPad portrait / split view: keep the tile pitch identical (the slide
   distances are computed against it in JS) but tighten everything else */
@media (max-width: 900px) {
  .nz-big { font-size: 28px; }
  .nz-big.nz-huge { font-size: 36px; }
  .nz-cv { height: 210px; }
  .nz-eqline { font-size: 14.5px; }
}
/* finger-first: the zoo tab strip is the densest thing in the wing */
@media (pointer: coarse) {
  .nz-tabs button { min-height: 40px; padding: 7px 11px; }
  .nz-moves button { min-height: 44px; }
}