/* Page-specific layouts: enterprise, release status, legal. Requires tokens.css and site.css. */

/* ── Sub-page hero: the same headline voice as home; the actions sit under the lead they follow ── */
.hero:not(.hero--home) .hero-title { font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5.5rem); line-height: 0.95; }
.hero:not(.hero--home) .hero__intro { display: grid; gap: 28px; margin-top: clamp(24px, 2.4vw, 36px); max-width: 40rem; }
.hero:not(.hero--home) .hero__intro .hero__cta { margin-top: 0; justify-content: flex-start; }

/* Enterprise facts: four checkable values read as one spec line. The address and path stay in
 * mono because they are literal values, but share the row's size and ink so nothing reads as a link. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--tp-border-strong); }
.stats > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 10px; align-content: start; padding: 22px 24px 4px 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--tp-border); }
.stats dt { display: flex; align-items: center; min-height: 2.25rem; font-family: var(--tp-font-display); font-stretch: 80%; font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); line-height: 1.05; letter-spacing: -0.012em; }
/* Literal values sit in a code chip inside the same display-sized row, so all four read as one component. */
.stats dt code { font-family: var(--tp-font-mono); font-weight: 500; font-size: 0.62em; letter-spacing: -0.02em; padding: 0.3em 0.55em; border-radius: var(--tp-radius-control); background: var(--tp-surface-2); }
.stats dd { color: var(--tp-fg-muted); font-size: var(--tp-text-sm); }

/* Architecture: the Mac is the boundary; nothing of ours sits outside it */
.arch { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; }
.zone { position: relative; display: grid; gap: 18px; align-content: start; padding: 22px; border-radius: 16px; }
.zone--mac { background: var(--tp-surface); border: 1px solid var(--tp-border-strong); }
.zone--out { border: 1px dashed var(--tp-border-strong); }
.zone__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tp-text-sm); font-weight: 600; }
.zone__label .pm { width: 16px; height: 16px; color: var(--tp-brand-mark); }
.zone__label .logo-tile { display: none; }
.arch__mac { display: grid; grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1.15fr) 116px minmax(0, 1fr); align-items: center; }
.arch__out { display: grid; gap: 10px; }
.arch .stack { gap: 10px; }
.node { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border-radius: var(--tp-radius-block); background: var(--tp-bg); border: 1px solid var(--tp-border); }
.node__t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--tp-text-sm); }
.node__t .logo-tile { width: 18px; height: 18px; }
.node__t .pm { display: none; }
.node__m { font-family: var(--tp-font-mono); font-size: var(--tp-text-xs); color: var(--tp-brand-mark); }
.node__d { font-size: var(--tp-text-xs); color: var(--tp-fg-muted); line-height: 1.45; }
.node--core { border-color: color-mix(in oklch, var(--tp-pine-lift) 55%, transparent); background: color-mix(in oklch, var(--tp-pine) 14%, var(--tp-bg)); }
.node__owns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid color-mix(in oklch, var(--tp-pine-lift) 30%, transparent); }
.node--sub { padding: 10px 11px; background: var(--tp-bg); }
.node--sub .node__m { overflow-wrap: normal; }
.node--none { border-style: dashed; background: none; }
.node--none .node__t { text-decoration: line-through; text-decoration-color: var(--tp-status-failed); text-decoration-thickness: 1.5px; }
/* Wires: a solid rule with arrowheads, the label sitting on the line. */
.wire { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 60px; color: var(--tp-fg-passive); --wire-y: 58px; }
.wire::before { content: ""; position: absolute; left: 4px; right: 4px; top: var(--wire-y); border-top: 1.5px solid currentColor; opacity: 0.7; }
.wire::after, .wire > i { content: ""; position: absolute; top: calc(var(--wire-y) + 0.75px); width: 0; height: 0; border-block: 4.5px solid transparent; transform: translateY(-50%); }
.wire::after { right: 0; border-left: 7px solid currentColor; }
.wire > i { left: 0; border-right: 7px solid currentColor; }
.wire span { position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% - var(--wire-y) + 8px); font-size: 12px; line-height: 1.3; color: var(--tp-fg-muted); text-align: center; }

/* Two columns, generic */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cols-2--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* Policy precedence: a real order, highest first */
.layers { display: grid; counter-reset: layer; border-top: 1px solid var(--tp-border); }
.layers li { counter-increment: layer; display: grid; grid-template-columns: 28px minmax(110px, 1fr) minmax(0, 2fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tp-border); font-size: var(--tp-text-sm); }
.layers li::before { content: counter(layer); font-family: var(--tp-font-display); font-stretch: 80%; font-weight: 700; color: var(--tp-fg-passive); }
.layers li span { color: var(--tp-fg-muted); }
.layers .lk { color: var(--tp-fg); display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.layers .lk::after { content: "Locked"; font-size: 11px; font-weight: 600; color: var(--tp-status-needs-you); padding: 0 7px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--tp-status-needs-you) 45%, transparent); }

.rules { display: grid; border-top: 1px solid var(--tp-border); }
.rules li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--tp-border); font-size: var(--tp-text-sm); }
.rules li > code { font-size: 0.9em; color: var(--tp-fg); font-weight: 500; }
.rules li > span { color: var(--tp-fg-muted); }
.rules em { grid-column: 2; font-style: normal; font-size: var(--tp-text-xs); color: var(--tp-fg-passive); }
.rules em code { color: var(--tp-fg-muted); }

/* Credentials: three methods side by side, divided, not carded */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tp-border); }
.tri article { display: grid; gap: 14px; grid-row: span 3; grid-template-rows: subgrid; padding: 28px 28px 0 0; min-width: 0; }
.tri article + article { padding-left: 28px; border-left: 1px solid var(--tp-border); }
.tri .body { font-size: var(--tp-text-sm); }
.tri .code { align-self: end; }

/* What leaves the machine */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ledger__col { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; }
.ledger__col--out { border: 1px dashed var(--tp-border-strong); }
.ledger__col--never { background: var(--tp-band); border: 1px solid var(--tp-band-border); }
.ledger__col .h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ledger__col .h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--tp-fg-passive); }
.ledger__col--never .h3::before { background: var(--tp-status-ready); }
.ledger__col li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--tp-border); }
.ledger__col--never li { border-top-color: var(--tp-band-border); }
.ledger__col li span { color: var(--tp-fg-muted); font-size: var(--tp-text-sm); }

/* ── Release status ── */
.dl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.dl .h1 { font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5.5rem); line-height: 0.95; max-width: 11ch; }
.dl-card { display: grid; gap: 20px; margin-top: 16px; padding: 24px; border-radius: 16px; background: var(--tp-surface); border: 1px solid var(--tp-border-strong); }
.dl-card__id { display: flex; align-items: center; gap: 16px; }
.dl-card__id > .logo-tile { width: 52px; height: 52px; }
.dl-card__id > .pm { display: none; }
.dl-card__id .small { display: inline-flex; align-items: center; gap: 8px; color: var(--tp-status-needs-you); font-weight: 500; }
.dl-card__id .small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dl > .stack-lg:last-child { padding-top: 12px; }

.kv { display: grid; border-top: 1px solid var(--tp-border); }
.kv > div { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tp-border); font-size: var(--tp-text-sm); }
.kv dt { font-weight: 600; }
.kv dd { color: var(--tp-fg-muted); }
.h2 code.mono { font-size: 0.85em; font-weight: 500; }

/* ── Legal ── */
.legal .wrap { max-width: calc(46rem + 2 * var(--tp-gutter)); display: grid; gap: 20px; }
.legal section p, .legal section ul, .legal .lead { max-width: 40rem; }
.legal .h1 { font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem); margin-bottom: 4px; }
.legal section { display: grid; gap: 12px; padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--tp-border); }
.legal section p, .legal section li { color: var(--tp-fg-muted); text-wrap: pretty; }
.legal section ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.legal .kv { margin-top: 16px; }
.draft-note { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: var(--tp-text-xs); font-weight: 500; color: var(--tp-status-needs-you); padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--tp-status-needs-you) 45%, transparent); }

/* ── Responsive ── */
@media (max-width: 1100px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
	.stats > div:nth-child(n+3) { border-top: 1px solid var(--tp-border); margin-top: 16px; }
	.arch { grid-template-columns: 1fr; }
	.arch__mac { grid-template-columns: 1fr; }
	.wire::before { left: 50%; right: auto; top: 4px; bottom: 4px; border-top: 0; border-left: 1.5px solid currentColor; }
	.wire::after, .wire > i { left: 50%; right: auto; border-block: 0; border-inline: 4.5px solid transparent; transform: translateX(-50%); }
	.wire::after { top: auto; bottom: 0; border-top: 7px solid currentColor; }
	.wire > i { top: 0; border-bottom: 7px solid currentColor; }
	.wire { min-height: 64px; }
	.wire span { left: calc(50% + 14px); right: auto; bottom: auto; top: 50%; transform: translateY(-50%); text-align: left; }
	.cols-2, .cols-2--5-7, .dl { grid-template-columns: 1fr; }
	.tri { grid-template-columns: 1fr; }
	.tri article, .tri article + article { padding: 28px 0 0; border-left: 0; }
	.tri article + article { margin-top: 28px; border-top: 1px solid var(--tp-border); }
}
@media (max-width: 640px) {
	.stats { grid-template-columns: 1fr; }
	.stats > div, .stats > div + div { padding-left: 0; border-left: 0; }
	.stats > div + div { border-top: 1px solid var(--tp-border); margin-top: 0; }
	.ledger { grid-template-columns: 1fr; }
	.rules li, .kv > div { grid-template-columns: 1fr; gap: 4px; }
	.rules em { grid-column: 1; }
	.layers li { grid-template-columns: 24px minmax(0, 1fr); }
	.layers li > span { grid-column: 2; }
	.zone { padding: 16px; }
}