/*
 * "Check your read" on an ECU file page (TDBFS_Check): a drop zone that folds away once a read is dropped, four steps
 * with their state, then the answer in the same place: a coloured mark, the headline, a sentence, their read beside
 * this file number by number, what to do next, and Check another read. Theme tokens only, light and dark from them.
 */
.tdbfs-check {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  display: grid;
  gap: var(--sp-3);
}
/* The steps, the bar, the answer and Reset wait hidden: their own display must not show them before their time. */
.tdbfs-check [hidden] { display: none !important; }
.tdbfs-check__title { margin: 0; font-size: var(--step-1); color: var(--ink); }
.tdbfs-check__lede { margin: 0; color: var(--ink-2); font-size: var(--step--1); max-width: 60ch; }

/* The drop zone, folding away (its row shrinks to nothing) once a read is in. */
.tdbfs-check__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.tdbfs-check__fold.is-gone { grid-template-rows: 0fr; opacity: 0; }
.tdbfs-check__fold-in { min-height: 0; overflow: hidden; }
.tdbfs-check__drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--bg-sunk);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tdbfs-check__drop:hover,
.tdbfs-check__drop.is-over { border-color: var(--accent); color: var(--ink); }
.tdbfs-check__drop.is-over { transform: scale(1.01); }
.tdbfs-check__drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tdbfs-check__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tdbfs-check__icon { color: var(--accent); }
.tdbfs-check__cta { font-size: var(--step-0); color: var(--ink); }
.tdbfs-check__pick { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tdbfs-check__hint { font-size: var(--step--1); color: var(--ink-3); font-family: var(--font-mono); }

/* The steps: a dot that spins while it runs, a tick when done. */
.tdbfs-check__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tdbfs-check__step {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--step--1);
}
.tdbfs-check__dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  box-sizing: border-box;
}
.tdbfs-check__label { color: inherit; font-weight: 600; }
.tdbfs-check__detail { color: var(--ink-3); overflow-wrap: anywhere; }
.tdbfs-check__step[data-state="run"] { color: var(--ink); }
.tdbfs-check__step[data-state="run"] .tdbfs-check__dot {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: tdbfs-check-spin 0.8s linear 40;
}
.tdbfs-check__step[data-state="done"] { color: var(--ink-2); }
.tdbfs-check__step[data-state="done"] .tdbfs-check__dot { background: var(--ok); border-color: var(--ok); }
.tdbfs-check__step[data-state="skip"] .tdbfs-check__dot { border-style: dotted; }
.tdbfs-check__step[data-state="fail"] { color: var(--ink); }
.tdbfs-check__step[data-state="fail"] .tdbfs-check__dot { background: var(--bad); border-color: var(--bad); }
@keyframes tdbfs-check-spin { to { transform: rotate(360deg); } }
.tdbfs-check__bar { width: 100%; height: var(--sp-2); accent-color: var(--accent); }

/* The answer. */
.tdbfs-check__result { display: grid; gap: var(--sp-3); outline: none; }
.tdbfs-check__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.tdbfs-check__mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--ok);
}
.tdbfs-check__result[data-tone="warn"] .tdbfs-check__mark { background: var(--warn); }
.tdbfs-check__result[data-tone="bad"] .tdbfs-check__mark { background: var(--bad); }
.tdbfs-check__head { margin: 0; font-size: var(--step-1); color: var(--ink); }
.tdbfs-check__text { margin: var(--sp-1) 0 0; color: var(--ink-2); max-width: 64ch; }
.tdbfs-check__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tdbfs-check__table th,
.tdbfs-check__table td { padding: var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tdbfs-check__table th { color: var(--ink-3); font-weight: 600; }
.tdbfs-check__table td { color: var(--ink); font-family: var(--font-mono); overflow-wrap: anywhere; }
.tdbfs-check__table td.is-word { font-family: inherit; }
.tdbfs-check__same { font-family: inherit; white-space: nowrap; }
.tdbfs-check__same[data-same="yes"] { color: var(--ok); }
.tdbfs-check__same[data-same="no"] { color: var(--bad); }
.tdbfs-check__same[data-same="na"] { color: var(--ink-3); }
.tdbfs-check__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.tdbfs-check__again { margin: 0; }
.tdbfs-check__again [hidden] { display: none; }

@media (max-width: 560px) {
  .tdbfs-check { padding: var(--sp-3); }
  .tdbfs-check__step { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .tdbfs-check__detail { grid-column: 2; }
  .tdbfs-check__table th,
  .tdbfs-check__table td { padding: var(--sp-1); }
}

@media (prefers-reduced-motion: reduce) {
  .tdbfs-check__fold,
  .tdbfs-check__drop { transition: none; }
  .tdbfs-check__step[data-state="run"] .tdbfs-check__dot { animation: none; }
}