/* Lead gate for the decision-report format.

   The report stays in the DOM so it is crawlable; the gate hides it and takes
   it out of the tab order until the form is completed. The hero above the gate
   is the free preview and is never touched.

   gate.css serves the older single-field `research` format and is not loaded
   here — this sheet deliberately carries no shadow, radius or gradient. */

/* [hidden] comes from the user-agent sheet, so any author `display` on the
   same element would beat it. Both wrappers state the rule themselves. */
[data-lead-gate-body][hidden] { display: none; }
[data-lead-gate][hidden] { display: none; }

.decision-report .lead-gate {
  padding-bottom: var(--section-y);
  /* The nav is fixed: anything that scrolls the card into view has to clear it. */
  scroll-margin-top: calc(var(--nav-h) + var(--space-7));
}

/* A form panel, not a reading column: narrow, so no field runs to prose width. */
.decision-report .lead-gate__card {
  max-width: var(--measure-narrow);
  padding: clamp(28px, 3.2vw, 44px);
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.decision-report .lead-gate__eyebrow {
  color: var(--cobalt);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.decision-report .lead-gate__title {
  max-width: 24ch;
  margin-top: var(--space-4);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
}

.decision-report .lead-gate__intro {
  max-width: 54ch;
  margin-top: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
}

.decision-report .lead-gate__noscript {
  margin-top: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.6;
}

.decision-report .lead-gate__form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.decision-report .lead-gate__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.decision-report .lead-gate__field { display: grid; }

.decision-report .lead-gate__field label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.decision-report .lead-gate__field label small {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.decision-report .lead-gate__field input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  /* --paper-soft, not --white: the field is a surface, so it follows the page
     plane rather than staying a hole cut in it under --ink. */
  background: var(--paper-soft);
  /* The neutral grey the demo form already uses: var(--line) is too faint to
     read as a control edge against paper. */
  border: 1px solid #737979;
  border-radius: 0;
  font-family: var(--sans);
  /* 16px minimum or iOS Safari zooms the page on focus. */
  font-size: 16px;
  line-height: 1.4;
}

.decision-report .lead-gate__field input:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
  border-color: var(--cobalt);
}

.decision-report .lead-gate__field input[aria-invalid="true"] { border-color: #a92531; }
/* A red mixed for paper falls under the 3:1 a field's own boundary needs on the
   dark card, so nobody can tell which field was rejected. Same lifted red the
   demo gate uses, rather than a second one mixed for the same job. */
html.dark .decision-report .lead-gate__field input[aria-invalid="true"] { border-color: #e77871; }

/* Present to a bot reading the markup, absent from the page and the tab order. */
.decision-report .lead-gate__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.decision-report .lead-gate__status {
  margin-top: calc(var(--space-2) * -1);
  color: #9d1e2a;
  font-size: var(--text-base);
  line-height: 1.4;
}

/* This line is the only thing that says the address was rejected, and the paper
   red does not survive the dark card. */
html.dark .decision-report .lead-gate__status { color: #e77871; }

.decision-report .lead-gate__status[hidden] { display: none; }

.decision-report .lead-gate__submit {
  justify-self: start;
  font-family: var(--sans);
  cursor: pointer;
}

.decision-report .lead-gate__submit:disabled { opacity: 0.7; cursor: default; }

.decision-report .lead-gate__fineprint {
  max-width: 48ch;
  margin-top: calc(var(--space-2) * -1);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The unlock moves focus to the first heading in the body and scrolls to it.
   The report's own scroll-margin rule covers sections and figures, not
   headings, so the target states its own or it lands under the fixed nav. */
.decision-report [data-lead-gate-focus] { scroll-margin-top: calc(var(--nav-h) + var(--space-7)); }

@media (max-width: 720px) {
  .decision-report .lead-gate__row { grid-template-columns: 1fr; }
  .decision-report .lead-gate__submit { justify-self: stretch; }
}