:root {
  color-scheme: light;
  --bg: #f3f5f3;
  /* Scrollbars: a slim rounded thumb, darker while held. */
  --scroll-thumb: rgba(23, 32, 29, .22);
  --scroll-thumb-hover: rgba(23, 32, 29, .4);
  --surface: #ffffff;
  --text: #17201d;
  --muted: #5f6b66;
  --border: #dde3df;
  --accent: #1f5c4e;
  --accent-text: #ffffff;
  --focus: #c79a2e;
  /* Sidebar: deep green, brass for where you are. */
  --side-bg: #173a33;
  --side-text: #dde8e3;
  --side-muted: #93aca3;
  --side-hover: rgba(255, 255, 255, .07);
  --side-active: rgba(255, 255, 255, .11);
  --side-line: rgba(255, 255, 255, .1);
  --brass: #d6ab45;
  --brass-ink: #2a2008;
  /* Charts (validated with the dataviz palette checks, light and dark). */
  --chart-1: #2f7d69;
  --http-2xx: #2a78d6;
  --http-blocked: #eda100;
  --http-4xx: #4a3aa7;
  --http-5xx: #e34948;
  --http-other: #b4b3ad;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --status-neutral: #b4b3ad;
  --ok: #1f7a4d;
  --ok-bg: #e3f3ea;
  --warn: #8a5a00;
  --warn-bg: #fdf1d8;
  --bad: #b3261e;
  --bad-bg: #fbe4e2;
  --run: #2f5bd3;
  --run-bg: #e5ecfb;
  --idle-bg: #efeeea;
  --log-bg: #161615;
  --log-text: #e6e6e1;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121614;
    --scroll-thumb: rgba(230, 235, 232, .18);
    --scroll-thumb-hover: rgba(230, 235, 232, .34);
    --surface: #1a201d;
    --text: #e6ebe8;
    --muted: #97a39e;
    --border: #2d3531;
    --accent: #7fc4ae;
    --accent-text: #0d1f1a;
    --side-bg: #0e211d;
    --chart-1: #6cc3a8;
    --http-2xx: #3987e5;
    --http-blocked: #c98500;
    --http-4xx: #9085e9;
    --http-5xx: #e66767;
    --http-other: #5c5b57;
    --status-neutral: #5c5b57;
    --side-line: rgba(255, 255, 255, .08);
    --ok: #6fcf9a;
    --ok-bg: #173424;
    --warn: #f0c060;
    --warn-bg: #3a2d10;
    --bad: #f28b82;
    --bad-bg: #3d1a18;
    --run: #8fb0ff;
    --run-bg: #1c2744;
    --idle-bg: #2a2a27;
    --log-bg: #0c0c0b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }

.layout { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

nav.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-line);
}
nav.side a { color: inherit; }
nav.side a:hover { text-decoration: none; }
nav.side .brand { display: block; padding: 22px 22px 18px; line-height: 1.15; }
.brand-name { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.brand-sub { display: block; font-size: 12.5px; color: var(--side-muted); margin-top: 2px; }

.side-scroll { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
nav.side .item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px; color: var(--side-text);
}
nav.side a.item:hover { background: var(--side-hover); }
nav.side a.item.active { background: var(--side-active); font-weight: 600; color: #fff; }
nav.side a.item.active::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brass);
}
nav.side .step {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--side-line); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--side-muted);
}
/* A page within a layer (e.g. Raw items under Extraction): lined up with its parent's text. */
nav.side .item.subitem { padding: 5px 10px 5px 40px; font-size: 13px; color: var(--side-muted); }
nav.side a.item.subitem.active { color: #fff; }
nav.side a.item.active .step { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
nav.side .soon { color: var(--side-muted); }
nav.side .soon em {
  margin-left: auto; font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--side-line);
}

nav.side details.group { margin-top: 14px; }
nav.side summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer; user-select: none;
  padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--side-muted);
}
nav.side summary::-webkit-details-marker { display: none; }
nav.side summary:hover { color: var(--side-text); background: var(--side-hover); }
nav.side summary::after {
  content: ""; width: 6px; height: 6px; margin-right: 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
nav.side details:not([open]) summary::after { transform: rotate(-45deg); }
nav.side details.group[open] > summary { margin-bottom: 2px; }

.side-foot { border-top: 1px solid var(--side-line); padding: 10px 12px 14px; }
nav.side .ext { font-size: 13px; color: var(--side-muted); margin-bottom: 6px; }
nav.side .ext span { margin-left: auto; }
nav.side .me { display: flex; align-items: center; gap: 4px; }
nav.side .me-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
}
nav.side .me-link:hover, nav.side .me-link.active { background: var(--side-hover); }
nav.side .avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brass); color: var(--brass-ink); font-size: 13px; font-weight: 700;
}
nav.side .me-text { min-width: 0; line-height: 1.3; }
nav.side .me-text strong, nav.side .me-text small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
nav.side .me-text small { color: var(--side-muted); font-size: 12px; }
nav.side .signout {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 8px; background: transparent; color: var(--side-muted);
}
nav.side .signout:hover { background: var(--side-hover); color: #fff; }

main { padding: 32px 40px 56px; min-width: 0; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 28px 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; max-width: 90ch; }
/* Where you are: Back, and the trail to this page (current page last, not a link). */
.page-trail { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: -8px 0 14px; }
.page-trail .back { padding: 2px 10px; }
.trail { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.trail li { display: inline-flex; align-items: center; color: var(--muted); }
.trail li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.trail [aria-current] { color: var(--text); font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td time { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.empty { color: var(--muted); padding: 16px; text-align: center; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: var(--idle-bg); color: var(--muted); white-space: nowrap; }
.badge.COMPLETED { background: var(--ok-bg); color: var(--ok); }
.badge.FAILED, .badge.CRASHED { background: var(--bad-bg); color: var(--bad); }
.badge.RUNNING, .badge.PENDING { background: var(--run-bg); color: var(--run); }
.badge.CANCELLING, .badge.CANCELLED, .badge.PAUSED { background: var(--warn-bg); color: var(--warn); }

button, .btn {
  font: inherit; font-weight: 600; border-radius: 7px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger, .btn.danger { color: var(--bad); }
button.small, .btn.small { padding: 2px 10px; font-size: 12px; }
form.inline { display: inline; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=number], input:not([type]) {
  font: inherit; width: 100%; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; word-break: break-all; }

.log {
  background: var(--log-bg); color: var(--log-text); border-radius: 10px; padding: 12px 14px;
  font: 12px/1.55 var(--mono); max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.log .l40, .log .l50 { color: #ff8a80; }
.log .l30 { color: #ffd166; }
.log .ts { color: #7d7d76; }
.log .lg { color: #8fb0ff; }
.log .kv { color: #b8b8b0; }
.log .kv .k { color: #7d7d76; }
.run-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; }
.auth-page { background: var(--side-bg); }
.auth-card { border-top: 4px solid var(--brass); }
.auth-card .brand { margin-bottom: 22px; }
.auth-card .brand-sub { color: var(--muted); }
.auth-card form > div { margin-bottom: 12px; }
.auth-card button { width: 100%; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

.alert { border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; font-size: 13px; }
.alert.error { background: var(--bad-bg); color: var(--bad); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.param-fields { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 14px; }
.param-field input, .param-field select { width: 100%; }
.param-field .hint { margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.param-range { white-space: nowrap; color: var(--muted); }
.param-range::before { content: "("; }
.param-range::after { content: ")"; }
textarea {
  font: 12.5px/1.5 var(--mono); width: 100%; padding: 6px 9px; border-radius: 7px; resize: vertical;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.extra-params { margin: -4px 0 14px; max-width: 520px; }
.extra-params .hint { margin-top: 2px; }
input[type=password], input[type=email] {
  font: inherit; width: 100%; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--text); }
.check input { margin-top: 3px; }
.check small { display: block; color: var(--muted); font-size: 12px; }
.check.disabled { opacity: .55; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px;
  align-items: end; margin-bottom: 16px; }
.filter-actions { padding-bottom: 2px; }
select, input[type=date] {
  font: inherit; width: 100%; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* Crawler Health charts (static/charts.js) */
.charts { display: grid; gap: 12px; }
figure.chart { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px 8px; min-width: 0; }
figure.chart figcaption, .card-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
figure.chart .plot { height: 150px; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .mark { fill: var(--chart-1); }
.chart .line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.chart .version { stroke: var(--focus); stroke-width: 1; }
.chart .hit { fill: transparent; outline: none; }
.chart .hit.link { cursor: pointer; }
.chart .hit.on { fill: var(--text); fill-opacity: .05; }
.chart .hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
.outcome.completed, .outcome-key.completed { fill: var(--status-good); background: var(--status-good); }
.outcome.failed, .outcome-key.failed { fill: var(--status-critical); background: var(--status-critical); }
.outcome.interrupted, .outcome-key.interrupted { fill: var(--status-warning); background: var(--status-warning); }
.outcome.running, .outcome-key.running { fill: var(--status-neutral); background: var(--status-neutral); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }
.chart-legend.small { margin: 0 0 6px; font-size: 12px; gap: 2px 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.chart-legend i.version-key { width: 2px; height: 12px; border-radius: 0; background: var(--focus); }

.chart-tip { position: absolute; z-index: 10; pointer-events: none; min-width: 150px; max-width: 260px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.chart-tip .tip-head { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.chart-tip .tip-head .outcome-key { width: 8px; height: 8px; border-radius: 2px; }
.chart-tip .tip-sub { color: var(--muted); margin-bottom: 6px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 8px; }
.chart-tip .tip-row strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.chart-tip .tip-row span:last-child { color: var(--muted); }
.chart-tip .tip-key { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.chart-tip .tip-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); }

.health-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin: 28px 0 14px; }
.health-head h2 { margin: 0; }
.caption-agg { font-weight: 400; color: var(--muted); }
/* While a new range or grouping loads, the current charts stay, faded. */
#health-body { transition: opacity .15s; }
#health-body.htmx-request { opacity: .45; pointer-events: none; }

.segmented-row { display: flex; gap: 8px 12px; flex-wrap: wrap; }
.segmented { display: inline-flex; margin: 0; padding: 2px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented label { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 4px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Parsing (Layer 2) */
table.plain { border: none; border-radius: 0; }
table.plain th { background: none; }
.card .table-wrap { margin: 0 -16px; }
.card table.plain th:first-child, .card table.plain td:first-child { padding-left: 16px; }
.bad-count { color: var(--bad); font-weight: 700; }
.problem { color: var(--bad); overflow-wrap: anywhere; }
.badge.parse-processed { background: var(--ok-bg); color: var(--ok); }
.badge.parse-failed { background: var(--bad-bg); color: var(--bad); }
.fragment-gist { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; overflow-wrap: anywhere; }
.fragment-gist .hint { margin: 0; font-size: 11.5px; }
dl.kv.wide dd { word-break: normal; overflow-wrap: anywhere; }
.card h3 { font-size: 14px; margin: 16px 0 6px; }
pre.payload { margin: 0; max-height: 640px; overflow: auto; padding: 12px 14px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border); font: 12px/1.5 var(--mono); white-space: pre-wrap;
  overflow-wrap: anywhere; }

/* One line, cut with an ellipsis (the full URL on hover), the host under it. */
.raw-url { min-width: 12rem; max-width: 18rem; }
.raw-url a, .raw-url .hint { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.raw-url .hint { margin: 0; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 10px 0; font-size: 13px; }
.pagination .hint { margin: 0; }
.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.page-links a, .page-links .current, .page-links .gap { min-width: 30px; padding: 3px 8px; border-radius: 6px; text-align: center; }
.page-links a { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.page-links a:hover { border-color: var(--accent); text-decoration: none; }
.page-links .current { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.page-links .gap { color: var(--muted); }
.per-page { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.per-page label { margin: 0; }
.per-page select { width: auto; padding: 3px 6px; }

/* Deleting data */
button.danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
button.danger-solid:disabled { opacity: .45; cursor: not-allowed; }
.purge-form .choice select { display: block; margin-top: 6px; max-width: 100%; font-size: 13px; }
.date-pair { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.date-pair input { width: auto; }
.purge-preview { margin: 4px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--text); }
.purge-preview ul { margin: 0; padding-left: 18px; }
.purge-preview p { margin: 6px 0 0; }
.purge-preview p:first-child { margin-top: 0; }
.purge-form label[for=purge-confirm] { margin-top: 4px; }

/* Popups */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog.modal::backdrop { background: rgba(10, 20, 17, .45); }
.modal-body { padding: 18px 20px 16px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.modal-x { border: none; background: none; font-size: 22px; line-height: 1; padding: 2px 6px; color: var(--muted); }
.modal-x:hover { color: var(--text); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.modal .extra-params { max-width: none; margin-bottom: 0; }
.param-choice { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: none; }
.choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--text); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice strong { display: block; font-weight: 600; }
.choice small { display: block; color: var(--muted); font-size: 12.5px; }
.custom-params { margin: 0; padding: 0; border: none; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head > .actions { flex: none; flex-wrap: nowrap; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* A page section's heading with a link at its end (e.g. Runs, See them all). */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; }

/* Tabs (crawler page) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 18px; }
.tabs [role=tab] { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted);
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tabs [role=tab]:hover { color: var(--text); text-decoration: none; }
.tabs [role=tab][aria-selected=true] { color: var(--text); border-bottom-color: var(--accent); }
.tab-count { font-size: 11.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--idle-bg); color: var(--muted); }
.tab-count:empty { display: none; }

/* Comments */
.comment-form { display: grid; gap: 6px; max-width: 720px; }
.comment-form textarea { font: inherit; font-size: 14px; }
.comment-form-foot { display: flex; justify-content: flex-end; gap: 6px; }
#comments-body > .comment-form { margin-bottom: 18px; }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.thread.replies { margin: 10px 0 0 13px; padding-left: 18px; border-left: 2px solid var(--border); gap: 10px; }
/* Past four levels, replies stop indenting further. */
.replies .replies .replies .replies { margin-left: 0; padding-left: 0; border-left: none; }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comment-head time { color: var(--muted); font-size: 12px; }
.comment-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--idle-bg); color: var(--text); font-size: 11px; font-weight: 700; }
.comment-body { margin: 4px 0 0 34px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; margin: 4px 0 0 34px; font-size: 12.5px; }
.comment-actions form { display: inline; }
/* An open reply box takes the whole row, under Reply and Delete. */
.comment-reply[open] { flex: 1 1 100%; order: 2; }
.comment-reply summary { list-style: none; cursor: pointer; color: var(--muted); font-weight: 600; width: max-content; }
.comment-reply summary::-webkit-details-marker { display: none; }
.comment-reply summary:hover { color: var(--accent); }
.comment-reply[open] summary { display: none; }
.comment-reply .comment-form { margin-top: 2px; }
.link-button { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--muted); }
.link-button.danger:hover { color: var(--bad); }
.comment-deleted { margin: 0; color: var(--muted); font-style: italic; font-size: 13px; }

/* Crawlers list: comment button and its popover of latest comments */
.comment-peek { position: relative; }
.comment-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px;
  color: var(--muted); font-size: 12px; font-weight: 600; }
.comment-btn:hover, .comment-btn:focus-visible { background: var(--idle-bg); color: var(--text); text-decoration: none; }
.comment-btn.has-comments { color: var(--text); }
.comment-popover { display: none; position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); font-size: 13px; }
.comment-peek:hover .comment-popover:not(:empty), .comment-peek:focus-within .comment-popover:not(:empty) { display: block; }
.peek-item + .peek-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.peek-head { display: flex; align-items: baseline; gap: 6px; }
.peek-head time { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.peek-head .hint { margin: 0; }
.peek-item p { margin: 2px 0 0; overflow-wrap: anywhere; }
.peek-empty { margin: 0; color: var(--muted); }
.peek-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; }

/* Crawlers list */
.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 10px; }
.list-toolbar input[type=search] { flex: 1 1 280px; max-width: 460px; font: inherit; padding: 7px 11px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.tag-filter > .hint { margin: 0 4px 0 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; background: var(--surface); color: var(--text); }
.tag-chip .tag-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--idle-bg);
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tag-chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tag-chip[aria-pressed=true] .tag-count { background: rgba(255, 255, 255, .2); color: inherit; }
.list-count { margin: 2px 0 6px; min-height: 1.2em; }
.toggle-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px 5px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--muted); }
.toggle-filter:hover { color: var(--text); }
.toggle-filter input { margin: 0; accent-color: var(--status-critical); }
.toggle-filter:has(input:checked) { color: var(--text); border-color: var(--status-critical);
  box-shadow: inset 0 0 0 1px var(--status-critical); }
.toggle-filter.has-matches .tag-count { background: var(--bad-bg); color: var(--bad); }
.recent-errors { margin-left: 6px; color: var(--bad); font-weight: 600; }
/* A completed run that logged errors: green, with a red cap. */
.run-tick.logged-errors { box-shadow: inset 0 4px 0 var(--status-critical); }

.crawler-list { display: grid; gap: 8px; }
.crawler-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px 10px; }
.crawler-card.status-failing { box-shadow: inset 3px 0 0 var(--status-critical); }
.crawler-card.status-unregistered { box-shadow: inset 3px 0 0 var(--status-warning); }
.crawler-head { display: flex; align-items: flex-start; gap: 10px; }
.status-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--status-neutral); }
.status-dot.healthy { background: var(--status-good); }
.status-dot.failing { background: var(--status-critical); }
.status-dot.running { background: var(--run); }
.status-dot.unregistered { background: var(--status-warning); }
.crawler-title { flex: 1; min-width: 0; }
.crawler-title a { font-size: 15px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.crawler-title p { margin: 0; color: var(--muted); font-size: 13px; }
.crawler-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
a.btn:hover { text-decoration: none; }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 22px; }
.crawler-card .tags { margin: 6px 0 0 19px; gap: 4px; }
.tag { display: inline-flex; align-items: center; border-radius: 6px; background: var(--idle-bg); font-size: 12.5px; }
.tag-name { padding: 1px 8px; color: var(--text); }
.tag-name:hover { text-decoration: none; color: var(--accent); }
.tag form { display: contents; }
.tag-remove { border: none; background: none; padding: 0 7px 0 2px; font-size: 14px; line-height: 1; color: var(--muted); }
.tag-remove:hover { color: var(--bad); }
.tag-add { display: inline-block; }
.tag-add summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--accent); padding: 1px 6px;
  border: 1px dashed var(--border); border-radius: 6px; }
.tag-add summary::-webkit-details-marker { display: none; }
.tag-add[open] summary { display: none; }
.tag-add form { display: inline-flex; gap: 6px; align-items: center; }
.tag-add input { width: 150px; font: inherit; font-size: 12.5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0 19px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 13px; }
.facts dt { color: var(--muted); font-size: 11.5px; }
.facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 22px; }
.facts .hint { margin: 0; font-size: 11.5px; }
.facts .recent-runs { margin-left: auto; }
.recent-runs dd { gap: 2px; }
.run-tick { display: inline-block; width: 7px; height: 14px; border-radius: 2px; background: var(--status-neutral); }
.run-tick.completed { background: var(--status-good); }
.run-tick.failed { background: var(--status-critical); }
.run-tick.skipped { background: var(--status-neutral); opacity: .5; }
.run-tick.interrupted { background: var(--status-warning); }
.run-tick:hover { outline: 2px solid var(--focus); outline-offset: 1px; }

.schedule-lines { list-style: none; margin: 6px 0 0 19px; padding: 0; display: grid; gap: 0; }
.schedule-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px;
  padding: 1px 8px 1px 10px; border-left: 2px solid var(--border); color: var(--text); font-size: 12.5px; }
.schedule-line .hint { margin: 0; }
.schedule-line:hover { text-decoration: none; border-left-color: var(--accent); }
.schedule-line.paused { opacity: .65; }
.schedule-line .sched-label { color: var(--muted); font-size: 12px; }

.table-view { margin-top: 8px; }
.table-view summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; margin-bottom: 8px; }

.code-row { display: grid; grid-template-columns: 3.2em 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
.code-bar { height: 8px; background: var(--idle-bg); border-radius: 4px; overflow: hidden; }
.code-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  nav.side { position: static; height: auto; }
  .side-scroll { overflow: visible; }
  main { padding: 16px; }
}

.nowrap { white-space: nowrap; }

/* Assembly: what an assembler reads, and a field's earlier values under its current one. */
.facts dd.reads { display: flex; flex-wrap: wrap; gap: 4px 12px; }
table tr.older td { padding-top: 2px; padding-bottom: 2px; font-size: 12.5px; }
/* An assembler whose version was bumped since its objects were grouped. */
.version-changed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--warn);
  background: var(--warn-bg); font-size: 13px; }
.version-changed p { margin: 0; }

/* The Objects list's filters for the chosen type's fields. */
.field-filters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin: 4px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border); }
.field-filters legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 12px;
  font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.field-filters .range { grid-column: span 2; }
.range-pair { display: flex; align-items: center; gap: 6px; }
.range-pair input { min-width: 0; flex: 1; }
@media (max-width: 520px) { .field-filters .range { grid-column: 1 / -1; } }

/* A destructive action that opens in place, asking for the name to be typed. */
/* A <summary> styled as a button: the same box as a <button> of its size. */
details.inline-confirm > summary { list-style: none; display: inline-block; white-space: nowrap; }
details.inline-confirm > summary::-webkit-details-marker { display: none; }
details.inline-confirm form { display: grid; gap: 6px; margin-top: 8px; min-width: 16rem; }
details.inline-confirm label { font-size: 12.5px; }

/* Excluded: switched off, not deleted. */
.badge.excluded { background: var(--warn-bg); color: var(--warn); }
.excluded-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--warn);
  background: var(--warn-bg); font-size: 13px; }
.excluded-note p { margin: 0; }
/* The small form an inline confirmation opens (a reason, or a name to type), over what's below. */
details.inline-confirm { position: relative; display: inline-block; }
details.inline-confirm[open] > form { position: absolute; right: 0; z-index: 20; padding: 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: 0 6px 24px rgb(0 0 0 / .15); }

/* Layer 4: a plain list of links, and a connector's name where a card's title link would be. */
ul.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.connector-name { font-size: 15px; font-weight: 650; }

/* Layer 4: a plain list of links, and a connector's name where a card's title link would be. */
ul.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.connector-name { font-size: 15px; font-weight: 650; }

/* Graphs (static/graph.js): a toolbar, the canvas with a side panel over its right edge, a list below. */
.graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.graph-toolbar input[type=search] { width: min(260px, 100%); }
.graph-toolbar select { width: auto; }
.graph-filters { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-left: auto; }
.graph-filter { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; color: var(--text); }
.graph-body { position: relative; }
.graph-canvas { height: clamp(420px, 72vh, 960px); border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); overflow: hidden; }
.graph-panel { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(360px, calc(100% - 16px));
  overflow: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 28px rgb(0 0 0 / .18); font-size: 13.5px; }
.graph-panel-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px;
  line-height: 1; padding: 4px 8px; color: var(--muted); }
.graph-panel-kind { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
.graph-panel-title { margin: 2px 28px 8px 0; font-size: 16px; overflow-wrap: anywhere; }
.graph-panel dl.kv { margin: 8px 0; }
.graph-panel .wrap { overflow-wrap: anywhere; }
.graph-panel h3 { margin: 16px 0 6px; font-size: 13px; }
.graph-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.graph-items li { display: grid; gap: 1px; }
.graph-item-label { overflow-wrap: anywhere; }
.graph-items-pages { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; font-size: 13px; }
.graph-status { min-height: 1.2em; margin: 6px 0 0; }
.graph-table-wrap { margin-top: 14px; }
.graph-table-wrap > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.focus-chip { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px;
  padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.small-link { font-size: 12.5px; }

/* Cleaning: choosing a field to map (wide enough for "Type · field"), and a mapped field's add form. */
.filters .map-field { grid-column: span 2; }
@media (max-width: 520px) { .filters .map-field { grid-column: 1 / -1; } }
.mapping-form { margin-top: 12px; border: 0; padding: 0; box-shadow: none; }

/* Item lists as a table: a column per field of the chosen type. */
.view-toggle { margin: 12px 0 4px; }
.segmented-links { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented-links a { padding: 4px 14px; font-size: 13px; color: var(--muted); text-decoration: none; }
.segmented-links a + a { border-left: 1px solid var(--border); }
.segmented-links a[aria-current] { background: var(--accent); color: var(--accent-text); }
.field-table th.field-col, .field-table td.field-cell { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-table td.field-cell { font-size: 13px; }
.field-table tr > :first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* Scrollbars, in the theme's colours (the page's, and the sidebar's on its green). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.side { --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .3); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 2px solid transparent; background-clip: padding-box; }