/* ============================================================================
   ACG component library. The closed set of 18 from rules/01 section 9.

   TOKEN LAW: every value here is a var() from tokens.css. No raw hex, no raw
   spacing, no font-size literal, no duration literal. scripts/check-design-lint.sh
   enforces it.

   Building a 19th component requires an approval line in the PR.
   ============================================================================ */

/* -- shared primitives ----------------------------------------------------- */

.u-container { max-width: var(--w-content); margin-inline: auto;
  padding-inline: var(--gutter-mob); }
@media (min-width: 768px) { .u-container { padding-inline: var(--gutter-desk); } }

.u-mono { font-family: var(--font-mono); font-size: var(--fs-mono);
  font-weight: var(--fw-mono); line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono); }
/* Uppercase is permitted ONLY here, at this tracking, nowhere else. */
.u-mono--label { text-transform: uppercase; letter-spacing: var(--tr-mono-upper);
  color: var(--ink-500); }

.u-h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2);
  line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--heading-color, var(--navy-800)); }
.u-h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3);
  line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--heading-color, var(--navy-800)); }
.u-h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4);
  line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--heading-color, var(--navy-800)); }
.u-lead { font-size: var(--fs-lead); font-weight: var(--fw-lead);
  line-height: var(--lh-lead); color: var(--ink-700); }
.u-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); }
.u-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-500); }

/* Section rhythm. Nothing exceeds 128px of vertical padding anywhere. */
.u-section {
  padding-block: var(--s-16);
  /* Own the surface. Without these two lines the component inherits the host
     page's background while its text colours still assume a light one, which
     rendered navy-800 headings on a near-black body: invisible, not merely
     low-contrast. A component that only works on a page it does not control is
     not a component. */
  background: var(--paper);
  color: var(--ink-900);
}
@media (min-width: 1024px) { .u-section { padding-block: var(--s-24); } }
.u-section--navy { background: var(--navy-800); color: var(--paper); }
.u-section--alt { background: var(--paper-alt); }

/* Buttons. Red is the pointer: at most twice per viewport. */
.u-btn { display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-2);
  font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out); }
.u-btn--primary { background: var(--red-500); color: var(--paper); }
.u-btn--primary:hover { background: var(--red-600); }
.u-btn--secondary { background: transparent; color: var(--navy-800);
  border-color: var(--line-300); }
.u-btn--secondary:hover { border-color: var(--heading-color, var(--navy-800)); }
.u-btn:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 2px; }
.u-section--navy .u-btn--secondary { color: var(--paper);
  border-color: var(--on-navy-rule); }

/* 1. Header ---------------------------------------------------------------- */
.c-header { position: sticky; top: 0; z-index: 50; height: var(--s-20);
  background: var(--paper); border-bottom: 1px solid var(--line-200);
  display: flex; align-items: center; }
.c-header__inner { display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--s-8); }
.c-header__nav { display: none; gap: var(--s-6); }
.c-header__actions { display: flex; align-items: center; gap: var(--s-4); }
.c-header__link { color: var(--navy-800); text-decoration: none;
  font-size: var(--fs-body); }
.c-header__link:hover { text-decoration: underline; }
.c-header__burger { display: inline-flex; }
@media (min-width: 900px) {
  .c-header__nav { display: flex; }
  .c-header__burger { display: none; }
}

/* 2. MobileNavSheet -------------------------------------------------------- */
.c-navsheet { position: fixed; inset: 0; z-index: 60; background: var(--paper);
  box-shadow: var(--e-2); padding: var(--s-6);
  transform: translateY(var(--s-2)); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out); }
.c-navsheet[data-open="true"] { transform: translateY(0); opacity: 1;
  pointer-events: auto; }
.c-navsheet__list { display: flex; flex-direction: column; gap: var(--s-4); }

/* 3. HeroSplit. 7/5. Right column is ONE real project photo, no overlay, no
      text over it. Never a full-viewport photo with centered white text. ----- */
.c-hero { display: grid; gap: var(--s-8); padding-block: var(--s-20); }
@media (min-width: 1024px) {
  .c-hero { grid-template-columns: 7fr 5fr; gap: var(--s-12);
    padding-block: var(--s-32); align-items: center; }
}
.c-hero__eyebrow { margin-bottom: var(--s-4); }
.c-hero__title { font-size: var(--fs-display); font-weight: var(--fw-display);
  line-height: var(--lh-display); letter-spacing: var(--tr-display);
  color: var(--navy-800); margin-bottom: var(--s-4); }
.c-hero__lead { margin-bottom: var(--s-8); }
.c-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-6); }
.c-hero__proof { color: var(--ink-500); }
.c-hero__media { aspect-ratio: 4 / 3; border-radius: var(--r-0);
  overflow: hidden; background: var(--paper-alt); }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 4. ProofBar. Text facts only. No logos, no icons, no counters. ----------- */
.c-proofbar { background: var(--navy-800); color: var(--paper);
  padding-block: var(--s-8); }
.c-proofbar__row { display: grid; gap: var(--s-6);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .c-proofbar__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-proofbar__label { color: var(--on-navy-secondary); margin-bottom: var(--s-1); }
.c-proofbar__value { font-size: var(--fs-h4); font-weight: var(--fw-h4);
  line-height: var(--lh-h4); color: var(--paper); }

/* 5. CapabilityList. Text list, NOT cards. Max 6 items. Zero icons. ------- */
.c-capabilities { display: grid; gap: var(--s-8); }
@media (min-width: 768px) { .c-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-12); } }
.c-capability { border-top: 1px solid var(--line-200); padding-top: var(--s-4); }
.c-capability__name { margin-bottom: var(--s-2); }
.c-capability__scope { margin-bottom: var(--s-2); }
.c-capability__link { color: var(--red-600); font-size: var(--fs-body); }

/* 6. ProjectCard. No hover zoom. Hover darkens border, underlines link. ---- */
.c-project { display: flex; flex-direction: column;
  border: 1px solid var(--line-200); background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-out); }
.c-project:hover { border-color: var(--line-300); }
.c-project:hover .c-project__link { text-decoration: underline; }
.c-project__media { aspect-ratio: 3 / 2; background: var(--paper-alt); }
.c-project__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-project__body { padding: var(--s-6); display: flex; flex-direction: column;
  gap: var(--s-2); flex: 1; }
@media (min-width: 1024px) { .c-project__body { padding: var(--s-8); } }
.c-project__spec { color: var(--ink-500); font-size: var(--fs-sm); }
.c-project__link { color: var(--red-600); font-size: var(--fs-body);
  margin-top: auto; padding-top: var(--s-4); }

/* 7. ProjectGrid. Never masonry. Equal height. ---------------------------- */
.c-projectgrid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .c-projectgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-projectgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 8. SpecTable. The workhorse. Mono keys, sans values, tnum. -------------- */
.c-spectable { width: 100%; border-collapse: collapse;
  font-feature-settings: "tnum" 1; }
.c-spectable th, .c-spectable td { text-align: left; padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-200); vertical-align: baseline; }
.c-spectable th { font-family: var(--font-mono); font-size: var(--fs-mono);
  font-weight: var(--fw-mono); letter-spacing: var(--tr-mono);
  color: var(--ink-500); width: 40%; }
.c-spectable td { font-size: var(--fs-body); color: var(--ink-900); }

/* 9. ProcessSteps. Vertical. Never a horizontal timeline, icons or arrows. */
.c-steps { list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--line-200); }
.c-steps__item { padding-left: var(--s-6); padding-bottom: var(--s-8);
  position: relative; }
.c-steps__n { display: block; color: var(--red-600); margin-bottom: var(--s-2); }

/* 10. DocumentList -------------------------------------------------------- */
.c-doclist { list-style: none; margin: 0; padding: 0; }
.c-doclist__row { display: flex; align-items: baseline; gap: var(--s-4);
  padding-block: var(--s-4); border-bottom: 1px solid var(--line-200); }
.c-doclist__icon { width: var(--s-4); height: var(--s-4); flex: none; }
.c-doclist__name { font-size: var(--fs-body); color: var(--navy-800); flex: 1; }
.c-doclist__meta { color: var(--ink-500); }

/* 11. CTABand. Max 2 per page. -------------------------------------------- */
.c-ctaband { background: var(--navy-800); color: var(--paper);
  padding-block: var(--s-16); }
@media (min-width: 1024px) { .c-ctaband { padding-block: var(--s-20); } }
.c-ctaband__title { font-size: var(--fs-h2); font-weight: var(--fw-h2);
  line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  color: var(--paper); margin-bottom: var(--s-4); }
.c-ctaband__line { color: var(--on-navy-secondary); margin-bottom: var(--s-8); }
.c-ctaband__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* 12. FormBlock ----------------------------------------------------------- */
.c-form__field { display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-4); }
.c-form__label { color: var(--ink-700); font-size: var(--fs-sm); }
.c-form__req { color: var(--red-600); }
.c-form__input { font-size: var(--fs-body); font-family: var(--font-sans);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-300);
  border-radius: var(--r-2); background: var(--paper); color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease-out); }
.c-form__input:focus-visible { outline: 2px solid var(--navy-800);
  outline-offset: 1px; border-color: var(--navy-800); }
.c-form__help { color: var(--ink-500); font-size: var(--fs-sm); }
.c-form__error { color: var(--red-600); font-size: var(--fs-sm); }
.c-form__ok { color: var(--ok); font-size: var(--fs-sm); }

/* 13. OfficeCard. Exactly three exist. ------------------------------------ */
.c-office { border: 1px solid var(--line-200); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 1024px) { .c-office { padding: var(--s-8); } }
.c-office__city { margin-bottom: var(--s-2); }
.c-office__radius { color: var(--ink-500); font-size: var(--fs-sm);
  margin-top: var(--s-2); }

/* 14. FAQList. Native details/summary. Chevron rotates 90deg. ------------- */
.c-faq__item { border-bottom: 1px solid var(--line-200); }
.c-faq__q { font-size: var(--fs-h4); font-weight: var(--fw-h4);
  line-height: var(--lh-h4); color: var(--navy-800);
  padding-block: var(--s-4); cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: var(--s-4); }
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__chev { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.c-faq__item[open] .c-faq__chev { transform: rotate(90deg); }
.c-faq__a { padding-bottom: var(--s-4); }

/* 15. Breadcrumb ---------------------------------------------------------- */
.c-breadcrumb { font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink-500); padding-block: var(--s-4); }
.c-breadcrumb a { color: var(--ink-500); }
.c-breadcrumb a:hover { color: var(--navy-800); }

/* 16. Footer. NO LICENCE BLOCK (D5, D9). If a licence number ever renders
       anywhere, it renders with "Qualifying agent: Jeff Walsh." in the same
       block. This component deliberately has no slot for one. ------------- */
.c-footer { background: var(--navy-900); color: var(--paper);
  padding-block: var(--s-16); }
.c-footer__cols { display: grid; gap: var(--s-8);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .c-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-footer__head { color: var(--paper); margin-bottom: var(--s-4); }
.c-footer__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2); }
.c-footer__list a { color: var(--on-navy-secondary); text-decoration: none;
  font-size: var(--fs-body); }
.c-footer__list a:hover { color: var(--paper); text-decoration: underline; }
.c-footer__compliance { border-top: 1px solid var(--on-navy-rule);
  margin-top: var(--s-12); padding-top: var(--s-6);
  color: var(--on-navy-secondary); }

/* 17. StickyActionBar. Mobile only. --------------------------------------- */
.c-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--paper); border-top: 1px solid var(--line-200);
  box-shadow: var(--e-1); padding: var(--s-3) var(--s-4);
  display: flex; gap: var(--s-3); }
@media (min-width: 900px) { .c-stickybar { display: none; } }

/* 18. TypographicPlate. The no-photo fallback. Used wherever a publishable
       photo does not exist, including where the image-rights gate blocks one.
       A page that substitutes a plate keeps its layout and section count. -- */
.c-plate { background: var(--navy-800); color: var(--paper);
  padding: var(--s-8); display: flex; flex-direction: column;
  justify-content: center; gap: var(--s-3); aspect-ratio: 4 / 3; }
.c-plate--alt { background: var(--paper-alt); color: var(--navy-800); }
.c-plate__key { color: var(--on-navy-secondary); }
.c-plate--alt .c-plate__key { color: var(--ink-500); }
.c-plate__val { font-size: var(--fs-h4); font-weight: var(--fw-h4);
  line-height: var(--lh-h4); }


/* Dark surfaces repoint the heading colour rather than each component opting in.
   --heading-color is the single hook: set it on the surface, and every u-h*,
   c-hero__title and c-capability__name inside follows without knowing where it
   is. Added 2026-09-09 after dropping the system onto a dark host page. */
.u-section--navy,
.c-ctaband,
.c-plate:not(.c-plate--alt) {
  --heading-color: var(--paper);
}
.c-hero__title { color: var(--heading-color, var(--navy-800)); }
.c-capability__name { color: var(--heading-color, var(--navy-800)); }
.u-section--navy .c-doclist__name,
.u-section--navy .c-capability__scope { color: var(--paper); }
.u-section--navy .c-doclist__meta { color: var(--on-navy-secondary); }

/* Body text on dark surfaces, added 2026-09-09.
 *
 * .c-hero__lead defaulted to --ink-700, which is correct on paper and measured
 * 1.46:1 against --navy-800. Not low contrast: unreadable. The heading fix above
 * routed headings through --heading-color and left body copy behind, so the
 * title was legible and the sentence under it was not.
 *
 * --body-color is the same idea for prose. Surfaces set it once; every lead and
 * scope paragraph inside follows. --on-navy-secondary measures 6.88:1 on navy. */
.u-section--navy,
.c-ctaband,
.c-plate:not(.c-plate--alt) {
  --body-color: var(--on-navy-secondary);
}
.c-hero__lead,
.c-capability__scope,
.c-ctaband__line {
  color: var(--body-color, var(--ink-700));
}
.u-section--navy .u-body,
.u-section--navy p:not([class]) {
  color: var(--body-color, var(--ink-700));
}

/* The eyebrow measured 2.65:1 on navy at 13px. It is small text, so it needs 4.5:1,
 * and it is the first thing above the H1. Routed through --label-color so dark
 * surfaces can lift it without every page overriding a component. */
.u-section--navy,
.c-ctaband,
.c-plate:not(.c-plate--alt) {
  --label-color: var(--on-navy-secondary);
}
.c-hero__eyebrow,
.u-mono--label {
  color: var(--label-color, var(--navy-600));
}

/* Doclist stacks below the content gutter, added 2026-09-09.
 *
 * .c-doclist__row is a flex row with the name and the meta side by side. At 500px
 * the meta ran past the right edge and was clipped: "CGC #1531993, verifiable at
 * FL DBPR por". A prequalification table that truncates the licence number is
 * worse than one that wraps. */
@media (max-width: 640px) {
  .c-doclist__row {
    flex-direction: column;
    gap: var(--s-1);
  }
  .c-doclist__meta { text-align: left; }
}

/* Every surface sets its own colour, added 2026-09-09.
 *
 * A rule that paints a background and leaves colour to inheritance only works on
 * a page whose text colour already suits that background. Dropped onto a dark
 * host, .c-project painted a white card and let white text inherit through: 24
 * descriptions at exactly 1.0:1, the same colour as the paper behind them.
 *
 * .u-section was fixed for this earlier and the same defect was sitting in five
 * more components. Setting colour beside background is the rule, not the
 * exception, so they are all corrected here rather than one at a time as each
 * page finds them. */
.u-section--alt,
.c-project,
.c-header,
.c-stickybar {
  color: var(--ink-900);
}
.c-navsheet {
  color: var(--paper);
}

/* Components set colour on their own prose, added 2026-09-09.
 *
 * Setting colour on a component and letting descendants inherit works only until
 * the host page styles the bare element. css/style.css carries `p { color: ... }`,
 * and an explicit declaration on the element beats inheritance from an ancestor
 * class no matter how specific that class is. The result was 24 card
 * descriptions painted white on a white card: 1.0:1, invisible, while the card
 * itself reported the correct colour.
 *
 * So each surface names the prose it owns. This is the general form of the
 * .u-section and .c-project background fixes above: a component cannot assume
 * anything about the page it lands on, including that bare elements are unstyled. */
.u-section > .u-container p,
.u-section > .u-container li,
.c-project__body p,
.c-plate p,
.c-capability p {
  color: var(--body-color, var(--ink-700));
}
.u-section--navy > .u-container p,
.u-section--navy > .u-container li,
.c-ctaband > .u-container p {
  color: var(--on-navy-secondary);
}
.c-project__body p.c-project__spec,
.c-doclist__meta {
  color: var(--ink-500);
}

/* Category rhythm inside a single section, added 2026-09-09.
 *
 * The case-study hub has 24 cards across 15 verticals. Giving each vertical its
 * own .u-section produced 17 sections and a 8,924px page, roughly 10 screens,
 * because every section carries 64px of padding top and bottom whether it holds
 * one card or four. Categories are subheads inside one section instead. */
.cs-group { margin-top: var(--s-12); }
.cs-group:first-of-type { margin-top: 0; }
.cs-grid { margin-top: var(--s-6); }

/* A hero with no media does not reserve a column for it, added 2026-09-09.
 *
 * .c-hero is 7fr/5fr above 1024px with 128px of block padding, sized for a
 * headline beside an image. Used without a .c-hero__media the right column sits
 * empty and the navy band runs about 250px past the last line of text. Dead
 * space reads as an unfinished page, not a generous one.
 *
 * :has() lets the component notice, so no page has to add a modifier class and
 * no existing hero with media changes. */
@media (min-width: 1024px) {
  .c-hero:not(:has(.c-hero__media)) {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-20);
  }
}

/* A hero inside a section does not pay padding twice, added 2026-09-09.
 *
 * .u-section carries 64px block padding and .c-hero carries 80px, rising to
 * 128px above 1024px. Nested, the hero paid both: 144px of dead band above the
 * headline and the same below it. A before/after comparison made it obvious,
 * the rebuilt page showed less above the fold than the one it replaced while
 * looking calmer. Calmer and emptier are not the same thing.
 *
 * The section owns the outer rhythm, so the hero drops its own when nested. */
.u-section > .u-container > .c-hero,
.u-section > .c-hero {
  padding-block: 0;
}
@media (min-width: 1024px) {
  .u-section > .u-container > .c-hero,
  .u-section > .c-hero {
    padding-block: 0;
  }
}

/* Structural list items opt out of the reading measure, added 2026-09-09.
 *
 * tokens.css sets `p, li, blockquote { max-width: var(--measure) }`, which is
 * correct: 68ch is the readability band and unbounded prose is hard to read.
 * But .c-doclist__row is an <li> used as a two-column layout row, not a
 * paragraph. It inherited the cap and rendered 686px wide inside a 1216px list,
 * leaving half the section empty and the meta column crushed against the name.
 *
 * A token that governs prose should not govern layout. Components that use p or
 * li structurally say so here rather than every page overriding it. */
.c-doclist__row,
.c-doclist,
.c-projectgrid,
.c-capabilities {
  max-width: none;
}
.c-doclist__name { max-width: none; }

/* ============================================================================
   DARK SURFACE MODE, 2026-09-09.

   The library was built light. Applied to three pages and then measured against
   the rest of the site, every other page type came back near-black: county,
   city, blog, homepage, about, portfolio, all rgb(5,10,18) or rgb(5,7,12). The
   three converted pages were the only light ones on 1,527 pages, so the system
   was making the site less uniform rather than more.

   Dark is the brand. The components move to it. Everything below repoints the
   defaults at the --surface tokens; nothing above is deleted, so a light variant
   remains available by setting the surface tokens on a wrapper.
   ============================================================================ */

.u-section {
  background: var(--surface);
  color: var(--on-surface);
}
.u-section--alt {
  background: var(--surface-alt);
  color: var(--on-surface);
}
.u-section--navy {
  background: var(--surface-raised);
  color: var(--on-surface);
}

.u-section,
.u-section--alt,
.u-section--navy,
.c-ctaband,
.c-project,
.c-plate {
  --heading-color: var(--on-surface);
  --body-color: var(--on-surface-muted);
  --label-color: var(--on-surface-muted);
}

.u-h2, .u-h3, .u-h4,
.c-hero__title,
.c-capability__name { color: var(--heading-color, var(--on-surface)); }

.u-section > .u-container p,
.u-section > .u-container li,
.c-project__body p,
.c-plate p,
.c-capability p,
.c-hero__lead,
.c-capability__scope,
.c-ctaband__line { color: var(--body-color, var(--on-surface-muted)); }

.c-project {
  background: var(--surface-raised);
  border-color: var(--surface-rule);
  color: var(--on-surface);
}
.c-project:hover { border-color: var(--red-300); }
.c-project__spec,
.c-doclist__meta { color: var(--on-surface-muted); }
.c-project__link { color: var(--red-300); }

.c-doclist__row { border-bottom-color: var(--surface-rule); }
.c-doclist__name { color: var(--on-surface); }

.c-capability { border-top-color: var(--surface-rule); }

.c-ctaband { background: var(--surface-raised); color: var(--on-surface); }
.c-ctaband__title { color: var(--on-surface); }

.c-plate { background: var(--surface-raised); color: var(--on-surface); }
.c-plate--alt { background: var(--surface-alt); color: var(--on-surface); }

.u-btn--secondary { color: var(--on-surface); border-color: var(--surface-rule); }
.u-btn--secondary:hover { border-color: var(--on-surface-muted); }

/* Red text on a dark surface uses --red-300, added 2026-09-09.
 *
 * tokens.css documents --red-600 as "6.11:1 on white" and --red-300 as "the only
 * red permitted on a navy section". The components were written light, so every
 * red text colour was --red-600. On --surface it measures 3.07:1 and fails at
 * body size. The token file already said which red belongs here; the components
 * were simply pointing at the wrong one. */
.c-capability__link,
.c-project__link,
.c-breadcrumb a,
.c-faq__q,
.c-steps__n,
.c-form__req,
.c-form__error {
  color: var(--red-300);
}