/* Rankflow theme: the single place for shared values. */
:root {
  --bg: #ffffff; --surface: #f6f7f9; --text: #1b1f24; --muted: #5b6470; --border: #d9dde3;
  --accent: #1f5fbf; --accent-text: #ffffff;
  --ok: #1d7a45; --warn: #9a6200; --bad: #b42318; --info: #1f5fbf; --neutral: #5b6470; --fixture: #6b3fa0;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 6px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, Menlo, monospace;
  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.6rem; --max: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111418; --surface: #1a1f25; --text: #e7eaee; --muted: #a2abb6; --border: #2c333b;
    --accent: #6ea8ff; --accent-text: #0b1220; --ok: #5cc98a; --warn: #e3b049; --bad: #ff7b72; --info: #6ea8ff;
    --neutral: #a2abb6; --fixture: #c39bff; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-md)/1.5 var(--font); }
a { color: var(--accent); }
header.site, footer.site { border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
footer.site { border-top: 1px solid var(--border); border-bottom: 0; color: var(--muted); font-size: var(--text-sm); }
header.site nav { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; max-width: var(--max); margin: 0 auto; }
header.site .brand { font-weight: 700; text-decoration: none; color: var(--text); margin-right: auto; }
main { max-width: var(--max); margin: 0 auto; padding: var(--space-6) var(--space-4); }
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); } h2 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); border: 1px solid; }
.banner.fixture { border-color: var(--fixture); color: var(--fixture); }
.banner.warn { border-color: var(--warn); color: var(--warn); } .banner.bad { border-color: var(--bad); color: var(--bad); }
.banner.ok { border-color: var(--ok); color: var(--ok); } .banner.info { border-color: var(--info); color: var(--info); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
form.stack { display: grid; gap: var(--space-3); max-width: 36rem; }
label { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
input, select, textarea { font: inherit; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); width: 100%; }
button, .button { font: inherit; padding: var(--space-2) var(--space-4); border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: 999px; border: 1px solid currentColor; font-size: var(--text-sm); white-space: nowrap; }
.badge.ok { color: var(--ok); } .badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); } .badge.info { color: var(--info); } .badge.neutral { color: var(--neutral); }
.muted { color: var(--muted); font-size: var(--text-sm); } pre, code { font-family: var(--mono); font-size: var(--text-sm); }
pre { white-space: pre-wrap; word-break: break-word; background: var(--surface); padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); max-height: 32rem; overflow: auto; }
del { color: var(--bad); } ins { color: var(--ok); text-decoration: none; }
details summary { cursor: pointer; }