@layer base {
  /* Container - centered with max width */
  .container {
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-block: calc(var(--block-space) * 2);
  }

  /* Header section */
  .header {
    text-align: center;
    margin-block-end: calc(var(--block-space) * 2);

    h1 {
      margin-block-end: var(--block-space-half);
    }

    p {
      font-size: var(--text-large);
      color: var(--color-ink-light);
    }
  }

  /* Results container */
  .results-container {
    max-inline-size: var(--container-width);
    margin-inline: auto;
    padding: var(--container-padding);
  }

  /* Results header — episode page banner */
  .results-header {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-block-end: calc(var(--block-space) * 1.5);
    padding-block-end: var(--block-space);
    border-block-end: 1px solid var(--color-border);

    h1 {
      margin: 0;
      margin-inline-end: auto;
    }

    /* Stack on mobile */
    @media (max-width: 768px) {
      flex-wrap: wrap;
      gap: calc(var(--block-space) * 0.5) var(--inline-space);

      h1 {
        inline-size: 100%;
      }
    }
  }

  /* Info panel */
  .info-panel {
    background: color-mix(in srgb, var(--color-info) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-info) 12%, transparent);
    padding: var(--block-space) calc(var(--inline-space) * 2);
    border-radius: var(--border-radius);
    margin-block-end: calc(var(--block-space) * 1.5);

    p {
      margin-block: calc(var(--block-space) / 3);
      color: var(--color-ink-light);
    }

    strong {
      color: var(--color-ink);
      margin-inline-end: var(--inline-space);
    }

    a {
      word-break: break-all;
    }

    h3 {
      margin-block-start: 0;
      margin-block-end: var(--block-space);
    }

    ul {
      line-height: 1.8;
      color: var(--color-ink-light);
    }
  }

  /* Episodes list section */
  .episodes-list {
    margin-block-start: calc(var(--block-space) * 3);

    h2 {
      margin-block-end: var(--block-space);
    }
  }

  /* No results state */
  .no-results {
    padding: calc(var(--block-space) * 3) var(--block-space);
    text-align: center;
    color: var(--color-ink-light);

    p {
      font-size: var(--text-large);
    }
  }

  /* Hint text */
  .hint {
    font-size: var(--text-small);
    color: var(--color-ink-light);
    margin-block-start: var(--block-space-half);
  }

  /* Page footer — subtle centered accent link */
  .page-footer {
    text-align: center;
    margin-block-start: calc(var(--block-space) * 4);
    padding-block-start: var(--block-space);
    border-block-start: 1px solid var(--color-border);

    a {
      color: var(--color-info);
      font-size: var(--text-small);
      transition: color var(--transition-fast);

      &:hover {
        color: var(--color-info-dark);
      }
    }
  }

  /* Floating back-to-top button */
  .back-to-top {
    position: fixed;
    inset-block-end: calc(var(--block-space) * 2);
    inset-inline-end: calc(var(--inline-space) * 3);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-info);
    background: var(--color-canvas);
    color: var(--color-info);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--transition), visibility var(--transition),
                transform var(--transition), background var(--transition-fast),
                color var(--transition-fast);

    &.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    &:hover {
      background: var(--color-info);
      color: white;
      box-shadow: var(--shadow-lg);
    }

    &:active {
      transform: translateY(1px);
    }
  }
}