/* Breakpoints in the editor (breakpoints.js), the Calls tab (calls.js) and
   the Breakpoints panel, in studio.css's palette.  A glyph's shape is its
   kind -- rule ●, match ◆, emit ■, demand ▶, answer ◀ -- and its fill its
   state: solid armed, a white pip for a condition, an outline for a
   logpoint, grey for disabled, hollow and dashed when it cannot stop. */

/* ---- Glyphs ------------------------------------------------------------ */

.bpg {
  --bp: var(--red);
  position: relative;
  width: 10px !important;
  height: 10px !important;
  margin: 5px 0 0 6px;
  background: var(--bp);
  border: 1.5px solid var(--bp);
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
}
.bpg.k-match { border-radius: 1px; transform: rotate(45deg) scale(0.85); }
.bpg.k-emit { border-radius: 2px; }
.bpg.k-demand, .bpg.k-answer {
  border-radius: 0;
  border: none;
  width: 0 !important;
  height: 0 !important;
  background: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-top: 4px;
}
.bpg.k-demand { border-left: 10px solid var(--bp); }
.bpg.k-answer { border-right: 10px solid var(--bp); }
.bpg.cond::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: white;
}
.bpg.k-demand.cond::after { left: -8px; }
.bpg.k-answer.cond::after { left: 4px; }
.bpg.log { background: transparent; }
.bpg.k-demand.log, .bpg.k-answer.log { opacity: 0.55; }
.bpg.off { --bp: var(--muted); opacity: 0.7; }
.bpg.unbound { background: transparent; border-style: dashed; opacity: 0.6; }

/* a clause breakpoint, inline before its bracket; it takes no width, so
   the text does not move */
.bp-inline.bpg, .bp-candidate {
  all: unset;
  position: relative;
}
.bp-inline.bpg::before, .bp-candidate::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.bp-inline.bpg.k-match::before { border-radius: 1px; transform: rotate(45deg); }
.bp-inline.bpg.k-emit::before { border-radius: 1px; }
.bp-inline.bpg.k-demand::before, .bp-candidate.k-demand::before { clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; width: 7px; }
.bp-inline.bpg.k-answer::before, .bp-candidate.k-answer::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); border-radius: 0; width: 7px; }
.bp-inline.bpg.log::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--red); }
.bp-inline.bpg.off::before { background: var(--muted); }
.bp-inline.bpg.unbound::before { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.bp-candidate::before { background: rgba(220, 50, 47, 0.28); }
.bp-candidate:hover::before { background: rgba(220, 50, 47, 0.6); }
.bp-hits { color: var(--muted); font-size: 11px; font-style: italic; }

/* ---- A held stop ---------------------------------------------------------- */

/* the stop: an orange arrow, unlike any breakpoint's glyph */
.bp-stop {
  width: 15px !important;
  height: 12px !important;
  margin: 4px 0 0 3px;
  background: var(--orange);
  clip-path: polygon(0 30%, 50% 30%, 50% 0, 100% 50%, 50% 100%, 50% 70%, 0 70%);
}
.stop-line { background: rgba(203, 75, 22, 0.07); }
.stop-clause { background: rgba(203, 75, 22, 0.18); border-radius: 2px; }
.stop-bindings { color: var(--orange); font-style: italic; opacity: 0.85; }

/* ---- The popover ------------------------------------------------------------ */

.bp-popover {
  position: fixed;
  z-index: 50;
  width: 360px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(7, 54, 66, 0.18);
  font: 12px var(--sans);
  color: var(--text);
}
.bp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bp-head .bpg { margin: 0; flex: none; }
.bp-title { flex: 1; color: var(--strong); font-weight: 600; }
.bp-where { color: var(--muted); font: 11px var(--mono); }
.bp-field { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 2px 8px; margin-bottom: 6px; }
.bp-label { color: var(--muted); }
.bp-input {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: white;
  color: var(--strong);
  font: 12px var(--mono);
}
.bp-input.short { width: 70px; }
.bp-input.bad { border-color: var(--red); background: var(--red-tint); }
.bp-error { grid-column: 2; color: var(--red); font-size: 11px; }
.bp-error:empty { display: none; }
.bp-toggles { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.bp-toggles .danger { margin-left: auto; }
.bp-check { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.bp-status { padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font: 11px var(--mono); }

/* ---- The Breakpoints panel --------------------------------------------------- */

.bp-list { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.bp-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.bp-row:hover { background: var(--chrome); }
.bp-row .bpg { margin: 0; flex: none; }
.bp-row .where { font: 11px var(--mono); color: var(--strong); }
.bp-row .what { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-row .hits { color: var(--muted); font: 11px var(--mono); }
.bp-row .why { color: var(--red); font-size: 11px; }
.bp-row .remove { border: none; background: none; color: var(--muted); padding: 0 4px; height: auto; }
.bp-row.off .what, .bp-row.off .where { opacity: 0.5; }
#bp-count { margin-left: 4px; font: 11px var(--mono); }

/* ---- The Calls tab ------------------------------------------------------------ */

.calls-panel { flex: 1; overflow: auto; padding: 8px 12px; font: 12px/1.6 var(--mono); }
.calls-panel h4 { margin: 8px 0 4px; font: 600 11px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.calls-summary { color: var(--muted); font-family: var(--sans); margin-bottom: 4px; }
.call { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; border-radius: 3px; }
.call:hover { background: var(--chrome); }
.call .twist { width: 1em; color: var(--muted); cursor: pointer; text-align: center; user-select: none; }
.call .call-id, .call .frame-n { color: var(--muted); font-size: 11px; }
.call .call-text { color: var(--strong); overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.call-badge { font-size: 11px; }
.call-badge.answered { color: var(--green-dark); }
.call-badge.failed { color: var(--red); font-weight: 600; }
.call-badge.pending { color: var(--orange); }
.call-where { color: var(--blue); font-size: 11px; cursor: pointer; }
.call.frontier { background: var(--red-tint); }
.call-stack { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 6px; }
.call-stack .call:first-of-type { background: var(--orange-tint); }
.frame-bindings { color: var(--orange); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.call-frontier { margin-bottom: 6px; }
.calls-panel .more { margin: 2px 0; }

/* ---- Inspecting a held stop (inspect.js) ----------------------------------- */

.stop-bindings.elided { text-decoration: underline dotted rgba(203, 75, 22, 0.5); cursor: pointer; }
.inspect-panel { flex: 1; overflow: auto; padding: 8px 12px; font: 12px/1.6 var(--mono); }
.inspect-section { margin-bottom: 10px; }
.inspect-section h4 { margin: 4px 0; font: 600 11px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.inspect-row { display: flex; align-items: baseline; gap: 8px; padding: 1px 4px; border-radius: 3px; }
.inspect-row:hover { background: var(--chrome); }
.inspect-row > .v-tree { flex: 1; min-width: 0; }
.inspect-row > .inspect-pin { margin-left: auto; }
.inspect-row.unbound .inspect-name { color: var(--muted); }
.inspect-name { color: var(--orange); font-weight: 600; white-space: nowrap; }
.inspect-eq { color: var(--muted); }
.inspect-note { color: var(--muted); font-family: var(--sans); font-size: 11.5px; }
.inspect-error { color: var(--red); font-size: 11.5px; }
.inspect-where { color: var(--blue); cursor: pointer; font-size: 11.5px; }
.inspect-call { color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspect-pin { border: none; background: none; height: auto; padding: 0 4px; color: var(--muted); font: 11px var(--sans); cursor: pointer; }
.inspect-pin:hover { color: var(--blue); }
.inspect-add { width: 100%; height: 24px; margin-top: 4px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: white; font: 12px var(--mono); }
.inspect-pop {
  position: fixed;
  z-index: 60;
  max-width: 420px;
  max-height: 360px;
  overflow: auto;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(7, 54, 66, 0.18);
  font: 12px/1.6 var(--mono);
}
.inspect-pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.inspect-pop-head .inspect-note { flex: 1; }
.inspect-pop-label { margin-top: 6px; color: var(--muted); font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.03em; }
.inspect-pop-row { display: flex; gap: 6px; align-items: baseline; }
#prompt.held::placeholder { color: var(--orange); }

/* ---- After the fixpoint: where to go back to (rewind.js) ----------------- */

.rewind-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(7, 54, 66, 0.18); }
.rewind {
  width: min(520px, 92vw);
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(7, 54, 66, 0.22);
  font: 13px/1.5 var(--sans);
  color: var(--text);
}
.rewind h3 { margin: 0 0 6px; font-size: 15px; color: var(--strong); }
.rewind p { margin: 0 0 12px; }
.rewind-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rewind-states { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.rewind-states .hint { margin: 0 0 6px; font-size: 12px; }
.rewind-state { display: flex; align-items: baseline; gap: 10px; height: auto; padding: 4px 8px; border: none; border-radius: 4px; background: none; text-align: left; cursor: pointer; }
.rewind-state:hover { background: var(--chrome); }
.rewind-label { color: var(--blue); font: 600 12px var(--mono); min-width: 2.5em; }
.rewind-line { flex: 1; color: var(--strong); font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rewind-note { color: var(--muted); font-size: 11px; }

/* ---- Values as Slog text (sexpview.js), in the editor's colours ------------- */

.sx { font: 12px/1.55 var(--mono); color: #657b83; white-space: pre; min-width: 0; }
.sx-line { white-space: pre; }
.sx-ctor { color: #b58900; }
.sx-str { color: #2aa198; }
.sx-num { color: #d33682; }
.sx-sym { color: #657b83; }
.sx-paren { color: #93a1a1; border-radius: 2px; }
.sx-paren[data-role="open"] { cursor: pointer; }
.sx-paren.sx-lit { color: var(--strong); background: rgba(38, 139, 210, 0.16); }
.sx-more {
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(38, 139, 210, 0.1);
  color: var(--blue);
  cursor: pointer;
}
.sx-more:hover { background: rgba(38, 139, 210, 0.22); }
.sx-same { text-decoration: underline dotted rgba(108, 113, 196, 0.6); text-underline-offset: 3px; }
.inspect-row > .sx { flex: 1; }

/* ---- Where a held run is (where.js) ------------------------------------- */

/* the breadcrumb over the prompt: a line of its own under the held bar's buttons */
#held { flex-wrap: wrap; row-gap: 5px; }
#where, #where-row { order: 10; flex-basis: 100%; }
#where:empty { display: none; }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font: 12px var(--mono); }
.where .sep { color: var(--muted); }
.where .crumb {
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--strong);
  font: inherit;
  cursor: pointer;
}
.where .crumb:hover { border-color: rgba(203, 75, 22, 0.35); background: var(--surface); }
.where .crumb.run { color: var(--blue); }
.where .crumb.clause, .where .crumb.row { color: var(--orange); }
/* the part a step moved */
.where .crumb.moved { animation: where-moved 0.7s ease-out; }
@keyframes where-moved { from { background: rgba(203, 75, 22, 0.28); } }
#where-row { padding: 3px 8px; border-radius: 4px; background: var(--surface); color: var(--strong); font: 12px var(--mono); white-space: pre-wrap; }

/* the editor: the stopped rule, faintly, and the badge over it */
.stop-rule { background: rgba(203, 75, 22, 0.035); }
.stop-badge {
  padding-left: 4px;
  color: var(--orange);
  font: 500 11px/17px var(--mono);
  white-space: nowrap;
  opacity: 0.9;
}

/* the state tree: a held run's stops hang off the state it started from */
.snode.stop rect { fill: var(--orange-tint); stroke: rgba(203, 75, 22, 0.55); stroke-dasharray: 3 2; }
.snode.stop text { fill: var(--orange); font-size: 11px; }
.snode.stop.held rect { stroke: var(--orange); stroke-dasharray: none; stroke-width: 1.5; }
.snode.stop.held { animation: where-held 1.6s ease-in-out infinite; }
.snode.stop.aborted rect { stroke: var(--muted); fill: var(--chrome); }
.snode.stop.aborted text { fill: var(--muted); text-decoration: line-through; }
.snode.stop.earlier rect { fill: var(--chrome); }
.snode.stop { cursor: pointer; }
.sedge.debug { stroke: rgba(203, 75, 22, 0.55); stroke-dasharray: 3 2; }
.sedge.fold { stroke-dasharray: 1 3; }
.folded-stops rect { fill: var(--orange-tint); stroke: var(--orange); }
.folded-stops text { fill: var(--orange); font: 600 10px var(--mono); text-anchor: middle; }
.folded-stops { cursor: pointer; }
@keyframes where-held { 50% { opacity: 0.6; } }
#state-tree { overflow: hidden; }
#state-tree:has(.stop-card:not([hidden])) { max-height: 85%; }
.state-tree-body { flex: 0 1 auto; min-height: 64px; }
.stop-card { flex: 0 0 auto; max-height: 45%; overflow: auto; margin: 4px 12px 8px; padding: 8px 12px; border-left: 3px solid var(--orange); background: var(--orange-tint); font: 12px var(--mono); position: relative; }
.stop-card-title { color: var(--orange); font-weight: 600; }
.stop-card-where { color: var(--text); margin: 2px 0 4px; font-family: var(--sans); }
.stop-card-row { color: var(--strong); }
.stop-card-binding { color: var(--strong); padding-left: 10px; }
.stop-card .hint { margin-top: 4px; font-family: var(--sans); }
.stop-card > button { position: absolute; top: 4px; right: 6px; }

/* the Execution tab: where the held run stands, and the last few places */
.st-port { margin-left: 8px; color: var(--orange); font-weight: 500; }
.card-trail { margin: 6px 0 0; padding-left: 18px; color: var(--text); font: 12px var(--mono); }
.card-trail li.now { color: var(--orange); font-weight: 600; }
.execution .grid .cell.parked { box-shadow: inset 0 0 0 2px var(--orange); background: var(--orange-tint); }

@media (prefers-reduced-motion: reduce) {
  .where .crumb.moved, .snode.stop.held { animation: none; }
}