@layer components {
  :root {
    --credential-blocklisting: light-dark(oklch(52% 0.19 25), oklch(72% 0.15 25));
    --credential-vehicle: light-dark(oklch(56% 0.15 55), oklch(75% 0.13 55));
    --credential-machinery: light-dark(oklch(57% 0.12 85), oklch(78% 0.12 85));
    --credential-requirement: light-dark(oklch(52% 0.15 320), oklch(74% 0.13 320));
    --credential-site: light-dark(oklch(50% 0.07 65), oklch(75% 0.07 65));
    --credential-checklist: light-dark(oklch(52% 0.1 185), oklch(75% 0.1 185));
    --credential-person: light-dark(oklch(52% 0.12 215), oklch(74% 0.11 215));
    --credential-firm: light-dark(oklch(50% 0.17 255), oklch(72% 0.13 255));
    --credential-training: light-dark(oklch(50% 0.17 285), oklch(72% 0.13 285));
    --credential-user: light-dark(oklch(52% 0.17 350), oklch(73% 0.13 350));
    --credential-grey: light-dark(oklch(56.7% 0 0), oklch(62.9% 0 0));
  }

  .credential {
    --credential-tone: var(--credential-color, var(--credential-grey));
    --credential-content-color: color-mix(in srgb, var(--credential-tone) 30%, var(--color-ink));
    --credential-text-color: color-mix(in srgb, var(--credential-tone) 75%, var(--color-ink));
    --credential-padding: var(--block-space);
    --credential-radius: var(--radius-sm);
    --credential-photo-size: 3rem;

    position: relative;
    padding: var(--credential-padding);
    border: 2px solid var(--credential-tone);
    border-radius: var(--credential-radius);
    background-color: var(--color-canvas);
    box-shadow: var(--shadow-card);
    margin-block-end: var(--block-space);
  }

  .credential:has(.credential__serial) {
    padding-block-end: calc(var(--credential-padding) + 1lh);
  }

  .credential--inactive {
    --credential-tone: var(--credential-grey);
  }

  .credential__header {
    min-inline-size: 0;
    margin-block-start: calc(-1 * var(--credential-padding));
    margin-inline: calc(-1 * var(--credential-padding));
  }

  .credential__tab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--inline-space);
    min-inline-size: 0;
    padding-block: 0.25lh;
    padding-inline: var(--credential-padding);
    border-radius: var(--credential-radius) var(--credential-radius) 0 0;
    background-color: var(--credential-tone);
    color: var(--color-canvas);
    font-size: var(--text-small);
    font-weight: 600;
  }

  .credential__kind {
    white-space: nowrap;
  }

  .credential__issuer {
    min-inline-size: 0;
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;

    a {
      color: inherit;
    }
  }

  .credential__serial {
    position: absolute;
    inset-block-end: var(--credential-padding);
    inset-inline-end: var(--credential-padding);
    color: var(--credential-text-color);
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    letter-spacing: 0.04em;

    &::before {
      content: "Nº ";
      opacity: 0.5;
    }
  }

  .credential__body {
    display: grid;
    grid-template-columns: var(--credential-photo-size) 1fr;
    align-items: center;
    gap: var(--credential-padding);
    padding-block: calc(var(--credential-padding) / 2);
  }

  .credential__photo {
    --avatar-size: var(--credential-photo-size);
    --icon-size: 55%;

    grid-column: 1;
    background-color: var(--credential-tone);
  }

  .credential__identity {
    grid-column: 2;
    min-inline-size: 0;
    color: var(--credential-content-color);

    .credential__name {
      margin: 0;
      color: var(--credential-content-color);
      font-size: var(--text-x-large);
      font-weight: 900;
      line-height: 1.15;
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    .credential__number {
      margin: 0;
      color: var(--credential-text-color);
      font-family: var(--font-mono);
    }

    .credential__state {
      color: var(--color-ink-dark);
      font-family: var(--font-sans);
    }
  }

  .credential__summary {
    margin: 0.25rem 0 0;
  }

  .credential__fields,
  .credential__sites {
    margin-block-start: var(--credential-padding);
  }

  .credential__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--block-space-half) var(--inline-space-double);

    .details__row {
      align-content: start;
    }

    .details__row--wide {
      grid-column: 1 / -1;
    }
  }

  .credential .details__label {
    color: var(--credential-text-color);
    font-weight: 500;
  }

  .credential__sites {
    color: var(--credential-text-color);
    font-size: var(--text-small);
    font-weight: 500;
  }

  .credential__site-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space-double);
    color: var(--color-ink);

    a {
      color: inherit;
    }
  }

  .credential__site {
    overflow-wrap: anywhere;
  }

  .credential__no-sites {
    overflow-wrap: anywhere;
  }

  .credential__check {
    display: grid;
    gap: 0.25em;
    margin-block-start: var(--block-space-half);
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 400;
  }
}