@layer components {

  .accred-page {
    --accred-rail-size: var(--space-2xl);
    --accred-rail-line: var(--stroke-strong);
    --accred-anchor-size: var(--icon-ui-xl);
    --accred-title-line: calc(var(--heading-block) * 1.4);
  }

  .accred-page__intro {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-inline-size: var(--text-width-l);
  }

  .accred-page > section:has(.accred-timeline) {
    padding-block-start: var(--section-space-xs);
  }

  .accred-page__intro p {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .accred-timeline {
    display: grid;
    grid-template-columns: var(--accred-rail-size) 1fr;
    column-gap: var(--container-gap);
    align-items: stretch;
  }

  .accred-timeline__rail {
    position: relative;
    inline-size: var(--accred-rail-size);
    background: var(--brand-gradient-vertical) center / var(--accred-rail-line) 100% no-repeat;
  }

  .accred-timeline__sections {
    display: flex;
    flex-direction: column;
    gap: var(--section-space-s);
    min-inline-size: 0;
  }

  .accred-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }


  .accred-section__anchor {
    --accred-anchor-pill: calc(var(--accred-anchor-size) + var(--space-s));
    position: absolute;
    inset-block-start: calc(var(--accred-title-line) * 0.5 - var(--accred-anchor-pill) * 0.5);
    inset-inline-start: calc((var(--container-gap) + var(--accred-rail-size) * 0.5 + var(--accred-anchor-pill) * 0.5) * -1);
    inline-size: var(--accred-anchor-pill);
    block-size: var(--accred-anchor-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
  }

  .accred-section__anchor img {
    inline-size: var(--accred-anchor-size);
    block-size: var(--accred-anchor-size);
    display: block;
    object-fit: contain;
  }

  .accred-section__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
    text-transform: uppercase;
    color: var(--text-main);
    line-height: 1.4;
  }

  .accred-section__intro {
    margin: 0;
    max-inline-size: var(--text-width-m);
    font-size: var(--text-m);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  .accred-subgroups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
  }

  @media (min-width: 48em) {
    .accred-subgroups { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 64em) {
    .accred-subgroups { grid-template-columns: repeat(3, 1fr); }
    .accred-subgroups--4 { grid-template-columns: repeat(4, 1fr); }
  }

  .accred-subgroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--card-padding);
    background-color: var(--white);
    border: var(--card-border);
    border-radius: var(--card-radius);
  }

  .accred-subgroup__label {
    margin: 0;
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary);
  }

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

  .accred-doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--border-subtle);
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-snug);
  }

  .accred-doc-item:last-child {
    border-block-end: none;
  }

  .accred-doc-item__name {
    flex: 1;
    min-inline-size: 0;
  }

  .accred-doc-item--link {
    /* Stays body-black at rest so linked and non-linked rows look identical
       until hover — the hover wash + arrow are the affordance, not a
       permanent coloured label. */
    color: var(--text-body);
    text-decoration: none;
    /* Pull the tint out to the row edges (the row sits inside list padding)
       so the hover wash reads as a full-width target, then restore the
       inset so text alignment is unchanged. */
    margin-inline: calc(var(--space-s) * -1);
    padding-inline: var(--space-s);
    border-radius: var(--radius-xs);
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }

  .accred-doc-item__chevron {
    inline-size: var(--icon-inline-m);
    block-size: var(--icon-inline-m);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(calc(var(--space-2xs) * -1));
    transition:
      opacity   var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  @media (hover: hover) {
    .accred-doc-item--link:hover,
    .accred-doc-item--link:focus-visible {
      color: var(--secondary);
      background-color: color-mix(in oklch, var(--secondary) 8%, transparent);
    }
    .accred-doc-item--link:hover .accred-doc-item__chevron,
    .accred-doc-item--link:focus-visible .accred-doc-item__chevron {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Touch press feedback — coarse pointers don't fire :hover, so :active is
     the only signal a tap registered. */
  .accred-doc-item--link:active {
    color: var(--secondary);
    background-color: color-mix(in oklch, var(--secondary) 14%, transparent);
  }

  @media (hover: none) {
    .accred-doc-item__chevron {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .accred-doc-item--link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .accred-doc-list--table {
    border: var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    background-color: var(--white);
    /* Narrower than the prose width so the country (start) and authority
       (end) columns sit closer together — space-between was stretching them
       across an over-wide table. */
    max-inline-size: var(--text-width-m);
  }

  .accred-doc-list--table .accred-doc-item {
    padding-inline: var(--space-m);
  }

  .accred-doc-list--table .accred-doc-item__name {
    color: var(--text-main);
    font-weight: var(--weight-medium);
  }

  .accred-doc-list--table .accred-doc-item__secondary {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .accred-recognition-list {
    list-style: none;
    margin: 0;
    padding: var(--card-padding);
    background-color: var(--white);
    border: var(--card-border);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .accred-recognition-list__item {
    position: relative;
    padding-inline-start: var(--space-m);
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .accred-recognition-list__item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: var(--space-2xs);
    block-size: var(--space-2xs);
    border-radius: var(--radius-full);
    background-color: var(--secondary);
  }

  .accred-license-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--card-padding);
    background-color: var(--white);
    border: var(--card-border);
    border-radius: var(--card-radius);
  }

  .accred-license-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .accred-license-item__note {
    margin: 0;
    font-size: var(--text-m);
    color: var(--text-body);
  }

  .accred-license-item__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-link);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .accred-license-item__link-icon {
    inline-size: var(--icon-inline-s);
    block-size: var(--icon-inline-s);
    flex-shrink: 0;
    transform: translateX(calc(var(--space-2xs) * -1));
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .accred-license-item__link:hover,
  .accred-license-item__link:focus-visible {
    color: var(--secondary);
  }

  .accred-license-item__link:hover .accred-license-item__link-icon,
  .accred-license-item__link:focus-visible .accred-license-item__link-icon {
    transform: translateX(0);
  }

  @media (max-width: 47.99em) {
    .accred-page {
      --accred-anchor-size: var(--icon-ui-l);
      --accred-rail-size: calc(var(--accred-anchor-size) + var(--space-s));
    }
    .accred-timeline {
      column-gap: var(--space-s);
    }
    .accred-section__anchor {
      inset-inline-start: calc((var(--space-s) + var(--accred-rail-size) * 0.5 + var(--accred-anchor-pill) * 0.5) * -1);
    }
    .accred-subgroups,
    .accred-subgroups--4 {
      grid-template-columns: 1fr;
    }
  }

}