/* Shared styles: plain, flat, one primary colour, WCAG 2.1 AA. */
:root {
  --color-primary: #3B5BFD;
  --color-primary-hover: #2D47D6;
  --color-primary-soft: #EEF2FF;
  --color-text: #0F172A;
  --color-muted: #475569;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-border: #CBD5E1;
  --color-tag: #E2E8F0;
  --color-viewer: #EEF1F5;
  --color-accent: #14B8A6;
  --color-success: #16A34A;
  --color-error: #E11D48;
  --color-model: #C62828;
  --font-body: "Inter", system-ui, sans-serif;
  --font-jetbrains-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 6px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--color-background);
  color: var(--color-text);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-jetbrains-mono); font-size: .9em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.breadcrumbs { padding-top: 24px; font-size: 14px; color: var(--color-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-muted); }

header { padding: 32px 0 24px; }
.breadcrumbs + header { padding-top: 12px; }
h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em; }
.lede { color: var(--color-muted); max-width: 680px; margin: 0 0 20px; font-size: 18px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: var(--radius); border: 2px solid var(--color-primary);
  background: var(--color-surface); color: var(--color-primary); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.btn.primary { background: var(--color-primary); color: #FFFFFF; }
.btn.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #FFFFFF; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn svg { width: 18px; height: 18px; }
.status { color: var(--color-muted); font-size: 14px; }

footer.site { border-top: 1px solid var(--color-border); padding: 24px 0 40px; color: var(--color-muted); font-size: 14px; }
footer.site ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer.site p { margin: 0; }