:root {
  --fg:#172B4D; --muted:#5E6C84; --bg:#FFFFFF; --surface:#F4F5F7;
  --border:#DFE1E6; --accent:#0052CC; --accentHover:#0747A6;
  --warn:#FF8B00; --info:#0052CC;
}
* { box-sizing: border-box; }
body {
  margin:0; padding:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.6;
}
header.site {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:14px 24px;
}
header.site .wrap {
  max-width:960px; margin:0 auto;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
header.site .brand {
  font-weight:700; font-size:1.15rem; color:var(--fg); text-decoration:none;
}
header.site nav a {
  color:var(--muted); text-decoration:none; font-size:.9375rem; margin-right:18px;
  white-space:nowrap;
}
header.site nav a:hover { color:var(--accent); }
.hero {
  width:100%;
  margin:0;
  padding:32px 24px;
  background:#1558bc;
  text-align:center;
}
.hero img {
  display:block;
  margin:0 auto;
  max-width:1100px;
  width:100%;
  height:auto;
}
.wrap {
  max-width:960px; margin:0 auto; padding:40px 24px 96px;
}
.wrap > h1 { font-size:2rem; margin:0 0 8px; }
h2 { font-size:1.25rem; margin:2.5rem 0 .75rem; }
h3 { font-size:1.0625rem; margin:1.75rem 0 .5rem; color:var(--fg); }
p, li { font-size:1rem; color:var(--fg); }
.updated { color:var(--muted); font-size:.875rem; margin-bottom:2rem; }
table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9375rem; }
th, td { text-align:left; padding:10px 12px; border:1px solid var(--border); vertical-align:top; }
th { background:var(--surface); font-weight:600; }
code { background:var(--surface); padding:1px 5px; border-radius:3px; font-size:.875em; }
pre {
  background:var(--surface); padding:14px 16px; border-radius:6px;
  overflow-x:auto; font-size:.875rem; line-height:1.5;
}
pre code { background:transparent; padding:0; }
a { color:var(--accent); }
a:hover { color:var(--accentHover); }
.lead {
  font-size:1.0625rem; color:var(--muted); margin-bottom:2rem;
}
.cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin:2rem 0;
}
.card {
  border:1px solid var(--border); border-radius:8px; padding:18px;
  background:var(--bg); text-decoration:none; color:var(--fg);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card:hover { border-color:var(--accent); box-shadow:0 2px 6px rgba(0,82,204,.12); }
.card h3 { margin:0 0 6px; color:var(--accent); }
.card p { margin:0; color:var(--muted); font-size:.9375rem; }
.lozenge {
  display:inline-block; padding:2px 8px; border-radius:10px;
  font-size:.75rem; font-weight:600; color:#fff; margin-right:6px;
}
.lozenge.warn  { background:var(--warn); }
.lozenge.info  { background:var(--info); }
.callout {
  background:var(--surface); border-left:3px solid var(--accent);
  padding:12px 16px; margin:1.5rem 0; border-radius:0 4px 4px 0;
  font-size:.9375rem;
}
ul.steps { list-style:none; padding-left:0; counter-reset:step; }
ul.steps li {
  position:relative; padding-left:2.25rem; margin:.75rem 0;
  counter-increment:step;
}
ul.steps li::before {
  content:counter(step);
  position:absolute; left:0; top:0;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--accent); color:#fff;
  text-align:center; line-height:1.6rem; font-size:.8125rem; font-weight:600;
}
.toc { background:var(--surface); padding:14px 18px; border-radius:6px; margin:1.5rem 0; }
.toc ul { margin:0; padding-left:1.25rem; }
.toc a { text-decoration:none; } .toc a:hover { text-decoration:underline; }
.footer {
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border);
  color:var(--muted); font-size:.875rem;
}
.footer a { color:var(--muted); }

/* ── Language switcher (injected by chrome.js) ─────────────────────────── */
header.site .lang-wrap {
  margin-left:auto; display:flex; align-items:center; gap:8px;
}
header.site .lang-wrap label {
  color:var(--muted); font-size:.8125rem; font-weight:600;
  white-space:nowrap;
}
#lang-switch {
  font:inherit; font-size:.875rem; color:var(--fg);
  background:var(--bg); border:1px solid var(--border);
  border-radius:4px; padding:4px 8px; cursor:pointer;
  max-width:170px;
}
#lang-switch:focus { outline:2px solid var(--accent); outline-offset:1px; }
header.site nav a.active { color:var(--accent); font-weight:600; }

/* ── Figure / screenshot ─────────────────────────────────────────────────── */
figure.shot {
  margin:1.5rem 0; padding:0;
}
figure.shot img {
  width:100%; height:auto; display:block;
  border:1px solid var(--border); border-radius:8px;
}
figure.shot figcaption {
  margin-top:6px; color:var(--muted); font-size:.8125rem; font-style:italic;
}

/* ── Page-title meta row (updated date) ─────────────────────────────────── */
.updated { display:block; }

/* ── Admin reference marker ────────────────────────────────────────────── */
/* Technical/admin-detail sections within otherwise user-facing pages.
   A small uppercase eyebrow label so a regular user can see "this bit is
   for the project admin / implementer" and skip it. */
.ref-eyebrow {
  display:inline-block; margin: 2.5rem 0 .5rem;
  padding: 2px 10px; border-radius: 4px;
  background: var(--surface); color: var(--muted);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.ref-eyebrow::before { content: "⚙ "; }
h2.ref, h3.ref { margin-top: .25rem; }
.ref-note {
  margin: .25rem 0 1rem; color: var(--muted); font-size: .875rem;
}

/* ── Flag legend chips (used on flags & audit pages) ────────────────────── */
.legend { display:flex; flex-wrap:wrap; gap:8px; margin:1rem 0; }

/* ── Tabs description (audit view has Activity / Capacity tabs) ─────────── */
.tabs-note {
  display:flex; gap:6px; align-items:center; margin:1rem 0;
  padding:10px 14px; background:var(--surface); border-radius:6px;
  font-size:.9375rem;
}
.tabs-note .pill {
  padding:2px 10px; border-radius:10px; font-size:.75rem; font-weight:600;
  background:var(--accent); color:#fff;
}

/* ── Responsive nav: wrap the header on narrow screens ──────────────────── */
@media (max-width:720px) {
  header.site .wrap { gap:12px; }
  header.site nav { order:3; width:100%; display:flex; flex-wrap:wrap; }
  header.site nav a { margin-right:14px; margin-bottom:4px; }
  header.site .lang-wrap { margin-left:0; }
}