/* Overview, Jobs, Resources, Logs and Settings (js/views/*). Colours come from css/tokens.css;
   shared pieces (cards, badges, stepper, charts) are in css/shell.css, the document view in
   app.css. Widths: tuned at 390, 1440 and 3440 px; 2200 px and up is the ultrawide layout. */

.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); background: var(--bad); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.small { font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.swatch { display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--c, var(--faint)); flex: none; margin-right: 8px; vertical-align: -2px; }
.card-head .swatch { margin-right: 0; }
.asof { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-fg); white-space: nowrap; }
.asof [data-icon] { width: 13px; height: 13px; }
.page-head .actions { align-items: center; flex-wrap: wrap; }
.volbar { position: relative; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; min-width: 40px; }
.volbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--c, var(--info)); }
.volbar.full i { background: var(--warn); }
.volbar.none { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); opacity: .6; }

/* "Connect Railway" and other monitor problems. */
.connect { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-l); border: 1px solid hsl(199 89% 60% / 30%); background: var(--info-soft); margin-bottom: 14px; }
.connect.problem { border-color: hsl(38 92% 50% / 35%); background: var(--warn-soft); }
.connect-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: hsl(199 89% 60% / 16%); color: var(--info-ink); flex: none; }
.connect.problem .connect-ic { background: hsl(38 92% 50% / 18%); color: var(--warn-ink); }
.connect-body b { font-size: 14px; }
.connect-body p { margin: 2px 0 0; color: var(--fg-2); max-width: 900px; }
.connect code { font-size: 12px; background: var(--muted); border-radius: 4px; padding: 0 4px; }

/* --- Overview ------------------------------------------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.svc-card { position: relative; overflow: hidden; padding: 14px 16px 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.svc-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--faint)); }
.svc-card.skeleton::before { background: var(--muted); }
.svc-head { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; }
.svc-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.svc-name b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-name span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-head .badge { flex: none; margin-top: 1px; }
.badge .sdot { width: 6px; height: 6px; }
.svc-metrics { display: flex; flex-direction: column; gap: 6px; }
.mrow, .vol { display: grid; grid-template-columns: 58px minmax(0, 1fr) 128px; gap: 10px; align-items: center; min-height: 30px; }
.vol { min-height: 18px; }
.mlabel { font-size: 11.5px; color: var(--muted-fg); }
.mspark { height: 30px; min-width: 0; border-bottom: 1px solid var(--border-2); }
.mspark svg { width: 100%; height: 30px; }
.mspark.skel { border: none; }
.mrow.noval .mspark { background: repeating-linear-gradient(90deg, var(--border-2) 0 6px, transparent 6px 12px) bottom / 100% 1px no-repeat; border: none; }
.mval { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mval b { font-weight: 600; }
.spark .dot { opacity: .9; }
.svc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--fg-2); border-top: 1px solid var(--border-2); padding-top: 9px; min-height: 28px; }
.svc-foot span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-foot [data-icon] { width: 13px; height: 13px; color: var(--muted-fg); }
.svc-card.state-asleep .mspark svg { opacity: .7; }

.ov-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "run run today" "events events cost"; }
.ov-grid > div { min-width: 0; display: flex; }
.ov-grid > div > .card { flex: 1; }
.ov-running { grid-area: run; } .ov-today { grid-area: today; } .ov-cost { grid-area: cost; } .ov-events { grid-area: events; }
.running-card .card-body { height: 330px; overflow: auto; }
.run-list { display: flex; flex-direction: column; gap: 4px; }
.run-row { display: grid; grid-template-columns: 34px minmax(160px, 1fr) auto 80px; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 10px; text-decoration: none; border: 1px solid transparent; }
.run-row:hover { background: var(--muted); }
.run-row.finished { opacity: .75; }
.run-meta { display: flex; flex-direction: column; min-width: 0; }
.run-meta .t { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-meta .s { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-steps { min-width: 0; overflow: hidden; }
.run-steps .stepper li { font-size: 12px; }
.run-steps .stepper li:not(:last-child)::after { width: 12px; margin: 0 6px; }
.run-time { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.run-empty { display: flex; align-items: center; gap: 10px; color: var(--muted-fg); min-height: 96px; justify-content: center; text-align: center; }
.run-empty.compact { min-height: 0; justify-content: flex-start; padding: 4px 8px 6px; text-align: left; }
.run-latest h3 { margin: 10px 8px 6px; }
.latest-row { opacity: 1; }
.run-time .run-ago { display: block; font-size: 11.5px; color: var(--muted-fg); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-label { font-size: 11.5px; color: var(--muted-fg); }
.stat-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.stat.bad .stat-value { color: var(--bad-ink); }
.stat-sub { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cost { display: flex; flex-direction: column; gap: 12px; min-height: 96px; }
.cost-total { display: flex; flex-direction: column; }
.costbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--muted); gap: 1px; }
.costbar i { background: var(--c); min-width: 2px; }
.cost-legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--fg-2); }
.cost-legend span { display: flex; align-items: center; gap: 7px; }
.cost-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.cost-legend b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

.events-card .card-body { padding-top: 10px; }
.events { list-style: none; margin: 0; padding: 0; height: 330px; overflow: auto; display: flex; flex-direction: column; }
.ev-day { font-size: 12px; color: var(--muted-fg); font-weight: 500; padding: 8px 0 4px; }
.ev-day:first-child { padding-top: 0; }
.ev { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.ev-time { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.ev-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ev-ic [data-icon] { width: 12px; height: 12px; }
.ev-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-text b { font-weight: 500; }
.ev.sev-warning .ev-text, .ev.sev-error .ev-text { color: var(--warn-ink); }

/* --- Jobs ---------------------------------------------------------------------------------------- */
/* The list: a table in the JAG Finance (shadcn) style. The page head (title, filters, live dot),
   the column headings and the day being shown are pinned, one under the other. Rows are one
   grid whose columns follow the list's own width (a container): cards under 760 px. At 1700 px a
   preview of the selected job sits to the right of the table. */
.jobs-listpane { --pad: 24px; --cols-h: 40px; --row-h: 46px; --tile: 24px; padding: 0 var(--pad) 48px; container-type: inline-size; min-width: 0; }
.jobs-layout.has-detail .jobs-listpane { display: none; }
.jobs-layout:not(.has-detail) .jobs-detail { display: none; }
.livechip { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 92px; font-size: 12.5px; color: var(--muted-fg); white-space: nowrap; }
.jobs-listpane .page-head.stuck { border-bottom-color: transparent; }

/* Filters: every control 32 px high, the selects drawn like the app's (no native chrome). */
.jobs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.jobs-filters .ctabs { padding: 2px; }
.jobs-filters .ctabs button { height: 28px; }
.jobs-filters .search { margin: 0; flex: 1; min-width: 180px; max-width: 340px; height: 32px; padding: 0 10px; box-shadow: var(--shadow-sm); }
.jobs-filters .search input { padding: 0; height: 30px; font-size: 13px; }
.jobs-filters .search [data-icon] { width: 15px; height: 15px; }
.fsels { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fsel { display: inline-flex; }
.fsel select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 11px; font-size: 13px; font-weight: 500; color: var(--fg-2); background: var(--bg); border: 1px solid var(--input); border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; transition: border-color .15s, background-color .15s; }
.fsel select:hover { background-color: var(--muted); }
.fsel select.set { color: var(--fg); border-color: var(--border-strong); }
[data-theme="light"] .fsel select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ftoggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px 0 9px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: transparent; font-size: 13px; font-weight: 500; color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.ftoggle:hover { background: var(--muted); color: var(--fg); }
.ftoggle .box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-grid; place-items: center; flex: none; }
.ftoggle .box [data-icon] { width: 11px; height: 11px; }
.ftoggle.on { border-style: solid; border-color: var(--border-strong); background: var(--muted); color: var(--fg); }
.ftoggle.on .box { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* The summary line: "48 jobs · 2 running · 1 failed · median 1.1 s". */
.jsummary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: -4px 0 10px; min-height: 20px; font-size: 13px; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.jsummary > * + *::before { content: "·"; display: inline-block; margin: 0 8px; color: var(--faint); text-decoration: none; }
.jsummary b { font-weight: 600; color: var(--fg); }
.jsummary .run { display: inline-flex; align-items: center; gap: 7px; color: var(--info-ink); }
.jsummary .run::before { margin-right: 1px; }
.jsummary .linkish { padding: 0; font-size: inherit; }
.jsummary .linkish.bad { color: var(--bad-ink); }

.jlist-wrap { min-width: 0; }
.jtable { min-width: 0; max-width: 1760px; }
.faint { color: var(--faint); }

/* One grid for the headings, the rows and the skeleton rows. */
.jcols, .jrow { display: grid; align-items: center; column-gap: 16px; padding: 0 8px;
  grid-template-columns: var(--tile) minmax(180px, 1fr) 104px 118px 214px 112px 84px 64px;
  grid-template-areas: "tile doc kind src ran status start ms"; }
.jcols { position: sticky; top: calc(var(--top-h) + var(--head-h, 64px)); z-index: 19; height: var(--cols-h); background: var(--bg); border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--muted-fg); }
.jcols > span { white-space: nowrap; min-width: 0; display: flex; align-items: center; }
.jcols .c-ms { justify-content: flex-end; }
.jsort { display: inline-flex; align-items: center; gap: 4px; margin: 0 -6px; padding: 3px 6px; height: 28px; border: none; border-radius: var(--radius-s); background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.jsort:hover { background: var(--muted); color: var(--fg); }
.jsort [data-icon] { width: 13px; height: 13px; opacity: .45; }
.jsort.on { color: var(--fg); }
.jsort.on [data-icon] { opacity: 1; }
.c-ms .jsort { margin-right: -6px; }

.jlist { display: flex; flex-direction: column; }
.jgroup { display: flex; flex-direction: column; }
/* A day's heading, pinned under the column headings while its rows scroll. */
.jday { position: sticky; top: calc(var(--top-h) + var(--head-h, 64px) + var(--cols-h)); z-index: 18; display: flex; align-items: baseline; gap: 8px; height: 32px; padding: 0 8px; padding-top: 9px;
  background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.jday .n { font-weight: 400; color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.jlist.flat .jgroup + .jgroup { margin-top: 0; }

.jrow { height: var(--row-h); border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; min-width: 0; font-size: 14px; transition: background-color .1s; scroll-margin-top: calc(var(--top-h) + var(--head-h, 64px) + var(--cols-h) + 32px); scroll-margin-bottom: 8px; }
.jrow:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.jrow.selected, .jrow.active { background: var(--muted); }
.jrow:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.jrow.fresh { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: var(--info-soft); } to { background: transparent; } }
.jrow > * { min-width: 0; }
.jrow > .ftype { grid-area: tile; width: var(--tile); height: var(--tile); border-radius: 6px; font-size: 7.5px; letter-spacing: .02em; }
.jrow.skeleton { pointer-events: none; }
.jrow.skeleton .ftype { background: var(--muted); }
.c-tile { grid-area: tile; }
.c-doc { grid-area: doc; display: flex; flex-direction: column; justify-content: center; }
.c-doc .t { font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-doc .s { display: flex; gap: 0; font-size: 12px; line-height: 16px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; min-width: 0; font-variant-numeric: tabular-nums; }
.c-doc .s > * { flex: none; }
.c-doc .s > * + *::before { content: "·"; margin: 0 6px; color: var(--faint); font-family: var(--font); }
.c-doc .s:empty::before { content: "\200b"; }
.c-doc .s .s-kind { display: none; }
.c-doc .s .s-kind + *::before { content: none; }
.jcaller { font-size: 11.5px; color: var(--fg-2); min-width: 0; flex: 0 1 auto !important; overflow: hidden; text-overflow: ellipsis; }
.jrow.orphan .c-doc .t { color: var(--fg-2); font-weight: 500; }
.c-kind { grid-area: kind; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.c-meta { display: contents; }
.c-src { grid-area: src; }
.c-ran { grid-area: ran; overflow: hidden; }
.c-status { grid-area: status; display: flex; align-items: center; gap: 2px; }
.c-start { grid-area: start; display: flex; flex-direction: column; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-start .when { line-height: 18px; color: var(--fg-2); }
.c-start .ago { font-size: 12px; line-height: 16px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; }
.jcols .c-start, .jcols .c-doc { flex-direction: row; justify-content: flex-start; }
.c-ms { grid-area: ms; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap; }
.c-ms.faint { color: var(--faint); }

/* Source: one label with its colour. */
.jsrc { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jsrc i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.jsrc.bench i { background: var(--svc-ocr); }
.jsrc.eval i { background: var(--svc-search); }
.jsrc.app i { background: var(--svc-convert); }
.jsrc.console i { background: var(--faint); }

/* The steps a job ran: small chips, a tick, a cross or a spinner. */
.rchips { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.rchip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 4px; border-radius: 5px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; color: var(--fg-2); white-space: nowrap; flex: none; }
.rchip [data-icon] { width: 12px; height: 12px; }
.rchip.done [data-icon] { color: var(--ok); }
.rchip.failed { color: var(--bad-ink); border-color: hsl(350 89% 60% / 35%); background: var(--bad-soft); }
.rchip.warn { color: var(--warn-ink); border-color: hsl(38 92% 50% / 35%); background: var(--warn-soft); }
.rchip.running { color: var(--info-ink); border-color: hsl(199 89% 60% / 35%); background: var(--info-soft); padding-left: 5px; }
.rchip.running .spin { width: 9px; height: 9px; border-width: 1.5px; margin-right: 1px; }
.rchip.queued { border-style: dashed; color: var(--muted-fg); padding-left: 6px; }
.rchip .qdot { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; margin-right: 2px; }
.rchip.skipped { opacity: .55; text-decoration: line-through; }
.rchip.ph-chip { width: 52px; border-color: var(--border-2); }

/* Status: a quiet tick; a badge (and the error's code) when it needs a look. */
.jst-done { color: var(--ok); }
.jst-done [data-icon] { width: 16px; height: 16px; }
.c-status.two { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.c-status .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jcode { font-size: 11px; line-height: 14px; color: var(--bad-ink); padding-left: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jmore { margin-top: 12px; }
.jlist-note { padding: 18px 10px; }
.jlist .empty-state { margin-top: 12px; }

/* Wide lists (the full-width list at 1440 and up): a little more room for names. */
@container (min-width: 1500px) {
  .jcols, .jrow { grid-template-columns: var(--tile) minmax(200px, 1fr) 112px 128px 236px 120px 92px 68px; column-gap: 20px; }
}

/* Cards, under 760 px of list (phones, and the list beside a job on an ultrawide). */
@container (max-width: 759px) {
  .jcols { display: none; }
  .jtable { --cols-h: 0px; }
  .jobs-listpane .page-head.stuck { border-bottom-color: var(--border); }
  /* Three lines of fixed height (name and time; size and status; source, steps and time taken). */
  .jrow { height: 90px; padding: 11px 2px; row-gap: 4px; column-gap: 10px; align-items: center;
    grid-template-columns: var(--tile) minmax(0, 1fr) 96px; grid-template-rows: 19px 19px 22px;
    grid-template-areas: "tile doc start" "tile doc status" ". meta meta"; }
  .jrow > .ftype { align-self: start; margin-top: 2px; }
  .c-doc { align-self: stretch; justify-content: flex-start; }
  .c-kind { display: none; }
  .c-doc .s .s-kind { display: inline; }
  .c-doc .s .s-kind + *::before { content: "·"; }
  .c-start { align-items: flex-end; }
  .c-start .ago { display: none; }
  /* The time taken shares the third line with the source and steps, at its right. */
  .c-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding-right: 64px; }
  .c-meta > .c-src { flex: none; width: 86px; overflow: hidden; }
  .rchip { font-size: 11px; padding: 0 5px 0 3px; }
  .c-meta > .c-ran { flex: 1; min-width: 0; }
  .c-status { justify-content: flex-end; }
  .c-status.two { flex-direction: row; align-items: center; }
  .c-status .jcode { display: none; }
  .c-ms { grid-area: meta; justify-self: end; width: 60px; min-width: 0; }
  .jsrc { font-size: 12.5px; }
}

/* The preview, right of the table (1700 px and up, no job open). */
.jpreview { display: none; }
.jpv { display: flex; flex-direction: column; gap: 14px; min-height: 0; height: 100%; padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-sm); container-type: inline-size; overflow: auto; }
.jpv-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jpv-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jpv-title h2 { margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpv-title .note { font-size: 13px; }
.jpv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; flex: 1; }
@container (min-width: 820px) { .jpv-body { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); align-items: start; } }
.jpv-thumb { position: relative; display: grid; place-items: center; height: min(calc(100dvh - var(--top-h) - var(--head-h, 64px) - 150px), 980px); min-height: 260px; border-radius: var(--radius); background: var(--canvas); border: 1px solid var(--border-2); overflow: hidden; }
/* A narrow preview stacks the page over the details: keep the page to half the screen. */
@container (max-width: 819px) { .jpv-thumb { height: clamp(260px, 50dvh, 620px); } }
.jpv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jpv-thumb .ph-box { position: absolute; inset: 0; background: linear-gradient(90deg, var(--muted), var(--border), var(--muted)); background-size: 200% 100%; animation: shimmer 1.4s infinite; opacity: .5; }
.jpv-nothumb { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jpv-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jpv-info h3 { margin: 14px 0 4px; font-size: 13px; color: var(--muted-fg); font-weight: 500; }
.jpv-info h3:first-child { margin-top: 0; }
.jpv-kv { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); font-size: 14px; }
.jpv-kv .kv { display: contents; }
.jpv-kv dt { color: var(--muted-fg); padding: 6px 0; border-bottom: 1px solid var(--border-2); }
.jpv-kv dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--border-2); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; display: flex; align-items: center; min-height: 34px; }
.jpv-kv dd .c-status { flex-direction: row; align-items: center; gap: 8px; }
.jpv-kv .jcode { display: none; }
.jpv-kv code { font-size: 12px; color: var(--fg-2); }
.jpv-err { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; white-space: normal; }
.jpv-err [data-icon] { width: 14px; height: 14px; margin-top: 2px; }
.jpv-runs { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.jpv-runs li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 64px 48px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-2); font-variant-numeric: tabular-nums; }
.jpv-runs .n { color: var(--muted-fg); }
.jpv-runs .ms { text-align: right; color: var(--fg-2); }
.jpv-runs .at { text-align: right; color: var(--muted-fg); }

@media (min-width: 1700px) {
  /* Room for the preview: the table takes up to 1760 px and the preview, pinned, the rest (at least
     460 px), so the list never leaves an empty strip on the right. */
  .jobs-layout:not(.has-detail) .jlist-wrap { display: grid; grid-template-columns: minmax(0, 1760px) minmax(460px, 1fr); gap: 24px; align-items: start; }
  .jobs-layout:not(.has-detail) .jpreview { display: block; position: sticky; top: calc(var(--top-h) + var(--head-h, 64px)); height: calc(100dvh - var(--top-h) - var(--head-h, 64px) - 20px); min-width: 0; }
}
@media (min-width: 2200px) {
  /* Bigger type on an ultrawide. */
  .jobs-layout:not(.has-detail) .jlist-wrap { gap: 28px; }
  .jobs-layout:not(.has-detail) .jobs-listpane { --row-h: 54px; --cols-h: 44px; --tile: 28px; }
  .jobs-layout:not(.has-detail) .jcols, .jobs-layout:not(.has-detail) .jrow { grid-template-columns: var(--tile) minmax(240px, 1fr) 128px 150px 270px 140px 104px 80px; column-gap: 24px; padding: 0 10px; }
  .jobs-layout:not(.has-detail) .jcols { font-size: 14px; }
  .jobs-layout:not(.has-detail) .jrow { font-size: 15px; }
  .jobs-layout:not(.has-detail) .c-doc .t, .jobs-layout:not(.has-detail) .c-start .when { line-height: 20px; }
  .jobs-layout:not(.has-detail) .c-doc .s, .jobs-layout:not(.has-detail) .c-start .ago { font-size: 13px; line-height: 18px; }
  .jobs-layout:not(.has-detail) .jsrc { font-size: 14px; }
  .jobs-layout:not(.has-detail) .rchip { height: 22px; font-size: 12.5px; }
  .jobs-layout:not(.has-detail) .jrow > .ftype { font-size: 8.5px; }
  .jobs-layout:not(.has-detail) .jday { height: 36px; padding-top: 11px; font-size: 13.5px; }
  .jobs-layout:not(.has-detail) .jrow { scroll-margin-top: calc(var(--top-h) + var(--head-h, 64px) + var(--cols-h) + 36px); }
  .jobs-layout:not(.has-detail) .jsummary { font-size: 14px; }
}
/* Desktop: the list is one screen. The head, filters, summary, column headings and preview stay
   put and only the rows scroll, inside the table (the day being shown pinned at its top). */
@media (min-width: 1101px) and (min-height: 620px) {
  .jobs-layout:not(.has-detail) .jobs-listpane { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); padding-bottom: 16px; }
  .jobs-layout:not(.has-detail) .jobs-listpane > .page-head, .jobs-layout:not(.has-detail) .jsummary { flex: none; }
  .jobs-layout:not(.has-detail) .jobs-listpane > .page-head { position: relative; top: 0; }
  .jobs-layout:not(.has-detail) .jlist-wrap { flex: 1; min-height: 0; display: flex; }
  .jobs-layout:not(.has-detail) .jtable { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .jobs-layout:not(.has-detail) .jcols { position: static; flex: none; }
  /* relative: the rows' screen-reader labels are absolute and would otherwise stretch the page. */
  .jobs-layout:not(.has-detail) .jlist-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  .jobs-layout:not(.has-detail) .jday { top: 0; }
  .jobs-layout:not(.has-detail) .jrow { scroll-margin-top: 36px; }
  .jobs-layout:not(.has-detail) .jpreview { position: static; height: auto; }
}
@media (min-width: 1700px) and (min-height: 620px) {
  .jobs-layout:not(.has-detail) .jlist-wrap { display: grid; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
}
@media (min-width: 2200px) and (min-height: 620px) {
  .jobs-layout:not(.has-detail) .jrow { scroll-margin-top: 40px; }
}

/* One job. From 1101 px it is one screen: the band, then the document (viewer | panel) filling the
   rest, each pane scrolling inside itself. Narrower, the panes stack and the page scrolls under the
   pinned band. */
.jobs-detail { min-width: 0; }
.jdetail { display: flex; flex-direction: column; min-width: 0; }
.jdetail-msg { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 14px 18px 32px; }
.jdetail-msg .empty-state { align-self: stretch; }
.jband { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 12px; background: var(--bg); flex: none; min-width: 0; }
.jband-top { display: flex; align-items: center; gap: 12px; min-height: 42px; min-width: 0; }
.jback { flex: none; margin: 0 -4px 0 -8px; }
.jback [data-icon] { width: 15px; height: 15px; }
.jtitle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jtitle-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jtitle-line h1 { font-size: 18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jtitle-line .badge { flex: none; }
.jmeta { font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jmeta > * + *::before { content: "·"; margin: 0 7px; color: var(--faint); }
.jmeta code { font-size: 11.5px; color: var(--fg-2); }
.jmeta .mono { font-size: 11.5px; }
.jstrip { flex: none; }
.jstrip-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid hsl(199 89% 60% / 35%); background: var(--info-soft); color: var(--info-ink); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.jstrip-btn:hover { border-color: var(--info); }
.jlive-time { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.jactions { display: flex; gap: 6px; align-items: center; flex: none; }
.jconfirm { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--bad-ink); flex-wrap: wrap; }
.jband-sub { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; min-height: 26px; min-width: 0; }
.jband-steps { flex: none; min-width: 0; max-width: 100%; }
.jband-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1; }
.jerr-pill { max-width: 640px; overflow: hidden; text-overflow: ellipsis; }
.jerr-pill [data-icon] { width: 13px; height: 13px; }
.jchips-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }
.kchip code { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.jobdoc { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 2px 18px 14px; }
.jnodoc-note { margin: 0 0 14px; }
.jruns-panel .wait { margin-bottom: 14px; }
.jruns { max-width: 1500px; }
.jrun { padding: 14px 0; border-bottom: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 10px; }
.jrun:first-child { padding-top: 0; }
.jrun:last-child { border-bottom: none; padding-bottom: 0; }
.jrun-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.jresult summary { font-size: 12.5px; color: var(--muted-fg); }
.jresult pre { margin-top: 8px; max-height: 420px; }

@media (min-width: 1101px) {
  .jobs-layout.has-detail .jobs-detail { height: calc(100dvh - var(--top-h)); display: flex; flex-direction: column; overflow: hidden; }
  .jobs-detail .jdetail { flex: 1; min-height: 0; }
  .jobdoc { flex: 1; min-height: 0; }
  .jobdoc .work { flex: 1; min-height: 0; }
  .jobdoc > .panel { flex: 1; min-height: 0; }
}
@media (max-width: 1100px) {
  .jband { position: sticky; top: var(--top-h); z-index: 20; border-bottom: 1px solid transparent; transition: border-color .15s; }
  .jband.stuck { border-bottom-color: var(--border); }
  .jobdoc { padding: 10px 12px 28px; }
  .jobdoc > .panel { min-height: 50vh; }
}

/* 2200 px and up: a job keeps the list on its left, so a job page is list | viewer | panel, each
   column the screen's height and scrolling inside itself, the list's filters pinned at its top. */
@media (min-width: 2200px) {
  .jobs-listpane { --pad: 36px; padding-bottom: 56px; }
  .jobs-layout.has-detail { display: grid; grid-template-columns: 640px minmax(0, 1fr); height: calc(100dvh - var(--top-h)); }
  .jobs-layout.has-detail .jobs-listpane { --pad: 18px; display: flex; flex-direction: column; min-height: 0; padding: 0; border-right: 1px solid var(--border); background: var(--card); }
  .jobs-layout.has-detail .jobs-listpane .page-head { position: static; margin: 0; padding: 14px 18px 12px; background: transparent; border-bottom: 1px solid var(--border-2); }
  .jobs-layout.has-detail .head-controls { order: 3; flex-basis: 100%; }
  .jobs-layout.has-detail .jobs-filters .search { max-width: none; flex-basis: 100%; }
  .jobs-layout.has-detail .jsummary { margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--border-2); }
  .jobs-layout.has-detail .jlist-wrap, .jobs-layout.has-detail .jtable { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .jobs-layout.has-detail .jlist-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 0 12px 24px; }
  .jobs-layout.has-detail .jday { top: 0; }
  .jobs-layout.has-detail .jrow { scroll-margin-top: 36px; }
  .jobs-layout.has-detail .jobs-detail { height: auto; min-height: 0; }
  .jback { display: none; }
  .jband { padding: 12px 24px; }
  .jobdoc { padding: 2px 24px 16px; }
}

/* --- Resources ----------------------------------------------------------------------------------- */
/* Desktop: one screen. The service cards fill the space above the usage and volume panes, every
   chart drawn at its box's height (resources.js); the panes scroll inside when they need to.
   Narrow or short screens: an ordinary scrolling page with 120 px charts. */
.winseg button { padding: 4px 12px; font-size: 12.5px; }
.res-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.res-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.res-card .card-head { gap: 8px; }
.res-card .card-head h2 { flex: 1; }
.res-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.mini { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.mini-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; min-width: 0; }
.mini-head h4 { margin: 0; white-space: nowrap; }
.mini-legend { margin: 0; flex-wrap: nowrap; gap: 4px 10px; font-size: 11.5px; }
.mini .plot { height: 120px; min-width: 0; }
.mini .plot.skel { border-radius: 6px; }
.mini .chart .axis { font-size: 10.5px; }
.res-tables { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: stretch; min-width: 0; }
.res-tables > div { display: flex; min-width: 0; min-height: 0; }
.res-tables > div > .card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
table.f td.num, table.f th.num { text-align: right; }
table.f.usage tr.total td { border-top: 1px solid var(--border-strong); font-weight: 600; }
td.barcell { width: 40%; vertical-align: middle; }
td.fname { display: table-cell; }

@media (min-width: 1101px) and (min-height: 620px) {
  .res-page { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); padding-bottom: 16px; }
  .res-page > .page-intro, .res-page > div:not(.res-body) { flex: none; }
  .res-body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(150px, 24%); }
  .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .res-grid:empty { display: none; }
  .res-grid:empty + .res-tables { grid-row: 1 / -1; align-self: start; }
  .res-card .res-minis { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding-top: 10px; }
  .mini .plot { flex: 1; height: auto; min-height: 0; }
  .res-card .card-head { padding: 12px 14px 0; }
  .res-card .res-minis { padding: 8px 14px 12px; }
  .res-tables { min-height: 0; }
  .res-tables .card-body { flex: 1; min-height: 0; overflow: auto; }
}

/* --- Logs ---------------------------------------------------------------------------------------- */
/* One screen: the head and filters at the top, the pane filling the rest with the lines scrolling
   inside it and the count pinned at its foot. */
.logs-page { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); padding-bottom: 16px; }
.logs-page > .page-intro, .logs-page > .connect { flex: none; }
.logbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.logbar select { padding: 5px 8px; font-size: 12.5px; }
.logbar .search { margin: 0; flex: 1; min-width: 180px; max-width: 420px; }
.logpane { flex: 1; min-height: 220px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-sm); overflow: hidden; }
.logbox { flex: 1; min-height: 0; overflow: auto; padding: 8px 0; font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.logbox:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.logline { display: grid; grid-template-columns: 96px 150px 42px minmax(0, 1fr); gap: 10px; padding: 1px 14px; align-items: baseline; }
.logline:hover { background: var(--muted); }
.lt { color: var(--muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls i { width: 3px; height: 12px; border-radius: 2px; background: var(--c, var(--faint)); flex: none; }
.lv { color: var(--muted-fg); font-size: 11px; text-transform: lowercase; }
.lm { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.logline.sev-bad .lv, .logline.sev-bad .lm { color: var(--bad-ink); }
.logline.sev-warn .lv, .logline.sev-warn .lm { color: var(--warn-ink); }
.logline.sev-faint .lm { color: var(--muted-fg); }
.logline .skel { display: block; margin: 4px 0; grid-column: 1 / -1; }
.logempty { padding: 40px 16px; text-align: center; color: var(--muted-fg); font-family: var(--font); font-size: 13px; }
.logfoot { flex: none; margin: 0; padding: 7px 14px; border-top: 1px solid var(--border-2); min-height: 34px; font-variant-numeric: tabular-nums; }

/* --- Settings ------------------------------------------------------------------------------------ */
/* One screen at every size: the heading and intro stay put and the cards scroll below them. The
   scroller spans the page's side padding so its scrollbar sits at the window's edge. */
.set-page { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); padding-bottom: 0; }
.set-page > .page-head, .set-page > .page-intro { flex: none; }
.set-page > .page-intro { margin-bottom: 0; padding-bottom: 10px; }
.set-body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 calc(var(--pad) * -1); padding: 14px var(--pad) 24px;
  border-top: 1px solid transparent; transition: border-color .15s; }
.set-body.scrolled { border-top-color: var(--border); }
.token-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-l); border: 1px solid hsl(38 92% 50% / 45%); background: var(--warn-soft); margin-bottom: 14px; }
.token-banner b { font-size: 15px; color: var(--warn-ink); }
.token-banner p { margin: 3px 0 0; color: var(--fg-2); max-width: 980px; }
.token-banner code { font-size: 12px; background: var(--muted); border-radius: 4px; padding: 0 4px; }
.tb-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: hsl(38 92% 50% / 20%); color: var(--warn-ink); flex: none; }
.tb-ic [data-icon] { width: 19px; height: 19px; }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "browser" "storage" "railway" "about"; gap: 12px; align-items: stretch; }
/* Laptop: two columns. 1280 and up: the three short cards in a row (one height), this gateway under them. */
@media (min-width: 1101px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "browser storage" "railway about"; } }
@media (min-width: 1280px) { .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "browser storage railway" "about about about"; } }
@media (min-width: 2200px) { .set-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "browser storage railway about"; } }
.set-slot { display: flex; min-width: 0; container-type: inline-size; }
.set-slot > .card { flex: 1; }
.set-sec p { margin: 3px 0 10px; }
.set-sec + .set-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.set-sec h3 { margin: 0 0 6px; }
.set-sec h3 + p { margin-top: 0; }
/* This gateway: the names under the details, beside them once the card is wide. */
@container (min-width: 860px) {
  .set-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
  .set-about .set-h3 { margin-top: 0; }
}
.set-kv { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; }
.meter-row { display: grid; grid-template-columns: minmax(48px, 200px) max-content; gap: 10px; align-items: center; }
.set-h3 { margin-top: 18px; }
.danger-zone { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.danger-zone b { color: var(--bad-ink); }
.danger-zone p { margin: 3px 0 10px; }
.danger-zone input { width: 160px; }
table.caps td.num { width: 1%; }
table.caps .fname { text-transform: capitalize; }

/* --- Ultrawide ------------------------------------------------------------------------------------- */
@media (min-width: 2200px) {
  .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ov-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "run today cost events"; }
  .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 2200px) and (min-height: 620px) {
  /* Six tall cards side by side, their four charts stacked: wide, readable charts. */
  .res-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .res-card .res-minis { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); }
}

/* --- Narrower ------------------------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "run run" "today cost" "events events"; }
}
@media (max-width: 760px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .res-tables { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .jobs-listpane { --pad: 14px; padding: 0 var(--pad) 40px; }
  .run-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "tile meta time" "steps steps steps"; row-gap: 6px; }
  .run-row > .ftype { grid-area: tile; } .run-meta { grid-area: meta; } .run-row > .run-time, .run-row > .badge { grid-area: time; } .run-steps { grid-area: steps; overflow-x: auto; scrollbar-width: none; }
  .latest-row { grid-template-areas: "tile meta badge" "tile meta time"; row-gap: 2px; }
  .latest-row > .badge { grid-area: badge; justify-self: end; }
  .logline { grid-template-columns: auto auto minmax(0, 1fr); gap: 0 10px; padding: 3px 12px; }
  .logline .lm { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "run" "today" "cost" "events"; }
  /* Phones: title and actions on the first row, the controls under them, compact. */
  .page-head .head-controls { order: 3; flex-basis: 100%; }
  .jobs-filters .search { flex: 1 1 160px; min-width: 0; max-width: none; }
  .jobs-filters .src-tabs { flex: none; }
  .fsels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; }
  .fsels::-webkit-scrollbar { display: none; }
  .fsels > * { flex: none; }
  .logbar .search { order: -2; flex: 1 1 calc(100% - 50px); max-width: none; }
  .logbar > .btn { order: -1; }
  .logbar select { max-width: 128px; }
  .logbar .btn .lbl { display: none; }
  .jband { padding: 8px 12px 10px; gap: 6px; }
  .jband-top { flex-wrap: wrap; gap: 6px 10px; }
  .jback .jback-label, .jact-label { display: none; }
  .jtitle-line h1 { font-size: 16px; }
  .jstrip { order: 5; flex-basis: 100%; }
  .jband-sub { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; }
  .jband-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jband-pills::-webkit-scrollbar { display: none; }
  .logs-page { padding-bottom: 10px; }
  .stat-value { font-size: 22px; }
  .mrow, .vol { grid-template-columns: 54px minmax(0, 1fr) 112px; }
  .meter-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .set-kv { grid-template-columns: 78px minmax(0, 1fr); }
  .token-banner { padding: 14px; }
}

/* Overview on a big screen: one screen, the lower cards filling the height (lists scroll inside). */
@media (min-width: 2200px) and (min-height: 900px) {
  .ov-page { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); padding-bottom: 20px; }
  .ov-page > .page-intro, .ov-page > .ov-connect, .ov-page > .svc-grid { flex: none; }
  .ov-page .ov-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .ov-grid > div > .card { display: flex; flex-direction: column; min-height: 0; }
  .ov-grid .card-body { flex: 1; min-height: 0; overflow: auto; }
  .ov-grid .running-card .card-body { height: auto; }
  .ov-grid .events-card .card-body { overflow: hidden; display: flex; flex-direction: column; }
  .ov-grid .events { flex: 1; min-height: 0; height: auto; }
}

/* Overview service cards: the Wake button sits after the state badge. */
.svc-head .wake-btn { margin: -2px -8px 0 -4px; padding: 2px 8px; }
.svc-foot .wake-note { font-size: 12px; }