/* vendored from agentic-paybench/design-system-private@dccf561 (packages/tokens, packages/family, packages/posture) by packages/family/vendor.mjs; do not edit here, re-vendor */
/* family.css: the shared layout of the public page family (everydayai.link,
   agentic-paybench.dev, oracle.agentic-paybench.dev). Direction A, "Ledger",
   picked by the founder on 2026-10-16, with the machine section as the
   engine-room panel.

   Every colour, space and type size here is a token from packages/tokens.
   The only literals are layout measures the token layer does not define: the
   two page widths (--family-measure, --family-wide), the grid-track minimums
   of the contents list, the record grid and the by-rail rows, the 1em icon
   box (relative to the small type role), the two breakpoints (a phone width
   and the wide-layout width), and the standard clip of .visually-hidden. The family bar and the footer are emitted by family.py so
   their markup exists in one place; this file only styles them.

   Theme follows the viewer's OS preference through the token layer; a page
   sets nothing. The engine-room panel pins itself dark with data-theme so the
   links inside it take the night accent ramp. */

:root {
  --family-measure: 44rem;
  --family-wide: 72rem;
}

html { -webkit-text-size-adjust: 100%; }

/* The page ground is the SURFACE role, not the canvas role: on the canvas the
   muted text role measures 4.49:1 in the light theme, one hundredth under the
   AA line the gate enforces; on the surface it measures 4.9:1. The posture
   block and code blocks take the canvas role so they still read as recessed.
   (Gate finding 2026-10-16, applied under the no-wording-escalation rule; the
   founder's veto stands.) */
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
}

.family-page {
  max-width: var(--family-measure);
  margin: 0 auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.family-page > main { flex: 1 0 auto; }

a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.125em; }

/* A visible keyboard-focus ring on every interactive element (links, the
   sources disclosures), from the accent ring role; mouse clicks do not show it. */
:is(a, summary, button):focus-visible {
  outline: var(--border-hairline) solid var(--color-accent-ring);
  outline-width: calc(var(--border-hairline) * 3);
  outline-offset: var(--space-1);
  border-radius: var(--radius-xs);
}

/* --- the family bar: one line, same place on every surface ------------- */
.fam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline) solid var(--color-border);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.fam .who { color: var(--color-text-muted); margin-right: auto; padding: var(--space-2) 0; }
.fam a { display: inline-block; color: var(--color-text-muted); text-decoration: none; padding: var(--space-2) 0; }
.fam a:hover { color: var(--color-text); text-decoration: underline; }
.fam a[aria-current] { color: var(--color-text); font-weight: var(--weight-semibold); }

/* --- type roles on elements ------------------------------------------- */
h1 {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--tracking-title);
  color: var(--color-text-strong);
  margin: var(--space-7) 0 var(--space-3);
}
h2 {
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-leading);
  margin: var(--space-6) 0 var(--space-3);
}
h3 {
  font-size: var(--type-body-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-leading);
  margin: var(--space-5) 0 var(--space-2);
}
p, ul, ol { margin: 0 0 var(--space-3); }
ul, ol { padding-left: var(--space-5); }
li { margin: 0 0 var(--space-1); }
strong, b { font-weight: var(--type-emphasis-weight); }
small, .lead, .meta { font-size: var(--type-small-size); line-height: var(--type-small-leading); }
.lead, .meta { color: var(--color-text-muted); }
code { font-family: var(--font-mono); font-size: var(--type-small-size); }
pre {
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
  line-height: var(--leading-body);
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-3);
}
pre code { font-size: inherit; }
hr { border: 0; border-top: var(--border-hairline) solid var(--color-border); margin: var(--space-6) 0; }

/* --- tables: never the page scrolling sideways ------------------------ */
.table-scroll { overflow-x: auto; margin: 0 0 var(--space-4); -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--border-hairline) solid var(--color-border-subtle);
}
th { font-weight: var(--weight-semibold); color: var(--color-text-muted); }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td a, .machine .paths a { overflow-wrap: anywhere; }
td ul, td ol { padding-left: var(--space-4); margin: 0; }

/* --- the posture block: the ruled sentences, from the shared snippet --- */
.posture {
  background: var(--color-canvas);
  border: var(--border-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.posture p { margin: 0 0 var(--space-2); }
.posture p:last-child { margin: 0; }

/* --- the engine-room panel: "For agents and software" ------------------ */
.machine {
  background: var(--color-surface-chrome);
  color: var(--color-on-chrome);
  border: var(--border-hairline) solid var(--color-on-chrome-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 0;
}
.machine h2 { color: var(--color-on-chrome); margin-top: 0; }
.machine p { color: var(--color-on-chrome-muted); }
.machine a { color: var(--color-on-chrome); }
.machine a:hover { color: var(--color-accent); }
.machine .paths {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.machine .paths li { margin: 0; padding: var(--space-1) 0; }
.machine .paths a { display: inline-block; padding: var(--space-1) 0; }
.machine .paths code { color: var(--color-on-chrome); }
.machine .paths span { display: block; color: var(--color-on-chrome-muted); }

/* --- the person page's pieces ----------------------------------------- */
.pull {
  color: var(--color-text-strong);
  font-weight: var(--type-emphasis-weight);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: var(--border-hairline) solid var(--color-accent-border);
  margin: var(--space-3) 0 var(--space-5);
}
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2xl);
  border: var(--border-hairline) solid var(--color-accent-border);
  background: var(--color-accent-surface);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  text-decoration: none;
}
.btn:hover { border-color: var(--color-accent); color: var(--color-text-strong); }
.cta p { margin: 0 0 var(--space-2); }
.cta .btn { margin-bottom: var(--space-4); }
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
}
.links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  padding: var(--space-2) 0;
}
.links a:hover { color: var(--color-link); text-decoration: underline; }
.links svg { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* --- the wide layout: data pages only (layout="wide" in family.py) -------
   The container widens so six rails can sit side by side; running prose
   inside it keeps the reading measure, and everything shares one left edge.
   The family bar and footer span the same container. */
.family-page--wide { max-width: var(--family-wide); }
.family-page--wide :is(main > h1, main > p, main > ul, main > ol, main > .posture, main > .table-scroll, .question > .notes) { max-width: var(--family-measure); }

/* --- the top of a wide page: introduction and contents side by side ----- */
.lede { display: block; }
.lede > .intro > :is(h1, p, .posture) { max-width: var(--family-measure); }
@media (min-width: 64rem) {
  .lede {
    display: grid;
    grid-template-columns: minmax(0, var(--family-measure)) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .lede .toc { margin-top: var(--space-7); }
  .lede .toc ol { grid-template-columns: minmax(0, 1fr); }
  .lede + .question { margin-top: var(--space-6); }
}

/* --- contents: the questions as jump links ------------------------------ */
.toc {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--border-hairline) solid var(--color-border);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.toc h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0 var(--space-5);
  counter-reset: q;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.toc li { margin: 0; counter-increment: q; display: flex; gap: var(--space-2); }
.toc li::before { content: counter(q); color: var(--color-text-faint); font-family: var(--font-mono); min-width: 1.5em; padding: var(--space-1) 0; }
.toc a { display: inline-block; padding: var(--space-1) 0; color: var(--color-text); text-decoration: none; }
.toc a:hover { color: var(--color-link); text-decoration: underline; }
.toc .extra { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-2) 0 0; border-top: var(--border-hairline) solid var(--color-border-subtle); font-size: var(--type-small-size); line-height: var(--type-small-leading); }
.toc .extra li { margin: 0; }
.toc .extra li::before { content: none; }
/* By rail: one row per rail, the thirteen questions as numbered links. */
.by-rail { margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--color-border); }
.by-rail h2 { margin: 0 0 var(--space-2); font-size: var(--type-small-size); line-height: var(--type-small-leading); font-weight: var(--weight-semibold); color: var(--color-text-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.by-rail dl { margin: 0; font-size: var(--type-small-size); line-height: var(--type-small-leading); }
.by-rail dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); padding: var(--space-1) 0; border-top: var(--border-hairline) solid var(--color-border-subtle); }
.by-rail dt { flex: 0 0 18rem; max-width: 100%; color: var(--color-text); font-weight: var(--weight-semibold); }
.by-rail dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.by-rail dd a { display: inline-block; min-width: var(--space-6); padding: var(--space-1) 0; text-align: center; font-family: var(--font-mono); }

/* --- a question: heading, notes, then the six records as cards ---------- */
.question { margin: var(--space-7) 0 0; scroll-margin-top: var(--space-4); }
.question > h2 {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border-strong);
}
/* The question heading stays in view while its six records scroll past, so
   a reader deep in a long section always knows which question it answers.
   It costs one heading line of reading height. */
.question > h2 {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
  padding-bottom: var(--space-2);
}
.question .lead { margin: 0 0 var(--space-4); color: var(--color-text-muted); max-width: var(--family-measure); }
.question .notes { margin: 0 0 var(--space-4); }
.lede + .question { margin-top: var(--space-6); }
.lede + .question > h2 { border-top: 0; padding-top: 0; }
.by-rail + .question > h2 { border-top: 0; }
.question .notes p { margin: 0 0 var(--space-2); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5) var(--space-5);
  align-items: start;
}

/* --- a record: one documented fact for one rail -------------------------- */
.record {
  min-width: 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-hairline) solid var(--color-border);
  /* A jump to a record must land BELOW the pinned question heading, so the
     rail's name is visible: the heading's own height (its padding and one
     heading line, from the same tokens) plus a gap. */
  scroll-margin-top: calc(var(--space-4) + var(--space-2) + var(--type-heading-size) * var(--type-heading-leading) + var(--border-hairline) + var(--space-3));
}
.record h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-size);
  line-height: var(--type-heading-leading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.record .value {
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  font-weight: var(--weight-regular);
  overflow-wrap: anywhere;
}
/* f: a machine label keeps the small role so the value face does not jump
   between questions; medium weight marks it as the answer */
.record .value code { font-size: var(--type-small-size); font-weight: var(--weight-medium); }
.record .value ul { margin: 0; padding-left: var(--space-4); font-weight: var(--weight-regular); }
.record .value li { margin: 0 0 var(--space-1); }
/* a structured answer (a list of items, each a few keyed facts): compact
   blocks in the small role, one hairline between items, keys muted */
.record .value.structured {
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  font-weight: var(--weight-regular);
  color: var(--color-text);
}
.record .value .items { list-style: none; padding: 0; margin: 0; }
.record .value .items > li { margin: 0; padding: var(--space-2) 0; border-top: var(--border-hairline) solid var(--color-border-subtle); }
.record .value .items > li:first-child { border-top: 0; padding-top: 0; }
.record .kv { margin: 0; }
.record .kv > div { margin: 0 0 var(--space-1); }
.record .kv dt { color: var(--color-text-muted); }
.record .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.record .extras {
  margin: 0 0 var(--space-2);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.record .extras > div { display: flex; gap: var(--space-2); min-width: 0; }
.record .extras dt { color: var(--color-text-muted); flex: none; }
.record .extras dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.record .extras ul { margin: 0; padding-left: var(--space-4); }
.record .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--color-text);
}
.record .tag { white-space: nowrap; }
.record .tag .k { color: var(--color-text-muted); }
.record .statement {
  margin: 0 0 var(--space-3);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--color-text);
}
.record details {
  padding-top: var(--space-2);
  border-top: var(--border-hairline) solid var(--color-border-subtle);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}
.record summary { cursor: pointer; color: var(--color-text-muted); padding: var(--space-1) 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.record summary:hover { color: var(--color-text); }
.record details ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.record details a { overflow-wrap: anywhere; }

/* --- directory listings and labels ------------------------------------ */
.dir { list-style: none; padding: 0; }
.dir li { padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--color-border-subtle); margin: 0; }
.dir .label { color: var(--color-text-muted); }
.dir a, td li > a { display: inline-block; padding: var(--space-1) 0; }

/* --- the footer line, same on every surface ---------------------------- */
.foot {
  margin-top: var(--space-7);
  padding: var(--space-4) 0 var(--space-6);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  color: var(--color-text-muted);
}
.foot a { color: var(--color-text-muted); }

@media (max-width: 640px) {
  .machine .paths { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .cards { gap: var(--space-3); }
  .question { margin-top: var(--space-6); }
  /* On a phone the pinned question heading drops its padding so it costs
     under one body line of reading height. */
  .question > h2 { padding-top: 0; padding-bottom: 0; }
  .record { scroll-margin-top: calc(var(--type-heading-size) * var(--type-heading-leading) + var(--border-hairline) + var(--space-3)); }
}