/* ==========================================================================
   Status tones: ONE status -> colour set for the whole app (owner decisions
   2026-10-21: first the Projects pages, then the whole app, "folder colour and
   pill do not match"). A stylesheet of its own, loaded after styles.css and
   before projects-folder.css / accessibility.css. This file is the only place a
   status colour is written; everything else reads the three tokens below.

   project-folder-ui.js `projectFolderTone` is the one status -> tone mapping for
   markup that carries `data-tone` (folders, status words, run bars, the Manual Run
   bar). Surfaces that keep their own class names (the global .status-pill state
   classes, .qa-chip, .qa-bar-seg, the status-filter dots, the live progress panel,
   the next-step marker) are SELECTORS in the tone rules below, so nothing is
   repeated and no markup changed. Each tone carries three tokens:
     --tone-text  the word (700-shade; >= 4.5:1 on white and on --stone-tint)
     --tone-fill  a progress bar / segment (chosen against the stone track #e7e5e4, >= 3:1)
     --tone-dot   the small dot beside a word (chips, pills, legend, next-step)
   The hues:
     processing blue (queued is the same blue; it keeps its own icon and word),
     paused amber, failed rose, completed green, idle slate (uploaded uses idle),
     cancelled light stone (its own tone, apart from idle slate).
   QA results use the same set: pass = completed green, needs review = paused
   amber, fail = failed rose (the .qa-chip and .qa-bar-seg classes below); so do
   the run page's stage lines (ok / warn / error = completed / paused / failed)
   and Manual Run's / History's stage chips (done / active / paused = completed /
   processing / paused).
   Contrast (fill on the track #e7e5e4 / text on white / text on #f5f5f4 / dot on white):
     processing fill #2563eb 4.12, text #1d4ed8 6.70 / 6.14, dot #3b82f6 3.68
     paused     fill #b45309 4.00, text #b45309 5.02 / 4.60, dot #b45309 5.02
     failed     fill #e11d48 3.74, text #be123c 6.29 / 5.76, dot #e11d48 4.70
     completed  fill #15803d 3.99, text #15803d 5.02 / 4.60, dot #16a34a 3.30
     idle       fill #475569 6.04, text #334155 10.35 / 9.49, dot #475569 7.58
     cancelled  fill #78716c 3.82, text #6b645f 5.81 / 5.33, dot #78716c 4.80
   The shared --teal / --amber / --red tokens are NOT changed: they keep every
   non-status use (buttons, success text, tints, warnings, score buckets).
   ========================================================================== */
.status-pill.processing,
.status-pill.queued,
.status-filter-dot.running,
.project-live-progress,
.run-step.active,
.project-next-step[data-step-id="queued"],
.project-next-step[data-step-id="processing"],
.file-task-row:has(> .file-task-head > .status-pill.processing),
[data-tone="processing"] { --tone-text: #1d4ed8; --tone-fill: #2563eb; --tone-dot: #3b82f6; }
.status-pill.paused,
.qa-chip.review,
.qa-bar-seg.is-review,
.run-qa-count.is-review,
.run-qa-card.is-review,
.run-stage[data-tone="warn"],
.run-step.paused,
.project-next-step[data-step-id="paused"],
.file-task-row:has(> .file-task-head > .status-pill.paused),
[data-tone="paused"] { --tone-text: #b45309; --tone-fill: #b45309; --tone-dot: #b45309; }
.status-pill.failed,
.status-filter-dot.action,
.qa-chip.fail,
.qa-bar-seg.is-fail,
.run-qa-count.is-fail,
.run-qa-card.is-fail,
.run-stage[data-tone="error"],
.project-next-step[data-step-id="failed"],
.file-task-row:has(> .file-task-head > .status-pill.failed),
[data-tone="failed"] { --tone-text: #be123c; --tone-fill: #e11d48; --tone-dot: #e11d48; }
.status-pill.completed,
.status-filter-dot.done,
.qa-chip.pass,
.qa-bar-seg.is-pass,
.run-qa-count.is-pass,
.run-qa-card.is-pass,
.run-stage[data-tone="ok"],
.run-step.done,
.stepper li.done,
.file-task-row:has(> .file-task-head > .status-pill.completed),
[data-tone="completed"] { --tone-text: #15803d; --tone-fill: #15803d; --tone-dot: #16a34a; }
.status-pill.idle,
.status-pill.uploaded,
.status-filter-dot.notStarted,
[data-tone="idle"] { --tone-text: #334155; --tone-fill: #475569; --tone-dot: #475569; }
.status-pill.cancelled,
.status-filter-dot.cancelled,
[data-tone="cancelled"] { --tone-text: #6b645f; --tone-fill: #78716c; --tone-dot: #78716c; }

/* A pill, and a QA chip: the tone's word and dot. (A pill whose state is not in the table, such as a pass / review pill, is untouched.) */
.status-pill:is(.processing, .queued, .paused, .failed, .completed, .idle, .uploaded, .cancelled) { color: var(--tone-text); }
.status-pill:is(.processing, .queued, .paused, .failed, .completed, .idle, .uploaded, .cancelled)::before { background: var(--tone-dot); }
.qa-chip:is(.pass, .review, .fail) { color: var(--tone-text); }
.qa-chip:is(.pass, .review, .fail)::before { background: var(--tone-dot); }

/* A Manual Run / History stage chip: a status (done, active, paused), so its word is the tone's. Its frame and fill stay neutral. */
.run-step:is(.done, .active, .paused) { color: var(--tone-text); }

/* The steppers (Manual Run's Upload / Configure / Run / Review and a project's 1-5 steps) share .stepper: a step that is done is
   the same completed green as everything else (owner 2026-10-21, it was teal). The current step stays MISUMI red: it marks where
   the person is, not a status. */
.stepper li.done { color: var(--tone-text); }
.stepper li.done .step-dot { border-color: var(--tone-fill); color: var(--tone-text); background: color-mix(in srgb, var(--tone-fill) 10%, var(--panel)); }

/* The QA bar's segments (History, Projects, Manual Run, every run card) take --tone-fill in styles.css (.qa-bar-seg.is-*), the
   tokens are the ones set above. */

/* The status-filter chips: the dot is the group's tone dot, always a solid dot (Needs action is no longer a ring: the rose is
   the failed hue every failed bar and word already uses, owner decision 2026-10-21). */
.status-filter-dot:not(.all) {
  background: var(--tone-dot, var(--muted-3));
  box-shadow: none;
}

/* The next-step marker is a step tone (amber to do, teal ready, red failed), not a status, except for the four steps that ARE a
   status (queued, processing, paused, failed): those take their status's dot so the marker agrees with the word beside it. */
.project-next-step:is([data-step-id="queued"], [data-step-id="processing"], [data-step-id="paused"], [data-step-id="failed"]) .project-next-text::before {
  background: var(--tone-dot);
}

/* A plain progress bar: a row's (runStatusBarHtml carries data-tone on its track), Manual Run's step-3 bar (renderRunProgress sets
   data-tone on the static track) and the live panel's bar (liveProgressHtml: only drawn for a queued or processing run, so
   .project-live-progress is a processing tone above and needs no markup change). The status tone's fill on the stone track; the
   old teal / amber / red class on the fill stays in the markup and is overridden here. */
.mini-track[data-tone],
.project-live-progress .mini-track,
.progress-track[data-tone] {
  background: var(--line);
}

.mini-track[data-tone] .mini-fill,
.project-live-progress .mini-track .mini-fill,
.progress-track[data-tone] .progress-fill {
  background: var(--tone-fill, var(--muted));
}

/* A file / document row framed by its status pill: the frame is the tone's fill (it used --teal / --amber / --red). */
.file-task-row:is(
  :has(> .file-task-head > .status-pill.completed),
  :has(> .file-task-head > .status-pill.processing),
  :has(> .file-task-head > .status-pill.paused),
  :has(> .file-task-head > .status-pill.failed)
) {
  border-color: var(--tone-fill);
  box-shadow: none;
}