/* The Knot Room — styles for the wonders11.js exhibit. Prefix .kr- so it can
   never collide with the other wing files (.tg-, .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 chapter body
   #wx-body is a fixed-height flex column with NO scroll container; the body
   claims the middle and min-height:0 lets it shrink instead of pushing the
   say-line off screen (the f4-split lesson, inherited). */
.kr-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  min-height: 0; min-width: 0; position: relative;
}
.kr-3d {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: #0d1019;
}

/* ---------------------------------------------------------- the narration */
.kr-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);
}
.kr-say b { color: var(--tx0); }
.kr-say button { margin: 2px 2px 0 0; }

/* chapter rail + chips */
.kr-chap.on, .kr-gal.on, .kr-flt.on, .kr-pq.on, .kr-tri.on, .kr-step.on,
#kr-tmove.on, #kr-ttwist.on, #kr-tpoke.on, .kr-demo.on {
  border-color: var(--gold); color: var(--gold);
}
.kr-num { color: var(--gold); font: 600 13px/1.3 Consolas, monospace; align-self: center; }

/* ---------------------------------------------------------- the knot table */
.kr-cards {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
  /* rows size to their content — without this, filtering down to one row let
     the grid stretch the survivors from floor to ceiling (Van, first walk) */
  align-content: start;
  padding: 4px 2px;
}
.kr-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: rgba(98, 182, 240, 0.04); font-size: 13px; color: var(--tx1);
}
.kr-card b { color: var(--tx0); font-size: 15px; }
.kr-card canvas { width: 100%; height: 96px; display: block; margin-bottom: 4px; }
.kr-chips { font-size: 11.5px; color: var(--tx2); margin-top: 2px; }
.kr-famous { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--tx1); }
.kr-card .nc-go { margin-top: 5px; }

/* the three proof swatches */
.kr-tri {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  margin: 0 2px; padding: 0; cursor: pointer;
}
.kr-tri.on { border-color: var(--tx0); }

/* the twist-hand mini-picker floats where the tap landed */
.kr-picker {
  position: absolute; z-index: 5; display: flex; gap: 4px;
  background: rgba(13, 16, 25, 0.92); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px;
}