/* lab/keymap.css — THE KEYBOARD WINDOW's paint (the kit's mir/keyboard window, λWAVES' charcoal-blue skin), out of lab.css (021 G6, an OWNER SHEET: the nodes.css precedent).  UNLAYERED like lab.css and loaded
   right after it from index.html (lab.css · csb.css · keymap.css · skin.css · nodes.css), so every rule keeps its rank; the bar's computed boxes and
   pixels were proved equal before and after on STAGE, FREE, RACK and EXPANDED (research/iteration-021/G-BUILD.md). */
/* THE KEYBOARD WINDOW IS THE KIT'S, ITS PAINT λWAVES' (0.5.0 C3, R5-S3): mir/keyboard/keyboard.js builds a 1.5 window on #floats (its rail
   carries the grip and the close), the two wells, the board and the list; these UNLAYERED rules beat keyboard.css's layer and keep the
   charcoal-blue skin — raised/inset relief, no hard borders, visible focus glows, five key rows in 416 px, the status only when it speaks. */
.km-win.glass { border: 0; border-radius: var(--r-lg); box-shadow: var(--glass-shadow), 0 12px 32px hsl(0 0% 0% / .13); }
.km-win > .mir-win-body { padding: 10px; }
.km { gap: 10px; }
.km-col { display: flex; flex-direction: column; min-height: 0; padding: 10px;
  background: var(--glass-well); border: 0; box-shadow: var(--relief-well, var(--neu-inset)); border-radius: var(--r-md); }
.km-col-left { flex: 2.1; min-width: 0; }
.km-col-right { flex: 1; min-width: 285px; }
.km-col-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; margin-bottom: 5px; flex: 0 0 auto; }

.km-platform .seg { display: flex; flex: 0 0 auto; gap: 2px; padding: 3px; border-radius: 24px; background: var(--glass-well); border: 0; box-shadow: var(--relief-well, var(--neu-inset)); }
.km-platform .seg-b { width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--ink-key); cursor: pointer; box-shadow: none; }
.km-platform .seg-b:focus-visible { box-shadow: 0 0 0 2px var(--acc); outline: 0; }
.km-platform .seg-b.on { background: var(--glass-press); color: var(--fg-soft); box-shadow: var(--relief-raise, var(--neu-raise)); }
.km-os-mac { font: 20px / 1 system-ui, sans-serif; }
.km-os-windows { width: 14px; height: 14px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; transform: skewY(-5deg); }
.km-os-windows > span { background: currentColor; }

.km-legend { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font: var(--fs-micro) / 1 var(--font-ui); color: var(--dim); }
.km-legend-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.km-legend-active { background: var(--acc); box-shadow: 0 0 6px var(--acc-soft); }
.km-legend-unbound { background: var(--ink-faint); }
.km-legend-sample { padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.km-legend-sample.km-badge-shift { background: var(--acc2); color: var(--glass-hue-ink, #fff); }
.km-legend-sample.km-badge-ctrl { background: var(--acc); color: var(--acc-ink); }
.km-legend-text { color: var(--dim); }


.km-keyboard { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 5px; min-height: 0; }
.km-kb-row { display: flex; gap: 4px; }
.km-key { position: relative; flex: 1 0 0; min-width: 0; min-height: 52px; padding: 15px 2px 4px; border: 0; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  font: var(--font-ui); text-align: center; overflow: hidden; }
/* the 44-px finger over smaller ink, the way every other control in this lab does it */
.km-key::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px); }
.km-key-w-1 { flex-grow: 1; } .km-key-w-esc { flex-grow: 1.25; } .km-key-w-bksp { flex-grow: 1.6; }
.km-key-w-tab { flex-grow: 1.5; } .km-key-w-backslash { flex-grow: 1.35; } .km-key-w-caps { flex-grow: 1.8; }
.km-key-w-enter { flex-grow: 2.05; } .km-key-w-lshift { flex-grow: 2.2; } .km-key-w-rshift { flex-grow: 1.8; }
.km-key-w-ctrl { flex-grow: 1.4; } .km-key-w-win { flex-grow: 1.3; } .km-key-w-alt { flex-grow: 1.3; }
.km-key-w-space { flex-grow: 5.2; } .km-key-w-arrow { flex-grow: 1; }
.km-key-bound { background: hsl(var(--glass-tint) / .96); box-shadow: var(--relief-raise, var(--neu-raise)); color: var(--ink-key); }
.km-key-unbound { background: var(--glass-well); box-shadow: var(--relief-well, var(--neu-inset)); color: var(--ink-faint); }
body[data-theme="dark"] .km-col,
body[data-theme="dark"] .km-platform .seg,
body[data-theme="dark"] .km-search { background: hsl(var(--glass-tint) / .9); }
body[data-theme="dark"] .km-key-unbound {
  background: hsl(var(--glass-hue) var(--glass-sat-tint) calc(var(--glass-lum) - 2%));
}
.km-key-selected { background: var(--acc-soft); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 14px var(--acc-soft); }
.km-key-hovered, .km-key:hover { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)); }
.km-key:focus-visible { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 0 2px var(--acc); outline: 0; }
.km-key-recording { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 14px var(--bad); }
.km-key-top { position: absolute; inset: 2px 3px auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 2px; }
.km-key-shift-char { font-size: 8px; opacity: .55; }
.km-key-cap { font-size: 11px; font-weight: var(--w-bold); letter-spacing: .02em; text-align: center; color: inherit; }
.km-key-sub { max-width: 100%; font-size: 8px; color: var(--dim); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.km-badge { font-size: 8px; font-weight: 700; padding: 0 2px; border-radius: 3px; color: var(--acc-ink); white-space: nowrap; }
.km-badge-ctrl { background: var(--acc); }
.km-badge-shift { background: var(--acc2); }
.km-badge-alt { background: color-mix(in oklch, var(--acc) 50%, var(--acc2)); }
.km-badge-combo { background: linear-gradient(90deg, var(--acc), var(--acc2)); }

.km-editor-actions { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; flex: 0 0 auto; }
.km-editor-actions .km-btn { flex: 0 1 128px; min-width: 0; padding: 5px 7px; }
.km-search { width: 100%; height: 30px; flex: 0 0 auto; margin: 0 0 6px; padding: 0 9px; border: 0;
  border-radius: var(--r-sm); background: var(--glass-well); box-shadow: var(--relief-well, var(--neu-inset)); color: var(--fg); outline: none; }
.km-search:focus { box-shadow: var(--relief-well, var(--neu-inset)), 0 0 0 2px var(--acc-soft); }
.km-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.km-action-group { padding: 9px 5px 2px; color: var(--acc); font: var(--w-bold) var(--fs-micro) var(--font-ui); letter-spacing: var(--tr-wide); }
.km-action-row { width: 100%; min-height: 38px; padding: 3px 7px; border-radius: var(--r-sm); display: grid; grid-template-columns: minmax(0,1fr) 118px; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--fg-soft); cursor: pointer; text-align: left; }
.km-action-row-selected { background: var(--acc-soft); box-shadow: var(--relief-well, var(--neu-inset)); }
.km-action-row-hovered, .km-action-row:hover { background: var(--glass-press); }
.km-action-row:focus-visible { background: var(--glass-press); box-shadow: 0 0 0 2px var(--acc); outline: 0; }
.km-action-row-recording { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 12px var(--bad); }
.km-chips { display: flex; justify-content: center; align-items: center; gap: 2px; min-width: 0; }
.km-chip { padding: 3px 5px; font: 600 10px / 1 var(--font-mono); border-radius: 4px; border: 0; }
.km-chip-mod { background: var(--glass-raise); color: var(--fg-soft); box-shadow: var(--relief-raise, var(--neu-raise)); }
.km-chip-key { background: var(--glass-press); color: var(--fg); box-shadow: var(--relief-well, var(--neu-inset)); }
.km-chip-unbound { color: var(--ink-faint); background: var(--glass-well); }
.km-chip-recording { color: var(--bad); background: var(--glass-press); }
.km-action-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 11px; text-align: left; }
.km-action-label { font-weight: var(--w-med); letter-spacing: .015em; color: var(--fg-soft); text-transform: uppercase; }   /* 0.4.0 wrote the short name in capitals */
.km-action-desc { color: var(--dim); font-size: 9px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.km-btn { min-height: 34px; padding: 7px 11px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--glass-raise); border: 0; box-shadow: var(--relief-raise, var(--neu-raise)); cursor: pointer; translate: none; }
.km-btn:hover { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)); translate: none; }
.km-btn:focus-visible { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 0 2px var(--acc); outline: 0; }
.km-btn .trig-l { font: var(--w-bold) 12px / 1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); }
.km-editor-actions .km-btn .trig-l { font-size: 10px; }
.km-btn-record .trig-l { color: var(--acc); }
.km-btn-record.on { background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)), 0 0 12px var(--bad); text-shadow: none; }
.km-status { min-height: 0; margin: 0 0 6px; font: 600 11px / 1.3 var(--font-ui); color: var(--acc); }
.km-status:empty { display: none; }   /* CLAUDE.md: status appears only when needed */
.km-status[data-tone="conflict"] { color: var(--bad); }

/* the phone gets one column: the drawn board needs ~700 px to stay legible, and below that the LIST is
   the manual — every binding, still rebindable, which is the part that has to work on a small screen */
@media (max-width: 860px) {
  .km-win > .mir-win-body { padding: 12px; }
  .km { flex-direction: column; gap: 12px; }
  .km-col-left { display: none; }
  .km-col-right { min-width: 0; }
  .km-editor-actions .km-btn .trig-l { font-size: 9px; }
}

/* ── 021 I2 · THE MAPPING (lab/mapping.js), the KEYBOARD window's second face: one well, a search line and CONNECT MIDI over a header row, then
   every surface action as a row — its name, KEY · MIDI · MOD chips (× unbinds) and one LEARN; the list scrolls inside the well ── */
.mp { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--glass-well); box-shadow: var(--relief-well, var(--neu-inset)); }
.mp-head { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; margin-bottom: 6px; }
.mp-find { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: var(--glass-press); color: var(--fg); font: 500 12px var(--font-ui); box-shadow: var(--relief-well, var(--neu-inset)); }
.mp-find:focus-visible { outline: var(--state-focus, 2px solid var(--acc)); outline-offset: 2px; }
.mp-connect { flex: 0 1 auto; max-width: 48%; }
.mp-connect .trig-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-status { flex: 0 0 auto; min-height: 1lh; margin: 0 0 4px; font: 600 11px / 1.3 var(--font-ui); color: var(--acc); overflow-wrap: anywhere; }
.mp-status[data-tone="conflict"] { color: var(--fg); }
.mp-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 78px 84px; align-items: center; gap: 6px; min-height: 32px; padding: 2px 6px; border-radius: var(--r-sm); }
.mp-cols { flex: 0 0 auto; min-height: 20px; color: var(--dim); font: 700 9px / 1 var(--font-ui); letter-spacing: var(--tr-wide, .08em); }
.mp-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list { flex: 1 1 auto; min-height: 0; overflow: hidden auto; }
.mp-group { padding: 9px 6px 2px; color: var(--acc); font: 700 9px var(--font-ui); letter-spacing: var(--tr-wide, .08em); }
.mp-row.mp-learning { background-color: var(--state-on, var(--glass-raise)); box-shadow: var(--state-on-rim, var(--neu-flat)); }
.mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px var(--font-ui); color: var(--fg); }
.mp-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 3px; min-width: 0; height: 22px; padding: 0 5px;
  border-radius: var(--r-xs); background: var(--glass-press); box-shadow: var(--relief-well, var(--neu-inset)); color: var(--fg); font: 600 10px / 1 var(--font-mono); white-space: nowrap; overflow: hidden; }
.mp-chip-t { overflow: hidden; text-overflow: ellipsis; }
.mp-chip.mp-none, .mp-chip.mp-off { color: var(--ink-faint); background: transparent; box-shadow: none; justify-content: center; font-family: var(--font-ui); }
.mp-x { flex: 0 0 auto; padding: 0 2px; border: 0; background: none; color: var(--dim); font: 700 12px / 1 var(--font-ui); cursor: pointer; }
.mp-x:hover { color: var(--acc); }
.mp-learn { min-height: 26px; }
.mp-empty { padding: 12px 6px; color: var(--dim); font: 500 11px var(--font-ui); }
@media (max-width: 860px) { .mp-row { grid-template-columns: minmax(0, 1fr) 70px 70px 54px 70px; gap: 4px; } }