@layer components {
  .reading-rail {
    margin-block-start: var(--space-24);

    @media (width > 950px) {
      position: sticky;
      inset-block-start: var(--space-16);
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: var(--space-16);
      max-block-size: calc(100dvh - 2 * var(--space-16));

      & > .contents {
        align-self: stretch;
        min-block-size: 0;
      }

      & > .charge {
        flex: none;
      }
    }

    @media (width <= 950px) {
      display: contents;

      & > .charge {
        display: none;
      }
    }
  }

  @media (width > 950px) {
    :has(> * > .reading-rail .charge, > .reading-rail .charge) > .finale .charge {
      display: none;
    }
  }

  .contents {
    margin: 0;
    padding: var(--space-16) var(--space-16) var(--space-12);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);

    & h2 {
      margin-block: 0 var(--space-12);
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

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

    & li {
      padding-block: var(--space-4);
      font-variant-numeric: tabular-nums;

      &::marker {
        color: var(--color-muted);
      }

      &:has([aria-current])::marker {
        color: var(--color-ink);
        font-weight: var(--weight-subheading);
      }
    }

    & a {
      color: var(--color-charcoal);

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

      &[aria-current] {
        color: var(--color-ink);
        text-decoration-color: var(--color-cyan);
        text-decoration-thickness: 2px;
      }
    }

    @media (width > 950px) {
      position: static;
      display: block;
      inset: auto;
      inline-size: auto;
      block-size: auto;
      color: inherit;
    }

    @media (width <= 950px) {
      position: fixed;
      inset: auto var(--page-gutter) calc(var(--space-16) + env(safe-area-inset-bottom));
      inline-size: auto;
      max-inline-size: 640px;
      max-block-size: min(70dvh, 560px);
      margin: 0 auto;
      padding: var(--space-20) var(--space-20) var(--space-16);
      border: 1px solid var(--color-line-soft);
      border-radius: var(--radius-card);
      background-color: var(--color-paper);
      box-shadow: var(--shadow-raised);
      color: var(--color-charcoal);
      font-size: var(--text-ui);

      &::backdrop {
        background-color: color-mix(in oklch, var(--color-ink) 25%, transparent);
      }

      & li {
        padding-block: var(--space-8);
      }

      & li + li {
        border-block-start: 1px dotted var(--color-line);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition:
          opacity var(--transition-state),
          translate var(--transition-state),
          display var(--transition-state) allow-discrete,
          overlay var(--transition-state) allow-discrete;

        &:not(:popover-open) {
          opacity: 0;
          translate: 0 var(--space-16);
        }

        @starting-style {
          &:popover-open {
            opacity: 0;
            translate: 0 var(--space-16);
          }
        }
      }
    }
  }

  .contents-toggle {
    --toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 4h8M6 8h8M6 12h8M2.5 4h.01M2.5 8h.01M2.5 12h.01'/%3E%3C/svg%3E");
    position: sticky;
    inset-block-end: calc(var(--space-16) + env(safe-area-inset-bottom));
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    max-inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-8) var(--space-20) var(--space-8) var(--space-16);
    border: 1px solid var(--color-line-soft);
    border-radius: 999px;
    corner-shape: round;
    background-color: var(--color-paper);
    box-shadow: var(--shadow-raised);
    color: var(--color-ink);
    font-size: var(--text-ui);
    line-height: var(--leading-small);

    &::before {
      content: '';
      flex: none;
      inline-size: 16px;
      block-size: 16px;
      background-color: currentColor;
      mask: var(--toggle-icon) center / contain no-repeat;
    }

    &:hover {
      background-color: var(--color-cyan-hover);
    }

    &:active {
      background-color: var(--color-cyan-pressed);
      translate: 0 1px;
    }

    & span {
      flex: none;
    }

    & .contents-chapter {
      flex: 0 1 auto;
      min-inline-size: 0;
      overflow: hidden;
      color: var(--color-muted);
      text-overflow: ellipsis;
      white-space: nowrap;

      &:empty {
        display: none;
      }

      &::before {
        content: '· ';
      }
    }

    @media (width > 950px) {
      display: none;
    }
  }
}