/* VANTA BLACK — Creator Mode.

   Uses the platform's own tokens (--vb-*) so the editor reads as part of
   VANTA BLACK rather than as a developer panel bolted on beside it. The
   viewport is the world; the chrome sits over it and gets out of the way. */

:root {
  --cm-bg: rgba(10, 9, 16, 0.92);
  --cm-panel: rgba(16, 15, 24, 0.96);
  --cm-line: rgba(143, 123, 216, 0.22);
  --cm-accent: #8f7bd8;
  --cm-accent-2: #9fe8f5;
  --cm-text: #edeae4;
  --cm-muted: #9a95ab;
  --cm-warn: #e6cf8f;
  --cm-bad: #d8607b;
  --cm-good: #7fd8a8;
}

/* ── the entry chip shown inside a world ───────────────────────────────── */

.creator-chip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  padding: 0.4rem 0.75rem;
  font: 600 0.68rem/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: var(--cm-accent-2);
  background: rgba(12, 11, 20, 0.85);
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s, color 0.15s;
}
.creator-chip:hover { background: rgba(143, 123, 216, 0.25); color: #fff; }

/* ── the editor shell ──────────────────────────────────────────────────── */

.world-mount.creator-active { cursor: default; }
/* The world's own HUD is hidden while editing — its pause button and objective
   list sit exactly where the editor's toolbar does, and an objective tracker
   means nothing when nobody is playing. Playtest puts it straight back. */
.world-hud.creator-dimmed { display: none; }
/* The SDK's own game chrome — pause button, title, results — sits in a sibling
   of the world mount, so it is switched from the body. */
body.creator-editing .game-hud { display: none; }

.creator-root {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: var(--left-w, 300px) 1fr var(--right-w, 320px);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "bar bar bar"
    "left view right"
    "status status status";
  pointer-events: none;                 /* the viewport stays clickable */
  font-family: system-ui, sans-serif;
  color: var(--cm-text);
}
.creator-root > * { pointer-events: auto; }
.creator-root.playtesting .creator-left,
.creator-root.playtesting .creator-right,
.creator-root.playtesting .creator-bar,
.creator-root.playtesting .creator-status { display: none; }

/* ── top bar ───────────────────────────────────────────────────────────── */

.creator-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.7rem;
  background: var(--cm-bg);
  border-bottom: 1px solid var(--cm-line);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.cb-left, .cb-right { display: flex; align-items: center; gap: 0.5rem; }
.cb-tools { display: flex; align-items: center; gap: 0.35rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.cb-brand {
  font: 700 0.7rem/1 ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: var(--cm-accent);
}
.cb-project { font-size: 0.85rem; font-weight: 600; }
.cb-dirty { font-size: 0.7rem; color: var(--cm-warn); }
.cb-sep { width: 1px; height: 20px; background: var(--cm-line); }

.cb-btn {
  padding: 0.32rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--cm-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cm-line);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.cb-btn:hover:not(:disabled) { background: rgba(143, 123, 216, 0.2); }
.cb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cb-btn.on { background: rgba(143, 123, 216, 0.32); border-color: var(--cm-accent); }
.cb-primary { background: var(--cm-accent); border-color: var(--cm-accent); color: #0c0b14; font-weight: 600; }
.cb-primary:hover:not(:disabled) { background: #a08ee4; }
.cb-tiny { padding: 0.2rem 0.45rem; font-size: 0.68rem; }

.cb-snap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--cm-muted);
}
.cb-snap select {
  padding: 0.22rem 0.3rem;
  font-size: 0.72rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cm-line);
  border-radius: 4px;
}

/* ── side panels ───────────────────────────────────────────────────────── */

.creator-left, .creator-right {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cm-line);
  overflow: hidden;
}
.creator-left { grid-area: left; }
.creator-right { grid-area: right; }

.cp-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--cm-panel);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.creator-left .cp-panel:first-child { flex: 1.1; }

.cp-head {
  display: flex;
  /* `flex-start`, so the collapse button stays at the top when the tab list
     wraps onto a second line rather than drifting to the vertical middle. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--cm-line);
  flex-shrink: 0;
}
.cp-head h3 { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-muted); }
.cp-count { font-size: 0.68rem; color: var(--cm-muted); }

.cp-tools { display: flex; gap: 0.35rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--cm-line); flex-shrink: 0; }
.cp-search, .cp-filter {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.76rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
}
.cp-search:focus, .cp-filter:focus { outline: 2px solid var(--cm-accent); outline-offset: -1px; }
.cp-star {
  padding: 0.25rem 0.45rem;
  color: var(--cm-muted);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  cursor: pointer;
}
.cp-star.on { color: var(--cm-warn); border-color: var(--cm-warn); }

.cp-body, .cp-tree { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cp-empty { padding: 1.2rem 0.9rem; color: var(--cm-muted); font-size: 0.8rem; }
.cp-empty p { margin: 0 0 0.5rem; }
.cp-hint { font-size: 0.74rem; opacity: 0.8; }

/* ── hierarchy ─────────────────────────────────────────────────────────── */

.ch-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem 0.22rem 0;
  font-size: 0.78rem;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.ch-row:hover { background: rgba(143, 123, 216, 0.1); }
.ch-row.selected { background: rgba(143, 123, 216, 0.25); border-left-color: var(--cm-accent-2); }
.ch-row.hidden .ch-name { opacity: 0.4; text-decoration: line-through; }
.ch-row.locked { opacity: 0.55; cursor: not-allowed; }
.ch-row.system .ch-name::after { content: ' ·'; color: var(--cm-warn); }

/* ── drag-and-drop reparenting ──
   The drop states are drawn as an inset OUTLINE rather than as a tint alone:
   a row that is already selected is already tinted, and a creator who cannot
   separate two purples must still be able to see which row they are aiming
   at. The row's `title` carries the same answer in words. */
.ch-row[draggable="true"] { cursor: grab; }
.ch-row.drag-source { opacity: 0.45; cursor: grabbing; }
.ch-row.drop-ok,
.ch-root-drop.drop-ok {
  outline: 2px solid var(--cm-accent-2);
  outline-offset: -2px;
  background: rgba(143, 123, 216, 0.2);
}
.ch-row.drop-bad,
.ch-root-drop.drop-bad {
  outline: 2px dashed var(--cm-bad);
  outline-offset: -2px;
  background: rgba(216, 96, 123, 0.12);
  cursor: no-drop;
}

/* Sibling insertion — a DIFFERENT SHAPE, not a different colour.
   `onto` fills and outlines the whole row: the object becomes its child.
   `before`/`after` draw a line at one edge and leave the row otherwise
   untouched: the object lands there, and the row itself is not involved.
   Shape is what carries the meaning, so the three outcomes stay
   distinguishable to a creator who cannot separate the accent hues — and the
   line's position is literally where the object will appear, which needs no
   legend at all. `position` is set only while a drop is being marked, so the
   ordinary row keeps the plain flex layout it has everywhere else. */
.ch-row.drop-before,
.ch-row.drop-after {
  position: relative;
  outline: none;
  background: none;
}
.ch-row.drop-before::after,
.ch-row.drop-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cm-accent-2);
  /* A notch at the leading edge, so the line reads as an insertion caret
     rather than as a border the row has grown. */
  box-shadow: 0 0 0 1px rgba(10, 10, 14, 0.6), 3px 0 0 -0.5px var(--cm-accent-2);
  pointer-events: none;
}
.ch-row.drop-before::after { top: -1px; }
.ch-row.drop-after::after { bottom: -1px; }

/* A refused insertion keeps the refusal's dashed vocabulary. */
.ch-row.drop-bad.drop-before::after,
.ch-row.drop-bad.drop-after::after {
  background: var(--cm-bad);
  box-shadow: none;
}
.ch-row.drop-bad.drop-before,
.ch-row.drop-bad.drop-after {
  outline: 2px dashed var(--cm-bad);
  outline-offset: -2px;
  background: rgba(216, 96, 123, 0.12);
}

.ch-root-drop {
  margin: 0 0.4rem 0.3rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cm-dim);
  border: 1px dashed rgba(143, 123, 216, 0.35);
  border-radius: 4px;
}

.ch-twist {
  width: 14px;
  flex-shrink: 0;
  padding: 0;
  font-size: 0.6rem;
  color: var(--cm-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.ch-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--dot, #6a6480); flex-shrink: 0; }
.ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-type { font-size: 0.64rem; color: var(--cm-muted); flex-shrink: 0; }
.ch-icon {
  padding: 0 0.2rem;
  font-size: 0.62rem;
  color: var(--cm-muted);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.5;
}
.ch-icon:hover { opacity: 1; }

/* ── inspector ─────────────────────────────────────────────────────────── */

.ci-group { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--cm-line); }
.ci-group h4 {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cm-accent);
}
.ci-note { margin: 0 0 0.55rem; font-size: 0.71rem; color: var(--cm-muted); line-height: 1.45; }

.ci-row { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; font-size: 0.75rem; }
.ci-row.ci-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.ci-label { color: var(--cm-muted); font-size: 0.71rem; }
.ci-row input, .ci-row select, .ci-row textarea {
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  width: 100%;
}
.ci-row input[type="checkbox"] { width: auto; accent-color: var(--cm-accent); }
.ci-row input[type="color"] { width: 40px; height: 26px; padding: 2px; }
.ci-row input:focus, .ci-row select:focus, .ci-row textarea:focus { outline: 2px solid var(--cm-accent); outline-offset: -1px; }
.ci-row.ci-mixed input, .ci-row.ci-mixed select { border-style: dashed; opacity: 0.75; }
.ci-readonly code { font-size: 0.68rem; color: var(--cm-muted); word-break: break-all; }

.ci-color { display: flex; gap: 0.35rem; align-items: center; }
.ci-hex { flex: 1; font-family: ui-monospace, monospace; font-size: 0.72rem !important; }

.ci-vec-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.ci-axis { display: flex; align-items: center; gap: 0.2rem; font-size: 0.62rem; color: var(--cm-muted); }
.ci-axis input { min-width: 0; }
.ci-axis[data-axis="x"] { color: #ff6b8a; }
.ci-axis[data-axis="y"] { color: #8ae06b; }
.ci-axis[data-axis="z"] { color: #6b9aff; }

.ci-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ci-mini {
  padding: 0.1rem 0.35rem;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--cm-bad);
  background: none;
  border: 1px solid var(--cm-line);
  border-radius: 4px;
  cursor: pointer;
}
.ci-list-item { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0.25rem; margin-bottom: 0.25rem; }

/* ── catalog ───────────────────────────────────────────────────────────── */

.cc-cats { display: flex; gap: 0.25rem; padding: 0.4rem 0.6rem; overflow-x: auto; border-bottom: 1px solid var(--cm-line); flex-shrink: 0; }
.cc-cat {
  padding: 0.2rem 0.5rem;
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--cm-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.cc-cat.on { color: var(--cm-text); background: rgba(143, 123, 216, 0.25); border-color: var(--cm-accent); }

.cc-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  align-content: start;
}
.cc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem 0.3rem;
  font: inherit;
  color: var(--cm-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cm-line);
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, transform 0.12s;
}
.cc-item:hover { background: rgba(143, 123, 216, 0.2); transform: translateY(-1px); }
.cc-thumb { width: 34px; height: 34px; border-radius: 5px; }
.cc-name { font-size: 0.63rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-kind { font-size: 0.55rem; color: var(--cm-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.cc-fav { position: absolute; top: 2px; right: 4px; font-size: 0.62rem; color: rgba(255, 255, 255, 0.18); }
.cc-fav.on { color: var(--cm-warn); }
.cc-hint { margin: 0; padding: 0.35rem 0.6rem; font-size: 0.66rem; color: var(--cm-muted); border-top: 1px solid var(--cm-line); }

/* ── status bar ────────────────────────────────────────────────────────── */

.creator-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  color: var(--cm-muted);
  background: var(--cm-bg);
  border-top: 1px solid var(--cm-line);
  backdrop-filter: blur(12px);
}
.cs-spacer { flex: 1; }
.creator-status .cs-warn { color: var(--cm-warn); }
.creator-status .cs-bad { color: var(--cm-bad); font-weight: 600; }

/* ── resize handles ────────────────────────────────────────────────────── */

.creator-drag {
  grid-area: view;
  width: 5px;
  justify-self: start;
  cursor: col-resize;
  background: transparent;
  z-index: 2;
}
.creator-drag:hover { background: rgba(143, 123, 216, 0.3); }
.creator-drag-right { justify-self: end; }

/* ── context menu ──────────────────────────────────────────────────────── */

.creator-menu {
  position: fixed;
  z-index: 200;
  min-width: 190px;
  padding: 0.25rem;
  background: var(--cm-panel);
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
}
.cm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--cm-text);
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.cm-item:hover:not(:disabled) { background: rgba(143, 123, 216, 0.25); }
.cm-item:disabled { opacity: 0.3; cursor: not-allowed; }
.cm-item kbd { font-size: 0.62rem; color: var(--cm-muted); }

/* ── playtest bar ──────────────────────────────────────────────────────── */

.creator-playtest-bar {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.8rem;
  font: 600 0.7rem/1 ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: var(--cm-warn);
  background: rgba(12, 11, 20, 0.9);
  border: 1px solid var(--cm-warn);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* ── the modal editors (logic, dialogue, objectives…) ──────────────────── */

.creator-editor {
  position: absolute;
  inset: 3rem 4rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--cm-panel);
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(18px);
  overflow: hidden;
  color: var(--cm-text);
  font-family: system-ui, sans-serif;
}
.ce-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--cm-line);
}
.ce-head h2 { margin: 0; font-size: 1rem; }
.ce-head p { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--cm-muted); }
.ce-close { font-size: 1.4rem; line-height: 1; color: var(--cm-muted); background: none; border: 0; cursor: pointer; }
.ce-close:hover { color: var(--cm-text); }
.ce-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }

.ce-section { margin-bottom: 1.4rem; }
.ce-section h3 { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-accent); }

.ce-empty { padding: 1.5rem; font-size: 0.85rem; color: var(--cm-muted); line-height: 1.6; text-align: center; }
.ce-note { margin: 0.3rem 0; font-size: 0.72rem; color: var(--cm-muted); }
.ce-list { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; }

.ce-card {
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cm-line);
  border-radius: 9px;
}
.ce-card.off { opacity: 0.5; }
.ce-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.ce-card-head code { font-size: 0.66rem; color: var(--cm-muted); }
.ce-card-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-top: 0.7rem; }
.ce-card-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; }

.ce-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.76rem; }
.ce-field > span { font-size: 0.7rem; color: var(--cm-muted); }
.ce-field small { font-size: 0.66rem; color: var(--cm-muted); opacity: 0.8; }
.ce-field input, .ce-field select, .ce-field textarea {
  padding: 0.32rem 0.45rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
}
.ce-field input[type="checkbox"] { width: auto; accent-color: var(--cm-accent); }
.ce-id { font-size: 0.64rem; color: var(--cm-muted); }

.ce-block { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--cm-line); }
.ce-block h4 { margin: 0 0 0.4rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-accent-2); }
.ce-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; }
.ce-line > select { min-width: 190px; }
.ce-params { display: flex; flex-wrap: wrap; gap: 0.45rem; flex: 1; }
.ce-params .ci-row { margin-bottom: 0; min-width: 130px; flex: 1; }
.ce-summary {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cm-accent-2);
  background: rgba(159, 232, 245, 0.07);
  border-left: 2px solid var(--cm-accent-2);
  border-radius: 0 5px 5px 0;
}
.ce-rule-name { flex: 1; font-weight: 600; }

.ce-split { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; }
.ce-split-list { display: flex; flex-direction: column; gap: 0.3rem; }
.ce-tab {
  padding: 0.35rem 0.5rem;
  font-size: 0.76rem;
  text-align: left;
  color: var(--cm-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.ce-tab.on { background: rgba(143, 123, 216, 0.25); border-color: var(--cm-accent); }
.ce-split-body { display: flex; flex-direction: column; gap: 0.8rem; }

/* ── the World menu and version table ──────────────────────────────────── */

.cw-menu { display: flex; flex-direction: column; gap: 0.4rem; }
.cw-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  text-align: left;
  color: var(--cm-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  cursor: pointer;
}
.cw-item:hover { background: rgba(143, 123, 216, 0.2); }
.cw-item b { font-size: 0.86rem; }
.cw-item span { font-size: 0.74rem; color: var(--cm-muted); }
.cw-danger:hover { background: rgba(216, 96, 123, 0.2); }
.cw-note { margin: 0 0 0.8rem; font-size: 0.78rem; color: var(--cm-muted); }
.cw-versions { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.cw-versions th, .cw-versions td { padding: 0.35rem 0.5rem; text-align: left; border-bottom: 1px solid var(--cm-line); }
.cw-versions th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cm-muted); }

/* audit findings */
.ce-card.ca-error { border-left: 3px solid var(--cm-bad); }
.ce-card.ca-warn { border-left: 3px solid var(--cm-warn); }
.ce-card.ca-info { border-left: 3px solid var(--cm-muted); }
.ca-msg { margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 500; }
.ca-fix { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--cm-muted); line-height: 1.5; }

.cv-list { margin: 0.3rem 0 0.9rem; padding-left: 1.1rem; font-size: 0.8rem; line-height: 1.6; }
.cv-list li { margin-bottom: 0.25rem; }
.cv-none { font-size: 0.8rem; color: var(--cm-good); }

/* ── the dashboard page ────────────────────────────────────────────────── */

.cm-tabs { display: flex; gap: 0.4rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--cm-line); }
.cm-tabs a {
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--cm-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cm-tabs a.on { color: var(--cm-text); border-bottom-color: var(--cm-accent); }
.cm-tabs a:hover { color: var(--cm-text); }

.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.cm-note { margin: 0; font-size: 0.8rem; color: var(--cm-muted); }
.cm-subhead { margin: 2rem 0 0.6rem; font-size: 0.9rem; }
.cm-loading { color: var(--cm-muted); }

.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cm-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cm-line);
  border-radius: 11px;
}
.cm-card h3 { margin: 0; font-size: 1rem; }
.cm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--tint, var(--cm-accent));
}
.cm-kind { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-muted); }
.cm-desc { margin: 0; font-size: 0.8rem; color: var(--cm-muted); line-height: 1.5; }
.cm-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem 0.8rem; margin: 0; }
.cm-meta div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; }
.cm-meta dt { color: var(--cm-muted); }
.cm-meta dd { margin: 0; }
.cm-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.cm-card-slim .cm-meta { grid-template-columns: 1fr; }
.cm-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--cm-muted); }
.cm-empty h3 { margin: 0 0 0.4rem; color: var(--cm-text); }

.cm-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cm-table th, .cm-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--cm-line); vertical-align: top; }
.cm-table th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-muted); }
.cm-table code { font-size: 0.7rem; color: var(--cm-muted); }
.cm-caps code { display: inline-block; margin: 0 0.2rem 0.2rem 0; padding: 0.05rem 0.3rem; background: rgba(143, 123, 216, 0.15); border-radius: 3px; }
.cm-official { margin: 0; padding: 0; list-style: none; font-size: 0.8rem; }
.cm-official li { padding: 0.3rem 0; border-bottom: 1px solid var(--cm-line); }
.cm-official span { color: var(--cm-muted); font-size: 0.74rem; }

.cm-wizard { display: flex; flex-direction: column; gap: 1rem; }
.cm-wizard fieldset { padding: 0.9rem 1rem; border: 1px solid var(--cm-line); border-radius: 9px; }
.cm-wizard legend { padding: 0 0.4rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-accent); }
.cm-wizard label { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; font-size: 0.82rem; }
.cm-wizard label small { font-size: 0.7rem; color: var(--cm-muted); }
.cm-wizard input, .cm-wizard select, .cm-wizard textarea {
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 6px;
}
.cm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; }

/* ── accessory studio ──────────────────────────────────────────────────── */

.acc-studio {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(6px);
}
.acc-panel {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 100%;
  background: var(--cm-panel);
  border: 1px solid var(--cm-line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--cm-text);
  font-family: system-ui, sans-serif;
}
.acc-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--cm-line); }
.acc-head h2 { margin: 0; font-size: 1.05rem; }
.acc-head p { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--cm-muted); }
.acc-close { font-size: 1.5rem; line-height: 1; color: var(--cm-muted); background: none; border: 0; cursor: pointer; }
.acc-body { display: grid; grid-template-columns: 400px 1fr; gap: 0; flex: 1; min-height: 0; }
.acc-view { display: flex; flex-direction: column; border-right: 1px solid var(--cm-line); padding: 0.8rem; gap: 0.6rem; }
.acc-canvas { flex: 1; min-height: 380px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #1a1826, #0a0910); }
.acc-canvas canvas { display: block; width: 100%; height: 100%; }
.acc-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: var(--cm-muted); }
.acc-view-tools select { padding: 0.2rem 0.3rem; color: var(--cm-text); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--cm-line); border-radius: 4px; }
.acc-warn { margin: 0; font-size: 0.74rem; color: transparent; min-height: 1.2em; }
.acc-warn.on { color: var(--cm-warn); }
.acc-form { overflow-y: auto; padding: 0.9rem 1.1rem; }
.acc-form section { margin-bottom: 1.3rem; }
.acc-form h3 { margin: 0 0 0.6rem; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cm-accent); }
.acc-field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.55rem; font-size: 0.78rem; }
.acc-field > span { font-size: 0.7rem; color: var(--cm-muted); }
.acc-field small { font-size: 0.66rem; color: var(--cm-muted); opacity: 0.8; }
.acc-field input, .acc-field select {
  padding: 0.3rem 0.42rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
}
.acc-vec > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.acc-part { padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--cm-line); border-radius: 8px; }
.acc-part-head { margin-bottom: 0.5rem; font-size: 0.76rem; }
.acc-part-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.acc-foot { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--cm-line); }
.acc-foot [data-status] { flex: 1; font-size: 0.76rem; color: var(--cm-muted); }

/* ── the authored-world dialogue panel ─────────────────────────────────── */

.authored-dialogue {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(640px, 88vw);
  padding: 1rem 1.2rem;
  background: rgba(12, 11, 20, 0.94);
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  color: var(--cm-text);
  font-family: system-ui, sans-serif;
}
.ad-speaker { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-accent-2); margin-bottom: 0.4rem; }
.ad-text { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.55; }
.ad-choices { display: flex; flex-direction: column; gap: 0.35rem; }
.ad-choice { text-align: left; }

/* ── narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .creator-root {
    grid-template-columns: 1fr;
    grid-template-areas: "bar" "view" "status";
  }
  .creator-left, .creator-right {
    position: absolute;
    top: 3rem;
    bottom: 2rem;
    width: min(300px, 82vw);
    z-index: 10;
  }
  .creator-left { left: 0; }
  .creator-right { right: 0; }
  .creator-drag { display: none; }
  .acc-body { grid-template-columns: 1fr; }
  .creator-editor { inset: 1rem; }
  .ce-split { grid-template-columns: 1fr; }
}

/* ── Creator Catalog ──────────────────────────────────────────────────────
   The asset registry's browser surface. It lives inside the Creator Mode
   dashboard and borrows its variables, so there is one visual language and
   no second shell to keep in step. */

.ac-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ac-tabs { display: flex; gap: 0.4rem; }
.ac-tabs button {
  background: none; border: 1px solid var(--cm-line); color: var(--cm-dim);
  padding: 0.4rem 0.9rem; border-radius: 6px; cursor: pointer; font: inherit;
}
.ac-tabs button.on { color: var(--cm-text); border-color: var(--cm-accent); background: rgba(143,123,216,0.12); }

.ac-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.ac-filters input[type="search"] { flex: 1 1 260px; min-width: 200px; }
.ac-filters input, .ac-filters select {
  background: var(--cm-panel); border: 1px solid var(--cm-line); color: var(--cm-text);
  padding: 0.45rem 0.6rem; border-radius: 6px; font: inherit;
}

.ac-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .ac-layout { grid-template-columns: 1fr; } }

.ac-count { color: var(--cm-dim); font-size: 0.85rem; margin: 0 0 0.6rem; }
.ac-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ac-card {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%; text-align: left;
  background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 8px;
  padding: 0.7rem 0.8rem; cursor: pointer; color: var(--cm-text); font: inherit;
}
.ac-card:hover { border-color: var(--cm-accent); }
.ac-card-warn { border-left: 3px solid #e6cf8f; }
.ac-card-top { display: flex; align-items: center; gap: 0.5rem; }
.ac-swatch {
  width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center;
  border-radius: 5px; background: rgba(143,123,216,0.16); font-size: 0.95rem;
}
.ac-card-name { font-weight: 600; }
.ac-card-sum { color: var(--cm-dim); font-size: 0.82rem; line-height: 1.35; }
.ac-card-meta { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; }
.ac-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--cm-dim);
}
.ac-tag-warn { background: rgba(230,207,143,0.16); color: #e6cf8f; }
.ac-cost-high, .ac-cost-very-high { background: rgba(216,96,123,0.16); color: #d8607b; }
.ac-cost-moderate { background: rgba(230,207,143,0.14); color: #e6cf8f; }

.ac-detail { position: sticky; top: 1rem; background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 8px; padding: 1rem; max-height: 80vh; overflow: auto; }
.ac-hint { color: var(--cm-dim); font-size: 0.88rem; }
.ac-detail-body h3 { margin: 0 0 0.2rem; }
.ac-detail-body h4 { margin: 1rem 0 0.35rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cm-dim); }
.ac-id { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--cm-dim); }
.ac-warnings { margin: 0.6rem 0; padding: 0.5rem 0.7rem 0.5rem 1.5rem; background: rgba(230,207,143,0.1); border-left: 3px solid #e6cf8f; border-radius: 4px; font-size: 0.85rem; }
.ac-preview { margin: 0.8rem 0; padding: 0.8rem; border: 1px dashed var(--cm-line); border-radius: 6px; }
.ac-preview-nonvisual b, .ac-preview-scene b { display: block; margin-bottom: 0.3rem; }
.ac-preview-nonvisual p, .ac-preview-scene p { margin: 0.25rem 0; font-size: 0.85rem; color: var(--cm-dim); }
.ac-preview-swatches { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ac-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--cm-dim); }
.ac-chip i { width: 16px; height: 16px; border-radius: 3px; display: inline-block; border: 1px solid var(--cm-line); }
.ac-variants { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ac-variants button {
  background: none; border: 1px solid var(--cm-line); color: var(--cm-dim);
  padding: 0.28rem 0.6rem; border-radius: 5px; cursor: pointer; font: inherit; font-size: 0.82rem;
}
.ac-variants button.on { color: var(--cm-text); border-color: var(--cm-accent); background: rgba(143,123,216,0.14); }
.ac-props code, .ac-fixed code { font-size: 0.78rem; background: rgba(255,255,255,0.05); padding: 0.1rem 0.3rem; border-radius: 3px; margin-right: 0.2rem; }
.ac-fixed, .ac-note { font-size: 0.82rem; color: var(--cm-dim); }
.ac-perf, .ac-children { list-style: none; margin: 0.3rem 0; padding: 0; font-size: 0.85rem; }
.ac-perf li, .ac-children li { padding: 0.15rem 0; }
.ac-json { background: rgba(0,0,0,0.28); border-radius: 5px; padding: 0.6rem; font-size: 0.74rem; overflow-x: auto; max-height: 260px; }
.ac-link { background: none; border: none; color: var(--cm-accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.ac-params { display: grid; gap: 0.45rem; }
.ac-params label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.ac-params input, .ac-params select {
  background: var(--cm-bg, #14121e); border: 1px solid var(--cm-line); color: var(--cm-text);
  padding: 0.3rem 0.5rem; border-radius: 5px; font: inherit; font-size: 0.85rem; max-width: 170px;
}
.ac-actions { margin: 1rem 0 0.4rem; }

/* ══ the spec visual editor ══════════════════════════════════════════════════

   The in-world editor above overlays a running world, so it needs no viewport
   of its own. This one is a PAGE: it owns the space beside the platform
   sidebar and mounts its own canvas, so it adds a viewport cell to the same
   grid and otherwise reuses every control style above. */

/* The editor is fixed over the page area, so the document behind it must not
   scroll: a stray wheel event otherwise slides the whole shell under a
   viewport that stays put. */
body.spec-editing { overflow: hidden; }
body.spec-editing .page { padding: 0; max-width: none; overflow: hidden; }

.creator-root.spec-editor {
  position: fixed;
  inset: 0 0 0 var(--sidebar);
  z-index: 30;
  background: #07060c;
}
@media (max-width: 900px) { .creator-root.spec-editor { inset: 0; } }

.creator-root.spec-editor.se-collapsed-left { grid-template-columns: 0 1fr var(--right-w, 320px); }
.creator-root.spec-editor.se-collapsed-right { grid-template-columns: var(--left-w, 300px) 1fr 0; }
.creator-root.spec-editor.se-collapsed-left.se-collapsed-right { grid-template-columns: 0 1fr 0; }
.creator-root.spec-editor.se-collapsed-left .creator-left,
.creator-root.spec-editor.se-collapsed-right .creator-right { display: none; }

.se-view { grid-area: view; position: relative; min-width: 0; min-height: 0; }
.se-canvas { position: absolute; inset: 0; }
.se-canvas canvas { display: block; width: 100%; height: 100%; }

/* The box-selection rectangle. A DOM overlay, not scene geometry: it sits
   above the canvas, ignores the pointer entirely, and the dual border keeps
   it readable over both a bright sky and a black void. */
.se-marquee {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border: 1px solid var(--cm-accent-2);
  outline: 1px solid rgba(10, 9, 16, 0.55);
  background: rgba(159, 232, 245, 0.10);
  border-radius: 2px;
}

.se-level { font-size: 0.78rem; color: var(--cm-muted); }
.se-rev { font: 0.7rem/1 ui-monospace, monospace; color: var(--cm-muted); }
.se-readonly { font-size: 0.68rem; }

.se-save { font-size: 0.72rem; color: var(--cm-muted); white-space: nowrap; }
.se-save-good { color: var(--cm-good); }
.se-save-warn { color: var(--cm-warn); }
.se-save-bad { color: var(--cm-bad); font-weight: 600; }
.se-save-busy { color: var(--cm-accent-2); }
.se-save-muted { color: var(--cm-muted); }

/* ── the workflow toolbar ──────────────────────────────────────────────────
   Status is TEXT with a tint, never a tint alone: the label says what the
   state is, so it survives being read by somebody who cannot see the colour
   and by a screen reader that reports neither. */

.cb-workflow { display: flex; align-items: center; gap: 0.35rem; }

.se-status {
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--cm-line);
  color: var(--cm-muted);
}
.se-status-good { color: var(--cm-good); border-color: color-mix(in srgb, var(--cm-good) 45%, transparent); }
.se-status-warn { color: var(--cm-warn); border-color: color-mix(in srgb, var(--cm-warn) 45%, transparent); }
.se-status-bad { color: var(--cm-bad); border-color: color-mix(in srgb, var(--cm-bad) 45%, transparent); font-weight: 600; }
.se-status-busy { color: var(--cm-accent-2); border-color: color-mix(in srgb, var(--cm-accent-2) 45%, transparent); }

/* A disabled workflow control still has to look deliberate rather than
   broken — it carries its reason in `title` and `aria-label`. */
.cb-workflow .cb-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── the preview dialog ── */

.se-preview-dialog .se-preview-warn {
  color: var(--cm-warn);
  font-size: 0.82rem;
  margin: 0.4rem 0 0;
}
.se-preview-levels {
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin: 0.9rem 0 0.6rem;
}
.se-preview-levels legend {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cm-muted);
  padding: 0 0.35rem;
}
.se-preview-levels select { width: 100%; }

/* ── versioning ────────────────────────────────────────────────────────────
   Status is carried by TEXT throughout. Colour distinguishes; it never
   informs, so the whole panel reads correctly in monochrome. */

.se-live { font-size: 0.72rem; color: var(--cm-good); white-space: nowrap; }
.se-live.se-live-none { color: var(--cm-muted); }

.se-version-facts,
.se-state-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.9rem;
  margin: 0.6rem 0;
  font-size: 0.82rem;
}
.se-version-facts dt, .se-state-rows dt { color: var(--cm-muted); }
.se-version-facts dd, .se-state-rows dd { margin: 0; }
.se-state-empty { color: var(--cm-muted); }
.se-hash { font-family: ui-monospace, monospace; font-size: 0.74rem; word-break: break-all; }

.se-version-warn { color: var(--cm-warn); font-size: 0.82rem; margin: 0.5rem 0; }

.se-state-notice { font-size: 0.78rem; margin: 0.3rem 0; color: var(--cm-muted); }
.se-state-notice.se-state-warn { color: var(--cm-warn); }

/* The history panel sits over the editor rather than beside it: the editor
   grid is already full, and history is a thing you consult and dismiss. */
.se-history {
  position: absolute;
  top: 3.2rem; right: 0.75rem; bottom: 0.75rem;
  width: min(30rem, calc(100vw - 1.5rem));
  overflow-y: auto;
  padding: 0.9rem;
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  background: var(--cm-panel, #12111c);
  z-index: 20;
}
.se-history-close { float: right; }

.se-version-list { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.se-version-row {
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.6rem;
}
.se-version-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.se-version-number { font-weight: 700; }
.se-version-summary { margin: 0.4rem 0; font-size: 0.84rem; }
.se-version-meta, .se-version-ids {
  margin: 0.2rem 0; font-size: 0.72rem; color: var(--cm-muted);
}
.se-version-ids { font-family: ui-monospace, monospace; word-break: break-all; }
.se-version-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }

.se-badge-good { color: var(--cm-good); }
.se-badge-busy { color: var(--cm-accent-2); }
.se-badge-warn { color: var(--cm-warn); }
.se-badge-muted, .se-badge-neutral { color: var(--cm-muted); }

/* ── comparison ── */

.se-diff-title { margin: 0 0 0.5rem; }
.se-diff-summary { margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.86rem; }
.se-diff-group { border-top: 1px solid var(--cm-line); padding: 0.5rem 0; }
.se-diff-group > summary { cursor: pointer; font-weight: 600; }
.se-diff-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.se-diff-change {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.25rem 0; font-size: 0.82rem;
  border-bottom: 1px dotted var(--cm-line);
}
.se-diff-kind {
  flex: 0 0 auto; min-width: 4.6rem;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.se-diff-added .se-diff-kind { color: var(--cm-good); }
.se-diff-removed .se-diff-kind { color: var(--cm-bad); }
.se-diff-changed .se-diff-kind { color: var(--cm-accent-2); }
.se-diff-target { font-weight: 600; }
.se-diff-field { color: var(--cm-muted); }
.se-diff-values { font-family: ui-monospace, monospace; font-size: 0.76rem; }
.se-diff-delta { font-weight: 700; }
.se-diff-error { color: var(--cm-bad); }

.se-manifest-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-top: 0.5rem; }
.se-manifest-table th, .se-manifest-table td {
  text-align: left; padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--cm-line);
}
.se-validation-list { font-size: 0.8rem; padding-left: 1.1rem; }

/* ── viewport overlays ── */

.se-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 6, 12, 0.82);
  backdrop-filter: blur(4px);
  z-index: 5;
}
.se-overlay[hidden] { display: none; }
.se-overlay-card { text-align: center; max-width: 34rem; padding: 1.4rem; }
.se-overlay-card h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--cm-bad); }
.se-overlay-card p { margin: 0 0 0.8rem; font-size: 0.84rem; color: var(--cm-muted); line-height: 1.5; }
.se-spinner {
  display: inline-block; width: 22px; height: 22px; margin-bottom: 0.6rem;
  border: 2px solid var(--cm-line); border-top-color: var(--cm-accent);
  border-radius: 50%; animation: se-spin 0.9s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .se-spinner { animation: none; border-top-color: var(--cm-line); }
}

/* ── hierarchy additions ── */

.ch-flag {
  font: 700 0.55rem/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.28rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cm-muted);
  flex-shrink: 0;
}
.ch-flag-error { background: rgba(216, 96, 123, 0.2); color: var(--cm-bad); }
.ch-flag-warning { background: rgba(230, 207, 143, 0.18); color: var(--cm-warn); }
.ch-row:focus-visible { outline: 2px solid var(--cm-accent-2); outline-offset: -2px; }
.cb-btn:focus-visible, .cp-search:focus-visible, .ci-num input:focus-visible {
  outline: 2px solid var(--cm-accent-2);
  outline-offset: 1px;
}

/* ── inspector transform fields ── */

.ci-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.45rem; }
.ci-num { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.62rem; color: var(--cm-muted); }
.ci-num input {
  padding: 0.3rem 0.4rem;
  font: inherit; font-size: 0.76rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  width: 100%;
}
.ci-num input:disabled { opacity: 0.4; cursor: not-allowed; }
/* Align / distribute — one button per world axis, sharing the transform
   rows' three-column grid so the X/Y/Z columns line up with the numbers
   directly above them.

   `.ci-mode` is the WHAT selector that sits above each axis row — origins,
   bounds min/center/max, equal gaps. A dropdown rather than a second and third
   row of buttons: six modes across three axes is eighteen commands, and
   eighteen bare X/Y/Z buttons stacked in the inspector is a wall, not a tool.
   Held to the row width so the two selectors line up with each other and read
   as the same kind of control. */
.ci-mode { width: 100%; margin-bottom: 0.35rem; }
.ci-axis-btn {
  padding: 0.3rem 0.4rem;
  font: inherit; font-size: 0.76rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  cursor: pointer;
}
.ci-axis-btn:hover:not(:disabled) { background: rgba(159, 232, 245, 0.14); }
.ci-axis-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Drop to surface — a NAMED command rather than an axis letter, because it has
   no axis to pick: it is always world −Y. Borrows the axis button's skin so the
   inspector's action controls read as one family, but sizes to its own label
   instead of joining the three-column grid, which would leave two empty cells
   pretending there are modes that do not exist. */
.ci-action-btn {
  padding: 0.3rem 0.55rem;
  font: inherit; font-size: 0.76rem;
  color: var(--cm-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  cursor: pointer;
}
.ci-action-btn:hover:not(:disabled) { background: rgba(159, 232, 245, 0.14); }
.ci-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ci-value { font-size: 0.74rem; word-break: break-all; text-align: right; }
.ci-error {
  margin: 0.6rem 0.7rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.74rem;
  color: var(--cm-bad);
  background: rgba(216, 96, 123, 0.12);
  border-left: 3px solid var(--cm-bad);
  border-radius: 4px;
}
.ci-error[hidden] { display: none; }

/* ── the conflict dialog ── */

.se-conflict-meta { display: grid; gap: 0.4rem; margin: 0.9rem 0; }
.se-conflict-meta > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.84rem; }
.se-conflict-meta dt { color: var(--text-2, #9a95ab); }
.se-conflict-meta dd { margin: 0; font-weight: 600; }

/* ── too narrow to edit ── */

.se-toosmall {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: #07060c;
}
.se-toosmall[hidden] { display: none; }
.se-toosmall h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.se-toosmall p { margin: 0 0 1rem; color: var(--cm-muted); font-size: 0.88rem; line-height: 1.5; }

/* ══ Stage 2: catalogue panels, placement, hierarchy and the schema inspector ══
   Layout only. Every state these express is also stated in text — a flag has a
   title, a refusal has a sentence — because colour alone is not a message a
   creator can be relied upon to receive. */

/* ── the left rail's tabs ── */
/* Ten sections do not fit on one line in a 300px rail, and three of them
   spilling out of the panel is worse than a wrap: a creator cannot click a tab
   they cannot see. Wrapping keeps every section reachable at every rail width,
   which matters more here than keeping the header one line tall. */
.se-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.se-tabs button {
  /* `auto` rather than `1`: with ten tabs, equal flex made every label so
     narrow that it ellipsised to two characters. Sized to their text, they
     wrap onto as many lines as they need and stay readable. */
  flex: 0 1 auto;
  padding: 0.3rem 0.42rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  white-space: nowrap;
  color: var(--cm-muted); background: transparent;
  border: 1px solid transparent; border-radius: 5px;
}
.se-tabs button:hover { color: var(--cm-text); background: rgba(143, 123, 216, 0.1); }
.se-tabs button[aria-selected="true"] {
  color: var(--cm-text); background: rgba(143, 123, 216, 0.2);
  border-color: rgba(143, 123, 216, 0.45);
}
.se-tabs button:focus-visible { outline: 2px solid var(--cm-accent-2); outline-offset: 1px; }

.cp-tab { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cp-tab[hidden] { display: none; }

/* ── catalogue and prefab browsers ── */
.sp-filters { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--cm-line); display: grid; gap: 0.35rem; }
.sp-filter-row { display: flex; gap: 0.35rem; }
.sp-filter-row select { flex: 1; min-width: 0; font-size: 0.78rem; }
.sp-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--cm-muted); }

.sp-results { overflow-y: auto; flex: 1; min-height: 0; padding: 0.3rem; }
.sp-card {
  display: flex; gap: 0.5rem; align-items: flex-start; width: 100%;
  padding: 0.45rem 0.5rem; margin-bottom: 0.25rem; cursor: pointer;
  text-align: left; background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cm-line); border-radius: 6px;
}
.sp-card:hover { background: rgba(143, 123, 216, 0.12); border-color: rgba(143, 123, 216, 0.4); }
.sp-card:focus-visible { outline: 2px solid var(--cm-accent-2); outline-offset: 1px; }
.sp-card-warn { border-left: 2px solid var(--cm-warn); }
.sp-card-icon { font-size: 1.1rem; line-height: 1.2; opacity: 0.8; }
.sp-card-body { display: grid; gap: 0.15rem; min-width: 0; }
.sp-card-name { font-size: 0.85rem; font-weight: 600; }
.sp-card-sum { font-size: 0.75rem; color: var(--cm-muted); line-height: 1.35; }
.sp-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.1rem; }
.sp-tag {
  font-size: 0.63rem; padding: 0.05rem 0.3rem; border-radius: 3px;
  background: rgba(143, 123, 216, 0.16); color: var(--cm-muted);
}
.sp-tag-warn { background: rgba(216, 96, 123, 0.2); color: var(--cm-warn); }

.sp-detail {
  border-top: 1px solid var(--cm-line); padding: 0.6rem;
  max-height: 55%; overflow-y: auto; background: rgba(0, 0, 0, 0.2);
}
.sp-detail[hidden] { display: none; }
.sp-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.sp-detail-head h4 { margin: 0; font-size: 0.9rem; }
.sp-detail-id { margin: 0.15rem 0 0.4rem; font-size: 0.7rem; color: var(--cm-muted); }
.sp-detail-desc { margin: 0 0 0.5rem; font-size: 0.78rem; line-height: 1.45; color: var(--cm-muted); }
.sp-detail h5 {
  margin: 0.6rem 0 0.25rem; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cm-accent-2);
}
.sp-meta, .sp-children { margin: 0; padding-left: 1rem; font-size: 0.76rem; line-height: 1.5; color: var(--cm-muted); }
.sp-props { margin: 0; font-size: 0.72rem; line-height: 1.6; }
.sp-props code { background: rgba(143, 123, 216, 0.14); padding: 0.05rem 0.25rem; border-radius: 3px; }
.sp-note { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--cm-muted); line-height: 1.45; }
.sp-warnings {
  margin: 0 0 0.5rem; padding: 0.35rem 0.5rem 0.35rem 1.2rem;
  font-size: 0.74rem; line-height: 1.45; color: var(--cm-warn);
  background: rgba(216, 96, 123, 0.1); border-radius: 5px;
}
.sp-variants { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sp-variants button {
  font-size: 0.72rem; padding: 0.2rem 0.45rem; cursor: pointer;
  color: var(--cm-muted); background: transparent;
  border: 1px solid var(--cm-line); border-radius: 4px;
}
.sp-variants button.on {
  color: var(--cm-text); background: rgba(143, 123, 216, 0.25);
  border-color: var(--cm-accent-2);
}
.sp-params { display: grid; gap: 0.35rem; }
.sp-param { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; }
.sp-param input, .sp-param select { max-width: 55%; }
.sp-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.sp-hint { font-size: 0.7rem; color: var(--cm-muted); }

/* ── placement ── */
.se-placement {
  position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.6rem; z-index: 6;
  padding: 0.4rem 0.7rem; font-size: 0.78rem;
  background: rgba(10, 8, 18, 0.94); border: 1px solid var(--cm-accent-2);
  border-radius: 7px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  /* The bar sits over a viewport that can be narrow. Its contents must stay on
     one line — a validity message broken one word per line is unreadable at
     exactly the moment a creator needs to read it — so it clips its own width
     and lets the message ellipsise instead. */
  max-width: calc(100% - 1.2rem); white-space: nowrap;
}
.se-placement-state {
  overflow: hidden; text-overflow: ellipsis; max-width: 26rem;
}
.se-placement-name { flex: 0 0 auto; }
.se-placement-repeat { flex: 0 0 auto; }
.se-placement[hidden] { display: none; }
.se-placement-name { font-weight: 600; }
.se-placement-state { color: var(--cm-ok, #7fd8a0); }
.se-placement-state.bad { color: var(--cm-warn); }
.se-placement-repeat { display: flex; align-items: center; gap: 0.3rem; color: var(--cm-muted); }

.se-budget {
  position: absolute; bottom: 0.5rem; left: 0.6rem; z-index: 5;
  padding: 0.25rem 0.55rem; font-size: 0.7rem; color: var(--cm-muted);
  background: rgba(10, 8, 18, 0.8); border: 1px solid var(--cm-line); border-radius: 5px;
}
.se-budget.bad { color: var(--cm-warn); border-color: var(--cm-warn); }
.se-budget:empty { display: none; }

/* ── hierarchy additions ── */
.ch-twisty {
  width: 1rem; flex: 0 0 1rem; padding: 0; font-size: 0.7rem; cursor: pointer;
  color: var(--cm-muted); background: none; border: 0;
}
.ch-twisty-none { cursor: default; }
.ch-icon-type { flex: 0 0 1rem; font-size: 0.8rem; opacity: 0.75; text-align: center; }
.ch-row.generated { opacity: 0.85; }
.ch-row.generated .ch-name { font-style: italic; }
.ch-flag-prefab { background: rgba(143, 123, 216, 0.28); }
.ch-row .ch-icon { opacity: 0; }
.ch-row:hover .ch-icon, .ch-row.selected .ch-icon, .ch-row .ch-icon:focus-visible { opacity: 1; }

/* ── the schema-driven inspector ── */
.ci-row { display: grid; gap: 0.2rem; margin-bottom: 0.45rem; }
.ci-row.ci-inline { grid-template-columns: 1fr auto; align-items: center; }
.ci-label { font-size: 0.72rem; color: var(--cm-muted); }
.ci-row input[type="text"], .ci-row input[type="number"], .ci-row select { width: 100%; font-size: 0.8rem; }
.ci-row input[type="color"] { width: 2.5rem; height: 1.5rem; padding: 0; }
.ci-row input:disabled, .ci-row select:disabled { opacity: 0.45; cursor: not-allowed; }
.ci-value { font-size: 0.78rem; word-break: break-all; }

/* ── the reference-safety dialog ── */
.se-refs h4 {
  margin: 0.8rem 0 0.3rem; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cm-accent-2);
}
.se-ref-list { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.6; }
.se-ref-list code { font-size: 0.72rem; color: var(--cm-muted); }
.se-warn { color: var(--cm-warn); }

.cb-toggle.on { color: var(--cm-text); background: rgba(143, 123, 216, 0.25); }

/* Transform space. Wide enough for "Space: World (multi)" so the label never
   reflows the toolbar as the selection changes — a control that moves the
   buttons beside it is a control creators mis-click. */
.cb-space { min-width: 9.5rem; text-align: center; }
.cb-space.on { color: var(--cm-text); background: rgba(159, 232, 245, 0.2); }
.cb-space:disabled { opacity: 0.6; cursor: default; }
.cb-warn { color: var(--cm-warn); border-color: rgba(216, 96, 123, 0.5); }

/* ── Stage 3 gameplay panels ──────────────────────────────────────────────
   Variables and Lighting. Both are lists of collapsible rows, so they share
   one set of rules rather than each growing a near-copy. */

.gp-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cm-line);
}
.gp-count { font-size: 0.74rem; color: var(--cm-text); }
.gp-limit { font-size: 0.7rem; color: var(--cm-muted); margin-left: auto; }

.gp-list { overflow-y: auto; padding: 4px 0; }

.gp-row { border-bottom: 1px solid var(--cm-line); }

.gp-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  color: var(--cm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gp-row-head:hover { background: rgba(143, 123, 216, 0.1); }
/* Focus must be visible: these rows are reachable by keyboard alone. */
.gp-row-head:focus-visible,
.gp-ref:focus-visible {
  outline: 2px solid var(--cm-accent-2);
  outline-offset: -2px;
}
.gp-row-head[aria-expanded="true"] { background: rgba(143, 123, 216, 0.16); }

.gp-row-name {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-row-id { font-size: 0.68rem; color: var(--cm-muted); }
.gp-row-refs { margin-left: auto; font-size: 0.68rem; color: var(--cm-muted); }

.gp-row-body {
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gp-field { display: flex; flex-direction: column; gap: 3px; }
.gp-field-label { font-size: 0.7rem; color: var(--cm-muted); }
.gp-field input[type="text"],
.gp-field input[type="number"],
.gp-field select {
  padding: 5px 7px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--cm-line);
  border-radius: 4px;
  color: var(--cm-text);
  font: inherit;
  font-size: 0.78rem;
}
.gp-field input:disabled,
.gp-field select:disabled { opacity: 0.5; cursor: not-allowed; }

/* A checkbox reads as label-then-control on one line. */
.gp-check { flex-direction: row; align-items: center; gap: 8px; }
.gp-check .gp-field-label { order: 2; }
.gp-check input { order: 1; }

.gp-uses h4 {
  margin: 4px 0 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gp-uses ul { margin: 0; padding: 0; list-style: none; }
.gp-uses li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
}
.gp-uses code { font-size: 0.66rem; color: var(--cm-muted); }

.gp-ref {
  padding: 1px 4px;
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--cm-accent-2);
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}
.gp-ref:hover { background: rgba(159, 232, 245, 0.14); }

.gp-row-actions { display: flex; gap: 6px; margin-top: 4px; }

.gp-announce {
  margin: 6px 10px;
  padding: 6px 8px;
  border-left: 2px solid var(--cm-warn);
  background: rgba(230, 207, 143, 0.1);
  color: var(--cm-warn);
  font-size: 0.72rem;
}

.pill-quiet {
  color: var(--cm-muted);
  border-color: var(--cm-line);
}

/* Objective problems and dependency editing. */
.gp-problems { display: flex; flex-direction: column; gap: 4px; }
.gp-problem {
  margin: 0;
  padding: 5px 7px;
  border-left: 2px solid var(--cm-warn);
  background: rgba(230, 207, 143, 0.1);
  color: var(--cm-warn);
  font-size: 0.72rem;
}
.gp-problem-error {
  border-left-color: var(--cm-bad);
  background: rgba(216, 96, 123, 0.12);
  color: var(--cm-bad);
}
.gp-broken { color: var(--cm-bad); text-decoration: line-through; }
.gp-dep-add { margin-top: 4px; }
.gp-dep-add select {
  width: 100%;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--cm-line);
  border-radius: 4px;
  color: var(--cm-text);
  font: inherit;
  font-size: 0.76rem;
}
.pill-bad { color: var(--cm-bad); border-color: rgba(216, 96, 123, 0.5); }

/* Logic rules: the summary line, entries and notices. */
.gp-summary {
  margin: 0;
  padding: 0 10px 8px 10px;
  color: var(--cm-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.gp-summary-broken { color: var(--cm-warn); }

.gp-entry {
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid var(--cm-line);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
}
.gp-entry-editor { display: flex; flex-direction: column; gap: 6px; }
.gp-entry-tools { display: flex; gap: 4px; margin-top: 6px; }

.gp-entry-add {
  width: 100%;
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--cm-line);
  border-radius: 4px;
  color: var(--cm-text);
  font: inherit;
  font-size: 0.76rem;
}
.gp-entry-add:disabled { opacity: 0.5; }

.gp-notice {
  margin: 0;
  padding: 5px 7px;
  border-left: 2px solid var(--cm-warn);
  background: rgba(230, 207, 143, 0.1);
  color: var(--cm-warn);
  font-size: 0.7rem;
  line-height: 1.4;
}
.gp-notice-info {
  border-left-color: var(--cm-accent-2);
  background: rgba(159, 232, 245, 0.1);
  color: var(--cm-accent-2);
}

/* Editor-only lighting simulation. Visually distinct from the authoring
   controls above it: a creator must never wonder whether they are changing
   the level or looking at it under different conditions. */
.gp-sim {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cm-line);
  background: rgba(159, 232, 245, 0.06);
}
.gp-sim h4 {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cm-accent-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gp-sim-states { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-sim-states .cb-btn[aria-pressed="true"] {
  color: var(--cm-text);
  background: rgba(159, 232, 245, 0.25);
  border-color: var(--cm-accent-2);
}
.gp-sim-sources { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.gp-sim-status { margin: 6px 0 0; font-size: 0.7rem; color: var(--cm-muted); }
.pill-good { color: var(--cm-good); border-color: rgba(127, 216, 168, 0.5); }

/* The project-level diagnosis above the level list. */
.gp-graph {
  padding: 6px 10px;
  border-bottom: 1px solid var(--cm-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp-graph-ok { margin: 0; font-size: 0.72rem; color: var(--cm-good); }
.gp-graph .gp-problem { margin: 0; }
.gp-graph .gp-ref { color: inherit; text-align: left; padding: 0; }

.gp-row[data-current="true"] .gp-row-head { border-left: 2px solid var(--cm-accent-2); }

/* ── Diagnostics and eligibility ─────────────────────────────────────────── */

.gp-eligibility {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cm-line);
}
.gp-eligibility h4 {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gp-stage { margin-bottom: 3px; }
.gp-stage summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.76rem;
}
.gp-stage summary:hover { background: rgba(143, 123, 216, 0.12); }
.gp-stage summary:focus-visible { outline: 2px solid var(--cm-accent-2); outline-offset: -2px; }
.gp-stage-label { flex: 1; }
.gp-stage-explain {
  margin: 3px 0 3px 10px;
  font-size: 0.7rem;
  color: var(--cm-muted);
  line-height: 1.45;
}
.gp-stage-reasons {
  margin: 0 0 6px 10px;
  padding-left: 14px;
  font-size: 0.7rem;
  color: var(--cm-bad);
}

.gp-diag-group { padding: 4px 0; }
.gp-diag-group h4 {
  margin: 6px 10px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gp-diag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--cm-text);
  font: inherit;
  text-align: left;
}
button.gp-diag { cursor: pointer; }
button.gp-diag:hover { background: rgba(143, 123, 216, 0.1); }
button.gp-diag:focus-visible { outline: 2px solid var(--cm-accent-2); outline-offset: -2px; }
.gp-diag-error { border-left-color: var(--cm-bad); }
.gp-diag-warning { border-left-color: var(--cm-warn); }

.gp-diag-head { display: flex; gap: 4px; flex-wrap: wrap; }
.gp-diag-message { font-size: 0.75rem; line-height: 1.45; }
.gp-diag-suggestion { font-size: 0.7rem; color: var(--cm-accent-2); }
.gp-diag-path { font-size: 0.64rem; color: var(--cm-muted); word-break: break-all; }

/* ── Performance ─────────────────────────────────────────────────────────── */

.gp-perf { padding: 8px 10px; overflow-y: auto; }
.gp-perf-level { margin-bottom: 12px; }
.gp-perf-level h4 {
  margin: 0 0 3px;
  font-size: 0.74rem;
  color: var(--cm-text);
}
.gp-perf-devices { margin: 0 0 6px; font-size: 0.68rem; color: var(--cm-muted); }

.gp-perf-table { display: flex; flex-direction: column; gap: 2px; }
.gp-perf-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 0.72rem;
}
.gp-perf-row.gp-perf-over-recommended { background: rgba(230, 207, 143, 0.1); }
.gp-perf-row.gp-perf-over-hard { background: rgba(216, 96, 123, 0.14); }
.gp-perf-name { flex: 1; }
.gp-perf-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.gp-perf-limits { font-size: 0.64rem; color: var(--cm-muted); }

.gp-perf-disclaimer {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--cm-line);
  font-size: 0.68rem;
  color: var(--cm-muted);
  line-height: 1.5;
}

/* "Show me this in the viewport", beside an entity reference picker. */
.gp-field .gp-show { margin-top: 3px; align-self: flex-start; }

/* ── review and publication desks ──────────────────────────────────────────
   Every status here is carried by text; colour only tints it. */

.sr-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sr-filter { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: var(--cm-muted); }

.sr-queue { list-style: none; margin: 0; padding: 0; }
.sr-row { border: 1px solid var(--cm-line); border-radius: 8px; margin-bottom: 0.5rem; }
.sr-open {
  display: flex; flex-direction: column; gap: 0.25rem; width: 100%;
  padding: 0.7rem 0.8rem; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
.sr-open:hover { background: color-mix(in srgb, var(--cm-accent) 8%, transparent); }
.sr-open:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: -2px; }
.sr-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sr-meta, .sr-summary { font-size: 0.74rem; color: var(--cm-muted); }

.sr-detail-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sr-detail-sub { color: var(--cm-muted); font-size: 0.84rem; }
.sr-summary-box, .sr-compare, .sr-actions, .sp-section {
  border: 1px solid var(--cm-line); border-radius: 8px;
  padding: 0.75rem 0.9rem; margin: 0.75rem 0;
}
.sr-action-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.sr-action-row .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sr-panel > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.sr-level { font-size: 0.8rem; margin: 0.2rem 0; }

.se-blocker-list, .sp-rollback-facts { font-size: 0.82rem; padding-left: 1.1rem; }
.sp-blocker-reason {
  font-family: ui-monospace, monospace; font-size: 0.72rem;
  color: var(--cm-bad); text-transform: uppercase; letter-spacing: 0.06em;
}
.sp-ready { color: var(--cm-good); font-size: 0.82rem; }
.sp-targets { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sp-target { border-top: 1px solid var(--cm-line); padding: 0.7rem 0; }
.sp-history { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sp-history-row { padding: 0.3rem 0; border-bottom: 1px dotted var(--cm-line); font-size: 0.8rem; }
.sp-announce { color: var(--cm-good); font-weight: 600; }

/* ── the creator's review status and timeline ── */

.se-review-status { border: 1px solid var(--cm-line); border-radius: 8px; padding: 0.75rem 0.9rem; margin: 0.75rem 0; }
.se-review-head { display: flex; align-items: center; gap: 0.5rem; }
.se-review-head h4 { margin: 0; }
.se-review-guidance { font-size: 0.86rem; margin: 0.5rem 0; }
.se-review-reason {
  margin: 0.5rem 0; padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--cm-warn);
  background: color-mix(in srgb, var(--cm-warn) 8%, transparent);
  font-size: 0.84rem;
}
.se-review-reason footer { color: var(--cm-muted); font-size: 0.74rem; margin-top: 0.3rem; }
.se-timeline-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.se-timeline-entry {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.3rem 0; border-bottom: 1px dotted var(--cm-line); font-size: 0.8rem;
}
.se-timeline-when, .se-timeline-who, .se-timeline-state { color: var(--cm-muted); font-size: 0.74rem; }
.se-timeline-what { font-weight: 600; }
.se-timeline-message { flex-basis: 100%; margin: 0.2rem 0 0; color: var(--cm-muted); }

.se-submit-versions { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.6rem 0; }
.se-submit-row { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem; border-radius: 6px; }
.se-submit-row.se-submit-blocked { opacity: 0.6; }
.se-submit-label { display: flex; flex-direction: column; gap: 0.15rem; }
.se-submit-summary { font-size: 0.78rem; color: var(--cm-muted); }
.se-submit-why { font-size: 0.74rem; color: var(--cm-warn); }
.sp-blocker-action { color: var(--cm-accent-2); font-size: 0.78rem; }

/* Reduced motion: state must be readable without any of it. Transitions are
   decoration here, never the thing that communicates a change. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal, .toast,
  .se-history, .sr-panel, .se-review-timeline,
  .se-diff-group, .sp-section {
    transition: none !important;
    animation: none !important;
  }
}

/* ── VANTA AI panel (Phase 2, Prompt 6) ──────────────────────────────────────
   The visual language is the editor's own: the panel is a tab beside
   Diagnostics, not a chat window bolted onto the side. Three colours carry
   meaning and are used nowhere else in the panel — green for what a plan adds,
   red for what it removes, amber for what it changes — and they match the
   viewport tints exactly, so a row in the list and an object in the world are
   obviously the same thing. */
.ai-panel { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.ai-head h3 { margin: 0 0 2px; font-size: 15px; letter-spacing: .02em; }
.ai-sub { margin: 0 0 10px; font-size: 12px; opacity: .7; }

.ai-context { display: grid; gap: 4px; margin: 0; font-size: 12px; }
.ai-context > div { display: flex; gap: 8px; justify-content: space-between; }
.ai-context dt { opacity: .6; }
.ai-context dd { margin: 0; text-align: right; max-width: 62%; overflow-wrap: anywhere; }

.ai-composer { display: flex; flex-direction: column; gap: 8px; }
.ai-composer textarea {
  width: 100%; resize: vertical; min-height: 64px; padding: 8px 10px;
  font: inherit; font-size: 13px; line-height: 1.45;
  color: inherit; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
}
.ai-composer textarea:focus-visible { outline: 2px solid #8f7bd8; outline-offset: 1px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-hint, .ai-note { margin: 0; font-size: 11px; opacity: .6; line-height: 1.5; }

.ai-review { display: flex; flex-direction: column; gap: 12px; }
.ai-review-head h4 { margin: 0 0 4px; font-size: 14px; }
.ai-impact { margin: 0; font-size: 13px; font-weight: 600; }
.ai-small { margin: 4px 0 0; font-size: 11px; opacity: .6; }
.ai-rationale { margin: 0; font-size: 12px; opacity: .85; line-height: 1.5; }

.ai-changes h5 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.ai-changes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-change {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
  background: rgba(255,255,255,.03); cursor: pointer;
}
.ai-change:hover { background: rgba(255,255,255,.07); }
.ai-mark { font-weight: 700; width: 1ch; flex: none; }
.ai-mark-add    .ai-mark { color: #4ade80; }
.ai-mark-remove .ai-mark { color: #ff5f6d; }
.ai-mark-change .ai-mark { color: #f5c451; }
.ai-mark-remove { text-decoration-color: rgba(255,95,109,.4); }

.ai-validation { display: grid; gap: 4px; margin: 0; font-size: 12px; }
.ai-validation > div { display: flex; justify-content: space-between; gap: 8px; }
.ai-validation dt { opacity: .6; }
.ai-validation dd { margin: 0; text-align: right; }
.ai-tone-good { color: #4ade80; }
.ai-tone-warn { color: #f5c451; }
.ai-tone-bad  { color: #ff5f6d; }

.ai-warnings, .ai-errors, .ai-blockers, .ai-alts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}
.ai-warnings li { padding: 6px 8px; border-radius: 6px; background: rgba(245,196,81,.10); color: #f5c451; }
.ai-errors li   { padding: 6px 8px; border-radius: 6px; background: rgba(255,95,109,.10); color: #ff5f6d; }
.ai-blockers li, .ai-alts li { opacity: .8; overflow-wrap: anywhere; }

.ai-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; }
.ai-stale {
  margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.45;
  background: rgba(245,196,81,.10); color: #f5c451;
}
.ai-ok { margin: 0; font-size: 12px; color: #4ade80; }

.ai-refusal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; }
.ai-refusal h4 { margin: 0; font-size: 14px; }
.ai-refusal p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.ai-refusal.is-unsupported { background: rgba(143,123,216,.10); border: 1px solid rgba(143,123,216,.28); }
.ai-refusal.is-error { background: rgba(255,95,109,.08); border: 1px solid rgba(255,95,109,.24); }
/* A conflict is neither a refusal nor a fault — somebody edited first. Amber,
   the same colour the stale notice uses, so the two read as the same event. */
.ai-refusal.is-conflict { background: rgba(245,196,81,.10); border: 1px solid rgba(245,196,81,.28); }

@media (prefers-reduced-motion: no-preference) {
  .ai-change { transition: background 120ms ease; }
}

.ai-provider { display: inline-flex; align-items: center; }
.ai-provider select {
  font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 6px;
  color: inherit; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
}

/* ── VANTA AI conversation (Prompt 7 §42–44) ─────────────────────────────────
   The transcript sits between the header and the composer and scrolls on its
   own, so the composer and the context header stay put while a thread grows.
   The editor beside it is untouched: this is a panel, not a takeover. */

.ai-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.ai-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  /* Every state carries a border AND a label, never colour alone — the
     message kind is readable in monochrome and to a screen reader. */
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.ai-msg-who {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
.ai-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-msg-title { margin: 0; font-weight: 600; }
.ai-msg-foot { margin: 0; font-size: 11.5px; opacity: .75; }

.ai-msg-creator,
.ai-msg-answer { background: rgba(143,123,216,.10); border-color: rgba(143,123,216,.26); align-self: stretch; }
.ai-msg-clarify { background: rgba(245,196,81,.10); border-color: rgba(245,196,81,.30); }
.ai-msg-notice { background: rgba(255,255,255,.04); }
.ai-msg-applied { background: rgba(96,206,141,.10); border-color: rgba(96,206,141,.30); }
.ai-msg-rejected,
.ai-msg-error { background: rgba(255,95,109,.08); border-color: rgba(255,95,109,.24); }

.ai-msg-refusal.is-platform { background: rgba(143,123,216,.10); border-color: rgba(143,123,216,.30); }
.ai-msg-refusal.is-model { background: rgba(245,196,81,.09); border-color: rgba(245,196,81,.26); }
.ai-msg-refusal.is-validation { background: rgba(255,95,109,.08); border-color: rgba(255,95,109,.24); }

.ai-choices { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── the proposal card ───────────────────────────────────────────────────── */

.ai-msg-proposal { border-color: rgba(143,123,216,.34); background: rgba(143,123,216,.07); }
.ai-msg-proposal.is-rejected,
.ai-msg-proposal.is-superseded { opacity: .6; }
.ai-msg-proposal.is-applied { border-color: rgba(96,206,141,.34); background: rgba(96,206,141,.07); }

.ai-card-head { display: flex; flex-direction: column; gap: 3px; }
.ai-card-title { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ai-card-summary { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ai-card-meta { margin: 0; font-size: 11.5px; opacity: .7; }
.ai-card-impact { margin: 0; font-size: 12px; opacity: .9; }

.ai-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 6px 10px;
  margin: 2px 0 0;
}
.ai-card-stats dt { font-size: 10.5px; opacity: .65; text-transform: uppercase; letter-spacing: .05em; }
.ai-card-stats dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }

.ai-card-diag,
.ai-card-perf,
.ai-card-quality { margin: 0; font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }

.ai-card-warning {
  margin: 0;
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(245,196,81,.10);
  border: 1px solid rgba(245,196,81,.26);
}
.ai-card-blocked { margin: 0; font-size: 11.5px; opacity: .85; }
.ai-card-settled { margin: 0; font-size: 12px; opacity: .9; }
.ai-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ── generating ──────────────────────────────────────────────────────────── */

.ai-generating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(143,123,216,.28);
  background: rgba(143,123,216,.08);
  font-size: 12.5px;
}
.ai-generating-text { margin: 0; flex: 1; }
.ai-spinner {
  width: 12px; height: 12px; flex: none;
  border-radius: 50%;
  border: 2px solid rgba(143,123,216,.35);
  border-top-color: rgba(143,123,216,.95);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-spinner { animation: ai-spin 900ms linear infinite; }
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Reduced motion: the spinner stops and the transcript stops auto-scrolling.
   The generating state is still announced and still says "planning…", so no
   information depends on the movement. */
@media (prefers-reduced-motion: reduce) {
  .ai-thread { scroll-behavior: auto; }
  .ai-spinner { animation: none; }
}

/* ── the semantic diff ───────────────────────────────────────────────────── */

.ai-diff-host {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.ai-diff-host[hidden] { display: none; }
.ai-diff-head { margin: 8px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.ai-diff-level { margin: 8px 0 2px; font-size: 12px; }
.ai-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-diff-list .ai-change { display: flex; gap: 8px; font-size: 12.5px; }
.ai-change-text { overflow-wrap: anywhere; }

.ai-label { display: block; font-size: 11.5px; opacity: .75; margin-bottom: 4px; }

/* ── VANTA AI World Architect (Prompt 8 §57, §58) ─────────────────────────
   A MODE of the VANTA AI panel, so it inherits the panel's spacing, type and
   controls rather than introducing a second visual language.

   Two rules are accessibility requirements rather than taste:

     · `.ai-world-bar` is decorative. Every fact it shows is also a sentence in
       `.ai-world-head`, and it carries aria-hidden in the markup. It must
       never become the only indicator of anything.
     · state colours are paired with text. `is-applied`, `is-current` and
       `is-pending` change the marker, but each row already reads
       "Phase 3 of 5: Lighting — ready for your review." on its own, so the
       colour is redundant by design. */

.ai-mode { display: flex; gap: 6px; margin: 0 0 8px; }
.ai-mode [role="radio"][aria-checked="true"] {
  background: var(--cb-accent, #8f7bd8);
  color: #0a0a10;
  border-color: transparent;
}

.ai-world { display: flex; flex-direction: column; gap: 14px; }
.ai-world-head { display: flex; flex-direction: column; gap: 6px; }
.ai-world-waiting { margin: 0; font-size: 12px; opacity: .75; }
.ai-world-title { margin: 0; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

.ai-world-bar {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.ai-world-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--cb-accent, #8f7bd8);
  transition: width .25s ease;
}

.ai-world-block { display: flex; flex-direction: column; gap: 8px; }
.ai-world-block h4 { margin: 0; font-size: 13px; }
.ai-world-block h5 { margin: 6px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ai-world-block ul, .ai-world-block ol { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }

.ai-world-levels li { margin-bottom: 4px; }
.ai-world-subs li { margin-bottom: 10px; }
.ai-world-subs p { margin: 0 0 4px; }

.ai-world-phases { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-world-phases:focus-visible { outline: 2px solid var(--cb-accent, #8f7bd8); outline-offset: 2px; }
.ai-world-phase {
  padding: 6px 8px; border-radius: 4px; font-size: 12px; line-height: 1.5;
  border-left: 3px solid transparent;
}
.ai-world-phase.is-applied { border-left-color: #6fcf97; opacity: .75; }
.ai-world-phase.is-current { border-left-color: var(--cb-accent, #8f7bd8); background: rgba(143, 123, 216, .12); }
.ai-world-phase.is-pending { border-left-color: rgba(255, 255, 255, .15); opacity: .6; }
.ai-world-phase[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

.ai-world-ok { color: #6fcf97; }
.ai-world-warn { color: #e8c46a; }
.ai-world-bad { color: #e88b8b; }

.ai-world-error {
  padding: 8px 10px; border-radius: 4px; font-size: 12px;
  background: rgba(232, 139, 139, .12); color: #e88b8b;
}

/* §53. The two categories are held apart visually as well as structurally, so
   a validator fact never looks like a model's opinion. */
.ai-world-diagnostics { padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, .18); }
.ai-world-suggestions {
  padding-left: 8px; margin-top: 12px;
  border-left: 2px dashed rgba(143, 123, 216, .5);
}

.ai-world-controls { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ai-world-bar > span { transition: none; }
}

/* §4. The brief's note about what could not be built as asked. Deliberately
   loud: an unread substitution is a creator quietly given a different game. */
.ai-world-designnote {
  padding: 8px 10px; border-radius: 4px;
  background: rgba(232, 196, 106, .1);
  border-left: 3px solid #e8c46a;
}
.ai-world-designnote h5 { margin: 0 0 4px; }
.ai-world-designnote p { margin: 0; font-size: 12px; line-height: 1.6; }

/* Visually hidden, still announced.

   `.sr-only` is used by the VANTA AI panel's live region and by the World
   Architect's. It was never defined, so both regions rendered as visible
   paragraphs — every announcement appeared on screen a second time, directly
   above the status line that already said it. Found during the Prompt 8
   browser pass; it affected the Prompt 7 panel too.

   The clip-rect technique rather than `display:none` or `visibility:hidden`,
   because both of those remove the element from the accessibility tree and a
   live region nobody can reach announces nothing. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Playtest Lab (Prompt 9) ───────────────────────────────────────────────
   Status is carried by TEXT in every case below. These rules only repeat what
   a word already says, which is why the colour choices are allowed to be
   subtle and why nothing here is the sole signal of a result. */

.pt-lab { display: flex; flex-direction: column; gap: 0.75rem; }
.pt-head h3 { margin: 0 0 0.25rem; }
.pt-sub, .pt-note { color: var(--muted, #9a93b5); font-size: 0.85rem; margin: 0.25rem 0; }
.pt-empty { color: var(--muted, #9a93b5); font-style: italic; }
.pt-error { color: #ffb4b4; }
.pt-warn { color: #ffd08a; }

.pt-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0.5rem 0; }
.pt-fact { display: contents; }
.pt-fact dt { color: var(--muted, #9a93b5); font-size: 0.8rem; }
.pt-fact dd { margin: 0; font-size: 0.85rem; }
.pt-fact-note dd { color: #ffd08a; }

.pt-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pt-tabs [role="tab"][aria-selected="true"] { border-color: var(--accent, #8f7bd8); }
.pt-section { padding: 0.5rem 0; }
.pt-section:focus-visible { outline: 2px solid var(--accent, #8f7bd8); outline-offset: 2px; }

.pt-card { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; padding: 0.6rem; margin: 0.5rem 0; }
.pt-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.pt-card-head h5 { margin: 0; font-size: 0.95rem; }
.pt-card-facts { color: var(--muted, #9a93b5); font-size: 0.78rem; margin: 0.25rem 0; }

/* The status word is always present; these tint the word it is written in. */
.pt-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pt-card-passed .pt-status { color: #8fe3a8; }
.pt-card-failed .pt-status { color: #ffb4b4; }
.pt-card-timed-out .pt-status,
.pt-card-error .pt-status { color: #ffd08a; }
.pt-card-stale .pt-status { color: #c9b6ff; }
.pt-card-running .pt-status { color: var(--accent, #8f7bd8); }

.pt-steps, .pt-checks, .pt-list, .pt-trace-lines, .pt-history { margin: 0.35rem 0; padding-left: 1.2rem; }
.pt-steps li, .pt-checks li, .pt-list li, .pt-trace-lines li { font-size: 0.82rem; margin: 0.1rem 0; }
.pt-trace-lines { font-variant-numeric: tabular-nums; }
.pt-history-row { font-size: 0.82rem; }

.pt-controls { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.pt-controls button[disabled] { opacity: 0.55; cursor: not-allowed; }

.pt-failure { border: 1px solid #ffb4b4; border-radius: 8px; padding: 0.7rem; margin-top: 0.75rem; }
.pt-failure:focus-visible { outline: 2px solid var(--accent, #8f7bd8); outline-offset: 2px; }
.pt-runtime-fact { font-weight: 600; }
.pt-interpretation { border-left: 2px solid rgba(255, 255, 255, 0.15); padding-left: 0.6rem; margin: 0.5rem 0; }

.pt-required { font-weight: 600; }
.pt-optional { color: var(--muted, #9a93b5); }
.pt-baseline, .pt-candidate { font-weight: 600; margin: 0.1rem 0; }
.pt-verdict { margin: 0.35rem 0; }

.pt-manual-item { margin: 0.4rem 0; }
.pt-manual-only { border: 1px solid #ffd08a; border-radius: 8px; padding: 0.6rem; margin: 0.5rem 0; }

/* Reduced motion: nothing in the lab needs movement to be understood, so the
   only transitions it has are removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .pt-lab *, .pt-lab *::before, .pt-lab *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}