/* Number Theatre part 4 — styles for the wonders7.js exhibits (Goldbach,
   Base Machine, Factor Dance). Prefix .nb2- so it can never collide with the
   other Number Theatre files (.nt-, .nz-, .nc- are taken). */

/* ---------------------------------------------------------------- shared */
/* A scrolling stage for the DOM-heavy exhibits (Goldbach, Base Machine).
   min-height:0 is load-bearing: without it a flex child refuses to shrink and
   the whole #wx-body column overflows instead of scrolling. overflow-x hidden
   keeps a long pair list or digit row from widening the page at 390px. */
.nb2-stage {
  flex: 1; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px 18px 0;
}
.nb2-h { font-size: 16px; letter-spacing: 1px; margin: 16px 0 8px; }
.nb2-h .nb2-sub { color: var(--tx2); font-size: 12px; letter-spacing: 0; margin-left: 8px; }
.nb2-note { color: var(--tx2); font-size: 12.8px; line-height: 1.6; margin-top: 14px; max-width: 92ch; }
.nb2-note b { color: var(--tx1); }
.nb2-dim { color: var(--tx2); }
.nb2-good { color: var(--good); }
.nb2-bad { color: var(--bad); }

/* fixed-height canvases inside the scroll stage (the flex-fill .wx-canvas
   contract doesn't apply in a scroller — the box must own its height) */
.nb2-cv {
  /* clamp, not fixed: a 260px strip under a 2000px-wide window forced every
     arc family flat — let big screens buy the arcs some sky */
  display: block; width: 100%; height: clamp(240px, 34vh, 420px);
  border-radius: 12px; background: #0d1019; border: 1px solid var(--line);
}
.nb2-cv.nb2-comet { height: 220px; cursor: pointer; touch-action: manipulation; }

/* cross-link button — small, quiet, clearly a doorway not a control */
.nb2-see { font-size: 12.5px; padding: 5px 10px; opacity: 0.85; }
.nb2-see:hover { opacity: 1; }
.nb2-seerow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ------------------------------------------------------ Goldbach Machine */
.nb2-gs { flex: 1; min-width: 130px; max-width: 420px; }
.nb2-verdict { color: var(--tx1); font-size: 14px; margin: 4px 0 10px; }
.nb2-verdict b { color: var(--gold); font: 700 17px/1 Consolas, monospace; }
.nb2-gtro { font-size: 12px; }

/* the pair list: capped and scrolling INSIDE its own box — 9,240 has 300+
   pairs and they must never push the comet off the screen */
.nb2-pairs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 4px; max-height: 132px; overflow-y: auto;
}
.nb2-pair {
  font: 600 12.5px/1 Consolas, monospace; color: var(--tx0);
  background: #1b2233; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 9px; white-space: nowrap;
  animation: nb2-pop .35s ease-out both;
}
@keyframes nb2-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* --------------------------------------------------------- Base Machine */
.nb2-bigval {
  font: 700 44px/1.1 Consolas, monospace; color: var(--gold);
  letter-spacing: 2px; margin: 6px 0 10px;
}
.nb2-bmsg { font-size: 13.5px; color: var(--tx1); min-height: 1.5em; max-width: 80ch; }
.nb2-bmsg b { color: var(--gold); }
.nb2-bmsg.nb2-good { color: var(--good); }

/* the binary lights. 12 of them at ~46px wrap to two rows of six on a 390px
   phone — wrapping is the plan, horizontal overflow never is. Each light is a
   44px+ touch target (the smallest comfortable finger size). */
.nb2-lights { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.nb2-light {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 46px; min-height: 54px; padding: 5px 2px 4px;
  background: #12161f; border: 1px solid var(--line); border-radius: 10px;
}
/* off = a dead grey bulb; on = lit + a glow. filter, not a glyph swap, so the
   tap feedback is instant and the layout never shifts */
.nb2-light .nb2-bulb { font-size: 19px; line-height: 1.15; filter: grayscale(1) brightness(.45); transition: filter .12s; }
.nb2-light.on { border-color: var(--gold); box-shadow: 0 0 10px #e8d47733, 0 0 0 1px #e8d47744 inset; }
.nb2-light.on .nb2-bulb { filter: none; }
.nb2-light .nb2-pv { font: 10px/1.2 Consolas, monospace; color: var(--tx2); }
.nb2-light.on .nb2-pv { color: var(--gold); }

/* one odometer row per base */
.nb2-baserow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 8px;
  background: #12161f; border: 1px solid var(--line); border-radius: 11px;
}
.nb2-baselab { min-width: 118px; color: var(--tx2); font-size: 12px; }
.nb2-baselab i { font-style: normal; opacity: .75; }
.nb2-baselab select { font-size: 13px; padding: 4px 6px; }
.nb2-digits { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.nb2-digit {
  width: 26px; height: 34px; text-align: center;
  font: 700 18px/34px Consolas, monospace; color: var(--tx0);
  background: #1b2233; border: 1px solid var(--line); border-radius: 6px;
}
/* only the digits that CHANGED roll — the eye is drawn straight to the carry */
.nb2-digit.nb2-roll { animation: nb2-roll .38s ease-out both; color: var(--gold); }
@keyframes nb2-roll { from { transform: translateY(-12px); opacity: 0; } }
/* a length change is a rollover (…999 -> 1000): flash the whole row gold so
   the "1111 -> 10000 and F -> 10 together" moment is unmissable */
.nb2-baserow.nb2-carry { animation: nb2-carry .55s ease-out; }
@keyframes nb2-carry {
  0% { border-color: var(--gold); box-shadow: 0 0 14px #e8d47755; }
  100% { border-color: var(--line); box-shadow: none; }
}

/* ---------------------------------------------------------- Factor Dance */
/* the readout strip under the canvas. flex-shrink:0 for the same reason the
   .wx-controls strip has it — the flex column must never crush it to 0px */
.nb2-fread {
  flex-shrink: 0; color: var(--tx1); font-size: 13.5px;
  padding: 8px 2px 2px; min-height: 26px;
}
.nb2-fread b { color: var(--gold); font: 700 17px/1 Consolas, monospace; }
.nb2-fread sup { font-size: 10px; }
.nb2-fspd, .nb2-fn { min-width: 90px; }
.nb2-fn { flex: 1; max-width: 300px; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 480px) {
  .nb2-cv { height: 200px; }
  .nb2-cv.nb2-comet { height: 170px; }
  .nb2-bigval { font-size: 34px; }
  .nb2-digit { width: 22px; height: 30px; font-size: 15px; line-height: 30px; }
  .nb2-baselab { min-width: 100%; }   /* label above digits: 12 binary digits + label can't share 390px */
  .nb2-pairs { max-height: 100px; }
}