/* PlainSign's design system: one stylesheet for every page.

   Two voices. Public Sans is PlainSign's: the interface, its buttons and
   forms. Source Serif 4 is the document's: the title of what is signed, as
   on the signing page in the PDF. A monospaced face is kept for what people
   compare character by character, such as references and fingerprints.

   The colours come from the logo's ink. Seal green marks the one thing to
   do on a page; everything else stays quiet. A status is a word with a dot,
   never colour alone. */

@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* Foundations */
:root {
  color-scheme: light;
  --paper: #f5f5f1;
  --sheet: #ffffff;
  --sunk: #ebebe5;
  --ink: #13231d;
  --ink-soft: #33433c;
  --stone: #59645f;
  --rule: #dcdcd4;
  --rule-strong: #b3b7ad;
  /* Form fields' borders, at 3:1 against the paper and sheets. */
  --field: #878c84;
  /* Seal green for text, links and lines; fill for what is filled with
     it, such as the main button, with on-fill written on it. In the light
     theme they are one colour, in the dark one they differ. */
  --seal: #1f4a3d;
  --seal-strong: #153529;
  --seal-tint: #e3ece7;
  --fill: #1f4a3d;
  --fill-strong: #153529;
  --on-fill: #ffffff;
  --info: #285a85;
  --info-tint: #e6eef6;
  --warn: #85560a;
  --warn-tint: #f7eedb;
  --danger: #a3302a;
  --danger-tint: #f9e8e6;
  --danger-fill: #a3302a;
  --danger-fill-strong: #86231e;
  --on-danger: #ffffff;

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* A scale after Bringhurst's: 12, 14, 16, 18, 21, 24, 30, 36. */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.3125rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.875rem;
  --t-4xl: 2.25rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --shadow-paper: 0 1px 2px rgb(19 35 29 / 0.08), 0 6px 20px -8px rgb(19 35 29 / 0.22);
  --shadow-pop: 0 2px 6px rgb(19 35 29 / 0.1), 0 16px 40px -12px rgb(19 35 29 / 0.3);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --quick: 140ms;
  --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--seal);
}
/* The dark theme: neutral charcoal, so the paper stays paper and only the
   seal is green. It follows the system, unless someone chose a theme in the
   account menu (theme.js sets data-theme). The two blocks are the same. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141617;
    --sheet: #1c1f20;
    --sunk: #0f1112;
    --ink: #ebedec;
    --ink-soft: #c9cdcb;
    --stone: #a3a9a6;
    --rule: #2e3234;
    --rule-strong: #4b5154;
    --field: #6b7174;
    --seal: #8fc2ab;
    --seal-strong: #b0d6c4;
    --seal-tint: #1d2a25;
    --fill: #2c6a55;
    --fill-strong: #347a62;
    --on-fill: #ffffff;
    --info: #9cc3e6;
    --info-tint: #18232d;
    --warn: #e3bd73;
    --warn-tint: #2d261a;
    --danger: #f09b93;
    --danger-tint: #33201e;
    --danger-fill: #b8443b;
    --danger-fill-strong: #c24b42;
    --on-danger: #ffffff;
    --shadow-paper: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -10px rgb(0 0 0 / 0.6);
    --shadow-pop: 0 2px 6px rgb(0 0 0 / 0.4), 0 16px 40px -12px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141617;
  --sheet: #1c1f20;
  --sunk: #0f1112;
  --ink: #ebedec;
  --ink-soft: #c9cdcb;
  --stone: #a3a9a6;
  --rule: #2e3234;
  --rule-strong: #4b5154;
  --field: #6b7174;
  --seal: #8fc2ab;
  --seal-strong: #b0d6c4;
  --seal-tint: #1d2a25;
  --fill: #2c6a55;
  --fill-strong: #347a62;
  --on-fill: #ffffff;
  --info: #9cc3e6;
  --info-tint: #18232d;
  --warn: #e3bd73;
  --warn-tint: #2d261a;
  --danger: #f09b93;
  --danger-tint: #33201e;
  --danger-fill: #b8443b;
  --danger-fill-strong: #c24b42;
  --on-danger: #ffffff;
  --shadow-paper: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -10px rgb(0 0 0 / 0.6);
  --shadow-pop: 0 2px 6px rgb(0 0 0 / 0.4), 0 16px 40px -12px rgb(0 0 0 / 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-5); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* A page's width is set on the body, and the masthead and footer keep to
   it, so they line up with what is between them. */
body { --width: 1104px; }
body.narrow { --width: 608px; }
body.form { --width: 800px; }
body.reading { --width: 912px; }
main { flex: 1 0 auto; width: 100%; max-width: calc(var(--width) + 2 * var(--s-4)); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-8); }

h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-3xl); line-height: 1.15; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
h2 { font-size: var(--t-xl); line-height: 1.25; font-weight: 650; letter-spacing: -0.005em; margin: var(--s-7) 0 var(--s-3); }
h3 { font-size: var(--t-lg); line-height: 1.3; font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
/* The document's own title, set as the signing page sets it. */
.doc-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1.doc-title { font-size: var(--t-4xl); line-height: 1.12; }
p { margin: 0 0 var(--s-4); }
p, li { text-wrap: pretty; }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 38em; }
.muted { color: var(--stone); }
.small { font-size: var(--t-sm); }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
strong, b { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.88em; }
code.hash { font-size: var(--t-xs); overflow-wrap: anywhere; color: var(--ink-soft); }
.ref { font-family: var(--mono); font-size: 0.9em; letter-spacing: 0.02em; white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: var(--seal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--seal-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: color-mix(in srgb, var(--seal) 25%, transparent); }

.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 10; padding: var(--s-2) var(--s-4); background: var(--sheet); border-radius: var(--r); }
.skip:focus { top: var(--s-3); }

/* The masthead: PlainSign, the organisation that runs it, and for staff
   the way around, which stays in place from page to page. */
body.staff .masthead-inner { max-width: calc(1104px + 2 * var(--s-4)); }
body.staff .foot-inner { max-width: 1104px; }
.masthead { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.masthead-inner { max-width: calc(var(--width) + 2 * var(--s-4)); margin: 0 auto; padding: 0 var(--s-4); min-height: 64px; display: flex; align-items: center; gap: 0 var(--s-5); flex-wrap: wrap; }
.identity { display: flex; align-items: center; gap: var(--s-3); min-width: 0; margin-right: auto; padding: var(--s-3) 0; color: inherit; text-decoration: none; }
.identity:hover { color: inherit; }
.brand, .brand img { display: block; flex: none; }
.brand img { height: 24px; width: auto; }
/* The logo in white for the dark theme, under the same conditions. */
.brand img.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img.on-light { display: none; }
  :root:not([data-theme="light"]) .brand img.on-dark { display: block; }
}
:root[data-theme="dark"] .brand img.on-light { display: none; }
:root[data-theme="dark"] .brand img.on-dark { display: block; }
.operator { min-width: 0; padding-left: var(--s-3); border-left: 1px solid var(--rule-strong); color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { display: flex; align-items: stretch; gap: var(--s-1); align-self: stretch; order: 0; }
.nav a { display: flex; align-items: center; padding: 0 var(--s-3); color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--seal); font-weight: 600; }
.masthead .tools { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
@media (max-width: 760px) {
  .identity { flex: 1 1 0; }
  .nav { order: 3; flex: 1 1 100%; margin: 0 calc(-1 * var(--s-3)); overflow-x: auto; border-top: 1px solid var(--rule); }
  .nav a { padding: var(--s-3); }
}

.account { position: relative; }
.account summary { list-style: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); border-radius: 999px; cursor: pointer; color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500; }
.account summary::-webkit-details-marker { display: none; }
.account summary:hover { background: var(--paper); color: var(--ink); }
.account summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin: 0 var(--s-1); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--seal-tint); color: var(--seal); font-weight: 650; font-size: var(--t-sm); }
.account-menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 5; min-width: 260px; padding: var(--s-2); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.account-menu .who { margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.4; }
.account-menu .who span { display: block; color: var(--stone); }
.account-menu a, .account-menu button { display: block; width: 100%; min-height: 0; margin: 0; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--paper); color: var(--ink); border: 0; }
.account-menu .theme { margin: 0 0 var(--s-2); padding: var(--s-1) var(--s-3) var(--s-3); border-bottom: 1px solid var(--rule); }
.account-menu .theme legend { float: left; width: 100%; margin-bottom: var(--s-2); font-weight: 400; font-size: var(--t-xs); color: var(--stone); }
.account-menu .theme .segmented { display: flex; clear: both; }
.account-menu .theme .segmented label { flex: 1 1 0; justify-content: center; padding: 4px 8px; }
@media (max-width: 760px) { .account .name { display: none; } }
@media (max-width: 480px) { body.staff .operator { display: none; } }

.foot { border-top: 1px solid var(--rule); padding: var(--s-5) var(--s-4) var(--s-6); color: var(--stone); font-size: var(--t-sm); }
.foot-inner { max-width: var(--width); margin: 0 auto; display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; align-items: center; }
.foot a { color: var(--stone); }
.foot a:hover { color: var(--ink); }
.foot .end { margin-left: auto; }

/* Steps: where someone is in a sequence of screens. */
.steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; gap: var(--s-2); counter-reset: step; font-size: var(--t-sm); }
.steps li { position: relative; flex: 1 1 0; min-width: 0; counter-increment: step; display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 3px solid var(--rule); color: var(--stone); }
.steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--t-xs); font-weight: 650; }
.steps li.done { border-top-color: var(--seal); color: var(--ink-soft); }
.steps li.done::before { content: ""; background: var(--fill); border-color: var(--fill); }
.steps li.done::after { content: ""; position: absolute; left: 9px; top: calc(var(--s-3) + 6px); width: 5px; height: 10px; border-right: 2px solid var(--on-fill); border-bottom: 2px solid var(--on-fill); transform: rotate(45deg); }
.steps li[aria-current="step"] { border-top-color: var(--seal); color: var(--ink); font-weight: 600; }
.steps li[aria-current="step"]::before { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.steps li span { min-width: 0; line-height: 1.3; }
@media (max-width: 560px) {
  .steps li:not([aria-current="step"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .steps li[aria-current="step"] { flex-grow: 5; }
}

/* Page headings with what belongs beside them. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.page-head h1 { margin: 0; }
.page-head p { margin: var(--s-2) 0 0; }
.page-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.back { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); font-size: var(--t-sm); color: var(--stone); text-decoration: none; }
.back::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.back:hover { color: var(--ink); }
.title-row { display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.title-row h1 { margin: 0; }

/* Facts: labelled values, read across. */
.facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-4) 0 var(--s-5); padding: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: var(--t-xs); color: var(--stone); font-weight: 500; margin-bottom: 2px; }
.facts dd { margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
/* Facts read down, labels in a column. */
.fact-list { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); margin: 0 0 var(--s-5); border-top: 1px solid var(--rule); }
.fact-list dt, .fact-list dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.fact-list dt { color: var(--stone); font-size: var(--t-sm); padding-right: var(--s-5); }
@media (max-width: 560px) {
  .fact-list { grid-template-columns: 1fr; }
  .fact-list dt { border-bottom: 0; padding-bottom: 0; }
  .fact-list dd { padding-top: var(--s-1); }
}

/* Surfaces. A sheet is white paper on the desk; a panel is a quiet area. */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-5); }
.panel { background: var(--sunk); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.sheet > :last-child, .panel > :last-child { margin-bottom: 0; }
.sheet > :first-child, .panel > :first-child { margin-top: 0; }
.section { margin-top: var(--s-7); }
.section > :first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; }

/* Buttons. One main button on a page; secondary ones outlined; quiet ones
   read as links. */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 10px 18px; margin: 0;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--fill); color: var(--on-fill); border: 1px solid var(--fill); border-radius: var(--r);
  transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
button:hover, .button:hover { background: var(--fill-strong); border-color: var(--fill-strong); color: var(--on-fill); text-decoration: none; }
button.secondary, .button.secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--paper); border-color: var(--stone); color: var(--ink); }
button.danger, .button.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-danger); }
button.danger:hover, .button.danger:hover { background: var(--danger-fill-strong); border-color: var(--danger-fill-strong); color: var(--on-danger); }
button.link {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--seal); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
button.link:hover { background: none; color: var(--seal-strong); text-decoration-thickness: 2px; }
button.small, .button.small { min-height: 34px; padding: 6px 12px; font-size: var(--t-sm); }
button:disabled, button:disabled:hover { cursor: not-allowed; background: var(--sunk); border-color: var(--rule); color: var(--stone); }
.actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.actions p { margin: 0; }

/* Forms. */
label { display: block; font-weight: 600; font-size: var(--t-sm); margin: var(--s-5) 0 var(--s-2); }
label .muted, legend .muted { font-weight: 400; }
.help { display: block; margin: calc(-1 * var(--s-1)) 0 var(--s-2); color: var(--stone); font-size: var(--t-sm); font-weight: 400; }
input, textarea, select {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0;
  font: inherit; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--field); border-radius: var(--r);
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
textarea { line-height: 1.5; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-soft); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--seal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 30%, transparent); border-radius: var(--r); }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--seal); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
input[type="file"] { padding: 7px; cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: var(--s-3); padding: 6px 12px; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); cursor: pointer; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--stone) 50%), linear-gradient(135deg, var(--stone) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; }
::placeholder { color: var(--stone); opacity: 0.75; }
label.check { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 400; font-size: var(--t-md); margin: var(--s-3) 0; cursor: pointer; }
label.check input { margin-top: 3px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; font-size: var(--t-sm); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-4); }
.grid label { margin-top: var(--s-3); }
.grid label input, .grid label select { margin-top: var(--s-2); font-weight: 400; font-size: var(--t-md); }

/* Notices: a confirmation, something to know, or something to fix. */
.notice, .error, .warning {
  position: relative; margin: var(--s-4) 0; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 20px);
  border-radius: var(--r); font-size: var(--t-sm); line-height: 1.5; color: var(--ink);
  background: var(--seal-tint); border: 1px solid color-mix(in srgb, var(--seal) 30%, transparent);
}
.notice::before, .error::before, .warning::before { content: ""; position: absolute; left: var(--s-4); top: calc(var(--s-3) + 6px); width: 9px; height: 9px; border-radius: 50%; background: var(--seal); }
.error { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.error::before { background: var(--danger); }
.warning { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.warning::before { background: var(--warn); }
.notice p, .error p, .warning p { margin: 0 0 var(--s-1); }
.notice > :last-child, .error > :last-child, .warning > :last-child { margin-bottom: 0; }
.danger-text { color: var(--danger); }
[hidden] { display: none !important; }

/* A message in someone's own words. */
.note { margin: var(--s-4) 0 var(--s-5); padding: var(--s-3) var(--s-4); background: var(--paper); border-left: 3px solid var(--seal); border-radius: 0 var(--r) var(--r) 0; }
.note .from { display: block; font-size: var(--t-xs); color: var(--stone); font-weight: 500; margin-bottom: var(--s-1); }
.note .words { display: block; white-space: pre-wrap; }

/* Status: a dot and a word. */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; line-height: 1.7; white-space: nowrap; background: var(--sunk); color: var(--ink-soft); vertical-align: middle; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge.open, .badge.invited { background: var(--info-tint); color: var(--info); }
.badge.completed, .badge.signed { background: var(--seal-tint); color: var(--seal); }
.badge.declined { background: var(--danger-tint); color: var(--danger); }
.badge.expired { background: var(--warn-tint); color: var(--warn); }
.badge.cancelled, .badge.ended, .badge.waiting { background: var(--sunk); color: var(--stone); }
.badge.waiting::before { background: none; border: 1.5px solid currentColor; }
.badge.large { font-size: var(--t-sm); padding: 3px 12px 3px 10px; }

/* Tables. */
.table-wrap { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.list th, table.list td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list thead th { font-size: var(--t-xs); font-weight: 600; color: var(--stone); padding-top: var(--s-3); padding-bottom: var(--s-2); white-space: nowrap; }
table.list tbody tr:last-child > * { border-bottom: 0; }
table.list tbody tr:hover > td { background: color-mix(in srgb, var(--paper) 55%, var(--sheet)); }
table.list a.title { color: var(--ink); font-weight: 600; text-decoration: none; }
table.list a.title:hover { color: var(--seal); text-decoration: underline; }
table.list .sub { display: block; color: var(--stone); font-size: var(--t-xs); margin-top: 2px; }
table.list tbody th { font-weight: 500; color: var(--stone); width: 12rem; }
@media (max-width: 720px) {
  table.list.stack thead { display: none; }
  table.list.stack, table.list.stack tbody, table.list.stack tr, table.list.stack td { display: block; width: 100%; }
  table.list.stack tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); }
  table.list.stack tr:last-child { border-bottom: 0; }
  table.list.stack td { padding: 2px 0; border: 0; }
  table.list.stack td:empty { display: none; }
  table.list.stack tbody tr:hover > td { background: none; }
}

/* Progress of signers, one segment each. */
.progress { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: var(--s-2); }
.progress i { width: 12px; height: 6px; border-radius: 2px; background: var(--rule-strong); }
.progress i.on { background: var(--seal); }

/* Empty states invite the next step. */
.empty { text-align: center; padding: var(--s-7) var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg); color: var(--stone); }
.empty strong { display: block; color: var(--ink); font-size: var(--t-lg); margin-bottom: var(--s-1); }
.empty p { max-width: 32em; margin: 0 auto var(--s-4); }
.empty > :last-child { margin-bottom: 0; }

/* Outcome: the end of a flow, or what stops it. */
.outcome { text-align: center; padding: var(--s-7) 0 var(--s-4); }
.outcome h1 { margin-bottom: var(--s-3); }
.outcome p { color: var(--ink-soft); max-width: 32em; margin-left: auto; margin-right: auto; font-size: var(--t-lg); }
.outcome .sign { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s-5); border-radius: 50%; background: var(--sunk); color: var(--stone); }
.outcome .sign svg { width: 30px; height: 30px; }
.outcome.is-done .sign { background: var(--seal-tint); color: var(--seal); }
.outcome.is-error .sign { background: var(--danger-tint); color: var(--danger); }
.outcome.is-ended .sign { background: var(--warn-tint); color: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  .outcome.is-done .sign path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 520ms 150ms var(--ease) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* Disclosures. */
details > summary { cursor: pointer; width: fit-content; }
details.quiet { margin: var(--s-6) 0 0; }
details.quiet > summary { color: var(--stone); font-size: var(--t-sm); }
details.quiet > summary:hover { color: var(--ink); }
details.quiet[open] > summary { margin-bottom: var(--s-3); }
details.help { margin: var(--s-5) 0; }
details.help > summary { color: var(--seal); font-size: var(--t-sm); font-weight: 500; }
details.help[open] > summary { margin-bottom: var(--s-2); }

/* The signer's way: the request, the code, the review. */
.request-card { padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); margin: 0 0 var(--s-5); }
.request-card .doc-title { font-size: var(--t-2xl); line-height: 1.2; margin: 0; }
.request-card .facts { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.request-card .note { margin: var(--s-4) 0 0; }
.request-card.summary { margin-top: var(--s-5); text-align: left; }
.request-card.summary .doc-title { font-size: var(--t-xl); }
.kicker { font-size: var(--t-sm); color: var(--stone); margin: 0 0 var(--s-1); }
input.code { font-family: var(--mono); font-size: var(--t-3xl); letter-spacing: 0.3em; max-width: 13rem; padding: 6px 0 6px 0.55em; font-variant-numeric: tabular-nums; }
.code-row { display: flex; gap: var(--s-3); align-items: stretch; flex-wrap: wrap; }
.code-row button { min-width: 8rem; }
.secondary-actions { display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; align-items: center; margin-top: var(--s-4); font-size: var(--t-sm); }

/* The document, on the desk. */
.document { position: relative; margin: var(--s-5) 0 var(--s-2); background: var(--sunk); border-radius: var(--r-lg); }
.pages { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5); min-height: 240px; }
.page { position: relative; width: 100%; background: #fff; box-shadow: var(--shadow-paper); border-radius: 2px; }
.page canvas { display: block; width: 100%; height: 100%; border-radius: 2px; }
@media (max-width: 560px) {
  .document { margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); border-radius: 0; }
  .pages { padding: var(--s-3) var(--s-2); gap: var(--s-3); }
}
.viewer-status {
  position: sticky; bottom: var(--s-3); z-index: 2; margin: 0 var(--s-3); padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  font-size: var(--t-sm); transform: translateY(-1px);
}
.viewer-status [data-viewer-status] { flex: 1 1 240px; }
.viewer-status [data-viewer-status].error { padding: 0; margin: 0; border: 0; background: none; color: var(--danger); }
.viewer-status [data-viewer-status].error::before { content: none; }
.meter { flex: 1 1 100%; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--seen, 0%); background: var(--seal); border-radius: 2px; transition: width 300ms var(--ease); }
.viewer-status.complete .meter { display: none; }
.viewer-status.complete [data-viewer-status]::before { content: ""; display: inline-block; width: 5px; height: 10px; margin: 0 var(--s-3) 3px 3px; border-right: 2px solid var(--seal); border-bottom: 2px solid var(--seal); transform: rotate(45deg); vertical-align: middle; }
.document-meta { font-size: var(--t-sm); color: var(--stone); margin: var(--s-3) 0 0; }

/* The text layer of a page, after PDF.js's own viewer (Apache-2.0):
   invisible text over the drawing, so it can be selected and read aloud. */
.textLayer {
  position: absolute; inset: 0; overflow: clip; line-height: 1; transform-origin: 0 0;
  text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer ::selection { background: rgb(0 0 255 / 0.25); color: transparent; }

/* The signing form, and what the signature will be. */
.sign-section { margin-top: var(--s-7); }
.sign-section > h2 { margin-top: 0; }
form.sign { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-paper); }
form.sign .grid label { margin-top: 0; }
.signature-mark { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--seal); background: color-mix(in srgb, var(--seal-tint) 55%, var(--sheet)); border-radius: 0 var(--r) var(--r) 0; }
.signature-mark h3 { margin: 0 0 var(--s-1); font-size: var(--t-md); }
.signature-mark p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--sunk); border-radius: var(--r); }
.segmented label { position: relative; margin: 0; display: flex; align-items: center; padding: 5px 14px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; color: var(--stone); cursor: pointer; }
.segmented label input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.14); }
.segmented label:has(input:focus-visible) { box-shadow: var(--focus); }
.confirmations { margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.evidence-note { font-size: var(--t-sm); color: var(--stone); margin: var(--s-4) 0 0; }
form.sign .actions { margin-top: var(--s-4); }
form.sign .actions button { min-width: 15rem; }
.sign-hint { margin: 0; font-size: var(--t-sm); color: var(--stone); }

/* Staff: the signers of a request, in order. */
.signers { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.signers > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); align-items: start; }
.signers > li:last-child { border-bottom: 0; }
.signers .pos { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rule-strong); font-size: var(--t-xs); font-weight: 650; color: var(--stone); }
.signers li.signed .pos { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.signers li.invited .pos { border-color: var(--info); color: var(--info); }
.signers li.declined .pos, .signers li.expired .pos { border-color: var(--danger); color: var(--danger); }
.signers .who strong { display: block; }
.signers .who span { display: block; font-size: var(--t-sm); color: var(--stone); }
.signers .when { text-align: right; font-size: var(--t-sm); color: var(--stone); }
.signers .when .badge { margin-bottom: var(--s-1); }
.signers .extra { grid-column: 2 / -1; font-size: var(--t-sm); }
.signers .extra p { margin: var(--s-1) 0 0; }
.signers details.change > summary { font-size: var(--t-sm); color: var(--seal); font-weight: 500; margin-top: var(--s-2); }
.signers details.change form { margin-top: var(--s-3); padding: var(--s-4); background: var(--paper); border-radius: var(--r); }
.signers details.change form .grid label:first-child, .signers details.change form .grid label:nth-child(2) { margin-top: 0; }
.signers form.remove label { margin-top: 0; }
/* Adding a signer, below the list. */
details.add-signer { margin-top: var(--s-3); }
details.add-signer > summary { font-size: var(--t-sm); color: var(--seal); font-weight: 500; }
details.add-signer form { margin-top: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
details.add-signer form .grid { row-gap: var(--s-3); }
details.add-signer form .grid label { margin-top: 0; }
@media (max-width: 640px) {
  .signers > li { grid-template-columns: 28px minmax(0, 1fr); padding: var(--s-4); }
  .signers .when { grid-column: 2; text-align: left; }
}
.turn { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-3); padding: var(--s-4) var(--s-5); background: var(--info-tint); border-radius: var(--r-lg); }
.turn p { margin: 0; }
.turn form { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.turn select { width: auto; max-width: 100%; min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: var(--t-sm); }
.turn label { margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-6); align-items: start; }
.split > aside { display: flex; flex-direction: column; gap: var(--s-5); }
.split > aside h2 { font-size: var(--t-sm); margin: 0 0 var(--s-2); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.files { list-style: none; margin: 0; padding: 0; }
.files li + li { margin-top: var(--s-2); }
.files li { display: flex; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.files li:hover { border-color: var(--stone); }
.files li.primary { border-color: color-mix(in srgb, var(--seal) 45%, transparent); background: var(--seal-tint); }
.files a { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.files a.open { flex: 1; min-width: 0; gap: var(--s-3); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.files a.save { flex: none; padding: 0 var(--s-3); border-left: 1px solid var(--rule); color: var(--stone); }
.files li.primary a.save { border-left-color: color-mix(in srgb, var(--seal) 30%, transparent); }
.files a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.files svg { flex: none; width: 18px; height: 18px; color: var(--stone); }
.files li.primary svg { color: var(--seal); }
.files a.save:hover svg { color: var(--ink); }
.files .what { display: block; font-weight: 400; color: var(--stone); font-size: var(--t-xs); }
.file-title { justify-content: space-between; }
.file-title .button svg { width: 16px; height: 16px; margin-right: var(--s-2); vertical-align: -3px; }
.file-title + p { margin: var(--s-1) 0 var(--s-4); }
.file-title ~ .tabs { width: fit-content; }
.ev-file { margin: var(--s-5) 0 var(--s-6); padding: var(--s-4) var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ev-about { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--ink-soft); }
.ev-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.ev-facts .full { grid-column: 1 / -1; }
.ev-facts dt { font-size: var(--t-xs); color: var(--stone); }
.ev-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.ev-note { margin: var(--s-1) 0 0; padding: var(--s-3) var(--s-4); background: var(--sunk); border-radius: var(--r); font-size: var(--t-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-records { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--s-6); }
.ev-records::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: 20px; width: 2px; background: var(--rule-strong); border-radius: 1px; }
.ev-records > li { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ev-records > li + li { margin-top: var(--s-3); }
.ev-records > li::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) + 6px); top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 0 4px var(--paper); }
.ev-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); }
.ev-index { font-family: var(--mono); font-size: var(--t-xs); color: var(--seal); background: var(--seal-tint); padding: 1px 8px; border-radius: 999px; }
.ev-what { flex: 1; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: baseline; font-size: var(--t-sm); }
.ev-what .muted { font-size: var(--t-sm); }
.ev-at { font-size: var(--t-xs); color: var(--stone); white-space: nowrap; }
pre.json { margin: 0; padding: var(--s-3) var(--s-4); background: var(--sunk); font-size: var(--t-xs); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.j-k { color: var(--info); }
.j-s { color: var(--seal); }
.j-n, .j-l { color: var(--warn); }
.j-p { color: var(--stone); }
.ev-proof summary { padding: var(--s-2) var(--s-4); font-size: var(--t-xs); color: var(--stone); cursor: pointer; }
.ev-proof summary:hover { color: var(--ink); }
.ev-proof ol { margin: 0; padding: 0 var(--s-4) var(--s-3) calc(var(--s-4) + 2.2em); font-size: var(--t-xs); color: var(--stone); }
.ev-proof code { overflow-wrap: anywhere; }
@media (max-width: 640px) { .ev-facts { grid-template-columns: minmax(0, 1fr); } .ev-records { padding-left: var(--s-4); } .ev-records::before, .ev-records > li::before { display: none; } }
.prints dt { font-size: var(--t-xs); color: var(--stone); margin-top: var(--s-2); }
.prints dd { margin: 0; }

.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 var(--s-4); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px; background: var(--sunk); border-radius: var(--r); }
.tabs a { padding: 5px 12px; border-radius: var(--r-sm); color: var(--stone); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.14); }
.search { display: flex; gap: var(--s-2); flex: 0 1 360px; }
.search input { min-height: 38px; padding: 7px 12px; font-size: var(--t-sm); }
.search button { min-height: 38px; padding: 6px 14px; font-size: var(--t-sm); }

.signer-row { padding: var(--s-4) var(--s-5) var(--s-5); margin: var(--s-3) 0 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.signer-row legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); }
.signer-row legend + * { clear: both; }
.signer-row legend .pos { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sunk); font-size: var(--t-xs); font-weight: 650; color: var(--stone); }
.signer-row .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .signer-row .grid { grid-template-columns: minmax(0, 1fr); } }
.signer-row .required-note { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--stone); }
.signer-row label.check { font-size: var(--t-sm); margin-bottom: 0; }
.add-row { margin-top: var(--s-3); }

/* A PDF to upload: the file field as a drop area. */
.dropzone { margin-top: var(--s-2); }
.dropzone input[type="file"] { padding: var(--s-6) var(--s-5); border: 1.5px dashed var(--field); border-radius: var(--r-lg); background: var(--sheet); font-size: var(--t-sm); }
.dropzone input[type="file"]:hover { border-color: var(--seal); }
/* The PDF a form is about. */
.doc-chip { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); font-size: var(--t-sm); }
.doc-chip svg { flex: none; width: 28px; height: 28px; color: var(--seal); }
.doc-chip strong { display: block; font-size: var(--t-md); }
.doc-chip .muted a { margin-left: var(--s-3); }
.doc-chip .sub { display: block; margin-top: 2px; }
.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.choices a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.choices a:hover { border-color: var(--seal); color: var(--ink); }
.choices strong { display: block; }
.choices .muted { font-size: var(--t-sm); }
.choices .go { flex: none; color: var(--seal); font-size: var(--t-sm); font-weight: 600; }
.or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-2); color: var(--stone); font-size: var(--t-sm); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

iframe.email-preview { display: block; width: 100%; height: 900px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: #f5f5f1; }
.sticky-actions { position: sticky; bottom: 0; z-index: 3; margin: var(--s-6) calc(-1 * var(--s-4)) 0; padding: var(--s-3) var(--s-4); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--rule); }
.sticky-actions .actions { margin: 0; }

.danger-zone { margin-top: var(--s-7); padding: var(--s-4) var(--s-5); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--rule)); border-radius: var(--r-lg); }
.danger-zone > summary { color: var(--danger); font-weight: 600; font-size: var(--t-sm); }
.danger-zone[open] > summary { margin-bottom: var(--s-2); }
.danger-zone p { font-size: var(--t-sm); color: var(--stone); }

/* Signing in. */
.signin { max-width: 440px; margin: var(--s-6) auto 0; }
.signin .sheet { padding: var(--s-6); }
.signin h1 { font-size: var(--t-2xl); }
.signin button { width: 100%; margin-top: var(--s-2); }
.signin .after { margin: var(--s-4) 0 0; text-align: center; font-size: var(--t-sm); color: var(--stone); }

/* The check page. */
.tool + .tool { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.tool form { margin-top: var(--s-2); }
.result { margin: var(--s-5) 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--seal); }
.result.bad { border-top-color: var(--danger); }
.result h2, .result h3 { margin: 0 0 var(--s-3); font-size: var(--t-xl); }
.result > :last-child { margin-bottom: 0; }
ul.checks { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
ul.checks li { position: relative; margin: 0; padding: var(--s-2) 0 var(--s-2) 30px; border-bottom: 1px solid var(--rule); }
ul.checks li:last-child { border-bottom: 0; }
ul.checks li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + 3px); width: 18px; height: 18px; border-radius: 50%; background: var(--rule-strong); }
ul.checks li.ok::before { background: var(--fill); }
ul.checks li.ok::after { content: ""; position: absolute; left: 6.5px; top: calc(var(--s-2) + 6.5px); width: 4px; height: 8px; border-right: 2px solid var(--on-fill); border-bottom: 2px solid var(--on-fill); transform: rotate(45deg); }
ul.checks li.bad::before { background: var(--danger-fill); }
ul.checks li.bad::after { content: ""; position: absolute; left: 4px; top: calc(var(--s-2) + 7px); width: 10px; height: 10px; background: linear-gradient(45deg, transparent 41%, var(--on-danger) 41%, var(--on-danger) 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, var(--on-danger) 41%, var(--on-danger) 59%, transparent 59%); }
.key { display: block; padding: var(--s-3) var(--s-4); background: var(--sunk); border-radius: var(--r); font-family: var(--mono); font-size: var(--t-xs); overflow-wrap: anywhere; }
textarea.mono, input.mono { font-family: var(--mono); font-size: var(--t-sm); }

@media (max-width: 560px) {
  main { padding-top: var(--s-5); }
  h1 { font-size: var(--t-2xl); }
  h1.doc-title { font-size: var(--t-3xl); }
  .masthead-inner { min-height: 56px; }
  .sheet, form.sign, .request-card { padding: var(--s-4); }
  .actions > button, .actions > .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .masthead .nav, .masthead .tools, .foot, .skip { display: none; }
  body { background: #fff; }
}