/* ============================================================
   HiveMind Landing Page — §5 Value pillars (HM-438 / LP-06)
   Owns the #what-it-does section only. Colors/type from css/tokens.css.
   Full-width alternating folds (artifact + copy) on a continuous Abyss
   ground — never a card grid; the artifacts carry the visual variety.
   CSS-only, no JS: content is fully visible by default, matching §4.
   ============================================================ */

/* ---- Section root + seam ----
   §4 (how-it-works) resolves to solid --hive-900 at its bottom, so §5 starts
   and holds --hive-900 (Abyss): the seam is invisible and §6 inherits a
   resolved ground (the same handoff §4 gave §5). overflow-x: clip is the same
   page-scroll-safety idiom §2/§4 use — the mono panels' internal horizontal
   scroll can never spawn a page-level scrollbar at any width. */
.pillars {
  background-color: var(--hive-900);
  overflow-x: clip;
}

/* ---- One fold ----
   Mobile: single column; natural DOM order puts copy first, artifact below.
   minmax(0, 1fr) stops a long mono string from forcing the track past the
   viewport. Folds are separated by generous rhythm — full-width folds, not
   cards. */
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
.pillar + .pillar {
  margin-top: var(--space-4xl);
}

/* ---- Copy zone ---- */
.pillar__copy {
  min-width: 0;
  max-width: var(--prose);           /* 68ch reading measure, matches §4 */
  /* Vertical alignment is governed by the grid (align-items) at >=900px, so both
     zones top-align; no per-child override (HM-495). */
}

/* H3 override: the global h3 is Inter 600; the issue mandates Inter 800 for the
   fold titles. Weight 800 IS vendored (main.css @font-face) so this is a real
   face, not faux-bold. Inherits --fs-h3 + text-wrap:balance + display tracking
   from the base h1–h3 rule. */
.pillar__title {
  font-weight: 800;
  color: var(--offwhite);
}
.pillar__body {
  margin-top: var(--space-md);
  color: var(--muted-dark);          /* 6.18:1 on Abyss — AA */
}

/* ---- Artifact zone (shared shell) ----
   Also a grid so the 5a inner panels + caption stack with an even gap.
   min-width:0 is the scroll-safety anchor for the mono panels inside. */
.pillar__artifact {
  min-width: 0;
  display: grid;
  gap: var(--space-md);
}

/* ============================================================
   Two-zone asymmetric grid — desktop (>= 900px)
   Artifact ~55% / copy ~45%, direction alternating per fold. Columns are
   redefined per variant so the artifact is ALWAYS the wider (55%) zone, and
   BOTH children get an explicit grid-column in each case — nothing is left to
   auto-placement (the LP-05 grid lesson).
   ============================================================ */
@media (min-width: 900px) {
  .pillar {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);   /* copy | artifact */
    column-gap: var(--space-3xl);
    align-items: start;   /* top-align copy with its taller artifact — centering stranded the short copy with large vertical voids (HM-495) */
  }
  /* Pin BOTH children to row 1 — not just the column. On a --flip fold the copy
     is source-order-first but wants column 2, so sparse auto-placement pushed the
     artifact (column 1) down to a 2nd row, staggering the fold diagonally. Pinning
     grid-row keeps every fold a single two-column row (the LP-05 grid lesson: place
     the row too, never leave it to auto-placement). HM-495. */
  .pillar__copy     { grid-column: 1; grid-row: 1; }   /* 45fr, left  */
  .pillar__artifact { grid-column: 2; grid-row: 1; }   /* 55fr, right */

  .pillar--flip {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);   /* artifact | copy */
  }
  .pillar--flip .pillar__artifact { grid-column: 1; }   /* 55fr, left  */
  .pillar--flip .pillar__copy     { grid-column: 2; }   /* 45fr, right */
}

/* ============================================================
   Fold 5a artifact — a source -> answer pair:
   a mono --ink-2 vault note stacked above a distinct --ink-3 Claude response
   that cites it, then a mono caption naming the mechanism.
   ============================================================ */

/* Vault note — the §4 --ink-2 panel idiom: solid surface, 1px rule on all
   sides, 16px radius, children clipped to the radius. */
.pillar__note {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
/* Mono file-path header — the only element allowed to scroll sideways, contained
   inside the panel so the page never scrolls horizontally (the §4 idiom). */
.pillar__note-path {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.4vw, 0.9375rem);   /* 12px -> 15px floor */
  font-weight: 500;
  color: var(--hive-100);            /* tint — 9.25:1 on --ink-2 */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark) transparent;
}
/* Fielded profile content: key/value rows in mono. */
.pillar__fields {
  padding: var(--space-md) var(--space-lg);
  display: grid;
  gap: var(--space-md);
}
.pillar__field {
  display: grid;
  gap: var(--space-2xs);
}
.pillar__field-key {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--hive-300);            /* Sage keys — 5.94:1 on --ink-2 */
}
.pillar__field-val {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--offwhite);            /* 15.6:1 on --ink-2 */
}

/* Claude response — a DIFFERENT surface (--ink-3), sans prose + a short list,
   so it reads as a reply rather than another mono file. */
.pillar__response {
  padding: var(--space-md) var(--space-lg);
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-panel);
}
.pillar__response-line {
  color: var(--offwhite);            /* 14.1:1 on --ink-3 */
  font-size: var(--fs-sm);
  line-height: 1.5;
}
/* Block flow (not grid) so the decimal markers render reliably; main.css resets
   ol{list-style:none} so we restore it here. */
.pillar__response-list {
  margin-top: var(--space-sm);
  padding-left: 1.25rem;
  list-style: decimal;
}
.pillar__response-list li {
  color: var(--muted-dark);          /* 6.24:1 on --ink-3 */
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.pillar__response-list li + li {
  margin-top: var(--space-2xs);
}

/* Mono caption naming the mechanism (figcaption, last child of the artifact). */
.pillar__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted-dark);          /* 6.18:1 on Abyss */
}

/* ============================================================
   Fold 5b artifact — a single conversational --ink-2 panel:
   a teammate question, a rendered checklist answer, and a mono source-path
   footer. Deliberately a different internal structure from 5a.
   ============================================================ */
.pillar__qa {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
/* The question row. */
.pillar__ask {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line-dark);
}
.pillar__ask-who {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--hive-300);            /* Sage — 5.94:1 on --ink-2 */
}
.pillar__ask-text {
  color: var(--offwhite);
  font-size: var(--fs-body);
  line-height: 1.4;
}
/* The answer body. */
.pillar__answer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}
/* Rendered checklist — the "wiki answers as a checklist" moment. The custom
   check glyph is decorative; the item text carries the meaning. */
.pillar__checklist {
  display: grid;
  gap: var(--space-sm);
}
.pillar__check {
  position: relative;
  padding-left: 1.75rem;
  color: var(--offwhite);            /* 15.6:1 on --ink-2 */
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.pillar__check::before {
  content: "\2713";                  /* check mark — decorative */
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--hive-300);            /* Sage — 5.94:1 on --ink-2 */
}
/* Source-path footer — provenance is the point. Mono, its own scroll-safe row. */
.pillar__source {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark) transparent;
}
.pillar__source-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--hive-300);            /* Sage label */
}
.pillar__source-path {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.4vw, 0.9375rem);
  color: var(--hive-100);            /* tint path — 9.25:1 on --ink-2 */
}

/* ============================================================
   Fold 5c artifact — the client report: the ONE light artifact in the
   section. DESIGN.md reserves Cloud/white for product output and names the
   report as the canonical one, so it is built on pure --white to be the
   highest-luminance object on the page. Ink type, mono figures, a --hive-500
   trend line, and a provenance footer that IS the trust argument.
   Same panel idiom as 5a/5b (16px radius, clipped children, mono paths that
   scroll in place) but on light tokens: --mist dividers, --slate labels.
   ============================================================ */
.pillar__report {
  background: var(--white);
  border-radius: var(--radius-panel);
  overflow: hidden;                  /* clip the header/footer strips to the radius */
  color: var(--ink);
}

/* Paper header: client + reporting month on a subtle --cloud strip. */
.pillar__report-head {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--cloud);
  border-bottom: 1px solid var(--mist);
}
.pillar__report-client {
  font-weight: 800;                  /* real vendored face, matches the fold titles */
  font-size: var(--fs-body);
  color: var(--ink);                 /* ~19:1 on --cloud */
}
.pillar__report-month {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--slate);               /* ~5.6:1 on --cloud — AA */
}

/* Metric grid: two columns of mono figures — the "database" texture on paper. */
.pillar__metrics {
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}
.pillar__metric {
  display: grid;
  gap: var(--space-2xs);
}
.pillar__metric-key {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--slate);               /* ~5.98:1 on --white — AA */
}
.pillar__metric-val {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-h3);           /* the figures are the point — give them size */
  line-height: 1.1;
  color: var(--ink);                 /* ~20:1 on --white */
}

/* Trend line: a self-contained inline SVG. width:100% + intrinsic viewBox ratio
   means it scales cleanly at every width; non-scaling-stroke keeps the line crisp. */
.pillar__chart {
  padding: 0 var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-2xs);
}
.pillar__spark {
  width: 100%;
  height: auto;
  display: block;
}
.pillar__spark-fill {
  fill: var(--hive-50);              /* faint teal wash under the line */
}
.pillar__spark-line {
  stroke: var(--hive-500);           /* the issue-pinned trend colour */
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pillar__spark-dot {
  fill: var(--hive-500);             /* "now" endpoint */
}
.pillar__chart-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--slate);
}

/* Provenance footer — the argument, not decoration. Mono, its own scroll-safe
   row on a --cloud strip so the sources read as machine-pulled record. */
.pillar__report-sources {
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--mist);
  background: var(--cloud);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.4vw, 0.9375rem);
  color: var(--slate);               /* ~5.6:1 on --cloud — AA */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--mist) transparent;
}

/* ============================================================
   Fold 5d artifact — the operating desk: an optimization exchange in the DARK
   chat register (keeps 5c the singular bright report). Reuses the 5b --ink-2
   .pillar__qa / .pillar__ask* / .pillar__answer shell; only the answer body is
   new — recommendation rows, each with a mono vault citation. Distinct from
   5a's RSA list and 5b's checklist. Teal is never text on dark here (DESIGN.md):
   the marker is Sage, the citation is Tint.
   ============================================================ */
.pillar__recs {
  display: grid;
  gap: var(--space-md);
}
/* Each recommendation: a concrete move above its mono citation. The arrow marker
   is decorative (absolute, so it never consumes a grid cell); the text carries it. */
.pillar__rec {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding-left: 1.75rem;
}
.pillar__rec::before {
  content: "\2192";                  /* → — decorative recommendation marker */
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--hive-300);            /* Sage — 5.94:1 on --ink-2 */
}
.pillar__rec-line {
  color: var(--offwhite);            /* 15.6:1 on --ink-2 */
  font-size: var(--fs-sm);
  line-height: 1.5;
}
/* Citation — provenance again. Its own scroll-safe row so a long path never
   pushes a page scrollbar (the §4/5a/5b idiom). */
.pillar__rec-cite {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.4vw, 0.9375rem);
  color: var(--hive-100);            /* Tint — 9.25:1 on --ink-2 */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark) transparent;
}

/* No prefers-reduced-motion block: this section defines no animation or
   transition (CSS-only, static by default); the global reduced-motion block in
   main.css already covers the page. */