/* Shared appearance palette. The logo files and physical keycap inks are
   preserved; the user's appearance choice changes the surrounding UI. */
:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #20211f;
  --panel: #272824;
  --panel-2: #30312d;
  --surface-inset: #232420;
  --keyboard-well: #191a18;
  --line: #41423b;
  --line-hover: #787a6e;
  --text: #eeeee6;
  --text-secondary: #c7c9be;
  --muted: #a4a69c;
  --accent: #a3d8c4;
  --accent-strong: var(--accent);
  --brand-accent: var(--accent);
  --on-accent: #202b25;
  --positive-bg: #293b32;
  --positive-border: #587867;
  --positive-text: #b0d6c6;
  --warning: #e2c08a;
  --warning-bg: #352f22;
  --warning-border: #927548;
  --danger: #ffb9ae;
  --danger-bg: #3a2424;
  --danger-border: #a16b63;
  --grid-line: #72786c26;
  --shadow: #0004;
  --key-selected: #a3d8c4;
  --key-selected-edge: #77ad97;
  --key-selected-border: #a3d8c4;
  --key-selected-text: #193e31;
  --ls-navy: var(--bg);
  --ls-text: var(--text);
  --ls-muted: var(--muted);
  --ls-teal: var(--accent);
  color: var(--text);
  background: var(--bg);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3eb;
  --panel: #fffef9;
  --panel-2: #e9e8df;
  --surface-inset: #eeede5;
  --keyboard-well: #e4e3d9;
  --line: #cbcbbf;
  --line-hover: #7b8173;
  --text: #121821;
  --text-secondary: #414d5b;
  --muted: #565e6c;
  /* Logo blue for marks; a darker shade keeps small controls readable. */
  --brand-accent: #1d82c1;
  --accent: #176fa6;
  --key-selected: #c5dff0;
  --key-selected-edge: #94bbd5;
  --key-selected-border: #1d82c1;
  --key-selected-text: #14384f;
  --on-accent: #fffef9;
  --positive-bg: #e0edf6;
  --positive-border: #86abc5;
  --positive-text: #245a7c;
  --warning: #785014;
  --warning-bg: #f6ecd1;
  --warning-border: #b39455;
  --danger: #9b342b;
  --danger-bg: #f9e6e0;
  --danger-border: #b7796d;
  --grid-line: #737b6426;
  --shadow: #29322624;
}

body { background: var(--bg); letter-spacing: 0; }
.topbar {
  min-height: 88px;
  height: auto;
  background: transparent;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.topbar, footer {
  padding-left: max(32px, calc((100% - 1240px) / 2)) !important;
  padding-right: max(32px, calc((100% - 1240px) / 2)) !important;
}
.connection { gap: 14px; font-size: 12px; }
.connection-dot { width: 6px; height: 6px; background: #85867e; }
.connection-dot.connected { background: var(--accent); box-shadow: none; }
main.shell {
  width: 100% !important;
  max-width: 1304px !important;
  padding: 38px 32px 48px !important;
}
.workspace-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; margin-bottom: 34px; padding: 0; }
.workspace-summary-heading { grid-row: 1; grid-column: 1; gap: 10px 16px; }
#workspace-name { margin: 0; font-size: 27px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
#workspace-status { padding: 0; border: 0; border-radius: 0; color: var(--muted); font-size: 12px; }
#workspace-status.dirty { color: var(--warning); }
.workspace-summary p { grid-column: 1 / -1; margin: 0; max-width: 850px; line-height: 1.6; }
.project-actions { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; border: 0; margin: 0; padding: 0; gap: 4px; }
.button { border-radius: 4px; background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 500; padding: 9px 13px; transition: background .12s, border-color .12s; }
.button:hover:not(:disabled) { transform: none; border-color: var(--line-hover); }
.button-quiet { background: transparent; }
.project-actions .button { border-color: transparent; }
.project-actions .button:hover { background: var(--panel-2); }
.project-actions #save-project-button { border-color: var(--line); margin-left: 8px; }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button:disabled { opacity: .45; }
.icon-button { color: var(--muted); }
.tools-menu { position: relative; }
.tools-menu>summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 8px 0; }
.tools-menu-content { position: absolute; top: 100%; right: 0; z-index: 150; width: 185px; padding: 6px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 24px var(--shadow); }
.tools-menu-content .icon-button { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; padding: 10px; border-radius: 2px; }
.tools-menu-content .icon-button:hover { background: var(--panel-2); color: var(--text); }
.keyboard-panel { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.keyboard-panel-header { margin: 0 0 24px; padding: 0 0 14px; border-bottom: 1px solid var(--line); gap: 20px; }
.panel-tabs { border: 0; gap: 26px; }
.panel-tab { border: 0; padding: 10px 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.panel-tab.active { color: var(--text); border-bottom: 2px solid var(--brand-accent); }
.panel-tab:hover { color: var(--text); background: none; }
.layer-dropdown { padding: 9px 12px; border-radius: 4px; background: var(--panel); color: var(--text); font-size: 12px; font-weight: 500; }
.keyboard-panel-options { margin-bottom: 16px; }
.language-control { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.language-control select { background: transparent; border-color: var(--line); border-radius: 4px; padding: 7px 28px 7px 10px; font-size: 12px; }
.live-view-toggle { border: 0; background: none; padding-left: 0; font-size: 12px; font-weight: 400; }
.live-view-toggle[hidden] { display: none; }
.live-view-toggle:disabled { opacity: .65; }
#visual-content { background: var(--keyboard-well); border-radius: 6px; padding: 24px; overflow-x: auto; }
#visual-content[hidden] { display: none; }
.keyboard { margin: 0; background: transparent; }
.key {
  /* Brand navy is the ink on light keycaps. Accent inks are deliberately
     darker than the logo swatches so small legends remain readable. */
  --key-ink: #121821;
  --key-ink-hold: #245548;
  --key-ink-linger: #6f471c;
  border: 1px solid #b8b8ac; border-radius: 5px; background: #deded2;
  color: var(--key-ink); box-shadow: inset 0 -3px 0 #babab0; transition: background .1s;
}
.key:hover { border-color: #eaeade; background: #f1f0e5; }
.key.selected, .keyboard.layout-editor .key.selected { border-color: var(--key-selected-border); background: var(--key-selected); color: var(--key-selected-text); box-shadow: inset 0 -3px 0 var(--key-selected-edge); }
.key.live-pressed, .key.live-pressed:hover { border-color: var(--key-selected-border); background: var(--key-selected); color: var(--key-selected-text); box-shadow: inset 0 -3px 0 var(--key-selected-edge); }
.key.inactive { opacity: .4; }
/* Cover regular, compact, selected, and live legends, including the compact
   action dots. These override the older dark-keycap component colors. */
#keyboard :is(.key-index, .key-action, .compact-key-action, .compact-tap) { color: var(--key-ink); font-weight: 500; }
#keyboard :is(.key-hold, .compact-hold) { color: var(--key-ink-hold); }
#keyboard :is(.key-linger, .compact-linger) { color: var(--key-ink-linger); }
#keyboard .compact-dots { color: var(--key-ink); text-shadow: none; }
.key.key-shape-iso-enter { background: transparent; box-shadow: none; }
.key.key-shape-iso-enter::before { background: #b8b8ac; }
.key.key-shape-iso-enter::after { background: #deded2; }
.key.key-shape-iso-enter:hover::after { background: #f1f0e5; }
.key.key-shape-iso-enter.selected::after, .keyboard.layout-editor .key.key-shape-iso-enter.selected::after { background: var(--key-selected); }
.key.key-shape-iso-enter.live-pressed::after { background: var(--key-selected); }
.lower-grid { margin-top: 32px; gap: 28px; }
.lower-grid>.card { padding: 24px 0 0; }
.section-kicker { display: none; }
.card-heading { gap: 18px; }
.keyboard-panel h3, .card h3 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.inspector .card-heading { margin-bottom: 24px; }
.inspector .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.action-grid>label, .config-field>span { color: var(--text-secondary); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.config-field>span { text-transform: none; }
.capture-input { margin-top: 9px; }
.keyboard-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .keyboard-panel select, .keyboard-panel textarea {
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--line);
  border-radius: 4px;
}
.action-type, .capture-input input, .inline-action-control { font-size: 12px; font-weight: 400; }
.capture-key, .undo-action, .clear-action, .action-picker, .action-browser-button { background: transparent; color: var(--muted); border-color: var(--line); }
.capture-key:hover, .undo-action:hover, .clear-action:hover { color: var(--text); background: var(--panel-2); }
.key-picker-button, .mouse-picker-button, .mouse-axis-button { background: transparent; color: var(--text); border-radius: 4px; font-weight: 400; }
.key-picker-popover { max-width: calc(100vw - 24px); border-radius: 6px; background: var(--panel); box-shadow: 0 12px 28px var(--shadow); }
.key-picker-tabs { background: transparent; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.key-picker-tabs button { font-size: 11px; font-weight: 400; border-radius: 0; }
.key-picker-tabs button.active { background: transparent; border-bottom: 2px solid var(--brand-accent); }
.key-picker-modifiers select, .key-picker-search { background: var(--bg); font-size: 12px; }
.key-picker-modifiers label, .key-picker-group { letter-spacing: 0; text-transform: none; font-size: 11px; }
.key-picker-key { background: #deded2; border-color: #b8b8ac; color: #30332c; border-radius: 4px; }
.key-picker-key span { font-weight: 500; }
.key-picker-key small { color: #606456; }
.key-picker-key:hover, .key-picker-key.selected { background: var(--key-selected); color: var(--key-selected-text); }
.layout-tools { background: transparent; box-shadow: none; border-color: var(--line); }
.text-button { color: var(--accent); font-size: 12px; font-weight: 500; }
.host-overrides { margin-top: 24px; padding-top: 20px; }
.host-overrides-heading, .host-override-system { font-size: 13px; font-weight: 500; }
.host-overrides>p, .config-field small, .config-section>.card-heading p, .configuration-intro p, .lighting-intro p, .macro-view p { font-size: 12px; line-height: 1.6; }
.host-overrides-heading small { text-transform: none; letter-spacing: 0; font-size: 11px; }
.check-row strong { font-weight: 500; }
.check-row small { font-size: 11px; line-height: 1.5; }
.config-section { padding-top: 28px; padding-bottom: 28px; }
.config-overview { margin-top: 20px; }
.config-validation { background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 12px; font-weight: 400; }
.config-validation strong { font-weight: 400; }
.config-overview>div { padding: 16px; }
.config-overview span { font-size: 11px; text-transform: none; letter-spacing: 0; }
.config-overview strong { font-size: 16px; font-weight: 500; }
.layer-popover { background: var(--panel); border-radius: 5px; box-shadow: 0 12px 24px var(--shadow); }
.layer-item.active { background: var(--positive-bg); color: var(--text); box-shadow: inset 2px 0 var(--accent); }
.layer-select { font-size: 13px; }
.layer-select small { font-size: 11px; opacity: .8; }
footer { border-color: var(--line); color: var(--muted); font-size: 11px; }
@media(max-width:1100px) {
  .workspace-summary { grid-template-columns: 1fr; }
  .project-actions { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; }
  .inspector .action-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:900px) {
  .topbar { align-items: center; flex-direction: row; padding-top: 20px !important; padding-bottom: 20px !important; }
  .connection { width: auto; flex: 1; justify-content: flex-end; gap: 10px; }
  .keyboard-panel-header { align-items: flex-start; gap: 14px; }
  .panel-tabs { gap: 22px; }
  #visual-content { padding: 16px; }
}
@media(max-width:600px) {
  .topbar, footer { padding-left: 20px !important; padding-right: 20px !important; }
  main.shell { padding: 28px 20px !important; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .connection { justify-content: flex-start; }
  .tools-menu-content { left: 0; right: auto; }
  #workspace-name { font-size: 24px; }
  .workspace-summary-heading { align-items: baseline; }
  .workspace-summary { margin-bottom: 24px; }
  .project-actions { width: auto; flex-wrap: wrap; }
  .project-actions .button { padding: 8px; }
  .project-actions #save-project-button { margin-left: 0; }
  .panel-tabs { gap: 20px; }
  #visual-content { padding: 12px; }
  .language-control { flex-wrap: wrap; }
}

/* Each legend is its own reading context, including Arabic and Hebrew keys. */
#keyboard :is(.key-action, .compact-key-action, .compact-tap),
.key-picker-key, .action-input {
  direction: ltr;
  unicode-bidi: isolate;
}
.keyboard-panel-options { flex-wrap: wrap; gap: 8px 24px; }
.keyboard-language-help {
  flex: 1 1 320px;
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.language-control select { max-width: 100%; }

#keyboard.non-latin-legends :is(.compact-key-action, .compact-tap) {
  font-size: clamp(15px, calc(var(--key-unit) * .29), 20px);
  line-height: 1.35;
}

/* The browser preference controls existing logo variants, independently of OS theme. */
:root:not([data-theme="light"]) .theme-logo-light,
:root[data-theme="light"] .theme-logo-dark { display: none; }
.appearance-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 400; }
.appearance-control select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.connection { flex-wrap: wrap; }
:where(button, select, input, textarea, summary):focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
.key-led-badge { color: var(--key-ink-linger); }
@media (max-width: 600px) { .appearance-control { flex-basis: 100%; margin-bottom: 4px; } }

#keyboard .key.key-shape-iso-enter.selected::before,
#keyboard .key.key-shape-iso-enter.live-pressed::before { background: var(--key-selected-border); }