:root {
  --bg0: #0a0e17;
  --bg1: #0d1220;
  --bg2: #131a2b;
  --bg3: #182238;
  --line: #1e2942;
  --line2: #2c3a5c;
  --text: #e6ebf4;
  --muted: #8b96ab;
  --faint: #74839e;
  --accent: #38bdf8;
  --accent-dim: #0e2a40;
  /* Active text on an accent-dim fill and link text: tinted per theme so a
     light page does not show the dark palette's pale sky blue on pale blue. */
  --accent-strong: #7dd3fc;
  --link: #38bdf8;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over every author display rule (flex tiles,
   grid rows, ...); the browser default alone loses that fight. */
[hidden] { display: none !important; }

/* Text for screen readers only (a live status line, say). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg0);
  /* Dragging on the canvas must never start a text selection (net_draw does the same). */
  user-select: none;
  -webkit-user-select: none;
}

#app {
  height: 100vh;
  height: 100dvh; /* a mobile browser's toolbars come out of the page, not the canvas */
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 248px 1fr;
  grid-template-areas:
    "toolbar toolbar"
    "palette canvas";
}

/* ---- Toolbar ---- */
#toolbar {
  grid-area: toolbar;
  display: flex;
  flex-wrap: wrap; /* on narrow windows the groups flow onto a second row rather than clipping */
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
}

#brand { display: flex; align-items: center; gap: 8px; margin-right: 2px; }
.brand-name { font-weight: 800; letter-spacing: 0.2px; font-size: 15px; }

#title {
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
  min-width: 0;
  font-size: 13px;
}
#title:focus { outline: none; border-color: var(--accent); }
#project-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; width: 190px; flex: none; }
#save-status-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#toolbar #btn-projects[data-state=error] { color: #fbbf24; }
html[data-theme="light"] #toolbar #btn-projects[data-state=error] { color: #92400e; }
#btn-projects { position: relative; }
#btn-projects .projects-count { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: #0b1220; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; }
#btn-projects .projects-count:empty { display: none; }
#btn-projects[data-state=error] .projects-count { background: #fbbf24; }
#projects-menu { position: fixed; z-index: 30; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 4px; background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
#projects-menu button { display: block; width: 100%; background: none; border: none; border-radius: 7px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-family: inherit; color: var(--text); text-align: left; }
#projects-menu button:hover, #projects-menu button:focus-visible { background: var(--bg3); outline: none; }
#projects-menu button:disabled { opacity: .5; cursor: default; }
#projects-menu button[aria-checked="true"], #projects-menu button[aria-checked="true"]:hover { background: var(--accent-dim); }
#projects-menu button[aria-checked="true"] .example-name { color: var(--accent-strong); }
#projects-menu button small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
#projects-menu .menu-group { margin: 8px 10px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--faint); user-select: none; }
#projects-menu .menu-group:first-child { margin-top: 4px; }
#projects-menu p { margin: 6px 10px 8px; font-size: 11px; color: var(--muted); line-height: 1.4; }
#projects-menu .project-save-status { display: grid; gap: 3px; padding: 8px 10px; font-size: 12px; }
#projects-menu .project-save-status small { color: var(--muted); font-size: 11px; }
#projects-menu .project-save-status[data-state=error] { color: #fbbf24; }
html[data-theme="light"] #projects-menu .project-save-status[data-state=error] { color: #92400e; }

.group {
  display: flex;
  gap: 1px;
  align-items: center;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px;
}
.push-right { margin-left: auto; }

#toolbar :is(button, a) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 7px;
  padding: 6px 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}
#toolbar a { gap: 6px; text-decoration: none; }
#toolbar :is(button, a) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#toolbar :is(button, a):hover:not(:disabled) { color: var(--text); background: var(--bg3); }
#toolbar button:disabled { opacity: 0.35; cursor: default; }
#toolbar button.active { background: var(--accent-dim); color: var(--accent-strong); }
/* ---- More menu ---- */
.more-wrap { position: relative; display: flex; }
#more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; gap: 1px; padding: 6px;
  background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
#more-menu[hidden] { display: none; }
#toolbar #more-menu :is(button, a) {
  position: relative; width: 100%; justify-content: flex-start; gap: 0;
  padding: 7px 30px 7px 9px; border-radius: 6px; font-size: 0; text-align: left;
}
#toolbar #more-menu :is(button, a) > svg { margin-right: 10px; flex: none; }
#toolbar #more-menu :is(button, a)::after { content: attr(data-menu-label); font-size: 12.5px; white-space: nowrap; }
#toolbar #more-menu .rec-dot { margin: 0 4px; }
#toolbar #more-menu [aria-pressed=true]::before {
  content: '✓'; position: absolute; right: 10px; font-size: 12px; color: var(--accent);
}
#toolbar #more-menu button.active { background: transparent; color: var(--text); }
#toolbar #more-menu :is(button, a):hover:not(:disabled) { background: var(--bg3); color: var(--text); }
#toolbar #more-menu :is(button, a):disabled { opacity: .45; }
.more-sep { height: 1px; margin: 4px 6px; background: var(--line); }
html[data-theme="light"] #more-menu { background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); }
#btn-check { position: relative; }
#btn-check .check-count {
  position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  background: #f59e0b; color: #1a1205; pointer-events: none;
}
#btn-check .check-count[data-level=error] { background: #ef4444; color: #fff; }
#btn-check .check-count[hidden] { display: none; }
#toolbar :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#zoom-label { font-family: var(--mono); font-size: 11.5px; min-width: 36px; text-align: center; }

/* Keep the editor's complete toolbar on one row at ordinary desktop widths.
   Narrower windows wrap the groups; wider ones retain the roomier spacing. */
@media (min-width: 1366px) and (max-width: 1699px) {
  #app #toolbar { gap: 2px; }
  #app #toolbar :is(button, a) { padding-inline: 3px; }
  #project-heading { width: 160px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  /* Leave room for wider system fonts while keeping the guide accessible. */
  #toolbar #btn-help { gap: 0; }
  #btn-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Palette ---- */
#palette {
  grid-area: palette;
  overflow-y: auto;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  padding: 12px 12px 24px;
}
#palette h3 {
  margin: 16px 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--faint);
  user-select: none;
}
#palette-search + h3 { margin-top: 4px; }
#palette-search {
  width: 100%;
  margin: 0 0 12px;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
}
#palette-search:focus { outline: none; border-color: var(--accent); }
#palette-search::placeholder { color: var(--faint); }
#palette-search::-webkit-search-cancel-button { filter: invert(0.6); }
#palette h3.collapsed { opacity: 0.6; }
/* The fold control is a real button inside the heading, drawn as the heading
   text itself so the look is unchanged; Tab reaches it and aria-expanded
   says what it will do. */
#palette h3 .cat-toggle {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; border-radius: 4px;
}
#palette h3 .cat-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 12px;
  padding: 12px 6px 10px;
  cursor: grab;
  font-size: 11.5px;
  font-family: inherit;
  text-align: center;
  line-height: 1.25;
}
.palette-item:hover { border-color: var(--line2); color: var(--text); background: var(--bg3); }
.palette-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.palette-item .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.palette-item .badge svg { width: 18px; height: 18px; }

/* ---- Canvas ---- */
#canvas-wrap { grid-area: canvas; position: relative; overflow: hidden; }
#canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg0);
  touch-action: none;
  /* Keep canvas focus for shortcuts without the browser's full-frame ring. */
  outline: none;
}
#canvas.panning { cursor: grabbing !important; }
#canvas.tool-pan { cursor: grab; }
#canvas.tool-wire g.node { cursor: crosshair; }

/* Canvas objects, net_draw style: hover and flow effects are pure CSS, so
   moving the pointer or animating never rebuilds the SVG. */
g.node { cursor: move; }
g.zone { cursor: move; }
.ports { opacity: 0; transition: opacity 0.13s; }
g.node:hover .ports,
#canvas.tool-wire .ports,
#canvas.drafting .ports { opacity: 1; }
.port { cursor: crosshair; }
.portg:hover .port,
.portg[data-hot] .port { stroke-width: 2.5; }
.portg[data-hot] .port { stroke: #7dd3fc; }
.port-name { opacity: 0; transition: opacity 0.13s; }
.portg:hover .port-name,
.portg[data-hot] .port-name { opacity: 1; }
.wire { cursor: pointer; }
.whandle { cursor: crosshair; }
/* While one end is being dragged, the old run fades and the draft leads. */
.wire.rewiring .vis, .wire.rewiring rect, .wire.rewiring text { opacity: 0.3; }
.wire:hover .vis { stroke: #9db2d0; }
.wire.sel .vis { stroke: #7dd3fc; }
.vis.anim { animation: dashflow 0.75s linear infinite; }
@keyframes dashflow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -28; } }
.fxhalo.anim { animation: fxpulse 1.5s ease-in-out infinite; }
@keyframes fxpulse { 0%, 100% { stroke-opacity: 0.22; } 50% { stroke-opacity: 0.85; } }
.hl.anim, .hl-wire.anim { animation: hlpulse 1.6s ease-in-out infinite; }
@keyframes hlpulse { 0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 0.95; } }
.blink { animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .vis.anim, .fxhalo, .blink, .hl.anim, .hl-wire.anim { animation: none; }
}

/* Bus code pill, as drawn on the wires; reused by the legend and bus picker. */
.bus-chip {
  display: inline-block;
  flex: none;
  min-width: 38px;
  text-align: center;
  background: #0c1424;
  border: 1px solid #24304d;
  color: #8fa3c0;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  line-height: 1.5;
}

/* ---- Empty board start card ---- */
#empty-state {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 48px)); text-align: center; pointer-events: none;
  color: var(--muted);
}
#empty-state[hidden] { display: none; }
#empty-state h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
#empty-state p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-actions button {
  pointer-events: auto; background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.empty-actions button:hover { border-color: var(--accent); color: var(--accent); }
.empty-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app.presenting #empty-state { display: none; }

#hintbar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(13, 18, 32, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 14px;
  color: var(--faint);
  font-size: 11.5px;
  white-space: nowrap;
  pointer-events: none;
  /* Never wider than the canvas: the strip starts with the most used keys,
     so a narrow window trims the tail instead of clipping both ends. */
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#hintbar kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- Properties panel ----
   A floating card pinned to the top-right of the canvas: it hugs its content
   instead of running the full height like the attached palette column. It is
   positioned inside the canvas area, so it always sits below the toolbar
   however many rows the toolbar wraps to. */
#props {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;
  width: 262px;
  max-height: calc(100% - 28px - var(--ai-reserve, 0px)); /* ends above the assistant */
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px;
  overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
#props h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-strong); }

/* ---- Collapsible panels ----
   The header stays; the ▾ folds everything under it away and the panel hugs
   the header (remembered per panel across reloads). */
#props h3, #journey-panel h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-toggle {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.panel-toggle:hover { color: var(--text); border-color: var(--accent); }
#props.collapsed > :not(h3), #journey-panel.collapsed > :not(h3) { display: none; }
#props.collapsed, #journey-panel.collapsed { width: auto; min-width: 168px; padding: 10px 14px; overflow: hidden; }
#props.collapsed h3, #journey-panel.collapsed h3 { margin: 0; }
/* P (or the panels button) hides both right-hand panels entirely. */
#app.panels-hidden #props, #app.panels-hidden #journey-panel { display: none !important; }
/* B (or the palette button) hides the parts palette; the canvas takes the width. */
#app.palette-hidden { grid-template-columns: 0 1fr; }
#app.palette-hidden #palette { display: none; }
#props label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--faint); margin: 12px 0 4px; }
#props input[type="text"], #props textarea, #props select {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
}
#props input:focus, #props textarea:focus, #props select:focus { outline: none; border-color: var(--accent); }
#props textarea { min-height: 70px; resize: vertical; }
#props button.danger {
  margin-top: 16px;
  width: 100%;
  background: #2a1215;
  border: 1px solid #7f1d1d;
  color: #fca5a5;
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
#props button.danger:hover { background: #3b1519; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip {
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 999px;
  min-height: 26px;
  padding: 4px 11px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
}
.chips .chip:hover { color: var(--text); border-color: var(--accent); }
.chips .chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ---- Align group (multi-selection) ----
   Six across, so the align row reads as one row and the two distribute
   buttons fall onto the next by themselves. */
.align-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.align-grid .align-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 0;
  cursor: pointer;
  font-family: inherit;
}
.align-grid .align-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.align-grid .align-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.align-grid .align-btn:disabled { opacity: 0.35; cursor: default; }
.align-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--faint); }
.tidy-row { display: flex; gap: 6px; }
.tidy-row input {
  width: 72px;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}
.tidy-row input:focus { outline: none; border-color: var(--accent); }
.tidy-row button {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.tidy-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
.tidy-row button:disabled { opacity: 0.35; cursor: default; }

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches .swatch {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  font-size: 0;
}
.swatches .swatch:hover { border-color: var(--text); }
.swatches .swatch.active { border-color: #ffffff; box-shadow: 0 0 0 2px var(--accent); }
.swatches .swatch-auto {
  width: auto;
  background: var(--bg0);
  border: 2px solid var(--line2);
  color: var(--muted);
  font-size: 10.5px;
  font-family: inherit;
  padding: 0 9px;
}
.swatches .swatch-auto.active { border-color: var(--accent); color: var(--accent-strong); box-shadow: none; }

/* ---- Toast ---- */
#toast {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  z-index: 45;
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 9px 16px;
  color: var(--text);
  font-size: 12.5px;
  white-space: pre-line;
  max-width: 480px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
#toast[hidden] { display: none; }
#toast button {
  pointer-events: auto;
  margin-left: 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#toast button:hover { border-color: var(--accent); }
/* While presenting, sit above the caption + nav instead of overlapping them. */
#app.presenting #toast { bottom: 132px; }

/* ---- Swimlane props rows ---- */
.lane-row { display: flex; gap: 6px; margin-bottom: 6px; }
.lane-row input { flex: 1; min-width: 0; }
.lane-row button {
  flex: none;
  width: 30px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.lane-row button:hover { color: #fca5a5; border-color: #7f1d1d; }
.lane-add {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.lane-add:hover { color: var(--text); border-color: var(--accent); }

/* ---- Legend ---- */
#legend {
  position: absolute;
  z-index: 22; /* above the assistant (21) that shares this corner; popovers are 30 */
  right: 14px;
  bottom: 14px;
  background: rgba(13, 18, 32, 0.95);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#legend h3 { margin: 0 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--faint); }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; line-height: 1.9; color: var(--muted); }

/* ---- Bus popover ---- */
#bus-popover {
  position: fixed;
  z-index: 30;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  max-height: 300px;
  overflow-y: auto;
}
#bus-popover button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 168px;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 6px 9px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
#bus-popover button:hover { background: var(--bg3); }

/* ---- Examples menu ---- */
#examples-menu {
  position: fixed;
  z-index: 30;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
}
#examples-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
#examples-menu button:hover { background: var(--bg3); }
#examples-menu .menu-group {
  margin: 8px 10px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--faint);
  user-select: none;
}
#examples-menu .menu-group:first-child { margin-top: 4px; }

/* ---- Inline editor ---- */
#inline-editor {
  position: fixed;
  z-index: 40;
  width: 200px;
  background: var(--bg1);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
}
#inline-editor:focus { outline: none; }

/* ---- Journey panel ---- */
#journey-panel {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;
  width: 282px;
  max-height: calc(100% - 28px - var(--ai-reserve, 0px));
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px;
  overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
#journey-panel h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-strong); }

/* ---- Assistant panel ----
   Bottom-right, with a fixed height so the thread does not jump as replies
   land. Header, status row, body, and composer are split by hairlines; it
   folds to its header like the other panels and publishes its height so
   they end above it. */
#assistant {
  position: absolute;
  z-index: 21;
  right: 14px;
  bottom: 54px;
  width: 380px;
  height: clamp(360px, 62%, 700px);
  max-height: calc(100% - 68px);
  display: flex;
  flex-direction: column;
  background: rgba(13, 18, 32, 0.96);
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#assistant.focused:not(.collapsed):not(.settings) { height: clamp(420px, 78%, 800px); }
#assistant[hidden] { display: none; }
#assistant h3 {
  margin: 0;
  padding: 9px 10px 9px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
/* The header doubles as the drag handle (src/ui/panel-drag.js): grab cursor,
   no selection or touch scrolling under it, and a focus ring for the arrow-
   key nudging. */
#assistant h3.dragging { cursor: grabbing; }
#assistant h3.panel-drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  flex: none;
}
.ai-tools { margin-left: auto; display: inline-flex; gap: 2px; }
#assistant .ai-icon-btn,
#assistant .panel-toggle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
}
#assistant .ai-icon-btn:hover:not(:disabled),
#assistant .panel-toggle:hover { color: var(--text); background: var(--bg3); border-color: var(--line2); }
#assistant .ai-icon-btn.active { color: var(--accent-strong); background: var(--accent-dim); }
#assistant .ai-icon-btn:disabled { opacity: 0.35; cursor: default; }
#assistant button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#assistant .ai-icon-btn .ai-ic { width: 15px; height: 15px; }
#assistant.collapsed { height: auto; width: auto; min-width: 168px; }
#assistant.collapsed > :not(h3) { display: none; }
#assistant.collapsed h3 { border-bottom: 0; }
#assistant.collapsed .ai-tools { display: none; }
#app.panels-hidden #assistant { display: none !important; }
#app.presenting #assistant { display: none; }
/* While a request runs the chrome is inert (no clicks, no Tab): a drag or an
   undo mid-request would cut into the assistant's single undo step. */
#app.ai-busy #toolbar button:not(#btn-assistant), #app.ai-busy #toolbar input, #app.ai-busy #palette, #app.ai-busy #props, #app.ai-busy #journey-panel { opacity: 0.55; }

/* Status row: a dot for the probe state, the model in mono; the whole row
   opens the settings. */
#ai-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 14px;
  background: var(--bg1);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  flex: none;
}
#ai-meta:hover { color: var(--text); background: var(--bg2); }
#ai-meta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ai-meta code { font-family: var(--mono); font-size: 10.5px; color: var(--text); }
#ai-meta .ai-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px rgba(86, 97, 121, 0.18); }
#ai-meta .ai-state { flex: none; font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); }
#ai-meta[data-state="ready"] .ai-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
#ai-meta[data-state="ready"] .ai-state { color: #4ade80; }
#ai-meta[data-state="single"] .ai-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
#ai-meta[data-state="single"] .ai-state { color: #fbbf24; }
#ai-meta[data-state="unset"] .ai-dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
#ai-meta[data-state="unset"] .ai-state { color: #f87171; }

/* Body: the thread scrolls; the settings sheet takes its place when open. */
#ai-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px; }
#ai-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
#assistant.settings #ai-thread, #assistant.settings #ai-actions, #assistant.settings #ai-foot { display: none; }
.ai-msg { border-radius: 10px; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.ai-msg.user {
  align-self: flex-end;
  max-width: 88%;
  background: var(--accent-dim);
  border: 1px solid #14395a;
  color: var(--text);
  padding: 7px 11px;
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant { color: var(--text); padding: 0 2px; }
.ai-msg.error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #fca5a5;
  padding: 8px 10px;
  font-size: 12.5px;
}
.ai-msg.error .ai-ic { color: #f87171; margin-top: 2px; }
/* Tool activity: one block per run, mono lines, a check per finished step
   and a spinner on the live one. */
.ai-activity { display: flex; flex-direction: column; gap: 5px; margin-left: 4px; padding: 4px 0 4px 10px; border-left: 2px solid var(--line); }
.ai-status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.ai-status .ai-ic { width: 12px; height: 12px; color: #4ade80; }
.ai-status.live { color: var(--muted); }
.ai-status.live .ai-ic { display: none; }
.ai-status.live::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin: 1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  border-top-color: var(--accent);
  animation: aispin 0.8s linear infinite;
}
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-typing { display: flex; gap: 4px; padding: 6px 4px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: aidots 1.2s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: 0.2s; }
.ai-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes aidots { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.ai-chips { display: flex; gap: 6px; margin-top: 8px; }
.ai-chips button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ai-chips button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ai-chips button:disabled { opacity: 0.4; cursor: default; }
.ai-chips .ai-ic { width: 12px; height: 12px; }

/* Starter actions are shown only with an empty conversation and draft. */
#ai-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; flex: none; }
#ai-actions .ai-intro { display: none; }
#ai-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 24px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  line-height: 16px;
  text-align: left;
}
#ai-actions button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
#ai-actions button:disabled { opacity: 0.5; cursor: default; }
#ai-actions button b { font-weight: 500; }
#ai-actions button small { display: none; }
#ai-actions .ai-act-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
#ai-actions .ai-act-ic .ai-ic { width: 13px; height: 13px; }
#ai-actions[hidden] { display: none; }
#ai-actions.cards { order: -1; }
#ai-actions.cards .ai-intro { grid-column: 1 / -1; display: block; margin: 2px 0 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
#ai-actions button span { min-width: 0; }

/* Composer: one field with the send button inside it. */
#ai-foot {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 65%;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 10px;
  border-top: 1px solid var(--line);
  background: var(--bg1);
}
#ai-options { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 8px; }
#ai-options > summary { display: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 3px 0; }
#assistant.focused #ai-options > summary { display: list-item; list-style-position: inside; }
#ai-options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#assistant.focused #ai-options[open] { max-height: min(240px, 28vh); }
.ai-options-content { padding: 2px 0; }
#ai-composer, #ai-usage { flex: none; }
#ai-usage:empty { display: none; }
#ai-composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 8px 8px 6px 12px;
}
#ai-composer:focus-within { border-color: var(--accent); }
#ai-input {
  display: block;
  width: 100%;
  min-height: 20px;
  max-height: 132px;
  resize: none;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 1px 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
  overflow-y: auto;
}
#assistant.focused #ai-input { min-height: 60px; max-height: min(220px, 24vh); }
#assistant.responding #ai-input { min-height: 20px; }
#ai-input::placeholder { color: var(--faint); }
#ai-input:disabled { color: var(--muted); }
.ai-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-hint { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.ai-hint kbd { font-family: var(--mono); font-size: 9.5px; color: var(--muted); background: var(--bg3); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
#ai-send, #ai-stop {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
#ai-send .ai-ic { width: 15px; height: 15px; stroke-width: 2; }
#ai-send:hover { color: var(--text); border-color: var(--accent); }
#ai-composer.has-text #ai-send { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-strong); }
#ai-composer.has-text #ai-send:hover { background: #12395a; }
#ai-stop { background: #2a1215; border-color: #7f1d1d; color: #fca5a5; }
#ai-stop:hover { background: #3b1519; border-color: #b91c1c; }
#ai-stop .ai-ic { width: 11px; height: 11px; fill: currentColor; stroke: none; }
#ai-usage { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 6px; min-height: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings sheet. */
#ai-settings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 2px 4px 0;
  font-size: 12px;
  color: var(--muted);
  scrollbar-gutter: stable;
}
#ai-settings label { display: flex; flex-direction: column; gap: 4px; }
#ai-settings label > span:first-child { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--faint); }
#ai-settings label.row { flex-direction: row; align-items: center; gap: 7px; color: var(--text); font-size: 12.5px; }
#ai-settings label.row input { accent-color: var(--accent); margin: 0; }
#ai-settings input[type="text"], #ai-settings input[type="url"], #ai-settings input[type="password"], #ai-settings select {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
}
#ai-model, #ai-base, #ai-key { font-family: var(--mono) !important; font-size: 12px !important; }
#ai-settings input:focus, #ai-settings select:focus { outline: none; border-color: var(--accent); }
#ai-settings input:disabled, #ai-settings select:disabled { opacity: 0.5; }
#ai-settings input::placeholder { color: var(--faint); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ai-keywrap { position: relative; display: flex; }
.ai-keywrap input { flex: 1; padding-right: 34px !important; }
.ai-keywrap .ai-icon-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
#ai-settings .ai-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#ai-settings .ai-buttons button {
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
#ai-settings .ai-buttons button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
#ai-settings .ai-buttons button:disabled { opacity: 0.5; cursor: default; }
#ai-settings #ai-save { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-strong); }
#ai-settings #ai-save:hover { background: #12395a; color: #bae6fd; }
.ai-result {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
}
.ai-result .ai-ic { margin-top: 2px; }
.ai-result.ok { border-color: rgba(74, 222, 128, 0.35); color: #bbf7d0; }
.ai-result.ok .ai-ic { color: #4ade80; }
.ai-result.warn { border-color: rgba(251, 191, 36, 0.35); color: #fde68a; }
.ai-result.warn .ai-ic { color: #fbbf24; }
.ai-result.err { border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
.ai-result.err .ai-ic { color: #f87171; }
.ai-result.wait { color: var(--muted); }
.ai-result.wait .ai-ic { display: none; }
.ai-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.ai-note a { color: var(--link); text-decoration: underline; }
.ai-privacy { padding-top: 10px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .ai-status.live::before, .ai-typing i { animation: none; }
}
.journey-step {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.journey-step .step-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.journey-step .step-num { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: none; }
.journey-step input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 12.5px;
  font-family: inherit;
}
.journey-step textarea {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
  min-height: 44px;
  resize: vertical;
}
.journey-step .step-actions { display: flex; gap: 4px; margin-top: 6px; }
.journey-step .step-actions button {
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
}
.journey-step .step-actions button:hover { color: var(--text); border-color: var(--line2); }
.journey-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.journey-actions button {
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.journey-actions button:hover:not(:disabled) { border-color: var(--accent); }
.journey-actions button:disabled { opacity: 0.4; cursor: default; }

/* ---- Present mode ---- */
#app.presenting #toolbar,
#app.presenting #palette,
#app.presenting #props,
#app.presenting #journey-panel,
#app.presenting #hintbar,
#app.presenting #legend { display: none; }
#app.presenting { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
#present-overlay {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  width: max-content;
}
#present-overlay[hidden] { display: none; }
#present-caption {
  background: rgba(13, 18, 32, 0.94);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 560px;
}
#present-caption:empty { display: none; }
#present-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 18, 32, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 10px;
}
#present-nav button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: inherit;
}
#present-nav button:hover { color: var(--text); background: var(--bg3); }
#present-counter { font-family: var(--mono); font-size: 11.5px; color: var(--muted); min-width: 46px; text-align: center; }

/* ---- Recording ---- */
.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
}
#btn-rec.recording { color: #fca5a5; background: #2a1215; }
#btn-rec.recording .rec-dot { animation: rec-blink 1.2s infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { #btn-rec.recording .rec-dot { animation: none; } }

/* Native <dialog>s opened with showModal(): Escape, focus trapping, and
   focus restore come from the browser. The element itself fills the viewport
   as the dimmed backdrop so a click beside the card lands on the dialog. */
#rec-dialog,
#export-dialog,
#bom-dialog,
#drc-dialog,
#compare-dialog,
#part-dialog,
#import-dialog,
#shortcuts-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: rgba(4, 6, 12, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
}
#rec-dialog[open],
#export-dialog[open],
#bom-dialog[open],
#drc-dialog[open],
#compare-dialog[open],
#part-dialog[open],
#import-dialog[open],
#shortcuts-dialog[open] { display: flex; }
#rec-dialog::backdrop,
#export-dialog::backdrop,
#bom-dialog::backdrop,
#drc-dialog::backdrop,
#compare-dialog::backdrop,
#part-dialog::backdrop,
#import-dialog::backdrop,
#shortcuts-dialog::backdrop { background: transparent; }
.rec-card {
  width: 380px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.rec-card h3 { margin: 0 0 6px; font-size: 15px; }
.rec-card p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rec-card h4 { margin: 12px 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); }
.rec-card label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--text); }
.rec-card input[type="radio"] { accent-color: var(--accent); }
.rec-card input[type="file"] { font-size: 11px; color: var(--muted); }
#rec-audio.disabled { opacity: 0.4; pointer-events: none; }
.rec-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#rec-start {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7f1d1d;
  border: 1px solid #b91c1c;
  color: #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
#rec-start:hover { background: #991b1b; }
#rec-cancel {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
#rec-cancel:hover { color: var(--text); border-color: var(--line2); }

/* ---- Export + BOM dialogs ---- */
.dialog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; font-size: 12.5px; color: var(--muted); }
.dialog-row input[type="number"] {
  width: 88px;
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 12px;
}
.dialog-row input[type="number"]:focus { outline: none; border-color: var(--accent); }
.dialog-x, .dialog-unit { color: var(--faint); }
.dialog-check { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; cursor: pointer; }
.dialog-check input { accent-color: var(--accent); }

#export-dialog .rec-buttons button,
#bom-dialog .rec-buttons button,
#drc-dialog .rec-buttons button,
#compare-dialog .rec-buttons button,
#part-dialog .rec-buttons button,
#import-dialog .rec-buttons button,
#shortcuts-dialog .rec-buttons button {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
#export-dialog .rec-buttons button:hover,
#bom-dialog .rec-buttons button:hover,
#drc-dialog .rec-buttons button:hover,
#compare-dialog .rec-buttons button:hover,
#part-dialog .rec-buttons button:hover,
#import-dialog .rec-buttons button:hover,
#shortcuts-dialog .rec-buttons button:hover { border-color: var(--accent); }
#export-cancel, #bom-close { color: var(--muted); }

/* The shortcut overlay: two columns of groups on a wide screen, one on a
   narrow one, with the key column a fixed width so the descriptions line up. */
.shortcuts-card { width: 620px; max-width: 92vw; }
#shortcuts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; max-height: 62vh; overflow: auto; }
.sc-group h4 { margin: 10px 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); }
.sc-row { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 12.5px; color: var(--text); }
.sc-keys { flex: 0 0 108px; display: flex; gap: 3px; justify-content: flex-end; }
.sc-row kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
@media (max-width: 620px) { #shortcuts-list { grid-template-columns: 1fr; } }

.bom-card { width: 680px; max-width: 92vw; }
#bom-table { max-height: 320px; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; user-select: text; -webkit-user-select: text; }
#bom-table table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
#bom-table th, #bom-table td { text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
#bom-table td.wrap { white-space: normal; }
#bom-table th {
  color: var(--faint);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 1px;
  position: sticky;
  top: 0;
  background: var(--bg1);
}
#bom-table tr:last-child td { border-bottom: none; }
/* The total row is a th row, so undo the sticky heading treatment it would
   otherwise inherit and let it read as a footer instead. */
#bom-table tfoot th { position: static; text-transform: none; font-size: 11.5px; letter-spacing: 0; color: var(--text); border-top: 1px solid var(--line2); border-bottom: none; background: none; }
/* The summary lines sit inside the table's scroll box; index.html has no
   other slot for them. */
.bom-summary { margin: 0; padding: 7px 9px 0; color: var(--muted); font-size: 11.5px; }
.bom-summary:last-child { padding-bottom: 8px; }

.validation-coverage > p { margin: 0 0 10px; }
.validation-coverage > .drc-row { margin-bottom: 8px; }
.drc-incomplete { color: var(--muted); }
#drc-list { max-height: 320px; overflow: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.drc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
}
.drc-level {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 3px 8px;
}
.drc-level.error { color: #fca5a5; border: 1px solid #7f1d1d; background: #2a1215; }
.drc-level.warning { color: #fcd34d; border: 1px solid #92610e; background: #211a09; }
.drc-level.info { color: #93c5fd; border: 1px solid #1e40af; background: #0e1729; }
.drc-row .msg { flex: 1; }
.drc-row button {
  flex: none;
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
}
.drc-row button:hover { color: var(--text); border-color: var(--accent); }
.drc-clean { padding: 14px 4px; color: var(--muted); font-size: 13px; }

/* ---- Scrollbars ---- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b4c73; }

@media (prefers-reduced-motion: no-preference) {
  #toolbar button, .palette-item { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
}

.rdk-details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.rdk-details p { margin: 5px 0; font-size: 11px; line-height: 1.45; }
.rdk-details a { display: block; margin: 5px 0; font-size: 11px; color: var(--link); }
.rdk-details .rdk-finding { color: #d99b48; }
.rdk-details button { margin-top: 8px; width: 100%; padding: 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg0); color: var(--text); cursor: pointer; }
.rdk-details button:hover, .rdk-details button:focus-visible { border-color: var(--accent); }

/* Session sources: bounded scrolling keeps the composer reachable. */
.ai-documents {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 8px;
  font-size: 11px;
  min-width: 0;
}
.ai-document-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.ai-documents button, .ai-document-preview button {
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 7px;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.ai-documents button:hover:not(:disabled), .ai-document-preview button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ai-documents button:disabled, .ai-document-preview button:disabled { opacity: 0.5; cursor: default; }
.ai-documents :is(button, input, summary):focus-visible, .ai-document-preview :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-documents input[type="checkbox"] { accent-color: var(--accent); }
.ai-document-details summary { cursor: pointer; color: var(--muted); overflow-wrap: anywhere; }
.ai-document-details[open] { max-height: min(230px, 28vh); overflow-y: auto; }
.ai-document-note { font-size: 10px; line-height: 1.4; color: var(--muted); margin: 6px 0; }
.ai-document-list { display: grid; gap: 6px; }
.ai-document { border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.ai-document label { display: flex; align-items: flex-start; gap: 5px; overflow-wrap: anywhere; }
.ai-document label span { min-width: 0; }
.ai-document small { display: block; color: var(--muted); margin: 4px 0; }
.ai-document > div { display: flex; gap: 5px; }
.ai-document-warning, .ai-document-issues { color: #fbbf24; }
.ai-document-issues { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 5px; }
.ai-document-progress { color: var(--muted); overflow-wrap: anywhere; font-size: 10px; margin-top: 4px; }
.ai-document-preview {
  width: min(720px, 90vw);
  max-height: 85vh;
  background: var(--bg1);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 18px;
}
.ai-document-preview::backdrop { background: rgba(4, 6, 12, 0.6); }
.ai-document-preview h3, .ai-document-preview p { overflow-wrap: anywhere; }
.ai-document-preview pre { max-height: 55vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; font: 12px/1.5 var(--mono); }

/* ---- Part editor ---- */
.part-card { width: 780px; max-width: 94vw; max-height: 92vh; overflow: auto; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; }
.pe-row { display: flex; min-width: 0; gap: 10px; }
.pe-field { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--faint); }
.part-card input[type="text"], .part-card select, .part-card textarea {
  width: 100%; background: var(--bg0); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; text-transform: none; letter-spacing: 0;
}
.part-card input:focus, .part-card select:focus, .part-card textarea:focus { outline: none; border-color: var(--accent); }
.part-card textarea { resize: vertical; font-family: var(--mono); font-size: 11.5px; }
.pe-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.pe-tabs button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.pe-tabs button.active { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-dim); }
.pe-icons {
  display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 4px; max-height: 118px; overflow: auto;
  padding: 4px; border: 1px solid var(--line); border-radius: 8px;
}
.pe-icons button { background: none; border: 1px solid transparent; border-radius: 9px; padding: 0; cursor: pointer; }
.pe-icons button.active, .pe-icons button:hover { border-color: var(--accent); }
.pe-icons .badge, .custom-item .badge {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.pe-icons .badge svg { width: 18px; height: 18px; }
.badge b { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; font-style: normal; }
.pe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pe-table td { padding: 3px; vertical-align: middle; }
.pe-table td:first-child { width: 30%; }
.pe-table .dialog-check { font-size: 11.5px; white-space: nowrap; }
.pe-move { white-space: nowrap; text-align: right; }
.pe-move button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; font-family: inherit; margin-left: 2px;
}
.pe-move button:hover:not(:disabled) { color: var(--text); border-color: var(--line2); }
.pe-move button:disabled { opacity: 0.35; cursor: default; }
.pe-add {
  margin-top: 6px; background: none; border: 1px dashed var(--line2); color: var(--muted); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.pe-add:hover { color: var(--text); border-color: var(--accent); }
#pe-preview { width: 100%; height: 190px; background: var(--bg0); border: 1px solid var(--line); border-radius: 10px; }
#pe-preview .ports { opacity: 1; }
.pe-problems { margin: 8px 0 0; padding-left: 16px; font-size: 11.5px; color: #fca5a5; line-height: 1.5; }
.pe-footer { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
#pe-save:disabled { opacity: 0.45; cursor: default; }
#props button.secondary {
  margin-top: 14px; width: 100%; background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 8px; padding: 7px 11px; cursor: pointer; font-family: inherit; font-size: 13px;
}
#props button.secondary:hover { border-color: var(--accent); color: var(--accent-strong); }

/* ---- My parts (library) ---- */
#palette h3.my-parts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-parts-title { white-space: nowrap; }
.my-parts-tools { display: flex; gap: 2px; margin: -4px -2px -4px 0; }
.my-parts-tools button {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  background: transparent; border: none; border-radius: 6px; color: var(--muted); cursor: pointer;
}
.my-parts-tools button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.my-parts-tools button:hover { color: var(--text); background: var(--bg3); }
.my-parts-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.new-part-tile {
  font-family: inherit; color: var(--muted); cursor: pointer;
  background: transparent; border: 1px dashed var(--line2);
}
.new-part-tile .badge { background: var(--accent-dim); color: var(--accent); }
.new-part-tile .badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.new-part-tile:hover { color: var(--text); border-color: var(--accent); }
#palette h3.sub { margin-top: 10px; cursor: default; }
.custom-item { position: relative; }
/* A library tile is a wrapper around the real control: the place button fills
   it, and the edit/remove tools sit beside the button rather than inside it. */
.custom-item[data-template] { padding: 0; cursor: default; }
.custom-item .pi-place {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%;
  padding: 12px 6px 10px; background: none; border: 0; border-radius: inherit; color: inherit;
  font: inherit; line-height: inherit; text-align: center; cursor: grab;
}
.custom-item .pi-place:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.custom-item .pi-tools {
  position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; pointer-events: none;
}
.custom-item:hover .pi-tools, .custom-item:focus-within .pi-tools { opacity: 1; pointer-events: auto; }
.custom-item .pi-tools button {
  width: 24px; height: 24px; border-radius: 6px; background: var(--bg1); border: 1px solid var(--line2);
  color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; line-height: 1; font-family: inherit;
}
.custom-item .pi-tools button:hover { color: var(--text); border-color: var(--accent); }
.pi-adopt {
  margin-top: 2px; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-strong);
  border-radius: 6px; padding: 2px 6px; font-size: 10px; cursor: pointer; font-family: inherit;
}
.pi-adopt:hover { background: var(--accent); color: var(--bg0); }

/* Read-only exploration keeps the board's geometry and editing targets intact. */
#explore-panel {
  position: absolute; left: 16px; top: 16px; z-index: 12;
  width: 290px; max-width: calc(100% - 32px); max-height: calc(100% - 72px);
  overflow-y: auto; padding: 14px; border: 1px solid var(--line2);
  border-radius: 12px; background: var(--bg1); box-shadow: 0 12px 32px #0006;
}
#explore-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#explore-panel h3 { margin: 0; font-size: 13px; }
#explore-panel input, #explore-panel select {
  width: 100%; min-width: 0; padding: 7px; color: var(--text); background: var(--bg0);
  border: 1px solid var(--line2); border-radius: 6px; font: inherit; font-size: 12px;
}
.explore-controls { display: grid; gap: 10px; margin-top: 14px; }
.explore-controls label { display: grid; gap: 5px; font-size: 11px; color: var(--muted); }
#explore-panel p { color: var(--muted); font-size: 11px; line-height: 1.5; }
#explore-panel button { color: var(--text); background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; cursor: pointer; }
#explore-panel button:hover { background: var(--bg3); border-color: var(--accent); }
#explore-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#explore-results { display: grid; gap: 5px; max-height: 240px; overflow-y: auto; }
#explore-results button { display: grid; gap: 3px; width: 100%; text-align: left; overflow-wrap: anywhere; }
#explore-results small { color: var(--muted); font-family: var(--mono); }
#btn-explore.filtered { box-shadow: inset 0 -2px var(--accent); }
#canvas .explore-muted { opacity: 0.22; }
#canvas .wire.explore-match:not(.invalid) .vis { stroke: var(--accent); stroke-width: 2.6; }
#canvas .node.explore-match .card { stroke: var(--accent); }
#canvas .layer-diagram[data-depth="overview"] :is(.node, .wire):not([data-reading-focus]) [data-detail],
#canvas .layer-diagram[data-depth="normal"] .node:not([data-reading-focus]) [data-detail="fine"] { visibility: hidden; }
#app.presenting #explore-panel { display: none; }

.journey-step .step-actions { flex-wrap: wrap; }
.journey-step small { color: var(--muted); font-size: 10px; }
#canvas .story-muted { opacity: 0.2; }
#canvas .wire.story-match:not(.invalid) .vis { stroke: var(--accent); stroke-width: 3; }
#canvas .node.story-match .card { stroke: var(--accent); stroke-width: 2; }

.review-card { width: min(1000px, 90vw); max-height: 85vh; overflow: auto; padding: 22px; background: var(--bg1); color: var(--text); }
.compare-previews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.compare-previews section { min-width: 0; }
.compare-previews svg { width: 100%; height: 260px; background: var(--bg0); border: 1px solid var(--line2); }
#compare-changes details { border-bottom: 1px solid var(--line); padding: 10px 0; }
#compare-changes summary { cursor: pointer; }
#compare-changes table { width: 100%; table-layout: fixed; font-size: 12px; margin-top: 10px; }
#compare-changes td { overflow-wrap: anywhere; white-space: pre-wrap; padding: 5px; vertical-align: top; }
.compare-previews .delta-added { filter: drop-shadow(0 0 5px #34d399); }
.compare-previews .delta-removed { opacity: .6; filter: drop-shadow(0 0 5px #f87171); }
.compare-previews :is(.delta-changed, .delta-rewired) { filter: drop-shadow(0 0 5px #fbbf24); }
.compare-previews .delta-moved { filter: drop-shadow(0 0 5px #a78bfa); }
.compare-previews .delta-focus { filter: drop-shadow(0 0 8px #38bdf8); }
.compare-previews .delta-muted { opacity: .22; }
.change-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.change-legend span { border-left: 4px solid; padding-left: 6px; color: var(--text); }
.change-legend .legend-added { border-color: #34d399; }
.change-legend .legend-removed { border-color: #f87171; }
.change-legend :is(.legend-changed, .legend-rewired) { border-color: #fbbf24; }
.change-legend .legend-moved { border-color: #a78bfa; }
#ai-visual-preview label { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
[data-change-focus] { min-width: 0; max-width: 100%; font: inherit; padding: 7px 10px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; }
#interface-guide { border: 1px solid var(--line2); border-radius: 8px; padding: 12px; margin: 12px 0; }
#interface-guide li { margin: 8px 0; }
#interface-guide small { display: block; margin: 4px 0; }
@media (max-width: 650px) { .compare-previews { grid-template-columns: 1fr; } }

.check-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Only the selected tab was styled, so the other one fell back to the
   browser's default button; both are pills like the part editor's tabs. */
.check-tabs button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.check-tabs button:hover { color: var(--text); border-color: var(--line2); }
.check-tabs button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.drc-row .msg small { display: block; color: var(--muted); margin-top: 5px; }
/* The Power tab lists facts per rail rather than one sentence per finding. */
.power-fact { display: flex; gap: 8px; line-height: 1.6; }
.power-fact b { color: var(--muted); font-weight: 500; min-width: 108px; flex: none; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light; --bg0: #f8fafc; --bg1: #fff; --bg2: #eef2f7; --bg3: #e2e8f0;
  --line: #d8e0ec; --line2: #b5c1d2; --text: #1e293b; --muted: #52617a; --faint: #64748b;
  --accent: #0284c7; --accent-dim: #e0f2fe; --accent-strong: #0369a1; --link: #0369a1;
}
html[data-theme="light"] :is(#props, #journey-panel, #assistant, #legend, #bus-popover, #examples-menu, #hintbar, #toast) { background: rgba(255,255,255,.97); }
html[data-theme="light"] .bus-chip { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
html[data-theme="light"] .swatches .swatch.active { border-color: #334155; }
html[data-theme="light"] :is(.ai-msg.error, .ai-result.err) { color: #b91c1c; }
html[data-theme="light"] .ai-result.ok { color: #166534; }
html[data-theme="light"] .ai-result.warn { color: #92400e; }

.review-card { border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 20px 70px #0004; }

/* Compact story controls keep the board visible on small screens. */
#present-overlay { width: min(900px, calc(100% - 24px)); max-width: 900px; bottom: 12px; gap: 6px; padding: 10px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 12px; }
#present-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#present-chapters { display: flex; gap: 6px; overflow-x: auto; width: 100%; }
#present-chapters button { flex: 0 0 auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#present-chapters button[aria-current="true"] { border-color: var(--accent); color: var(--text); background: var(--bg3); }
#present-caption { background: transparent; border: 0; padding: 2px 8px; max-height: 88px; overflow: auto; white-space: pre-wrap; }
#present-nav { flex-wrap: wrap; justify-content: center; gap: 4px; background: transparent; border: 0; padding: 0; }
#present-nav button, #present-nav label, #present-nav select { font-size: 12px; }
#present-nav label { display: flex; gap: 4px; align-items: center; }
#present-nav button:disabled { opacity: .4; cursor: default; }
#present-stops { display: flex; overflow-x: auto; gap: 6px; max-width: 100%; }
#present-stops:empty { display: none; }
#present-stops button { flex: 0 0 auto; font-size: 12px; }
#present-stops button[aria-current="true"] { border-color: var(--accent); background: var(--bg3); }
.journey-stop { margin: 6px 0 6px 12px; padding: 6px; border-left: 2px solid var(--line2); }
.journey-stop strong { font-size: 12px; }
/* The stop's ↑/↓/× buttons had no rule of their own; match the step actions
   they sit under. */
.journey-stop button {
  background: var(--bg0); border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; padding: 2px 8px; margin-right: 4px; cursor: pointer;
  font-size: 11.5px; font-family: inherit; line-height: 1.4;
}
.journey-stop button:hover { color: var(--text); border-color: var(--line2); }
#present-relationship { max-width: 100%; max-height: 64px; overflow: auto; white-space: pre-wrap; color: var(--muted); font-size: 12px; text-align: center; }
#present-relationship:empty { display: none; }
#canvas .node.story-current .card { stroke-width: 3; }
#canvas .ports.story-ports { opacity: 1; }
#canvas .portg.story-port .port-name { opacity: 1; }
#canvas .portg.story-port .port { stroke-width: 2.5; }
#story-link-value { width: min(700px, 80vw); }
#story-link-dialog { max-width: 90vw; }
/* --bg1 is what the neighbouring present-mode surfaces use (#present-caption
   and #present-nav paint it at 94% alpha), so these controls rest on it and
   lift to --bg3 when hovered or current. */
#present-chapters button, #present-stops button, #present-speed { background: var(--bg1); color: var(--muted); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; cursor: pointer; }
#present-chapters button:hover, #present-stops button:hover { color: var(--text); background: var(--bg3); }
#canvas .ports.story-ports .portg:not(.story-port) { opacity: 0; }
#present-overlay { max-height: 48dvh; overflow-y: auto; }
#examples-menu button small { color: var(--muted); font-size: 10px; margin-left: 6px; }

/* Engineering uses the same surface, field, and control tokens as the other dialogs. */
#engineering-dialog {
  width: min(1000px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  background: var(--bg1);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  overflow: hidden;
  font: inherit;
}
#engineering-dialog[open] { display: flex; flex-direction: column; }
#engineering-dialog::backdrop { background: rgba(4, 6, 12, .6); }
#engineering-dialog header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px 12px; flex: none;
}
#engineering-dialog h2 { margin: 0; font-size: 15px; font-weight: 700; }
#engineering-dialog nav {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 0 22px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
#engineering-dialog nav .eng-advanced { margin-left: auto; }
#engineering-dialog nav .eng-advanced-tabs {
  display: flex; flex-wrap: wrap; gap: 5px; flex-basis: 100%;
  padding-top: 8px; margin-top: 3px; border-top: 1px dashed var(--line);
}
#engineering-dialog button, #engineering-dialog input::file-selector-button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 7px 11px; margin: 0;
  font: inherit; font-size: 12.5px; line-height: 1.4; cursor: pointer;
}
#engineering-dialog button:hover:not(:disabled),
#engineering-dialog input::file-selector-button:hover { color: var(--text); border-color: var(--line2); background: var(--bg3); }
#engineering-dialog button:disabled { opacity: .4; cursor: default; }
#engineering-dialog nav button { background: transparent; border-color: transparent; }
#engineering-dialog nav [aria-pressed=true] {
  color: var(--accent); background: var(--accent-dim); border-color: var(--accent);
}
#engineering-dialog button[type=submit],
#engineering-dialog [data-action=apply-preview],
#engineering-dialog [data-action=package] {
  background: var(--accent-dim); border-color: var(--accent); color: var(--text);
}
#engineering-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#engineering-dialog > p {
  margin: 0; padding: 10px 22px; color: var(--muted); background: var(--bg0);
  border-bottom: 1px solid var(--line); font-size: 12px; flex: none;
}
#engineering-body { padding: 18px 22px 22px; overflow: auto; min-height: 0; user-select: text; -webkit-user-select: text; }
#engineering-body p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
#engineering-body h3 { font-size: 14px; margin: 18px 0 10px; }
#engineering-body h4, #engineering-dialog legend {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
#engineering-dialog form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;
  margin: 0 0 18px; align-items: start;
}
#engineering-dialog form > button { align-self: end; justify-self: start; }
#engineering-dialog form > label:has(textarea),
#engineering-dialog form > label:has(select[multiple]),
#engineering-dialog form > p { grid-column: 1 / -1; }
#engineering-dialog label { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 12px; color: var(--muted); }
#engineering-dialog label:has(input[type=checkbox]) { flex-direction: row; align-items: center; margin-bottom: 16px; }
#engineering-dialog input, #engineering-dialog select, #engineering-dialog textarea {
  width: 100%; min-width: 0; max-width: 100%; padding: 8px 10px;
  color: var(--text); background: var(--bg0); border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 12.5px; line-height: 1.4;
}
#engineering-dialog textarea { resize: vertical; min-height: 80px; }
#engineering-dialog input[type=number] { font-family: var(--mono); }
#engineering-dialog input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent); }
#engineering-dialog input[type=file] { padding: 7px; }
#engineering-dialog input::file-selector-button { margin-right: 10px; }
#engineering-dialog input:focus, #engineering-dialog select:focus, #engineering-dialog textarea:focus { border-color: var(--accent); }
#engineering-dialog fieldset { min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
#engineering-dialog legend { padding: 0 5px; }
#engineering-dialog fieldset label + label { margin-top: 12px; }
#engineering-dialog[data-section=interfaces] fieldset:first-of-type { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#engineering-dialog[data-section=interfaces] fieldset:first-of-type label { margin: 0; }
#interface-worklist { margin: 0 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg0); }
#interface-worklist h3 { margin: 0 0 8px; }
#interface-worklist > ul { max-height: 230px; overflow: auto; }
#interface-worklist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#interface-worklist li button { text-align: left; }
#interface-worklist li button[aria-current=true] { border-color: var(--accent); color: var(--text); }
#interface-worklist li strong { color: var(--text); }
#interface-worklist li span { flex-basis: 100%; color: var(--muted); }
#interface-worklist li label { margin: 0 0 0 auto; }
#reuse-preview:not(:empty) { margin-top: 12px; padding: 12px; border: 1px solid var(--accent); border-radius: 8px; }
#engineering-dialog[data-section=revisions] form { grid-template-columns: minmax(0, 1fr) auto; max-width: 660px; align-items: end; }
#engineering-dialog[data-section=interchange] #engineering-body > label { margin: 16px 0; }
#engineering-dialog:is([data-section=requirements], [data-section=decisions]) #engineering-body > div { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
#engineering-dialog ul { list-style: none; padding: 0; margin: 14px 0; }
#engineering-dialog li { padding: 12px; margin: 8px 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
#engineering-dialog li button { margin: 4px 3px 0 0; }
#engineering-dialog time { color: var(--muted); font-size: 11px; margin: 0 8px; }
#engineering-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 380px; overflow: auto; }
#engineering-dialog aside { padding: 14px; border: 1px solid var(--accent); background: var(--accent-dim); border-radius: 10px; margin-bottom: 16px; }
#engineering-dialog table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 14px 0; font-size: 12px; }
#engineering-dialog th, #engineering-dialog td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
#engineering-dialog th { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
#engineering-dialog td { overflow-wrap: anywhere; }
#engineering-dialog #impact-preview { border-top: 1px solid var(--line); padding-top: 16px; }
#engineering-dialog #impact-preview:empty { display: none; }
#engineering-dialog .report-sections { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
#engineering-dialog .report-sections p { grid-column: 1 / -1; margin: 0 0 8px; }
#engineering-dialog .report-sections label { margin: 0; }
#engineering-dialog .report-branding p { margin: 8px 0; }
#engineering-dialog .report-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
#technical-report-preview { width: 100%; height: 700px; border: 1px solid var(--line2); border-radius: 8px; background: white; }
@media (max-width: 600px) {
  #engineering-dialog .report-sections { grid-template-columns: minmax(0, 1fr); }
  #technical-report-preview { height: 560px; }
}
@media (max-width: 620px) {
  #engineering-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  #engineering-dialog header { padding: 14px 14px 10px; }
  #engineering-dialog nav { padding: 0 14px 12px; gap: 4px; }
  #engineering-dialog nav button { padding: 6px 8px; font-size: 12px; }
  #engineering-dialog > p { padding: 9px 14px; }
  #engineering-body { padding: 14px; }
  #engineering-dialog form, #engineering-dialog[data-section=revisions] form,
  #engineering-dialog[data-section=interfaces] fieldset:first-of-type { grid-template-columns: minmax(0, 1fr); }
}

/* Engineering workflow controls use the existing application theme. */
.workflow-dialog { width: min(980px, calc(100vw - 32px)); max-height: 88dvh; overflow: auto; padding: 24px; background: var(--bg1); color: var(--text); border: 1px solid var(--line); border-radius: 12px; }
.workflow-dialog footer, .guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.workflow-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.workflow-table { overflow: auto; grid-column: 1 / -1; }
.review-record { padding: 16px 0; border-top: 1px solid var(--line); }
#first-project { position: absolute; left: 14px; bottom: 54px; width: min(340px, calc(100% - 28px)); max-height: 70%; overflow: auto; padding: 18px; z-index: 15; background: var(--bg1); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 32px #0004; }
#first-project[hidden] { display: none; }
#first-project header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#first-project h2 { font-size: 16px; margin: 0; }
#first-project li { margin: 10px 0; line-height: 1.5; }
#first-project button:disabled { opacity: .5; cursor: default; }
#first-project summary { cursor: pointer; margin-top: 12px; }
#connection-dialog { width: min(560px, calc(100vw - 32px)); }
#connection-dialog form { display: grid; gap: 8px; }
#connection-dialog select { width: 100%; min-width: 0; padding: 8px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; }
#connect-error:empty { display: none; }
.ai-preview-option { display: flex; gap: 6px; align-items: center; font-size: 12px; margin: 4px 0 8px; }
@media(max-width: 640px) { .workflow-columns { grid-template-columns: 1fr; } }

#app.presenting #first-project { display: none; }


#btn-team { display: block; width: calc(100% - 24px); margin: 0 12px 12px; padding: 8px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
#btn-team:focus-visible { outline: 2px solid var(--accent); }
.workflow-dialog button, #first-project button { font: inherit; padding: 7px 10px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.workflow-dialog button:disabled { opacity: .5; cursor: default; }
.workflow-dialog button:focus-visible, #first-project button:focus-visible { outline: 2px solid var(--accent); }
.workflow-dialog li { line-height: 1.6; overflow-wrap: anywhere; }
.workflow-dialog table { width: 100%; border-collapse: collapse; }
.workflow-dialog td, .workflow-dialog th { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }

/* Project intent and focused assistant skills. */
.blueprint-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.blueprint-fields label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; }
.blueprint-fields label:first-child { grid-column: 1 / -1; }
.blueprint-fields textarea { box-sizing: border-box; width: 100%; resize: vertical; padding: 9px 11px; font: inherit; line-height: 1.5; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; }
.blueprint-fields textarea:focus-visible, #ai-skill:focus-visible, #ai-blueprint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ai-skill, #ai-blueprint { box-sizing: border-box; height: 24px; max-width: 100%; font: inherit; font-size: 10.5px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
#ai-skill { width: 132px; min-width: 0; }
#ai-blueprint { cursor: pointer; }
.ai-build-row { flex-wrap: wrap; margin: 2px 0 6px; color: var(--muted); font-size: 10.5px; }
.ai-build-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-build-actions button { box-sizing: border-box; height: 24px; font: inherit; font-size: 10.5px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.ai-build-actions button:hover { color: var(--text); border-color: var(--accent); }
.ai-build-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ai-blueprint:hover:not(:disabled), #ai-skill:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ai-skill-row label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ai-skill-row { flex-wrap: wrap; margin-bottom: 2px; color: var(--muted); font-size: 10.5px; }
#ai-actions.cards { max-height: 230px; overflow-y: auto; }
#ai-actions.cards button { flex-shrink: 0; }
@media (max-width: 650px) { .blueprint-fields { grid-template-columns: 1fr; } }
.ai-web-state { margin: 5px 0 8px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.ai-msg a { color: var(--link); text-decoration: underline; overflow-wrap: anywhere; }

/* Keep modal controls inside their surface at narrow widths and browser zoom. */
#export-dialog .rec-card { width: 520px; }
.rec-buttons > button { flex: 0 0 auto; max-width: 100%; }
.rec-card :is(label, select, input[type=file]), .review-card input[type=file] { min-width: 0; max-width: 100%; }
#rec-audio label { flex-wrap: wrap; }
.export-dimensions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; }
.export-dimensions label { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
.export-dimensions input[type=number] { width: 100%; min-width: 0; }
.export-dimensions > span { padding-bottom: 6px; }
.dialog-check { min-width: 0; flex-wrap: wrap; }
.drc-row { flex-wrap: wrap; }
.drc-row .msg { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.power-fact { flex-wrap: wrap; }
.pe-main, .pe-side { min-width: 0; }
.pe-table { display: block; overflow-x: auto; }
#toolbar .group { max-width: 100%; flex-wrap: wrap; }
#examples-menu button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .rec-card { padding: 16px; }
}

#btn-team { width: calc(100% - 32px); margin: 0 16px 10px; }
#team-dialog { width: min(1050px, 94vw); max-height: 90vh; overflow: auto; }
#team-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#team-dialog form { display: grid; gap: 8px; margin: 14px 0; }
#team-dialog label { display: grid; gap: 4px; }
#team-dialog input, #team-dialog select, #team-dialog textarea { width: 100%; max-width: 100%; min-width: 0; padding: 8px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
#team-dialog textarea { min-height: 80px; resize: vertical; }
#team-dialog label, #team-dialog p, #team-dialog li { font-size: 13px; line-height: 1.5; }
#team-dialog h2 { margin-top: 0; }
#team-dialog h3, #team-dialog h4 { margin: 16px 0 10px; }
#team-dialog [aria-current=true] { border-color: var(--accent); }
#team-dialog .team-hash { font-family: monospace; font-size: 11px; color: var(--muted); }
#team-error:empty { display: none; }
#team-error { color: var(--danger, #f87171); }
.team-columns { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 3fr); gap: 20px; }
.team-columns section, .team-columns li, .team-hash { min-width: 0; overflow-wrap: anywhere; }
.team-diagram { max-height: 350px; overflow: auto; }
.team-diagram svg { display: block; width: 100%; height: auto; max-height: 350px; }
@media (max-width: 700px) { .team-columns { grid-template-columns: minmax(0, 1fr); } }

/* Conversation history replaces the message area without covering the canvas. */
#assistant.history-open:not(.collapsed) { height: clamp(420px, 78%, 800px); }
#assistant.history-open :is(#ai-thread, #ai-actions, #ai-foot, #ai-settings, #ai-resumed-note),
#assistant.settings #ai-resumed-note { display: none; }
#ai-history[hidden], #ai-history-warning[hidden], #ai-resumed-note[hidden] { display: none; }
#ai-history { min-width: 0; }
.ai-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-history-heading h4 { margin: 0; font-size: 14px; }
#ai-history-back { font: inherit; font-size: 11px; padding: 5px 7px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; }
#ai-history > p, .ai-history-empty, .ai-history-notice { font-size: 11px; line-height: 1.5; color: var(--muted); }
.ai-history-notice { flex: none; margin: 0; padding: 7px 14px; background: var(--bg1); border-bottom: 1px solid var(--line); }
#ai-resumed-note { padding: 0 0 8px; background: transparent; }
#ai-history-warning { color: var(--text); border-color: #b45309; }
#ai-history-search { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12px; padding: 8px; border: 1px solid var(--line2); border-radius: 7px; color: var(--text); background: var(--bg0); }
#ai-history-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#ai-history-list { list-style: none; padding: 0; margin: 10px 0 0; }
.ai-history-row { display: flex; align-items: flex-start; gap: 5px; margin: 7px 0; }
.ai-history-row > button[data-conversation] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 10px; background: var(--bg1); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.ai-history-row > button[data-conversation]:hover, .ai-history-row > button[aria-current] { border-color: var(--accent); background: var(--accent-dim); }
.ai-history-row :is(strong, span, small) { overflow-wrap: anywhere; }
.ai-history-row :is(span, time, small) { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.ai-history-row > .ai-icon-btn { margin-top: 6px; }

.engineering-draft { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; color: var(--muted); }
#startup-recovery { margin-bottom: 20px; padding: 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg1); }
#startup-recovery article { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
#startup-recovery time { display: block; color: var(--muted); margin: 4px 0; }
#startup-recovery button { margin: 4px 8px 4px 0; }

/* Light theme: the palette's accent icons are darkened for a white surface
   (the canvas does the same through lightSVGStyles in theme.js). */
html[data-theme="light"] .badge[style*="--c"] svg { stroke: color-mix(in oklab, var(--c) 76%, #000); }
html[data-theme="light"] .badge[style*="--c"] b { color: color-mix(in oklab, var(--c) 62%, #000) !important; }

.link-btn { background: none; border: none; padding: 0; margin-left: 6px; color: var(--accent); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
html[data-theme="light"] .drc-level.error { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
html[data-theme="light"] .drc-level.warning { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
html[data-theme="light"] .drc-level.info { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }

/* AI change preview: the title row and the Discard/Apply footer stay pinned
   while the change list scrolls between them. */
#ai-preview-dialog { padding-top: 0; padding-bottom: 0; }
#ai-preview-dialog .preview-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -24px; padding: 18px 24px 12px; background: var(--bg1); border-bottom: 1px solid var(--line);
}
#ai-preview-dialog .preview-head h2 { margin: 0; }
#ai-preview-dialog .preview-close { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; }
#ai-preview-dialog .preview-foot {
  position: sticky; bottom: 0; z-index: 2; justify-content: flex-end; align-items: center;
  margin: 16px -24px 0; padding: 12px 24px 16px; background: var(--bg1); border-top: 1px solid var(--line);
}
#ai-preview-dialog .preview-foot #preview-status { margin: 0 auto 0 0; }
#ai-preview-dialog #ai-preview-apply { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

#ai-preview-dialog .preview-outcome, #ai-preview-dialog .preview-removals {
  margin: 14px 0 4px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2);
}
#ai-preview-dialog :is(.preview-outcome, .preview-removals) h3 { margin: 0 0 6px; font-size: 13px; }
#ai-preview-dialog :is(.preview-outcome, .preview-removals) ul { margin: 0; padding-left: 4px; list-style: none; }
#ai-preview-dialog .preview-outcome .ok { color: #34d399; }
#ai-preview-dialog .preview-outcome .open { color: #fbbf24; }
#ai-preview-dialog .preview-outcome .new { color: #fb923c; }
#ai-preview-dialog .preview-removals { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .08); }
#ai-preview-dialog .preview-removals h3 { color: #f87171; }
#ai-preview-dialog .preview-removals small { color: var(--faint); margin-left: 4px; }
html[data-theme="light"] #ai-preview-dialog .preview-outcome .ok { color: #047857; }
html[data-theme="light"] #ai-preview-dialog .preview-outcome .open { color: #92400e; }
html[data-theme="light"] #ai-preview-dialog .preview-outcome .new { color: #c2410c; }
html[data-theme="light"] #ai-preview-dialog .preview-removals h3 { color: #b91c1c; }

/* ---- Incident replay ---- */
#replay-chip {
  position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px; border-radius: 8px; border: 1px solid rgba(248, 113, 113, .45);
  background: var(--bg1); color: #fca5a5; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
#replay-chip[hidden] { display: none; }
#replay-chip svg { width: 14px; height: 14px; fill: currentColor; }
#replay-chip:hover { border-color: #f87171; color: #fecaca; }
#replay-dock {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 6; max-height: 52%;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 10px;
  background: color-mix(in srgb, var(--bg1) 96%, transparent); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4); color: var(--text); overflow: auto;
}
#replay-dock[hidden] { display: none; }
#replay-dock button { font: inherit; cursor: pointer; }
.replay-bar { display: grid; grid-template-columns: 1fr auto auto auto; grid-template-areas: "title controls clock exit" "track track track track"; align-items: center; gap: 8px 16px; }
.replay-title { grid-area: title; min-width: 0; }
.replay-kicker { display: block; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #f87171; font-weight: 700; }
.replay-title h2 { margin: 2px 0 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-controls { grid-area: controls; display: flex; align-items: center; gap: 6px; }
.replay-controls > button, .replay-speeds button {
  background: var(--bg2); border: 1px solid var(--line2); color: var(--muted); border-radius: 7px; padding: 5px 10px; font-size: 12px;
}
.replay-controls .replay-play { width: 36px; height: 32px; padding: 0; display: grid; place-items: center; color: #f87171; border-color: rgba(248, 113, 113, .5); }
.replay-play svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.replay-speeds { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.replay-speeds button { border: none; background: transparent; padding: 4px 8px; }
.replay-speeds button[aria-pressed="true"] { background: #f87171; color: #1a0b0b; font-weight: 700; }
.replay-clock { grid-area: clock; text-align: right; }
.replay-clock b { display: block; font-family: var(--mono); font-size: 15px; }
.replay-clock small { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.replay-exit { grid-area: exit; width: 30px; height: 30px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line2); color: var(--muted); font-size: 17px; line-height: 1; }
.replay-track { grid-area: track; position: relative; padding-top: 16px; }
.replay-ticks { position: absolute; inset: 0 0 auto 0; height: 14px; }
.replay-ticks span { position: absolute; transform: translateX(-2px); font-size: 10px; font-family: var(--mono); color: var(--faint); white-space: nowrap; border-left: 1px solid var(--line2); padding-left: 4px; }
.replay-track input[type=range] {
  width: 100%; margin: 0; height: 18px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.replay-track input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fb923c, #f87171 var(--p, 0%), var(--line2) var(--p, 0%)); }
.replay-track input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line2); }
.replay-track input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #f87171; }
.replay-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 3px solid #f87171; }
.replay-track input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 3px solid #f87171; }
.replay-panels { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.1fr) minmax(260px, 1.6fr) minmax(170px, .8fr); gap: 10px; min-height: 0; }
.replay-panels > section { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; overflow: auto; max-height: 230px; }
.replay-panels h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.replay-metrics { display: flex; flex-direction: column; gap: 10px; }
.replay-metrics small { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.replay-metrics b { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }
.replay-metrics div:first-child b { color: #f87171; font-family: var(--mono); }
.replay-metrics span { font-size: 11px; color: var(--muted); }
.replay-phase { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; font-size: 12px; }
.replay-phase .name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.replay-phase .name i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.replay-phase b { font-family: var(--mono); font-size: 12px; }
.replay-phase .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.replay-phase .bar span { display: block; height: 100%; border-radius: 2px; transition: width .2s ease; }
.replay-phase small { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; color: var(--faint); min-height: 12px; }
.replay-phase.idle { opacity: .45; }
.replay-phase.current .name { color: var(--text); }
.replay-stream ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.replay-stream li { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; align-items: baseline; font-size: 12px; }
.replay-stream li:first-child { animation: replay-in .25s ease; }
.replay-stream time { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.replay-stream .tag { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border: 1px solid; border-radius: 4px; padding: 0 4px; }
.replay-stream code { font-family: var(--mono); font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }
.replay-stream li p, .replay-stream .who { grid-column: 3; margin: 0; font-size: 11px; color: var(--muted); }
.replay-stream .who { color: var(--faint); }
.replay-stream .replay-condition { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border: 1px solid; border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.replay-stream .empty { display: block; color: var(--faint); }
@keyframes replay-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.replay-days div[data-r=days] { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.replay-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 22px; }
.replay-day b { font-family: var(--mono); font-size: 11px; }
.replay-day .col { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.replay-day .col span { width: 100%; background: linear-gradient(#fb923c, #f87171); border-radius: 5px; transition: height .2s ease; }
.replay-day small { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.replay-day.current small, .replay-day.current b { color: #f87171; }
.replay-note { margin: 0; font-size: 10.5px; color: var(--faint); }
#app.replaying #present-overlay, #app.replaying #replay-chip { display: none; }
@media (max-width: 1100px) { .replay-panels { grid-template-columns: 1fr 1fr; } }
html[data-theme="light"] #replay-dock { box-shadow: 0 18px 48px rgba(15, 23, 42, .16); }
html[data-theme="light"] #replay-chip { color: #b91c1c; border-color: #fca5a5; }
html[data-theme="light"] .replay-kicker, html[data-theme="light"] .replay-metrics div:first-child b { color: #b91c1c; }
/* Port dots and names are editing affordances; a replay shows reach only. */
#app.replaying #canvas .ports { display: none; }

.replay-stages { position: relative; height: 20px; margin-top: 4px; }
.replay-stages span {
  position: absolute; top: 0; height: 18px; padding: 0 6px; border-radius: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10px; line-height: 18px; font-weight: 700; letter-spacing: .4px; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--line2);
}
.replay-stages span.current { color: #f87171; border-color: rgba(248, 113, 113, .6); background: rgba(248, 113, 113, .1); }
.replay-phases h4 { margin: 6px 0 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.replay-phases h4.current { color: #f87171; }
.replay-metrics div:nth-child(2) span { display: block; }
/* Phase colours are chosen for the dark dock; darken them on white. */
html[data-theme="light"] :is(.replay-stream .tag, .replay-stream .replay-condition, .replay-metrics [data-r=phase]) { filter: brightness(.72) saturate(1.3); }

/* ---- Selects ---- */
/* One chevron for every styled select, drawn inside the select's own padding
   so it never sits on or past the border, whatever the native control would
   draw; and a select never grows past the field that holds it. */
#props select, #ai-settings select, .part-card select, #explore-panel select, #engineering-dialog select:not([multiple]),
#connection-dialog select, #team-dialog select, #import-dialog select, .rec-card select {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
}
#present-nav select, #ai-skill {
  -webkit-appearance: none; appearance: none; padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; background-size: 10px 10px;
}

/* ---- Build from a source dialog ---- */
/* The dialog shares the part and compare dialogs' chrome above (a full-viewport
   overlay with the card centred, so its shadow has room); these are its fields. */
#import-dialog .import-card { width: min(520px, calc(100vw - 32px)); }
#import-dialog .import-card label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 12px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
#import-dialog .import-card label.import-file { flex-direction: row; align-items: center; gap: 10px; }
#import-dialog input:not([type=file]), #import-dialog textarea {
  width: 100%; min-width: 0; padding: 8px 10px; color: var(--text); background: var(--bg0);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; line-height: 1.4;
}
#import-dialog textarea { resize: vertical; min-height: 120px; font-family: var(--mono); font-size: 12px; }
#import-dialog input:focus, #import-dialog textarea:focus { outline: none; border-color: var(--accent); }
#import-dialog input[type=file] { font-size: 11px; color: var(--muted); }
#import-dialog input::file-selector-button {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
  padding: 6px 11px; margin: 0 10px 0 0; font: inherit; font-size: 12px; cursor: pointer;
}
#import-dialog input::file-selector-button:hover { color: var(--text); border-color: var(--line2); background: var(--bg3); }
#import-dialog .import-source { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg0); font-size: 12px; color: var(--muted); }
#import-dialog .import-source summary { cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--faint); }
#import-dialog .import-source summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#import-dialog .import-source label { margin-top: 10px; }
#import-dialog .import-source small, #import-dialog .import-source p { display: block; margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--faint); }
#import-dialog #import-status { min-height: 1.2em; margin-top: 12px; font-size: 12.5px; color: var(--muted); white-space: pre-wrap; }
#import-dialog #import-status.error { color: #f87171; }
html[data-theme="light"] #import-dialog #import-status.error { color: #b91c1c; }
#import-dialog .rec-buttons button[type=submit] { background: var(--accent-dim); border-color: var(--accent); }
#import-dialog .rec-buttons button:disabled { opacity: .4; cursor: default; }
/* Outranks every field rule above, so a mode's foreign controls stay hidden. */
#import-dialog[data-mode=cve] .import-card [data-when=poc], #import-dialog[data-mode=poc] .import-card [data-when=cve] { display: none !important; }

/* ---- Narrow windows ----
   Below 900px the palette column narrows to one tile per row so the canvas
   keeps most of the width. The floating panels keep their desktop widths:
   squeezing them to the canvas makes their rows overflow, and a phone layout
   is a design of its own. Nothing here applies at ordinary desktop widths. */
@media (max-width: 900px) {
  #app { grid-template-columns: 168px 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
}