/* ==========================================================================
   The prose pages — /about/, /methodology/, /privacy/, /terms/, /contact/
   and 404.html
   ==========================================================================

   Loaded after css/styles.css, and short for the same reason css/entity.css
   is short: these pages already inherit the type scale, both themes, the
   header, the footer and the footer nav from the design system. What is left
   is the one thing the site has never needed before — a column of running
   text long enough that line length and vertical rhythm start to matter.

   Deliberately a third stylesheet rather than more rules in entity.css. That
   file's own header says it holds what a *per-entity* page needs; a set of
   policy pages is a different surface with a different shape, and folding
   them together would leave 426 entity pages downloading rules for prose
   they never render. */

/* The reading column. 38rem is narrower than the entity pages' 46rem on
  purpose: those carry a stat grid and a peer row that want the width, and
  these carry paragraphs, which stop being comfortable around 70 characters. */
.prose {
  max-width: 38rem;
  padding-block: var(--space-6) var(--space-8);
}

.prose-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: var(--leading-tight);
}

/* The one-sentence answer to "what is this page", set apart from the body so
  a scanning reader gets it without entering the prose. CLAUDE.md's clarity
  test again: people scan rather than read. */
.prose-lede {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: var(--leading-tight);
}

.prose h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: 650;
}

.prose p,
.prose li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.prose p {
  margin-block: var(--space-3);
}

.prose ul,
.prose ol {
  margin-block: var(--space-3);
  padding-left: var(--space-5);
}

.prose li {
  margin-block: var(--space-2);
}

.prose a {
  color: var(--color-accent);
  font-weight: 600;
}

.prose code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* A definition run — "—", "Undisclosed", "$0" and what each one means. A
  description list rather than a table: there are two columns of meaning, not
  a grid of values, and a table would wrap badly on a phone. */
.prose dl {
  margin-block: var(--space-4);
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
}

.prose dt {
  font-weight: 650;
  font-size: var(--text-base);
}

.prose dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .prose dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .prose dd {
    margin-bottom: var(--space-3);
  }
}

/* A fact only Jae has, not yet supplied. Loud on purpose and in both themes:
  these pages are drafted before the site is deployed, and a placeholder that
  blended into the paragraph is exactly how one reaches a live page. The
  amber is not a design-system token because nothing else in the site is
  meant to look like this, and it should stop looking like anything at all
  the moment the last blank is filled — at which point no page emits one. */
mark.pending {
  background-color: #fde9b5;
  color: #6b4a05;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
}

:root[data-theme="dark"] mark.pending {
  background-color: #4a3a10;
  color: #f6dfa4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.pending {
    background-color: #4a3a10;
    color: #f6dfa4;
  }
}

/* The 404. Centred rather than a reading column, because there is nothing to
  read — only a wrong turn to undo. */
.notfound {
  max-width: 34rem;
  padding-block: var(--space-8);
  text-align: center;
}

.notfound-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.notfound-links {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

/* Accent rather than the inherited body colour: on a page whose only purpose
  is to send the reader somewhere else, the four ways out are the content. */
.notfound-links a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.notfound-links a:hover {
  text-decoration: underline;
}

/* ---- The shortlist report intake (id 5, work order §2.3) --------------- */
/* One column, labels above fields — the same reading-column width as the
  rest of `.prose`, so the form does not suddenly argue for more space than
  a paragraph does. */
.shortlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.shortlist-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shortlist-field label {
  font-size: var(--text-sm);
  font-weight: 650;
}

.shortlist-field .shortlist-hint {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-faint);
}

.shortlist-field input,
.shortlist-field select,
.shortlist-field textarea {
  width: 100%;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--color-border-strong);
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
}

.shortlist-field textarea {
  resize: vertical;
  min-height: 5rem;
}

.shortlist-field input:focus,
.shortlist-field select:focus,
.shortlist-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.shortlist-field input::placeholder,
.shortlist-field textarea::placeholder {
  color: var(--color-text-faint);
}

/* Matches the capsule header's outlined buttons (id 69) — `currentColor` so
  it inverts on the dark theme with no second rule, same reasoning as
  `site-nav__link`. */
.shortlist-submit {
  align-self: flex-start;
  margin-top: var(--space-2);
  height: 44px;
  padding-inline: 24px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.shortlist-submit:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* The honeypot. Off-screen rather than `display:none` — a basic scraping
  bot that checks for that property specifically still fills this in, an
  off-screen absolute position is cheaper to fool nobody with and harder to
  detect as a trap. `aria-hidden` plus `tabindex="-1"` (set in the markup)
  keep it out of the accessibility tree and the tab order entirely, unlike
  `.visually-hidden` elsewhere on the site, which is for content a screen
  reader SHOULD announce — this is content nobody should ever reach. */
.shortlist-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.shortlist-status {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.shortlist-status[hidden] {
  display: none;
}

.shortlist-status--sent {
  border-color: var(--color-accent);
}

/* /agents/ (id 625): one row per AI agent, the company beside it. Rules
  between rows rather than bullets — a row is three lines, and a bullet
  beside the first of them reads as a list of names. */
.prose .agent-list {
  list-style: none;
  padding-left: 0;
}

.prose .agent-list li {
  margin: 0;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.agent-list__co {
  color: var(--color-text-muted);
}

.prose .agent-list__desc {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.prose .agent-list__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* id 637, 2026-09-24: `--text-base` is 15px, and iOS Safari zooms the whole
   page on focus for any field under 16px — measured on all six shortlist
   fields. Controls only, not the surrounding label/hint text, and scoped to
   the phone breakpoint (breakpoints.js is the one home for this query; see
   that file before changing either number here). */
@media (max-width: 900px) and (pointer: coarse), (max-width: 480px) {
  .shortlist-field input,
  .shortlist-field select,
  .shortlist-field textarea {
    font-size: max(16px, var(--text-base));
  }
}