/* Watchtower.
   The floor is a flight-strip board: each ticket is a strip in a bay, buff
   for issues and blue for pull requests, moving bay to bay as its stage
   changes. Everything else stays quiet so the strips carry the page.
   Fonts and assets are local: the CSP allows only this origin. */

@font-face { font-family: "Plex Condensed"; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Condensed"; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --bay: #d5dadf;        /* concrete: the page */
  --bay-deep: #c6cdd4;   /* a bay on the board */
  --panel: #eef1f4;      /* bars and control panels */
  --ink: #1b2633;
  --ink-soft: #4b5867;
  --rule: #a9b2bc;
  --issue: #f2e3a9;      /* buff strip */
  --issue-edge: #a8841c;
  --pr: #cfe0f3;         /* blue strip */
  --pr-edge: #31649f;
  --action: #1d5fa8;
  --action-ink: #ffffff;
  --signal: #c2362f;
  --go: #2b7a47;
  --caution: #9a6200;
  --focus: #1d5fa8;

  --cond: "Plex Condensed", "Arial Narrow", sans-serif;
  --sans: "Plex", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bay: #1d242c; --bay-deep: #161c22; --panel: #252d36;
    --ink: #e4e9ee; --ink-soft: #9ba7b3; --rule: #3a4551;
    --issue: #3a3422; --issue-edge: #d8b44c;
    --pr: #213149; --pr-edge: #6c9edc;
    --action: #5c9be0; --action-ink: #0d1722;
    --signal: #f0645b; --go: #5cc283; --caution: #e3a43a; --focus: #8bbcf0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bay); color: var(--ink); font: 400 var(--step-0)/1.5 var(--sans); }
a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { font: 0.86em var(--mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: 0.005em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-1); }
.soft { color: var(--ink-soft); }
.fine { font-size: var(--step--1); color: var(--ink-soft); }
.wrap { overflow-wrap: anywhere; }

/* Bar */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem;
  padding: 0.55rem 1rem; background: var(--panel); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
.wordmark { font: 600 1.35rem/1 var(--cond); color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.bar nav { display: flex; gap: 1.1rem; flex: 1; overflow-x: auto; }
.bar nav a { color: var(--ink-soft); text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.bar nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.operator { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

main { padding: 1.25rem 1rem 3rem; max-width: 1680px; margin: 0 auto; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.head .fine { flex-basis: 100%; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem;
  padding: 0.45rem 1rem; border-radius: 4px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink); font: 500 var(--step-0)/1.2 var(--sans);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--ink-soft); }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--action); font: inherit; cursor: pointer; }

/* Notices */
.notice { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-left: 4px solid var(--rule); background: var(--panel); border-radius: 0 4px 4px 0; max-width: 60rem; }
.notice.ok { border-left-color: var(--go); }
.notice.warn { border-left-color: var(--caution); }
.notice.bad { border-left-color: var(--signal); }
.ok { color: var(--go); } .bad { color: var(--signal); }

/* Live indicator */
.live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step--1); color: var(--ink-soft); }
.live::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rule); }
.live[data-state="live"] { color: var(--go); }
.live[data-state="live"]::before { background: var(--go); }
.live[data-state="down"] { color: var(--caution); }
.live[data-state="down"]::before { background: var(--caution); }

/* Strips: the one bold thing. A ticket number in a column of its own, the
   kind's colour, and a heavy leading edge like a printed strip in a holder. */
.strip {
  display: grid; gap: 0.3rem;
  background: var(--issue); border-left: 6px solid var(--issue-edge);
  border-radius: 2px 3px 3px 2px; padding: 0.45rem 0.65rem 0.55rem 0.6rem;
  box-shadow: 0 1px 0 rgba(27, 38, 51, 0.18);
  animation: arrive 0.9s ease-out;
}
.strip.pr { background: var(--pr); border-left-color: var(--pr-edge); }
@keyframes arrive { from { box-shadow: 0 0 0 2px var(--action); } }
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }
.strip .ref { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.strip .num { font: 600 var(--step-2)/1 var(--cond); color: var(--ink); text-decoration: none; }
.strip .num:hover { text-decoration: underline; }
.strip .kind { font-size: var(--step--1); color: var(--ink-soft); }
.strip .body { min-width: 0; display: grid; gap: 0.3rem; }
.strip .title { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.strip .title a { color: inherit; text-decoration: none; }
.strip .title a:hover { text-decoration: underline; }
.strip .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.strip .meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-top: 0.1rem; font-size: var(--step--1); color: var(--ink-soft); }
.tag { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink-soft); }
.tag.bad { border-color: var(--signal); color: var(--signal); font-weight: 600; }
.tag.warn { border-color: var(--caution); color: var(--caution); }
.checks-passing { color: var(--go); } .checks-failing { color: var(--signal); font-weight: 600; } .checks-pending { color: var(--caution); }

/* Positions: one per agent. */
.positions { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-bottom: 1.5rem; }
.position { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem 0.7rem; }
.position h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.position a { display: block; font-size: var(--step--1); padding: 0.15rem 0; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.position a:hover { text-decoration: underline; }
.position a b { font: 600 var(--step-0) var(--cond); margin-right: 0.35rem; }
.positions-empty { margin: 0 0 1.5rem; }

/* The board. Bays stack on a phone, with empty ones folded to a line, and
   stand side by side on a wide screen. */
.board { display: grid; gap: 0.75rem; }
.bay { background: var(--bay-deep); border-radius: 4px; padding: 0.6rem; }
.bay header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.bay h2 { font-size: var(--step-1); }
.bay .count { font: 600 var(--step-1)/1 var(--cond); color: var(--ink-soft); }
.bay .hint { margin: 0.1rem 0 0.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.bay .strips { display: grid; gap: 0.4rem; }
.bay.empty .hint { margin-bottom: 0; }
@media (max-width: 899px) {
  .bay.empty { padding: 0.45rem 0.6rem; }
  .bay.empty .hint { display: none; }
}
@media (min-width: 900px) {
  .board { grid-template-columns: repeat(7, minmax(12rem, 1fr)); overflow-x: auto; align-items: start; }
  .bay { min-height: 9rem; }
}

/* Ticket page: the strip on the left, its controls on the right. */
.ticket { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .ticket { grid-template-columns: minmax(18rem, 26rem) minmax(0, 40rem); align-items: start; } }
.ticket .strip { grid-template-columns: 4.6rem 1fr; gap: 0 0.8rem; padding: 0.75rem 0.85rem 0.8rem 0.7rem; }
.ticket .strip .ref { flex-direction: column; gap: 0.1rem; border-bottom: 0; padding: 0 0.6rem 0 0; border-right: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.ticket .strip .num { font-size: var(--step-3); }
.ticket .strip .title { font-size: var(--step-1); }
.ticket .github { display: inline-block; margin-top: 0.6rem; font-size: var(--step--1); }

.controls { display: grid; gap: 1rem; }
.control { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 0.8rem; margin: 0; }
.control h2 { margin-bottom: 0.6rem; }
.control .fine { margin: 0.5rem 0 0; }

/* Segmented choices: each option is a submit button; the current one is
   filled and inert. */
.segments { display: grid; gap: 0.35rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.segments.three { grid-template-columns: repeat(3, 1fr); }
.segment {
  min-height: 2.6rem; padding: 0.4rem 0.6rem; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--bay); color: var(--ink); font: 500 var(--step-0)/1.15 var(--cond); cursor: pointer; text-align: center;
}
.segment:hover { border-color: var(--ink-soft); }
.segment[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); cursor: default; }
.segment[disabled]:not([aria-pressed="true"]) { opacity: 0.45; cursor: not-allowed; }

.agents { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.agent-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.3rem 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--bay); font: 500 var(--step-0) var(--cond); }
.agent-chip button { border: 0; background: none; color: var(--ink-soft); font: var(--step--1) var(--sans); cursor: pointer; padding: 0.2rem 0.3rem; }
.agent-chip button:hover { color: var(--signal); }
.assign { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

.pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* Approvals */
.inbox { display: grid; gap: 1rem; max-width: 44rem; }
.inbox-item { display: grid; gap: 0.5rem; }
.inbox-item form { margin: 0; }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 40rem; }
fieldset { border: 1px solid var(--rule); border-radius: 4px; padding: 0.9rem; margin: 0; background: var(--panel); display: grid; gap: 0.3rem; }
legend { font: 600 var(--step-1) var(--cond); padding: 0 0.3rem; }
label { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.4rem; }
input, textarea {
  width: 100%; padding: 0.5rem 0.6rem; border-radius: 3px; border: 1px solid var(--rule);
  background: var(--bay); color: var(--ink); font: 16px/1.4 var(--mono); /* 16px stops iOS zoom */
}

/* Tables */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th { font: 600 var(--step-0) var(--cond); text-align: left; color: var(--ink-soft); }
th, td { padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr.detail td { border-bottom-width: 2px; padding-top: 0; color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.verify { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }

/* Sign-in */
.signin { max-width: 24rem; margin: 16vh auto 0; display: grid; gap: 1rem; }
.signin h1 { font-size: 3.25rem; }
.signin .strip { animation: none; }
.section { margin: 2rem 0 0.6rem; }

/* Registry pages */
.agent-name { font: 600 var(--step-1) var(--cond); text-decoration: none; }
.templates { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); max-width: 70rem; }
.template { display: grid; gap: 0.2rem; padding: 0.7rem 0.8rem; background: var(--panel); border: 1px solid var(--rule); border-left: 6px solid var(--issue-edge); border-radius: 3px; color: var(--ink); text-decoration: none; }
.template:hover { border-color: var(--ink-soft); }
.template strong { font: 600 var(--step-1) var(--cond); }
.form.wide { max-width: 64rem; }
.cols { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); font-size: var(--step-0); margin-top: 0.5rem; }
.check input { width: auto; }
.tools { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.tool { margin-top: 0.2rem; }
.rowset { display: grid; gap: 0.4rem; grid-template-columns: 1fr 1.5fr 6rem; margin-top: 0.4rem; }
.rowset.schedule { grid-template-columns: 1.2fr 1.4fr 1.6fr 5rem 1fr 5rem; }
@media (max-width: 700px) { .rowset, .rowset.schedule { grid-template-columns: 1fr 1fr; } }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.actions form { margin: 0; }
.agent-layout { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .agent-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.facts { display: grid; grid-template-columns: 7rem 1fr; gap: 0.45rem 1rem; margin: 0; }
.facts dt { font: 600 var(--step-0) var(--cond); color: var(--ink-soft); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.toolchip { display: inline-block; margin: 0 0.2rem 0.2rem 0; padding: 0 0.3rem; border: 1px solid var(--rule); border-radius: 2px; }
.instructions { white-space: pre-wrap; font: var(--step-0)/1.55 var(--sans); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 0.8rem; max-width: 70ch; }
.history { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.4rem; }
.history li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.6rem; align-items: start; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 0.5rem 0.6rem; }
.vnum { font: 600 var(--step-1) var(--cond); }
.vbody p { margin: 0; }
.vpick { display: grid; gap: 0.1rem; }
.vpick .check { margin: 0; font-size: var(--step--1); }
.compare-form { margin-bottom: 1rem; }
.diff { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.change { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 0.6rem; }
.change strong { font: 600 var(--step-0) var(--cond); display: block; margin-bottom: 0.3rem; }
.beforeafter { display: grid; gap: 0.2rem; }
.before { text-decoration: line-through; color: var(--signal); overflow-wrap: anywhere; }
.after { color: var(--go); overflow-wrap: anywhere; }
.lines { margin: 0; font: var(--step--1)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.lines span { display: block; }
.lines .del { color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); }
.lines .add { color: var(--go); background: color-mix(in srgb, var(--go) 10%, transparent); }
.lines .same { color: var(--ink-soft); }
.control h3 { margin-bottom: 0.4rem; }
.control.danger { border-color: color-mix(in srgb, var(--signal) 50%, var(--rule)); }
.agent-layout .control { margin-top: 1rem; }
.row-actions { display: flex; gap: 0.8rem; }
.row-actions form { margin: 0; }

/* Floor filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.8rem; padding: 0.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
.filters input[type="search"] { flex: 1 1 14rem; width: auto; font-family: var(--sans); }
.filters select { flex: 0 1 auto; }
.filters .check { margin: 0; font-size: var(--step--1); }
.filters .density { margin-left: auto; font-size: var(--step--1); }
.bay .more { display: block; margin-top: 0.5rem; font-size: var(--step--1); }
.position h3 a { display: inline; padding: 0; font: inherit; color: var(--ink); text-decoration: none; white-space: normal; }
.position h3 a:hover { text-decoration: underline; }
.position.stray { border-style: dashed; }

/* Compact density: one line per strip. */
.compact .strip { gap: 0; padding: 0.3rem 0.5rem; }
.compact .strip .ref { border: 0; padding: 0; }
.compact .strip .num { font-size: var(--step-1); }
.compact .strip .kind, .compact .strip .tags, .compact .strip .meta { display: none; }
.compact .strip { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.5rem; }
.compact .strip .title { font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Form fields stack label over control and fill their column. */
fieldset label:not(.check) { display: block; }
fieldset select, .cols select, .cols input { width: 100%; }
.rowset select, .rowset input { width: 100%; min-width: 0; }
.filters select { width: auto; }

/* Runs and desks */
.desk-status, .run-status { display: inline-block; font: 500 0.78rem/1.4 var(--sans); padding: 0.05rem 0.45rem; border-radius: 2px; border: 1px solid var(--rule); color: var(--ink-soft); vertical-align: middle; }
.s-working, .r-running, .r-dispatched { color: var(--action); border-color: var(--action); }
.s-queued, .r-queued { color: var(--caution); border-color: var(--caution); }
.s-runner_offline, .s-paused { color: var(--caution); border-color: var(--caution); border-style: dashed; }
.s-disabled, .r-cancelled, .r-skipped { color: var(--ink-soft); }
.r-succeeded { color: var(--go); border-color: var(--go); }
.r-failed, .r-timed_out { color: var(--signal); border-color: var(--signal); }
.run-control { margin-bottom: 1rem; display: grid; gap: 0.6rem; }
.run-control form { margin: 0; }
.run-control .short { width: 9rem; flex: 0 0 auto; }
.run-control select { flex: 1; min-width: 10rem; width: auto; }
.pause-row { justify-content: space-between; }
.timeline { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.3rem; }
.timeline li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--rule); background: var(--panel); }
.timeline li.done { border-left-color: var(--action); }