/* stencil-engine.css — v1.2
   Styling specific to the E5 keyboard-stencil figures.
   Requires lib/figure-base.css (palette, figure frame, readout, controls).
   Split out of this file at v1.2 so a second engine does not inherit it.
*/

.dirrow { display: flex; gap: 6px; margin: 2px 0 6px; }
.dirrow button {
  font: inherit; font-size: 14px; padding: 6px 14px;
  border: 1px solid var(--key-stroke); border-radius: 7px;
  background: #fff; cursor: pointer; transition: all .15s;
}
.dirrow button.active { background: var(--raised); color: #fff; border-color: var(--raised); }
.dirrow.bluesel button.active { background: var(--blue); border-color: var(--blue); }
.stencilG { transition: transform .65s cubic-bezier(.55,.05,.25,1.2), opacity .25s ease; }
.keyf { transition: fill .3s; cursor: default; }

/* --- the brightness ladder (mode stepper) --- */
.laddernav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.laddernav button {
  font: inherit; font-size: 13.5px; padding: 6px 11px;
  border: 1px solid var(--key-stroke); border-radius: 7px;
  background: #fff; cursor: pointer; transition: all .18s;
}
.laddernav button:hover { border-color: var(--stencil); }
.laddernav button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.laddernav button.nudge { min-width: 34px; font-size: 15px; background: #efece4; }
.laddernav .brightlabel {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin: 0 4px;
}

/* --- the consequence cascade (diatonic chord chips) --- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.chip {
  font: inherit; min-width: 62px; padding: 7px 8px 6px; cursor: pointer;
  border: 1.5px solid var(--key-stroke); border-radius: 8px; background: #fff;
  text-align: center; line-height: 1.15; transition: all .3s;
}
.chip .rn { display: block; font-size: 16px; font-weight: bold; color: var(--stencil); }
.chip .sym { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.chip.min .rn { color: #4a463e; }
.chip.dim .rn { color: var(--half); }
.chip.dim { border-style: dashed; }
.chip.changed { border-color: var(--accent); background: #fdf3e7; box-shadow: 0 0 0 3px rgba(168,83,31,.10); }
.chip.changed .rn { color: var(--accent); }
.chip.flash { transform: translateY(-3px); }
@media (max-width: 640px) { .chip { min-width: 54px; } }

/* --- build figures: layers that accumulate (the chromatic blues scale) --- */
.layers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0 6px; }
.layers button {
  font: inherit; font-size: 13.5px; padding: 7px 12px;
  border: 1.5px solid var(--key-stroke); border-radius: 7px;
  background: #fff; cursor: pointer; transition: all .2s; color: var(--muted);
}
.layers button:hover { border-color: var(--stencil); }
.layers button.active { color: var(--ink); font-weight: bold; border-color: currentColor; }
.layers button[data-layer="0"].active { color: var(--stencil); }
.layers button[data-layer="1"].active { color: var(--accent); background: #fdf3e7; }
.layers button[data-layer="2"].active { color: var(--blue); background: #eef4fd; }
.layers .steplabel {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.missing { font-size: 14px; color: var(--muted); }
.missing b { color: var(--ink); }