@layer components {
  /* Search result card */
  .search-result {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 2);
    margin-block-end: var(--block-space);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);

    &:hover {
      box-shadow: var(--shadow);
    }
  }

  /* Header row: episode titlecode left, jump button right */
  .search-result__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    margin-block-end: calc(var(--block-space) * 0.75);
    padding-block-end: calc(var(--block-space) * 0.75);
    border-block-end: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }

  /* Episode titlecode badge */
  .search-result__episode {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 600;

    a {
      color: var(--color-ink);
      text-decoration: none;
      background: color-mix(in srgb, var(--color-info) 10%, transparent);
      padding-block: 0.2em;
      padding-inline: 0.6ch;
      border-radius: var(--border-radius-sm);
      transition: background var(--transition-fast), color var(--transition-fast);

      &:hover {
        background: color-mix(in srgb, var(--color-info) 18%, transparent);
        color: var(--color-info-dark);
      }
    }
  }

  /* Caption snippet text within result cards */
  .search-result .caption-text {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-ink-light);
    margin: 0;
  }

  /* Search results list wrapper for spacing */
  .search-results-list {
    margin-block-start: var(--block-space);
  }
}