/* Werkator web UI — RFC 0001, option G ("Kin"): the author's blog as the visual family.
   White paper, IBM Plex, a blue-shifted petrol used only as an accent, a neutral dark mode.
   Class names are shared with werkator.js and the templates; werkator.js renders the same
   markup the templates do, so a rule here serves both. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }

:root {
    color-scheme: light dark;
    /* neutrals: the blog's scale */
    --bg: #ffffff;
    --panel: #fafafa;
    --panel-2: #f4f5f5;
    --line: #e4e7e7;
    --line-2: #d1d6d5;
    --text: #141616;
    --text-2: #3e4645;
    --muted: #6e7c7a;
    --ghost: #9ea9a7;
    /* petrol, blue-shifted: the blog's primary-600 (#0F6E66) moved from hue 175° to 190° */
    --accent: #0e6b7d;
    --accent-2: #0a5262;
    --accent-soft: #e3f0f3;
    --accent-soft-2: #c6e0e6;
    /* clay for failures: serious without shouting */
    --clay: #b0563b;
    --clay-soft: #f6e9e4;
    /* the system page's three levels: ok is the accent, "watch" a yellow amber, "critical" a red
       clearly redder than the clay of a failed build */
    --amber: #b8860b;
    --amber-soft: #f9f0d2;
    --crit: #b3261e;
    --crit-soft: #f8e2df;
    /* the breakdown slices (RFC 0002 A1), in the order the dialog lists them */
    --slice-workspaces: #0e6b7d;
    --slice-buildenv: #4f5c5a;
    --slice-artifacts: #b0563b;
    --slice-repositories: #63bccb;
    --slice-other: #d7dcdb;
    --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --shadow: 0 2px 6px rgb(20 22 22 / 0.05);
}

/* Dark twice, because a reader may overrule the browser (RFC 0003): once for the browser's own
   preference -- unless light was chosen -- and once for a chosen dark, whatever the browser prefers.
   The two token lists must stay identical; DarkModeTokensUnitTest fails the build when they drift.
   `color-scheme` travels with the choice, or form controls and scrollbars keep the browser's idea
   of light and dark while the page shows the opposite. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #242928;
        --panel: #2a302f;
        --panel-2: #313837;
        --line: #3e4645;
        --line-2: #545f5d;
        --text: #f4f5f5;
        --text-2: #d1d6d5;
        --muted: #9ea9a7;
        --ghost: #6e7c7a;
        --accent: #63bccb;
        --accent-2: #8ed0db;
        --accent-soft: #1f3b41;
        --accent-soft-2: #27505a;
        --clay: #e09070;
        --clay-soft: #3e2a22;
        --amber: #e3b341;
        --amber-soft: #3d3418;
        --crit: #ef6f66;
        --crit-soft: #45201d;
        --slice-workspaces: #63bccb;
        --slice-buildenv: #aebbb8;
        --slice-artifacts: #e09070;
        --slice-repositories: #2f8fa2;
        --slice-other: #3a4140;
        --shadow: 0 2px 6px rgb(0 0 0 / 0.25);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #242928;
    --panel: #2a302f;
    --panel-2: #313837;
    --line: #3e4645;
    --line-2: #545f5d;
    --text: #f4f5f5;
    --text-2: #d1d6d5;
    --muted: #9ea9a7;
    --ghost: #6e7c7a;
    --accent: #63bccb;
    --accent-2: #8ed0db;
    --accent-soft: #1f3b41;
    --accent-soft-2: #27505a;
    --clay: #e09070;
    --clay-soft: #3e2a22;
    --amber: #e3b341;
    --amber-soft: #3d3418;
    --crit: #ef6f66;
    --crit-soft: #45201d;
    --slice-workspaces: #63bccb;
    --slice-buildenv: #aebbb8;
    --slice-artifacts: #e09070;
    --slice-repositories: #2f8fa2;
    --slice-other: #3a4140;
    --shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}

:root[data-theme="light"] {
    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); }
main { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
main a { color: var(--accent); font-weight: 500; }
main a:hover { color: var(--accent-2); text-decoration: underline; }
code { font-family: var(--mono); font-size: 13px; }
h2 { margin: 24px 0 10px; font-size: 20px; font-weight: 600; }
.muted { color: var(--muted); }

/* ---- icons: stroke glyphs as CSS masks, colored by currentColor; no emoji (RFC 0001) ---- */
.icon { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* the glyph paths are appended at the end of this file (see "icon glyphs") */

/* ---- header: the blog's — wordmark left, navigation right, a hairline with a soft shadow ---- */
.site-header { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.site-header-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--text); }
.brand:hover { color: var(--accent); }
.logo { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; font-size: 16px; color: var(--text); }
.crumb::before { content: "/"; color: var(--ghost); margin: 0 2px; }
.repo-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the switcher takes the repository name's place and dresses like it: no box until hovered */
.repo-select { appearance: none; -webkit-appearance: none; padding: 2px 22px 2px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7c7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; }
.repo-select:hover, .repo-select:focus { border-color: var(--line-2); background-color: var(--panel); }
.repo-select option { color: var(--text); background: var(--panel); font-weight: 400; }
.site-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 22px; font-weight: 500; color: var(--text-2); }
.site-nav a, .site-nav .current { padding: 14px 0; }
.site-nav .current { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.site-nav .nav-item { display: inline-flex; align-items: center; gap: 7px; }
/* the live indicator: an outlined chip; its status class (from werkator.js) is the color */
#live-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#live-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#live-indicator.status-success { color: var(--accent); border-color: var(--accent-soft-2); }
#live-indicator.status-success::before { animation: pulse 1.6s ease-in-out infinite; }
#live-indicator.status-error { color: var(--clay); border-color: var(--clay); }
.icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); color: var(--text-2); cursor: pointer; }
.icon-button:hover { color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft); }
.reload-button.is-reloading .icon { animation: reload-spin 0.6s ease-out; }
@keyframes reload-spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---- view tabs and the view title: the name first, the explanation second ---- */
.view-toggle { display: flex; gap: 4px; margin: 14px 0 0; border-bottom: 1px solid var(--line-2); }
.view-toggle a, .view-toggle span { display: inline-flex; padding: 8px 14px; margin-bottom: -1px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.view-toggle span { color: var(--accent); border-bottom-color: var(--accent); }
.view-toggle a:hover { color: var(--accent); text-decoration: none; }
.view-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 22px 0 6px; }
.view-head h1 { margin: 0; font-size: 22px; font-weight: 600; }
.view-explanation { color: var(--muted); font-size: 14px; }
.view-meta { margin-left: auto; font: 400 12px var(--mono); color: var(--muted); }
.view-meta:empty { display: none; }

/* server-side staleness: the watcher cannot reach origin — distinct from the live indicator,
   which reports whether this browser reaches the server */
.watcher-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--clay); border-radius: 6px; background: var(--clay-soft); color: var(--clay); font-size: 13px; }
.watcher-banner strong { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.watcher-banner[hidden] { display: none; }

/* ---- build tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { padding: 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { position: sticky; top: 0; background: var(--bg); border-bottom-color: var(--line-2); color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
tbody tr[data-status="running"] td { background: var(--accent-soft); }
tbody tr[data-status="failed"] td { background: var(--clay-soft); }
tbody tr:hover td { background: var(--panel-2); }
tbody.is-stale { opacity: 0.55; }
.branch { font-weight: 500; }
/* the open pull request of a branch, beside its name: Mono like a commit, the name stays the headline */
.pull-request { margin-left: 6px; font: 400 12px var(--mono); white-space: nowrap; }
.pull-request-cell .pull-request, .build-card-header .pull-request, .build-facts .pull-request { margin-left: 0; }
.card-mid .pull-request { color: var(--muted); }
.duration-cell, td[data-label="Started"] { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
/* queue wait time of a pending build — italic to distinguish it from real build time */
.duration-wait { font-style: italic; color: var(--muted); }
.empty { padding: 28px 14px; color: var(--muted); text-align: center; }

/* ---- statuses: a dot and a Mono word, no pill (outlined dot for pending, pulsing for running) ---- */
.status { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-success, .status-running { color: var(--accent); }
.status-running::before { animation: pulse 1.4s ease-in-out infinite; }
.status-failed, .status-error { color: var(--clay); }
/* stopped by its own clock: not a failure, not a nothing — the watch colour (PR#48) */
.status-timed_out { color: var(--amber); }
.status-pending { color: var(--text-2); }
.status-pending::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status-interrupted, .status-cancelled, .status-unknown, .status-finished { color: var(--ghost); }

/* ---- copy buttons, artifact links, row actions ---- */
.link-tools { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copy-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ghost); cursor: pointer; }
.copy-button .icon { width: 14px; height: 14px; }
.copy-button:hover { color: var(--accent); border-color: var(--line-2); }
.copy-button.is-copied { color: var(--accent); }
.artifact-links { display: inline-flex; gap: 8px; color: var(--accent); }
.artifact-link { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.artifact-link:hover { color: var(--accent-2); }
.actions-column, .actions-cell { width: 84px; min-width: 84px; }
.actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
.action-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 26px; height: 26px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); color: var(--accent); font: 500 13px var(--sans); cursor: pointer; }
.action-button .icon { width: 14px; height: 14px; }
.action-button:hover { border-color: var(--accent-soft-2); background: var(--accent-soft); }
.action-button:disabled { color: var(--ghost); cursor: default; }
.delete-button, .cancel-button { color: var(--clay); }
.delete-button:hover, .cancel-button:hover { border-color: var(--clay); background: var(--clay-soft); }

/* ---- current-build cards ---- */
.empty-panel { padding: 28px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.build-card { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.build-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.build-card-actions { margin-left: auto; }
.build-card-result { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.live-log { margin: 0; padding: 12px 14px; max-height: 420px; overflow: auto; background: var(--bg); font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- artifact index and release notes ---- */
.panel { padding: 0; }
.build-facts { list-style: none; margin: 0; padding: 0; }
.build-facts li { margin: 0 0 8px; }

/* where a build's time went (plan step 14); the underlined phases are the orchestration's own */
.build-phases .phase { display: inline-block; margin: 0 16px 4px 0; white-space: nowrap; }
.build-phases .phase-overhead { text-decoration: underline dotted var(--line-2); text-underline-offset: 4px; }
.release-notes h2 { margin-top: 28px; }
.release-notes li { margin: 0 0 8px; }

/* a private repository seen without the control token: named, counted, but not identified (PR#43) */
.repo.is-hidden { cursor: default; }
.repo.is-hidden .repo-title { color: var(--ghost); font-style: italic; }
.repo.is-hidden:hover { background: none; }

#token-button.has-token { color: var(--accent); border-color: var(--accent-soft-2); }
/* a stored token the server refuses: the key says so instead of looking like no token at all */
#token-button.is-rejected { color: var(--crit); border-color: var(--crit); }

/* an action nobody may take is shown, but grey and inert — the row still says what exists (PR#43) */
.action-button:disabled { color: var(--ghost); border-color: var(--line); background: none; cursor: not-allowed; }
.action-button:disabled:hover { color: var(--ghost); border-color: var(--line); background: none; }

/* ---- the order dialog (PR#42) ---- */
.order-button { margin-left: 4px; padding: 2px 10px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); font: 500 12px var(--sans); cursor: pointer; }
.order-button:hover { background: var(--accent-soft); }
.order-list { margin: 0 0 4px; padding: 0; list-style: none; }
.order-list li { padding: 5px 0; }
.order-list label { display: flex; gap: 9px; align-items: baseline; cursor: pointer; }
.order-list .order-what { font-variant-numeric: tabular-nums; }
.order-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.order-submit { padding: 6px 14px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--bg); font: 500 13px var(--sans); cursor: pointer; }
.order-submit:disabled { border-color: var(--line-2); background: var(--line); color: var(--muted); cursor: default; }

/* ---- the disk breakdown dialog (RFC 0002 A1) ---- */
.sheet { max-width: 560px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18); }
.sheet::backdrop { background: rgba(20, 22, 22, 0.45); }
.sheet header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sheet h3 { margin: 0; font-size: 17px; }
.sheet .sheet-sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.sheet-body { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donut { flex: 0 0 168px; width: 168px; height: 168px; }
.legend { flex: 1 1 240px; font-size: 13px; font-variant-numeric: tabular-nums; }
.legend div { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend .share { min-width: 44px; color: var(--muted); text-align: right; }
.sheet-foot { margin: 16px 0 0; color: var(--muted); font-size: 12px; }

/* ---- system page: verdict, gauges, tiles ---- */
.health { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; background: var(--accent); }
.health-pressure .health-dot { background: var(--amber); }
.health-overloaded .health-dot { background: var(--crit); animation: pulse 1.2s ease-in-out infinite; }
.health strong { font-size: 17px; font-weight: 600; }
.health-pressure strong { color: var(--amber); }
.health-overloaded strong { color: var(--crit); }
.health-reasons { color: var(--muted); }
.health-updated { margin-left: auto; color: var(--muted); font: 400 12px var(--mono); }
.capacity { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.advice { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: help; }
/* the chip's colour follows the page's ok/watch/critical vocabulary, not the verdict: a quota to
   raise is yellow, a disk that is physically filling up is red (PR#43) */
.advice-ok { color: var(--accent); border-color: var(--accent); }
.advice-warn { color: var(--amber); border-color: var(--amber); }
.advice-crit { color: var(--crit); border-color: var(--crit); }
.capacity-basis { color: var(--muted); }
.range-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 10px; font-size: 13px; }
.range-toggle { display: inline-flex; gap: 4px; }
.range-toggle button { appearance: none; border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 9px; background: transparent; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.range-toggle button:hover { color: var(--accent); }
.range-toggle button.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gauge { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
.gauge header { display: flex; justify-content: space-between; align-items: baseline; }
.gauge-label, .tile-title { color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.gauge-value { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gauge-percent { margin-top: 4px; font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gauge-average { color: var(--muted); font: 400 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge-detail, .gauge-peak, .gauge-note { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gauge-bar { position: relative; height: 6px; margin: 10px 0 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
/* RFC 0002 B1: where the physical headroom ends, and the part of the budget behind it that is not backed */
.gauge-bar .bar-unbacked { position: absolute; top: 0; right: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--crit) 0 2px, transparent 2px 5px); opacity: 0.45; }
.gauge-bar .bar-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--crit); }
.gauge-note.note-crit { color: var(--crit); }
.gauge-note.note-warn { color: var(--amber); }
/* the breakdown button sits where CPU and RAM show their average, pale until it is wanted (PR#42) */
.usage-button { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--ghost); cursor: pointer; }
.usage-button:hover, .usage-button:focus-visible { color: var(--accent); }
.gauge-bar .bar-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.level-warn .gauge-bar .bar-fill { background: var(--amber); }
.level-crit .gauge-bar .bar-fill { background: var(--crit); }
.level-warn .gauge-percent { color: var(--amber); }
.level-crit .gauge-percent { color: var(--crit); }
.level-pill { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.level-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.level-warn > header .level-pill, .level-pill.level-warn { color: var(--amber); }
.level-crit > header .level-pill, .level-pill.level-crit { color: var(--crit); }
.spark { display: block; width: 100%; height: 120px; margin: 6px 0 0; border-bottom: 1px solid var(--line); }
.spark-axis { display: flex; justify-content: space-between; margin: 2px 0 6px; font: 400 11px var(--mono); color: var(--muted); }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .spark-line-warn { stroke: var(--amber); }
.spark .spark-line-crit { stroke: var(--crit); }
.spark .spark-max { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .spark-max-warn { stroke: color-mix(in srgb, var(--amber) 70%, transparent); }
.spark .spark-max-crit { stroke: color-mix(in srgb, var(--crit) 70%, transparent); }
.spark .spark-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.spark .spark-warn { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark .spark-crit { stroke: var(--crit); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gauge-peak .peak-warn { color: var(--amber); font-weight: 500; }
.gauge-peak .peak-crit { color: var(--crit); font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.tile-value { margin-top: 2px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-detail { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tile.level-warn .tile-value, .tcell.level-warn .mval { color: var(--amber); }
.tile.level-crit .tile-value, .tcell.level-crit .mval { color: var(--crit); }
.meta { margin: 14px 0 0; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }

/* ---- footer: the blog's ---- */
.site-footer { width: min(1180px, calc(100% - 64px)); margin: 56px auto 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; }
.site-footer a:hover { color: var(--accent); }
.site-footer .version { color: var(--accent); font-style: normal; font-weight: 500; }
.site-footer-links { margin-left: auto; display: inline-flex; gap: 14px; }


/* ---- home page (RFC 0003): the system rail left, the repository mosaic right ---- */
/* The footer sits outside this grid, so it spans both columns at content width (D5). */
/* The two panels share a height: the mosaic keeps its natural one (align-self: start, so a short
   mosaic gets no blank tail) and the rail stretches to whatever the row then is. The slack goes to
   the gauge rows, which is where a bigger graph is worth something. */
.home-wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding-top: 22px; display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.mosaic { align-self: start; }
.home-wrap main { width: auto; margin: 0; min-width: 0; }
.home-wrap main a { font-weight: inherit; }
.home-wrap main a:hover { text-decoration: none; }
#watcher-banner { width: min(1180px, calc(100% - 64px)); margin: 14px auto 0; }

.rail { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rail:hover { border-color: var(--accent-soft-2); }
.rail h2 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.rail h2 em { font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; }
.verdict { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--text); }
.verdict::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.verdict-pressure::before { background: var(--amber); }
.verdict-overloaded::before { background: var(--crit); }
.verdict small { margin-left: auto; font: 400 12px var(--mono); color: var(--muted); }
.glist { flex: 1 1 auto; display: flex; flex-direction: column; padding: 9px 0 10px; }
.grow { flex: 1 1 auto; display: flex; align-items: stretch; gap: 9px; padding: 5px 14px; min-width: 0; color: var(--text); }
.grow .mlab, .grow .mval { align-self: center; }
.grow:hover, .tcell:hover { background: var(--accent-soft); }
/* The graph takes the row's height, whatever the rail was stretched to, between a floor and a
   ceiling: a tall mosaic (many repositories, two card columns) would otherwise blow one sparkline
   up to a few hundred pixels, which is a chart, and the rail is not where charts are read. */
.grow .rail-spark { flex: 1 1 auto; align-self: stretch; min-width: 0; height: auto; min-height: 33px; max-height: 110px; }
.grow .mlab { width: 38px; }
.grow .mval { width: 44px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.tcell { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); }
.tcell .rail-spark { flex: 1 1 auto; min-width: 0; height: 18px; }
.tcell .mlab, .tcell .mval { width: auto; }
.tcell .mlab { font-size: 9.5px; }
.tcell .mval { font-size: 11px; }
.mlab { flex: none; color: var(--muted); font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mval { flex: none; text-align: right; font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.mhint { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--accent); font-weight: 500; font-size: 12.5px; }
.mhint em { margin-left: auto; font: 400 11px var(--sans); font-style: normal; color: var(--muted); }
/* The rail's graphs are meant to invite a click, not to be read; they still show real data. */
.rail-spark { display: block; overflow: visible; }
.rail-spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* a stretch above 80 % is yellow here as it is on the system page; what the rail leaves out are
   the dashed threshold lines, not the levels */
.rail-spark .spark-line-warn { stroke: var(--amber); }
.rail-spark .spark-line-crit { stroke: var(--crit); }
.rail-spark .spark-area { fill: color-mix(in srgb, var(--accent) 11%, transparent); stroke: none; }

/* The mosaic is a panel like the rail — same header strip, same summary row, same footer — so the
   two columns begin at the same height instead of one starting with a heading and the other bare. */
.mosaic { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mosaic h2 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.mosaic h2 em { font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; }
.mosaic-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.mosaic-head small { margin-left: auto; font: 400 12px var(--mono); color: var(--muted); }
/* As many cards per row as fit: a fixed three squeezed them together on a narrower window. */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 14px; }
/* With one served repository (D3) the single card takes the whole width instead of a share of it. */
.home-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.card { display: block; min-width: 0; padding: 13px 14px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.card:hover { border-color: var(--line-2); background: var(--panel); }
.card-run { border-color: var(--accent-soft-2); background: var(--accent-soft); }
.card-bad { border-color: var(--clay); background: var(--clay-soft); }
/* A private repository is a name without a destination (PR#43): not a link, and it says so. */
.card-ghost { background: var(--panel-2); cursor: default; }
.card-ghost:hover { border-color: var(--line); background: var(--panel-2); }
.card-ghost .card-name { color: var(--ghost); font-style: italic; }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-name { font-weight: 600; font-size: 15.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-word { margin-left: auto; font-size: 10px; }
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.card-mid { margin-top: 9px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the gap belongs to the stylesheet, not to the markup: the template separates branch and commit
   with whitespace, werkator.js appends two elements, and only a margin makes the two agree */
.card-mid code { margin-left: 6px; color: var(--muted); font-size: 12px; }
.card-anonymous { color: var(--muted); font-style: italic; }
.card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 7px; font: 400 12.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.card-duration { color: var(--text); font-weight: 500; }
/* The bar strip: height is duration against this repository's own longest build, colour is outcome. */
.pulse { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin: 10px 0 0; }
.pulse-bar { width: 7px; border-radius: 1.5px; background: var(--line); }
.pulse-success { background: var(--accent); }
.pulse-failed, .pulse-error { background: var(--clay); }
.pulse-timed_out { background: var(--amber); }
.pulse-running { background: var(--accent); opacity: 0.45; }
.pulse-pending, .pulse-interrupted, .pulse-none { background: var(--line); }
/* The house gap of 56 px is measured for a page that ends in a table or a paragraph; under the
   home page's bordered panels it reads as a hole. Scoped to this page, so no other one moves. */
.home-wrap + .site-footer { margin-top: 28px; }
.home-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.home-legend i { display: inline-block; width: 6px; height: 14px; border-radius: 1.5px; vertical-align: -2px; margin-right: 6px; }
.home-legend-note { margin-left: auto; }

/* Below this the rail's fixed 288 px costs the mosaic more than it is worth: the cards would be
   down to one per row while the rail sits half empty beside them. So the rail moves on top, full
   width, and lays its rows out across instead of down. */
@media (max-width: 1000px) {
    .home-wrap { grid-template-columns: minmax(0, 1fr); }
    .glist, .tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 12px; }
    .glist { padding: 10px 14px; }
    .grow .rail-spark { height: 33px; min-height: 0; }
}

/* ---- small screens: table rows become cards with their labels ---- */
@media (max-width: 680px) {
    /* the app area must never scroll sideways just because its content is wide (RFC 0001 follow-up) */
    html, body { overflow-x: hidden; }
    main, .site-header-inner, .site-footer { width: calc(100% - 36px); }
    .brand span { display: none; }
    .site-nav { gap: 14px; font-size: 14px; }
    .site-nav a, .site-nav .current { padding: 0; box-shadow: none; }
    /* the wordmark/logo already goes Home, so the nav's own Home entry is redundant here */
    .site-nav .nav-item-home { display: none; }
    /* Repositories and System collapse to their icon; the current view still needs no label at all */
    .site-nav .nav-label { display: none; }
    .repo-name, .repo-select { font-size: 15px; }
    /* the live indicator collapses to its dot so it cannot squeeze the header */
    #live-indicator { padding: 0; border: 0; font-size: 0; gap: 0; }
    #live-indicator::before { width: 10px; height: 10px; }
    /* the tabs scroll sideways on a narrow phone; the 1 px the active underline overhangs stays inside */
    .view-toggle { overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
    .view-toggle a, .view-toggle span { padding: 8px 10px; font-size: 14px; }
    .view-head { margin-top: 16px; }
    .table-wrap { overflow-x: visible; }
    table, thead, tbody, tr, td { display: block; }
    table { min-width: 0; }
    thead { display: none; }
    tbody { display: flex; flex-direction: column; gap: 12px; }
    tbody tr { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    tbody tr[data-status="running"] { border-color: var(--accent-soft-2); }
    tbody tr[data-status="failed"] { border-color: var(--clay); }
    td { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 0; }
    td + td { border-top: 1px solid var(--line); }
    /* a row without a pull request gets no empty PR line on its card */
    td.pull-request-cell.is-empty { display: none; }
    td[data-label]::before { content: attr(data-label); width: 80px; flex-shrink: 0; font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .actions-cell { width: auto; min-width: 0; justify-content: flex-end; background: var(--panel); }
    .action-button { min-width: 44px; height: 36px; }
    .health-updated { margin-left: 0; flex-basis: 100%; }
    .view-meta { margin-left: 0; flex-basis: 100%; }
    /* the home page stacks: the rail over the cards, its rows and tiles two per line */
    .home-wrap, #watcher-banner { width: calc(100% - 36px); grid-template-columns: minmax(0, 1fr); }
    .glist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 13px; }
    .grow { padding: 0; gap: 6px; }
    .grow .mlab { width: 32px; }
    .grow .mval { width: 36px; font-size: 11.5px; }
    .grow .rail-spark { height: 25px; min-height: 0; }
    .tcell .rail-spark { height: 15px; }
    .mhint { padding: 0 13px; height: 44px; font-size: 13px; }
    .home-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .home-legend-note { margin-left: 0; flex-basis: 100%; }
}

/* ---- icon glyphs (24 px stroke paths, black on transparent; the mask takes the alpha) ---- */
.icon-artifact { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l5 5v13H6z'/%3E%3Cpath d='M15 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.icon-log { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.icon-permalink { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.icon-live { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7.5 7.5a6.4 6.4 0 0 0 0 9M16.5 7.5a6.4 6.4 0 0 1 0 9M4.5 4.5a10.6 10.6 0 0 0 0 15M19.5 4.5a10.6 10.6 0 0 1 0 15'/%3E%3C/svg%3E"); }
.icon-copy { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E"); }
.icon-restart { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'/%3E%3C/svg%3E"); }
.icon-usage { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 12V3a9 9 0 0 1 7.8 4.5z'/%3E%3C/svg%3E"); }
.icon-home { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10v9h5v-5h2v5h5v-9'/%3E%3C/svg%3E"); }
.icon-repos { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 9l9 5 9-5-9-5z'/%3E%3Cpath d='M3 14l9 5 9-5'/%3E%3C/svg%3E"); }
.icon-activity { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-7 4 14 3-9 2 4h3'/%3E%3C/svg%3E"); }
.icon-key { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.8 12.2 20 3M17 6l2.5 2.5M14 9l2.5 2.5'/%3E%3C/svg%3E"); }
.icon-arrow-right { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.icon-theme { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.icon-close { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* ---- the Repositories page and the repository line (RFC 0001, second PR) ---- */
.repo-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.repo-summary .sep { color: var(--ghost); }
.repo-summary .warn { color: var(--clay); }
.repo-summary [hidden] { display: none; }
.repo-filters { margin-left: auto; display: inline-flex; gap: 6px; }
.chip { appearance: none; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.chip:hover { color: var(--accent); }
.chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip-clay { color: var(--clay); border-color: var(--clay); }
.chip-clay.is-active { color: var(--clay); border-color: var(--clay); background: var(--clay-soft); }
.repo { cursor: pointer; display: grid; grid-template-columns: 18px minmax(200px, 1.2fr) minmax(260px, 1.6fr) 150px minmax(180px, 1fr); gap: 0 18px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.repo[hidden] { display: none; }
.repo > .status { margin-top: 7px; }
.repo:hover { background: var(--panel); }
.repo-title { font-weight: 600; font-size: 16px; color: var(--text) !important; }
.repo-title:hover { color: var(--accent) !important; text-decoration: none !important; }
.tags { margin-top: 3px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font: 400 11.5px var(--sans); line-height: 17px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--muted); }
.tag-run { color: var(--accent); border-color: var(--accent); }
.tag-bad { color: var(--clay); border-color: var(--clay); }
.repo-newest { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repo-newest-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.repo-newest-line code { color: var(--muted); font-size: 12.5px; }
.repo-status-line { font-size: 13px; color: var(--muted); }
.repo-when { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: right; padding-top: 3px; white-space: nowrap; }
.repo-attention { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--clay); padding-top: 3px; overflow-wrap: anywhere; }
.repo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.repo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text-2); font-weight: 500; }
.repo-chip:hover { color: var(--accent); }
.repo-chip .status::before { width: 7px; height: 7px; }
.repo-chip small { font-size: 12px; font-weight: 400; color: var(--muted); }
.repo-chip-current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.repo-chip-bad { border-color: var(--clay); }
.repo-line-all { margin-left: auto; color: var(--accent); }
@media (max-width: 680px) {
    .repo-filters { margin-left: 0; width: 100%; }
    .repo { grid-template-columns: 14px minmax(0, 1fr); gap: 3px 10px; padding: 12px 0; }
    .repo > * { grid-column: 2; min-width: 0; }
    .repo > .status { grid-column: 1; grid-row: 1; }
    .repo-when { text-align: left; padding-top: 0; }
    .repo-attention { padding-top: 0; }
    .repo-line { flex-wrap: nowrap; overflow-x: auto; }
    .repo-chip, .repo-line-all { white-space: nowrap; }
}

/* ---- build-duration trends (PR#49) ---------------------------------------- */

#duration-trends { margin: 0 0 18px; }
.trend-heading { margin: 0 0 8px; font: 600 15px/1.3 var(--sans); color: var(--text); }
.trend-window { margin-left: 8px; font: 400 12px var(--mono); color: var(--muted); }
.trend-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.trend-card { padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.trend-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trend-build { font: 600 13px var(--mono); color: var(--text); }
.trend-count { font: 400 11px var(--mono); color: var(--ghost); }
.trend-spark { display: block; width: 100%; height: 60px; margin: 6px 0 4px; }
.trend-spark .trend-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend-spark .trend-median { stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.trend-spark .trend-latest-point { fill: var(--accent); }
.trend-figures { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.trend-latest { font: 600 14px var(--mono); color: var(--text); }
.trend-delta { font: 400 12px var(--sans); color: var(--muted); }
/* wraps rather than widening the card: the cards must never push the table sideways on a phone */
.trend-range { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 400 11px var(--mono); color: var(--muted); }
.trend-range b { font-weight: 600; color: var(--text-2); }
/* the one build worth looking at is coloured, the others stay quiet */
.trend-slower .trend-delta { color: var(--amber); font-weight: 600; }
.trend-slower .trend-latest { color: var(--amber); }
.trend-slower .trend-spark .trend-line { stroke: var(--amber); }
.trend-slower .trend-spark .trend-latest-point { fill: var(--amber); }