/* Admin › Jobs (P778, src/studio/jobs/, frame O0aI8N): the type chips, the Mac Studio with its lanes, the VPS and the
   Mac's line cards, the "Running and in line" table and History's table (frame f3L8j); under 600px (the `an` container)
   the phone layout (frames P6N6Fy and History's P6N6Fy, each run a stacked card). */

.jb-head { align-items: flex-start; }
.jb-head .work__title { font-size: 28px; line-height: 34px; }
.jb-head .cs-sub { font-size: 15px; }
.jb-status { display: none; }
.jb--phone { display: none; }
.jb-admin > [hidden], .jb-lost[hidden] { display: none; }
.jb-live, .jb-content, .jb-splits, .jb-history { display: flex; flex-direction: column; gap: 20px; }
.jb-splits, .jb-history { gap: 12px; }
.jb-later { margin: 0 0 4px; color: var(--st-text-faint); font-size: 13px; }

.jb-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-weight: 600; }
.jb-chip__n { color: var(--st-text-faint); font-weight: 500; }
.jb-chip[aria-pressed='true'] .jb-chip__n { color: var(--st-accent-ink); }
.jb-chip:disabled { opacity: 0.45; cursor: default; }

.jb-card { padding: 20px; border-radius: 16px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); }
.jb-label { color: var(--st-text-faint); font: 600 11px/14px var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
.jb-meta { margin: 4px 0 0; color: var(--st-text-faint); font-size: 13px; }
.jb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--st-surface-2); font: 600 12.5px/16px var(--st-font); white-space: nowrap; }
.jb-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jb-pill--ok { color: var(--st-ok); }
.jb-pill--warn { color: var(--st-warn); }
.jb-pill--bad { color: var(--st-error-ink); }

.jb-bar { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--st-surface-2); }
.jb-bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 2px; background: var(--st-text-dim); }
.jb-bar--cpu .jb-bar__fill { background: var(--st-text); }
.jb-bar--memory .jb-bar__fill { background: var(--st-warn); }
.jb-bar--ok .jb-bar__fill { background: var(--st-ok); }

.jb-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
.jb-sides { display: flex; flex-direction: column; gap: 20px; }

.jb-mac { display: flex; flex-direction: column; gap: 12px; }
.jb-mac__head { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.jb-tile { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--st-surface-2); color: var(--st-text); }
.jb-tile .st-icon { width: 22px; height: 22px; }
.jb-mac__who { flex: 1; min-width: 0; }
.jb-mac__name { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--st-text); font: 600 18px/24px var(--st-font); }
.jb-gauges { display: grid; grid-template-columns: repeat(2, 120px); gap: 16px; }
.jb-gauge { display: flex; flex-direction: column; gap: 6px; }
.jb-gauge__value { color: var(--st-text); font: 600 16px/20px var(--st-font); font-variant-numeric: tabular-nums; white-space: nowrap; }

.jb-lanes { display: flex; flex-direction: column; gap: 10px; }
.jb-lane { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 16px; }
.jb-lane__name { display: flex; flex-direction: column; margin: 0; color: var(--st-text); font: 600 13.5px/18px var(--st-font); }
.jb-lane__use { color: var(--st-text-faint); font-size: 12px; font-weight: 400; }
.jb-lane__slots { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; }
.jb-slot { display: grid; grid-template-columns: auto minmax(40px, 1fr); grid-template-areas: "title for" "stage bar"; align-items: center; gap: 4px 10px; min-height: 46px; padding: 8px 12px; border-radius: 10px; background: var(--st-surface-2); font-size: 13px; }
.jb-slot--free { display: flex; align-items: center; background: none; outline: 1px solid var(--st-line); outline-offset: -0.5px; color: var(--st-text-faint); }
.jb-slot__title { grid-area: title; overflow: hidden; color: var(--st-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.jb-slot__for { grid-area: for; justify-self: end; color: var(--st-text-faint); font-variant-numeric: tabular-nums; }
.jb-slot__stage { grid-area: stage; color: var(--st-text-dim); white-space: nowrap; }
.jb-slot__bar { grid-area: bar; }
.jb-slot--accent .jb-slot__stage { color: var(--st-accent-ink); }
.jb-slot--accent .jb-bar__fill { background: var(--st-accent); }
.jb-away { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--st-surface-2); color: var(--st-text-dim); font-size: 14px; }
.jb-away .st-icon { flex: none; width: 18px; height: 18px; color: var(--st-accent); }

.jb-side { display: flex; flex-direction: column; gap: 10px; }
.jb-side__head { display: flex; align-items: center; gap: 10px; }
.jb-side__icon { flex: none; width: 20px; height: 20px; color: var(--st-text-dim); }
.jb-side__title { flex: 1; margin: 0; color: var(--st-text); font: 600 16px/22px var(--st-font); }
.jb-side__body { margin: 0; color: var(--st-text-dim); font-size: 14px; line-height: 20px; }
.jb-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 4px 0 0; }
.jb-fact .jb-label { white-space: nowrap; }
.jb-fact { display: flex; flex-direction: column; gap: 4px; }
.jb-fact dd { margin: 0; color: var(--st-text); font: 600 14px/18px var(--st-font); }
.jb-guard__use { display: flex; justify-content: space-between; margin: 0; color: var(--st-text-dim); font-size: 14px; }
.jb-guard__use strong { color: var(--st-text); font-weight: 600; }

.jb-line { display: flex; flex-direction: column; }
.jb-line__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.jb-line__title { margin: 0; color: var(--st-text); font: 600 17px/22px var(--st-font); }
.jb-line__count { color: var(--st-text-faint); font-size: 14px; }
.jb-line__note { margin-left: auto; color: var(--st-text-faint); font-size: 13px; }
.jb-table .an-td { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.jb-order { color: var(--st-text-dim); white-space: nowrap; }
.jb-order--now, .jb-order--next { color: var(--st-text); font-weight: 600; }
.jb-order--now::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--st-accent); vertical-align: 1px; }
.jb-type { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--st-surface-2); color: var(--st-text-dim); font: 600 12.5px/16px var(--st-font); white-space: nowrap; }
.jb-type .st-icon { width: 13px; height: 13px; }
.jb-song { min-width: 220px; }
.jb-song__in { display: flex; align-items: center; gap: 12px; }
.jb-thumb { display: grid; flex: none; place-items: center; width: 56px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--st-surface-2); color: var(--st-text-faint); }
.jb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jb-thumb .st-icon { width: 16px; height: 16px; }
.jb-song__text { display: flex; flex-direction: column; min-width: 0; }
.jb-song__title { color: var(--st-text); font-size: 15px; font-weight: 500; }
.jb-song__sub { color: var(--st-text-faint); font-size: 13px; font-weight: 400; }
.jb-song__chips { display: none; }
.jb-who { white-space: nowrap; }
.jb-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--st-text-faint); white-space: nowrap; }
.jb-trail .st-icon { width: 12px; height: 12px; }
.jb-trail__done { display: inline-flex; align-items: center; gap: 4px; color: var(--st-text-dim); }
.jb-trail__done .st-icon { color: var(--st-ok); }
.jb-trail__now { padding: 2px 8px; border-radius: 6px; background: var(--st-accent-soft); color: var(--st-text-strong); font-weight: 600; white-space: nowrap; }
.jb-act { width: 1%; text-align: right; white-space: nowrap; }
.jb-act .st-icon { display: none; }
.jb-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.jb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--st-line); color: var(--st-text-faint); font-size: 13px; }
.jb-empty__icon { width: 26px; height: 26px; color: var(--st-text-dim); }

.jb-lost { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--st-text-dim); font-size: 14px; }
.jb-lost__icon { flex: none; width: 18px; height: 18px; color: var(--st-warn); }
.jb-lost__text { flex: 1; }

.jb-skeleton { display: flex; flex-direction: column; }
.jb-skeleton__row { display: grid; grid-template-columns: 48px 110px 64px minmax(0, 1fr) 160px 72px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--st-line); }
.jb-skeleton__row:last-child { border-bottom: 0; }
.jb-skeleton__bar { height: 12px; border-radius: 6px; background: var(--st-surface-2); animation: fb-pulse 1.4s ease-in-out infinite; }

.jb-runs .jb-when, .jb-runs .jb-on { white-space: nowrap; }
.jb-runs .jb-message { max-width: 320px; margin: 4px 0 0; white-space: normal; }
.jb-runs .an-num { white-space: nowrap; }

@container an (width < 1000px) {
  .jb-top { grid-template-columns: minmax(0, 1fr); }
  .jb-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A phone: short lines in place of long ones, lanes stacked with their idle ones on one line, each job a compact row. */
@container an (width < 600px) {
  .jb--laptop, .jb-table .an-td.jb--laptop-cell, .jb-lane--idle { display: none; }
  .jb--phone { display: block; }
  .jb-head { flex-wrap: wrap; align-items: center; }
  .jb-head__text { flex: 1; }
  .jb-status { display: block; }
  .jb-status[hidden] { display: none; }
  .jb-head__text { flex-basis: 100%; }
  .jb-head .an-head__tools { order: 1; }
  .jb-status { order: 2; margin-left: auto; }
  .jb-chips.hi-chips { flex-wrap: nowrap; overflow-x: auto; }
  .jb-chip { flex: none; }
  .jb-card { padding: 16px; }
  .jb-mac__head .jb-tile { align-self: flex-start; }
  .jb-lane { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .jb-lane__name { flex-direction: row; justify-content: space-between; color: var(--st-text-dim); }
  .jb-lane__slots { grid-auto-flow: row; }
  .jb-slot--free { display: none; }
  .jb-lanes__idle { display: flex; justify-content: space-between; margin: 0; color: var(--st-text-dim); font-size: 13.5px; font-weight: 600; }
  .jb-lanes__idle span + span { color: var(--st-text-faint); font-weight: 400; }
  .jb-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jb-side__head { flex-wrap: wrap; }
  .jb-side__head .jb-pill { order: 1; }
  .jb-line__head { justify-content: space-between; }
  .jb-table thead { display: none; }
  .jb-table, .jb-table tbody { display: block; }
  .jb-table .an-tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--st-line); }
  .jb-table .an-td { display: block; padding: 12px 0; border: 0; }
  .jb-table .jb-song { grid-row: 1 / 3; grid-column: 2; min-width: 0; }
  .jb-table .jb-order { grid-row: 1 / 3; grid-column: 1; }
  .jb-table .jb-eta { grid-column: 3; grid-row: 1; padding-bottom: 0; color: var(--st-text); font-weight: 600; text-align: right; }
  .jb-table .jb-act { grid-column: 3; grid-row: 2; width: auto; padding-top: 2px; }
  .jb-table .jb-act .st-btn { min-height: 32px; padding: 0; border: 0; background: none; outline: 0; color: var(--st-text-faint); }
  .jb-table .jb-act .st-icon { display: inline; }
  .jb-song__sub { display: none; }
  .jb-song__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
  .jb-song__waited { color: var(--st-text-faint); font-size: 13px; font-weight: 400; }
  .jb-line:not(.jb-line--all) tbody > .an-tr:nth-child(n + 7) { display: none; }
  .jb-line--all .jb-more, .jb-more { align-self: flex-start; margin-top: 12px; color: var(--st-text-dim); font-weight: 600; text-decoration: none; }
  .jb-foot { flex-direction: column; align-items: stretch; }
  .jb-runs thead { display: none; }
  .jb-runs, .jb-runs tbody { display: block; }
  .jb-runs .an-tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 14px 0; border-bottom: 1px solid var(--st-line); }
  .jb-runs .an-tr:last-child { border-bottom: 0; }
  .jb-runs .an-td { display: block; padding: 0; border: 0; }
  .jb-runs .jb-song { grid-area: 1 / 1 / 2 / 3; min-width: 0; }
  .jb-runs .jb-song__sub, .jb-runs .jb-waited, .jb-runs .jb-on { display: none; }
  .jb-runs .jb-when { grid-area: 1 / 3; color: var(--st-text-faint); text-align: right; }
  .jb-runs .jb-type-cell { grid-area: 2 / 1; }
  .jb-runs .jb-who { grid-area: 2 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .jb-runs .jb-ran { grid-area: 2 / 3; color: var(--st-text-faint); }
  .jb-runs .jb-ran::before { content: "ran "; }
  .jb-runs .jb-outcome { grid-area: 3 / 1 / 4 / 3; min-width: 0; }
  .jb-runs .jb-message { max-width: none; }
  .jb-runs .jb-act { grid-area: 3 / 3; align-self: start; }
  .jb-runs .jb-act:empty { display: none; }
  .jb-skeleton__row { grid-template-columns: 40px 56px minmax(0, 1fr) 48px; }
  .jb-skeleton__bar:nth-child(n + 5) { display: none; }
}