/* Talos playground — Dracula.
 *
 * Official Dracula values throughout. The accent hues are assigned by meaning
 * rather than decoration, so they carry the four-state logic vocabulary this
 * subject already speaks: purple for the driven signal, red for x, cyan for z,
 * green for settled. */

:root {
  color-scheme: dark;

  --ink:      #282a36;  /* background */
  --panel:    #21222c;  /* background, darker */
  --raised:   #343746;
  --rule:     #44475a;  /* current line / selection */
  --rule-lit: #6272a4;  /* comment */

  --fg:       #f8f8f2;  /* foreground */
  --fg-mid:   #b9bcce;
  --fg-dim:   #6272a4;  /* comment */

  --signal:   #bd93f9;  /* purple — logic 1, primary accent */
  --unknown:  #ff5555;  /* red    — logic x */
  --hiz:      #8be9fd;  /* cyan   — logic z */
  --settled:  #50fa7b;  /* green  — settled */
  --accent-2: #ff79c6;  /* pink */
  --warm:     #ffb86c;  /* orange */

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --masthead: 54px;
  --pipeline: 42px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, select, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ================================================================ masthead */

.masthead {
  position: relative;
  height: var(--masthead);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}

.identity { display: flex; align-items: center; gap: 12px; min-width: 0; }

.glyph {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
}

.masthead h1 {
  margin: 0;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.actions { display: flex; align-items: center; gap: 8px; flex: none; }

.ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--fg-mid);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.ghost:hover { border-color: var(--rule-lit); color: var(--fg); background: var(--raised); }
.ghost.tiny { padding: 3px 8px; font-size: 11.5px; }

.githubLink {
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  text-decoration: none;
  flex: none;
}
.githubLink svg { fill: currentColor; flex: none; }

.chev { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .16s; }
.ghost[aria-expanded="true"] .chev { transform: rotate(180deg); }

.run {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--signal);
  border-radius: 5px;
  background: var(--signal);
  color: var(--panel);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.run:hover:not(:disabled) { background: #cba6fa; border-color: #cba6fa; }
.run:disabled { opacity: .4; cursor: not-allowed; }
.run kbd {
  font: 400 11px/1 var(--mono);
  opacity: .65;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 2px 4px;
}

/* ================================================================ pipeline */

.pipeline {
  height: var(--pipeline);
  flex: none;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pipeline::-webkit-scrollbar { display: none; }
.pipeline.canDrag,
.pipeline.canDrag .stage { cursor: grab; }
.pipeline.isDragging,
.pipeline.isDragging .stage { cursor: grabbing; user-select: none; }

.pipeline ol {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  list-style: none;
}
.pipeline li {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
  padding: 0 13px;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-dim);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s;
}
.stage:hover { color: var(--fg-mid); }

.stage .ord {
  font: 400 10.5px/1 var(--mono);
  color: var(--rule-lit);
  transition: color .12s;
}
.stage:hover .ord { color: var(--fg-dim); }

.stage[aria-selected="true"] { color: var(--signal); }
.stage[aria-selected="true"] .ord { color: var(--signal); }
.stage[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--signal);
}

/* ================================================================= options */

.options {
  padding: 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.options[hidden] { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px 14px;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }

.field > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.field select,
.field input {
  padding: 7px 9px;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 13px;
  min-width: 0;
}
.field input { font-family: var(--mono); font-size: 12.5px; }
.field input::placeholder { color: var(--fg-dim); opacity: .65; }
.field select:hover, .field input:hover { border-color: var(--rule-lit); }

.commandline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 11px;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}
.commandline .prompt { color: var(--signal); font-family: var(--mono); flex: none; }
.commandline code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--fg-mid);
  scrollbar-width: thin;
}
.commandline button { flex: none; }

/* =============================================================== workbench */

.workbench {
  display: grid;
  grid-template-columns: 1fr 5px 1fr;
  height: calc(100vh - var(--masthead));
  height: calc(100dvh - var(--masthead));
  min-height: 340px;
}
/* With the options panel open the page scrolls rather than crushing the
   editor into an unusable strip. */
.options:not([hidden]) ~ .workbench { height: auto; min-height: 62vh; }

.panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
#sourcePanel { border-right: 1px solid var(--rule); }

.panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  flex: none;
}
.panelHead h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* The inspector's heading is a sentence describing the selected stage, so it
   reads as prose rather than as a label. */
#inspector .panelHead h2 {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panelTools { display: flex; align-items: center; gap: 9px; min-width: 0; }
.panelTools > [hidden] { display: none; }

.inline {
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font-size: 12px;
  cursor: pointer;
}
.inline:hover { color: var(--fg); }
#examples option {
  background: var(--panel);
  color: var(--fg);
}
#examples option[value=""] { color: var(--fg-dim); }

.status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 12px/1 var(--mono);
  color: var(--fg-dim);
}
.status.ok   { color: var(--settled); }
.status.err  { color: var(--unknown); }
.status.busy { color: var(--signal); }
.status.busy::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: tick 1s steps(2, end) infinite;
}
@keyframes tick { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }

#editor { flex: 1; min-height: 0; }
.monaco-editor .scheduleSourceLine {
  background: #bd93f959;
  box-shadow: inset 3px 0 #bd93f9;
}
.monaco-editor .scheduleSourceLineMarker {
  border-left: 3px solid #bd93f9;
  margin-left: 4px;
}
.irEditor { flex: 1; min-height: 0; }
.irEditor[hidden] { display: none; }
/* Read-only IR should remain selectable without looking editable. */
.irEditor .cursor { display: none !important; }

.scheduleView {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--ink);
}
.scheduleView[hidden] { display: none; }
.scheduleGraph + .scheduleGraph { border-top: 1px solid var(--rule); }
.scheduleSummary,
.scheduleLegend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-dim);
  font: 400 11.5px/1.3 var(--mono);
}
.scheduleSummary { background: var(--panel); }
.scheduleSummary strong { color: var(--fg); font-weight: 500; }
.scheduleSummary span::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--rule-lit);
}
.scheduleLegend { padding-block: 7px; }
.scheduleKey { display: inline-flex; align-items: center; gap: 6px; }
.scheduleKey::before {
  content: '';
  width: 18px;
  border-top: 2px solid currentColor;
}
.scheduleKey.control { color: var(--signal); }
.scheduleKey.spawn { color: var(--settled); }
.scheduleKey.sensitivity { color: #f1fa8c; }
.scheduleKey.nba { color: var(--accent-2); }
.scheduleKey.deferred { color: var(--hiz); }
.scheduleKey.conflict { color: var(--unknown); }
.scheduleCanvas { overflow-x: hidden; }
.scheduleCanvas svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-inline: auto;
  background: var(--ink);
  font-family: var(--mono);
}
.scheduleRegion > rect {
  fill: var(--panel);
  stroke: var(--rule);
  stroke-width: 1;
}
.scheduleRegion.region-nba > rect,
.scheduleRegion.region-reactive > rect { fill: #252733; }
.regionName {
  fill: var(--fg-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.emptyRegion { fill: var(--rule-lit); font-size: 11px; font-style: italic; }
.scheduleGroup > rect {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.scheduleGroup.group-convergence > rect { stroke: var(--accent-2); }
.scheduleGroup.group-control_loop > rect { stroke: var(--unknown); }
.groupName,
.feedbackCount { fill: var(--fg-dim); font-size: 8.5px; }
.feedbackCount { fill: var(--accent-2); }
.scheduleNode { outline: none; }
.scheduleNode.hasSource { cursor: pointer; }
.scheduleNode > rect {
  fill: var(--raised);
  stroke: var(--rule-lit);
  stroke-width: 1;
}
.scheduleNode.tier-native > rect { stroke: var(--settled); }
.scheduleNode.tier-bytecode > rect { stroke: var(--warm); }
.scheduleNode.tier-generated > rect { stroke: var(--hiz); }
.scheduleNode:focus > rect,
.scheduleNode:hover > rect { fill: #3b3e4d; stroke-width: 2; }
.nodeTitle { fill: var(--fg); font-size: 10.5px; font-weight: 500; }
.nodeDetail { fill: var(--fg-dim); font-size: 8.5px; }
.nodeLocation { fill: var(--accent-2); font-size: 8.5px; }
.scheduleEdge {
  fill: none;
  stroke-width: 1.5;
  opacity: .8;
}
.scheduleEdge:hover { stroke-width: 3; opacity: 1; }
.scheduleEdge.edge-control { stroke: var(--signal); }
.scheduleEdge.edge-spawn { stroke: var(--settled); }
.scheduleEdge.edge-sensitivity { stroke: #f1fa8c; }
.scheduleEdge.edge-nba { stroke: var(--accent-2); }
.scheduleEdge.edge-deferred { stroke: var(--hiz); stroke-dasharray: 4 3; }
.scheduleEdge.edge-conflict { stroke: var(--unknown); stroke-dasharray: 2 2; }
.edgeArrow.control { fill: var(--signal); }
.edgeArrow.spawn { fill: var(--settled); }
.edgeArrow.sensitivity { fill: #f1fa8c; }
.edgeArrow.nba { fill: var(--accent-2); }
.edgeArrow.deferred { fill: var(--hiz); }
.edgeArrow.conflict { fill: var(--unknown); }

.console {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--fg);
}
.console .stderr  { color: var(--unknown); }
.console .note    { color: var(--fg-dim); }
.console .good    { color: var(--settled); }
.console .warn    { color: var(--warm); }
.console .heading { color: var(--signal); }
.console:empty::after {
  content: "Press Run to compile and execute.";
  color: var(--fg-dim);
}

.waveform {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--ink);
}
.waveform[hidden], .console[hidden] { display: none; }
.waveform iframe {
  display: block;
  width: 100%;
  min-width: 600px;
  height: 100%;
  border: 0;
  background: var(--ink);
}
.waveform iframe[hidden], .waveformEmpty[hidden] { display: none; }
/* The report lays itself out for narrow panels, unlike Surfer. */
#coverageView iframe { min-width: 0; }
.waveformEmpty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: var(--fg-dim);
  font: 400 12.5px/1.6 var(--mono);
}

.handle { background: var(--rule); cursor: col-resize; }
.handle:hover, .handle:focus-visible { background: var(--signal); }

/* =================================================================== embed */

.embedDialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--fg);
  box-shadow: 0 24px 64px #0008;
}
.embedDialog[open] { display: flex; flex-direction: column; }
.embedDialog::backdrop { background: #0009; }

.embedHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.embedHead h2 { margin: 0; font-size: 14px; font-weight: 600; }

.embedFormats {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}
.embedFormats button {
  position: relative;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--fg-dim);
  font-size: 12.5px;
  cursor: pointer;
}
.embedFormats button:hover { color: var(--fg-mid); }
.embedFormats button[aria-selected="true"] { color: var(--signal); }
.embedFormats button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--signal);
}

.embedSnippet {
  flex: 1 1 auto;
  min-height: 80px;
  max-height: 50vh;
  margin: 14px 16px 0;
  padding: 11px 13px;
  overflow: auto;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font: 400 12px/1.55 var(--mono);
  color: var(--fg-mid);
  white-space: pre;
  scrollbar-width: thin;
}

/* Prose the reader acts on, so it takes the readable secondary ink rather
   than the comment purple used for labels. */
.embedNote {
  margin: 12px 16px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-mid);
}

.embedFoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 16px;
}

.segmented {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
}
.segmented[hidden] { display: none; }
.segmentedLabel {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.segmented button {
  padding: 6px 11px;
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-mid);
  font-size: 12.5px;
  cursor: pointer;
}
.segmented button:hover { background: var(--raised); color: var(--fg); }
.segmented button[aria-checked="true"] { background: var(--raised); color: var(--signal); }

/* ============================================================== responsive */

@media (max-width: 860px) {
  .workbench {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) 8px minmax(220px, 1fr);
    height: calc(100vh - var(--masthead));
    height: calc(100dvh - var(--masthead));
    min-height: 448px;
  }
  .handle { cursor: row-resize; }

  .options:not([hidden]) ~ .workbench {
    height: max(62vh, 448px);
    height: max(62dvh, 448px);
  }
}

@media (max-width: 600px) {
  :root { --masthead: 94px; }

  .masthead {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding: 6px max(10px, env(safe-area-inset-right)) 7px
      max(10px, env(safe-area-inset-left));
  }

  .identity { height: 27px; align-items: center; gap: 9px; }
  .githubLink {
    position: absolute;
    top: 12px;
    right: max(10px, env(safe-area-inset-right));
    width: 28px;
    height: 28px;
  }
  .actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .actions > button { justify-content: center; min-width: 0; }
  .run kbd { display: none; }

  .options {
    padding: 12px max(10px, env(safe-area-inset-right)) 14px
      max(10px, env(safe-area-inset-left));
  }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .field.wide { grid-column: 1 / -1; }
  .commandline { margin-top: 12px; }

  .panelHead { gap: 6px; padding-inline: 8px; }
  .panelHead h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .panelTools { gap: 5px; }
  .panelTools .ghost.tiny { padding-inline: 6px; }
  #sourcePanel .inline { max-width: 58vw; }

  .pipeline ol { padding-inline: 5px; }
  .pipeline li { padding-inline: 10px; }
  .stage { gap: 5px; }
  .console { padding: 10px; font-size: 12px; }
  .scheduleSummary,
  .scheduleLegend { padding-inline: 10px; }
}

@media (max-width: 340px) {
  .ghost, .run { padding-inline: 7px; font-size: 12px; }
  .githubLink { padding: 0; }
  .grid { grid-template-columns: 1fr; }
}

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