/* ============================================================
   Simulacra resources — customer guidance and data preparation
   ============================================================ */

/* Help-doc register: hero italics carry the brand name only, without the
   marketing gradient fill. Keep the Fraunces optical-size compensation. */
body[data-page="resources"] .flagship-hero h1 em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
}

/* Article pages carry a reading-scale type ramp: the marketing display
   sizes make every section heading compete with the H1. Mirrors the
   validation-detail demotion in site.css. */
body[data-page-shape="resource-article"] .flagship-hero h1 {
  font-size: clamp(36px, 4.2vw, 60px);
}

body[data-page-shape="resource-article"] .section-head > h2.display-2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.resource-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  background:
    radial-gradient(circle at 100% 0, rgba(92, 61, 255, 0.13), transparent 42%),
    var(--ink-800);
  color: var(--text-1);
  transition: transform 180ms, border-color 180ms;
}

.resource-card:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 224, 224, 0.42);
}

.resource-card__tag {
  margin-bottom: 30px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.resource-card h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
}

.resource-card p {
  max-width: 52ch;
  color: var(--text-2);
}

.resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  color: var(--text-1);
  font-weight: 650;
}

/* Sticky pill nav sits flush under the fixed header. resources.js measures
   the header and sets --resources-header-h; 68px is the no-JS fallback. */
.prep-section-nav {
  position: sticky;
  inset-block-start: var(--resources-header-h, 68px);
  z-index: 20;
  padding-block: 12px;
  border-block: 1px solid var(--line-1);
  background: rgba(7, 9, 15, 0.92);
  backdrop-filter: blur(12px);
}

.prep-section-nav__inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Auto margins center the pill row when it fits and degrade to normal
   scroll alignment when it overflows (justify-content: center would clip
   the left edge of an overflowing row). */
.prep-section-nav__inner > a:first-child { margin-inline-start: auto; }
.prep-section-nav__inner > a:last-child { margin-inline-end: auto; }

.prep-section-nav a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--text-1);
  font-size: 15px;
}

.prep-section-nav a:hover {
  border-color: var(--line-3);
}

.prep-section-nav a.is-active {
  border-color: rgba(78, 224, 224, 0.5);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Anchor jumps land below the fixed header plus the sticky pill nav;
   both heights are measured by resources.js. */
#shape, #missing, #mode, #structures, #schema, #checklist {
  scroll-margin-block-start: calc(var(--resources-header-h, 68px) + var(--resources-nav-h, 62px) + 8px);
}

.prep-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}

.prep-example {
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background: var(--ink-800);
}

.prep-example__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--line-1);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.prep-example__head--good { color: var(--good); }
.prep-example__head--bad { color: var(--guard); }

.prep-table-wrap {
  overflow-x: auto;
}

.prep-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.prep-table th,
.prep-table td {
  padding: 11px 14px;
  border-block-end: 1px solid var(--line-1);
  text-align: start;
}

.prep-table th {
  color: var(--text-3);
  font-weight: 500;
}

.prep-table td {
  color: var(--text-2);
}

.prep-table tr:last-child td { border-block-end: 0; }
.prep-table .is-missing { color: var(--brand-1); }
.prep-table .is-modeled { color: var(--accent); }
.prep-table .is-drop { color: var(--guard); text-decoration: line-through; }

/* Plain-language annotation column beside mono data columns. */
.prep-table .is-note {
  min-width: 230px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 14px;
  white-space: normal;
}

.section--paper .prep-example {
  border-color: var(--paper-200);
  background: white;
}

.section--paper .prep-example__head,
.section--paper .prep-table th,
.section--paper .prep-table td {
  border-color: var(--paper-200);
}

.section--paper .prep-example__head,
.section--paper .prep-table td {
  color: var(--paper-ink-2);
}

.section--paper .prep-table th { color: rgba(21, 23, 31, 0.55); }

/* Paper-safe semantic colors: the dark-surface --good/--guard tints wash
   out on cream, so the ✓/× captions get darkened equivalents. */
.section--paper .prep-example__head--good { color: #1E7A50; }
.section--paper .prep-example__head--bad { color: #B3372D; }

/* Good/bad example figures carry their verdict on the border too. */
.prep-example--good { border-color: rgba(107, 230, 166, 0.4); }
.prep-example--bad { border-color: rgba(255, 92, 92, 0.4); }

.section--paper .prep-example--good { border-color: rgba(30, 122, 80, 0.5); }
.section--paper .prep-example--bad { border-color: rgba(179, 55, 45, 0.5); }

.prep-decision {
  overflow: hidden;
  margin-top: 28px;
  border: 1px solid var(--paper-200);
  border-radius: var(--r-3);
  background: white;
}

.prep-decision__row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  border-block-end: 1px solid var(--paper-200);
}

.prep-decision__row:last-child { border-block-end: 0; }

.prep-decision__cell {
  padding: 18px 20px;
  color: var(--paper-ink-2);
}

.prep-decision__cell + .prep-decision__cell {
  border-inline-start: 1px solid var(--paper-200);
  color: var(--paper-ink);
  font-weight: 650;
}

.prep-decision__row--head .prep-decision__cell {
  padding-block: 12px;
  color: rgba(21, 23, 31, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mode-comparison variant: three equal columns. */
.prep-decision--modes .prep-decision__row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Spans the width of the table it annotates. */
.prep-note {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 14px;
}

/* The routed-pair example is a .prep-example figure in a dark section;
   its own margin separates it from the decision table above. */
#missing .prep-example { margin-top: 28px; }

/* The mode comparison table reuses .prep-decision styling in the dark
   #mode section, where the white card reads as the contract statement. */
#mode .prep-decision { margin-top: 30px; }

.prep-callout {
  margin-top: 22px;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--accent);
  background: rgba(92, 61, 255, 0.08);
  color: var(--text-2);
}

.section--paper .prep-callout {
  background: rgba(92, 61, 255, 0.06);
  color: var(--paper-ink-2);
}

.section--paper .prep-callout strong { color: var(--paper-ink); }

/* Paired callouts sit side by side instead of stacking. */
.prep-callout-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.prep-callout-row .prep-callout { margin-top: 0; }

.prep-structure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.prep-structure-card {
  padding: 26px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background: var(--ink-800);
}

.prep-structure-card h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.prep-structure-card p,
.prep-structure-card li {
  color: var(--text-2);
}

.prep-structure-card ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-inline-start: 20px;
}

.section--paper .prep-structure-card {
  border-color: var(--paper-200);
  background: white;
}

.section--paper .prep-structure-card p,
.section--paper .prep-structure-card li {
  color: var(--paper-ink-2);
}

.prep-collapse {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.prep-collapse .prep-table-wrap {
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid var(--paper-200);
  border-radius: var(--r-2);
}

.prep-collapse .prep-table th,
.prep-collapse .prep-table td {
  padding: 8px 12px;
}

.prep-collapse__arrow {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}

/* De-boxed two-column lists for the fitted-schema section (paper). */
.prep-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: 34px;
}

.prep-col h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.prep-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
  color: var(--paper-ink-2);
}

.prep-schema-flow {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items: stretch;
  gap: 12px;
  margin-top: 30px;
}

.prep-schema-step {
  padding: 24px;
  border: 1px solid var(--paper-200);
  border-radius: var(--r-3);
  background: white;
}

.prep-schema-step__num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}

.prep-schema-step h3 {
  margin: 10px 0 8px;
  color: var(--paper-ink);
  font-size: 20px;
}

.prep-schema-step p {
  color: var(--paper-ink-2);
}

.prep-schema-arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 24px;
}

.prep-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  counter-reset: prep-check;
}

.prep-check {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background: var(--ink-800);
  color: var(--text-2);
  counter-increment: prep-check;
}

.prep-check::before {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(78, 224, 224, 0.35);
  border-radius: 50%;
  color: var(--accent);
  content: counter(prep-check);
  font-family: var(--font-mono);
  font-size: 12px;
}

.prep-print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--text-2);
  font-size: 14px;
}

/* Help-page next-step block; a contained panel (echoing .resource-card)
   rather than a marketing band, with enough mass to close the page. */
.prep-next {
  padding-block: clamp(40px, 7vh, 72px);
}

.prep-next__panel {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  background:
    radial-gradient(circle at 100% 0, rgba(92, 61, 255, 0.12), transparent 45%),
    var(--ink-800);
}

.prep-next h2 {
  margin-block: 12px 12px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
}

.prep-next p {
  max-width: 62ch;
  color: var(--text-2);
  font-size: 17px;
}

.prep-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .resource-grid,
  .prep-example-grid,
  .prep-structure-grid,
  .prep-callout-row,
  .prep-checklist {
    grid-template-columns: 1fr;
  }

  .prep-decision__row,
  .prep-schema-flow,
  .prep-cols {
    grid-template-columns: 1fr;
  }

  .prep-decision__cell + .prep-decision__cell {
    border-block-start: 1px solid var(--paper-200);
    border-inline-start: 0;
  }

  .prep-schema-arrow {
    transform: rotate(90deg);
  }
}

/* Print = the checklist alone, as promised in the on-page note. */
@media print {
  .site-header,
  .site-footer,
  .prep-section-nav,
  .cta-band,
  .prep-next,
  .prep-print,
  .flagship-hero,
  .section:not(#checklist) {
    display: none !important;
  }

  html,
  body {
    background: white !important;
    color: #15171f !important;
    visibility: visible !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .section {
    padding-block: 24px !important;
  }

  .section-head .eyebrow { color: rgba(21, 23, 31, 0.55) !important; }

  .section-head h2,
  .section-head .lede {
    color: #15171f !important;
    -webkit-text-fill-color: #15171f !important;
  }

  .prep-checklist {
    grid-template-columns: 1fr 1fr;
  }

  .prep-check {
    break-inside: avoid;
    border-color: #d8d9df;
    background: white;
    color: #15171f;
  }

  .prep-check::before {
    border-color: #b9bcc6;
    color: #15171f;
  }
}