/* autogeny.ai: the few rules the production pages add to the handoff design.
   Every value comes from ds/autogeny/tokens.css. The design system files in ds/
   stay byte-identical to the handoff. */

/* The pages set display on almost everything inline, which would beat the
   browser's own [hidden] rule. */
[hidden] { display: none !important; }

/* Homepage, sample report: the table captions sit above the horizontal scroll
   area instead of inside it, so on a phone only the table scrolls. Same type as
   ".ag-results caption, .ag-grid caption" in bundle.css. */
.ag-caption-group { min-width: 0; } /* lets the table's scroll area, not the page, take the overflow */
.ag-caption-out { margin: 0; padding: 0 0 var(--space-3); text-align: left; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }

/* Homepage, chart: "Table view" opens inside the chart's grid. Same fix as the
   caption group: its scroll area, not the page, takes the wide table on a phone. */
.ag-plot > details { min-width: 0; }

/* Homepage, sample report tables. The scroll areas with no focusable cell get
   tabindex="0", role="region" and a name in index.html, and show the focus ring.
   In the results tables each row's name stays in view while the table scrolls
   sideways. Not in the grid: its row names do not wrap and would fill a phone's
   whole scroll area; each grid cell's name and tooltip carry the row name. */
.ag-table-wrap:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ag-table-wrap .ag-results tbody th[scope="row"], .ag-table-wrap .ag-results thead th:first-child { position: sticky; left: 0; }
.ag-table-wrap .ag-results tbody th[scope="row"] { background: var(--paper-raised); }
/* The grid's hidden cell tooltips (visibility: hidden in bundle.css) still count as
   scrollable overflow, so a desktop with classic scrollbars showed a bar under the
   grid that scrolled into blank space. Take them out of layout until shown. */
.ag-table-wrap .ag-tip::after { display: none; }
.ag-table-wrap .ag-tip:hover::after, .ag-table-wrap .ag-tip:focus-visible::after { display: block; }

/* Homepage, results grid on a phone (R3-07): the full row names do not wrap and
   would fill the whole scroll area, so under 600 px each row shows a short code,
   pinned while the grid scrolls, with a key under the grid. Screen readers still
   get the full name (visually hidden, not removed). */
.ag-row-short { display: none; }
.ag-grid-key { display: none; margin: 0; padding-top: var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .ag-grid .ag-row-full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ag-grid .ag-row-short { display: inline; }
  .ag-table-wrap .ag-grid tbody th[scope="row"], .ag-table-wrap .ag-grid thead th:first-child { position: sticky; left: 0; z-index: 1; }
  .ag-table-wrap .ag-grid tbody th[scope="row"] { background: var(--paper-raised); }
  .ag-grid-key { display: block; }
}
/* Results grid on a tablet: from 600 px (where the full row names come back) to
   1119 px the longest names ("C-08 Injection through retrieved content") made the
   grid up to about 290 px wider than its frame, hiding the last columns behind the
   scroll. Here the row names may wrap, at most to two lines (24 characters wide),
   so the five configuration columns fit from about 900 px and scroll less below.
   From 1120 px the names fit on one line, as the design has them. */
@media (min-width: 600px) and (max-width: 1119px) {
  .ag-grid tbody th { white-space: normal; min-width: 24ch; }
}
/* The grid is one Tab stop; arrow keys move between its cells (home.js). The hint
   shows while the grid has the focus, under it, so nothing moves. */
.ag-grid-hint { display: none; margin: 0; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.ag-caption-group:focus-within .ag-grid-hint { display: block; }

/* Homepage chart: the "Acceptable zone" label is chart text, so it is ink-muted
   like the rest (brand book; handoff review site F18). */
.ag-plot .zone-label { fill: var(--ink-muted); }

/* Homepage chart on a phone (R3-08). The 760-unit chart shrinks to under half its
   size, so its 11-unit labels came out at about 5 px. Under 600 px the point names
   and the axis labels are drawn about twice as large (10 to 11 px on screen), the
   cost, zone and threshold labels give way, and a short key under the chart says
   what the shading and the dashed lines are. Each point's full values stay in its
   name for screen readers, and in the Table view. */
.ag-plot-key { display: none; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .ag-plot-key { display: block; }
  .ag-plot .pt-cost, .ag-plot .th-label, .ag-plot .zone-label { display: none; }
  .ag-plot .pt-name { font-size: 24px; }
  .ag-plot .tick { font-size: 22px; }
  .ag-plot .axis-title { font-size: 19px; letter-spacing: 0.04em; }
  .ag-plot .axis-title[transform] { font-size: 17px; } /* the vertical one: clear of the frame's edge */
  /* Clear of the "85" tick and the dashed capability line. */
  .ag-plot .lbl-rec { text-anchor: start; transform: translate(-4px, 10px); }
  /* Under its cross, clear of the recommended configuration's name. */
  .ag-plot .lbl-c { text-anchor: middle; transform: translate(14px, 34px); }
}
/* From 440 px the chart is already larger on screen: smaller units, same look. */
@media (min-width: 440px) and (max-width: 599px) {
  .ag-plot .pt-name { font-size: 19px; }
  .ag-plot .tick { font-size: 17px; }
  .ag-plot .axis-title { font-size: 15px; }
  .ag-plot .lbl-c { transform: translate(14px, 28px); }
}

/* Homepage: skip link to the main content, out of sight until it has the focus. */
.skip-link { position: absolute; left: 16px; top: -200px; z-index: 10; padding: 8px 12px; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 500; text-decoration: none; }
.skip-link:hover { color: var(--on-ink); }
.skip-link:focus { top: 12px; outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Homepage: the page's "a:hover { color: ink-muted }" also reached the ink buttons,
   whose hover fill is ink-muted, so the label vanished. Keep the button's own colour. */
.ag-btn-primary:hover { color: var(--on-ink); }

/* Booking form: the design's input edge (rule: 1.41:1 on the white sheet) and
   placeholder (ink-muted at 70%: 3.3:1) are too faint (WCAG 1.4.11 and 1.4.3).
   The edge takes mark, the design's colour for non-text marks that carry meaning
   (3.77:1); the placeholder takes ink-muted at 85% (about 4.7:1 on the white
   field: passes, yet lighter than typed text, so examples do not read as answers).
   The page sets every border inline, hence !important. */
#scoping-form input:not([type="radio"]):not([type="checkbox"]), #scoping-form select, #scoping-form textarea { border-color: var(--mark) !important; }
#scoping-form ::placeholder { opacity: 0.85; }

/* Confirmation: a long email address wraps instead of running off a phone screen. */
#f-done-email { overflow-wrap: anywhere; }

/* Booking form: a field's error, the type the design mockup uses. */
.f-err { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--fail); }

/* Booking form: help under a label (the optional platform link). */
.f-hint { font-family: var(--font-display); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Booking form: the privacy link under the consent box, lined up with its text
   (the box is 13 px wide plus the label's 10 px gap). */
.f-privacy { margin: -8px 0 0 23px; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.f-privacy a { color: var(--ink-muted); }

/* The submit button stays focusable while it is not ready (aria-disabled), and
   looks exactly like the design's disabled button. */
.ag-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Where the design's "Confirm you're human" toggle was: the Turnstile widget.
   Its height is reserved so the form does not jump when it loads. */
.f-turnstile { width: 100%; max-width: 360px; min-height: 65px; }
/* Under 300 px of room (a 320 px phone, 400 percent zoom) booking.js draws
   Cloudflare's compact widget, 150 by 140 px: the 300 px minimum of the usual
   one would run out of the card and off the screen (WCAG 1.4.10). */
.f-turnstile.is-compact { min-height: 140px; }
.f-turnstile:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* A message about the whole form (could not send, too many tries). */
.f-msg { margin: 0; max-width: 36rem; padding: 2px 0 2px 12px; border-left: 2px solid var(--ink-muted); font-family: var(--font-body); font-size: 15px; line-height: 23px; color: var(--ink); }
.f-msg.is-error { border-left-color: var(--fail); }
.f-msg a { color: var(--ink); }

/* Privacy page (rebuilt 2026-10-09 on the homepage's patterns). The hero and the
   summary sheet are the template's, inline in privacy.html. A section with a long
   text is index.html's #about layout: the number and headline on the left, the
   text on the right within 42rem (#about's values). Consecutive short sections
   share a band, side by side, as #fit's "Built for" and "Not for". Headlines take
   the homepage's section size, clamp(28px, 3.2vw, 40px), as #problem, #method,
   #report, #how and #evidence do. */
.pv-row { max-width: var(--page-max); margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.pv-head { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Section numbers: #how's step number (mono 20/26, 500, ink) over a 1px ink rule. */
.pv-num { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink); }
.pv-h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.pv-text { flex: 2 1 480px; min-width: 0; max-width: 42rem; display: flex; flex-direction: column; gap: 16px; }
.pv-text p { margin: 0; }
/* Two short sections in one band: #fit's columns (flex 1 1 380px, gap 48px 64px),
   each its number, headline and text. Under about 860 px they stack. */
.pv-pair { max-width: var(--page-max); margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.pv-pair > section { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pv-pair .pv-head, .pv-pair .pv-text { flex: none; }
/* The section whose content is a table: headline on top, then the table, as the
   template's #results. Both stop at 64rem so the widest cell keeps a readable
   measure (about 80 characters at 15 px). */
.pv-stack { max-width: var(--page-max); margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 64px); display: flex; flex-direction: column; gap: 40px; }
.pv-stack > .pv-head, .pv-stack > .pv-text { flex: none; }
.pv-stack > .pv-head, .pv-stack > .ag-caption-group { max-width: 64rem; }
.pv a { overflow-wrap: anywhere; }
/* "What we collect": ruled rows, as the homepage's "Built for" list. */
.pv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pv-list li { border-top: 1px solid var(--rule); padding: 14px 0; font-size: 17px; line-height: 26px; }
.pv-list li:last-child { border-bottom: 1px solid var(--rule); }
/* The summary sheet's facts: a mono label over each value, ruled like the
   homepage card's verdict. Figures and email addresses in mono, as data. */
.pv-facts { margin: 0; display: flex; flex-direction: column; }
.pv-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--rule); }
.pv-facts > div:last-child { padding-bottom: 0; }
.pv-facts dd { margin: 0; font-size: 16px; line-height: 25px; }
.pv-fig { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
/* "Who else sees it": a ResultTable whose cells are sentences, so its cells take
   the body face (the component's td is mono, for figures) and align to the top.
   A one-sentence bullet spans both columns; its text keeps about the Details
   column's measure instead of running the table's full width. */
.pv-services th, .pv-services td { vertical-align: top; padding: var(--space-4) var(--space-3); }
.pv-services td { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-variant-numeric: normal; }
.pv-col-service { width: 9rem; }
.pv-col-role { width: 34%; }
.pv-cell { display: block; max-width: 36rem; }
/* On a phone the table would need sideways scrolling to read its sentences, so
   under 600 px each service becomes a block: its name, then its sentences as
   paragraphs, as the notice's bullet was. The column heads stay in the markup for
   screen readers (the roles in the markup keep the table semantics with
   display: block). */
@media (max-width: 599px) {
  .pv-services, .pv-services tbody, .pv-services tr, .pv-services th, .pv-services td { display: block; }
  .pv-services thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pv-services tbody tr { padding: var(--space-4); border-bottom: 1px solid var(--rule); }
  .pv-services th, .pv-services td { padding: 0; border-bottom: 0; }
  .ag-table-wrap .pv-services tbody th[scope="row"] { position: static; background: transparent; }
  .pv-services .ag-measure { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
  .pv-services td { margin-top: var(--space-2); }
  .pv-services th + td { margin-top: var(--space-3); }
}
/* A fact only Brad can fill in; impossible to miss on the draft. */
.pv-todo { padding: 0 4px; background: var(--review-soft); color: var(--review); font-family: var(--font-mono); font-size: 15px; font-weight: 500; }

/* The honeypot: off screen, not display:none, so a script still sees and fills it. */
.sc-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Focus target for the confirmation heading without a visible ring on load. */
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}