/* Validation, About and Contact: the page layer over the web system. Every value is a token; this file places
   sections on the 12 columns and names each vertical gap by its token (the README's spacing table).
   Columns at 1440: 82 px, gutter 12, content 1120; column n starts at (n - 1) x 94. */

main { display: block; }
/* Focus moved by script (the first field in error) lands clear of the 64 px nav. */
html { scroll-padding-top: var(--s11); }

/* ---------- Section rhythm. Visual sections stand --interval apart (240, 120 under 1024, Societies B3); the hero
   stands --section-wide (160, 80) from the first section; a statement has --statement-space (200, 100) above and below. */
.sec-gap { margin-top: var(--interval); }
.after-hero { margin-top: var(--section-wide); }

/* ---------- Pair hero (atlas C1, section 17): copy in columns 1 to 6, the device in 8 to 12 with its top edge on the
   headline's cap line. Nav to headline 120 (64 on phones); headline to lead 48; lead to actions 40; button to link 24. */
.hero { padding-top: var(--s11); align-items: start; }
.hero-copy { grid-column: 1 / span 6; }
.hero-dev { grid-column: 8 / span 5; }
@media (min-width: 1024px) { .hero-copy { grid-column: 1 / span 5; } .hero-dev { grid-column: 7 / span 6; } }
.hero .lead { margin-top: var(--s8); max-width: 34em; }
.hero-acts { margin-top: var(--s7); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.hero h1 .ln { display: block; }
@media (max-width: 1023px) {
  .hero-copy, .hero-dev { grid-column: 1 / -1; }
  .hero-dev { margin-top: var(--s8); }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero-dev { grid-column: 3 / span 8; } }
@media (max-width: 767px) { .hero { padding-top: var(--s9); } }

/* ---------- The held panel and its white screen (system section 6, "Product in the sky"): the screen at 80 % of the
   panel's width, the same sky margin on all four sides, a 1 px line frame, no shadow, no radius. */
.vpanel { position: relative; padding: 10%; aspect-ratio: 1 / 1; display: grid; align-content: center; }
.vpanel .vsky { position: absolute; inset: 0; }
.vscreen { position: relative; z-index: 1; background: var(--page); box-shadow: inset 0 0 0 1px var(--line); padding: var(--s5); container-type: inline-size; }
.vcap { margin-top: var(--s5); color: var(--ink-2); max-width: 40em; }

/* The proof screen (the hero's device): a label, two dataset rows, the axis, the key. Each row: the dataset's name, 24
   to the values, 8 to the marks on a 1 px strip from 80 to 100 %, whose right end carries the recorded result as an ink
   dot. Label to first row 32; row to row 40; strip to axis 16; axis to key 24, key on a hairline 16 above it. The strip
   is inset by half a mark at each end so the marks at 80 and 100 % stay inside the screen. */
.ap-h { color: var(--ink-2); font-weight: 400; }
.ap-rows { margin-top: var(--s6); display: grid; row-gap: var(--s7); }
.ap-name { color: var(--ink); }
.ap-strip { position: relative; margin: var(--s5) 12px 0; height: 64px; }
.ap-strip::before { content: ''; position: absolute; left: -12px; right: -12px; bottom: 11.5px; height: 1px; background: var(--line); }
.ap-m { position: absolute; bottom: 0; left: calc(var(--to) * var(--p, 1)); transform: translateX(-50%); display: grid; justify-items: center; row-gap: var(--s2); }
.ap-row { transition: opacity var(--t1) var(--ease); }
.ap-rows:hover .ap-row:not(:hover), [data-state="hover"] .ap-rows .ap-row:not(:first-child) { opacity: 0.4; }
.ap-m b { opacity: var(--p, 1); font: 500 32px/1 var(--sans); font-feature-settings: var(--num-features); letter-spacing: -0.01em; text-box: trim-both cap alphabetic; white-space: nowrap; }
.ap-m i, .ap-m svg { display: block; width: 24px; height: 24px; }
.ap-a { color: var(--blue); }
.ap-a b { color: var(--ink); }
.ap-p b { color: var(--ink-2); font: 400 var(--ui)/1 var(--sans); }
.ap-p i { width: 18px; height: 18px; margin-bottom: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); background: var(--page); }
.ap-r i { width: 12px; height: 12px; margin-bottom: 6px; border-radius: 50%; background: var(--ink); }
.ap-ax { margin-top: var(--s4); display: flex; justify-content: space-between; font: 400 var(--label)/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); }
.ap-ax span { text-box: trim-both cap alphabetic; }
.ap-key { margin-top: var(--s5); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font: 400 var(--label)/1 var(--sans); color: var(--ink-2); }
.ap-key .k { display: inline-flex; align-items: center; gap: var(--s2); text-box: trim-both cap alphabetic; }
.ap-key svg, .ap-key i { width: 12px; height: 12px; flex: none; }
.ap-key .k-a svg { color: var(--blue); }
.ap-key .k-p i { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }

/* ---------- Section heads: an h3 and its body, 24 apart, in columns 1 to 6; the body at most 34 em. Head to content 64. */
.shead { grid-column: 1 / span 6; }
.shead .body { margin-top: var(--s5); max-width: 34em; }
.shead .cap.upd { margin-top: var(--s5); }
.sbody { grid-column: 1 / -1; margin-top: var(--s9); }
@media (max-width: 1023px) { .shead { grid-column: 1 / -1; } }

/* ---------- The distribution device (atlas D2, ours): the question in the serif, then three panels in columns 1 to 4,
   5 to 8 and 9 to 12 over one axis. Panel name to plot 24, plot to axis 12, axis to number 32, number to label 8. */
.vd-q { grid-column: 1 / span 8; }
.vd-q .quote { text-wrap: balance; }
.vd-q .cap { margin-top: var(--s3); }
.vd-row { grid-column: 1 / -1; margin-top: var(--s8); display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
.vd--engine { grid-column: 1 / span 8; }
.vd--prompt { grid-column: 10 / span 3; }
.vd { margin: 0; }
/* The head: the line's swatch and name, the count under it (stacked at every width, so the two panels' plots share a top). */
.vd-h { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); }
.vd-h .cap { padding-left: 24px; }
.vd-h .ui { color: var(--ink); text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; gap: var(--s2); }
.vd-h .sw-line { width: 16px; height: 2px; background: currentColor; flex: none; }
.vd-h .sw-line.t-blue { color: var(--blue); }
.vd-h .sw-line.t-i2 { color: var(--ink-2); }
.vd-h .cap { text-box: trim-both cap alphabetic; }
.vd-plot { margin-top: var(--s5); height: 240px; }
.vd-plot svg { display: block; overflow: visible; }
.vd-fill { fill: var(--curve-fill, var(--sky-light)); opacity: var(--p, 1); }
.vd-real { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; }
.vd-line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
.vd-base { fill: var(--line); }
.vd-ax { margin-top: var(--s3); display: flex; justify-content: space-between; font: 400 14px/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); }
.vd-ax span { text-box: trim-both cap alphabetic; }
.vd-num { margin-top: var(--s6); }
.vd-num .big { font-size: 40px; }
.vd-num .vd-l { margin-top: var(--s2); color: var(--ink-2); font-weight: 400; }
.vd-legend { grid-column: 1 / -1; margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.vd-legend .lg { display: inline-flex; align-items: center; gap: var(--s2); font: 400 14px/1 var(--sans); color: var(--ink-2); }
.vd-legend .lg span { text-box: trim-both cap alphabetic; }
.sw-fill { width: 16px; height: 10px; background: var(--curve-fill, var(--sky-light)); box-shadow: inset 0 1.5px 0 var(--ink); }
.sw-line { width: 16px; height: 2px; background: currentColor; }
.vd-sum { grid-column: 1 / span 8; margin-top: var(--s6); color: var(--ink-2); }
@media (max-width: 1023px) { .vd-q, .vd-sum { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .vd-row { row-gap: var(--s8); }
  .vd--engine { grid-column: 1 / -1; }
  .vd--prompt { grid-column: 1 / span 4; }
  .vd-plot { height: 200px; }
}


/* ---------- The confidence label's hit rates: a label, then the system's tally (rows 40 apart) in columns 1 to 6, so it
   weighs less than the device above it.
   Label to rows 32. */
.conf { grid-column: 1 / span 6; }
.conf-h { color: var(--ink-2); font-weight: 400; }
.conf .ch-tally { margin-top: var(--s6); }
@media (max-width: 1023px) { .conf { grid-column: 1 / -1; } }

/* ---------- Built from: the copy in columns 1 to 5, the two tables in columns 7 to 12, each with its label 16 above. */
.bf { align-items: start; }
.bf-copy { grid-column: 1 / span 5; }
.bf-copy .body { margin-top: var(--s5); }
.srcs { margin-top: var(--s7); display: grid; }
.srcs > div { padding-block: var(--s4); box-shadow: inset 0 1px 0 var(--line); }
.srcs > div:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.srcs dt { color: var(--ink-2); font-weight: 400; }
.srcs dd { margin: var(--s2) 0 0; color: var(--ink); text-box: trim-both cap alphabetic; }
.bf-copy .bf-last { margin-top: var(--s7); }
.bf-tables { grid-column: 7 / span 6; display: grid; row-gap: var(--s9); }
.bf-t .table td { height: 48px; }
@media (max-width: 1023px) { .bf-copy, .bf-tables { grid-column: 1 / -1; } .bf-tables { margin-top: var(--s9); } }

/* ---------- Statement close (atlas C3): Gambetta at the statement size, centred, 200 above and below (100 on phones);
   statement to actions 48; the actions centred, 24 apart. */
.close { text-align: center; padding-block: var(--statement-space); }
.close .statement { max-width: 16em; margin-inline: auto; }
.close .lead { margin: var(--s5) auto 0; max-width: 30em; }
.close-acts { margin-top: var(--s8); display: flex; justify-content: center; align-items: center; gap: var(--s5); flex-wrap: wrap; }

/* ---------- About ---------- */
/* The hero is the Pair above (round eleven) with Simulation's columns, copy 1 to 6 and the device 8 to 12, so the
   statement's two lines hold at 56; its device is a 4:5 area of the page with ink personas on a lattice, no panel. */
@media (min-width: 1024px) { .field-hero .hero-copy { grid-column: 1 / span 6; } .field-hero .hero-dev { grid-column: 8 / span 5; } }
.hero-field { aspect-ratio: 4 / 5; position: relative; }
.hero-field canvas { position: absolute; inset: 0; }

/* Chapters on hairline rules (atlas A5, ours): the rule, then the title in columns 1 to 4 and the text in 5 to 10.
   Rule to title 24; title and text share a cap line; chapter to chapter 80. */
.chaps { display: grid; row-gap: var(--s10); }
.chap { box-shadow: inset 0 1px 0 var(--ink); padding-top: var(--s5); align-items: start; }
.chap h2 { grid-column: 1 / span 4; }
.chap .chap-t { grid-column: 5 / span 6; }
.chap .chap-t .body + .body { margin-top: var(--s5); }
.chap-a { margin-top: var(--s7); }
.who-list { margin-top: var(--s7); }
.who-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); align-items: center; min-height: 48px; box-shadow: inset 0 1px 0 var(--line); }
.who-list li:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.who-list .ui { color: var(--ink); text-box: trim-both cap alphabetic; font-weight: 500; }
.who-list .ui.m { color: var(--ink-2); font-weight: 400; }
@media (max-width: 1023px) { .chap h2, .chap .chap-t { grid-column: 1 / -1; } .chap .chap-t { margin-top: var(--s5); max-width: 34em; } }
@media (max-width: 767px) { .who-list li { grid-template-columns: 1fr; row-gap: var(--s2); padding-block: var(--s4); } }

/* Principles (round eleven): Aaru's stats grid (A7), as the use-cases index sets "The report", in place of rule rows,
   so the section does not repeat What we build's row: three to a row, each principle under a hairline, its name in the
   serif at 24, 24 under the line, its sentence 16 under the name; rows 40 apart. Two to a row under 1024, one on
   phones. */
.meth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--gutter); }
.meth-row { padding: var(--s5) var(--s5) 0 0; box-shadow: inset 0 1px 0 var(--line); }
.meth-n { font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; text-wrap: balance; text-box: trim-both cap alphabetic; }
.meth-row .body { margin-top: var(--s4); max-width: 34em; }
@media (max-width: 1023px) { .meth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .meth { grid-template-columns: minmax(0, 1fr); } }

/* The band (atlas B3): one full-width sky band per page, 12 px in from the viewport's edges, 600 tall (360 on phones),
   no text on it, the symbol in white at its centre: four personas facing the world they stand in. */
.band { position: relative; margin-inline: var(--s3); height: 600px; }
.band .vsky { position: absolute; inset: 0; }
.band img { position: absolute; left: 50%; top: 50%; width: 160px; height: auto; transform: translate(-50%, -50%); z-index: 1; }
@media (max-width: 767px) { .band { height: 360px; } .band img { width: 112px; } }

/* ---------- Contact ---------- */
.ct-copy { grid-column: 1 / span 5; }
.ct-copy .lead { margin-top: var(--s8); }
.ct-list { margin-top: var(--s7); }
.ct-list li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding-block: var(--s3); box-shadow: inset 0 -1px 0 var(--line); font: 400 var(--ui)/1.35 var(--sans); color: var(--ink); }
.ct-list li:first-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.ct-list li svg { flex: none; color: var(--ink); }
.ct-form { grid-column: 7 / span 6; }
.form { display: grid; row-gap: var(--s5); }
.form .field { align-content: start; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); }
.form .field > .label { text-box: trim-both cap alphabetic; }
.form .opt { color: var(--ink-3); font-weight: 400; }
.form .msg[hidden] { display: none !important; }
.form-acts { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.form-acts .cap { color: var(--ink-2); }
.form-acts .cap .link { font: inherit; color: inherit; }   /* the privacy link at the caption's size (A.cta) */
.input.is-focus { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 2px var(--sky-pale); }
.field.is-error .input:focus { box-shadow: inset 0 0 0 1px var(--negative), 0 0 0 2px var(--sky-pale); }
/* The sent state (the system's .form-sent) adds the unit, a persona that has answered, over its heading, and the link. */
.form-sent h2 { outline: none; }
.form-sent svg { margin-bottom: var(--s6); }
.form-sent .link { margin-top: var(--s7); display: inline-block; }
@media (max-width: 1023px) { .ct-copy, .ct-form { grid-column: 1 / -1; } .ct-form { margin-top: var(--s9); } }
@media (max-width: 767px) { .form .two { grid-template-columns: 1fr; } }

/* The stat cards' line breaks where the reader pauses ("A plain chat prompt: 15." stays whole). */
.ch-stat .body { text-wrap: pretty; }
@container (max-width: 340px) { .ap-m b { font-size: 24px; } .ap-p b { font-size: var(--label); } }
/* A large screen (1920 and up) sets the names, values and marks a step up so the screen does not read as small type
   in a large sky. */
@container (min-width: 480px) {
  .ap-name { font-size: var(--body); }
  .ap-m b { font-size: 40px; } .ap-p b { font-size: var(--body); }
  .ap-strip { height: 76px; }
  .ap-h, .ap-ax, .ap-key { font-size: var(--ui); }
}