/* =============================================================
   Commons World — pillars.css
   "The Nine Pillars" architecture page (page-pillars.php).
   W6d (4E rebuild): the page now runs on the shared .cw-band/.cw-sechead/
   .cw-card/.cw-stats/.cw-cta-band system in components.css — this file
   only adds the page-specific bits that system doesn't cover: the 9-card
   grid's supporting note, the sticky-rail detail-zone shell, the compact
   per-pillar header row + collapsible full-spec disclosure, the fail-mode
   checklist, and the rhythm-break pull-quotes. Enqueued on /pillars/ only
   (see inc/assets.php).

   The sticky-rail + scrollspy shell here is a self-contained sibling of
   /about's .cw-doc shell (about.css) — about.css is enqueued only on
   is_page('about'), so /pillars keeps its own copy of the same pattern
   under its own class names (.cw-np-rail / .cw-np-doc). Both consume the
   SAME assets/js/doc.js (progressive-enhancement, markup-shape agnostic:
   it only reads [data-spy-link]/[data-spy-section] + toggles aria-current)
   — see inc/assets.php.

   REMOVED BY CLIENT ORDER (do not reintroduce): the DSM interdependency
   matrix and the "architecture at a glance" intro illustration. No CSS for
   either remains in this file — if you're looking for .cw-matrix or
   .cw-np-glance, they were deleted here in the 4E rebuild, not just hidden.
   ============================================================= */

/* -------------------------------------------------------------
   SHARED — prose measure (used inside the checklist coda + inside
   individual pillar bodies where a plain paragraph needs a cap width).
------------------------------------------------------------- */
.cw-np-prose {
  max-width: 62ch;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-reading);
  color: var(--cw-text);
}
.cw-np-prose p + p {
  margin-top: 1.05em;
}

/* -------------------------------------------------------------
   1 — HERO actions row (page-hero-band.php renders the markup; this page
   adds no overrides beyond the shared .cw-page-hero__actions component).
------------------------------------------------------------- */

/* -------------------------------------------------------------
   2B / 3B — EDITORIAL ROWS: the lazy-load fade-in was piloted here, then
   promoted to the shared component in components.css (html.js-gated fade +
   muted placeholder) and main.js (the global .is-loaded handler), so every
   editorial row AND the home bands fade in consistently — and no-JS clients
   still see the images. Nothing page-specific remains, so /pillars/ no longer
   overrides .cw-editorial__media here.
------------------------------------------------------------- */

/* -------------------------------------------------------------
   3 — THE 9-CARD GRID: supporting note below the grid.
------------------------------------------------------------- */
.cw-np-grid {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.cw-np-grid__note {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--cw-ink-soft);
}

/* -------------------------------------------------------------
   4 — DETAIL ZONE: left-aligned sechead sitting above the rail+column
   shell (the section already carries its own H2 via sechead; the rail
   below is a secondary nav, not a second heading level).
------------------------------------------------------------- */
.cw-np-doc__sechead {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------------------------------------
   4 — DOC SHELL: sticky rail (desktop) + reading column.
   Self-contained sibling of /about's .cw-doc (see file header note).
------------------------------------------------------------- */
.cw-np-doc {
  display: block;
}
@media (min-width: 1024px) {
  .cw-np-doc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}

/* Desktop rail — hidden below 1024px (the mobile jump bar takes over). */
.cw-np-rail {
  display: none;
}
@media (min-width: 1024px) {
  .cw-np-rail {
    display: block;
    position: sticky;
    top: calc(var(--cw-header-height) + 1.5rem);
    max-height: calc(100vh - var(--cw-header-height) - 3rem);
    overflow-y: auto;
    padding-left: 1.2rem;
    border-left: 1px solid var(--cw-border-soft);
  }
}
.cw-np-rail__head {
  margin: 0 0 0.9rem;
  font-family: var(--cw-font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
.cw-np-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cw-np-rail__link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-left: -1.25rem;
  padding: 0.42rem 0 0.42rem 1.05rem;
  border-left: 2px solid transparent;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--cw-text-muted);
  text-decoration: none;
  transition: color var(--cw-dur-fast) var(--cw-ease),
    border-color var(--cw-dur-fast) var(--cw-ease);
}
.cw-np-rail__link:hover {
  color: var(--cw-navy-deep);
  text-decoration: none;
}
.cw-np-rail__link[aria-current="true"] {
  color: var(--cw-navy-deep);
  font-weight: 600;
  border-left-color: var(--cw-gold);
}
.cw-np-rail__numeral {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cw-gold-deep);
}
.cw-np-rail__link[aria-current="true"] .cw-np-rail__numeral {
  color: var(--cw-gold);
}
.cw-np-rail__name {
  font-family: var(--cw-font-sans);
}

/* Mobile: sticky condensed horizontal jump bar (scrollable Roman-numeral
   pills), replaces the rail below 1024px. */
.cw-np-jumpbar {
  position: sticky;
  top: var(--cw-header-height);
  z-index: 5;
  margin: 0 calc(var(--cw-gutter) * -1) 1.5rem;
  padding: 0.6rem var(--cw-gutter);
  background: var(--cw-white);
  border-bottom: 1px solid var(--cw-border-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .cw-np-jumpbar {
    display: none;
  }
}
.cw-np-jumpbar ul {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}
.cw-np-jumpbar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cw-navy);
  text-decoration: none;
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    background var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
.cw-np-jumpbar__pill:hover,
.cw-np-jumpbar__pill:focus-visible {
  border-color: var(--cw-gold);
  color: var(--cw-gold-deep);
  text-decoration: none;
}
.cw-np-jumpbar__pill[aria-current="true"] {
  background: var(--cw-gold);
  border-color: var(--cw-gold);
  color: var(--cw-navy-deep);
  font-weight: 600;
}

.cw-np-doc__main {
  min-width: 0;
  max-width: 720px;
}

/* "Open all specifications" control. The checkbox + label are a no-JS-safe
   affordance (a real, focusable, labelled control that degrades to "does
   nothing but isn't broken" with JS off — every <details> is still
   independently openable by hand). pillars.js progressively enhances the
   label click to open/close every .cw-np-pillar__full at once; the checked
   state stays in sync with the actual details state either way. */
.cw-np-openall {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.cw-np-openall__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cw-gold-border);
  border-radius: 999px;
  font-family: var(--cw-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cw-gold-deep);
  cursor: pointer;
  transition: background var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
.cw-np-openall__label:hover {
  background: rgba(200, 162, 74, 0.08);
}
.cw-np-openall__label::before {
  content: "\2795"; /* heavy plus sign — flips to a minus when checked */
  font-size: 0.65em;
}
#cw-np-openall-toggle:checked + .cw-np-openall__label::before {
  content: "\2796";
}
#cw-np-openall-toggle:focus-visible + .cw-np-openall__label {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   4 — PILLAR SECTIONS: compact header row (numeral + icon + name inline,
   NOT the old 28%/72% offset grid) + full-width body. Target: each
   section reads at roughly half the previous build's height before its
   <details> is opened. Alternating zone tint preserved.
------------------------------------------------------------- */
.cw-np-pillar {
  scroll-margin-top: calc(var(--cw-header-height) + 24px);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--cw-border-soft);
}
.cw-np-pillar:first-child {
  border-top: 0;
  padding-top: 0;
}
.cw-np-pillar--tint {
  /* Bleed exactly to the container gutter — a fixed negative clamp can
     exceed --cw-gutter at narrow viewports (24px vs 20px) and protrude
     4px past the viewport. */
  margin-inline: calc(min(var(--cw-gutter), 2rem) * -1);
  padding-inline: min(var(--cw-gutter), 2rem);
  background: var(--cw-surface-zone);
  border-radius: var(--cw-radius-md);
  border-top-color: transparent;
}
.cw-np-pillar--tint + .cw-np-pillar {
  border-top-color: transparent;
}

/* Compact header row: numeral, icon, eyebrow+name — all inline, one line
   tall on desktop, wraps gracefully on mobile. Replaces the old oversized
   28%-column numeral block. */
.cw-np-pillar__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.cw-np-pillar__numeral {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--cw-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cw-gold);
}
.cw-np-pillar__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--cw-navy);
}
.cw-np-pillar__heading {
  min-width: 0;
}
.cw-np-pillar__eyebrow {
  color: var(--cw-gold-deep);
  margin-bottom: 0.2rem;
}
.cw-np-pillar__name {
  margin: 0;
  font-size: var(--cw-fs-h4);
  line-height: var(--cw-lh-heading);
  letter-spacing: -0.02em;
  color: var(--cw-heading);
}

/* Body: purpose prose + domains, full width now (no right-column split),
   single reading measure, left-aligned. */
.cw-np-pillar__body {
  min-width: 0;
  max-width: 62ch;
  margin-top: 1rem;
  text-align: left;
}
.cw-np-pillar__purpose {
  margin: 0;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-reading);
  color: var(--cw-text);
  text-align: left;
}
.cw-np-pillar__domains {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--cw-border-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cw-text-muted);
}
.cw-np-pillar__domains-label {
  margin-right: 0.5rem;
  font-family: var(--cw-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}

/* <details> "Full specification" disclosure — gold marker/summary. */
.cw-np-pillar__full {
  margin-top: 1.25rem;
  border-top: 1px solid var(--cw-border-soft);
}
.cw-np-pillar__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  font-family: var(--cw-font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cw-gold-deep);
  cursor: pointer;
  list-style: none;
}
.cw-np-pillar__summary::-webkit-details-marker {
  display: none;
}
.cw-np-pillar__summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--cw-gold-deep);
  border-bottom: 2px solid var(--cw-gold-deep);
  transform: rotate(-45deg);
  transition: transform var(--cw-dur-fast) var(--cw-ease);
}
.cw-np-pillar__full[open] > .cw-np-pillar__summary::before {
  transform: rotate(45deg);
}
.cw-np-pillar__summary:hover,
.cw-np-pillar__summary:focus-visible {
  color: var(--cw-gold);
}
.cw-np-pillar__summary:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}
.cw-np-pillar__full .cw-spec {
  padding-bottom: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .cw-np-pillar__summary::before {
    transition: none;
  }
}

/* Print: every <details> renders open regardless of its [open] attribute. */
@media print {
  .cw-np-pillar__full > *:not(.cw-np-pillar__summary) {
    display: block !important;
  }
  .cw-np-rail,
  .cw-np-jumpbar,
  .cw-np-openall {
    display: none !important;
  }
}

.cw-np-pillar__cta {
  margin-top: 1.5rem;
}
.cw-np-pillar__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 1.4rem;
}

/* Alias jump-targets (short/old/satellite anchors) — zero-size, header-safe. */
.cw-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--cw-header-height) + 24px);
}

/* -------------------------------------------------------------
   4 — Rhythm-break pull-quotes after Pillars 3 and 6 (real lines from
   cw_get_books() epigraphs). Scoped override: the SITE-WIDE .cw-pullquote
   in pages.css is the dark/on-navy variant (cream text) built for /2055 —
   cw-pages loads on every page, so on this white-band page the bare class
   would render near-invisible text. .cw-np-rhythm-quote re-styles it for
   the light reading column, matching the italic-serif/gold-left-rule
   family (about.css's "Thesis pull-quote" shape) without touching about.css.
------------------------------------------------------------- */
.cw-np-rhythm-quote.cw-pullquote {
  max-width: 640px;
  margin: clamp(2.25rem, 4.5vw, 3rem) auto;
  padding: 0 0 0 clamp(1.25rem, 3vw, 1.75rem);
  border-left: 3px solid var(--cw-gold);
  border-top: 0;
  border-bottom: 0;
  text-align: left;
  background: transparent;
}
.cw-np-rhythm-quote p {
  margin: 0;
  font-family: var(--cw-font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cw-heading);
}
.cw-np-rhythm-quote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--cw-font-sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
/* The rhythm-quote sits between two pillar sections inside .cw-np-doc__main
   (which already supplies the reading measure) — no extra container needed. */
.cw-np-doc__main > .cw-np-rhythm-quote {
  margin-inline: 0;
}

/* =============================================================
   Per-pillar spec sheet (definition list) + AURA feature grid — feeds the
   <details> "Full specification" disclosure above. Unchanged from the
   prior build; still the only place this markup renders.
============================================================= */
.cw-spec {
  margin: 1.25rem 0 0;
}
.cw-spec__row {
  display: grid;
  gap: 0.3rem 1.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--cw-border-soft);
}
.cw-spec__row:first-child {
  border-top: 0;
}
@media (min-width: 560px) {
  .cw-spec__row {
    grid-template-columns: minmax(9rem, 12rem) 1fr;
  }
}
.cw-spec__term {
  margin: 0;
  font-family: var(--cw-font-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cw-gold-deep);
}
.cw-spec__def {
  margin: 0;
  color: var(--cw-text);
  line-height: 1.7;
}
.cw-spec__list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 0.4rem;
}
.cw-spec__list li::marker {
  color: var(--cw-gold-deep);
}
.cw-spec__deps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.cw-spec__deps li {
  padding-left: 1rem;
  border-left: 2px solid var(--cw-gold-border);
  line-height: 1.55;
}

/* ---- AURA 24-feature grid ---- */
.cw-aura-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem 1.25rem;
}
@media (min-width: 480px) {
  .cw-aura-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .cw-aura-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.cw-aura-grid li {
  font-size: 0.92rem;
  color: var(--cw-text);
}
.cw-aura-grid__code {
  display: inline-block;
  min-width: 2.6em;
  margin-right: 0.5rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--cw-gold-deep);
}

/* -------------------------------------------------------------
   6 — REINFORCE/WHY: 2-col fail-mode checklist with gold markers
   (replaces the old floating border-left <ul> with anchored, list-marked
   items — plan §7 pt.6, "kill the floating-list look").
------------------------------------------------------------- */
.cw-np-checklist {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 2.5rem;
}
@media (min-width: 680px) {
  .cw-np-checklist {
    grid-template-columns: 1fr 1fr;
  }
}
.cw-np-checklist li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.6rem;
  font-size: var(--cw-fs-body-lg);
  line-height: var(--cw-lh-body);
  color: var(--cw-text);
  border-bottom: 1px solid var(--cw-border-soft);
}
.cw-np-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cw-gold);
}
.cw-np-checklist__coda {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* -------------------------------------------------------------
   7 — CLOSING CTA: ghost "Contact & partnerships" link under cta-band.php
   (cta-band.php only renders one button; this small wrapper adds the
   second, lighter action without modifying the shared partial).
------------------------------------------------------------- */
.cw-np-closing__ghost {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0;
}