/* minikotlin studio — "Instrument" shell.
 *
 * Cold blue-graphite (hue ~214°) with a single calibrated-amber trace
 * (#e0a437) carrying every "live" signal: Run, active rail, LEDs,
 * pipeline-busy, focus. Panels are floating cards (r10 + card-line +
 * elevation shadow) on a recessed canvas; bars stay full-width.
 * The output panel is a dark instrument display in BOTH themes.
 *
 * Theme mechanics: tokens on :root, dark via prefers-color-scheme,
 * explicit override via :root[data-theme="light|dark"] (the toggle
 * stamps data-theme; an inline head script restores it pre-paint). */

/* ─── tokens ─────────────────────────────────────────────────────────── */
:root {
  --canvas:    #cfd6e0;            /* recessed page background            */
  --chassis:   #e7ebf1;            /* full-width bars + recessed cells    */
  --card:      #f5f7fa;            /* floating panel surface              */
  --card-line: #c3ccd8;            /* card border, slightly stronger      */
  --shadow-card: 0 1px 2px rgba(20,30,50,.06), 0 8px 24px rgba(20,30,50,.10);
  --shadow-bar:  0 1px 3px rgba(20,30,50,.12);
  --panel:     #eaeef4;            /* card heads / sub-surfaces           */
  --raised:    #e2e8f0;            /* hover                               */
  --display:   #f8fafc;            /* editor surface ("the screen")       */
  --hairline:  #c9d1dc;
  --hairline-2:#aeb8c7;
  --ink:       #1a2230;
  --ink-2:     #4d596c;
  --ink-3:     #71809c;
  --trace:     #e0a437;
  --trace-ink: #171006;
  --trace-text:#8a5f06;
  --ok:        #1f7d4f;
  --err:       #b23f36;
  --led-glow:  0 0 5px rgba(224,164,55,.55);

  --term-bg:   #0b0f15;            /* output display — dark in both themes */
  --term-fg:   #d3dbe5;
  --term-dim:  #6b7888;
  --term-ok:   #63c493;
  --term-err:  #e0716b;
  --term-line: #1d2531;
  --term-trace:#e5b054;

  --syn-type: #0f6f60;             /* shared with the outline kind chips   */
  --syn-fn:   #1f6f8b;
  --sel:      rgba(224,164,55,.30);

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:    #080b10;
    --chassis:   #10151c;
    --card:      #151b24;
    --card-line: #2a3444;
    --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.42);
    --shadow-bar:  0 1px 3px rgba(0,0,0,.55);
    --panel:     #1a212c;
    --raised:    #222c3a;
    --display:   #0d1219;
    --hairline:  #232c39;
    --hairline-2:#334052;
    --ink:       #d7dee8;
    --ink-2:     #98a4b5;
    --ink-3:     #66748a;
    --trace-text:#e5b054;
    --ok:        #58c08d;
    --err:       #e0716b;
    --syn-type: #5fc2b4;
    --syn-fn:   #9ecfe0;
    --sel:      rgba(224,164,55,.26);
  }
}
:root[data-theme="light"] {
  --canvas:    #cfd6e0;
  --chassis:   #e7ebf1;
  --card:      #f5f7fa;
  --card-line: #c3ccd8;
  --shadow-card: 0 1px 2px rgba(20,30,50,.06), 0 8px 24px rgba(20,30,50,.10);
  --shadow-bar:  0 1px 3px rgba(20,30,50,.12);
  --panel:     #eaeef4;
  --raised:    #e2e8f0;
  --display:   #f8fafc;
  --hairline:  #c9d1dc;
  --hairline-2:#aeb8c7;
  --ink:       #1a2230;
  --ink-2:     #4d596c;
  --ink-3:     #71809c;
  --trace-text:#8a5f06;
  --ok:        #1f7d4f;
  --err:       #b23f36;
  --syn-type: #0f6f60;
  --syn-fn:   #1f6f8b;
  --sel:      rgba(224,164,55,.30);
}
:root[data-theme="dark"] {
  --canvas:    #080b10;
  --chassis:   #10151c;
  --card:      #151b24;
  --card-line: #2a3444;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.42);
  --shadow-bar:  0 1px 3px rgba(0,0,0,.55);
  --panel:     #1a212c;
  --raised:    #222c3a;
  --display:   #0d1219;
  --hairline:  #232c39;
  --hairline-2:#334052;
  --ink:       #d7dee8;
  --ink-2:     #98a4b5;
  --ink-3:     #66748a;
  --trace-text:#e5b054;
  --ok:        #58c08d;
  --err:       #e0716b;
  --syn-type: #5fc2b4;
  --syn-fn:   #9ecfe0;
  --sel:      rgba(224,164,55,.26);
}

/* ─── base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--canvas); color: var(--ink);
  font-family: var(--ui); font-size: 13px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  display: grid; grid-template-rows: 52px 1fr 24px;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--trace-text); }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--trace); outline-offset: 1px; border-radius: 4px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

.micro {
  font-family: var(--ui); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ─── top bar ────────────────────────────────────────────────────────── */
.topbar {
  display: grid; grid-template-columns: 1fr minmax(280px, 480px) 1fr;
  align-items: center; gap: 16px; padding: 0 16px;
  background: var(--chassis); border-bottom: 1px solid var(--card-line);
  box-shadow: var(--shadow-bar); position: relative; z-index: 5;
}
.topbar .lhs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .rhs { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand .mark { width: 20px; height: 20px; display: block; flex: none; }
.brand .name { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.brand .name .mini { color: var(--ink-3); font-weight: 500; }
.brand .tag { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px; margin-left: 2px; }
.vsep { width: 1px; height: 16px; background: var(--hairline); flex: none; }

/* command palette trigger */
.palette-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--hairline);
  border-radius: 6px; background: var(--card); color: var(--ink-3);
  font-size: 12px; text-align: left;
}
.palette-trigger:hover { border-color: var(--hairline-2); background: var(--raised); }
.palette-trigger svg { width: 12px; height: 12px; flex: none; }
.palette-trigger .hint { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kchip {
  font-family: var(--mono); font-size: 10px; padding: 2px 5px;
  border: 1px solid var(--hairline-2); border-radius: 4px; color: var(--ink-2); flex: none;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--hairline-2); background: var(--panel);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); background: var(--raised); }
.btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 11px; height: 11px; }
.btn.ghost { background: transparent; border-color: var(--hairline); }
.btn.ghost:hover:not(:disabled) { border-color: var(--hairline-2); background: var(--panel); }
.btn.run {
  background: var(--trace); border-color: var(--trace); color: var(--trace-ink);
  font-weight: 600; letter-spacing: .02em;
}
.btn.run:hover:not(:disabled) { filter: brightness(1.07); }
.btn.run:disabled { filter: none; }
.btn.run .kbd {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.16); color: var(--trace-ink);
}
.icon-btn {
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--ink-3); border-radius: 6px; border: 1px solid transparent;
}
.icon-btn:hover { background: var(--panel); color: var(--ink); border-color: var(--hairline); }
.icon-btn svg { width: 14px; height: 14px; }

/* ─── work area: explorer | center | rail ────────────────────────────── */
.studio {
  display: grid; grid-template-columns: 240px 1fr 264px;
  gap: 12px; padding: 12px; min-height: 0; overflow: hidden;
}

/* explorer */
.explorer {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.explorer .new-project { margin: 8px; height: 28px; display: flex; }
.explorer .new-project .btn { width: 100%; justify-content: center; }
.explorer-head {
  display: flex; align-items: center; gap: 2px; height: 36px;
  padding: 0 8px 0 16px; background: var(--panel);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline); flex: none;
}
.explorer-head .micro { flex: 1; }
.mini-icon {
  width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--ink-3); border-radius: 5px;
}
.mini-icon:hover:not(:disabled) { background: var(--raised); color: var(--ink); }
.mini-icon:disabled { opacity: .4; cursor: default; }
.mini-icon svg { width: 11px; height: 11px; }

.tree { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.tree-row {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 4px 8px; border-radius: 6px; border-left: 2px solid transparent;
  color: var(--ink-2); font-family: var(--mono); font-size: 12px; user-select: none;
  white-space: nowrap;
}
.tree-row:hover { background: var(--raised); color: var(--ink); }
.tree-row.active { background: var(--raised); color: var(--ink); border-left-color: var(--trace); }
.tree-row .twist { width: 10px; flex: none; color: var(--ink-3); font-size: 9px; text-align: center; transition: transform .12s; display: inline-block; }
.tree-row.collapsed .twist { transform: rotate(-90deg); }
.tree-row .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-row .fsize { font-size: 10px; color: var(--ink-3); }
.tree-row.folder { color: var(--ink-2); font-weight: 500; }
.tree-row.root { color: var(--ink); font-weight: 600; }
.tree-row.dim { color: var(--ink-3); }
.tree-row.dim:hover { color: var(--ink-2); }
.tree-row .fdot { width: 5px; height: 5px; border-radius: 1px; background: var(--hairline-2); flex: none; }
.tree-row.active .fdot { background: var(--trace); }
.ind-1 { padding-left: 22px; }
.ind-2 { padding-left: 38px; }
.entry-badge {
  font-family: var(--ui); font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 4px; border-radius: 1px; text-transform: uppercase;
  color: var(--trace-text); border: 1px solid color-mix(in srgb, var(--trace) 45%, transparent);
  flex: none;
}

.explorer-foot {
  border-top: 1px solid var(--hairline); flex: none;
  padding: 10px 16px 8px; font-size: 10.5px; line-height: 1.6; color: var(--ink-3);
}
.explorer-foot code { font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.foot-tools { display: flex; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }

/* center column — editor + tabbed output, ONE card */
.center {
  display: grid; grid-template-rows: minmax(0,1fr) 6px var(--panel-h, 240px);
  min-width: 0; min-height: 0; background: var(--card);
  border: 1px solid var(--card-line); border-radius: 10px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.editor-wrap { display: flex; flex-direction: column; min-height: 0; }
.editor-head {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--hairline); flex: none;
}
.editor-head .ki { width: 12px; height: 12px; color: var(--trace-text); flex: none; }
.breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
.breadcrumb .seg-dim { color: var(--ink-3); }
.breadcrumb .meta { color: var(--ink-3); font-size: 11px; }
.breadcrumb .entry-badge { transform: translateY(-1px); }
.editor-head .pos { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; margin-left: auto; }
.compiler-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--chassis);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); flex: none;
}
.compiler-chip .led { width: 6px; height: 6px; border-radius: 1px; background: var(--ink-3); flex: none; }
.compiler-chip.busy .led { background: var(--trace); box-shadow: var(--led-glow); animation: pulse 1.1s ease-in-out infinite; }
.compiler-chip.ok .led { background: var(--ok); box-shadow: 0 0 5px color-mix(in srgb, var(--ok) 55%, transparent); }
.compiler-chip.err .led { background: var(--err); }
@keyframes pulse { 50% { opacity: .3; } }

/* Monaco host — the editor screen */
.monaco-host { flex: 1; min-height: 0; background: var(--display); }

/* divider — graticule ruler, drags for real */
.divider {
  cursor: row-resize; background: var(--panel);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background-image: repeating-linear-gradient(90deg, var(--hairline-2) 0 1px, transparent 1px 8px);
  background-size: 100% 3px; background-position: center; background-repeat: no-repeat;
  touch-action: none;
}
.divider:hover, .divider.dragging {
  background-image: repeating-linear-gradient(90deg, var(--trace) 0 1px, transparent 1px 8px);
}

/* bottom panel: tabs + dark instrument display */
.bottom-panel { display: flex; flex-direction: column; min-height: 0; background: var(--term-bg); }
.tabbar {
  display: flex; align-items: stretch; gap: 0; height: 32px; padding: 0 8px; flex: none;
  border-bottom: 1px solid var(--term-line);
}
.tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  font-family: var(--mono); font-size: 11px; color: var(--term-dim);
  border-bottom: 2px solid transparent; letter-spacing: .04em;
}
.tab:hover { color: var(--term-fg); }
.tab[aria-selected="true"] { color: var(--term-fg); border-bottom-color: var(--trace); }
.tab .tcount {
  font-size: 9.5px; padding: 1px 5px; border: 1px solid var(--term-line);
  border-radius: 4px; color: var(--term-dim);
}
.tab .tcount.hot { color: var(--term-err); border-color: color-mix(in srgb, var(--term-err) 45%, transparent); }
.tabbar .build { margin-left: auto; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--term-dim); padding-right: 10px; }
.tabbar .build .ok { color: var(--term-trace); }
.tabbar .build .err { color: var(--term-err); }
.tabbar .build .arrow { color: var(--term-dim); }
.tabbar .clear {
  align-self: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--term-dim); padding: 3px 8px; border-radius: 4px;
}
.tabbar .clear:hover { background: rgba(255,255,255,.06); color: var(--term-fg); }

.panel-body { flex: 1; overflow: auto; padding: 10px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--term-fg); }
.panel-body[hidden] { display: none; }
.empty-state {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: var(--term-dim); text-align: center;
}
.empty-state svg { width: 28px; height: 28px; opacity: .6; }
.empty-state kbd {
  font-family: var(--mono); font-size: 10.5px; padding: 1px 5px;
  border: 1px solid var(--term-line); border-radius: 4px; color: var(--term-fg);
}
.empty-state code { font-family: var(--mono); color: var(--term-fg); }
.panel-body pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }
.panel-body pre.dim, .panel-body .dim { color: var(--term-dim); }
.panel-body pre.err { color: var(--term-err); }
.panel-body pre .ok { color: var(--term-ok); }
.panel-body pre .ms { color: var(--term-trace); }
.panel-body .caret {
  display: inline-block; width: 7px; height: 14px; background: var(--term-trace);
  vertical-align: -2px; margin-left: 1px; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* problems list (also used inside the output pane for the short form) */
.err-list { margin: 0; }
.err-list .label { color: var(--term-err); font-weight: 600; display: block; margin-bottom: 4px; }
.err-list .efile { color: var(--term-ok); cursor: pointer; }
.err-list .efile:hover { text-decoration: underline; }

/* ─── right insight rail ─────────────────────────────────────────────── */
.rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.rail-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px;
}
.card {
  flex: none; background: var(--card); border: 1px solid var(--card-line);
  border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; height: 34px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--hairline);
}
.card-head .micro { flex: 1; }
.card-head .num { font-size: 10px; color: var(--ink-3); }
.card-body { padding: 8px 16px 12px; }

.stat-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 8px; }
.stat-cell { background: var(--chassis); padding: 8px 10px 7px; }
.stat-cell .micro { display: block; margin-bottom: 2px; font-size: 9px; }
.stat-cell .val { font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-cell .val .unit { font-size: 10px; color: var(--ink-3); margin-left: 1px; }

.meta-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.meta-row .k { color: var(--ink-3); font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.meta-row .v { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.meta-row .v input {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--ink-2); font-family: var(--mono); font-size: 11px; text-align: right;
  width: 96px; padding: 1px 4px;
}
.meta-row .v input:hover { border-color: var(--hairline); }
.meta-row .v input:focus { outline: none; border-color: var(--trace); background: var(--display); color: var(--ink); }

.pipeline { margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.pipeline .micro { display: block; margin-bottom: 6px; font-size: 9px; }
.stage { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.stage .sdot { width: 6px; height: 6px; border-radius: 1px; background: var(--hairline-2); flex: none; }
.stage.busy .sdot { background: var(--trace); box-shadow: var(--led-glow); animation: pulse 0.8s ease-in-out infinite; }
.stage.done .sdot { background: var(--ok); }
.stage.err .sdot { background: var(--err); }
.stage.busy { color: var(--ink); }
.stage .sname { flex: 1; }
.stage .sms { color: var(--ink-3); font-size: 10.5px; min-width: 44px; text-align: right; }
.stage.done .sms { color: var(--trace-text); }

.outline-row {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 3px 6px; margin: 0 -6px; width: calc(100% + 12px);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  border-radius: 4px;
}
.outline-row:hover { color: var(--ink); background: var(--raised); }
.outline-row .okind {
  width: 14px; height: 14px; flex: none; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 700; border-radius: 1px;
  border: 1px solid var(--hairline-2); color: var(--ink-3);
}
.outline-row .okind.k-c { color: var(--syn-type); border-color: color-mix(in srgb, var(--syn-type) 50%, transparent); }
.outline-row .okind.k-f { color: var(--syn-fn); border-color: color-mix(in srgb, var(--syn-fn) 50%, transparent); }
.outline-row .oname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-row .oname.nest { padding-left: 12px; }
.outline-row .oline { color: var(--ink-3); font-size: 10px; }
.outline-empty { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding: 2px 0 4px; }

.suite-strip {
  flex: none; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 10px; box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.suite-strip:hover { color: var(--ink-2); }
.suite-bar { width: 48px; height: 4px; background: var(--hairline); overflow: hidden; display: inline-block; flex: none; }
.suite-bar i { display: block; height: 100%; width: 0; background: var(--trace); }

/* ─── status bar ─────────────────────────────────────────────────────── */
.statusbar {
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--chassis); border-top: 1px solid var(--card-line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden;
}
.statusbar .left { flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.statusbar .sdot { width: 6px; height: 6px; border-radius: 1px; background: var(--ink-3); display: inline-block; flex: none; }
.statusbar .sdot.busy { background: var(--trace); box-shadow: var(--led-glow); animation: pulse 1.1s ease-in-out infinite; }
.statusbar .sdot.ok { background: var(--ok); }
.statusbar .sdot.err { background: var(--err); }
.statusbar .sdot.idle { background: var(--ink-3); }
.statusbar .right { display: flex; align-items: center; gap: 14px; }
.statusbar .wasm-stat { color: var(--ink-2); }
.statusbar .wasm-stat:empty { display: none; }

/* ─── command palette overlay ────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(8,11,16,.55);
  display: none; z-index: 100;
}
.overlay.show { display: block; }
.palette {
  width: 480px; max-width: calc(100vw - 32px); margin: 96px auto 0;
  background: var(--card); border: 1px solid var(--card-line);
  border-top: 2px solid var(--trace); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.palette input {
  width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--hairline);
  background: var(--display); color: var(--ink);
  font-family: var(--mono); font-size: 13px; outline: none;
}
.palette-list { max-height: 296px; overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 6px; border-left: 2px solid transparent;
  font-size: 12.5px; color: var(--ink-2);
}
.palette-item .pi-ico { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.palette-item .pi-label { flex: 1; font-family: var(--mono); font-size: 12px; }
.palette-item .pi-kind { font-family: var(--ui); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.palette-item.selected { background: var(--raised); color: var(--ink); border-left-color: var(--trace); }
.palette-item.selected .pi-ico { color: var(--trace-text); }
.palette-none { padding: 14px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.palette-foot {
  display: flex; gap: 14px; padding: 7px 14px; border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}
.palette-foot .kchip { font-size: 9px; padding: 1px 4px; margin-right: 4px; }

/* ─── modal (new file / rename) ──────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; background: rgba(8,11,16,.55); display: none; place-items: center; z-index: 110; }
.modal-back.show { display: grid; }
.modal {
  width: 336px; background: var(--card); border: 1px solid var(--card-line);
  border-top: 2px solid var(--trace); border-radius: 10px; padding: 20px;
  box-shadow: var(--shadow-card);
}
.modal h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.modal .sub { margin: 0 0 12px; font-size: 11.5px; color: var(--ink-2); }
.modal .sub code { font-family: var(--mono); color: var(--trace-text); }
.modal input {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--hairline-2); background: var(--display); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px;
}
.modal input:focus { outline: none; border-color: var(--trace); }
.modal .err-msg { color: var(--err); font-family: var(--mono); font-size: 10.5px; min-height: 16px; margin-top: 6px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}