/* ==========================================================================
   DOCS.CSS — /docs and /about page layer · Tier 3 · loads LAST after brand.css
   (/docs also loads legal.css before this file and reuses its whole document
   system: .doc-hero, .doc-layout, the sticky ToC rail, .clause, .cno.)
   Existing tokens only. Hairlines, never shadows. Radius ladder 2 / 6 / 10.
   These are reference pages: almost no motion, content renders immediately.
   ========================================================================== */

/* Quieter reveals than the marketing pages, same discipline as trust.css.
   motion.css double-gates them behind @supports + prefers-reduced-motion,
   with a visible base state; nothing here can hide content. */
[data-reveal] { --reveal-distance: 24px; }

/* --------------------------------------------------------------------------
   1. SHARED — hero CTA row and the mid-page CTA band. Mirrored from
   trust.css/.ph-actions and platform.css/.band-cta because those layers are
   not linked on these two pages; same tokens, same geometry.
   -------------------------------------------------------------------------- */
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.doc-micro { margin-top: var(--sp-1); }
@media (min-width: 900px) {
  .page-hero__grid .doc-actions { grid-column: 1 / 8; }
  .page-hero__grid .doc-micro { grid-column: 1 / 8; }
  .page-hero__grid .disclosed { grid-column: 1 / 8; }
}

.doc-cta { border-top: var(--rule) solid var(--border); background: var(--surface); padding-block: var(--sp-10); }
.doc-cta__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.doc-cta__lead { flex: 1 1 16rem; display: grid; gap: var(--sp-2); }
.doc-cta__lead strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
}
.doc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* The clause bracket, restated from legal.css so /about (which does not link
   the legal layer) sets its numbering identically. Same values, same class. */
.cno {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin-right: 0.4em;
}

/* --------------------------------------------------------------------------
   2. CODE BLOCKS (/docs) — the page's reason to exist. A hairline figure:
   caption bar (label · language · a real button), then a scroll container
   that owns its own overflow so the PAGE never scrolls sideways at 320px.
   The scroll container carries tabindex="0" and an aria-label in the HTML.
   -------------------------------------------------------------------------- */
.code {
  margin: var(--sp-6) 0 0;
  border: var(--rule) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.code__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-bottom: var(--rule) solid var(--border);
  background: var(--bg);
}
.code__bar .tag { display: inline; }
.code__lang {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The copy control: a genuine button, always visible, 44px target, mono
   label. State feedback is text + colour, announced in the live region. */
.code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--surface);
  border: var(--rule) solid var(--border-strong);
  border-radius: var(--r-sm);
  touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease-ui),
              border-color var(--duration-fast) var(--ease-ui),
              background-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .code-copy:hover { background: var(--surface-2); border-color: var(--fg); }
}
.code-copy.is-copied { color: var(--accent-text); border-color: var(--accent); }

.code__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.code pre {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  tab-size: 2;
  color: var(--fg);
}
.code code { font-family: inherit; font-variant-ligatures: none; }

/* Endpoint lockup: mono method + path, the method in accent ink */
.endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--fg);
}
.endpoint b { font-weight: 500; color: var(--accent-text); letter-spacing: 0.04em; }

/* Row-header element ids like L11-01/02 never break mid-token */
.cmp--doc th .mono { white-space: nowrap; }

/* Inline signature-header sample: wraps rather than forcing overflow */
.wire {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.wire b { color: var(--fg); font-weight: 500; }

/* --------------------------------------------------------------------------
   3. ABOUT — section shell. Hairline-topped bands on the alternating ground,
   same rhythm as the trust pages.
   -------------------------------------------------------------------------- */
.asec { padding-block: var(--sp-16); border-top: var(--rule) solid var(--border); }
@media (min-width: 900px) { .asec { padding-block: var(--sp-20); } }
.asec--surface { background: var(--surface); }
.asec .grid-12 { align-items: start; }
/* Full-width sections (facts, careers): air between the head and the body */
.asec > .wrap > .sec-head { margin-bottom: var(--sp-8); }

.acopy > * + * { margin-block-start: var(--sp-4); }
.acopy p { max-width: 66ch; line-height: 1.6; }
.acopy p a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .acopy p a:hover { text-decoration-color: var(--accent); } }
.acopy .small { max-width: 66ch; }

/* The disclosure note: same recipe as legal.css/.fiction (dashed hairline,
   accent edge), restated here because /about does not load the legal layer. */
.disclosed {
  max-width: 66ch;
  border: var(--rule) dashed var(--border-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.disclosed p:not(.tag) { font-size: var(--t-sm); line-height: 1.55; color: var(--fg); }
.disclosed p .tag { display: inline; }

/* Two buyer-side numbers beside the narrative; short phrases, so the 2-up
   is inside the mobile spec's sanctioned exceptions. */
.astat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-10);
  margin-block-start: var(--sp-6);
  border-top: var(--rule) solid var(--border);
  padding-top: var(--sp-5);
}
.astat > div { display: grid; gap: var(--sp-2); }
.astat b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.astat .tag { order: -1; }

/* --------------------------------------------------------------------------
   4. ABOUT — principles ledger. Bracket number, display title, quiet body.
   -------------------------------------------------------------------------- */
.prin { border-top: var(--rule) solid var(--border); }
.prin li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
}
.prin .tag { grid-column: 1; grid-row: 1; padding-top: 0.3em; }
.prin strong {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.prin p:not(.tag) { grid-column: 2; font-size: var(--t-sm); color: var(--muted); max-width: 58ch; }
.prin p a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .prin p a:hover { text-decoration-color: var(--accent); } }

/* --------------------------------------------------------------------------
   5. ABOUT — company facts. Hairline grid, 2-up (one short phrase per cell,
   sanctioned) then 4-up from 900px. Every numeral mono and tabular.
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rule);
  background: var(--border);
  border: var(--rule) solid var(--border);
}
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--bg); padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.fact b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
}
.fact small { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.fact .tag { order: -1; }
.facts-note { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   6. ABOUT — careers. Full-row role entries (title + mono meta left, the
   work right at 900px+) and a numbered hiring ledger. No apply theatre:
   the roles are labelled illustrative and link nowhere.
   -------------------------------------------------------------------------- */
.roles { border-top: var(--rule) solid var(--border); }
.role {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-bottom: var(--rule) solid var(--border);
}
.role h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.15; }
.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.8125rem;
  color: var(--muted);
}
.role__meta b { color: var(--fg); font-weight: 500; }
.role__body { display: grid; gap: var(--sp-3); justify-items: start; }
.role__body p { font-size: var(--t-sm); color: var(--muted); max-width: 58ch; }
@media (min-width: 900px) {
  .role { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); }
  .role h3 { grid-column: 1; }
  .role .role__meta { grid-column: 1; }
  .role .role__body { grid-column: 2; grid-row: 1 / 3; }
}

.hire-h3 { margin-block: var(--sp-10) var(--sp-4); }
.hire-steps { border-top: var(--rule) solid var(--border); max-width: 66ch; }
.hire-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  padding-block: var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
}
.hire-steps .tag { grid-column: 1; grid-row: 1; padding-top: 0.15em; }
.hire-steps p:not(.tag) { grid-column: 2; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.hire-steps p b { color: var(--fg); font-weight: 500; }
.roles-note { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   7. REDUCED MOTION — nothing on these pages moves on its own; the shared
   layers already collapse the reveal system to its visible resting state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .code-copy { transition: none; }
}