/* vendored from agentic-paybench/design-system-private@d7550af (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 the 1fr grid tracks, the 1em icon box (relative to
   the small type role) and one phone-width breakpoint, which the token layer
   does not define. 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;
}

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; }

/* --- 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="page"] { 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; }

/* --- 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)); }
}