/* BUTTON-SPEC-1: the one focus ring. Loaded last so a component's own resting box-shadow (cards, toasts) can never replace it.
   Light surfaces: --focus-ring (night band carries the 3:1 contrast, amber is the brand edge).
   Dark surfaces (header, hero, on-dark buttons): --focus-ring-dark. Headings and regions that only receive programmatic focus keep no ring. */
:is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="tab"], [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  transition: none; /* the ring appears at once, never animated from a card's resting shadow */
}
:is(.site-header, .hero, .search-xl__under, .examples) :is(a[href], button, summary, input, select, textarea, [tabindex]):focus-visible,
.btn--on-dark:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-dark);
  transition: none;
}
:is(h1, h2, h3, section, div)[tabindex="-1"]:focus-visible { box-shadow: none; }
@media (forced-colors: active) {
  :is(a[href], button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; }
}

/* BUTTON-SPEC-2 */
/* Count badge on a button (rep-card Vibe): 20px round, ink on paper-2. */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; line-height: 1; }
.btn[aria-pressed="true"] .badge { background: var(--paper); color: var(--ink); }
/* Rep card: two buttons share one row (Contact + Vibe), the Discuss entry is a tertiary link under them. */
.rep__actions { flex-wrap: nowrap; }
.rep__actions > .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; }
.rep__discuss { margin: var(--s2) 0 0; position: relative; z-index: 2; }
.rep__discuss .btn--text { padding-left: 0; }
/* Share in the heading row, right-aligned: an icon button with a label. */
.results-head__row, .person-hero__namerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.results-head__row h1, .person-hero__namerow h1 { min-width: 0; flex: 1 1 auto; }
.results-head__share, .person-hero__namerow .share { flex: none; margin: var(--s2) 0 0; }
.btn--share { white-space: nowrap; }
@media (max-width: 479px) { .btn--share { padding: 0; width: var(--btn-h-sm); justify-content: center; font-size: 0; gap: 0; } .btn--share svg { width: 18px; height: 18px; } }
.person-hero__learn, .person-hero__back { margin: var(--s3) 0 0; }
.learn-contribute { margin: var(--s5) 0 var(--s4); }
/* Vibe pane header: eyebrow + title on their own full-width row, actions in a row underneath. */
.vibe-head { flex-direction: column; align-items: stretch; gap: var(--s3); }
.vibe-head__titles { width: 100%; }
.vibe-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* Footer "Privacy settings" stays a button element but reads like the other footer links. */
.footer-link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.footer-link:hover { color: var(--ink); }
/* Header 1101-1260px: labelled actions + 6 nav links + 180px search need ~30px more than the viewport gives; tighter link padding keeps account and language inside. */
@media (min-width: 1101px) and (max-width: 1260px) { .site-nav a { padding-left: 4px; padding-right: 4px; } .site-header__inner { gap: var(--s2); } }
/* A long signed-in name never pushes the account button off screen. */
.site-nav__account { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .site-nav.is-open .site-nav__account { max-width: none; } }
@media (min-width: 761px) and (max-width: 900px) { .site-nav a { padding-left: 4px; padding-right: 4px; } .site-nav__account { max-width: 96px; } }
/* 761-1000px: the wordmark gives way to the mark (the link keeps its accessible name) and nav type tightens, so long French labels fit. */
@media (min-width: 761px) and (max-width: 1100px) { .site-header .brand__name { display: none; } .site-nav a { font-size: 13px; padding-left: 3px; padding-right: 3px; } .site-nav { gap: 2px; } .site-header__inner { gap: var(--s2); } }
/* French labels are about 60% longer: the two header actions stay icon-only (names kept) at every desktop width so account + language never leave the screen. */
@media (min-width: 1101px) {
  :lang(fr) .site-discuss--desk span, :lang(fr) .site-tcmcp--desk .site-tcmcp__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :lang(fr) .site-discuss--desk, :lang(fr) .site-tcmcp--desk { min-width: 36px; justify-content: center; padding: 6px 9px; }
}
/* Data page: same container width as the other pages (it was a 760px column); prose keeps a readable line length. */
.data2 { max-width: var(--page); }
.data2 > p, .data2 .data2-block > p, .data2 li { max-width: 72ch; }
/* Share sits at the right edge of a heading row: its panel opens leftwards so it stays on screen. */
.results-head__row .share__panel, .person-hero__namerow .share__panel { left: auto; right: 0; }
/* Big search fields draw the ring on the whole field (:focus-within); the input inside must not draw a second one. */
@media not (forced-colors: active) { .search-xl__field.search-xl__field input:focus-visible { box-shadow: none; outline: none; } }