/* Card B demo: "Every run, on the record". The gate sweep's run folder filling in, in Kelvin's dark tokens
   (src/labharness/web/static/app.css). Sizes are in em on a panel whose font follows the container (cqw), so it
   scales like a screenshot. Three layouts: two columns (460px and up), two columns with the instruments as headings
   (laptops' two-card row, 375-459px), one column (phones, below 375px). */

.kd-record {
  --k-bg: #0f151c; --k-sidebar: #0b1016; --k-panel: #141c25; --k-raised: #19232e;
  --k-text: #e6edf4; --k-text-2: #c2ccd6; --k-muted: #8d9aa8;
  --k-line: #24303c; --k-line-strong: #3b4a5a;
  --k-accent: #5aa2e6; --k-accent-ink: #08111a; --k-accent-soft: rgba(90, 162, 230, 0.16);
  --k-ok: #3fb950;
  --k-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --k-ease: var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));

  position: relative;
  container-type: inline-size;
  color: var(--k-text);
  text-align: left;
}
.kd-record [hidden] { display: none !important; }
.kd-record svg { flex: none; }

/* ---------- the panel ---------- */

.kd-record-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  aspect-ratio: 5 / 4;
  min-height: 30em;
  font: 400 clamp(12px, 2.38cqw, 18px) / 1.45 var(--k-sans);
  background: var(--k-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.95em;
  overflow: hidden;
  box-shadow: 0 1.6em 4.5em rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.55);
  -webkit-font-smoothing: antialiased;
}
.kd-record-ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* things that appear as the run is recorded */
.kd-record-rv { opacity: 0; transform: translateY(0.4em); transition: opacity 0.5s var(--k-ease), transform 0.5s var(--k-ease); }
.kd-record-rv.on { opacity: 1; transform: none; }
/* two texts in one place: the second fades in over the first, so nothing around them moves */
.kd-record-swap { display: inline-grid; justify-items: start; align-items: center; }
.kd-record-swap > * { grid-area: 1 / 1; transition: opacity 0.45s var(--k-ease); }
.kd-record-swap > :last-child { opacity: 0; }
.kd-record-swap.alt > :first-child { opacity: 0; }
.kd-record-swap.alt > :last-child { opacity: 1; }

/* ---------- header: the folder and the run's state ---------- */

.kd-record-head {
  position: relative; display: flex; align-items: center; gap: 0.6em; min-width: 0;
  height: 2.95em; padding: 0 1em;
  background: var(--k-sidebar); border-bottom: 1px solid var(--k-line);
}
.kd-record-head > .kd-record-ico { color: var(--k-muted); width: 1.3em; height: 1.3em; stroke-width: 1.6; }
.kd-record-path { min-width: 0; font: 400 0.95em/1 var(--k-mono); color: var(--k-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-record-path span { color: var(--k-muted); }
.kd-record-state {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; flex: none;
  font-size: 0.92em; color: var(--k-text-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kd-record-state .kd-record-swap { justify-items: end; }
.kd-record-st { display: inline-flex; align-items: center; gap: 0.5em; }
.kd-record-spin {
  width: 1em; height: 1em; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--k-line-strong); border-top-color: var(--k-accent);
  animation: kd-record-spin 0.8s linear infinite;
}
.kd-record-swap.alt .kd-record-spin { animation-play-state: paused; }
@keyframes kd-record-spin { to { transform: rotate(360deg); } }
.kd-record-state .kd-record-ico { width: 1.1em; height: 1.1em; color: var(--k-ok); stroke-width: 2.4; }
.kd-record-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--k-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.14s linear, opacity 0.7s ease 0.2s;
}
.kd-record-bar.done { opacity: 0; }

/* ---------- body: files | settings ---------- */

.kd-record-body { display: grid; grid-template-columns: minmax(0, 1fr) max-content; min-height: 0; }
.kd-record-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0.8em 0.75em 0.95em; }
.kd-record-right { min-width: 0; padding: 0.95em 1.15em 0.95em 1.1em; border-left: 1px solid var(--k-line); }

/* the run's folder */
.kd-record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2em; }
.kd-record-file {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 0.65em; row-gap: 0.05em; padding: 0.42em 0.5em 0.45em; border-radius: 0.6em;
}
.kd-record-file > .kd-record-ico { grid-row: 1 / 3; width: 1.6em; height: 1.6em; color: var(--k-muted); stroke-width: 1.35; }
.kd-record-file .m { stroke: var(--ft, var(--k-text-2)); }
.kd-record-file.h5 { --ft: #6aaeea; }
.kd-record-file.csv { --ft: #4cc79a; }
.kd-record-file.pdf { --ft: #e7b04f; }
.kd-record-file.pptx { --ft: #ec8a62; }
.kd-record-name { font: 500 0.98em/1.3 var(--k-mono); color: var(--k-text); white-space: nowrap; min-width: 0; }
.kd-record-size { font: 400 0.92em/1.3 var(--k-mono); color: var(--k-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kd-record-size.kd-record-swap { justify-items: end; }
.kd-record-note {
  grid-column: 2 / 4; display: block; min-width: 0;
  font-size: 0.92em; line-height: 1.35; color: var(--k-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kd-record-note.kd-record-swap { display: grid; }
.kd-record-note.kd-record-swap > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kd-record-file::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--k-accent-soft); opacity: 0;
}
.kd-record-file.fresh::after { animation: kd-record-fresh 1.9s ease-out both; }
@keyframes kd-record-fresh { from { opacity: 1; } to { opacity: 0; } }

/* the scan report, as Kelvin writes it: a PDF page and a 16:9 slide */
.kd-record-previews { margin-top: auto; padding: 0.7em 0.5em 0; }
/* columns in proportion to a Letter page and a 16:9 slide, so both stand the same height at any width */
.kd-record-thumbs { display: grid; grid-template-columns: 0.7727fr 1.7778fr; align-items: end; gap: 0.8em; max-width: 19em; }
.kd-record-thumb {
  display: block; width: 100%; height: auto; border-radius: 0.22em; overflow: hidden;
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.kd-record-thumb .pg { fill: #eef1f4; }
.kd-record-thumb .ink { fill: #2b323a; }
.kd-record-thumb .txt { fill: #8a949e; }
.kd-record-thumb .mute { fill: #a9b2bb; }
.kd-record-thumb .faint { fill: #c9d0d7; }
.kd-record-thumb .band { fill: #dde2e8; }
.kd-record-thumb .accent { fill: #2a78d6; }
.kd-record-thumb .rule, .kd-record-thumb .grid { fill: none; stroke: #dbe0e6; stroke-width: 0.3; }
.kd-record-thumb .axis { fill: none; stroke: #9aa4ae; stroke-width: 0.35; }
.kd-record-thumb .data {
  fill: none; stroke: #2a78d6; stroke-width: 0.8; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s;
}
.kd-record-thumb.slide .data { stroke-width: 0.7; }
.kd-record-thumb .fit { fill: none; stroke: #3c4651; stroke-width: 0.45; stroke-dasharray: 1.3 0.9; opacity: 0; transition: opacity 0.6s ease 1.35s; }
.kd-record-thumb.on .data { stroke-dashoffset: 0; }
.kd-record-thumb.on .fit { opacity: 0.85; }
.kd-record-fit { margin: 0.6em 0 0; font-size: 0.92em; line-height: 1.35; color: var(--k-muted); }
.kd-record-fit b { font-weight: 500; color: var(--k-text-2); font-variant-numeric: tabular-nums; }

/* every instrument's settings */
/* the heading never widens the column: the table sets its width */
.kd-record-sethead { width: 0; min-width: 100%; margin: 0 0 0.55em; }
.kd-record-sethead b { display: block; font-weight: 600; font-size: 0.98em; line-height: 1.35; color: var(--k-text); }
.kd-record-when {
  display: flex; flex-wrap: wrap; gap: 0 1.2em; margin-top: 0.1em;
  font: 400 0.92em/1.4 var(--k-mono); color: var(--k-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kd-record-end { opacity: 0; transition: opacity 0.5s var(--k-ease); }
.kd-record-end.on { opacity: 1; }
.kd-record-table { display: grid; }
.kd-record-kv {
  display: grid; grid-template-columns: 6.5ch 13.5ch 9.5ch; column-gap: 1.25ch;
  font: 400 0.95em/1.62 var(--k-mono); white-space: nowrap; font-variant-numeric: tabular-nums;
  transform: translateY(0.25em);
}
.kd-record-kv .i { color: var(--k-text-2); }
.kd-record-kv .k { color: var(--k-muted); }
.kd-record-kv .v { color: var(--k-text); text-align: right; opacity: 0; transition: opacity 0.4s ease 0.16s; }
.kd-record-kv.on .v { opacity: 1; }
.kd-record-kv.gap { margin-top: 0.4em; padding-top: 0.4em; border-top: 1px solid var(--k-line); }
.kd-record-inst { display: none; font: 600 0.95em/1.62 var(--k-mono); color: var(--k-text-2); }

/* ---------- footer: who approved it, and Run again ---------- */

.kd-record-foot {
  display: flex; align-items: center; gap: 0.9em; min-width: 0;
  min-height: 3.7em; padding: 0.55em 0.8em 0.55em 1.05em;
  border-top: 1px solid var(--k-line);
}
.kd-record-ok { display: flex; align-items: center; gap: 0.55em; margin: 0; min-width: 0; font-size: 0.95em; line-height: 1.35; color: var(--k-text-2); }
.kd-record-ok .kd-record-ico { width: 1.15em; height: 1.15em; color: var(--k-ok); stroke-width: 2.4; }
.kd-record-again {
  margin-left: auto; flex: none; cursor: pointer;
  font: 600 0.95em/1 var(--k-sans); padding: 0.66em 1.1em; border-radius: 0.55em;
  border: 1px solid var(--k-accent); background: var(--k-accent); color: var(--k-accent-ink);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--k-ease), transform 0.15s ease, filter 0.15s ease, visibility 0s linear 0.45s;
}
.kd-record-again.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.kd-record-again:hover { filter: brightness(1.08); }
.kd-record-again:focus-visible { outline: 2px solid var(--k-text); outline-offset: 2px; }
.kd-record-again.pressed { transform: scale(0.95); filter: brightness(1.15); }

/* the pointer that presses Run again */
.kd-record-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px));
  transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.kd-record-cursor.on { opacity: 1; }
.kd-record-cursor svg { width: 100%; height: 100%; transition: transform 0.12s; }
.kd-record-cursor.down svg { transform: scale(0.82); }

/* the run is over: its record fades before the next one starts */
.kd-record-panel.fading .kd-record-rv.on,
.kd-record-panel.fading .kd-record-end.on,
.kd-record-panel.fading .kd-record-again.on { opacity: 0; transition: opacity 0.45s ease; }
/* a reset applies at once */
.kd-record-instant, .kd-record-instant * { transition: none !important; }

/* ---------- laptops' two-card row: instruments as headings, a narrower settings column ---------- */

@container (max-width: 459px) {
  .kd-record-panel { aspect-ratio: auto; min-height: 0; height: 35.5em; font-size: 12px; }
  .kd-record-right { padding: 0.9em 1em 0.9em 0.95em; }
  .kd-record-kv { grid-template-columns: 13.5ch 9.5ch; line-height: 1.55; }
  .kd-record-kv .i { display: none; }
  .kd-record-kv.gap { margin-top: 0; padding-top: 0; border-top: 0; }
  .kd-record-inst { display: block; line-height: 1.55; }
  .kd-record-inst.gap { margin-top: 0.4em; padding-top: 0.35em; border-top: 1px solid var(--k-line); }
  .kd-record-sethead { display: flex; align-items: baseline; gap: 1em; }
  .kd-record-sethead b { display: inline; }
  .kd-record-when { margin: 0 0 0 auto; }
  .kd-record-end { display: none; }
  .kd-record-thumbs { max-width: 14.6em; gap: 0.7em; }
}

/* the run folder's whole name before the run's state: below 420px the state keeps only its icon */
@container (max-width: 419px) {
  .kd-record-sttext { display: none; }
}

/* ---------- phones: one column ---------- */

@container (max-width: 374px) {
  .kd-record-panel { height: 48em; }
  .kd-record-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .kd-record-head { padding: 0 0.85em; }
  .kd-record-left { padding: 0.6em 0.55em 0.85em; }
  .kd-record-file:not(.h5) .kd-record-note { display: none; }
  .kd-record-file:not(.h5) > .kd-record-ico { grid-row: auto; }
  .kd-record-previews { margin-top: 0.15em; padding: 0.55em 0.5em 0; display: flex; align-items: flex-end; gap: 0.85em; }
  .kd-record-thumbs { flex: 0 0 13.8em; max-width: none; gap: 0.7em; }
  .kd-record-fit { margin: 0; flex: 1; min-width: 0; }
  .kd-record-right { border-left: 0; border-top: 1px solid var(--k-line); padding: 0.85em 1.05em 0.9em; }
  .kd-record-sethead { display: flex; align-items: baseline; gap: 1em; }
  .kd-record-sethead b { display: inline; }
  .kd-record-when { margin: 0 0 0 auto; }
  .kd-record-end { display: inline; }
  .kd-record-kv { grid-template-columns: 6.5ch 13.5ch minmax(9.5ch, 1fr); line-height: 1.55; }
  .kd-record-kv .i { display: block; }
  .kd-record-kv.gap { margin-top: 0.35em; padding-top: 0.35em; border-top: 1px solid var(--k-line); }
  .kd-record-inst { display: none; }
  .kd-record-foot { gap: 0.7em; padding: 0.6em 0.7em 0.6em 0.95em; }
  .kd-record-ok { font-size: 0.92em; gap: 0.45em; }
  .kd-record-again { padding: 0.62em 0.85em; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-record *, .kd-record *::before, .kd-record *::after { animation: none !important; transition: none !important; }
}