/* carchat-site.css
   The one stylesheet for every carchat.io page, static and server-rendered alike. A page links
   this file and adds only what is its own. The page shell that links it is
   api/_lib/carchat-shell.js; the parts it styles are rendered by api/_lib/carchat-parts.js.

   The design language is fixed: warm paper and ink, Inter for display and text, JetBrains Mono
   for small uppercase labels, square corners, solid ink rules, no gradients, no soft shadows,
   both colour schemes. Each accent ink has one meaning on this site and colours a mark (a small
   square, a rule, a filled tag). Small text is always ink, so contrast holds in both schemes.

   The site's proposition is "Every price has a date." The parts that carry it are the price
   (.price), its stamp (.stamp) and the listing record (.rec). Read design/carchat/SYSTEM.md
   before changing anything here. */

/* ------------------------------------------------------------------ tokens */

/* A metric-matched fallback so the page does not shift when Inter arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* Ground and ink */
  --paper: #faf8f3;
  --ink: #1d1d1b;
  --ink-body: #2a2926;
  --ink-soft: #3c3a36;
  --hair: #8a8a8a;

  /* Colour: one meaning each, for the whole site.
     green    checked: read from the dealership's own listing inside the freshness window
     magenta  changed: a price that moved
     red      out of date or gone: a last-known price, a listing no longer found
     gold     sponsored: a position a dealership paid for
     cyan     the machine's reading: what an AI assistant gets for this page
     Yellow is not used on this site. */
  --checked: #0b7a3e;
  --changed: #e6007e;
  --stale: #c8401f;
  --paid: #ffc328;
  --machine: #009fe3;
  --on-fill: #1d1d1b;            /* text set on the gold fill, in both schemes */

  /* Type */
  --display: "Inter Display", "InterVariable", "Inter", "Inter Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text: "InterVariable", "Inter", "Inter Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-h1: clamp(2.75rem, 7vw, 6.5rem);          /* 44 to 104 px: the proposition, home only */
  --fs-h1-page: clamp(2.25rem, 4.6vw, 4.25rem);  /* 36 to 68 px: the title of every other page */
  --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem);       /* 28 to 44 px */
  --fs-h3: 1.1875rem;                            /* 19 px */
  --fs-lede: clamp(1.1875rem, 1.5vw, 1.375rem);  /* 19 to 22 px */
  --fs-body: 1.0625rem;                          /* 17 px */
  --fs-small: 0.9375rem;                         /* 15 px */
  --fs-label: 0.75rem;                           /* 12 px, mono, uppercase */
  --fs-num: clamp(2.75rem, 5.2vw, 4.5rem);       /* 44 to 72 px: a fact's number */
  --fs-price: clamp(1.75rem, 2.4vw, 2.125rem);   /* 28 to 34 px: a price on a card */
  --fs-price-page: clamp(3rem, 6vw, 5rem);       /* 48 to 80 px: the price on a vehicle page */

  /* Space: steps of 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Grid: twelve columns inside --max, one gutter value per width */
  --max: 1240px;
  --gutter: 20px;
  --gap: 24px;
  --measure: 38em;               /* the widest a paragraph runs */

  --rule: 1px solid var(--ink);
  --rule-hair: 1px solid var(--hair);
  --lift: 6px;                   /* the one hard offset shadow, on the page's one action */
}
@media (min-width: 760px) { :root { --gutter: 32px; } }
@media (min-width: 1180px) { :root { --gutter: 48px; --gap: 32px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141413;
    --ink: #faf8f3;
    --ink-body: #e9e6df;
    --ink-soft: #c9c5bc;
    --changed: #ff3d9e;
    --stale: #ff6a3d;
    --machine: #2bb3f0;
  }
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--text);
  font-size: var(--fs-body);
  font-weight: 420;
  line-height: 1.42;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, pre, table, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
strong, b { font-weight: 700; color: var(--ink); }
code, pre, kbd { font-family: var(--mono); font-size: 0.875em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1 {
  font-family: var(--display);
  font-size: var(--fs-h1-page);
  font-weight: 820;
  line-height: 0.94;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-shadow: 0 0 0.5px color-mix(in srgb, var(--ink) 55%, transparent);
  text-wrap: balance;
}
.k-home h1 { font-size: var(--fs-h1); letter-spacing: -0.045em; }
h2 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
h3 {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lede { font-size: var(--fs-lede); font-weight: 450; line-height: 1.32; letter-spacing: -0.008em; color: var(--ink); max-width: var(--measure); }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: var(--s4); }
.small { font-size: var(--fs-small); }
.soft { color: var(--ink-soft); }

/* Small uppercase mono: names an instrument, a date, a count. Also used on h2 when a section
   needs a name and not a headline. */
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: none;
}
.num {
  font-family: var(--display);
  font-weight: 860;
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

.skip { position: absolute; left: -9999px; top: 0; padding: var(--s3) var(--s4); background: var(--ink); color: var(--paper); z-index: 10; }
.skip:focus { left: var(--gutter); top: var(--s2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ layout */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* A band is one section of a page: one idea. Bands are separated by one ink rule. */
.band { padding-block: var(--s7); }
.band + .band { border-top: var(--rule); }
@media (min-width: 760px) { .band { padding-block: var(--s8); } }
.band > .wrap > h2 + * { margin-top: var(--s5); }
.cols { display: grid; gap: var(--gap); }
@media (min-width: 1180px) { .cols { grid-template-columns: repeat(12, minmax(0, 1fr)); } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } }

/* ------------------------------------------------------------------- shell */

.site { border-bottom: var(--rule); }
.site-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 60px; }
.wordmark {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 820;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s3);
}
.site-nav { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-small); font-weight: 600; }
.site-nav a { text-decoration: none; padding-block: var(--s3); white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 760px) { .site-nav { gap: var(--s6); } }
/* The way back to the chat (carchat-site.js) can add one more link. On a narrow screen the links
   then wrap onto a second line instead of pushing the page sideways; when they fit, nothing moves. */
.site-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }

.site-foot { border-top: var(--rule); padding-block: var(--s7) var(--s8); font-size: var(--fs-small); }
.site-foot .wrap { display: grid; gap: var(--s5); }
.foot-source { max-width: var(--measure); color: var(--ink); font-weight: 450; }
.foot-nav, .foot-machine { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; }
.foot-nav a { font-weight: 600; }
.foot-machine a { font-family: var(--mono); font-size: 0.8125rem; }
.foot-legal { color: var(--ink-soft); }

/* ----------------------------------------------------------------- the ask */

/* The ask box: the one control. A question in the shopper's own words, sent as ?q= to the page
   it sits on. Its effect is the result region directly under it. The hard offset shadow marks it
   as the page's one action; nothing else on a page may have that shadow. */
.ask { display: grid; gap: var(--s2); }
.ask-row { display: flex; border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--lift) var(--lift) 0 var(--ink); margin-right: var(--lift); }
.ask-row input[type="text"], .ask-row input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 60px; padding: 0 var(--s4);
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font-size: 1.1875rem; font-weight: 500; appearance: none;
}
.ask-row input::placeholder { color: var(--ink-soft); opacity: 1; }
.ask-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.ask-row button {
  flex: 0 0 auto; height: 60px; padding: 0 var(--s5); border: 0; border-left: 2px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); font-weight: 780; font-size: var(--fs-body); letter-spacing: -0.01em; cursor: pointer;
}
.ask-row button:hover, .ask-row button:focus-visible { background: var(--ink); color: var(--paper); }
.ask-row button:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }
.ask-row button[disabled] { cursor: progress; }
.ask-note { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s1); }
@media (max-width: 479px) {
  .ask-row { flex-direction: column; }
  .ask-row button { border-left: 0; border-top: 2px solid var(--ink); height: 52px; }
}

/* The readout: one sentence that says what the ask returned, with the one number set large. */
.readout { display: flex; align-items: flex-end; gap: var(--s4); padding-block: var(--s2) var(--s4); }
.readout .num { font-size: var(--fs-num); flex: 0 0 auto; }
.readout-words { font-size: var(--fs-body); font-weight: 450; color: var(--ink); max-width: 34em; }

/* ----------------------------------------------------- the date on a price */

/* The stamp: when a fact was last checked, and against what. data-state: checked (inside the
   freshness window), old (a last-known value), gone (no longer found), none (no date on record). */
.stamp {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.4;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
}
.stamp::before {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.6em;
  background: var(--checked); vertical-align: -0.04em;
}
.stamp[data-state="old"]::before, .stamp[data-state="gone"]::before { background: var(--stale); }
.stamp[data-state="none"]::before { background: transparent; border: 1.5px solid var(--ink-soft); }
.stamp .how { font-weight: 400; letter-spacing: 0.04em; }

/* The price: the number, then its stamp. A price is never printed without one. */
.price { display: grid; gap: var(--s1); }
.price-num { font-family: var(--display); font-size: var(--fs-price); font-weight: 860; letter-spacing: -0.05em; line-height: 0.95; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.price[data-state="old"] .price-num { color: var(--ink-soft); }
.price[data-state="none"] .price-num { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.price-kind { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.price-page .price-num { font-size: var(--fs-price-page); }

/* The price with its parts: what is listed, and line by line what is not known. */
.cost { width: 100%; border-collapse: collapse; }
.cost caption { text-align: left; padding-bottom: var(--s2); }
.cost th, .cost td { padding: var(--s3) 0; border-top: var(--rule-hair); text-align: left; vertical-align: baseline; font-weight: 420; }
.cost tr:first-child th, .cost tr:first-child td { border-top: var(--rule); }
.cost td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.cost .unknown { font-weight: 420; color: var(--ink-soft); }
.cost tfoot th, .cost tfoot td { border-top: var(--rule); font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------ the listing record */

/* The record: first seen, each price change with its date, last checked and how, and the
   dealership's own page. A field that is not on record says so; it is never left out. */
.rec { display: grid; gap: 0; }
.rec > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: var(--rule-hair); align-items: baseline; }
.rec > div:first-child { border-top: var(--rule); }
.rec dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.rec dd { color: var(--ink); min-width: 0; }
.rec .absent { color: var(--ink-soft); }
.rec a { overflow-wrap: anywhere; }
/* On a card the record is three short lines: label, then value, on one line. */
.rec-brief { gap: 2px; }
.rec-brief > div, .rec-brief > div:first-child { display: block; padding: 0; border: 0; font-size: var(--fs-small); line-height: 1.4; }
.rec-brief dt, .rec-brief dd { display: inline; }
.rec-brief dt { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-right: 0.5em; }
/* On a phone the card gives the date; the day count is on the vehicle page. */
@media (max-width: 479px) { .rec-brief .ago { display: none; } }
/* Price changes, oldest first. A magenta square marks each change after the first sighting. */
.rec-prices { display: grid; gap: var(--s1); }
.rec-prices li { display: grid; grid-template-columns: 7.5em auto 1fr; gap: var(--s3); align-items: baseline; font-variant-numeric: tabular-nums; }
.rec-prices time { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-soft); }
.rec-prices .delta { font-size: var(--fs-small); color: var(--ink); }
.rec-prices .delta::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; background: var(--changed); }

/* ------------------------------------------------------------- listing card */

/* A listing is a row: photo, then the car, then its price and date, then its record. Rows keep
   every price and date in one column, so a list reads like a ledger. A page with many cars and
   room for photos adds .tiles to the list. */
.cars { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: var(--rule); }
.car { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--s4); align-items: start; border-top: var(--rule); padding-block: var(--s4); }
.car-photo { display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); border: var(--rule-hair); overflow: hidden; }
.car-photo img { width: 100%; height: 100%; object-fit: cover; }
.car-nophoto { display: grid; place-items: center; height: 100%; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding: var(--s2); }
.car-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s5); align-content: start; min-width: 0; }
.car-main { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.car-name { font-family: var(--display); font-size: var(--fs-h3); font-weight: 780; line-height: 1.15; letter-spacing: -0.02em; text-shadow: none; text-wrap: balance; }
.car-name a { text-decoration: none; }
.car-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.car-facts, .car-where { font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 600px) { .car { grid-template-columns: 168px minmax(0, 1fr); gap: var(--s5); } }
@media (min-width: 1180px) {
  .car-body { grid-template-columns: minmax(0, 1fr) 13.75rem; }
  .car-main { grid-column: 1; }
  .car .price { grid-column: 2; grid-row: 1 / span 2; align-self: start; align-content: start; }
  .car .rec-brief { grid-column: 1; }
}
@media (min-width: 760px) {
  .cars.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--gap); border-bottom: 0; }
  .tiles .car { grid-template-columns: minmax(0, 1fr); gap: var(--s3); height: 100%; align-content: start; }
  .tiles .car-body { grid-template-columns: minmax(0, 1fr); }
  .tiles .car .price, .tiles .car .rec-brief, .tiles .car-main { grid-column: 1; grid-row: auto; }
}
@media (min-width: 1180px) { .cars.tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The sponsored label: ink on gold, on any listing whose position was paid for. */
.tag { display: inline-block; justify-self: start; font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; padding: 5px 7px; border: 1px solid var(--on-fill); }
.tag-sponsored { background: var(--paid); color: var(--on-fill); }
@media (prefers-color-scheme: dark) { .tag-sponsored { border-color: var(--paid); } }

.more { margin-top: var(--s5); font-weight: 600; }

/* ---------------------------------------------------------- the machine view */

/* What an AI assistant reads for this page: the request, and an excerpt of the real answer. The
   cyan rule is the only cyan on a page. */
.machine { border: var(--rule); border-top: 4px solid var(--machine); padding: var(--s4) var(--s4) var(--s5); display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.machine-say { font-size: var(--fs-small); color: var(--ink); }
.machine-req { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.machine-req .verb { font-weight: 700; margin-right: 0.6em; }
.machine-json { font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); border-top: var(--rule-hair); padding-top: var(--s3); }
.machine-json code { font-size: inherit; }
.machine-more { font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

/* --------------------------------------------------------------------- facts */

/* A fact: a number with its unit, one line saying what it counts, and where it came from. */
.fact-row { display: grid; gap: var(--s5) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .fact-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: flex; flex-direction: column; gap: var(--s2); border-top: var(--rule); padding-top: var(--s4); }
.fact dt { order: 2; font-family: var(--mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.fact dd { order: 1; font-family: var(--display); font-size: var(--fs-num); font-weight: 860; letter-spacing: -0.05em; line-height: 0.86; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.fact dd.fact-time { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.fact dd.fact-note { order: 3; font-family: var(--text); font-size: var(--fs-small); font-weight: 420; letter-spacing: 0; line-height: 1.3; color: var(--ink-soft); }
.src { font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; color: var(--ink-soft); margin-top: var(--s5); }

/* ------------------------------------------------------------ market summary */

/* Coverage: every market CarChat has cars in, as a table a person or a machine can read. */
.cov-groups { display: grid; gap: var(--s6) var(--gap); }
.cov-col { display: grid; gap: var(--s6); align-content: start; max-width: 40rem; }
@media (min-width: 1180px) { .cov-groups.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cov { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.cov caption { text-align: left; padding-bottom: var(--s3); }
.cov th, .cov td { padding: var(--s2) 0; border-top: var(--rule-hair); text-align: left; vertical-align: baseline; font-weight: 420; }
.cov thead th { border-top: var(--rule); font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding-block: var(--s2); }
.cov tbody th { font-weight: 600; color: var(--ink); padding-right: var(--s3); }
.cov .n { text-align: right; font-variant-numeric: tabular-nums; padding-right: var(--s4); color: var(--ink); }
.cov td.when { color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 559px) {
  .cov thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cov tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s3); padding: var(--s2) 0; border-top: var(--rule-hair); }
  .cov tbody th, .cov tbody td { border: 0; padding: 0; }
  .cov tbody td.n { padding-right: 0; }
  .cov tbody td.n::after { content: " " attr(data-unit); font-weight: 420; color: var(--ink-soft); }
  .cov tbody td.when { grid-column: 1 / -1; font-size: 0.8125rem; white-space: normal; }
  .cov tbody td.n.dealers { grid-column: 1 / -1; text-align: left; font-size: 0.8125rem; color: var(--ink-soft); }
}

/* One market, summarised: used at the top of a market, segment or prices page. */
.mkt { display: grid; gap: var(--s3); border-top: var(--rule); padding-top: var(--s4); }
.mkt-counts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------- action block */

/* Ask the dealership. Fields, names and the consent sentence come from the server unchanged.
   The submit button carries the page's one hard offset shadow. */
.act { border: var(--rule); padding: var(--s5); display: grid; gap: var(--s4); max-width: 34rem; }
.act label { display: grid; gap: var(--s1); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.act input[type="text"], .act input[type="tel"], .act input[type="email"], .act textarea {
  width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
}
.act textarea { min-height: 96px; resize: vertical; }
.act .consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start; font-weight: 420; }
.act .consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.act-goes { font-size: var(--fs-small); color: var(--ink); }
.act-err { font-size: var(--fs-small); font-weight: 600; color: var(--ink); border-left: 4px solid var(--stale); padding-left: var(--s3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--s5);
  border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: var(--fs-body); text-decoration: none; cursor: pointer;
}
.btn-go { background: var(--paper); color: var(--ink); box-shadow: var(--lift) var(--lift) 0 var(--ink); margin: 0 var(--lift) var(--lift) 0; }
.btn-go:active { transform: translate(var(--lift), var(--lift)); box-shadow: none; }
.btn[disabled] { cursor: progress; opacity: 0.7; }

/* ------------------------------------------------------------ plain listings */

/* What is not known, said in a list. */
.notlist { display: grid; gap: 0; max-width: var(--measure); }
.notlist li { padding: var(--s3) 0 var(--s3) var(--s5); border-top: var(--rule-hair); position: relative; color: var(--ink); }
.notlist li:first-child { border-top: var(--rule); }
.notlist li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 0.6em; height: 0.6em; border: 1.5px solid var(--ink-soft); }

/* ------------------------------------------------------------------- home */

.hero { padding-block: var(--s5) var(--s7); }
@media (min-width: 760px) { .hero { padding-block: var(--s6) var(--s8); } }
.hero + .band { border-top: var(--rule); }
.hero-top { display: grid; gap: var(--s3) var(--gap); align-items: end; }
@media (min-width: 1180px) { .hero-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .hero-top .lede { padding-bottom: 0.2em; } }
/* The working subject: the ask box, its result under it, and beside both what an assistant
   reads for the same question. The result and the machine view are replaced together when a
   new question is asked, so they share one wrapper that takes no box of its own. */
.hero-grid { display: grid; gap: var(--s4) var(--gap); margin-top: var(--s5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "ask" "result" "machine"; align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "ask machine" "result machine"; grid-template-rows: auto 1fr; } }
@media (min-width: 1180px) { .hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); margin-top: var(--s6); } }
.hero-ask { grid-area: ask; min-width: 0; }
.hero-swap { display: contents; }
.hero-swap > .result { grid-area: result; min-width: 0; }
.hero-swap > .machine { grid-area: machine; min-width: 0; }
.hero-swap[aria-busy="true"] > * { opacity: 0.55; }
.cov-wrap { margin-top: var(--s6); }

/* ------------------------------------------------------------------ motion */

/* Nothing on this site moves by itself. The one transition is the answer dimming while a new
   one loads, and it is removed when the visitor asks for less motion. */
.hero-swap > * { transition: opacity 0.12s linear; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media print { .site-nav, .ask, .skip { display: none; } body { background: #fff; color: #000; } }