* { box-sizing: border-box; }

:root {
  --bg: #0f1115;
  --panel: #1a1d24;
  --panel-2: #232730;
  --line: #2c313c;
  --text: #dde1e8;
  --muted: #8a93a4;
  --accent: #6aa3ff;
  --accent-2: #4d83df;
  --dirty: #f5b400;
  --danger: #e05545;
  --ok: #5fc28a;

  /* keyboard scaling — --u is the *max* size of one keyboard-unit. The SVG
     is fluid (width: 100%) and only gets capped at this size, so the
     keyboard fills the pane on wide screens and shrinks on narrow ones. */
  --u: 80px;
  --gap: 4px;         /* visual gap inside each key */
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px;
}

/* ---- top bar ---- */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  /* It's an <h1> for SEO weight, but visually it's just the topbar wordmark
     — reset the default h1 size/margin so the layout matches a regular div. */
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.connection {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.status {
  font-size: 13px;
  color: var(--muted);
}
.status[data-state="connected"] { color: var(--ok); }
.status[data-state="error"]     { color: var(--danger); }
.actions {
  display: flex;
  gap: 8px;
}

button {
  font: inherit;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent-2);
  color: white;
}
button.primary:not(:disabled):hover { background: var(--accent); }
button.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
button.ghost:not(:disabled):hover { border-color: var(--muted); }
button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
button.dirty-indicator {
  position: relative;
}
button.dirty-indicator::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--dirty);
  border-radius: 50%;
}

/* ---- main split ---- */

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

.keyboard-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}

.readback-banner {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.readback-banner .msg-factory,
.readback-banner .msg-cached { display: none; }
.readback-banner.factory .msg-factory,
.readback-banner.cached  .msg-cached { display: inline; }

/* Keyboard SVG. The viewBox is in keyboard-units (1u per cap), so coords
   inside the SVG are simple integers/decimals. We let the SVG fill its
   container (width: 100%) up to a max derived from --u, and rely on
   aspect-ratio to keep the keyboard's proportions as it scales. */
.keyboard {
  display: block;
  width: 100%;
  max-width: calc(var(--kb-w) * var(--u));
  aspect-ratio: var(--kb-w) / var(--kb-h);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* Each cap is a <g> wrapping a shape (rect / path / circle) and one or
   two <text> labels. Shape colors are managed via the .cap-shape rules
   below; text labels via .cap-legend / .cap-action. */
.cap { cursor: pointer; }
.cap.locked, .cap.cosmetic { cursor: default; }

.cap-shape {
  fill: var(--panel-2);
  stroke: var(--line);
  stroke-width: 1;
  transition: fill 100ms, stroke 100ms;
}
.cap:hover .cap-shape { fill: #2a2f3a; stroke: var(--muted); }
.cap.selected .cap-shape { fill: #2a3650; stroke: var(--accent); }
.cap.dirty .cap-shape { stroke: var(--dirty); }
.cap.locked .cap-shape { fill: #1a1d24; opacity: 0.55; }
.cap.locked:hover .cap-shape { fill: #1a1d24; stroke: var(--line); opacity: 0.55; }
.cap.cosmetic .cap-shape { fill: #1f232b; stroke: #3b3f4a; }
.cap.cosmetic:hover .cap-shape { fill: #1f232b; stroke: #3b3f4a; }

/* Text inside the SVG. Sizes are in keyboard-units (since the viewBox is
   in keyboard-units), so they scale with the keyboard's overall size. */
.cap-legend {
  font-size: 0.24px;
  fill: var(--muted);
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}
.cap-action {
  font-size: 0.18px;
  fill: var(--text);
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}
.cap.cosmetic .cap-legend {
  font-size: 0.5px;
  fill: #d6a013;
}

.hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 0;
}

/* ---- editor pane ---- */

.editor-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
.editor-pane .placeholder {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 40px 0;
}

.key-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.key-header .legend {
  font-size: 18px;
  font-weight: 700;
}
.key-header .meta {
  color: var(--muted);
  font-size: 11px;
}

/* Layer tabs — two side-by-side buttons (BASE / FN) above the shared picker.
   The active tab is what the picker below edits; clicking the inactive tab
   makes it active and re-renders. */
.layer-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.layer-tab {
  /* override the global button defaults — we want a panel-shaped tile */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.layer-tab:hover { border-color: var(--muted); }
.layer-tab.active {
  border-color: var(--accent);
  background: rgba(106, 163, 255, 0.10);
}
.layer-tab.dirty { border-color: var(--dirty); }
.layer-tab.active.dirty { border-color: var(--dirty); background: rgba(245, 180, 0, 0.08); }
.layer-tab-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.layer-tab.dirty .layer-tab-label { color: var(--dirty); }
.layer-tab-name {
  font-weight: 500;
  font-size: 13px;
  /* truncate long names like "Computador / Arquivos" instead of wrapping */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-tab-group {
  color: var(--muted);
  font-size: 11px;
}

.picker-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.picker-toolbar .picker-search { flex: 1; }
.revert-btn {
  font-size: 12px;
  padding: 6px 12px;
}

.picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.picker-search {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
}
.picker-search:focus {
  outline: none;
  border-color: var(--accent);
}
.picker-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}
.picker-group {
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  background: var(--panel);
  position: sticky;
  top: 0;
}
.picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  border-radius: 0;
}
.picker-item:hover { background: #2a2f3a; }
.picker-item.current {
  background: rgba(106, 163, 255, 0.18);
}

.locked-note {
  padding: 12px;
  background: var(--panel-2);
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- pre-connect helper text in the editor pane ---- */

.editor-pane .pre-connect {
  padding: 8px 4px;
}
.editor-pane .pre-connect h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.editor-pane .pre-connect p {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.editor-pane .pre-connect .device-tag {
  display: inline-block;
  padding: 1px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ---- disclaimer footer ---- */

.disclaimer {
  margin: 8px 18px 18px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.disclaimer strong { color: var(--dirty); }
.disclaimer a {
  color: var(--accent);
  text-decoration: none;
}
.disclaimer a:hover { text-decoration: underline; }
.disclaimer p { margin: 0; }
.disclaimer p + details { margin-top: 10px; }

.linux-help summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
  user-select: none;
}
.linux-help summary:hover { color: var(--accent); }
.linux-help[open] summary { color: var(--accent); }
.linux-help p { margin: 8px 0; }
.linux-help pre {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  color: var(--text);
}
.linux-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.linux-help p code {
  background: var(--panel-2);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ---- responsive shrink for narrow viewports ----
   The keyboard SVG itself is already fluid (see .keyboard), so we only
   need to drop the side-by-side layout once the editor pane no longer
   fits comfortably alongside it. */

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  .editor-pane { position: static; max-height: none; }
}