/* TurkeyBoards Tools — layout editor shell. */

/* ---------- Editor shell ---------- */
html.editor-html, html.editor-html body { height: 100%; }
.editor-mode { display: flex; flex-direction: column; min-height: 100%; }
#view-editor { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
/* the toolbar wraps onto a second line when the window is narrow, rather than scrolling sideways;
   a separator that would start or end a line is hidden (common.js marks it) */
.ed-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); padding-block: 6px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.ed-toolbar-row .ed-sep.is-break { visibility: hidden; width: 0; margin: 0 -4px; }
/* phones: the buttons that have an icon show just the icon (the name stays as their label and tooltip) */
@media (max-width: 560px) {
  .ed-toolbar-row .tb-btn:has(> svg) { font-size: 0; gap: 0; padding-inline: 8px; }
  .ed-toolbar-row .tb-btn:has(> svg) > svg { width: 16px; height: 16px; }
}
.ed-group { display: flex; align-items: center; gap: 2px; flex: none; }
.ed-sep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; flex: none; }
.ed-zoom { font: 400 12px/1 var(--font-mono); min-width: 48px; text-align: center; color: var(--ink-muted); background: none; border: 0; cursor: pointer; height: 34px; border-radius: var(--radius-sm); }
.ed-zoom:hover { background: var(--surface-sunken); color: var(--ink); }
.ed-snap { display: flex; align-items: center; gap: 6px; flex: none; }
.ed-snap select { width: auto; height: 30px; }
.ed-spacer { flex: 1 0 8px; }
.menu-wrap { position: relative; flex: none; }
.menu { position: fixed; z-index: 50; min-width: 250px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: grid; max-height: calc(100vh - 120px); overflow-y: auto; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: 400 14px/20px var(--font-ui); color: var(--ink); background: none; border: 0; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-sunken); outline: none; }
.menu button .k { margin-left: auto; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); }
.menu button svg { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu .menu-label { padding: 6px 10px 2px; }

.ed-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.ed-canvas-wrap { position: relative; min-width: 0; min-height: 0; background: var(--canvas); overflow: hidden; }
#canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
#canvas.panning, #canvas.space-pan { cursor: grab; }
#canvas.panning:active { cursor: grabbing; }
.canvas-hint { position: absolute; left: 12px; bottom: 12px; font: 400 12px/18px var(--font-mono); color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; pointer-events: none; max-width: calc(100% - 24px); }
.key-legend { font-family: var(--font-ui); font-weight: 700; pointer-events: none; }
.k-hit { cursor: move; }
.handle { fill: var(--brand-beak); stroke: var(--brand-outline); stroke-width: 1.5; cursor: nwse-resize; }
.origin { cursor: move; }
.origin circle { fill: var(--brand-beak); stroke: var(--brand-outline); stroke-width: 1.5; }
.origin path { stroke: var(--brand-beak); stroke-width: 1.5; }
.sel-outline { fill: var(--selection-fill); stroke: var(--selection); stroke-width: 3; pointer-events: none; }
.overlap-outline { fill: none; stroke: var(--warning); stroke-width: 2; stroke-dasharray: 5 3; pointer-events: none; }
.marquee { fill: var(--selection-fill); stroke: var(--selection); stroke-width: 1; stroke-dasharray: 4 3; }

.inspector { border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); flex: none; }
.tabs button { font: 700 13px/1 var(--font-ui); padding: 10px 12px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-feather); }
.tab-panel { overflow-y: auto; padding: 16px; display: grid; gap: 20px; align-content: start; min-height: 0; flex: 1; }
.group { display: grid; gap: 10px; }
#key-form { display: grid; gap: 22px; }
.kbd-list kbd { justify-self: start; align-self: start; }
.group-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.group-h h4 { margin: 0; font: 700 14px/20px var(--font-ui); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fld { display: grid; gap: 3px; min-width: 0; }
.fld > span { font: 700 10.5px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: var(--radius-md); background: var(--keycap); border: 1.5px solid var(--brand-outline); box-shadow: inset 0 -5px 0 rgba(0, 22, 52, .14); }
.legend-grid input { font: 700 13px/18px var(--font-ui); height: 30px; text-align: center; border: 1px dashed #9fb3c5; background: transparent; color: #001634; border-radius: var(--radius-sm); min-width: 0; padding: 0 4px; }
.legend-grid input::placeholder { color: #6d849a; font-weight: 500; }
.legend-grid input:focus { outline: 2px solid #006599; border-color: transparent; background: #ffffff; }
.legend-grid .front { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 6px; border-top: 1px solid #c5d3df; }
.legend-grid .front input { height: 26px; font-size: 11px; }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type="color"] { width: 36px; height: 32px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); cursor: pointer; flex: none; }
.color-row .tb-input { flex: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches button { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--brand-outline); cursor: pointer; padding: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.swatches button:hover { transform: translateY(-1px); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand-feather-deep); margin: 0; }
.empty { display: grid; gap: 12px; justify-items: start; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.empty h4 { margin: 0; color: var(--ink); font: 700 16px/22px var(--font-display); }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; color: var(--ink-muted); }
details.more summary { cursor: pointer; font: 700 13px/20px var(--font-ui); color: var(--ink-muted); list-style: none; }
details.more summary::before { content: "▸ "; }
details.more[open] summary::before { content: "▾ "; }
details.more > div { margin-top: 10px; }
textarea.raw { font: 400 12.5px/19px var(--font-mono); width: 100%; min-height: 300px; resize: vertical; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-sunken); color: var(--ink); white-space: pre; overflow: auto; tab-size: 2; }
textarea.raw:focus { outline: 2px solid var(--focus); border-color: transparent; }
.raw-error { color: var(--danger); font-size: 13px; line-height: 19px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.stats dt { color: var(--ink-muted); }
.stats dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.note { font-size: 13px; line-height: 19px; color: var(--ink-muted); margin: 0; }

.ed-status { display: flex; align-items: center; gap: 18px; padding-block: 6px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); font: 400 12px/20px var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow-x: auto; }
.ed-status b { color: var(--ink); font-weight: 700; }
.ed-status .right { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.toast { position: fixed; left: 50%; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; width: max-content; background: var(--brand-outline); color: #ffffff; font: 700 14px/20px var(--font-ui); padding: 10px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); }
.toast button { font: 700 13px/1 var(--font-ui); color: var(--brand-feather); background: none; border: 0; cursor: pointer; padding: 4px; }

@media (max-width: 900px) {
  html.editor-html, html.editor-html body { height: auto; }
  .ed-main { grid-template-columns: minmax(0, 1fr); }
  .ed-canvas-wrap { height: 58vh; min-height: 320px; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); }
  .tab-panel { overflow: visible; }
  .ed-status { position: static; }
}
/* phones: the state (problems to fix, ready to build) first, where it can't scroll out of sight */
@media (max-width: 560px) {
  .ed-status .right { order: -1; margin-left: 0; }
}

/* ---------- Inspector: tab bar with dock button, splitter, bottom dock ---------- */
.ed-main { grid-template-columns: minmax(0, 1fr) var(--panel-w, 360px); }
.ed-main.dock-bottom { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--panel-h, 320px); }
.ed-main.dock-bottom .inspector { border-left: 0; border-top: 1px solid var(--line); }
.inspector { position: relative; }
.tabs-bar { display: flex; align-items: flex-end; gap: 4px; padding: 6px 6px 0 6px; border-bottom: 1px solid var(--line); flex: none; }
.tabs-bar .tabs { flex: 1; min-width: 0; padding: 0; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.tabs-bar .tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 10px 9px; white-space: nowrap; flex: none; }
.dock-btn { margin-bottom: 4px; }
.ed-splitter { position: absolute; z-index: 6; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; touch-action: none; }
.ed-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background-color .12s ease; }
.ed-splitter::before { content: ""; position: absolute; top: 50%; left: 2px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--line-strong); opacity: .55; }
.ed-splitter:hover::after, .ed-splitter.dragging::after, .ed-splitter:focus-visible::after { background: var(--brand-feather); }
.ed-splitter:focus-visible { outline: none; }
.ed-splitter:hover::before, .ed-splitter.dragging::before { opacity: 1; background: var(--brand-feather-deep); }
.dock-bottom .ed-splitter { left: 0; right: 0; top: -5px; bottom: auto; width: auto; height: 10px; cursor: row-resize; }
.dock-bottom .ed-splitter::after { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 2px; }
.dock-bottom .ed-splitter::before { top: 2px; left: 50%; width: 36px; height: 6px; margin: 0 0 0 -18px; }
/* bottom dock: use the width, lay groups out in columns */
.dock-bottom .tab-panel { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; column-gap: 28px; }
.dock-bottom #panel-key, .dock-bottom #panel-raw, .dock-bottom .def-panel { grid-template-columns: minmax(0, 1fr); }
.dock-bottom #key-form { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: start; column-gap: 28px; }
.dock-bottom #key-empty { max-width: 640px; }
.dock-bottom .raw { min-height: 160px; }
body.panel-resizing { cursor: col-resize; user-select: none; }

/* ---------- Firmware fields ---------- */
.fw-group { padding-top: 14px; border-top: 1px dashed var(--line); }
.fw-inline { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-md); border: 1.5px dashed var(--line-strong); background: var(--surface-sunken); }
.fw-options { display: grid; gap: 8px; }
.fw-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.fw-opt input[data-o="choices"] { grid-column: 2 / -1; }
.fw-opt-n { font: 700 12px/1 var(--font-mono); color: var(--ink-muted); text-align: center; }
.tb-input:disabled { opacity: .5; }
select.tb-input { font-family: var(--font-ui); }

/* ---------- Vial / VIA tabs ---------- */
.def-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.def-issues li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 19px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-sunken); }
.def-issues li span::before { font-weight: 700; margin-right: 6px; }
.def-issues li.is-error { color: var(--danger); }
.def-issues li.is-error span::before { content: "Fix:"; }
.def-issues li.is-warn { color: var(--warning); }
.def-issues li.is-warn span::before { content: "Check:"; }
.def-issues li.is-ok { color: var(--success); }
.def-issues li.is-ok span::before { content: "✓"; }
.def-issues .tb-btn { flex: none; height: 26px; }
.def-panel .raw { min-height: 340px; }

/* ---------- Matrix view on the canvas ---------- */
#canvas.matrix-view .key-legend { opacity: .22; }
.mx { pointer-events: none; }
.mx > rect:first-child { fill: #001634; opacity: .9; }
.mx text { fill: #ffffff; font: 700 11px var(--font-mono); }
.mx-missing > rect:first-child { fill: var(--brand-beak); opacity: 1; }
.mx-missing text { fill: #001634; }
.mx .mx-opt { fill: var(--brand-beak); }
.mx .mx-opt-t { fill: #001634; font-size: 8.5px; }
.mx .mx-enc { fill: #0090d1; font-size: 9.5px; }

@media (max-width: 900px) {
  .ed-main, .ed-main.dock-bottom { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ed-main.dock-bottom .inspector { border-top: 1px solid var(--line); }
  .ed-splitter, .dock-btn { display: none; }
  .dock-bottom .tab-panel, .dock-bottom #key-form { grid-template-columns: minmax(0, 1fr); }
}

/* menu sections built at runtime (recent layouts, start-from boards) */
.menu .menu-group { display: grid; }
.menu .menu-group[hidden] { display: none; }
.menu .menu-group .menu-label { padding: 6px 10px 2px; }
.menu .recent-k { margin-left: auto; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; padding-left: 12px; }

/* canvas: keyboard focus, and zoom buttons where the toolbar ones scroll away (phones, tablets) */
#canvas:focus { outline: none; }
#canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.canvas-zoom { position: absolute; right: 12px; bottom: 12px; display: none; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
@media (max-width: 900px), (pointer: coarse) { .canvas-zoom { display: flex; } .canvas-hint { max-width: calc(100% - 150px); } }

/* keyboard and tool menus (keyboards.js) */
.kb-menu { min-width: 300px; max-width: min(400px, calc(100vw - 16px)); }
.kb-menu .kb-list { display: grid; max-height: 40vh; overflow-y: auto; }
.kb-menu .kb-item { display: grid; min-width: 0; text-align: left; }
.kb-menu .kb-item b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-menu .kb-item small { font: 400 11px/16px var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-menu [aria-checked="true"] { background: var(--surface-sunken); }
.kb-menu [aria-checked="true"] svg { color: var(--link); }
.kb-menu .is-danger, .kb-menu .is-danger svg { color: var(--danger, #d2333b); }
.sync-banner { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--link); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 14px; }
.sync-banner p { margin: 0; flex: 1 1 260px; }
.sync-banner .btn-row { display: flex; gap: 8px; }

/* ---------- Edit card on the picture, its right-click menu, drag badge, sliders, steppers ----------
   Shared by the Layout Editor (#ed-pop, #ed-menu) and the Ergogen Builder (#pv-pop, #pv-menu). */
.stepper, .pp-step { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-sunken); height: 34px; width: fit-content; }
.stepper button, .pp-step button { width: 34px; height: 32px; border: 0; background: none; color: var(--ink); font: 700 16px/1 var(--font-mono); cursor: pointer; border-radius: var(--radius-md); }
.stepper button:hover:not(:disabled), .pp-step button:hover:not(:disabled) { background: var(--surface-raised); }
.stepper button:disabled, .pp-step button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output, .pp-step output { min-width: 34px; text-align: center; font: 700 14px/1 var(--font-mono); }
.slider { display: grid; gap: 2px; font-size: 12px; color: var(--ink-muted); }
.slider > span { display: flex; justify-content: space-between; gap: 8px; font: 700 10.5px/14px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.slider output { font: 400 12px/14px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
.slider input[type="range"] { width: 100%; accent-color: var(--brand-feather-deep); margin: 2px 0; }
.drag-badge { position: absolute; z-index: 6; pointer-events: none; font: 600 12px/1 var(--font-mono); color: var(--on-feather); background: var(--brand-feather); border: 1px solid var(--sticker-edge); border-radius: var(--radius-sm); padding: 5px 7px; white-space: pre; }
.pv-pop { position: absolute; z-index: 5; top: 12px; right: 12px; left: auto; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border: 2px solid var(--sticker-edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); padding: 12px 14px 14px; display: grid; gap: 10px; font-size: 13px; }
.pp-head { display: flex; align-items: flex-start; gap: 8px; }
.pp-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pp-head b { font: 700 15px/20px var(--font-display); }
.pp-head b::first-letter { text-transform: uppercase; }
.pp-head span { color: var(--ink-muted); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.pp-chips { width: 100%; }
.pp-chips button { flex: 1; }
.pp-body { display: grid; gap: 10px; justify-items: stretch; }
.pp-body > .tb-btn { justify-self: start; }
.pp-f { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.pp-f > span { display: grid; gap: 1px; }
.pp-f > span small { color: var(--ink-muted); font-size: 11px; line-height: 14px; }
.pp-f select { min-width: 0; width: 13em; max-width: 100%; }
.pp-num { display: inline-flex; align-items: center; gap: 4px; }
.pp-num input { width: 6.2em; text-align: right; }
.pp-num i { font-style: normal; color: var(--ink-muted); width: 1.6em; }
.pp-num .tb-iconbtn { width: 28px; height: 28px; font: 600 16px/1 var(--font-mono); }
.pp-rows, .pp-segf, .pp-slide { grid-template-columns: 1fr; }
.pp-segf .tb-seg { display: flex; width: 100%; }
.pp-segf .tb-seg button { flex: 1; padding: 0 6px; white-space: nowrap; }
.pp-slide-row { display: flex; align-items: center; gap: 8px; }
.pp-slide-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand-feather-deep); margin: 0; height: 26px; }
.pp-slide-row .pp-num input { width: 4.6em; }
.pp-body > .pp-done { justify-self: stretch; justify-content: center; }
.pp-rows .tb-seg { flex-wrap: wrap; }
.pp-note { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 17px; }
.pp-warn { margin: 0; font-size: 12px; line-height: 17px; }
.pp-tick { margin: 0; }
.pp-danger { color: var(--danger); }
/* when the selection is on the right, the card moves left */
.pv-pop.on-left { right: auto; left: 12px; }
@media (max-width: 700px) {
  .pv-pop, .pv-pop.on-left { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-height: 52%; }
  .canvas-wrap.has-pop .canvas-hint, .ed-canvas-wrap.has-pop .canvas-hint { display: none; }
}

/* the edit card moves: drag its title bar */
.pp-head { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; margin: -4px -6px 0; padding: 4px 6px 0; border-radius: var(--radius-md); }
.pv-pop.is-dragging .pp-head { cursor: grabbing; }
.pv-pop.is-dragging { box-shadow: var(--shadow-pop); opacity: .96; }
.pp-grip { flex: none; width: 8px; height: 18px; margin-top: 2px; opacity: .55;
  background-image: radial-gradient(circle, var(--ink-muted) 1.2px, transparent 1.4px); background-size: 4px 6px; }
.pp-head:hover .pp-grip { opacity: 1; }
@media (max-width: 700px) { .pp-head { cursor: default; } .pp-grip { display: none; } }
/* right-click menu on the picture */
.pv-menu { min-width: 260px; }
.pv-menu .is-danger, .pv-menu .is-danger svg { color: var(--danger); }
.pv-menu button[aria-checked="true"] .k { color: var(--selection); }
.pv-menu button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Layout Editor: the key card, the legend typed on a key, the menu's counts ---------- */
.ed-pop { width: min(332px, calc(100% - 24px)); }
.ed-pop .pp-head b, .ed-pop .pp-head > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tablets: the canvas's zoom buttons show at the bottom right, and the card stops above them */
@media (max-width: 900px), (pointer: coarse) { .ed-pop:not(.is-moved) { max-height: calc(100% - 82px); } }
@media (max-width: 700px) { .ed-pop, .ed-pop.on-left { width: auto; } .ed-pop:not(.is-moved) { max-height: 52%; } }
.ed-card { gap: 0; }
.ed-card .cs { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.ed-card > .cs:first-child { border-top: 0; padding-top: 2px; }
.ed-card .cs-more > .cs { border-top: 0; padding: 4px 0 0; }
.ed-card > .cs-more { border-top: 1px solid var(--line); padding-top: 10px; }
.ed-card .cs-legend { gap: 6px; }
.cs-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cs-note { font-size: 11px; line-height: 14px; color: var(--ink-muted); text-align: right; }
.cs-main { display: grid; gap: 4px; }
.pp-legend { height: 40px; font: 700 18px/24px var(--font-ui); padding: 0 10px; }
.cs-more summary { cursor: pointer; font: 700 12.5px/20px var(--font-ui); color: var(--ink-muted); list-style: none; border-radius: var(--radius-sm); }
.cs-more summary:hover { color: var(--ink); }
.cs-more summary::-webkit-details-marker { display: none; }
.cs-more summary::before { content: "▸ "; }
.cs-more[open] summary::before { content: "▾ "; }
.cs-more summary small { font-weight: 400; font-size: 11px; }
.cs-legend .cs-more[open] > .legend-grid { margin-top: 6px; }
.cs-legend .cs-more[open] > .pp-note { margin-top: 6px; }
.pp-lgrid { gap: 3px; padding: 6px; }
.pp-lgrid input { height: 26px; font-size: 12px; }
.pp-lgrid input.is-main { border: 2px solid var(--brand-feather-deep); }
.pp-lgrid .front { padding-top: 4px; }
.pp-lgrid .front input { height: 22px; font-size: 10.5px; }
.pp-sw { gap: 5px; }
.pp-sw button { width: 22px; height: 22px; }
.ed-card .slider output { font-size: 11px; }
.cs-sliders { gap: 14px; }
.ed-card .slider input[type="range"] { margin: 0; height: 22px; }
.ed-card .pp-f > span small { display: block; }
.cs-rot { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.cs-rot.no-dial { grid-template-columns: minmax(0, 1fr); }
.cs-rot-f { display: grid; gap: 8px; }
.cs-rot.no-dial .cs-rot-f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-rot.no-dial .cs-rot-f .grid-2 { grid-column: span 2; }
.pp-dial { width: 96px; height: 96px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pp-dial:active { cursor: grabbing; }
.pp-dial:focus { outline: none; }
.pp-dial:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pp-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-ring { fill: var(--surface-sunken); stroke: var(--line-strong); stroke-width: 1.2; }
.dial-tick { stroke: var(--ink-muted); stroke-width: 1.2; opacity: .5; }
.dial-tick.is-major { stroke-width: 2; opacity: .9; }
.dial-cap { fill: var(--keycap); stroke: var(--brand-outline); stroke-width: 1.5; }
.dial-legend { stroke: #001634; stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dial-arm { stroke: var(--brand-feather-deep); stroke-width: 2.5; stroke-linecap: round; }
.dial-knob { fill: var(--brand-feather); stroke: var(--sticker-edge); stroke-width: 2; }
.pp-dial:hover .dial-knob, .pp-dial:focus-visible .dial-knob { fill: var(--brand-feather-deep); }
.ed-card .checks { gap: 6px 8px; }
.ed-card .check { font-size: 13px; }
.inline-legend { position: absolute; z-index: 7; text-align: center; font-family: var(--font-ui); font-weight: 700; color: #001634; background: #ffffff; border: 2px solid var(--brand-feather-deep); border-radius: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-feather) 35%, transparent), var(--shadow-pop); padding: 0 6px; outline: none; }
/* the right-click menu's "row of 5 keys": − and + change how many */
.ctx-count { display: flex; align-items: center; gap: 4px; }
.ctx-count > button[role] { flex: 1; min-width: 0; }
.menu .ctx-step { display: inline-flex; gap: 2px; flex: none; padding-right: 4px; }
.menu .ctx-step button { width: 26px; height: 26px; padding: 0; justify-content: center; font: 700 15px/1 var(--font-mono); border: 1px solid var(--line); background: var(--surface-sunken); }
.menu .ctx-step button:hover { background: var(--surface); border-color: var(--line-strong); }
.pv-menu button[role="menuitemcheckbox"] .k { font-weight: 700; }