:where(.accordion) {
  interpolate-size: allow-keywords;
  isolation: isolate;

  details {
    border-block-end-width: var(--border);
    font-size: var(--text-sm);
    position: relative;
    z-index: 0;

    &::details-content {
      block-size: 0;
      transition-behavior: allow-discrete;
      transition-delay: 0s, 0s;
      transition-duration: var(--time-200), var(--time-200);
      transition-property: content-visibility, block-size;
      transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    }

    &[open]::details-content {
      block-size: auto;
      overflow: visible;
      transition-delay: 0s, 0s;
    }

    &:has(.dropdown-active) {
      z-index: 30;

      &::details-content {
        overflow: visible;
        transition: none;
      }
    }
  }

  summary {
    align-items: center;
    cursor: default;
    display: flex;
    font-weight: var(--font-medium);
    padding-block: var(--size-4);

    &:focus-visible {
      outline: var(--border-2) auto var(--color-selected-dark);
    }

    &::after {
      background-color: currentColor;
      block-size: var(--size-4);
      content: "";
      inline-size: var(--size-4);
      margin-inline-start: auto;
      mask-image: url("/assets/chevron-down-af4dffe4.svg");
      mask-size: cover;
      transition: transform var(--time-200);
    }

    details[open] > &::after {
      transform: var(--rotate-180);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.accordion) {
    details::details-content,
    summary::after {
      transition-duration: 0.01ms;
    }

    details[open]::details-content {
      transition-delay: 0s;
    }
  }
}

:where(.highlighted-accordion) {
  background-color: color-mix(in srgb, var(--color-surface) 94%, var(--pehuen-primary-50) 6%);
  border-color: color-mix(in srgb, var(--pehuen-primary-200) 56%, var(--color-border) 44%);
  box-shadow: 0 1px 2px rgb(from var(--pehuen-primary-900) r g b / 0.04);
  transition:
    background-color var(--time-150),
    border-color var(--time-150),
    box-shadow var(--time-150);

  &:not([open]) {
    overflow: clip;
  }

  &:not([open]):hover {
    border-color: color-mix(in srgb, var(--pehuen-primary-300) 48%, var(--color-border) 52%);
    box-shadow: 0 8px 18px -18px rgb(from var(--pehuen-primary-900) r g b / 0.18);
  }

  &[open] {
    background-color: var(--color-surface);
    border-color: color-mix(in srgb, var(--pehuen-primary-200) 76%, var(--color-border) 24%);
    box-shadow: 0 12px 26px -24px rgb(from var(--pehuen-primary-900) r g b / 0.22);
  }

  > summary {
    background-color: color-mix(in srgb, var(--color-surface) 86%, var(--pehuen-primary-50) 14%);
    color: color-mix(in srgb, var(--stone-900) 82%, var(--pehuen-primary-900) 18%);
    transition:
      background-color var(--time-150),
      color var(--time-150);

    &:hover {
      background-color: color-mix(in srgb, var(--color-surface) 74%, var(--pehuen-primary-100) 26%);
      color: var(--pehuen-primary-900);
    }

    &:focus-visible {
      outline: var(--border-2) solid color-mix(in srgb, var(--pehuen-primary-300) 72%, var(--color-surface) 28%);
      outline-offset: calc(var(--border) * -1);
    }

    &::after {
      opacity: 0.58;
    }

    > svg:first-child {
      background-color: color-mix(in srgb, var(--pehuen-primary-100) 58%, var(--color-surface) 42%);
      border: var(--border) solid color-mix(in srgb, var(--pehuen-primary-200) 76%, var(--color-surface) 24%);
      border-radius: var(--rounded-sm);
      box-sizing: content-box;
      color: var(--pehuen-primary-600);
      padding: var(--size-1);
    }
  }

  &[open] > summary {
    background-color: color-mix(in srgb, var(--color-surface) 80%, var(--pehuen-primary-50) 20%);
  }

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

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

:where(.highlighted-accordion--muted) {
  background-color: color-mix(in srgb, var(--color-surface) 96%, var(--stone-100) 4%);
  border-color: var(--color-border);

  > summary {
    background-color: color-mix(in srgb, var(--color-surface) 94%, var(--stone-100) 6%);
    color: var(--stone-800);

    &:hover {
      background-color: color-mix(in srgb, var(--color-surface) 86%, var(--stone-100) 14%);
      color: var(--stone-900);
    }

    > svg:first-child {
      background-color: var(--stone-100);
      border-color: var(--stone-200);
      color: var(--stone-600);
    }
  }

  &[open] > summary {
    background-color: color-mix(in srgb, var(--color-surface) 90%, var(--stone-100) 10%);
  }
}

:where(.certification-rendition-tree) > section > .accordion > .highlighted-accordion > summary {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--pehuen-primary-200) 24%, transparent) 0%,
    color-mix(in srgb, var(--pehuen-primary-100) 36%, transparent) 46%,
    transparent 100%
  );
  padding-block: var(--size-1_5);
}

:where(.certification-rendition-tree) > section > .accordion > .highlighted-accordion > summary:hover {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--pehuen-primary-200) 32%, transparent) 0%,
    color-mix(in srgb, var(--pehuen-primary-100) 44%, transparent) 52%,
    transparent 100%
  );
}

:where(.certification-rendition-task-order-body) {
  background-color: color-mix(in srgb, var(--color-surface) 96%, var(--pehuen-primary-50) 4%);
  border-top: var(--border) solid var(--pehuen-primary-100);
  padding: var(--size-3);
}

.certification-rendition-task-order-body > .certification-rendition-proposals {
  display: grid;
  gap: var(--size-3);
  padding-inline-start: var(--size-5);
}

:where(.certification-rendition-proposal) {
  background-color: color-mix(in srgb, var(--color-surface) 92%, var(--stone-50) 8%);
  border: var(--border) solid var(--stone-200);
  border-radius: var(--rounded-lg);
  overflow: hidden;
}

:where(.certification-rendition-proposal > summary) {
  cursor: pointer;
  list-style: none;
}

.certification-rendition-proposal > .certification-rendition-proposal-header {
  background-color: color-mix(in srgb, var(--color-surface) 92%, var(--color-stone-100) 8%);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-stone-200) 44%, transparent) 0%,
    color-mix(in srgb, var(--color-stone-100) 54%, transparent) 58%,
    transparent 100%
  );
  padding-block: var(--size-1_5);
}

.certification-rendition-proposal > .certification-rendition-proposal-header:hover {
  background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-stone-100) 12%);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-stone-200) 54%, transparent) 0%,
    color-mix(in srgb, var(--color-stone-100) 64%, transparent) 62%,
    transparent 100%
  );
}

:where(.certification-rendition-proposal-header > div:first-child) {
  flex: 1 1 auto;
}

.certification-rendition-task-order-summary,
.certification-rendition-proposal-title {
  font-size: var(--text-sm);
}

:where(.certification-rendition-proposal[open]) {
  background-color: var(--color-surface);
}

.certification-rendition-proposal > .certification-rendition-entry-sheets {
  background-color: color-mix(in srgb, var(--color-surface) 88%, var(--stone-50) 12%);
  border-top: var(--border) solid var(--stone-200);
  display: grid;
  gap: var(--size-2);
  padding-block: var(--size-3);
  padding-inline: var(--size-3);
  padding-inline-start: var(--size-5);
}

.certification-rendition-entry-sheet {
  background-color: color-mix(in srgb, var(--color-surface) 96%, var(--pehuen-primary-50) 4%);
  border: var(--border) solid color-mix(in srgb, var(--pehuen-primary-200) 58%, var(--stone-200) 42%);
  border-radius: var(--rounded-lg);
  box-shadow: 0 10px 22px -20px rgb(from var(--pehuen-primary-900) r g b / 0.34);
  overflow: hidden;
  transition:
    background-color var(--time-150),
    border-color var(--time-150),
    box-shadow var(--time-150);
}

.certification-rendition-entry-sheet[open] {
  background-color: var(--color-surface);
  border-color: color-mix(in srgb, var(--pehuen-primary-300) 58%, var(--stone-300) 42%);
  box-shadow: 0 18px 34px -28px rgb(from var(--pehuen-primary-900) r g b / 0.46);
}

.certification-rendition-entry-sheet > summary {
  background-color: color-mix(in srgb, var(--color-surface) 84%, var(--pehuen-primary-50) 16%);
  padding-block: var(--size-1_5);
}

.certification-rendition-entry-sheet[open] > summary {
  background-color: color-mix(in srgb, var(--color-surface) 78%, var(--pehuen-primary-50) 22%);
}

@media (width < 40rem) {
  .certification-rendition-task-order-body > .certification-rendition-proposals,
  .certification-rendition-proposal > .certification-rendition-entry-sheets {
    padding-inline-start: 0;
  }
}

:where(.certification-rendition-filter-button--active) {
  --btn-background: var(--stone-700);
  --btn-border-color: transparent;
  --btn-color: white;
  --btn-hover-color: var(--stone-800);
}

:where(.certification-rendition-metrics) {
  background-color: color-mix(in srgb, var(--color-surface) 88%, var(--stone-100) 12%);
  border: var(--border) solid var(--color-border);
  border-radius: var(--rounded-md);
  display: grid;
  overflow: hidden;
  text-align: center;
}

:where(.certification-rendition-metrics--contract, .certification-rendition-metrics--task-order) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  inline-size: 100%;
}

@media (width >= 40rem) {
  :where(.certification-rendition-metrics--task-order) {
    inline-size: auto;
    margin-inline-start: auto;
    min-inline-size: 18rem;
  }

  :where(.certification-rendition-metrics--contract) {
    inline-size: auto;
    min-inline-size: 20rem;
  }

  :where(.certification-rendition-metrics--proposal) {
    inline-size: auto;
  }
}

:where(.certification-rendition-metrics--proposal) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-inline-size: 12rem;
}

:where(.certification-rendition-metric) {
  padding: var(--size-1) var(--size-2);
}

:where(.certification-rendition-metric + .certification-rendition-metric) {
  border-inline-start: var(--border) solid var(--color-border);
}

:where(.certification-rendition-metric__label) {
  color: var(--color-text-subtle);
  display: block;
  font-size: 0.55rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

:where(.certification-rendition-metric__value) {
  color: var(--stone-900);
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.45;
}

:where(.certification-rendition-metric__value--exceeded) {
  color: var(--green-700);
}

:where(.certification-rendition-metric__value--pending) {
  color: var(--amber-700);
}