/* Afropari independent guide · shared foundation v1.0 · block 12 */
:root {
  color-scheme: light;
  --ap-paper: #f6f5ef;
  --ap-surface: #ffffff;
  --ap-ink: #172c25;
  --ap-muted: #52635b;
  --ap-forest: #123c2d;
  --ap-forest-deep: #0b281e;
  --ap-yellow: #f4ce45;
  --ap-yellow-hover: #ffe078;
  --ap-mint: #e6efe6;
  --ap-line: #d7dfd7;
  --ap-control: #64776b;
  --ap-link: #176344;
  --ap-on-dark: #d9e7dc;
  --ap-focus: #1767a6;
  --ap-error: #9b2525;
  --ap-font: Arial, "Helvetica Neue", sans-serif;
  --ap-width: 1160px;
  --ap-gutter: 32px;
  --ap-radius-sm: 8px;
  --ap-radius: 16px;
  --ap-radius-lg: 24px;
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 20px;
  --ap-space-6: 24px;
  --ap-space-8: 32px;
  --ap-space-10: 40px;
  --ap-space-12: 48px;
  --ap-space-16: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ap-paper);
  color: var(--ap-ink);
  font-family: var(--ap-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); }
h3 { font-size: 1.4375rem; }
h4 { font-size: 1.125rem; }
button, input, select, textarea { font: inherit; }
button, a, summary { touch-action: manipulation; }
a { color: var(--ap-link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ap-focus);
  outline-offset: 4px;
}
:where(h1, h2, h3, h4, section, main)[id] { scroll-margin-top: 24px; }
img, svg, video { max-inline-size: 100%; }
img { block-size: auto; }
[hidden] { display: none !important; }
.ap-container {
  width: min(var(--ap-width), calc(100% - var(--ap-gutter) * 2));
  margin-inline: auto;
}
.ap-section { padding-block: var(--ap-space-16); }
.ap-section + .ap-section { border-top: 1px solid var(--ap-line); }
.ap-stack > * + * { margin-block-start: var(--ap-space-5); }
.ap-stack--tight > * + * { margin-block-start: var(--ap-space-3); }
.ap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ap-space-5);
}
.ap-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-grid > *, .ap-article > * { min-width: 0; }
.ap-article {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: var(--ap-space-10);
}
.ap-prose { max-width: 70ch; min-width: 0; }
.ap-prose > * + * { margin-block-start: var(--ap-space-5); }
.ap-prose :where(h2, h3, h4):not(:first-child) { margin-block-start: var(--ap-space-10); }
.ap-prose :where(ul, ol) { padding-inline-start: 1.5em; }
.ap-prose li + li { margin-block-start: var(--ap-space-2); }
.ap-lead { max-width: 58ch; font-size: 1.1875rem; color: var(--ap-muted); }
.ap-muted, .ap-meta { color: var(--ap-muted); }
.ap-meta { font-size: .8125rem; line-height: 1.6; }
.ap-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-link);
}
.ap-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ap-skip {
  position: absolute; inset-block-start: 12px; inset-inline-start: 20px;
  z-index: 100; transform: translateY(-200%);
  padding: 12px 20px; background: var(--ap-surface);
  border: 1px solid var(--ap-control); border-radius: var(--ap-radius-sm);
}
.ap-skip:focus { transform: none; }
.ap-actions { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); align-items: center; }
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ap-space-3); min-height: 48px; max-width: 100%;
  padding: 12px 22px; border: 1px solid transparent;
  border-radius: var(--ap-radius-sm); font-size: .9375rem;
  line-height: 1.45; font-weight: 700; text-align: center;
  text-decoration: none; white-space: normal; cursor: pointer;
  background: var(--ap-yellow); color: var(--ap-ink);
  transition: background-color 120ms ease;
}
.ap-btn:hover { background: var(--ap-yellow-hover); color: var(--ap-ink); }
.ap-btn:active { box-shadow: inset 0 0 0 2px var(--ap-ink); }
.ap-btn--secondary { background: var(--ap-surface); border-color: var(--ap-control); }
.ap-btn--secondary:hover { background: var(--ap-mint); }
.ap-btn--inverse { color: var(--ap-surface); background: transparent; border-color: var(--ap-on-dark); }
.ap-btn--inverse:hover { color: var(--ap-surface); background: var(--ap-forest-deep); }
.ap-btn:disabled, .ap-btn[aria-disabled="true"] {
  background: var(--ap-mint); color: var(--ap-muted);
  border-color: var(--ap-control); box-shadow: none; cursor: not-allowed;
}
.ap-dark { background: var(--ap-forest); color: var(--ap-surface); padding: 32px; border-radius: var(--ap-radius); }
.ap-dark .ap-muted, .ap-dark .ap-meta, .ap-dark .ap-lead { color: var(--ap-on-dark); }
.ap-dark .ap-eyebrow { color: var(--ap-yellow); }
.ap-dark a:not(.ap-btn) { color: var(--ap-yellow); }
.ap-dark :focus-visible { outline-color: var(--ap-yellow); }
.ap-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ap-card {
  min-width: 0; padding: 28px;
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
  background: var(--ap-surface); display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--ap-space-4);
}
.ap-card p { color: var(--ap-muted); font-size: 1rem; }
.ap-card__link { margin-top: auto; padding-block: 8px; font-weight: 700; font-size: .9375rem; }
.ap-tag {
  display: inline-block; border-radius: 4px; padding: 4px 10px;
  background: var(--ap-mint); color: var(--ap-ink);
  font-size: .8125rem; font-weight: 700;
}
.ap-note { border-inline-start: 4px solid var(--ap-link); background: var(--ap-mint); padding: 24px; border-radius: 0 var(--ap-radius) var(--ap-radius) 0; }
.ap-note > * + * { margin-block-start: 8px; }
.ap-note--plain { background: var(--ap-surface); }
.ap-table-help { color: var(--ap-muted); font-size: .8125rem; margin-block-end: 8px; }
.ap-table-region { max-width: 100%; overflow-x: auto; background: var(--ap-surface); border: 1px solid var(--ap-control); border-radius: 12px; }
.ap-table { width: 100%; border-collapse: collapse; text-align: start; font-size: .9375rem; }
.ap-table--wide { min-width: 620px; }
.ap-table caption { padding: 20px; text-align: start; font-weight: 700; }
.ap-table :where(th, td) { padding: 16px 20px; border-top: 1px solid var(--ap-line); vertical-align: top; }
.ap-table thead th { background: var(--ap-mint); }
.ap-table th { font-weight: 700; text-align: start; }
.ap-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
/* Native ordered-list markers retain a single accessible number per step. */
.ap-steps { list-style: decimal-leading-zero; padding-inline-start: 2em; margin: 0; }
.ap-steps > li { padding: 0 0 20px 12px; min-height: 48px; }
.ap-steps > li::marker { color: var(--ap-link); font-weight: 700; }
.ap-steps > li:last-child { padding-bottom: 0; }
.ap-toc { border-inline-start: 3px solid var(--ap-link); padding-inline-start: 20px; font-size: .9375rem; }
.ap-toc ol { list-style: none; padding: 0; margin: 12px 0 0; }
.ap-toc a { display: block; padding: 10px 0; }
.ap-crumbs { font-size: .8125rem; }
.ap-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ap-crumbs li { display: inline-flex; gap: 8px; align-items: baseline; }
.ap-crumbs li + li::before { content: "/"; color: var(--ap-muted); }
.ap-faq { border-top: 1px solid var(--ap-line); }
.ap-faq:last-child { border-bottom: 1px solid var(--ap-line); }
.ap-faq summary { cursor: pointer; padding: 18px 4px; min-height: 56px; font-weight: 700; }
.ap-faq summary::marker { color: var(--ap-link); }
.ap-faq__answer { padding: 0 4px 24px; max-width: 70ch; }
.ap-faq[open] summary { color: var(--ap-link); }
.ap-source { padding-block: 20px; border-block: 1px solid var(--ap-line); font-size: .8125rem; color: var(--ap-muted); }
.ap-source dl { margin: 0; display: grid; grid-template-columns: minmax(90px,auto) minmax(0,1fr); gap: 8px 16px; }
.ap-source dt { font-weight: 700; }
.ap-source dd { margin: 0; }
.ap-review { background: var(--ap-surface); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 28px; }
.ap-review > * + * { margin-block-start: 16px; }
.ap-review__reply { padding-inline-start: 20px; border-inline-start: 3px solid var(--ap-line); }
.ap-figure { background: var(--ap-surface); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 20px; }
.ap-figure img { display: block; margin-inline: auto; object-fit: contain; }
.ap-figure figcaption { font-size: .8125rem; color: var(--ap-muted); margin-top: 16px; }
.ap-language-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ap-language-list a { display: block; padding: 10px 14px; border: 1px solid var(--ap-control); border-radius: 8px; background: var(--ap-surface); }
.ap-language-list [aria-current] { color: var(--ap-surface); background: var(--ap-forest); font-weight: 700; text-decoration: none; }
.ap-field { display: grid; gap: 8px; max-width: 36rem; }
.ap-field label, .ap-field legend { font-weight: 700; }
.ap-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px;
  border: 1px solid var(--ap-control); border-radius: 8px;
  color: var(--ap-ink); background: var(--ap-surface);
}
.ap-field :where(input, textarea)::placeholder { color: var(--ap-muted); opacity: 1; }
.ap-field [aria-invalid="true"] { border: 2px solid var(--ap-error); }
.ap-error { color: var(--ap-error); font-size: .9375rem; }
.ap-check { display: flex; align-items: start; gap: 12px; padding-block: 12px; }
.ap-check input { width: 22px; height: 22px; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--ap-link); }
.ap-field :disabled { background: var(--ap-mint); color: var(--ap-muted); cursor: not-allowed; }
@media (max-width: 980px) {
  .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-article { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .ap-card { padding: 24px; }
}
@media (max-width: 740px) {
  :root { --ap-gutter: 20px; }
  .ap-section { padding-block: 40px; }
  .ap-grid, .ap-grid--two, .ap-article { grid-template-columns: minmax(0,1fr); }
  .ap-actions { align-items: stretch; flex-direction: column; }
  .ap-actions > .ap-btn { width: 100%; }
  .ap-dark, .ap-note, .ap-review { padding: 24px; }
  .ap-toc { margin-block-end: 8px; }
  .ap-source dl { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .ap-source dd + dt { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .ap-btn, .ap-tag, .ap-card, .ap-note, .ap-review, .ap-language-list a { border: 1px solid CanvasText; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}
@media print {
  body { background: white; color: black; font-size: 11pt; }
  .ap-container { width: 100%; }
  .ap-section { padding-block: 18pt; }
  .ap-grid, .ap-article { display: block; }
  .ap-card, .ap-note, .ap-review { break-inside: avoid; margin-block: 12pt; }
  .ap-table-region { overflow: visible; }
  .ap-table--wide { min-width: 0; }
  .ap-skip, .ap-language-list { display: none; }
  .ap-dark { color: black; background: white; border: 1px solid black; }
  .ap-dark :where(a, .ap-muted, .ap-meta, .ap-lead, .ap-eyebrow) { color: black; }
}