@layer components {
  .finale {
    clear: both;
    padding-block-start: var(--space-40);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  .finale-card {
    inline-size: fit-content;
    max-inline-size: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16) var(--space-32);
    padding: var(--space-16) var(--space-24) var(--space-16) var(--space-16);
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background-color: var(--color-paper);
    box-shadow: var(--shadow-flat);
  }

  .charge {
    --sky-top: var(--color-focus);
    --sky-bottom: var(--color-cyan-light);
    --level: 0.2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-4) var(--space-20) var(--space-4) var(--space-4);
    border: 1px solid var(--color-line-soft);
    border-radius: 999px;
    corner-shape: round;
    background: linear-gradient(var(--color-paper), var(--color-page));
    box-shadow: var(--shadow-flat);
    color: var(--color-ink);
    font: inherit;
    font-weight: var(--weight-subheading);
    cursor: pointer;

    &:is(:hover, :focus-visible):not([aria-disabled='true']) {
      --sky-top: var(--color-focus-deep);
      --sky-bottom: var(--color-cyan-strong);
    }

    &:hover:not([aria-disabled='true']) {
      box-shadow: var(--shadow-raised);
    }

    &:active:not([aria-disabled='true']) {
      box-shadow: var(--shadow-flat);
      translate: 0 1px;
    }

    &[aria-disabled='true'] {
      cursor: default;
    }
  }

  .charge-icon {
    flex: none;
    border-radius: 50%;
    corner-shape: round;
    background: linear-gradient(var(--sky-top), var(--sky-bottom) 55%);
    stroke: var(--color-charcoal);
    stroke-width: 1.5;
  }

  .charge-cap {
    fill: var(--color-charcoal);
    stroke: none;
  }

  .charge-glass {
    fill: var(--color-paper);
  }

  .charge-liquid {
    fill: var(--color-green);
    stroke: none;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    scale: 1 var(--level);
  }

  .charge-bubbles {
    fill: var(--color-paper);
    stroke: none;
    opacity: 0;

    & circle {
      transform-box: fill-box;
    }
  }

  .charge-count {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    font-weight: normal;

    &:empty {
      display: none;
    }
  }

  .finale .finale-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      margin: 0;
    }
  }

  .finale-send {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-ink);
    font: inherit;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-underline-offset: 0.12em;
    cursor: pointer;

    &:hover {
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
    }

    &:active {
      color: var(--focus-color);
    }
  }

  .finale-status {
    flex-basis: 100%;
    margin: calc(-1 * var(--space-8)) 0 0;
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);

    &:empty {
      display: none;
    }
  }

  .finale-next {
    margin-block-start: var(--space-32);

    & h2 {
      margin-block: 0 var(--space-12);
    }

    & ul {
      margin: 0;
      padding-inline-start: var(--space-24);
    }

    & li {
      list-style-type: lower-greek;
    }

    & li + li {
      margin-block-start: var(--space-4);
    }

    & a {
      color: var(--color-charcoal);
      overflow-wrap: anywhere;

      &:is(:hover, :focus-visible) {
        color: var(--color-ink);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .charge-liquid {
      transition: scale 600ms cubic-bezier(0.3, 1.35, 0.5, 1);
    }
  }

  @media (max-width: 600px) {
    .finale-card {
      padding: var(--space-16);
    }
  }
}