/*
  Unstamp interface.
  Built on tokens.css (the brand's source of truth): paper is the ground, ink is what stays,
  stamp red is what goes. Red appears only on a mark that was found and on a refusal.
  Signature blue is for links, focus and the cleared state. Buttons are ink.
  No raw colour values below this line: components use the tokens.
*/

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--cm-space-4); }
body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: var(--cm-font-sans);
  font-size: var(--cm-body-size);
  line-height: var(--cm-body-line);
  font-weight: var(--cm-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
h1, h2, h3 { font-family: var(--cm-font-serif); font-weight: var(--cm-weight-semi); }
em, i, cite, address, dfn { font-style: normal; }
em { font-weight: var(--cm-weight-semi); }
img, svg, canvas { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

a { color: var(--cm-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cm-blue-press); text-decoration-thickness: 2px; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid transparent;      /* shows in forced colours, where the shadow does not */
  outline-offset: 2px;
  box-shadow: var(--cm-focus-ring);
  border-radius: var(--cm-radius-stamp);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--cm-gutter); top: -4rem; z-index: 10;
  background: var(--cm-action); color: var(--cm-action-text);
  padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-control);
  font-weight: var(--cm-weight-semi); text-decoration: none;
}
.skip:focus { top: var(--cm-space-2); color: var(--cm-action-text); }

/* ---------- small parts used everywhere ---------- */
.label {
  font-family: var(--cm-font-sans);
  font-size: var(--cm-label-size); line-height: var(--cm-label-line);
  font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-label-track);
  text-transform: uppercase; color: var(--cm-text-meta);
}
.num { font-variant-numeric: var(--cm-numeric); color: var(--cm-text-meta); }

/* A file kind is a word on an ink tab. One colour for every kind: the word tells them apart. */
.kind {
  display: inline-block; flex: none;
  background: var(--cm-ink); color: var(--cm-sheet);
  font-size: var(--cm-label-size); line-height: var(--cm-label-line);
  font-weight: var(--cm-weight-bold); letter-spacing: var(--cm-label-track); text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--cm-radius-stamp);
}

/* A word in a frame is a stamp. Status stamps sit level; a stamped word in a headline tilts. */
.stamp {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-family: var(--cm-font-sans);
  font-size: var(--cm-stamp-sm-size); line-height: var(--cm-stamp-sm-line);
  font-weight: var(--cm-weight-stamp); letter-spacing: var(--cm-stamp-track); text-transform: uppercase;
  padding: 2px 6px; border: var(--cm-line-control) solid currentColor; border-radius: var(--cm-radius-stamp);
  color: var(--cm-state-mark); white-space: nowrap;
}
.stamp.found { color: var(--cm-state-mark); background: var(--cm-state-mark-bg); }
.stamp.cleared { color: var(--cm-state-cleared); background: var(--cm-state-cleared-bg); }
.stamp.cleared::before {
  content: ""; width: 9px; height: 5px; margin: -3px 1px 0 1px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.stamp.check { color: var(--cm-state-check); background: var(--cm-state-check-bg); }
.stamp.refused { color: var(--cm-state-refused); background: var(--cm-state-refused-bg); border-color: var(--cm-state-refused-bg); }

h1 .stamp {
  display: inline-block;
  font-size: var(--cm-stamp-inline); line-height: 1;
  padding: 0.16em 0.34em 0.13em; margin: 0 0.1em;
  border-width: var(--cm-line-stamp); border-radius: var(--cm-radius-stamp);
  transform: rotate(var(--cm-stamp-tilt-inline)); vertical-align: 0.16em;
  background: none; color: var(--cm-state-mark);
}

/* ---------- buttons and fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cm-space-2);
  min-height: var(--cm-tap); padding: 11px 20px;
  background: var(--cm-action); color: var(--cm-action-text);
  border: var(--cm-line-control) solid var(--cm-action); border-radius: var(--cm-radius-control);
  font-size: var(--cm-button-size); line-height: var(--cm-button-line); font-weight: var(--cm-weight-semi);
  text-decoration: none; text-align: center;
  transition: background var(--cm-dur-quick) var(--cm-ease-out), border-color var(--cm-dur-quick) var(--cm-ease-out);
}
.btn:hover { background: var(--cm-ink-hover); border-color: var(--cm-ink-hover); color: var(--cm-action-text); text-decoration: none; }
.btn:active { background: var(--cm-ink-press); border-color: var(--cm-ink-press); }
.btn:focus-visible { border-radius: var(--cm-radius-control); }
.btn.quiet { background: transparent; color: var(--cm-text); border-color: var(--cm-ink); }
.btn.quiet:hover { background: var(--cm-surface-sunken); color: var(--cm-text); }
.btn.quiet:active { background: var(--cm-rule); }
.btn[disabled] { background: var(--cm-surface-sunken); border-color: var(--cm-edge); color: var(--cm-text-meta); cursor: not-allowed; }

.linkish {
  background: none; border: 0; padding: 4px 0; min-height: 24px;
  color: var(--cm-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-size: var(--cm-small-size); line-height: var(--cm-small-line);
}
.linkish:hover { color: var(--cm-blue-press); text-decoration-thickness: 2px; }

.icon-btn {
  display: grid; place-items: center; flex: none;
  width: var(--cm-tap); height: var(--cm-tap);
  background: none; border: 0; border-radius: var(--cm-radius-control); color: var(--cm-text-secondary);
  transition: background var(--cm-dur-quick) var(--cm-ease-out);
}
.icon-btn:hover { background: var(--cm-surface-sunken); color: var(--cm-text); }
.icon-btn:focus-visible { border-radius: var(--cm-radius-control); }
.icon-btn[disabled] { color: var(--cm-rule); cursor: not-allowed; background: none; }

input[type="text"], select {
  min-height: var(--cm-tap); padding: 9px 12px;
  background: var(--cm-surface); color: var(--cm-text);
  border: var(--cm-border-control); border-radius: var(--cm-radius-control);
  font-size: var(--cm-body-size); line-height: 1.5rem;
}
input[type="text"]:hover, select:hover { border-color: var(--cm-ink); }
input[type="text"]:focus-visible, select:focus-visible { border-color: var(--cm-focus); border-radius: var(--cm-radius-control); }
input[type="range"] { accent-color: var(--cm-ink); min-height: 24px; }
input[type="radio"] { accent-color: var(--cm-ink); width: 20px; height: 20px; margin: 0; flex: none; }

/* ---------- page frame: the bench ---------- */
/* The first screen is a workbench in two halves: the words and the one action on white, the page itself on ink.
   Both halves keep their content on the same two edges as the sections below. */
:root { --cm-pane-max: 41.25rem; --cm-pad: clamp(1.25rem, 4vw, 2.5rem); }
.bench { display: flex; flex-wrap: wrap; min-height: clamp(40rem, 100vh, 50rem); }
.side { flex: 1 1 31.25rem; display: flex; min-width: 0; }
.side-words { justify-content: flex-end; background: var(--cm-bg); }
.side-page { justify-content: flex-start; background: var(--cm-ink); color: var(--cm-on-ink); }
.side-in { width: 100%; max-width: var(--cm-pane-max); min-width: 0; padding: 1.375rem var(--cm-pad) 2rem; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; min-height: var(--cm-tap); }
.logo { display: block; line-height: 0; border-radius: var(--cm-radius-stamp); }
.logo img { display: block; height: 36px; width: auto; }
.top-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 var(--cm-space-1); min-height: var(--cm-tap); margin-right: -10px; font-size: 0.9375rem; line-height: 1.25rem; font-weight: var(--cm-weight-semi); }
.top-nav a, .top-nav span { padding: 12px 10px; color: var(--cm-on-ink-2); text-decoration: none; }
.top-nav a:hover { color: var(--cm-on-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.top-nav [aria-current] { color: var(--cm-on-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top-nav :focus-visible, .foot :focus-visible { box-shadow: 0 0 0 2px var(--cm-ink), 0 0 0 4px var(--cm-blue-on-ink); }

/* ---------- the words and the one action ---------- */
.words { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2.25rem, 6vw, 5.25rem) 0 1.75rem; }
h1 { font-weight: var(--cm-weight-regular); font-size: clamp(2.125rem, 3.6vw, 3.125rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.home h1 { font-size: clamp(2.125rem, 4.7vw, 4rem); line-height: 1.02; }
h1 .accent { font-weight: var(--cm-weight-regular); }
.lede { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6875rem; color: var(--cm-text-secondary); max-width: 31.25rem; }
.tool { width: 100%; margin-top: 1.75rem; display: grid; gap: 1.125rem; justify-items: start; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.125rem; cursor: pointer; }
.btn.big { min-height: 3.25rem; padding: 0 1.75rem; font-size: 1.0625rem; border-radius: 8px; }
.drop-help { display: grid; gap: 1px; font-size: 0.9375rem; line-height: 1.375rem; color: var(--cm-text-meta); }
.drop-help .takes { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); }
@media (hover: none) and (pointer: coarse) {
  .drop-help .if-drop { display: none; }
}
/* a file held over the page: the whole window says where it will land */
body:has(.drop.over)::after {
  content: "Drop it to begin"; position: fixed; inset: 12px; z-index: 20; pointer-events: none;
  display: grid; place-items: center;
  border: 2px dashed var(--cm-blue); border-radius: 10px; background: rgba(228, 233, 245, 0.92);
  font-family: var(--cm-font-serif); font-size: 2.25rem; color: var(--cm-ink);
}
.confirm {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--cm-space-3); row-gap: 2px;
  max-width: 33rem; padding: 10px 12px; margin: -10px -12px; border-radius: var(--cm-radius-sheet);
  transition: background var(--cm-dur-base) var(--cm-ease-out);
}
.confirm input {
  grid-row: 1 / span 3; appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin: 0; cursor: pointer;
  background: var(--cm-surface); border: var(--cm-border-strong); border-radius: var(--cm-radius-stamp);
  display: grid; place-content: center;
}
.confirm input::after {
  content: ""; width: 12px; height: 6px; margin-top: -3px;
  border-left: 2.5px solid var(--cm-action-text); border-bottom: 2.5px solid var(--cm-action-text);
  transform: rotate(-45deg) scale(0); transition: transform var(--cm-dur-quick) var(--cm-ease-out);
}
.confirm input:checked { background: var(--cm-ink); }
.confirm input:checked::after { transform: rotate(-45deg) scale(1); }
.confirm label { font-weight: var(--cm-weight-semi); font-size: 0.9375rem; line-height: 1.5rem; cursor: pointer; }
.confirm-more, .confirm-nudge { grid-column: 2; font-size: var(--cm-caption-size); line-height: 1.25rem; color: var(--cm-text-meta); }
/* files are waiting for this: highlighter, the brand's colour for "look here" */
.confirm.needed { background: var(--cm-state-check-bg); box-shadow: inset 4px 0 0 var(--cm-state-check); }
.confirm.needed .confirm-more { color: var(--cm-ink); }
.confirm-nudge { font-weight: var(--cm-weight-bold); color: var(--cm-state-check); margin-top: 4px; }
.sample { font-size: 0.9375rem; font-weight: var(--cm-weight-semi); min-height: var(--cm-tap); text-align: left; }
.trust { margin-top: auto; padding-top: 1rem; border-top: var(--cm-border-hair); font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-meta); }

/* ---------- the page on ink: the proof, or a refusal on the house rules ---------- */
.proof { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.proof-tags { display: flex; justify-content: space-between; align-items: center; }
.stamp.on-ink { background: none; }
.stamp.on-ink.was { color: var(--cm-stamp-on-ink); }
.stamp.on-ink.now { color: var(--cm-blue-on-ink); }
.proof .compare { border-radius: 6px; overflow: hidden; background: #F6F5F1; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42); }
.proof .compare img { width: 100%; height: auto; max-height: none; }
.proof .compare .handle { background: var(--cm-ink); box-shadow: none; }
.proof .compare .handle::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cm-sheet), 0 4px 12px rgba(20, 27, 45, 0.35); }
.proof .compare .handle::before { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.proof .compare:focus-within .handle::after { box-shadow: 0 0 0 2px var(--cm-sheet), 0 0 0 5px var(--cm-blue-on-ink); }
.proof figcaption { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-on-ink-2); max-width: 35rem; }
.plain .bench { min-height: 27rem; }
.exhibit { display: grid; gap: 1.125rem; justify-items: start; max-width: 33rem; margin-top: clamp(2rem, 7vw, 5.25rem); }
.exhibit .stamp { font-size: var(--cm-stamp-md-size); line-height: var(--cm-stamp-md-line); padding: 4px 9px; transform: rotate(var(--cm-stamp-tilt-inline)); }
.exhibit blockquote { margin: 0; font-family: var(--cm-font-serif); font-size: clamp(1.375rem, 2.1vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; }
.exhibit-links { list-style: none; display: grid; gap: 0; margin-top: -0.25rem; }
.exhibit-links a { display: inline-block; padding: 7px 0; font-family: var(--cm-font-serif); font-size: 1.25rem; line-height: 1.625rem; color: var(--cm-on-ink); text-decoration-color: var(--cm-blue-on-ink); }
.exhibit-links a:hover { color: var(--cm-blue-on-ink); }
.exhibit-links :focus-visible { box-shadow: 0 0 0 2px var(--cm-ink), 0 0 0 4px var(--cm-blue-on-ink); }
.lede a { font-weight: var(--cm-weight-semi); white-space: nowrap; }
.exhibit figcaption { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-on-ink-2); }

/* ---------- once a file is in: the words step back to a rail and the page side becomes the work ---------- */
body.has-files .proof, body.has-files .lede, body.has-files .sample { display: none; }
body.has-files .bench { min-height: 100vh; }
body.has-files .side-words { flex: 0 1 25rem; }
body.has-files .side-page { flex: 1 1 35rem; }
body.has-files .side-words .side-in { max-width: 25rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; }
body.has-files .side-page .side-in { max-width: none; }
body.has-files .words { padding-top: 2rem; }
body.has-files h1 { font-size: 1.75rem; line-height: 2.125rem; letter-spacing: -0.012em; }
body.has-files .btn.big { min-height: var(--cm-tap); padding: 0 1.25rem; font-size: var(--cm-button-size); background: transparent; color: var(--cm-text); }
body.has-files .btn.big:hover { background: var(--cm-surface-sunken); }


/* ---------- the list of files, on the ink side ---------- */
.queue { margin-top: 1.25rem; }
.queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cm-space-4); margin: 0 0 10px; }
.queue-head .label { color: var(--cm-on-ink); }
.queue-sum { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-on-ink-2); font-variant-numeric: var(--cm-numeric); }
.side-page .card { color: var(--cm-text); border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.queue-list { display: grid; gap: var(--cm-space-3); }

.card {
  background: var(--cm-surface); border: var(--cm-border-hair); border-radius: var(--cm-radius-sheet);
  box-shadow: var(--cm-shadow-sheet); overflow: hidden;
  animation: arrive var(--cm-dur-lift) var(--cm-ease-out) both;
}
@keyframes arrive { from { opacity: 0; transform: translateY(var(--cm-lift-rise)); } }
.card-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto var(--cm-tap);
  column-gap: 14px; align-items: center; padding: 10px 8px 10px var(--cm-space-4);
}
.card-name { min-width: 0; }
.fname {
  font-family: var(--cm-font-sans); font-size: var(--cm-body-size); line-height: 1.375rem; font-weight: var(--cm-weight-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fmeta { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); font-variant-numeric: var(--cm-numeric); }
.status { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); font-variant-numeric: var(--cm-numeric); }
.card-body { border-top: var(--cm-border-hair); }
.card-body:empty { display: none; }

/* the lift: when a file is cleared its stamp arrives the way a stamp leaves, 6 px and a breath */
.card.just-cleared .stamp.cleared { animation: arrive var(--cm-dur-lift) var(--cm-ease-out) both; }

/* ---------- waiting and working ---------- */
.wait { padding: 18px var(--cm-space-5) var(--cm-space-5); }
.wait .step { font-weight: var(--cm-weight-semi); }
.wait .more { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); max-width: var(--cm-measure); }
.wait .btn { margin-top: 14px; }
.wait.hold { box-shadow: inset 4px 0 0 var(--cm-state-check); }
.card[data-state="waiting"] ~ .card[data-state="waiting"] .card-body { display: none; }

.bar { height: 3px; margin-top: var(--cm-space-4); background: var(--cm-surface-sunken); border-radius: 2px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 28%; background: var(--cm-ink); border-radius: 2px; animation: travel 1.5s var(--cm-ease-move) infinite; }
.bar.measured > span { animation: none; width: var(--done, 0%); transition: width var(--cm-dur-base) linear; }
@keyframes travel { from { transform: translateX(-100%); } to { transform: translateX(360%); } }

/* the picture while it is being read: a thin blue line passes over a wash of stamp tint */
.sweep { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto 18px; line-height: 0; box-shadow: var(--cm-shadow-lift); overflow: hidden; }
.sweep img { display: block; max-width: 100%; max-height: min(52vh, 480px); width: auto; height: auto; }
.sweep::before { content: ""; position: absolute; inset: 0; background: var(--cm-state-mark-bg); opacity: 0.28; }
.sweep span { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--cm-blue); animation: sweep 1.9s var(--cm-ease-move) infinite alternate; }
@keyframes sweep { from { top: 0; } to { top: calc(100% - 1px); } }

/* ---------- notices: refused, not processed ---------- */
/* the decision and the way forward on the left; the record, in small print, on the right */
.notice { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--cm-space-6); align-items: start; padding: var(--cm-space-5) var(--cm-space-5) 22px 28px; box-shadow: inset 4px 0 0 var(--cm-edge); }
.notice.refused { box-shadow: inset 4px 0 0 var(--cm-state-refused-bg); }
.notice.check { box-shadow: inset 4px 0 0 var(--cm-state-check); }
.notice h4 { font-family: var(--cm-font-serif); font-size: var(--cm-h3-size); line-height: var(--cm-h3-line); letter-spacing: var(--cm-h3-track); font-weight: var(--cm-weight-semi); max-width: 34ch; text-wrap: balance; }
.notice-main p { margin-top: var(--cm-space-2); max-width: var(--cm-measure); color: var(--cm-text-secondary); }
.notice .fine { padding-left: var(--cm-space-4); border-left: var(--cm-border-hair); font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-meta); overflow-wrap: anywhere; }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--cm-space-2); margin-top: var(--cm-space-4); }

/* ---------- the workspace: a page or picture on the left, the controls beside it ---------- */
.work {
  display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; align-items: start;
  background: linear-gradient(to right, var(--cm-surface-sunken) calc(100% - 20.5rem), var(--cm-surface) 0);
}
/* the page stays put while the controls beside it scroll */
.stage {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: center;
  min-height: 20rem; padding: var(--cm-space-5);
}
.stage canvas {
  display: block; max-width: 100%; max-height: min(70vh, 46rem); width: auto; height: auto;
  background: repeating-conic-gradient(var(--cm-well) 0 25%, var(--cm-paper) 0 50%) 0 0 / 16px 16px;
  box-shadow: var(--cm-shadow-lift); touch-action: none; cursor: crosshair;
}
.stage canvas[data-tool="pick"] { cursor: pointer; }
.stage canvas:focus-visible { border-radius: 0; }
.stage.wide { align-items: flex-start; }
.stage.wide canvas { max-height: none; width: 100%; }
.fit {
  position: absolute; right: var(--cm-space-2); bottom: var(--cm-space-2);
  min-height: 28px; padding: 4px 10px;
  background: var(--cm-surface); color: var(--cm-text); border: var(--cm-border-control); border-radius: var(--cm-radius-control);
  font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); font-weight: var(--cm-weight-semi);
}
.fit:hover { border-color: var(--cm-ink); }

.panel { display: flex; flex-direction: column; gap: 18px; padding: 18px var(--cm-space-5) var(--cm-space-5); border-left: var(--cm-border-hair); min-width: 0; }
.panel .intro { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); }
.group { display: grid; gap: var(--cm-space-2); min-width: 0; }
.group + .group, .intro + .group { padding-top: 18px; border-top: var(--cm-border-hair); }
.hint { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); }
.field { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-3); font-size: var(--cm-small-size); line-height: var(--cm-small-line); font-weight: var(--cm-weight-semi); }
.field select { min-height: 40px; padding-block: 7px; font-weight: var(--cm-weight-regular); font-size: var(--cm-small-size); max-width: 13rem; }
.field.range input { flex: 1; max-width: 11rem; }

.seg { display: flex; border: var(--cm-border-strong); border-radius: var(--cm-radius-control); overflow: hidden; }
.seg button {
  flex: 1; min-height: 38px; padding: 7px 6px; border: 0; background: transparent; color: var(--cm-text);
  font-size: var(--cm-small-size); line-height: var(--cm-small-line); font-weight: var(--cm-weight-medium);
}
.seg button + button { border-left: var(--cm-border-strong); }
.seg button:hover { background: var(--cm-surface-sunken); }
.seg button[aria-pressed="true"] { background: var(--cm-ink); color: var(--cm-sheet); font-weight: var(--cm-weight-semi); }
.seg button:focus-visible { box-shadow: inset 0 0 0 2px var(--cm-surface), inset 0 0 0 4px var(--cm-focus); border-radius: 0; }

/* marks the detector found: a red frame when it will be removed, an empty dashed frame when switched off */
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mark {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 9px 4px 7px;
  font-size: var(--cm-stamp-sm-size); line-height: var(--cm-stamp-sm-line); font-weight: var(--cm-weight-stamp);
  letter-spacing: var(--cm-stamp-track); text-transform: uppercase;
  color: var(--cm-state-mark); background: var(--cm-state-mark-bg);
  border: var(--cm-line-control) solid var(--cm-state-mark); border-radius: var(--cm-radius-stamp);
}
.mark::before { content: ""; width: 9px; height: 9px; border: var(--cm-line-control) solid currentColor; background: currentColor; border-radius: 1px; }
.mark.maybe { border-style: dashed; background: transparent; }
.mark[aria-pressed="false"] { color: var(--cm-text-meta); background: transparent; border: var(--cm-line-control) dashed var(--cm-edge); }
.mark[aria-pressed="false"]::before { background: transparent; }
.mark:hover { box-shadow: 0 0 0 1px currentColor; }
.more-marks { font-size: var(--cm-caption-size); color: var(--cm-text-meta); }
.all-marks { display: flex; gap: var(--cm-space-4); }

.pager { display: grid; grid-template-columns: var(--cm-tap) minmax(0, 1fr) var(--cm-tap); align-items: center; border: var(--cm-border-control); border-radius: var(--cm-radius-control); }
.pagelabel { text-align: center; font-weight: var(--cm-weight-semi); font-size: var(--cm-small-size); font-variant-numeric: var(--cm-numeric); }
.page-state { display: flex; align-items: flex-start; gap: var(--cm-space-2); min-height: 2.25rem; font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-secondary); }
.page-state .stamp { margin-top: -2px; }
.tool-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.tips { grid-column: 1 / -1; grid-row: 1; }
.tips summary { display: inline-block; cursor: pointer; list-style: none; padding: 4px 0; min-height: 24px; color: var(--cm-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: var(--cm-small-size); line-height: var(--cm-small-line); }
.tips summary::-webkit-details-marker { display: none; }
.tips .hint { margin-top: 4px; }
.tool-foot .clear { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 5px 0; font-size: var(--cm-small-size); line-height: 1.25rem; cursor: pointer; }
.go-group .btn { width: 100%; }

/* ---------- done: the proof, the report, the download ---------- */
.compare-wrap { display: grid; justify-items: center; gap: var(--cm-space-3); padding: var(--cm-space-5) var(--cm-space-5) var(--cm-space-4); background: var(--cm-surface-sunken); border-bottom: var(--cm-border-hair); }
.compare { position: relative; display: block; max-width: 100%; line-height: 0; user-select: none; box-shadow: var(--cm-shadow-lift); background: repeating-conic-gradient(var(--cm-well) 0 25%, var(--cm-paper) 0 50%) 0 0 / 16px 16px; }
.compare img { display: block; max-width: 100%; max-height: min(64vh, 42rem); width: auto; height: auto; }
.compare .before { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 50% 0 0); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--cm-sheet); box-shadow: 0 0 0 1px var(--cm-ink); pointer-events: none; }
.compare .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: var(--cm-radius-control); background: var(--cm-ink); box-shadow: 0 0 0 2px var(--cm-sheet);
}
.compare .handle::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--cm-sheet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14.5 12.5 9 18l5.5 5.5M21.5 12.5 27 18l-5.5 5.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 36px 36px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14.5 12.5 9 18l5.5 5.5M21.5 12.5 27 18l-5.5 5.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 36px 36px no-repeat;
}
.compare:focus-within .handle::after { box-shadow: 0 0 0 2px var(--cm-sheet), 0 0 0 4px var(--cm-focus); }
.compare .tag {
  position: absolute; top: 10px; pointer-events: none;
  background: var(--cm-ink); color: var(--cm-sheet);
  font-size: var(--cm-label-size); line-height: var(--cm-label-line); font-weight: var(--cm-weight-stamp);
  letter-spacing: var(--cm-stamp-track); text-transform: uppercase; padding: 3px 7px; border-radius: var(--cm-radius-stamp);
}
.compare .tag.l { left: 10px; }
.compare .tag.r { right: 10px; }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-cap { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); text-align: center; }

.result { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--cm-space-6); align-items: start; padding: var(--cm-space-5); }
.report { min-width: 0; }
.report .label + .lines { margin-top: var(--cm-space-2); }
.report .lines + .label { margin-top: 18px; }
.report-title { font-family: var(--cm-font-serif); font-size: var(--cm-h3-size); line-height: var(--cm-h3-line); letter-spacing: var(--cm-h3-track); font-weight: var(--cm-weight-semi); }
.lines { list-style: none; display: grid; gap: 6px; max-width: var(--cm-measure); }
.lines li { position: relative; padding-left: 22px; }
.lines li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 12px; border-top: var(--cm-line-control) solid var(--cm-text-meta); }
.note {
  margin-top: 14px; padding: 10px 14px; max-width: var(--cm-measure);
  background: var(--cm-state-check-bg); color: var(--cm-ink); box-shadow: inset 4px 0 0 var(--cm-state-check);
  font-size: var(--cm-small-size); line-height: var(--cm-small-line); border-radius: var(--cm-radius-stamp);
}

.phrase { margin-top: 18px; max-width: var(--cm-measure); }
.phrase summary { display: inline-block; cursor: pointer; color: var(--cm-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: var(--cm-small-size); line-height: var(--cm-small-line); padding: 3px 0; list-style: none; }
.phrase summary::-webkit-details-marker { display: none; }
.phrase[open] summary { color: var(--cm-text); text-decoration: none; font-weight: var(--cm-weight-semi); cursor: default; }
.phrase form { display: grid; gap: var(--cm-space-2); margin-top: 6px; }
.phrase label { font-size: var(--cm-small-size); line-height: var(--cm-small-line); font-weight: var(--cm-weight-semi); }
.phrase.lead label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.phrase-row { display: flex; gap: var(--cm-space-2); }
.phrase-row input { flex: 1; min-width: 0; }

.get { display: grid; gap: var(--cm-space-2); }
.get .btn { width: 100%; }
.get .file { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); overflow-wrap: anywhere; font-variant-numeric: var(--cm-numeric); }
.get .deal { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); }
.get .deal strong { color: var(--cm-text); font-weight: var(--cm-weight-semi); }
.get .deal + .btn { margin-top: var(--cm-space-2); }

/* ---------- below the bench ---------- */
.band-in { width: 100%; max-width: calc(2 * var(--cm-pane-max)); margin-inline: auto; padding-inline: var(--cm-pad); }
/* one claim, set large, with the method in a line each beside it */
.claim { padding-block: 5.5rem 5.25rem; }
.claim .band-in { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem 4.5rem; }
.claim-words { flex: 1.25 1 27.5rem; min-width: 0; }
.claim h2 { font-weight: var(--cm-weight-regular); font-size: clamp(2rem, 3.3vw, 2.875rem); line-height: 1.07; letter-spacing: -0.015em; text-wrap: balance; }
.claim-words p { margin-top: 1.375rem; max-width: 35rem; font-size: 1.125rem; line-height: 1.6875rem; color: var(--cm-text-secondary); }
.claim-words .claim-link { margin-top: 0.625rem; font-size: 1rem; }
.claim-link a { display: inline-block; padding: 12px 0; font-weight: var(--cm-weight-semi); }
.rows { flex: 1 1 23.75rem; min-width: 0; list-style: none; border-bottom: var(--cm-border-hair); }
.rows li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; padding: 1.25rem 0; border-top: var(--cm-border-hair); }
.row-name { font-weight: var(--cm-weight-regular); font-size: 1.5rem; line-height: 1.75rem; }
.row-name .stamp { vertical-align: 0.2em; }
.rows p { color: var(--cm-text-secondary); }
.faq { background: var(--cm-surface-sunken); border-top: 1px solid #E1E6F0; padding-block: 4.5rem 5rem; }
.faq .band-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.75rem 4.5rem; }
.faq h2 { flex: 1 1 16rem; font-weight: var(--cm-weight-regular); font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.015em; }
.faq-list { flex: 2.2 1 30rem; min-width: 0; border-bottom: 1px solid #C9D0E0; }
.faq details { border-top: 1px solid #C9D0E0; }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0;
  font-size: var(--cm-h4-size); line-height: var(--cm-h4-line); font-weight: var(--cm-weight-semi);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; margin-top: -1px; border-top: 2px solid var(--cm-blue); transition: transform var(--cm-dur-base) var(--cm-ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--cm-link); }
.faq details p { padding: 0 44px 20px 0; max-width: var(--cm-measure); color: var(--cm-text-secondary); }
.jobs { padding-block: 3.5rem 4.5rem; }
.jobs-row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0 1.5rem; margin-top: 1rem; }
.job { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 0.875rem 0 1.125rem; border-top: 2px solid var(--cm-ink); color: var(--cm-text); text-decoration: none; }
.job:hover { color: var(--cm-text); text-decoration: none; }
.job-name { font-family: var(--cm-font-serif); font-size: 1.1875rem; line-height: 1.5rem; letter-spacing: var(--cm-h3-track); }
.job:hover .job-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.job-kind { font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); }

/* ---------- paying: the note after a payment, the choice beside a file, the pricing page ---------- */
.paid-note { margin-bottom: 1.25rem; padding: 10px 12px; max-width: 33rem; border-radius: var(--cm-radius-sheet); background: var(--cm-state-cleared-bg); box-shadow: inset 4px 0 0 var(--cm-state-cleared); font-size: var(--cm-small-size); line-height: var(--cm-small-line); font-weight: var(--cm-weight-semi); }
.paid-note.bad { background: var(--cm-state-check-bg); box-shadow: inset 4px 0 0 var(--cm-state-check); }
.pay-box:empty { display: none; }
.pay-box { margin-top: var(--cm-space-3); padding-top: var(--cm-space-3); border-top: var(--cm-border-hair); }
.pay-lead { font-weight: var(--cm-weight-semi); font-size: 0.9375rem; margin-bottom: var(--cm-space-2); }
.pay-plans { display: grid; gap: 6px; }
.pay-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--cm-space-3); align-items: baseline; min-height: var(--cm-tap); padding: 9px 12px; text-align: left; background: var(--cm-surface); border: var(--cm-border-control); border-radius: var(--cm-radius-control); }
.pay-plan:hover { border-color: var(--cm-ink); background: var(--cm-surface-sunken); }
.pay-plan.featured { border: var(--cm-border-strong); }
.pay-name { font-weight: var(--cm-weight-semi); }
.pay-price { font-variant-numeric: var(--cm-numeric); font-weight: var(--cm-weight-semi); }
.pay-each { grid-column: 1 / -1; font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); }
.pay-fine { margin-top: var(--cm-space-2); font-size: var(--cm-caption-size); line-height: var(--cm-caption-line); color: var(--cm-text-meta); }
.pricing .bench { min-height: 30rem; }
.exhibit.steps ol { list-style: none; display: grid; gap: 1.5rem; }
.exhibit.steps li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.exhibit.steps .stamp { transform: none; justify-self: start; }
.exhibit.steps p { font-family: var(--cm-font-serif); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; letter-spacing: -0.01em; }
.plans { padding-block: 5rem 4rem; }
.plans h2, .pass h2 { font-weight: var(--cm-weight-regular); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; }
.plan-row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1rem; margin-top: 2.25rem; }
.plan { display: flex; flex-direction: column; gap: 4px; padding: 1.25rem 1.25rem 1.375rem; background: var(--cm-surface); border: var(--cm-border-hair); border-top: 2px solid var(--cm-ink); border-radius: var(--cm-radius-sheet); }
.plan.featured { background: var(--cm-ink); color: var(--cm-on-ink); border-color: var(--cm-ink); }
.plan h3 { font-family: var(--cm-font-sans); font-size: 0.9375rem; line-height: 1.375rem; font-weight: var(--cm-weight-semi); }
.plan-price { font-family: var(--cm-font-serif); font-size: 3rem; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: var(--cm-numeric); margin-top: 0.5rem; }
.plan-price span { font-family: var(--cm-font-sans); font-size: 1rem; letter-spacing: 0; color: var(--cm-text-meta); }
.plan-each { font-size: var(--cm-small-size); line-height: var(--cm-small-line); font-weight: var(--cm-weight-semi); }
.plan-line { flex: 1; margin-top: 0.75rem; font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); }
.plan.featured .plan-line, .plan.featured .plan-price span { color: var(--cm-on-ink-2); }
.plan .btn { margin-top: 1.125rem; }
.plan.featured .btn { background: var(--cm-sheet); color: var(--cm-ink); border-color: var(--cm-sheet); }
.plan.featured .btn:hover { background: var(--cm-blue-tint); border-color: var(--cm-blue-tint); }
.plan.featured :focus-visible { box-shadow: 0 0 0 2px var(--cm-ink), 0 0 0 4px var(--cm-blue-on-ink); }
.plain-billing { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.5rem 2rem; margin-top: 2rem; color: var(--cm-text-secondary); }
.plain-billing li { padding-left: 1.125rem; position: relative; }
.plain-billing li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; border-top: 2px solid var(--cm-blue); }
.pass { padding-block: 0 4.5rem; }
.pass .band-in > * { min-width: 0; }
.pass .band-in { position: relative; display: flex; flex-wrap: wrap; gap: 1.5rem 4.5rem; align-items: flex-end; padding-top: 2.5rem; }
.pass .band-in::before { content: ""; position: absolute; top: 0; left: var(--cm-pad); right: var(--cm-pad); border-top: var(--cm-border-hair); }
.pass-state { margin-top: 0.75rem; color: var(--cm-text-secondary); overflow-wrap: anywhere; max-width: 34rem; }
.pass-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pass-form { flex: 1 1 22rem; display: grid; gap: 0.5rem; }
.pass-form label { font-weight: var(--cm-weight-semi); font-size: 0.9375rem; }
.pass-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pass-row input { flex: 1 1 14rem; min-width: 0; }

/* ---------- house rules: set as a document ---------- */
.rules { padding-block: 3.5rem 5rem; }
.rules .band-in { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--cm-space-7); align-items: start; }
.rules article { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--cm-space-6); padding: var(--cm-space-6) 0; border-top: var(--cm-border-hair); }
.rules article:first-child { border-top: 2px solid var(--cm-ink); }
.rule-tag { display: grid; gap: 6px; align-content: start; }
.rule-tag .num { font-family: var(--cm-font-serif); font-size: var(--cm-h3-size); line-height: var(--cm-h3-line); }
.rule-body h2 { font-weight: var(--cm-weight-regular); font-size: 1.75rem; line-height: 2.125rem; letter-spacing: -0.012em; }
.rule-body p { margin-top: var(--cm-space-3); max-width: var(--cm-measure); color: var(--cm-text-secondary); }
.rule-body .fine { font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-meta); }
.rule-body .fine .label { display: block; margin-bottom: 2px; }
.unset { background: var(--cm-state-check-bg); color: var(--cm-state-check); font-weight: var(--cm-weight-semi); padding: 2px 6px; border-radius: var(--cm-radius-stamp); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rules-aside { position: sticky; top: var(--cm-space-5); margin-top: var(--cm-space-6); border-left: 2px solid var(--cm-ink); padding-left: var(--cm-space-4); }
.rules-aside p { margin-top: var(--cm-space-2); font-size: var(--cm-small-size); line-height: var(--cm-small-line); color: var(--cm-text-secondary); }

/* ---------- foot, on ink ---------- */
.foot { background: var(--cm-ink); color: var(--cm-on-ink-2); border-top: 1px solid rgba(255, 255, 255, 0.14); }   /* a hairline, for pages where the ink panel meets the foot */
.foot-in { width: 100%; max-width: calc(2 * var(--cm-pane-max)); margin-inline: auto; padding: 2.5rem var(--cm-pad) 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.7fr); gap: var(--cm-space-7); }
.foot-logo { display: block; width: fit-content; line-height: 0; }
.foot-logo img { display: block; height: 32px; width: auto; }
.foot .label { margin-bottom: var(--cm-space-2); color: var(--cm-on-ink); }
.foot-nav ul { list-style: none; display: grid; gap: 2px; }
.foot-nav a, .foot-nav span { display: inline-block; padding: 3px 0; font-size: var(--cm-small-size); line-height: var(--cm-small-line); }
.foot-nav a { color: var(--cm-on-ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--cm-on-ink); text-decoration: underline; }
.foot-nav [aria-current] { color: var(--cm-on-ink); font-weight: var(--cm-weight-semi); }
.foot-note p { font-size: var(--cm-small-size); line-height: var(--cm-small-line); max-width: var(--cm-measure); }
.foot-note p + p { margin-top: var(--cm-space-1); }
.foot-note a { color: var(--cm-blue-on-ink); }
.foot-note a:hover { color: var(--cm-on-ink); }
.foot-note p > a:only-child, .rules-aside p > a:only-child { display: inline-block; padding: 4px 0; }


/* ---------- narrower screens ---------- */
/* with files in, the rail goes back on top before the cards get cramped */
@media (max-width: 1239px) {
  body.has-files .bench { display: block; min-height: 0; }
  body.has-files .side-words .side-in, body.has-files .side-page .side-in { max-width: none; position: static; height: auto; }
  body.has-files .words { padding: 1.25rem 0 1rem; }
  body.has-files .side-page .side-in { padding-bottom: 3rem; }
}
/* the two halves stack */
@media (max-width: 999px) {
  .bench { min-height: 0; }
  .side { justify-content: center; }
  .side-in { max-width: 45rem; }
  .words { padding-bottom: 1.5rem; }
  .trust { margin-top: 0.5rem; }
  .side-page .side-in { padding-bottom: 2.5rem; }
  .top-nav { justify-content: flex-start; margin: 0 -10px; }
  .exhibit { margin-top: 1.5rem; }
}
@media (max-width: 960px) {
  .notice { grid-template-columns: minmax(0, 1fr); row-gap: var(--cm-space-4); }
  .notice .fine { padding: var(--cm-space-3) 0 0; border-left: 0; border-top: var(--cm-border-hair); }
  .work { grid-template-columns: minmax(0, 1fr); background: none; }
  .stage { position: relative; background: var(--cm-surface-sunken); }
  .panel { border-left: 0; border-top: var(--cm-border-hair); background: var(--cm-surface); }
  .claim { padding-block: 4rem; }
  .rules .band-in { grid-template-columns: minmax(0, 1fr); }
  .rules-aside { position: static; margin-top: 0; }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-logo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .logo img { height: 32px; }
  .card-head { grid-template-columns: auto minmax(0, 1fr) var(--cm-tap); row-gap: 6px; padding-left: var(--cm-space-3); }
  .card-head .status { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; padding-bottom: 4px; }
  .card-head .remove { grid-column: 3; grid-row: 1; }
  .wait, .notice { padding-inline: var(--cm-space-4); }
  .notice { padding-left: var(--cm-space-5); }
  .stage { padding: var(--cm-space-3); min-height: 12rem; }
  .panel { padding-inline: var(--cm-space-4); }
  .result { grid-template-columns: minmax(0, 1fr); gap: var(--cm-space-5); padding: var(--cm-space-4); }
  .get { order: -1; }
  .phrase-row { flex-direction: column; }
  .compare-wrap { padding: var(--cm-space-3); }
  .claim { padding-block: 3rem; }
  .rows li { grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 1rem; }
  .faq { padding-block: 3rem 3.5rem; }
  .faq summary { padding-right: 36px; }
  .faq details p { padding-right: 0; }
  .rules { padding-block: 2.5rem 3.5rem; }
  .rules article { grid-template-columns: minmax(0, 1fr); row-gap: var(--cm-space-3); padding: var(--cm-space-5) 0; }
  .rule-tag { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--cm-space-2); }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: var(--cm-space-5); }
  input[type="text"], select { font-size: 1rem; }
}

/* ---------- reduced motion: the state still changes, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card.just-cleared .stamp.cleared { animation: none; }
  .bar > span { animation: none; width: 100%; opacity: 0.4; }
  .bar.measured > span { opacity: 1; width: var(--done, 0%); }
  .sweep span { animation: none; top: 50%; }
  .job:hover { transform: none; }
}

@media (forced-colors: active) {
  .stamp, .kind, .mark, .btn, .drop, .tool, .card { forced-color-adjust: auto; }
  .confirm input:checked { background: Highlight; }
}