/* Ptah — editor chrome.
   Palette: charcoal panels, gold = selection/reference, lapis = measurement.

   Themes (the top bar's Theme picker) recolour the chrome around the viewport:
   the top bar, tool rail, sidebar, status bar and dialogs. The viewport and
   everything drawn over it keep Ptah's own colours in every theme: #viewport
   declares the same tokens as :root, so a theme set on <html> stops at its edge.
   Role names are historical: --gold is the accent, --lapis the second accent.
   test/themes.test.mjs checks every theme's contrast against WCAG 2.2. */

:root, #viewport {
  color-scheme: dark;
  --bg: #14161b;
  --panel: #1b1e25;
  --panel-2: #20242d;          /* buttons, rows on hover */
  --field: #14171d;            /* text and number inputs, pickers */
  --hover: #262b36;
  --hover-border: #3a4050;
  --border: #2a2e38;
  --text: #d6d9e0;
  --muted: #9095a4;            /* 4.7:1 on a hovered button (it was 4.4 before 0.12.0) */
  --gold: #d9a441;             /* accent: active tools, selection, focus */
  --gold-dim: #8a6a2e;         /* accent borders */
  --accent-bg: #2c2618;        /* an active tool or toggle, the active selected row */
  --select-bg: #262214;        /* the other selected rows */
  --select-border: #5a4720;
  --lapis: #6f8ff0;            /* measurements, drop targets */
  --drop-bg: #1e2433;
  --danger: #e57373;
  --thumb-bg: #0f1115;
  --scroll-hover: #2c313d;
  --scrim: rgba(10, 11, 14, 0.78);
  --shadow: rgba(0, 0, 0, 0.5);
  --swatch-edge: rgba(255, 255, 255, 0.15);
  --radius: 6px;
}
:root { font-size: 13px; }

/* Catppuccin Mocha (MIT, catppuccin.com): mantle, base, surfaces; mauve accent. Hover is
   halfway from surface0 to surface1: on surface1 itself subtext0 falls to 4.1:1. */
:root[data-theme="catppuccin-mocha"] {
  --bg: #181825; --panel: #1e1e2e; --panel-2: #313244; --field: #11111b;
  --hover: #3b3c4f; --hover-border: #585b70; --border: #45475a;
  --text: #cdd6f4; --muted: #a6adc8;
  --gold: #cba6f7; --gold-dim: #7d699d; --accent-bg: #3a344e; --select-bg: #2e2a40; --select-border: #5b4e74;
  --lapis: #89b4fa; --drop-bg: #2d334b; --danger: #f38ba8;
  --thumb-bg: #11111b; --scroll-hover: #45475a; --scrim: rgba(17, 17, 27, 0.78);
  --shadow: rgba(17, 17, 27, 0.6); --swatch-edge: rgba(205, 214, 244, 0.2);
}
/* Rosé Pine (MIT, rosepinetheme.com): base, surface, overlay; rose accent, foam second.
   Subtle text is under 4.5:1 on anything lighter than overlay, so a hovered button keeps the
   overlay and lightens its border, and the row tints are 8% (5% for the other selected rows)
   of rose or foam over base; the border and the rose name carry the selection. */
:root[data-theme="rose-pine"] {
  --bg: #191724; --panel: #1f1d2e; --panel-2: #26233a; --field: #191724;
  --hover: #26233a; --hover-border: #6e6a86; --border: #403d52;
  --text: #e0def4; --muted: #908caa;
  --gold: #ebbcba; --gold-dim: #8f747b; --accent-bg: #2a2430; --select-bg: #241f2c; --select-border: #66555f;
  --lapis: #9ccfd8; --drop-bg: #232632; --danger: #eb6f92;
  --thumb-bg: #191724; --scroll-hover: #524f67; --scrim: rgba(25, 23, 36, 0.78);
  --shadow: rgba(25, 23, 36, 0.6); --swatch-edge: rgba(224, 222, 244, 0.2);
}
/* Primer Light: GitHub's light theme colours (MIT, primer.style) */
:root[data-theme="primer-light"] {
  color-scheme: light;
  --bg: #f6f8fa; --panel: #ffffff; --panel-2: #f6f8fa; --field: #ffffff;
  --hover: #eff2f5; --hover-border: #818b98; --border: #d1d9e0;
  --text: #1f2328; --muted: #59636e;
  --gold: #0969da; --gold-dim: #78aceb; --accent-bg: #ddf4ff; --select-bg: #e9f2fc; --select-border: #a9caf2;
  --lapis: #8250df; --drop-bg: #fbefff; --danger: #d1242f;
  --thumb-bg: #eff2f5; --scroll-hover: #d1d9e0; --scrim: rgba(200, 209, 218, 0.6);
  --shadow: rgba(37, 41, 46, 0.24); --swatch-edge: rgba(31, 35, 40, 0.3);
}
/* Primer Light High Contrast (MIT, primer.style) */
:root[data-theme="primer-light-hc"] {
  color-scheme: light;
  --bg: #e6eaef; --panel: #ffffff; --panel-2: #e0e6eb; --field: #ffffff;
  --hover: #dae0e7; --hover-border: #010409; --border: #454c54;
  --text: #010409; --muted: #454c54;
  --gold: #023b95; --gold-dim: #368cf9; --accent-bg: #dff7ff; --select-bg: #e8edf5; --select-border: #368cf9;
  --lapis: #5e2bb4; --drop-bg: #faf0fe; --danger: #960d1e;
  --thumb-bg: #eff2f5; --scroll-hover: #454c54; --scrim: rgba(57, 63, 70, 0.6);
  --shadow: rgba(37, 41, 46, 0.24); --swatch-edge: rgba(1, 4, 9, 0.5);
}
/* Primer Dark High Contrast (MIT, primer.style) */
:root[data-theme="primer-dark-hc"] {
  --bg: #151b23; --panel: #010409; --panel-2: #262c36; --field: #010409;
  --hover: #2a313c; --hover-border: #ffffff; --border: #b7bdc8;
  --text: #ffffff; --muted: #b7bdc8;
  --gold: #74b9ff; --gold-dim: #409eff; --accent-bg: #132130; --select-bg: #0b141f; --select-border: #5cacff;
  --lapis: #d3abff; --drop-bg: #1e1b2b; --danger: #ff9492;
  --thumb-bg: #151b23; --scroll-hover: #b7bdc8; --scrim: rgba(1, 4, 9, 0.8);
  --shadow: rgba(1, 4, 9, 0.9); --swatch-edge: rgba(255, 255, 255, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #app { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none;
}

.mono-val, .num, kbd, .file-label {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
}

#app { display: flex; flex-direction: column; }

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

#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  overflow: hidden;
  height: 44px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.brand { display: flex; align-items: baseline; gap: 7px; margin-right: 6px; }
.wordmark {
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-size: 14px;
}
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.tb-group { display: flex; align-items: center; gap: 6px; }
.tb-spacer { flex: 1; }

button {
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--hover-border); background: var(--hover); }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.toggle.on {
  background: var(--accent-bg);
  border-color: var(--gold-dim);
  color: var(--gold);
}

.danger { color: var(--danger); }
.danger:hover { border-color: var(--danger); }

.field-label { color: var(--muted); }
.unit { color: var(--muted); margin-left: -2px; }

.num {
  width: 62px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 4px 6px;
  text-align: right;
}
.num.wide { width: 72px; }
.num:focus { outline: none; border-color: var(--gold); }   /* the only focus sign on a mouse click: 3:1 in every theme */
.num:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.num::-webkit-outer-spin-button, .num::-webkit-inner-spin-button { -webkit-appearance: none; }

.file-label { color: var(--muted); font-size: 12px; }

/* ---------- middle ---------- */

#middle { display: flex; flex: 1; min-height: 0; }

#toolrail {
  width: 52px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
}

.rail-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: transparent;
  border-color: transparent;
}
.rail-btn .glyph { font-size: 15px; line-height: 1; }
.rail-btn .key { font-size: 9px; color: var(--muted); }
.rail-btn:hover { background: var(--panel-2); border-color: var(--border); }
.rail-btn.active {
  background: var(--accent-bg);
  border-color: var(--gold-dim);
  color: var(--gold);
}
.rail-btn.active .key { color: var(--gold); }
.rail-sep { width: 26px; height: 1px; background: var(--border); margin: 5px 0; }

#viewport { flex: 1; position: relative; min-width: 0; }
#viewport canvas { display: block; width: 100%; height: 100%; }

.viewport-chip {
  position: absolute;
  bottom: 10px;
  left: 12px;
  padding: 3px 9px;
  background: rgba(20, 22, 27, 0.75);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  pointer-events: none;
  z-index: 2;
}
.viewport-chip.right { left: auto; right: 12px; }
.viewport-chip.draw-readout { bottom: auto; color: var(--gold); font-variant-numeric: tabular-nums; }   /* placed at the pointer by app.js */

#marquee {
  position: absolute;
  border: 1px solid var(--gold);
  background: rgba(217, 164, 65, 0.10);
  pointer-events: none;
  z-index: 2;
}

#walk-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#walk-hud .crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(217, 164, 65, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#walk-hud .crosshair::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 2px;
  transform: translate(-50%, -50%);
  background: var(--gold);
}
#walk-hud .walk-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: rgba(20, 22, 27, 0.8);
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  color: var(--text);
  font-size: 12px;
  /* stay inside the viewport: wrap rather than run under the side panels */
  width: max-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  text-align: center;
  line-height: 1.7;
}
#walk-hud kbd { margin: 0 1px; }

#toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -8px);
  background: var(--panel-2);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 14px;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 3;
  max-width: 70%;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.warn { border-color: var(--danger); }

/* ---------- sidebar ---------- */

#sidebar {
  width: 292px;
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 12px 7px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.panel-note { color: var(--muted); font-size: 11px; }
.panel-tools { display: flex; align-items: center; gap: 8px; }
button.mini { padding: 2px 8px; font-size: 11px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.panel-note.pad { display: block; padding: 14px 12px; line-height: 1.6; }
kbd {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
}

#hierarchy { flex: 1; min-height: 110px; display: flex; flex-direction: column; }
#hierarchy-list { flex: 1; overflow-y: auto; padding: 4px 6px; }

.h-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius);
  cursor: default;
  border: 1px solid transparent;
  position: relative;
}
.h-row:hover { background: var(--panel-2); }
.h-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.h-row.selected {
  background: var(--select-bg);
  border-color: var(--select-border);
}
.h-row.selected.active {
  background: var(--accent-bg);
  border-color: var(--gold-dim);
}
.h-row.selected .h-name { color: var(--gold); }
/* A hidden object's row reads as secondary without losing contrast: grey and italic (the eye
   shows ○), not dimmed with opacity, which took the name under 4.5:1. A selected one keeps
   the accent name. */
.h-row.hidden-obj:not(.selected) .h-name { color: var(--muted); }
.h-row.hidden-obj .h-name { font-style: italic; }
.h-row.is-group .h-name { font-weight: 600; }
.h-row.dragging { opacity: 0.45; }

/* drag/drop targets */
.h-row.drop-into { outline: 1px dashed var(--lapis); outline-offset: -1px; background: var(--drop-bg); }
.h-row.drop-before::before, .h-row.drop-after::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--lapis);
  border-radius: 1px;
}
.h-row.drop-before::before { top: -2px; }
.h-row.drop-after::after { bottom: -2px; }
#hierarchy-list.drop-root { box-shadow: inset 0 -2px 0 var(--lapis); }

.h-caret {
  background: none;
  border: none;
  color: var(--muted);
  width: 14px;
  padding: 0;
  font-size: 11px;
  text-align: center;
  flex: none;
}
.h-caret:hover { color: var(--text); background: none; }
.h-caret.empty { pointer-events: none; }
.h-count { color: var(--muted); font-size: 10px; padding: 0 4px; }

.h-eye, .h-del {
  background: none;
  border: none;
  color: var(--muted);
  padding: 1px 3px;
  font-size: 12px;
}
.h-eye:hover, .h-del:hover { color: var(--text); background: none; }
.h-del { visibility: hidden; }
.h-row:hover .h-del { visibility: visible; }
.h-del:hover { color: var(--danger); }

.h-icon { color: var(--muted); font-size: 12px; width: 14px; text-align: center; }
.h-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rename {
  flex: 1;
  background: var(--field);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  padding: 1px 5px;
}

/* ---------- reference ---------- */

#reference { flex: none; border-top: 1px solid var(--border); }
#reference.drop-hover { outline: 1px dashed var(--lapis); outline-offset: -2px; }
#reference-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.ref-row { display: flex; align-items: center; gap: 10px; }
.ref-row.opacity { gap: 8px; }
.ref-row.opacity input[type=range] { flex: 1; min-width: 60px; accent-color: var(--gold); }
#ref-thumb {
  width: 64px; height: 64px;
  object-fit: contain;
  background: var(--thumb-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex: none;
}
.ref-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; flex: 1; min-width: 0; }
.ref-fields label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; min-width: 0; }
.ref-fields label span.lbl { width: 22px; flex: none; }
.ref-fields .num { width: 0; flex: 1; min-width: 0; padding: 4px 4px; }
.ref-fields .unit { flex: none; width: 8px; }

/* ---------- inspector ---------- */

#inspector-wrap { flex: none; border-top: 1px solid var(--border); }
#inspector { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.hidden { display: none !important; }

.insp-row { display: flex; align-items: center; gap: 8px; }
.insp-name {
  flex: 1;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  padding: 5px 8px;
  min-width: 0;
}
.insp-name:focus { outline: none; border-color: var(--gold); }   /* the only focus sign on a mouse click: 3:1 in every theme */
.insp-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.type-chip {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11px;
}

.insp-grid {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 1fr;
  gap: 6px 6px;
  align-items: center;
}
.insp-label { color: var(--muted); font-size: 12px; }
.insp-grid .num { width: 100%; }

/* axis accent: thin left border keyed to axis color conventions */
.ax-x { border-left: 2px solid #a05252; }
.ax-y { border-left: 2px solid #6e9a5c; }
.ax-z { border-left: 2px solid #5470b8; }

.mono-val { color: var(--text); font-size: 12px; }
.mono-val.accent { color: var(--lapis); }

.swatches { display: flex; gap: 6px; }
.swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--swatch-edge);
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { outline: 2px solid var(--gold); outline-offset: 1px; }

/* pickers (preset / marker / marker kind) share the input look */
.picker {
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px;
  font: inherit;
  cursor: pointer;
}
.picker:focus { outline: none; border-color: var(--gold); }   /* the only focus sign on a mouse click: 3:1 in every theme */
.picker:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.picker.grow { flex: 1; }

/* metrics panel */
#metrics { flex: none; border-top: 1px solid var(--border); }
#metrics-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.metric { display: grid; grid-template-columns: 1fr 64px 22px; align-items: center; gap: 4px; }
.metric .num { width: 100%; }
.metric .unit { font-size: 10px; }

/* recovery bar */
#recover-bar, #mobile-offer {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 8px 14px;
  z-index: 4;
}
#recover-bar button { padding: 4px 10px; }
/* offered on the desktop page to a phone-sized touch screen (app.js) */
#mobile-offer { top: auto; bottom: 48px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); }
#mobile-offer a { color: var(--gold); font-weight: 600; padding: 10px 4px; }
#mobile-offer button { min-height: 40px; }
#recover-restore { border-color: var(--gold-dim); color: var(--gold); }

.num::placeholder { color: var(--muted); text-align: center; }

/* profile picker */
.modal { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: var(--scrim); }
.modal-card { width: min(820px, 92vw); background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 10px; padding: 26px 28px 20px; box-shadow: 0 24px 60px var(--shadow); }
.modal-card h1 { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 8px; }
.modal-lead { color: var(--muted); line-height: 1.55; margin-bottom: 18px; max-width: 70ch; }
.profile-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
/* cards are <button>s; buttons are nowrap for the topbar, so this must undo it or the numbers push the grid out of the dialog */
.profile-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; text-align: left; white-space: normal; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.profile-card:hover { border-color: var(--gold-dim); background: var(--hover); }
.profile-card:focus-visible { border-color: var(--gold); background: var(--hover); outline: 2px solid var(--gold); outline-offset: 1px; }
.profile-card.current { border-color: var(--gold); }
.profile-card .engine { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.profile-card .tpl { font-size: 15px; font-weight: 600; }
.profile-card .nums { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--text); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.profile-card .nums.dim { color: var(--muted); margin-top: 0; }
.modal-foot { display: flex; align-items: center; gap: 10px; }
#status-version { margin-left: 12px; }

button.mini.pivot { margin-left: 4px; padding: 0 5px; font-size: 10px; line-height: 14px; text-transform: lowercase; }
button.mini.pivot.on { border-color: var(--gold-dim); color: var(--gold); }

/* slim range slider in the topbar */
input.slim { width: 56px; accent-color: var(--gold-dim); cursor: pointer; }
.picker { max-width: 104px; }
#file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The top bar sheds what is shown elsewhere before it wraps: the tagline and version
   (the version is also in the status bar), then the grid opacity figure (the slider shows it). */
@media (max-width: 1680px) { .brand-sub { display: none; } }
@media (max-width: 1500px) { #grid-opacity-val { display: none; } }
/* The file name takes what room the bar has left, so opening or saving a file with a long
   name never wraps the bar and shifts the viewport: the bar breaks lines as if it were as wide
   as "untitled", and a longer name is cut short with an ellipsis (the full name is its tooltip). */
.file-label { flex: 1 1 0; min-width: 8ch; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow windows (Electron's minimum is 1024): the topbar was clipping Snap,
   Faces, Ticks, Walk and Theme off the right edge. Let it wrap to two rows instead.
   The e2e test checks no control is clipped at widths either side of this. */
@media (max-width: 1460px) {
  #topbar { flex-wrap: wrap; height: auto; min-height: 44px; padding: 5px 10px; row-gap: 5px; overflow: visible; }
  #topbar .tb-spacer { display: none; }   /* the status bar keeps its own */
}
.walk-from { color: var(--gold); }

.insp-row.actions { justify-content: flex-end; gap: 8px; padding-top: 2px; flex-wrap: wrap; }
.insp-row.actions button { padding: 5px 9px; }
.insp-text {
  flex: 1;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  padding: 6px 8px;
  resize: vertical;
  min-height: 54px;
  user-select: text;
}
.insp-text:focus { outline: none; border-color: var(--gold); }   /* the only focus sign on a mouse click: 3:1 in every theme */
.insp-text:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
#insp-multi { font-size: 12px; color: var(--gold); }
.num:disabled { opacity: 0.35; }

/* ---------- status bar ---------- */

#statusbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 26px;
  padding: 0 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  flex: none;
}
#status-tool { color: var(--text); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

@media (prefers-reduced-motion: reduce) {
  #toast { transition: none; }
  .swatch:hover { transform: none; }
}