/* ==========================================================================
   SEPA mandate app · Jorijn Schrijvershof
   One stylesheet, no build step. CSP-safe: no inline styles, fonts self-hosted,
   icons inline SVG or data URIs.

   Three voices:
     sans  (Helvetica Neue)  interface: headings, labels, buttons, navigation
     serif (Roboto Serif)    human + legal content: names, addresses, prose
     mono  (system mono)     financial identifiers: IBAN, BIC, references
   ========================================================================== */

/* ---------- 1. Fonts ------------------------------------------------------
   Roboto Serif · SIL Open Font License 1.1 (public/fonts/OFL.txt), WOFF2 from
   the Fontsource 5.3.0 release. Split into Latin and Latin Extended subsets via
   unicode-range, so Dutch pages only download the small Latin file while names
   such as "Łukasz" or "Dvořák" still render in the serif.
   Helvetica Neue comes from the system, exactly like jorijn.com: it is a
   commercial Monotype face and cannot be self-hosted without a web licence.
   Mono uses the platform mono stack. */
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/roboto-serif-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/roboto-serif-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-serif-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/roboto-serif-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/roboto-serif-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Tokens ---------------------------------------------------- */
:root {
  /* Colour · brand */
  --c-accent: #ff5500;            /* 6.0:1 with ink. Never carries white text. */
  --c-ink: #000000;
  --c-paper: #ffffff;

  /* Colour · neutrals */
  --c-soft: #f7f7f7;              /* quiet surfaces, inputs, panels */
  --c-line: #e4e4e4;              /* hairlines inside lists and the sheet */
  --c-line-strong: #d6d6d6;
  --c-control: #8c8c8c;           /* control borders: 3.4:1 on white (WCAG 1.4.11) */
  --c-muted: #5c5c5c;             /* secondary text: 6.7:1 on white, 6.2:1 on soft */
  --c-disabled-bg: #e6e6e6;
  --c-disabled-fg: #595959;

  /* Colour · functional */
  --c-success: #2e7d32;           /* 5.1:1 on white */
  --c-error: #c62828;             /* 5.6:1 on white, white text on it 5.6:1 */
  --c-focus: var(--c-ink);

  /* Type */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Roboto Serif", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);   /* h1 · 36 → 64 */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);     /* 24 → 30 */
  --fs-h3: 1.25rem;                                     /* 20 */
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);  /* 17 → 20 */
  --fs-body: 1rem;                                      /* 16 */
  --fs-ui: 1rem;
  --fs-small: 0.875rem;                                 /* 14 */
  --fs-label: 0.75rem;                                  /* 12, uppercase only */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-ui: 1.35;
  --lh-body: 1.65;
  --lh-prose: 1.875;              /* jorijn.com body rhythm */

  --tracking-display: -0.025em;
  --tracking-label: 0.08em;

  /* Space (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;  --s-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Page widths */
  --w-signer: 64rem;
  --w-detail: 52rem;
  --w-auth: 44rem;
  --w-dashboard: 68rem;
  --w-prose: 40rem;
  --page-w: var(--w-signer);

  /* Borders & radii: square everywhere, circles only for markers/avatars */
  --rule: 0.125rem solid var(--c-ink);      /* 2px section rule, always black */
  --hairline: 1px solid var(--c-line);
  --radius: 0;
  --radius-round: 50%;

  /* Elevation: exactly one level, reserved for the mandate sheet */
  --elev-sheet: 0 1px 0 rgb(0 0 0 / 0.04), 0 0.25rem 1.5rem rgb(0 0 0 / 0.07);

  /* Motion */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.7s;
  --ease-ui: ease-in-out;
  --ease-out: cubic-bezier(0.325, 1, 0.22, 1);
  --ease-draw: cubic-bezier(0.16, 1, 0.3, 1);

  /* Icons (data URIs; allowed by img-src data:) */
  --img-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='112 72 96 96'%3E%3Cpath fill='%23f50' d='m173.601 104.689-41.871 14.22-17.964-17.109 74.531-25.7008c10.031-3.459 19.643 6.1523 16.184 16.1833l-25.701 74.5325-17.109-17.11 14.24-42.719c.475-1.427-.887-2.781-2.31-2.297z'/%3E%3C/svg%3E");
  --img-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='square'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E");
  --mask-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1.5h3v8.5h-3zM6.5 11.75h3v3h-3z'/%3E%3C/svg%3E");
  --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.75v.01'/%3E%3C/svg%3E");
}

/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.page-signer    { --page-w: var(--w-signer); }
body.page-detail    { --page-w: var(--w-detail); }
body.page-auth      { --page-w: var(--w-auth); }
body.page-dashboard { --page-w: var(--w-dashboard); }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 400; line-height: var(--lh-heading); margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--dur-fast) var(--ease-ui); }
a:hover { color: var(--c-ink); text-decoration-thickness: 2px; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0.25rem; }
::selection { background: var(--c-accent); color: var(--c-ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-size: 0.9375em; letter-spacing: 0.01em; word-spacing: 0.1em; }
.muted { color: var(--c-muted); }
.nowrap { white-space: nowrap; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

/* ---------- 4. Skip link, header, footer --------------------------------- */
.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink); color: var(--c-paper);
  font: 500 var(--fs-ui)/1 var(--font-sans); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-paper); }

.shell { width: 100%; max-width: calc(var(--page-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.site-header { border-bottom: var(--rule); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.5rem; padding-block: var(--s-3); }
.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; color: var(--c-ink); }
.brand__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand__text { display: grid; line-height: 1.2; min-width: 0; }
.brand__name { font: 500 1rem/1.2 var(--font-sans); letter-spacing: -0.005em; }
.brand__product { font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--c-muted); }
.secure {
  display: flex; align-items: center; gap: var(--s-2); margin: 0;
  font: 400 var(--fs-small)/1.2 var(--font-sans); color: var(--c-ink); text-align: right;
}
.secure .icon { width: 1.125rem; height: 1.125rem; color: var(--c-ink); }
@media (max-width: 26rem) {
  .brand__mark { width: 2rem; height: 2rem; }
  .secure span { max-width: 5.5rem; }
}

/* Footer as on jorijn.com: the white wordmark sits whole at a fixed 1524×398,
   3rem above the bottom edge; below 1524px it is anchored left 15% so the
   sides crop evenly. White text as on the site (3.2:1 on orange: below AA for body text). */
.site-footer {
  margin-top: auto;
  background-color: var(--c-accent);
  background-image: url("/img/footer-wordmark.svg");
  background-position: bottom var(--s-7) center;
  background-repeat: no-repeat;
  background-size: 1524px 398px;
  color: var(--c-paper);
  padding-block: var(--s-7);
}
@media screen and (width < 1524px) {
  .site-footer { background-position: bottom var(--s-7) left 15%; }
}
.site-footer__inner { padding-bottom: clamp(28rem, 50vw, 34rem); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); font: 400 var(--fs-body)/var(--lh-prose) var(--font-serif); }
.site-footer__inner p { margin: 0; }
.site-footer a { color: var(--c-paper); display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }
.site-footer a:hover { color: var(--c-paper); }
.site-footer a:focus-visible { outline-color: var(--c-paper); }

/* ---------- 5. Page layout ----------------------------------------------- */
.page { flex: 1 0 auto; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 8vw, 6rem); container: page / inline-size; }
.page > * + * { margin-top: 0; }
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

.flash-region { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }

.intro { margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 46rem; }
.intro--wide { max-width: none; }
.eyebrow {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 0.75rem; height: 0.75rem; flex: none; background: var(--img-arrow) center / contain no-repeat; }
.title { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); margin-bottom: var(--s-4); hyphens: manual; overflow-wrap: break-word; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.title-row .title { margin-bottom: 0; }
.lede { font-family: var(--font-serif); font-size: var(--fs-lede); line-height: 1.6; max-width: 38rem; margin: 0; }
.intro__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

@container page (min-width: 44rem) {
  .intro--split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); max-width: none; }
  .intro--split .intro__actions { margin-top: 0; justify-content: flex-end; }
}

.section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--fs-h2); letter-spacing: -0.01em; margin-bottom: var(--s-4); }
.section-title__meta { font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--c-muted); letter-spacing: 0; }
.count {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding-inline: 0.4rem;
  border-radius: 0.875rem; background: var(--c-ink); color: var(--c-paper);
  font: 500 var(--fs-small)/1 var(--font-mono); letter-spacing: 0; align-self: center;
}

.split { display: grid; gap: var(--s-6); }
@container page (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: var(--s-8); align-items: start; }
  .split__main { grid-column: 1; grid-row: 1; }
  .split__aside { grid-column: 2; grid-row: 1; position: sticky; top: var(--s-6); }
}

.back-link {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem;
  margin: calc(-1 * var(--s-3)) 0 var(--s-4);
  font: 400 var(--fs-ui)/1 var(--font-sans); color: var(--c-ink); text-decoration: none;
}
.back-link .icon { transition: transform var(--dur-fast) var(--ease-ui); }
.back-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.back-link:hover .icon { transform: translateX(-0.2rem); }

/* ---------- 6. Progress stepper ------------------------------------------ */
.stepper { margin-bottom: clamp(2rem, 5vw, 3rem); max-width: 40rem; }
.stepper__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stepper__item { position: relative; display: grid; gap: var(--s-2); justify-items: start; font: 400 var(--fs-small)/1.25 var(--font-sans); color: var(--c-muted); padding-right: var(--s-2); }
.stepper__item:not(:last-child)::after {
  content: ""; position: absolute; top: 1rem; left: 2.5rem; right: 0.5rem; height: 2px;
  background: var(--c-line-strong);
}
.stepper__item.is-complete:not(:last-child)::after { background: var(--c-ink); }
.stepper__marker {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-round);
  border: 2px solid var(--c-control); background: var(--c-paper); color: var(--c-muted);
  font: 700 var(--fs-small)/1 var(--font-sans);
}
.stepper__marker .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.is-complete .stepper__marker { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.is-current .stepper__marker { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.is-complete .stepper__label { color: var(--c-ink); }
.is-current .stepper__label { color: var(--c-ink); font-weight: 700; }
@container page (min-width: 36rem) {
  .stepper__item { font-size: var(--fs-ui); }
}

/* ---------- 7. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3rem; padding: 0.625rem 1.5rem;
  border: 2px solid var(--c-ink); border-radius: var(--radius);
  background: var(--c-ink); color: var(--c-paper);
  font: 500 var(--fs-ui)/var(--lh-ui) var(--font-sans); text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui);
}
.btn:hover, .btn.is-hover { background: var(--c-paper); color: var(--c-ink); text-decoration: none; }
.btn .icon { width: 1.125rem; height: 1.125rem; }

.btn--secondary { background: transparent; color: var(--c-ink); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--c-ink); color: var(--c-paper); }

.btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.btn--accent:hover, .btn--accent.is-hover { background: var(--c-paper); border-color: var(--c-ink); color: var(--c-ink); }

.btn--text {
  min-height: 2.75rem; padding: 0.5rem 0; border: 0; background: none; color: var(--c-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.btn--text:hover, .btn--text.is-hover { background: none; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; }

.btn--small { min-height: 2.75rem; padding: 0.375rem 1rem; font-size: var(--fs-small); }

/* The signature button: taller, heavier, carries the brand arrow */
.btn--sign { min-height: 4rem; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.005em; }
.btn--sign::before { content: ""; width: 1.125rem; height: 1.125rem; flex: none; background: var(--img-arrow) center / contain no-repeat; transition: transform var(--dur-base) var(--ease-out); }
.btn--sign:hover::before, .btn--sign.is-hover::before { transform: translate(0.125rem, -0.125rem); }

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  background: var(--c-disabled-bg); border-color: var(--c-disabled-bg); color: var(--c-disabled-fg); cursor: not-allowed;
}
.btn--text:disabled { background: none; }
.btn[aria-busy="true"] { cursor: progress; }

.btn--block { width: 100%; }
.btn--block-mobile { width: 100%; }
@container page (min-width: 36rem) { .btn--block-mobile { width: auto; } }

.spinner {
  width: 1rem; height: 1rem; flex: none; border-radius: var(--radius-round);
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.inline-form { display: inline; margin: 0; }

/* ---------- 8. Forms ----------------------------------------------------- */
.form-section { margin: 0 0 var(--s-7); padding: 0; border: 0; min-width: 0; }
.form-section__legend {
  float: left; width: 100%; padding: 0 0 var(--s-3); margin: 0 0 var(--s-5);
  border-bottom: var(--rule);
  font: 400 var(--fs-h2)/var(--lh-heading) var(--font-sans); letter-spacing: -0.01em;
}
.form-section__legend + * { clear: both; }
.form-section__intro { font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--c-muted); margin: calc(-1 * var(--s-3)) 0 var(--s-5); clear: both; }

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field__label { font: 500 var(--fs-ui)/var(--lh-ui) var(--font-sans); }
.field__optional { font-weight: 400; color: var(--c-muted); }
.field__hint { font: 400 var(--fs-small)/1.45 var(--font-sans); color: var(--c-muted); margin: 0; }
.field__error {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0;
  font: 500 0.9375rem/1.4 var(--font-sans); color: var(--c-error);
}
.field__error::before { content: ""; width: 1.125rem; height: 1.125rem; margin-top: 0.05rem; flex: none; background: currentColor; -webkit-mask: var(--mask-alert) center / contain no-repeat; mask: var(--mask-alert) center / contain no-repeat; }

.field-row { display: grid; gap: 0 var(--s-5); }
.field-row > .field { margin-bottom: var(--s-5); }
@container page (min-width: 40rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.input {
  display: block; width: 100%; min-height: 3rem; padding: 0.6875rem 0.875rem;
  border: 1px solid var(--c-control); border-radius: var(--radius);
  background: var(--c-soft); color: var(--c-ink);
  font: 400 1.0625rem/1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
  appearance: none;
}
.input::placeholder { color: var(--c-muted); opacity: 1; }
.input:hover, .input.is-hover { border-color: var(--c-ink); }
.input:focus, .input.is-focus { outline: none; background: var(--c-paper); border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.input:focus-visible, .input.is-focus { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-error); background: var(--c-paper); }
.input[aria-invalid="true"]:focus-visible { outline-color: var(--c-error); }
.input:disabled, .input[readonly] { background: var(--c-disabled-bg); border-color: var(--c-disabled-bg); color: var(--c-disabled-fg); }
.input--mono { font-family: var(--font-mono); font-size: 1.0625rem; letter-spacing: 0.04em; word-spacing: 0.1em; text-transform: uppercase; }
.input--mono::placeholder { text-transform: none; letter-spacing: 0.02em; }
.input--short { max-width: 14rem; }

/* Checkbox row · legal declarations: a framed clause, like the box on a paper form */
.check {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-4); align-items: start;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-paper); border: var(--rule);
  cursor: pointer; min-height: 2.75rem;
  transition: background-color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui);
}
.check + .field__error { margin-top: var(--s-2); }
.check__input {
  appearance: none; width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0;
  border: 2px solid var(--c-ink); border-radius: var(--radius); background: var(--c-paper);
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-ui);
}
.check__input:checked { background: var(--c-ink) var(--img-check-white) center / 1rem no-repeat; }
.check__input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.check__text { font: 400 var(--fs-body)/1.6 var(--font-serif); }
.check:hover { background: var(--c-soft); }
.check:has(.check__input:checked) { background: var(--c-soft); }
.check:has(.check__input[aria-invalid="true"]) { border-color: var(--c-error); background: var(--c-paper); }
.check:has(.check__input[aria-invalid="true"]) .check__input { border-color: var(--c-error); }

/* Radio choices */
.choice-group { margin: 0 0 var(--s-6); padding: 0; border: 0; min-width: 0; }
.choice-group__legend { padding: 0; margin-bottom: var(--s-2); font: 500 var(--fs-ui)/var(--lh-ui) var(--font-sans); }
.choice-group__hint { margin: 0 0 var(--s-3); font: 400 var(--fs-small)/1.45 var(--font-sans); color: var(--c-muted); }
.choice-list { display: grid; gap: var(--s-2); }
.choice-list--inline { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.choice {
  display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--s-3); align-items: center;
  min-height: 3.5rem; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-control); background: var(--c-paper); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-ui), box-shadow var(--dur-fast) var(--ease-ui);
}
.choice:hover { border-color: var(--c-ink); }
.choice:has(.choice__input:checked) { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.choice__input {
  appearance: none; width: 1.375rem; height: 1.375rem; margin: 0; border-radius: var(--radius-round);
  border: 2px solid var(--c-ink); background: var(--c-paper); cursor: pointer;
}
.choice__input:checked { background: var(--c-ink); box-shadow: inset 0 0 0 0.25rem var(--c-paper); }
.choice__input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.choice__text { display: grid; gap: 0.125rem; min-width: 0; font: 400 var(--fs-ui)/1.35 var(--font-sans); overflow-wrap: anywhere; }
.choice__sub { font-size: var(--fs-small); color: var(--c-muted); }

/* Form footer: helper + primary action */
.action-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--rule);
}
.action-bar__hint { margin: 0; font: 400 var(--fs-small)/1.45 var(--font-sans); color: var(--c-muted); }
.action-bar > .btn { flex: 1 1 100%; }
@container page (min-width: 36rem) { .action-bar > .btn { flex: 0 0 auto; } }

.privacy-note { margin: var(--s-4) 0 0; font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--c-muted); }
.privacy-note a { color: var(--c-ink); }

/* Search */
.search { display: grid; gap: var(--s-2); margin-bottom: var(--s-7); }
.search__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.search__row .input { flex: 1 1 16rem; }
.search__row .btn { flex: 1 1 auto; }
@container page (min-width: 36rem) { .search__row .btn { flex: 0 0 auto; } }

/* ---------- 9. Notices & flash ------------------------------------------- */
/* Signal disc: a solid circle carries the colour, the box stays neutral */
.notice {
  --notice-c: var(--c-ink);
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-soft);
  font: 400 var(--fs-ui)/1.5 var(--font-sans);
}
.notice__icon, .guidance__head .icon {
  width: 1.75rem; height: 1.75rem; padding: 0.1875rem; margin-top: -0.125rem;
  border-radius: var(--radius-round); background: var(--notice-c); color: var(--c-paper); stroke-width: 2.75;
}
.notice__icon circle, .guidance__head .icon circle { display: none; }
.notice__body { min-width: 0; }
.notice__title { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.notice a { color: var(--c-ink); }
.notice--info { --notice-c: var(--c-ink); }
.notice--success { --notice-c: var(--c-success); }
.notice--error { --notice-c: var(--c-error); }
.notice--block { padding: var(--s-5); }
.notice--block .notice__title { font-size: var(--fs-h3); font-weight: 400; margin-bottom: var(--s-2); }

.flash { padding-block: var(--s-3); }

/* ---------- 10. Badges --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4375rem; flex: none;
  padding: 0.3125rem 0.5625rem 0.3125rem 0.5rem;
  border: 1px solid var(--c-line-strong); background: var(--c-soft); color: var(--c-ink);
  font: 700 0.75rem/1.1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.badge::before { content: ""; width: 0.625rem; height: 0.625rem; flex: none; }
/* neutral · hollow ring */
.badge--neutral::before { border: 1.5px solid var(--c-muted); border-radius: var(--radius-round); }
/* in progress · brand arrow */
.badge--progress { background: var(--c-paper); border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.badge--progress::before { background: var(--img-arrow) center / contain no-repeat; }
/* success · check */
.badge--success { background: var(--c-paper); border-color: var(--c-success); color: var(--c-success); }
.badge--success::before { background: currentColor; -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; }
/* problem · solid, exclamation */
.badge--problem { background: var(--c-error); border-color: var(--c-error); color: var(--c-paper); }
.badge--problem::before { background: currentColor; -webkit-mask: var(--mask-bang) center / contain no-repeat; mask: var(--mask-bang) center / contain no-repeat; }
.badge--lg { font-size: var(--fs-small); padding: 0.5rem 0.75rem; }


/* ---------- 11. Identifier chip ------------------------------------------ */
.id-chip {
  display: inline-block; padding: 0.125rem 0.4375rem;
  background: var(--c-soft); border: 1px solid var(--c-line-strong);
  font: 500 0.9375rem/1.5 var(--font-mono); letter-spacing: 0.02em; word-spacing: 0.12em;
  color: var(--c-ink); overflow-wrap: anywhere;
}
.id-chip--lg {
  display: block; padding: var(--s-3) var(--s-4); border: var(--rule); background: var(--c-paper);
  /* Real references (JORIJN- + 26-char ULID) are ~33 characters: sized to fit one line on desktop. */
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); letter-spacing: 0.02em;
}

.ref-block { display: grid; gap: var(--s-2); margin: var(--s-6) 0; }
.ref-block__label { font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ref-block__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; }
.ref-block__row .id-chip--lg { flex: 1 1 14rem; }
.ref-block__status { min-height: 1.25rem; margin: 0; font: 400 var(--fs-small)/1.4 var(--font-sans); color: var(--c-success); }

/* ---------- 12. Panels, data lists --------------------------------------- */
.panel { padding: var(--s-5); background: var(--c-soft); border: 1px solid var(--c-soft-border, #efefef); }
.panel__title { margin: 0 0 var(--s-3); font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.panel__name { margin: 0 0 var(--s-1); font: 700 1.0625rem/1.4 var(--font-serif); }
.panel address { font: 400 var(--fs-body)/1.6 var(--font-serif); }
.panel__note { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line-strong); font: 400 var(--fs-small)/1.5 var(--font-sans); }

.data-list { margin: 0; border-top: var(--rule); border-bottom: var(--rule); }
.data-list__row { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: var(--hairline); }
.data-list__row:last-child { border-bottom: 0; }
.data-list dt { font: 400 var(--fs-small)/1.4 var(--font-sans); color: var(--c-muted); }
.data-list dd { margin: 0; font: 400 var(--fs-body)/1.55 var(--font-serif); min-width: 0; overflow-wrap: anywhere; }
@container page (min-width: 36rem) {
  .data-list__row { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) 0; }
  .data-list dt { padding-top: 0.125rem; }
}

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.actions > .btn { flex: 1 1 12rem; }
@container page (min-width: 36rem) { .actions > .btn { flex: 0 0 auto; } }

/* ---------- 13. Record lists (dashboard, search results) ----------------- */
.records { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.records__head { display: none; }
.record {
  position: relative; display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas: "avatar name" "avatar meta" "avatar status";
  gap: 0.125rem var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-3); border-bottom: var(--hairline);
  transition: background-color var(--dur-fast) var(--ease-ui);
}
.record:has(.record__link):hover { background: var(--c-soft); }
.record__avatar { grid-area: avatar; align-self: start; }
.record__name { grid-area: name; margin: 0; font: 500 1.0625rem/1.35 var(--font-sans); min-width: 0; overflow-wrap: anywhere; }
.record__link { color: var(--c-ink); text-decoration: none; }
.record__link::after { content: ""; position: absolute; inset: 0; }
.record__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.record__link:focus-visible { outline: none; }
.record:has(.record__link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.record__meta { grid-area: meta; margin: 0; font: 400 var(--fs-small)/1.45 var(--font-sans); color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; }
.record__meta .mono { color: var(--c-ink); }
.record__status { grid-area: status; justify-self: start; margin-top: var(--s-2); }
.record__action { grid-area: status; justify-self: start; position: relative; z-index: 1; }


@container page (min-width: 44rem) {
  .records__head {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1.3fr) minmax(0, 1fr) 13.5rem; gap: var(--s-4);
    padding: var(--s-2) var(--s-3); border-bottom: var(--hairline);
    font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted);
  }
  .records__head > :first-child { grid-column: 2; }
  .record { grid-template-columns: 2.5rem minmax(0, 1.3fr) minmax(0, 1fr) 13.5rem; grid-template-areas: "avatar name meta status"; padding-block: var(--s-3); }
  .record__avatar { align-self: center; }
  .record__status, .record__action { margin-top: 0; }
  .records--results .record, .records--results .records__head { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .records--results .record__action { justify-self: end; }
}

.avatar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-round);
  background: var(--c-ink); color: var(--c-paper);
  font: 500 1rem/1 var(--font-sans); text-transform: uppercase;
}
.record--problem .avatar { background: var(--c-error); }

.list-section + .list-section { margin-top: var(--s-8); }
.list-foot { margin: var(--s-3) 0 0; font: 400 var(--fs-small)/1.4 var(--font-sans); color: var(--c-muted); }

/* Summary tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); margin: 0 0 var(--s-8); padding: 0; list-style: none; }
@container page (min-width: 44rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { padding-top: var(--s-3); border-top: var(--rule); }
.tile__value { display: block; font: 400 clamp(2rem, 1.6rem + 1.5vw, 2.75rem)/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile__label { display: block; margin-top: var(--s-2); font: 400 var(--fs-small)/1.35 var(--font-sans); }
.tile--problem { border-top-color: var(--c-error); }
.tile--problem .tile__value { color: var(--c-error); }

/* Empty state */
.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); background: var(--c-soft); text-align: center; border-bottom: var(--hairline); }
.empty__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-round); background: var(--c-ink); color: var(--c-paper); }
.empty__title { margin: 0; font: 500 1.0625rem/1.35 var(--font-sans); }
.empty__text { margin: 0; max-width: 26rem; font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--c-muted); }

/* ---------- 14. The mandate sheet (review step) -------------------------- */
.sheet-stage {
  margin-block: 0 var(--s-6); padding-block: clamp(1rem, 4vw, 3rem);
  background: var(--c-soft);
  box-shadow: 0 0 0 100vmax var(--c-soft); clip-path: inset(0 -100vmax);
}
.sheet {
  max-width: 48rem; margin-inline: auto;
  background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--elev-sheet);
  padding: clamp(1.25rem, 5vw, 3.5rem);
  container: sheet / inline-size;
}
.sheet__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: var(--rule); }
.sheet__brand { display: flex; align-items: center; gap: var(--s-3); }
.sheet__brand svg { width: 2rem; height: 2rem; flex: none; }
.sheet__heading { font: 700 1.125rem/1.2 var(--font-sans); letter-spacing: -0.005em; }
.sheet__sub { display: block; font: 400 var(--fs-small)/1.3 var(--font-sans); color: var(--c-muted); }
.sheet__ref { display: grid; gap: var(--s-1); justify-items: start; }
.sheet__ref-label { font: 400 var(--fs-small)/1.2 var(--font-sans); color: var(--c-muted); }
@container sheet (min-width: 34rem) { .sheet__ref { justify-items: end; text-align: right; } }

.sheet__legal { padding-block: var(--s-5); border-bottom: var(--hairline); font: 400 1.0625rem/var(--lh-prose) var(--font-serif); }
.sheet__legal p { margin-bottom: var(--s-3); }
.sheet__legal-meta { margin-top: var(--s-3); font: 400 var(--fs-small)/1.4 var(--font-sans); color: var(--c-muted); }

.sheet__section { padding-block: var(--s-5); border-bottom: var(--hairline); }
.sheet__section:last-child { border-bottom: 0; padding-bottom: 0; }
.sheet__label { margin: 0 0 var(--s-3); font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.parties { display: grid; gap: var(--s-6); }
@container sheet (min-width: 34rem) { .parties { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); } }
.parties > div + div { padding-top: var(--s-5); border-top: var(--hairline); }
@container sheet (min-width: 34rem) { .parties > div + div { padding-top: 0; border-top: 0; padding-left: var(--s-7); border-left: var(--hairline); margin-left: calc(-1 * var(--s-7) / 2); } }

.kv { margin: 0; display: grid; gap: var(--s-3); }
.kv__row { display: grid; gap: 0.125rem; }
.kv dt { font: 400 var(--fs-small)/1.35 var(--font-sans); color: var(--c-muted); }
.kv dd { margin: 0; font: 400 var(--fs-body)/1.55 var(--font-serif); overflow-wrap: anywhere; }
.kv dd.mono, .kv .mono { font-size: 1rem; }
.kv__strong { font-weight: 700; }
@container sheet (min-width: 30rem) { .kv--wide .kv__row { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-4); } }

.signature { display: grid; gap: var(--s-5); }
@container sheet (min-width: 34rem) { .signature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.signature__field { display: grid; gap: var(--s-1); }
.signature__value { margin: 0; font: 400 var(--fs-body)/1.5 var(--font-serif); padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-ink); min-height: 2.25rem; }
.signature__label { font: 400 var(--fs-small)/1.35 var(--font-sans); color: var(--c-muted); }
.signature__line { font-style: italic; color: var(--c-muted); }

.sheet-header-link { margin-top: var(--s-5); }

.sign-form { max-width: 48rem; margin-inline: auto; }
.sign-form__actions { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.sign-form__actions .btn--sign { flex: 1 1 100%; }
@container page (min-width: 40rem) { .sign-form__actions .btn--sign { flex: 0 0 auto; } }

/* ---------- 15. Completion & message pages ------------------------------- */
.message { max-width: 38rem; }
.message--center { margin-inline: auto; }
.done-mark { width: 4.5rem; height: 4.5rem; margin-bottom: var(--s-5); }
.done-mark__ring { fill: none; stroke: var(--c-ink); stroke-width: 4; stroke-dasharray: 227; stroke-dashoffset: 0; }
.done-mark__check { fill: none; stroke: var(--c-accent); stroke-width: 5; stroke-linecap: square; stroke-dasharray: 50; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .done-mark__ring { stroke-dashoffset: 227; animation: draw var(--dur-slow) var(--ease-draw) 0.15s forwards; transform: rotate(-90deg); transform-origin: center; }
  .done-mark__check { stroke-dashoffset: 50; animation: draw 0.4s var(--ease-draw) 0.7s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.next-steps { margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--rule); }
.next-steps__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.next-steps__head h2 { font-size: var(--fs-h3); }
.arrow-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.arrow-list li { position: relative; padding-left: var(--s-6); font: 400 var(--fs-body)/1.6 var(--font-serif); }
.arrow-list li::before { content: ""; position: absolute; left: 0.125rem; top: 0.45em; width: 0.75rem; height: 0.75rem; background: var(--img-arrow) center / contain no-repeat; }

.lang-split { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
@container page (min-width: 44rem) { .lang-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); } }
.lang-split__col { padding-top: var(--s-4); border-top: var(--rule); }
.lang-split__col .title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.lang-tag { display: inline-block; margin-bottom: var(--s-3); font: 700 var(--fs-label)/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.lang-split__col .btn { margin-top: var(--s-5); }

.signal-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s-5); border-radius: var(--radius-round); background: var(--c-ink); color: var(--c-paper); }
.signal-icon .icon { width: 1.5rem; height: 1.5rem; }

/* Sync-failure guidance */
.guidance { --notice-c: var(--c-error); margin-bottom: var(--s-7); padding: var(--s-5); background: var(--c-soft); border-top: var(--rule); }
@container page (min-width: 36rem) { .guidance { padding: var(--s-6); } }
.guidance__head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.guidance__title { font-size: var(--fs-h3); line-height: 1.3; }
.guidance p { font: 400 var(--fs-body)/1.6 var(--font-serif); }
.steps { margin: var(--s-5) 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s-4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); font: 400 var(--fs-body)/1.6 var(--font-serif); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-round); background: var(--c-ink); color: var(--c-paper); font: 700 var(--fs-small)/1 var(--font-sans); }
.guidance__close { margin: 0; font: 500 var(--fs-ui)/1.5 var(--font-sans); }

/* ---------- 16. Auth (passkey) ------------------------------------------- */
.auth { display: grid; gap: var(--s-6); align-items: center; }
.auth__mark { display: none; }
@container page (min-width: 40rem) {
  .auth { grid-template-columns: minmax(0, 1fr) 11rem; gap: var(--s-8); }
  .auth__mark { display: block; width: 11rem; height: 11rem; }
}
.auth .intro { margin-bottom: var(--s-6); }
.status-line { display: flex; align-items: flex-start; gap: var(--s-2); min-height: 1.5rem; margin: var(--s-4) 0 0; font: 400 0.9375rem/1.45 var(--font-sans); }
.status-line--error { color: var(--c-error); font-weight: 500; }
.status-line--error::before { content: ""; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; flex: none; background: currentColor; -webkit-mask: var(--mask-alert) center / contain no-repeat; mask: var(--mask-alert) center / contain no-repeat; }
.status-line .spinner { margin-top: 0.2rem; }

/* ---------- 17. Prose (privacy) ------------------------------------------ */
.prose { max-width: var(--w-prose); font: 400 1.0625rem/var(--lh-prose) var(--font-serif); }
.prose h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; margin: var(--s-7) 0 var(--s-4); padding-top: var(--s-4); border-top: var(--rule); }
.prose p { margin-bottom: var(--s-5); }
.prose ul { margin: 0 0 var(--s-5); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--c-accent); }

/* ---------- 18. Motion: view transitions + reduced motion ---------------- */
@view-transition { navigation: auto; }
.stepper { view-transition-name: stepper; }
.page-body { view-transition-name: page-body; }
::view-transition-old(page-body) { animation: vt-out 0.15s ease-in both; }
::view-transition-new(page-body) { animation: vt-in var(--dur-base) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(0.5rem); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 19. Print ---------------------------------------------------- */
@media print {
  .site-footer, .skip-link, .secure, .sign-form, .sheet-header-link { display: none; }
  .sheet-stage { background: none; box-shadow: none; padding: 0; }
  .sheet { box-shadow: none; border: 0; padding: 0; }
}