/* The editor has one scrolling work area and a separate, always visible action bar. */
:root { --board-width:768px; --workspace-width:1920px; --ui-font:14px; --ui-small:12px; --ui-heading:16px; --key-font:14px; --key-small:11px; --palette-height:36px; --catalog-height:272px; --reset-width:112px; }
:root:not([data-theme=dark]) { --ink:#293649; --muted:#708095; --accent:#5075a5; --accent-soft:#e8f0fa; --line:#dce3ec; --surface:#fff; --control:#fff; --soft:#edf2f8; --hover:#f6f9fc; }
body.studio-app { height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:#f3f6fa; }
.app-header { min-height:64px; padding:0 32px; gap:32px; flex:none; background:var(--surface); }
.brand { font-size:19px; letter-spacing:-.5px; }
nav { display:flex; align-self:stretch; align-items:stretch; margin:0; gap:24px; overflow:visible; }
.nav-item { width:auto; height:auto; padding:0 4px; border-radius:0; font-size:var(--ui-font); gap:8px; color:var(--muted); }
.nav-item.active { color:var(--ink); background:transparent; }
.nav-item.active::before { display:block; inset:auto 0 -1px; height:2px; width:auto; background:var(--accent); border-radius:0; }
.nav-item svg { display:block; }
.nav-label { white-space:nowrap; }
.header-actions .history-button { width:28px; padding:0; min-height:28px; border:0; background:transparent; font-size:19px; }
#open-settings { background:transparent; }
.nav-item:disabled { opacity:1; color:var(--muted); cursor:not-allowed; }
.nav-item:disabled .nav-label,.nav-item:disabled svg { opacity:.5; }
.header-actions { align-items:center; gap:8px; margin-left:auto; }
.header-actions button { min-height:32px; padding:6px 10px; font-size:var(--ui-font); white-space:nowrap; }
#theme,#help { padding:6px; width:32px; min-height:32px; border:0; background:transparent; color:var(--muted); margin:0; }
#help { border:1px solid var(--line); border-radius:50%; width:24px; min-height:24px; padding:0; margin-left:4px; }
#theme svg { width:17px; height:17px; display:block; stroke:currentColor; fill:none; stroke-width:1.4; }#theme path { fill:currentColor; }
.connection { font-size:var(--ui-font); padding:0 12px; border-right:1px solid var(--line); gap:7px; }
.shell { flex:1; width:100%; max-width:none; min-height:0; display:block; }
main { height:100%; padding:0; display:flex; flex-direction:column; min-height:0; }
.editor-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 32px 24px; }
.heading { max-width:var(--workspace-width); margin:0 auto 16px; padding:0; min-height:32px; align-items:center; gap:16px; }
h1 { font-size:20px; line-height:32px; margin:0; letter-spacing:.5px; }
.session-note { margin:0; font-size:var(--ui-font); line-height:20px; }
#error { max-width:var(--workspace-width); margin:0 auto 16px; }
.workspace { max-width:var(--workspace-width); margin:auto; background:var(--surface); border-radius:12px; border:1px solid var(--line); overflow:clip; box-shadow:0 3px 12px #263c5410; }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; border-bottom:1px solid var(--line); }
#layers { display:flex; gap:4px; align-items:center; }
#layers button { display:flex; gap:8px; align-items:center; min-height:32px; min-width:56px; padding:6px 10px; background:transparent; border-color:transparent; color:var(--muted); font-size:var(--ui-font); }
#layers button .layer-number { font-variant-numeric:tabular-nums; font-size:var(--ui-font); opacity:.7; }
#layers button[aria-selected=true] { background:var(--accent-soft); border-color:#c4d5ea; color:var(--accent); }
#layers button[aria-selected=true] .layer-number { opacity:1; }

#keymap-panel { background:linear-gradient(180deg,var(--hover),var(--surface)); }
.keyboard-stage { padding:12px 24px 8px; overflow-x:auto; }
.keyboard-plane { width:100%; max-width:760px; margin-inline:auto; }

.keyboard-plane { position:relative; }
.keycap { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px; min-height:0; transform-origin:center; background:var(--control); border:1px solid #cbd5e1; border-bottom-width:3px; border-radius:6px; box-shadow:0 1px 2px #1e355011; font-size:var(--ui-font); line-height:1.2; }
.key-main { display:block; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.key-sub { font-size:7px; white-space:nowrap; color:var(--muted); order:-1; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.keycap[data-kind=encoderPush] { border-radius:50%; background:var(--soft); }
.keycap[data-selected=true] { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px #5075a51a; color:#315d92; }
.keycap[data-changed=true]::after { content:''; position:absolute; top:4px; right:4px; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.keycap[data-empty=true] { color:#a7b2c1; background:var(--hover); }
.encoder-strip { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:808px; margin:auto; padding:8px 24px 16px; }
.encoder-group { display:flex; gap:8px; align-items:center; justify-content:center; min-width:0; }
.encoder-side-label { display:none; }
.encoder-group>span { font-size:var(--ui-font); color:var(--muted); white-space:nowrap; margin-right:auto; }
.encoder-button { font-size:var(--ui-font); min-height:28px; padding:4px 8px; background:transparent; border-color:transparent; white-space:nowrap; }
.encoder-button:hover:not(:disabled) { border-color:var(--line); }
.encoder-button[data-selected=true],.pointer-key[data-selected=true] { border-color:var(--accent); background:var(--accent-soft); }
.encoder-button[data-changed=true] { text-decoration:underline dotted; text-underline-offset:4px; }
.key-editor { display:grid; grid-template-columns:176px minmax(0,1fr); border-top:1px solid var(--line); }
.selection-heading { display:flex; flex-direction:column; align-items:flex-start; padding:20px 24px; border-right:1px solid var(--line); background:var(--hover); min-width:0; }
.selection-heading .eyebrow { font-size:var(--ui-font); letter-spacing:.5px; }
.selected-key-face { width:48px; height:48px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; background:var(--surface); border:1px solid #c4d3e5; border-bottom-width:3px; border-radius:7px; color:var(--accent); margin:12px 0 8px; font-size:19px; }
.selected-key-face .key-sub { font-size:8px; }
.selection-heading h2 { font-size:var(--ui-font); font-weight:500; margin:0 0 4px; overflow-wrap:anywhere; }
#selected-position { font-size:var(--ui-font); line-height:18px; margin:0; }
#selected-original { font-size:var(--ui-font); line-height:18px; margin:4px 0 12px; }
#reset-key { margin-top:auto; padding:4px 0; min-height:24px; font-size:var(--ui-font); border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.assignment-panel { padding:0 24px 16px; min-width:0; }
.assignment-toolbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.assignment-hint { font-size:var(--ui-font); color:var(--muted); }
.section-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); }
.assignment-toolbar .section-tabs { border:0; }
.section-tabs [role=tab] { position:relative; min-height:44px; padding:12px 0; background:transparent; color:var(--muted); border:0; border-radius:0; font-size:var(--ui-font); }
.section-tabs [aria-selected=true] { color:var(--ink); }
.section-tabs [aria-selected=true]::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent); }
.catalog-toolbar { display:flex; gap:16px; justify-content:space-between; align-items:center; margin:12px 0 8px; }
.catalog-toolbar select { font-size:var(--ui-font); min-height:30px; padding:4px 28px 4px 8px; min-width:144px; }
.search-label { display:flex; align-items:center; gap:8px; max-width:240px; flex:1; background:var(--control); border:1px solid var(--line); border-radius:6px; padding:0 8px; }
.search-label svg { flex:none; width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.5; }
.search-label input { width:100%; min-width:0; padding:6px 0; font-size:var(--ui-font); border:0; background:transparent; color:var(--ink); outline-offset:2px; }
.key-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); align-content:start; gap:6px; height:172px; overflow:auto; padding:2px; margin:-2px; }
.key-catalog button { font-size:var(--ui-font); min-height:30px; padding:5px 8px; border-radius:5px; }
.key-catalog button[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.key-catalog[data-wide=true] { grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
.key-catalog.qwerty { display:block; height:auto; max-height:none; padding:0; margin:-2px; overflow-x:auto; }
.palette-row { display:grid; grid-template-columns:repeat(60,minmax(0,1fr)); min-width:520px; height:34px; }
.key-catalog .palette-key { padding:0 2px; min-height:0; margin:2px; font-size:var(--ui-font); border-bottom-width:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.palette-key[data-utility=true] { background:var(--hover); font-size:var(--ui-font); }
.catalog-help { font-size:var(--ui-font); line-height:18px; margin:0 0 8px; }.catalog-help:empty { display:none; }
.inline-label { display:flex; gap:16px; align-items:center; font-size:var(--ui-font); }.inline-label select { font-size:var(--ui-font); }
#pointing-page { padding:0 24px; }.settings-title { padding:20px 0 12px; }.settings-title h2 { font-size:14px; }
#pointer-keys { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 0; }
.pointer-key { display:flex; justify-content:space-between; align-items:center; min-height:64px; padding:16px; gap:16px; text-align:left; }
.pointer-key span { font-size:var(--ui-font); color:var(--muted); }.pointer-key strong { font-size:var(--ui-font); font-weight:500; }
.pointer-key[data-changed=true] span::after { content:' · 変更あり'; color:var(--accent); }
.action-form { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; margin:16px 0; }
.action-form>label,.code-form>label { display:grid; gap:6px; font-size:var(--ui-font); min-width:0; }
.action-form select { width:100%; min-width:0; font-size:var(--ui-font); min-height:36px; }
.action-form fieldset { grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; border:0; }
.action-form legend { font-size:var(--ui-font); padding:0 0 8px; }.action-form fieldset label { display:flex; align-items:center; gap:6px; font-size:var(--ui-font); padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--hover); }
.action-form input { accent-color:var(--accent); }
.action-result { grid-column:1/-1; display:flex; gap:16px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px; }
.action-result output { font-size:var(--ui-font); }.action-result button { font-size:var(--ui-font); min-height:32px; }
.code-disclosure { margin:0; font-size:var(--ui-font); }.code-disclosure summary { min-height:24px; }
.code-form { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:12px 0; }
.code-form input { padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--control); color:var(--ink); width:160px; }
.code-form button { font-size:var(--ui-font); min-height:34px; }.code-form p { flex-basis:100%; font-size:var(--ui-font); margin:0; }
.savebar { flex:none; position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; padding:12px 32px; border:0; border-top:1px solid var(--line); border-radius:0; margin:0; box-shadow:0 -2px 12px #243c5010; background:var(--surface); }
.save-description { font-size:var(--ui-font); gap:10px; }.buttons { grid-row:1/3; grid-column:2; flex-wrap:nowrap; justify-content:flex-end; gap:8px; }
.buttons button { min-height:34px; padding:7px 14px; font-size:var(--ui-font); white-space:nowrap; }.buttons .primary { min-width:112px; }
#status { grid-column:1; font-size:var(--ui-font); line-height:18px; min-height:18px; }
#change-review { margin:0 0 0 8px; font-size:var(--ui-font); line-height:20px; }
#change-review summary { min-height:20px; }
#change-review ul { position:absolute; bottom:calc(100% + 8px); left:24px; padding:16px 24px 16px 36px; margin:0; width:min(560px,calc(100vw - 48px)); max-height:40vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px #243c5020; font-size:var(--ui-font); line-height:24px; }
#help-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 64px); padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 20px 80px #14283c30; }
#help-dialog::backdrop { background:#1f314650; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--line); }.dialog-heading h2 { font-size:16px; font-weight:500; margin:0; }
#close-help { background:transparent; border:0; min-height:32px; padding:0; width:32px; font-size:22px; }
.help-content { padding:8px 24px 24px; }.help-content p { font-size:var(--ui-font); margin:16px 0; }.help-content h3 { font-size:var(--ui-font); margin-top:24px; }#vial { width:auto; font-size:var(--ui-font); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[data-theme=dark] body { background:#1b2330; }[data-theme=dark] .keycap { border-color:#536174; }[data-theme=dark] .keycap[data-selected=true] { border-color:var(--accent); color:var(--ink); }[data-theme=dark] .selected-key-face { border-color:#5c7697; }
@media(min-height:900px) and (min-width:1000px) { .keyboard-stage { padding-block:16px 8px; }.keyboard-plane { max-width:864px; }.keycap { font-size:14px; }.key-sub { font-size:8px; }.encoder-strip { max-width:912px; }.key-catalog .palette-key { font-size:var(--ui-font); }.palette-row { height:38px; } }
@media(max-width:1100px) { .app-header { gap:24px; padding-inline:20px; }nav { gap:16px; }.connection { padding:0 8px; }.editor-content { padding:16px 20px 20px; }#layers { width:100%; justify-content:space-between; }#layers button { min-width:0; padding:6px 8px; }.map-toolbar { padding:12px 16px; }.savebar { padding-inline:20px; } }
@media(max-width:850px) { .app-header { flex-wrap:wrap; gap:0; min-height:64px; padding-top:12px; }.header-actions { margin-bottom:12px; }.brand { margin-bottom:12px; }nav { order:3; width:100%; flex-basis:100%; height:44px; }.nav-item { padding:0 8px; height:44px; }.nav-item.active::before { display:block; }.connection { border:0; padding:0 8px; }.key-editor { grid-template-columns:144px minmax(0,1fr); }.selection-heading { padding:16px; }.assignment-panel { padding-inline:16px; }.assignment-hint { display:none; }.encoder-strip { gap:16px; }.encoder-group { gap:2px; }.encoder-button { padding-inline:4px; } }
@media(max-width:650px) { .app-header { padding-inline:16px; }.brand { font-size:17px; }.header-actions { gap:4px; }.connection { padding:0 6px; font-size:var(--ui-font); }.header-actions button { padding-inline:6px; font-size:var(--ui-font); }#theme { width:28px; }.editor-content { padding:16px 12px; }.heading { flex-direction:row; align-items:center; margin-bottom:12px; min-height:28px; }.heading h1 { font-size:18px; }.session-note { max-width:154px; text-align:right; font-size:var(--ui-font); line-height:16px; }
  #layers { overflow-x:auto; justify-content:flex-start; gap:4px; }#layers button { flex:none; gap:5px; }.map-toolbar { padding:8px 12px; }.keyboard-stage { padding:12px; }.keyboard-plane { min-width:660px; }.keyboard-plane { margin:0; }.keycap { font-size:var(--ui-font); }
  .encoder-strip { grid-template-columns:1fr; padding:8px 12px 12px; gap:6px; }.encoder-group { justify-content:flex-start; }.encoder-group>span { margin-right:8px; }.encoder-side-label { display:inline; }.encoder-button { padding-inline:8px; }
  .key-editor { grid-template-columns:1fr; }.selection-heading { display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:12px; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }.selection-heading>.eyebrow { display:none; }.selected-key-face { width:40px; height:40px; margin:0; grid-column:1; grid-row:1/4; font-size:17px; }.selection-heading h2 { grid-column:2; font-size:var(--ui-font); margin:0; }#selected-position { grid-column:2; font-size:9px; }#selected-original { display:none; }#reset-key { grid-column:3; grid-row:1/4; margin:0; font-size:9px; }
  .assignment-panel { padding-inline:12px; }.catalog-toolbar { gap:8px; }.catalog-toolbar select { min-width:124px; max-width:144px; font-size:var(--ui-font); }.search-label { max-width:none; }.search-label input { font-size:var(--ui-font); }.key-catalog:not(.qwerty) { grid-template-columns:repeat(3,minmax(0,1fr)); }.key-catalog[data-wide=true]:not(.qwerty) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #pointing-page { padding-inline:16px; }.settings-title { padding-top:16px; }.inline-label { flex-wrap:wrap; gap:8px; }.inline-label select { max-width:100%; }#pointer-keys { grid-template-columns:1fr; gap:8px; }.pointer-key { min-height:52px; }
  .action-form { grid-template-columns:1fr; gap:12px; }.action-result { flex-wrap:wrap; }.action-result button { margin-left:auto; }
  .savebar { padding:10px 16px; grid-template-columns:1fr; gap:6px; }.buttons { grid-column:1; grid-row:2; display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:4px; width:100%; }.buttons button { padding:6px; font-size:var(--ui-font); min-width:0; }.buttons .primary { min-width:0; }#status { grid-row:3; line-height:16px; font-size:9px; }.save-description { font-size:var(--ui-font); }
}
/* Navigation already names the workspace. Keep its h1 for assistive technology
   without repeating a large page heading above the actual editor. */
.heading { position:absolute; width:1px; height:1px; min-height:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; padding:0; }
.editor-content { padding-block:16px; }
.map-toolbar { padding-block:8px; }
.keyboard-stage { padding-block:8px; }
.keyboard-plane { max-width:var(--board-width); }

.encoder-strip { padding-block:4px 8px; max-width:calc(var(--board-width) + 48px); }
.encoder-button { min-height:24px; }
.assignment-toolbar .section-tabs [role=tab] { min-height:36px; padding-block:8px; }
.catalog-toolbar { margin:8px 0 6px; }
.catalog-toolbar select { min-height:28px; padding-block:3px; }
.search-label { height:28px; }
.palette-row { height:28px; }
.assignment-panel { padding-bottom:8px; }
@media(min-height:900px) and (min-width:1000px) { .keyboard-plane { max-width:864px; }.keyboard-stage { padding-block:20px 16px; }.palette-row { height:34px; }.assignment-panel { padding-bottom:20px; }.catalog-toolbar { margin-block:12px; } }
@media(max-width:650px) { .keyboard-plane { max-width:none; }.palette-row { height:34px; }.editor-content { padding-block:12px; }.key-catalog { height:172px; } }

.keycap[data-long=true] .key-main { font-size:var(--ui-font); }

@media(min-height:780px) and (min-width:851px) { .palette-row { height:32px; } }

.board-view-controls { display:none; }
@media(max-width:650px) {
  .board-view-controls { display:flex; align-items:center; gap:8px; padding:8px 12px 0; }
  .board-view-controls span { font-size:var(--ui-font); color:var(--muted); margin-right:auto; }
  .board-view-controls button { font-size:var(--ui-font); padding:4px 12px; min-height:28px; }
}

/* Shared tools use the same column alignment and remain separate from the key canvas. */
.assignment-dialog.settings-dialog { width:min(960px,calc(100vw - 32px)); }
.settings-tabs { padding:0 24px; margin:0; gap:24px; }
.settings-body { padding:0 24px 24px; }
.settings-intro { margin:20px 0; font-size:var(--ui-font); line-height:1.8; color:var(--muted); }
.settings-help { font-size:var(--ui-font); line-height:1.8; color:var(--muted); }
.settings-body h3 { font-size:var(--ui-font); font-weight:500; margin:0 0 8px; }
.tuning-row { display:grid; grid-template-columns:minmax(0,1fr) 144px 112px; gap:24px; align-items:center; min-height:120px; border-top:1px solid var(--line); }
.tuning-row label { font-size:14px; font-weight:500; }.tuning-row p,.backup-row p { font-size:var(--ui-font); color:var(--muted); line-height:1.8; margin:8px 0 0; }
.tuning-row select { width:100%; font-size:var(--ui-font); }.tuning-row .reset { padding:0; min-height:32px; }
.combo-layout { display:grid; grid-template-columns:152px minmax(0,1fr); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.combo-slots { border-right:1px solid var(--line); background:var(--hover); }
.combo-slots button { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; min-height:56px; padding:8px 12px; font-size:var(--ui-font); background:transparent; }
.combo-slots button:last-child { border-bottom:0; }.combo-slots button[aria-pressed=true] { color:var(--accent); background:var(--accent-soft); box-shadow:inset 2px 0 var(--accent); }.combo-slots small { font-size:var(--ui-font); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#combo-form { padding:24px; min-width:0; }.combo-triggers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 24px; }
.combo-triggers label { display:flex; flex-direction:column; gap:8px; font-size:var(--ui-font); color:var(--muted); }.combo-triggers select { width:100%; font-size:var(--ui-font); min-width:0; }
.combo-output-label { display:block; font-size:var(--ui-font); color:var(--muted); margin-bottom:8px; }#combo-output { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--control); color:var(--ink); padding:10px 12px; font-size:var(--ui-font); }
.settings-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }.settings-actions button,.backup-row button { font-size:var(--ui-font); }
.backup-row { display:grid; grid-template-columns:minmax(0,1fr) 160px; align-items:center; gap:24px; min-height:104px; border-top:1px solid var(--line); }
.file-picker { position:relative; display:flex; min-height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; font-size:var(--ui-font); cursor:pointer; overflow:hidden; }.file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }.file-picker:has(input:disabled) { opacity:.42; cursor:not-allowed; }.file-picker:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.import-review { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--hover); margin-top:16px; }.import-review ul { padding-left:20px; max-height:180px; overflow:auto; font-size:var(--ui-font); line-height:1.9; overflow-wrap:anywhere; }
.settings-status { padding:12px 24px; margin:0; border-top:1px solid var(--line); background:var(--hover); font-size:var(--ui-font); line-height:1.8; color:var(--muted); }
#settings-error { color:#a33646; font-size:var(--ui-font); line-height:1.8; overflow-wrap:anywhere; }[data-theme=dark] #settings-error { color:#f3a4b1; }
@media(max-width:650px) {
  .settings-tabs { padding-inline:16px; gap:20px; }.settings-body { padding-inline:16px; }.settings-status { padding-inline:16px; }
  .tuning-row { grid-template-columns:minmax(0,1fr) 120px; gap:16px; padding:20px 0; }.tuning-row>div { grid-column:1/-1; }.tuning-row select { grid-column:1; }.tuning-row .reset { grid-column:2; }
  .combo-layout { grid-template-columns:1fr; }.combo-slots { display:flex; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }.combo-slots button { width:96px; flex:none; border-bottom:0; border-right:1px solid var(--line); }.combo-slots button[aria-pressed=true] { box-shadow:inset 0 -2px var(--accent); }#combo-form { padding:16px; }.combo-triggers { gap:12px; }
  .backup-row { grid-template-columns:1fr; gap:16px; padding:20px 0; }.backup-row button,.file-picker { width:100%; }.settings-actions button { flex:1; }
}

.selected-key-face[data-long=true] .key-main { font-size:var(--ui-font); }
.section-tabs [role=tab]:focus-visible,.nav-item:focus-visible { outline-offset:-4px; }

/* The footer reports automatic apply and offers reload or a demo reset. */
.savebar .buttons { display:flex; min-height:34px; }
@media(max-width:650px) { .savebar .buttons { grid-row:2; width:auto; justify-content:flex-end; flex-wrap:wrap; } }

/* Vial's key categories, with a full keyboard and a shared alignment grid. */
.selected-code { font-size:var(--ui-font); line-height:16px; color:var(--accent); overflow-wrap:anywhere; margin:4px 0; }
.catalog-tabs { display:flex; gap:20px; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.catalog-tabs [role=tab] { flex:none; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:var(--ui-font); padding:12px 0 10px; min-height:40px; border-bottom:2px solid transparent; }
.catalog-tabs [aria-selected=true] { color:var(--ink); border-bottom-color:var(--accent); }
.catalog-tabs [role=tab]:focus-visible { outline-offset:-2px; }
.quick-keys { display:flex; gap:6px; }
.quick-keys button { font-size:var(--ui-font); min-height:28px; padding:4px 8px; white-space:nowrap; }
.vial-catalog { --palette-row:28px; height:204px; overflow:auto; padding:2px; margin:-2px; scrollbar-width:thin; }
.vial-catalog button[aria-pressed=true],.quick-keys [aria-pressed=true] { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.full-keyboard { display:grid; grid-template-columns:minmax(0,15fr) minmax(0,3fr) minmax(0,4fr); gap:12px; min-width:720px; }
.full-keyboard .palette-row { height:var(--palette-row); min-width:0; }
.aux-keyboard { display:grid; grid-template-rows:repeat(6,var(--palette-row)); }
.navigation { grid-template-columns:repeat(3,minmax(0,1fr)); }
.numpad { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vial-catalog .palette-key { min-height:0; padding:0 2px; margin:2px; font-size:var(--ui-font); border-radius:5px; border-bottom-width:2px; white-space:nowrap; }
.extra-keys { font-size:var(--ui-font); margin:8px 2px; color:var(--muted); }
.extra-keys summary { padding:4px 0; }
.catalog-help { margin:8px 0 0; font-size:var(--ui-font); line-height:16px; color:var(--muted); }
#catalog-empty { font-size:var(--ui-font); color:var(--muted); }
.catalog-group { margin:0 0 16px; }
.catalog-group h3 { margin:4px 0 8px; font-size:var(--ui-font); font-weight:400; color:var(--muted); }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px; }
.catalog-choice { display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; min-height:48px; padding:6px 8px; border-radius:5px; min-width:0; }
.catalog-choice strong { font-size:var(--ui-font); font-weight:500; overflow-wrap:anywhere; }
.catalog-choice span { font-size:var(--ui-font); color:var(--muted); overflow-wrap:anywhere; }
.layer-picker-row { display:grid; grid-template-columns:112px repeat(7,minmax(0,1fr)); gap:4px; min-width:640px; padding:0; border-bottom:1px solid var(--line); }
.layer-action-label { display:flex; align-items:center; gap:8px; font-size:var(--ui-font); }
.layer-action-label strong { width:28px; font-weight:500; }.layer-action-label span { font-size:9px; color:var(--muted); }
.layer-picker-row .palette-key,.layer-picker-row .builder-choice { height:24px; min-height:24px; margin:0; padding:0 4px; }
.builder-choice { min-height:32px; font-size:var(--ui-font); padding:4px; white-space:nowrap; border-radius:5px; }
.modifier-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; min-width:672px; }
.modifier-grid .palette-key { min-height:32px; font-size:9px; }
.assignment-dialog { width:min(736px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 20px 80px #14283c30; }
.assignment-dialog::backdrop { background:#1f314650; backdrop-filter:blur(3px); }
.dialog-close { background:transparent; border:0; min-height:32px; padding:0; width:32px; font-size:22px; }
.dialog-content { padding:16px 24px 24px; }.dialog-content>p { font-size:var(--ui-font); color:var(--muted); margin:0 0 16px; }
.dialog-content .action-form { margin:0; }.action-result output { font-size:var(--ui-font); overflow-wrap:anywhere; }.action-result button { flex:none; }
.dialog-content .code-form { padding:0; }.code-form>label { flex:1; }#raw-code { width:100%; font-size:var(--ui-font); }#code-error { color:#a33646; }
@media(min-height:900px) and (min-width:1000px) { .keyboard-plane { max-width:var(--board-width); }.keyboard-stage { padding-block:8px; }.vial-catalog { --palette-row:32px; height:224px; }.assignment-panel { padding-bottom:8px; } }
@media(max-width:850px) { .catalog-tabs { gap:16px; }.catalog-toolbar { flex-wrap:wrap; gap:8px; }.search-label { max-width:none; min-width:160px; }.vial-catalog { height:244px; } }
@media(max-width:650px) { .selected-code { grid-column:2; grid-row:3; margin:0; font-size:9px; }.catalog-tabs { gap:16px; }.catalog-tabs [role=tab] { padding-block:10px 8px; }.quick-keys { width:100%; }.quick-keys button { flex:1; }.search-label { width:100%; flex-basis:100%; }.catalog-help { min-height:32px; }.dialog-heading { padding-inline:16px; }.dialog-content { padding:16px; }.action-result { align-items:flex-start; } }

/* Keep the three pointing-device tabs together, including on narrow screens. */
.app-header nav { gap:16px; }
@media(max-width:1180px) {
  .app-header { flex-wrap:wrap; gap:0; padding-top:12px; }
  .brand,.header-actions { margin-bottom:12px; }
  .app-header nav { order:3; width:100%; flex-basis:100%; height:44px; }
  .nav-item { height:44px; padding-inline:8px; }
}
@media(max-width:650px) {
  .app-header nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
  .app-header .nav-item { justify-content:center; gap:0; font-size:var(--ui-font); padding:4px 0; min-width:0; }
  .nav-item svg { display:none; }
  .brand-logo { width:76px; }
}

/* Gestures have their own small action picker; the full keymap editor stays in Keymap. */
.gesture-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }

.gesture-heading p { font-size:var(--ui-font); line-height:24px; margin:0; }
.gesture-switch { display:flex; align-items:center; gap:12px; flex:none; border:0; background:transparent; font-size:var(--ui-font); }
.switch-track { display:block; width:40px; height:24px; padding:3px; background:var(--line); border-radius:20px; }
.switch-track::after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px #19304c22; transition:transform 120ms; }
.gesture-switch[aria-checked=true] .switch-track { background:var(--accent); }
.gesture-switch[aria-checked=true] .switch-track::after { transform:translateX(16px); }
.gesture-layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:48px; padding:16px 0; }
.gesture-controls { border-right:1px solid var(--line); padding-right:32px; }
.gesture-control { padding:8px 0 24px; }
.gesture-control+.gesture-control { border-top:1px solid var(--line); padding:24px 0 0; }
.gesture-control h3,.gesture-control>label { font-size:var(--ui-font); font-weight:500; margin:0; display:block; }
.gesture-control .gesture-binding { font-size:20px; line-height:32px; color:var(--ink); margin:16px 0; overflow-wrap:anywhere; }
.gesture-binding[data-empty=true] { color:var(--muted); }
.gesture-control button { font-size:var(--ui-font); min-height:40px; padding:8px 16px; }
.gesture-control select { display:block; width:100%; font-size:var(--ui-font); margin-top:16px; }
.gesture-help { font-size:var(--ui-font); line-height:20px; margin:12px 0 0; }


.gesture-directions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,88px); gap:8px; }
.gesture-direction { display:grid; grid-template-columns:24px minmax(0,1fr); align-content:center; column-gap:8px; row-gap:2px; text-align:left; min-width:0; padding:12px; background:var(--hover); }
.gesture-direction[data-direction=up] { grid-column:2; grid-row:1; }
.gesture-direction[data-direction=left] { grid-column:1; grid-row:2; }
.gesture-direction[data-direction=right] { grid-column:3; grid-row:2; }
.gesture-direction[data-direction=down] { grid-column:2; grid-row:3; }
.gesture-arrow { grid-row:1/3; align-self:center; color:var(--accent); font-size:24px; }

.gesture-direction strong { font-size:var(--ui-font); font-weight:500; overflow-wrap:anywhere; }
.gesture-shortcut { font-size:var(--ui-font); color:var(--muted); overflow-wrap:anywhere; }

.gesture-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 0; border-top:1px solid var(--line); }
.gesture-footer p { margin:0; font-size:var(--ui-font); line-height:20px; }
.gesture-footer button { border:0; background:transparent; color:var(--muted); font-size:var(--ui-font); padding:8px 0; flex:none; }
.gesture-preset-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.gesture-preset-heading h3 { margin:0; font-size:var(--ui-font); font-weight:500; }
.gesture-preset-heading label,.gesture-trigger-toolbar>label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:var(--ui-font); }
.gesture-preset-heading select,.gesture-trigger-toolbar select { min-height:32px; padding:4px 8px; font-size:var(--ui-font); }
.gesture-preset-group { margin:16px 0; }
.gesture-preset-group h4 { margin:0 0 8px; color:var(--muted); font-size:var(--ui-font); font-weight:400; }
.gesture-preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gesture-preset { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; min-height:48px; font-size:var(--ui-font); text-align:left; }
.gesture-preset small { font-size:var(--ui-font); color:var(--muted); }
.gesture-preset[aria-pressed=true],.gesture-clear[aria-pressed=true],.gesture-trigger-modes [aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.gesture-clear { width:100%; margin-bottom:16px; font-size:var(--ui-font); }
.gesture-custom { margin:0; padding:16px 0 0; border-top:1px solid var(--line); }
.gesture-custom summary { color:var(--ink); font-size:var(--ui-font); }
#gesture-custom-form { display:grid; gap:16px; margin:16px 0; }
#gesture-modifiers { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
#gesture-modifiers legend { padding:0 0 8px; font-size:var(--ui-font); }
#gesture-modifiers label { display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:8px 12px; border-radius:6px; color:var(--ink); }
#gesture-modifiers label:has(:checked) { border-color:var(--accent); background:var(--accent-soft); }
#gesture-custom-form input { accent-color:var(--accent); }
.gesture-custom-key { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; font-size:var(--ui-font); }
.gesture-custom-key select { width:100%; min-width:0; }
.gesture-right-mods { grid-column:2; display:flex; align-items:center; gap:8px; font-size:var(--ui-font); color:var(--muted); }
.gesture-custom-result { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:16px; font-size:var(--ui-font); }
.gesture-custom-result output { overflow-wrap:anywhere; }.gesture-custom-result button { flex:none; font-size:var(--ui-font); }
.gesture-dialog-note { margin:16px 0 0; font-size:var(--ui-font); line-height:20px; color:var(--muted); }
.dialog-content>.gesture-dialog-note { margin:16px 0 0; }
.gesture-dialog-error { color:#a33646; font-size:var(--ui-font); line-height:20px; }
.gesture-trigger-dialog { width:min(1120px,calc(100vw - 32px)); }
.gesture-trigger-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.gesture-trigger-modes { display:flex; gap:8px; }
.gesture-trigger-modes button { font-size:var(--ui-font); }
.gesture-keyboard-stage { padding:24px 4px; overflow-x:auto; }
#gesture-keyboard { max-width:none; min-width:768px; width:100%; margin:0; }
#gesture-keyboard .keycap { font-size:var(--ui-font); }
.gesture-trigger-result { border-top:1px solid var(--line); padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.gesture-trigger-result strong { font-weight:500; font-size:16px; }
.gesture-trigger-result p { margin:8px 0 0; }
.gesture-trigger-result>button { flex:none; font-size:var(--ui-font); }
.gesture-board-nav { display:none; }
@media(max-width:1000px) {
  .gesture-layout { grid-template-columns:minmax(176px,1fr) minmax(0,2fr); gap:24px; }
  .gesture-controls { padding-right:24px; }
  .gesture-direction { grid-template-columns:16px minmax(0,1fr); padding:8px; gap:4px; }
  .gesture-arrow { font-size:20px; }
}
@media(max-width:700px) {
  .gesture-heading { padding:16px 0; gap:8px; align-items:flex-start; }
  .gesture-heading p { font-size:var(--ui-font); line-height:20px; }
  .gesture-switch { gap:8px; padding:0; min-height:32px; font-size:var(--ui-font); }
  .gesture-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .gesture-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; border:0; padding:0; }
  .gesture-control,.gesture-control+.gesture-control { border:0; padding:0; }
  .gesture-control .gesture-binding { font-size:16px; line-height:24px; margin:12px 0; }
  .gesture-control select { margin-top:12px; }
  .gesture-help { margin-top:8px; }
  .gesture-directions { grid-template-rows:repeat(3,96px); gap:8px; }
  .gesture-direction { grid-template-columns:1fr; text-align:center; justify-items:center; gap:2px; }
  .gesture-arrow { grid-row:auto; font-size:18px; line-height:20px; }
  .gesture-direction strong { font-size:var(--ui-font); }.gesture-shortcut { font-size:9px; }

  .gesture-footer { gap:16px; align-items:flex-start; }
  .gesture-preset { flex-direction:column; align-items:flex-start; }
  .gesture-preset-heading { gap:8px; }.gesture-preset-heading select { max-width:144px; }
  .gesture-trigger-result { align-items:flex-start; flex-direction:column; }.gesture-trigger-result>button { width:100%; }
  .gesture-board-nav { display:flex; align-items:center; gap:8px; padding-top:16px; }.gesture-board-nav span { flex:1; font-size:var(--ui-font); color:var(--muted); }.gesture-board-nav button { font-size:var(--ui-font); min-height:32px; padding:4px 8px; }
}

/* Review E: recovery controls stay visible, aligned on the shared 8px tracks. */
:root:not([data-theme=dark]) { --muted:#596b82; }
.key-editor { grid-template-columns:256px minmax(0,1fr); }
.selection-heading { padding:16px; }
.selection-title { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
.selection-title #selected-value { margin:0; }
.selection-title .eyebrow { font-size:var(--ui-font); white-space:nowrap; }
#reset-key { margin:0; padding:8px 0; min-height:32px; font-size:var(--ui-font); white-space:nowrap; }
#selected-position,#selected-original { font-size:var(--ui-font); line-height:20px; }
#selected-original { margin-block:8px; }
.text-link { padding:0; border:0; background:transparent; color:var(--accent); font-size:var(--ui-font); line-height:20px; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.shortcut-os-label { display:flex; align-items:center; gap:8px; font-size:var(--ui-font); white-space:nowrap; }
.shortcut-os-label select { min-width:0; width:112px; font-size:var(--ui-font); }
.catalog-toolbar { flex-wrap:wrap; gap:8px 16px; margin-block:8px; }
.search-label { min-width:200px; max-width:none; }
.search-label input { font-size:var(--ui-font); }
.catalog-tabs { gap:16px; }
.catalog-grid { gap:8px; }
.catalog-choice { padding:8px; }
.catalog-choice strong { font-size:var(--ui-font); }
.catalog-choice span { font-size:var(--ui-font); }
.keycap .key-main { white-space:normal; text-overflow:clip; overflow-wrap:anywhere; line-height:1.2; }
.keycap[data-long=true] .key-main { font-size:var(--ui-font); }
.savebar { gap:8px 24px; padding-block:16px; }
.savebar .buttons { grid-row:1 / span 3; }
.change-feedback { grid-column:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; font-size:var(--ui-font); line-height:20px; }
#change-summary { overflow-wrap:anywhere; }
#undo-change,#settings-undo { min-height:32px; padding:4px 16px; font-size:var(--ui-font); flex:none; }
#status { grid-column:1; grid-row:auto; font-size:var(--ui-font); line-height:20px; color:var(--muted); }
.settings-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:16px 24px; border-top:1px solid var(--line); background:var(--hover); }
.settings-feedback .settings-status { flex:1; min-width:160px; border:0; padding:0; font-size:var(--ui-font); }
.settings-help,.import-review ul { font-size:var(--ui-font); }
.import-review { padding:16px; }
#combo-gesture-note { font-size:var(--ui-font); line-height:24px; }
#combo-gesture-note button { font-size:var(--ui-font); }
.gesture-bindings { display:grid; gap:8px; margin-block:16px; }
.gesture-binding-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding-bottom:8px; border-bottom:1px solid var(--line); }
.gesture-binding-name { display:flex; flex-direction:column; gap:4px; min-width:0; }
.gesture-binding-name strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.gesture-binding-name span { font-size:var(--ui-font); color:var(--muted); }
.gesture-binding-row button { padding:4px 8px; min-height:32px; }
.gesture-help,.gesture-footer p,.gesture-dialog-note { font-size:var(--ui-font); line-height:24px; }

.gesture-restore-choice { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,1fr); gap:16px; align-items:center; margin-bottom:16px; padding:16px; background:var(--hover); border:1px solid var(--line); border-radius:8px; font-size:var(--ui-font); }
.gesture-restore-choice select { width:100%; min-width:0; font-size:var(--ui-font); }
.gesture-remove-changes { padding-left:24px; font-size:var(--ui-font); line-height:24px; }
.single-key-effect { padding:8px 16px; border-left:2px solid var(--accent); background:var(--accent-soft); color:var(--ink); }
@media(max-width:1680px) {
  .app-header { flex-wrap:wrap; gap:0; padding:16px 32px 0; }
  .brand,.header-actions { margin-bottom:16px; }
  .app-header nav { order:3; width:100%; flex-basis:100%; height:40px; }
  .nav-item { height:40px; }
}
@media(max-width:850px) {
  .app-header { padding-inline:16px; }
  .header-actions { flex-wrap:wrap; justify-content:flex-end; }
  .key-editor { grid-template-columns:1fr; }
  .selection-heading { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:0 16px; padding:8px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .selection-title { grid-column:1 / -1; grid-row:1; }
  .selected-key-face { grid-column:1; grid-row:2 / span 3; margin:0; }
  .selection-heading h2 { grid-column:2; grid-row:2; margin:0; }
  #selected-position { grid-column:2; grid-row:3; font-size:var(--ui-font); }
  #selected-code { grid-column:2; grid-row:4; margin:0; }
  #selected-original { display:none; }
  #selected-gesture-link { grid-column:2 / -1; padding-top:8px; }
  .selection-title #reset-key { grid-column:auto; grid-row:auto; font-size:var(--ui-font); }
}
@media(max-width:650px) {
  .header-actions { width:100%; margin-left:0; justify-content:flex-start; gap:8px; }
  .app-header .brand { margin-bottom:8px; }
  .header-actions button { font-size:var(--ui-font); }
  .savebar { padding:16px; gap:8px; }
  .savebar .buttons { grid-column:1; grid-row:auto; }
  #status { grid-row:auto; }
  .gesture-controls { grid-template-columns:1fr; }
  .gesture-control+.gesture-control { padding-top:16px; border-top:1px solid var(--line); }
  .gesture-restore-choice { grid-template-columns:1fr; }
  .settings-feedback { padding:16px; }
}

.header-utilities { display:flex; align-items:center; gap:8px; }
@media(max-width:1680px) { .header-utilities { margin:0 0 16px 8px; } }
@media(max-width:650px) {
  .app-header { display:grid; grid-template-columns:1fr auto; gap:0; }
  .app-header .brand { grid-column:1; grid-row:1; }
  .header-utilities { grid-column:2; grid-row:1; margin:0 0 8px; }
  .header-actions { grid-column:1 / -1; grid-row:2; margin-bottom:8px; gap:4px; }
  .app-header nav { grid-column:1 / -1; grid-row:3; }
}
@media(max-width:650px) {
  .gesture-layout { gap:16px; }
  .gesture-controls { display:contents; }
  .gesture-control:first-child { order:1; }
  .gesture-map-section { order:2; }
  .gesture-control+.gesture-control { order:3; }
}

/* Common reading sizes and aligned controls for the everyday editing flow. */
.welcome { max-width:var(--workspace-width); margin:auto; min-height:360px; padding:64px 48px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
[data-ready=false] .header-actions>button:not(#disconnect),[data-ready=false] .savebar .buttons { display:none; }

.welcome h2 { margin:0; font-size:24px; font-weight:500; line-height:32px; }
.welcome p { max-width:560px; font-size:14px; margin:16px 0; }
.welcome-actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.welcome .welcome-note { font-size:var(--ui-font); margin:16px 0 0; }
.tutorial-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--accent); font-size:var(--ui-font); text-underline-offset:4px; }
.welcome>.tutorial-link { margin-top:16px; }
.header-actions button,.connection { font-size:var(--ui-font); }
.header-actions .history-button { width:32px; min-height:32px; }
.history-button svg { display:block; width:16px; height:16px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#layers button,.encoder-group>span,.encoder-button { font-size:var(--ui-font); }
#layers button { padding-inline:8px; }
.key-sub { font-size:9px; line-height:12px; }
.keycap[data-long=true] { padding-inline:1px; }
.keycap[data-long=true] .key-main { font-size:var(--ui-font); }
.selection-heading .selected-key-face { display:none; }
.selection-heading h2 { font-size:20px; line-height:28px; margin:16px 0 8px; }
#selected-behavior { white-space:pre-line; font-size:var(--ui-font); line-height:24px; margin:8px 0; }
.selected-details { font-size:var(--ui-font); color:var(--muted); margin-top:8px; width:100%; }
.selected-details summary { cursor:pointer; padding:4px 0; }
.selection-heading #edit-action { width:100%; margin-top:16px; min-height:40px; padding:8px; font-size:var(--ui-font); }
.selected-details #open-any { min-height:32px; margin-top:8px; padding:4px 8px; font-size:var(--ui-font); }
.selected-code { font-size:var(--ui-font); line-height:20px; }
.catalog-tabs [role=tab] { font-size:var(--ui-font); min-height:40px; padding-block:8px; }
.catalog-tabs { gap:16px; }
.catalog-toolbar { gap:8px 16px; margin-block:8px; }
.quick-keys { gap:8px; flex-wrap:wrap; }
.quick-keys button,.search-label input,.catalog-toolbar select { font-size:var(--ui-font); min-height:32px; }
.search-label { height:32px; }
.vial-catalog { --palette-row:var(--palette-height); height:var(--catalog-height); }
.vial-catalog .palette-key { font-size:var(--ui-font); }
.full-keyboard { min-width:920px; gap:16px; }
.catalog-help,.catalog-group h3,.catalog-choice span,.extra-keys { font-size:var(--ui-font); line-height:20px; }
.catalog-choice { min-height:56px; gap:4px; }
.catalog-choice strong { font-size:var(--ui-font); }
.catalog-grid { grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
.layer-picker-row { min-width:720px; grid-template-columns:152px repeat(7,minmax(0,1fr)); gap:8px; padding-block:4px; }
.layer-action-label span,.layer-action-label,.builder-choice,.modifier-grid .palette-key { font-size:var(--ui-font); }
.modifier-grid { min-width:800px; gap:8px; }
#fields { border-top:1px solid var(--line); }
#pointer-basic #fields { border-top:0; }

.range-marks { position:absolute; top:32px; left:12px; right:12px; height:6px; pointer-events:none; }
.range-tick { position:absolute; left:var(--tick-position); height:4px; width:1px; background:var(--range); transform:translateX(-50%); }
.range-tick[data-default=true] { height:6px; width:2px; background:var(--accent); }
.range-ends { font-size:var(--ui-font); line-height:20px; }
.range-default { position:absolute; left:var(--tick-position); transform:translateX(-50%); color:var(--accent); }
.range-placeholder p { font-size:var(--ui-font); line-height:24px; margin:0 0 8px; }
.range-placeholder .text-link { min-height:24px; }
#field-aml .range-placeholder { padding-right:16px; }
.pointer-key span,.pointer-key strong,.inline-label,.section-tabs [role=tab],.settings-title .compatibility-note { font-size:var(--ui-font); }
.gesture-heading { align-items:flex-start; }
.gesture-heading .gesture-ready-hint { color:var(--accent); margin-top:8px; }
.gesture-switch { min-height:40px; padding:8px; }
.gesture-switch:disabled { opacity:.7; }
.gesture-shortcut,.gesture-preset small,.gesture-preset-group h4,.gesture-preset-heading label,.gesture-preset-heading select { font-size:var(--ui-font); }
.gesture-directions { grid-template-rows:repeat(3,minmax(112px,auto)); }
.gesture-direction { padding:8px; }
.gesture-control { padding-bottom:16px; }
.gesture-control+.gesture-control { padding-top:16px; }
.gesture-layout { gap:32px; }
.gesture-controls { padding-right:32px; }
.preset-name { display:flex; flex-direction:column; gap:4px; }
.preset-selected { font-size:var(--ui-font); color:var(--accent); }
.gesture-preset:not([aria-pressed=true]):hover,.gesture-clear:not([aria-pressed=true]):hover { background:var(--surface); border-color:var(--accent); }
.gesture-preset[aria-pressed=true]:hover,.gesture-clear[aria-pressed=true]:hover { background:var(--accent-soft); border-color:var(--accent); }
.action-form>label,.action-form legend,.action-form fieldset label,.dialog-content>p,.code-form p,.help-content p,.settings-intro,.settings-actions button,.backup-row button,.file-picker,.tuning-row p,.backup-row p,.combo-triggers label,.combo-output-label { font-size:var(--ui-font); }
.action-result output { display:block; font-size:16px; line-height:24px; }
.action-result .selected-code { display:block; margin-top:8px; color:var(--muted); }
.action-result button { font-size:var(--ui-font); min-height:40px; }
.assignment-dialog[open],#help-dialog[open] { display:flex; flex-direction:column; max-height:calc(100dvh - 48px); overflow:hidden; }
.dialog-heading,.settings-tabs,.settings-feedback { flex:none; }
.dialog-content,.settings-body,.help-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.assignment-target { margin-bottom:24px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--hover); font-size:var(--ui-font); color:var(--muted); line-height:24px; }
.assignment-target p { display:flex; gap:16px; margin:0; align-items:baseline; }
.assignment-target strong { font-size:14px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.action-form>label,.code-form>label { gap:8px; }
.action-form select { min-height:40px; }
.action-form fieldset label { min-height:40px; padding:8px; gap:8px; }
#action-error { grid-column:1 / -1; margin:0; font-size:var(--ui-font); color:#a33646; }
[data-theme=dark] #action-error,[data-theme=dark] #code-error { color:#f2a6b1; }
.help-technical { border-top:1px solid var(--line); padding-block:16px; font-size:var(--ui-font); }
.help-technical summary { cursor:pointer; }
.help-content h3 { margin-top:16px; }
.savebar { padding-block:12px; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.save-description { min-height:24px; grid-column:1; grid-row:1; }
.savebar .change-feedback { grid-column:2; grid-row:1; min-width:0; }
.savebar .buttons { grid-column:3; grid-row:1 / span 2; }
.savebar #status { grid-column:1 / 3; grid-row:2; }
.savebar #status:empty { display:none; }
.savebar:has(.change-feedback[hidden]) #status { grid-column:2; grid-row:1; }
#change-summary { max-height:48px; overflow:auto; }
@media(min-width:651px) and (max-width:1680px) {
  .app-header { padding-top:8px; }
  .brand,.header-actions { margin-bottom:8px; }
  .header-utilities { margin-bottom:8px; }
}
@media(max-width:1100px) {
  .quick-keys { width:auto; }
  .catalog-toolbar .search-label { min-width:160px; }
}
@media(max-width:850px) {
  .selection-heading { grid-template-columns:minmax(0,1fr) auto; gap:0 16px; padding:16px; }
  .selection-title { grid-column:1 / -1; }
  .selection-heading h2 { grid-column:1; grid-row:auto; margin:8px 0 0; }
  #selected-position { grid-column:1; grid-row:auto; }
  #selected-behavior { grid-column:1 / -1; }
  .selection-heading #edit-action { grid-column:1; grid-row:auto; width:auto; justify-self:start; }
  .selected-details { grid-column:2; grid-row:2 / span 4; align-self:center; margin:0; width:auto; max-width:160px; }
  #selected-gesture-link { grid-column:1 / -1; }
  #selected-original { display:block; grid-column:1 / -1; }
  .gesture-layout { gap:24px; }.gesture-controls { padding-right:24px; }
}
@media(max-width:700px) {
  .gesture-layout { gap:24px; }.gesture-controls { padding:0; }
  .gesture-heading .gesture-ready-hint { font-size:var(--ui-font); }
  .gesture-direction { gap:4px; }.gesture-directions { grid-template-rows:repeat(3,minmax(112px,auto)); }
  .gesture-direction strong { font-size:var(--ui-font); }.gesture-shortcut { font-size:var(--ui-font); }

}
@media(max-width:650px) {
  .welcome { min-height:320px; padding:32px 24px; }.welcome h2 { font-size:20px; }
  .header-actions { gap:8px; }.header-actions button { font-size:var(--ui-font); }
  .header-actions .connection { width:100%; padding:0; }
  .app-header .nav-item { font-size:var(--ui-font); }
  .quick-keys { display:grid; width:100%; grid-template-columns:1fr 1fr; }.quick-keys button { padding-inline:8px; }
  .catalog-toolbar .search-label { flex-basis:100%; }
  .vial-catalog { height:var(--catalog-height); }

  .gesture-layout { gap:16px; }
  .gesture-controls { padding:0; }
  .range-ends { font-size:var(--ui-font); }
  .field-controls select { font-size:var(--ui-font); }
  .savebar { padding:8px 16px; grid-template-columns:1fr; }
  .savebar .save-description,.savebar .change-feedback,.savebar .buttons,.savebar #status,.savebar:has(.change-feedback[hidden]) #status { grid-column:1; grid-row:auto; }
  .selection-heading { grid-template-columns:minmax(0,1fr); }
  .selection-heading #edit-action { grid-column:1; justify-self:stretch; margin-top:8px; }
  .selected-details { grid-column:1; grid-row:auto; max-width:none; margin-top:8px; }
  #combo-form { padding:16px; }
  #change-summary { max-height:48px; overflow:auto; }
}

/* Scale the actual controls, rather than zooming the canvas or shrinking to fit height. */
body.studio-app { font-size:var(--ui-font); }
.app-header { min-height:72px; }
.header-actions button,.header-actions .history-button,#theme { min-height:40px; }
.header-actions .history-button,#theme { width:40px; }
#help { width:32px; min-height:32px; }
.nav-item { font-size:var(--ui-font); }
.app-header nav,.app-header .nav-item { min-height:48px; }
.history-button svg,.nav-item svg { width:20px; height:20px; }
#layers button { min-height:40px; padding:8px 12px; }
#layers button .layer-number { font-size:var(--ui-small); }
.keyboard-stage { padding-block:16px; }
.keyboard-plane { max-width:var(--board-width); }
.keycap,#gesture-keyboard .keycap { font-size:var(--key-font); }
.keycap[data-long=true] .key-main { font-size:var(--key-small); }
.key-sub { font-size:var(--key-small); line-height:1.2; }
.encoder-button { min-height:40px; }
.encoder-strip { padding-block:0 16px; }
.selection-heading { padding:16px; }
.selection-heading #edit-action { padding:8px; line-height:24px; }
.selected-details,.selected-code { font-size:var(--ui-small); }
.selected-details { margin:8px 0 0; }
.selected-details summary { min-height:40px; }
.selection-title #reset-key { font-size:var(--ui-font); min-height:40px; }
.catalog-tabs [role=tab] { min-height:48px; }
.quick-keys button,.search-label input,.catalog-toolbar select,.selected-details #open-any { min-height:40px; }
.search-label { height:40px; }
.search-label svg { width:16px; height:16px; }
.assignment-panel { padding-bottom:16px; }
.catalog-help,.catalog-choice span,.extra-keys { font-size:var(--ui-small); line-height:24px; }
.layer-picker-row .palette-key,.layer-picker-row .builder-choice { height:var(--palette-height); min-height:var(--palette-height); }
.modifier-grid .palette-key { min-height:var(--palette-height); }
.layer-picker-row { grid-template-columns:184px repeat(7,minmax(0,1fr)); }
.catalog-choice { min-height:64px; }
.catalog-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.dialog-heading h2,.settings-body h3,.field h2,.tuning-row label,.help-content h3 { font-size:var(--ui-heading); }
.dialog-close,#close-help { width:40px; min-height:40px; }
.action-form select,.code-form input,#raw-code,.inline-label select,.field-controls select { font-size:var(--ui-font); }
.assignment-target strong { font-size:var(--ui-heading); }
.action-result button,.code-form button,.gesture-trigger-result>button,.gesture-control button { min-height:40px; }
.settings-feedback .settings-status,.settings-help,#settings-error,#action-error,.help-technical,.gesture-dialog-error { line-height:24px; }
.combo-slots small { font-size:var(--ui-small); }
.gesture-binding-name strong { font-size:var(--ui-heading); }
.gesture-direction strong,.gesture-shortcut,.gesture-preset small { font-size:var(--ui-font); }
.gesture-direction { grid-template-columns:24px minmax(0,1fr); gap:8px; padding:16px; }
.gesture-control h3,.gesture-control>label { font-size:var(--ui-heading); }
.gesture-preset-heading select,.gesture-trigger-toolbar select,.gesture-binding-row button { min-height:40px; }
.gesture-binding-name span,.gesture-help,.gesture-footer p,.gesture-dialog-note { font-size:var(--ui-small); }
.field .small,.range-ends { font-size:var(--ui-small); }
.field-controls select,.reset { font-size:var(--ui-font); }
.field input[type=range]::-webkit-slider-thumb { width:24px; height:24px; margin-top:-10.5px; }
.field input[type=range]::-moz-range-thumb { width:20px; height:20px; }
.save-description,.change-feedback,#status,.buttons button { font-size:var(--ui-font); line-height:24px; }
.savebar .buttons button,#undo-change,#settings-undo { min-height:40px; }
.welcome p { font-size:var(--ui-font); }
.welcome .welcome-note { font-size:var(--ui-small); }

/* Responsive proportions: each task has its own measure; width and height scale together. */
:root {
  --ui-font:clamp(14px,calc(12px + .25vw),18px);
  --ui-small:clamp(12px,calc(10px + .25vw),16px);
  --ui-heading:clamp(18px,calc(14px + .32vw),22px);
  --key-font:clamp(14px,1.9cqw,22px);
  --key-small:clamp(11px,1.2cqw,16px);
  --board-width:clamp(768px,min(74cqw,calc(140dvh - 600px)),1168px);
  --workspace-width:1760px;
  --label-width:224px; --value-width:144px; --reset-width:128px;
}
.app-header { min-height:80px; }
.brand { font-size:22px; }.brand-logo { width:96px; }
.editor-content { padding:clamp(16px,1.25dvh,24px) clamp(16px,2vw,48px); }
.workspace { width:100%; container-type:inline-size; margin-block:0; }
.keyboard-plane { container-type:inline-size; }
.workspace[data-view=basic] { max-width:1344px; }
.workspace[data-view=gestures] { max-width:1280px; }
.workspace[data-view=buttons] { max-width:1600px; }
.welcome { max-width:960px; }
.map-toolbar { padding:16px 24px; }
.keyboard-stage { padding-block:16px 8px; }
.encoder-strip { padding-bottom:16px; }
.key-editor { grid-template-columns:clamp(256px,18cqw,320px) minmax(0,1fr); }
.selection-heading { padding:24px; }
.selection-heading h2 { font-size:24px; line-height:32px; }
.selection-title { flex-wrap:wrap; }
.assignment-panel { padding:0 24px 16px; container-type:inline-size; }
.assignment-panel>div,.assignment-panel>p { width:100%; max-width:1280px; margin-inline:auto; }
.catalog-tabs { gap:24px; }
.catalog-tabs [role=tab] { min-height:56px; }
.catalog-toolbar { margin-block:16px; }
.vial-catalog {
  --palette-row:clamp(40px,min(4.45cqw,calc(8dvh - 48px)),56px);
  height:auto; max-height:clamp(360px,44dvh,640px); min-height:0;
  padding:4px; margin:-4px;
}
/* Six proportional rows stay visible; extra keys join the outer work-area scroll. */
.vial-catalog[data-presentation="basic:"] { max-height:none; }
.full-keyboard { min-width:920px; max-width:calc(var(--palette-row) * 23); margin-inline:auto; gap:16px; }
.vial-catalog .palette-key { font-size:clamp(14px,calc(var(--palette-row) * .33),18px); overflow:hidden; text-overflow:ellipsis; }
.layer-picker-row .palette-key,.layer-picker-row .builder-choice { height:var(--palette-row); min-height:var(--palette-row); }
.modifier-grid .palette-key { min-height:var(--palette-row); }
.catalog-choice { min-height:80px; padding:12px 16px; gap:8px; }
.catalog-choice strong { line-height:24px; }
.catalog-choice span { line-height:20px; }
.catalog-grid { grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); }
.catalog-help,.extra-keys { line-height:24px; }
#pointing-page { padding-inline:32px; }
#pointing-page>.section-tabs [role=tab] { min-height:64px; }
#pointer-basic .field { min-height:clamp(160px,18dvh,224px); }
#pointer-basic { padding-block:16px; }
.field-controls select { min-height:48px; }
.range-placeholder { max-width:640px; }
#pointer-buttons .settings-title { min-height:96px; padding-block:24px; }
#pointer-buttons .settings-title h2 { font-size:var(--ui-heading); }
#pointer-buttons-help { font-size:var(--ui-small); }
#pointer-keys { max-width:960px; margin:0 auto; padding-block:24px 32px; gap:16px; }
.pointer-key { min-height:112px; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; padding:24px; }
.pointer-key strong { font-size:var(--ui-heading); }
.workspace[data-view=buttons] .vial-catalog { max-height:clamp(320px,calc(100dvh - 660px),640px); }
.workspace[data-view=buttons] .vial-catalog[data-presentation="basic:"] { max-height:none; }
.gesture-heading { padding-block:24px; align-items:center; }
.gesture-layout { grid-template-columns:320px minmax(0,1fr); gap:32px; padding-block:32px; align-items:center; }
.gesture-controls { padding-right:32px; }
.gesture-control,.gesture-control+.gesture-control { padding-block:24px; }
.gesture-control:first-child { padding-top:0; }
.gesture-control:last-child { padding-bottom:0; }
.gesture-map-section { width:100%; max-width:720px; margin-inline:auto; }
.gesture-directions { grid-template-rows:repeat(3,minmax(clamp(144px,15dvh,192px),auto)); gap:16px; }
.gesture-direction { grid-template-columns:1fr; text-align:center; justify-items:center; gap:8px; padding:16px; }
.gesture-arrow { grid-row:auto; font-size:28px; }
.gesture-direction strong { line-height:1.5; }
.gesture-shortcut { font-size:var(--ui-small); }
.gesture-footer { min-height:72px; padding-block:16px; }
.assignment-dialog { width:min(800px,calc(100vw - 32px)); }
.assignment-dialog.settings-dialog { width:min(1040px,calc(100vw - 32px)); }
.gesture-trigger-dialog { width:min(1280px,calc(100vw - 32px)); }
@media(max-width:1280px) and (min-width:1051px) {
  .key-editor { grid-template-columns:256px minmax(0,1fr); }
  .selection-heading { padding:16px; }
}
@media(max-width:1050px) {
  .key-editor { grid-template-columns:minmax(0,1fr); }
  .selection-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:16px 24px; border-right:0; border-bottom:1px solid var(--line); }
  .selection-title { grid-column:1 / -1; }
  .selection-heading #edit-action { grid-column:1; width:auto; justify-self:start; margin:0; }
  .selected-details { grid-column:2; grid-row:2; align-self:center; margin:0; width:auto; max-width:none; }
  #selected-behavior { grid-column:1 / -1; }
  #selected-gesture-link { grid-column:1 / -1; }
  #pointing-page { padding-inline:24px; }
  :root { --label-width:176px; --value-width:128px; --reset-width:112px; }
  .gesture-layout { grid-template-columns:256px minmax(0,1fr); gap:24px; }
  .gesture-controls { padding-right:24px; }
  .gesture-directions { gap:8px; }
  .gesture-direction { padding:8px; }
}
@media(max-width:850px) {
  .keyboard-plane { min-width:768px; }
  .board-view-controls { display:flex; gap:8px; padding:8px 16px 0; }
  .board-view-controls button { min-height:40px; font-size:var(--ui-font); }
  /* Stack settings before the slider column can become shorter than its labels. */
  #pointer-basic .field { grid-template-columns:minmax(0,1fr) minmax(112px,auto); gap:16px; min-height:0; padding-block:32px; }
  #pointer-basic .field>div:first-child { grid-column:1 / -1; grid-row:1; }
  .range-control,.range-placeholder { grid-column:1 / -1; grid-row:2; }
  .range-control { height:64px; }
  .field-controls select { grid-column:1; grid-row:3; max-width:160px; }
  .field .reset { grid-column:2; grid-row:3; }
  #field-aml .range-placeholder { padding-right:0; }
  .gesture-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .gesture-controls { display:grid; grid-template-columns:1fr 1fr; border:0; padding:0; gap:24px; }
  .gesture-control,.gesture-control+.gesture-control { border:0; padding:0; }
  .gesture-directions { grid-template-rows:repeat(3,minmax(144px,auto)); }
  .gesture-map-section { max-width:608px; }
}
@media(max-width:650px) {
  .app-header .nav-item { font-size:11px; }
  .header-actions button { font-size:12px; }
  .header-actions .history-button { width:32px; }
  .header-actions { gap:4px; }
  .brand { font-size:19px; }.brand-logo { width:80px; }
  .editor-content { padding:16px 12px; }
  .map-toolbar { padding:8px 12px; }
  .keyboard-stage { padding-block:16px; }
  .encoder-strip { padding-bottom:16px; }
  .selection-heading { grid-template-columns:minmax(0,1fr); padding:16px; gap:8px; }
  .selection-heading #edit-action { width:100%; justify-self:stretch; }
  .selected-details { grid-column:1; grid-row:auto; }
  .assignment-panel { padding-inline:16px; }
  .catalog-toolbar { margin-block:8px; }
  .vial-catalog { --palette-row:40px; max-height:480px; }
  .catalog-choice { padding:12px; min-height:72px; }
  .catalog-grid { grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
  #pointing-page { padding-inline:16px; }
  #pointer-basic { padding:0; }
  #pointer-keys { padding-block:16px 24px; }
  .pointer-key { flex-direction:row; justify-content:space-between; align-items:center; min-height:72px; padding:16px; }
  .gesture-layout { padding-block:24px; }
  .gesture-heading { align-items:flex-start; gap:8px; }
  .gesture-controls { display:contents; }
  .gesture-control:first-child { order:1; }.gesture-map-section { order:2; }.gesture-control+.gesture-control { order:3; padding-top:16px; border-top:1px solid var(--line); }
  .gesture-directions { grid-template-rows:repeat(3,minmax(128px,auto)); gap:8px; }
  .gesture-footer { align-items:flex-start; gap:16px; }
}

@media(min-width:1051px) and (max-height:1100px) { .map-toolbar { padding-block:8px; }.encoder-strip { padding-bottom:8px; } }

/* Follow a key's behavior through the map without changing its assignment. */
.map-toolbar { position:relative; flex-wrap:wrap; gap:8px 24px; }
#layers { flex:1; min-width:min(100%,640px); overflow-x:auto; }
#layers button { flex:none; }
#layer-access { margin:0 0 0 auto; }
#layer-access summary { padding:8px 0; min-height:40px; line-height:24px; color:var(--muted); font-size:var(--ui-small); cursor:pointer; }
#layer-return { min-height:40px; font-size:var(--ui-small); }
#layer-entrances { position:absolute; top:100%; right:16px; width:min(480px,calc(100% - 32px)); max-height:50dvh; overflow-y:auto; padding:16px; z-index:20; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px #142c4514; }
#layer-entrances p { margin:0 0 16px; line-height:1.6; font-size:var(--ui-font); }
.layer-entrance { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:12px 16px; margin-bottom:8px; min-height:56px; font-size:var(--ui-font); }
.layer-entrance small { font-size:var(--ui-small); color:var(--muted); }
#layer-entrances .layer-access-note { margin:16px 0 0; color:var(--muted); font-size:var(--ui-small); }
#selected-behavior { white-space:normal; display:grid; gap:8px; margin:16px 0; }
.behavior-role { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; align-items:baseline; }
.behavior-role dt { color:var(--muted); font-size:var(--ui-small); }
.behavior-role dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
#selected-layer-link { margin:0 0 16px; line-height:1.6; }
.pointer-map-context { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.pointer-map-context p { margin:0; }
.pointer-map-context button { font-size:var(--ui-small); }
.pointer-base { font-size:var(--ui-small); color:var(--muted); }
@media(max-width:1050px) {
  #selected-layer-link { grid-column:1 / -1; margin:0 0 8px; }
  #selected-behavior { grid-template-columns:repeat(2,minmax(0,1fr)); margin:8px 0; }
}
@media(max-width:650px) {
  #layers { flex-basis:100%; }
  #selected-behavior { grid-template-columns:1fr; }
  .pointer-map-context { align-items:flex-start; flex-direction:column; gap:8px; }
  .layer-entrance { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Choose combo codes in the same physical layout used by the keymap. */
.assignment-dialog.settings-dialog:has(#settings-combos:not([hidden])) { width:min(1280px,calc(100vw - 32px)); }
#combo-fields { display:grid; grid-template-columns:minmax(0,1fr) 208px; gap:24px; }
.combo-map-area,.combo-selection-panel { min-width:0; }
.combo-selection-panel { border-left:1px solid var(--line); padding-left:24px; }
.combo-selection-panel .combo-output-label { margin-top:24px; }
.combo-selection-panel .combo-triggers { grid-template-columns:1fr; }
.combo-map-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; }
.combo-map-toolbar h3 { margin:0; }
.combo-map-toolbar label { font-size:var(--ui-small); }
.combo-map-toolbar select { max-width:192px; font-size:var(--ui-small); }
#combo-map-wrap { overflow-x:auto; padding-block:24px 16px; margin-block:8px; }
#combo-map { width:100%; min-width:704px; max-width:none; margin:0; --key-font:clamp(14px,1.55cqi,17px); --key-small:13px; }
#combo-map .keycap { font-size:var(--key-font); }
#combo-map .key-sub { font-size:11px; }
#combo-map-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:40px; }
.combo-selected-code { min-height:40px; padding:8px 12px; background:var(--accent-soft); border-color:var(--accent); font-size:var(--ui-font); }
#combo-map-status { margin:8px 0; min-height:24px; font-size:var(--ui-small); line-height:24px; color:var(--muted); }
.combo-map-help { margin:8px 0 16px; color:var(--muted); font-size:var(--ui-small); line-height:24px; }
.combo-code-picker { margin:16px 0 24px; padding-bottom:16px; border-bottom:1px solid var(--line); font-size:var(--ui-small); }
.combo-code-picker summary { padding-block:8px; }
.combo-code-picker .combo-triggers { margin:16px 0 0; }
.combo-map-nav { display:none; gap:8px; margin-top:16px; }
.combo-map-nav button { min-height:40px; font-size:var(--ui-small); }
@media(max-width:1270px) {
  #combo-fields { grid-template-columns:minmax(0,1fr); }
  .combo-selection-panel { border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }
  .combo-selection-panel .combo-triggers { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1050px) {
  .combo-map-nav { display:flex; }
}
@media(max-width:650px) {
  .combo-map-toolbar { align-items:flex-start; flex-direction:column; gap:8px; }
  .combo-map-toolbar label { width:100%; justify-content:space-between; }
  #combo-map-wrap { padding-top:16px; }
}