/* Archetypes web system: controls, every state (system section 10, section 17 "Interaction").
   States: rest, hover, active (pressed), focus-visible, disabled, loading where a control can load.
   Forcing hooks for renders: ?state=hover|active|focus|disabled|loading sets html[data-state] and forces every control
   on the page; .is-hover, .is-active, .is-focus, .is-disabled, .is-loading force one control (the specimen sheet).
   No depth on a control (r12): hover is a fill one step darker on ink's own scale (--hover), pressed one more (--pressed);
   the primary button lightens to ink-hover and presses back to ink. The rise and the line under a hovered button are withdrawn.
   Hover feedback starts at once (transitions begin on the first frame) and settles in 160 ms. */

/* ---------- Button, primary: 48 tall, padding 0 24, ink, white label Switzer 500 15, 0 radius. ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--s5);
  background: var(--ink); color: var(--page); font: 500 var(--ui)/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--radius); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--t1) var(--ease), box-shadow var(--t1) var(--ease), color var(--t1) var(--ease); }
.btn .t { transition: opacity var(--t1) var(--ease); }
.btn:hover, .btn.is-hover, [data-state="hover"] .btn { background: var(--ink-hover); }
.btn:active, .btn.is-active, [data-state="active"] .btn { background: var(--ink); transition: none; }
.btn:focus-visible, .btn.is-focus, [data-state="focus"] .btn { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"]:not(.cta), .btn.is-disabled, [data-state="disabled"] .btn { background: rgba(17, 20, 23, 0.4); cursor: not-allowed; }
/* Loading keeps the size, fades the label and runs a 2 px tally along the lower edge on ease-data. */
.btn.is-loading .t, [data-state="loading"] .btn .t { opacity: 0; }
.btn.is-loading::after, [data-state="loading"] .btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); animation: tally-run var(--t-data) var(--ease-data) infinite; }
.btn.is-loading, [data-state="loading"] .btn { cursor: progress; }
@keyframes tally-run { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-frozen] .btn::after, [data-frozen] .input-load::after { animation: none; clip-path: inset(0 40% 0 0); }

/* ---------- Button, secondary: the same size, a 1 px line, an ink label; hover fills --hover and the line turns ink-2; pressed --pressed and ink. */
.btn.sec { background: var(--page); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.sec:hover, .btn.sec.is-hover, [data-state="hover"] .btn.sec { background: var(--hover); box-shadow: inset 0 0 0 1px var(--ink-2); }
.btn.sec:active, .btn.sec.is-active, [data-state="active"] .btn.sec { background: var(--pressed); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.sec[disabled], .btn.sec[aria-disabled="true"]:not(.cta), .btn.sec.is-disabled, [data-state="disabled"] .btn.sec { background: var(--page); color: rgba(17, 20, 23, 0.4); box-shadow: inset 0 0 0 1px var(--line); }
.btn.sec.is-loading::after, [data-state="loading"] .btn.sec::after { color: var(--ink); }

/* ---------- Text link: ink, a 1 px underline 2 px below; hover thickens it to 1.5 px; pressed pulls it to 1 px
   offset. The ink never changes, so a link never looks visited or disabled. A 44 px target the layout does not see. */
.link { position: relative; display: inline; color: var(--ink); font: 400 var(--ui)/1 var(--sans); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: currentColor;
  transition: text-decoration-thickness var(--t1) var(--ease), text-underline-offset var(--t1) var(--ease); }
.link::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.link:hover, .link.is-hover, [data-state="hover"] .link { text-decoration-thickness: 1.5px; }
.link:active, .link.is-active, [data-state="active"] .link { text-decoration-thickness: 1.5px; text-underline-offset: 1px; transition: none; }
.link:focus-visible, .link.is-focus, [data-state="focus"] .link { outline: 2px solid var(--ink); outline-offset: 3px; }
.link[aria-disabled="true"]:not(.cta), .link.is-disabled, [data-state="disabled"] .link { color: var(--ink-3); text-decoration-color: var(--line); cursor: not-allowed; }

/* ---------- Input: 48 tall, 1 px line, padding 0 16; hover ink-2 line; focus an ink line and a 2 px sky-pale ring;
   the label 13 above at 8; an error line in negative with a 13 px message 8 below. Loading runs the tally. ---------- */
.field { display: grid; row-gap: var(--s2); }
.field > .label { color: var(--ink); }
.input { height: 48px; width: 100%; padding: 0 var(--s4); border: 0; border-radius: 0; background: var(--page); color: var(--ink);
  font: 400 var(--ui)/1 var(--sans); box-shadow: inset 0 0 0 1px var(--line); outline: none; transition: box-shadow var(--t1) var(--ease); }
.input::placeholder { color: var(--ink-3); }
.input:hover, .input.is-hover, [data-state="hover"] .input { box-shadow: inset 0 0 0 1px var(--ink-2); }
.input:active, .input.is-active, [data-state="active"] .input { box-shadow: inset 0 0 0 1px var(--ink); }
.input:focus-visible, .input:focus, .input.is-focus, [data-state="focus"] .input { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 2px var(--sky-pale); }
.input[disabled], .input.is-disabled, [data-state="disabled"] .input { background: var(--hover); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; }
.field.is-error .input, [data-state="error"] .field .input { box-shadow: inset 0 0 0 1px var(--negative); }
.field.is-error .input:focus { box-shadow: inset 0 0 0 1px var(--negative), 0 0 0 2px var(--sky-pale); }
[data-state="error"] .field .msg[hidden] { display: block !important; }
/* Select and text area (round nine, from the contact form): the input's own states; the select's chevron in the icon
   stroke, 44 px of padding for it; the text area 144 tall. */
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111417' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E") no-repeat right 16px center; }
select.input:invalid, select.input.ph { color: var(--ink-3); }
select.input[disabled] { background-color: var(--hover); }
textarea.input { height: 144px; padding: var(--s3) var(--s4); line-height: 1.5; resize: vertical; display: block; }
/* A form's sent state: the form gives way to .form-sent in place. ?state=sent forces it for a render. */
[data-state="sent"] .form-body { display: none; }
[data-state="sent"] .form-sent[hidden] { display: block !important; }
.form-sent { box-shadow: inset 0 1px 0 var(--ink); padding-top: var(--s7); }
.form-sent .body { margin-top: var(--s5); max-width: 30em; }
.form-sent .link { margin-top: var(--s7); display: inline-block; }
.field .msg { font: 400 var(--label)/var(--label-lh) var(--sans); color: var(--negative); text-box: trim-both cap alphabetic; }
.input-load { position: relative; }
.input-load.is-loading::after, [data-state="loading"] .input-load::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 2px; color: var(--ink);
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); animation: tally-run var(--t-data) var(--ease-data) infinite; }

/* ---------- Chip: 32 drawn, 44 targeted (6 px of margin above and below); hover --hover, pressed --pressed,
   selected an ink line and ink text. ---------- */
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s3); margin: 6px 0; border: 0; border-radius: 0; background: var(--page);
  color: var(--ink-2); font: 400 var(--ui)/1 var(--sans); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  transition: background var(--t1) var(--ease), box-shadow var(--t1) var(--ease), color var(--t1) var(--ease); }
.chip:hover, .chip.is-hover, [data-state="hover"] .chip { background: var(--hover); color: var(--ink); }
.chip:active, .chip.is-active, [data-state="active"] .chip { background: var(--pressed); color: var(--ink); transition: none; }
.chip[aria-pressed="true"], .chip.is-selected { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip:focus-visible, .chip.is-focus, [data-state="focus"] .chip { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip[disabled], .chip.is-disabled, [data-state="disabled"] .chip { color: var(--ink-3); background: var(--page); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; }

/* ---------- Tabs, a segmented control (atlas A6, ours): 44 tall, Switzer 15, 0 radius; the selected tab ink with a
   white label, the others ink on white inside a 1 px line. ---------- */
.tabs { display: inline-flex; }
.tab { position: relative; height: 44px; padding: 0 var(--s4); margin: 0 0 0 -1px; border: 0; border-radius: 0; background: var(--page); color: var(--ink);
  font: 400 var(--ui)/1 var(--sans); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line); transition: background var(--t1) var(--ease), color var(--t1) var(--ease), box-shadow var(--t1) var(--ease); }
.tab:first-child { margin-left: 0; }
.tab:hover, .tab.is-hover, [data-state="hover"] .tab:not([aria-selected="true"]) { background: var(--hover); }
.tab:active, .tab.is-active, [data-state="active"] .tab:not([aria-selected="true"]) { background: var(--pressed); transition: none; }
.tab[aria-selected="true"], .tab.is-selected { background: var(--ink); color: var(--page); box-shadow: inset 0 0 0 1px var(--ink); z-index: 1; }
.tab:focus-visible, .tab.is-focus, [data-state="focus"] .tab { outline: 2px solid var(--ink); outline-offset: 3px; z-index: 2; }
.tab[disabled], .tab.is-disabled, [data-state="disabled"] .tab:not([aria-selected="true"]) { color: var(--ink-3); background: var(--page); cursor: not-allowed; }

/* ---------- Selector row: one line of the studies selector (atlas B1, the owner's "pinned selector"). Gambetta 24;
   colour steps instead of opacity so the text stays crisp: ink-3 at rest (4.5:1), ink-2 on hover, ink pressed and
   selected. No edge marks the selected line (r10, no gutters): the ink is the mark. 44 px targets through padding. ---------- */
.selrow { position: relative; display: block; width: 100%; padding: 10px 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: var(--ink-3); font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; text-decoration: none; transition: color var(--t1) var(--ease); }
.selrow:hover, .selrow.is-hover, [data-state="hover"] .selrow { color: var(--ink-2); }
.selrow:active, .selrow.is-active, [data-state="active"] .selrow { color: var(--ink); transition: none; }
.selrow[aria-selected="true"], .selrow[aria-current="true"], .selrow.is-selected { color: var(--ink); }
.selrow:focus-visible, .selrow.is-focus, [data-state="focus"] .selrow { outline: 2px solid var(--ink); outline-offset: -2px; }
.selrow[disabled], .selrow.is-disabled, [data-state="disabled"] .selrow { color: rgba(17, 20, 23, 0.4); cursor: not-allowed; }

/* ---------- Table: hairline rows, 15 px text, numbers right-aligned and tabular, the header in label style, no zebra.
   No gutters (r10): no rule between columns, no fill on a hovered row and no edge on a selected one. Hover turns the
   row's text to ink-hover, 160 ms; the selected row is set in Switzer 500; focus a ring inside. A highlighted column
   (A.table's hl) stands on a sky-air fill from its head to its last row, never behind a line. */
.table { width: 100%; border-collapse: collapse; font: 400 var(--ui)/1.3 var(--sans); font-feature-settings: var(--num-features); }
.table th { font: 500 var(--label)/1 var(--sans); color: var(--ink-2); text-align: left; padding: 0 var(--s3) var(--s3) 0; vertical-align: bottom; }
.table td { height: 48px; padding: 0 var(--s3) 0 0; box-shadow: inset 0 1px 0 var(--line); color: var(--ink); transition: color var(--t1) var(--ease); }
.table td:first-child, .table th:first-child { padding-left: var(--s3); }
.table .n { text-align: right; }
.table tbody tr { cursor: default; }
.table tbody tr:hover td, .table tr.is-hover td, [data-state="hover"] .table tbody tr:first-child td { color: var(--ink-hover); }
.table tr.is-active td, [data-state="active"] .table tbody tr:first-child td { color: var(--ink); transition: none; }
.table tr[aria-selected="true"] td, .table tr.is-selected td { font-weight: 500; }
.table .hl { background: var(--sky-air); }
.table th.hl { padding-top: var(--s3); }
.table .hl:first-child, .table th.hl:first-child { padding-left: var(--s3); }
.table tr:focus-visible, .table tr.is-focus, [data-state="focus"] .table tbody tr:first-child { outline: 2px solid var(--ink); outline-offset: -2px; }
.table tr.is-disabled td, [data-state="disabled"] .table tbody tr:first-child td { color: var(--ink-3); }

/* Sticky head (.table.sticky): the head rides under the nav at --nav-offset on the page white with an ink line under it,
   and the first row gives up its own hairline. Sticky needs no clipping ancestor between the table and the page (no
   overflow: auto wrapper). Group rows (tr.grp, one th across the columns): the label in ink-2, 40 above and 12 below,
   no hover. The phone switch (data-col="n" on the table): under 768 the head hides and only the first column and
   column n show; the chips above it (.tpick, sticky in its place) choose n. A.table builds all three. The switch answers
   to the table's own box (r10): .tbl is a size container and the switch applies under 560 px of it, so a table in a
   narrow panel on a wide page switches too, and one in a 600 px phone column keeps every column. */
.table.sticky thead th { position: sticky; top: var(--nav-offset, 0px); z-index: 2; background: var(--page); padding-top: var(--s5); box-shadow: inset 0 -1px 0 var(--ink); }
.table.sticky tbody:first-of-type tr:first-child td { box-shadow: none; }
.table tr.grp th { padding: var(--s7) var(--s3) var(--s3); font: 500 var(--label)/1 var(--sans); color: var(--ink-2); text-align: left; }
.table tbody tr.grp:first-child th { padding-top: var(--s6); }
.tpick { display: none; }
.tbl { container: tbl / inline-size; }
@container tbl (max-width: 559px) {
  .tpick { display: flex; flex-wrap: wrap; column-gap: var(--s2); padding-bottom: var(--s3); position: sticky; top: var(--nav-offset, 0px); z-index: 3; background: var(--page); }
  .table[data-col] thead { display: none; }
  .table[data-col="1"] :is(td, th):not(:first-child, :nth-child(2)), .table[data-col="2"] :is(td, th):not(:first-child, :nth-child(3)),
  .table[data-col="3"] :is(td, th):not(:first-child, :nth-child(4)), .table[data-col="4"] :is(td, th):not(:first-child, :nth-child(5)),
  .table[data-col="5"] :is(td, th):not(:first-child, :nth-child(6)) { display: none; }
}

/* ---------- Menu row: a row of the Use cases panel (44 tall) and of the phone menu (56 tall, .mrow.lg). Hairlines
   between; hover --hover; pressed --pressed; the current page in Switzer 500, no edge (r10). ---------- */
.mrow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: 0 var(--s3);
  color: var(--ink); font: 400 var(--ui)/1.2 var(--sans); text-decoration: none; background: transparent; box-shadow: inset 0 -1px 0 var(--line);
  transition: background var(--t1) var(--ease); }
.mrow.lg { min-height: 56px; font-size: var(--body); padding: 0 var(--s4); }
.mrow:hover, .mrow.is-hover, [data-state="hover"] .mrow { background: var(--hover); }
.mrow:active, .mrow.is-active, [data-state="active"] .mrow { background: var(--pressed); transition: none; }
.mrow[aria-current="page"], .mrow.is-selected { font-weight: 500; }
.mrow:focus-visible, .mrow.is-focus, [data-state="focus"] .mrow { outline: 2px solid var(--ink); outline-offset: -2px; }
.mrow[aria-disabled="true"]:not(.cta), .mrow.is-disabled, [data-state="disabled"] .mrow { color: var(--ink-3); background: transparent; cursor: not-allowed; }
.mrow .ar { flex: none; color: var(--ink-3); transition: transform var(--t1) var(--ease), color var(--t1) var(--ease); }
.mrow:hover .ar, .mrow.is-hover .ar { transform: translateX(2px); color: var(--ink); }

/* ---------- Findings row (round eight's gap, lifted from the use-case page): a numbered row in a list of steps or
   findings. 52 tall, Switzer 17, the number in label style. Rest ink-3; hover ink-2 on --hover; pressed --pressed; the
   current one (aria-current="step") ink in Switzer 500, no edge (r10); focus a ring inside. ---------- */
.frows { box-shadow: inset 0 1px 0 var(--line); }
.frow { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; width: 100%; min-height: 52px; padding: 0 var(--s4);
  margin: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink-3); font: 400 var(--body)/1.3 var(--sans); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line); transition: color var(--t1) var(--ease), background var(--t1) var(--ease); }
.frow .fn { font: 500 var(--label)/1 var(--sans); font-feature-settings: var(--num-features); }
.frow:hover, .frow.is-hover, [data-state="hover"] .frow { color: var(--ink-2); background: var(--hover); }
.frow:active, .frow.is-active, [data-state="active"] .frow { background: var(--pressed); color: var(--ink); transition: none; }
.frow[aria-current="step"], .frow.is-selected { color: var(--ink); font-weight: 500; }
.frow:focus-visible, .frow.is-focus, [data-state="focus"] .frow { outline: 2px solid var(--ink); outline-offset: -2px; }
.frow[aria-disabled="true"], .frow.is-disabled, [data-state="disabled"] .frow { color: rgba(17, 20, 23, 0.4); background: transparent; cursor: not-allowed; }

/* ---------- Disclosure row (round nine, from the pricing page's questions): a question that opens its answer in place.
   The question in the serif at the quote size, a 16 px plus at the right that loses its upright when open; hairlines
   between. Rest ink on white; hover --hover; pressed --pressed; focus a ring inside; disabled ink at 40 %. The answer opens
   and closes over 160 ms on the ease (its grid row from 0fr to 1fr); the 4 px inside the clip keeps its ascenders (base.css,
   "Trimmed text in a clipping box"), and the open row gives the same 4 px back under the question. A.disclosure builds and
   wires it; .open on .disc opens a row for a render. ---------- */
.discs { box-shadow: inset 0 1px 0 var(--line); }
.disc { box-shadow: inset 0 -1px 0 var(--line); }
.disc > h3 { margin: 0; font: inherit; }
.drow { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) var(--s3); margin: 0; border: 0;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--t1) var(--ease), padding var(--t1) var(--ease); }
.drow .dt { font: 400 var(--quote)/1.3 var(--serif); text-box: trim-both cap alphabetic; text-wrap: balance; }
.drow .pl { flex: none; }
.drow .pl .v { transition: transform var(--t1) var(--ease); transform-origin: 12px 12px; }
.drow:hover, .drow.is-hover, [data-state="hover"] .drow { background: var(--hover); }
.drow:active, .drow.is-active, [data-state="active"] .drow { background: var(--pressed); transition: none; }
.drow:focus-visible, .drow.is-focus, [data-state="focus"] .drow { outline: 2px solid var(--ink); outline-offset: -2px; }
.drow[disabled], .drow.is-disabled, [data-state="disabled"] .drow { color: rgba(17, 20, 23, 0.4); background: transparent; cursor: not-allowed; }
.disc.open .drow { padding-bottom: calc(var(--s5) - var(--s1)); }
.disc.open .drow .pl .v { transform: scaleY(0); }
.dbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t1) var(--ease); }
.disc.open .dbody { grid-template-rows: 1fr; }
.dbody > div { overflow: hidden; min-height: 0; }
.dbody .body { padding: var(--s1) var(--s3) var(--s5); max-width: 40em; }
.disc:not(.open) .dbody > div { visibility: hidden; transition: visibility 0s linear var(--t1); }

/* ---------- Steps (section 19, A.steps in core.js): the number at the UI size in ink-2 (r11; the label size in ink-3
   read as too small), 12 to the title at the lead size in Switzer 500 and ink, 16 to the text at the body size in ink-2 (r11: 8, then 12, read as none under a
   22 px title), 48 between steps; every gap from the letters (each line trimmed to cap and baseline). The text sets
   at 1.4 rather than the body's 1.6, so a line that wraps reads as one block under its title. .steps-row sets two to a row from 768 up, 48 between columns. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--s8); }
.step { margin: 0; min-width: 0; }
.step-n { margin: 0; font: 400 var(--ui)/var(--ui-lh) var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); text-box: trim-both cap alphabetic; }
.step-n:empty { display: none; }   /* an aside's steps, outside the page's count (n: '') */
.step-t { margin: var(--s3) 0 0; font: 500 var(--lead)/var(--lead-lh) var(--sans); color: var(--ink); text-wrap: balance; text-box: trim-both cap alphabetic; }
.step-x { margin: var(--s4) 0 0; max-width: 34em; font: 400 var(--body)/1.4 var(--sans); color: var(--ink-2); text-wrap: pretty; text-box: trim-both cap alphabetic; }
/* Compact (A.steps size: 'compact'): the title at the body size, the line at the UI size, for a list beside a stage. */
.steps-compact .step-n { font-size: var(--label); line-height: var(--label-lh); }
.steps-compact .step-t { font: 500 var(--body)/var(--body-lh) var(--sans); }
.steps-compact .step-x { font: 400 var(--ui)/1.4 var(--sans); }
@media (min-width: 768px) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } }

/* ---------- Icons (device.js A.icon): 24 grid, 1.5 px on screen at every size, square caps, outlines only. */
.ic { display: inline-block; flex: none; vertical-align: middle; }