:root {
  --bg0: #0a0e17;
  --bg1: #0d1220;
  --bg2: #131a2b;
  --bg3: #182238;
  --line: #1e2942;
  --line2: #2c3a5c;
  --text: #e6ebf4;
  --muted: #8b96ab;
  --faint: #8190ab;
  --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;
  /* Accent as text colour (links, active tab labels): the light theme needs a darker blue than the accent fill. */
  --accent-text: #38bdf8;
  --link: #38bdf8;
  /* Destructive actions and error text, per theme: text, a stronger mark for
     icons, the button fill and its hover, and the border and its hover. */
  --danger: #fca5a5;
  --danger-strong: #f87171;
  --danger-bg: #2a1215;
  --danger-bg-hover: #3b1519;
  --danger-line: #7f1d1d;
  --danger-line-hover: #b91c1c;
  --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; }
/* Review is the one toolbar destination named in words: the icon alone said nothing. */
#toolbar #btn-engineering { gap: 6px; }
#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 and Present menus ---- */
.more-wrap { position: relative; display: flex; }
:is(#more-menu, #present-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);
}
:is(#more-menu, #present-menu)[hidden] { display: none; }
#toolbar :is(#more-menu, #present-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 :is(#more-menu, #present-menu) :is(button, a) > svg { margin-right: 10px; flex: none; }
#toolbar :is(#more-menu, #present-menu) :is(button, a)::after { content: attr(data-menu-label); font-size: 12.5px; white-space: nowrap; }
#toolbar :is(#more-menu, #present-menu) .rec-dot { margin: 0 14px 0 4px; }
#toolbar :is(#more-menu, #present-menu) :is([aria-pressed=true], [aria-expanded=true])::before {
  content: '✓'; position: absolute; right: 10px; font-size: 12px; color: var(--accent);
}
#toolbar :is(#more-menu, #present-menu) button.active { background: transparent; color: var(--text); }
#toolbar :is(#more-menu, #present-menu) :is(button, a):hover:not(:disabled) { background: var(--bg3); color: var(--text); }
#toolbar :is(#more-menu, #present-menu) :is(button, a):disabled { opacity: .45; }
.more-sep { height: 1px; margin: 4px 6px; background: var(--line); }
html[data-theme="light"] :is(#more-menu, #present-menu) { background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); }
/* Present carries the recording timer: a blinking dot and m:ss in place of
   its icon while recording, "Encoding…" beside it while the file is made. */
#btn-present { gap: 6px; }
#btn-present .rec-dot { display: none; margin: 0; }
#btn-present.recording .rec-dot { display: inline-block; }
#btn-present.recording > svg { display: none; }
#present-timer { font-variant-numeric: tabular-nums; }
#present-timer:empty { display: none; }
#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: 1700px) { #project-heading { width: 260px; } }
@media (max-width: 1699px) {
  #app #toolbar { gap: 2px; }
  #app #toolbar :is(button, a) { padding-inline: 3px; }
  #project-heading { width: 220px; }
}
@media (max-width: 1439px) {
  /* Leave room for wider system fonts while keeping the guide accessible:
     the label stays the button's accessible name, only drawn off-screen. */
  #toolbar #btn-help { gap: 0; }
  #btn-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #project-heading { width: 180px; }
}
@media (max-width: 1365px) {
  /* Laptop widths (1280 and up) keep one row: Review shows its icon alone,
     its title and aria-label still name it. */
  #toolbar #btn-engineering { gap: 0; }
  #btn-engineering span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #project-heading { width: 160px; }
}

/* ---- 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-empty { margin: 10px 2px 4px; display: grid; gap: 8px; justify-items: start; }
#palette-empty[hidden] { display: none; }
#palette-empty p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
#palette-empty button { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; }
#palette-empty button:hover { border-color: var(--accent); }
/* Board mode: a three-way switch above the search. An inferred mode shows
   with a dashed edge until the board chooses one. */
#mode-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 0 10px;
  padding: 2px;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#mode-switch button {
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mode-switch button:hover { color: var(--text); }
#mode-switch button[aria-pressed="true"] { background: var(--bg2); color: var(--text); border-color: var(--line); }
#mode-switch button.inferred { background: none; border-style: dashed; border-color: var(--line); color: var(--text); }
#mode-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#palette h3.other-parts { margin-top: 20px; }
#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; }
/* While the port dots show, the tag row on the top edge steps back so a dot
   never sits on a tag's text. */
#canvas g.node .tags { transition: opacity 0.13s; }
#canvas g.node:hover .tags,
#canvas.tool-wire g.node .tags,
#canvas.drafting g.node .tags { opacity: 0.3; }
.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, .wire-label { 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; }
/* A selected swimlane's divider grab lines: a faint accent band marks each
   one, brightening under the resize cursor. The band is the hit area, so its
   width never changes. */
.lane-handle { stroke: var(--accent); stroke-opacity: 0.12; transition: stroke-opacity 0.13s; }
.lane-handle:hover, .lane-handle:active { stroke-opacity: 0.35; }
.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);
}
/* On a phone-width canvas the card is taller than the canvas: anchor it to
   the top and let it scroll instead of centring it past both edges. */
@media (max-width: 600px) {
  #empty-state {
    top: 12px; transform: translateX(-50%);
    max-height: calc(100% - 24px); overflow-y: auto; pointer-events: auto;
  }
}
#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-text); }
.empty-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 14px; }
.empty-modes button {
  pointer-events: auto; display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer;
}
.empty-modes b { font-size: 13px; font-weight: 600; }
.empty-modes span { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.empty-modes button:hover { border-color: var(--accent); }
.empty-modes button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); }
.empty-modes 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 of .hint-items instead of clipping both
     ends, and the pinned "? all shortcuts" stays at the right. */
  max-width: calc(100% - 28px);
  display: flex;
  overflow: hidden;
}
/* A narrow window hides whole items from the tail (shortcuts-ui.js), so no
   word is ever cut mid-way. */
#hintbar .hint-items { min-width: 0; overflow: hidden; }
#hintbar .hint-item { font-style: normal; }
#hintbar .hint-item[hidden] { display: none; }
#hintbar .hint-more { flex: none; }
#hintbar .hint-more::before { content: '\00b7'; margin: 0 4px; }
#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: rgb(13, 18, 32);
  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; }
/* The story panel's fold and close buttons sit together at the right. */
#journey-panel h3 { gap: 6px; }
#journey-panel h3 .panel-toggle:first-of-type { margin-left: auto; }
#journey-panel h3 #journey-close { font-size: 15px; }
.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: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
#props button.danger:hover { background: var(--danger-bg-hover); border-color: var(--danger-line-hover); }

.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; }
/* The panel's number fields (tidy gap, lane sizes) share one look with its text fields. */
.tidy-row input, .lane-row .lane-size {
  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, .lane-row .lane-size: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 .lane-size { flex: none; width: 58px; }
.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: var(--danger); border-color: var(--danger-line); }
.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;
  /* Above every floating panel, which raisePanel() stacks from 22 up to 29
     (the assistant shares this corner), and level with the popovers, which
     follow it in the DOM and so still sit on top. */
  z-index: 30;
  right: 14px;
  /* Above the hint strip, scrolling rather than running off the canvas. */
  bottom: 54px;
  max-height: calc(100% - 68px);
  overflow: auto;
  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);
}
/* The assistant owns this corner while it is open: the legend steps left of it
   instead of covering its fields. */
#app:has(#assistant:not([hidden])) #legend { right: calc(14px + 380px + 12px); }
#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); }
.legend-empty { margin: 0; font-size: 11.5px; 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: rgb(13, 18, 32);
  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); }
/* On a phone the panel never runs past the screen edge. The settings sheet
   keeps the normal panel height (the story panel stacks above it) and its
   Save/Test row stays in view by being sticky. */
#assistant { max-width: calc(100vw - 28px); }
#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: var(--danger);
  padding: 8px 10px;
  font-size: 12.5px;
}
.ai-msg.error .ai-ic { color: var(--danger-strong); 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: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
#ai-stop:hover { background: var(--danger-bg-hover); border-color: var(--danger-line-hover); }
#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%); }
/* Save and Test stay in view at the foot of the scrolling sheet. */
#ai-settings .ai-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; position: sticky; bottom: -4px; z-index: 1; padding: 8px 0 4px; background: var(--bg1); }
#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; }
html[data-theme="light"] #ai-settings #ai-save:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg1)); color: var(--accent-strong); }
.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: var(--danger); }
.ai-result.err .ai-ic { color: var(--danger-strong); }
.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;
  line-height: 1.4;
  /* Whole lines: three by default, growing with the caption where supported. */
  min-height: calc(3 * 1.4em + 12px);
  field-sizing: content;
  max-height: 12em;
  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; }
/* Compact story controls keep the board visible on small screens. */
#present-overlay {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(900px, calc(100% - 24px));
  max-width: 900px;
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
}
#present-overlay[hidden] { display: none; }
#present-caption {
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 2px 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 560px;
  max-height: 88px;
  overflow: auto;
  white-space: pre-wrap;
}
#present-caption:empty { display: none; }
#present-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0;
}
#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); }
/* Text controls rest like the chapter chips above them. */
#present-nav button:not(#present-prev, #present-next, #present-exit) { background: var(--bg1); border: 1px solid var(--line2); padding: 5px 8px; }
#present-nav button:not(#present-prev, #present-next, #present-exit):hover { 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: var(--danger); background: var(--danger-bg); }
#btn-present.recording { color: var(--danger); background: var(--danger-bg); }
#btn-present.encoding { color: var(--text); }
:is(#btn-rec, #btn-present).recording .rec-dot { animation: rec-blink 1.2s infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { :is(#btn-rec, #btn-present).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,
#story-link-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],
#story-link-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,
#story-link-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"], .review-card input[type="file"] { font-size: 11px; color: var(--muted); }
:is(.rec-card, .review-card) input[type="file"]:focus { outline: none; }
:is(.rec-card, .review-card) input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
#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, .dialog-row select:focus { outline: none; border-color: var(--accent); }
.dialog-row select { background-color: var(--bg0); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 30px 5px 8px; font: inherit; font-size: 12.5px; }
.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,
#story-link-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,
#story-link-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; }
/* Inset so a focus ring on the scrolling list never covers the group headings. */
#shortcuts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; max-height: 62vh; overflow: auto; padding: 2px 6px 6px; border-radius: 8px; }
#shortcuts-list:focus { outline: none; }
#shortcuts-list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.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: 1040px; max-width: calc(100vw - 32px); }
#bom-table { max-height: min(60dvh, 520px); 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; }
/* Wrapping columns keep a readable width so a long note does not stack one
   word per line and stretch its row while it sits off to the right. */
#bom-table td.wrap { white-space: normal; min-width: 110px; }
#bom-table td.wrap:last-child { min-width: 240px; }
#bom-table td.notes span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 340px; }
#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; }
#engineering-body .readiness-status { font-size: 13.5px; color: var(--text); }
.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: var(--danger); border: 1px solid var(--danger-line); background: var(--danger-bg); }
.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 1 160px; min-width: 0; overflow-wrap: anywhere; }
.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; }
/* Scoped past `.rec-card label` (align-items: center), which centred the caption. */
.rec-card .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; flex-wrap: nowrap; }
.pe-table [data-fopts]::placeholder { font-size: 11px; }
.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: var(--danger); 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-text); }
.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, .wire-label):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; gap: 3px; }
.journey-step .step-actions [data-jact="stops"] { flex: 1 1 100%; }
.journey-step .step-actions button:not([data-jact="stops"]) { padding: 3px 5px; }
.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-text); 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. */
/* One label column per rail, as wide as its longest label, so every value lines up. */
.power-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; line-height: 1.6; }
.power-fact { display: contents; }
.power-fact b { color: var(--muted); font-weight: 500; }

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: #55657d;
  --accent: #0284c7; --accent-dim: #e0f2fe; --accent-strong: #0369a1; --accent-text: #0369a1; --link: #0369a1;
  --danger: #b91c1c; --danger-strong: #dc2626; --danger-bg: #fef2f2; --danger-bg-hover: #fee2e2; --danger-line: #fca5a5; --danger-line-hover: #f87171;
}
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"] :is(#props, #journey-panel) { background: #fff; }
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"] .ai-result.ok { color: #166534; }
html[data-theme="light"] .ai-result.warn { color: #92400e; }
/* Status colours tuned for the dark panels, darkened to 4.5:1 on white. */
html[data-theme="light"] #ai-meta[data-state="ready"] .ai-state { color: #166534; }
html[data-theme="light"] #ai-meta[data-state="single"] .ai-state { color: #92400e; }
html[data-theme="light"] #ai-meta[data-state="unset"] .ai-state { color: #b91c1c; }
html[data-theme="light"] :is(.ai-document-warning, .ai-document-issues, .rdk-details .rdk-finding) { color: #92400e; }
html[data-theme="light"] :is(.ai-status .ai-ic, .ai-result.ok .ai-ic) { color: #166534; }
html[data-theme="light"] .ai-result.warn .ai-ic { color: #92400e; }
html[data-theme="light"] .change-legend .legend-added { border-color: #047857; }
html[data-theme="light"] .change-legend .legend-removed { border-color: #b91c1c; }
html[data-theme="light"] .change-legend :is(.legend-changed, .legend-rewired) { border-color: #b45309; }
html[data-theme="light"] .change-legend .legend-moved { border-color: #6d28d9; }

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

#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); }
/* Text buttons and the speed picker read at 12px; the ‹ › and × glyph buttons
   keep the larger size from the block above so they stay easy to hit. */
#present-nav button:not(#present-prev, #present-next, #present-exit), #present-nav label, #present-nav select { font-size: 12px; }
#present-nav :is(#present-prev, #present-next, #present-exit) { min-width: 30px; min-height: 28px; line-height: 1; }
#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; }
/* Pin names help while editing a story; a presentation or replay shows the
   pins alone, so a name never sits on a card's tag row. */
#app:not(.presenting):not(.replaying) #canvas .portg.story-port .port-name { opacity: 1; }
#app.presenting #canvas .port-name { display: none; }
#canvas .portg.story-port .port { stroke-width: 2.5; }
.story-link-card { width: min(560px, calc(100vw - 24px)); }
#story-link-value { width: 100%; min-width: 0; padding: 8px 10px; color: var(--text); background: var(--bg0); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 12px; }
#story-link-value:focus { outline: none; border-color: var(--accent); }
/* The present-mode overlay paints --bg2, so these controls rest a step
   below it on --bg1 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);
  /* Pinned to the top, not centred on its content: switching sections must
     not move the tab bar out from under the pointer. */
  margin: 24px auto auto;
  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; }
.readiness-optional { margin-top: 10px; }
.readiness-optional summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.readiness-optional[open] summary { margin-bottom: 8px; }
#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-text); 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: 300px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; padding-right: 4px; }
#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; }
/* Buttons that sit straight in the tab body keep a gap from each other and
   from the text under them; checkbox rows keep a gap from the field above. */
#engineering-body > button { margin: 0 8px 14px 0; }
#engineering-body > button + p, #engineering-body > button + button + p { margin-top: 2px; }
#engineering-dialog label + label:has(input[type=checkbox]) { margin-top: 12px; }
#engineering-dialog[data-section=review] li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#engineering-dialog[data-section=review] li > button { margin: 0 0 0 auto; }
#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); margin: 10px auto auto; }
  #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; }
/* The same type scale as the .rec-card dialogs: a 15px title, 13px body. */
.workflow-dialog { font-size: 13px; }
.workflow-dialog h2, .review-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.workflow-dialog h3 { font-size: 13px; }
.review-card > p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.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); }
/* Top-anchored and as tall as the canvas allows above the hint strip, so the
   action rows show; a longer panel scrolls with a visible thin scrollbar. */
#first-project { position: absolute; left: 14px; top: 14px; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 82px); overflow: auto; scrollbar-width: thin; 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: 15px; margin: 0; }
#first-project p, #first-project li, #first-project summary { font-size: 13px; }
#first-project .panel-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--muted); }
#first-project .panel-close:hover { color: var(--text); }
#first-project .panel-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#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% - 32px); margin: 0 16px 10px; 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-keyless { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ai-keyless p { margin: 0 0 6px; }
.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; }
.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; }
}

#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); }
.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-text); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
#engineering-dialog .link-btn, #engineering-dialog .link-btn:hover:not(:disabled) { background: none; border: none; padding: 0; margin-left: 6px; color: var(--accent-text); }
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-text); }

#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: 46%;
  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.compact :is(.replay-panels, .replay-note) { 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; flex: none; }
/* Shorter panels leave the board legible above the dock; a panel that
   scrolls shows a thin scrollbar rather than looking cut off. */
.replay-panels > section { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; overflow: auto; max-height: 172px; scrollbar-width: thin; }
.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: 6px; }
/* The three headline numbers always show whole; only the lists scroll. */
.replay-panels > section.replay-metrics { max-height: none; overflow: visible; }
.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; }
@media (prefers-reduced-motion: reduce) {
  .replay-stream li:first-child { animation: none; }
  .replay-phase .bar span { transition: none; }
}
.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: 124px; }
.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-controls .replay-play, .replay-day.current small, .replay-day.current b, .replay-stages span.current, .replay-phases h4.current) { color: #b91c1c; }
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); }
/* One file button for every dialog that holds a file input (Engineering has its own above). */
:is(#import-dialog, .rec-card, .review-card) 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;
}
:is(#import-dialog, .rec-card, .review-card) 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: var(--danger); }
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; }
}

/* ---- Phone layout: view and present ----
   src/phone-layout.js (and the first-paint script in index.html) set
   html[data-layout="phone"] on a touch-first screen that is narrow in
   portrait or short in landscape. A phone views boards, plays their stories
   and incident replays and reads review results; editing stays on tablets
   and desktops, so the editor's chrome is hidden and src/ui/phone-ui.js adds
   a title bar, an action bar and bottom sheets. Every rule below is scoped to
   the attribute: the editor layout is untouched. */
html:not([data-layout="phone"]) :is(#phone-bar, #phone-actions, #phone-note, #phone-empty) { display: none !important; }
/* A double tap on a bar must not zoom the page; the canvas has its own. */
html[data-layout="phone"] body { touch-action: manipulation; overscroll-behavior: none; }
html[data-layout="phone"] #app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "phonebar" "canvas" "phoneactions";
}
html[data-layout="phone"] :is(#toolbar, #palette, #props, #journey-panel, #assistant, #explore-panel, #legend, #bus-popover, #hintbar, #empty-state, #replay-chip, #first-project, #inline-editor) { display: none !important; }
html[data-layout="phone"] :is(#phone-bar, #phone-actions, #phone-note, #phone-empty, .phone-sheet) svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
html[data-layout="phone"] :is(#phone-bar, #phone-actions, #phone-note, #phone-empty, .phone-sheet) :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.phone-icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  background: none; border: 0; border-radius: 10px; color: var(--muted); cursor: pointer;
}
.phone-icon-btn:active { background: var(--bg3); color: var(--text); }

#phone-bar {
  grid-area: phonebar; display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 52px; padding: 4px 6px 4px 16px; background: var(--bg1); border-bottom: 1px solid var(--line);
}
#phone-bar .phone-brand { display: grid; place-items: center; color: var(--accent); }
#phone-bar .phone-brand svg { width: 18px; height: 18px; stroke-width: 1.5; }
#phone-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#phone-actions {
  grid-area: phoneactions; display: flex; justify-content: space-around; gap: 2px; min-width: 0;
  padding: 4px 8px; padding-bottom: max(4px, env(safe-area-inset-bottom)); background: var(--bg1); border-top: 1px solid var(--line);
}
#phone-actions button {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 104px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px;
  background: none; border: 0; border-radius: 10px; color: var(--muted); font: inherit; font-size: 11.5px; line-height: 1.2; cursor: pointer;
}
#phone-actions button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#phone-actions button:active:not(:disabled) { background: var(--bg3); color: var(--text); }
#phone-actions button:disabled { opacity: .4; cursor: default; }
#phone-actions [data-phone=present] { color: var(--accent-text); }
#phone-actions [data-phone=replay] { color: #f87171; }
html[data-theme="light"] #phone-actions [data-phone=replay] { color: #b91c1c; }
#phone-actions .phone-count {
  position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  background: #f59e0b; color: #1a1205; pointer-events: none;
}
#phone-actions .phone-count[data-level=error] { background: #ef4444; color: #fff; }

/* Landscape: one bar across the top, so the board keeps the height. */
@media (orientation: landscape) {
  html[data-layout="phone"] #app {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "phonebar phoneactions" "canvas canvas";
  }
  html[data-layout="phone"] #phone-bar { min-height: 48px; padding-left: max(16px, env(safe-area-inset-left)); }
  html[data-layout="phone"] #phone-actions {
    padding: 2px max(8px, env(safe-area-inset-right)) 2px 4px; border-top: 0; border-bottom: 1px solid var(--line);
  }
  html[data-layout="phone"] #phone-actions button { flex: none; flex-direction: row; gap: 6px; min-height: 44px; max-width: none; padding: 0 10px; font-size: 12.5px; }
  html[data-layout="phone"] #phone-actions .phone-count { top: 2px; left: 22px; }
}

/* More sits at the end of whichever bar is on the right edge. */
#phone-actions [data-phone=more] { display: none; }
@media (orientation: landscape) {
  html[data-layout="phone"] #phone-bar [data-phone=more] { display: none; }
  html[data-layout="phone"] #phone-actions [data-phone=more] { display: flex; padding: 0 12px; }
}

/* A story or a replay has the whole screen; its own controls lead. */
html[data-layout="phone"] #app.presenting { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "canvas"; }
html[data-layout="phone"] #app.presenting :is(#phone-bar, #phone-actions, #phone-note, #phone-empty) { display: none; }
/* Story controls: thumb-sized, with Exit in the corner. */
html[data-layout="phone"] #present-overlay {
  left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-width: none; transform: none;
  padding: 10px 12px; gap: 8px; max-height: 52dvh;
}
html[data-layout="phone"] #present-title { padding: 0 44px; text-align: center; }
html[data-layout="phone"] #present-nav { gap: 4px; }
html[data-layout="phone"] #present-nav button { min-width: 44px; min-height: 44px; }
html[data-layout="phone"] #present-nav :is(#present-prev, #present-next) { font-size: 24px; }
html[data-layout="phone"] #present-nav #present-exit {
  position: absolute; top: 2px; right: 2px; min-width: 44px; min-height: 44px; font-size: 22px;
}
html[data-layout="phone"] #present-nav select { min-height: 36px; }
html[data-layout="phone"] :is(#present-chapters, #present-stops) button { min-height: 36px; }
/* Every chapter stays visible: the row wraps instead of scrolling sideways. */
html[data-layout="phone"] :is(#present-chapters, #present-stops) { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
/* Incident replay: the bar stacks, the details fold into one column. */
html[data-layout="phone"] #replay-dock { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); max-height: 60%; padding: 10px 12px 10px; gap: 8px; }
html[data-layout="phone"] .replay-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title exit" "clock clock" "controls controls" "track track";
  gap: 6px 8px;
}
html[data-layout="phone"] .replay-kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-layout="phone"] .replay-title h2 { font-size: 13.5px; }
/* The dock scrolls as a whole; its panels keep their own height. */
html[data-layout="phone"] #replay-dock > * { flex: none; }
html[data-layout="phone"] .replay-clock { display: flex; align-items: baseline; gap: 10px; text-align: left; }
html[data-layout="phone"] .replay-clock b { font-size: 14px; }
html[data-layout="phone"] .replay-controls { flex-wrap: wrap; gap: 6px; }
html[data-layout="phone"] .replay-controls > button { min-height: 44px; padding: 0 12px; }
html[data-layout="phone"] .replay-controls .replay-play { width: 52px; height: 44px; }
html[data-layout="phone"] .replay-speeds button { min-width: 40px; min-height: 40px; }
html[data-layout="phone"] .replay-exit { width: 44px; height: 44px; font-size: 22px; }
/* A day label near the end of the timeline is cut at the dock's edge rather
   than widening the dock. */
html[data-layout="phone"] .replay-track { overflow-x: clip; }
html[data-layout="phone"] .replay-panels { grid-template-columns: minmax(0, 1fr); }
html[data-layout="phone"] .replay-panels > section { max-height: 150px; }
@media (orientation: landscape) {
  /* A short screen keeps the replay to its bar and timeline in one band. */
  html[data-layout="phone"] .replay-bar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "title controls clock exit" "track track track track";
  }
  html[data-layout="phone"] .replay-controls { flex-wrap: nowrap; }
  html[data-layout="phone"] .replay-clock { display: block; text-align: right; }
  html[data-layout="phone"] #replay-dock { max-height: 70%; }
}

#phone-note {
  position: absolute; top: 12px; left: 16px; right: 16px; z-index: 5; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px;
  background: color-mix(in srgb, var(--bg2) 94%, transparent); border: 1px solid var(--line2); border-radius: 12px;
  color: var(--muted); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
#phone-note > svg { width: 18px; height: 18px; color: var(--accent-text); }
#phone-note p { flex: 1; min-width: 0; margin: 8px 0; }
html[data-theme="light"] #phone-note { box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }

#phone-empty {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 16px;
}
#phone-empty h2 { margin: 0 0 8px; font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--text); }
#phone-empty p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.phone-empty-actions { display: grid; gap: 10px; }
.phone-empty-actions button {
  min-height: 48px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--bg2); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.phone-empty-actions .phone-primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-strong); }

/* Bottom sheets: Open, Review, More and a tapped item's details. */
dialog.phone-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; max-height: min(85dvh, 760px); margin: 0 auto;
  padding: 0; border: 1px solid var(--line2); border-bottom: 0; border-radius: 16px 16px 0 0;
  background: var(--bg1); color: var(--text); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); overflow: hidden;
}
dialog.phone-sheet[open] { display: flex; flex-direction: column; }
dialog.phone-sheet::backdrop { background: rgba(2, 6, 23, .55); }
html[data-theme="light"] dialog.phone-sheet { box-shadow: 0 -12px 40px rgba(15, 23, 42, .18); }
html[data-theme="light"] dialog.phone-sheet::backdrop { background: rgba(15, 23, 42, .35); }
@media (prefers-reduced-motion: no-preference) {
  dialog.phone-sheet[open] { animation: phone-sheet-in .18s ease-out; }
}
@keyframes phone-sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.phone-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--line); }
.phone-sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.phone-sheet-body h3 { margin: 18px 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.phone-sheet-body .phone-sheet-sub { margin: 22px 0 0; font-size: 15px; font-weight: 600; }
.phone-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.phone-row > span:not(.phone-row-icon) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.phone-row b { font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.phone-row small { font-size: 12px; color: var(--muted); }
.phone-row > svg { color: var(--muted); }
.phone-row > svg:last-child:not(:first-child) { width: 16px; height: 16px; color: var(--faint); }
.phone-row:active { background: var(--bg2); }
.phone-row[aria-current="true"] b { color: var(--accent-strong); }
.phone-row-icon { display: grid; place-items: center; color: var(--muted); }
.phone-sheet-body .phone-row-lead { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--bg2); }

.phone-verdict { margin: 12px 0 8px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--bg2); }
.phone-verdict strong { display: block; font-size: 15px; font-weight: 600; }
.phone-verdict p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.phone-verdict[data-verdict=ready] { border-color: #166534; }
.phone-verdict[data-verdict=ready] strong { color: #4ade80; }
.phone-verdict[data-verdict=not-ready] { border-color: #92610e; }
.phone-verdict[data-verdict=not-ready] strong { color: #fcd34d; }
html[data-theme="light"] .phone-verdict[data-verdict=ready] { border-color: #86efac; }
html[data-theme="light"] .phone-verdict[data-verdict=ready] strong { color: #166534; }
html[data-theme="light"] .phone-verdict[data-verdict=not-ready] { border-color: #fcd34d; }
html[data-theme="light"] .phone-verdict[data-verdict=not-ready] strong { color: #92400e; }
.phone-findings { list-style: none; margin: 0; padding: 0; }
.phone-findings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.phone-findings .drc-level { display: inline-block; margin-bottom: 4px; }
.phone-findings p { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.phone-findings small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.phone-findings button {
  min-width: 60px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--bg2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.phone-clean { margin: 12px 0; font-size: 13.5px; color: var(--muted); }
.phone-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); }

.phone-kind { margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.phone-facts { margin: 0; }
.phone-facts div { display: grid; grid-template-columns: minmax(90px, 36%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.phone-facts dt { font-size: 12.5px; color: var(--muted); }
.phone-facts dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.phone-links { list-style: none; margin: 0; padding: 0; }
.phone-links li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.phone-links small { color: var(--muted); }