/* ==========================================================================
   On manifeste — "gilet jaune" theme
   One loud element: the header is a high-visibility vest (fluorescent yellow
   crossed by two reflective bands). Everything else stays black, white and
   asphalt. Yellow is only ever a surface with black text on it (never yellow
   text on white: it fails contrast).
   ========================================================================== */

:root,
[data-md-color-scheme='default'],
[data-md-color-primary='custom'],
[data-md-color-accent='custom'] {
  --ap-vest: #ddf20f; /* fluorescent yellow (EN ISO 20471 class) */
  --ap-vest-deep: #c4d900; /* pressed / hover yellow */
  --ap-ink: #000000;
  --ap-paper: #ffffff;
  --ap-asphalt: #202225;
  --ap-olive: #3d4700; /* link hover on white, 10.6:1 */
  --ap-silver: #c3c8ce;
  --ap-silver-hi: #eef0f2;
  --ap-band: 7px; /* reflective band thickness */
  --ap-radius: 4px;

  /* Material tokens */
  --md-primary-fg-color: var(--ap-vest);
  --md-primary-fg-color--light: var(--ap-vest);
  --md-primary-fg-color--dark: var(--ap-vest-deep);
  --md-primary-bg-color: var(--ap-ink);
  --md-primary-bg-color--light: rgba(0, 0, 0, 0.7);
  --md-accent-fg-color: var(--ap-olive);
  --md-accent-fg-color--transparent: rgba(221, 242, 15, 0.35);
  --md-accent-bg-color: var(--ap-ink);
  --md-typeset-a-color: var(--ap-ink);
  --md-footer-bg-color: var(--ap-ink);
  --md-footer-bg-color--dark: var(--ap-ink);
  --md-footer-fg-color: var(--ap-paper);

  --ap-surface: var(--ap-paper);
  --ap-text: var(--ap-ink);
  --ap-line: var(--ap-ink);
  --ap-muted: #4a4d52;
}

[data-md-color-scheme='slate'],
[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
  --md-default-bg-color: var(--ap-asphalt);
  --md-default-fg-color: #f2f3f4;
  --md-default-fg-color--light: #c9ccd0;
  --md-default-fg-color--lighter: #8d9197;
  --md-default-fg-color--lightest: #3a3d42;
  --md-accent-fg-color: var(--ap-vest);
  --md-typeset-a-color: var(--ap-vest);
  --md-code-bg-color: #17181a;

  --ap-surface: #26292d;
  --ap-text: #f2f3f4;
  --ap-line: var(--ap-silver);
  --ap-muted: #c9ccd0;
}

/* --- Type ---------------------------------------------------------------- */
body {
  --md-text-font-family: 'Barlow', system-ui, sans-serif;
}

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic,
.md-tabs__link {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}

.md-typeset h1 {
  margin-bottom: 0.6em;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ap-text);
}

.md-typeset h2 {
  margin-top: 2em;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ap-text);
}

.md-typeset h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ap-text);
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: 42em; /* ~75 characters */
}

/* Admonition titles are <p> but must span the whole box. */
.md-typeset .admonition-title {
  max-width: none;
}

/* --- The vest: header + reflective bands --------------------------------- */
.md-header {
  background-color: var(--ap-vest);
  color: var(--ap-ink);
  box-shadow: none;
}

/* Two reflective bands across the bottom of the header, like on the vest. */
.md-header::after {
  content: '';
  display: block;
  height: calc(var(--ap-band) * 3);
  background:
    linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.85) 48%, transparent 56% 100%),
    linear-gradient(
      to bottom,
      var(--ap-silver) 0 var(--ap-band),
      var(--ap-vest) var(--ap-band) calc(var(--ap-band) * 2),
      var(--ap-silver) calc(var(--ap-band) * 2) 100%
    );
}

.md-header__topic {
  font-size: 1.05rem;
  font-weight: 800;
}

.md-tabs {
  background-color: var(--ap-vest);
  color: var(--ap-ink);
}

.md-tabs__link {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.75;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--ap-ink) !important;
  text-decoration: underline 3px;
  text-underline-offset: 6px;
}

.md-header__button.md-logo img {
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
}

.md-search__form {
  background-color: rgba(0, 0, 0, 0.08);
}

.md-search__input::placeholder,
.md-search__icon {
  color: var(--ap-ink);
}

/* --- Links: black text, yellow highlighter underline --------------------- */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: var(--ap-vest-deep);
  text-decoration-thickness: 0.3em;
  text-underline-offset: -0.12em;
  text-decoration-skip-ink: none;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: var(--ap-vest);
}

[data-md-color-scheme='slate'] .md-typeset a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Buttons are links too, but without the underline, and spaced when they wrap. */
.md-typeset .md-button {
  margin: 0 0.4rem 0.6rem 0;
  text-decoration: none;
}

/* --- Focus: black + yellow double ring, visible in both modes ------------ */
:focus-visible,
.md-typeset a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ap-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ap-vest);
}

/* --- Navigation ---------------------------------------------------------- */
.md-nav__link--active {
  font-weight: 700;
  color: var(--ap-text) !important;
  box-shadow: inset 4px 0 0 var(--ap-vest-deep);
  padding-left: 0.5rem;
}

.md-nav__link:hover {
  color: var(--md-accent-fg-color) !important;
}

.md-content .md-path__link {
  color: var(--ap-muted);
}

/* --- Home grid cards: outlined panels, no shadow ------------------------- */
.md-typeset .grid.cards > ul > li {
  position: relative;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: none;
  transition: background-color 0.15s;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  background: var(--ap-vest);
  color: var(--ap-ink);
  border-color: var(--ap-ink);
}

.md-typeset .grid.cards > ul > li:hover a,
.md-typeset .grid.cards > ul > li:focus-within a {
  color: var(--ap-ink);
}

.md-typeset .grid.cards > ul > li hr {
  border-bottom: 2px solid currentColor;
  opacity: 0.2;
}

/* Card icons follow the text colour (yellow on white would fail contrast). */
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards a .twemoji {
  color: var(--ap-text);
}

/* Make the whole card clickable through its last link. */
.md-typeset .grid.cards > ul > li p:last-child a::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Admonitions: warning reads as a hazard tape ------------------------- */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: none;
}

/* Solid yellow title for legibility, hazard stripes as a band under it. */
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  border-bottom: 6px solid transparent;
  background:
    linear-gradient(var(--ap-vest), var(--ap-vest)) padding-box,
    repeating-linear-gradient(-45deg, var(--ap-vest) 0 10px, var(--ap-ink) 10px 20px) border-box;
  color: var(--ap-ink);
  font-weight: 700;
  text-shadow: none;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--ap-ink);
}

.md-typeset .warning > .admonition-title > * {
  color: var(--ap-ink);
}

[data-md-color-scheme='slate'] .md-typeset .admonition.warning {
  border-color: var(--ap-vest);
}

/* --- Tags ---------------------------------------------------------------- */
.md-typeset .md-tag {
  border: 1.5px solid var(--ap-line);
  border-radius: 1rem;
  background: transparent;
  color: var(--ap-text);
  font-weight: 600;
}

.md-typeset .md-tag:hover {
  background: var(--ap-vest);
  border-color: var(--ap-ink);
  color: var(--ap-ink);
}

/* --- Anchor "copy link" on headings (docs/javascripts/extra.js) ---------- */
.md-content .headerlink {
  position: relative;
  margin-left: 0.4rem;
  color: var(--ap-muted) !important;
  opacity: 0;
  transition: opacity 0.15s;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-content .headerlink:focus-visible {
  opacity: 1;
}

.md-content .headerlink::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.5rem;
  border-radius: var(--ap-radius);
  background: var(--ap-ink);
  color: var(--ap-vest);
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.md-content .headerlink:hover::before,
.md-content .headerlink.copied::before {
  opacity: 1;
}

.md-content .headerlink.copied::before {
  content: '✓';
}

/* --- Footer: black, with a reflective band on top ------------------------ */
.md-footer {
  border-top: var(--ap-band) solid var(--ap-silver);
}

.md-footer-meta {
  background-color: var(--ap-ink);
}

.md-footer-meta,
.md-footer-meta .md-copyright,
.md-footer-meta a {
  color: #e7e9eb;
}

.md-footer-meta a:hover {
  color: var(--ap-vest);
}

/* --- Mermaid Diagram Interactivity (Zoom, Pan, Fullscreen) --- */
.mermaid-wrapper {
  position: relative;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  background-color: var(--md-default-bg-color);
  margin-bottom: 1.5rem;
  overflow: hidden; /* Constrain the uncollapse overlay */
  z-index: 1; /* Stays below header */
}

.mermaid {
  position: relative;
  overflow: hidden; /* Hide overflow to save vertical space */
  max-height: 250px; /* Constrain tall schemas */
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease;
  padding: 1rem;
}

/* Expanded state (Inline Uncollapse) */
.mermaid.expanded {
  max-height: none;
  overflow: auto;
  cursor: grab;
  padding-bottom: 4rem; /* Buffer for sticky bottom collapse bar */
}

.mermaid.expanded:active {
  cursor: grabbing;
}

/* Enable zooming transform on the inner SVG (or shadow DOM elements via JS) */
.mermaid svg,
.mermaid {
  transform-origin: top left;
  transition: transform 0.15s ease-out;
  max-width: none !important; /* Allow zooming past 100% */
}

/* Fullscreen Modal Override */
.mermaid-wrapper.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  border-radius: 0;
  border: none;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px); /* Premium glass effect */
}

.mermaid-wrapper.fullscreen .mermaid {
  max-height: none;
  height: auto;
  width: auto;
  min-width: calc(100% - 4rem);
  min-height: calc(100% - 4rem);
  overflow: visible;
  cursor: grab;
  padding: 2rem;
  box-sizing: border-box;
  display: block;
  background-color: var(
    --md-default-bg-color
  ) !important; /* Automatic: Pure Black or Slate for Dark, White for Light */
  margin: 2rem auto;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--md-default-fg-color--lightest); /* Subtle border to define the card against the blur */
}

/* Bottom Uncollapse Overlay */
.mermaid-uncollapse {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--md-default-bg-color) 15%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.75rem;
  cursor: pointer;
  z-index: 2; /* Stays below header */
  pointer-events: none; /* Gradient doesn't block clicks */
}

.mermaid-uncollapse span {
  background: var(--md-primary-fg-color);
  color: var(--ap-vest);
  padding: 0.3rem 1.25rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto; /* Make the button clickable */
}

.mermaid-uncollapse:hover span {
  background: var(--md-primary-fg-color--light);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px -1px rgba(0, 0, 0, 0.25);
}

/* When expanded, turn it into a sticky Collapse Bar */
.mermaid-wrapper.is-expanded .mermaid-uncollapse {
  position: sticky;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to top, var(--md-default-bg-color) 60%, transparent 100%);
  pointer-events: none;
}

.mermaid-wrapper.is-expanded .mermaid-uncollapse span {
  background: var(--md-default-fg-color--lighter);
  color: var(--md-default-bg-color);
  pointer-events: auto;
}

.mermaid-wrapper.is-expanded .mermaid-uncollapse:hover span {
  background: var(--md-primary-fg-color);
  color: var(--ap-vest);
}

/* Hide Uncollapse if fullscreen */
.mermaid-wrapper.fullscreen .mermaid-uncollapse {
  display: none !important;
}

/* Floating Controls (Zoom / Fullscreen) */
.mermaid-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 0.25rem;
  z-index: 3; /* Above diagram (1) but below site header (4) */
  opacity: 0.85; /* Always visible */
  transition: opacity 0.3s ease;
}

.mermaid-wrapper:hover .mermaid-controls,
.mermaid-controls:focus-within {
  opacity: 1;
}

.mermaid-btn {
  background-color: transparent !important; /* Fully transparent background for a quiet look */
  backdrop-filter: none;
  color: var(--md-default-fg-color--light);
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none; /* Removed shadows for minimal look */
  transition: all 0.2s ease;
}

.mermaid-btn:hover {
  color: var(--md-primary-fg-color);
  transform: scale(1.15);
}

.mermaid-wrapper.fullscreen .mermaid-btn {
  background-color: transparent !important; /* Explicitly ensure no white background in fullscreen */
  color: var(--ap-vest) !important; /* Force high-contrast white icon */
  opacity: 1 !important; /* No transparency for fullscreen controls */
  box-shadow: none !important;
  border: none !important;
}

.mermaid-wrapper.fullscreen .mermaid-btn svg {
  opacity: 1 !important; /* Ensure icons aren't weirdly muted */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); /* Add legibility against complex diagrams */
}

.mermaid-wrapper.fullscreen .mermaid-btn:hover {
  color: var(--md-primary-fg-color--light) !important;
}

.mermaid-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.6; /* Higher icon transparency as requested */
  transition: opacity 0.2s ease;
}

.mermaid-btn:hover svg {
  opacity: 1;
}

.mermaid-spinner {
  animation: mermaid-spin 1s linear infinite;
  transform-origin: center center;
  display: block;
}

@keyframes mermaid-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Resource directory (docs/javascripts/directory.js)
   ========================================================================== */
.directory__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.directory__search,
.directory__category,
.directory__clear {
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font: inherit;
  font-size: 0.8rem;
}

.directory__search {
  flex: 1 1 16rem;
  font-size: 0.9rem;
}

.directory__clear {
  font-weight: 600;
  cursor: pointer;
}

.directory__clear:hover {
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.directory__tags,
.directory__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.directory__tag {
  min-height: 1.6rem;
  padding: 0.1rem 0.55rem;
  border: 1.5px solid var(--ap-line);
  border-radius: 1rem;
  background: transparent;
  color: var(--ap-text);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.directory__tag:hover {
  background: var(--md-accent-fg-color--transparent);
}

.directory__tag.is-active {
  background: var(--ap-vest);
  border-color: var(--ap-ink);
  color: var(--ap-ink);
}

.directory__tags-toggle {
  min-height: 1.6rem;
  padding: 0.1rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--ap-text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.directory__count {
  margin: 0.9rem 0 0.5rem;
  color: var(--ap-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.directory__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.8rem;
}

.directory__card {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
}

.md-typeset .directory__card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  line-height: 1.15;
}

.md-typeset .directory__card p {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.76rem;
}

/* Category: a strip of vest fabric. */
.directory__badge {
  align-self: flex-start;
  padding: 0.05rem 0.45rem;
  border-radius: 2px;
  background: var(--ap-vest);
  color: var(--ap-ink);
  font-size: 0.66rem;
  font-weight: 700;
}

.md-typeset .directory__card .directory__phone {
  margin: 0 0 0.6rem;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.md-typeset .directory__card .directory__checked {
  margin: auto 0 0.5rem;
  color: var(--ap-muted);
  font-size: 0.64rem;
}

.directory__empty {
  padding: 1rem;
  border: 2px dashed var(--ap-line);
  border-radius: var(--ap-radius);
}

/* ==========================================================================
   Offline panel in the footer (docs/javascripts/pwa.js)
   ========================================================================== */
.pwa-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.7rem;
}

.pwa-panel:empty {
  display: none;
}

.pwa-panel__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pwa-panel__btn {
  min-height: 1.8rem;
  padding: 0.15rem 0.7rem;
  border: 1.5px solid var(--ap-silver);
  border-radius: 1rem;
  background: transparent;
  color: #e7e9eb;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pwa-panel__btn:hover,
.pwa-panel.has-update .pwa-panel__btn:first-child {
  background: var(--ap-vest);
  border-color: var(--ap-vest);
  color: var(--ap-ink);
}

/* --- Header offline status indicator badge -------------------------------- */
.md-header__option.pwa-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  margin: 0 0.25rem;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 9999px;
  color: var(--ap-ink);
  font-family: var(--md-text-font-family);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.md-header__option.pwa-status:hover {
  background: rgba(0, 0, 0, 0.14);
  border-color: var(--ap-ink);
}

.md-header__option.pwa-status:active {
  transform: scale(0.97);
}

.pwa-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

/* State: Ready offline */
.pwa-status--ready .pwa-status__dot {
  background-color: #0b7a2d;
}

/* State: Preparing offline copy */
.pwa-status--preparing .pwa-status__dot {
  background-color: #b25900;
  animation: pwa-pulse 1.2s infinite ease-in-out;
}

/* State: Offline mode active */
.pwa-status--offline {
  background: var(--ap-ink) !important;
  color: var(--ap-vest) !important;
  border-color: var(--ap-ink) !important;
}

.pwa-status--offline .pwa-status__dot {
  background-color: var(--ap-vest);
  box-shadow: 0 0 0 2px rgba(221, 242, 15, 0.4);
  animation: pwa-pulse 1.5s infinite ease-in-out;
}

@keyframes pwa-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

@media screen and (max-width: 44.9375em) {
  .md-header__option.pwa-status {
    padding: 0.25rem 0.45rem;
    margin: 0 0.15rem;
  }

  .md-header__option.pwa-status:not(.pwa-status--offline) .pwa-status__label {
    display: none;
  }
}

/* ==========================================================================
   Small screens and motion
   ========================================================================== */
@media screen and (max-width: 44.9375em) {
  .md-typeset h1 {
    font-size: 1.9rem;
  }

  :root {
    --ap-band: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   History timeline (overrides/partials/history-timeline.html)
   A real chronology, so dates lead. The spine is a reflective band.
   ========================================================================== */
.md-typeset .timeline {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.md-typeset .timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6.2rem;
  width: var(--ap-band);
  background: var(--ap-silver);
}

.md-typeset ol.timeline > li.timeline__event {
  position: relative;
  margin-left: 0;
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: 1.8rem;
  margin: 0 0 1.4rem;
}

.md-typeset .timeline__event::before {
  content: '';
  position: absolute;
  top: 0.55rem;
  left: calc(6.2rem - 4px);
  width: calc(var(--ap-band) + 8px);
  height: calc(var(--ap-band) + 8px);
  border: 2px solid var(--ap-ink);
  border-radius: 50%;
  background: var(--ap-vest);
}

.md-typeset .timeline__event--repression::before,
.md-typeset .timeline__event--discrimination::before,
.md-typeset .timeline__event--impunite::before,
.md-typeset .timeline__event--deni-democratique::before,
.md-typeset .timeline__event--privatisation::before {
  background: var(--ap-ink);
  border-color: var(--ap-silver);
}

.md-typeset .timeline__date {
  text-align: right;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ap-muted);
}

.md-typeset .timeline__year {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ap-text);
}

.md-typeset .timeline__kind {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ap-muted);
}

.md-typeset .timeline__title {
  margin: 0.1rem 0 0.3rem;
  font-size: 1.2rem;
}

.md-typeset .timeline__title a {
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.md-typeset .timeline__body p {
  margin: 0;
}

/* Kind filters (shown by docs/javascripts/extra.js) and period jump links. */
.md-typeset .timeline-filters,
.md-typeset .timeline-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 1rem 0;
}

.md-typeset .timeline-filters[hidden] {
  display: none;
}

.md-typeset .timeline-filters__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ap-muted);
}

.md-typeset .timeline-filters__chip,
.md-typeset .timeline-periods a {
  padding: 0.2rem 0.7rem;
  border: 1.5px solid var(--ap-line);
  border-radius: 1rem;
  background: transparent;
  color: var(--ap-text);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.md-typeset .timeline-filters__chip[aria-pressed='true'] {
  border-color: var(--ap-ink);
  background: var(--ap-vest);
  color: var(--ap-ink);
  font-weight: 700;
}

.md-typeset ol.timeline > li.timeline__period {
  margin: 2rem 0 1rem;
  padding-left: 7rem;
  list-style: none;
}

.md-typeset ol.timeline > li.timeline__period h3 {
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.6rem;
  background: var(--ap-ink);
  color: var(--ap-vest);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1rem;
}

.md-typeset ol.timeline > li[hidden] {
  display: none;
}

.md-typeset .timeline__sources {
  font-size: 0.68rem;
  color: var(--ap-muted);
}

.md-typeset .timeline__permalink {
  font-size: 0.8em;
  color: var(--ap-muted);
  text-decoration: none;
  opacity: 0.6;
}

.md-typeset .timeline__end {
  display: block;
  font-size: 0.7rem;
}

.md-typeset .timeline__links {
  font-size: 0.7rem;
}

/* Long descriptions are folded on phones (docs/javascripts/extra.js adds the toggle). */
.md-typeset .timeline__desc.is-folded {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.md-typeset .timeline__more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-typeset-a-color);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .timeline::before {
    left: 0.3rem;
  }

  /* Same specificity as the desktop rule (ol.timeline > li), otherwise it would not apply. */
  .md-typeset ol.timeline > li.timeline__event {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-left: 1.6rem;
  }

  .md-typeset ol.timeline > li.timeline__event::before {
    left: 0;
  }

  .md-typeset ol.timeline > li.timeline__period {
    padding-left: 1.6rem;
  }

  .md-typeset .timeline__date {
    text-align: left;
  }

  .md-typeset .timeline__year {
    display: inline;
    font-size: 1.2rem;
  }

  .md-typeset .timeline__end {
    display: inline;
    margin-left: 0.3em;
  }
}

/* ==========================================================================
   Install suggestion: small card at the bottom of the screen (docs/javascripts/pwa.js)
   Shown now and then, never over emergency pages; closing it snoozes it for 14 days.
   ========================================================================== */
/* Bottom-right stack (overrides/main.html): SOS button above the install card. */
.fab-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
  pointer-events: none;
}

.fab-stack > * {
  pointer-events: auto;
}

/* SOS floating action button: emergency numbers one tap away on every page. */
.sos-fab {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.1rem;
  border: 3px solid var(--ap-vest);
  border-radius: 1.5rem;
  background-color: var(--ap-ink);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  color: var(--ap-vest) !important;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.sos-fab svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentcolor;
}

.sos-fab:hover,
.sos-fab:focus-visible {
  outline: 3px solid var(--ap-ink);
  outline-offset: 2px;
  transform: scale(1.05);
}

.pwa-banner {
  position: relative; /* anchors the close button to the card, not to the button stack */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
  width: min(24rem, calc(100vw - 2rem));
  padding: 0.8rem 2.4rem 0.8rem 0.9rem;
  border: 3px solid var(--ap-ink);
  border-top: 6px solid var(--ap-silver);
  border-radius: var(--ap-radius);
  background: var(--ap-ink);
  color: #f2f3f4;
  font-size: 0.7rem;
}

.pwa-banner[hidden] {
  display: none;
}

.pwa-banner__close {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  background: none;
  color: #f2f3f4;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.pwa-banner__text {
  margin: 0;
  line-height: 1.45;
}

.pwa-banner__status {
  color: var(--ap-vest);
}

.pwa-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.pwa-banner__hint {
  color: #c9ccd0;
}

.pwa-banner .pwa-panel__btn {
  color: #f2f3f4;
}

.pwa-banner .pwa-banner__install {
  background: var(--ap-vest);
  border-color: var(--ap-vest);
  color: var(--ap-ink);
}

/* Update popup: a modal dialog in the same dark card style as the install banner. */
.pwa-update {
  box-sizing: border-box;
  width: min(24rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border: 3px solid var(--ap-ink);
  border-top: 6px solid var(--ap-silver);
  border-radius: var(--ap-radius);
  background: var(--ap-ink);
  color: #f2f3f4;
}

.pwa-update::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.pwa-update__title {
  margin: 0 0 0.4rem;
  color: var(--ap-vest);
  font-size: 0.9rem;
  font-weight: 800;
}

.pwa-update__text {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  line-height: 1.45;
}

.pwa-update__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pwa-update .pwa-update__apply {
  background: var(--ap-vest);
  border-color: var(--ap-vest);
  color: var(--ap-ink);
}

.pwa-update .pwa-panel__btn:focus-visible {
  outline: 3px solid var(--ap-vest);
  outline-offset: 2px;
}

@media screen and (max-width: 44.9375em) {
  .pwa-banner {
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100vw - 1rem);
  }
}

@media print {
  .fab-stack,
  .pwa-banner,
  .pwa-update {
    display: none !important;
  }
}

/* --- Directory: situations, counts, highlights --------------------------- */
.directory__situations,
.directory__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.directory__situation {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  color: var(--ap-ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.directory__situation:hover {
  background: var(--ap-vest-deep);
}

.directory__situation.is-active {
  background: var(--ap-ink);
  color: var(--ap-vest);
}

[data-md-color-scheme='slate'] .directory__situation.is-active {
  border-color: var(--ap-vest);
}

.directory__tag-count {
  margin-left: 0.3rem;
  font-weight: 400;
  opacity: 0.7;
}

.directory__tag-count:empty {
  display: none;
}

.md-typeset .directory__card mark {
  padding: 0 0.1em;
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.directory__card.is-target {
  outline: 4px solid var(--ap-vest);
  outline-offset: 2px;
}

.directory__empty .directory__suggestions {
  margin: 0.6rem 0 0;
}

/* --- Guides: checklists and tables ---------------------------------------- */
.md-typeset .task-list-control [type='checkbox']:checked + .task-list-indicator::before {
  background-color: var(--ap-ink);
}

[data-md-color-scheme='slate']
  .md-typeset
  .task-list-control
  [type='checkbox']:checked
  + .task-list-indicator::before {
  background-color: var(--ap-vest);
}

.md-typeset table:not([class]),
.md-typeset table.table--cards {
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.45;
}

.md-typeset table:not([class]) th,
.md-typeset table.table--cards th {
  background: var(--ap-vest);
  color: var(--ap-ink);
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 2px solid var(--ap-ink);
}

.md-typeset table:not([class]) th:not(:last-child),
.md-typeset table.table--cards th:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.md-typeset table:not([class]) td,
.md-typeset table.table--cards td {
  padding: 0.55rem 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) td:not(:last-child),
.md-typeset table.table--cards td:not(:last-child) {
  border-right: 1px solid var(--md-default-fg-color--lightest);
}

/* Lignes alternées (zebra striping style feuille de calcul) */
.md-typeset table:not([class]) tbody tr:nth-child(even),
.md-typeset table.table--cards tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.025);
}

[data-md-color-scheme='slate'] .md-typeset table:not([class]) tbody tr:nth-child(even),
[data-md-color-scheme='slate'] .md-typeset table.table--cards tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.035);
}

/* Survol de ligne interactif pour faciliter le repérage horizontal */
.md-typeset table:not([class]) tbody tr:hover,
.md-typeset table.table--cards tbody tr:hover {
  background-color: rgba(221, 242, 15, 0.14);
}

[data-md-color-scheme='slate'] .md-typeset table:not([class]) tbody tr:hover,
[data-md-color-scheme='slate'] .md-typeset table.table--cards tbody tr:hover {
  background-color: rgba(221, 242, 15, 0.1);
}

.md-typeset .directory__card .directory__stores,
.md-typeset .directory__card .directory__socials,
.md-typeset .directory__card .directory__sources,
.md-typeset .parcours__result .directory__stores,
.md-typeset .parcours__result .directory__socials,
.md-typeset .parcours__result .directory__sources {
  margin: 0.2rem 0 0.4rem;
  color: var(--ap-muted);
  font-size: 0.64rem;
}

/* Footnotes act as the page's source list. */
.md-typeset .footnote {
  font-size: 0.7rem;
  color: var(--ap-muted);
}

/* ==========================================================================
   SOS page and pocket card (overrides/partials/sos.html)
   ========================================================================== */
.md-typeset .sos__numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset ul.sos__numbers {
  margin-left: 0;
}

[dir] .md-typeset ul.sos__numbers > li {
  margin: 0;
}

.md-typeset .pocket__blank {
  display: inline-block;
  width: 12rem;
  max-width: 60%;
  border-bottom: 1px solid currentColor;
}

.md-typeset .sos__call {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem;
  border: 3px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  color: var(--ap-ink);
  text-decoration: none;
}

.md-typeset .sos__call:hover,
.md-typeset .sos__call:focus-visible {
  background: var(--ap-ink);
  color: var(--ap-vest);
}

.md-typeset .sos__number {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.md-typeset .sos__label {
  font-weight: 700;
}

.md-typeset .sos__detail {
  display: block;
  margin-top: 0.25rem;
  color: var(--ap-muted);
  font-size: 0.68rem;
}

.md-typeset .sos__numbers--legal .sos__number {
  font-size: 1.5rem;
}

/* Pocket card: two sides, sized to fold into a pocket once printed. */
.md-typeset .pocket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.md-typeset .pocket__side {
  padding: 0.8rem 1rem;
  border: 2px dashed var(--ap-line);
  border-radius: var(--ap-radius);
}

.md-typeset .pocket__side h3 {
  margin-top: 0.4rem;
}

@media print {
  .md-header,
  .md-tabs,
  .md-banner,
  .md-sidebar,
  .md-footer,
  .md-content__button,
  .md-tags,
  .pocket__print {
    display: none !important;
  }

  .md-typeset .pocket {
    grid-template-columns: 1fr 1fr;
    font-size: 9pt;
  }

  .md-typeset .pocket__side {
    break-inside: avoid;
    border-color: #000;
  }

  .md-typeset .sos__numbers {
    grid-template-columns: 1fr;
    gap: 0.15rem;
    margin: 0.3rem 0;
  }

  .md-typeset .sos__call {
    flex-direction: row;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0;
    border: 0;
    background: none;
  }

  .md-typeset .sos__number,
  .md-typeset .sos__numbers--legal .sos__number {
    font-size: 12pt;
  }

  .md-typeset .sos__detail {
    display: none;
  }
}

/* --- Footer signature ("fait avec amour par") ---------------------------- */
.md-footer-love {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0;
}

.md-footer-love__mascot {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border: 2px solid var(--ap-vest);
  border-radius: 50%;
  background: var(--ap-asphalt);
}

.md-footer-love__heart {
  color: var(--ap-vest);
}

.md-footer-love__credit {
  display: block;
  color: #9ea3a9;
  font-size: 0.6rem;
}

/* --- Review / verification badges --------------------------------------- */
.md-typeset .review-badge {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--ap-ink);
  border-left-width: 8px;
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font-size: 0.75rem;
  font-weight: 600;
}

[data-md-color-scheme='slate'] .md-typeset .review-badge {
  border-color: var(--ap-vest);
}

.directory__unconfirmed {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.05rem 0.45rem;
  border: 1.5px dashed var(--ap-line);
  border-radius: 2px;
  color: var(--ap-text);
  font-size: 0.66rem;
  font-weight: 700;
}

.md-typeset .pocket__qr {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.6rem;
  font-size: 0.68rem;
}

.md-typeset .pocket__qr img {
  flex: none;
  background: #fff;
}

/* --- Gains (history page) ------------------------------------------------- */
.md-typeset .timeline__gains {
  margin-top: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-left: 4px solid var(--ap-vest-deep);
  background: var(--md-accent-fg-color--transparent);
  font-size: 0.75rem;
}

[dir] .md-typeset ul.gains {
  margin-left: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset ul.gains > li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}

.md-typeset .gains__year {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--ap-text);
}

/* ==========================================================================
   Guided search "Je suis… et je veux…" (docs/javascripts/parcours.js)
   ========================================================================== */
.md-typeset .parcours__step {
  margin: 0.8rem 0 0.6rem;
  font-size: 1.9rem;
  font-weight: 800;
}

.parcours__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 3px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font: inherit;
  font-size: 1rem;
}

.parcours__choices,
.parcours__others {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.8rem 0;
}

.parcours__choice {
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  color: var(--ap-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.parcours__choice:hover {
  background: var(--ap-ink);
  color: var(--ap-vest);
}

.parcours__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ap-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.md-typeset .parcours__crumb,
.md-typeset .parcours__status {
  color: var(--ap-muted);
}

.md-typeset .parcours__urgent {
  padding: 0.6rem 0.8rem;
  border: 3px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  font-weight: 700;
}

.md-typeset .parcours__urgent a {
  color: var(--ap-ink);
}

.parcours__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.7rem;
}

.md-typeset .parcours__result {
  padding: 0.8rem 1rem;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
}

.md-typeset .parcours__result h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.md-typeset .parcours__result--guide,
.md-typeset .parcours__result--page {
  border-left-width: 8px;
  border-left-color: var(--ap-vest-deep);
}

.md-typeset .parcours__call {
  display: inline-block;
  margin-top: 0.3rem;
  font-weight: 700;
}

.parcours__rotator {
  padding: 0 0.3rem;
  border: 0;
  border-bottom: 4px solid var(--ap-ink);
  background: var(--ap-vest);
  color: var(--ap-ink);
  font: inherit;
  cursor: pointer;
}

[data-md-color-scheme='slate'] .parcours__rotator {
  border-bottom-color: var(--ap-silver);
}

/* Rendered as a link on some pages: in dark mode links are yellow, so keep the ink colour
   on the yellow background in every state. */
.md-typeset a.parcours__rotator,
.md-typeset a.parcours__rotator:hover,
.md-typeset a.parcours__rotator:focus,
.md-typeset a.parcours__rotator:visited {
  color: var(--ap-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .parcours__rotator {
    animation: parcours-fade 2.5s ease-in-out infinite;
  }
}

@keyframes parcours-fade {
  0%,
  100% {
    opacity: 0.55;
  }
  12%,
  88% {
    opacity: 1;
  }
}

/* --- Documented repression and disinformation ----------------------------- */
.md-typeset .documented__claim {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ap-muted);
}

/* A disproved statement at the bottom of an event card. */
.md-typeset .timeline__rebuttal {
  margin: 0.8rem 0 0.2rem;
  padding: 0.1rem 0 0.1rem 0.8rem;
  border-left: 4px solid var(--ap-vest-deep);
}

.md-typeset .timeline__rebuttal-title {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
}

.md-typeset .documented__index {
  padding-left: 1rem;
}

.md-typeset .documented__proofs {
  font-size: 0.7rem;
}

/* --- Injured and killed timeline ------------------------------------------ */
.md-typeset .victims__toll {
  margin: 0.1rem 0 0.3rem;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.md-typeset .victims__justice {
  font-size: 0.72rem;
}

/* Judicial outcome badge: convictions solid, everything else outlined. */
.md-typeset .victims__verdict {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1.5px solid var(--ap-line);
  border-radius: 2px;
  font-weight: 700;
}

.md-typeset .victims__verdict--convicted {
  background: var(--ap-text);
  color: var(--ap-surface);
}

.md-typeset .victims__verdict--pending {
  border-style: dashed;
}

.md-typeset .victims__checked {
  margin: 0;
  color: var(--ap-muted);
  font-size: 0.64rem;
}

.md-typeset .victims__censuses li {
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   Resource Contact Card Modal (docs/javascripts/extra.js)
   ========================================================================== */
dialog.contact-card:modal {
  overscroll-behavior: contain;
}

dialog.contact-card::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

dialog.contact-card {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  margin: auto;
  padding: 1.2rem 1.4rem;
  border: 3px solid var(--ap-line);
  border-top: 8px solid var(--ap-vest);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font-family: 'Barlow', system-ui, sans-serif;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.45);
}

.contact-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.contact-card__close-form {
  margin: 0;
}

.contact-card__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: transparent;
  color: var(--ap-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.contact-card__close:hover {
  background: var(--ap-vest);
  border-color: var(--ap-ink);
  color: var(--ap-ink);
}

.contact-card__title {
  margin: 0 0 0.5rem;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ap-text);
}

.contact-card__desc {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
}

.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.contact-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.85rem;
  border: 2px solid var(--ap-line);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.contact-card__btn--primary,
.contact-card__btn--phone {
  border-color: var(--ap-ink);
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.contact-card__btn:hover {
  background: var(--ap-ink);
  border-color: var(--ap-ink);
  color: var(--ap-vest);
}

.contact-card__section {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.contact-card__heading {
  margin: 0 0 0.45rem;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ap-text);
}

.contact-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.contact-card__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.15rem 0.65rem;
  border: 1.5px solid var(--ap-line);
  border-radius: 1rem;
  background: transparent;
  color: var(--ap-text);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
}

.contact-card__chip:hover {
  background: var(--ap-vest);
  border-color: var(--ap-ink);
  color: var(--ap-ink);
}

.contact-card__sources {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.contact-card__sources li {
  margin-bottom: 0.25rem;
}

.contact-card__sources a {
  color: var(--ap-text);
  text-decoration: underline;
  text-decoration-color: var(--ap-vest-deep);
  text-decoration-thickness: 2px;
}

.contact-card__sources a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: var(--ap-vest);
}

.contact-card__checked {
  margin: 0.9rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
  color: var(--ap-muted);
  font-size: 0.68rem;
}

/* ==========================================================================
   Decision flows in guides (<div class="flow" markdown> + ordered list)
   Plain lists: readable offline, without JavaScript and by screen readers.
   ========================================================================== */
.md-typeset .flow > ol {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.md-typeset .flow > ol > li {
  position: relative;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.9rem 0.7rem 2.8rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  counter-increment: flow;
}

[data-md-color-scheme='slate'] .md-typeset .flow > ol > li {
  border-color: var(--ap-vest);
}

.md-typeset .flow > ol > li::before {
  content: counter(flow);
  position: absolute;
  top: 0.65rem;
  left: 0.7rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ap-vest);
  color: var(--ap-ink);
  font-weight: 800;
  line-height: 1.5rem;
  text-align: center;
}

/* Arrow to the next step. */
.md-typeset .flow > ol > li:not(:last-child)::after {
  content: '↓';
  position: absolute;
  bottom: -1.55rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.5rem;
  color: var(--ap-muted);
}

/* Branches (Oui / Non…) side by side when there is room. */
.md-typeset .flow > ol > li > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset .flow > ol > li > ul > li {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-left: 4px solid var(--ap-vest);
  background: var(--md-code-bg-color);
  font-size: 0.72rem;
}

/* Printed guides: keep each step, table row and box on one page; no copy buttons. */
@media print {
  .md-typeset .flow > ol > li,
  .md-typeset tr,
  .md-typeset .admonition {
    break-inside: avoid;
  }

  .md-typeset .md-code__nav {
    display: none;
  }
}

/* Funnel variant: each step narrower than the last (groups filtered from public to sub-groups). */
.md-typeset .flow--funnel > ol > li {
  margin-right: auto;
  margin-left: auto;
}

.md-typeset .flow--funnel > ol > li > ul {
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
}

.md-typeset .flow--funnel > ol > li:nth-child(2) {
  width: 88%;
}

.md-typeset .flow--funnel > ol > li:nth-child(3) {
  width: 76%;
}

.md-typeset .flow--funnel > ol > li:nth-child(4) {
  width: 64%;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .flow--funnel > ol > li:nth-child(2) {
    width: 94%;
  }

  .md-typeset .flow--funnel > ol > li:nth-child(3) {
    width: 88%;
  }

  .md-typeset .flow--funnel > ol > li:nth-child(4) {
    width: 82%;
  }
}

/* Wide guide tables as stacked cards on small screens (labels set by extra.js). */
@media screen and (max-width: 44.9375em) {
  .md-typeset table.table--cards {
    display: block;
    border: 0;
  }

  .md-typeset table.table--cards thead {
    display: none;
  }

  .md-typeset table.table--cards tbody,
  .md-typeset table.table--cards tr,
  .md-typeset table.table--cards td {
    display: block;
  }

  .md-typeset table.table--cards tr {
    margin-bottom: 0.8rem;
    border: 2px solid var(--ap-ink);
    border-radius: var(--ap-radius);
  }

  .md-typeset table.table--cards td,
  .md-typeset table.table--cards td:not(:last-child) {
    border: 0;
    padding: 0.3rem 0.7rem;
  }

  .md-typeset table.table--cards tbody tr:nth-child(even),
  .md-typeset table.table--cards tbody tr:hover {
    background-color: transparent;
  }

  .md-typeset table.table--cards td:first-child {
    background: var(--md-code-bg-color);
  }

  .md-typeset table.table--cards td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    color: var(--ap-muted);
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .md-typeset table.table--cards td:empty,
  .md-typeset table.table--cards td[data-empty] {
    display: none;
  }
}

/* Venn diagram (inline SVG): every condition is needed, only the centre gives access. */
.md-typeset .venn {
  max-width: 24rem;
  margin: 1rem auto 1.5rem;
}

.md-typeset .venn svg {
  width: 100%;
  height: auto;
}

.md-typeset .venn__circle {
  fill: var(--ap-vest);
  fill-opacity: 0.25;
  stroke: var(--md-default-fg-color);
  stroke-width: 2;
}

.md-typeset .venn__label {
  fill: var(--md-default-fg-color);
  font-size: 12px;
}

.md-typeset .venn__center {
  fill: var(--md-default-fg-color);
  font-size: 14px;
  font-weight: 800;
}

/* Open-door vetting schema (Signal guide): vertical, readable on a phone, follows the light/dark theme. */
.md-typeset .route {
  max-width: 24rem;
  margin: 1rem auto 1.5rem;
  break-inside: avoid;
}

.md-typeset .route svg {
  width: 100%;
  height: auto;
}

.md-typeset .route__box,
.md-typeset .route__note {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color);
  stroke-width: 2;
}

.md-typeset .route__note {
  stroke-dasharray: 5 4;
}

.md-typeset .route__num,
.md-typeset .route__chip {
  fill: var(--ap-vest);
}

.md-typeset .route__num-label,
.md-typeset .route__chip-label {
  fill: var(--ap-ink);
  font-size: 12px;
  font-weight: 800;
}

.md-typeset .route__chip-label {
  font-size: 11px;
}

.md-typeset .route__title {
  fill: var(--md-default-fg-color);
  font-size: 14px;
  font-weight: 800;
}

.md-typeset .route__text {
  fill: var(--md-default-fg-color);
  font-size: 11.5px;
}

.md-typeset .route__arrow {
  fill: none;
  stroke: var(--md-default-fg-color);
  stroke-width: 2;
}

.md-typeset .route__head {
  fill: var(--md-default-fg-color);
}

.md-typeset .route figcaption {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  text-align: center;
}

/* Footer link to the settings page, shaped like the other footer buttons. */
.pwa-panel__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* --- Settings page (offline mode, install) -------------------------------- */
.md-typeset [data-pwa-settings] .pwa-settings__section {
  margin: 0 0 1.5rem;
}

.md-typeset [data-pwa-settings] .pwa-settings__section h2 {
  margin-top: 1.2rem;
}

.md-typeset [data-pwa-settings] .pwa-settings__status {
  font-weight: 700;
}

.md-typeset [data-pwa-settings] .pwa-settings__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0;
  cursor: pointer;
}

.md-typeset [data-pwa-settings] .pwa-settings__toggle input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--md-default-fg-color);
}

.md-typeset [data-pwa-settings] .pwa-settings__help {
  color: var(--ap-muted);
  font-size: 0.75rem;
}

.md-typeset [data-pwa-settings] .pwa-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Who checked a source, after each footnote (hooks/sources.py). */
.md-typeset .source-check {
  color: var(--ap-muted);
  font-size: 0.9em;
}

/* Profile names in the static parcours tree are headings (indexed by the search), shown inline. */
.md-typeset .parcours__tree summary .parcours__profile {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

/* Guided search result cards: type badge, guide name, key points (hooks/guide_digest.py). */
.md-typeset .parcours__badge {
  display: inline-block;
  margin-bottom: 0.3rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--ap-ink);
  border-radius: 1rem;
  background: var(--ap-vest);
  color: var(--ap-ink);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.md-typeset .parcours__result--resource .parcours__badge {
  background: transparent;
  color: var(--ap-text);
  border-color: var(--ap-line);
}

.md-typeset .parcours__from {
  margin: 0 0 0.3rem;
  color: var(--ap-muted);
  font-size: 0.7rem;
}

.md-typeset .parcours__points {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.75rem;
}

.md-typeset .parcours__points li {
  margin-bottom: 0.25rem;
}

.md-typeset .parcours__more {
  font-size: 0.72rem;
  font-weight: 700;
}

.md-typeset .parcours__need + .parcours__need {
  margin-top: 1.5rem;
}

.md-typeset .parcours__urgent .parcours__call {
  margin: 0.3rem 0.4rem 0.3rem 0;
  padding: 0.15rem 0.6rem;
  border: 2px solid var(--ap-ink);
  border-radius: 1rem;
  background: var(--ap-surface);
  color: var(--ap-text);
  text-decoration: none;
}

/* Search bar centred in the header on wide screens (on phones it stays an icon on the right). */
@media screen and (min-width: 60em) {
  .md-header__inner {
    position: relative;
  }

  .md-header__title {
    max-width: calc(50% - 7rem);
  }

  /* The search left the flow: push the theme, language and repository controls back to the right. */
  .md-header__title + * {
    margin-left: auto;
  }

  .md-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* "Pourquoi nous rejoindre ?" (overrides/partials/rallier.html) */
.md-typeset .rallier__pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}

.md-typeset .rallier__pick .timeline-filters__chip {
  text-decoration: none;
}

.md-typeset .rallier__profile {
  margin: 0 0 2rem;
  padding: 0.2rem 1rem 0.8rem;
  border: 2px solid var(--ap-ink);
  border-left-width: 6px;
  border-radius: var(--ap-radius);
}

[data-md-color-scheme='slate'] .md-typeset .rallier__profile {
  border-color: var(--ap-vest);
}

.md-typeset .rallier__objection {
  padding: 0.4rem 0.6rem;
  border-left: 4px solid var(--ap-vest);
  background: var(--md-code-bg-color);
}

.md-typeset .rallier__step {
  padding: 0.4rem 0.6rem;
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  color: var(--ap-ink);
}

/* Share links (overrides/partials/rallier.html). */
.md-typeset .rallier__share {
  font-size: 0.75rem;
}

.md-typeset .rallier__short {
  overflow-wrap: anywhere;
}

.md-typeset .rallier__share-btn {
  margin: 0.2rem 0.2rem 0 0;
  padding: 0.1rem 0.6rem;
  border: 1.5px solid var(--ap-ink);
  border-radius: 1rem;
  background: var(--ap-surface);
  color: var(--ap-text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

[data-md-color-scheme='slate'] .md-typeset .rallier__share-btn {
  border-color: var(--ap-vest);
}

/* "Envoyer à un·e [profil]" picker. */
.md-typeset .rallier__picker {
  margin: 1rem 0 1.5rem;
  padding: 0.6rem 0.8rem;
  border: 3px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.md-typeset .rallier__picker label {
  font-weight: 700;
}

.md-typeset .rallier__picker select {
  max-width: 100%;
  margin-left: 0.3rem;
  padding: 0.15rem 0.4rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 700;
}

.md-typeset .rallier__picker .rallier__share {
  margin: 0.4rem 0 0;
}

.md-typeset .rallier__picker a {
  color: var(--ap-ink);
}

.md-typeset .rallier__picker .rallier__hint {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
}

.md-typeset .rallier__rotator-line .parcours__rotator {
  text-decoration: none;
}

/* Adjacent footnote references: separate them with a comma */
.md-typeset sup[id^='fnref'] + sup[id^='fnref']::before {
  content: ', ';
  margin-left: -0.1em;
}

/* --- Guides page: filter by text and theme ------------------------------- */
.guides-filter {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.guides-filter__label {
  font-weight: 700;
}

.guides-filter__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  color: var(--ap-text);
  font: inherit;
}

.guides-filter__input:focus-visible,
.guides-filter__chip:focus-visible,
.guides-filter__reset:focus-visible {
  outline: 3px solid var(--ap-vest);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ap-ink);
}

.guides-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.guides-filter__chip,
.guides-filter__reset {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 2px solid var(--ap-ink);
  border-radius: 1.25rem;
  background: var(--ap-surface);
  color: var(--ap-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}

.guides-filter__chip[aria-pressed='true'] {
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.guides-filter__status {
  margin: 0;
  font-size: 0.8rem;
}

.guides-filter__reset {
  align-self: flex-start;
}

.md-typeset .grid.cards[hidden],
.md-typeset .grid.cards > ul > li[hidden],
.md-typeset h2[hidden] {
  display: none !important;
}

/* Phones: denser cards on the guides page (title, two lines, link). */
@media (max-width: 44.9375em) {
  article:has(.guides-filter) .grid.cards > ul > li {
    padding: 0.6rem 0.8rem;
  }

  article:has(.guides-filter) .grid.cards > ul > li hr {
    display: none;
  }

  article:has(.guides-filter) .grid.cards > ul > li > p {
    margin: 0.2rem 0;
  }

  article:has(.guides-filter) .grid.cards > ul > li > p:nth-of-type(2) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* Keep the last lines clear of the floating SOS button. */
.md-footer-meta__inner {
  padding-bottom: 5rem;
}

@media (max-width: 44.9375em) {
  .guides-filter__chips {
    flex-wrap: nowrap;
    padding-bottom: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .guides-filter__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* Guided search: say which step we are on and what to do. */
.md-typeset .parcours__stepno {
  display: inline-block;
  margin: 0.8rem 0 0;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  background: var(--ap-ink);
  color: var(--ap-vest);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-md-color-scheme='slate'] .md-typeset .parcours__stepno {
  background: var(--ap-vest);
  color: var(--ap-ink);
}

.md-typeset .parcours__stepno {
  scroll-margin-top: 4.5rem;
}

.md-typeset .parcours__stepno + .parcours__step {
  margin-top: 0.4rem;
}

.md-typeset .parcours__hint {
  margin: 0 0 0.6rem;
  font-weight: 600;
}

/* The chosen situation keeps the big heading style, like the example that scrolls in step 1. */
.md-typeset .parcours__chosen {
  padding: 0 0.3rem;
  border-bottom: 4px solid var(--ap-ink);
  background: var(--ap-vest);
  color: var(--ap-ink);
}

[data-md-color-scheme='slate'] .md-typeset .parcours__chosen {
  border-bottom-color: var(--ap-silver);
}

.md-typeset .parcours__step {
  scroll-margin-top: 4.5rem;
}

/* Guided search, step 1: the situations in groups; typing replaces them with a flat list. Material
   styles every <details> as a coloured admonition: switch that off here. */
.md-typeset details.parcours__group {
  margin: 0.6rem 0;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--ap-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.md-typeset details.parcours__group > summary.parcours__group-title {
  margin: 0;
  padding: 0.7rem 1.8rem 0.3rem 0;
  background: none;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
}

.md-typeset details.parcours__group > summary.parcours__group-title::before {
  display: none;
}

.md-typeset details.parcours__group > summary.parcours__group-title::after {
  right: 0.2rem;
  color: var(--ap-text);
}

.md-typeset details.parcours__group .parcours__choices {
  margin: 0.4rem 0 0.8rem;
}

/* --- Memo sheets: one A4 page each when printed -------------------------- */
.md-typeset .memo__sheet {
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  border: 2px solid var(--ap-ink);
  border-radius: var(--ap-radius);
}

@media print {
  .md-typeset .memo__sheet {
    padding: 0;
    border: 0;
    font-size: 11pt;
    break-after: page;
    break-inside: avoid;
  }

  .md-typeset .memo__sheet:last-child {
    break-after: auto;
  }
}

/* --- Printed guides: paper layout --------------------------------------- */
@media print {
  /* Interactive aids are useless on paper. */
  .parcours,
  .md-content__button,
  .md-top,
  .headerlink,
  .md-source-file,
  .md-feedback {
    display: none !important;
  }

  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3 {
    break-after: avoid;
  }

  .md-typeset details > summary {
    break-after: avoid;
  }

  /* Say where the paper copy comes from, since it cannot be updated. */
  .md-content__inner::after {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid currentcolor;
    font-size: 0.7rem;
    content: 'Copie papier du site onmanifeste.fr : le contenu évolue, vérifiez la version en ligne.';
  }

  html[lang='en'] .md-content__inner::after {
    content: 'Paper copy from the onmanifeste.fr site: content changes, check the online version.';
  }
}

/* Secondary buttons: the theme default is yellow text on white, too faint to read. Dark text and
   border in light mode (light in dark mode), yellow fill with dark text on hover and focus. */
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--md-default-fg-color);
  color: var(--md-default-fg-color);
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus {
  border-color: var(--ap-vest);
  background: var(--ap-vest);
  color: var(--ap-ink);
}