/**
 * kol-type-roles.css — the DOC + CARD role sets (2026-07-28 epic).
 *
 * Two opt-in role families that end per-repo re-derivation of the same stacks:
 *
 *   .kol-doc-*  — content/doc chrome roles (eyebrow → footer). The docs-scale
 *                 ramp: quieter than the editorial .kol-prose-* head family
 *                 (label/display/title/lede), which stays the long-form voice.
 *   .kol-card-* — card text roles (title/kicker/meta/excerpt/value/tag),
 *                 grounded in the shipped card families (ArticleCard et al).
 *
 * ONE RULE, TWO ENTRY POINTS (the epic's law): content-furniture roles carry a
 * `.kol-prose <tag>` twin selector so generated markdown/CMS markup and
 * authored divs resolve to the SAME rule. Head roles (eyebrow/heading/lede/…)
 * are deliberately NOT twinned — prose's editorial head sizes differ by
 * design, and prose h1-h6 stay pixel-frozen in kol-typography.css.
 * Prose gains table/figure styling here for the first time (pure addition).
 *
 * Everything is opt-in: inert until markup references a class.
 */

/* =============================================================================
 * DOC SET — 11 roles
 * ============================================================================= */

/* eyebrow — the overline label above a title ("KOL · ICONS"). Single-line
 * chrome → helper ramp (line-height 1); never carries paragraphs.
 *
 * Ink: --kol-fg-strong (80%), raised from --kol-fg-meta (48%) on 2026-08-01 by
 * user ruling. An eyebrow is a SECTION HEADER, not a caption: it names the
 * material below it and is what the eye lands on when scanning a rail. At the
 * meta stop it sat at the same weight as the captions and disabled hints it is
 * supposed to outrank, so the rail read as one flat field. Uppercase mono at
 * the smallest step with wide tracking is already a quiet treatment — the ink
 * does not also need to whisper. */
.kol-doc-eyebrow {
  font-family: var(--kol-font-family-mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kol-fg-strong);
}

/* heading — the page H1 of doc chrome (matches the DocHeader contract). */
.kol-doc-heading {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-03);
  line-height: 120%;
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

/* section title — the anchored section H2 (DocSection contract). */
.kol-doc-section-title {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-04);
  line-height: 100%;
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

/* lede — the descriptive paragraph under a heading. +0.04em tracking (user-tuned up from the prose 0.02em). */
.kol-doc-lede {
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-01);
  line-height: 160%;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--kol-fg-default);
  max-width: var(--kol-content-measure);
}

/* body — doc running copy one rung under the lede. Running text self-caps
 * at the measure (one-frame law: text never runs the full shell). */
.kol-doc-body {
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-02);
  line-height: 160%;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--kol-fg-default);
  max-width: var(--kol-content-measure);
}

/* ── Content furniture — twinned with prose (one rule, two entry points) ── */

/* code block */
.kol-prose pre,
.kol-doc-code {
  font-family: var(--kol-font-family-mono);
  font-size: 14px;             /* matches CodeBlock's reference voice (14/1.6) */
  font-weight: 400;
  line-height: 1.6;
  padding: 16px 20px;
  background: var(--kol-fg-04);
  border-radius: var(--kol-radius-sm);
  overflow-x: auto;
}
.kol-doc-code { margin: 0; }
.kol-prose pre { margin: 24px 0; }   /* prose keeps its editorial block rhythm */

/* INLINE CODE — the chip look, shared with `.kol-table-token` (user question
 * 2026-08-01: *"list all the inline code classes, why do we have more then
 * one?"*). There are three, and only two of them are one concept:
 *
 *   .kol-doc-code-inline   prose inline code. Size is RELATIVE (0.875em) so it
 *                          tracks whatever text it sits in. Wraps.
 *   .kol-table-token       the same chip as fixed-size chrome inside a Table.
 *                          Never wraps. Defined in kol-components-organisms.css
 *                          because it belongs to that component.
 *   .kol-doc-table-token   NOT a chip — a `td` SLOT (no fill, no padding, no
 *                          radius) that types a whole cell as one token. It
 *                          only shares the word "token".
 *
 * The two chips had drifted on every value that makes them look alike: fg-04
 * against fg-08, radius-sm against a bare literal, no colour against fg-80.
 * Same concept, two spellings — the `.text-fg-*` vs `--kol-fg-*` lesson again.
 * ONE RECIPE NOW, size and padding included (user ruling 2026-08-09: "it's
 * basically the same style, so why are they so different"). The earlier
 * size-and-padding-stay-per-role line — relative-in-prose vs fixed-in-chrome
 * — is reversed: the chip is CHROME wherever it appears, and it takes the
 * chrome numbers (the table token's shipped values, not the prose em). Only
 * wrap behaviour stays per context: prose chips wrap mid-phrase, the table
 * token stays single-line — that lives in the organisms sheet. */
.kol-prose code,
.kol-doc-code-inline,
.kol-table-token,
.kol-table code {
  font-family: var(--kol-font-family-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--kol-fg-80);
  background: var(--kol-fg-08);
  padding: 2px var(--kol-spacing-1);
  border-radius: var(--kol-radius-sm);
}
/* code inside pre stays stripped (rule preserved from the prose sheet) */
.kol-prose pre code,
.kol-doc-code code {
  background: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* table — the ApiTable contract generalised: body-02 cells, helper-10 header
 * row, mono for value-ish cells via .kol-doc-table-value on the td. */
.kol-prose table,
.kol-doc-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-02);
  line-height: 160%;
  font-weight: 400;
}
.kol-prose thead tr,
.kol-doc-table thead tr {
  border-bottom: 1px solid var(--kol-fg-12);
}
.kol-prose th,
.kol-doc-table th {
  font-family: var(--kol-font-family-mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kol-fg-meta);
  padding: 10px 16px;
  /* Task 1: td sets this but th didn't, so a label centred itself against a
     4-line value and the label↔value pairing broke. Both cell types agree. */
  vertical-align: top;
}
.kol-prose td,
.kol-doc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--kol-fg-08);
  vertical-align: top;
  color: var(--kol-fg-default);
}
.kol-prose tbody tr:last-child td,
.kol-doc-table tbody tr:last-child td { border-bottom: 0; }
/* Cell roles — named by ROLE + TIER, split on the ONE mono fault line
 * (kol-type-conform law): line-height-1 helper tier for single-line chrome,
 * line-height-bearing mono tier for anything that can wrap. The old
 * `kol-doc-table-value` was a slot name doing both jobs — a nowrap 12/16 role
 * that every wrapping cell inherited, so a 4-line cell read as one block
 * (tasks 2-4, 2026-07-30). */

/* Single-line: one token — a hex, a class name, a count. Never wraps. */
.kol-doc-table td.kol-doc-table-token {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* Multi-line: prose-ish cell content. Wraps, and carries real leading. */
.kol-doc-table td.kol-doc-table-copy {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
}

/* DEPRECATED (2026-07-30) — `-value` is a slot name, and `--wrap` flipped
 * wrapping while leaving single-line leading in place, which was the actual
 * defect. Aliased so existing consumers keep rendering; use the two roles
 * above. Remove once no consumer references them. */
.kol-doc-table td.kol-doc-table-value {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.kol-doc-table td.kol-doc-table-value--wrap {
  white-space: normal;
  line-height: 18px;
}

/* figure — the framed content container (preview cards, embedded media). */
.kol-prose figure,
.kol-doc-figure {
  margin: 0;
  /* oq, not fg (2026-07-30) — the seam law: chrome borders are opaque so they
   * never brighten over tinted fills; weight 08 matches the table wrapper. */
  border: 1px solid var(--kol-oq-08);
  border-radius: var(--kol-radius-sm);   /* 4px — THE radius law */
  overflow: hidden;
}

/* caption */
.kol-prose figcaption,
.kol-doc-caption {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--kol-fg-meta);
}

/* footer — wrappable closing chrome (attributions, notes, updated-lines).
 * Mono ramp BY LAW: helper is line-height-1 single-line chrome and never
 * carries wrapping text. */
.kol-prose footer,
.kol-doc-footer {
  font-family: var(--kol-font-family-mono);
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--kol-fg-meta);
}

/* =============================================================================
 * CARD SET — 6 roles. Grounded in the shipped card families: mono body voice,
 * helper kickers/meta, compact sans titles.
 * ============================================================================= */

.kol-card-title {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-05);
  line-height: 125%;
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

/* THE EYEBROW HAS ONE NAME (ContentRowsAndPrintCard, user 2026-08-27: "you have
 * a class for eyebrow that's not called eyebrow but kicker? you think that's
 * good practice?"). `kol-eyebrow` is the role — mono 12 · 500 · 0.06em ·
 * uppercase · fg-64; the slot is `eyebrow` on ContentText and SectionText.
 * `kol-card-kicker` is the alias below, on the retirement ledger. */
/* NO ink on the role (ShellHomeSystem, 2026-08-27): type roles set type, not
 * colour — a baked fg-64 outranked every ink utility beside it. Consumers that
 * relied on the 64 pass `text-body`; the `kol-card-kicker` alias keeps it. */
.kol-eyebrow {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* @deprecated 2026-08-27 → kol-eyebrow */
.kol-card-kicker {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kol-fg-64);
}

.kol-card-meta {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--kol-fg-48);
}

/* excerpt — clamped card copy; lines via --kol-card-excerpt-lines (default 3) */
.kol-card-excerpt {
  font-family: var(--kol-font-family-mono);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--kol-fg-48);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--kol-card-excerpt-lines, 3);
  overflow: hidden;
}

.kol-card-value {
  font-family: var(--kol-font-family-mono);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

.kol-card-tag {
  font-family: var(--kol-font-family-mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kol-fg-48);
}