/* ============================================================================
   code-outline.sammons.io — page-specific styles.
   Layout + tokens come from tokens.css and site.css (vendored, unchanged).
   This file holds only what those two do not already cover.
   ============================================================================ */

/* Command + output code block, on the dark inverse surface. */
.code-block {
  margin: 0;
  padding: 16px 20px;
  background: var(--bg-inverse);
  color: var(--slate-50);
  border: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.code-block code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* Command line shown above an output block. */
.command-line {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--fg3);
  min-width: 0;
}
.command-line code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  color: var(--fg1);
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  font-size: inherit;
  /* A $ command is one token stream (flags, quoted globs); wrapping mid-flag
     reads as broken syntax, so it never wraps -- it scrolls instead. */
  white-space: nowrap;
  vertical-align: bottom;
}

/* One command/output pair. min-width: 0 lets the flex item shrink below its
   pre's intrinsic content width so overflow-x: auto on the pre can take
   over instead of the flex item stretching the layout. */
.example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.example + .example {
  margin-top: 16px;
}

/* Format-comparison list for the Use section — one card per output format,
   always a single column. The brand column caps at 760px
   (site.css .page), so a multi-column grid here left each card only ~40
   characters wide and truncated most sample lines at rest; stacking full
   width is what lets the ascii/llmtext samples show whole lines without
   relying on the horizontal-scroll fallback. */
.format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.format-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  /* Grid items default to min-width: auto, which lets a wide pre child
     force the card (and the whole grid track) wider than its column
     instead of scrolling internally. min-width: 0 lets the card shrink to
     its column and hand overflow to the pre's own scrollbar. */
  min-width: 0;
}
.format-card .format-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg1);
}

/* MCP tool list. Each row carries a "Tool" eyebrow label (matching the
   .linkrow-label pattern in site.css) so a tool name reads as a labeled
   definition-list entry rather than an unlabeled heading. */
.tool-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.tool-list .tool-row {
  padding: 16px 4px;
  border-top: 1px solid var(--border);
}
.tool-list .tool-label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}
.tool-list .tool-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg1);
}
.tool-list .tool-desc {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

/* Changelog list rendered from CHANGELOG.md at build time. */
.changelog h3 {
  margin: 16px 0 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--fg1);
}
.changelog ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.changelog code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  color: var(--fg1);
  padding: 0.15em 0.4em;
}

/* Hero badge row (version badge next to the lead sentence). */
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Format-comparison table on the LLMText page. site.css has no table
   styling of its own; this is a page-specific addition on the token
   system. */
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 0;
  font-size: var(--text-sm);
}
.article th,
.article td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.article th {
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg1);
}
.article td {
  color: var(--fg2);
}