/* LFJORD web UI. The world is a transit line diagram: a deploy is a line with
   four stops. Tokens first, then layout, components, the line, the log. */

@font-face { font-family: Barlow; src: url(fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url(fonts/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url(fonts/barlow-semi-condensed-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url(fonts/red-hat-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url(fonts/red-hat-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #fbfbf9;
  --wash: #f0f0ec;
  --rule: #dcddd8;
  --rule-strong: #b4b7b0;
  --field: #84897f; /* input borders: 3:1 on paper */
  --ink: #1b1d21;
  --muted: #595f69;
  --red: #e4002b;
  --red-dark: #b80023;
  --red-wash: #fdecef;
  --green: #007a39;
  --green-wash: #e6f4ec;
  --blue: #0067bd;
  --panel: #1b1d21;
  --panel-rule: #383b42;
  --panel-text: #e6e7e3;
  --panel-muted: #979ca6;
  --panel-own: #9fd0ff;        /* LFJORD's own lines in the log */
  --panel-red: #ff5670;        /* the live dot */
  --panel-hint: rgb(255 86 112 / 0.16); /* build output that names an error */
  --panel-error: #4a1420;
  --panel-error-text: #ffd5dc;
  --panel-error-muted: #ffa3b3;
  --panel-focus: #8ec5ff;
  --placeholder: #6b717b;
  --ink-hover: #33363d;

  --font: Barlow, system-ui, sans-serif;
  --font-head: "Barlow Semi Condensed", Barlow, system-ui, sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.875rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 2.125rem;

  --gutter: clamp(1rem, 3vw, 2.5rem);
  --bar: 3.5rem;
  --section: 2.75rem;
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tone: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-strong) var(--paper); }
body {
  margin: 0;
  font: 400 var(--step-0)/1.5 var(--font);
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--ink); color: var(--paper); }
h1, h2, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
code { font: 500 0.92em var(--font-mono); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
a:focus-visible { border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 20; }
.skip:focus { left: 0; }

/* ---- Top bar: the line's own colour ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: var(--bar);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--gutter);
  background: var(--red); color: #fff;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 700 1.375rem/1 var(--font-head); letter-spacing: 0.08em; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 1.4rem; height: 1.4rem; flex: none; }
.brand-badge {
  font: 600 0.6875rem/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.14);
}
.topnav { display: flex; gap: 1.5rem; align-self: stretch; }
.topnav a { display: flex; align-items: center; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.topnav a:hover { border-bottom-color: rgb(255 255 255 / 0.55); }
.topnav a[aria-current] { font-weight: 600; border-bottom-color: #fff; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 1rem; min-width: 0; }
.topbar-user { font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-link { font-weight: 500; }
.topbar-btn {
  font: 600 var(--step-0) var(--font); color: #fff; background: transparent;
  border: 1.5px solid #fff; border-radius: var(--radius); padding: 0.3rem 0.75rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.topbar-btn:hover { background: #fff; color: var(--red-dark); }
.topbar :focus-visible { outline-color: #fff; }

/* ---- Pages ---- */
.page { max-width: 76rem; margin: 0 auto; padding: 2rem var(--gutter) 4rem; }
.page-narrow { max-width: 46rem; }
/* Project tabs without the log: same left edge as the Deployments tab. */
.page-left { max-width: none; }
.page-left > * { max-width: 46rem; }
.page-auth { max-width: 26rem; padding-top: clamp(2rem, 8vh, 5rem); }
.page-auth h1 { margin-bottom: 1.25rem; }
.page-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 34rem); gap: 2.5rem; align-items: start; }
.split-main { min-width: 0; max-width: 54rem; width: 100%; }

h1 { font: 700 var(--step-3)/1.1 var(--font-head); letter-spacing: 0.005em; text-wrap: balance; }
h2 { font: 700 var(--step--1)/1.3 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
h2 .h-detail { font: 400 var(--step--1) var(--font); letter-spacing: 0; text-transform: none; margin-left: 0.5rem; }
section + section, .summary + section, .repo + section { margin-top: 2.75rem; }
.band + .band { margin-top: 0; }
.lead { max-width: 60ch; margin-bottom: 1.25rem; }
.hint { font-size: var(--step--1); color: var(--muted); max-width: 62ch; margin-top: 0.375rem; text-wrap: pretty; }

.page-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head { margin-bottom: 1.5rem; }
.project-prod { margin-top: 0.25rem; font-size: var(--step--1); color: var(--muted); }
.project-prod code { color: var(--ink); }
.back { display: inline-block; font-size: var(--step--1); color: var(--muted); margin-bottom: 0.375rem; }
.tabs { display: flex; gap: 1.5rem; margin-top: 1rem; border-bottom: 1px solid var(--rule); }
.tabs a { padding: 0.5rem 0; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.tabs a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--red); }

.summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; font-size: var(--step-1); }
.summary .state { font-size: var(--step-1); }
.summary-text { color: var(--ink); }
.repo { color: var(--muted); font-size: var(--step--1); margin-top: 0.25rem; overflow-wrap: anywhere; }
.out { font-weight: 600; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.875rem; }
.out.mono { font-weight: 500; }
.icon { width: 0.8em; height: 0.8em; margin-left: 0.25em; }
.tag { font: 400 0.8125rem var(--font); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.05rem 0.375rem; margin-left: 0.375rem; }
.tag-preview { border-color: var(--blue); color: var(--blue); }

/* ---- State: a mark and a word. The mark's shape repeats what the word says. ---- */
.tone-run { --tone: var(--red); }
.tone-live { --tone: var(--green); }
.tone-preview { --tone: var(--blue); }
.tone-fail { --tone: var(--ink); }
.tone-idle { --tone: var(--muted); }
.tone-unreached { --tone: var(--rule-strong); }
.state { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--tone); white-space: nowrap; }
/* The darker red keeps the word readable on a selected row. */
.state.tone-run { color: var(--red-dark); }
.state-mark { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--tone); flex: none; }
.tone-run .state-mark { background: var(--paper); border: 3px solid var(--tone); }
.tone-fail .state-mark { border-radius: 2px; }
.tone-idle .state-mark { background: transparent; border: 2px solid var(--tone); }
.tone-unreached .state-mark { background: var(--paper); border: 3px solid var(--tone); }
/* The not-reached ring is pale, so the word stays in the readable grey. */
.state.tone-unreached { color: var(--muted); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 var(--step-0)/1.2 var(--font); text-decoration: none; white-space: nowrap;
  padding: 0.5625rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--wash); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-quiet { border-color: transparent; padding: 0.25rem 0.5rem; font-weight: 400; text-decoration: underline; text-underline-offset: 0.18em; }
.btn-danger { border-color: var(--red-dark); color: var(--red-dark); }
.btn-danger:hover { background: var(--red-dark); color: #fff; }
.btn-lg { font-size: var(--step-1); padding: 0.75rem 1.375rem; }
.btn-sm { padding: 0.3rem 0.6875rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--paper); color: inherit; }
.btn-primary:disabled:hover { background: var(--ink); color: var(--paper); }
.btn-danger:disabled:hover { color: var(--red-dark); }

/* ---- Forms ---- */
.form { display: grid; gap: 1.125rem; }
.form > .btn:not(.btn-block) { justify-self: start; }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.field { display: grid; gap: 0.3rem; min-width: 12rem; }
.field-grow { flex: 1; }
label { font-weight: 600; }
input {
  font: 400 var(--step-0)/1.3 var(--font); color: var(--ink); background: #fff;
  border: 1.5px solid var(--field); border-radius: var(--radius); padding: 0.5625rem 0.75rem; width: 100%;
  caret-color: var(--red);
}
input::placeholder { color: var(--placeholder); }
input:hover { border-color: var(--muted); }
input:focus-visible { outline-offset: 0; border-color: var(--blue); }
input[spellcheck="false"], input[type="url"] { font-family: var(--font-mono); font-size: 0.875rem; }
.field select {
  font: 400 var(--step-0)/1.3 var(--font); color: var(--ink); background: #fff;
  border: 1.5px solid var(--field); border-radius: var(--radius); padding: 0.5625rem 0.75rem; width: 100%;
}
.field select:hover { border-color: var(--muted); }
.field select:focus-visible { outline-offset: 0; border-color: var(--blue); }
input[type="file"] { padding: 0.4375rem 0.5rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: 600 var(--step--1)/1.2 var(--font); padding: 0.375rem 0.75rem; margin-right: 0.75rem;
  border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; transition: background-color 0.15s;
}
input[type="file"]::file-selector-button:hover { background: var(--wash); }
.upload-section { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.upload-section .hint { margin-bottom: 1rem; }
.after-form { margin-top: 1.25rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.25rem; font-size: var(--step--1); }

.alert { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 0.75rem 1rem; max-width: 70ch; overflow-wrap: anywhere; }
.alert-error { border-color: var(--red-dark); background: var(--red-wash); }
.alert-success { border-color: var(--green); background: var(--green-wash); }
.form-row + .alert, .hint + .alert, .line + .alert, .branches + .alert, p + .alert { margin-top: 1rem; }
.alert + .form, .page-head + .alert { margin-bottom: 1rem; }

.danger { border-top: 1px solid var(--rule); padding-top: 2rem; margin-top: 4.5rem !important; }
.danger h2 { color: var(--red-dark); }
.danger p { max-width: 60ch; margin-bottom: 1rem; }

.facts { display: grid; gap: 0.625rem; margin-bottom: 1.25rem; }
.facts div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { overflow-wrap: anywhere; }

.empty { border: 1.5px dashed var(--rule-strong); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.empty h2 { font: 700 var(--step-2)/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
.empty p { max-width: 62ch; margin: 0.5rem 0 1.5rem; }
.empty .line { margin-bottom: 2rem; }

/* ---- Tables: hairline rules, no boxes ---- */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.75rem 1rem 0.75rem 0; border-top: 1px solid var(--rule); vertical-align: middle; font-weight: 400; }
.table thead th { border-top: 0; padding-top: 0; padding-bottom: 0.5rem; font: 400 var(--step--1) var(--font); color: var(--muted); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.table tbody th { font-weight: 600; }
.table small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.table-projects tbody th small { overflow-wrap: anywhere; }
.table .when, .table time { color: var(--muted); white-space: nowrap; }
.cell-end { text-align: right !important; padding-right: 0 !important; }
.masked { color: var(--muted); }
.row-link { text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.table tbody tr { position: relative; }
.table-projects .row-link::after, .table-deploys .row-link::after { content: ""; position: absolute; inset: 0; }
.table-projects td a.out, .table-deploys td a { position: relative; z-index: 1; }
.table-projects tbody tr:hover, .table-deploys tbody tr:hover { background: var(--wash); }
.table-projects th:first-child, .table-projects td:first-child, .table-deploys td:first-child { padding-left: 0.5rem; }
.table-projects tbody th { font-size: var(--step-1); }
.table-projects tbody th, .table-projects tbody td { vertical-align: top; }
.table-projects .proj-meta { margin-top: 0.2rem; }
.table-deploys tr.is-selected { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--ink); }
.table-deploys th, .table-deploys td { padding-right: 0.75rem; }
.table-deploys tbody th .row-link { white-space: nowrap; }
.table-deploys td:nth-child(5) { white-space: nowrap; }
.table-deploys .cell-end { max-width: 9rem; }
.table-deploys .cell-end .btn-quiet { white-space: normal; text-align: right; }
.table-deploys small code, .h-detail code, .approval-hold code { white-space: nowrap; }
.table-deploys td .btn { position: relative; z-index: 1; }
.table-projects .mini { margin-right: 0.625rem; }

/* Small blue preview branch lines under a project row */
.mini-branches { position: relative; margin: 0.375rem 0 0 0.25rem; padding: 0; list-style: none; }
.mini-branches li { position: relative; padding: 0.25rem 0 0 2.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font-size: var(--step-0); font-weight: 400; color: var(--blue); }
.mini-branches li::before {
  content: ""; position: absolute; left: 0; top: -0.125rem; width: 1.25rem; height: 1rem;
  border: solid var(--blue); border-width: 0 0 2.5px 2.5px; border-bottom-left-radius: 0.625rem;
}
.mini-branches li + li::before { top: -0.875rem; height: 1.75rem; }
.mini-branches .mini-branch-mark {
  position: absolute; left: 1.125rem; top: 0.5625rem;
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--blue);
}
.mini-branches a.out { position: relative; z-index: 1; color: var(--blue); }
.mini-branches .mini-branch-note { font-size: var(--step--1); font-weight: 400; color: var(--muted); }

/* ---- Approvals: a deploy held before Fetch code ---- */
.approval-hold { margin-top: 1.5rem; margin-bottom: var(--section); }
.approval-hold p { max-width: 62ch; color: var(--ink); }
.approval-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }

/* ---- The line, small: four stops in a table row ---- */
.mini { display: inline-flex; align-items: center; color: var(--tone); vertical-align: middle; }
.mini.is-held { position: relative; padding-left: 0.6875rem; }
.mini.is-held::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2.5px; height: 0.75rem;
  margin-top: -0.375rem; background: var(--muted); border-radius: 1px;
}
.mini i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: currentColor; border: 2.5px solid currentColor; flex: none; }
.mini.is-held i:first-child { position: relative; }
.mini.is-held i:first-child::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 0.375rem; height: 2.5px;
  margin: -1.25px 2.5px 0 0; background: var(--rule-strong);
}
.mini i + i { margin-left: 1.125rem; position: relative; }
.mini i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.125rem; height: 2.5px; margin: -1.25px 2.5px 0 0; background: currentColor; }
.mini i.is-running { background: var(--paper); }
.mini i.is-waiting { background: var(--paper); border-color: var(--rule-strong); }
.mini i.is-waiting::before { background: var(--rule-strong); }
.mini i.is-failed { border-radius: 2px; }

/* ---- The line, large: a deploy with its four stops ---- */
.line { --w: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 5.5rem; padding-top: 0.5rem; }
.line.is-held { grid-template-columns: minmax(7.5rem, 0.85fr) repeat(3, minmax(0, 1fr)) 5.5rem; }
.stop-held { position: relative; padding-top: 2.5rem; padding-right: 1rem; display: grid; align-content: start; }
.stop-held::before {
  content: ""; position: absolute; left: 0.25rem; right: -0.75rem; top: calc(0.875rem - var(--w) / 2); height: var(--w);
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 16px);
}
.held-bar {
  position: absolute; left: 0; top: 0; width: 4px; height: 1.75rem;
  background: var(--muted); border-radius: 1px; z-index: 1;
}
.stop { position: relative; padding-top: 2.5rem; padding-right: 0.75rem; display: grid; align-content: start; }
.stop::before { /* the track from this stop to the next */
  content: ""; position: absolute; left: 0.75rem; right: -0.75rem; top: calc(0.875rem - var(--w) / 2); height: var(--w);
  background: var(--tone); transition: background-color 0.4s var(--ease);
}
.stop:last-child::before { display: none; }
.stop-mark {
  position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--paper); border: 5px solid var(--ink); z-index: 1;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s;
}
.stop-label { font: 700 var(--step-1)/1.2 var(--font-head); }
.stop-note { font-size: var(--step--1); color: var(--muted); }
.stop.is-running::before, .stop.is-waiting::before, .stop.is-failed::before {
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 16px);
}
.stop.is-running::before {
  background: repeating-linear-gradient(90deg, var(--tone) 0 4px, transparent 4px 16px);
  animation: travel 0.9s linear infinite;
}
@keyframes travel { to { background-position-x: 16px; } }
.stop.is-running .stop-mark { border-color: var(--tone); border-width: 7px; transform: scale(1.14); }
.stop.is-waiting .stop-mark { border-color: var(--rule-strong); }
.stop.is-waiting .stop-label { color: var(--muted); }
.stop.is-failed .stop-mark { border-radius: 2px; background: var(--ink); }
.stop-label a { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.line-short { grid-template-columns: minmax(0, 12rem) 5.5rem; margin-bottom: 2rem; }

/* Previews leave the main line at the Detect stop as branch lines. The list sits
   inside that stop: the blue line starts behind the stop's mark, and the stop's
   label moves aside for it. Small type at weight 500 and up is kept at 15px or
   larger, because Barlow's i loses its dot below that. */
.stop:has(.branches) { padding-left: 1.625rem; clip-path: inset(0 -100vw -100vh 0); }
.branches { --tone: var(--blue); position: relative; margin: 0.5rem 0 0 calc(0.875rem - 3px - 1.625rem); width: max-content; }
.branches::before { /* the branch going down from the stop */
  content: ""; position: absolute; left: 0; bottom: calc(100% - 0.75rem); height: 40rem; width: 6px; background: var(--blue);
}
.branches li { position: relative; padding: 0.875rem 0 0 5.25rem; min-height: 3.25rem; display: flex; align-items: baseline; gap: 0 0.625rem; color: var(--blue); white-space: nowrap; }
.branches li::before {
  content: ""; position: absolute; left: 0; top: -0.375rem; width: 3.5rem; height: 2rem;
  border: solid var(--blue); border-width: 0 0 6px 6px; border-bottom-left-radius: 1.5rem;
}
.branches li + li::before { top: -1.75rem; height: 3.375rem; }
.branches .stop-mark { left: 3.25rem; top: 0.9375rem; width: 1.125rem; height: 1.125rem; border: 4px solid var(--blue); }
.branches .stop-note { color: var(--muted); }

@media (max-width: 40rem) {
  .line, .line-short, .line.is-held { grid-template-columns: 1fr; padding-top: 0; }
  .stop-held { padding: 0 0 1.5rem 2.75rem; min-height: 3.5rem; }
  .stop-held::before {
    left: calc(0.875rem - var(--w) / 2); right: auto; top: 0.25rem; bottom: -0.75rem; width: var(--w); height: auto;
    background: repeating-linear-gradient(180deg, var(--rule-strong) 0 4px, transparent 4px 16px);
  }
  .held-bar { left: 0; top: 0; width: 1.75rem; height: 4px; }
  .stop { padding: 0 0 1.5rem 2.75rem; min-height: 3.5rem; }
  .stop::before { left: calc(0.875rem - var(--w) / 2); right: auto; top: 0.75rem; bottom: -0.75rem; width: var(--w); height: auto; }
  .stop.is-running::before, .stop.is-waiting::before, .stop.is-failed::before {
    background: repeating-linear-gradient(180deg, var(--rule-strong) 0 4px, transparent 4px 16px); animation: none;
  }
  .stop.is-running::before { background: repeating-linear-gradient(180deg, var(--tone) 0 4px, transparent 4px 16px); }
  .stop:last-child { padding-bottom: 0; min-height: 0; }
  /* The line runs down, so a branch leaves it to the right, between Detect and Build. */
  .stop:has(.branches) { padding-left: 2.75rem; clip-path: none; }
  .branches { margin: 0.25rem 0 0 calc(0.875rem - 3px - 2.75rem); width: auto; }
  .branches::before { display: none; }
  .branches li { padding-left: 4.5rem; white-space: normal; flex-wrap: wrap; }
  .branches li::before { width: 2.75rem; }
  .branches .stop-mark { left: 2.5rem; }
}

/* ---- The log: the one dark panel ---- */
.logpanel {
  position: sticky; top: calc(var(--bar) + 1.5rem); height: calc(100vh - var(--bar) - 3rem); min-height: 22rem;
  display: flex; flex-direction: column; background: var(--panel); color: var(--panel-text); border-radius: var(--radius); overflow: hidden;
}
.log-head { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.5rem 0 1.125rem; border-bottom: 1px solid var(--panel-rule); min-height: 2.875rem; }
.log-tabs { display: flex; gap: 1.25rem; align-self: stretch; }
.log-tabs button, .log-btn { font: 700 var(--step--1) var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 0; color: var(--panel-muted); cursor: pointer; }
.log-tabs button { border-bottom: 3px solid transparent; border-top: 3px solid transparent; padding: 0; }
.log-tabs button:hover { color: var(--panel-text); }
.log-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--red); }
.log-status { margin-left: auto; font-size: var(--step--1); color: var(--panel-muted); white-space: nowrap; }
.log-status.is-live::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--panel-red); margin-right: 0.4rem; }
.log-btn { padding: 0.375rem 0.5rem; border-radius: var(--radius); letter-spacing: 0.06em; }
.log-btn:hover { color: #fff; background: var(--panel-rule); }
.log-btn[aria-pressed="true"] { color: #fff; }
.logpanel :focus-visible { outline-color: var(--panel-focus); }
.log-body { flex: 1; overflow: auto; padding: 0.75rem 0 1.5rem; scrollbar-color: #555a63 var(--panel); overscroll-behavior: contain; }
.log-lines { font: 400 0.8125rem/1.65 var(--font-mono); }
.log-lines li { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.75rem; padding: 0 1.125rem; }
.log-lines time { color: var(--panel-muted); user-select: none; }
.log-lines span { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-lines li.is-step { display: flex; align-items: center; gap: 0.75rem; margin: 0.875rem 0 0.375rem; font: 700 var(--step--1) var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.log-lines li.is-step:first-child { margin-top: 0.25rem; }
.log-lines li.is-step::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 3px solid #fff; flex: none; }
.log-lines li.is-step::after { content: ""; flex: 1; height: 1px; background: var(--panel-rule); }
.log-lines li.is-error { background: var(--panel-error); color: var(--panel-error-text); padding-top: 0.25rem; padding-bottom: 0.25rem; margin-top: 0.375rem; }
.log-lines li.is-error time { color: var(--panel-error-muted); }
/* Lines of the build output that name an error. */
.log-lines li.is-hint { color: #fff; background: var(--panel-hint); }
.log-lines li.is-hint time { color: var(--panel-error-muted); }
.log-lines li.is-own span { color: var(--panel-own); }
.log-empty { padding: 0.5rem 1.125rem; color: var(--panel-muted); font-size: var(--step--1); max-width: 40ch; }
.log-lines:not(:empty) + .log-empty { display: none; }
.logpanel ::selection { background: #fff; color: var(--panel); }

@media (max-width: 62rem) {
  .page-split { grid-template-columns: minmax(0, 1fr); }
  .split-main { max-width: none; }
  .logpanel { position: static; height: 28rem; }
}

/* ---- Landing ---- */
.hero { max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1; max-width: 15ch; }
.hero-lead { font-size: var(--step-1); max-width: 58ch; margin: 1.25rem 0 1.75rem; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-line { margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: 58rem; }
.hero-line figcaption { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); max-width: 62ch; }
.hero-line figcaption .btn-quiet { font-size: inherit; color: var(--ink); padding: 0 0.25rem; }
.branch-name { font-weight: 600; }
/* The example deploy plays once: the stops are reached one after the other, the
   line turns green, then the preview branch is drawn out from Detect. The script
   only swaps the state classes; without it the finished deploy is shown. */
[data-demo] .branches { clip-path: inset(-41rem -1rem -1rem 0); transition: clip-path 0.9s var(--ease); }
[data-demo] .branches.is-undrawn { clip-path: inset(-41rem 100% -1rem 0); transition: none; }
[data-demo].is-reset .stop::before, [data-demo].is-reset .stop-mark { transition: none; }
.band { background: var(--wash); border-top: 1px solid var(--rule); }
.band-plain { background: var(--paper); }
.band-in { max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 2.5rem; }
.facts-grid h2 { font: 700 var(--step-2)/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0.5rem; text-wrap: balance; }
.facts-grid p { text-wrap: pretty; }
.band-title { font: 700 var(--step-3)/1.1 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 1.5rem; }
.table-pricing { max-width: 44rem; margin-bottom: 1.5rem; }
.table-pricing thead th { font: 700 var(--step-2) var(--font-head); color: var(--ink); }
.table-pricing thead small { font-family: var(--font); }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--muted); text-wrap: pretty; }
.footer span { font: 400 var(--step--1) var(--font); }

/* Narrow screens: a table row becomes a small block instead of squeezed columns. */
@media (max-width: 40rem) {
  #overview { display: flex; flex-direction: column; }
  #overview > .summary { order: -2; }
  #overview > .approval-hold { order: -1; margin-top: 1rem; margin-bottom: 1rem; }
  .table-projects thead, .table-deploys thead, .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-projects, .table-projects tbody, .table-deploys, .table-deploys tbody,
  .table-stack, .table-stack tbody { display: block; }
  .table-projects tr, .table-deploys tr, .table-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 1rem; align-items: center; padding: 0.875rem 0.5rem; border-top: 1px solid var(--rule); }
  .table-projects tbody, .table-deploys tbody, .table-stack tbody { border-bottom: 1px solid var(--rule); }
  .table-projects tr > *, .table-deploys tr > *, .table-stack tr > * { border: 0 !important; padding: 0 !important; }
  /* Settings and account tables stack in one column: a long value wraps and the
     row actions get a line of their own. */
  .table-stack tr { grid-template-columns: minmax(0, 1fr); }
  .table-stack td, .table-stack th { overflow-wrap: anywhere; }
  .table-stack a.out { white-space: normal; }
  /* The DNS table loses its column heads when it stacks, so each value keeps
     its label. */
  .table-dns td[data-label]::before { content: attr(data-label); display: block; font-size: var(--step--1); color: var(--muted); }
  .table-projects tr > :nth-child(2) { align-self: start; text-align: right; }
  .table-projects tr > :nth-child(3), .table-projects tr > :nth-child(4) { grid-column: 1 / -1; }
  .table-projects td a.out { white-space: normal; overflow-wrap: anywhere; }
  .table-deploys tr > :nth-child(1) { order: 3; }
  .table-deploys tr > :nth-child(2) { order: 1; }
  .table-deploys tr > :nth-child(3) { order: 2; }
  .table-deploys tr > :nth-child(4) { order: 4; text-align: right; }
  .table-deploys tr > :nth-child(5) { display: none; }
  .table-deploys tr > :nth-child(6) { order: 5; grid-column: 1 / -1; text-align: right; }
  .table-deploys .cell-end { max-width: none; }
  .table-deploys tbody th small { display: inline; margin-left: 0.5rem; }
}

@media (max-width: 34rem) {
  .topbar { position: relative; height: auto; flex-wrap: wrap; gap: 0.25rem 1rem; padding-top: 0.75rem; padding-bottom: 0.25rem; }
  .topbar a { white-space: nowrap; }
  .brand-badge { display: none; }
  .topnav { order: 3; flex-basis: 100%; gap: 1.25rem; overflow-x: auto; max-width: 100%; }
  .topnav a { padding: 0.5rem 0; white-space: nowrap; }
  .topbar-user { display: none; }
  .topbar-end button.topbar-btn { border: 0; padding: 0.3rem 0.25rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
  .topbar-end button.topbar-btn:hover { background: transparent; color: #fff; }
  .facts div { grid-template-columns: 1fr; gap: 0.125rem; }
  .table th, .table td { padding-right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.quota-line { margin-top: 1rem; }

/* ---- Stats tab & SVG charts ---- */
.stats-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.stats-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; }
.stats-range { display: inline-flex; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.stats-range a { padding: 0.375rem 0.75rem; font-size: var(--step--1); font-weight: 500; text-decoration: none; color: var(--muted); }
.stats-range a + a { border-left: 1px solid var(--rule-strong); }
.stats-range a:hover { color: var(--ink); background: var(--wash); }
.stats-range a[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.stats-app-form { display: flex; align-items: center; gap: 0.5rem; }
.stats-app-form select {
  font: 400 var(--step--1)/1.3 var(--font); color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--field); border-radius: var(--radius); padding: 0.4375rem 0.625rem;
}
.stats-cost { margin-bottom: 1.5rem; color: var(--muted); }
.stats-section { margin-top: 2rem; }
.chart-wrap { overflow-x: auto; }
.chart { display: block; width: 100%; max-width: 44rem; height: auto; }
.chart-axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart-label { font: 400 10px var(--font-mono); fill: var(--muted); }
.chart-bar { fill: var(--blue); }
.chart-bar.bar-ok { fill: var(--blue); }
.chart-bar.bar-warn { fill: #b45309; }
.chart-bar.bar-err { fill: var(--red); }
.chart-bar.bar-latency { fill: var(--ink); }
.chart-bar.bar-awake { fill: var(--green); }
.stats-details { margin-top: 0.625rem; }
.stats-details summary { cursor: pointer; font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.stats-details summary:hover { color: var(--ink); }
.stats-details .table-wrap { margin-top: 0.5rem; }

.chart-caption { margin-top: 0.375rem; font-size: var(--step--1); color: var(--muted); }
.swatch { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-right: 0.25rem; vertical-align: baseline; }
.swatch + .swatch, .chart-caption .swatch:not(:first-child) { margin-left: 0.5rem; }
.swatch-ok { background: var(--blue); }
.swatch-warn { background: #b45309; }
.swatch-err { background: var(--red); }

/* Database section in Settings */
.db-size { margin: 1rem 0 1.25rem; max-width: 32rem; }
.db-size-head { display: flex; justify-content: space-between; font-size: var(--step--1); margin-bottom: 0.35rem; }
.db-meter { width: 100%; height: 0.65rem; appearance: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--wash); overflow: hidden; }
.db-meter::-webkit-progress-bar { background: var(--wash); }
.db-meter::-webkit-progress-value { background: var(--ink); }
.db-meter::-moz-progress-bar { background: var(--ink); }
.db-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.db-subform { margin-top: 1.5rem; }
.db-danger { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.db-danger h3 { color: var(--red-dark); margin-bottom: 0.25rem; }
.db-dialog { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; max-width: 28rem; width: calc(100% - 2rem); margin: auto; background: var(--paper); color: var(--ink); }
.db-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.db-dialog h3 { margin-bottom: 0.5rem; }
.db-dialog p { margin-bottom: 1rem; }
.db-agent-docs { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.db-agent-docs .agent-docs { flex-basis: 100%; }
.db-add-hint { margin-bottom: 0.75rem; }
.overview-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; margin-bottom: var(--section); }
.agent-docs { margin-top: 0.5rem; }
.agent-docs summary { cursor: pointer; font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.agent-docs summary:hover { color: var(--ink); }
.agent-docs pre { margin-top: 0.5rem; padding: 0.75rem; background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; font-size: var(--step--1); white-space: pre-wrap; }

fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { font-weight: 600; margin-bottom: 0.3rem; padding: 0; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; padding: 0; margin: 0; accent-color: var(--ink); cursor: pointer; }
.checkbox-label input[type="checkbox"]:disabled { cursor: not-allowed; }
.db-guide { display: grid; gap: 0.25rem; }

/* First-screen database panel */
.db-panel { margin-top: 2rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.db-panel h2 { font: 700 var(--step-1)/1.2 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 0.5rem; }
.db-panel p { max-width: 62ch; margin: 0.5rem 0 0; }
.db-panel .db-panel-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.db-panel-status { margin: 0 !important; }

/* API keys */
.api-key-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.api-key-line code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#api-key-created { margin-bottom: 1.25rem; }
#api-keys-list + .form-row { margin-top: 1.25rem; }

/* Notifications bell & popover */
.notif-wrap { position: relative; display: flex; align-items: center; }
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1.5px solid rgb(255 255 255 / 0.65); border-radius: var(--radius);
  background: transparent; color: #fff; cursor: pointer;
}
.notif-bell:hover, .notif-bell[aria-expanded="true"] { background: #fff; color: var(--red-dark); border-color: #fff; }
.notif-bell-icon { width: 1.15rem; height: 1.15rem; }
.notif-badge {
  position: absolute; top: -0.35rem; right: -0.35rem;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; background: var(--ink); color: #fff;
  border: 1.5px solid #fff;
  font: 400 0.75rem/1 var(--font); text-align: center;
}
.notif-panel {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 30;
  width: 24rem; max-width: calc(100vw - 2 * var(--gutter));
  max-height: min(32rem, calc(100vh - var(--bar) - 2rem)); overflow-y: auto;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  text-align: left;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
.notif-head h2 { margin: 0; }
.notif-actions { display: flex; align-items: center; gap: 0.5rem; }
.notif-actions .btn-quiet { font-size: var(--step--1); padding: 0.125rem 0.25rem; }
.notif-actions .notif-clear-btn { color: var(--red-dark); }
#notif-alert { margin: 0.75rem 1rem 0; }
.notif-items { margin: 0; padding: 0; }
.notif-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.needs-action { background: var(--wash); }
.notif-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.notif-title { font-weight: 400; }
.notif-item.is-unread .notif-title { font-weight: 600; }
.notif-when-group { display: flex; align-items: baseline; gap: 0.375rem; flex: none; }
.notif-new { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.notif-when { font-size: var(--step--1); color: var(--muted); white-space: nowrap; flex: none; }
.notif-body { margin-top: 0.25rem; font-size: var(--step--1); color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.notif-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; }
.notif-link { display: inline-block; margin-top: 0.35rem; font-size: var(--step--1); font-weight: 400; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.notif-item-actions .notif-link { margin-top: 0; }
.notif-mark-read { font-size: var(--step--1); padding: 0; background: transparent; }
.notif-mark-read:hover { background: transparent; }
.notif-empty { padding: 1.5rem 1rem; text-align: center; }

/* Organizations */
.org-list { margin-bottom: 1.25rem; }
.org-item { border-top: 1px solid var(--rule); }
.org-item:last-child { border-bottom: 1px solid var(--rule); }
.org-summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline;
  gap: 0.25rem 0.75rem; padding: 0.75rem 0; cursor: pointer;
}
/* The open/closed cue. The disclosure state itself stays native to <details>. */
.org-summary::before {
  content: ""; align-self: center; width: 0.375rem; height: 0.375rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s var(--ease);
}
.org-item[open] > .org-summary::before { transform: rotate(45deg); }
.org-summary:hover { background: var(--wash); }
.org-body h3, .org-create h3 { font: 700 var(--step--1)/1.3 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.org-body h3 { margin: var(--section) 0 0.75rem; }
.org-body h3:first-child { margin-top: 0; }
.org-create h3 { margin: 0 0 0.75rem; }
.org-projects { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.org-name { font-weight: 600; }
.org-meta { font-size: var(--step--1); color: var(--muted); }
.org-body { padding: 0.25rem 0 1.25rem; }
.org-create { margin-top: var(--section); }
.org-invite-form { margin-top: var(--section); }
.org-invite-form select {
  font: 400 var(--step-0)/1.3 var(--font); color: var(--ink); background: #fff;
  border: 1.5px solid var(--field); border-radius: var(--radius); padding: 0.5625rem 0.75rem;
}
.org-invite-form select:hover { border-color: var(--muted); }
.org-invite-form select:focus-visible { outline-offset: 0; border-color: var(--blue); }
.org-actions { margin-top: var(--section); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* Keep the hairline and a little space, without the 4.5rem destructive gap. */
.org-actions.danger { margin-top: 0.75rem !important; padding-top: 1.25rem; }
.protection-state { margin-bottom: 0.75rem; }
.protection-off { margin-top: 0.75rem; }
.protection-off .btn-quiet { padding-left: 0; }

@media (max-width: 34rem) {
  .notif-wrap { position: static; }
  .notif-panel {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; max-width: none;
    max-height: calc(100vh - 6rem); border-left: 0; border-right: 0; border-top: 0; border-radius: 0;
  }
}

/* Domains, protection and previews in Settings */
.table-dns { margin-top: 0.5rem; }
.table-dns th, .table-dns td { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.domain-records > td { padding-top: 0; }
.domain-records .hint { margin: 0 0 0.5rem; }