/* Hallmark · genre: modern-minimal · macrostructure: app shell (rail + ledger tables) · design-system: design.md · designed-as-app
 * theme: custom "night ledger" · paper oklch(98.6% 0.004 285) / oklch(15.5% 0.014 285) · accent violet oklch(50% 0.22 292) / oklch(74% 0.15 292)
 * fonts: Geist + Geist Mono (self-hosted, public/fonts) · axes: light+dark / grotesk-sans / cool
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 */
/* Daicho: the one stylesheet (spec 7: no JavaScript, one CSS file). */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- Tokens: light ------------------------------------------------------ */
:root {
  color-scheme: light dark;

  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
  --text-lg: 1rem; --text-xl: 1.375rem; --text-2xl: 2rem;

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem;
  --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem;

  --radius-input: 6px; --radius-card: 8px; --radius-chip: 4px; --radius-pill: 999px;
  --rule-w: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 120ms;
  --rail-w: 15rem;

  --color-paper: oklch(98.6% 0.004 285);
  --color-paper-2: oklch(96.6% 0.006 285);
  --color-paper-3: oklch(93.8% 0.009 285);
  --color-rule: oklch(90% 0.009 285);
  --color-rule-strong: oklch(80% 0.014 285);
  --color-field: oklch(60% 0.02 285);
  --color-ink: oklch(21% 0.022 285);
  --color-ink-2: oklch(36% 0.02 285);
  --color-muted: oklch(48% 0.018 285);
  --color-accent: oklch(50% 0.22 292);
  --color-accent-fill: oklch(50% 0.22 292);
  --color-accent-fill-hover: oklch(44% 0.21 292);
  --color-accent-ink: oklch(98.6% 0.004 285);
  --color-accent-soft: oklch(94% 0.035 292);
  --color-focus: oklch(55% 0.24 292);
  --color-chart: oklch(58% 0.2 292);
  --color-grid: oklch(91% 0.008 285);
  --color-code: oklch(97.4% 0.005 285);

  /* Signals: text on its own soft ground. */
  --color-error: oklch(46% 0.17 25);    --color-error-bg: oklch(94% 0.035 25);
  --color-warn: oklch(45% 0.11 70);     --color-warn-bg: oklch(94.5% 0.055 85);
  --color-info: oklch(45% 0.14 245);    --color-info-bg: oklch(94% 0.03 245);
  --color-ok: oklch(42% 0.11 155);      --color-ok-bg: oklch(94.5% 0.045 155);
  --color-perf: oklch(47% 0.14 50);     --color-perf-bg: oklch(94.5% 0.045 60);
  --color-quiet: oklch(45% 0.015 285);  --color-quiet-bg: oklch(94% 0.008 285);
  --color-fatal: oklch(48% 0.2 25);     --color-fatal-ink: oklch(98.6% 0.004 285);
  --color-chart-error: oklch(58% 0.2 25);
  --color-chart-warn: oklch(72% 0.15 75);
  --color-row-error: oklch(97.6% 0.012 25);
  --color-row-warn: oklch(97.8% 0.02 85);
  --color-danger-fill: oklch(52% 0.2 25);

  /* The rail keeps its night colours in both schemes. */
  --color-rail: oklch(17% 0.022 285);
  --color-rail-rule: oklch(26% 0.022 285);
  --color-rail-ink: oklch(95% 0.006 285);
  --color-rail-ink-2: oklch(76% 0.014 285);
  --color-rail-muted: oklch(62% 0.016 285);
  --color-rail-hover: oklch(22% 0.024 285);
  --color-rail-active: oklch(27% 0.05 292);
  --color-rail-focus: oklch(78% 0.15 292);
  --color-mark: oklch(62% 0.2 292);
  --color-mark-ink: oklch(98.6% 0.004 285);
}

/* ---- Tokens: dark ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(15.5% 0.014 285);
    --color-paper-2: oklch(18.5% 0.016 285);
    --color-paper-3: oklch(22.5% 0.018 285);
    --color-rule: oklch(26% 0.018 285);
    --color-rule-strong: oklch(36% 0.02 285);
    --color-field: oklch(52% 0.02 285);
    --color-ink: oklch(94% 0.008 285);
    --color-ink-2: oklch(80% 0.012 285);
    --color-muted: oklch(67% 0.016 285);
    --color-accent: oklch(76% 0.14 292);
    --color-accent-fill: oklch(56% 0.2 292);
    --color-accent-fill-hover: oklch(62% 0.19 292);
    --color-accent-ink: oklch(98.6% 0.004 285);
    --color-accent-soft: oklch(27% 0.06 292);
    --color-focus: oklch(78% 0.15 292);
    --color-chart: oklch(66% 0.18 292);
    --color-grid: oklch(23% 0.016 285);
    --color-code: oklch(13% 0.014 285);

    --color-error: oklch(78% 0.13 25);    --color-error-bg: oklch(27% 0.07 25);
    --color-warn: oklch(82% 0.12 85);     --color-warn-bg: oklch(28% 0.05 80);
    --color-info: oklch(78% 0.1 245);     --color-info-bg: oklch(27% 0.055 245);
    --color-ok: oklch(78% 0.13 155);      --color-ok-bg: oklch(26% 0.05 155);
    --color-perf: oklch(79% 0.12 55);     --color-perf-bg: oklch(28% 0.055 55);
    --color-quiet: oklch(74% 0.014 285);  --color-quiet-bg: oklch(24% 0.016 285);
    --color-fatal: oklch(58% 0.21 25);    --color-fatal-ink: oklch(98.6% 0.004 285);
    --color-chart-error: oklch(64% 0.2 25);
    --color-chart-warn: oklch(76% 0.14 75);
    --color-row-error: oklch(19% 0.035 25);
    --color-row-warn: oklch(19% 0.028 80);
    --color-danger-fill: oklch(56% 0.2 25);

    --color-rail: oklch(13% 0.014 285);
    --color-rail-rule: oklch(22% 0.018 285);
    --color-rail-hover: oklch(19% 0.018 285);
    --color-rail-active: oklch(25% 0.05 292);
  }
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; min-height: 100dvh;
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5;
  color: var(--color-ink); background: var(--color-paper);
  font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 86rem; margin: 0 auto; padding: var(--space-lg) clamp(var(--space-sm), 3vw, var(--space-xl)) var(--space-2xl); min-width: 0; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }

h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 var(--space-md); }
h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: var(--space-xl) 0 var(--space-xs); }
h3 { font-size: var(--text-md); font-weight: 600; margin: var(--space-lg) 0 var(--space-2xs); }
h4 { font-size: var(--text-xs); font-weight: 500; font-family: var(--font-mono); color: var(--color-muted); margin: var(--space-sm) 0 var(--space-3xs); }
h1 code { font-size: 0.8em; font-weight: 500; color: var(--color-ink-2); }
h2 .muted, h1 .muted { font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 var(--space-xs); max-width: 72ch; }
h1 + p.muted { margin-top: calc(var(--space-sm) * -1); margin-bottom: var(--space-md); }

code, pre, kbd { font-family: var(--font-mono); font-size: var(--text-xs); }
code { color: var(--color-ink-2); overflow-wrap: anywhere; }
pre { margin: 0 0 var(--space-xs); padding: var(--space-xs) var(--space-sm); line-height: 1.65; color: var(--color-ink); background: var(--color-code); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow-x: auto; }
.muted { color: var(--color-muted); font-weight: 400; }
.empty { color: var(--color-muted); padding: var(--space-md); border: var(--rule-w) dashed var(--color-rule-strong); border-radius: var(--radius-card); max-width: none; }
.sep { margin-left: var(--space-sm); }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; word-break: break-word; }

/* ---- Shell: the rail ---------------------------------------------------- */
body:has(> header.top) { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; }
header.top {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-xs);
  background: var(--color-rail); color: var(--color-rail-ink-2); border-right: var(--rule-w) solid var(--color-rail-rule);
  font-size: var(--text-sm);
}
header.top a { color: var(--color-rail-ink-2); white-space: nowrap; }
header.top a:hover { text-decoration: none; }
header.top :focus-visible { outline-color: var(--color-rail-focus); }
header.top .brand { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-2xs); margin-bottom: var(--space-sm); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-rail-ink); }
.mark { flex: none; }
.mark rect { fill: var(--color-mark); }
.mark path { fill: none; stroke: var(--color-mark-ink); stroke-width: 1.75; stroke-linecap: round; }
header.top .project-name, header.top nav a {
  display: block; padding: 0.3rem var(--space-2xs); border-radius: var(--radius-input);
  overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
header.top .project-name { font-weight: 600; color: var(--color-rail-ink); }
header.top nav { display: flex; flex-direction: column; gap: 1px; }
header.top .nav-group { padding: var(--space-sm) var(--space-2xs) var(--space-3xs); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-rail-muted); }
header.top .project-name:hover, header.top nav a:hover { background: var(--color-rail-hover); color: var(--color-rail-ink); }
header.top .project-name:active, header.top nav a:active { background: var(--color-rail-active); }
.in-projects.on-index .nav-projects, .in-projects.on-show .project-name,
.in-issues nav a[href$="/issues"], .in-events nav a[href$="/events"], .in-transactions nav a[href$="/transactions"], .in-queries nav a[href$="/queries"],
.in-profiles nav a[href$="/profiles"], .in-functions nav a[href$="/functions"], .in-logs.on-index nav a[href$="/logs"], .in-logs.on-stats nav a[href$="/logs/stats"],
.in-releases nav a[href$="/releases"], .in-cron_monitors nav a[href$="/monitors"], .in-alert_rules nav a[href$="/alert_rules"], .in-alert_deliveries nav a[href$="/alert_rules"],
.in-projects.on-settings nav a[href$="/settings"], .in-projects.on-update nav a[href$="/settings"] {
  background: var(--color-rail-active); color: var(--color-rail-ink); font-weight: 500;
}
header.top .account { display: flex; align-items: center; gap: var(--space-2xs); margin-top: auto; padding: var(--space-xs) var(--space-2xs) 0; border-top: var(--rule-w) solid var(--color-rail-rule); font-size: var(--text-xs); color: var(--color-rail-muted); white-space: nowrap; }
header.top .account .email { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-rail-ink-2); }
header.top button.logout { height: 1.75rem; padding: 0 var(--space-2xs); font-size: var(--text-xs); color: var(--color-rail-ink-2); background: transparent; border-color: var(--color-rail-rule); }
header.top button.logout:hover { color: var(--color-rail-ink); background: var(--color-rail-hover); border-color: var(--color-rail-muted); }

/* ---- Tables: the ledger ------------------------------------------------- */
table { width: 100%; margin: 0 0 var(--space-xs); border-collapse: separate; border-spacing: 0; border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; font-size: var(--text-sm); }
table.narrow { width: auto; min-width: min(24rem, 100%); }
th, td { text-align: left; padding: 0.5rem var(--space-xs); border-bottom: var(--rule-w) solid var(--color-rule); vertical-align: top; }
tbody tr:last-child > td, tbody tr:last-child > th, table.kv tr:last-child > * { border-bottom: 0; }
thead th { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); background: var(--color-paper-2); white-space: nowrap; }
tbody tr { transition: background-color var(--dur-short) var(--ease-out); }
tbody tr:hover > td { background: var(--color-paper-2); }
td a { color: var(--color-ink); font-weight: 500; }
td a:hover { color: var(--color-accent); }
td[title] { white-space: nowrap; }
td > div.muted { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); }
.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kv { margin-bottom: var(--space-xs); }
table.kv th { width: 14rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); background: var(--color-paper-2); border-right: var(--rule-w) solid var(--color-rule); }
table.kv td { font-family: var(--font-mono); font-size: var(--text-xs); }
table.kv tr:hover > td { background: transparent; }
table.logs td, table.crumbs td { font-family: var(--font-mono); font-size: var(--text-xs); }
td.actions { white-space: nowrap; }
td.actions form + form { margin-left: var(--space-3xs); }

/* ---- Flash -------------------------------------------------------------- */
.notice, .alert { max-width: none; margin: 0 0 var(--space-sm); padding: var(--space-2xs) var(--space-xs); border: var(--rule-w) solid; border-radius: var(--radius-input); font-size: var(--text-sm); }
.notice { color: var(--color-ok); background: var(--color-ok-bg); }
.alert { color: var(--color-error); background: var(--color-error-bg); }
#error_explanation { max-width: 36rem; margin-bottom: var(--space-sm); padding: var(--space-2xs) var(--space-xs); color: var(--color-error); background: var(--color-error-bg); border: var(--rule-w) solid; border-radius: var(--radius-input); font-size: var(--text-sm); }
#error_explanation ul { margin: 0; padding-left: var(--space-sm); }

/* ---- Controls ----------------------------------------------------------- */
button, input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; height: 2rem; padding: 0 var(--space-xs);
  font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-w) solid var(--color-field); border-radius: var(--radius-input);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
button:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
button:active, input[type=submit]:active { transform: translateY(1px); }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }
input[type=submit] { height: 2.25rem; padding: 0 var(--space-sm); color: var(--color-accent-ink); background: var(--color-accent-fill); border-color: var(--color-accent-fill); }
input[type=submit]:hover { background: var(--color-accent-fill-hover); border-color: var(--color-accent-fill-hover); }
button.danger { color: var(--color-error); background: transparent; border-color: var(--color-field); }
button.danger:hover { color: var(--color-fatal-ink); background: var(--color-danger-fill); border-color: var(--color-danger-fill); }
form.button_to { display: inline; }
main > form.button_to { display: block; margin-top: var(--space-md); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  height: 2.25rem; padding: 0 var(--space-2xs); max-width: 100%;
  font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink);
  background: var(--color-paper); border: var(--rule-w) solid var(--color-field); border-radius: var(--radius-input);
  transition: border-color var(--dur-short) var(--ease-out);
}
textarea { height: auto; padding: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; width: 100%; max-width: 32rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--color-focus); border-radius: var(--radius-input); }
input::placeholder { color: var(--color-muted); opacity: 1; }
input[type=checkbox] { width: 1rem; height: 1rem; margin: 0 var(--space-3xs) 0 0; vertical-align: -0.15em; accent-color: var(--color-accent-fill); }
.field { margin-bottom: var(--space-sm); max-width: 36rem; }
.field label { display: block; margin-bottom: var(--space-3xs); font-size: var(--text-sm); font-weight: 500; }
.field input[type=checkbox] + label, .field label:has(input) { display: inline; font-weight: 400; }
.field input + label, .field select + label { margin-top: var(--space-xs); }
.field input[type=text], .field input[type=email], .field input[type=password] { width: 100%; max-width: 24rem; }
.field input[type=number] { width: 8rem; }
.field p.muted { margin: var(--space-3xs) 0 0; font-size: var(--text-xs); }
.field_with_errors input { border-color: var(--color-error); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

form.search { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin-bottom: var(--space-xs); }
form.search input[type=search] { flex: 1 1 14rem; min-width: 10rem; max-width: 28rem; }
form.filter-form select { max-width: 12rem; }

/* ---- Filters and paging ------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3xs); align-items: center; margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.filters > .muted { margin-right: var(--space-3xs); font-size: var(--text-xs); }
.filters a { padding: 0.2rem var(--space-2xs); border-radius: var(--radius-input); color: var(--color-ink-2); white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.filters a:hover { background: var(--color-paper-3); color: var(--color-ink); text-decoration: none; }
.filters a.current { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 500; }
form.filters { gap: var(--space-2xs); }
form.filters label { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
nav.pager { display: flex; gap: var(--space-2xs); justify-content: center; align-items: center; margin: var(--space-md) 0; font-size: var(--text-sm); }
nav.pager a { display: inline-flex; align-items: center; height: 2rem; padding: 0 var(--space-xs); color: var(--color-ink); border: var(--rule-w) solid var(--color-field); border-radius: var(--radius-input); }
nav.pager a:hover { background: var(--color-paper-3); text-decoration: none; }
nav.pager .pager-current { padding: 0 var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

/* ---- Badges (spec 7): events fatal..debug, logs trace..fatal ------------- */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.25rem; padding: 0 0.4rem; border-radius: var(--radius-chip); vertical-align: 0.1em; font: 500 var(--text-2xs)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--color-quiet); background: var(--color-quiet-bg); }
.badge::before { content: ""; flex: none; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-pill); background: currentColor; }
h1 .badge { vertical-align: 0.3em; }
.sev-fatal { color: var(--color-fatal-ink); background: var(--color-fatal); }
.sev-error { color: var(--color-error); background: var(--color-error-bg); }
.sev-warning, .sev-warn { color: var(--color-warn); background: var(--color-warn-bg); }
.sev-info { color: var(--color-info); background: var(--color-info-bg); }
.sev-debug, .sev-trace { color: var(--color-quiet); background: var(--color-quiet-bg); }
.sev-total { padding: 0; color: var(--color-ink); background: transparent; }
.sev-total::before { content: none; }
.sev-other { color: var(--color-accent); background: var(--color-accent-soft); }
tr.sev-error-row > td, tr.sev-fatal-row > td, tr.sev-error-row:hover > td, tr.sev-fatal-row:hover > td { background: var(--color-row-error); }
tr.sev-warn-row > td, tr.sev-warn-row:hover > td { background: var(--color-row-warn); }
.res-resolved, .res-ignored, .res-unresolved { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); white-space: nowrap; }
.res-resolved::before, .res-ignored::before, .res-unresolved::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: currentColor; }
.res-resolved { color: var(--color-ok); }
.res-ignored { color: var(--color-muted); }
.res-unresolved { color: var(--color-warn); }
.tag { display: inline-block; padding: 0 0.4rem; margin: 0 var(--space-3xs) var(--space-3xs) 0; font: 400 var(--text-xs)/1.6 var(--font-mono); color: var(--color-ink-2); background: var(--color-paper-2); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-chip); overflow-wrap: anywhere; }
p.tags { max-width: none; }

/* ---- Facts -------------------------------------------------------------- */
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-md); padding: var(--space-sm); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); }
dl.facts dt { color: var(--color-muted); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.facts dd pre { margin-bottom: var(--space-3xs); }
dl.facts dd a { margin-left: var(--space-3xs); }
dl.facts dd a:first-child { margin-left: 0; }
.issue-head { margin-bottom: var(--space-lg); }
.issue-head h1 { margin-bottom: var(--space-3xs); }
.issue-head h1 + p.muted { margin: 0 0 var(--space-sm); font-family: var(--font-mono); font-size: var(--text-sm); }
.issue-head dl.facts { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 0; padding: 0; overflow-x: auto; margin-bottom: var(--space-sm); }
.issue-head dl.facts dt { padding: var(--space-xs) var(--space-sm) 0; font-size: var(--text-xs); border-left: var(--rule-w) solid var(--color-rule); }
.issue-head dl.facts dd { padding: var(--space-3xs) var(--space-sm) var(--space-xs); font-weight: 500; white-space: nowrap; border-left: var(--rule-w) solid var(--color-rule); }
.issue-head dl.facts dt:first-child, .issue-head dl.facts dd:nth-child(2) { border-left: 0; }

/* ---- Counts and hour bars ----------------------------------------------- */
section.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
section.counts .count { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); border-left: var(--rule-w) solid var(--color-rule); min-width: 0; }
section.counts .count:first-child { border-left: 0; }
section.counts .n { display: block; font: 500 var(--text-2xl)/1.15 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
section.counts .count.muted { grid-column: 1 / -1; padding: var(--space-2xs) var(--space-md); font-size: var(--text-xs); background: var(--color-paper-2); border-left: 0; border-top: var(--rule-w) solid var(--color-rule); }
.bars { display: flex; gap: 3px; align-items: flex-end; padding: var(--space-sm) var(--space-sm) var(--space-2xs); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); }
.bar-col { flex: 1 1 0; min-width: 0; text-align: center; }
.bar-area { position: relative; height: 7rem; background: repeating-linear-gradient(to top, var(--color-grid) 0, var(--color-grid) 1px, transparent 1px, transparent 25%); transition: background-color var(--dur-short) var(--ease-out); }
.bar-col:hover .bar-area { background-color: var(--color-paper-2); }
.bar { position: absolute; bottom: 0; left: 0; right: 0; min-height: 1px; background: var(--color-chart); border-radius: 2px 2px 0 0; }
.bar-error { min-height: 0; background: var(--color-chart-error); }
.bar-missed { background: var(--color-chart-warn); }
.bar-label { margin-top: var(--space-3xs); font: 400 var(--text-2xs)/1.4 var(--font-mono); color: var(--color-muted); white-space: nowrap; }
code.dsn { display: inline-block; max-width: 100%; padding: var(--space-2xs) var(--space-xs); color: var(--color-ink); background: var(--color-code); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-input); word-break: break-all; user-select: all; }

/* ---- Event detail (spec 7.3) -------------------------------------------- */
.exception { margin-bottom: var(--space-sm); }
.ex-head { margin: var(--space-3xs) 0; font-family: var(--font-mono); font-size: var(--text-md); }
.ex-head strong { color: var(--color-error); font-weight: 600; }
pre.ex-value { white-space: pre-wrap; overflow-wrap: anywhere; }
ol.frames { list-style: none; padding: 0; margin: 0; border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
ol.frames li.frame { padding: var(--space-2xs) var(--space-xs); border-bottom: var(--rule-w) solid var(--color-rule); color: var(--color-muted); }
ol.frames li.frame:last-child { border-bottom: 0; }
ol.frames li.in-app { color: var(--color-ink); background: var(--color-paper-2); }
.frame-loc { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
ol.frames li.in-app .frame-loc { font-weight: 500; }
.frame-loc .tag { margin: 0 0 0 var(--space-3xs); color: var(--color-accent); background: var(--color-accent-soft); border-color: transparent; }
pre.context { margin: var(--space-2xs) 0 var(--space-3xs); padding: var(--space-2xs) 0; font-weight: 400; background: var(--color-code); border-radius: var(--radius-input); }
pre.context .ctx { display: block; padding: 0 var(--space-xs); }
pre.context .ctx-current { background: var(--color-error-bg); color: var(--color-ink); box-shadow: inset 2px 0 0 var(--color-chart-error); }
pre.context .ctx-no { display: inline-block; width: 3.5rem; color: var(--color-muted); user-select: none; }
details.raw { margin: var(--space-sm) 0; }
details.raw summary, .ct summary { cursor: pointer; }
details.raw summary { display: inline-block; padding: 0.2rem var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); border-radius: var(--radius-input); }
details.raw summary:hover { background: var(--color-paper-3); color: var(--color-ink); }
details.raw pre { margin-top: var(--space-2xs); white-space: pre-wrap; word-break: break-all; max-height: 30rem; overflow-y: auto; }
.attrs { margin-top: 2px; font-size: var(--text-2xs); font-family: var(--font-mono); }

/* ---- Span waterfall ----------------------------------------------------- */
.waterfall { border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.span-row { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr) minmax(7rem, max-content); gap: var(--space-xs); align-items: center; padding: 0.35rem var(--space-xs); border-bottom: var(--rule-w) solid var(--color-rule); font-size: var(--text-xs); font-family: var(--font-mono); }
.span-row:last-child { border-bottom: 0; }
.span-row:hover { background: var(--color-paper-2); }
.span-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.span-name strong { font-weight: 500; color: var(--color-ink); }
.span-track { position: relative; height: 0.75rem; background: var(--color-paper-2); border-radius: 2px; }
.span-row:hover .span-track { background: var(--color-paper-3); }
.span-bar { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--color-chart); border-radius: 2px; }
.span-time { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Flame graph (spec 4.8): rows of absolutely placed boxes ------------ */
.fg { padding: var(--space-3xs); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); overflow: hidden; }
.fg-row { position: relative; height: 1.375rem; margin-bottom: 1px; }
.fg-node { position: absolute; top: 0; bottom: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 var(--space-3xs); font: 400 var(--text-2xs)/1.375rem var(--font-mono); color: var(--color-ink-2); background: var(--color-paper-3); border: var(--rule-w) solid var(--color-paper); border-radius: 3px; }
.fg-node.fg-in-app { font-weight: 500; color: var(--color-accent-ink); background: var(--color-accent-fill); }
.fg-node:hover { color: var(--color-ink); background: var(--color-rule-strong); }
.fg-node.fg-in-app:hover { color: var(--color-accent-ink); background: var(--color-accent-fill-hover); }
table.functions tr.in-app > td, table.functions tr.in-app:hover > td { background: var(--color-accent-soft); }

/* ---- Call tree ---------------------------------------------------------- */
.ct { padding: var(--space-xs) var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.8; border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); overflow-x: auto; }
.ct details { margin-left: var(--space-sm); padding-left: var(--space-2xs); border-left: var(--rule-w) solid var(--color-rule); }
.ct > details { margin-left: 0; padding-left: 0; border-left: 0; }
.ct summary { color: var(--color-ink-2); white-space: nowrap; }
.ct summary:hover { color: var(--color-ink); }
.ct-in-app, .ct summary.ct-in-app { font-weight: 500; color: var(--color-accent); }

/* ---- Trace page (spec 9): kind badges and the compact span lists -------- */
.kind-transaction { color: var(--color-accent); background: var(--color-accent-soft); }
.kind-error { color: var(--color-error); background: var(--color-error-bg); }
.kind-log { color: var(--color-ok); background: var(--color-ok-bg); }
.trace-spans { margin: var(--space-3xs) 0 0; max-width: none; font-size: var(--text-xs); font-family: var(--font-mono); line-height: 1.7; }
.trace-span { display: inline-block; margin-right: var(--space-xs); }

/* ---- Alert deliveries (spec 7.7) ---------------------------------------- */
.del-pending { color: var(--color-warn); background: var(--color-warn-bg); }
.del-sent { color: var(--color-ok); background: var(--color-ok-bg); }
.del-failed { color: var(--color-error); background: var(--color-error-bg); }

/* ---- N+1 issues and the Queries pages (v3 spec 2.3, 2.4) ---------------- */
.kind-n-plus-one { color: var(--color-perf); background: var(--color-perf-bg); }
.slow { color: var(--color-error); background: var(--color-error-bg); }
pre.sql { white-space: pre-wrap; word-break: break-word; margin: var(--space-3xs) 0; }
a.sql { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; word-break: break-word; }
table.queries td:first-child { max-width: 40rem; }

/* ---- Cron monitors (spec 4.5): monitor states and check-in results ------ */
.mon-ok, .ci-ok { color: var(--color-ok); background: var(--color-ok-bg); }
.mon-failing, .ci-error, .ci-missed, .ci-timeout { color: var(--color-error); background: var(--color-error-bg); }
.mon-pending, .ci-in_progress { color: var(--color-info); background: var(--color-info-bg); }
.mon-disabled, .ci-other { color: var(--color-quiet); background: var(--color-quiet-bg); }

/* ---- Login, setup and the static error pages ---------------------------- */
body:has(main .auth) { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: 100dvh; padding-bottom: var(--space-2xl); }
body:has(.auth) main { margin: 0 auto; padding-block: 0; }
body:has(.auth) header.top { position: static; height: auto; overflow: visible; align-items: center; padding: var(--space-lg) var(--space-sm) 0; background: transparent; border: 0; }
body:has(.auth) header.top .brand { margin: 0; color: var(--color-ink); }
body:has(.auth) header.top :focus-visible { outline-color: var(--color-focus); }
.auth { max-width: 24rem; margin: var(--space-md) auto 0; padding: var(--space-md); border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.auth h1 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.auth h1 + p.muted { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.auth .field input[type=email], .auth .field input[type=password] { max-width: none; }
.auth .actions input[type=submit] { width: 100%; }
main.lost { max-width: 32rem; padding-top: var(--space-2xl); }
main.lost .brand { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-lg); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
main.lost .code { margin: 0 0 var(--space-2xs); font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-muted); }

/* ---- Narrow screens: the rail becomes a top bar ------------------------- */
@media (max-width: 60rem) {
  body:has(> header.top) { display: block; }
  header.top { position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border-right: 0; border-bottom: var(--rule-w) solid var(--color-rail-rule); }
  header.top .brand { margin: 0; padding-left: 0; }
  header.top .project-name { flex: 0 1 auto; min-width: 0; max-width: 12rem; }
  header.top nav { order: 3; flex: 1 1 100%; flex-direction: row; gap: var(--space-3xs); margin: 0 calc(var(--space-sm) * -1); padding: 0 var(--space-sm) var(--space-3xs); overflow-x: auto; scrollbar-width: none; }
  header.top .nav-group { display: none; }
  header.top nav a { flex: none; }
  header.top .account { flex: 1 1 auto; justify-content: flex-end; min-width: 0; margin: 0; padding: 0; border-top: 0; }
  header.top .account .email { flex: 0 1 auto; }
  main { padding-top: var(--space-md); }
  main table { display: block; overflow-x: auto; }
  main table.narrow, main table.kv { display: table; }
  main table:not(.kv) :is(th, td) { white-space: nowrap; }
  main table:not(.kv) :is(td.wrap, td:has(> div.muted), td:has(> a.sql), td:has(> pre)) { white-space: normal; min-width: 15rem; }
  table.kv th { width: auto; min-width: 7rem; }
  h1 { font-size: 1.25rem; }
  h2 { margin-top: var(--space-lg); }
  .issue-head dl.facts { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-2xs) var(--space-md); padding: var(--space-sm); }
  .issue-head dl.facts dt, .issue-head dl.facts dd { padding: 0; border-left: 0; white-space: normal; font-size: var(--text-sm); }
  .span-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .span-track { grid-column: 1 / -1; grid-row: 2; }
  .bar-col:not(:nth-child(4n + 1)) .bar-label { visibility: hidden; }
  .bar-label { overflow: visible; }
  .bars { gap: 2px; padding-inline: var(--space-2xs); }
}
@media (max-width: 30rem) {
  header.top .account { font-size: 0; }
  header.top .account .email { display: none; }
  section.counts { grid-template-columns: minmax(0, 1fr); }
  section.counts .count { display: flex; align-items: baseline; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border-left: 0; border-top: var(--rule-w) solid var(--color-rule); }
  section.counts .count:first-child { border-top: 0; }
  section.counts .n { font-size: var(--text-xl); min-width: 4ch; }
  section.counts .count.muted { padding: var(--space-2xs) var(--space-sm); }
  dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.facts dd { margin-bottom: var(--space-2xs); }
  form.search input[type=search], form.filter-form select { flex: 1 1 100%; max-width: none; }
}

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