/* Content Machine page — page-scoped components.
   Loaded AFTER styles.css. Inherits all tokens from :root there.
   .ai-badge and .section-warm are shared primitives and live in styles.css. */

/* Dark typographic hero, matching the Brand Systems treatment rather than the
   forest .page-hero used on the older subpages. */
.ce-hero {
  background:
    radial-gradient(1000px 560px at 70% 24%, rgba(31, 79, 168, 0.30) 0%, transparent 62%),
    var(--forest-deep);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.ce-hero h1 {
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.04;
  max-width: 20ch;
}

.ce-hero p {
  color: var(--fog);
  max-width: 62ch;
}

/* ---------- 02 the diagram ---------- */
/* The illustration is a cream-ground drawing, so it sits on the dark band with
   its own light edge rather than a border that would fight the artwork. */
.ce-map {
  margin: 40px 0 0;
}

.ce-map-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.ce-map-frame img {
  width: 100%;
  height: auto;
}

.ce-map figcaption {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--fog);
  max-width: 74ch;
}

.ce-map figcaption strong {
  color: var(--paper-warm);
}

/* The diagram is dense enough that it is unreadable at phone width. The label
   text is carried by the stage list below, so this is an affordance rather
   than the only route to the content. */
.ce-map-zoom {
  white-space: nowrap;
  color: var(--brass-soft);
}

/* ---------- 03 the six stages ---------- */
.stage-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.stage-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 4fr) minmax(0, 7fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

/* --brass-ink, not --brass: this sits on paper, and small brass text there is
   2.94:1. The light-surface cut is 5.30:1. See the accent notes in styles.css. */
.stage-no {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--brass-ink);
  padding-top: 5px;
}

.stage-item h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.2;
  margin: 0 0 6px;
}

.stage-where {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0;
  word-break: break-word;
}

.stage-item p.stage-body {
  margin: 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- 04 the reality note ---------- */
.reality-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.reality-layout > div > p {
  color: var(--ink-soft);
  max-width: 60ch;
}

.tree-card {
  background: var(--ink);
  color: var(--paper-warm);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

.tree-card p.tree-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 0 0 14px;
}

.tree-card pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.85;
  overflow-x: auto;
  color: var(--paper-warm);
}

.tree-card pre b {
  color: var(--white);
  font-weight: 700;
}

.tree-card pre i {
  color: var(--fog-dim);
  font-style: normal;
}

/* ---------- 05 choose your engine ---------- */
.routing-scroll {
  overflow-x: auto;
  margin-top: 36px;
}

.routing-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.95rem;
}

.routing-table th,
.routing-table td {
  border: 1px solid var(--line-dark);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.routing-table th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-soft);
  font-weight: 700;
}

.routing-table td:first-child {
  color: var(--white);
}

.routing-table td {
  color: var(--fog);
}

.routing-note {
  margin: 22px 0 0;
  color: var(--fog);
  max-width: 68ch;
}

/* ---------- 06 what you get ---------- */
.output-list {
  margin: 40px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.output-item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.output-item dt {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.25;
}

.output-item dd {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- 07 the quality gate ---------- */
.gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: 40px;
}

.gate-grid h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 10px;
}

.gate-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gate-grid li {
  padding: 7px 0;
  border-top: 1px solid var(--line-dark);
  color: var(--fog);
  font-size: 0.94rem;
}

.gate-grid li:first-of-type {
  border-top: 0;
}

/* ---------- 09 the managed tier ---------- */
.managed-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 36px;
}

/* :not(.managed-card) because this was also matching the card's own paragraphs
   at higher specificity than .managed-card-title, silently overriding the
   accent colour there and rendering the card heading as body grey. Scope it to
   the prose column, which is the only place it was meant to apply. */
.managed-layout > div:not(.managed-card) > p {
  color: var(--ink-soft);
  max-width: 60ch;
}

.managed-layout > div:not(.managed-card) > p:last-child {
  margin-bottom: 0;
}

.managed-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

/* --brass-ink for the same reason as .stage-no — this card is white. */
.managed-card-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 16px;
}

.managed-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.managed-card li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}

.managed-card li:first-child {
  border-top: 0;
  padding-top: 0;
}

.managed-card-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .reality-layout,
  .managed-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .stage-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px 16px;
  }

  .stage-item p.stage-body {
    grid-column: 2;
  }

  .output-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}