/* An aged bureau-de-change certificate, circa 1925, in light and dark.
 *
 * Arc's own identity is modern institutional sans, so the COLOURS are theirs
 * (#1434CB ink-blue, #231F20 ink, the #F79E1D / #F16122 ambers) and only the FORM
 * is period: engraved rules, guilloche, letterspaced small caps, tabular figures,
 * roman clause numerals, a wax seal, and the sum spelled out as on a cheque.
 *
 * No web fonts anywhere: the CSP is default-src 'none' with no font-src, so any
 * @font-face would be blocked. Every ornament is CSS. Colours in `bureau` and
 * `institutional` are Arc's own (#1434CB, #231F20, #F79E1D, #F16122).
 */

/* ========================================================== shared tokens */

:root {
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, "DejaVu Sans Mono", Consolas, monospace;

  /* defaults, overridden per theme */
  --display: var(--serif);
  --body-font: var(--serif);
  --label-font: var(--serif);
  --radius: 3px;
  --label-space: 0.2em;
  --btn-shadow: 2px 2px 0 rgba(35,31,32,0.82);
  --page-bg-extra: none;
}

/* ---------------------------------------------------------------- bureau */

:root {
  --paper: #efe6d5; --paper-2: #e6dbc6; --paper-3: #f7f1e4; --paper-edge: #d8caae;
  --field-bg: #fffdf7;
  --ink: #231F20; --ink-soft: #56514c; --ink-faint: #8a8178;
  --blue: #1434CB; --blue-soft: #2F578C; --blue-wash: #cdddf2;
  --amber: #F79E1D; --burnt: #F16122; --oxblood: #9d1c14; --seal: #2b6b3f;
  --rule: rgba(35,31,32,0.22); --rule-soft: rgba(35,31,32,0.10);
  --guilloche-a: rgba(20,52,203,0.30); --guilloche-b: rgba(241,97,34,0.22);
  --watermark: rgba(35,31,32,0.035);
  --display: var(--serif); --body-font: var(--serif); --label-font: var(--serif);
  --radius: 3px; --label-space: 0.22em;
  --btn-shadow: 2px 2px 0 rgba(35,31,32,0.82);
  --page-bg-extra:
    repeating-linear-gradient(45deg, rgba(35,31,32,0.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(35,31,32,0.016) 0 1px, transparent 1px 4px);
}

/* Bureau by lamplight. Not a generic dark theme: the sheet becomes oxidised
   leather and the ink becomes warm chalk, so every ornament still reads. */
/* Banner surfaces are overridden below: the light backgrounds belong to light mode,
   and without a dark counterpart the bold text landed tan-on-near-white. */
[data-mode="dark"] .banner-warn { background: #241d10; color: #e0cfa8; }
[data-mode="dark"] .banner-warn b { color: #f8ecca; }
[data-mode="dark"] .banner-info { background: #141d2b; color: #c6d6ef; }
[data-mode="dark"] .banner-info b { color: #e8f1ff; }
[data-mode="dark"] .banner button { color: var(--ink); }

[data-mode="dark"] {
  --paper: #14110c; --paper-2: #1d1913; --paper-3: #221d16; --paper-edge: #3d3527;
  --field-bg: #191510;
  --ink: #f0e6d0; --ink-soft: #bcae94; --ink-faint: #8b8068;
  --blue: #8fb0ff; --blue-soft: #b9cdff; --blue-wash: #1e2740;
  --amber: #ffc55c; --burnt: #ff8a52; --oxblood: #ef7268; --seal: #78c98f;
  --rule: rgba(240,230,208,0.26); --rule-soft: rgba(240,230,208,0.12);
  --guilloche-a: rgba(143,176,255,0.34); --guilloche-b: rgba(255,138,82,0.26);
  --watermark: rgba(240,230,208,0.045);
  --btn-shadow: 2px 2px 0 rgba(0,0,0,0.62);
  --page-bg-extra:
    repeating-linear-gradient(45deg, rgba(240,230,208,0.013) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(240,230,208,0.013) 0 1px, transparent 1px 4px);
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 2.2rem 1.25rem 5rem;
  max-width: 860px;
  color: var(--ink);
  font: 16px/1.6 var(--body-font);
  background-color: var(--paper);
  background-image:
    radial-gradient(1200px 520px at 50% -8%, rgba(127,127,127,0.10), transparent 60%),
    var(--page-bg-extra);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;
}

a { color: var(--blue); text-decoration: none; border-bottom: 1px solid currentColor; opacity: 0.95; }
a:hover { background: var(--blue-wash); }

/* ------------------------------------------------------------- ornaments */

.guilloche { height: 12px; display: none; }
.guilloche {
  display: block;
  background-image:
    repeating-radial-gradient(circle at 0 50%, transparent 0 5px, var(--guilloche-a) 5px 6px, transparent 6px 11px),
    repeating-radial-gradient(circle at 8px 50%, transparent 0 5px, var(--guilloche-b) 5px 6px, transparent 6px 11px);
  opacity: 0.75;
}

/* ------------------------------------------------------------- masthead */

.site-head { padding-bottom: 1.1rem; margin-bottom: 1.5rem; position: relative; }
.site-head { text-align: center; border-bottom: 3px double var(--rule); }

.head-eyebrow, .stat-label, .step-tag, .sec-label, .progress-meta {
  font-family: var(--label-font);
  font-size: 0.68rem; letter-spacing: var(--label-space);
  text-transform: uppercase; color: var(--ink-faint);
}
.head-eyebrow { display: block; margin-bottom: 0.5rem; }

h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.85rem, 5.4vw, 2.7rem);
  letter-spacing: 0.01em; line-height: 1.06;
}
h1 .arrow { color: var(--burnt); padding: 0 0.12em; }

.sub { margin: 0.65rem 0 0; max-width: 52ch; font-size: 0.92rem; color: var(--ink-soft); }
.sub { font-style: italic; margin-left: auto; margin-right: auto; }
.head-actions { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.head-actions { justify-content: center; }

/* ------------------------------------------------------------- sections */

.card {
  background: linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: 1.35rem 1.45rem;
  margin-bottom: 1.1rem;
}
.card {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 10px 22px -20px rgba(35,31,32,0.75);
}

.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.6rem; margin-bottom: 1rem;
}
h2 {
  margin: 0; font-family: var(--label-font);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: var(--label-space); text-transform: uppercase;
}
h3 {
  font-family: var(--label-font); font-size: 0.7rem; letter-spacing: var(--label-space);
  text-transform: uppercase; color: var(--ink-faint); margin: 1.15rem 0 0.5rem; font-weight: 700;
}
.muted { color: var(--ink-soft); font-size: 0.89rem; margin: 0 0 0.95rem; }

/* ---------------------------------------------------- theme + bell picker */

.chrome { display: flex; gap: 0.35rem; align-items: center; }
.chrome button {
  padding: 0.32rem 0.6rem; font-size: 0.64rem; box-shadow: none;
  letter-spacing: 0.1em;
}
.chrome button[aria-pressed="true"] {
  background: var(--blue); color: var(--paper); border-color: var(--blue);
}

/* --------------------------------------------------------- balance strip */

#account-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  border: 1px solid var(--paper-edge); border-radius: var(--radius);
  background: var(--paper-3); margin-bottom: 1.1rem; overflow: hidden;
}
.stat { padding: 0.7rem 0.95rem; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.stat-label { display: block; margin-bottom: 0.2rem; }
.stat-value { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.86rem; }

/* ------------------------------------------------------------- notices */

.banner {
  border: 1px solid var(--paper-edge); border-left: 4px solid;
  border-radius: var(--radius); padding: 0.88rem 1rem;
  margin-bottom: 1.1rem; font-size: 0.89rem; background: var(--paper-3);
}
.banner-warn { border-left-color: var(--amber); }
.banner-info { border-left-color: var(--blue); }
.banner-warn { background: #f8efd9; color: #4a3c1c; }
.banner-info { background: #e9f0fa; color: #23324e; }
.banner b { color: var(--ink); }
.banner button { margin-left: 0.45rem; }

/* ------------------------------------------------------------- controls */

button {
  font-family: var(--label-font); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 0.55rem 1rem; cursor: pointer; box-shadow: var(--btn-shadow);
  transition: transform 0.06s, box-shadow 0.06s, background 0.12s, filter 0.12s;
}
button:hover:not(:disabled) { filter: brightness(1.04); }
button:active:not(:disabled) { transform: translate(2px,2px); box-shadow: none; }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

button.primary {
  background: linear-gradient(180deg, var(--blue-soft), var(--blue));
  color: var(--paper); border-color: var(--blue);
}
button.ghost {
  border-style: dashed; box-shadow: none; background: transparent;
  color: var(--ink-soft); font-size: 0.7rem; padding: 0.36rem 0.68rem;
}
button.ghost:hover:not(:disabled) { color: var(--ink); }

.field-row { display: flex; gap: 1.15rem; flex-wrap: wrap; align-items: flex-end; }
.field-row > .field { flex: 1 1 215px; }
.field, label.field {
  display: block; margin-bottom: 0.95rem; font-family: var(--label-font);
  font-size: 0.68rem; letter-spacing: var(--label-space);
  text-transform: uppercase; color: var(--ink-faint);
}
.field small { display: block; margin-top: 0.3rem; font-size: 0.77rem; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.field small { font-style: italic; }

input[type=text], input[type=number], select {
  display: block; width: 100%; margin-top: 0.38rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.94rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--ink-faint); border-radius: var(--radius);
  padding: 0.58rem 0.7rem;
}
input, select { box-shadow: inset 1px 1px 2px rgba(35,31,32,0.10); }
select { font-family: var(--body-font); cursor: pointer; }
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
input[type=file] { font-family: var(--body-font); font-size: 0.85rem; color: var(--ink-soft); flex: 1 1 210px; }

.amount-wrap { display: flex; align-items: stretch; gap: 0.5rem; }
.amount-wrap input { margin-top: 0; }

.toggle {
  display: flex; align-items: center; gap: 0.4rem; font-family: var(--label-font);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer;
}
.toggle input { width: auto; margin: 0; accent-color: var(--blue); cursor: pointer; }
.toggle small { text-transform: none; letter-spacing: 0; opacity: 0.8; }

/* ------------------------------------------------------- exchange plate */

.quote {
  margin: 0.35rem 0 1.4rem; padding: 0.9rem 1.05rem;
  background: var(--field-bg); border: 1px solid var(--ink);
  border-radius: var(--radius); font-size: 0.91rem; color: var(--ink-soft);
}
.quote { box-shadow: inset 0 0 0 2px var(--rule-soft); }
.quote b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.quote.err { color: var(--oxblood); border-color: var(--oxblood); }

/* ------------------------------------------------- the countdown display */

/* Split-flap-ish plates. The same markup reads as engraved figures in `bureau`
   and as a departure board in `terminal`. */
.countdown {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0 0 0.9rem; padding: 0.85rem 1rem;
  border: 1px solid var(--paper-edge); border-radius: var(--radius);
  background: var(--field-bg);
}
.countdown-label { font-family: var(--label-font); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.flaps { display: flex; gap: 0.28rem; align-items: center; }
.flap {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 700; line-height: 1;
  padding: 0.3rem 0.4rem; min-width: 1.15em; text-align: center;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 2px;
  position: relative;
}
/* the hinge line across the middle of a split-flap tile */
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--paper); opacity: 0.8;
}
.flap-sep { font-family: var(--mono); font-size: 1.3rem; color: var(--ink-faint); }
.flap.tick { animation: flip 0.28s ease; }
@keyframes flip {
  0%   { transform: rotateX(0deg);   filter: brightness(1); }
  49%  { transform: rotateX(-88deg); filter: brightness(0.55); }
  51%  { transform: rotateX(88deg);  filter: brightness(0.55); }
  100% { transform: rotateX(0deg);   filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .flap.tick { animation: none; } }
.countdown.ready .flap { color: var(--seal); border-color: var(--seal); }

/* --------------------------------------------------------- the manifest */

ol#steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol#steps > li {
  counter-increment: step; position: relative;
  padding: 1rem 0 1rem 3.05rem; border-top: 1px solid var(--rule-soft);
}
ol#steps > li:first-child { border-top: 1px solid var(--rule); }
ol#steps > li:last-child { border-bottom: 1px solid var(--rule); }
ol#steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.95rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-family: var(--display); font-size: 0.92rem; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 50%; background: var(--field-bg);
}
li[data-state=busy]::before  { border-color: var(--blue); color: var(--blue); }
li[data-state=done]::before  { border-color: var(--seal); color: var(--seal); }
li[data-state=error]::before { border-color: var(--oxblood); color: var(--oxblood); }

.step-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.step-head b { font-weight: 700; font-size: 1rem; }
li[data-state=done] > .step-head b  { color: var(--seal); }
li[data-state=error] > .step-head b { color: var(--oxblood); }
ol#steps > li p { margin: 0.35rem 0 0.78rem; color: var(--ink-soft); font-size: 0.89rem; }
.dot { display: none; }

li[data-state=done] > .step-head::after,
li[data-state=error] > .step-head::after {
  font-family: var(--label-font); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.18em; padding: 0.15rem 0.4rem; border-radius: 2px;
}
li[data-state=done] > .step-head::after  { content: "CLEARED";  border: 2px solid var(--seal);    color: var(--seal); }
li[data-state=error] > .step-head::after { content: "FAILED"; border: 2px solid var(--oxblood); color: var(--oxblood); }
li[data-state=done] > .step-head::after,
li[data-state=error] > .step-head::after { transform: rotate(-4deg); opacity: 0.85; }

/* ------------------------------------------------------- clearing meter */

.progress-wrap { margin: 0 0 1rem; }
.progress {
  height: 13px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--field-bg); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 2%;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px),
    linear-gradient(90deg, var(--blue-soft), var(--blue));
  transition: width 0.7s ease;
}
.progress-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
.mono, #progress-eta { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------- listings */

.facts { margin: 0; padding-left: 1.15rem; }
.facts li { margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.89rem; }
.facts b { color: var(--ink); }

#stored-list { list-style: none; margin: 0; padding: 0; }
#stored-list li {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.58rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.86rem;
}
#stored-list li:last-child { border-bottom: none; }
#stored-list small { color: var(--ink-faint); }
small.ok { color: var(--seal) !important; font-weight: 700; }

code { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.85em; color: var(--blue-soft); word-break: break-all; }

.tip-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tip-row code { background: var(--field-bg); border: 1px dashed var(--ink-faint); border-radius: var(--radius); padding: 0.48rem 0.68rem; color: var(--ink); }

/* ------------------------------------------------------------ the tape */

pre {
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.62;
  background: var(--field-bg); border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--rule); border-radius: var(--radius);
  padding: 0.88rem 1rem; margin: 0; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word; color: var(--ink-soft);
}
#log { max-height: 330px; overflow-y: auto; }

footer { margin-top: 2rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.83rem; }
footer { border-top: 3px double var(--rule); }
footer p { margin: 0 0 0.65rem; }
footer pre { margin-bottom: 0.95rem; font-size: 0.71rem; }
.colophon { text-align: center; margin-top: 1.3rem; font-family: var(--label-font); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

.hidden { display: none !important; }

@media (max-width: 560px) {
  body { padding: 1.5rem 0.9rem 3.5rem; }
  .card { padding: 1.05rem 1rem; }
  ol#steps > li { padding-left: 2.65rem; }
  .field-row { gap: 0.6rem; }
  .site-head { gap: 0.9rem; }
}

/* ============================================ bureau: certificate details */

/* Corner rules, like the frame engraved on a share certificate. Drawn with
   gradients on ::before/::after so no image is needed under the strict CSP. */
.site-head::before,
.site-head::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border-color: var(--rule); border-style: solid; opacity: 0.9;
}
.site-head::before { top: -6px; left: 2px;  border-width: 2px 0 0 2px; }
.site-head::after  { top: -6px; right: 2px; border-width: 2px 2px 0 0; }

/* Serial line: a certificate always carries a reference. */
.serial {
  display: none;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--ink-faint); margin-top: 0.85rem;
}
.serial { display: block; }

/* Roman clause numerals, and a round wax-style seal instead of a box stamp. */
ol#steps { counter-reset: step; }
ol#steps > li::before { content: counter(step, upper-roman); font-size: 0.82rem; }
li[data-state=done] > .step-head::after {
  content: "SEALED";
  border: 2px double var(--seal); border-radius: 50%;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  font-size: 0.46rem; letter-spacing: 0.1em; transform: rotate(-8deg);
  padding: 0; opacity: 0.85; margin-left: auto; flex: 0 0 auto;
}
/* keep the seal on the right so it never crowds the clause title */
li[data-state=done] > .step-head { align-items: center; }

/* Faint diagonal watermark across the sheet, the way a specimen note is marked. */
#bridge-card { position: relative; overflow: hidden; }
#bridge-card::after {
  content: "ARC"; position: absolute; right: -0.5rem; bottom: -2.5rem;
  font-family: var(--serif); font-size: 9rem; font-weight: 700;
  color: var(--watermark); letter-spacing: 0.06em;
  transform: rotate(-14deg); pointer-events: none; user-select: none; z-index: 0;
}
#bridge-card > * { position: relative; z-index: 1; }

/* ------------------------------------------------- the rate plate (all themes) */

/* A bureau posts a rate board, not a paragraph. Two denominations, an equals, and
   the charges listed beneath as a ledger. */
.plate { margin: 0.35rem 0 1.4rem; }
.plate-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--field-bg); overflow: hidden;
}
.plate-side { flex: 1 1 0; padding: 0.8rem 0.95rem; min-width: 0; }
.plate-side + .plate-eq + .plate-side { border-left: 1px solid var(--rule-soft); }
.plate-cap {
  display: block; font-family: var(--label-font); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.plate-fig {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem); font-weight: 700; color: var(--ink);
  line-height: 1.15; overflow-wrap: anywhere;
}
.plate-sub { display: block; font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.15rem; }
.plate-eq {
  display: grid; place-items: center; padding: 0 0.55rem;
  font-family: var(--display); font-size: 1.25rem; color: var(--burnt);
  border-left: 1px solid var(--rule-soft);
}
.plate-charges {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  padding: 0.55rem 0.95rem 0;
  font-size: 0.78rem; color: var(--ink-soft);
}
.plate-charges span { display: inline-flex; gap: 0.4rem; }
.plate-charges b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.plate.err .plate-row { border-color: var(--oxblood); }
.plate-err { padding: 0.8rem 0.95rem; color: var(--oxblood); font-size: 0.88rem; }

/* Resting state for the counter, so the interface is legible before you deposit. */
.countdown.idle .flap { color: var(--ink-faint); opacity: 0.55; }
.countdown.idle { border-style: dashed; }

/* =========================================== bureau: the engraved apparatus */

/* Rosette above the title: concentric rings with a radial burst, the medallion a
   share certificate carries. Pure gradients, so nothing to load under the CSP. */
.rosette {
  width: 46px; height: 46px; margin: 0 auto 0.7rem;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, var(--guilloche-a) 0deg 3deg, transparent 3deg 9deg),
    radial-gradient(circle, var(--field-bg) 0 34%, transparent 34% 42%,
                    var(--guilloche-b) 42% 46%, transparent 46%);
  border: 1px solid var(--rule);
  opacity: 0.9;
}

/* Ornamental lozenge under the title, in place of a plain rule. */
.lozenge {
  margin: 0.75rem auto 0; width: 100%; max-width: 300px;
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--burnt); font-size: 0.8rem; line-height: 1;
}
.lozenge::before, .lozenge::after {
  content: ""; flex: 1 1 0; height: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

/* Guilloche on all four sides of the sheet, the way a note is bordered - not just
   a band under the masthead. Kept faint so it frames rather than shouts. */
#bridge-card {
  border: 1px solid var(--paper-edge);
  box-shadow:
    inset 0 0 0 1px var(--field-bg),
    inset 0 0 0 2px var(--rule-soft),
    inset 0 0 0 3px var(--field-bg),
    0 10px 22px -20px rgba(0,0,0,0.75);
  padding: 1.6rem 1.7rem;
}

/* Ledger rules were tried behind the manifest and removed: at this line-height
   they cut through the copy and the buttons instead of sitting behind them, which
   reads as a rendering fault rather than as paper. The tape below keeps the idea
   where the line-height is fixed and it actually lands. */

/* Clause markers keep the engraved roundel. A rotated diamond was tried and
   dropped: ::before cannot counter-rotate its own content, so the numeral came
   out crooked. Double ring instead, which reads as struck rather than drawn. */
ol#steps > li::before {
  box-shadow: 0 0 0 1px var(--field-bg), 0 0 0 2px var(--rule-soft);
}

/* Printer's ornament between sections. Drawn with a gradient rather than typed as
   a glyph: U+204B and friends are missing from most system serif stacks and fell
   back to a tofu box, which looks like a bug. */
.card + .card { position: relative; }
.card + .card::before {
  content: ""; position: absolute; top: -0.72rem; left: 50%;
  width: 74px; height: 7px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%, var(--burnt) 0 2px, transparent 2px),
    linear-gradient(90deg, transparent 0 12%, var(--rule) 12% 40%, transparent 40% 60%,
                    var(--rule) 60% 88%, transparent 88%);
  background-repeat: no-repeat;
  background-position: center, center;
  opacity: 0.75;
}

/* The receive figure gets the denomination treatment: large, and the sum spelled
   out beneath it exactly as a cheque does. */
.plate-side:last-child .plate-fig { font-size: clamp(1.3rem, 4.6vw, 1.85rem); }
.plate-side:last-child .plate-sub {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.06em;
  font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.3rem;
  border-top: 1px solid var(--rule-soft); padding-top: 0.28rem;
}

/* Counter reads as a stamped date field. */
.countdown { border-style: solid; border-width: 1px; }
.flap {
  border-radius: 0; border-width: 1px;
  box-shadow: inset 0 -1px 0 var(--rule-soft);
}

/* The log is a telegraph tape: narrower measure, torn top edge. */
#log {
  border-left: none;
  border-top: 1px dashed var(--rule);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 calc(1.62em - 1px), var(--rule-soft) calc(1.62em - 1px) 1.62em);
}