/* jump-cannon panel styles — layered after panel-kit.css. */

/* Static pre-WASM Panel Kit shell. This block deliberately uses standalone
   colors because it paints before panel_kit::CSS exists. The marked shell is
   an adjacent sibling of an empty #main; it must never be mounted inside the
   Dioxus root because Dioxus 0.6 does not clear pre-existing children. */
.panel-kit-boot { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column;
  min-width:0; min-height:0; overflow:hidden; background:#09090a; color:#efeff0;
  font:12px/1.35 "Courier Prime",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.panel-kit-boot-bar { display:flex; align-items:center; gap:12px; height:35px; flex:0 0 35px;
  padding:0 14px; border-bottom:1px solid #242427; letter-spacing:.08em; text-transform:uppercase; }
.panel-kit-boot-title { font-weight:700; }
.panel-kit-boot-status { color:#77777d; font-size:10px; }
.panel-kit-boot-panels { display:grid; grid-template-columns:minmax(0,3fr) minmax(240px,2fr);
  grid-template-rows:1fr 1fr; gap:8px; flex:1; min-height:0; padding:44px 8px 8px; }
.panel-kit-boot-panel { position:relative; min-width:0; min-height:90px; border:1px solid #35353a;
  border-radius:4px; background:#0c0c0d; overflow:hidden; }
.panel-kit-boot-panel:first-child { grid-row:1 / span 2; }
.panel-kit-boot-panel::before { content:""; position:absolute; top:9px; left:12px; width:52px; height:8px;
  border-radius:3px; background:linear-gradient(90deg,#389cf6 0 14%,transparent 14% 22%,#f6be3c 22% 36%,transparent 36% 44%,#ee60c2 44% 58%,transparent 58%); }
.panel-kit-boot-line { height:6px; margin:34px 12px 0; border-radius:3px; background:#1a1a1d;
  animation:panel-kit-boot-pulse 1.25s ease-in-out infinite alternate; }
.panel-kit-boot-line + .panel-kit-boot-line { width:62%; margin-top:9px; animation-delay:.18s; }
#main[data-dioxus-id] + .panel-kit-boot[data-panel-kit-static-boot] { display:none; }
@keyframes panel-kit-boot-pulse { from { opacity:.35; } to { opacity:.9; } }
@media (max-width:680px) { .panel-kit-boot-panels { grid-template-columns:1fr; grid-template-rows:2fr 1fr; }
  .panel-kit-boot-panel:first-child { grid-row:auto; } .panel-kit-boot-panel:last-child { display:none; } }
@media (prefers-reduced-motion:reduce) { .panel-kit-boot-line { animation:none; opacity:.65; } }

/* Shared utility: label text exposed to assistive tech but not painted.
   Panels pair a visible control with an sr-only <label for=…>, so without
   this rule those labels render as stray full-size text. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Graph canvas fills its panel; the hud floats over the top-left corner. */
.graph-wrap { position:relative; width:100%; height:100%; }
.graph-canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.panel-body:has(> .graph-wrap) { padding:0; overflow:hidden; }
.graph-render-status { position:absolute; z-index:1; inset:1.75rem .75rem .75rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.25rem; border:1px solid var(--line2); border-radius:4px;
  background:color-mix(in srgb, var(--panel) 94%, transparent); text-align:center; }
.graph-render-status.initializing { color:var(--dim); font-size:.72rem; pointer-events:none; }
.graph-render-status.unavailable { border-color:var(--yellow); }
.graph-render-status h2 { margin:0 0 .45rem; color:var(--fg); font-size:.9rem; }
.graph-render-status p { max-width:36rem; margin:0; color:var(--dim); font-size:.72rem;
  line-height:1.55; }

.topbar .activity.idle { color:var(--dim); animation:none; }

/* Tiling: the graph's full-width default moved into default_layout's
   .with_tile(4, 3) — panel-kit 0.2 renders snapped tile spans inline, so a
   CSS flex/height override here would be dead (inline wins) and would fight
   the user's grip-resizes. */

/* Node browser / search result lists */
.browse, .search { display:flex; flex-direction:column; gap:.4rem; height:100%; min-height:0; }
.browse .queue, .search .queue { overflow:auto; min-height:0; }
.queue { display:flex; flex-direction:column; gap:.2rem; }
.queue-item { display:flex; justify-content:space-between; gap:.5rem; width:100%;
  padding:.35rem .5rem; border:1px solid transparent; border-radius:3px; background:none;
  color:var(--fg); cursor:pointer; text-align:left; font-size:11.5px; }
.queue-item:hover { border-color:var(--line); }
.queue-item.active { background:var(--inv-bg); color:var(--inv-fg); }
.qi-id { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.more { color:var(--dim); font-size:.7rem; padding:.3rem .5rem; }
.result-count { color:var(--dim); font-size:.68rem; }

input.filter { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.35rem .5rem; font-family:var(--mono); font-size:12px; }
input.filter:focus { outline:none; border-color:var(--fg); }
.search-bar { display:flex; gap:.4rem; }

.btn { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:3px; padding:.35rem .6rem; cursor:pointer; font-size:12px; }
.btn:hover { border-color:var(--fg); }
.btn:disabled { opacity:.4; cursor:default; }

/* Unified node browser: fuzzy file hits, content snippets, filter chips */
.browse-results { display:flex; flex-direction:column; gap:.3rem; overflow:auto; min-height:0; }
.browse-group { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  border-top:1px solid var(--line); padding-top:.4rem; margin-top:.2rem;
  display:flex; align-items:center; gap:.5rem; }
.search-schema { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  color:var(--dim); font-size:.66rem; padding:0 .15rem; }
.search-schema-label { margin-right:.1rem; }
.search-schema-key { border:1px solid var(--line2); border-radius:999px; padding:.05rem .35rem;
  color:var(--fg); }
.browse-error { color:var(--danger, #e56b6f); border-left:2px solid currentColor;
  font-size:.7rem; line-height:1.35; padding:.25rem .5rem; overflow-wrap:anywhere; }
.queue-item.rich { flex-direction:column; align-items:flex-start; gap:.1rem; }
.qi-snippet { display:block; color:var(--dim); font-size:10.5px; line-height:1.45;
  white-space:normal; max-height:3.2em; overflow:hidden; }
.qi-snippet b, .qi-fuzzy b { color:var(--accent); font-weight:600; font-style:normal; }
.queue-item.active .qi-snippet, .queue-item.active .qi-snippet b,
.queue-item.active .qi-fuzzy b { color:var(--inv-fg); }
.sugg-row { display:flex; gap:.3rem; flex-wrap:wrap; }
.sugg { background:var(--bg); color:var(--fg); border:1px solid var(--line2); border-radius:999px;
  padding:.15rem .55rem; font-size:11px; cursor:pointer; white-space:nowrap; }
.sugg:hover { border-color:var(--accent); }
.sugg.on { background:var(--inv-bg); color:var(--inv-fg); border-color:var(--inv-bg); font-weight:600; }
.sugg-field { color:var(--dim); }
.sugg.on .sugg-field { color:var(--inv-fg); }
.sugg-count { color:var(--dim); font-size:.64rem; }
.sugg.on .sugg-count { color:var(--inv-fg); }

/* Nodes workbench: source navigator beside the focused node content. */
.panel-body:has(> .nodes-workbench) { padding:1.75rem 0 0; overflow:hidden; }
.nodes-workbench { container-type:inline-size; container-name:nodes-workbench;
  display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; }
.nodes-toolbar { display:flex; flex-direction:column; gap:.35rem; flex:0 0 auto;
  padding:.45rem .5rem; border-bottom:1px solid var(--line); }
.nodes-toolbar .search-schema { flex-wrap:nowrap; min-width:0; overflow-x:auto;
  padding-bottom:.12rem; }
.nodes-toolbar .search-schema-label,
.nodes-toolbar .search-schema-key { flex:0 0 auto; }
.nodes-search-row { display:flex; align-items:center; gap:.4rem; min-width:0; }
input.nodes-search { flex:1 1 auto; min-width:7rem; }
.nodes-view-toggle { display:inline-flex; flex:0 0 auto; border:1px solid var(--line2);
  border-radius:3px; overflow:hidden; }
.nodes-view-mode { appearance:none; border:0; border-left:1px solid var(--line2);
  background:var(--bg); color:var(--dim); padding:.33rem .48rem; cursor:pointer;
  font:10.5px var(--mono); }
.nodes-view-mode:first-child { border-left:0; }
.nodes-view-mode:hover:not(:disabled), .nodes-view-mode:focus-visible { color:var(--fg); }
.nodes-view-mode:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; }
.nodes-view-mode.active { background:var(--inv-bg); color:var(--inv-fg); }
.nodes-view-mode:disabled { opacity:.4; cursor:default; }
.nodes-editor-grid { display:grid; grid-template-columns:minmax(190px, 30%) minmax(0, 1fr);
  flex:1 1 auto; min-height:0; min-width:0; }
.nodes-nav { display:flex; flex-direction:column; min-height:0; min-width:0;
  border-right:1px solid var(--line); background:var(--bg); }
.nodes-nav-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  flex:0 0 auto; padding:.42rem .5rem; color:var(--dim); border-bottom:1px solid var(--line);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.nodes-nav-count { font-size:.62rem; text-transform:none; letter-spacing:0; white-space:nowrap; }
.nodes-nav-scroll { flex:1 1 auto; min-height:0; overflow:auto; padding:.35rem; }
.nodes-nav-state { display:flex; align-items:center; justify-content:center; min-height:6rem;
  padding:.8rem; color:var(--dim); font-size:.7rem; line-height:1.45; text-align:center; }
.nodes-nav-state.error { color:var(--danger, #e56b6f); }
.nodes-tag-tree { display:flex; flex-direction:column; gap:.15rem; }
.nodes-tag-group { min-width:0; }
.nodes-tag-group.synthetic .nodes-tag-label { color:var(--dim); font-style:italic; }
.nodes-tag-summary { display:flex; align-items:center; gap:.35rem; width:100%; min-width:0;
  border:1px solid transparent; border-radius:3px; background:none; color:var(--fg);
  padding:.32rem .38rem; cursor:pointer; font:11.5px var(--mono); text-align:left; }
.nodes-tag-summary:hover { border-color:var(--line); }
.nodes-tag-summary:focus-visible, .queue-item:focus-visible { outline:1px solid var(--accent); }
.nodes-tag-chevron { flex:0 0 1em; color:var(--dim); }
.nodes-tag-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.nodes-tag-count { flex:0 0 auto; color:var(--dim); font-size:10px;
  font-variant-numeric:tabular-nums; }
.nodes-tag-children { display:flex; flex-direction:column; gap:.15rem;
  margin-left:.8rem; padding-left:.35rem; border-left:1px solid var(--line2); }
.nodes-tag-node { padding-left:.45rem; }
.nodes-main { min-width:0; min-height:0; overflow:hidden; background:var(--bg); }
.nodes-focus { display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; }
.nodes-focus-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
  flex:0 0 auto; padding:.65rem .75rem; border-bottom:1px solid var(--line); }
.nodes-focus-heading { min-width:0; }
.nodes-focus-kind { display:block; color:var(--dim); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:.18rem; }
.nodes-focus-title { overflow:hidden; margin:0; color:var(--fg); font-size:1rem;
  line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.nodes-focus-id, .nodes-focus-path { overflow:hidden; color:var(--dim); font-size:10.5px;
  line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.nodes-focus-provenance { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem;
  flex:0 0 auto; }
.nodes-content-state, .nodes-source { border:1px solid var(--line2); border-radius:999px;
  padding:.08rem .4rem; color:var(--dim); font-size:9.5px; white-space:nowrap; }
.nodes-content-state.editable { color:var(--green); }
.nodes-content-state.readable { color:var(--accent); }
.nodes-focus-body { flex:1 1 auto; min-height:0; overflow:hidden; padding:.6rem .75rem .75rem; }
.nodes-focus-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:0; padding:1rem; color:var(--dim); text-align:center; }
.nodes-focus-empty h2 { margin:0 0 .4rem; color:var(--fg); font-size:.9rem; }
.nodes-focus-empty p { max-width:34rem; margin:0; font-size:.72rem; line-height:1.5; }

@container nodes-workbench (max-width: 480px) {
  .nodes-editor-grid { grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(150px, 38%) minmax(0, 1fr); }
  .nodes-nav { border-right:0; border-bottom:1px solid var(--line); }
  .nodes-focus-head { padding:.5rem .6rem; }
  .nodes-focus-body { padding:.5rem .6rem .6rem; }
}

.ws.tiling .panel-nodes { min-height:300px; }

/* Inspector */
.inspector { display:flex; flex-direction:column; gap:.4rem; }
.node-title { font-size:.95rem; margin:0; }
.kv { display:flex; gap:.5rem; font-size:11.5px; }
.kv .k { flex:0 0 6.5rem; color:var(--dim); text-transform:uppercase; font-size:.66rem;
  letter-spacing:.05em; line-height:1.9; }
.kv .v { overflow:hidden; text-overflow:ellipsis; }
.metrics-grid { border-top:1px solid var(--line); padding-top:.4rem; margin-top:.2rem;
  display:flex; flex-direction:column; gap:.15rem; }
.tags { display:flex; gap:.3rem; flex-wrap:wrap; }
pre.code { white-space:pre-wrap; background:#060606; color:var(--fg);
  border:1px solid var(--line); border-radius:3px; padding:.5rem; font-size:11px; }
details summary { color:var(--dim); font-size:.7rem; cursor:pointer; }

/* Document editor */
.doc { display:flex; flex-direction:column; gap:.45rem; height:100%; min-height:0; }
.doc textarea.md { flex:1; min-height:120px; }
textarea.md { width:100%; resize:none; line-height:1.55;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:3px;
  font-family:var(--mono); font-size:12px; padding:.5rem; }
textarea.md:focus { outline:none; border-color:var(--fg); }
.doc-actions { display:flex; align-items:center; gap:.6rem; }
.save-msg { color:var(--dim); font-size:.72rem; }
.rendered-md { color:var(--fg); font-size:.82rem; }
.rendered-md h1, .rendered-md h2, .rendered-md h3 { font-size:.95rem; margin:.4rem 0 .2rem; }
.rendered-md ul { margin:.2rem 0; padding-left:1.1rem; }
.rendered-md code { background:#060606; padding:0 .2rem; border-radius:2px; }

/* Progress feed */
.jobs { display:flex; flex-direction:column; gap:.3rem; }
.job-row { display:flex; align-items:center; gap:.5rem; font-size:11.5px;
  padding:.25rem 0; border-bottom:1px solid #161616; }
.job-glyph { width:12px; text-align:center; color:var(--dim); }
.job-glyph.done { color:var(--green); }
.job-glyph.error { color:var(--red); }
.job-id { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-stage { color:var(--accent); text-transform:uppercase; font-size:.68rem; letter-spacing:.04em; }
.job-secs { color:var(--dim); font-variant-numeric:tabular-nums; }
.log-head { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  border-top:1px solid var(--line); padding-top:.45rem; margin-top:.2rem; }
.log-row { display:flex; gap:.5rem; font-size:10.5px; color:var(--dim); padding:.1rem 0; }
.log-level { color:var(--accent); text-transform:uppercase; font-size:.62rem; flex:0 0 auto; }
.log-level.warn { color:var(--yellow); }
.log-level.error { color:var(--red); }
.log-msg { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Settings */
.settings-shell { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
.settings-tabs { display:flex; flex:0 0 auto; gap:.25rem; min-width:0; overflow-x:auto;
  padding:0 0 .4rem; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.settings-tab { flex:0 0 auto; background:transparent; color:var(--dim);
  border:1px solid transparent; border-radius:3px; padding:.25rem .5rem;
  font-family:var(--mono); font-size:11px; cursor:pointer; white-space:nowrap; }
.settings-tab:hover { color:var(--fg); border-color:var(--line2); }
.settings-tab[aria-selected="true"] { color:var(--fg); background:var(--bg);
  border-color:var(--line2); }
.settings-tab:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
.settings-tabpanel { flex:1 1 auto; min-width:0; min-height:0; overflow:auto; padding-top:.5rem; }
.controls { display:flex; flex-direction:column; gap:.5rem; }
.controls .server { display:flex; gap:.4rem; }
.controls input { flex:1; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.35rem .5rem; font-family:var(--mono); font-size:12px; }
.controls input:focus { outline:none; border-color:var(--fg); }
.stats { display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line);
  padding-top:.4rem; }
.note { color:var(--dim); font-size:.7rem; line-height:1.5; }
.importers-view { display:flex; flex-direction:column; gap:.6rem; min-width:0;
  padding:0 .1rem .25rem; font-size:11px; }
.importer-policy { display:flex; align-items:flex-start; gap:.65rem; padding:.55rem .65rem;
  border:1px solid #27354a; border-radius:4px; background:#0a111b; }
.importer-policy-label { flex:0 0 auto; color:var(--accent); font-size:.64rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.importer-policy p { margin:0; color:var(--fg); font-size:.69rem; line-height:1.45; }
.importer-active-summary { display:flex; align-items:flex-start; justify-content:space-between;
  gap:.75rem; padding:.5rem .65rem; border:1px solid var(--line2); border-radius:4px;
  background:var(--bg); }
.importer-active-summary > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem; }
.importer-active-summary strong { color:var(--fg); font-size:.78rem; }
.importer-active-summary code, .importer-profile-id { color:var(--dim); font-family:var(--mono);
  font-size:.66rem; overflow-wrap:anywhere; }
.importer-section-label { color:var(--dim); font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; }
.importer-list { display:grid; gap:.55rem; align-items:start; }
.importer-section-viewing .importer-list { grid-template-columns:1fr; }
.importer-section-alternates .importer-list {
  grid-template-columns:repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
/* Card chrome (border, radius, background, state colours) comes from the
   shared .select-card rules and its data-default/data-viewing attribute
   selectors; only grid overflow guards remain here. */
.importer-card { min-width:0; overflow:hidden; }
.importer-badge.importer-kind-tag {
  background:transparent; color:var(--fg); border-color:var(--line2);
  font-family:var(--mono); letter-spacing:0; text-transform:none;
}
.importer-switch-row {
  margin-top:auto; padding:.55rem .65rem .55rem;
  border-top:1px solid var(--line); text-align:right;
}
.importer-switch-btn { display:inline-block; }
.importer-switch-btn.importer-switch-primary:hover:not(:disabled) {
  background:#5fa6e0; border-color:#5fa6e0;
}
.importer-switch-btn.importer-switch-default {
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.importer-switch-btn.importer-switch-current { opacity:1; }

.importer-badge { border:1px solid var(--line2); border-radius:99px; padding:.08rem .32rem;
  color:var(--dim); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; }
.importer-badge.active { color:var(--green); border-color:#2f6f4a; }
.importer-badge.selected { color:var(--accent); border-color:#28557e; }
.importer-badge.viewing { color:var(--yellow); border-color:#655123; }
.importer-badge.read-only { color:var(--yellow); border-color:#655123; }
.importer-switch-btn { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:99px; padding:.08rem .5rem; font-family:inherit; font-size:.58rem;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.importer-switch-btn:hover:not(:disabled) { border-color:var(--fg); }
.importer-switch-btn:disabled { opacity:.55; cursor:default; }

.importer-contract { padding:.55rem .65rem; border-top:1px solid var(--line); font-size:.64rem; }
.importer-contract h4 { margin:0 0 .35rem; color:var(--fg); font-size:.65rem;
}
.importer-details { border-top:1px solid var(--line); padding:0; }
.importer-details-summary {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.4rem .65rem; cursor:pointer; list-style:none;
  color:var(--dim); font-size:.62rem; letter-spacing:.04em; text-transform:uppercase;
  user-select:none;
}
.importer-details-summary::-webkit-details-marker { display:none; }
.importer-details-summary:hover { color:var(--fg); }
.importer-details-hint { color:var(--dim); font-size:.55rem; font-weight:400;
  letter-spacing:0; text-transform:none; }
.importer-facts { display:grid; grid-template-columns:minmax(7.5rem, auto) minmax(0, 1fr);
  gap:.16rem .55rem; margin:0; min-width:0; }
.importer-active-summary .importer-facts { flex:0 1 24rem; }
.importer-identity { padding:.45rem .65rem; border-top:1px solid var(--line); }
.importer-fact { display:contents; }
.importer-fact dt { color:var(--dim); font-size:.64rem; text-transform:lowercase; }
.importer-fact dd { min-width:0; margin:0; color:var(--fg); font-family:var(--mono);
  font-size:.65rem; overflow-wrap:anywhere; }
.importers-status { padding:.65rem; color:var(--dim); border:1px solid var(--line);
  border-radius:4px; font-size:.7rem; }
.importers-status.error { color:var(--red); border-color:#5f2828; }
@media (max-width: 520px) {
  .importer-policy, .importer-active-summary { flex-direction:column; }
  .importer-active-summary .importer-facts { width:100%; }
}

/* Help */
.help p { margin:.2rem 0; color:var(--fg); font-size:.78rem; }
.help hr { border:none; border-top:1px solid var(--line); margin:.5rem 0; }

/* === panel: layout (owned by panels/layout.rs) === */
.lay { display:flex; flex-direction:column; gap:.3rem; font-size:11.5px; }
.lay-row { display:flex; align-items:center; gap:.5rem; min-height:1.4rem; }
.lay-row .lay-k { flex:0 0 7.5em; color:var(--fg); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.lay-range { flex:1 1 auto; min-width:0; }
.lay-num { width:5.5em; background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:3px; padding:.15rem .3rem; font-family:var(--mono); font-size:11px; }
.lay-text { flex:1 1 auto; min-width:0; background:var(--bg); color:var(--fg);
  border:1px solid var(--line2); border-radius:3px; padding:.2rem .35rem;
  font-family:var(--mono); font-size:11px; }
.lay-select { flex:1 1 auto; min-width:0; background:var(--bg); color:var(--fg);
  border:1px solid var(--line2); border-radius:3px; padding:.2rem .35rem; font-size:11.5px; }
.lay-btn { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:3px; padding:.2rem .5rem; cursor:pointer; font-size:11.5px; }
.lay-btn:hover { border-color:var(--fg); }
.lay-btn.active { color:#3fb950; border-color:#3fb950; }   /* egui theme accent::GREEN */
.lay-small { padding:.15rem .4rem; font-size:11px; }
.lay-sub { color:var(--fg); font-weight:600; margin-top:.3rem; font-size:11.5px;
  letter-spacing:.02em; }
.lay-hint { color:var(--dim); font-size:.68rem; line-height:1.4; }
.lay-note { color:var(--dim); font-size:.65rem; font-style:italic; }
.lay-sep { border:none; border-top:1px solid var(--line); margin:.35rem 0; width:100%; }
.lay-err { color:#f85149; font-size:.7rem; white-space:pre-wrap; }
.lay-health { color:var(--dim); font-size:.68rem; font-family:var(--mono); }
.lay-health.ok { color:#3fb950; }
.lay-health.bad { color:#d29922; }
.lay-presets { display:flex; flex-wrap:wrap; gap:.35rem; }
.lay-check { display:flex; align-items:center; gap:.35rem; color:var(--fg); }
.lay-seed-src { width:100%; min-height:10em; background:var(--bg); color:var(--fg);
  border:1px solid var(--line2); border-radius:3px; font-family:var(--mono); font-size:11px;
  padding:.35rem; box-sizing:border-box; resize:vertical; }
.lay-right { justify-content:flex-end; }

/* layout: backend galleries + engine cards (This Device / Compute Cluster) */
.lay-running { display:flex; align-items:center; gap:.5rem; border:1px solid var(--line2);
  border-left:3px solid #3fb950; border-radius:4px; padding:.3rem .5rem; background:var(--bg); }
.lay-running-dot { color:#3fb950; font-size:.7rem; animation:lay-pulse 1.6s infinite; }
.lay-running-text { flex:1; min-width:0; color:var(--fg); font-size:.68rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.lay-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(10.5rem, 1fr));
  gap:.4rem; animation:lay-rise .18s ease-out; }
@keyframes lay-rise { from { opacity:0; transform:translateY(4px); } }
@keyframes lay-pulse { 50% { opacity:.35; } }

.lay-card { display:flex; flex-direction:column; gap:.3rem; text-align:left;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px;
  padding:.45rem .55rem; cursor:pointer; font-family:var(--mono); font-size:11px; }
.lay-card:hover:not(:disabled) { border-color:var(--fg); }
.lay-card:focus-visible { outline:1px solid var(--fg); outline-offset:2px; }
.lay-card.active { border-color:#3fb950;
  box-shadow:0 0 0 1px #3fb950, 0 0 14px -6px #3fb950; }
.lay-card.ghost { border-style:dashed; }
.lay-card:disabled { opacity:.5; cursor:not-allowed; }
.lay-card-head { display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.lay-card-name { font-weight:700; font-size:.74rem; overflow:hidden; text-overflow:ellipsis; }
.lay-live { flex:0 0 auto; color:#3fb950; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.08em; animation:lay-pulse 1.6s infinite; }
.lay-card-chips { display:flex; flex-wrap:wrap; gap:.3rem; }
.lay-chip { border:1px solid var(--line2); border-radius:999px; padding:0 .45rem;
  font-size:.58rem; line-height:1.6; color:var(--dim); text-transform:uppercase;
  letter-spacing:.06em; }
.lay-chip.kind-physics { color:var(--blue); border-color:var(--blue); }
.lay-chip.kind-static { color:var(--pink); border-color:var(--pink); }
.lay-chip.kind-remote { color:var(--dim); }
.lay-chip.proc-gpu { color:#3fb950; border-color:#3fb950; }
.lay-chip.proc-cpu { color:var(--dim); }
.lay-chip.proc-cluster { color:var(--accent); border-color:var(--accent); }
.lay-card-desc { margin:0; color:var(--dim); font-size:.64rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lay-card-why { color:#d29922; font-size:.62rem; }

/* layout: compute worker status card (cluster gallery header) */
.lay-worker { display:flex; align-items:center; gap:.55rem; background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:.4rem .55rem; }
.lay-worker.ok { border-color:#1d4426; }
.lay-worker.warn { border-color:#4a3a12; }
.lay-worker-dot { font-size:.8rem; }
.lay-worker.ok .lay-worker-dot { color:#3fb950; }
.lay-worker.warn .lay-worker-dot { color:#d29922; }
.lay-worker.off .lay-worker-dot { color:var(--dim); }
.lay-worker-info { flex:1; min-width:0; }
.lay-worker-title { font-weight:700; font-size:.72rem; }
.lay-worker-sub { color:var(--dim); font-size:.64rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

/* layout: GPU session console (cluster gallery header when session mode is on).
   One instrument merging the session state + worker health; same glyph
   language as the worker dot (○ off / ◐ warm / ● ok / ⚠ fail). */
.ses { display:flex; flex-direction:column; gap:.3rem; background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:.45rem .55rem;
  animation:lay-rise .18s ease-out; }
.ses.ok { border-color:#1d4426; }
.ses.warm { border-color:#4a3a12; }
.ses.fail { border-color:#5a1d1d; }
.ses-head { display:flex; align-items:center; gap:.55rem; }
.ses-dot { font-size:.8rem; }
.ses.ok .ses-dot { color:#3fb950; }
.ses.warm .ses-dot { color:#d29922; animation:lay-pulse 1.6s infinite; }
.ses.fail .ses-dot { color:#f85149; }
.ses.off .ses-dot { color:var(--dim); }
.ses-info { flex:1; min-width:0; }
.ses-title { display:flex; align-items:baseline; gap:.45rem; }
.ses-name { font-weight:700; font-size:.72rem; }
.ses-state { font-size:.64rem; color:var(--dim); }
.ses.ok .ses-state { color:#3fb950; }
.ses.warm .ses-state { color:#d29922; }
.ses.fail .ses-state { color:#f85149; }
.ses-detail { color:var(--dim); font-size:.64rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.ses-actions { display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }
.ses-actions .lay-btn:disabled { opacity:.5; cursor:not-allowed; }
.ses-cta:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.ses-fail { color:#f85149; font-size:.64rem; line-height:1.4; }
.ses-meta { display:flex; align-items:baseline; gap:.8rem; border-top:1px solid var(--line);
  padding-top:.3rem; }
.ses-worker { color:var(--dim); font-size:.62rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.ses.ok .ses-worker { color:#3fb950; }
.ses-idle { margin-left:auto; flex:0 0 auto; color:var(--dim); font-size:.62rem;
  font-variant-numeric:tabular-nums; }

/* layout: designed empty states (loading / unavailable / no worker) */
.lay-empty { border:1px dashed var(--line2); border-radius:6px; padding:.6rem .7rem;
  display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; color:var(--dim); }
.lay-empty-title { color:var(--fg); font-weight:700; font-size:.72rem; }
.lay-empty-text { font-size:.66rem; line-height:1.45; }

/* layout: parameters section header (names the running engine + reset) */
.lay-params-head { display:flex; align-items:baseline; gap:.5rem; margin-top:.3rem; }
.lay-params-head .lay-sub { margin-top:0; }
.lay-params-engine { flex:1; min-width:0; color:var(--dim); font-size:.66rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* === panel: style (owned by panels/style.rs) === */
.sty { display:flex; flex-direction:column; gap:.3rem; font-size:11.5px; }
.sty-reset-row { display:flex; justify-content:flex-end; }
.sty-small { font-size:11px; padding:.1rem .4rem; }
.sty-row { display:flex; align-items:center; gap:.5rem; }
.sty-label { flex:0 0 10rem; color:var(--fg); }
.sty-label.dim { color:var(--dim); }
.sty-row input[type=range] { flex:1; min-width:60px; }
.sty-row input[type=color] { background:var(--bg); border:1px solid var(--line);
  border-radius:3px; padding:0; width:2.2rem; height:1.3rem; }
.sty-row input[type=color]:disabled, .sty-row input[type=range]:disabled { opacity:.4; }
.sty-alpha { max-width:70px; }
.sty-select { flex:1; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.15rem .3rem; font-family:var(--mono); font-size:11px; }
.sty-select:focus { outline:none; border-color:var(--fg); }
.sty-val { flex:0 0 4.4rem; text-align:right; color:var(--dim);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* === panel: camera (owned by panels/camera.rs) === */
.cam { display:flex; flex-direction:column; gap:.35rem; font-size:11.5px; }
.cam-reset-row { display:flex; justify-content:flex-end; }
.cam-actions { display:flex; gap:6px; }
.cam-small { padding:.15rem .4rem; font-size:11px; }
.cam-row { display:flex; align-items:center; gap:.5rem; }
.cam-row .cam-label { flex:1; color:var(--fg); }
.cam-label.accent { color:#3b9bff; }   /* egui theme accent::BLUE */
.cam-row input[type=range] { flex:2; min-width:0; }
.cam-row input[disabled] { opacity:.4; }
.cam-val { min-width:3.2em; text-align:right; font-family:var(--mono);
  font-variant-numeric:tabular-nums; color:var(--dim); }
.cam-select { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:3px; padding:.2rem .35rem; font-size:11.5px; }
.cam-sep { border:none; border-top:1px solid var(--line); margin:.3rem 0; width:100%; }
.cam-sub { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.cam-space { height:.5rem; }
.cam-hint { color:var(--dim); font-size:.72rem; line-height:1.5; }

/* === panel: filter (owned by panels/filter.rs) === */
.fil { display:flex; flex-direction:column; gap:.5rem; height:100%; min-height:0; overflow:auto; }

/* toolbar: evaluation status, Filter/Dim behavior, reset */
.fil-toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding-bottom:.4rem; border-bottom:1px solid var(--line); }
.fil-status { display:flex; align-items:center; gap:.4rem; min-width:0; margin-right:auto; }
.fil-status-dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--dim); }
.fil-status.applied .fil-status-dot { background:var(--accent); }
.fil-status.checking .fil-status-dot { background:var(--yellow); animation:fil-pulse 1s ease-in-out infinite; }
.fil-status.invalid .fil-status-dot { background:var(--red); }
@keyframes fil-pulse { 50% { opacity:.25; } }
.fil-status-copy { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.fil-status-copy strong { font-size:11.5px; font-weight:700; color:var(--fg); }
.fil-status-copy small { font-size:.66rem; color:var(--dim); }
.fil-status.invalid .fil-status-copy strong { color:var(--red); }

/* segmented toggles: Filter/Dim and ALL/ANY share one look */
.fil-behavior, .fil-mode { display:flex; align-items:center; gap:.3rem; }
.fil-mode > span { font-size:.66rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.fil-behavior button, .fil-mode button { background:none; border:1px solid var(--line2);
  border-radius:3px; color:var(--dim); font-family:var(--mono); font-size:11px;
  padding:.1rem .45rem; cursor:pointer; }
.fil-behavior button:hover, .fil-mode button:hover { border-color:var(--fg); color:var(--fg); }
.fil-behavior button.active, .fil-mode button.active { background:var(--inv-bg);
  border-color:var(--inv-bg); color:var(--inv-fg); font-weight:700; }
.fil-reset { background:none; border:1px solid var(--line2); border-radius:3px;
  color:var(--dim); font-family:var(--mono); font-size:11px; padding:.1rem .45rem; cursor:pointer; }
.fil-reset:hover { border-color:var(--red); color:var(--red); }

.fil-intro { display:flex; flex-direction:column; gap:.1rem; font-size:.7rem; line-height:1.5; }
.fil-intro strong { color:var(--fg); }
.fil-intro span { color:var(--dim); }
.fil-note { color:var(--dim); font-size:.7rem; line-height:1.5; }
.fil-note.warning { color:var(--yellow); }

.fil-expression { display:flex; flex-direction:column; gap:.4rem; min-height:0; }

/* groups: a nested group is inset and marked by a guide line */
.fil-group { display:flex; flex-direction:column; gap:.35rem; }
.fil-group.nested { border-left:1px solid var(--line2); border-radius:0 3px 3px 0;
  padding:.35rem .4rem .35rem .5rem; background:rgba(255,255,255,.015); }
.fil-group.negated { border-left-color:var(--red); }
.fil-group.disabled, .fil-rule.disabled { opacity:.45; }
.fil-group.drop-inside { outline:1px dashed var(--accent); outline-offset:2px; }
.fil-group-head { display:flex; align-items:flex-start; gap:.4rem; flex-wrap:wrap; }
.fil-group-title { display:flex; flex-direction:column; gap:.15rem; margin-right:auto; min-width:0; }
.fil-eyebrow { font-size:.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
.fil-group-title small { font-size:.66rem; color:var(--dim); }
.fil-group-children { display:flex; flex-direction:column; gap:.35rem;
  padding-left:.6rem; border-left:1px solid var(--line); }

/* rules: one horizontal row per leaf */
.fil-rule { display:flex; flex-direction:column; gap:.25rem; }
.fil-rule-main { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.fil-rule.negated .fil-rule-main { border-left:2px solid var(--red); padding-left:.35rem; }
.fil-rule.invalid .fil-rule-main { border-left:2px solid var(--red); padding-left:.35rem; }
.fil-rule-kind { font-size:.62rem; color:var(--dim); text-transform:uppercase;
  letter-spacing:.06em; min-width:3.2rem; }
.fil-rule-editor { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  margin-right:auto; min-width:0; }

/* shared controls */
.fil-input, .fil-select { background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:2px; font-family:var(--mono); font-size:11px; padding:.15rem .3rem; }
.fil-input:focus, .fil-select:focus { outline:none; border-color:var(--fg); }
.fil-input[aria-invalid="true"] { border-color:var(--red); }
.fil-input.search { width:11rem; }
.fil-input.value { width:8rem; }
.fil-select.field { max-width:9rem; }
.fil-grab { background:none; border:none; color:var(--dim); cursor:grab;
  font-size:11px; padding:0 .1rem; line-height:1; }
.fil-grab:active { cursor:grabbing; }
.fil-grab:hover { color:var(--fg); }
.fil-actions { display:flex; align-items:center; gap:.2rem; }
.fil-state, .fil-not { background:none; border:1px solid var(--line2); border-radius:3px;
  color:var(--dim); font-family:var(--mono); font-size:10.5px; padding:.05rem .35rem; cursor:pointer; }
.fil-state.active { border-color:var(--accent); color:var(--accent); }
.fil-not.active { background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.fil-state:hover, .fil-not:hover { border-color:var(--fg); }
.fil-icon { background:none; border:1px solid transparent; border-radius:3px; color:var(--dim);
  font-family:var(--mono); font-size:11px; min-width:20px; padding:.05rem .2rem; cursor:pointer; }
.fil-icon:hover { border-color:var(--line2); color:var(--fg); }
.fil-icon.danger:hover { border-color:var(--red); color:var(--red); }

/* per-node evidence + diagnostics */
.fil-count { font-size:.66rem; color:var(--dim); font-variant-numeric:tabular-nums;
  white-space:nowrap; padding:0 .2rem; }
.fil-count.stale, .fil-count.pending { opacity:.55; font-style:italic; }
.fil-count.off { text-transform:uppercase; letter-spacing:.06em; }
.fil-diagnostic { margin:0; color:var(--red); font-size:.68rem; line-height:1.45; padding-left:.4rem;
  border-left:2px solid var(--red); }

/* add row + drag affordances */
.fil-add { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.fil-add button { background:none; border:1px dashed var(--line2); border-radius:3px;
  color:var(--dim); font-family:var(--mono); font-size:11px; padding:.1rem .45rem;
  cursor:pointer; display:flex; align-items:center; gap:.25rem; }
.fil-add button:hover:not(:disabled) { border-style:solid; border-color:var(--fg); color:var(--fg); }
.fil-add button:disabled { opacity:.4; cursor:not-allowed; }
.fil-drop-hint { font-size:.62rem; color:var(--dim); opacity:0; transition:opacity .12s; }
.fil-group.drop-inside .fil-drop-hint { opacity:1; }
.fil-empty-drop { font-size:.66rem; color:var(--dim); border:1px dashed var(--line2);
  border-radius:3px; padding:.3rem .45rem; }

/* contextual field/value palette */
.fil-context { display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--line);
  border-radius:3px; padding:.4rem; background:rgba(255,255,255,.02); }
.fil-context-head, .fil-value-head { display:flex; align-items:center; gap:.4rem;
  font-size:.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.fil-field-palette, .fil-value-palette { display:flex; flex-wrap:wrap; gap:.25rem;
  max-height:10rem; overflow:auto; }
.fil-field-palette button, .fil-value-palette button { display:flex; gap:.35rem; align-items:baseline;
  background:none; border:1px solid var(--line2); border-radius:3px; color:var(--fg);
  font-family:var(--mono); font-size:11px; padding:.1rem .4rem; cursor:pointer; }
.fil-field-palette button:hover, .fil-value-palette button:hover { border-color:var(--fg); }
.fil-field-palette button.active, .fil-value-palette button.active { background:var(--inv-bg);
  border-color:var(--inv-bg); color:var(--inv-fg); }
.fil-palette-empty, .fil-palette-more { font-size:.66rem; color:var(--dim); line-height:1.45; }

/* === panel: filter_strip (owned by panels/filter_strip.rs) === */
.fst { display:flex; flex-direction:column; gap:.4rem; height:100%; min-height:0; }
.fst-empty { color:var(--dim); font-size:.72rem; }
.fst-head { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:.35rem; }
.fst-k { color:var(--fg); font-size:.72rem; }
.fst-sep { width:1px; align-self:stretch; background:var(--line); }
.fst-toggle { background:#050710; color:var(--fg); border:1px solid #40444C;
  font-family:var(--mono); font-size:11px; padding:.1rem .4rem; cursor:pointer; }
.fst-toggle:hover { border-color:var(--fg); }
.fst-clear { margin-left:auto; color:#ff3b3b; }
.fst-rows { display:flex; flex-direction:column; gap:.3rem; overflow:auto; min-height:0; }
.fst-row { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.fst-comb.dim { color:var(--dim); border-color:transparent; background:transparent; }
/* Chips are panel-kit badges (`.badge-*` classes ship in panel_kit::CSS). */

/* === panel: metrics (owned by panels/metrics.rs) === */
.metrics-panel { display:flex; flex-direction:column; gap:.35rem; font-size:11.5px; }
.metrics-panel hr { border:none; border-top:1px solid var(--line); margin:.25rem 0; width:100%; }
.metrics-actions { display:flex; gap:.4rem; }
.metrics-live { display:flex; align-items:center; gap:.35rem; cursor:pointer; }
.metrics-counts { font-variant-numeric:tabular-nums; white-space:pre; }
.metrics-hint { color:var(--dim); font-size:.72rem; line-height:1.5; }
.metrics-panel .subgroup { color:var(--dim); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; }
.metric-row { display:flex; align-items:center; gap:.5rem; padding:.1rem 0; }
.metric-row.highlighted { background:var(--inv-bg); color:var(--inv-fg); border-radius:3px;
  padding:.1rem .25rem; }
.metric-row .pin { background:none; border:1px solid transparent; border-radius:3px;
  padding:.05rem .25rem; cursor:pointer; opacity:.45; font-size:11px; }
.metric-row .pin:hover { border-color:var(--line2); opacity:1; }
.metric-row .pin.on { background:var(--inv-bg); opacity:1; }
.metric-row.highlighted .pin.on { background:var(--bg); }
.metric-label { flex:1; }
.metric-value { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.metric-value.weak { color:var(--dim); }

/* === panel: instances (owned by panels/instances.rs) === */
.inst { display:flex; flex-direction:column; gap:.45rem; font-size:11.5px; height:100%;
  min-height:0; overflow:auto; }
.inst-subhead { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.inst-sep { border:none; border-top:1px solid var(--line); margin:.15rem 0; width:100%; }
.inst-row { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.inst-flex { flex:1; }
.inst-cap, .inst-ts { color:var(--dim); font-size:11px; font-family:var(--mono);
  font-variant-numeric:tabular-nums; }
.inst-src { font-size:12px; }
.inst-small { padding:.15rem .45rem; font-size:11px; }
.inst-timeline { max-height:220px; overflow:auto; display:flex; flex-direction:column;
  gap:.15rem; flex:none; }
.inst-hint { color:var(--dim); font-size:.72rem; font-style:italic; }
.inst-live { color:rgb(150,130,200); font-style:italic; font-size:12px; }
.inst-err { color:var(--red); font-size:.72rem; }
textarea.inst-code { width:100%; resize:vertical; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:3px; font-family:var(--mono); font-size:11px;
  line-height:1.5; padding:.4rem; }
textarea.inst-code:focus { outline:none; border-color:var(--fg); }
input.inst-line { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.3rem .45rem; font-family:var(--mono); font-size:11.5px; }
input.inst-line:focus { outline:none; border-color:var(--fg); }
.inst-danger { background:#aa3c3c; color:#fff; border-color:#aa3c3c; }
.inst-danger.armed { background:#dc4646; border-color:#dc4646; }
.inst-presets { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }

/* === panel: generate (owned by panels/generate.rs) === */
.gen { display:flex; flex-direction:column; gap:.4rem; font-size:11.5px; height:100%;
  min-height:0; overflow:auto; }
.gen-label { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.gen-hint { color:var(--dim); font-size:.72rem; line-height:1.5; }
.gen-sep { border:none; border-top:1px solid var(--line); margin:.25rem 0; width:100%; }
.gen-select { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line2);
  border-radius:3px; padding:.3rem .4rem; font-size:11.5px; }
.gen-params { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; }
.gen-params label { display:flex; flex-direction:column; gap:.15rem; color:var(--dim);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; }
.gen-params input { width:100%; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:3px; padding:.3rem .4rem;
  font-family:var(--mono); font-size:12px; }
.gen-params input:focus { outline:none; border-color:var(--fg); }
.gen-editor { width:100%; resize:vertical; line-height:1.5; white-space:pre;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:3px;
  font-family:var(--mono); font-size:12px; padding:.5rem; }
.gen-editor:focus { outline:none; border-color:var(--fg); }
.gen-actions { display:flex; align-items:center; gap:.5rem; }
.gen-status { color:var(--dim); font-size:.72rem; }
.gen-error { color:var(--red); font-family:var(--mono); font-size:11px;
  white-space:pre-wrap; overflow-wrap:anywhere; }

/* === panel: github (owned by panels/github.rs) === */
.gh-panel { display:flex; flex-direction:column; gap:.4rem; font-size:11.5px; height:100%;
  min-height:0; overflow:auto; }
.gh-label { color:var(--dim); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.gh-hint { color:var(--dim); font-size:.72rem; line-height:1.5; }
.gh-sep { border:none; border-top:1px solid var(--line); margin:.25rem 0; width:100%; }
.gh-input { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.3rem .4rem; font-family:var(--mono); font-size:12px; }
.gh-input:focus { outline:none; border-color:var(--fg); }
.gh-actions { display:flex; align-items:center; gap:.5rem; }
.gh-status { color:var(--dim); font-size:.72rem; }
.gh-error { color:var(--red); font-family:var(--mono); font-size:11px;
  white-space:pre-wrap; overflow-wrap:anywhere; }

/* === panel: timeline (owned by panels/timeline.rs) === */
.timeline-panel { display:flex; flex-direction:column; gap:.45rem; font-size:11.5px; }
.timeline-panel hr { border:none; border-top:1px solid var(--line); margin:.25rem 0; width:100%; }
.timeline-panel .subgroup { color:var(--dim); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.06em; }
.tl-hint { color:var(--dim); font-size:.72rem; line-height:1.5; }
.tl-transport { display:flex; gap:.4rem; }
.tl-row { display:flex; align-items:center; gap:.5rem; }
.tl-row .tl-label { flex:0 0 7.5rem; color:var(--dim); font-size:.7rem; }
.tl-row input[type=range] { flex:1; min-width:0; }
.tl-row .tl-val { font-family:var(--mono); font-variant-numeric:tabular-nums;
  min-width:3.5ch; text-align:right; }
.tl-readout { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:pre;
  font-size:11px; line-height:1.4; }

/* === panel: debug (owned by panels/debug.rs) === */
.dbg { display:flex; flex-direction:column; gap:.35rem; height:100%; overflow-y:auto;
  font-size:.74rem; }
.dbg-modes { display:flex; gap:.3rem; flex:none; }
.dbg-mode { background:none; border:1px solid var(--line); color:var(--dim);
  border-radius:3px; padding:.15rem .55rem; font:inherit; font-size:.72rem; cursor:pointer; }
.dbg-mode.active { color:var(--fg); border-color:var(--fg); }
.dbg-evhead { color:#a0a0a0; font-family:var(--mono); font-size:11px; flex:none; }
.dbg-scroll { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
  gap:.15rem; }
.dbg-empty { color:#8c8c8c; font-style:italic; font-size:11px; }
.dbg-evrow { display:flex; gap:.45rem; align-items:baseline; font-family:var(--mono);
  font-size:11px; }
.dbg-time { color:#8c8c8c; flex:none; }
.dbg-src { color:#3bff7a; flex:none; }
.dbg-msg { color:#d2d2d2; overflow-wrap:anywhere; }
.dbg-actions { flex:none; }
.dbg-btn { background:none; border:1px solid var(--line); color:var(--fg); border-radius:3px;
  padding:.12rem .5rem; font:inherit; font-size:.7rem; cursor:pointer; }
.dbg-btn.danger { color:#ff3b3b; border-color:#ff3b3b; }
.dbg-dotrow { display:flex; align-items:center; gap:.4rem; }
.dbg-dot { width:10px; height:10px; flex:none; }
.dbg-dot.green { background:#3bff7a; }
.dbg-dot.yellow { background:#ffd83b; }
.dbg-dot.red { background:#ff3b3b; }
.dbg-dotlabel { font-family:var(--mono); font-size:11px; color:#c8c8c8; }
.dbg-backend { font-family:var(--mono); font-size:11px; color:#a0a0a0; }
.dbg-statblock { display:flex; flex-direction:column; gap:.1rem; }
.dbg-stat { font-family:var(--mono); white-space:pre; font-size:12px; }
.dbg-stat.dim { font-size:11px; color:#b4b4b4; }
.dbg-grouplabel { color:#999; font-size:.74rem; margin-top:.15rem; }
.dbg-sub { font-family:var(--mono); font-size:10px; color:#a0a0a0; }
.dbg-chart { width:100%; height:70px; display:block; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:2px; }
.dbg-chart.tall { height:110px; }
.dbg-chartmax { font-family:var(--mono); font-size:9px; color:#787878; margin-bottom:.25rem; }
.dbg-sep { border-top:1px solid var(--line); margin:.3rem 0; }
.dbg-sep.danger-gap { margin-top:1.1rem; }
.dbg-stagelist { display:flex; flex-direction:column; gap:.15rem; }
.dbg-swatch { width:8px; height:8px; flex:none; }
.dbg-stagelabel { font-size:10px; color:#b4b4b4; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.dbg-stage .dbg-sub { color:#8c8c8c; }
.dbg-danger-label { color:#ff3b3b; font-size:.7rem; }

/* Debug: multi-axis performance chart legend */
.dbg-legend { display:flex; flex-direction:column; gap:.12rem; margin-top:.25rem; }
.dbg-legend-row { display:flex; align-items:center; gap:.45rem; font-size:10.5px; }
.dbg-legend-name { flex:0 0 7.5rem; color:var(--fg); }
.dbg-legend-stats { flex:1; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbg-legend-ymax { color:var(--dim); font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* ====================================================================== */
/* phase-4 anchor: appstate (instances/timeline/debug/filter attribution) */
/* — the AppState agent owns this block —                                 */
/* ====================================================================== */

/* ActionInstance cards (Instances panel ← command-palette registry) */
.inst-action-card { display:flex; flex-direction:column; gap:.2rem; margin:.3rem 0; }
.inst-action-head { display:flex; align-items:center; gap:.45rem; }
.inst-action-title { font-weight:600; }
.inst-action-id { color:var(--dim); font-size:10px; margin-left:auto; }
.inst-action-x { background:none; border:none; color:var(--dim); cursor:pointer; font-size:11px; }
.inst-action-x:hover { color:var(--fg); }
.inst-action-param { font-size:11px; color:var(--dim); padding-left:.5rem; }
.inst-sep { border:none; border-top:1px solid var(--line, #333); margin:.35rem 0; }

/* ====================================================================== */
/* phase-4 anchor: command palette                                        */
/* — the palette agent owns this block —                                  */
/* ====================================================================== */

/* Overlay shell: anchored center-top at 18% of the viewport, same as the
   egui Window anchor; the panel mirrors theme::floating_frame (translucent
   black backdrop, 1px BORDER stroke, 12px squircle radius). */
.cp-overlay { position:fixed; inset:0; z-index:5000; pointer-events:none;
  display:flex; justify-content:center; align-items:flex-start; }
.cp-panel { pointer-events:auto; margin-top:18vh; width:600px; max-width:90vw;
  background:rgba(0,0,0,.75); border:1px solid #40444c; border-radius:12px;
  padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.55);
  font-family:var(--mono); display:flex; flex-direction:column; }
.cp-panel.wide { width:980px; }

.cp-crumbs { display:flex; align-items:center; gap:.15rem; padding:.2rem .4rem .35rem; }
.cp-crumb { background:none; border:none; padding:0; color:var(--accent);
  font:inherit; font-size:11.5px; cursor:pointer; }
.cp-crumb:hover { text-decoration:underline; }
.cp-crumb + .cp-crumb::before { content:" / "; color:var(--dim); margin:0 .25rem; }

.cp-input { width:100%; box-sizing:border-box; height:28px; background:var(--bg);
  color:var(--fg); border:1px solid var(--line); border-radius:3px;
  padding:.3rem .5rem; font-family:var(--mono); font-size:12px; }
.cp-input:focus { outline:none; border-color:var(--fg); }
.cp-panel.wide .cp-input { width:calc(50% - 8px); }

.cp-body { display:flex; align-items:flex-start; gap:.4rem; margin-top:.3rem; min-height:0; }
.cp-list { flex:1 1 auto; max-height:60vh; overflow-y:auto; min-width:0; }
.cp-panel.wide .cp-list { flex:0 0 50%; min-width:280px; }

/* Rows: active bg #222834, focused title white, others soft TEXT. */
.cp-row { display:flex; justify-content:space-between; align-items:flex-start;
  gap:.6rem; padding:8px 12px; cursor:pointer; }
.cp-row.file { padding:6px 12px; }
.cp-row.active { background:#222834; }
.cp-row.disabled { opacity:.45; cursor:default; }
.cp-main { min-width:0; }
.cp-title { color:#d8d8dc; font-size:12px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.cp-row.active .cp-title { color:#fff; }
.cp-hit { color:#3b9bff; }
.cp-desc { color:#8c8c8c; font-size:10px; margin-top:.1rem; }
.cp-side { display:flex; align-items:center; gap:.5rem; flex:none; }
.cp-shortcut { color:#b4b4b4; font-size:10px; font-family:var(--mono); }
.cp-kind { color:#8c8c8c; font-size:9px; }
.cp-child { color:#8c8c8c; }

.cp-cat { color:#8c8c8c; font-size:10px; font-weight:600; padding:4px 12px 2px; }
.cp-sep { border-top:1px solid var(--line); margin:.3rem 0; }
.cp-empty { color:#8c8c8c; text-align:center; padding:16px 0; font-size:12px; }

/* File rows: full path with skim hits (yellow on a translucent yellow bg),
   folder as the dim secondary line — matching.rs::highlighted_path. */
.cp-path { color:#d8d8dc; font-size:12px; word-break:break-all; }
.cp-row.active .cp-path { color:#fff; }
.cp-path-hit { color:#ffd83b; background:rgba(255,213,74,.19); }
.cp-folder { color:#787878; font-size:10px; margin-top:.1rem; }

/* Right pane: NodeMeta rendered as YAML-ish text, mono, no wrap. */
.cp-preview { flex:1 1 auto; max-height:60vh; overflow:auto; min-width:200px;
  border-left:1px solid var(--line); padding-left:.4rem; }
.cp-preview-doc { margin:0; font-family:var(--mono); font-size:11px; line-height:1.5;
  color:var(--fg); white-space:pre; }
.cp-preview-hint { color:var(--dim); font-size:11px; padding:8px; }
.cp-preview-err { color:#ff3b3b; font-size:11px; padding:8px; }

/* Parameter form mode. */
.cp-form { display:flex; flex-direction:column; gap:.25rem; padding:10px 12px; }
.cp-form-title { font-size:13px; font-weight:600; color:var(--fg); }
.cp-form-label { font-size:12px; font-weight:600; color:var(--fg); margin-top:.3rem; }
.cp-form-in { background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:3px; padding:.3rem .5rem; font-family:var(--mono); font-size:12px;
  margin-top:.25rem; max-width:100%; }
.cp-form-in:focus { outline:none; border-color:var(--fg); }
.cp-form-in.num { width:7rem; }
.cp-form-check { display:flex; align-items:center; gap:.4rem; font-size:12px;
  color:var(--fg); margin-top:.25rem; cursor:pointer; }
.cp-form-multi { display:flex; flex-direction:column; gap:.15rem; }
.cp-err { color:#ff3b3b; font-size:10px; margin-top:.15rem; }
.cp-form-btns { display:flex; justify-content:flex-end; gap:.4rem; margin-top:.6rem; }

/* ====================================================================== */
/* phase-4 anchor: anchored hover/click cards + focus sets                */
/* — the anchored-cards agent owns this block —                           */
/* ====================================================================== */

/* World-anchored node cards (anchored.rs). The layer is hit-transparent;
   the cards themselves take pointer events (egui interactable(true)). */
.anch-layer { position:fixed; inset:0; pointer-events:none; z-index:2500; }
.anch-card { position:fixed; width:360px; box-sizing:border-box; pointer-events:auto;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border:1px solid var(--line2); border-radius:10px; /* corner_radius parity */
  padding:8px; font-size:11.5px; color:var(--fg);
  box-shadow:0 6px 24px rgba(0,0,0,.35); }
.anch-card.promoted { width:380px; }
.anch-title { display:flex; align-items:center; gap:.45rem; min-width:0; }
.anch-glyph { color:var(--dim); font-size:10px; }
.anch-name { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anch-close { background:none; border:none; color:var(--dim); cursor:pointer;
  font-size:12px; padding:0 .15rem; line-height:1; }
.anch-close:hover { color:var(--fg); }
.anch-path { color:var(--dim); font-family:var(--mono); font-size:10px; margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anch-tags { color:var(--accent); font-size:10.5px; margin-top:2px; }
.anch-sep { border:none; border-top:1px solid var(--line); margin:.4rem 0; }
.anch-body { white-space:pre-wrap; color:var(--fg); font-size:10.5px; line-height:1.45;
  max-height:11em; overflow:hidden; word-break:break-word; }
.anch-metrics { display:grid; grid-template-columns:repeat(2, 1fr); gap:.1rem .8rem; margin-top:.35rem; }
.anch-metric { display:flex; justify-content:space-between; gap:.5rem; font-size:10.5px; }
.anch-metric .k { color:var(--dim); }
.anch-metric .v { font-variant-numeric:tabular-nums; }
.anch-actions { display:flex; gap:.4rem; margin-top:.45rem; }

/* Tether (card → live projected anchor) and its endpoints. The line is a
   1px div rotated about its left edge; the off-screen arrow is a CSS
   triangle rotated to the anchor's bearing. */
.anch-tether { position:fixed; height:1px; background:var(--line2);
  transform-origin:0 50%; pointer-events:none; z-index:2499; }
.anch-dot { position:fixed; width:5px; height:5px; border-radius:50%; background:var(--fg);
  transform:translate(-50%,-50%); pointer-events:none; z-index:2499; }
.anch-arrow { position:fixed; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:10px solid var(--line2);
  transform-origin:0 50%; pointer-events:none; z-index:2499; }

/* ====================================================================== */
/* phase-4 anchor: inspector + document parity                            */
/* — the inspector agent owns this block —                                */
/* ====================================================================== */

/* Inspector: active-filter strip, tag browser, sections, node pills. */
.ins-id { font-weight:700; font-size:12.5px; word-break:break-all; }
.ins-strip { display:flex; flex-wrap:wrap; gap:4px; }
.ins-rule { border-top:1px solid var(--line); margin:.35rem 0; }
.ins-note { color:var(--dim); font-style:italic; font-size:11px; padding:.2rem 0; }
.ins-count { color:var(--dim); font-size:10.5px; }
.ins-tagbrowse { display:flex; flex-direction:column; gap:.35rem; }
.ins-tagtitle { font-weight:600; font-size:12px; }
.ins-search { display:flex; gap:.4rem; align-items:center; }
.ins-search input.filter { flex:1; }
.ins-chips, .ins-pills { display:flex; flex-wrap:wrap; gap:4px; }
.ins-pill { display:inline-flex; }
.ins-section { margin-top:.4rem; }
.ins-section summary { cursor:pointer; font-size:11.5px; color:var(--fg); user-select:none; }
.ins-section[open] summary { margin-bottom:.3rem; }

/* Inspector: leftover-frontmatter grid (long text / nested JSON / nulls). */
.ins-fmgrid { display:flex; flex-direction:column; gap:.25rem; }
.ins-fmrow { display:flex; gap:.5rem; font-size:11px; }
.ins-fmkey { flex:0 0 6.5rem; color:var(--dim); font-size:10.5px; overflow:hidden;
  text-overflow:ellipsis; }
.ins-fmtext { max-height:120px; overflow:auto; white-space:pre-wrap; flex:1; }
.ins-fmjson { max-height:160px; overflow:auto; white-space:pre-wrap; flex:1; margin:0;
  background:#060606; padding:.3rem .45rem; border-radius:3px; font-size:10.5px; }

/* Document: page-viewer tab strip, save row, source editor + gutter. */
.docv { display:flex; flex-direction:column; gap:.45rem; height:100%; min-height:0; }
.doc-tabs { display:flex; gap:.3rem; align-items:center; }
.doc-tab { background:var(--bg); color:var(--dim); border:1px solid var(--line2);
  border-radius:3px; padding:.15rem .55rem; cursor:pointer; font:inherit; font-size:11px; }
.doc-status { margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
  font-size:10.5px; }
.doc-dim { color:var(--dim); font-size:10.5px; }
.doc-unsaved { color:var(--yellow); font-size:10.5px; }
.doc-saved { color:var(--green); font-size:10.5px; animation:doc-saved-fade 2s forwards; }
@keyframes doc-saved-fade { from { opacity:1; } to { opacity:0; } }
.doc-saverow { display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--line); padding-bottom:.4rem; }
.doc-retry { color:var(--red); border-color:var(--red); }
.doc-err { color:var(--red); font-size:10.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.doc-stats { margin-left:auto; color:var(--dim); font-size:10.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.doc-find { display:flex; align-items:center; gap:.45rem; }
.doc-find input.doc-findin { flex:0 1 180px; }
.doc-body { flex:1; min-height:0; overflow:auto; }
.doc-srcwrap { display:flex; align-items:flex-start; background:#060606; border-radius:3px; }
.doc-gutter { margin:0; padding:.35rem .35rem .35rem .5rem; text-align:right; color:#6e6e6e;
  background:#0b0b0b; user-select:none; font-size:12px; line-height:1.55; min-width:2.5ch; }
textarea.doc-src { flex:1; resize:none; overflow:hidden; border:0; background:transparent;
  color:var(--fg); font-family:var(--mono); font-size:12px; line-height:1.55;
  padding:.35rem .5rem; }
textarea.doc-src:focus { outline:none; }

/* ====================================================================== */
/* phase-4 anchor: client-side tvix eval (layout seeds, generate inline)  */
/* — the tvix agent owns this block —                                     */
/* ====================================================================== */

/* ====================================================================== */
/* Sessions view: topbar switcher + world/VCS/GPU panels                  */
/* ====================================================================== */
.view-switch { display:inline-flex; gap:2px; margin-left:1rem; }
.view-btn { background:transparent; color:var(--dim); border:1px solid var(--line2);
  border-radius:3px; font:inherit; padding:0 .6rem; cursor:pointer; }
.doc-tab.active, .view-btn.active, .btn.branch.active { color:var(--fg); border-color:var(--fg); }
.view-btn:hover { color:var(--fg); border-color:var(--fg); }
.conflict-row { border:1px solid var(--line2); border-radius:3px; padding:.35rem .5rem;
  margin-bottom:.35rem; }
.session-status { background:var(--bg); border:1px solid var(--line2); border-radius:3px;
  padding:.5rem; max-height:16rem; overflow:auto; white-space:pre-wrap; }

/* selection card / chip / why — shared primitives for one-of-N
   pickers. The existing .lay-card-* / .importer-card-* / .lay-chip /
   .importer-chip rules below remain as compatibility shims for the
   migration; new code uses the .select-card-* names so both layout
   and importer selection can share markup. */
.select-card {
  display:flex; flex-direction:column; gap:.3rem; text-align:left;
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:6px; padding:.55rem .65rem; cursor:pointer;
}
.select-card:hover:not(:disabled) { border-color:var(--fg); }
.select-card:focus-visible { outline:1px solid var(--fg); outline-offset:2px; }
.select-card[aria-pressed="true"] { border-color:var(--accent); }
.select-card[data-viewing="true"] {
  border-color:#655123; box-shadow:inset 0 0 0 1px #655123;
}
.select-card[data-default="true"][data-viewing="false"] {
  border-color:#28557e;
}
.select-card[data-ghost="true"] { border-style:dashed; }
.select-card:disabled { opacity:.5; cursor:not-allowed; }
.select-card-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.5rem;
}
.select-card-title { display:flex; min-width:0; flex-direction:column; gap:.1rem; }
.select-card-title h3 {
  margin:0; color:var(--fg); font-size:.78rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis;
}
.select-card-subtitle {
  color:var(--dim); font-family:var(--mono); font-size:.66rem;
  overflow-wrap:anywhere;
}
.select-card-chips {
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem;
  align-items:center;
}
.select-card-chip {
  border:1px solid var(--line2); border-radius:999px; padding:.08rem .32rem;
  color:var(--dim); font-size:.58rem; letter-spacing:.04em;
  text-transform:uppercase;
}
.select-card-desc {
  margin:0; color:var(--dim); font-size:.68rem; line-height:1.45;
}
.select-card-why { color:var(--yellow); font-size:.62rem; }

/* Chip colours shared by both pickers. Engine chips (kind/proc) and
   importer badges (kind/viewing/read-only) render through the same
   .select-card-chip base; the suffix class carries the colour only. The
   .importer-badge.* rules above double as the importer chip colours. */
.select-card-chip.kind-physics { color:var(--blue); border-color:var(--blue); }
.select-card-chip.kind-static { color:var(--pink); border-color:var(--pink); }
.select-card-chip.kind-remote { color:var(--dim); }
.select-card-chip.proc-gpu { color:#3fb950; border-color:#3fb950; }
.select-card-chip.proc-cpu { color:var(--dim); }
.select-card-chip.proc-cluster { color:var(--accent); border-color:var(--accent); }

/* The layout gallery's running engine keeps its green glow. Without this
   override the generic [data-viewing="true"] rule above (equal specificity,
   later in the sheet) would paint the active engine card yellow. */
.select-card.lay-card.active { border-color:#3fb950;
  box-shadow:0 0 0 1px #3fb950, 0 0 14px -6px #3fb950; }