:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --text: #1c2430;
  --muted: #6b7684;
  --border: #dfe3e8;
  --ok: #2f9e63;
  --warn: #d98c1f;
  --bad: #d64545;
  --info: #3b7dd8;
  --accent: #2f6fdb;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131720;
    --panel: #1b212c;
    --text: #e6e9ee;
    --muted: #97a1ae;
    --border: #2b3340;
    --accent: #6fa2ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 600; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.brand-dot.ok { background: var(--ok); }
.brand-dot.warn { background: var(--warn); }
.brand-dot.bad { background: var(--bad); }
.meta { color: var(--muted); font-size: 13px; text-align: right; }

.tabs { display: flex; gap: 4px; padding: 10px 24px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
  color: var(--muted); font: inherit; cursor: pointer;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 20px 24px 40px; max-width: 1400px; margin: 0 auto; }
.tab-panel[hidden] { display: none; }

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; background: color-mix(in srgb, var(--warn) 15%, var(--panel)); border: 1px solid var(--warn); }
.banner.bad { background: color-mix(in srgb, var(--bad) 15%, var(--panel)); border-color: var(--bad); }

.attention { margin-bottom: 18px; padding: 12px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); }
.attention h2 { margin: 0 0 8px; font-size: 14px; }
.attention ul { margin: 0; padding-left: 18px; }
.attention li { margin: 3px 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; border-top: 4px solid var(--muted); }
.card.ok { border-top-color: var(--ok); }
.card.warn { border-top-color: var(--warn); }
.card.bad { border-top-color: var(--bad); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.card-head h2 { margin: 0; font-size: 16px; }
.card-head .version { font-family: var(--mono); font-size: 15px; }
.card .links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--muted) 18%, var(--panel)); color: var(--text);
}
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, var(--panel)); }
.badge.warn { background: color-mix(in srgb, var(--warn) 22%, var(--panel)); }
.badge.bad { background: color-mix(in srgb, var(--bad) 18%, var(--panel)); }
.badge.info { background: color-mix(in srgb, var(--info) 18%, var(--panel)); }

.two-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.panel h2 { margin: 0 0 10px; font-size: 15px; }
.panel ul { margin: 0; padding-left: 18px; }
.panel li { margin: 4px 0; }
.empty { color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.env-section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.env-section h2 { margin: 0 0 10px; font-size: 16px; }
.env-section h2 .mono { font-weight: normal; }
.env-section h3 { margin: 14px 0 6px; font-size: 13.5px; color: var(--muted); }

/* One square per kept run of a cronjob, oldest first; hovering a square names its job. */
.runs { display: inline-flex; gap: 3px; }
.run { width: 12px; height: 16px; border-radius: 3px; background: var(--muted); }
.run.ok { background: var(--ok); }
.run.warn { background: var(--warn); }
.run.bad { background: var(--bad); }
.run.info { background: var(--info); }

/* Month picker above the Jobs tab: applies to every environment below it. */
.month-selector { display: flex; align-items: center; gap: 10px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 14px; }
.picker { flex-wrap: wrap; }
.month-selector .month-label { font-weight: 600; min-width: 11em; text-align: center; }
.month-nav {
  font: inherit; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer;
}
.month-nav:disabled { opacity: 0.35; cursor: default; }
.month-nav:not(:disabled):hover { background: color-mix(in srgb, var(--muted) 10%, var(--panel)); }

/* Jobs-by-day grid: one row per state machine plus Batch, one column per calendar day of the
   selected month. The name column is sticky so it stays readable once the day columns scroll
   under a narrow viewport; day columns are kept narrow (~34px) since the grid can run to 31 of them. */
.day-grid-wrap { overflow-x: auto; }
table.day-grid { min-width: 640px; }
table.day-grid th:first-child, table.day-grid td.day-name {
  position: sticky; left: 0; background: var(--panel); min-width: 200px; z-index: 1;
}
.day-name .runs { display: flex; margin-top: 4px; }
th.day-head { width: 34px; min-width: 34px; padding: 4px 2px; text-align: center; font-weight: normal; }
th.day-head .weekday-letter { font-size: 10px; color: var(--muted); }
th.day-head .day-number { font-size: 12px; }
th.day-head.weekend { background: color-mix(in srgb, var(--muted) 8%, var(--panel)); }
th.day-head.today { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-radius: 4px 4px 0 0; }
.day-group-heading td {
  padding-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.03em; border-bottom-color: transparent;
}
.day-cell { width: 34px; min-width: 34px; text-align: center; white-space: nowrap; font-size: 12.5px; padding: 4px 2px; }
.day-cell.clickable { cursor: pointer; }
.day-cell.clickable:hover { background: color-mix(in srgb, var(--muted) 10%, var(--panel)); }
.day-cell.ok { color: var(--ok); }
.day-cell.running { color: var(--info); }
.day-cell.bad { background: color-mix(in srgb, var(--bad) 16%, var(--panel)); color: var(--bad); font-weight: 600; }
.day-cell.unknown { color: var(--muted); }
.day-cell.future { background: color-mix(in srgb, var(--muted) 5%, var(--panel)); }
.day-cell-lines { display: flex; flex-direction: column; line-height: 1.2; }
.day-cell-lines .fail-count { font-size: 11px; }
.day-detail td { background: color-mix(in srgb, var(--muted) 6%, var(--panel)); }
.day-detail-inner { padding: 8px 6px; }
.day-failures { margin: 6px 0 0; padding-left: 18px; }
.day-failures li { margin: 4px 0; }

.release-notes-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; }
.picker { display: flex; gap: 6px; }
.picker button { font: inherit; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.picker button.active { border-color: var(--accent); color: var(--accent); }
.hint { color: var(--muted); font-size: 13px; margin: 0; }

.document { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 24px; max-width: 980px; }
.document h1 { font-size: 22px; }
.document h2 { font-size: 18px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); }
.document h3 { font-size: 15px; }
.document code { background: color-mix(in srgb, var(--muted) 14%, var(--panel)); padding: 1px 4px; border-radius: 4px; }
.document pre { overflow-x: auto; padding: 10px; background: color-mix(in srgb, var(--muted) 14%, var(--panel)); border-radius: 6px; }
.document table { display: block; overflow-x: auto; }
.muted { color: var(--muted); }
.cell-version { font-family: var(--mono); }
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 16px; list-style: none; padding: 0; }
td.reason { max-width: 380px; color: var(--muted); }
.runs a { display: flex; }

/* One-line truncation for a commit title, in the pipelines table and in a deploy job cell. */
.ellipsis { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A pipeline row's module chips (domain-services): wraps rather than forcing the table wider. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* A status dot: environment health, a filter button's subject, "up to date" in an Overview cell. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); vertical-align: baseline; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.info { background: var(--info); }

.health-reasons { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.health-reasons li { margin: 3px 0; overflow-wrap: anywhere; }
.card details { margin-top: 4px; font-size: 13px; }
.card summary { cursor: pointer; color: var(--muted); }

/* Overview: fixed layout so a long commit title is cut to its column instead of widening the table. */
table.overview { table-layout: fixed; }
table.overview .col-component { width: 190px; }
table.overview .col-diff { width: 68px; }
table.overview .ellipsis { max-width: 100%; }
table.overview td { overflow-wrap: anywhere; }
.cell-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cell-line .badge { font-size: 11.5px; }
.source-tag { font-size: 11.5px; }
th.diff, td.diff { text-align: center; padding-left: 2px; padding-right: 2px; }
td.diff .badge { white-space: nowrap; color: var(--text); }
td.diff div + div { margin-top: 3px; }