/* === Article reader sample (these pages only) ==============================
   The article list is the master-detail sidebar, and the windows are the
   detail pane. On a narrow screen PUDL shows one or the other. */
.reader-stage { padding: 0; overflow: hidden; }
.reader-col { display: flex; flex-direction: column; height: 100%; }
.reader-col .md-back { margin: 12px 16px 4px; align-self: flex-start; }
.reader-col .win-host { flex: 1; min-height: 0; }
.reader-empty {
  margin: 0; padding: 48px 24px; text-align: center;
  color: var(--text-muted);
}
.launcher-icon { width: 14px; height: 14px; flex: none; }

/* Article typography inside a window. */
.article { max-width: 68ch; margin: 0 auto; padding: 8px 8px 32px; }
.article h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
.article .byline { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); }
.article p { margin: 0 0 14px; }
.article .aside-link { font-weight: 600; }
.article .next-link { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.listing { max-width: 90ch; margin: 0 auto; }
.listing p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.listing pre {
  margin: 0; padding: 14px 16px; overflow: auto;
  font: 13px/1.55 var(--mono);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}