/* Property XI: the application shell.
   Layout only. Every colour comes from theme.css, which is extracted from the
   marketing site and is the single author of the brand.

   This file is the disposable half. When the platform is ported to a
   framework, theme.css and theme-boot.js travel unchanged and this is
   rewritten against whatever component system replaces it. */

/* ---------------------------------------------------------- app tokens --
   Gold measured as TYPE on the light ground is 3.29:1, which fails AA for
   body text and passes only for large text. So gold is a fill, a mark and a
   rule in light mode, never a paragraph. --accent-text is what carries an
   accented word: gold where gold is legible, near-black where it is not.
   The internal portal resolved this the same way; the two agree on purpose. */
:root        { --accent-text: var(--gold); }
[data-theme="light"] { --accent-text: #06080c; }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One frame with transitions off while the theme swaps, or every rule runs its
   own transition and the page smears through a half-swapped state. */
.theme-swapping * { transition: none !important; }

a { color: inherit; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 34px; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-soft);
}

/* -------------------------------------------------------------- header -- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg-shrunk);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.bar {
  max-width: 1280px; margin: 0 auto; padding: 0 34px;
  height: 62px; display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 26px; height: 26px; display: block; border-radius: 5px; }
.brand b { font-weight: 600; letter-spacing: 0.01em; font-size: 15px; }
.brand span { color: var(--bone-soft); font-size: 13px; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  text-decoration: none; padding: 7px 11px; border-radius: 2px;
  font-size: 13px; color: var(--bone-soft);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current="true"] { color: var(--bone); border-bottom-color: var(--gold); }

/* Lifted from the marketing site so the control behaves identically on both
   surfaces. --edge is 3:1 in both themes; --rule-strong would fail SC 1.4.11
   for a component boundary. */
.theme-toggle {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge); border-radius: 1px;
  background: none; cursor: pointer; color: var(--gold);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle:hover { color: var(--gold-bright); border-color: var(--gold-line); }
/* Gold is a mark here, never type, so it stays legal on a light ground. */
[data-theme="light"] .theme-toggle { color: var(--gold-deep); }
/* Dark: left half filled. Light: mirrored. One flip, no second asset. */
.theme-toggle .tt-fill { transition: transform 0.4s ease; transform-origin: 12px 12px; }
[data-theme="light"] .theme-toggle .tt-fill { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-fill { transition: none; } }

/* ---------------------------------------------------------------- hero -- */
.hero { padding: 76px 0 54px; border-bottom: 1px solid var(--rule); }
.hero h1 {
  font-size: clamp(34px, 5vw, 54px); line-height: 1.06; margin: 14px 0 18px;
  font-weight: 300; letter-spacing: -0.015em;
}
.hero h1 em { font-style: normal; color: var(--accent-text); }
/* The one place gold survives as type on white. At 54px this is large text,
   where the AA floor is 3:1, and --gold-deep measures 3.29:1 on the white
   ground. Below 24px it would fail, which is why --accent-text drops to
   near-black everywhere else. The marketing site resolves the display accent
   the same way; the two surfaces agree deliberately. */
[data-theme="light"] .hero h1 em { color: var(--gold-deep); }
.hero p:not(.mono) { max-width: 60ch; color: var(--bone-dim); font-size: 16.5px; margin: 0 0 10px; }
/* :not(.mono) is load-bearing. `.hero p` is specificity 0,2,0 and `.mono` is
   0,1,0, so without it the hero's micro-label inherits the lede's 16.5px and
   the whole label hierarchy collapses. Caught by reading the computed size
   live rather than by looking at the source. */

.statebar { display: flex; flex-wrap: wrap; gap: 0 34px; margin-top: 30px; }
.statebar div { padding-top: 11px; border-top: 1px solid var(--gold-line); min-width: 128px; }
.statebar b { display: block; font-size: 23px; font-weight: 400; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- section -- */
section { padding: 62px 0; border-bottom: 1px solid var(--rule); }
section > .wrap > h2 {
  font-size: 27px; font-weight: 300; letter-spacing: -0.01em; margin: 9px 0 10px;
}
.lede { max-width: 66ch; color: var(--bone-dim); margin: 0 0 30px; }

/* ----------------------------------------------------- ecosystem table --
   The information architecture, stated rather than implied. This is the
   answer to "the platform is only part of a bigger ecosystem": each surface
   gets its own origin, so each deploys and rolls back on its own. */
.surfaces { width: 100%; border-collapse: collapse; }
.surfaces th, .surfaces td {
  text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.surfaces th {
  font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-soft); border-bottom-color: var(--rule-strong); padding-bottom: 9px;
}
.surfaces td.host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; white-space: nowrap; color: var(--bone);
}
.surfaces td.note { color: var(--bone-dim); font-size: 13.5px; }

/* A status pill. The word carries the meaning; the colour only agrees with
   it. A pill whose text and colour disagree stops discriminating entirely. */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 1px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); color: var(--bone-soft);
}
.pill.live     { border-color: var(--op-green-dim); color: var(--op-green); }
.pill.build    { border-color: var(--gold-line);    color: var(--accent-text); }
.pill.reserved { border-color: var(--rule-strong);  color: var(--bone-soft); }

/* -------------------------------------------------------------- stages -- */
.stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1px;
  background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.stage { background: var(--ink); padding: 19px 18px; min-height: 152px;
  display: flex; flex-direction: column; gap: 8px; }
.stage .num { font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: 0.16em; color: var(--accent-text); }
.stage h3 { margin: 0; font-size: 17px; font-weight: 500; }
.stage p { margin: 0; color: var(--bone-dim); font-size: 13.5px; flex: 1; }
.stage .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* -------------------------------------------------------------- agents -- */
.agent-head { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 12px; }
.agent-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1px;
  background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.agent { background: var(--ink); padding: 16px 16px 14px; min-height: 130px;
  display: flex; flex-direction: column; gap: 6px; }
.agent .n { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--accent-text); }
.agent h4 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.agent p { margin: 0; color: var(--bone-dim); font-size: 13px; flex: 1; }
.agent .m { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.agent .m span { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-soft); }
/* A filler completing the last row. The lattice draws its rules as a 1px gap
   over a ruled background, so a cell with nothing in it is not empty space:
   it shows that background and reads as a solid block. Carries the card
   ground and nothing else. */
.agent.fill { background: var(--ink); pointer-events: none; }

/* -------------------------------------------------------------- footer -- */
.foot { padding: 34px 0 44px; text-align: center; }
.foot p { margin: 0 0 6px; }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 760px) {
  .wrap, .bar { padding: 0 16px; }
  .nav { display: none; }
  .hero { padding: 48px 0 38px; }
  section { padding: 44px 0; }
  .surfaces thead { display: none; }
  .surfaces tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .surfaces td { display: block; border: 0; padding: 2px 0; }
  .surfaces td.host { white-space: normal; word-break: break-all; }
}