/**
 * The site sheet — the shared styles of the house faces and the tool pages
 * (promoted from the landing pages, move 2, 2026-09-03; pruned by a derived list).
 * =======================================
 *
 * Styles for the public-facing splash page and about page.
 * Built on top of platform.css design tokens (--t- prefix).
 *
 * Color reference (from design doc):
 *   Primary:    #3b7dd8 (blue) — mapped to --t-blue family
 *   Accent:     #40c057 (green) — mapped to --t-green family
 *   Warm:       #f59f00 (amber) — mapped to --t-yellow family
 *   Background: #f8f9fa — --t-bg-alt
 *   Text:       #212529 — --t-text
 */

/* ================================================================
   BASE
   ================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--t-font-body);
  color: var(--t-text);
  background: var(--t-bg);
  line-height: var(--t-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--t-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Skip-link styles live in ui/styles/platform.css — shared with the editor
   since the 2026-08-13 nav unification. */

/* ================================================================
   NAVIGATION — extends .t-nav from platform.css
   ================================================================ */

#nav-auth-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-text-sm, 14px);
  line-height: 1;
}

/* Make Sign In button sit on the same baseline as nav links */
#nav-auth-slot .t-btn-sm {
  padding: 3px 10px;
  font-size: var(--t-text-sm, 14px);
  line-height: 1;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--t-text-2);
}

.nav-hamburger svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile nav overlay */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--t-nav-height);
  left: 0;
  right: 0;
  background: var(--t-white);
  border-bottom: 1px solid var(--t-border);
  box-shadow: var(--t-shadow-md);
  z-index: 999;
  padding: var(--t-space-4) var(--t-space-6);
  flex-direction: column;
  gap: var(--t-space-3);
}

.nav-mobile-menu.is-open {
  display: flex;
}

.nav-mobile-menu a {
  display: block;
  padding: var(--t-space-2) 0;
  font-size: var(--t-text-base);
  font-weight: var(--t-weight-medium);
  color: var(--t-text-2);
}

.nav-mobile-menu a:hover {
  color: var(--t-blue);
  text-decoration: none;
}

/* ================================================================
   HERO — splash page top section
   ================================================================ */

/* The hero holds a fixed share of the first screen and centres its column in it,
   rather than being however tall its contents happen to be. It used to be the
   latter, so removing the fork strip (ruling H5) would have shortened it by ~130px
   and the wordmark would have crept up the page. Grid rather than flex because the
   column must still take the full width; the graphic and the facet canvas are both
   position:absolute, so neither becomes a grid item. */
.hero {
  min-height: min(660px, 88vh);
  display: grid;
  align-content: center;
  padding: 120px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-brand {
  font-family: var(--t-font);
  font-size: 64px;
  font-weight: 800;
  color: var(--t-blue);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin-bottom: 20px;
  line-height: 1;
}

/* Hero tagline — one static line under the wordmark (decision LDG 44b94cf8) */
.hero-tagline {
  font-size: var(--t-text-lg);
  color: var(--t-text-2);
  font-weight: var(--t-weight-normal);
  line-height: 36px;
  margin-bottom: 16px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Subtle graph background */
.hero-graph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

/* The facet canvas replaces .hero-graph at runtime (ui/sitekit/hero-facets.js).
   Same box, same layer.

   THIS OPACITY IS THE PALENESS KNOB, and it is deliberately the only one. The
   script keeps design option 01's per-shape alphas exactly as authored and the
   whole composition is dimmed once, here. Scaling the per-shape alphas down
   instead would look similar in a still frame but is not the same thing: it
   also flattens the accumulation between overlapping triangles, and that
   accumulation — many translucent facets crossing, each intersection a smaller
   region at its own depth — is where the texture comes from. Dim the finished
   picture, not its ingredients. */
.hero-facets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.20;
}

@keyframes graph-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-graph {
  animation: graph-rotate 120s linear infinite;
}

/* The stats bar's rules left with its markup (ruling H7, 2026-08-13). The
   arithmetic it rendered still has a home: /spec's .taxonomy-title. */

/* ================================================================
   HOW IT WORKS — 3-column step cards
   ================================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step {
  text-align: center;
  padding: 32px 20px;
  min-width: 0;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--t-font);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

.step-number-blue   { background: var(--t-blue-tint-2); color: var(--t-blue); }
.step-number-green  { background: var(--t-green-tint); color: var(--t-green); }
.step-number-amber  { background: var(--t-yellow-tint); color: var(--t-yellow-dark); }

.step-label {
  font-size: var(--t-text-xs);
  font-weight: var(--t-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-text-3);
  margin-bottom: 6px;
}

.step-title {
  font-family: var(--t-font);
  font-size: var(--t-text-lg);
  font-weight: var(--t-weight-bold);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.step-hint {
  font-size: var(--t-text-xs);
  color: var(--t-text-3);
  font-style: italic;
  margin-bottom: 8px;
}

.step-desc {
  font-size: var(--t-text-sm);
  color: var(--t-text-2);
  line-height: var(--t-leading-loose);
}

.step-code {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  background: var(--t-bg-alt);
  border: 1px solid var(--t-divider);
  border-radius: var(--t-radius);
  font-family: var(--t-font-mono);
  font-size: var(--t-text-xs);
  color: var(--t-text-2);
}

/* ================================================================
   NETWORK CARDS — the /networks shelf
   ================================================================ */

/* This block used to be titled "DEMO NETWORK CAROUSEL" and opened with a
   `.carousel-track` grid. Nothing in the tree carried that class — it styled a
   component no page ever built (lane A, 2026-08-13), and it read as a head start
   for ruling H14's real carousel, which it was not: a five-column grid is not a
   carousel, and the H14 carousel needed a scroll-snap track instead. Deleted
   rather than renamed.
   The `.network-*` rules below are live, and they have TWO consumers, which is
   the surprising part: networks.html builds the shelf from them (redefining some
   in its own inline block), and the ADMIN CONSOLE inherits them silently, because
   `ui/styles/site-shell.layer.css:40` imports this whole file into layer(tp-site).
   `.network-card { display: flex }` reaching the console that way beat `[hidden]`
   and left a hidden element inert but visible (found and fixed by the admin lane,
   August 2026). Do not delete or rename anything in this block on the strength of
   grepping the landing pages alone — grep `services/frontend/admin/` too. */

.network-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  transition: box-shadow var(--t-transition), border-color var(--t-transition), transform var(--t-transition);
}

.network-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--t-shadow-md);
}

.network-card-desc {
  font-size: var(--t-text-sm);
  color: var(--t-text-2);
  line-height: var(--t-leading-loose);
  flex: 1;
  margin-bottom: 16px;
}

/* Card-level links should not show underline */
a.network-card,
a.network-card:hover,
a.demo-network,
a.demo-network:hover {
  text-decoration: none;
  color: inherit;
}


/* ================================================================
   SECTION HEADINGS — reusable section title pattern
   ================================================================ */

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header h2 {
  font-family: var(--t-font);
  font-size: var(--t-text-xl);
  font-weight: var(--t-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.section-header p {
  font-size: var(--t-text-base);
  color: var(--t-text-2);
}

/* ================================================================
   CTA SECTION
   ================================================================ */

.cta {
  text-align: center;
  padding: 96px 0;
}

.cta-title {
  font-family: var(--t-font);
  font-size: 30px;
  font-weight: var(--t-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.cta-desc {
  font-size: var(--t-text-base);
  color: var(--t-text-2);
  margin-bottom: 32px;
  max-width: 480px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   FOOTER
   ================================================================ */

/* Footer detail styles live in ui/styles/platform.css — shared with the
   editor since the 2026-08-13 nav unification. The .footer-privacy rules
   retired with the overclaiming no-tracking line (ruling O5, 2026-08-13). */

/* ================================================================
   ABOUT PAGE — narrative sections
   ================================================================ */

.about-hero {
  padding: 140px 0 80px;
  text-align: center;
}

.about-hero h1 {
  font-family: var(--t-font);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  color: var(--t-text);
}

.about-hero .lead {
  font-size: var(--t-text-lg);
  color: var(--t-text-2);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--t-leading-loose);
}

/* ── About: sidebar table of contents (rulings A1/A2) ──────────────
   The shape is the /spec page's, which is the house pattern for a long page
   with named parts: a sticky rail on the left, the content beside it, and the
   rail hidden below 1100px where it would cost more width than it returns.
   NOTE — the spec book carries its own copy of these rules under `.spec-*`
   names, in specbook.css beside this file (the rail at :241-292, its breakpoint
   at :334). The cut-over moved both copies out of the retired landing tree, and
   they have not stayed identical: that rail hides at 1099px and swaps in a
   `.spec-jump` select, this one hides at 1024px and has no mobile affordance,
   and that rail colours its group labels per taxonomy (`.sb-graph` / `.sb-orch`
   / `.sb-conf`) where this one does not. Two copies of one pattern is one copy
   too many; this set is deliberately named for the page rather than the pattern
   so the duplication stays visible until somebody merges them, which is a
   change with its own ruling (LDG ed18c8b5). */

.about-page-layout {
  display: flex;
  align-items: flex-start;
}

.about-toc {
  position: sticky;
  top: 56px;
  width: 240px;
  max-height: calc(100vh - 56px);
  flex-shrink: 0;
  overflow-y: auto;
  padding: 32px 0 64px;
  border-inline-end: 1px solid var(--t-divider);
  background: var(--t-bg);
  font-size: 13px;
  z-index: 10;
}

.about-toc-group { margin-bottom: 20px; }

.about-toc-label {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 20px;
  margin-bottom: 2px;
  color: var(--t-text-3);
}

.about-toc a {
  display: block;
  padding: 3px 20px 3px 28px;
  color: var(--t-text-3);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  line-height: 1.6;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.about-toc a:hover {
  color: var(--t-text);
  background: var(--t-bg-alt);
}

.about-toc a.active {
  color: var(--t-text);
  font-weight: 600;
  border-inline-start-color: currentColor;
  background: var(--t-bg-alt);
}

.about-content {
  flex: 1;
  min-width: 0;
}

/* Every named part is linkable (ruling A2). The offset clears the fixed nav —
   without it a `#`-link scrolls the heading under the header bar, which reads
   as the link having gone to the wrong place. */
.about-content h2[id],
.about-content h3[id] {
  scroll-margin-top: 72px;
}

/* The affordance: a `#` that appears on hover and on keyboard focus. It is
   always in the DOM (so it is reachable by keyboard and by a screen reader)
   and only visible when the pointer or focus is on its heading, so a page of
   twenty headings does not read as a page of twenty hashes. */
/* Scoped under `.about-content` for the reason given above the carousel controls:
   this file is imported wholesale into the admin console, so a bare `.anchor-link`
   would be a global rule that makes anything wearing that very ordinary name
   INVISIBLE until hovered. That is the worst version of the leak — not a wrong
   colour, a disappeared element — so this one in particular never goes bare.
   The rule is no longer only this comment: services/frontend/tests/
   test-landing-css-lane.mjs fails on a top-level class outside the landing
   roots, and on any name the console actually wears. */
.about-content .anchor-link {
  margin-inline-start: 8px;
  font-weight: 400;
  color: var(--t-text-3);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}

/* The glyph is CSS, not text — the one markup pattern About shares with /spec,
   whose entries are sliced verbatim into the sites API and .org's guide (a text
   "#" would become part of every title there). The link is named by aria-label. */
.about-content .anchor-link::before { content: "#"; }

.about-content h2:hover > .anchor-link,
.about-content h3:hover > .anchor-link,
.about-content .anchor-link:focus-visible {
  opacity: 1;
}

.about-content .anchor-link:hover { color: var(--t-blue); }

/* Narrative block — full-width text section */
.narrative {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--t-space-6);
}

.narrative h2 {
  font-family: var(--t-font);
  font-size: var(--t-text-xl);
  font-weight: var(--t-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--t-text);
}

.narrative p {
  font-size: var(--t-text-base);
  color: var(--t-text-2);
  line-height: var(--t-leading-loose);
  margin-bottom: 20px;
}

.narrative p:last-child {
  margin-bottom: 0;
}

.narrative strong {
  color: var(--t-text);
  font-weight: var(--t-weight-semi);
}

.narrative code {
  font-family: var(--t-font-mono);
  font-size: 0.9em;
  background: var(--t-bg-alt);
  padding: 2px 6px;
  border-radius: var(--t-radius-sm);
}

/* Remove hover effects from non-interactive cards (not links) */
.primitive-card:hover,
.value-item:hover,
.audience-card:hover {
  box-shadow: none;
  border-color: var(--t-border);
  cursor: default;
}

/* Taxonomy card grid — used for graph primitives and orchestration mechanisms.

   Fixed four-wide rather than auto-fill (ruling A8, 2026-08-13). `auto-fill` with
   a 300px minimum fits three columns in the 1072px content box, so the four graph
   primitives rendered 3 + 1 and the eight mechanisms 3 + 3 + 2 — the taxonomy's own
   arithmetic, 4 and 8, arrived on screen as a ragged edge that said neither number.
   Four columns make the Graph one whole row and the Orchestration two, so the count
   is legible from the shape. The tradeoff is a narrower card; the cards are compact
   (icon + three short lines) and carry it. */
.primitives-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.primitive-card {
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.primitive-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--t-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-font-mono);
  font-size: var(--t-text-sm);
  font-weight: var(--t-weight-bold);
  flex-shrink: 0;
  background: var(--t-blue-tint-2);
  color: var(--t-blue);
}

.primitive-body h3 {
  font-family: var(--t-font);
  font-size: var(--t-text-base);
  font-weight: var(--t-weight-bold);
  margin-bottom: 4px;
}

.primitive-body p {
  font-size: var(--t-text-sm);
  color: var(--t-text-2);
  line-height: var(--t-leading-loose);
  margin: 0;
}

.primitive-body .primitive-example {
  font-size: var(--t-text-xs);
  color: var(--t-text-3);
  margin-top: 4px;
}

/* ================================================================
   CODE EXAMPLE SECTION — splash page spec preview
   ================================================================ */

/* The dark values are the --t-dark-* tokens (ruling H12, 2026-08-13). They were
   this section's own hexes until the audience band needed the same dark and had
   nothing to ask for it. */
.code-example {
  background: var(--t-dark-bg);
  padding: 80px 0;
  overflow-x: hidden;
}
/* Inks inside the dark section are the dark tokens: the body's light inks (text-2, text-3,
   the brand blue) fall below AA on --t-dark-bg (measured 2.3:1, 3.0:1 and 2.3:1, 2026-09-05). */
.code-example p, .code-example li { color: var(--t-dark-text); }
.code-example a { color: var(--t-dark-link); }
.code-example .leaf-count { color: #b7c3cc; }

.code-example .section-header h2 {
  color: var(--t-dark-text);
}

/* The bloot explainer, below the block per ruling H9 (2026-08-13); light-muted
   because it sits on the section's dark band. */
.code-example .code-caption {
  margin-top: 16px;
  font-size: var(--t-text-sm);
  color: var(--t-dark-text-2);
  text-align: center;
}
.code-example .code-caption a {
  color: var(--t-dark-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.code-example .code-caption a:hover { color: var(--t-white); }

.code-example .section-header p {
  color: var(--t-dark-text-3);
}

/* ================================================================
   JSON CODE BLOCK — shared between splash and about page
   ================================================================ */

.code-block {
  background: var(--t-dark-bg-deep);
  color: var(--t-dark-text);
  padding: 28px 32px;
  border-radius: var(--t-radius-lg);
  overflow-x: auto;
  font-family: var(--t-font-mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 24px auto 0;
  max-width: 700px;
  border: 1px solid var(--t-dark-border);
}

.code-block .code-key { color: #7ec8e3; }
.code-block .code-string { color: #a8d08d; }
.code-block .code-number { color: #d4a574; }
.code-block .code-comment { color: #6a7a85; font-style: italic; }

/* ================================================================
   AUDIENCE GRID — "Who is this for?" section
   ================================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.audience-card {
  padding: 32px 28px;
  text-align: center;
}

.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--t-blue-tint-2);
  color: var(--t-blue);
  font-family: var(--t-font-mono);
  font-size: 18px;
  font-weight: var(--t-weight-bold);
  margin-bottom: 20px;
}

.audience-card h3 {
  font-family: var(--t-font);
  font-size: var(--t-text-md);
  font-weight: var(--t-weight-bold);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.audience-card p {
  font-size: var(--t-text-sm);
  color: var(--t-text-2);
  line-height: var(--t-leading-loose);
  margin: 0;
}

/* On the dark band (ruling H12) these need naming explicitly: .t-section-dark p
   and .audience-card p have equal specificity, and this stylesheet loads second,
   so the light grey would win and the copy would go unreadable. The icon takes
   the pale link tone rather than --t-blue, which lands at 3.3:1 on the deep
   surface — under the 4.5:1 its 18px glyph needs. */
.t-section-dark .audience-card p { color: var(--t-dark-text-2); }
.t-section-dark .audience-icon { color: var(--t-dark-link); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
  .primitives-grid { grid-template-columns: repeat(2, 1fr); }
  .about-toc { display: none; }
  .about-page-layout { display: block; }
}

@media (max-width: 768px) {
  /* Navigation */
  .t-nav-links .t-nav-link { display: none; }
  .t-nav-links .t-btn { display: none; }
  .nav-hamburger { display: block; }
  /* The locator keeps the FACT (where you are) and drops the step — a maker
     who cannot see where they are is worse served than one who loses the next
     move. The step reappears in the mobile menu as a location line. */
  .t-nav-next, .t-nav-absent { display: none; }

  /* Hero */
  .hero { padding: 120px 0 72px; }
  .hero-brand { font-size: 44px; }
  .hero-tagline { font-size: var(--t-text-md); line-height: 28px; }
  .hero-graph { width: 500px; height: 500px; }

  /* Code example */
  .code-example { padding: 56px 0; }
  .code-block { font-size: 12px; padding: 20px 16px; }

  /* Steps */
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step { padding: 24px 16px; }

  /* Audience */
  .audience-grid { grid-template-columns: 1fr; gap: 16px; }

  /* About */
  .about-hero { padding: 110px 0 60px; }
  .about-hero h1 { font-size: 36px; }
  .primitives-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Ensure horizontal padding on all containers */
  .t-container { padding-inline-start: 16px; padding-inline-end: 16px; }
  .t-section { padding-inline-start: 0; padding-inline-end: 0; }

  /* Hero */
  .hero { padding: 100px 0 56px; }
  .hero-brand { font-size: 36px; }
  .hero-tagline { font-size: var(--t-text-base); line-height: 24px; }
  .hero-graph { width: 360px; height: 360px; }

  /* Code example — prevent overflow */
  .code-example { padding: 40px 0; }
  .code-block { font-size: 10px; padding: 14px 10px; max-width: calc(100vw - 32px); word-break: break-all; white-space: pre-wrap; }

  /* Steps — single column */
  .steps { grid-template-columns: 1fr; }
  .step { padding: 20px 12px; }

  /* Audience — single column */
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { padding: 24px 20px; }

  /* About */
  .about-hero { padding: 96px 0 48px; }
  .about-hero h1 { font-size: 28px; }
  .about-hero .lead { font-size: var(--t-text-base); padding: 0 8px; }
  .cta { padding: 64px 0; }
  .cta-title { font-size: 24px; }

  /* Narrative text — padding */
  .narrative { padding: 0 16px; }

  /* Network cards */
  .network-card { padding: 20px 16px; }

  /* Primitives grid */
  .primitives-grid { grid-template-columns: 1fr; }

  /* Footer responsive rules moved to ui/styles/platform.css with the rest of
     the footer detail (2026-08-13 nav unification). */
}

@media (prefers-reduced-motion: reduce) {
  .hero-graph { animation: none; }
  .network-card:hover { transform: none; }
}