/* Arre CI control plane styles.
   One stylesheet, no build step, no framework: the UI is a dozen pages of tables
   and cards, and a colour that means "broken" has to mean it everywhere. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1d2129;
  --muted: #6b7280;
  --line: #e3e6ea;
  --accent: #1f6feb;
  --ok: #1a7f37;
  --ok-bg: #e8f5ec;
  --bad: #b62324;
  --bad-bg: #fdeceb;
  --wait: #9a6700;
  --wait-bg: #fff8e5;
  --busy: #0969da;
  --busy-bg: #e8f1fd;
  --idle: #6b7280;
  --idle-bg: #eef0f2;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --panel: #1b1f26;
    --ink: #e6e8eb;
    --muted: #9aa3ad;
    --line: #2b313a;
    --accent: #58a6ff;
    --ok: #57ab5a;
    --ok-bg: #1a2b1f;
    --bad: #e5534b;
    --bad-bg: #2d1a1a;
    --wait: #d29922;
    --wait-bg: #2b2413;
    --busy: #58a6ff;
    --busy-bg: #12243b;
    --idle: #9aa3ad;
    --idle-bg: #23282f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--panel);
  padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 8px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header and navigation */

.top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.top .brand a { color: var(--ink); font-weight: 600; font-size: 17px; }
.top nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.top nav a {
  display: block; padding: 6px 12px; border-radius: var(--radius); color: var(--ink);
}
.top nav a:hover { background: var(--bg); text-decoration: none; }
.top nav a.current { background: var(--accent); color: #fff; }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top .user { color: var(--muted); }

.env {
  margin-left: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--idle-bg); color: var(--muted); font-size: 12px;
}

main { padding: 20px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 24px 0 10px; }
h3 { font-size: 14px; margin: 18px 0 8px; }
section { margin-bottom: 8px; }

.bottom {
  display: flex; justify-content: space-between; padding: 14px 20px;
  color: var(--muted); font-size: 12px; border-top: 1px solid var(--line);
}
.subtle { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }

/* State colours. Five classes, used by pills, cards and list rows alike. */

.pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; white-space: nowrap; border: 1px solid transparent;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.bad  { background: var(--bad-bg);  color: var(--bad); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.pill.busy { background: var(--busy-bg); color: var(--busy); }
.pill.idle { background: var(--idle-bg); color: var(--idle); }
.warn { color: var(--wait); font-size: 12px; }
.bad  { color: var(--bad); }
.badge { padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.badge.wait { background: var(--wait-bg); color: var(--wait); }

/* Cards */

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.card h2 { margin: 0 0 12px; font-size: 14px; text-transform: none; }
.card.ok   { border-left: 3px solid var(--ok); }
.card.bad  { border-left: 3px solid var(--bad); }
.card.wait { border-left: 3px solid var(--wait); }
.card.busy { border-left: 3px solid var(--busy); }
.card.idle { border-left: 3px solid var(--idle); }
.card .big { font-size: 20px; margin: 0 0 12px; font-family: var(--mono); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }

/* Tables */

table.grid {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
table.grid th, table.grid td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.grid th { font-size: 12px; color: var(--muted); font-weight: 600; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--bg); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.commit { display: inline-flex; gap: 8px; align-items: baseline; }
.commit .subject { color: var(--ink); }
.attempt { color: var(--muted); font-size: 12px; }
.audit td.meta code { color: var(--muted); }

/* Forms and buttons */

button, .button {
  font: inherit; padding: 6px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer;
}
button:hover, .button:hover { border-color: var(--accent); text-decoration: none; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover { background: var(--bad); color: #fff; }
button.link {
  border: none; background: none; color: var(--accent); padding: 0; cursor: pointer;
}
.button.ghost { color: var(--muted); }
form.inline { display: inline; }

.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--ink);
  min-height: 44px;
}
.field textarea { min-height: 116px; resize: vertical; font-family: var(--mono); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint { font-size: 12px; color: var(--muted); }
.commit-picker-status { min-height: 18px; font-size: 12px; color: var(--muted); }
.commit-picker-loading { opacity: .7; }
.field.actions { flex-direction: row; gap: 8px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }

.filters, .trigger {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end;
}
.filters fieldset {
  border: none; margin: 0; padding: 0; flex: 1 1 100%;
}
.filters legend { font-size: 13px; color: var(--muted); padding: 0 0 6px; }
.trigger { flex-direction: column; align-items: stretch; max-width: 480px; }
.trigger h2 { margin-top: 0; }

.project-settings { margin-top: 16px; }
.project-settings button, .trigger button { min-height: 44px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.settings-wide { grid-column: 1 / -1; }
.locked-refs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.locked-refs > span:first-child { color: var(--muted); font-size: 13px; }
.locked-refs code { padding: 2px 7px; background: var(--idle-bg); border-radius: var(--radius); }
.locked-refs .hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.branch-picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
  max-height: 240px; overflow-y: auto;
}
.branch-picker .check { margin: 0; min-height: 32px; overflow-wrap: anywhere; }
.branch-picker input { min-height: auto; flex: 0 0 auto; }

.flashes { padding: 0 20px; max-width: 1200px; margin: 12px auto 0; }
.flash {
  margin: 0 0 8px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.flash.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.flash.wait { background: var(--wait-bg); color: var(--wait); border-color: var(--wait); }
.notice { padding: 10px 14px; background: var(--wait-bg); color: var(--wait); border-radius: var(--radius); }

/* Dashboard */

.counts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.counts li { border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.counts a { display: flex; flex-direction: column; padding: 10px 16px; color: var(--ink); }
.counts a:hover { text-decoration: none; border-radius: var(--radius); background: var(--bg); }
.counts .value { font-size: 20px; font-weight: 600; }
.counts .label { font-size: 12px; color: var(--muted); }
.counts li.ok   .value { color: var(--ok); }
.counts li.bad  .value { color: var(--bad); }
.counts li.wait .value { color: var(--wait); }
.counts li.busy .value { color: var(--busy); }

.approvals { list-style: none; margin: 0; padding: 0; }
.approvals li {
  display: flex; gap: 12px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.approvals .deadline { margin-left: auto; color: var(--wait); font-size: 12px; }
.approvalcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.targets { list-style: none; margin: 0; padding: 0; }
.targets li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.release-actions { margin-top: 16px; }
.release-actions button, .rollback-targets button { min-height: 44px; }

/* Run page */

.runhead {
  display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.runhead.ok   { border-left: 3px solid var(--ok); }
.runhead.bad  { border-left: 3px solid var(--bad); }
.runhead.wait { border-left: 3px solid var(--wait); }
.runhead.busy { border-left: 3px solid var(--busy); }
.runhead h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.runhead .subject { margin: 0 0 12px; font-size: 15px; }
.runhead .meta { font-size: 13px; }
.runactions { display: flex; gap: 8px; align-items: flex-start; }
.error {
  margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius);
  background: var(--bad-bg); color: var(--bad); font-size: 13px;
}

.bar { height: 6px; background: var(--idle-bg); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }
/* The width is a class, not a style attribute: the pages carry a
   Content-Security-Policy with no unsafe-inline, for style as well as script. */
.bar .w0   { width: 0; }
.bar .w5   { width: 5%; }
.bar .w10  { width: 10%; }
.bar .w15  { width: 15%; }
.bar .w20  { width: 20%; }
.bar .w25  { width: 25%; }
.bar .w30  { width: 30%; }
.bar .w35  { width: 35%; }
.bar .w40  { width: 40%; }
.bar .w45  { width: 45%; }
.bar .w50  { width: 50%; }
.bar .w55  { width: 55%; }
.bar .w60  { width: 60%; }
.bar .w65  { width: 65%; }
.bar .w70  { width: 70%; }
.bar .w75  { width: 75%; }
.bar .w80  { width: 80%; }
.bar .w85  { width: 85%; }
.bar .w90  { width: 90%; }
.bar .w95  { width: 95%; }
.bar .w100 { width: 100%; }

.stagelist { list-style: none; margin: 12px 0 0; padding: 0; }
.stage {
  display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px;
  align-items: center; padding: 9px 12px; background: var(--panel);
  border: 1px solid var(--line); border-bottom: none;
}
.stage:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.stage:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.stage .index { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.stage .name { font-weight: 500; }
.stage .target { color: var(--muted); font-weight: 400; }
.stage .timing { color: var(--muted); font-size: 12px; }
.stage .optional { margin-left: 6px; }
.stage .error { grid-column: 1 / -1; }
.stage.ok   .index { color: var(--ok); }
.stage.bad  .index { color: var(--bad); }
.stage.busy .index { color: var(--busy); }

.logbar { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.logbar .button { margin-left: auto; }
.log {
  margin: 0; padding: 12px 14px; max-height: 60vh; overflow: auto;
  background: #0d1117; color: #d7dde3; border-radius: var(--radius);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
}
.log:focus { outline: 2px solid var(--accent); }

.pager { display: flex; gap: 14px; align-items: center; padding: 14px 0; }
.pager .disabled { color: var(--muted); }
.pager .current { color: var(--muted); font-size: 13px; }
.rowactions { white-space: nowrap; }

/* Login, key and error pages */

body.bare { display: flex; flex-direction: column; min-height: 100vh; }
body.bare main.card { width: min(420px, 92vw); margin: auto; }
body.bare .brand { margin: 0; font-size: 20px; }
body.bare .subtle { margin: 4px 0 18px; }
body.bare .code { font-size: 40px; margin: 0 0 8px; font-family: var(--mono); }
body.bare .message { margin: 0 0 18px; }
.login { margin: 0; }
/* The access key is shown exactly once, in a 420px card, so it selects as a whole
   on one click and breaks anywhere rather than sliding out of the panel. */
.secret {
  display: block; margin: 0 0 14px; padding: 10px 12px;
  background: var(--idle-bg); border: 1px solid var(--line);
  border-radius: var(--radius); word-break: break-all; user-select: all;
}

@media (max-width: 700px) {
  .top { gap: 12px; }
  .top .who { margin-left: 0; }
  .runhead { flex-direction: column; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-wide { grid-column: auto; }
  table.grid { font-size: 13px; }
}