/* ===============================================
   pages.css — additions for sub-pages
   (Colors, Components, Grid, MCP, Typography)
   Layers on top of base.css + home.css.
   =============================================== */


/* ── Page hero (single-column variant of homepage hero) ─── */
.page-hero {
  padding-block: var(--space-2xl) var(--space-xl);
}

.page-hero > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--color-neutral-8);
  border-radius: 0.3em;
  color: var(--color-neutral-3);
  margin-block-end: var(--space-m);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-hero > .eyebrow > .dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--color-color-1);
}

.page-hero > .eyebrow > .crumb {
  color: var(--color-neutral-4);
}

.page-hero > h1 {
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 22ch;
}

.page-hero > h1 .it {
  font-family: var(--font-family-2);
  font-style: italic;
  color: var(--color-neutral-3);
}

.page-hero > h1 .acc { color: var(--color-color-1); }

.page-hero > .lede {
  font-size: var(--font-size-1);
  color: var(--color-neutral-3);
  max-width: 56ch;
  margin-block: var(--space-m);
}

.page-hero > .lede > em {
  font-family: var(--font-family-2);
  font-style: italic;
  color: var(--color-neutral-1);
}

.page-hero > .meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
}

.page-hero > .meta-strip > span > b {
  color: var(--color-neutral-1);
  font-weight: 500;
  margin-inline-end: var(--space-3xs);
}


/* ── Related pages strip (near bottom of each page) ────── */
.related {
  padding-block: var(--space-xl) var(--space-2xl);
}

.related > .label-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-end: var(--space-s);
}

.related > .label-row > .rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-neutral-8);
}

.related > .grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-xs);
}

.related > .grid-row > .r-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  color: var(--color-neutral-2);
  text-decoration: none;
  transition: border-color 120ms, transform 120ms;
}

.related > .grid-row > .r-card:hover {
  border-color: var(--color-color-1);
  color: var(--color-neutral-1);
  text-decoration: none;
  transform: translateY(-1px);
}

.related > .grid-row > .r-card > .k {
  color: var(--color-neutral-4);
  font-size: var(--font-size--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.related > .grid-row > .r-card > .t {
  font-size: var(--font-size-2);
  letter-spacing: -0.02em;
  color: inherit;
}

.related > .grid-row > .r-card > .t > .acc {
  font-family: var(--font-family-2);
  font-style: italic;
  color: var(--color-color-1);
}

.related > .grid-row > .r-card > .d {
  color: var(--color-neutral-3);
  font-size: var(--font-size--1);
  margin-block-start: var(--space-3xs);
}

.related > .grid-row > .r-card > .arrow {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
  color: var(--color-color-1);
  font-size: var(--font-size--1);
}


/* ── Inline code / kbd / .mono ─────────────────────────── */
code, kbd, .mono {
  font-family: var(--font-family-1);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 0.95em;
  color: var(--color-color-9);
}


/* ── Colors page additions ─────────────────────────────── */
.seeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
}

.seeds-grid > .seed {
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.seeds-grid > .seed > .swatch {
  height: 6rem;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xs);
  color: var(--color-light-neutral-10);
  font-family: var(--font-family-2);
  font-style: italic;
  font-size: var(--font-size-1);
}

.seeds-grid > .seed.s-0 > .swatch { background-color: var(--color-color-0); }
.seeds-grid > .seed.s-1 > .swatch { background-color: var(--color-color-1); }
.seeds-grid > .seed.s-2 > .swatch { background-color: var(--color-color-2); }
.seeds-grid > .seed.s-3 > .swatch { background-color: var(--color-color-3); }

.seeds-grid > .seed > .meta {
  padding: var(--space-xs);
  display: grid;
  gap: var(--space-3xs);
}

.seeds-grid > .seed > .meta > .role {
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.seeds-grid > .seed > .meta > .vals {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
  color: var(--color-neutral-3);
  font-size: var(--font-size--1);
}

.seeds-grid > .seed > .meta > .vals > b {
  color: var(--color-neutral-1);
  font-weight: 500;
  margin-inline-end: var(--space-3xs);
}

.tier-grid {
  display: grid;
  grid-template-columns: 6rem repeat(3, 1fr);
  gap: var(--space-3xs);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  padding: var(--space-s);
}

.tier-grid > .h {
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-block: var(--space-2xs);
}

.tier-grid > .lbl {
  color: var(--color-neutral-2);
  font-size: var(--font-size--1);
  padding-block: var(--space-2xs);
  display: flex;
  align-items: center;
}

.tier-grid > .tile {
  height: var(--space-l);
  border-radius: 0.35em;
}

.tier-grid > .tile.s-0a { background-color: var(--color-color-0); }
.tier-grid > .tile.s-0b { background-color: var(--color-color-4); }
.tier-grid > .tile.s-0c { background-color: var(--color-color-8); }
.tier-grid > .tile.s-1a { background-color: var(--color-color-1); }
.tier-grid > .tile.s-1b { background-color: var(--color-color-5); }
.tier-grid > .tile.s-1c { background-color: var(--color-color-9); }
.tier-grid > .tile.s-2a { background-color: var(--color-color-2); }
.tier-grid > .tile.s-2b { background-color: var(--color-color-6); }
.tier-grid > .tile.s-2c { background-color: var(--color-color-10); }
.tier-grid > .tile.s-3a { background-color: var(--color-color-3); }
.tier-grid > .tile.s-3b { background-color: var(--color-color-7); }
.tier-grid > .tile.s-3c { background-color: var(--color-color-11); }


/* ── Components page additions ─────────────────────────── */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-s);
  margin-block-end: var(--space-l);
}

.principles-grid > .card {
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
}

.principles-grid > .card > .num {
  color: var(--color-color-1);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-end: var(--space-2xs);
}

.principles-grid > .card > h4 {
  margin-block-end: var(--space-2xs);
}

.principles-grid > .card > p {
  color: var(--color-neutral-3);
}

.api-block {
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  overflow: hidden;
}

.api-block > header {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  border-block-end: 1px solid var(--color-neutral-8);
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
}

.api-block > header > .dots { display: flex; gap: 4px; }
.api-block > header > .dots > i {
  display: block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background-color: var(--color-neutral-7);
}

.api-block > header > .live {
  margin-inline-start: auto;
  color: var(--color-color-1);
}

.api-block > .body {
  padding: var(--space-s);
  display: grid;
  gap: 2px;
  font-size: var(--font-size--1);
  color: var(--color-neutral-2);
}

.api-block > .body > .line {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-2xs);
  padding-block: 2px;
  align-items: baseline;
}

.api-block > .body > .line > .b { color: var(--color-color-1); }
.api-block > .body > .line > .t > .k { color: var(--color-color-9); }
.api-block > .body > .line > .t > .v { color: var(--color-neutral-3); }
.api-block > .body > .line > .t > .c { color: var(--color-neutral-4); }


/* ── Grid page additions ───────────────────────────────── */
.tracks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
}

.tracks > .track {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--space-s), 1fr)
    [wide-2-start] var(--space-l)
    [wide-1-start] var(--space-s)
    [standard-start] minmax(0, 60%) [standard-end]
    var(--space-s) [wide-1-end]
    var(--space-l) [wide-2-end]
    minmax(var(--space-s), 1fr) [full-end];
  align-items: center;
  height: 2.4rem;
  border-radius: 0.5em;
}

.tracks > .track > .seg {
  height: 100%;
  border: 1px dashed var(--color-neutral-8);
  border-radius: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-4);
  font-size: var(--font-size--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tracks > .track > .seg.act {
  background-color: var(--color-neutral-10);
  border-color: var(--color-color-1);
  color: var(--color-color-1);
}

.tracks > .track > .full {
  grid-column: full;
}

.tracks > .track > .wide-2 {
  grid-column: wide-2;
}

.tracks > .track > .wide-1 {
  grid-column: wide-1;
}

.tracks > .track > .standard {
  grid-column: standard;
}

.tracks > .legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  padding-block-start: var(--space-2xs);
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
}

.tracks > .legend > span > .sw {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  vertical-align: -1px;
  margin-inline-end: var(--space-3xs);
}

.tracks > .legend > span > .sw.act { background-color: var(--color-color-1); }
.tracks > .legend > span > .sw.dash { border: 1px dashed var(--color-neutral-6); }


/* ── MCP page additions ────────────────────────────────── */
.clients-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-m) var(--space-l);
}

.clients-row > .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--color-neutral-8);
  border-radius: 99em;
  color: var(--color-neutral-2);
  font-size: var(--font-size--1);
  background-color: var(--color-neutral-9);
}

.clients-row > .chip > .sq {
  width: 0.55em;
  height: 0.55em;
  border-radius: 2px;
  background-color: var(--color-color-1);
}

.clients-row > .chip.ghost { color: var(--color-neutral-4); }
.clients-row > .chip.ghost > .sq { background-color: var(--color-neutral-7); }

.tool-ledger {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-neutral-8);
  margin-block-end: var(--space-l);
}

.tool-ledger > .row {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--color-neutral-8);
  align-items: baseline;
}

.tool-ledger > .row > .k {
  color: var(--color-color-9);
  font-size: var(--font-size--1);
}

.tool-ledger > .row > .d {
  color: var(--color-neutral-2);
  font-size: var(--font-size--1);
}

.tool-ledger > .row > .ret {
  color: var(--color-neutral-4);
  font-size: var(--font-size--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 36rem) {
  .tool-ledger > .row {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }
}


/* ── Typography page additions ─────────────────────────── */
.families-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-s);
  margin-block-end: var(--space-l);
}

.families-grid > .family {
  padding: var(--space-m);
  border: 1px solid var(--color-neutral-8);
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.families-grid > .family > .glyph {
  font-size: var(--font-size-9);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--color-neutral-1);
}

.families-grid > .family.serif > .glyph {
  font-family: var(--font-family-2);
  font-style: italic;
  color: var(--color-color-1);
}

.families-grid > .family > .role {
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.families-grid > .family > .name {
  font-size: var(--font-size-3);
  letter-spacing: -0.02em;
  color: var(--color-neutral-1);
}

.families-grid > .family > .name > em {
  font-family: var(--font-family-2);
  font-style: italic;
  color: var(--color-color-1);
}

.families-grid > .family > .blurb {
  color: var(--color-neutral-3);
  font-size: var(--font-size--1);
}

.var-ledger {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-neutral-8);
  max-width: 60rem;
}

.var-ledger > .row {
  display: grid;
  grid-template-columns: 12rem 6rem 1fr;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--color-neutral-8);
  align-items: baseline;
  font-size: var(--font-size--1);
}

.var-ledger > .row > .k { color: var(--color-color-9); }
.var-ledger > .row > .v { color: var(--color-neutral-1); }
.var-ledger > .row > .n { color: var(--color-neutral-4); }

@media (max-width: 36rem) {
  .var-ledger > .row {
    grid-template-columns: 1fr 1fr;
  }
  .var-ledger > .row > .n { grid-column: 1 / -1; }
}


/* ── Lede modifiers ────────────────────────────────────── */
.lede.tight {
  margin-block: 0 var(--space-m);
}

.lede.narrow {
  margin-block-start: var(--space-m);
  max-width: 54ch;
}


/* ── Deploy-grid that follows the anatomy api-block ────── */
.api-block + .deploy-grid {
  margin-block-start: var(--space-m);
}


/* ── Mini-hero pricing variant (components catalogue) ──── */
.mini-hero.pricing {
  padding: var(--space-xs);
}

.mini-hero.pricing > .h {
  font-size: var(--font-size-3);
}

.mini-hero.pricing > .h > .b {
  background: transparent;
  color: var(--color-neutral-4);
  font-size: var(--font-size--1);
  padding: 0;
}