/* robertdelanghe.dev — synoptic v2. Visual system (fonts, color, type) comes from
   the brand package (@bdelanghe/brand); only layout lives here. Rendered from data/site.json. */
:root { --maxw: 760px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 10vw, 112px) 28px 64px; }

/* visible keyboard focus — non-color, brand-token ring (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 2px solid var(--bs-color-accent); outline-offset: 2px; border-radius: 2px; }
.seeking :focus-visible { outline-color: var(--bs-color-on-accent); }

/* Link-type indicators, derived from the href itself — not appended per callsite in
   JS/template code (previously 3 inconsistent, hand-maintained occurrences of the
   outbound arrow, and prose links in post bodies never got one at all). A link's own
   href is the single source of truth for what kind of link it is, so the indicator
   can't drift out of sync with where it actually points. Opt out with .no-link-icon
   (e.g. a link that already carries its own directional arrow, like the seeking CTA). */
a[href^="http"]:not(.no-link-icon)::after {
  /* U+2197 (↗) is the shape already live on the site — kept as-is. U+FE0E (the
     text-presentation variation selector) is the actual fix: it forces text
     rendering, since iOS/Safari otherwise renders this codepoint as a full-color
     emoji glyph rather than plain text. */
  content: "\2197\FE0E";
  margin-left: 0.2em;
  font-size: 0.65em;
}
a[href^="#"]:not(.no-link-icon)::after {
  content: "\00a7\FE0E"; /* § — jumps within this page, never leaves it */
  margin-left: 0.2em;
  font-size: 0.65em;
  opacity: 0.7;
}
a[href^="mailto:"]:not(.no-link-icon)::before {
  content: "\2709\FE0E\00a0"; /* envelope + a following space */
  font-size: 0.9em;
}

.eyebrow { color: var(--bs-color-ink-mono); margin: 0 0 20px; }

/* intro */
.intro h1 {
  font-family: var(--bs-font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.025em;
  color: var(--bs-color-ink); margin: 0 0 22px;
}
.lead { font-size: 18px; line-height: 1.6; color: var(--bs-color-ink-soft); margin: 0 0 26px; max-width: 58ch; }
.lead strong { color: var(--bs-color-accent); font-weight: 600; }
.lead--intro { font-size: 20px; color: var(--bs-color-ink); margin: 0 0 20px; }
.proof { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); margin: 0 0 16px; }
.proof a { color: var(--bs-color-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-line); }
.proof a:hover { border-color: var(--bs-color-accent); }
.place { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); margin: -2px 0 24px; }

/* background: experience + education */
.bg { margin-top: clamp(56px, 9vw, 88px); }
.bg__sub { margin: 26px 0 14px; color: var(--bs-color-ink-mono); }
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.entry { display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
.entry__when { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); padding-top: 2px; }
.entry__org { font-weight: 600; color: var(--bs-color-ink); }
.entry__role { font-weight: 400; color: var(--bs-color-ink-soft); }
.entry__what { display: block; font-size: 15px; line-height: 1.55; color: var(--bs-color-ink-soft); margin-top: 4px; }
@media (max-width: 560px) { .entry { grid-template-columns: 1fr; gap: 4px; } }

/* seeking callout */
.seeking { margin-top: clamp(40px, 7vw, 64px); background: var(--bs-color-accent); border-radius: var(--bs-radius-lg); padding: 28px 32px; }
.seeking__label { color: var(--bs-color-accent-ink-soft); margin: 0 0 10px; }
.seeking__focus { font-family: var(--bs-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--bs-color-on-accent); margin: 0 0 8px; }
.seeking__detail { font-size: 15px; line-height: 1.55; color: var(--bs-color-accent-ink); margin: 0 0 16px; max-width: 60ch; }
.seeking__cta { font-family: var(--bs-font-mono); font-size: 13px; color: var(--bs-color-on-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-accent-ink-soft); padding-bottom: 2px; }
.seeking__cta:hover { border-color: var(--bs-color-on-accent); }
.links { display: flex; flex-wrap: wrap; gap: 22px; }
.links a {
  font-family: var(--bs-font-mono); font-size: 13px; color: var(--bs-color-accent);
  text-decoration: none; border-bottom: 1px solid var(--bs-color-line); padding-bottom: 2px;
}
.links a:hover { border-color: var(--bs-color-accent); }

/* section rhythm */
.corpus, .work, .colophon { margin-top: clamp(56px, 9vw, 88px); }

/* colophon: built-with */
.colophon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bs-color-line); border: 1px solid var(--bs-color-line); border-radius: var(--bs-radius-md); overflow: hidden; }
.colophon__list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; text-decoration: none; color: inherit; background: var(--bs-color-card); }
.colophon__list a:hover { background: var(--bs-color-card-alt); }
.colophon__name { font-family: var(--bs-font-mono); font-weight: 600; font-size: 13px; color: var(--bs-color-accent); }
.colophon__role { font-size: 13px; color: var(--bs-color-ink-soft); }
.colophon__more { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); margin: 14px 0 0; }
.colophon__more a { color: var(--bs-color-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-line); }
.colophon__more a:hover { border-color: var(--bs-color-accent); }

/* corpus: meta-analysis */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 28px; }
.fig {
  background: var(--bs-color-card); border: 1px solid var(--bs-color-accent-soft);
  border-radius: var(--bs-radius-md); padding: 16px 18px;
}
.fig__n { display: block; font-family: var(--bs-font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--bs-color-ink); }
.fig__k { font-family: var(--bs-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-color-ink-mono); }

.bars { display: grid; gap: 8px; margin: 0 0 24px; }
.bar { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 12px; }
.bar__k { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-soft); }
.bar__track { height: 8px; background: var(--bs-color-line); border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--bs-color-accent); }
.bar__n { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); text-align: right; }

/* Language expander — the top 6 bars show; the rest sit behind a native <details>
   (zero JS, no :target so it never fights the topic filter; prints expanded). */
.langmore { margin: 6px 0 0; }
.langmore__sum { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-accent); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 0; }
.langmore__sum::-webkit-details-marker { display: none; }
.langmore__sum::before { content: "+"; font-weight: 600; }
.langmore[open] .langmore__sum::before { content: "\2212"; } /* − */
.langmore__sum:hover, .langmore__sum:focus-visible { color: var(--bs-color-accent-strong); }
.bars--more { margin-top: 8px; }
.chips__hint { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); margin: 14px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-accent);
  background: var(--bs-color-card-alt); border: 1px solid var(--bs-color-accent-soft);
  border-radius: 999px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
}
.chip em { color: var(--bs-color-ink-mono); font-style: normal; }
.chip--muted { color: var(--bs-color-ink-mono); }
.chip--all { color: var(--bs-color-ink-soft); }
/* Hidden :target anchors that drive the pure-CSS Selected-work filter. They stay
   DOM siblings just ahead of .corpus/.work so the general-sibling rules reach
   both — but they're position:fixed (always "in view"), so navigating to one
   fires :target WITHOUT scrolling the page: the filter applies in place, right
   where you clicked. Invisible + out of the pointer/accessibility path. */
.ftgt { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* Receipt-links — figures, bars, and chips link to the live GitHub query that
   reproduces the number. Quiet at rest (the number is the content), accent on
   hover/focus. */
a.fig, a.bar__k, a.chip { text-decoration: none; }
a.fig .fig__n { color: var(--bs-color-accent); }
a.fig:hover .fig__k, a.fig:focus-visible .fig__k { color: var(--bs-color-accent); }
/* Fill the label column and stand ≥24px tall so the link clears WCAG 2.2
   target-size (2.5.8) — a bare 12px text label is too small a touch target. */
a.bar__k { display: flex; align-items: center; min-height: 24px; }
a.bar__k:hover, a.bar__k:focus-visible { color: var(--bs-color-accent); }
a.chip:hover, a.chip:focus-visible { border-color: var(--bs-color-accent); }

.corpus__src { font-family: var(--bs-font-mono); font-size: 11px; line-height: 1.7; color: var(--bs-color-ink-mono); margin: 18px 0 0; }
.corpus__src a { color: var(--bs-color-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-line); }
.corpus__src a:hover { border-color: var(--bs-color-accent); }

/* selected work — a flat list the Public-record topics filter in place */
.proj__full { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); }
.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bs-color-line); border: 1px solid var(--bs-color-line); border-radius: var(--bs-radius-md); overflow: hidden; }
.proj { background: var(--bs-color-card); padding: 18px 20px; }
.proj__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.proj__name { font-family: var(--bs-font-mono); font-weight: 600; font-size: 15px; color: var(--bs-color-accent); text-decoration: none; }
.proj__name:hover, .proj__name:focus-visible { text-decoration: underline; }
.proj__pin { font-family: var(--bs-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-color-ink-mono); }
.proj__lang { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); margin-left: auto; }
/* Interest cards carry a star count (their signal) where authored cards carry a pin.
   Stars anchor the right of the header row; the language sits just after it. */
.proj__stars { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-accent); margin-left: auto; }
.proj__stars + .proj__lang { margin-left: 10px; }
.proj__desc { font-size: 15px; line-height: 1.5; color: var(--bs-color-ink-soft); margin: 0 0 8px; }
.proj__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Tag pills double as filter controls — same look as a corpus chip, accent when
   their topic is the active :target (rule generated per-topic in build.mjs). */
.tag { font-family: var(--bs-font-mono); font-size: 10px; color: var(--bs-color-accent); background: var(--bs-color-card-alt); border: 1px solid var(--bs-color-accent-soft); border-radius: 999px; padding: 2px 8px; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
a.tag:hover, a.tag:focus-visible { border-color: var(--bs-color-accent); }
/* Shown only when a corpus-only topic is the active filter (per-topic rule). */
.proj-empty { display: none; background: var(--bs-color-card); padding: 20px; font-family: var(--bs-font-mono); font-size: 12px; line-height: 1.6; color: var(--bs-color-ink-soft); }
.proj-empty a { color: var(--bs-color-accent); }

.foot {
  margin-top: clamp(56px, 9vw, 88px); padding-top: 22px; border-top: 1px solid var(--bs-color-line);
  display: grid; gap: 18px;
  font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono);
}
/* Tier 1 — identity: name·org left, social right. */
.foot__id { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.foot__name { color: var(--bs-color-ink-soft); }
.foot__ok { color: var(--bs-color-accent); font-weight: 600; }
/* Tier 2 — provenance: the build stamp over the colophon line, quiet and grouped. */
.foot__prov { display: grid; gap: 8px; }
.colophon__more { margin: 0; line-height: 1.75; max-width: 70ch; }

@media (max-width: 560px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .bar { grid-template-columns: 92px 1fr 30px; }
}

/* ---- /blog index + posts ---------------------------------------------------- */
.post-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.post-list a {
  display: grid; grid-template-columns: 110px 1fr; gap: 4px 18px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--bs-color-line); text-decoration: none; color: inherit;
}
.post-list li:last-child a { border-bottom: 1px solid var(--bs-color-line); }
.post-list__date { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); }
.post-list__title { font-weight: 600; color: var(--bs-color-ink); }
.post-list__desc { grid-column: 2; color: var(--bs-color-ink-soft); font-size: 14px; }
.post-list a:hover .post-list__title { color: var(--bs-color-accent); }

.post { max-width: 680px; }
.post__head { margin-bottom: clamp(24px, 5vw, 40px); }
.post__head h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 0; }
.post__meta { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); margin-top: 12px; }
.post__meta a { color: var(--bs-color-accent); text-decoration: underline; }
.post__body { font-size: 17px; line-height: 1.65; color: var(--bs-color-ink); }
.post__body h2 { font-size: 22px; letter-spacing: -0.01em; margin: 36px 0 12px; }
.post__body h3 { font-size: 18px; margin: 28px 0 8px; }
.post__body p { margin: 0 0 18px; }
.post__body a { color: var(--bs-color-accent); }
.post__body code { font-family: var(--bs-font-mono); font-size: 0.88em; background: var(--bs-color-accent-tint); padding: 1px 5px; border-radius: 4px; }
.post__body blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 3px solid var(--bs-color-accent-soft); color: var(--bs-color-ink-soft); }
.post__body ul { margin: 0 0 18px; padding-left: 20px; }
.post__body li { margin: 0 0 6px; }
.post__body hr { border: 0; border-top: 1px solid var(--bs-color-line); margin: 28px 0; }
.post .tag { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); }

/* ---- social identity + POSSE syndication ----------------------------------- */
.foot__social a { color: var(--bs-color-accent); text-decoration: underline; text-underline-offset: 2px; }
.foot__social a:hover { text-decoration-thickness: 2px; }
.post__synd {
  margin-top: clamp(28px, 5vw, 40px); padding-top: 16px; border-top: 1px solid var(--bs-color-line);
  font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono);
}
.post__synd a { color: var(--bs-color-accent); text-decoration: none; }

/* ---- provenance: the build as a derivation chain --------------------------- */
.prov-chain { list-style: none; margin: 0; padding: 0; }
.prov-link { position: relative; padding: 0 0 24px 32px; }
.prov-link::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: -6px; width: 2px; background: var(--bs-color-line); }
.prov-link::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bs-color-on-accent); border: 2px solid var(--bs-color-accent-soft); }
.prov-link__name { display: block; font-family: var(--bs-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-color-accent); margin: 0 0 5px; }
.prov-link__body { color: var(--bs-color-ink-soft); font-size: 15px; line-height: 1.55; max-width: 60ch; }
.prov-link__body code { font-family: var(--bs-font-mono); font-size: 0.88em; background: var(--bs-color-accent-tint); padding: 1px 5px; border-radius: 4px; color: var(--bs-color-ink); }
.prov-link__body a { color: var(--bs-color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* :has() is not yet Baseline Widely Available; guard it as a progressive
   enhancement (the feature query is the tested fallback — without :has() the link
   simply keeps its default underline). */
@supports selector(:has(*)) {
  .prov-link__body a:has(code) { text-decoration: none; }
}
.prov-link__body a code { color: var(--bs-color-accent); border-bottom: 1px solid var(--bs-color-line); }
.prov-link__body a:hover code { border-color: var(--bs-color-accent); }
/* the signed output — the seal that closes the chain */
.prov-seal { position: relative; padding-left: 32px; }
.prov-seal::after { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: var(--bs-color-accent); transform: rotate(45deg); }
.prov-seal__card { border: 1px solid var(--bs-color-accent-soft); background: var(--bs-color-card); border-radius: var(--bs-radius-md); padding: 16px 18px; }
.prov-seal__title { font-family: var(--bs-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-color-ink); margin: 0 0 6px; }
.prov-seal__meta { font-family: var(--bs-font-mono); font-size: 14px; color: var(--bs-color-ink); margin: 0; }
.prov-seal__meta a { color: var(--bs-color-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-accent-soft); }
.prov-evidence { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prov-evidence a { display: inline-block; font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-accent); text-decoration: none; border: 1px solid var(--bs-color-line); border-radius: 999px; padding: 5px 12px; }
.prov-evidence a:hover { border-color: var(--bs-color-accent); }
.prov-materials { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.prov-materials li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--bs-color-line); }
.prov-materials li:last-child { border-bottom: 0; }
.prov-materials code { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink); background: none; padding: 0; }
.prov-dg { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); white-space: nowrap; }
.prov-materials__note { display: block; font-size: 13px; color: var(--bs-color-ink-mono); margin-top: 8px; line-height: 1.5; }

/* ---- conformance: the computed conformance projection (kit renderer) -------- */
.conf-machine { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); margin: 10px 0 0; }
.conf-machine a { color: var(--bs-color-accent); text-decoration: none; border-bottom: 1px solid var(--bs-color-accent-soft); }
.conf-machine a:hover { border-color: var(--bs-color-accent); }
/* Conformance overview — proportional meter + big-number stat tiles, the at-a-glance
   read the flat criteria list lacks. Colors: met = accent, unmet = status-negative,
   not-assessed = a neutral (it isn't a failure, just unevaluated). */
.conf-overview { margin: 0 0 30px; }
.conf-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bs-color-card-alt); }
.conf-bar__seg { display: block; height: 100%; }
.conf-bar__seg--met { background: var(--bs-color-ink-soft); }
.conf-bar__seg--unmet { background: var(--bs-color-status-negative); }
.conf-bar__seg--na { background: var(--bs-color-line); }
.conf-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 14px 0 0; }
.conf-stat { display: flex; align-items: baseline; gap: 8px; }
.conf-stat__n { font-family: var(--bs-font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--bs-color-ink); font-variant-numeric: tabular-nums; }
.conf-stat__k { font-family: var(--bs-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--bs-color-ink-mono); }
.conf-stat--met .conf-stat__n { color: var(--bs-color-ink); }
.conf-stat--unmet .conf-stat__n { color: var(--bs-color-status-negative); }
.conf-stat--na .conf-stat__n { color: var(--bs-color-ink-mono); }

.ck-conformance { margin: 8px 0 0; }
.ck-conformance__claim { font-size: 17px; line-height: 1.5; margin: 0 0 6px; padding: 14px 16px; border-radius: var(--bs-radius-md); border: 1px solid var(--bs-color-line); background: var(--bs-color-card-alt); color: var(--bs-color-ink); max-width: 64ch; }
.ck-conformance__claim[data-conformant="true"] { border-color: var(--bs-color-accent-soft); background: var(--bs-color-accent-tint); color: var(--bs-color-accent-strong); }
.ck-conformance__summary { font-family: var(--bs-font-mono); font-size: 12px; color: var(--bs-color-ink-mono); margin: 0 0 28px; }
.ck-conformance__standard { color: var(--bs-color-ink-soft); }
/* Each area is a category of conformance — give the groups real separation: a
   heavier top rule (vs the light per-criterion dividers) + generous whitespace,
   so a new category reads as a new section, not another row. */
.ck-area { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--bs-color-ink-mono); }
.ck-area__title { font-family: var(--bs-font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-color-accent); margin: 0 0 3px; display: flex; align-items: baseline; gap: 10px; }
.ck-area__count { font-size: 11px; color: var(--bs-color-ink-mono); letter-spacing: 0; text-transform: none; font-weight: 400; }
.ck-area__summary { font-size: 12px; color: var(--bs-color-ink-mono); margin: 0 0 14px; }
.ck-criteria { list-style: none; margin: 0; padding: 0; }
.ck-criterion { display: grid; grid-template-columns: 116px 1fr; gap: 6px 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--bs-color-line); }
.ck-criterion:first-child { padding-top: 0; }
.ck-criterion:last-child { border-bottom: 0; padding-bottom: 0; }
.ck-criterion__status { grid-row: span 3; align-self: start; justify-self: start; font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--bs-color-line); color: var(--bs-color-ink-mono); white-space: nowrap; }
/* met reads NEUTRAL, not red — terracotta-for-pass looked like an error. Red is
   reserved for the one real problem (unmet); the ✓/✗/– glyph is the primary signal. */
.ck-status--met { color: var(--bs-color-ink); border-color: var(--bs-color-line); background: var(--bs-color-card-alt); }
.ck-status--unmet { color: var(--bs-color-status-negative); border-color: var(--bs-color-status-negative); background: var(--bs-color-status-negative-tint); }
.ck-status--not-assessed { color: var(--bs-color-ink-mono); border-color: var(--bs-color-line); background: var(--bs-color-card-alt); }
/* A glyph per status so the state reads without relying on color (WCAG 1.4.1). */
.ck-status--met::before { content: "\2713\00a0"; }
.ck-status--unmet::before { content: "\2717\00a0"; }
.ck-status--not-assessed::before { content: "\2013\00a0"; }
.ck-criterion__label { font-size: 15px; color: var(--bs-color-ink); font-weight: 600; }
.ck-criterion__standard { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-ink-mono); }
/* Each rule's standard links to the doc that declares it — a dotted underline marks
   the link without the busy ↗ affix (suppressed via no-link-icon in the markup). */
.ck-std { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--bs-color-ink-mono); text-underline-offset: 2px; }
.ck-std:hover, .ck-std:focus-visible { color: var(--bs-color-accent); text-decoration-color: var(--bs-color-accent); }
.ck-criterion__detail { font-size: 13.5px; color: var(--bs-color-ink-soft); line-height: 1.65; max-width: 60ch; margin-bottom: 2px; }
.ck-criterion__evidence { font-family: var(--bs-font-mono); font-size: 11px; color: var(--bs-color-accent); text-decoration: underline; text-decoration-color: var(--bs-color-accent-soft); text-underline-offset: 2px; }
.ck-criterion__evidence:hover { text-decoration-color: var(--bs-color-accent); }