/* Rain diagrams — see rain.js. Everything else is certflow.css */

.cf-life {
  stroke-width: 2.6;
}

/* A wide, invisible stroke, so a lifeline is easy to hover and to drag from */
.cf-lifehit {
  fill: none;
  stroke: transparent;
  stroke-width: 28;
}

/* Lifelines span the whole figure, so on touch screens they only swallow touches in the
   builder: elsewhere, the page still scrolls over them */
.cf-builder .cf-lifeline {
  touch-action: none;
}

.cf-tool-delegate .cf-lifeline {
  cursor: crosshair;
}

/* While stepping through: everything above this line has happened */
.cf-now {
  stroke: var(--cf-muted);
  stroke-dasharray: 2 12;
  stroke-linecap: round;
  stroke-width: 3;
  opacity: 0.6;
}

/* Heads are along the top, so the trace card sits in the bottom corner instead */
.rain .cf-trace {
  bottom: 0.6rem;
  top: auto;
}

/* …and above the builder's tool palette */
.rain.cf-builder .cf-trace {
  bottom: 3.8rem;
}

/* The "now" line: drag it to move through time, click it for a certflow snapshot. The
   whole line responds, and its handle out in the margin says so */
.cf-nowline {
  cursor: ns-resize;
  outline: none;
}

/* The handle can be dragged on touch screens; the line itself still lets the page scroll */
.cf-knob {
  touch-action: none;
}

.cf-nowhit {
  fill: none;
  stroke: transparent;
  stroke-width: 30;
}

.cf-nowline:hover .cf-now, .cf-open .cf-now {
  opacity: 1;
  stroke: var(--cf-ink);
}

/* The clock on the handle: the moment it opens a snapshot of. No drawn circle; it grows
   a little on hover and while its snapshot is open, and a ring shows keyboard focus */
.cf-glyph-clock {
  font-size: 46px;
  opacity: 0.8;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s, transform 0.2s;
}

.cf-knob:hover .cf-glyph-clock, .cf-knob.cf-open .cf-glyph-clock, .cf-knob:focus-visible .cf-glyph-clock {
  opacity: 1;
  transform: scale(1.12);
}

.cf-knobhit {
  fill: transparent;
  stroke: none;
}

.cf-knob:focus-visible .cf-knobhit {
  stroke: var(--cf-ink);
  stroke-width: 3;
}

/* The snapshot card, hanging just below the line or sitting just above it (rain.js
   places it) */
.cf-snapshot {
  background: rgb(255 255 255 / 0.97);
  border: 1px solid var(--cf-border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.12);
  padding: 0.35rem 0.5rem 0.4rem;
  position: absolute;
  right: 0.6rem;
  width: min(62%, 30rem);
  z-index: 2;
}

.cf-snapshot-title {
  color: var(--cf-muted);
  font-family: "Merriweather Sans", sans-serif;
  font-size: 0.75rem;
  margin: 0 1.5rem 0.2rem 0 !important;
}

.certflow .cf-snapshot-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  position: absolute;
  right: 0.2rem;
  top: 0.15rem;
}

/* The certflow inside is display-only: just its canvas */
/* …and not an article figure: no room kept for the margin */
.certflow .cf-preview {
  margin: 0;
  padding: 0;
}

.cf-preview .cf-controls, .cf-preview .cf-caption, .cf-preview .cf-hint, .cf-preview .cf-trace {
  display: none !important;
}

.cf-preview .cf-stage {
  pointer-events: none;
}

.cf-preview .cf-stage > svg {
  background: transparent;
  border: none;
}

@media (max-width: 40rem) {
  .cf-snapshot {
    left: 0.6rem;
    width: auto;
  }
}

/* Below a dragged "now" line: what happens later, greyed out */
.cf-future {
  opacity: 0.35;
  pointer-events: none;
}

.cf-future .cf-stroke {
  stroke: var(--cf-muted);
}

.cf-future text {
  fill: var(--cf-muted);
}

/* A rain diagram rearranging into a certflow diagram and back (rain.js, Morph). Two
   display-only drawings stacked in one frame */
.cf-morph-stage {
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: 6px;
  position: relative;
}

.cf-morph-stage > figure {
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
}

.cf-morph-stage .cf-stage > svg {
  background: transparent;
  border: none;
}

.cf-morph-stage .cf-controls, .cf-morph-stage .cf-caption, .cf-morph-stage .cf-hint, .cf-morph-stage .cf-trace,
.cf-morph-stage .cf-layer-now, .cf-morph-stage .cf-layer-knob {
  display: none !important;
}

/* The in-between lines while the morph glides, drawn in the stage's pixels */
.cf-morph-overlay {
  height: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.cf-morph-flow {
  animation: cf-march 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cf-morph-flow {
    animation: none;
  }
}

/* A rain diagram in plain text: tight lines, so the box-drawing lifelines join up, and
   small enough to fit the column */
.rain-ascii pre code {
  color: #1e1e1e;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 1.25em;
}

.cf-invocation[data-key^="v:"] {
  cursor: grab;
}

.cf-dragging .cf-invocation[data-key^="v:"] {
  cursor: grabbing;
}

.rain-ascii {
  margin-bottom: 1.5rem;
}