/* Topology & Graphs, part 1 — styles for the wonders10.js exhibits (the
   Bridges of Königsberg and Hamilton's Icosian Game). Prefix .tg- so it can
   never collide with the other wing files (.f4-, .nt-, .nz-, .nc- and .nb2-
   are taken). Reuses the .wx-* vocabulary from screens.css; only adds what is
   new, and never restyles a .wx-* rule — those belong to screens.css and
   reshaping them from here would silently move every other wing. */

/* ---------------------------------------------------------- the 3D stage
   #wx-body is a fixed-height flex column with NO scroll container; min-height:0
   is what lets the stage shrink instead of pushing the say-line off screen
   (the f4-split lesson, inherited). */
.tg-stage {
  flex: 1; min-width: 0; min-height: 0;
  position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: #0d1019;
}

/* ---------------------------------------------------------- the narration
   Reserved height so a verdict appearing never re-squashes the map, and its
   own scroller so Euler's whole rule can never evict the picture. */
.tg-say {
  flex-shrink: 0; min-height: 3.6em; max-height: 26%;
  overflow-y: auto; overflow-x: hidden;
  padding: 8px 2px 0; font-size: 14px; line-height: 1.55; color: var(--tx1);
}
.tg-say b { color: var(--tx0); }
.tg-say button { margin: 2px 2px 0 0; }

/* the persistent Euler-vs-Hamilton contrast card under the Icosian game */
.tg-card {
  flex-shrink: 0; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(98, 182, 240, 0.06);
  font-size: 13px; line-height: 1.5; color: var(--tx1);
}
.tg-card b { color: var(--tx0); }
.tg-card .nc-go { margin-left: 4px; }

/* solid-picker chips ride the shared .wx-controls button styles; only the
   active state is ours */
.tg-solid.on { border-color: var(--gold); color: var(--gold); }