/* VIC shared UI. Keep state colors semantic; do not restyle artwork/canvas. */
html:root, html:root[data-theme] {
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ui-primary: #7c3aed;
  --ui-primary-hover: #6d28d9;
  --ui-primary-text: #6d28d9;
  --ui-primary-soft: #f5f3ff;
  --ui-primary-line: #ddd6fe;
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-sunken: #f1f5f9;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-text: #0f172a;
  --ui-secondary: #475569;
  --ui-muted: #64748b;
  --ui-success: #15803d; --ui-success-bg: #f0fdf4;
  --ui-warning: #9a3412; --ui-warning-bg: #fff7ed;
  --ui-danger: #b91c1c; --ui-danger-bg: #fef2f2;
  --ui-radius: 10px; --ui-card-radius: 12px;
  --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px;
  --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px;
  --ui-control-height: 40px;
  color-scheme: light;
}
html:root[data-theme="dark"] {
  --ui-primary-text: #c4b5fd;
  --ui-primary-soft: #251b3d;
  --ui-primary-line: #594080;
  --ui-bg: #0b1120;
  --ui-surface: #111a2e;
  --ui-sunken: #17223a;
  --ui-border: #29354d;
  --ui-border-strong: #475569;
  --ui-text: #f1f5f9;
  --ui-secondary: #cbd5e1;
  --ui-muted: #94a3b8;
  --ui-success: #86efac; --ui-success-bg: #102c20;
  --ui-warning: #fdba74; --ui-warning-bg: #302016;
  --ui-danger: #fca5a5; --ui-danger-bg: #321b24;
  color-scheme: dark;
}
/* Alias the existing component variables so all tools share the same palette. */
html:root, html:root[data-theme] {
  --f-body: var(--ui-font); --f-display: var(--ui-font); --sans: var(--ui-font);
  --f-mono: var(--ui-mono); --mono: var(--ui-mono);
  --bg: var(--ui-bg); --surface: var(--ui-surface); --card: var(--ui-surface);
  --card-2: var(--ui-sunken); --bg-soft: var(--ui-bg);
  --sunken: var(--ui-sunken); --sunk: var(--ui-sunken);
  --line: var(--ui-border); --line-strong: var(--ui-border-strong);
  --line-2: var(--ui-border-strong); --lstrong: var(--ui-border-strong);
  --ink: var(--ui-text); --fg: var(--ui-text);
  --ink-2: var(--ui-secondary); --muted: var(--ui-secondary);
  --ink-3: var(--ui-muted); --mute: var(--ui-muted); --faint: var(--ui-muted);
  --accent: var(--ui-primary); --acc: var(--ui-primary); --violet: var(--ui-primary-text);
  --accent-strong: var(--ui-primary-text); --accent-ink: #fff; --on-violet: #fff;
  --accent-soft: var(--ui-primary-soft); --acc2: var(--ui-primary-soft);
  --accent-line: var(--ui-primary-line); --violet-bg: var(--ui-primary-soft);
  --violet-soft: var(--ui-primary-soft); --thread: var(--ui-primary);
  --thread-soft: var(--ui-primary-soft); --title: var(--ui-text);
  --ok: var(--ui-success); --ok-soft: var(--ui-success-bg); --ok-bg: var(--ui-success-bg);
  --warn: var(--ui-warning); --warn-soft: var(--ui-warning-bg); --warn-bg: var(--ui-warning-bg);
  --bad: var(--ui-danger); --bad-soft: var(--ui-danger-bg); --bad-bg: var(--ui-danger-bg);
  --r: var(--ui-card-radius);
}
html:root body {
  background: var(--ui-bg); color: var(--ui-text);
  font-family: var(--ui-font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html:root :is(button, input, textarea, select) { box-sizing: border-box; font-family: var(--ui-font); }
html:root :is(.btn, .btn-sm, .eg-btn, .cc-btn, .gbtn, button.submit, #tkBox .b,
  .box button[type="submit"], .jb-form button, .vic button:not(.sub):not(.tab)) {
  min-height: var(--ui-control-height); padding: 8px 16px;
  border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-text);
  font-size: 14px; line-height: 22px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
html:root :is(.btn, .btn-sm, .eg-btn, .cc-btn, .gbtn, #tkBox .b):hover:not(:disabled) {
  background: var(--ui-sunken); border-color: var(--ui-border-strong);
}
html:root :is(.btn.primary, .btn-sm.primary, .eg-btn.primary, .eg-btn.pri,
  .cc-btn.primary, button.submit, #tkBox .b.primary, .box button[type="submit"],
  .jb-form button, .vic button.pri) {
  background: var(--ui-primary); border-color: var(--ui-primary);
  color: #fff; filter: none;
}
html:root :is(.btn.primary, .btn-sm.primary, .eg-btn.primary, .eg-btn.pri,
  .cc-btn.primary, button.submit, #tkBox .b.primary, .box button[type="submit"],
  .jb-form button, .vic button.pri):hover:not(:disabled) {
  background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff;
}
html:root :is(.btn.bad, .btn.danger, .eg-btn.danger, .cc-btn.no, button.submit.danger) {
  color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger);
}
html:root :is(button, .btn, .eg-btn):disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}
html:root :is(.btn.sm, .btn.rmv, .wr-cp, .wr-del, td .btn, td .eg-btn) {
  min-height: 32px; padding: 4px 10px; font-size: 12px; line-height: 22px;
}
html:root :is(input:not([type]), input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="number"], input[type="date"], input[type="datetime-local"], textarea, select) {
  min-height: var(--ui-control-height); max-width: 100%;
  border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-text);
  padding: 8px 12px; font-size: 14px; line-height: 22px;
}
html:root textarea { min-height: 96px; resize: vertical; }
html:root :is(input, textarea)::placeholder { color: var(--ui-muted); opacity: 1; }
html:root :is(input, textarea, select):focus {
  outline: 2px solid var(--ui-primary); outline-offset: 2px;
  border-color: var(--ui-primary); box-shadow: none;
}
html:root :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--ui-primary); outline-offset: 3px;
}
html:root :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--ui-primary);
}
html:root :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--ui-danger); }
html:root :is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }
html:root :is(.card, .res-card) {
  padding: var(--ui-space-5); border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius); background: var(--ui-surface);
}
html:root :is(.card-label, .card h3) { font-size: 14px; line-height: 1.5; font-weight: 600; }
html:root :is(.eg-sec-h, .res-bar) { gap: 16px; margin-bottom: 16px; }
html:root :is(.eg-sec-h h2, .res-card h2) { font-size: 18px; line-height: 1.4; font-weight: 600; }
html:root :is(.head h1, .box h1) { font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
html:root :is(.head .sub, .head p, .eg-sec-h p) { font-size: 14px; line-height: 1.6; color: var(--ui-muted); }
html:root :is(.row, .eg-btns, .jb-acts, .cc-btns) { gap: var(--ui-space-3); }
html:root :is(.grid-2, .cols) { gap: var(--ui-space-4); }
html:root :is(.field + .field, .card + .card) { margin-top: var(--ui-space-4); }
html:root :is(.drop, .jb-drop, .slotdrop) {
  border-color: var(--ui-border-strong); border-radius: var(--ui-card-radius);
  background: var(--ui-bg); color: var(--ui-secondary);
}
html:root :is(.drop:hover, .drop.drag, .drop.over, .jb-drop.over, .slotdrop.over) {
  border-color: var(--ui-primary); background: var(--ui-primary-soft);
}
html:root :is(.wr-tab.on, .jb-filters button.on, .jb-filters button[aria-pressed="true"], .vic .sub.on) {
  background: var(--ui-primary); border-color: var(--ui-primary); color: #fff;
}
html:root :is(.panel table, .res-tb) { font-size: 13px; line-height: 1.5; }
html:root :is(.panel table th, .res-tb th) {
  font: 600 12px/1.5 var(--ui-font); text-transform: none; letter-spacing: 0;
  padding: 12px; background: var(--ui-bg); color: var(--ui-secondary);
}
html:root :is(.panel table td, .res-tb td) { padding: 12px; border-color: var(--ui-border); }
html:root .rail { background: var(--ui-surface); }
html:root .rail :is(.nav, .navlabel.navtoggle) { font-size: 14px; }
html:root .rail .nav { min-height: 40px; }
html:root .rail .navgroup.on .navlabel.navtoggle { color: var(--ui-primary-text); }
/* The menu reopen button occupies x=12..48 in the parent document. Only the
   embedded toolbar needs a left gutter; keep the research workspace full width. */
html:root.embed.rail-collapsed .subbar .topin {
  padding-left: max(64px, env(safe-area-inset-left, 0px));
}
/* Preserve the canvas and compact batch controls, with readable fields on mobile. */
@media (max-width: 860px) {
  html:root, html:root[data-theme] { --ui-control-height: 44px; }
  html:root :is(.card, .res-card) { padding: 16px; }
  html:root :is(.head h1, .box h1) { font-size: 22px; }
  html:root :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="url"],
    input[type="number"], textarea, select) { font-size: 16px; }
  html:root :is(.eg-sec-h, .res-bar) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html:root :is(.btn, .btn-sm, .eg-btn, .cc-btn, .gbtn) { transition: none; }
}