@import url("./form.css");
/* The email gate, and the field guide it unlocks (screen and print). */
.result > .gate { background: var(--paper); }
.gate:not(.gate--open) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--head-gap) clamp(32px, 6vw, 96px); align-items: center; }
.gate h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.gate__pitch > p { margin-top: 16px; font-size: 1.12rem; color: var(--ink-3); max-width: 50ch; }
.gate__list { margin-top: 24px; display: grid; gap: 12px; }
.gate__list li { position: relative; padding-left: 24px; font-size: 1.05rem; }
.gate__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--crimson); }
.gate__card { background: var(--marble); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--crimson); padding: clamp(24px, 3vw, 36px); }
.gate__form { display: grid; gap: 20px; }
.gate__consent { display: flex; align-items: start; gap: 12px; font: 500 0.95rem var(--font-label); }
.gate__consent input { width: 20px; height: 20px; flex: none; accent-color: var(--crimson); }
.gate__actions { display: grid; gap: 10px; }
.gate__actions a { width: fit-content; font: 500 0.9rem var(--font-label); color: var(--ink-3); }
@media (max-width: 860px) { .gate:not(.gate--open) { grid-template-columns: minmax(0, 1fr); } }

.gate__preview { margin-top: 32px; border: 1.5px solid var(--ink); background: var(--marble); padding: 20px; }
.gate__preview .phase { padding-inline: 0; background: transparent; }
.gate__preview [data-locked] { border-top: 1px dashed var(--ink-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.gate__preview [data-locked] .phase__title { margin: 0; }
.gate__locked-note { font: 500 0.95rem/1.5 var(--font-label); color: var(--ink-3); }
.gate__success { max-width: 860px; padding-bottom: 32px; }
.gate__success p { margin-top: 16px; max-width: 55ch; }
.guide__next { margin-top: 32px; padding: 24px; border-left: 4px solid var(--crimson); background: var(--paper); }
.guide__next p { margin-top: 12px; }
.guide__next .disclosure { font-size: 0.9rem; }

/* ── Guide document ──────────────────────────────────── */
.guide {
  max-width: 860px !important;
  background: var(--marble);
  border: 1px solid var(--stone-1);
  box-shadow: var(--shadow-soft), 10px 10px 0 var(--paper-3);
  padding: clamp(28px, 6vw, 72px);
  animation: rise 0.8s var(--ease) both;
}
.guide__cover { padding-bottom: 36px; border-bottom: 1.5px solid var(--ink); }
/* The cover's running head (print.js, no numeral) stands over the page rule, as the book page's does. */
.guide__cover > :first-child { padding-bottom: 12px; border-bottom: 1px solid currentColor; }
.guide__title { margin-top: 28px; font-size: clamp(2.6rem, 6vw, 4.4rem); outline: none; }
.guide__sub { margin-top: 10px; font-size: 1.25rem; font-style: italic; color: var(--ink-2); }
.guide__book { margin-top: 10px; font: 400 0.87rem var(--font-label); color: var(--ink-4); }
.guide__for { margin-top: 16px; font: 400 0.87rem var(--font-label); color: var(--ink-4); letter-spacing: 0.04em; }
.guide__actions { margin-top: 28px; }
/* Each section opens on its running head (print.js, R14h): the Anton numeral and the title over an ink
   rule, as /story's printed pages open. The head's rule divides the sections, so they carry no rule. */
.guide__sec { padding-top: 44px; break-inside: avoid-page; }
.guide__sec > h3 { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid currentColor; font-size: 0.95rem; }
.guide__sec > p + p { margin-top: 12px; }
.guide__sec .meters { margin-top: 28px; }
/* The claim warning is the result's ruled note (result.css .gap), a crimson rule with no box. */
.guide__warn { margin-top: 18px !important; }
.guide__note { font-style: italic; color: var(--ink-3); }
.guide__done { margin-top: 24px; padding: 16px; border: 1.5px dashed var(--ink); }
.guide__done strong { font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.guide__flags { display: grid; gap: 18px; }
.guide__flags strong { font-family: var(--font-label); font-weight: 600; font-size: 0.86rem; }
/* Rule citations are footnotes: the ruled evidence note (print.js NOTE) under the flag or quoted rule. */
.guide__cite { margin-top: 8px; padding-top: 6px; font: 500 0.8rem/1.5 var(--font-label); letter-spacing: 0.02em; }
.guide__rule { margin-top: 14px; }
.guide__foot .disclosure { margin-top: 10px; }
.guide__foot { padding-top: 28px; font: 400 0.85rem/1.7 var(--font-label); color: var(--ink-4); }

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.phase { padding: 18px; background: var(--paper); border-top: 3px solid var(--ink); }
.phase__days { font: 600 0.8rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.phase__title { margin-top: 6px; font: 500 1.15rem var(--font-label); letter-spacing: -0.02em; }
.phase ul { margin-top: 12px; display: grid; gap: 10px; }
.phase li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 0.98rem; line-height: 1.45; }
.box { width: 12px; height: 12px; border: 1.5px solid var(--ink); margin-top: 5px; }

.sheet { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.95rem; }
.sheet th, .sheet td { border: 1px solid var(--stone-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.sheet thead th { font: 600 0.78rem var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); }
.sheet tbody th { font: 500 0.94rem var(--font-label); white-space: nowrap; }
.sheet tbody td:empty { height: 40px; }
@media (max-width: 640px) { .sheet { display: block; overflow-x: auto; } }

/* ── Print: only the guide ───────────────────────────── */
@media print {
  @page { margin: 16mm; }
  body { background: #fff; }
  body::after, .site-nav, .site-foot, .no-print { display: none !important; }
  body * { visibility: hidden; }
  .guide, .guide * { visibility: visible; }
  .guide { position: absolute; inset: 0 0 auto 0; max-width: none !important; border: 0; box-shadow: none; padding: 0; animation: none; }
  .guide * { animation: none !important; }
  .guide__sec { break-inside: avoid; }
  .meter__fill, .phase { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}