/* Docs.css — docs-surface polish scoped to v0.21.0 / roadmap item #32.
 *
 * This sheet owns ONLY the classes introduced by item #32 (the
 * transcript metadata header and the session-root sibling list). The
 * pre-existing docs classes (.docs-article, .docs-empty, .docs-error,
 * .docs-source-link, .philosophy-body, .muted) live in App.css and are
 * deliberately NOT touched here — redefining them would race the #31
 * App.css token sweep for the same selectors. Every value below reads
 * a token from tokens.css so the new surfaces sit on the same
 * spacing/type/color scale as the rest of the docs chrome.
 *
 * Imported from DocsSessionTranscript.jsx + DocsSessionIndex.jsx (the
 * two components that render these elements). CSS custom properties are
 * not import-order-sensitive at use time, so the import site doesn't
 * matter for correctness.
 */

/* ── Transcript metadata header ─────────────────────────────────────
 * A compact card above the rendered transcript body: title, the
 * started/ended/duration grid, an optional TL;DR, and the external
 * "view source" link. */
.docs-transcript-meta {
  margin: 0 0 var(--space-9);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.docs-transcript-meta-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-strong);
  font-family: var(--font-mono);
  word-break: break-word;
}

.docs-transcript-meta-grid {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-7);
  align-items: baseline;
}

.docs-transcript-meta-row {
  display: contents;
}

.docs-transcript-meta-grid dt {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.docs-transcript-meta-grid dd {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}

.docs-transcript-meta-tldr {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.docs-transcript-meta-source {
  display: inline-block;
  margin-top: var(--space-6);
}

/* ── Session-root sibling-transcript list ───────────────────────────
 * Rendered above the inlined primary transcript when a session has
 * more than one transcript (driver `.0` + subagents). The primary is
 * marked "(shown below)"; the rest link to their standalone routes. */
.docs-session-siblings {
  margin: 0 0 var(--space-9);
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
}

.docs-session-siblings-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.docs-session-siblings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.docs-session-siblings-list a {
  color: var(--color-link);
  text-decoration: none;
}

.docs-session-siblings-list a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.docs-session-siblings-current {
  color: var(--color-text-muted);
}