@layer components {
  .reading {
    padding: var(--card-padding);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);

    & header {
      display: flex;
      flex-wrap: wrap;
      gap: var(--block-space-half);
      align-items: baseline;
    }

    & p {
      margin-block: var(--block-space-quarter);
    }
  }

  details.raw {
    & summary {
      cursor: pointer;
      color: var(--color-muted);
      font-size: var(--text-small);
      transition: color 120ms;

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

      &:hover {
        color: var(--color-ink);
      }
    }

    & pre {
      margin-block-start: var(--block-space-half);
    }
  }
}