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

    @media (width > 950px) {
      position: sticky;
      inset-block-start: var(--space-16);
      z-index: 1;
      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;
        background-color: var(--color-paper);
      }

      & > .charge {
        flex: none;
      }

      &:has(> .folded) > .charge {
        display: none;
      }
    }

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

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

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

    :has(> * > .reading-rail > .folded, > .reading-rail > .folded) > .finale .charge {
      display: inline-flex;
    }
  }

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

    & h2 {
      grid-area: title;
      margin: 0;
      font-size: var(--text-h3);
      line-height: var(--leading-h3);
    }

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

    & .contents-head {
      display: grid;
      grid-template-areas:
        'title fold'
        'chapter fold';
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--space-8);
      margin-block: calc(-1 * var(--space-4)) var(--space-12);
    }

    & .contents-chapter {
      grid-area: chapter;
      display: none;
      min-inline-size: 0;
      overflow: hidden;
      color: var(--color-ink);
      font-size: var(--text-ui);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .contents-fold {
      --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' stroke-linejoin='round'%3E%3Cpath d='m4 10 4-4 4 4'/%3E%3C/svg%3E");
      grid-area: fold;
      margin-inline-end: calc(-1 * var(--space-8));
    }

    @media (width > 950px) {
      &.folded {
        padding-block: var(--space-12);

        & .contents-head {
          margin-block: 0;
        }

        &:has(.contents-chapter:not(:empty)) h2 {
          color: var(--color-muted);
          font: 400 var(--text-small) / var(--leading-small) var(--font-text);
        }

        & .contents-chapter:not(:empty) {
          display: block;
        }

        & .contents-fold::before {
          rotate: 180deg;
        }

        & ol {
          display: none;
        }
      }
    }

    @media (width <= 950px) {
      & .contents-fold {
        display: none;
      }
    }

    & 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;
      }

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

    @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);
      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;
    }
  }

  :is(.post, .talk-text) iframe:is([src*='youtube.com/embed'], [src*='player.vimeo.com']) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    margin-block: 0 var(--space-24);
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-ink);
    box-shadow: var(--shadow-raised);
  }

  .post[data-type='quote'] {
    & > header {
      order: -2;

      & h1::before {
        content: '«';
      }

      & h1::after {
        content: '»';
      }
    }

    & > section.introduction {
      order: -1;
      margin-block-end: var(--space-32);
      color: var(--color-muted);
      font-size: var(--text-lead);
      line-height: var(--leading-lead);
    }
  }
}