/* The monitor page: the studio's own tokens (style.css), set for reading at a glance. */
:root {
  /* pipeline steps, one hue each (validated as a categorical set on the panel surface) */
  --s-make: #3987e5; --s-check: #d95926; --s-draft: #199e70; --s-render: #c98500; --s-final: #d55181; --s-post: #9085e9;
  color-scheme: dark;
}
body.mon { height: auto; min-height: 100%; overflow-y: auto; font-variant-numeric: tabular-nums; }
body.mon ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }
body.mon * { scrollbar-color: var(--line) transparent; }
body.mon a { color: var(--accent); text-underline-offset: 3px; }
body.mon a:focus-visible, body.mon button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[data-step="make"] { --c: var(--s-make); } [data-step="check"] { --c: var(--s-check); } [data-step="draft"] { --c: var(--s-draft); }
[data-step="render"] { --c: var(--s-render); } [data-step="final"] { --c: var(--s-final); } [data-step="post"] { --c: var(--s-post); }

/* ---- header ---- */
.mon-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mon-head .brand { margin: 0; color: var(--ink); text-decoration: none; font-size: 15px; }
.mon-head h1 { font-size: 15px; font-weight: 600; color: var(--mute); margin: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; margin-left: auto; }
.seg button { border: 0; background: transparent; color: var(--mute); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fresh { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); min-width: 0; }
.fresh.late { color: var(--warn); }
.mon-head .btn { text-decoration: none; color: var(--ink); }

/* ---- machine strip ---- */
.machine { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(280px, 2.2fr) repeat(2, minmax(130px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.machine:empty { display: none; }
.machine > .hint { background: var(--bg); padding: 12px 24px; margin: 0; grid-column: 1 / -1; }
.mtile { background: var(--bg); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mlabel { font-size: 12px; font-weight: 600; color: var(--mute); }
.mval { font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.01em; }
.mval small { font-size: 14px; font-weight: 500; color: var(--mute); }
.mval.bad { color: var(--bad); }
.msub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { display: block; height: 5px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--mute); border-radius: 3px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.meter.hot i { background: var(--warn); }
.q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 14px; }
.q b { color: var(--accent); }
.q.free b { color: var(--good); }
.q-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-meta { color: var(--mute); font-size: 12px; white-space: nowrap; }
.q-wait { font-size: 12px; color: var(--mute); display: flex; flex-direction: column; gap: 4px; }
.q-wait .q b { color: var(--ink); }

/* ---- studios ---- */
.studios { display: grid; gap: 1px; background: var(--line); align-items: start; }
.studios.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studios.n1 { grid-template-columns: minmax(0, 1fr); }
.studio { background: var(--bg); padding: 20px 24px 48px; min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: 22px; }
.studios.n1 .studio { max-width: 1180px; width: 100%; justify-self: center; }
.st-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.st-head h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.st-name { color: var(--mute); font-weight: 600; font-size: 13px; margin-left: 4px; }
.st-acc { color: var(--mute); font-size: 13px; }
.st-head .pill { margin-left: auto; }
.st-link { font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--raised); color: var(--mute); border: 1px solid var(--line); white-space: nowrap; }
.pill.on { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.banner { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--mute); }
.warn-b { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }

/* now */
.now { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.now.idle { gap: 6px; }
.now-status { display: flex; flex-wrap: wrap; gap: 8px; }
.now-status .pill:first-child { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-size: 13px; padding: 4px 11px; }
.st-failed { background: var(--bad) !important; border-color: var(--bad) !important; }
.pill.job { color: var(--ink); }
.gpu-hold { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.gpu-wait { color: var(--warn); border-style: dashed; }
.now-title { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.now-meta { margin: -8px 0 0; color: var(--mute); font-size: 13px; }

.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.step { display: grid; grid-template-rows: 6px auto auto; gap: 6px; min-width: 0; }
.step .sw { border-radius: 3px; background: var(--raised); }
.step.done .sw { background: color-mix(in srgb, var(--c) 55%, var(--raised)); }
.step.cur .sw { background: var(--c); animation: pulse 1.6s ease-in-out infinite; }
.step .sl { font-size: 13px; font-weight: 600; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.done .sl { color: var(--mute); }
.step.cur .sl { color: var(--ink); }
.step .st { font-size: 12px; color: var(--faint); white-space: nowrap; }
.step.cur .st { color: var(--ink); font-weight: 600; }
.reviews { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--mute); }
.rv b { color: var(--ink); font-weight: 600; }
.crit { color: var(--bad); font-weight: 600; }

.happening { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.h-label { font-size: 12px; font-weight: 600; color: var(--accent); grid-column: 1; }
.h-when { font-size: 12px; color: var(--faint); grid-column: 2; grid-row: 1; }
.h-text { grid-column: 1 / -1; margin: 0; font-size: 18px; line-height: 1.35; font-weight: 550; overflow-wrap: anywhere; }
.h-text.k-error { color: var(--bad); }
.h-text.k-done { color: var(--good); }

.shots { display: flex; flex-direction: column; gap: 7px; }
.shots-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mute); flex-wrap: wrap; }
.shots-head > span:first-child { font-weight: 600; color: var(--ink); }
.shots-head b { color: var(--ink); }
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 3px; }
.cells i { height: 14px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line); }
.cells .c-draft { background: color-mix(in srgb, var(--good) 22%, var(--raised)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.cells .c-final { background: var(--good); border-color: var(--good); }
.cells .c-rendering { background: var(--accent); border-color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.shots-now { font-size: 14px; color: var(--accent); font-weight: 600; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.feed li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; color: var(--mute); }
.feed time { color: var(--faint); }
.feed span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .k-note span { color: var(--ink); }
.feed .k-error span { color: var(--bad); }
.feed .k-done span { color: var(--good); }

/* blocks */
.block h2 { font-size: 15px; margin: 0 0 10px; }
.block h3 { font-size: 13px; margin: 16px 0 6px; color: var(--mute); }
.block h3 small { font-weight: 400; color: var(--faint); margin-left: 6px; }
.block .hint { margin: 8px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mute); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hist li { padding: 10px 0 11px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.h-top { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.outcome { font-size: 12px; font-weight: 700; color: var(--mute); }
.hist .ok .outcome { color: var(--good); }
.hist .fail .outcome { color: var(--bad); }
.hist .open .outcome { color: var(--accent); }
.h-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-total { font-size: 13px; color: var(--mute); }
.bar { display: flex; gap: 2px; height: 8px; margin-left: 84px; }
.bar i { display: block; min-width: 3px; background: var(--c); border-radius: 2px; }
.bar.nodata { background: var(--raised); border-radius: 2px; }
.h-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 84px; font-size: 12px; color: var(--faint); }
.h-links { display: inline-flex; gap: 6px; color: var(--mute); }
.h-links .sep { color: var(--faint); }
.bad-t { color: var(--bad); }
.h-review { color: var(--mute); }
.h-error { margin: 0 0 0 84px; font-size: 13px; color: var(--bad); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.studios.n2 .pair { grid-template-columns: minmax(0, 1fr); }
.plats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.plat { display: grid; grid-template-columns: 10px 84px minmax(0, 1fr); gap: 8px; align-items: center; }
.plat > span:last-child { color: var(--mute); overflow-wrap: anywhere; }
.plat.bad .dot { background: var(--bad); }
.plat.bad > span:last-child { color: var(--bad); }
.inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.inc li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; color: var(--mute); }
.inc time { color: var(--faint); }
.inc b { color: var(--ink); font-weight: 600; }
.inc .i-failed span, .inc .i-error span { color: color-mix(in srgb, var(--bad) 75%, var(--ink)); }
.inc .i-limit span { color: var(--warn); }
.inc.log li { grid-template-columns: minmax(0, 1fr); font: 12px/1.45 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.t-rank { color: var(--accent); font-weight: 700; grid-row: span 2; }
.t-title { font-weight: 600; min-width: 0; }
.t-title a { color: var(--ink); text-decoration: none; }
.t-title a:hover { text-decoration: underline; }
.t-num { font-size: 12px; color: var(--mute); text-align: right; white-space: nowrap; }
.t-num b { color: var(--ink); font-size: 14px; }
.top li .t-num:last-child { grid-column: 2 / -1; text-align: left; }

/* ---- smaller screens ---- */
@media (max-width: 1280px) {
  .machine { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mtile.wide { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1100px) {
  .studios.n2 { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mon-head { padding: 10px 16px; gap: 8px 12px; }
  .mon-head h1 { display: none; }
  .mon-head .btn { display: none; }
  .seg { margin-left: 0; order: 3; width: 100%; }
  .seg button { flex: 1; }
  .fresh { margin-left: auto; }
  .machine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtile { padding: 10px 16px 12px; }
  .mval { font-size: 22px; }
  .mtile.wide { grid-row: auto; }
  .mtile.vram { grid-column: 1 / -1; }
  .studio { padding: 16px 16px 40px; }
  .now { padding: 14px 14px 16px; }
  .now-title { font-size: 20px; }
  .steps { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .h-top { grid-template-columns: minmax(0, 1fr) auto; }
  .outcome { grid-column: 1 / -1; }
  .bar, .h-foot, .h-error { margin-left: 0; }
  .st-head .pill { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .step.cur .sw, .cells .c-rendering, .dot.live { animation: none; }
  .meter i { transition: none; }
}