/* Circles & Waves — styles for the wonders14.js exhibits. Prefix .cw- (free;
   .tg- .kr- .f4- .nt- .nz- .nc- .nb2- .dd- are taken). Reuses the .wx-*
   vocabulary from screens.css; never restyles a .wx-* rule. */

/* ---------------------------------------------------------- the narration
   Reserved height so a verdict appearing never re-squashes the picture, and
   its own scroller so the longest card can never evict the canvas. */
.cw-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);
}
.cw-say b { color: var(--tx0); }
.cw-say button { margin: 2px 2px 0 0; }

/* the standing cards (Ptolemy's confession, the Chroma Keys handshake) */
.cw-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);
  max-height: 22%; overflow-y: auto;
}
.cw-card b { color: var(--tx0); }
.cw-card .nc-go { margin-left: 4px; }

/* the standing honesty note — a class in the layout survives a rewrite in a
   way a sentence in the prose does not */
.cw-honest {
  display: inline-block; margin-right: 4px; padding: 3px 9px; border-radius: 20px;
  font: 600 10.5px/1 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc2); background: #f0a35e18; border: 1px solid #f0a35e55;
}

/* a second, compact control row for mode chips and presets so a phone never
   wraps five rows of 44px buttons over the canvas */
.cw-modes { padding-top: 0; gap: 6px; }
.cw-modes button { padding: 5px 9px; font-size: 12.5px; }
.cw-mode.on, .cw-preset.on, .cw-wave.on, .cw-view.on, .cw-nchip.on, .cw-tune.on,
#cw-rad.on, #cw-dslow.on, #cw-shear.on, #cw-whear.on, #cw-chear.on, #cw-cbuild.on { border-color: var(--gold); color: var(--gold); }
.cw-fn { color: var(--tx2); }
.cw-fn.on { color: var(--fnc); border-color: var(--fnc); }
.cw-big { font: 700 20px/1 Consolas, monospace; color: var(--gold); min-width: 3.4em; }
.cw-big.cw-retro { color: var(--bad); }
.cw-radv { font: 600 13px/1 Consolas, monospace; color: var(--tx2); }
.cw-radv.on { color: var(--acc); }
.cw-dim { color: var(--tx2); font-size: 12.5px; }
/* a frequency's note name: dim with its cents until it is in tune, then lit
   in its pitch-class colour (Chroma Keys' palette, set as --pc) */
.cw-note { font: 600 13px/1 Consolas, monospace; color: var(--tx2); padding: 4px 8px; border-radius: 12px; border: 1px solid transparent; white-space: nowrap; }
.cw-note.on { color: var(--pc, var(--gold)); border-color: var(--pc, var(--gold)); }
.cw-chips { display: inline-flex; gap: 4px; }
.cw-chips button { padding: 4px 7px; font-size: 12px; }

/* ---------------------------------------------------------- the circle stack
   A rows panel beside the canvas; stacks under 1120px like .wx-split. */
.cw-split { flex: 1; display: flex; gap: 12px; min-height: 0; }
.cw-rows {
  flex: 0 0 372px; min-width: 0; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding-right: 4px;
}
.cw-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tx1);
  background: #12161f; border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px;
}
.cw-row b { min-width: 1.2em; font-size: 14px; }
.cw-row label { display: flex; align-items: center; gap: 4px; }
.cw-row input[type="range"] { width: 76px; }
.cw-row button { padding: 3px 7px; font-size: 12px; }
.cw-row .cw-kv { font: 600 12.5px/1 Consolas, monospace; color: var(--gold); min-width: 2.4em; text-align: center; }
.cw-row .cw-rv { font: 600 12px/1 Consolas, monospace; color: var(--tx1); min-width: 2.6em; }
.cw-row button.on { border-color: var(--gold); color: var(--gold); }
.cw-stagecv { flex: 1; height: auto; min-width: 0; }
/* the chord stack's rows: a pitch-class badge, a wider log-scaled hertz
   slider (pitch is a ratio), a hertz readout that takes typing */
.cw-rows-chords { flex-basis: 470px; }
.cw-row .cw-pc { color: var(--pc, var(--gold)); }
.cw-row input.cw-hz { width: 100px; }
.cw-row.muted { opacity: 0.55; }
.cw-row.muted .cw-note.on { color: var(--tx2); border-color: transparent; }
.cw-row .cw-mu.on { color: var(--bad); border-color: var(--bad); }
.cw-row .cw-hv { font: 600 12px/1 Consolas, monospace; color: var(--tx1); min-width: 5.6em; text-align: right; border-bottom: 1px dashed var(--line); }
.cw-row .cw-note { font-size: 12px; padding: 3px 6px; }
/* the build-it target: a standing card with a golden edge */
.cw-target {
  flex-shrink: 0; margin-top: 6px; padding: 7px 10px;
  border-radius: 10px; border: 1px solid var(--gold); background: rgba(240, 200, 90, 0.06);
  font-size: 13px; line-height: 1.5; color: var(--tx1);
}
.cw-target b { color: var(--gold); }
.cw-target button { margin: 0 2px; padding: 3px 8px; font-size: 12px; }
@media (max-width: 1120px) {
  .cw-split { flex-direction: column; }
  .cw-rows { flex: 0 0 auto; max-height: 34vh; flex-direction: row; flex-wrap: wrap; align-content: start; }
  .cw-row { flex: 1 1 250px; }
  .cw-stagecv { height: auto; }
}

/* saved recipes and the doodle gallery: chips with a small forget button */
.cw-recipe, .cw-gitem { position: relative; padding-right: 22px; }
.cw-del { position: absolute; right: 3px; top: 1px; font-size: 10px; color: var(--tx2); padding: 2px 4px; }
.cw-del:hover { color: var(--bad); }
.cw-gal { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cw-gitem { padding: 3px 22px 3px 3px; line-height: 0; }
.cw-gitem canvas { width: 40px; height: 40px; display: block; border-radius: 6px; }

/* the doodle canvas invites drawing */
.cw-draw { cursor: crosshair; touch-action: none; }

/* phones: the picture must keep most of the column. The hints are the first
   thing to go (every control still has its title), then the prose shrinks. */
@media (max-width: 720px) {
  .cw-say { max-height: 20%; font-size: 13px; }
  .cw-card { max-height: 14%; font-size: 12px; }
  .cw-rows { max-height: 26vh; }
}
@media (max-width: 480px) {
  .cw-modes button { padding: 4px 6px; font-size: 11.5px; }
  .cw-big { font-size: 17px; }
  .cw-hint { display: none; }
}