/* ==========================================================================
   Jobs card — the GPU/ML job-panel card styling (jobs-list, /jobs).
   2026-07-21 UTC — compact disclosure rows (NEXUS-WORKER2-BUILD-...-panel-jobs-
   compact-taxonomy): collapsed by default via native <details>/<summary>, no
   JS-only disclosure. Replaces the prior always-expanded .jobs-grid cards.
   Reuses nexus.css tokens (--cyan, --amber, --stcol, --ink, --line, --panel,
   --stone, --stone-2, --bezel, --rune-dim, --ease-* etc.) — same pattern
   static/herospath.css already uses.

   2026-07-21 UTC update (NEXUS-WORKER2-BUILD-...-panel-dashboard-compact-jobs):
   now also linked by dashboard.html — the dashboard's left-column jobs panel
   renders the SAME .job-row markup via the templates/_job_row.html macro, so
   this is the one shared style source for both pages (no second divergent
   copy). The old dashboard-only .jobs-grid/frame-head job-card CSS and its
   mobile .expanded-toggle rules were removed from dashboard.css accordingly.

   SHARED-SELECTOR NOTE: several selectors below (.chip + variants, .stat) are
   base card-chrome rules ALSO used verbatim by non-jobs panels on the
   dashboard (the #contact node cards, .frame.work panels,
   etc.) — they are not jobs-exclusive, just reused by job cards too. All of
   this is expected duplication-in-flight; a later de-dup pass reconciles it
   against the shared design-system source.

   DELIBERATE SCOPE ADDITION beyond the build prompt's literal selector list:
   .queue-label — sits directly between .queue-row/.queue-bar (both in the
   requested list), is job-queue-only (used only inside .queue-strip rows),
   and is required for queue-row text to render at all. Included so the
   queue-strip group isn't missing a piece. `.job-state` was left OUT: it is
   defined in dashboard.html but not referenced by any template markup or JS
   (dead CSS) — not carried over since it isn't live jobs-card styling.
   ========================================================================== */

/* ---- jobs list + disclosure row head ----------------------------------- */
.jobs-list{display:flex; flex-direction:column; gap:10px}
.job-row{overflow:hidden}
.job-row > summary{list-style:none; cursor:pointer; display:flex;
  align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 18px; min-height:44px; border-bottom:1px solid transparent}
.job-row > summary::-webkit-details-marker{display:none}
.job-row > summary::after{content:"▸"; flex:0 0 auto; margin-left:4px;
  color:var(--ink-dim); font-size:12px; transition:transform .15s ease}
.job-row[open] > summary::after{transform:rotate(90deg)}
.job-row[open] > summary{border-bottom-color:var(--line)}
.job-row > summary:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.job-summary-id{display:flex; align-items:baseline; gap:8px; min-width:0; flex:1 1 220px}
.job-summary-id .node-name{font-family:var(--font-display); font-weight:600;
  font-size:16px; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.job-summary-status{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.job-pct{font-size:13px; font-weight:600; color:var(--stcol)}
.job-age{font-size:11px; color:var(--ink-dim); white-space:nowrap}
.frame.gpujob .job-host{font-size:12px; text-transform:none; letter-spacing:0;
  color:var(--ink-dim); font-weight:500; margin-left:2px}

/* ---- chip base (shared with non-jobs panels; see SHARED-SELECTOR NOTE
   above) -------------------------------------------------------------- */
.chip{font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  padding:3px 9px; border-radius:4px; border:1px solid var(--line); color:var(--ink-dim)}
.chip.developed,.chip.safelight,.chip.overexposed{
  color:var(--stcol); border-color:color-mix(in srgb,var(--stcol) 55%,transparent);
  box-shadow:0 0 12px -3px var(--stcol)}
.chip.unexposed{color:var(--ink-dim)}

.job-src{font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim)}

/* ---- mark-done button --------------------------------------------------
   "mark done" on a job card — reads as a dim, unexposed chip, not a primary
   button (overrides the cyan base). Chip typography; only existing vars.
   Dashboard-only (show_markdone=True) — /jobs never renders .job-actions. */
.job-actions{display:flex; justify-content:flex-end; margin-bottom:4px}
button.markdone{font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  padding:3px 9px; margin-left:8px; border-radius:4px; border:1px solid var(--bezel);
  background:transparent; color:var(--ink-dim)}
button.markdone:hover{filter:none; color:var(--ink); border-color:var(--rune-dim)}
button.markdone:disabled{opacity:.5; cursor:progress}

/* ---- job card body ----------------------------------------------------- */
.jobbody{padding:6px 18px 18px}

/* progress track + fill */
.pbar{position:relative; height:14px; margin:12px 0 6px; border-radius:3px;
  background:color-mix(in srgb,var(--panel) 60%,var(--stone));
  box-shadow:inset 0 0 0 1px var(--line)}
.pbar > i{position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--stcol) 55%,transparent), var(--stcol));
  box-shadow:0 0 12px -2px var(--stcol);
  animation:pbarshimmer 2.6s ease-in-out infinite}
@keyframes pbarshimmer{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.12)}}
.pbar-legend{display:flex; justify-content:space-between; font-size:12px;
  color:var(--ink-dim)}
.pbar-legend b{color:var(--ink); font-weight:600}
.pbar-legend .pct{color:var(--stcol); font-weight:600}

/* per-queue completion strip: one compact mini-bar row per ML queue */
.queue-strip{display:flex; flex-direction:column; gap:6px; margin:2px 0 10px}
.queue-row{display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:8px}
/* .queue-label: deliberate scope addition — see header note */
.queue-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-dim)}
.queue-bar{position:relative; height:8px; border-radius:3px;
  background:color-mix(in srgb,var(--panel) 60%,var(--stone));
  box-shadow:inset 0 0 0 1px var(--line)}
.queue-bar > i{position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--stcol) 55%,transparent), var(--stcol))}
.queue-text{font-size:11px; color:var(--ink-dim); white-space:nowrap}
.queue-text b{color:var(--ink); font-weight:600}

/* metric tiles row */
.jobstats{display:flex; flex-wrap:wrap; gap:26px; padding:14px 0 4px; align-items:flex-end}
/* .stat base — shared with non-jobs .stat-row panels; see SHARED-SELECTOR NOTE */
.stat{display:flex; flex-direction:column}
.stat b{font-size:22px; color:var(--ink)}
.stat span{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-dim)}
.jobstats .stat b{font-size:20px}
.jobstats .stat.withspark{flex-direction:row; align-items:flex-end; gap:10px}
.jobspark{width:104px; height:26px; flex:0 0 auto}
.jobspark polyline{stroke:var(--stcol); fill:none; stroke-width:1.5;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--stcol) 70%,transparent))}

.job-beat{font-size:12px; color:var(--ink-dim); padding-top:8px}
.job-beat .fresh{color:var(--stcol)}

.job-last{margin-top:8px; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:8px 10px; border-radius:4px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}
.job-detail{font-size:12px; color:var(--stcol); padding-top:6px}

/* logical-job aggregate — the honest total across all attempts */
.job-agg{font-size:12px; color:var(--ink-dim); padding-top:8px;
  border-top:1px dashed color-mix(in srgb,var(--stcol) 22%,transparent); margin-top:8px}
.job-agg b{color:var(--ink); font-weight:600}
.job-agg.finished{color:var(--stcol)}
.job-agg.finished b{color:var(--stcol)}

/* progress.json enrichment — reuses the stat-tile / chip / mono idiom; the only
   new rule is layout + an opacity-only stale dim. No new colors / custom props. */
.prog{padding-top:2px}
.prog.stale{opacity:.55}
.prog-head{font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim); padding-top:12px; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap}
.prog-sub{font-size:12px; color:var(--ink-dim); padding-top:4px}
.prog-sub b{color:var(--ink); font-weight:600}
.prog .cum{font-size:12px; color:var(--ink-dim); font-weight:400}
.prog-clip{margin-top:8px; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-dim); padding:8px 10px; border-radius:4px; word-break:break-all;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}
.prog-clip b{color:var(--ink); font-weight:600}

/* ---- mobile / tablet overrides -----------------------------------------
   The disclosure row (native <details>/<summary>) already collapses verbose
   detail at every width, so no separate phone-only tap-to-expand mechanism
   is needed here — this block only condenses spacing/type for narrow
   screens. */
@media (max-width:640px){
  .job-row > summary{padding:11px 13px; gap:8px 12px}
  .job-summary-id .node-name{font-size:15px}
  .jobbody{padding:6px 14px 14px}

  /* keep long tokens/values/paths from forcing horizontal scroll — GROUPED
     SELECTOR shared with .seat-primary/.wl-title/.wl-sub/.value/.detail
     (non-jobs selectors); .job-last is the jobs-card member of this group */
  .seat-primary,.job-last,.wl-title,.wl-sub,.value,.detail{
    overflow-wrap:anywhere; word-break:break-word}
}