/* The session's states (timeline.js): the stamp at the prompt, each
   entry's stamp in its gutter, and the state tree over the transcript.
   Green is the session's state, as at the caret; blue a past one,
   explored. */

/* ---- At the prompt ---------------------------------------------------------- */

#stamp {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font: 12px/1.5 var(--mono);
  white-space: nowrap;
  padding-top: 1px;
}
#stamp:empty { display: none; }
#stamp button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
#stamp .now { color: var(--green-dark); font-weight: 700; font-size: 13px; }
#stamp .from { color: var(--green); font: 15px/1 var(--sans); opacity: 0.7; }
#stamp .pred { color: var(--muted); font-size: 10.5px; }
#stamp .pred:hover, #stamp .now:hover { text-decoration: underline; }
#stamp .quiet { color: var(--muted); font-size: 11px; }
#stamp .link { color: var(--blue); font-size: 11px; }
#stamp .link:hover { text-decoration: underline; }
#stamp.exploring .now { color: var(--blue); }
#stamp.exploring + .caret { color: var(--blue); }
.prompt-row:has(#stamp.exploring) { box-shadow: inset 3px 0 0 var(--blue); }

/* A new state: the stamp sprouts from the one it was derived from. */
#stamp.derive .now { animation: stamp-sprout 520ms cubic-bezier(.2, .9, .3, 1.2); }
#stamp.derive .from { animation: stamp-from 520ms ease-out; }
#stamp.derive .pred { animation: stamp-settle 520ms ease-out; }
@keyframes stamp-sprout {
  from { opacity: 0; transform: translateX(16px) scale(0.7); color: var(--muted); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes stamp-from {
  from { opacity: 0; transform: scaleX(0.2); }
  to { opacity: 0.7; transform: none; }
}
@keyframes stamp-settle {
  from { color: var(--green-dark); font-weight: 700; font-size: 13px; }
  to { color: var(--muted); font-weight: 400; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #stamp.derive .now, #stamp.derive .from, #stamp.derive .pred { animation: none; }
}

/* ---- In the transcript ---------------------------------------------------- */

.entry { position: relative; }
.entry > .tstamp {
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  padding: 0 2px;
  background: none;
  color: var(--muted);
  font: 10.5px/1.9 var(--mono);
  opacity: 0.55;
  cursor: pointer;
}
.entry > .tstamp:hover { opacity: 1; color: var(--strong); }
.entry.explored { box-shadow: inset 2px 0 0 var(--blue); padding-left: 8px; }
.entry.explored > .tstamp { color: var(--blue); opacity: 0.9; }

/* ---- The state tree --------------------------------------------------------- */

#repl { position: relative; }
#state-tree {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  max-height: 50%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 6px 16px rgba(7, 54, 66, 0.08);
}
.state-tree-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font: 12px var(--sans);
}
.state-tree-title { color: var(--strong); font-weight: 600; }
.state-tree-head .hint { color: var(--muted); flex: 1; }
.state-tree-body { overflow: auto; padding: 4px 8px; }

.state-tree .sedge { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.state-tree .snode { cursor: pointer; }
.state-tree .snode rect { fill: white; stroke: var(--border-strong); }
.state-tree .snode text { font: 11px var(--mono); fill: var(--muted); text-anchor: middle; }
.state-tree .snode.path rect { stroke: var(--green); }
.state-tree .snode.path text { fill: var(--text); }
.state-tree .snode.run rect { stroke-width: 1.8; }
.state-tree .snode.branch rect { stroke-dasharray: 3 2; }
.state-tree .snode.current rect { fill: var(--green); stroke: var(--green-dark); }
.state-tree .snode.current text { fill: white; font-weight: 700; }
.state-tree .snode.explored rect { fill: var(--blue); stroke: var(--blue); }
.state-tree .snode.explored text { fill: white; font-weight: 700; }
.state-tree .snode:hover rect { stroke: var(--strong); }
.state-tree .snode .prompts circle { fill: var(--surface); stroke: var(--blue); }
.state-tree .snode .prompts text { font: 9px var(--sans); font-weight: 400; fill: var(--blue); }

/* ---- A relation's time (stamp.js) ---------------------------------------- */

/* r2ᵗ¹: the state a view's rows were read at. */
.stamped sup.at {
  margin-left: 1px;
  font: 600 0.68em/0 var(--mono);
  color: var(--green-dark);
  vertical-align: super;
  letter-spacing: -0.02em;
  cursor: default;
}
/* A view of an older state than the session's: tinted, not loud. */
.stamped.past sup.at { color: var(--blue); }
.rs-tab.past { background: #eaf3fb; }
.rs-tab.past .rs-name { color: var(--blue); }
.rs-state.past { color: var(--blue); }
.entry .title.stamped.past, .zset-relation .stamped.past { color: var(--blue); }

/* A state's card, on hovering any stamp. */
.state-card {
  position: fixed;
  z-index: 50;
  max-width: 420px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 6px 18px rgba(7, 54, 66, 0.12);
  font: 12px/1.5 var(--sans);
  color: var(--text);
  pointer-events: none;
}
.state-card .head { color: var(--strong); font-weight: 600; font-family: var(--mono); }
.state-card .asked { font: 11.5px/1.5 var(--mono); color: var(--muted); padding-left: 8px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.state-card .how { margin-top: 3px; color: var(--muted); font-size: 11px; }

/* Naming a state, over its stamp. */
.state-rename {
  position: fixed;
  z-index: 51;
  width: 16ch;
  padding: 1px 5px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  font: 12px var(--mono);
  outline: none;
}