/* ============================================================
   Tapeclerk — landing + article rules
   Only rules a PROSE page needs and a specimen does not. Every value
   is a token from tokens.css; nothing here invents a colour, a size,
   a radius or a duration. base.css owns the material, the type scale,
   the buttons, the fields, the code chips and the section numbering.
   ============================================================ */

/* ---- prose ----
   base.css resets p { margin: 0 } because the specimen places every
   paragraph by hand. An article cannot be hand-placed, so rhythm comes
   back as sibling spacing on the container — and only there, so a stray
   paragraph inside a card does not start inventing its own gaps. */
.prose { max-inline-size: var(--tc-measure); }
.prose > * + * { margin-block-start: var(--tc-space-md); }
.prose > h3 + p,
.prose > h3 + ul,
.prose > h3 + ol,
.prose > h3 + dl { margin-block-start: var(--tc-space-xs); }
.prose h3 {
  font-family: var(--tc-font-ui); font-weight: var(--tc-weight-bold);
  font-size: var(--tc-text-lg); line-height: var(--tc-leading-snug);
  letter-spacing: 0; text-wrap: balance;
}
.prose p, .prose li { color: var(--tc-fg-muted); text-wrap: pretty; }
.prose ul, .prose ol { padding-inline-start: var(--tc-space-lg); margin: 0; }
.prose li + li { margin-block-start: var(--tc-space-2xs); }
.prose li::marker { color: var(--tc-fg-faint); }
.prose strong { color: var(--tc-fg); font-weight: var(--tc-weight-medium); }
.prose code { color: var(--tc-fg-muted); }
/* A link has to read as a link. Colour alone fails two of the WCAG
   contrast-scenario checks and all of the colour-blind ones, so the
   underline is real — a hairline under the baseline rather than a strike
   through the descenders, which is the version that stays legible at
   --tc-text-sm. */
.prose a, .footer-nav a {
  color: var(--tc-accent-text); text-decoration: none;
  border-block-end: var(--tc-rule-width) solid var(--tc-accent-deep);
}
@media (hover: hover) and (pointer: fine) {
  .prose a:hover, .footer-nav a:hover { border-block-end-color: var(--tc-accent-text); }
}

/* ---- the answer block ----
   The paragraph a search feature quotes. It is set one step up the type
   scale and in the full-strength ink, because it is the one text on the
   page that has to survive being lifted out of context: bigger, bolder,
   self-contained. No container, no left rule, no pull-quote marks —
   those are the tells of generated pages dressing up a sentence. */
.answer {
  font-size: var(--tc-text-lg); line-height: var(--tc-leading-snug);
  color: var(--tc-fg); max-inline-size: var(--tc-measure-lead); text-wrap: pretty;
}

/* A section standfirst sits under its h2 and wants breathing room below it
   before whatever the section puts next. */
section > .sub { margin-block-end: var(--tc-space-lg); }

/* ---- the two-column specs list ----
   Limits, formats, outputs: pairs where the left column is a fixed label
   and the right one is the sentence. `auto` on the label track keeps the
   column exactly as wide as the widest key, which is why the right edge
   of the descriptions lines up without a hard-coded number. */
.specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tc-space-xs); margin: var(--tc-space-lg) 0 0; }
.specs > div { display: grid; gap: var(--tc-space-2xs); }
.specs dt {
  font-family: var(--tc-font-mono); font-size: var(--tc-text-xs);
  color: var(--tc-oxide-text); letter-spacing: 0.02em;
}
.specs dd { margin: 0; color: var(--tc-fg-muted); font-size: var(--tc-text-sm); max-inline-size: 62ch; }
@media (min-width: 46em) {
  .specs { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--tc-space-xl); row-gap: var(--tc-space-sm); align-items: baseline; }
  .specs > div { display: contents; }
  .specs dt { grid-column: 1; }
  .specs dd { grid-column: 2; }
}

/* ---- the wide tables ----
   The code table and the format table are the two things on the page an
   answer engine is most likely to lift, so they are real tables: a
   caption that says what the table is, th[scope] on every header, and
   hairlines between rows rather than a grey grid that competes with the
   text for attention. */
.codes th, .codes td { padding-block: var(--tc-space-xs); border-block-end: var(--tc-rule-width) solid var(--tc-rule); }
.codes thead th {
  font-family: var(--tc-font-ui); font-weight: var(--tc-weight-medium); font-size: var(--tc-text-xs);
  color: var(--tc-fg-faint); text-align: start; vertical-align: bottom;
}
.codes td { color: var(--tc-fg-muted); vertical-align: top; }
.codes td:first-child { white-space: nowrap; }
.codes tbody tr:last-child td { border-block-end: 0; }
.codes caption { color: var(--tc-fg-faint); font-size: var(--tc-text-sm); padding-block-end: var(--tc-space-sm); }

/* ---- steps ----
   The three heads of the tape path, in the machine's own numbering
   voice, matching the section numbers above them. Circled numerals or
   numbered pills would be a stock-photo of a process; a counter in
   Martian Mono next to the heading is the same voice the section rails
   already use. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--tc-space-lg); }
.steps > li { counter-increment: step; display: grid; gap: var(--tc-space-2xs); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--tc-font-mono); font-stretch: 75%; font-size: var(--tc-text-sm);
  color: var(--tc-oxide-text); letter-spacing: 0.02em;
}
.steps h3 { margin: 0; }

/* ---- the request block ----
   The one place on the page where a bordered box is honest: a shell
   command is an object with edges, and copying it is the point. */
.cli {
  margin: 0; padding: var(--tc-space-md) var(--tc-space-lg);
  background-color: var(--tc-chip-fill); border-radius: var(--tc-radius-md);
  border: var(--tc-rule-width) solid var(--tc-rule);
  overflow-x: auto;
}
.cli code {
  display: block; font-size: var(--tc-text-xs); line-height: var(--tc-leading-mono);
  color: var(--tc-fg); white-space: pre; tab-size: 2;
}
.cli + .cli { margin-block-start: var(--tc-space-sm); }
.transcript + .cli, .field-hint + .cli { margin-block-start: var(--tc-space-sm); }
.cli + .field-hint, .codes + .field-hint, .transcript + .field-hint {
  margin-block-start: var(--tc-space-sm);
  color: var(--tc-fg-faint);
}
.transcript .micro { margin-block-start: var(--tc-space-sm); color: var(--tc-fg-faint); }

/* ---- FAQ ----
   Questions as headings, answers as plain paragraphs: the structure an
   answer engine parses, and the structure a screen reader navigates by
   heading. Disclosure widgets would hide the text from both, so there
   are none. */
.faq > section + section { margin-block-start: var(--tc-space-lg); padding-block-start: var(--tc-space-lg); border-block-start: var(--tc-rule-width) solid var(--tc-rule); }
.faq h3 { font-size: var(--tc-text-lg); margin: 0; }
.faq p { margin: var(--tc-space-2xs) 0 0; color: var(--tc-fg-muted); max-inline-size: var(--tc-measure); }

/* ---- footer ----
   The specimen footer is a line of credits. A real site's footer is
   navigation, and the links in it are the only ones on the page that
   point at other pages — which is exactly what a crawler follows and
   what an entity graph ingests. */
.site-foot { margin-block-start: var(--tc-space-3xl); padding-block-start: var(--tc-space-lg); }
.site-foot .footer-nav { display: flex; flex-wrap: wrap; gap: var(--tc-space-sm) var(--tc-space-md); justify-content: center; }
.footer-nav a { font-size: var(--tc-text-sm); color: var(--tc-fg-muted); }
.site-foot .fine { text-align: center; margin-block-start: var(--tc-space-md); color: var(--tc-fg-faint); }

/* ---- breadcrumb (article pages only) ---- */
.crumb { display: flex; gap: var(--tc-space-xs); font-size: var(--tc-text-sm); color: var(--tc-fg-faint); margin-block-end: var(--tc-space-lg); }
.crumb a { color: var(--tc-fg-muted); text-decoration: none; }
.crumb [aria-current] { color: var(--tc-fg-faint); }

/* ---- persona cards ----
   The label is the micro rail, the sentence under it is the body. base.css
   gives the card its material; this only sets the second line. */
.demo p + p { margin-block-start: var(--tc-space-xs); color: var(--tc-fg-muted); font-size: var(--tc-text-sm); }

/* Body emphasis: the ink comes up to full strength, the weight goes up one
   step, and nothing else happens to it. */
p strong { color: var(--tc-fg); font-weight: var(--tc-weight-medium); }