/**
 * Stop and Try again — docs/build/plan-job-controls.md.
 *
 * Own stylesheet, linked separately from app.css (see index.html), per
 * docs/build/CONTRACT.md §2a: app.css is 2,400 lines and several branches
 * would land in the same place if this were appended there instead. Reuses
 * app.css's own custom properties throughout rather than hard-coding a
 * colour, so light/dark and any future theme change apply here for free.
 */

/* Icon layout — the sidebar row. Copies the exact shape app.css already uses
   for `.session-delete`/`.session-download` (app.css's own comment there
   explains why: without `position: relative; z-index: 1`, the row's
   full-bleed link steals the pointer and `:hover` never reaches the button).
   Anything added to that corner of the row has to match it or the halo goes
   missing again for the same reason it did before. */
.session-row .job-controls {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  opacity: 0;
  transition: opacity 75ms;
}
.session-row:hover .job-controls,
.session-row:focus-within .job-controls {
  opacity: 1;
}
@media (hover: none) {
  .session-row .job-controls {
    opacity: 1;
  }
}
.job-controls .job-stop,
.job-controls .job-retry {
  width: 28px;
  height: 28px;
}

/* A destructive action reads as one on hover, not just on the confirm dialog
   that follows the click — the same "danger tints on interaction, not at
   rest" idiom `.btn-danger` uses elsewhere in app.css. */
.job-stop:hover:not(:disabled) {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Text layout — the studio's script-pane notice. Same shape as the existing
   queued-job notice (`.notice-queue` in app.css): a label, a spacer, a
   ghost button, in one calm strip. No colour tint of its own — unlike
   `.notice-error`'s red or `.notice-queue`'s amber, "you can stop this" and
   "you can try this again" are not alarms, just an offer. */
.notice-job {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notice-job .btn {
  margin: -5px -6px -5px 0;
}