/* A real run, replayed: tryakrida.com/watch (watch.html; Kavin, 2026-11-01: the app's replay moved onto the site, on
   a page of its own). The story is told in the markup; run.js plays it once as beats. Two columns on wide screens:
   the heading and a status line that stays in view on the left, the steps on the right, one to a dot on a hairline
   that turns gold as each step is done. One column below 1024px. Vermilion only for the bug. */
.run-section { padding-top: clamp(32px, 5vw, 72px); }
.nav__links a[aria-current="page"], .footer__links a[aria-current="page"] { color: var(--ink); }
.run { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 88px); align-items: start; }
.run__side { position: sticky; top: calc(var(--nav-h) + 32px); }
.run__mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }
.run__head h1 { margin-top: 0; font-size: clamp(2.375rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.run__lede { margin: 18px 0 0; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; }
.run__status { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgb(168 132 58 / .45); }
.run__state { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.run__state strong { color: var(--ink); font-weight: 600; }
.run__note { margin: 6px 0 0; color: var(--ink-3); font-size: 15px; line-height: 1.5; min-height: 3em; max-width: 46ch; }
.run__controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.run__fine { margin: 18px 0 0; color: var(--ink-3); font-size: 14px; }

/* The way on, after the run: the page's one action. */
.watch-next { padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 6vw, 88px); }
.watch-next__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.watch-next__inner::before { content: ""; flex: 1 0 100%; height: 1px; margin-bottom: clamp(24px, 3vw, 40px); background: rgb(168 132 58 / .45); }
.watch-next h2 { font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); line-height: 1.05; max-width: 20ch; }

/* The steps */
.run__log { list-style: none; margin: 0; padding: 4px 0 0; }
.run__step { position: relative; padding: 0 0 36px 44px; }
.run__step:last-child { padding-bottom: 0; }
/* The dot, level with the title's first line, and the hairline down to the next one, gold once the step is done. */
.run__step::before { content: ""; position: absolute; left: 6px; top: .62rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px var(--paper); transition: background-color var(--dur-short), box-shadow var(--dur-short); }
.run__step--bug::before { background: var(--vermilion); }
.run__step::after { content: ""; position: absolute; left: 11px; top: calc(.62rem + 19px); bottom: -.62rem; width: 1px;
  background: linear-gradient(var(--gold), var(--gold)) top / 1px 100% no-repeat, var(--line);
  transition: background-size 700ms var(--ease-out); }
.run__step:last-child::after { display: none; }
.run__title { position: relative; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.run__title .run__mono { font-size: .78em; }
.run__part { position: relative; margin-top: 10px; color: var(--ink-2); }
.run__part p { margin: 0; }
.run__part > p + * { margin-top: 12px; }

/* The bug, with its proof */
.run__bug { margin-top: 4px; background: var(--card); border-radius: 4px; padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -36px rgb(60 40 20 / .45); color: var(--ink); }
.run__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.run__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 13px; color: var(--ink-2); }
.run__tag--bad { border-color: transparent; background: var(--vermilion-soft); color: var(--vermilion); font-weight: 600; }
.run__bug-title { margin: 12px 0 0; font: 400 clamp(1.1875rem, 1.1rem + .3vw, 1.375rem)/1.3 var(--serif); letter-spacing: 0; }
.run__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.run__box { min-width: 0; background: var(--paper-2); border-radius: 4px; padding: 14px 16px; font-size: 15.5px; line-height: 1.5; }
.run__box p { margin: 0; }
.run__box-h { margin-bottom: 4px !important; font-size: 14px; font-weight: 600; color: var(--ink); }
.run__box--bad { background: var(--vermilion-soft); }
.run__box--bad .run__box-h { color: var(--vermilion); }
.run__code-h { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.run__code { margin: 6px 0 0; background: var(--night); color: var(--on-night); border-radius: 4px; padding: 12px 16px;
  font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.run__diff { font-size: 12.5px; }
/* One line of code to a row, wrapped under itself after the - or +. */
.run__del, .run__add { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.run__del { color: var(--on-night-2); }
.run__add { color: #f2b8aa; }

/* Playing (run.js adds .run--play): a step not reached yet keeps its place, so nothing below it moves, and shows only
   a faint dot. The step being played shows what Akrida is doing in place of its title, with a gold hairline under
   it that fills over the beat; then the title and each part are inked in, top to bottom. */
.run--play .run__step.is-pending::before { background: var(--paper); box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 1px var(--line-strong); }
.run--play .run__step:not(.is-done)::after { background-size: 1px 0%; }
.run--play .run__step.is-active::before { background: var(--paper); box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 2px var(--gold); }
.run--play .run__step:not(.is-titled) .run__title,
.run--play .run__part:not(.is-shown) > :not(.run__now) { visibility: hidden; }
.run--play .run__title, .run--play .run__part > :not(.run__now) { animation: run-ink 650ms var(--ease-out) both; }
.run--play .run__step:not(.is-titled) .run__title, .run--play .run__part:not(.is-shown) > * { animation: none; }
.run__now { position: absolute; left: 0; right: 0; top: 0; color: var(--ink-3); }
.run__step > .run__now { left: 44px; font: 400 clamp(1.375rem, 1.2rem + .5vw, 1.75rem)/1.2 var(--serif); }
.run__part > .run__now { font-size: var(--fs-body); }
.run__now::after { content: ""; display: block; height: 1px; margin-top: 10px; max-width: 320px; background: var(--gold);
  transform-origin: left; animation: run-beat var(--beat, 2s) linear both; }
/* Skip to the end: all at once, no inking. */
.run--instant .run__title, .run--instant .run__part > * { animation: none !important; }
@keyframes run-ink { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -2px 0); } }
@keyframes run-beat { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1023px) {
  .run { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .run__side { position: static; }
  .run__note { min-height: 0; }
}
@media (max-width: 560px) {
  .watch-next .btn { width: 100%; }
  .run__step { padding-left: 34px; }
  .run__step > .run__now { left: 34px; }
  .run__step::before { left: 2px; }
  .run__step::after { left: 7px; }
  .run__cmp { grid-template-columns: 1fr; }
}
@media print {
  .run__controls, .run__note, .run__now { display: none !important; }
  .run--play .run__step .run__title, .run--play .run__part > * { visibility: visible !important; }
}