/* pay.avsfmb.com · the niyat form, "the live receipt" (2026-11-13). Brief: docs/DESIGN.md §13.
   The tokens below mirror www's ww2/assets/css/tokens.css value for value (one product, one palette): change both
   together. Mobile first in intent (most members give from a phone link); one screen on a desktop. */

@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-var.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
  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: 'Source Sans 3';
  src: url('/fonts/source-sans-3-var-ext.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
/* Only the glyphs of the crest's name (subset 2026-11-13 from www's kanz-al-marjaan.woff2: 38 KB, not 170). */
@font-face {
  font-family: 'Kanz al-Marjaan';
  src: url('/fonts/kanz-al-marjaan-name.woff2') format('woff2');
  font-display: swap; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --c-ground: #F5F0E6; --c-surface: #FFFDF8; --c-tint: #EFE7D8;
  --c-ink: #2B1A14; --c-muted: #6B574D; --c-line: #DDD1BE; --c-edge: #8E7A63;
  --c-primary: #6E2417; --c-gold: #B48A3E; --c-gold-ink: #7D5E23;
  --c-palm: #3E6B45; --c-palm-dk: #2E5234; --c-palm-pale: #E4EEE3;
  --c-warn: #8A5A0B; --c-warn-pale: #F7ECD6; --c-danger: #B0281C; --c-danger-pale: #F8E1DD;
  --c-on-dark: #FFFDF8;

  --font: 'Source Sans 3', system-ui, sans-serif; --font-ar: 'Kanz al-Marjaan', serif;
  --fs-micro: 13px; --fs-sm: 14px; --fs-input: 16px; --fs-body: 17px; --fs-h3: 20px; --fs-h2: 24px; --fs-kpi: 30px;
  --lh-tight: 1.2; --lh-body: 1.5; --track-label: 0.06em;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 4px; --r-md: 8px; --r-pill: 999px;
  --e1: 0 1px 2px rgba(43, 26, 20, 0.06);
  --control-h: 48px; --rail-w: 400px;
  --t-fast: 120ms; --t-norm: 220ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --ring: 0 0 0 3px rgba(62, 107, 69, 0.30);
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-norm: 0ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-ground);
       -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; }
h1, h2, p, ul, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
em, i, cite, address { font-style: normal; }
button, input { font: inherit; color: inherit; }
a { color: var(--c-palm-dk); text-underline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Layout: the form, and the receipt composing itself beside it ── */
.page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); }
.form-col { width: 100%; max-width: 880px; justify-self: center; padding: var(--s6) clamp(var(--s5), 4vw, var(--s7));
            display: flex; flex-direction: column; justify-content: center; gap: var(--s5); }
.receipt-col { position: relative; background: var(--c-surface); border-left: 1px solid var(--c-line); padding: var(--s6) var(--s6) var(--s5);
               display: flex; flex-direction: column; justify-content: center; }
.receipt-col::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c-gold); }   /* the gold binding */

.intro h1 { font-size: var(--fs-kpi); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.intro p { margin-top: var(--s1); color: var(--c-muted); text-wrap: pretty; }

.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--c-warn);
          background: var(--c-warn-pale); color: var(--c-ink); font-size: var(--fs-input); }
.banner svg.ic { color: var(--c-warn); margin-top: 2px; }

.section { display: flex; flex-direction: column; gap: var(--s3); }
.section__head { display: flex; align-items: baseline; gap: var(--s3); }
.section__num { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-label); color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
.section__head h2 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 700; }
.section__head .hint { margin-left: auto; font-size: var(--fs-sm); color: var(--c-muted); }
.section__foot { font-size: var(--fs-sm); color: var(--c-muted); }

/* Fields: label above, an icon at the start of the box, the message under it */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.control { position: relative; display: flex; align-items: center; }
.control svg.ic { position: absolute; left: 14px; color: var(--c-gold-ink); pointer-events: none; }
.input { width: 100%; height: var(--control-h); padding: 0 var(--s4) 0 44px; font-size: var(--fs-input); background: var(--c-surface);
         border: 1px solid var(--c-edge); border-radius: var(--r-sm); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.input::placeholder { color: var(--c-muted); opacity: .75; }
.input:hover { border-color: var(--c-ink); }
.input:focus { outline: none; border-color: var(--c-palm); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--c-danger); }
input[type="date"].input { padding-right: var(--s3); min-width: 0; }
/* A field's message sits on its label's line, so a refused submit never makes the page longer */
.field { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label error" "control control";
         grid-template-rows: 1fr auto; gap: var(--s1) var(--s2); min-width: 0; }   /* side by side, the boxes line up even when one message wraps */
.field > label { align-self: end; }
.field > label { grid-area: label; }
.field > .control { grid-area: control; }
.field > .field__error { grid-area: error; justify-self: end; text-align: right; align-self: end; }
.field__error { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--c-danger); }
.section__head .field__error { margin-left: auto; text-align: right; }
.section__head:has(.field__error:not([hidden])) .hint { display: none; }

/* The two niyat, as choice cards; the count lives on the card, the Niyaz amounts open beneath */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.choice { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s3) var(--s3) var(--s3) var(--s4);
          background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--r-md);
          transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.choice:hover { border-color: var(--c-ink); }
.choice__pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.choice__pick::after { content: ""; position: absolute; inset: 0; }   /* the whole card ticks the box */
.choice__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tick { width: 24px; height: 24px; flex: none; border-radius: var(--r-sm); border: 1.5px solid var(--c-edge); display: grid; place-items: center;
        color: transparent; background: var(--c-surface); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tick svg.ic { width: 16px; height: 16px; stroke-width: 2.4; }
.choice__text { min-width: 0; line-height: var(--lh-tight); }
.choice__name { display: block; font-weight: 700; }
.choice__sub { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.choice:has(input:checked) { border-color: var(--c-palm); background: var(--c-palm-pale); box-shadow: inset 0 0 0 1px var(--c-palm); }
.choice:has(input:checked) .tick { background: var(--c-palm); border-color: var(--c-palm); color: var(--c-on-dark); }
.choice:has(.choice__pick input:focus-visible) { outline: 3px solid var(--c-palm); outline-offset: 2px; }

/* The count: a number box with no upper limit (Moiz, 2026-11-13), and − / + either side */
.stepper { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; border: 1px solid var(--c-edge); border-radius: var(--r-pill); background: var(--c-surface); }
.stepper button { width: 44px; height: 44px; border: 0; padding: 0; background: none; border-radius: var(--r-pill); cursor: pointer; color: var(--c-palm-dk);
                  display: grid; place-items: center; transition: background-color var(--t-fast) var(--ease); }
.stepper button:hover { background: var(--c-palm-pale); }
.stepper button:disabled { color: var(--c-line); cursor: default; background: none; }
.stepper button:focus-visible, .stepper input:focus-visible { outline: 3px solid var(--c-palm); outline-offset: 1px; }
.stepper input { width: 3ch; min-width: 44px; max-width: 12ch; height: 44px; border: 0; padding: 0; background: none; text-align: center; font-size: var(--fs-input); font-weight: 700;
                 font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.choice:not(:has(.choice__pick input:checked)) .stepper { visibility: hidden; }

/* pay.avsfmb.com/Niyaz shows only the Niyaz, /HamzaAS only the Salawaat (Moiz, 2026-11-13) */
.page[data-only] .choices { grid-template-columns: 1fr; }
.page[data-only] .hint--niyat { display: none; }
.page[data-only="niyaz"] .choice--salawaat, .page[data-only="salawaat"] .choice--niyaz { display: none; }

/* The Niyaz amounts: shown once the Niyaz is ticked (no script needed) */
.amounts { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.page:has(#niyaz:checked) .amounts { display: grid; }
.chip { position: relative; }
.chip > input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip > span:first-of-type { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 52px; padding: 0 var(--s1);
               border: 1px solid var(--c-edge); border-radius: var(--r-sm); background: var(--c-surface); line-height: var(--lh-tight);
               font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
               transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip > span:first-of-type small { font-size: var(--fs-micro); font-weight: 400; color: var(--c-muted); }
.chip:hover > span:first-of-type { border-color: var(--c-ink); }
.chip > input:checked + span { border-color: var(--c-palm); background: var(--c-palm); color: var(--c-on-dark); }
.chip > input:checked + span small { color: var(--c-on-dark); }
.chip > input:focus-visible + span { outline: 3px solid var(--c-palm); outline-offset: 2px; }
/* Other: the chip itself becomes the entry, so nothing below it moves */
.chip__entry { display: none; position: absolute; inset: 0; z-index: 1; align-items: center; gap: 2px; padding: 0 var(--s3);
               border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-palm); box-shadow: inset 0 0 0 1px var(--c-palm); font-weight: 700; }
.chip__entry input { width: 100%; height: 100%; min-width: 0; border: 0; padding: 0; background: none; font-size: var(--fs-input); font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.chip--other:has(> input:checked) .chip__entry { display: flex; }
.chip__entry:has(input[aria-invalid="true"]) { border-color: var(--c-danger); box-shadow: inset 0 0 0 1px var(--c-danger); }

/* ── The receipt ── */
.seal { display: flex; align-items: center; gap: var(--s4); }
.seal img { width: 68px; height: 68px; flex: none; }
.seal__ar { font-family: var(--font-ar); font-size: var(--fs-kpi); line-height: var(--lh-tight); color: var(--c-primary); }
.seal__en { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-gold-ink); }
.trust { margin-top: var(--s3); font-size: var(--fs-micro); color: var(--c-muted); }
.rule { display: block; width: 100%; height: 14px; margin: var(--s4) 0; color: var(--c-gold); }

.lines { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s2); min-height: 56px; }
.lines li { display: flex; justify-content: space-between; gap: var(--s3); font-variant-numeric: tabular-nums; }
.lines li span:first-child { color: var(--c-muted); }
.lines li span:last-child { white-space: nowrap; }
.lines .empty { color: var(--c-muted); font-size: var(--fs-sm); }
.lines .wanting { color: var(--c-warn); }
.total { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.total span { font-weight: 700; }
.total strong { font-size: var(--fs-kpi); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.words { min-height: 1.5em; font-size: var(--fs-sm); color: var(--c-gold-ink); text-align: right; text-wrap: balance; }

.paymode { margin-top: var(--s5); }
.paymode legend { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s2); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); padding: var(--s1); background: var(--c-tint); border: 1px solid var(--c-edge); border-radius: var(--r-md); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--r-sm); font-weight: 600; color: var(--c-muted);
            transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg label:hover span { color: var(--c-ink); }
.seg input:checked + span { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--e1), inset 0 0 0 1px var(--c-edge); }
.seg input:disabled { cursor: not-allowed; }
.seg input:disabled + span { text-decoration: line-through; color: var(--c-muted); }
.seg input:focus-visible + span { outline: 3px solid var(--c-palm); outline-offset: 1px; }
.paymode__note { margin-top: var(--s2); min-height: 1.5em; font-size: var(--fs-sm); color: var(--c-muted); }

.confirm { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; min-height: 24px; font-size: var(--fs-input); color: var(--c-muted); cursor: pointer; }
.check input { appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--c-edge); border-radius: var(--r-sm); background: var(--c-surface) center / 14px no-repeat; cursor: pointer;
               transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.check input:checked { background-color: var(--c-palm); border-color: var(--c-palm);
  background-image: 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='%23FFFDF8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check input[aria-invalid="true"] { border-color: var(--c-danger); }
.check input:focus-visible { outline: 3px solid var(--c-palm); outline-offset: 2px; }
.check--indian { display: none; }
.page:has(input[name="PayMode"][value="Cheque"]:checked) .check--indian { display: grid; }   /* only a cheque asks */

.problems { margin-top: var(--s3); text-align: center; font-size: var(--fs-sm); line-height: var(--lh-tight); font-weight: 600; color: var(--c-danger); }
.problems:not([hidden]) + .secure { display: none; }   /* the summary takes the Razorpay line's place */

.actions { padding-top: var(--s5); }
.btn { width: 100%; height: 56px; border: 0; border-radius: var(--r-md); background: var(--c-palm); color: var(--c-on-dark); font-size: var(--fs-body); font-weight: 700;
       display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.btn:hover { background: var(--c-palm-dk); }
.btn:focus-visible { outline: 3px solid var(--c-gold-ink); outline-offset: 3px; }
.btn[aria-busy="true"] { background: var(--c-palm-dk); cursor: progress; }
.secure { margin-top: var(--s3); display: flex; justify-content: center; align-items: center; gap: var(--s2); font-size: var(--fs-micro); color: var(--c-muted); }
.secure svg.ic { width: 16px; height: 16px; }
.foot { margin-top: var(--s3); text-align: center; font-size: var(--fs-micro); color: var(--c-muted); }
.foot a { color: var(--c-muted); display: inline-block; padding: var(--s1) 0; }

.brand-top { display: none; align-items: center; gap: var(--s3); }
.brand-top img { width: 48px; height: 48px; }
.brand-top .seal__ar { font-size: var(--fs-h2); }
.mini-total { display: none; flex-direction: column; line-height: var(--lh-tight); }
.mini-total small { font-size: var(--fs-micro); color: var(--c-muted); }
.mini-total strong { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }

/* Laptop screens up to 900px tall: the same page, tighter, still one screen */
/* Narrow desktops: the receipt gives the form a little more width */
@media (min-width: 1025px) and (max-width: 1199px) {
  :root { --rail-w: 352px; }
  .receipt-col { padding-inline: var(--s5); }
}
@media (min-width: 1025px) and (max-height: 900px) {
  .form-col { padding-block: var(--s4); gap: var(--s4); }
  .receipt-col { padding-block: var(--s4); }
  .intro h1 { font-size: var(--fs-h2); }
  .seal img { width: 56px; height: 56px; }
  .rule { margin: var(--s2) 0; }
  .trust { margin-top: var(--s2); }
  .lines { min-height: 48px; }
  .paymode { margin-top: var(--s3); }
  .confirm { margin-top: var(--s3); }
  .actions { padding-top: var(--s4); }
  .choice { min-height: 64px; }
}

/* Tablets and phones: one column; the total and the button stay in reach at the foot of the screen */
@media (max-width: 1024px) {
  html { scroll-padding-bottom: 104px; }   /* nothing focused or scrolled to hides under the bar */
  .page { grid-template-columns: minmax(0, 1fr); }
  .form-col { max-width: 640px; padding: var(--s5) var(--s4) var(--s4); }
  .receipt-col { max-width: 640px; width: 100%; justify-self: center; padding: var(--s5) var(--s4) calc(var(--s7) + 72px + env(safe-area-inset-bottom));
                 background: transparent; border-left: 0; border-top: 1px solid var(--c-line); }
  .receipt-col::before, .receipt-col .seal, .receipt-col .trust, .receipt-col .rule { display: none; }
  .brand-top { display: flex; }
  .actions { position: fixed; inset: auto 0 0 0; z-index: 10; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
             background: var(--c-surface); border-top: 1px solid var(--c-line); box-shadow: 0 -4px 16px rgba(43, 26, 20, 0.08);
             display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: center; }
  .actions .mini-total { display: flex; }
  .btn { height: 52px; }
  .secure { display: none; }
  .check { min-height: 44px; align-items: center; }   /* the whole row is the target on a touch screen */
  .foot a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 560px) {
  .choices { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .grid-2 { gap: var(--s3); }
  .field--wide { grid-column: 1 / -1; }
  .amounts { gap: var(--s1); }
  .chip > span:first-of-type { height: 48px; font-size: var(--fs-input); }
  .choice { gap: var(--s2); padding-right: var(--s2); }
  .stepper input { min-width: 32px; }
  .input { padding-left: 40px; }
  .control svg.ic { left: 12px; }
  .intro h1 { font-size: var(--fs-h2); }
  .section__head .hint { font-size: var(--fs-micro); }
}
@media (max-width: 420px) {
  .grid-2--when { grid-template-columns: minmax(0, 1fr); }   /* a date box needs its full width on a phone */
}
@media (max-width: 374px) {
  .amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* a narrow phone: amounts two across, never squeezed */
}

/* ── After the form (2026-11-13): the confirm page (Process), the receipt page (/Success) and the one error page.
   The same two columns and receipt as the form; what was asked is now read back, quietly, under hairlines. ── */
a.btn { text-decoration: none; }
.intro .stamp { margin-bottom: var(--s3); }
.stamp { display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s3) 0 var(--s2); border-radius: var(--r-pill);
         font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
         background: var(--c-warn-pale); color: var(--c-warn); }
.stamp svg.ic { width: 16px; height: 16px; stroke-width: 2.2; }
.stamp--paid { background: var(--c-palm-pale); color: var(--c-palm-dk); }
.stamp--failed { background: var(--c-danger-pale); color: var(--c-danger); }
.note { display: flex; flex-direction: column; gap: var(--s3); text-wrap: pretty; }
.note address { padding: var(--s3) var(--s4); background: var(--c-tint); border-radius: var(--r-md); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); margin: 0; border-top: 1px solid var(--c-line); }
.fact { min-width: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); }
.fact--wide { grid-column: 1 / -1; }
.fact dt { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--c-muted); }
.fact dt svg.ic { width: 16px; height: 16px; color: var(--c-gold-ink); }
.fact dd { margin: var(--s1) 0 0; padding-left: var(--s5); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.back { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 600; text-decoration: none; }
.back:hover { text-decoration: underline; }
.back:focus-visible { outline: 3px solid var(--c-palm); outline-offset: 2px; border-radius: var(--r-sm); }

.foot--contact a { display: inline-flex; align-items: center; min-height: 44px; }   /* the office's contacts: a 44px target at every width */
.meta { margin: var(--s4) 0 0; display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-sm); }
.meta div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.meta dt { flex: none; color: var(--c-muted); }
.meta dd { margin: 0; min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* The error page: a slip from the same receipt book, bound in gold */
.slip-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s4); }
.slip { position: relative; width: 100%; max-width: 480px; padding: var(--s6) var(--s6) var(--s5); background: var(--c-surface);
        border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--e1); overflow: hidden; }
.slip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c-gold); }
.slip h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
.slip__message { margin-top: var(--s2); text-wrap: pretty; }
.slip__help { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--c-muted); text-wrap: pretty; }
.slip__help a { display: inline-block; padding: var(--s3) 0; margin: calc(-1 * var(--s3)) 0; }   /* a 44px target, the line unmoved */

@media (max-width: 1024px) {
  .actions:not(:has(.mini-total)) { grid-template-columns: minmax(0, 1fr); }   /* one action, the full width */
  .receipt-col:not(:has(.actions)) { padding-bottom: var(--s5); }
  .slip-page { place-items: start center; padding: var(--s4) var(--s4) calc(var(--s7) + 72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .facts { column-gap: var(--s4); }
  .slip { padding: var(--s5) var(--s4) var(--s4) var(--s5); }
  .slip .seal img { width: 56px; height: 56px; }
}

@media (forced-colors: active) {
  .choice, .chip > span:first-of-type, .seg, .input, .btn, .stepper, .tick, .check input { border: 1px solid CanvasText; }
  .stamp, .slip { border: 1px solid CanvasText; }
  .chip > input:checked + span, .seg input:checked + span { outline: 2px solid Highlight; }
}
@media (prefers-contrast: more) {
  :root { --c-edge: #5E4C3A; --c-muted: #4F3E35; }
}