/*
 * The kit in anubhav-qt.dev's look: a black page, white ink, hairline edges. The chrome has no
 * colour of its own; colour marks state (a cell being compared, a pointer, a wrong write).
 * Doto for interface labels, Dongle for titles, IBM Plex Mono for reading, JetBrains Mono for
 * code and every value in a cell. Dark only. Loaded after viz-kit.css.
 */
/* Outranks the kit's own light and dark rules whatever data-theme says. */
html:root:not([data-theme="_"]) {
  --la-bg: #000000;
  --la-panel: #000000;
  --la-panel-2: #141414;
  --la-ink: #ffffff;
  --la-muted: #999999;
  --la-faint: #666666;
  --la-line: rgb(255 255 255 / 0.14);
  --la-line-2: rgb(255 255 255 / 0.26);
  --la-accent: #c7b4ff;   /* lilac: new, the app's own mark */
  --la-active: #8ac8fe;   /* sky */
  --la-compare: #ffd078;  /* ochre */
  --la-found: #72d1af;    /* green */
  --la-bad: #ff8f9c;      /* rose, a little stronger so wrong reads as wrong */
  --la-visited: #a5abb4;  /* graphite */
  --la-p0: #c7b4ff;
  --la-p1: #8ac8fe;
  --la-p2: #72d1af;
  --la-p3: #e399c5;
  --la-p4: #ffd078;
  --la-p5: #7dc9cc;
  --la-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 12px 40px rgb(0 0 0 / 0.6);
  --la-font: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --la-serif: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --la-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --la-dot: 'Doto', ui-monospace, Menlo, Consolas, monospace;
  --la-title: 'Dongle', system-ui, sans-serif;
  color-scheme: dark;
}
html:root:not([data-theme="_"]) {
  --la-accent-soft: color-mix(in srgb, var(--la-accent) 16%, #000);
  --la-active-soft: color-mix(in srgb, var(--la-active) 16%, #000);
  --la-compare-soft: color-mix(in srgb, var(--la-compare) 15%, #000);
  --la-found-soft: color-mix(in srgb, var(--la-found) 15%, #000);
  --la-bad-soft: color-mix(in srgb, var(--la-bad) 16%, #000);
  --la-visited-soft: color-mix(in srgb, var(--la-visited) 16%, #000);
  --la-hover: rgb(255 255 255 / 0.07);
}

html, body { background: #000; }
body { font: 14px/1.6 var(--la-font); font-feature-settings: 'liga' 0, 'calt' 0; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* The theme switch has nothing to switch to. */
.la-icon-btn[aria-label*="theme" i], .la-icon-btn[title*="theme" i] { display: none; }

/* ---------- pages ---------- */
.la { max-width: 1040px; padding: 18px 16px 72px; }
.la-title { font: 700 34px/0.9 var(--la-title); letter-spacing: 0.01em; }
.la-chip { font: 700 11px/1 var(--la-dot); padding: 4px 7px; border-radius: 6px; background: var(--la-panel-2); color: var(--la-muted); }
.la-chip.stage { background: #fff; color: #000; font-weight: 800; }
.la-nav { display: none; }
.la-block { border-radius: 18px; border-color: var(--la-line); padding: 18px 20px; transition: border-color 220ms ease; }
.la-block:hover { border-color: rgb(255 255 255 / 0.3); }
.la-block-title { font: 700 12px/1 var(--la-dot); color: var(--la-muted); text-transform: none; margin-bottom: 14px; }
.la-goal, .la-insight { font: 500 17px/1.55 var(--la-font); color: #fff; }
.la-goal-wrap { border-left: 1px solid var(--la-line); }
.la-insight-wrap { background: #000; border-color: var(--la-accent); }
.la-text { font-size: 14px; color: #ccc; }
.la-s-label { font: 700 11px/1 var(--la-dot); }
.la-btn { font: 800 11px/1.25 var(--la-dot); border-radius: 8px; padding: 7px 11px; border-color: var(--la-line-2); color: #fff; }
.la-btn.primary { background: #fff; color: #000; border-color: #fff; }
.la-btn:active, .sb-go:active { transform: scale(0.97); }
.la-icon-btn { border-radius: 8px; }
.la-icon-btn:hover { background: var(--la-panel-2); color: #fff; }
.la-icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.la-code { font: 13px/1.65 var(--la-mono); border-radius: 12px; background: #0b0b0b; border: 1px solid var(--la-line); }
.la-toast { font: 13px var(--la-font); background: #fff; color: #000; border: 0; border-radius: 8px; }
.la-cell { font: 600 15px var(--la-mono); border-radius: 8px; border-width: 1px; }
.la-arr-idx span, .la-ptr { font-family: var(--la-mono); }

/* Syntax colours from the palette: no orange. */
.t-k { color: #c7b4ff !important; }
.t-s { color: #a7cb8a !important; }
.t-n { color: #ffd078 !important; }
.t-f { color: #8ac8fe !important; }
.t-c { color: #666 !important; font-style: italic; }
.t-t { color: #7dc9cc !important; }

/* ---------- scratchpad ---------- */
.sb { background: #000; }
.sb-bar { padding: 7px 12px; gap: 6px; border-bottom-color: var(--la-line); }
.sb-title { font: 700 26px/0.9 var(--la-title); }
.sb-sel { font: 800 11px var(--la-dot); background: #000; border: 1px solid var(--la-line); height: 30px; }
.sb-sel:hover { border-color: var(--la-line-2); }
.sb-wrap { background-image: radial-gradient(rgb(255 255 255 / 0.13) 1px, transparent 1.2px); background-size: 24px 24px; }
.sb-hello { font: 500 14px/1.7 var(--la-font); color: var(--la-muted); }
.sb-side { padding: 14px 16px 24px; gap: 22px; border-left-color: var(--la-line); }
.sb-side h3 { font: 700 12px/1 var(--la-dot); color: var(--la-muted); margin-bottom: 10px; }
.sb-row b, .sb-name { font: 600 13.5px var(--la-mono); color: #fff; }
.sb-row small, .sb-type { font: 12px var(--la-mono); }
.sb-box { border-radius: 14px; padding: 10px 12px 12px; }
.sb-box.on { border-color: rgb(255 255 255 / 0.36); background: #000; box-shadow: var(--la-shadow); }
.sb-box.dragging { box-shadow: 0 18px 50px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.4); }
.sb-op { font: 12.5px var(--la-mono); border-radius: 7px; border-color: var(--la-line); padding: 4px 9px; }
.sb-op:hover { border-color: var(--la-line-2); }
.sb-op.on { background: #fff; color: #000; border-color: #fff; }
.sb-go { font: 800 11px var(--la-dot); border-radius: 7px; padding: 6px 10px; background: #fff; color: #000; }
.sb-in, .sb-text { background: #000; border-color: var(--la-line-2); border-radius: 7px; }
.sb-in:focus, .sb-text:focus { border-color: #fff; }
.sb-edit { border: 1.5px solid #fff; background: #000; border-radius: 8px; }
.sb-log { background: #0b0b0b; border: 1px solid var(--la-line); border-radius: 12px; font: 12.5px/1.7 var(--la-mono); }
.sb-help { font-size: 12px; line-height: 1.8; }
.sb-help kbd, kbd { font: 11px var(--la-mono); padding: 1px 5px; border-radius: 5px; background: #141414; color: #ccc; border: 1px solid var(--la-line); }
.sb-dock { border-radius: 14px; background: #000; border-color: var(--la-line-2); box-shadow: var(--la-shadow); }
.sb-dock-hint { font-size: 13px; }
.sb-modal-bg { background: rgb(0 0 0 / 0.7); backdrop-filter: blur(2px); }
.sb-modal { background: #000; border-radius: 18px; border-color: var(--la-line-2); }
.sb-modal h2 { font: 700 30px/0.9 var(--la-title); }
.sb-tb { border-color: var(--la-line); border-radius: 10px; }
.sb-tb.on { border-color: #fff; background: #141414; }
.sb-tb b { font: 500 13px var(--la-font); }
.sb-seg { background: #141414; }
.sb-seg button { font: 12.5px var(--la-font); }
.sb-seg button.on { background: #fff; color: #000; box-shadow: none; }
.sb-fields > label { font: 700 11px var(--la-dot); }
.sb-preview { background: #0b0b0b; border: 1px solid var(--la-line); border-radius: 12px; }
.sb-sync { font: 700 11px var(--la-dot); }
.sb-paneltoggle.on { background: #141414; }

/* ---------- scratchpad additions (sandbox.js) ---------- */
.sb-box [data-i], .sb-box [data-k], .sb-box [data-r] { cursor: grab; touch-action: none; }
.sb-box .is-lift { opacity: 0.28; }
.sb-ghost { font: 600 15px var(--la-mono); background: #000; border: 1.5px solid #fff; color: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.7); transition: border-color 120ms, color 120ms, background-color 120ms; }
.sb-ghost.del { border-color: var(--la-bad); color: var(--la-bad); background: var(--la-bad-soft); text-decoration: line-through; }
.sb-ghost.ok { border-color: var(--la-found); }
.sb-ghost small { display: block; font: 700 10px var(--la-dot); color: var(--la-muted); text-decoration: none; margin-top: 1px; }
.sb-ghost.del small { color: var(--la-bad); }
.sb-caret { position: fixed; z-index: 66; width: 2px; background: #fff; border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18); }
.sb-box .is-target-cell { border-color: #fff !important; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.25); }
.sb-name[contenteditable="true"] { outline: 1.5px solid #fff; outline-offset: 3px; border-radius: 4px; cursor: text; }
.sb-menu { position: fixed; z-index: 80; min-width: 190px; padding: 5px; background: #000; border: 1px solid var(--la-line-2); border-radius: 12px; box-shadow: var(--la-shadow); }
.sb-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: 13px var(--la-font); text-align: left; cursor: pointer; }
.sb-menu button:hover, .sb-menu button:focus-visible { background: #141414; outline: none; }
.sb-menu button.danger { color: var(--la-bad); }
.sb-menu button kbd { margin-left: auto; border: 0; background: transparent; color: var(--la-faint); }
.sb-menu hr { border: 0; border-top: 1px solid var(--la-line); margin: 4px 0; }
.sb-keys { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(0 0 0 / 0.7); padding: 16px; }
.sb-keys > div { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #000; border: 1px solid var(--la-line-2); border-radius: 18px; padding: 18px 22px 20px; }
.sb-keys h2 { font: 700 30px/0.9 var(--la-title); margin: 0 0 12px; }
.sb-keys dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 13px; }
.sb-keys dt { white-space: nowrap; }
.sb-keys dd { margin: 0; color: #ccc; }
.sb-zoom { font: 700 11px var(--la-dot); color: var(--la-muted); min-width: 40px; text-align: center; cursor: pointer; background: transparent; border: 0; height: 30px; border-radius: 8px; }
.sb-zoom:hover { background: #141414; color: #fff; }
.sb-wrap.panning { cursor: grabbing; }
.sb-wrap.panning * { cursor: grabbing !important; }
.sb-marquee { position: absolute; z-index: 30; border: 1px solid rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.06); border-radius: 4px; pointer-events: none; }
.sb-box.multi { border: 1px solid rgb(255 255 255 / 0.36); }
@media (max-width: 760px) {
  .sb-bar { gap: 2px; padding: 6px 8px; }
  .sb-title { font-size: 22px; }
  .sb-zoom { display: none; }
}

/* Inside the app the problem's title is already in the top bar. */
.in-app .la-title { display: none; }
.in-app .la { padding-top: 14px; }