/* Job Monitor — ops tooling, not a marketing page. Dense, legible, honest.
   Status is never carried by colour alone: every light, square and badge has a title or a word
   next to it, because a page that only works if you can tell red from green is a page that fails
   quietly for some readers — the exact failure mode this repo exists to prevent. */

:root {
  --bg:#12151a; --panel:#1a1f27; --line:#2b323d; --ink:#dde3ea; --dim:#8d99a8;
  --healthy:#3fb950; --failed:#f85149; --overdue:#d29922; --disabled:#6e7681; --lock:#8957e5;
  --link:#58a6ff;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code, pre, .num, .strip { font-family:var(--mono); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--dim); }
.small { font-size:12px; }
.grow { flex:1; }

/* ---------- chrome ---------- */
.top {
  display:flex; align-items:center; gap:10px; padding:12px 20px;
  border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5;
}
.brand { font-weight:700; font-size:17px; color:var(--ink); }
.tag {
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
  border:1px solid var(--line); border-radius:99px; padding:2px 8px;
}
main { max-width:1100px; margin:0 auto; padding:20px; }
footer { max-width:1100px; margin:0 auto; padding:8px 20px 32px; font-size:12px; }
footer code { color:var(--dim); }

/* ---------- summary strip ---------- */
.summary {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:18px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); font-size:16px;
}
.summary b { font-size:19px; }
.summary em { color:var(--line); font-style:normal; }
.summary.clean { border-color:#1f6f35; }
.summary.attention { border-color:#7d4a12; }
.verdict {
  margin-left:auto; color:var(--healthy); font-weight:600;
  text-transform:uppercase; font-size:12px; letter-spacing:.08em;
}
.c-healthy { color:var(--healthy); } .c-overdue { color:var(--overdue); } .c-failed { color:var(--failed); }

/* ---------- a job ---------- */
.job {
  border:1px solid var(--line); border-left-width:4px; border-radius:10px;
  background:var(--panel); padding:14px 18px; margin-bottom:12px;
}
.b-healthy  { border-left-color:var(--healthy); }
.b-failed   { border-left-color:var(--failed); }
.b-overdue  { border-left-color:var(--overdue); }
.b-disabled { border-left-color:var(--disabled); opacity:.72; }

.jhead { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.jid { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink); }
a.jid:hover { color:var(--link); }
.light { width:11px; height:11px; border-radius:50%; flex:none; }
.l-healthy  { background:var(--healthy); }
.l-failed   { background:var(--failed); }
.l-overdue  { background:var(--overdue); }
.l-disabled { background:transparent; border:2px solid var(--disabled); }

.badge {
  font-size:11px; color:var(--dim); border:1px solid var(--line);
  border-radius:4px; padding:1px 7px; white-space:nowrap;
}
.badge.bad  { color:var(--failed);  border-color:#5c2427; }
.badge.warn { color:var(--overdue); border-color:#5c4412; }

.desc { margin:8px 0 10px; color:var(--dim); }

.facts { display:flex; flex-wrap:wrap; gap:8px 26px; }
.facts .k, .sum .k {
  display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim);
}
.sum .k { display:inline; margin-right:6px; }
.facts .v { font-size:14px; }
.facts .v.stale { color:var(--overdue); font-weight:600; }
.sum { margin:10px 0 0; font-size:13px; }

em.s-ok        { color:var(--healthy); font-style:normal; }
em.s-fail      { color:var(--failed);  font-style:normal; }
em.s-timeout   { color:var(--failed);  font-style:normal; }
em.s-lock-held { color:var(--lock);    font-style:normal; }

/* ---------- the 14-run strip ---------- */
.strip { display:flex; gap:3px; align-items:center; }
.sq { width:11px; height:20px; border-radius:2px; display:inline-block; background:var(--disabled); }
.sq-ok { background:var(--healthy); }
.sq-fail, .sq-timeout { background:var(--failed); }
.sq-lock-held { background:var(--lock); }

/* ---------- panels, tables, logs ---------- */
.panel {
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  padding:14px 18px; margin-bottom:12px;
}
.panel h2 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); }
.panel h1 { margin:0 0 10px; font-size:20px; }
.note { border-style:dashed; }
.crumb { margin:0 0 12px; }

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:12px; align-items:start; }
@media (max-width:900px) { .split { grid-template-columns:1fr; } }

table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); font-weight:500; padding:4px 8px 6px; border-bottom:1px solid var(--line);
}
td { padding:5px 8px; border-bottom:1px solid #222831; vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr.sel { background:#222a35; }
tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--link); }
td.num { text-align:right; color:var(--dim); white-space:nowrap; }
td.sumcell { color:var(--dim); }

pre.log, pre.notes {
  margin:0; padding:12px; border-radius:6px; background:#0d1014; border:1px solid var(--line);
  font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  max-height:520px; overflow:auto;
}
pre.notes { color:var(--dim); background:transparent; border:none; padding:0; max-height:none; }

/* ---------- the write path (step 3: the toggle) ----------
   Never colour alone: the banner leads with a sentence, the buttons say what they do in words,
   and "off" is a word on the row as well as a grey light. */
.banner {
  border:1px solid var(--line); border-left-width:4px; border-radius:10px;
  background:var(--panel); padding:12px 16px; margin-bottom:16px;
}
.banner b { display:block; margin-bottom:4px; }
.banner p { margin:0; color:var(--dim); font-size:13px; }
.w-pending  { border-left-color:var(--overdue); }
.w-failed   { border-left-color:var(--failed); }
.w-refused  { border-left-color:var(--failed); }

.flashes { list-style:none; padding:0; margin:0 0 16px; }
.flashes li {
  border:1px solid var(--line); border-left-width:4px; border-radius:8px;
  background:var(--panel); padding:10px 14px; margin-bottom:8px; font-size:14px;
}
.f-pending { border-left-color:var(--overdue); }
.f-warn    { border-left-color:var(--failed); }
.f-note    { border-left-color:var(--disabled); }

.btn {
  display:inline-block; font:inherit; font-size:13px; line-height:1;
  border:1px solid var(--line); border-radius:6px; background:#222833; color:var(--ink);
  padding:7px 12px; cursor:pointer;
}
.btn:hover { border-color:var(--dim); text-decoration:none; }
.btn.on     { border-color:#1f6f35; color:var(--healthy); }
.btn.off    { color:var(--dim); }
.btn.danger { border-color:#7d2b26; background:#3a1d1b; color:#ffb3ad; font-weight:600; }
form.inline { display:inline; }
.jhead .btn, .jhead form.inline { margin-left:10px; }

.confirm h1, .refusal h1 { margin:0 0 6px; font-size:20px; }
.confirm .facts { margin:12px 0; }
.confirmform { margin-top:16px; display:flex; gap:10px; align-items:center; }
.confirm details { margin-top:12px; }
.confirm summary { cursor:pointer; }
.warnbox {
  border:1px solid #7d4a12; border-radius:8px; background:#241b0f;
  padding:12px 14px; margin:14px 0; font-size:14px;
}
.tag.warn { border-color:#7d4a12; color:var(--overdue); }

/* ---------- the login (step 4) ----------
   One narrow panel, nothing else on the page. It is the only page a stranger can reach, so it
   says nothing about the box: no job names, no paths, no write-path banner. */
.panel.login { max-width:380px; margin:48px auto; }
.panel.login form { display:flex; flex-direction:column; gap:6px; margin:16px 0; }
.panel.login label {
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim);
}
.panel.login input {
  font:inherit; font-size:14px; padding:9px 11px; border-radius:6px;
  border:1px solid var(--line); background:#0d1014; color:var(--ink);
}
.panel.login input:focus { outline:none; border-color:var(--link); }
.panel.login .btn { margin-top:10px; padding:9px 12px; }
.panel.login .muted { font-size:12px; margin:0; }
.panel.login .f-warn {
  border:1px solid #5c2427; border-left-width:4px; border-radius:8px;
  background:#241315; padding:10px 12px; margin:0; font-size:13.5px;
}
/* Sign out sits in the header beside the clock — a button, but it should not shout like one. */
.btn.link { border-color:transparent; background:transparent; color:var(--dim); padding:4px 6px; }
.btn.link:hover { color:var(--ink); border-color:var(--line); }
.top form.inline { display:inline-flex; }