@layer components {
  /* ============================================
     Post Show — detail page layout
     ============================================
     Structure:
       .post-show__header
         .post-show__bar
         .post-show__body
           .post-show__title
           .post-show__badge
           .post-show__meta
       .card__content
       .post-documents
     ============================================ */

  /* ── Header (bar + body) ── */
  .post-show__header {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.25rem;
    margin-block-end: 1ch;
  }

  .post-show__bar {
    width: 4px;
    border-radius: 2px;
    background-color: var(--color-primary);
    flex-shrink: 0;
  }

  .post-show__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* ── Title row ── */
  .post-show__title-row {
    display: flex;
    align-items: center;
  }

  .post-show__title {
    flex: 1;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    margin: 0 0 0.125rem;
  }

  /* ── Meta lines (stacked, one per line) ── */
  .post-show__meta {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  /* ── Post documents ── */
  .post-documents {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }

  .post-documents h3 {
    font-size: var(--text-md);
    margin-bottom: 0.5rem;
  }

  .post-documents ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .post-documents a {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--text-sm);
  }

  .post-documents a:hover {
    text-decoration: underline;
  }
}