/*
  /verify-advisor's own layout.

  `base.css` supplies the design tokens, the font stack and a hard reset —
  `h1,h2,h3,p,ul { margin: 0 }` and `ul { padding: 0; list-style: none }`. The
  landing page can rely on that because every one of its sections is positioned
  by `sections.css`. This page is not one of those sections, so with base.css
  alone it rendered as an unspaced wall of text with unmarked list items.

  Loading `sections.css` instead would drag in 858 lines of grid and hero rules
  written for a specific page's structure. A page needs its own spacing; it does
  not need another page's layout.
*/

/* ---- Rhythm --------------------------------------------------------------
   The reset removed every margin, so vertical spacing has to be restated. Set
   on the flow rather than per element: a heading's space belongs to what
   follows it, and `* + *` keeps a single rule from stacking at a section edge. */
/* The page owns its own rhythm rather than borrowing `.fold`, whose
   padding-block stacked on top of these margins and paid for every gap twice. */
.va-section--lead { padding-block-start: 48px; }
.va-section:last-of-type { padding-block-end: 64px; }
.va-section > * + * { margin-block-start: 20px; }
.va-section + .va-section { margin-block-start: 56px; }

.va-section h2 { margin-block-end: 4px; }
.va-section h3 { margin-block-start: 28px; }

/* Paragraphs sit closer to the heading they belong to than to each other. */
.prose + .prose { margin-block-start: 14px; }

/* ---- Lists ---------------------------------------------------------------
   `list-style: none` is right for a nav rail and wrong for prose: these are
   genuinely enumerated warnings, and without a marker they read as one
   paragraph broken at odd points, which is what the page was doing. */
ul.prose {
  list-style: disc;
  padding-inline-start: 22px;
}

ul.prose li + li { margin-block-start: 10px; }
ul.prose::marker { color: var(--gold); }

/* ---- The lookup ---------------------------------------------------------- */
.check {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-block: 24px 10px;
}

.check__input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  /* `--text`, not `--ink-raised`. The ink tokens are SURFACES: `--ink-raised` is
     #0d0e12, so using it here painted near-black type onto a near-black field
     and the query was invisible as it was typed. */
  color: var(--text);
  background: var(--ink-inset);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

.check__input::placeholder { color: var(--text-3); }
.check__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- The verdict --------------------------------------------------------- */
.verdict {
  margin-block: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}

.verdict[hidden] { display: none; }
.verdict > * + * { margin-block-start: 12px; }
.verdict__head { font-weight: 700; }

/* Tone carries the outcome, but never alone: the heading states it in words,
   because colour is not readable to everyone and does not survive a screenshot
   pasted into a support thread. */
.verdict--green { border-color: #2e7d52; }
.verdict--amber { border-color: #8a6d1f; }
.verdict--red { border-color: #8a2f2f; }

/* ---- Facts table --------------------------------------------------------- */
.va-ledger { margin-block-start: 20px; }

.va-ledger .row {
  display: grid;
  grid-template-columns: minmax(88px, 140px) 1fr;
  gap: 16px;
  padding-block: 12px;
  border-block-start: 1px solid var(--line);
}

.va-ledger .row__key { color: var(--text-3); }

@media (max-width: 599px) {
  .va-ledger .row { grid-template-columns: 1fr; gap: 4px; }
  .va-section + .va-section { margin-block-start: 40px; }
}