/*! afrigov v0.16.0 | MIT | https://github.com/afrigov/afrigov */

@layer reset, tokens, base, components, utilities;

@layer reset {
/* Minimal reset. Only what every component relies on. Element defaults are set in base.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* An address is not a quotation. */
address {
  font-style: normal;
}
}

@layer tokens {
/* Generated from tokens/core.tokens.json. Do not edit. */
:root {
  --ag-color-ink: #1b1b1b;
  --ag-color-ink-muted: #505050;
  --ag-color-ink-inverse: #ffffff;
  --ag-color-paper: #ffffff;
  --ag-color-paper-alt: #f3f3f3;
  --ag-color-paper-dark: #1b1b1b;
  --ag-color-border: #c9c9c9;
  --ag-color-border-strong: #767676;
  --ag-color-primary: #1f4e79;
  --ag-color-primary-hover: #163a5b;
  --ag-color-on-primary: #ffffff;
  --ag-color-primary-tint: #e8eef5;
  --ag-color-accent: #1f4e79;
  --ag-color-on-accent: #ffffff;
  --ag-color-link: #1f4e79;
  --ag-color-link-hover: #163a5b;
  --ag-color-link-visited: #5b2a86;
  --ag-color-focus: #ffbf47;
  --ag-color-success: #00703c;
  --ag-color-success-tint: #e6f2ec;
  --ag-color-warning: #8a5700;
  --ag-color-warning-tint: #fdf3e1;
  --ag-color-error: #b00020;
  --ag-color-error-tint: #fbe9ec;
  --ag-color-info: #1d70b8;
  --ag-color-info-tint: #e8f1f8;
  --ag-font-family-sans: system-ui, "Noto Sans", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ag-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ag-font-size-xs: 0.875rem;
  --ag-font-size-sm: 1rem;
  --ag-font-size-md: 1.125rem;
  --ag-font-size-lg: 1.25rem;
  --ag-font-size-xl: 1.5rem;
  --ag-font-size-2xl: 2rem;
  --ag-font-size-3xl: 2.5rem;
  --ag-font-size-4xl: 3rem;
  --ag-font-weight-normal: 400;
  --ag-font-weight-bold: 700;
  --ag-font-leading-tight: 1.2;
  --ag-font-leading-base: 1.55;
  --ag-font-leading-loose: 1.75;
  --ag-space-1: 0.25rem;
  --ag-space-2: 0.5rem;
  --ag-space-3: 0.75rem;
  --ag-space-4: 1rem;
  --ag-space-5: 1.5rem;
  --ag-space-6: 2rem;
  --ag-space-7: 3rem;
  --ag-space-8: 4rem;
  --ag-size-target: 3rem;
  --ag-size-measure: 65ch;
  --ag-size-container: 72rem;
  --ag-size-control-border: 2px;
  --ag-size-radius: 0.25rem;
  --ag-size-radius-field: 0rem;
  --ag-size-radius-surface: 0rem;
  --ag-size-focus-ring: 3px;
  --ag-breakpoint-sm: 40em;
  --ag-breakpoint-md: 48em;
  --ag-breakpoint-lg: 64em;
}
}

@layer base {
/* Element defaults. Plain semantic HTML should look right with no classes at all. */

html {
  font-size: 100%;
  scroll-padding-top: var(--ag-space-5);
}

/* The footer sits at the bottom of the viewport on a short page, not halfway up it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ag-font-family-sans);
  font-size: var(--ag-font-size-sm);
  line-height: var(--ag-font-leading-base);
  color: var(--ag-color-ink);
  background: var(--ag-color-paper);
  -webkit-font-smoothing: antialiased;
}

/* Density. Set data-ag-density on <html> or any container.
   compact: dashboards and admin pages. 44px targets, tighter rhythm, 16px stays.
   large:   public-facing pages for older or low-vision readers. 18px body. */
[data-ag-density="compact"] {
  --ag-size-target: 2.75rem;
  --ag-space-5: 1.25rem;
  --ag-space-6: 1.5rem;
  --ag-space-7: 2rem;
  --ag-space-8: 3rem;
}

[data-ag-density="large"] {
  --ag-font-size-sm: 1.125rem;
  --ag-font-size-xs: 1rem;
  --ag-font-leading-base: 1.6;
}

/* Corners. Set data-ag-corners on <html>, once for the whole site, so buttons, fields and cards match.
   Square is the default. rounded: 8px on buttons, fields and the search box, 12px on cards, panels,
   alerts and empty states. */
[data-ag-corners="rounded"] {
  --ag-size-radius: 0.5rem;
  --ag-size-radius-field: 0.5rem;
  --ag-size-radius-surface: 0.75rem;
}

/* Focus ring: a yellow inner ring and an ink outer ring, so it is visible on any background. */
:focus-visible {
  outline: var(--ag-size-focus-ring) solid var(--ag-color-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
}

/* Anything focused programmatically (error summary, main) gets the ring too. */
[tabindex="-1"]:focus {
  outline: var(--ag-size-focus-ring) solid var(--ag-color-focus);
  box-shadow: 0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--ag-space-4);
  line-height: var(--ag-font-leading-tight);
  font-weight: var(--ag-font-weight-bold);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--ag-font-size-2xl);
  margin-bottom: var(--ag-space-5);
}

h2 {
  font-size: var(--ag-font-size-xl);
  margin-top: var(--ag-space-6);
}

h3 {
  font-size: var(--ag-font-size-lg);
  margin-top: var(--ag-space-5);
}

h4 {
  font-size: var(--ag-font-size-lg);
}

h5,
h6 {
  font-size: var(--ag-font-size-md);
}

@media (min-width: 48em) {
  h1 {
    font-size: var(--ag-font-size-3xl);
  }

  h2 {
    font-size: var(--ag-font-size-2xl);
  }

  h3 {
    font-size: var(--ag-font-size-xl);
  }
}

/* Only the page title gets the largest size, and only when asked. */
.ag-heading-xl {
  font-size: var(--ag-font-size-3xl);
}

@media (min-width: 48em) {
  .ag-heading-xl {
    font-size: var(--ag-font-size-4xl);
  }
}

p,
ul,
ol,
dl,
blockquote,
pre,
figure,
table {
  margin: 0 0 var(--ag-space-4);
}

ul,
ol {
  padding-inline-start: var(--ag-space-5);
}

li {
  margin-bottom: var(--ag-space-1);
}

dt {
  font-weight: var(--ag-font-weight-bold);
}

dd {
  margin: 0 0 var(--ag-space-3);
}

/* Links are always underlined. Colour alone is not enough for low-vision readers. */
a {
  color: var(--ag-color-link);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.15em;
}

a:visited {
  color: var(--ag-color-link-visited);
}

a:hover {
  color: var(--ag-color-link-hover);
  text-decoration-thickness: max(3px, 0.1875em);
}

a:focus-visible {
  color: var(--ag-color-ink);
  background: var(--ag-color-focus);
  text-decoration: none;
}

strong,
b {
  font-weight: var(--ag-font-weight-bold);
}

small {
  font-size: var(--ag-font-size-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--ag-color-border);
  margin: var(--ag-space-6) 0;
}

blockquote {
  padding-inline-start: var(--ag-space-4);
  border-inline-start: 4px solid var(--ag-color-border);
  color: var(--ag-color-ink-muted);
}

code,
kbd,
pre {
  font-family: var(--ag-font-family-mono);
  font-size: 0.9em;
}

pre {
  padding: var(--ag-space-4);
  overflow-x: auto;
  background: var(--ag-color-paper-alt);
}

/* Layout helpers every page needs. */
.ag-container {
  width: min(100% - (var(--ag-space-4) * 2), var(--ag-size-container));
  margin-inline: auto;
}

@media (min-width: 48em) {
  .ag-container {
    width: min(100% - (var(--ag-space-6) * 2), var(--ag-size-container));
  }
}

.ag-main {
  display: block;
  flex: 1 0 auto;
  padding-block: var(--ag-space-6) var(--ag-space-8);
}

.ag-main:focus {
  outline: none;
  box-shadow: none;
}

/* For a page built from full-width bands: the first band meets the header and the last meets the footer. */
.ag-main--flush {
  padding-block: 0;
}

/* Running text never exceeds a comfortable line length. */
.ag-prose {
  max-width: var(--ag-size-measure);
}

/* The column sits in the middle of the page. The text inside still starts at the column's edge,
   because centred lines of running text are hard to read. */
.ag-prose--centred {
  margin-inline: auto;
}

.ag-prose img {
  display: block;
}

.ag-lead {
  font-size: var(--ag-font-size-lg);
  color: var(--ag-color-ink-muted);
}

@media (min-width: 48em) {
  .ag-lead {
    font-size: var(--ag-font-size-xl);
  }
}

.ag-caption {
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}
}

@layer components {
/* Skip link. Must be the first focusable element on the page. */
.ag-skip-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  position: absolute;
  top: var(--ag-space-2);
  inset-inline-start: -999em;
  z-index: 1000;
  padding: var(--ag-space-2) var(--ag-space-4);
  background: var(--ag-color-focus);
  color: var(--ag-color-ink);
  font-weight: var(--ag-font-weight-bold);
  text-decoration: underline;
}

.ag-skip-link:focus {
  inset-inline-start: var(--ag-space-2);
}

/* Official website banner. Sits above the header on every page. */
.ag-banner {
  background: var(--ag-color-paper-alt);
  border-bottom: 1px solid var(--ag-color-border);
  font-size: var(--ag-font-size-xs);
}

.ag-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-2) var(--ag-space-3);
  min-height: var(--ag-size-target);
  padding-block: var(--ag-space-1);
}

.ag-banner__text {
  margin: 0;
}

/* On phones the notice wraps beside the flag instead of pushing it onto its own line,
   and the disclosure goes under both. The notice never gets narrower than 12rem: anything
   else placed in the banner wraps under it instead of squeezing it. 40em = breakpoint.sm */
@media (max-width: 40em) {
  .ag-banner__text {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .ag-banner__details {
    flex-basis: 100%;
  }
}

/* Closed, the summary sits on the same line as the notice. Open, the details take the full width. */
.ag-banner__details[open] {
  flex-basis: 100%;
}

.ag-banner__details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
  cursor: pointer;
  color: var(--ag-color-link);
  text-decoration: underline;
  list-style: none;
}

.ag-banner__details summary::-webkit-details-marker {
  display: none;
}

.ag-banner__details summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-25%) rotate(45deg);
}

.ag-banner__details[open] summary::after {
  transform: translateY(25%) rotate(225deg);
}

.ag-banner__details[open] summary {
  margin-bottom: var(--ag-space-3);
}

.ag-banner__details p {
  max-width: var(--ag-size-measure);
  margin-bottom: var(--ag-space-2);
}

/* Flag. Stripe colours and direction come from the country pack. */
.ag-flag {
  position: relative;
  display: inline-flex;
  flex-direction: var(--ag-flag-direction, row);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1rem;
  overflow: hidden;
  border: 1px solid var(--ag-color-border);
  vertical-align: middle;
}

/* A pack with an accurate SVG paints it over the stripes. Without one this is empty. */
.ag-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ag-flag-image, none) center / cover no-repeat;
}

.ag-flag > * {
  flex: 1 1 0;
}

.ag-flag > :nth-child(1) {
  background: var(--ag-flag-1, var(--ag-color-primary));
}

.ag-flag > :nth-child(2) {
  background: var(--ag-flag-2, var(--ag-color-paper));
}

.ag-flag > :nth-child(3) {
  background: var(--ag-flag-3, var(--ag-color-primary));
}

.ag-flag > :nth-child(4) {
  background: var(--ag-flag-4, transparent);
}

.ag-flag > :nth-child(5) {
  background: var(--ag-flag-5, transparent);
}

.ag-flag > :nth-child(6) {
  background: var(--ag-flag-6, transparent);
}

.ag-flag--lg {
  width: 3rem;
  height: 2rem;
}

/* Site header. Works with no JavaScript: the navigation is always visible and
   the menu button is hidden. With afrigov.js the nav collapses on small screens. */
.ag-header {
  background: var(--ag-color-paper);
  border-bottom: 4px solid var(--ag-color-primary);
}

.ag-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-3) var(--ag-space-5);
  padding-block: var(--ag-space-3);
}

.ag-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-3);
  min-height: var(--ag-size-target);
  color: var(--ag-color-ink);
  text-decoration: none;
}

/* The name is the link home. People expect that of a site's name, so it is not underlined on
   hover: the underline would greet every arrival on the home page, under the pointer that
   just clicked it. Keyboard users still get the focus ring. */
.ag-header__brand:visited {
  color: var(--ag-color-ink);
}

.ag-header__logo {
  height: 2.5rem;
  width: auto;
}

/* For a crest beside a name that runs to three lines. */
.ag-header__logo--lg {
  height: 3.5rem;
}

.ag-header__org {
  display: block;
  font-size: var(--ag-font-size-lg);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
  text-wrap: balance;
}

.ag-header__sub {
  display: block;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-header__toggle {
  display: none;
  align-items: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
  margin-inline-start: auto;
  padding: var(--ag-space-2) var(--ag-space-3);
  border: var(--ag-size-control-border) solid var(--ag-color-ink);
  border-radius: var(--ag-size-radius);
  background: transparent;
  font-weight: var(--ag-font-weight-bold);
}

/* A chevron that points down when closed and up when open. */
.ag-header__toggle::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-inline-end: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-25%) rotate(45deg);
}

.ag-header__toggle[aria-expanded="true"] {
  background: var(--ag-color-ink);
  color: var(--ag-color-ink-inverse);
}

.ag-header__toggle[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(225deg);
}

/* On small screens the brand shrinks so the button sits beside it on the first row. */
.ag-js .ag-header__brand {
  flex: 1 1 0;
  min-width: 0;
}

/* On phones a long name beside the button steps down a size, and a large crest drops to the standard size.
   48em = breakpoint.md */
@media (max-width: 48em) {
  .ag-js .ag-header__org {
    font-size: var(--ag-font-size-md);
  }

  .ag-header__logo--lg {
    height: 2.5rem;
  }
}

/* Collapsed menu: a hairline between items, so each reads as a row. */
.ag-nav > li + li {
  border-top: 1px solid var(--ag-color-border);
}

.ag-header__nav {
  flex-basis: 100%;
}

.ag-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-nav > li {
  margin: 0;
}

.ag-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-3);
  color: var(--ag-color-ink);
  font-size: var(--ag-font-size-sm);
  font-weight: var(--ag-font-weight-bold);
  text-decoration: none;
  border-inline-start: 4px solid transparent;
}

.ag-nav__link:visited {
  color: var(--ag-color-ink);
}

.ag-nav__link:hover {
  text-decoration: underline;
}

.ag-nav__link[aria-current="page"],
.ag-nav__link[aria-current="true"] {
  border-inline-start-color: var(--ag-color-primary);
  background: var(--ag-color-primary-tint);
}

/* Enhanced: collapse the nav on small screens once JS has run. */
.ag-js .ag-header__toggle {
  display: inline-flex;
}

/* With the ag-js class set in the head (see Get started), the menu is collapsed from the first paint,
   so nothing jumps when the script arrives on a slow connection. The script keeps the button's state in step. */
@media not all and (min-width: 64em) {
  .ag-js .ag-header__toggle[aria-expanded="false"] ~ .ag-header__nav {
    display: none;
  }
}

/* 64em = breakpoint.lg */
@media (min-width: 64em) {
  /* Long names ("Federal Ministry of …") wrap inside the brand instead of pushing the nav down.
     28rem fits a ministry's full name on two lines beside a crest. */
  .ag-header__brand {
    max-width: 28rem;
  }

  .ag-header__nav {
    flex-basis: auto;
    margin-inline-start: auto;
  }

  .ag-header__nav[hidden] {
    display: block !important;
  }

  .ag-js .ag-header__toggle {
    display: none;
  }

  .ag-js .ag-header__brand {
    flex: 0 1 auto;
  }

  .ag-nav {
    flex-direction: row;
    gap: var(--ag-space-1);
  }

  .ag-nav > li + li {
    border-top: 0;
  }

  .ag-nav__link {
    border-inline-start: 0;
    border-bottom: 4px solid transparent;
  }

  .ag-nav__link[aria-current="page"],
  .ag-nav__link[aria-current="true"] {
    border-bottom-color: var(--ag-color-primary);
    background: transparent;
  }
}

/* Variant: primary-coloured header. */
.ag-header--primary {
  background: var(--ag-color-primary);
  border-bottom-color: var(--ag-color-primary-hover);
  color: var(--ag-color-on-primary);
}

.ag-header--primary .ag-header__brand,
.ag-header--primary .ag-header__brand:visited,
.ag-header--primary .ag-header__sub,
.ag-header--primary .ag-nav__link,
.ag-header--primary .ag-nav__link:visited,
.ag-header--primary .ag-header__toggle {
  color: var(--ag-color-on-primary);
  border-color: var(--ag-color-on-primary);
}

.ag-header--primary .ag-header__toggle[aria-expanded="true"] {
  background: var(--ag-color-on-primary);
  color: var(--ag-color-primary);
}

.ag-header--primary .ag-nav__link[aria-current="page"],
.ag-header--primary .ag-nav__link[aria-current="true"] {
  border-color: var(--ag-color-on-primary);
  background: var(--ag-color-primary-hover);
}

/* Variant: the navigation on its own row under the brand. For more than six links, or a long
   name with a full menu. A header that wraps by accident looks broken; this one is two rows on purpose. */
@media (min-width: 64em) {
  .ag-header--stacked .ag-header__brand {
    max-width: none;
  }

  .ag-header--stacked .ag-header__nav {
    flex-basis: 100%;
    /* The first link's text lines up with the brand above it. */
    margin-inline-start: calc(-1 * var(--ag-space-3));
  }
}

/* Section menu. A navigation item that opens a short list of links on click, never on hover.
   A native disclosure, so it opens and closes with no script. In the collapsed menu on a phone
   the list expands in place; on a desktop it drops below the item as a panel. */
.ag-nav__section {
  position: relative;
}

.ag-nav__details {
  margin: 0;
}

.ag-nav__summary {
  gap: var(--ag-space-2);
  cursor: pointer;
  list-style: none;
}

.ag-nav__summary::-webkit-details-marker {
  display: none;
}

/* A chevron that points down when closed and up when open. */
.ag-nav__summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-inline-end: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-25%) rotate(45deg);
}

.ag-nav__details[open] > .ag-nav__summary::after {
  transform: translateY(25%) rotate(225deg);
}

.ag-nav__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ag-color-paper);
}

.ag-nav__menu > li {
  margin: 0;
}

.ag-nav__menu-link {
  display: flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-3);
  padding-inline-start: var(--ag-space-6);
  color: var(--ag-color-link);
  font-size: var(--ag-font-size-sm);
}

.ag-nav__menu-link:visited {
  color: var(--ag-color-link);
}

.ag-nav__menu-link[aria-current="page"] {
  background: var(--ag-color-primary-tint);
  text-decoration: none;
}

/* 64em = breakpoint.lg */
@media (min-width: 64em) {
  .ag-nav__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 10;
    min-width: 16rem;
    padding-block: var(--ag-space-2);
    border: 1px solid var(--ag-color-border);
    border-top: 4px solid var(--ag-color-primary);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  }

  .ag-nav__menu-link {
    padding-inline-start: var(--ag-space-4);
    white-space: nowrap;
  }
}

/* The menu's panel keeps the page colours whatever the header's colour, so its links stay readable. */
.ag-header--primary .ag-nav__menu-link,
.ag-header--primary .ag-nav__menu-link:visited {
  color: var(--ag-color-link);
}

/* Site footer. Dark panel with link columns and a legal bar. */
.ag-footer {
  margin-top: var(--ag-space-8);
  padding-block: var(--ag-space-6) var(--ag-space-5);
  /* The striped variant draws its own top edge inside the box, so the padding above it is 0. */
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
  border-top: 8px solid var(--ag-color-primary);
  font-size: var(--ag-font-size-xs);
}

.ag-footer a {
  color: var(--ag-color-ink-inverse);
}

.ag-footer a:visited {
  color: var(--ag-color-ink-inverse);
}

.ag-footer a:hover {
  color: var(--ag-color-ink-inverse);
}

.ag-footer__columns {
  display: grid;
  gap: var(--ag-space-5);
  /* As many columns as fit, each at least 10rem: four across on a laptop, two on a tablet, one on a small phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin-bottom: var(--ag-space-6);
}

.ag-footer__heading {
  margin: 0 0 var(--ag-space-3);
  font-size: var(--ag-font-size-sm);
}

.ag-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-footer__list li {
  margin: 0;
}

.ag-footer__list a {
  display: inline-block;
  padding-block: var(--ag-space-2);
}

.ag-footer__address {
  margin: 0 0 var(--ag-space-3);
  font-style: normal;
}

.ag-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-3);
  padding-top: var(--ag-space-4);
  border-top: 1px solid var(--ag-color-ink-muted);
}

/* The line of text wraps beside the flag instead of pushing the flag onto its own line. */
.ag-footer__bar p {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

.ag-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-4);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.ag-footer__legal li {
  margin: 0;
}

/* Variant: light footer, for a site whose header is already dark. */
.ag-footer--light {
  background: var(--ag-color-paper-alt);
  color: var(--ag-color-ink);
}

.ag-footer--light a,
.ag-footer--light a:visited,
.ag-footer--light a:hover {
  color: var(--ag-color-ink);
}

.ag-footer--light .ag-footer__bar {
  border-top-color: var(--ag-color-border);
}

/* Buttons. 48px minimum height, always a visible border for forced-colours mode. */
.ag-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-5);
  border: var(--ag-size-control-border) solid var(--ag-color-primary);
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ag-button:visited {
  color: var(--ag-color-on-primary);
}

.ag-button:hover {
  background: var(--ag-color-primary-hover);
  border-color: var(--ag-color-primary-hover);
  color: var(--ag-color-on-primary);
}

.ag-button:active {
  transform: translateY(1px);
}

.ag-button:focus-visible {
  background: var(--ag-color-focus);
  border-color: var(--ag-color-ink);
  color: var(--ag-color-ink);
}

.ag-button:disabled,
.ag-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ag-button--secondary {
  background: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

.ag-button--secondary:visited {
  color: var(--ag-color-primary);
}

.ag-button--secondary:hover {
  background: var(--ag-color-primary-tint);
  color: var(--ag-color-primary-hover);
}

.ag-button--warning {
  background: var(--ag-color-error);
  border-color: var(--ag-color-error);
}

.ag-button--warning:hover {
  background: var(--ag-color-ink);
  border-color: var(--ag-color-ink);
}

.ag-button--start {
  font-size: var(--ag-font-size-lg);
  padding-inline: var(--ag-space-5) var(--ag-space-4);
}

.ag-button--start::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-top: 3px solid currentcolor;
  border-right: 3px solid currentcolor;
  transform: rotate(45deg);
}

.ag-button--block {
  display: flex;
  width: 100%;
}

.ag-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-3);
  margin-bottom: var(--ag-space-5);
}

/* The start arrow points into the reading direction. */
[dir="rtl"] .ag-button--start::after {
  transform: rotate(225deg);
}

/* Variant: pill, fully round ends for a call to action. Works with square or rounded corners. */
.ag-button--pill {
  border-radius: 999px;
  padding-inline: var(--ag-space-6);
}

/* Breadcrumb. An ordered list inside <nav aria-label="Breadcrumb">. */
.ag-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
  font-size: var(--ag-font-size-xs);
}

.ag-breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  min-height: var(--ag-size-target);
}

.ag-breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-inline: var(--ag-space-2);
  border-top: 2px solid var(--ag-color-ink-muted);
  border-right: 2px solid var(--ag-color-ink-muted);
  transform: rotate(45deg);
}

.ag-breadcrumb a {
  color: var(--ag-color-ink);
}

.ag-breadcrumb [aria-current] {
  color: var(--ag-color-ink-muted);
}

/* Separators point into the reading direction. */
[dir="rtl"] .ag-breadcrumb li + li::before {
  transform: rotate(225deg);
}

/* Pagination. <nav aria-label="Pagination"> with a list of links. */
.ag-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-1);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.ag-pagination li {
  margin: 0;
}

.ag-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ag-size-target);
  min-height: var(--ag-size-target);
  padding-inline: var(--ag-space-3);
  border-radius: var(--ag-size-radius);
  color: var(--ag-color-ink);
  font-weight: var(--ag-font-weight-bold);
  text-decoration: none;
}

.ag-pagination__link:visited {
  color: var(--ag-color-ink);
}

.ag-pagination__link:hover {
  background: var(--ag-color-paper-alt);
  text-decoration: underline;
}

.ag-pagination__link[aria-current="page"] {
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

.ag-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding-inline: var(--ag-space-2);
  color: var(--ag-color-ink-muted);
}

/* Variant: previous and next only, at either end of the row. */
.ag-pagination--simple {
  justify-content: space-between;
}

/* Forms. Labels always visible, hints and errors linked by aria-describedby,
   controls 48px tall with 2px borders, error state marks the whole field. */
.ag-field {
  margin-bottom: var(--ag-space-5);
}

.ag-field--error {
  padding-inline-start: var(--ag-space-4);
  border-inline-start: 5px solid var(--ag-color-error);
}

.ag-label,
.ag-legend {
  display: block;
  margin-bottom: var(--ag-space-2);
  font-weight: var(--ag-font-weight-bold);
}

.ag-legend {
  max-width: 100%;
}

.ag-label--lg,
.ag-legend--lg {
  font-size: var(--ag-font-size-xl);
  margin-bottom: var(--ag-space-3);
}

.ag-label--xl,
.ag-legend--xl {
  font-size: var(--ag-font-size-2xl);
  margin-bottom: var(--ag-space-4);
}

.ag-hint {
  display: block;
  margin-bottom: var(--ag-space-2);
  color: var(--ag-color-ink-muted);
}

.ag-error-message {
  display: block;
  margin-bottom: var(--ag-space-2);
  color: var(--ag-color-error);
  font-weight: var(--ag-font-weight-bold);
}

/* Fields are capped at 36rem, so a form reads as one column, not a row of page-wide boxes.
   The width modifiers below set narrower caps for fields of a known length. */
.ag-input,
.ag-textarea,
.ag-select {
  display: block;
  width: 100%;
  max-width: 36rem;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-3);
  border: var(--ag-size-control-border) solid var(--ag-color-border-strong);
  border-radius: var(--ag-size-radius-field);
  background: var(--ag-color-paper);
  color: var(--ag-color-ink);
  -webkit-appearance: none;
  appearance: none;
}

/* A text field shows focus every time it is clicked, not only from the keyboard, so it gets a
   calmer mark than the yellow ring on links and buttons: a thick dark edge and a ring in the pack's
   primary colour. Both pass 3:1 against the page; the primary colour is held to 4.5:1. */
.ag-input:focus-visible,
.ag-textarea:focus-visible,
.ag-select:focus-visible,
.ag-search__input:focus-visible {
  border-color: var(--ag-color-ink);
  outline: var(--ag-size-focus-ring) solid var(--ag-color-primary);
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px var(--ag-color-ink);
}

.ag-input:disabled,
.ag-textarea:disabled,
.ag-select:disabled {
  background: var(--ag-color-paper-alt);
  color: var(--ag-color-ink-muted);
  cursor: not-allowed;
}

.ag-input[aria-invalid="true"],
.ag-textarea[aria-invalid="true"],
.ag-select[aria-invalid="true"],
.ag-input--error {
  border-color: var(--ag-color-error);
}

.ag-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Width by character count, for fields with a known length (ID numbers, postcodes, years). */
.ag-input--width-4 {
  max-width: 7ch;
}

.ag-input--width-10 {
  max-width: 14ch;
}

.ag-input--width-20 {
  max-width: 24ch;
}

.ag-input--width-30 {
  max-width: 34ch;
}

.ag-select {
  padding-inline-end: var(--ag-space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231b1b1b' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ag-space-3) center;
  background-size: 1rem;
}

/* Prefix and suffix, for currency and units. */
.ag-input-group {
  display: flex;
  align-items: stretch;
}

.ag-input-group .ag-input {
  flex: 1 1 auto;
  min-width: 0;
}

.ag-input-group__affix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--ag-space-3);
  border: var(--ag-size-control-border) solid var(--ag-color-border-strong);
  background: var(--ag-color-paper-alt);
  font-weight: var(--ag-font-weight-bold);
  white-space: nowrap;
}

.ag-input-group__affix:first-child {
  border-inline-end: 0;
}

.ag-input-group__affix:last-child {
  border-inline-start: 0;
}

/* Checkboxes and radios. The native input is restyled, never hidden, so it
   stays keyboard focusable and visible in forced-colours mode. */
.ag-checkbox,
.ag-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--ag-space-3);
  min-height: var(--ag-size-target);
  padding-block: var(--ag-space-2);
  cursor: pointer;
}

.ag-checkbox input,
.ag-radio input {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.125rem 0 0;
  border: var(--ag-size-control-border) solid var(--ag-color-ink);
  background: var(--ag-color-paper);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ag-checkbox input {
  border-radius: var(--ag-size-radius);
}

.ag-radio input {
  border-radius: 50%;
}

.ag-checkbox input:checked {
  background-color: var(--ag-color-primary);
  border-color: var(--ag-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
}

.ag-radio input:checked {
  border-color: var(--ag-color-primary);
  background: var(--ag-color-primary);
  box-shadow: inset 0 0 0 0.3rem var(--ag-color-paper);
}

.ag-radio input:checked:focus-visible {
  box-shadow:
    inset 0 0 0 0.3rem var(--ag-color-paper),
    0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
}

.ag-checkbox input:disabled,
.ag-radio input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ag-checkbox__label,
.ag-radio__label {
  padding-top: 0.2rem;
}

.ag-checkbox__hint,
.ag-radio__hint {
  display: block;
  color: var(--ag-color-ink-muted);
  font-weight: var(--ag-font-weight-normal);
}

.ag-choices {
  margin-bottom: var(--ag-space-3);
}

.ag-choices--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ag-space-5);
}

.ag-choices__divider {
  padding-block: var(--ag-space-2);
  color: var(--ag-color-ink-muted);
}

/* The select caret sits at the end of the reading direction. */
[dir="rtl"] .ag-select {
  background-position: left var(--ag-space-3) center;
}

/* Error summary. Placed at the top of the form, focused on page load, each item
   links to the field it describes. */
.ag-error-summary {
  margin-bottom: var(--ag-space-6);
  padding: var(--ag-space-4);
  border: 5px solid var(--ag-color-error);
  border-radius: var(--ag-size-radius-surface);
}

.ag-error-summary:focus {
  outline: var(--ag-size-focus-ring) solid var(--ag-color-focus);
  box-shadow: 0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
}

.ag-error-summary__title {
  margin: 0 0 var(--ag-space-3);
  font-size: var(--ag-font-size-xl);
}

.ag-error-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-error-summary__list li {
  margin-bottom: var(--ag-space-2);
}

.ag-error-summary__list a {
  color: var(--ag-color-error);
  font-weight: var(--ag-font-weight-bold);
}

.ag-error-summary__list a:visited {
  color: var(--ag-color-error);
}

/* Date input. Three plain numeric fields instead of a date picker. Works on
   every phone, with every screen reader, and with dates people already know. */
.ag-date-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-4);
}

.ag-date-input__item {
  display: block;
}

.ag-date-input__label {
  display: block;
  margin-bottom: var(--ag-space-1);
}

.ag-date-input__item .ag-input {
  max-width: 5ch;
  text-align: start;
}

.ag-date-input__item--year .ag-input {
  max-width: 7.5ch;
}

/* Phone number. A dialling-code select and a national number field inside one
   fieldset. The code comes prefilled from the country pack. */
.ag-phone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-3);
}

.ag-phone__item {
  display: block;
}

.ag-phone__label {
  display: block;
  margin-bottom: var(--ag-space-1);
}

.ag-phone__item--code .ag-select {
  width: auto;
  min-width: 7.5rem;
}

.ag-phone__item--number {
  flex: 1 1 12rem;
}

.ag-phone__item--number .ag-input {
  max-width: 20rem;
}

/* National ID number. A text input tuned for identifiers: tabular figures,
   a little tracking, and a width that comes from the pack's length. */
.ag-id-input {
  max-width: 22rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* Money. Tabular figures so columns of amounts line up, and no line break
   between the symbol and the number. */
.ag-money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ag-money--lg {
  font-size: var(--ag-font-size-2xl);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
}

/* Character count. The message under a textarea that says how many
   characters remain. Filled by afrigov.js; without script the hint states the limit. */
.ag-char-count__message {
  display: block;
  margin-top: var(--ag-space-1);
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
}

.ag-char-count__message--over {
  color: var(--ag-color-error);
  font-weight: var(--ag-font-weight-bold);
}

.ag-char-count--over .ag-textarea {
  border-color: var(--ag-color-error);
}

/* Service card. A list of services where the whole card is the link, but only
   the title is focusable, so keyboard and screen reader users get one stop per card. */
.ag-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--ag-space-4);
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
}

.ag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-2);
  margin: 0;
  padding: var(--ag-space-4);
  border: 1px solid var(--ag-color-border);
  border-top: 4px solid var(--ag-color-primary);
  background: var(--ag-color-paper);
  border-radius: var(--ag-size-radius-surface);
}

.ag-card:hover {
  border-color: var(--ag-color-primary);
}

.ag-card:focus-within {
  outline: var(--ag-size-focus-ring) solid var(--ag-color-focus);
  box-shadow: 0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
}

/* Where the browser can tell, show the ring for the keyboard only, not for a click or a tap. */
@supports selector(:has(a)) {
  .ag-card:focus-within {
    outline: none;
    box-shadow: none;
  }

  .ag-card:has(.ag-card__link:focus-visible) {
    outline: var(--ag-size-focus-ring) solid var(--ag-color-focus);
    box-shadow: 0 0 0 calc(var(--ag-size-focus-ring) * 2) var(--ag-color-ink);
  }
}

/* Logo slot above the title. A fixed-height box so any shape of mark lines up across the grid. */
.ag-card__logo {
  display: flex;
  align-items: center;
  height: 3.5rem;
  margin-bottom: var(--ag-space-2);
}

.ag-card__logo img {
  max-width: 10rem;
  max-height: 100%;
  width: auto;
  height: auto;
}

.ag-card__title {
  margin: 0;
  font-size: var(--ag-font-size-lg);
}

.ag-card__link {
  color: var(--ag-color-link);
}

/* Stretch the link over the card without making the card itself focusable. */
.ag-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ag-card__link:focus-visible {
  background: transparent;
  outline: none;
  box-shadow: none;
  color: var(--ag-color-link);
}

.ag-card:hover .ag-card__link {
  text-decoration-thickness: max(3px, 0.1875em);
}

.ag-card__text {
  margin: 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-card__meta {
  margin: auto 0 0;
  padding-top: var(--ag-space-2);
}

/* Variants. */
.ag-card--tinted {
  background: var(--ag-color-paper-alt);
}

.ag-card--plain {
  border-top: 1px solid var(--ag-color-border);
}

/* The top edge in the pack's accent colour. */
.ag-card--accent {
  border-top-color: var(--ag-color-accent);
}

/* A photograph across the top of the card, bleeding to its edges. */
.ag-card__image {
  margin: calc(-1 * var(--ag-space-4)) calc(-1 * var(--ag-space-4)) 0;
}

.ag-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ag-color-paper-alt);
}

/* Horizontal: logo or image beside the text. Wrap the text in ag-card__body. */
/* Horizontal cards need room: a grid of them uses wider columns. */
.ag-cards--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

.ag-card--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ag-space-4);
}

.ag-card--horizontal .ag-card__logo {
  flex: 0 0 6rem;
  height: auto;
  margin-bottom: 0;
}

.ag-card--horizontal .ag-card__image {
  flex: 0 0 8rem;
  margin: 0;
}

.ag-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ag-space-2);
  min-width: 0;
}

/* Details. A single disclosure for help text people only sometimes need. */
.ag-details {
  margin-bottom: var(--ag-space-5);
}

.ag-details__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
  color: var(--ag-color-link);
  text-decoration: underline;
  list-style: none;
  cursor: pointer;
}

.ag-details__summary::-webkit-details-marker {
  display: none;
}

.ag-details__summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
  border-left: 0.5em solid currentcolor;
}

.ag-details[open] > .ag-details__summary::before {
  transform: rotate(90deg);
}

.ag-details__summary:hover {
  color: var(--ag-color-link-hover);
  text-decoration-thickness: max(3px, 0.1875em);
}

.ag-details__body {
  margin-top: var(--ag-space-2);
  padding: var(--ag-space-3) var(--ag-space-4);
  border-inline-start: 5px solid var(--ag-color-border);
  max-width: var(--ag-size-measure);
}

.ag-details__body > :last-child {
  margin-bottom: 0;
}

/* The disclosure triangle points into the reading direction. */
[dir="rtl"] .ag-details__summary::before {
  border-left: 0;
  border-right: 0.5em solid currentcolor;
}

[dir="rtl"] .ag-details[open] > .ag-details__summary::before {
  transform: rotate(-90deg);
}

/* Language switcher. A nav of links, one per official language, each in its
   own language and script. The current one is marked, not linked. */
.ag-lang {
  margin-bottom: var(--ag-space-4);
}

.ag-lang__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-lang__list li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.ag-lang__list li + li::before {
  content: "";
  width: 1px;
  height: 1em;
  margin-inline: var(--ag-space-2);
  background: var(--ag-color-border-strong);
}

.ag-lang__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding-inline: var(--ag-space-1);
  font-size: var(--ag-font-size-xs);
}

.ag-lang__link[aria-current="true"] {
  color: var(--ag-color-ink);
  font-weight: var(--ag-font-weight-bold);
  text-decoration: none;
}

/* Back link. Above the heading on every question page. */
.ag-back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  margin-bottom: var(--ag-space-4);
  color: var(--ag-color-ink);
  font-size: var(--ag-font-size-xs);
}

.ag-back-link:visited {
  color: var(--ag-color-ink);
}

.ag-back-link::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-inline-end: var(--ag-space-2);
  border-top: 2px solid currentcolor;
  border-inline-start: 2px solid currentcolor;
  transform: rotate(-45deg);
}

[dir="rtl"] .ag-back-link::before {
  transform: rotate(45deg);
}

/* Back to top. A plain link to #top at the end of a long page. No script. */
.ag-back-to-top {
  margin-top: var(--ag-space-6);
}

.ag-back-to-top__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  color: var(--ag-color-ink);
  font-size: var(--ag-font-size-xs);
}

.ag-back-to-top__link:visited {
  color: var(--ag-color-ink);
}

.ag-back-to-top__link::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-top: 0.25em;
  margin-inline-end: var(--ag-space-2);
  border-top: 2px solid currentcolor;
  border-inline-start: 2px solid currentcolor;
  transform: rotate(45deg);
}

/* Sticky: rides the bottom of the screen while the article is in view, then
   settles at the article's end. It sits on the page background with a hairline,
   so text scrolls under it rather than behind a floating button. */
.ag-back-to-top--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-block: var(--ag-space-1);
  border-top: 1px solid var(--ag-color-border);
  background: var(--ag-color-paper);
}

/* A keyboard user tabbing down the page never has focus hidden under the bar. */
html:has(.ag-back-to-top--sticky) {
  scroll-padding-bottom: calc(var(--ag-size-target) + var(--ag-space-5));
}

/* The reset turns this off again for anyone who asks for reduced motion. */
html:has(.ag-back-to-top) {
  scroll-behavior: smooth;
}

/* Dated list. News, events, articles: a link with a date or other meta under it. */
.ag-list {
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ag-color-border);
}

.ag-list__item {
  margin: 0;
  padding-block: var(--ag-space-3);
  border-bottom: 1px solid var(--ag-color-border);
}

.ag-list__link {
  display: inline-block;
  font-weight: var(--ag-font-weight-bold);
}

.ag-list__meta {
  display: block;
  margin-top: var(--ag-space-1);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-list__text {
  margin: var(--ag-space-1) 0 0;
  max-width: var(--ag-size-measure);
}

/* With a thumbnail: the item becomes a row, image first, text beside it. */
.ag-list__item--media {
  display: flex;
  gap: var(--ag-space-4);
  align-items: flex-start;
}

.ag-list__media {
  flex: 0 0 7rem;
  margin: 0;
}

.ag-list__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ag-color-paper-alt);
}

.ag-list__body {
  min-width: 0;
}

/* Image and figure. A captioned image, and a gallery of them. Never put text over an image. */
.ag-figure {
  margin: 0 0 var(--ag-space-5);
}

.ag-figure__image,
.ag-image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ag-color-paper-alt);
}

.ag-figure--3-2 .ag-figure__image,
.ag-image--3-2 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ag-figure--16-9 .ag-figure__image,
.ag-image--16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ag-figure--square .ag-figure__image,
.ag-image--square {
  aspect-ratio: 1;
  object-fit: cover;
}

.ag-figure__caption {
  margin-top: var(--ag-space-2);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
  max-width: var(--ag-size-measure);
}

.ag-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--ag-space-4);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.ag-gallery > li {
  margin: 0;
}

.ag-gallery .ag-figure {
  margin: 0;
}

/* Gallery columns. The default fits as many 14rem columns as the width allows. */
@media (min-width: 40em) {
  .ag-gallery--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48em) {
  .ag-gallery--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Download link. The format and size are part of the link text, so they are read with it. */
.ag-download {
  font-weight: var(--ag-font-weight-bold);
}

.ag-download::before {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  width: 0.8em;
  height: 1em;
  margin-inline-end: 0.4em;
  border: 2px solid currentcolor;
  border-radius: 2px 0.4em 2px 2px;
  background: linear-gradient(currentcolor, currentcolor) center / 55% 2px no-repeat;
}

.ag-download__meta {
  font-weight: var(--ag-font-weight-normal);
  white-space: nowrap;
}

/* Empty state. A listing with nothing to list yet. Says so, and what to do instead. */
.ag-empty {
  margin-bottom: var(--ag-space-5);
  padding: var(--ag-space-5);
  border: 1px dashed var(--ag-color-border-strong);
  background: var(--ag-color-paper-alt);
  max-width: var(--ag-size-measure);
  border-radius: var(--ag-size-radius-surface);
}

.ag-empty__title {
  margin: 0 0 var(--ag-space-2);
  font-size: var(--ag-font-size-lg);
}

.ag-empty > :last-child {
  margin-bottom: 0;
}

/* Hero. The top of a department or service home: title, lead, one action, and
   optionally an image beside the text. Text never sits directly on a photograph: the cover
   variant puts it in a solid panel. */
.ag-hero {
  margin-bottom: var(--ag-space-6);
  padding-block: var(--ag-space-7);
}

/* 48em = breakpoint.md. Room above and below the text, so the title, lead and actions
   do not crowd each other. */
@media (min-width: 48em) {
  .ag-hero {
    padding-block: var(--ag-space-8);
  }
}

.ag-hero__inner {
  display: grid;
  gap: var(--ag-space-5);
  align-items: center;
}

/* 64em = breakpoint.lg */
@media (min-width: 64em) {
  .ag-hero--image .ag-hero__inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--ag-space-8);
  }
}

.ag-hero__title {
  margin: 0 0 var(--ag-space-4);
}

/* A step smaller than a lead elsewhere, so it reads as text under the title and not as a
   second heading. */
.ag-hero__lead {
  max-width: var(--ag-size-measure);
  margin-bottom: var(--ag-space-6);
  font-size: var(--ag-font-size-lg);
}

.ag-hero__actions {
  margin-bottom: 0;
}

/* A line under the actions, such as "Moving house? Transfer your connection", keeps clear
   of the buttons. */
.ag-hero__actions + * {
  margin-top: var(--ag-space-6);
}

.ag-hero__media {
  margin: 0;
}

.ag-hero__media .ag-figure__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ag-size-radius);
}

/* Variant: a solid panel in the primary colour. Still no image behind the text. */
.ag-hero--primary {
  padding-inline: var(--ag-space-5);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

.ag-hero--primary .ag-hero__title,
.ag-hero--primary .ag-hero__lead,
.ag-hero--primary p,
.ag-hero--primary a:not(.ag-button),
.ag-hero--primary a:not(.ag-button):visited {
  color: inherit;
}

.ag-hero--primary .ag-button {
  background: var(--ag-color-paper);
  border-color: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

.ag-hero--primary .ag-button:hover {
  background: var(--ag-color-primary-tint);
  border-color: var(--ag-color-primary-tint);
  color: var(--ag-color-primary-hover);
}

/* A secondary button stays secondary: an outline in the panel's text colour. */
.ag-hero--primary .ag-button--secondary,
.ag-hero--primary .ag-button--secondary:hover {
  background: transparent;
  border-color: currentcolor;
  color: inherit;
}

.ag-hero--primary .ag-button--secondary:hover {
  text-decoration: underline;
  text-decoration-thickness: max(3px, 0.1875em);
}

/* Variant: centred, for campaign pages with no image. */
.ag-hero--centred {
  text-align: center;
}

.ag-hero--centred .ag-hero__lead {
  margin-inline: auto;
}

.ag-hero--centred .ag-hero__actions {
  justify-content: center;
}

/* Variant: the image on the reading side, text after it. */
@media (min-width: 64em) {
  .ag-hero--image-first .ag-hero__inner {
    grid-template-columns: 2fr 3fr;
    gap: var(--ag-space-8);
  }

  .ag-hero--image-first .ag-hero__media {
    order: -1;
  }
}

/* Variant: a photograph across the full width, with the title, lead and action in a solid panel.
   The contrast is between the text and the panel, so it passes whatever the photograph is.
   On a phone the photograph sits above the panel and nothing is laid over it. */
.ag-hero--cover {
  position: relative;
  padding-block: 0;
}

.ag-hero__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ag-color-paper-alt);
}

.ag-hero--cover .ag-hero__inner {
  display: block;
}

/* On a phone the panel rests on the bottom of the photograph, pulled in from the sides, like a
   card on the picture. Only the bottom strip of the photograph is covered, and the text is on the
   solid panel. 47.99em = just under breakpoint.md */
@media (max-width: 47.99em) {
  .ag-hero--cover .ag-hero__inner {
    position: relative;
    margin-top: calc(-1 * var(--ag-space-6));
  }
}

.ag-hero__panel {
  padding: var(--ag-space-5);
  border-inline-start: 6px solid var(--ag-color-accent);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

.ag-hero__panel .ag-hero__title,
.ag-hero__panel .ag-hero__lead,
.ag-hero__panel p,
.ag-hero__panel li,
.ag-hero__panel a:not(.ag-button),
.ag-hero__panel a:not(.ag-button):visited {
  color: inherit;
}

.ag-hero__panel .ag-button {
  background: var(--ag-color-paper);
  border-color: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

.ag-hero__panel .ag-button:hover {
  background: var(--ag-color-primary-tint);
  border-color: var(--ag-color-primary-tint);
  color: var(--ag-color-primary-hover);
}

.ag-hero__panel .ag-button--secondary,
.ag-hero__panel .ag-button--secondary:hover {
  background: transparent;
  border-color: currentcolor;
  color: inherit;
}

/* Light panel: the page colour with dark text, for a quieter page. */
.ag-hero--cover-light .ag-hero__panel {
  background: var(--ag-color-paper);
  color: var(--ag-color-ink);
}

.ag-hero--cover-light .ag-hero__panel .ag-button {
  background: var(--ag-color-primary);
  border-color: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

.ag-hero--cover-light .ag-hero__panel .ag-button--secondary {
  background: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

/* 48em = breakpoint.md */
@media (min-width: 48em) {
  .ag-hero--cover {
    display: grid;
    min-height: 26rem;
  }

  .ag-hero__cover {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .ag-hero--cover .ag-hero__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-block: var(--ag-space-6);
  }

  .ag-hero__panel {
    max-width: 36rem;
  }

  /* Variants: where the panel sits over the photograph. */
  .ag-hero--cover-end .ag-hero__inner {
    justify-content: flex-end;
  }

  .ag-hero--cover-top .ag-hero__inner {
    align-items: flex-start;
  }
}

/* Variant: tall, for a hero with more to say, such as a longer lead or a second line of
   actions. A taller panel with the text centred in it. Phones keep the natural height.
   Last in the file, so it also sets the height of a cover hero. */
@media (min-width: 48em) {
  .ag-hero--tall {
    display: grid;
    align-items: center;
    min-height: 28rem;
  }
}

/* Band. A full-width section with a background, so a page is not one white sheet.
   The band spans the viewport; put a container inside it for the content. */
.ag-band {
  margin-bottom: var(--ag-space-6);
  padding-block: var(--ag-space-6);
}

.ag-band--tint {
  background: var(--ag-color-paper-alt);
}

.ag-band--primary {
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

.ag-band--dark {
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
}

/* The pack's second colour: Ghana's gold, Kenya's red. The build picks ink or white for the text. */
.ag-band--accent {
  background: var(--ag-color-accent);
  color: var(--ag-color-on-accent);
}

/* On a coloured band, text, headings and links take the band's colour. Buttons keep their own
   colours, visited or not. */
.ag-band--primary h1,
.ag-band--primary h2,
.ag-band--primary h3,
.ag-band--primary p,
.ag-band--primary a:not(.ag-button),
.ag-band--primary a:not(.ag-button):visited,
.ag-band--dark h1,
.ag-band--dark h2,
.ag-band--dark h3,
.ag-band--dark p,
.ag-band--dark a:not(.ag-button),
.ag-band--dark a:not(.ag-button):visited,
.ag-band--accent h1,
.ag-band--accent h2,
.ag-band--accent h3,
.ag-band--accent p,
.ag-band--accent a:not(.ag-button),
.ag-band--accent a:not(.ag-button):visited {
  color: inherit;
}

.ag-band--primary .ag-button,
.ag-band--dark .ag-button {
  background: var(--ag-color-paper);
  border-color: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

.ag-band--primary .ag-button:hover,
.ag-band--dark .ag-button:hover {
  background: var(--ag-color-primary-tint);
  border-color: var(--ag-color-primary-tint);
  color: var(--ag-color-primary-hover);
}

.ag-band--accent .ag-button {
  background: var(--ag-color-on-accent);
  border-color: var(--ag-color-on-accent);
  color: var(--ag-color-accent);
}

.ag-band--accent .ag-button:hover {
  background: var(--ag-color-on-accent);
  border-color: var(--ag-color-on-accent);
  color: var(--ag-color-accent);
  text-decoration: underline;
}

/* A secondary button stays secondary on a coloured band: an outline in the band's text colour,
   so the main action is still the solid one. */
.ag-band--primary .ag-button--secondary,
.ag-band--dark .ag-button--secondary,
.ag-band--accent .ag-button--secondary,
.ag-band--primary .ag-button--secondary:hover,
.ag-band--dark .ag-button--secondary:hover,
.ag-band--accent .ag-button--secondary:hover {
  background: transparent;
  border-color: currentcolor;
  color: inherit;
}

.ag-band--primary .ag-button--secondary:hover,
.ag-band--dark .ag-button--secondary:hover,
.ag-band--accent .ag-button--secondary:hover {
  text-decoration: underline;
  text-decoration-thickness: max(3px, 0.1875em);
}

/* A hero inside a band takes the band's spacing instead of its own. */
.ag-band .ag-hero {
  margin-bottom: 0;
  padding-block: 0;
}

/* A dated list on a coloured band: its meta line and its hairlines take the band's colour. */
.ag-band--primary .ag-list__meta,
.ag-band--dark .ag-list__meta,
.ag-band--accent .ag-list__meta {
  color: inherit;
}

.ag-band--primary .ag-list__item,
.ag-band--dark .ag-list__item,
.ag-band--accent .ag-list__item {
  border-bottom-color: currentcolor;
}

.ag-band > .ag-container > :last-child {
  margin-bottom: 0;
}

/* Flag stripe. A thin line in the country's flag colours, from the pack. It says whose
   site this is without a word. With no pack it is one line in the primary colour. */
.ag-stripe,
.ag-header--striped::after,
.ag-footer--striped::before,
.ag-card--flag::before {
  display: block;
  height: 0.375rem;
  background: linear-gradient(
    90deg,
    var(--ag-flag-1, var(--ag-color-primary)) 0 33.34%,
    var(--ag-flag-2, var(--ag-flag-1, var(--ag-color-primary))) 33.34% 66.67%,
    var(--ag-flag-3, var(--ag-flag-1, var(--ag-color-primary))) 66.67%
  );
}

/* On the header the stripe takes the place of the bottom border. */
.ag-header--striped {
  border-bottom: 0;
}

.ag-header--striped::after {
  content: "";
}

/* On the footer the stripe takes the place of the top border. */
.ag-footer--striped {
  padding-block-start: 0;
  border-top: 0;
}

.ag-footer--striped::before {
  content: "";
  margin-block-end: var(--ag-space-6);
}

/* A card whose top edge is the whole flag. For the few cards on a page that should carry it. */
.ag-card--flag {
  border-top: 0;
}

/* The stripe sits at the very top of the card, in place of the top border, and reaches 1px
   beyond the padding on each side, over the card's own side borders, so no grey shows beside it. */
.ag-card--flag::before {
  content: "";
  height: 4px;
  margin: calc(-1 * var(--ag-space-4)) calc(-1 * var(--ag-space-4) - 1px) var(--ag-space-2);
  /* Its top edge is the card's, so it takes the card's top corners. */
  border-radius: var(--ag-size-radius-surface) var(--ag-size-radius-surface) 0 0;
}

/* Feature. One thing described: a picture of it beside its name, a few lines
   and its main points. A card, a document, a programme, a building. */
.ag-feature {
  display: grid;
  gap: var(--ag-space-5);
  align-items: center;
  margin-bottom: var(--ag-space-6);
}

/* 48em = breakpoint.md */
@media (min-width: 48em) {
  .ag-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--ag-space-7);
  }

  /* Variant: the picture after the text. */
  .ag-feature--reverse .ag-feature__media {
    order: 2;
  }
}

.ag-feature__media {
  margin: 0;
}

.ag-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ag-size-radius);
}

.ag-feature__title {
  margin: 0 0 var(--ag-space-3);
}

.ag-feature__body > :last-child {
  margin-bottom: 0;
}

/* The main points. Each is marked with a square in the pack's accent colour. */
.ag-feature__list {
  margin: 0 0 var(--ag-space-4);
  padding: 0;
  list-style: none;
}

.ag-feature__list > li {
  position: relative;
  margin: 0 0 var(--ag-space-2);
  padding-inline-start: var(--ag-space-5);
}

.ag-feature__list > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-start: 0;
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid currentcolor;
  background: var(--ag-color-accent);
}

/* People. The leadership of an organisation: a portrait, a name and a role for each person. */
.ag-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--ag-space-5) var(--ag-space-4);
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
}

.ag-person {
  margin: 0;
}

.ag-person__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--ag-space-3);
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-paper-alt);
}

.ag-person__name {
  margin: 0;
  font-size: var(--ag-font-size-md);
  line-height: var(--ag-font-leading-tight);
}

.ag-person__role {
  margin: var(--ag-space-1) 0 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

/* Variants: a fixed number per row, two to six. Every person is the same size whatever the
   number: two or three take the width they would have in four columns and sit in the middle of
   the page; six are narrower and fill the row. From tablet width up; on a phone they wrap as
   the default does. 48em = breakpoint.md, 64em = breakpoint.lg */
@media (min-width: 48em) {
  .ag-people--2,
  .ag-people--3 {
    justify-content: center;
  }

  .ag-people--2 {
    grid-template-columns: repeat(2, calc((100% - 3 * var(--ag-space-4)) / 4));
  }

  .ag-people--3 {
    grid-template-columns: repeat(3, calc((100% - 3 * var(--ag-space-4)) / 4));
  }

  .ag-people--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 64em) {
  .ag-people--6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Variant: a row for each person, with a small portrait at the start. For long lists. */
.ag-people--rows {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--ag-space-4);
}

.ag-people--rows .ag-person {
  display: flex;
  align-items: center;
  gap: var(--ag-space-3);
}

.ag-people--rows .ag-person__photo {
  flex: none;
  width: 4rem;
  margin-bottom: 0;
  border-radius: 50%;
}

/* Steps. The numbered steps of a process, in order: what happens at the office,
   how to apply, what happens next. The numbers come from the list itself. */
.ag-steps {
  max-width: var(--ag-size-measure);
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
  counter-reset: ag-step;
}

.ag-steps__item {
  position: relative;
  min-height: 2rem;
  margin: 0;
  padding-block: 0.2rem var(--ag-space-5);
  padding-inline-start: calc(2rem + var(--ag-space-4));
  counter-increment: ag-step;
}

/* The number, in a ring. */
.ag-steps__item::before {
  content: counter(ag-step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ag-color-primary);
  border-radius: 50%;
  background: var(--ag-color-paper);
  color: var(--ag-color-primary);
  font-size: var(--ag-font-size-sm);
  font-weight: var(--ag-font-weight-bold);
  line-height: 1;
}

/* The line that joins one step to the next. */
.ag-steps__item::after {
  content: "";
  position: absolute;
  inset-block: 2rem 0;
  inset-inline-start: calc(1rem - 1px);
  width: 2px;
  background: var(--ag-color-border);
}

.ag-steps__item:last-child {
  padding-block-end: 0;
}

.ag-steps__item:last-child::after {
  display: none;
}

.ag-steps__title {
  margin: 0 0 var(--ag-space-1);
  font-size: var(--ag-font-size-md);
  line-height: var(--ag-font-leading-base);
}

.ag-steps__item > :last-child {
  margin-bottom: 0;
}

/* Key figures. A few headline numbers, each with a label: people registered,
   cards issued, offices open. The line beside each is the pack's accent colour. */
.ag-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--ag-space-5) var(--ag-space-4);
  margin: 0 0 var(--ag-space-6);
}

/* The label comes first in the markup, so a screen reader says what the number is
   before the number. On screen the number sits above its label. */
.ag-stats__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  margin: 0;
  padding-inline-start: var(--ag-space-4);
  border-inline-start: 4px solid var(--ag-color-accent);
}

.ag-stats__value {
  margin: 0;
  font-size: var(--ag-font-size-2xl);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
  font-variant-numeric: tabular-nums;
}

.ag-stats__label {
  margin: var(--ag-space-1) 0 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-band--primary .ag-stats__label,
.ag-band--dark .ag-stats__label,
.ag-band--accent .ag-stats__label {
  color: inherit;
}

/* Events. A list of what is coming up: a date block, the title, where and when, a line about it.
   The date is a real time element, so it is read as a date and can be understood by machines. */
.ag-events {
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
}

.ag-event {
  display: flex;
  gap: var(--ag-space-4);
  margin: 0;
  padding-block: var(--ag-space-4);
  border-bottom: 1px solid var(--ag-color-border);
}

.ag-events > .ag-event:first-child {
  border-top: 1px solid var(--ag-color-border);
}

/* The date block: day over month, in the primary colour. */
.ag-event__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  text-align: center;
  line-height: 1;
}

.ag-event__day {
  font-size: var(--ag-font-size-2xl);
  font-weight: var(--ag-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ag-event__month {
  margin-top: var(--ag-space-1);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A date not yet fixed, or an event that has passed: a quiet block. */
.ag-event__date--tbc,
.ag-event--past .ag-event__date {
  background: var(--ag-color-paper-alt);
  color: var(--ag-color-ink);
}

.ag-event__date--tbc {
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
}

.ag-event__body {
  flex: 1 1 0;
  min-width: 0;
}

.ag-event__title {
  margin: 0;
  font-size: var(--ag-font-size-md);
  line-height: var(--ag-font-leading-base);
}

.ag-event__meta {
  margin: var(--ag-space-1) 0 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-event__text {
  max-width: var(--ag-size-measure);
  margin: var(--ag-space-2) 0 0;
  font-size: var(--ag-font-size-sm);
}

/* A larger date block for the top of an event's own page. */
.ag-event__date--lg {
  width: 6rem;
  height: 6rem;
}

.ag-event__date--lg .ag-event__day {
  font-size: var(--ag-font-size-3xl);
}

/* On a coloured band the text takes the band's colour and the block inverts, so it still stands out. */
.ag-band--primary .ag-event__meta,
.ag-band--dark .ag-event__meta,
.ag-band--accent .ag-event__meta {
  color: inherit;
}

.ag-band--primary .ag-event,
.ag-band--dark .ag-event,
.ag-band--accent .ag-event,
.ag-band--primary .ag-events > .ag-event:first-child,
.ag-band--dark .ag-events > .ag-event:first-child,
.ag-band--accent .ag-events > .ag-event:first-child {
  border-color: currentcolor;
}

.ag-band--primary .ag-event__date,
.ag-band--dark .ag-event__date,
.ag-band--accent .ag-event__date {
  background: var(--ag-color-paper);
  color: var(--ag-color-primary);
}

/* An event's page: the details beside the flyer. The flyer is extra; everything on it is also
   written on the page. 48em = breakpoint.md */
.ag-event-detail {
  display: grid;
  gap: var(--ag-space-5);
  margin-bottom: var(--ag-space-6);
}

@media (min-width: 48em) {
  .ag-event-detail {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: start;
  }
}

.ag-event-detail > .ag-summary {
  margin-bottom: 0;
}

.ag-flyer {
  margin: 0;
}

.ag-flyer a {
  display: block;
}

.ag-flyer img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-size-radius);
}

.ag-flyer__caption {
  margin-top: var(--ag-space-2);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

/* Video. A still image with a play button, the title and the length. The player loads only when
   someone presses it; without the script the button is a link to the video. See decision 004. */
.ag-video {
  margin: 0 0 var(--ag-space-5);
}

.ag-video__poster,
.ag-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-paper-dark);
}

.ag-video__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ag-video__frame {
  border: 0;
}

/* The play button: a circle in the primary colour with a triangle, in the middle of the picture. */
.ag-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border: 3px solid var(--ag-color-paper);
  border-radius: 50%;
  background: var(--ag-color-primary);
}

.ag-video__play::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 54%;
  border-block: 0.75rem solid transparent;
  border-inline-start: 1.2rem solid var(--ag-color-on-primary);
  transform: translate(-50%, -50%);
}

[dir="rtl"] .ag-video__play::after {
  transform: translate(50%, -50%) scaleX(-1);
}

/* The label along the bottom of the picture: what pressing does, the title and the length. */
.ag-video__label {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--ag-space-3) var(--ag-space-4);
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
  font-weight: var(--ag-font-weight-bold);
  line-height: var(--ag-font-leading-tight);
  text-decoration: underline;
}

.ag-video__length {
  margin-inline-start: var(--ag-space-2);
  font-weight: var(--ag-font-weight-normal);
}

.ag-video__poster:hover .ag-video__play {
  background: var(--ag-color-primary-hover);
}

.ag-video__poster:hover .ag-video__label {
  text-decoration-thickness: max(3px, 0.1875em);
}

.ag-video__poster:focus-visible {
  background: var(--ag-color-paper-dark);
}

.ag-video__poster:focus-visible .ag-video__label {
  background: var(--ag-color-focus);
  color: var(--ag-color-ink);
  text-decoration: none;
}

.ag-video__caption {
  margin-top: var(--ag-space-2);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

/* Video card: a card whose picture carries a play mark and the length. */
.ag-card--video .ag-card__image {
  position: relative;
}

.ag-card--video .ag-card__image::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 2px solid var(--ag-color-paper);
  border-radius: 50%;
  background: var(--ag-color-primary);
}

.ag-card--video .ag-card__image::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 53%;
  border-block: 0.5rem solid transparent;
  border-inline-start: 0.8rem solid var(--ag-color-on-primary);
  transform: translate(-50%, -50%);
}

.ag-card__duration {
  position: absolute;
  inset-inline-end: var(--ag-space-2);
  inset-block-end: var(--ag-space-2);
  padding: 0.125rem var(--ag-space-2);
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-paper-dark);
  color: var(--ag-color-ink-inverse);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Filters. A row of links that narrow a list by topic: All, Projects, Explainers. Each is a real
   link to a filtered page, so it works with no script and can be bookmarked. */
.ag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-2);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.ag-filters__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-4);
  border: 2px solid var(--ag-color-primary);
  border-radius: 999px;
  color: var(--ag-color-primary);
  font-weight: var(--ag-font-weight-bold);
  text-decoration: none;
}

.ag-filters__link:visited {
  color: var(--ag-color-primary);
}

.ag-filters__link:hover {
  text-decoration: underline;
}

.ag-filters__link[aria-current="page"],
.ag-filters__link[aria-current="true"] {
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
}

/* Search. A plain form, so it works with no JavaScript: it sends the words to a results page.
   The box and the button sit on one line. */
.ag-search {
  margin: 0 0 var(--ag-space-5);
}

.ag-search__label {
  display: block;
  margin-bottom: var(--ag-space-2);
  font-weight: var(--ag-font-weight-bold);
}

/* The box and the button sit side by side with a gap, each with its own edge, so the focus
   ring goes round the box alone and does not run into the button. */
.ag-search__row {
  display: flex;
  gap: var(--ag-space-2);
  max-width: 36rem;
}

.ag-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-3);
  border: var(--ag-size-control-border) solid var(--ag-color-ink);
  border-radius: var(--ag-size-radius-field);
  background: var(--ag-color-paper);
  color: var(--ag-color-ink);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* The browser's own clear button differs everywhere and is too small to tap. */
.ag-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ag-search__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
  padding: var(--ag-space-2) var(--ag-space-4);
  border: var(--ag-size-control-border) solid var(--ag-color-primary);
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  font: inherit;
  font-weight: var(--ag-font-weight-bold);
  cursor: pointer;
}

.ag-search__button:hover {
  background: var(--ag-color-primary-hover);
  border-color: var(--ag-color-primary-hover);
}

/* A magnifier drawn in CSS: a ring and a handle, in the text colour. */
.ag-search__icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid currentcolor;
  border-radius: 50%;
  transform: translate(-0.1em, -0.1em);
}

.ag-search__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 100%;
  width: 2px;
  height: 0.4em;
  background: currentcolor;
  transform: translate(-50%, -15%) rotate(-45deg);
  transform-origin: top;
}

/* Variant: large, for the top of a results page, where the search is the page. */
.ag-search--lg .ag-search__row {
  max-width: none;
}

.ag-search--lg .ag-search__input,
.ag-search--lg .ag-search__button {
  min-height: 3.25rem;
  font-size: var(--ag-font-size-md);
}

/* ---------------------------------------------------------------- in the header */

/* A button with a magnifier that opens the search box under the header. It is a details element,
   so it opens and closes with no script. The button is square, so the header stays on one row. */
.ag-header {
  position: relative;
}

.ag-header__search {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.ag-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ag-size-target);
  height: var(--ag-size-target);
  border: var(--ag-size-control-border) solid var(--ag-color-ink);
  border-radius: var(--ag-size-radius);
  color: var(--ag-color-ink);
  cursor: pointer;
  list-style: none;
}

.ag-header__search-toggle::-webkit-details-marker {
  display: none;
}

.ag-header__search[open] > .ag-header__search-toggle {
  background: var(--ag-color-ink);
  color: var(--ag-color-ink-inverse);
}

/* The open box spans the width of the page, under the header's bottom line. */
.ag-header__search-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 10;
  margin-top: 4px;
  padding-block: var(--ag-space-4);
  border-bottom: 1px solid var(--ag-color-border);
  background: var(--ag-color-paper-alt);
}

.ag-header__search-panel .ag-search {
  margin: 0;
}

.ag-header--primary .ag-header__search-toggle {
  border-color: currentcolor;
  color: var(--ag-color-on-primary);
}

.ag-header--primary .ag-header__search[open] > .ag-header__search-toggle {
  background: var(--ag-color-on-primary);
  color: var(--ag-color-primary);
}

/* With no script there is no Menu button, so the name makes room for the search button itself.
   63.99em = just under breakpoint.lg */
@media (max-width: 63.99em) {
  .ag-header__inner:has(> .ag-header__search) > .ag-header__brand {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* On phones the button sits beside Menu. From desktop width it goes after the navigation.
   64em = breakpoint.lg */
@media (min-width: 64em) {
  .ag-header__search {
    order: 3;
  }
}

/* ---------------------------------------------------------------- results */

/* The line that says what was searched and how many results there are. */
.ag-results__count {
  margin: 0 0 var(--ag-space-5);
  color: var(--ag-color-ink-muted);
}

.ag-results {
  margin: 0 0 var(--ag-space-6);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ag-color-border);
}

.ag-result {
  margin: 0;
  padding-block: var(--ag-space-4);
  border-bottom: 1px solid var(--ag-color-border);
}

.ag-result__title {
  margin: 0 0 var(--ag-space-1);
  font-size: var(--ag-font-size-md);
}

/* Where the page sits on the site: "Services › Passports". It says which result is which when two titles match. */
.ag-result__where {
  margin: 0 0 var(--ag-space-2);
  color: var(--ag-color-ink-muted);
  font-size: var(--ag-font-size-xs);
}

.ag-result__text {
  margin: 0;
  max-width: var(--ag-size-measure);
}

/* The searched words, bold on a pale tint. Never colour alone. */
.ag-result mark {
  padding-inline: 0.1em;
  background: var(--ag-color-warning-tint);
  color: inherit;
  font-weight: var(--ag-font-weight-bold);
}

/* Statement. A message from the head of an organisation: their portrait beside
   a short text, their name and role, and a link to the full message. */
.ag-statement {
  display: grid;
  gap: var(--ag-space-5);
  /* The box ends where the text's measure ends: portrait column, gap, text, and the padding on both sides. */
  max-width: calc(10rem + var(--ag-size-measure) + 3 * var(--ag-space-5));
  margin-bottom: var(--ag-space-6);
  padding: var(--ag-space-5);
  border-inline-start: 4px solid var(--ag-color-primary);
  background: var(--ag-color-paper-alt);
}

/* 48em = breakpoint.md */
@media (min-width: 48em) {
  .ag-statement {
    grid-template-columns: 10rem 1fr;
    align-items: start;
  }
}

.ag-statement__media {
  margin: 0;
  max-width: 10rem;
}

.ag-statement__media .ag-figure__image {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ag-size-radius);
}

.ag-statement__title {
  margin: 0 0 var(--ag-space-3);
  font-size: var(--ag-font-size-lg);
}

.ag-statement__body > p {
  max-width: var(--ag-size-measure);
}

.ag-statement__body > :last-child {
  margin-bottom: 0;
}

.ag-statement__by {
  margin: var(--ag-space-4) 0 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-ink-muted);
}

.ag-statement__by strong {
  display: block;
  font-size: var(--ag-font-size-sm);
  color: var(--ag-color-ink);
}

/* Full variant: the whole message on its own page, with a larger portrait. */
.ag-statement--full .ag-statement__media {
  max-width: 16rem;
}

@media (min-width: 48em) {
  .ag-statement--full {
    grid-template-columns: 16rem 1fr;
    gap: var(--ag-space-6);
    max-width: calc(16rem + var(--ag-size-measure) + var(--ag-space-6) + 2 * var(--ag-space-5));
  }
}

/* Variant: on the primary colour, for a home page block that carries weight. */
.ag-statement--primary {
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  border-inline-start-color: var(--ag-color-on-primary);
}

.ag-statement--primary .ag-statement__title,
.ag-statement--primary .ag-statement__by,
.ag-statement--primary .ag-statement__by strong,
.ag-statement--primary a,
.ag-statement--primary a:visited {
  color: inherit;
}

/* Social links. A list of links to the organisation's accounts. The network's
   name is the link text; the icon is decorative. */
.ag-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ag-space-4);
  margin: 0 0 var(--ag-space-5);
  padding: 0;
  list-style: none;
}

.ag-social li {
  margin: 0;
}

.ag-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-2);
  min-height: var(--ag-size-target);
}

.ag-social__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentcolor;
}

.ag-footer .ag-social {
  margin-bottom: 0;
}

/* Alert. Colour plus a title, never colour alone. Use role="alert" for errors
   the user must act on, role="status" for everything else. */
.ag-alert {
  --_ag-alert-color: var(--ag-color-info);
  --_ag-alert-tint: var(--ag-color-info-tint);

  margin-bottom: var(--ag-space-5);
  padding: var(--ag-space-4);
  border: 3px solid var(--_ag-alert-color);
  border-inline-start-width: 8px;
  background: var(--_ag-alert-tint);
  border-radius: var(--ag-size-radius-surface);
}

.ag-alert--success {
  --_ag-alert-color: var(--ag-color-success);
  --_ag-alert-tint: var(--ag-color-success-tint);
}

.ag-alert--warning {
  --_ag-alert-color: var(--ag-color-warning);
  --_ag-alert-tint: var(--ag-color-warning-tint);
}

.ag-alert--error {
  --_ag-alert-color: var(--ag-color-error);
  --_ag-alert-tint: var(--ag-color-error-tint);
}

.ag-alert__title {
  margin: 0 0 var(--ag-space-2);
  font-size: var(--ag-font-size-lg);
  color: var(--_ag-alert-color);
}

.ag-alert > :last-child {
  margin-bottom: 0;
}

/* Links inside a tinted box use ink, because a pack's primary is only
   guaranteed to pass on paper and paper-alt, not on every tint. */
.ag-alert a,
.ag-alert a:visited {
  color: var(--ag-color-ink);
}

/* Accordion built on <details>. Keyboard and screen-reader support come from
   the browser, so it needs no JavaScript. */
.ag-accordion {
  margin-bottom: var(--ag-space-5);
  border-top: 1px solid var(--ag-color-border);
}

.ag-accordion__item {
  border-bottom: 1px solid var(--ag-color-border);
}

.ag-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag-space-4);
  min-height: var(--ag-size-target);
  padding: var(--ag-space-3) var(--ag-space-2);
  color: var(--ag-color-link);
  font-weight: var(--ag-font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.ag-accordion__summary::-webkit-details-marker {
  display: none;
}

.ag-accordion__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: 0.3em;
  border-right: 3px solid currentcolor;
  border-bottom: 3px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 150ms;
}

.ag-accordion__item[open] > .ag-accordion__summary::after {
  transform: rotate(225deg);
  margin-top: 0.3em;
}

.ag-accordion__summary:hover {
  text-decoration: underline;
}

.ag-accordion__body {
  padding: 0 var(--ag-space-2) var(--ag-space-4);
  max-width: var(--ag-size-measure);
}

.ag-accordion__body > :last-child {
  margin-bottom: 0;
}

/* Tables. Always a caption, always <th scope>. Wrap in .ag-table-wrap with
   tabindex="0" and an aria-label so keyboard users can scroll it sideways. */
.ag-table-wrap {
  margin-bottom: var(--ag-space-5);
  overflow-x: auto;
}

.ag-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.ag-table caption {
  margin-bottom: var(--ag-space-3);
  font-weight: var(--ag-font-weight-bold);
  font-size: var(--ag-font-size-lg);
  text-align: start;
}

.ag-table th,
.ag-table td {
  padding-block: var(--ag-space-3);
  padding-inline: 0 var(--ag-space-3);
  border-bottom: 1px solid var(--ag-color-border);
  text-align: start;
  vertical-align: top;
}

.ag-table th {
  font-weight: var(--ag-font-weight-bold);
}

.ag-table thead th {
  border-bottom: 2px solid var(--ag-color-ink);
}

.ag-table__numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.ag-table--striped tbody tr:nth-child(even) {
  background: var(--ag-color-paper-alt);
}

.ag-table--striped th,
.ag-table--striped td {
  padding-inline-start: var(--ag-space-3);
}

/* Badge. A status label. Solid background with white or ink text; every variant passes AA. */
.ag-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--ag-size-radius);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.02em;
  line-height: var(--ag-font-leading-base);
  text-transform: uppercase;
  white-space: nowrap;
}

.ag-badge--neutral {
  background: var(--ag-color-paper-alt);
  color: var(--ag-color-ink);
  border: 1px solid var(--ag-color-border-strong);
}

.ag-badge--success {
  background: var(--ag-color-success);
  color: #fff;
}

.ag-badge--warning {
  background: var(--ag-color-warning);
  color: #fff;
}

.ag-badge--error {
  background: var(--ag-color-error);
  color: #fff;
}

.ag-badge--info {
  background: var(--ag-color-info);
  color: #fff;
}

/* Panel: confirmation block after a successful submission. Inset: a callout
   inside running text. Summary list: label and value pairs for review pages. */
.ag-panel {
  margin-bottom: var(--ag-space-6);
  padding: var(--ag-space-6) var(--ag-space-5);
  background: var(--ag-color-primary);
  color: var(--ag-color-on-primary);
  text-align: center;
  border-radius: var(--ag-size-radius-surface);
}

.ag-panel__title {
  margin: 0 0 var(--ag-space-4);
  font-size: var(--ag-font-size-3xl);
  color: inherit;
}

.ag-panel__body {
  margin: 0;
  font-size: var(--ag-font-size-xl);
}

.ag-panel__ref {
  display: block;
  margin-top: var(--ag-space-2);
  font-size: var(--ag-font-size-2xl);
  font-weight: var(--ag-font-weight-bold);
  letter-spacing: 0.05em;
}

.ag-inset {
  margin-bottom: var(--ag-space-5);
  padding: var(--ag-space-3) var(--ag-space-4);
  border-inline-start: 8px solid var(--ag-color-border);
  max-width: var(--ag-size-measure);
}

.ag-inset > :last-child {
  margin-bottom: 0;
}

.ag-summary {
  margin: 0 0 var(--ag-space-6);
}

.ag-summary__row {
  display: grid;
  gap: var(--ag-space-1) var(--ag-space-4);
  padding-block: var(--ag-space-3);
  border-bottom: 1px solid var(--ag-color-border);
}

@media (min-width: 40em) {
  .ag-summary__row {
    grid-template-columns: 1fr 2fr auto;
  }
}

.ag-summary__key {
  margin: 0;
  font-weight: var(--ag-font-weight-bold);
}

.ag-summary__value {
  margin: 0;
  overflow-wrap: anywhere;
}

.ag-summary__action {
  margin: 0;
  text-align: end;
}

.ag-summary__action a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ag-size-target);
}

@media (min-width: 40em) {
  .ag-summary__row {
    align-items: center;
  }
}

/* Variant: neutral panel, for an ending that is not a success: received, pending, closed. */
.ag-panel--neutral {
  background: var(--ag-color-paper-alt);
  color: var(--ag-color-ink);
}
}

@layer utilities {
/* A deliberately small set. Layout primitives and a11y helpers only. */

.ag-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ag-stack > * {
  margin-block: 0;
}

.ag-stack > * + * {
  margin-block-start: var(--ag-space-4);
}

.ag-stack--sm > * + * {
  margin-block-start: var(--ag-space-2);
}

.ag-stack--lg > * + * {
  margin-block-start: var(--ag-space-6);
}

.ag-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-3);
  align-items: center;
}

.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ag-space-5);
}

.ag-text-center {
  text-align: center;
}

.ag-text-muted {
  color: var(--ag-color-ink-muted);
}

.ag-text-sm {
  font-size: var(--ag-font-size-xs);
}

.ag-mb-0 {
  margin-bottom: 0 !important;
}

.ag-mt-0 {
  margin-top: 0 !important;
}

.ag-mb-6 {
  margin-bottom: var(--ag-space-6) !important;
}

.ag-mt-6 {
  margin-top: var(--ag-space-6) !important;
}

@media print {
  .ag-print-hidden {
    display: none !important;
  }
}
}