/* Christmas Gala: the 2025 ticket's look. White, gold, the garland, script headings.
   Dark mode is a candlelit night in the same golds; the ticket itself stays paper. */
:root {
  color-scheme: light dark;
  --bg: #fff;
  --gold: #b08a1e;
  --gold-deep: #8a6d1a;
  --gold-press: #6f5714;
  --gold-soft: #f3e7c3;
  --link: #8a6d1a;
  --on-gold: #fff;
  --ink: #2b2416;
  --muted: #6b5d3e;
  --paper: #fffdf8;
  --raised: #fffaf0;
  --line: #eadfc0;
  --field: #fff;
  --field-line: #cdbf98;
  --red: #9b2c2c;
  --ok-bg: #eef7e8; --ok-line: #b9d9a5; --ok-ink: #2b2416;
  --err-bg: #fbecec; --err-line: #e3b4b4; --err-ink: #9b2c2c;
  --admin-bg: #faf8f2;
  --chip: rgba(255,255,255,.88);
  --hero-veil: none;
  --band: linear-gradient(90deg, #8a6d1a, #e9cf7a 30%, #b08a1e 55%, #f2dc92 80%, #8a6d1a);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17130d;
    --gold: #c9a227;
    --gold-deep: #d4b04a;
    --gold-press: #b8952f;
    --gold-soft: #4a3d1c;
    --link: #e6c873;
    --on-gold: #1d1708;
    --ink: #f3ead6;
    --muted: #c4b48f;
    --paper: #211b12;
    --raised: #2a2317;
    --line: #3d3322;
    --field: #1b160f;
    --field-line: #5c4d2e;
    --red: #e08a8a;
    --ok-bg: #1f2a17; --ok-line: #3f5a2c; --ok-ink: #dcebcf;
    --err-bg: #2e1919; --err-line: #6b3434; --err-ink: #f2b8b8;
    --admin-bg: #17130d;
    --chip: rgba(23,19,13,.72);
    --hero-veil: linear-gradient(180deg, rgba(23,19,13,.05) 0%, rgba(23,19,13,.25) 18%, rgba(23,19,13,.80) 34%, #17130d 52%);
  }
}

/* The sisters' dashboard is a working tool, not the gala: calm neutrals, light first,
   one restrained blue for actions, and a neutral grey dark mode. Guest pages keep the
   gala's white and gold. (Pablo, via Peter, 2026-10-26: the dashboard in dark mode was
   "a dark brown and yellow ... not aesthetically pleasing".) */
body.admin {
  --bg: #f5f5f7; --paper: #ffffff; --raised: #fafafc; --line: #dcdce1; --field: #ffffff; --field-line: #c7c7cc;
  --ink: #1d1d1f; --muted: #6e6e73;
  --gold: #2563c9; --gold-deep: #2563c9; --gold-press: #1d4fa3; --gold-soft: #e7eefb; --link: #2563c9; --on-gold: #ffffff;
  --ok-bg: #e9f6ec; --ok-line: #a9d8b4; --ok-ink: #1d4d2b; --err-bg: #fdecec; --err-line: #f0b4b4; --err-ink: #a12a2a; --red: #c62828;
  --admin-bg: #f5f5f7; --band: linear-gradient(#dcdce1, #dcdce1);
}
@media (prefers-color-scheme: dark) {
  body.admin {
    --bg: #1c1c1e; --paper: #2c2c2e; --raised: #333336; --line: #3d3d41; --field: #1c1c1e; --field-line: #4a4a4e;
    --ink: #f2f2f7; --muted: #a1a1a6;
    --gold: #6aa3ff; --gold-deep: #6aa3ff; --gold-press: #8bb8ff; --gold-soft: #22324f; --link: #7fb0ff; --on-gold: #0b1730;
    --ok-bg: #18301f; --ok-line: #2f6b40; --ok-ink: #bfe8c9; --err-bg: #3a1c1c; --err-line: #7a3434; --err-ink: #f5c2c2; --red: #ff6b6b;
    --admin-bg: #1c1c1e; --band: linear-gradient(#3d3d41, #3d3d41);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins over a component's own display */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 "Libre Baskerville", Georgia, serif; }
a { color: var(--link); }
a, button, summary, label, input, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
main { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; }
main.wide { max-width: 1040px; }
.script { font-family: "Great Vibes", "Snell Roundhand", cursive; font-weight: 400; }
.center { text-align: center; }
h2.script { font-size: 2.3rem; margin: .2em 0 .3em; color: var(--ink); line-height: 1.1; }

/* the top: the garland on the home page, a slim band elsewhere */
header.top { position: relative; text-align: center; padding: 10px 16px 6px; border-bottom: 3px solid transparent; border-image: var(--band) 1; }
header.top.hero { background: var(--hero-veil), var(--bg) url(garland.jpg) center top / cover no-repeat; min-height: 300px; padding-top: 150px; border: 0; }
header.top .brand { display: inline-block; padding: 2px 4px; font-size: 2rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
.presenter { font-family: "Great Vibes", cursive; font-size: 1.5rem; margin: 0; }
header.hero h1 { font-size: clamp(2.6rem, 11vw, 4rem); margin: 0; line-height: 1.05; }
.langs { position: absolute; top: 8px; right: 10px; font: 15px/1 -apple-system, system-ui, sans-serif; display: flex; gap: 6px; }
header.top:not(.hero) .langs { position: static; justify-content: flex-end; margin: -4px -6px 0; }
.langs a, .langs span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--chip); text-decoration: none; }
.langs span { background: var(--gold-deep); color: var(--on-gold); }
header.top:not(.hero) .langs a { background: none; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; margin: 18px 0; }
.card.narrow { max-width: 420px; margin: 32px auto; }
.when strong { font-size: 1.15rem; }
.fund { font-family: "Great Vibes", cursive; font-size: 1.7rem; margin: .4em 0; }
.price { font-weight: 700; }
.note { color: var(--muted); font-size: .92rem; }
.flash { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); padding: 10px 14px; border-radius: 8px; }
.error { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); padding: 10px 14px; border-radius: 8px; }
.nativity { height: 0; padding-bottom: 42%; background: url(baby-jesus.jpg) center / cover; border-top: 6px solid; border-bottom: 6px solid; border-image: var(--band) 1; margin: 8px -16px; }
.nativity.small { margin: 12px -18px -14px; padding-bottom: 36%; border-bottom: 0; }

/* the pay box is shared with the email, so its colours arrive inline */
.paybox table { border-collapse: separate; background: transparent; }
.paybox td { padding: 0; border-bottom: 0; text-align: center; vertical-align: middle; }
.paybox td[align=center] > table { width: auto; }
.paybox .em-box { background: var(--raised) !important; border-color: var(--gold) !important; }
.paybox .em-stub { background: var(--field) !important; border-color: var(--gold) !important; }
.paybox .em-ink { color: var(--ink) !important; }
.paybox .em-muted { color: var(--muted) !important; }
.paybox .em-line { border-color: var(--line) !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--gold-deep); color: var(--on-gold); font: inherit; font-weight: 700; padding: 12px 20px; text-decoration: none; cursor: pointer; min-height: 48px; }
.btn:hover { background: var(--gold-press); }
.btn:active { background: var(--gold-press); transform: scale(.97); }
.btn.big { font-size: 1.15rem; padding: 15px 28px; width: 100%; max-width: 360px; }
p > .btn.big { display: flex; margin: 0 auto; }
.btn.small { padding: 10px 16px; font-size: .9rem; min-height: 44px; font-weight: 600; }
.btn.danger { background: var(--red); color: #fff; }
.btn:disabled { opacity: .6; transform: none; }

form label { display: block; margin: 12px 0; font-weight: 700; font-size: .95rem; }
form label small { display: block; font-weight: 400; color: var(--muted); }
input, select, textarea { display: block; width: 100%; margin-top: 4px; font: 17px/1.3 -apple-system, system-ui, sans-serif; padding: 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--gold-soft); border-color: var(--gold); }
input[type=checkbox], input[type=radio] { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; margin: 0; padding: 0; accent-color: var(--gold-deep); }
label.check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-weight: 400; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qty { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; }
.qty label { margin: 0; }
.stepper { display: flex; align-items: center; flex: 0 0 auto; }
.stepper input { width: 60px; text-align: center; margin: 0 6px; font-size: 20px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); background: var(--field); color: var(--gold-deep); font-size: 1.5rem; cursor: pointer; }
.stepper button:active { background: var(--gold-soft); transform: scale(.94); }
.total { font-size: 1.3rem; font-weight: 700; border-top: 2px solid var(--line); padding-top: 12px; font-variant-numeric: tabular-nums; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; }
fieldset.pay label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin: 0 16px 0 0; font-weight: 400; }

/* the ticket, as in 2025: paper in either light, so the QR always scans dark on white */
.ticket { --ink: #2b2416; --muted: #6b5d3e; --line: #eadfc0; color: var(--ink); color-scheme: light;
  position: relative; text-align: center; background: #fff; border: 2px solid #b08a1e; border-radius: 14px; padding: 0 18px 14px; margin: 18px auto; max-width: 420px; overflow: hidden; }
.ticket .garland { height: 96px; margin: 0 -18px; background: url(garland-email.jpg) center top / cover; }
.ticket h3 { font-size: 2.2rem; margin: 0; line-height: 1.1; }
.ticket .qr svg { width: 220px; height: 220px; max-width: 100%; }
.ticket .holder { font-weight: 700; font-size: 1.2rem; margin: .2em 0 .5em; }
.ticket .meta { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 .6em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticket .meta span { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 4px; font-size: .8rem; color: var(--muted); }
.ticket .meta span + span { border-left: 1px solid var(--line); }
.ticket .meta b { color: var(--ink); font-size: .95rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ticket .meta b.paddle { font-size: 1.7rem; line-height: 1.1; }
.ticket .meta b:not(.paddle) { white-space: nowrap; font-size: clamp(.74rem, 3.5vw, .95rem); letter-spacing: 0; }   /* a ticket code never splits */
.qr.big svg { width: 280px; height: 280px; max-width: 100%; }

.seat { border-top: 1px solid var(--line); padding: 6px 0; }
.seat label { margin: 6px 0; }
.seat label.check { margin: 0; }
.seat small { font-weight: 400; color: var(--muted); }

footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 16px 28px; }
footer .band { height: 4px; background: var(--band); margin: 0 0 14px; }
footer a { display: inline-block; padding: 12px 0; }

/* dashboard */
body.admin { background: var(--admin-bg); font-size: 16px; font-family: -apple-system, system-ui, sans-serif; }
.adminbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 12px; background: var(--paper); border-bottom: 3px solid transparent; border-image: var(--band) 1; }
.adminbar .brand { font-size: 1.8rem; color: var(--ink); text-decoration: none; padding: 0 4px; }
.adminbar nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.adminbar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.adminbar nav a:active { background: var(--gold-soft); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.stats div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: .9rem; color: var(--muted); }
.stats b { font-size: 1.4rem; display: block; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats div:last-child b { display: inline; font-size: inherit; }
.stats div:last-child a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.search { display: flex; gap: 8px; }
.search input { font-size: 20px; margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); text-decoration: none; background: var(--paper); }
.tab.on { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--on-gold); }
table { width: 100%; border-collapse: collapse; background: var(--paper); }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td a:not(.btn) { display: inline-block; padding: 10px 0; margin: -10px 0; }
.memo { font-family: Menlo, Consolas, monospace; letter-spacing: 1px; }
.pill { font-size: .75rem; background: var(--gold-soft); color: var(--ink); border-radius: 10px; padding: 1px 7px; }
tr.st-void td, tr.st-expired td, tr.off td { color: var(--muted); opacity: .75; }
/* paper-ticket numbers after a table sale: one ticket per line that never breaks, two side by side when they fit (Petra, 10-27) */
.serials { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, max-content)); justify-content: center; gap: 6px 24px; }
.serials li { white-space: nowrap; font-variant-numeric: tabular-nums; }
details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
form.inline { display: inline; }
form.inline .btn { margin: 2px 0; }
@media (max-width: 600px) {
  .orders thead { display: none; }
  .orders tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; border-bottom: 1px solid var(--line); padding: 10px 8px; }
  .orders td { display: block; border: 0; padding: 0; }
  .orders td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .orders td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .orders td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .orders td:nth-child(4) { grid-column: 1; grid-row: 3; color: var(--muted); font-size: .9rem; }
  .orders td:nth-child(4) br { display: none; }
  .orders td:nth-child(4) small::before { content: " \00b7  "; }
  .orders td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  .orders td:nth-child(5):empty { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .stepper button { transition: background .15s, transform .1s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .stepper button:active { transform: none; }
}
@media (prefers-contrast: more) {
  .card, .stats div, .tab { border-color: var(--ink); }
  .note, footer { color: var(--ink); }
}
/* check in and the phone as a paddle */
.big-check { font-size: 4rem; line-height: 1; color: #2f7d4a; margin: 0; }
form.here { border: 2px solid var(--gold); }
body.paddle-page { background: #fff; margin: 0; }
.paddle-full { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; color: #000; text-decoration: none; }
.paddle-no { font: 700 min(62vw, 70vh)/1 -apple-system, system-ui, sans-serif; letter-spacing: -.04em; }
.paddle-hint { font: 15px/1.4 -apple-system, system-ui, sans-serif; color: #777; padding: 0 16px 24px; text-align: center; }
/* the door */
.door { max-width: 560px; margin: 0 auto; }
.door .result { border-radius: 16px; padding: 22px 16px; text-align: center; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 4px; background: var(--paper); border: 2px solid var(--line); }
.door .result .big { font-size: 3rem; line-height: 1; }
.door .result h2 { margin: 2px 0 0; font-size: 1.6rem; }
.door .result.ok { background: var(--ok-bg); border-color: #2f7d4a; }
.door .result.no { background: var(--err-bg); border-color: var(--red); }
.door .result.warn { background: var(--raised); border-color: var(--gold); }
.door .result.idle { opacity: .7; }
.door .cam { display: none; position: relative; border-radius: 14px; overflow: hidden; background: #000; margin-top: 10px; }
.door .cam.on { display: block; }
.door .cam video { width: 100%; display: block; max-height: 46vh; object-fit: cover; }
.door .cam .box { position: absolute; inset: 14% 12%; border: 2px solid rgba(255,255,255,.8); border-radius: 12px; }
.door .entry { display: flex; gap: 8px; margin: 10px 0; }
.door .entry input { margin: 0; font: 600 1.1rem/1 Menlo, monospace; letter-spacing: .08em; }
.door .row { display: flex; gap: 8px; flex-wrap: wrap; }
.door .row .btn { flex: 1; }
.door .tally { display: flex; gap: 8px; margin: 10px 0; text-align: center; font-size: .8rem; }
.door .tally div { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; }
.door .tally b { display: block; font-size: 1.3rem; }
.door .log { font: 13px/1.7 Menlo, monospace; max-height: 160px; overflow: auto; color: var(--muted); }
.door .log span { display: block; }
.door .door-map { display: none; }
/* The door at every size (Duo preview, PLAN 5c; spec TRI-PAGE-024). No fixed device sizes: the layout follows the
   space. Narrow: one column, as before. Short and wide (a phone on its side, the Duo folded on its side): the
   verdict beside the controls, in a compact row. Tall and wide (the Duo opened, an iPad upright): one bigger
   column. Wide (the Duo opened on its side, an iPad on its side): the verdict and camera on the left, about 60%,
   the controls and the record of scans on the right. Nothing here runs a scan; a resize only reflows. */
.duo-preview .door { max-width: 560px; container-type: inline-size; }
.duo-preview .door .pane { min-width: 0; }
.duo-preview .door .result { transition: background-color .2s, border-color .2s; }
.duo-preview .door .result .meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.duo-preview .door .tally b { font-variant-numeric: tabular-nums; }
.duo-preview .door .result .table { margin-top: 6px; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.duo-preview .door .result .table.unset { font-size: 1rem; font-weight: 700; color: var(--muted); }
.duo-preview .door .result .big ~ * { grid-column: 2; }     /* in the compact row layouts every line sits beside the mark */
.duo-preview .door .door-map { margin: 10px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.duo-preview .door .door-map svg.room .table.mine .table-shape { fill: var(--gold-deep); stroke: var(--gold-soft); stroke-width: 14; paint-order: stroke; }
.duo-preview .door .door-map svg.room .table.mine .table-label { fill: var(--on-gold); font-size: 38px; }
.duo-preview .door .entry .btn { min-width: 96px; }
/* the camera on: the verdict shrinks to a row so the code box stays on the first screen */
.duo-preview .door:has(.cam.on) .result { min-height: 0; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; text-align: left; align-items: center; }
.duo-preview .door:has(.cam.on) .result .big { grid-row: span 4; font-size: 2.2rem; }
.duo-preview .door:has(.cam.on) .result h2 { font-size: 1.3rem; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px) {
  .duo-preview .door { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .duo-preview .door .result { min-height: 0; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; text-align: left; align-items: center; }
  .duo-preview .door .result .big { grid-row: span 4; font-size: 2.4rem; }
  .duo-preview .door .result h2 { font-size: 1.4rem; }
  .duo-preview .door .cam video { max-height: calc(100svh - 190px); }
  .duo-preview .door .entry { margin-top: 0; }
  .duo-preview .door .tally { margin: 8px 0; }
  .duo-preview .door .log { max-height: 6.8em; }
  .duo-preview .door .work > .note:last-child { display: none; }      /* the how-to line returns when there is room */
}
@media (min-width: 640px) and (min-height: 700px) {
  .duo-preview .door { max-width: 720px; }
  .duo-preview .door .result { min-height: 30svh; padding: 28px 20px; gap: 6px; }
  .duo-preview .door .result .big { font-size: 4.5rem; }
  .duo-preview .door .result h2 { font-size: 2.4rem; }
  .duo-preview .door .result .sub { font-size: 1.35rem; font-weight: 700; }
  .duo-preview .door .result .meta { font-size: 1.05rem; }
  .duo-preview .door .cam video { max-height: 44svh; aspect-ratio: 4 / 3; }
  .duo-preview .door .entry input { font-size: 1.35rem; min-height: 56px; }
  .duo-preview .door .entry .btn, .duo-preview .door .row .btn { min-height: 56px; font-size: 1.05rem; }
  .duo-preview .door .tally { font-size: .95rem; }
  .duo-preview .door .tally b { font-size: 2rem; }
  .duo-preview .door .log { max-height: 22svh; }
}
@media (min-width: 880px) and (orientation: landscape) and (min-height: 501px) {
  .duo-preview .door { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 20px; align-items: start; }
  .duo-preview .door .look { position: sticky; top: 12px; }
  .duo-preview .door .result { min-height: 0; height: calc(100svh - 160px); max-height: 560px; }
  .duo-preview .door .result .big { font-size: 4.5rem; }
  .duo-preview .door .result h2 { font-size: 2.4rem; }
  .duo-preview .door .result .sub { font-size: 1.35rem; font-weight: 700; }
  .duo-preview .door:has(.cam.on) .result { height: auto; }
  .duo-preview .door .cam video { max-height: calc(100svh - 300px); }
  .duo-preview .door .entry { margin-top: 0; }
  .duo-preview .door .tally { display: grid; grid-template-columns: 1fr 1fr; }
  .duo-preview .door .log { max-height: calc(100svh - 480px); min-height: 5em; }
  .duo-preview .door:not(:has(.cam.on)) .door-map.on { display: block; }
  .duo-preview .door:has(.door-map.on):not(:has(.cam.on)) .result { height: auto; min-height: 0; }
  .duo-preview .door .door-map svg.room { max-height: calc(100svh - 330px); }
}
tr.done td { color: #2f7d4a; }
.card.alert { border-color: var(--red); background: var(--err-bg); }
.poster h1 { font-size: 3rem; margin: 0; }
@media print { .adminbar, .noprint { display: none; } body.admin, .card { background: #fff; border: 0; } .qr.big svg { width: 420px; height: 420px; } }
.sheet td.tick { width: 70px; border: 1px solid var(--line); }

/* buttons that share a line keep a gap; a way to recover a lost link is the quiet one */
p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: 10px; }
a.btn[href="/lost.php"] { background: transparent; color: var(--link); border: 2px solid var(--gold); }
a.btn[href="/lost.php"]:hover, a.btn[href="/lost.php"]:active { background: var(--gold-soft); }

/* the ticket's own actions (show my paddle, pass it on): quiet outline buttons in the
   ticket's fixed gold, so they read the same in either light and never outshout the QR */
.ticket .btn.small { min-width: 210px; background: transparent; color: #8a6d1a; border: 2px solid #b08a1e; }
.ticket .btn.small:hover, .ticket .btn.small:active { background: #f3e7c3; }
.ticket form.pass-form { margin: 0 0 .6em; }
.ticket p:has(> a.btn.small) { margin: .4em 0; }
/* a ticket on its way to someone else: still valid until they accept, so only marked */
.ticket:has(.pass-offered) { border-style: dashed; }
.ticket .pass-offered { display: inline-block; margin: .2em 0 .5em; padding: 6px 12px; border-radius: 12px; background: #f3e7c3; color: #2b2416; }
.ticket .pass-offered a { display: inline-block; padding: 12px 2px; margin: -12px 0; font-weight: 700; color: #8a6d1a; }
.ticket .pass-cancel.btn.small { border-color: #cdbf98; color: #6b5d3e; }

/* passing a ticket on: the share panel is the task in hand, so it wears the gold band */
section.pass-share { border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--band) border-box; }
section.pass-share .qr { display: inline-block; padding: 10px; border-radius: 12px; background: #fff; line-height: 0; }
section.pass-share .qr svg { width: 200px; height: 200px; }
section.pass-share input.pass-link { font: 14px/1.3 Menlo, Consolas, monospace; text-align: center; color: var(--muted); }
section.pass-share .pass-share-btn { width: 100%; max-width: 360px; }

/* alerts on this phone (Web Push): a quiet panel beside the tickets, its icon telling the
   state; push.js rewrites the class to "push <state>", so nothing here leans on .card */
section.push { display: grid; grid-template-columns: 28px 1fr; gap: 6px 12px; align-items: start; margin: 18px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: .95rem; }
section.push::before { content: ""; grid-row: 1 / span 2; width: 28px; height: 28px; margin-top: 1px; background: var(--gold-deep);
  -webkit-mask: var(--push-icon) center / contain no-repeat; mask: var(--push-icon) center / contain no-repeat; }
section.push > p { grid-column: 2; margin: 0; }
section.push .push-on { grid-column: 1 / -1; width: 100%; margin-top: 6px; background: transparent; color: var(--link); border: 2px solid var(--gold); }
section.push .push-on:hover, section.push .push-on:active { background: var(--gold-soft); }
section.push.off { --push-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
section.push.on { --push-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
section.push.on::before { background: currentColor; }
section.push.blocked { --push-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8c0 2.7.6 4.6 1.3 6'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.7 4.7 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); color: var(--muted); }
section.push.blocked::before { background: var(--muted); }
section.push.install { --push-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M12 7v6M9.5 10.5 12 13l2.5-2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); border-color: var(--gold); }

/* "Tables are now open": the gala's gold band around it, and one gentle pop as it appears */
p.flash.tables-open { margin: 16px 0; padding: 16px 18px; border: 3px solid transparent; border-radius: 14px; text-align: center;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--band) border-box; color: var(--ink); font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  p.flash.tables-open:not([hidden]) { animation: tables-pop .5s cubic-bezier(.2, .9, .25, 1.2); }
  @keyframes tables-pop { from { transform: scale(.94); opacity: 0; } }
}

/* the auction: game night. On the guest auction pages the site's own tokens turn to an
   evergreen night with glass-ornament colours, so cards, fields and flashes follow;
   the rules below dress the auction's own hooks. One look in either light (a dim ballroom). */
body:has(main .lots), body:has(main article.item) {
  color-scheme: dark;
  --bg: #0c1812; --paper: #142519; --raised: #1b3122; --line: #2a4532; --field: #0f1f15; --field-line: #3a5a44;
  --ink: #fbf6ea; --muted: #b4c4b8; --link: #ffc94a; --gold: #ffc94a; --gold-deep: #ffc94a; --gold-press: #f0b52a; --gold-soft: #3d3418; --on-gold: #2a1d00;
  --ok-bg: #123524; --ok-line: #2fd486; --ok-ink: #bff5d9; --err-bg: #3a1520; --err-line: #ff4d63; --err-ink: #ffd0d6;
  --ruby: #ff4d63; --emerald: #2fd486; --sapphire: #5b9bff; --amethyst: #bb7bff; --o: var(--gold);
  --game: "Shrikhand", "Cooper Black", Georgia, serif;
  --plain: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif;
  --chip: rgba(12,24,18,.7);
  background: radial-gradient(900px 420px at 50% -120px, #1d3a28 0%, transparent 70%), var(--bg);
  font-family: var(--plain);
}
body:has(main .lots) main, body:has(main article.item) main { font-family: var(--plain); }

/* a string of Christmas lights across the top, on two circuits like a real string: alternate bulbs fade
   up and down out of step (Pablo, via Peter, 2026-10-27: "animate the christmas lights"). It chases when you
   take the lead. Cheap on old phones: the fade is two registered numbers, stepped to about six repaints a
   second on a 22px strip; a browser without @property keeps the steady string; reduced motion keeps it still. */
@property --la { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --lb { syntax: "<number>"; inherits: false; initial-value: 1; }
body:has(main .lots) main::before, body:has(main article.item) main::before {
  content: ""; display: block; height: 22px; margin: 4px 0 2px; --la: 1; --lb: 1;
  background:
    linear-gradient(#3c5a44, #3c5a44) 0 5px / 100% 2px no-repeat,
    radial-gradient(circle at 11px 13px, rgba(255,77,99,calc(.5 + .5 * var(--la))) 0 4px, rgba(255,77,99,calc(.4 * var(--la))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 33px 13px, rgba(255,201,74,calc(.5 + .5 * var(--lb))) 0 4px, rgba(255,201,74,calc(.4 * var(--lb))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 55px 13px, rgba(47,212,134,calc(.5 + .5 * var(--la))) 0 4px, rgba(47,212,134,calc(.4 * var(--la))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 77px 13px, rgba(91,155,255,calc(.5 + .5 * var(--lb))) 0 4px, rgba(91,155,255,calc(.4 * var(--lb))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 99px 13px, rgba(187,123,255,calc(.5 + .5 * var(--la))) 0 4px, rgba(187,123,255,calc(.4 * var(--la))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 121px 13px, rgba(255,77,99,calc(.5 + .5 * var(--lb))) 0 4px, rgba(255,77,99,calc(.4 * var(--lb))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 143px 13px, rgba(255,201,74,calc(.5 + .5 * var(--la))) 0 4px, rgba(255,201,74,calc(.4 * var(--la))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 165px 13px, rgba(47,212,134,calc(.5 + .5 * var(--lb))) 0 4px, rgba(47,212,134,calc(.4 * var(--lb))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 187px 13px, rgba(91,155,255,calc(.5 + .5 * var(--la))) 0 4px, rgba(91,155,255,calc(.4 * var(--la))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x,
    radial-gradient(circle at 209px 13px, rgba(187,123,255,calc(.5 + .5 * var(--lb))) 0 4px, rgba(187,123,255,calc(.4 * var(--lb))) 5px, transparent 9px) 0 0 / 220px 22px repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  html.lead-taken main::before { animation: lights-chase .44s steps(1) 4; }
  @keyframes lights-chase { 25% { background-position: 0 5px, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0, 22px 0; filter: brightness(1.5); }
                            50% { background-position: 0 5px, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0, 44px 0; }
                            75% { background-position: 0 5px, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0, 66px 0; filter: brightness(1.5); } }
  @supports (transition-behavior: allow-discrete) {   /* a stand-in for @property (same browsers); without it the numbers would jump, not fade */
    body:has(main .lots) main::before { animation: lights-twinkle 3.2s steps(10) infinite; }
    /* a lot's bid page: slower and shallower, so the bid keeps the eye */
    body:has(main article.item) main::before { animation: lights-calm 7s steps(14) infinite; }
    /* the lead chase runs over the twinkle, which carries on after it */
    html.lead-taken body:has(main .lots) main::before { animation: lights-chase .44s steps(1) 4, lights-twinkle 3.2s steps(10) infinite; }
    html.lead-taken body:has(main article.item) main::before { animation: lights-chase .44s steps(1) 4, lights-calm 7s steps(14) infinite; }
    @keyframes lights-twinkle { 0%, 100% { --la: 1; --lb: .2; } 50% { --la: .2; --lb: 1; } }
    @keyframes lights-calm { 0%, 100% { --la: 1; --lb: .65; } 50% { --la: .65; --lb: 1; } }
  }
}

/* the catalogue: each lot wears an ornament colour */
.lots { display: grid; gap: 14px; margin: 14px 0; }
@media (min-width: 560px) { .lots { grid-template-columns: 1fr 1fr; } }
.lots .lot:nth-child(5n+1) { --o: var(--ruby); } .lots .lot:nth-child(5n+2) { --o: var(--emerald); } .lots .lot:nth-child(5n+3) { --o: var(--sapphire); }
.lots .lot:nth-child(5n+4) { --o: var(--gold); } .lots .lot:nth-child(5n) { --o: var(--amethyst); }
.card.lot { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 10px 14px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--o) 18%, var(--paper)) 0%, var(--paper) 55%); border: 1px solid color-mix(in srgb, var(--o) 45%, var(--line)); }
.card.lot:active { transform: scale(.98); }
.card.lot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 55%, transparent); }
.card.lot .note { color: var(--o); font-weight: 700; font-size: .85rem; margin-top: 4px; }
.card.lot strong { font-size: 1.1rem; line-height: 1.25; text-wrap: balance; }
.card.lot .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.card.lot .nums b { display: block; font: 400 1.55rem/1.1 var(--game); color: var(--gold); }
.card.lot.shut { filter: saturate(.25); opacity: .75; }
.card.lot .pill { align-self: flex-start; }

/* my bids: the scoreboard, outbid first */
.card.mybids { background: var(--paper); border-color: var(--line); }
.mybids h2.script { color: var(--gold); }
.mybids ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mybids li { padding: 0; border: 0; }
.mybids li a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; background: var(--raised); }
.mybids li a b { flex: 1 1 60%; font-weight: 700; }
.mybids .pill { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); }
.mybids li.st-outbid a { background: color-mix(in srgb, var(--ruby) 20%, var(--paper)); box-shadow: inset 4px 0 0 var(--ruby); }
.mybids li.st-outbid .pill { background: var(--ruby); color: #fff; }
.mybids li.st-leading .pill { background: color-mix(in srgb, var(--emerald) 25%, transparent); color: var(--emerald); }
.mybids li.st-won .pill { background: var(--gold); color: var(--on-gold); }

/* one item */
article.item { padding: 14px 14px 18px; border-radius: 22px; background: var(--paper); }
article.item > .note:first-child { margin: 0; color: var(--gold); font-weight: 700; font-size: .88rem; }
article.item h2.script { font: 700 1.5rem/1.2 var(--plain); margin: 4px 0 10px; text-wrap: balance; color: var(--ink); }
.item .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 0 0 14px; }
.item .photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.item .photos img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 18px; }

.bid-status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font: 400 1.45rem/1.1 var(--game); }
.bid-status::before { content: ""; flex: 0 0 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.bid-status.winning { background: color-mix(in srgb, var(--emerald) 20%, var(--paper)); color: var(--emerald); }
.bid-status.outbid { background: color-mix(in srgb, var(--ruby) 22%, var(--paper)); color: var(--ruby); }
.bid-status.won { background: var(--gold); color: var(--on-gold); }
.bid-status.lost { background: var(--raised); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .bid-status.outbid.fresh { animation: nudge .45s .3s ease-in-out; } }
@media (prefers-reduced-motion: no-preference) { .item dl.nums dd.high.glow { animation: glow 1s ease-out; } }
@keyframes glow { 0% { text-shadow: 0 0 36px var(--gold), 0 0 8px var(--gold); transform: scale(1.06); } }
@keyframes nudge { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.item dl.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.item dl.nums > div { padding: 10px 12px; border-radius: 14px; background: var(--raised); }
.item dl.nums dt { color: var(--muted); font-size: .85rem; }
.item dl.nums dd { margin: 2px 0 0; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.item dl.nums .bid-current { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; background: transparent; padding: 0 2px 10px; border-bottom: 1px dashed var(--line); border-radius: 0; }
.item dl.nums dd.high { font-variant-numeric: tabular-nums; font: 400 3rem/1 var(--game); color: var(--gold); text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent); }
.item dl.nums .bid-deductible { grid-column: 1 / -1; background: color-mix(in srgb, var(--sapphire) 16%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sapphire) 45%, transparent); display: flex; justify-content: space-between; align-items: baseline; }
.item dl.nums .bid-deductible dt { color: var(--ink); font-weight: 700; font-size: .95rem; }
.item dl.nums .bid-deductible dd { color: var(--sapphire); font-size: 1.45rem; }
.item > p.note { margin: 6px 0; }
.item > .pill { display: inline-block; background: var(--raised); color: var(--muted); padding: 4px 12px; border-radius: 999px; }

form.bid { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
form.bid label { color: var(--ink); }
/* the DOM keeps the typed amount and its Bid button first (Enter must send what was typed);
   on screen the three quick bids sit right under the paddle, the fastest way to bid */
form.bid .quick { order: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
form.bid label:has(select) { order: 0; }
form.bid label:has([name=amount_custom]) { order: 2; }
form.bid .deduct { order: 3; }
form.bid .bid-go { order: 4; }
.quick-bid.btn { min-height: 58px; padding: 0 4px; border-radius: 14px; background: var(--raised); color: var(--ink); border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--line)); font: 400 1.25rem/1 var(--game); }
.quick-bid.btn:hover { background: color-mix(in srgb, var(--gold) 14%, var(--raised)); }
.quick-bid.btn:active { background: color-mix(in srgb, var(--gold) 24%, var(--raised)); }
form.bid input[name=amount_custom] { font: 700 1.5rem/1.2 var(--plain); text-align: center; }
form.bid .deduct { margin: 6px 0 10px; padding: 12px 14px; border-radius: 14px; color: var(--ink); font-size: .95rem;
  background: color-mix(in srgb, var(--sapphire) 14%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sapphire) 40%, transparent); }
form.bid .bid-go { max-width: none; width: 100%; min-height: 60px; border-radius: 18px; font: 700 1.25rem/1 var(--plain); box-shadow: 0 8px 24px color-mix(in srgb, var(--gold) 30%, transparent); }

ol.bid-history { list-style: none; margin: 16px 0 6px; padding: 0; counter-reset: rank; }
ol.bid-history li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
ol.bid-history .paddle { display: grid; place-items: center; min-width: 46px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--raised); font-weight: 700; font-size: .9rem; }
ol.bid-history .amount { margin-left: auto; font-weight: 700; font-size: 1.05rem; }
ol.bid-history li:first-child .amount { color: var(--gold); }
ol.bid-history li.mine .paddle { background: var(--gold); color: var(--on-gold); }

.auction-burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
@media (prefers-reduced-motion: reduce) { .card.lot:active, .quick-bid.btn:active { transform: none; } }

/* the sisters' auction desk */
.split { display: grid; gap: 14px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; } }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs figure { margin: 0; }

/* practice and the room screen */
.practice-banner { background: repeating-linear-gradient(135deg, #f7d54a 0 14px, #f2c200 14px 28px); color: #1a1400; font: 700 1rem/1.3 -apple-system, system-ui, sans-serif; text-align: center; padding: 10px 14px; margin: 0 0 12px; border-radius: 8px; letter-spacing: .02em; }
/* the room screen: the projector at the front of the ballroom, read from the back of the room.
   Evergreen night and ornament colours like the guests' auction; the bid is the hero. */
body.screen { margin: 0; min-height: 100vh; min-height: 100dvh; color: #fbf6ea; font-family: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif;
  background: radial-gradient(80% 90% at 72% 40%, #1f4a30 0%, #0c1812 70%) fixed, #0c1812; overflow: hidden; }
body.screen .practice-banner { border-radius: 0; margin: 0; font-size: 2.4vh; }
main.stage { max-width: none; margin: 0; }   /* the whole projector, not the guest pages' reading column */
.stage { --gold: #ffc94a; --ruby: #ff4d63; --emerald: #2fd486; --mist: #b4c4b8;
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 2vh 4vw 4vh; display: grid; column-gap: 4vw;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto 1fr repeat(7, auto) 1fr;
  grid-template-areas: "kick kick" "photo ." "photo lot" "photo title" "photo bid" "photo lead" "photo next" "photo fmv" "photo sold" "photo ."; }
/* the string of lights, larger; it twinkles like the guests' (above): fully while the room waits, gently
   while a lot is on stage */
.stage::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: start; height: 3.2vh; margin: 0 -1vw; --la: 1; --lb: 1;
  background:
    linear-gradient(#3c5a44, #3c5a44) 0 .7vh / 100% .25vh no-repeat,
    radial-gradient(circle at 1.6vh 1.9vh, rgba(255,77,99,calc(.5 + .5 * var(--la))) 0 .65vh, rgba(255,77,99,calc(.4 * var(--la))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 4.8vh 1.9vh, rgba(255,201,74,calc(.5 + .5 * var(--lb))) 0 .65vh, rgba(255,201,74,calc(.4 * var(--lb))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 8vh 1.9vh, rgba(47,212,134,calc(.5 + .5 * var(--la))) 0 .65vh, rgba(47,212,134,calc(.4 * var(--la))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 11.2vh 1.9vh, rgba(91,155,255,calc(.5 + .5 * var(--lb))) 0 .65vh, rgba(91,155,255,calc(.4 * var(--lb))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 14.4vh 1.9vh, rgba(187,123,255,calc(.5 + .5 * var(--la))) 0 .65vh, rgba(187,123,255,calc(.4 * var(--la))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 17.6vh 1.9vh, rgba(255,77,99,calc(.5 + .5 * var(--lb))) 0 .65vh, rgba(255,77,99,calc(.4 * var(--lb))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 20.8vh 1.9vh, rgba(255,201,74,calc(.5 + .5 * var(--la))) 0 .65vh, rgba(255,201,74,calc(.4 * var(--la))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 24vh 1.9vh, rgba(47,212,134,calc(.5 + .5 * var(--lb))) 0 .65vh, rgba(47,212,134,calc(.4 * var(--lb))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 27.2vh 1.9vh, rgba(91,155,255,calc(.5 + .5 * var(--la))) 0 .65vh, rgba(91,155,255,calc(.4 * var(--la))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x,
    radial-gradient(circle at 30.4vh 1.9vh, rgba(187,123,255,calc(.5 + .5 * var(--lb))) 0 .65vh, rgba(187,123,255,calc(.4 * var(--lb))) .8vh, transparent 1.5vh) 0 0 / 32vh 3.2vh repeat-x; }
@media (prefers-reduced-motion: no-preference) {
  @supports (transition-behavior: allow-discrete) {
    .stage[data-id="0"]::before { animation: lights-twinkle 3.2s steps(10) infinite; }
    .stage:not([data-id="0"])::before { animation: lights-calm 7s steps(14) infinite; }
  }
}
.stage-kicker { grid-area: kick; margin: 3.6vh 0 1vh; font: 400 4.2vh/1 "Great Vibes", cursive; color: var(--gold); }
.stage-photo { grid-area: photo; align-self: center; width: 100%; aspect-ratio: 1; max-height: 74vh; justify-self: center;
  background: #2a2140 center / cover no-repeat; border-radius: 3vh; box-shadow: 0 0 0 .6vh #bb7bff, 0 3vh 8vh rgba(0,0,0,.45); }
.stage-lot { grid-area: lot; margin: 0; font-weight: 700; font-size: 2.8vh; color: var(--gold); }
.stage-title { grid-area: title; margin: .6vh 0 2.4vh; font: 700 6.4vh/1.08 "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif; text-wrap: balance; }
.stage-bid { grid-area: bid; display: grid; }
.stage-bid .label, .stage-next .label { font-size: 2.6vh; font-weight: 700; color: var(--mist); }
.stage-high { font: 400 19vh/1 "Shrikhand", "Cooper Black", Georgia, serif; color: var(--gold); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6vh rgba(255,201,74,.42); transform-origin: left center; }
.stage-leader { grid-area: lead; justify-self: start; display: inline-flex; align-items: center; gap: 1.4vh; margin-top: 1.6vh; padding: .8vh .8vh .8vh 2.6vh;
  border-radius: 99vh; background: #fbf6ea; color: #0c1812; font-weight: 700; font-size: 3.2vh; }
.stage-paddle { display: grid; place-items: center; min-width: 6.4vh; height: 6.4vh; padding: 0 1.4vh; border-radius: 99vh; background: var(--ruby); color: #fff; font-size: 3.6vh; }
.stage-next { grid-area: next; justify-self: start; display: inline-flex; align-items: baseline; gap: 1.6vh; margin-top: 1.6vh; padding: 1vh 2.4vh;
  border-radius: 2vh; border: .3vh solid var(--emerald); background: rgba(47,212,134,.12); }
.stage-next .label { color: var(--emerald); }
.stage-next-amount { font: 700 4.4vh/1 "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.stage-fmv { grid-area: fmv; margin: 2vh 0 0; font-size: 2.6vh; color: var(--mist); }
.stage-sold { grid-area: sold; justify-self: start; margin: 2vh 0 0; padding: .6vh 3vh; border: .6vh solid var(--ruby); border-radius: 1.6vh;
  font: 400 7vh/1.1 "Shrikhand", "Cooper Black", Georgia, serif; color: var(--ruby); transform: rotate(-4deg); }
/* nothing on stage yet: the waiting line, centred */
.stage:not(:has(.stage-photo)) { grid-template-columns: 1fr; grid-template-areas: "kick" "." "title" "."; grid-template-rows: auto 1fr auto 1fr; text-align: center; }
.stage:not(:has(.stage-photo)) .stage-title { font: 400 9vh/1.1 "Great Vibes", cursive; }
/* a tablet held upright: one column */
@media (orientation: portrait) {
  .stage { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "kick" "photo" "lot" "title" "bid" "lead" "next" "fmv" "sold"; row-gap: 0; }
  .stage-photo { max-height: 34vh; width: auto; height: 34vh; }
  .stage-high { font-size: 13vh; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage.flash .stage-high { animation: stage-flash 1.1s ease-out; }
  .stage.flash::before { animation: stage-chase .4s steps(1) 4; }
  @supports (transition-behavior: allow-discrete) { .stage.flash::before { animation: stage-chase .4s steps(1) 4, lights-calm 7s steps(14) infinite; } }
  @keyframes stage-flash { 0% { transform: scale(1.12); color: #fff; text-shadow: 0 0 8vh #ffc94a, 0 0 2vh #ffc94a; } }
  @keyframes stage-chase { 50% { background-position: 0 .7vh, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0, 3.2vh 0; filter: brightness(1.6); } }
}
ol.steps li { margin: 10px 0; }

/* the household bill and the receipt */
.bill ul { list-style: none; padding: 0; margin: 0; }
.bill li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.bill li.paid { opacity: .75; }
.bill-due b { font-size: 1.4rem; }
.receipt-lines div { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 6px 0; }
.receipt-lines dt { color: var(--muted); }
.receipt-lines dd { margin: 0; font-weight: 700; }
@media print { header.top .langs, footer, .noprint { display: none; } .card.receipt { border: 0; } }

/* the sisters' tables page */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 12px 0; }
.tcell { display: grid; justify-items: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; background: var(--paper); min-height: 44px; }
.tcell b { font-size: 1.2rem; }
.tcell small { font-size: .7rem; color: var(--muted); }
.tcell.full { border-color: var(--ok, #2f7d4a); }
.tcell.part { border-style: dashed; }
.tcell.selected { outline: 3px solid var(--gold); }
p.your-table { text-align: center; font-size: 1.2rem; }

/* the room map: one drawing, two looks. Tokens do the colour, so the guest sees the gala
   (white and gold, candlelit dark) and the sisters see the dashboard palette. Sizes are in
   map units (the drawing is 1000 wide): a phone shows it about a third of that. */
svg.room { width: 100%; height: auto; display: block; overflow: visible; font-family: -apple-system, system-ui, sans-serif; }
svg.room .room-wall { fill: none; stroke: var(--line); stroke-width: 6; stroke-linejoin: round; }
svg.room .item-shape { fill: var(--raised); stroke: var(--line); stroke-width: 2; }
svg.room .item-icon { color: var(--muted); }
svg.room .item-label { font-size: 17px; font-weight: 600; fill: var(--muted); }
svg.room .table-shape { fill: var(--paper); stroke: var(--muted); stroke-width: 2.5; }
svg.room .table-label { font-size: 30px; font-weight: 700; fill: var(--ink); }
svg.room .table-count { font-size: 17px; font-weight: 600; fill: var(--muted); }
/* the way in: always the clearest marker */
svg.room .item-gate .item-shape { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 3; }
svg.room .item-gate .item-icon { color: var(--gold-deep); }
svg.room .item-gate .item-label { fill: var(--ink); font-weight: 800; }

/* the guest's view: their table in gold, everything else quiet */
.room-card p.your-table { margin: 0 0 12px; text-align: center; font-size: 1.15rem; }
.room-card p.your-table b { display: block; font-size: 3.4rem; line-height: 1.05; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.room-card svg.room { margin: 0 -6px; width: calc(100% + 12px); }
.room-card svg.room .table:not(.mine) .table-shape { stroke: var(--line); }
.room-card svg.room .table:not(.mine) .table-label { fill: var(--muted); }
.room-card svg.room .table.mine .table-shape { fill: var(--gold-deep); stroke: var(--gold-soft); stroke-width: 14; paint-order: stroke; }
.room-card svg.room .table.mine .table-label { fill: var(--on-gold); font-size: 38px; }
@media (max-width: 600px) { .room-card svg.room .item-icon { transform: scale(1.6); transform-box: fill-box; transform-origin: center; }
  .room-card svg.room .item:not(.item-gate) .item-label { display: none; } .room-card svg.room .item-gate .item-label { font-size: 30px; } }
@media (prefers-reduced-motion: no-preference) {
  .room-card svg.room .table.mine { animation: mine-pop .7s .2s ease-out both; }
  @keyframes mine-pop { from { opacity: .3; } }
  .room-card svg.room .table.mine circle.table-shape { transform-box: fill-box; transform-origin: center; animation: mine-grow .7s .2s cubic-bezier(.2, .9, .25, 1.3) both; }
  @keyframes mine-grow { from { transform: scale(.6); } }
}

/* the sisters' view: how full each table is, in fill and in words */
svg.room .table.empty .table-shape { fill: var(--paper); stroke: var(--line); }
svg.room .table.part .table-shape { fill: var(--gold-soft); stroke: var(--gold); }
svg.room .table.full .table-shape { fill: var(--ok-bg); stroke: var(--ok-line); stroke-width: 3; }
svg.room .table.full .table-count { fill: var(--ok-ink); }
svg.room.editing g { cursor: grab; touch-action: none; outline: none; }
svg.room.editing g:hover .table-shape, svg.room.editing g:hover .item-shape { stroke-width: 4; }
svg.room.editing g:focus-visible .table-shape, svg.room.editing g:focus-visible .item-shape { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 6 5; }
svg.room.editing g.selected .table-shape, svg.room.editing g.selected .item-shape { stroke: var(--gold); stroke-width: 7; stroke-dasharray: none; }
svg.room.editing g.dragging { cursor: grabbing; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .28)); }

/* the tables list, matching the map */
.tcell.part { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.tcell.full { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.tcell.selected { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The desk's rows of buttons (admin/_init.php: the silent countdown and reveal, the auctioneer's pass; preview).
   Real gaps, wrapping on a phone; a danger button ("Close it now", "Sign the auctioneer out") keeps its distance
   at the row's far end, so a hurried thumb can't hit it by mistake. The reveal is its own group under a rule. */
.silent-panel .stats-line { margin: 4px 0 12px; font-size: 1.05rem; }
.desk-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 8px; }
.desk-actions > form.inline { display: flex; }
.desk-actions .btn { margin: 0; min-height: 48px; padding-inline: 18px; }
.desk-actions > form.inline:has(.danger) { margin-left: auto; }
.silent-panel > form.inline { display: grid; gap: 10px; margin: 0 0 6px; }
.silent-panel > form.inline label { display: grid; gap: 6px; }
.silent-panel > form.inline .btn.big { margin: 0; width: 100%; }
.silent-panel h3 { margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 700px) {   /* room for the time and the button side by side */
  .silent-panel > form.inline { grid-template-columns: minmax(0, 16rem) auto; align-items: end; justify-content: start; }
  .silent-panel > form.inline .btn.big { width: auto; }
}
/* its defaults in Settings: two- and three-digit numbers want short fields */
.silent-settings input[type=number] { max-width: 9rem; }

/* Paper is always light: whatever the screen's mode, print in dark ink on white. Last in the
   file and with the same selectors as each theme's tokens, so it wins for guest pages, the
   dashboard and the auction alike. */
@media print {
  :root, body.admin, body:has(main .lots), body:has(main article.item) {
    color-scheme: light;
    --bg: #fff; --paper: #fff; --raised: #fff; --field: #fff; --admin-bg: #fff;
    --line: #cfcfd4; --field-line: #9a9aa0; --ink: #111; --muted: #444;
    --gold: #8a6d1a; --gold-deep: #8a6d1a; --gold-soft: #f3e7c3; --link: #5c4710; --on-gold: #fff;
    --ok-bg: #fff; --ok-line: #2f7d4a; --ok-ink: #1d4d2b; --err-bg: #fff; --err-line: #9b2c2c; --err-ink: #9b2c2c;
  }
  body { background: #fff; color: #111; }
  .noprint, .adminbar { display: none !important; }   /* outranks the button-row flex (p:has(> .btn + .btn)) */
  @page { size: letter; margin: .5in; }
  main, main.wide { max-width: none; padding: 0; }
  /* the map on one page */
  .print-map { break-inside: avoid; text-align: center; }
  .print-map h1.script { margin: 0 0 .1in; font-size: 30pt; }
  .print-map svg.room { width: auto; height: 8.9in; max-width: 100%; margin: 0 auto; }
  /* the table lists: two columns, no table split across a page, empty tables short */
  .print-tables { columns: 2; column-gap: .4in; font-size: 10pt; }
  .print-table { break-inside: avoid; margin: 0 0 .18in; padding-top: .06in; border-top: 1.5pt solid #111; }
  .print-table h2 { margin: 0 0 .04in; font-size: 12.5pt; }
  .print-table h2 small { font-weight: 400; color: #444; }
  .print-table ol { margin: 0; padding-left: .28in; }
  .print-table li { line-height: 1.35; }
  .print-table li small { color: #444; }
  .print-table p.note { margin: 0; font-size: 9pt; }
}

/* the sisters' runbook: a one-page guide, on screen and on paper. Button names look like
   small keys, so a sister can match the words to the screen. */
.runbook { max-width: 720px; }
.runbook h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
.runbook .lead { margin-top: 0; color: var(--muted); }
.runbook-step { margin: 18px 0 0; }
.runbook-step h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; font-size: 1.12rem; line-height: 1.3; }
.runbook-step .n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-deep); color: var(--on-gold); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.runbook-step ol { margin: 0; padding-left: 1.4em; }
.runbook-step li { margin: 5px 0; line-height: 1.5; }
.runbook b.ui { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px;
  background: var(--raised); font-weight: 600; font-size: .94em; line-height: 1.45; white-space: nowrap; }
.runbook-help { margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--gold-soft); font-weight: 700; }
@media print {
  .runbook { max-width: none; font-size: 11.2pt; }
  .runbook h1 { font-size: 15pt; margin: 0 0 3pt; }
  .runbook .lead { margin: 0 0 2pt; }
  .runbook-step { margin: 7pt 0 0; break-inside: avoid; }
  .runbook-step h2 { font-size: 10.8pt; margin: 0 0 2pt; gap: 6pt; }
  .runbook-step .n { width: 15pt; height: 15pt; font-size: 8.5pt; background: none; color: #111; border: 1pt solid #111; }
  .runbook-step li { margin: 1.5pt 0; line-height: 1.32; }
  .runbook b.ui { padding: 0 3pt; border: .6pt solid #777; border-bottom-width: .6pt; background: none; line-height: 1.25; }
  .runbook-help { margin-top: 8pt; padding: 0; background: none; }
}

/* the dashboard menu: five everyday links and More. On a phone a tidy 3 x 2 grid of keys;
   More opens a small panel anchored under itself, so nothing below moves. */
.admin-nav { position: relative; }
.admin-nav details.more { position: relative; display: inline-flex; }
.admin-nav details.more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--link); }
.admin-nav details.more > summary::-webkit-details-marker { display: none; }
.admin-nav details.more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.admin-nav details.more[open] > summary { background: var(--gold-soft); }
.admin-nav details.more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.admin-nav .more-links { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 220px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); transform-origin: top right; }
.adminbar .admin-nav .more-links a { min-height: 44px; padding: 0 12px; }
.adminbar .admin-nav .more-links a:last-child { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .admin-nav details.more[open] .more-links { animation: more-in .18s cubic-bezier(.2, .9, .25, 1); }
  @keyframes more-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
}
@media (max-width: 600px) {
  .adminbar { padding-bottom: 8px; }
  .adminbar .admin-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  .adminbar .admin-nav > a, .admin-nav details.more > summary { justify-content: center; text-align: center; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .95rem; line-height: 1.15; }
  .admin-nav details.more { display: block; }
  .admin-nav details.more > summary { display: flex; }
  .admin-nav .more-links { min-width: 0; width: max(240px, 70vw); }
}
/* a phone on its side (Duo preview): height is the scarce thing, so one row of links beside the brand,
   about 52 px instead of the two-row grid's 150 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px) {
  .duo-preview .adminbar { flex-wrap: nowrap; padding: 2px 10px 4px; }
  .duo-preview .adminbar .brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.5rem; }
  .duo-preview .adminbar .admin-nav { display: flex; flex-wrap: nowrap; gap: 0 2px; width: auto; }
  .duo-preview .adminbar .admin-nav > a, .duo-preview .admin-nav details.more > summary { padding: 0 7px; border: 0; background: transparent; font-size: .9rem; white-space: nowrap; }
  .duo-preview .admin-nav details.more { display: inline-flex; }
  .duo-preview .admin-nav .more-links { width: auto; min-width: 220px; max-height: calc(100svh - 64px); overflow-y: auto; }
}

/* the evening page: calm section heads, a fine gold rule between them */
.card.evening h3 { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--gold-deep); }
.card.evening h3 + p { margin-top: 0; }
.card.evening p.schedule { line-height: 1.75; font-variant-numeric: tabular-nums; }

/* copy the Zelle number and the memo code, on the order page only */
.paybox button.copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 8px auto 0; padding: 0 18px;
  border: 1.5px solid var(--gold); border-radius: 22px; background: transparent; color: var(--link); font: 600 .92rem/1 -apple-system, system-ui, sans-serif; cursor: pointer; }
.paybox td.pb-zelle button.copy { display: flex; margin-top: 6px; }
.paybox button.copy:active { background: var(--gold-soft); }
.paybox button.copy.done { border-color: var(--ok-line); color: var(--ok-ink); background: var(--ok-bg); }
.paybox button.copy.done::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
@media print { .paybox button.copy { display: none; } }

/* the ticket stack: three or more tickets side by side, one swipe each; the next one
   peeks in at the edge so it is clear there is more. One or two tickets stay stacked. */
.ticket-stack { display: flex; gap: 12px; margin: 0 -16px; padding: 2px 16px 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ticket-stack::-webkit-scrollbar { display: none; }
.ticket-stack:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 16px; }
.ticket-stack > .ticket { flex: 0 0 min(86%, 420px); margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.stack-count { margin: -4px auto 10px; width: max-content; padding: 4px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--ink);
  font: 600 .92rem/1.3 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
@media print { .ticket-stack { display: block; margin: 0; padding: 0; overflow: visible; } .ticket-stack > .ticket { margin: 18px auto; break-inside: avoid; } .stack-count { display: none; } }

/* the practice gala: unmissable, in either light. Yellow-and-dark warning stripes built on
   the page's own background, a heavy yellow bar, a sticky banner, every action button tagged. */
body.practice { background: repeating-linear-gradient(135deg, color-mix(in srgb, #f2c200 24%, var(--bg)) 0 22px, color-mix(in srgb, #f2c200 10%, var(--bg)) 22px 44px); }
body.practice .adminbar { border-bottom: 6px solid #f2c200; }
.practice-banner.gala { position: sticky; top: 0; z-index: 20; font-size: 1.05rem; border: 2px solid #1a1400; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.practice-banner.gala a { color: #1a1400; font-weight: 800; text-decoration-thickness: 2px; display: inline-block; padding: 8px 2px; margin: -8px 0; }
@media (max-width: 600px) { .practice-banner.gala { font-size: .92rem; padding: 8px 10px; } }
body.practice button.btn { outline: 3px dashed #c99a00; outline-offset: 2px; flex-direction: column; gap: 1px; line-height: 1.15; }
body.practice .practice-tag { display: block; font-size: .62em; font-weight: 800; letter-spacing: .08em; opacity: .85; }

/* the practice checklist: a tick box per function, done ones quieted */
ol.checklist { list-style: none; margin: 12px 0; padding: 0; counter-reset: step; }
ol.checklist > li { counter-increment: step; display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); line-height: 1.35; }
ol.checklist > li::before { content: counter(step); order: 0; flex: none; min-width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
ol.checklist > li > a { order: 3; flex: none; }
ol.checklist > li > form.inline { order: -1; flex: none; display: block; }
ol.checklist button.tick { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ok-ink); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
ol.checklist button.tick:hover { border-color: var(--gold); }
ol.checklist button.tick[aria-pressed="true"] { border-color: var(--ok-line); background: var(--ok-bg); }
ol.checklist > li.done { color: var(--muted); }
ol.checklist > li a { display: inline-block; padding: 10px 4px; margin: -10px 0; font-weight: 700; }
ol.checklist { padding-left: 1.4em; }
ol.checklist li { margin: 8px 0; }
ol.checklist li.done { color: var(--muted); }
button.tick { width: 32px; height: 32px; min-height: 32px; border-radius: 6px; border: 2px solid var(--gold-deep); background: var(--paper); font-weight: 700; cursor: pointer; vertical-align: middle; }
ol.checklist li.done button.tick { background: var(--gold-deep); color: #fff; }
/* the buy page's live availability: a soft panel with a "live" dot; the numbers follow
   seats.json every 5 s. When no whole table is left, the note sits where the stepper was. */
p.availability { position: relative; margin: 0 0 14px; padding: 10px 14px 10px 34px; border-radius: 12px;   /* one flowing sentence: not flex */
  background: var(--gold-soft); color: var(--ink); font-size: .95rem; line-height: 1.4; }
p.availability::before { content: ""; position: absolute; left: 15px; top: calc(10px + .7em - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: #2f9e5a; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e5a 22%, transparent); }
p.availability .seats-left, p.availability .tables-left { font-weight: 700; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.qty + p.note.no-tables, p.note.no-tables { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }

/* Optimize seating: one map of the proposal. Here the tables show the moves, not how
   full they are: left (dashed gold), joined (gold, thick ring), left empty (dashed green).
   The counts follow the Before / After control; the arrows draw the moves. */
.optimize p.opt-summary { margin: 4px 0 14px; font-size: 1.05rem; }
.optimize p.opt-summary .n-moves, .optimize p.opt-summary .n-freed { font-weight: 800; font-size: 1.2em; font-variant-numeric: tabular-nums; }
.optimize fieldset.view { display: inline-flex; gap: 0; margin: 0 0 12px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.optimize fieldset.view legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.optimize fieldset.view label { position: relative; display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 18px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.optimize fieldset.view input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.optimize fieldset.view label:has(input:checked) { background: var(--gold-deep); color: var(--on-gold); }
.optimize fieldset.view label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.optimize:has(input[name=view][value=before]:checked) .table-count.after,
.optimize:has(input[name=view][value=after]:checked) .table-count.before { display: none; }
.optimize svg.room .table .table-shape { fill: var(--paper); stroke: var(--line); stroke-width: 2.5; stroke-dasharray: none; }
.optimize svg.room .table.from .table-shape { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 8 6; }
.optimize svg.room .table.to .table-shape, .optimize svg.room .table.both .table-shape { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 5; }
.optimize svg.room .table.freed .table-shape { fill: var(--ok-bg); stroke: var(--ok-line); stroke-width: 4; stroke-dasharray: 8 6; }
.optimize svg.room .table.locked .table-shape { stroke: var(--ink); stroke-width: 5; }
svg.room line.move { stroke: var(--gold-deep); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 8; fill: none; transition: stroke-width .15s; }
svg.room marker.move-arrow path { fill: var(--gold-deep); }
svg.room line.move.hot { stroke-width: 4.5; stroke-dasharray: none; }
svg.room line.link { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.optimize ol.moves { list-style: none; margin: 14px 0; padding: 0; }
.optimize li.move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 44px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 8px; }
.optimize li.move:hover, .optimize li.move.hot { background: var(--gold-soft); }
.optimize li.move b.party { flex: 1 1 100%; }
@media (min-width: 600px) { .optimize li.move b.party { flex: 0 1 14em; } }
.optimize li.move span.to { font-weight: 700; }
.optimize form:has(> .btn.big) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.optimize form .btn.big { flex: 1 1 260px; max-width: 360px; }
.optimize form:has(> .btn.big) > a { display: inline-block; padding: 12px 4px; }
/* Undo sits with its message: a <form> can't live inside a <p>, so the browser places it right
   after the p.flash; the two are drawn as one green panel (and still are if the flash becomes a div) */
.flash:has(.btn.undo) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.flash:has(.btn.undo) > p { margin: 0; }
p.flash:has(+ form .btn.undo) { margin-bottom: 0; border-bottom: 0; border-radius: 8px 8px 0 0; }
p.flash + form.inline:has(.btn.undo) { display: block; margin: 0 0 14px; padding: 0 14px 12px; background: var(--ok-bg); border: 1px solid var(--ok-line); border-top: 0; border-radius: 0 0 8px 8px; }
.btn.undo { min-height: 44px; background: transparent; color: var(--ok-ink); border: 2px solid var(--ok-line); }
ul.groups { list-style: none; margin: 8px 0 14px; padding: 0; }
ul.groups > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.order-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; margin: 6px 0 12px; }

/* a long unbroken word (the sisters' email on the refunds page) wraps instead of pushing the page sideways (Petra's audit, 10-27) */
main p, main li { overflow-wrap: break-word; }

/* The install card (preview only; Jane's markup, 0097919). The gala's own Home Screen icon beside the title shows
   what the guest gets; the steps are numbered, and Safari's two symbols sit in small tiles like the real buttons, so
   they are easy to find on the phone. The action is the one strong button; Not now is quiet. */
.duo-preview .install { display: grid; gap: 10px; border-color: var(--gold); }
.duo-preview .install h2 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.duo-preview .install h2::before { content: ""; flex: none; width: 56px; height: 56px; border-radius: 13px; background: url("icon-192.png") center / cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .14); }
.duo-preview .install [data-install] { display: grid; gap: 12px; }
.duo-preview .install [data-install][hidden] { display: none; }
.duo-preview .install p { margin: 0; }
.duo-preview .install-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duo-preview .install-steps li { counter-increment: step; position: relative; padding: 10px 12px 10px 50px; border-radius: 12px; background: var(--raised); line-height: 1.6; }   /* plain text flow: the symbol sits inside the sentence */
.duo-preview .install-steps li::before { content: counter(step); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-deep, var(--gold)); color: var(--on-gold, #fff); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.duo-preview .install-icon { box-sizing: content-box; width: 1.15em; height: 1.15em; padding: 4px; margin: 0 2px; vertical-align: -0.5em; border-radius: 8px; background: #fff; color: #0a84ff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.duo-preview .install .install-copy, .duo-preview .install .install-go { width: 100%; max-width: none; }
.duo-preview .install .install-copied { color: var(--ok-ink, var(--ink)); font-weight: 700; }
.duo-preview .install .install-later { justify-self: end; background: transparent; border: 0; box-shadow: none; color: var(--muted); padding: 0 8px; }
.duo-preview .install .install-later:hover, .duo-preview .install .install-later:active { background: transparent; color: var(--ink); }
/* The install card's moving picture (preview: install_anim; includes/install_anim.php). For older guests: one large
   phone, one thing to tap at a time, a hand that comes in and taps it, and a big numbered caption; slow (3.4 s a frame)
   and looping. The phone keeps its own light colours in either theme, as a real phone does. Opacity and transform only,
   and install.js pauses it off screen. Without the player (reduced motion, no script) the frames are numbered stills. */
.anim-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.duo-preview .ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px 12px; margin: 2px 0; }
.duo-preview .ia-frame { margin: 0; display: grid; justify-items: center; align-content: start; gap: 8px; }
.duo-preview .ia-frame svg { display: block; width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
.duo-preview .ia-frame figcaption { margin-top: 14px; font-size: 1rem; display: flex; align-items: flex-start; gap: 8px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.duo-preview .ia-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-deep, var(--gold)); color: var(--on-gold, #fff); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ia-ui { font-family: -apple-system, "SF Pro Text", Roboto, system-ui, sans-serif; fill: #1d1d1f; }
.ia-strong { font-weight: 600; }
/* stills: the hand rests on the thing to tap, and it is lit as if pressed */
.ia-ring { fill: none; stroke: #0a84ff; stroke-width: 3; opacity: .85; }
.ia:not(.playing) .ia-lit { fill: #d6e6ff; }
.ia:not(.playing) .ia-lit-solid { opacity: .78; }
.ia-glow { opacity: .8; }
/* playing: the frames stacked in one place, one shown, the caption big under the phone */
.duo-preview .ia.playing { grid-template-columns: 1fr; }
.duo-preview .ia.playing .ia-frame { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.duo-preview .ia.playing .ia-frame.on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.duo-preview .ia.playing .ia-frame svg { width: min(100%, 250px, 34svh); max-width: none; }
.duo-preview .ia.playing figcaption { margin-top: 22px; font-size: 1.35rem; align-items: center; gap: 12px; min-height: 2.6em; }
.duo-preview .ia.playing .ia-num { width: 38px; height: 38px; font-size: 1.15rem; }
.ia.playing .ia-ring { opacity: 0; }
.ia.playing .on .ia-hand { transform-box: view-box; transform-origin: 0 0; animation: ia-hand 3.4s ease-out both; }
.ia.playing .on .ia-ring { transform-box: view-box; transform-origin: 0 0; animation: ia-ring 3.4s ease-out both; }
.ia.playing .on .ia-lit { animation: ia-lit .25s ease-out 1.4s both; }
.ia.playing .on .ia-lit-solid { animation: ia-press .25s ease-out 1.4s both; }
.ia.playing .on .ia-glow { transform-box: fill-box; transform-origin: center; animation: ia-glow 2.2s ease-in-out .3s infinite alternate; }
@keyframes ia-hand {
  0% { opacity: 0; transform: translate(36px, 90px); }
  14% { opacity: 1; }
  38% { transform: translate(0, 0) scale(1); }
  42% { transform: translate(0, 0) scale(.86); }
  50%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes ia-ring { 0%, 41% { opacity: 0; transform: scale(.4); } 44% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ia-lit { to { fill: #d6e6ff; } }
@keyframes ia-press { to { opacity: .78; } }
@keyframes ia-glow { from { opacity: .35; transform: scale(.85); } to { opacity: .85; transform: scale(1.15); } }
/* The sold link's landing (preview: claim_landing). One large way to the ticket; the account under it, outlined and
   quieter, recommended but never in the way. */
.duo-preview .claim-land { display: grid; gap: 16px; }
.duo-preview .claim-land h2, .duo-preview .claim-land p, .duo-preview .claim-land form { margin: 0; }
.duo-preview .claim-land .claim-who { font-size: 1.2rem; font-weight: 700; }
.duo-preview .claim-land .claim-go { width: 100%; max-width: none; min-height: 68px; font-size: 1.4rem; }
.duo-preview .claim-land .claim-acct { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.duo-preview .claim-land .claim-acct-go { width: 100%; max-width: none; min-height: 52px; box-sizing: border-box; display: grid; place-items: center; text-align: center;
  background: transparent; color: var(--gold-deep, var(--gold)); border: 2px solid currentColor; box-shadow: none; }
.duo-preview .claim-land .claim-note { color: var(--muted); }
/* send me a test alert: a second, quieter button under "Alerts are on" */
.duo-preview .push .push-test { background: transparent; color: var(--gold-deep, var(--gold)); border: 2px solid currentColor; box-shadow: none; }
.duo-preview .push .push-test-answer { margin: 10px 0 0; }
/* The one-screen auction (Duo preview, h-420e25; Petra). The app takes the whole screen: the page never scrolls,
   one lot per swipe, the bid tray in thumb reach. Single dark game-night look, the live auction's palette.
   Upright: top bar, lot, tray. On its side: the lot on the left, the tray a column on the right (about 60 / 40). */
.duo-preview body:has(#one) { overflow: hidden; overscroll-behavior: none; }
.duo-preview body:has(#one) > header.top, .duo-preview body:has(#one) > footer, .duo-preview body:has(#one) .practice-banner { display: none; }
.duo-preview #one {
  --night: #0c1812; --paper: #142519; --raised: #1b3122; --line: #2a4532;
  --ink: #fbf6ea; --muted: #b4c4b8; --gold: #ffc94a; --on-gold: #2a1d00;
  --ruby: #ff4d63; --emerald: #2fd486; --sapphire: #5b9bff; --amethyst: #bb7bff;
  --game: "Shrikhand", "Cooper Black", Georgia, serif; --plain: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif;
  color-scheme: dark; position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "alerts" "pager" "tray"; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background: radial-gradient(120% 60% at 50% 0%, #1d3a28 0%, transparent 60%), var(--night); color: var(--ink); font: 16px/1.4 var(--plain); -webkit-tap-highlight-color: transparent; }
.duo-preview #one button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
.duo-preview #one :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.duo-preview #one .top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.duo-preview #one .practice-tag { padding: 4px 10px; border-radius: 999px; background: repeating-linear-gradient(-45deg, #f2c200 0 10px, #1d1d1f 10px 20px); color: #fff; font-weight: 800; font-size: .8rem; text-shadow: 0 1px 2px #000; }
.duo-preview #one .paddle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 6px; border: 0; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.duo-preview #one .paddle b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 999px; background: var(--on-gold); color: var(--gold); font-size: .95rem; font-variant-numeric: tabular-nums; }
.duo-preview #one .chips { margin-left: auto; display: flex; gap: 6px; min-width: 0; }
.duo-preview #one .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.duo-preview #one .chip b { font: 400 1.15rem/1 var(--game); }
.duo-preview #one .chip.win { background: color-mix(in srgb, var(--emerald) 20%, var(--paper)); color: var(--emerald); }
.duo-preview #one .chip.out { background: color-mix(in srgb, var(--ruby) 24%, var(--paper)); color: var(--ruby); }
.duo-preview #one .chip:active, .duo-preview #one .paddle:active { transform: scale(.95); }
@media (max-width: 379px) {   /* narrow phones and long words: the count and a mark, the word kept for screen readers */
  .duo-preview #one .chip span, .duo-preview #one .paddle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .duo-preview #one .chip.win::before { content: ""; width: 9px; height: 5px; margin: -3px 2px 0; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
  .duo-preview #one .chip.out::before { content: "!"; font: 700 1rem/1 var(--plain); }
}
.duo-preview #one .alerts { grid-area: alerts; display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 6px 6px 6px 12px; border-radius: 16px; background: var(--raised); font-size: .9rem; }
.duo-preview #one .alerts[hidden] { display: none; }
.duo-preview #one .alerts svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.duo-preview #one .alerts span { flex: 1; min-width: 0; }
.duo-preview #one .alerts button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--gold); color: var(--on-gold); font-weight: 700; white-space: nowrap; }
.duo-preview #one .alerts button:disabled { opacity: .6; }
.duo-preview #one .pager { grid-area: pager; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; min-height: 0; }
.duo-preview #one .pager::-webkit-scrollbar { display: none; }
.duo-preview #one .empty { margin: auto; padding: 24px; color: var(--muted); text-align: center; }
.duo-preview #one .lot { --o: var(--gold); flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 2px 12px 8px; min-height: 0; min-width: 0; }
.duo-preview #one .photo { position: relative; min-height: 96px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--o) 70%, white) 0%, var(--o) 40%, color-mix(in srgb, var(--o) 40%, black) 100%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--o) 60%, transparent); }
.duo-preview #one .photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.duo-preview #one .nav { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px;
  border-radius: 999px; background: rgba(12, 24, 18, .45); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.duo-preview #one .nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.duo-preview #one .nav svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.duo-preview #one .nav button:disabled { opacity: .3; }
.duo-preview #one .nav span { font-weight: 700; font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; }
.duo-preview #one .info { display: grid; gap: 6px; min-width: 0; }
.duo-preview #one .kicker { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--o); }
.duo-preview #one .kicker span:last-child { color: var(--muted); font-weight: 400; }
.duo-preview #one .title { margin: 0; font: 700 1.2rem/1.2 var(--plain); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.duo-preview #one .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.duo-preview #one .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 400 1.05rem/1.15 var(--game); }
.duo-preview #one .st { max-width: 60%; }
.duo-preview #one .status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.duo-preview #one .status.win, .duo-preview #one .status.won { background: color-mix(in srgb, var(--emerald) 18%, var(--paper)); color: var(--emerald); }
.duo-preview #one .status.out { background: color-mix(in srgb, var(--ruby) 22%, var(--paper)); color: var(--ruby); }
.duo-preview #one .status.none, .duo-preview #one .status.lost, .duo-preview #one .status.closed { background: var(--raised); color: var(--muted); font: 600 .9rem/1.2 var(--plain); }
.duo-preview #one .status.none::before, .duo-preview #one .status.lost::before, .duo-preview #one .status.closed::before { display: none; }
.duo-preview #one .bid { text-align: right; }
.duo-preview #one .bid small { display: block; font-size: .78rem; color: var(--muted); }
.duo-preview #one .bid b { font: 400 2.5rem/1 var(--game); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(255, 201, 74, .35); }
.duo-preview #one .facts { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--muted); }
.duo-preview #one .facts b { color: var(--ink); }
.duo-preview #one .tray { grid-area: tray; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(20, 37, 25, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 22px 22px 0 0; display: grid; gap: 8px; }
.duo-preview #one .amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.duo-preview #one .amounts button { min-height: 50px; border-radius: 14px; border: 2px solid var(--line); background: var(--raised); font: 400 1.05rem/1 var(--game); font-variant-numeric: tabular-nums; }
.duo-preview #one .amounts button.other { font: 700 .82rem/1.1 var(--plain); color: var(--muted); }
.duo-preview #one .amounts button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--raised)); }
.duo-preview #one .go { min-height: 56px; border: 0; border-radius: 18px; background: var(--gold); color: var(--on-gold); font: 700 1.2rem/1 var(--plain); box-shadow: 0 6px 20px rgba(255, 201, 74, .3); }
.duo-preview #one .go:disabled { opacity: .6; }
.duo-preview #one .amounts button:active, .duo-preview #one .go:active { transform: scale(.97); }
.duo-preview #one .credit { margin: 0; text-align: center; font-size: .82rem; color: var(--muted); }
.duo-preview #one .credit b { color: var(--sapphire); }
.duo-preview #one .tray .note { display: none; margin: 0; padding: 12px; border-radius: 14px; background: var(--raised); text-align: center; color: var(--muted); }
.duo-preview #one .tray:not([data-mode="bid"]) .amounts, .duo-preview #one .tray:not([data-mode="bid"]) .go, .duo-preview #one .tray:not([data-mode="bid"]) .credit { display: none; }
.duo-preview #one .tray:not([data-mode="bid"]) .note { display: block; }
.duo-preview #one .tray[data-mode="empty"] { display: none; }
.duo-preview #one .scrim { position: fixed; inset: 0; background: rgba(4, 10, 7, .6); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20; }
.duo-preview #one .scrim.on { opacity: 1; pointer-events: auto; }
.duo-preview #one .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 480px; max-height: calc(100% - 12px); overflow-y: auto; margin: 0 auto;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--raised); transform: translateY(105%); transition: transform .42s cubic-bezier(.2, .9, .25, 1); }
.duo-preview #one .sheet.on { transform: none; }
.duo-preview #one .sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.duo-preview #one .sheet h2 { margin: 0 0 4px; font: 400 1.5rem/1.15 var(--game); color: var(--gold); }
.duo-preview #one .sheet p { margin: 0 0 12px; color: var(--muted); }
.duo-preview #one .steps { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.duo-preview #one .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--paper); font-size: 1.02rem; }
.duo-preview #one .steps .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; }
.duo-preview #one .steps .ico svg { width: 24px; height: 24px; fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.duo-preview #one .sheet .later { width: 100%; min-height: 48px; border: 0; background: transparent; color: var(--muted); font-weight: 700; }
.duo-preview #one .other-sheet .stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; margin: 6px 0 12px; }
.duo-preview #one .other-sheet .stepper button { height: 56px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); font-size: 1.6rem; }
.duo-preview #one .other-sheet output { text-align: center; font: 400 2.2rem/1 var(--game); color: var(--gold); font-variant-numeric: tabular-nums; }
.duo-preview #one .other-sheet .go { width: 100%; }
.duo-preview #one .burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.duo-preview #one .toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 25; max-width: calc(100% - 32px); transform: translate(-50%, -20px); opacity: 0;
  transition: opacity .2s, transform .3s cubic-bezier(.2, .9, .25, 1); padding: 10px 16px; border-radius: 22px; background: var(--emerald); color: #04170d; font-weight: 700; text-align: center; pointer-events: none; }
.duo-preview #one .toast.bad { background: var(--ruby); color: #2a0006; }
.duo-preview #one .toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .duo-preview #one .sheet { transition: opacity .2s; transform: none; opacity: 0; pointer-events: none; }
  .duo-preview #one .sheet.on { opacity: 1; pointer-events: auto; }
  .duo-preview #one .toast { transition: opacity .2s; transform: translate(-50%, 0); }
  .duo-preview #one .chip:active, .duo-preview #one .paddle:active, .duo-preview #one .amounts button:active, .duo-preview #one .go:active { transform: none; }
}
@media (max-height: 620px) { .duo-preview #one .bid b { font-size: 2.1rem; } .duo-preview #one .title { font-size: 1.05rem; -webkit-line-clamp: 1; } .duo-preview #one .amounts button { min-height: 46px; } .duo-preview #one .go { min-height: 50px; } }
@media (orientation: landscape) and (min-width: 560px) {
  .duo-preview #one { grid-template-columns: minmax(0, 1fr) minmax(250px, 38%); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "alerts alerts" "pager tray"; }
  .duo-preview #one .lot { padding-bottom: 12px; }
  .duo-preview #one .tray { align-self: end; margin: 0 max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) 0; padding: 12px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); }
  .duo-preview #one .amounts { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: landscape) and (max-height: 430px) {
  .duo-preview #one .top { padding-top: 4px; padding-bottom: 2px; }
  .duo-preview #one .lot { gap: 6px; }
  .duo-preview #one .info { gap: 2px; }
  .duo-preview #one .bid b { font-size: 1.8rem; }
  .duo-preview #one .status { padding: 4px 10px; font-size: .95rem; }
  .duo-preview #one .amounts button { min-height: 44px; }
  .duo-preview #one .go { min-height: 48px; }
  .duo-preview #one .tray { gap: 6px; padding: 8px; }
}
@media (orientation: landscape) and (min-width: 860px) {   /* room for a side panel: dialogs come in from the right and leave the same way */
  .duo-preview #one .sheet { left: auto; top: 0; right: 0; bottom: 0; width: min(420px, 40%); max-width: none; max-height: none; margin: 0; border-radius: 24px 0 0 24px;
    padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 18px 18px; transform: translateX(105%); display: flex; flex-direction: column; justify-content: center; }
  .duo-preview #one .sheet.on { transform: none; }
  .duo-preview #one .sheet .grab { display: none; }
  .duo-preview #one .bid b { font-size: 3rem; }
  .duo-preview #one .title { font-size: 1.45rem; }
}

/* Orders beside the open order (Duo preview, TRI-PAGE-022). The record is the page; the list is its companion,
   shown only where both fit (about 800 px and wider: the Duo opened on its side, iPads, tablets). Folded or
   upright on the inner screen the record has the whole width, and nothing about it changes. */
.duo-preview .md-list { display: none; }
@media (min-width: 800px) {
  .duo-preview main.wide:has(> .md) { max-width: 1280px; }   /* orders and checkout pairs */
  .duo-preview .md { display: grid; grid-template-columns: minmax(240px, 34%) minmax(0, 1fr); gap: 20px; align-items: start; }
  .duo-preview .md > aside { grid-column: 1; grid-row: 1; }
  .duo-preview .md > .md-detail { grid-column: 2; grid-row: 1; min-width: 0; }
  .duo-preview .md-side { position: sticky; top: 12px; max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .duo-preview .md-side .card { margin: 0; }
  .duo-preview .md-detail > .card:first-child { margin-top: 0; }
  .duo-preview .md-side tr.on td { background: var(--gold-soft); }
  .duo-preview .md-side tr.on a { font-weight: 700; }
  .duo-preview .md-list { display: block; position: sticky; top: 12px; max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
  .duo-preview .md-head { margin: 4px 8px 6px; font-weight: 700; }
  .duo-preview .md-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .duo-preview .md-list li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "memo amt" "who st"; gap: 1px 10px; align-items: baseline; min-height: 44px; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
  .duo-preview .md-list li a:hover { background: var(--raised); }
  .duo-preview .md-list li.on a { background: var(--gold-soft); }
  .duo-preview .md-list .memo { grid-area: memo; } .duo-preview .md-list .amt { grid-area: amt; } .duo-preview .md-list .who { grid-area: who; } .duo-preview .md-list .st { grid-area: st; }
  .duo-preview .md-list .memo { font: 700 .92rem/1.2 Menlo, monospace; letter-spacing: .02em; }
  .duo-preview .md-list .amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
  .duo-preview .md-list .who { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .duo-preview .md-list .st { justify-self: end; font-size: .78rem; color: var(--muted); }
  .duo-preview .md-list .st-pending { color: var(--gold-deep); font-weight: 700; }
  .duo-preview .md-detail > p:first-child:has(> a[href="/admin/"]) { display: none; }   /* "All orders" is the list beside it */
}

/* The room map beside its tools (Duo preview, TRI-PAGE-032). Wide (the Duo opened on its side, iPads, tablets):
   the map takes the left, about two thirds, and Add a marker and the markers list stay beside it, so the sister
   adds a marker and drags it without scrolling between them. Narrow: as today, the tools under the map. */
@media (min-width: 900px) {
  .duo-preview main.wide:has(> .room-editor) { max-width: 1400px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 32%); gap: 0 20px; align-items: start; }
  .duo-preview main.wide:has(> .room-editor) > :not(.room-editor):not(.split) { grid-column: 1 / -1; }
  .duo-preview main.wide > .room-editor { grid-column: 1; margin-top: 0; }
  .duo-preview main.wide:has(> .room-editor) > .split { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; position: sticky; top: 12px;
    max-height: calc(100svh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .duo-preview main.wide:has(> .room-editor) > .split > .card { margin: 0; }
  .duo-preview .room-editor svg.room { max-height: calc(100svh - 190px); }
}

/* The bid wheel (Duo preview; Pablo, 10-27: amounts only in the lot's step, no typing). A drum of amounts from the
   next bid up; where it stops is the guest's bid. Going once or twice: the screen pulses red twice a second (under
   the 3 per second limit for people sensitive to flashing; a steady red with reduced motion), the next bid ready. */
.duo-preview #one { --row: 50px; }
.duo-preview #one .wheel { position: relative; height: calc(var(--row) * 3); border-radius: 18px; background: var(--raised); overflow: hidden; }
.duo-preview #one .wheel ol { list-style: none; margin: 0; padding: var(--row) 0; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.duo-preview #one .wheel ol::-webkit-scrollbar { display: none; }
.duo-preview #one .wheel li { height: var(--row); scroll-snap-align: center; }
.duo-preview #one .wheel li button { width: 100%; height: 100%; border: 0; background: transparent; font: 400 1.5rem/1 var(--game); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .15s, transform .15s; }
.duo-preview #one .wheel li.on button { color: var(--gold); transform: scale(1.18); }
.duo-preview #one .wheel::before, .duo-preview #one .wheel::after { content: ""; position: absolute; left: 0; right: 0; height: var(--row); pointer-events: none; z-index: 1; }
.duo-preview #one .wheel::before { top: 0; background: linear-gradient(var(--raised), transparent); }
.duo-preview #one .wheel::after { bottom: 0; background: linear-gradient(transparent, var(--raised)); }
.duo-preview #one .wheel .lens { position: absolute; left: 10px; right: 10px; top: var(--row); height: var(--row); border-radius: 12px; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); pointer-events: none; }
.duo-preview #one .tray .say { margin: 0; text-align: center; font-size: .86rem; color: var(--muted); }
.duo-preview #one .tray:not([data-mode="bid"]) .wheel, .duo-preview #one .tray:not([data-mode="bid"]) .say { display: none; }
.duo-preview #one .go:disabled { opacity: .55; box-shadow: none; }
.duo-preview #one .callword { display: none; margin: 0; text-align: center; font: 400 2rem/1 var(--game); color: #fff; }
.duo-preview #one .tray[data-call="once"] .callword, .duo-preview #one .tray[data-call="twice"] .callword { display: block; }
.duo-preview #one .tray[data-call="once"] .go, .duo-preview #one .tray[data-call="twice"] .go { background: #fff; color: #7a0012; font: 400 1.6rem/1 var(--game); min-height: 64px; }
.duo-preview #one .going-layer { position: fixed; inset: 0; z-index: -1; background: var(--ruby); opacity: 0; pointer-events: none; }
.duo-preview #one.going .going-layer { animation: one-going 1s steps(1, end) infinite; }
@keyframes one-going { 0% { opacity: .45; } 25% { opacity: 0; } 50% { opacity: .45; } 75% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .duo-preview #one.going .going-layer { animation: none; opacity: .35; }
  .duo-preview #one .wheel li button { transition: none; }
}
/* short screens (a phone folded, or on its side): smaller rows, the credit line goes, the lot keeps its name */
@media (max-height: 700px) {
  .duo-preview #one { --row: 38px; }
  .duo-preview #one .wheel li button { font-size: 1.2rem; }
  .duo-preview #one .tray .credit { display: none; }
  .duo-preview #one .tray .say { font-size: .8rem; line-height: 1.3; }
  .duo-preview #one .tray { gap: 6px; }
  .duo-preview #one .photo { min-height: 56px; }
}
@media (orientation: landscape) and (max-height: 430px) { .duo-preview #one { --row: 34px; } }

/* The auctioneer's screen (admin/auctioneer.php, preview): glanced at from a stage. The current bid huge, the
   leader one line, the next bid on one big tap, the calls along the bottom; the lot's details behind the i.
   Fills the screen, landscape (iPad, the Duo opened on its side) or upright. */
.duo-preview body.auctioneer {
  --a-night: #0c1812; --a-raised: #1b3122; --a-line: #2a4532; --a-ink: #fbf6ea; --a-muted: #b4c4b8;
  --a-gold: #ffc94a; --a-on-gold: #2a1d00; --a-ruby: #ff4d63; --a-emerald: #2fd486;
  margin: 0; height: 100svh; overflow: hidden; background: var(--a-night); color: var(--a-ink); color-scheme: dark;
  font-family: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.duo-preview .auc { box-sizing: border-box; height: 100svh; display: grid; gap: 2vmin 3vmin; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "nums plus" "calls calls"; max-width: none; margin: 0;
  padding: max(2.4vmin, env(safe-area-inset-top, 0px)) max(3vmin, env(safe-area-inset-right, 0px)) max(2.4vmin, env(safe-area-inset-bottom, 0px)) max(3vmin, env(safe-area-inset-left, 0px)); transition: background-color .3s; }
.duo-preview .auc *, .duo-preview .auc *::before { box-sizing: border-box; }
.duo-preview .auc button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.duo-preview .auc :focus-visible { outline: 3px solid var(--a-gold); outline-offset: 3px; }
.duo-preview .auc[data-call="once"], .duo-preview .auc[data-call="twice"] { background: #2a0a10; }
.duo-preview .auc[data-call="sold"] { background: #2a2005; }
.duo-preview .auc-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; }
.duo-preview .auc-practice { padding: 4px 10px; border-radius: 999px; background: repeating-linear-gradient(-45deg, #f2c200 0 10px, #1d1d1f 10px 20px); color: #fff; font-weight: 800; font-size: .8rem; text-shadow: 0 1px 2px #000; }
.duo-preview .auc-lot { flex: 1; min-width: 0; font-size: clamp(.95rem, 2.4vmin, 1.25rem); color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo-preview .auc-lot b { color: var(--a-ink); }
.duo-preview .auc-info { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--a-line); background: transparent; color: var(--a-muted); font: italic 700 1.2rem/1 Georgia, serif; }
.duo-preview .auc-nums { grid-area: nums; display: grid; align-content: center; gap: 1vmin; min-height: 0; }
.duo-preview .auc-nums small { font-size: clamp(.9rem, 2.6vmin, 1.3rem); font-weight: 700; color: var(--a-muted); }
.duo-preview .auc-cur { font: 400 clamp(4rem, 21vmin, 13rem)/.95 "Shrikhand", "Cooper Black", Georgia, serif; color: var(--a-gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255,201,74,.3); }
.duo-preview .auc-who { font-size: clamp(1.1rem, 3.6vmin, 2rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo-preview .auc-who.none { color: var(--a-muted); font-weight: 400; }
.duo-preview .auc-callword { font: 400 clamp(1.6rem, 6vmin, 3.4rem)/1 "Shrikhand", Georgia, serif; color: var(--a-ruby); min-height: 1em; }
.duo-preview .auc[data-call="sold"] .auc-callword { color: var(--a-gold); }
.duo-preview .auc-timer { justify-self: start; padding: .4em .9em; border-radius: 999px; background: var(--a-raised); color: var(--a-gold); font-weight: 700; font-size: clamp(1rem, 3vmin, 1.5rem); font-variant-numeric: tabular-nums; }
.duo-preview .auc-timer[hidden] { display: none; }
.duo-preview .auc .auc-plus { grid-area: plus; border: 0; border-radius: 4vmin; background: var(--a-emerald); color: #04170d; display: grid; place-content: center; gap: 1vmin; text-align: center; box-shadow: 0 1.4vmin 4vmin rgba(47,212,134,.3); min-height: 0; }
.duo-preview .auc-plus .big { font: 400 clamp(3rem, 15vmin, 9rem)/1 "Shrikhand", Georgia, serif; font-variant-numeric: tabular-nums; }
.duo-preview .auc-plus .hint { font-size: clamp(.9rem, 2.4vmin, 1.2rem); font-weight: 700; opacity: .75; }
.duo-preview .auc-plus:active { transform: scale(.98); }
.duo-preview .auc .auc-plus:disabled { background: var(--a-raised); color: var(--a-muted); box-shadow: none; }
.duo-preview .auc-calls { grid-area: calls; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2vmin; }
.duo-preview .auc-calls button { min-height: max(64px, 11vmin); border-radius: 3vmin; border: 3px solid var(--a-ruby); background: transparent; color: var(--a-ruby); font-weight: 700; font-size: clamp(1rem, 3vmin, 1.6rem); }
.duo-preview .auc-calls button[aria-pressed="true"] { background: var(--a-ruby); color: #2a0006; }
.duo-preview .auc-calls .sold { border-color: var(--a-gold); color: var(--a-gold); }
.duo-preview .auc-calls .sold[aria-pressed="true"] { background: var(--a-gold); color: var(--a-on-gold); }
.duo-preview .auc-calls .undo { min-width: max(84px, 14vmin); border-color: var(--a-line); color: var(--a-muted); }
.duo-preview .auc-calls button:disabled { opacity: .3; }
.duo-preview .auc.empty > :not(.auc-head):not(.auc-empty):not(.auc-toast) { visibility: hidden; }
.duo-preview .auc-empty { grid-area: nums / nums / plus / plus; place-self: center; font-size: 1.4rem; color: var(--a-muted); }
.duo-preview .auc-empty a { color: var(--a-gold); }
.duo-preview .auc-toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -20px); opacity: 0; transition: opacity .2s, transform .3s; padding: 12px 18px; border-radius: 999px; background: var(--a-emerald); color: #04170d; font-weight: 700; pointer-events: none; z-index: 6; }
.duo-preview .auc-toast.bad { background: var(--a-ruby); color: #2a0006; }
.duo-preview .auc-toast.on { opacity: 1; transform: translate(-50%, 0); }
.duo-preview .auc-sheet { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(4, 10, 7, .7); }
.duo-preview .auc-sheet[hidden] { display: none; }
.duo-preview .auc-sheet .box { width: min(92vw, 560px); padding: 22px; border-radius: 22px; background: var(--a-raised); display: grid; gap: 12px; }
.duo-preview .auc-sheet .pic { aspect-ratio: 16 / 9; border-radius: 14px; background: var(--a-line) center / cover no-repeat; }
.duo-preview .auc-sheet h2 { margin: 0; font-size: 1.4rem; color: var(--a-ink); }
.duo-preview .auc-sheet p { margin: 0; color: var(--a-muted); }
.duo-preview .auc-sheet .close { justify-self: end; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--a-gold); color: var(--a-on-gold); font-weight: 700; }
@media (orientation: portrait) {
  .duo-preview .auc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "nums" "plus" "calls"; }
  .duo-preview .auc-cur { font-size: clamp(4rem, 17vmax, 11rem); }
  .duo-preview .auc-empty { grid-area: nums / nums / plus / plus; }
}
@media (prefers-reduced-motion: reduce) { .duo-preview .auc, .duo-preview .auc-toast { transition: none; } .duo-preview .auc-plus:active { transform: none; } }

/* The guest's picture for the auction (preview): a round slot on each ticket, one sheet with a photo (through the
   face cropper) or eight presets, and the cropper itself, shared with the sisters' camera station. */
.duo-preview .av-slot { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 10px; }
.duo-preview .av-pic { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px #e3cf94; flex: none; }
.duo-preview .av-none { display: grid; place-items: center; background: #fbf3dc; border: 2px dashed #c9a85a; box-shadow: none; }
.duo-preview .av-none::after { content: "+"; font: 700 1.6rem/1 Georgia, serif; color: #b08a1e; }
.duo-preview .av-slot.saved .av-pic { box-shadow: 0 0 0 3px #2f9e5c; }
.duo-preview .av-sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; background: rgba(0, 0, 0, .45); padding: 0 max(0px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px)); }
.duo-preview .av-sheet[hidden] { display: none; }
.duo-preview .av-box { width: min(100%, 520px); max-height: 100%; overflow-y: auto; display: grid; gap: 12px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); }
.duo-preview .av-box h2 { margin: 0; font-size: 1.3rem; }
.duo-preview .av-box p { margin: 0; }
.duo-preview .av-photo { justify-self: stretch; cursor: pointer; }
.duo-preview .av-or { font-weight: 700; }
.duo-preview .av-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.duo-preview .av-preset { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.duo-preview .av-preset img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.duo-preview .av-preset:active { transform: scale(.94); }
.duo-preview .av-err { color: var(--red, #c62828); font-weight: 700; }
.duo-preview .av-err:empty { display: none; }
.duo-preview .av-close { justify-self: center; }
@media (min-width: 700px) { .duo-preview .av-sheet { place-items: center; } .duo-preview .av-box { border-radius: 22px; } }
.duo-preview .cropper, .cropper { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .7); padding: 12px; }
.cropper-box { width: min(100%, 460px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: var(--paper, #fff); color: var(--ink, #1d1d1f); }
.cropper-box h2 { margin: 0; font-size: 1.25rem; }
.cropper-box p { margin: 0; }
.cropper-hint, .cropper-note { color: var(--muted, #6e6e73); font-size: .9rem; }
.cropper-box > * { flex: none; }
.cropper-stage { position: relative; width: min(100%, calc(100svh - 340px)); aspect-ratio: 1; align-self: center; border-radius: 16px; overflow: hidden; background: #000; touch-action: none; cursor: grab; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage canvas, .cropper-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.cropper-mask { pointer-events: none; }
.cropper-size { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-weight: 700; }
.cropper-size input { width: 100%; min-height: 44px; }
.cropper-actions { display: flex; justify-content: space-between; gap: 10px; }

/* The photo table (admin/photo-table.php, preview): find the guest on the left, the camera with the face oval on the
   right; upright, the camera on top. The oval on the live image is the cropper's oval, so a well-framed take
   needs almost no fitting. */
.duo-preview main.wide:has(> .phototable) { max-width: 1280px; }
.duo-preview .phototable { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) and (orientation: landscape) { .duo-preview .phototable { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); align-items: start; } .duo-preview .ph-cam { order: 2; } }
.duo-preview .ph-search { display: flex; gap: 8px; }
.duo-preview .ph-search input { margin: 0; font-size: 1.1rem; min-height: 52px; }
.duo-preview .ph-results { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.duo-preview .ph-results button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.duo-preview .ph-results button:hover { background: var(--raised); }
.duo-preview .ph-results small { display: block; color: var(--muted); }
.duo-preview .ph-results .none { color: var(--muted); padding: 8px 4px; }
.duo-preview .ph-results .av-pic, .duo-preview .ph-guest .av-pic { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--line); }
.duo-preview .ph-video { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #111; }
.duo-preview .ph-video video { width: 100%; height: 100%; object-fit: cover; display: block; }   /* not mirrored: what the sister frames is what the cropper gets */
.duo-preview .ph-oval { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.duo-preview .ph-oval ellipse { fill: none; stroke: #fff; stroke-width: .6; stroke-dasharray: 2 1.2; }
.duo-preview .ph-camoff { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: #ddd; text-align: center; }
.duo-preview .ph-camoff[hidden] { display: none; }
.duo-preview .ph-guest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; margin-top: 12px; }
.duo-preview .ph-guest[hidden], .duo-preview .ph-decline[hidden] { display: none; }
.duo-preview .ph-guest b { display: block; font-size: 1.2rem; }
.duo-preview .ph-guest span { color: var(--muted); }
.duo-preview .ph-take { grid-column: 1 / -1; max-width: none; margin-top: 6px; }
.duo-preview .ph-decline { margin-top: 12px; }
.duo-preview .ph-decline p { margin: 0 0 8px; font-weight: 700; }
.duo-preview .ph-decline .av-presets { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .duo-preview .ph-decline .av-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.duo-preview .ph-done { margin: 12px 0 0; font-weight: 700; color: var(--ok-ink); }
.duo-preview .ph-done.bad { color: var(--red); }
.duo-preview .ph-done:empty { display: none; }
/* Hide this picture: on the stage desk beside the leader, and on the photo table's results (preview) */
.duo-preview .desk-av { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.duo-preview .desk-av .av-pic { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--line); }
.duo-preview .ph-results li { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.duo-preview .ph-results li > button[data-i] { flex: 1; min-width: 0; }
.duo-preview .ph-hide { flex: none; }

/* The projector's show states (preview): the silent countdown, the reveal, the celebration. Sized to the screen
   (vh, vmin), the gala's evergreen night. Motion stays slow: the last minute pulses once a second, steady with
   reduced motion; the winner's picture pops in once, the paddle waves twice. */
.duo-preview body.screen { --show-gold: #ffc94a; --show-ruby: #ff4d63; --show-ink: #fbf6ea; --show-muted: #b4c4b8; }
.duo-preview .show { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 3vh; padding: 5vh 6vw; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #1d3a28 0%, #0c1812 65%); color: var(--show-ink); font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.duo-preview .show[hidden] { display: none; }
.duo-preview .show h1 { margin: 0; font: 400 6vh/1.1 "Shrikhand", Georgia, serif; color: var(--show-ink); }
.duo-preview .show p { margin: 0; }
.duo-preview .show-silent p { font-size: 4vh; font-weight: 700; color: var(--show-muted); }
.duo-preview .show-silent b { display: block; font: 400 28vh/1 "Shrikhand", Georgia, serif; color: var(--show-gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 6vh rgba(255,201,74,.3); }
.duo-preview .show-silent.final b { color: var(--show-ruby); animation: show-pulse 1s ease-in-out infinite; }
.duo-preview .show-silent.paused b { color: var(--show-muted); }
.duo-preview .show-silent.closed p { font: 400 7vh/1.1 "Shrikhand", Georgia, serif; color: var(--show-gold); }
@keyframes show-pulse { 50% { opacity: .55; } }
.duo-preview .show-pill { position: fixed; top: 2vh; right: 2vw; z-index: 15; display: flex; align-items: baseline; gap: 1vw; padding: 1.2vh 2vw; border-radius: 999px; background: rgba(12,24,18,.82); color: var(--show-muted); font: 700 2.2vh "Atkinson Hyperlegible", sans-serif; }
.duo-preview .show-pill[hidden] { display: none; }
.duo-preview .show-pill b { font: 400 3.4vh "Shrikhand", Georgia, serif; color: var(--show-gold); font-variant-numeric: tabular-nums; }
.duo-preview .show-pill.final b { color: var(--show-ruby); animation: show-pulse 1s ease-in-out infinite; }
.duo-preview .show-count { font-size: 2.6vh; font-weight: 700; color: var(--show-muted); }
.duo-preview .show-lot { display: grid; justify-items: center; gap: 2vh; }
.duo-preview .show-photo { width: 34vh; aspect-ratio: 4 / 3; border-radius: 2vh; background: #1b3122 center / cover no-repeat; box-shadow: 0 2vh 5vh rgba(0,0,0,.4); }
.duo-preview .show.win .show-photo { width: 22vh; }
.duo-preview .show-drum { font: 400 5vh/1 "Shrikhand", Georgia, serif; color: var(--show-gold); }
.duo-preview .show-drum .dots i { display: inline-block; width: 1.4vh; height: 1.4vh; margin-left: .8vh; border-radius: 50%; background: currentColor; animation: show-dot 1.2s ease-in-out infinite; }
.duo-preview .show-drum .dots i:nth-child(2) { animation-delay: .2s; } .duo-preview .show-drum .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes show-dot { 50% { transform: translateY(-1vh); opacity: .4; } }
.duo-preview .show-who { font-size: 5vh; font-weight: 700; }
.duo-preview .show-who b { font: 400 7vh "Shrikhand", Georgia, serif; color: var(--show-gold); font-variant-numeric: tabular-nums; }
.duo-preview .show-sold { font: 400 12vh/1 "Shrikhand", Georgia, serif; color: var(--show-gold); text-shadow: 0 0 6vh rgba(255,201,74,.35); }
.duo-preview .show-lot-title { font-size: 3vh; color: var(--show-muted); }
.duo-preview .show-done p { font-size: 4vh; color: var(--show-muted); margin-top: 2vh; }
/* every avatar in one frame: a gold ring, the paddle at the lower right */
.duo-preview .show-av { position: relative; width: 30vh; aspect-ratio: 1; }
.duo-preview .show-av > img, .duo-preview .show-av-none { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: #1b3122; box-shadow: 0 0 0 1vh var(--show-gold), 0 2vh 5vh rgba(0,0,0,.45); }
.duo-preview .show-av-none { font: 400 9vh "Shrikhand", Georgia, serif; color: var(--show-gold); }
.duo-preview .show-paddle { position: absolute; right: -16%; bottom: -10%; width: 36%; transform-origin: 50% 95%; transform: rotate(14deg); }
.duo-preview .show-av.pop { animation: show-pop .7s cubic-bezier(.2,.9,.25,1.35) both; }
.duo-preview .show-av.wave .show-paddle { animation: show-wave .7s ease-in-out .5s 2; }
@keyframes show-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes show-wave { 50% { transform: rotate(-16deg); } }
.duo-preview .stage-leader .show-av.lead { width: 11vh; margin-right: 2vh; display: inline-block; vertical-align: middle; }
.duo-preview .stage-leader .show-av.lead .show-av-none { font-size: 3.4vh; }
.duo-preview .stage-leader .show-av.lead > img, .duo-preview .stage-leader .show-av.lead .show-av-none { box-shadow: 0 0 0 .5vh var(--show-gold); }
.duo-preview .show-burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
@media (prefers-reduced-motion: reduce) {
  .duo-preview .show-silent.final b, .duo-preview .show-pill.final b, .duo-preview .show-drum .dots i, .duo-preview .show-av.pop, .duo-preview .show-av.wave .show-paddle { animation: none; }
}

/* Slides (preview): one renderer for the editor's preview and the projector. The slide holds a 16:9 box; every
   size is a container unit, so a thumbnail and a projector show the same slide. */
.slide-frame { container-type: size; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 10px; }
.slide { --slide-bg: #14261b; position: relative; width: 100cqw; height: 100cqh; display: grid; background: var(--slide-bg); overflow: hidden; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.slide.on-dark { color: #fbf6ea; } .slide.on-light { color: #1d1d1f; }
.slide h2 { margin: 0; font: 700 6.2cqw/1.12 "Libre Baskerville", Georgia, serif; letter-spacing: -.01em; text-wrap: balance; }
.slide p { margin: 0 0 1.4cqw; font-size: 2.6cqw; line-height: 1.45; }
.slide-words { min-width: 0; padding: 6cqw 7cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; }
.slide-l-title .slide-words { align-items: center; text-align: center; }
.slide-l-title h2 { font-size: 8cqw; }
.slide-l-text .slide-words { justify-content: center; max-width: 82cqw; }
.slide-l-image { grid-template-rows: minmax(0, 1fr) auto; }
.slide-l-image .slide-image { background: #000 center / contain no-repeat; }
.slide-l-image .slide-words { padding: 2.2cqw 6cqw 3cqw; align-items: center; text-align: center; }
.slide-l-image h2 { font-size: 4.2cqw; }
.slide-l-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.slide-l-split .slide-image { background: #000 center / cover no-repeat; }
.slide-l-split h2 { font-size: 4.6cqw; }
.slide-noimage { display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2cqw, transparent 2cqw 4cqw) !important; color: rgba(255,255,255,.7); font-size: 2.4cqw; }
.slide-block { background: radial-gradient(120% 80% at 50% 0%, #1d3a28 0%, #0c1812 65%); color: #fbf6ea; }
.slide-block .slide-words { align-items: center; text-align: center; }
.slide-block h2 { font: 400 7cqw/1.1 "Shrikhand", Georgia, serif; color: #ffc94a; }
.slide-kicker { font-size: 2.2cqw !important; color: #b4c4b8; }

/* The running order (admin/running-order.php, preview): the night's controls stay at the top; the order on the left,
   the slide being edited on the right beside its projector preview; upright, one above the other. */
.duo-preview main.wide:has(> .ro) { max-width: 1280px; }
.duo-preview .ro-desk { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; background: var(--bg); }
.duo-preview .ro-desk .btn { min-height: 56px; min-width: 110px; font-size: 1.05rem; }
.duo-preview .ro-now { text-align: center; min-width: 0; }
.duo-preview .ro-now small { display: block; color: var(--muted); }
.duo-preview .ro-now b { display: block; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo-preview .ro-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .duo-preview .ro-cols { grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); align-items: start; } .duo-preview .ro-edit { position: sticky; top: 86px; max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain; } }
.duo-preview .ro-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.duo-preview .ro-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); touch-action: pan-y; }
.duo-preview .ro-list li.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.duo-preview .ro-list li.now { background: var(--gold-soft); }
.duo-preview .ro-list li.dragging { position: relative; z-index: 3; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.duo-preview .ro-handle { display: grid; place-items: center; height: 44px; color: var(--muted); cursor: grab; touch-action: none; user-select: none; letter-spacing: -2px; }
.duo-preview .ro-pick { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.duo-preview .ro-thumb { width: 96px; flex: none; border-radius: 6px; pointer-events: none; }
.duo-preview .ro-name { min-width: 0; }
.duo-preview .ro-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo-preview .ro-name small { color: var(--muted); }
.duo-preview .ro-move { display: grid; gap: 2px; }
.duo-preview .ro-move button { width: 44px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); cursor: pointer; }
.duo-preview .ro-move button:disabled { opacity: .3; }
.duo-preview .ro-add { display: flex; flex-wrap: wrap; gap: 8px; }
.duo-preview .ro-edit { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.duo-preview .ro-edit:empty { display: none; }
.duo-preview #roRemove { justify-self: start; }
.duo-preview .ro-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.duo-preview .ro-edit-head h2 { margin: 0; font-size: 1.2rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duo-preview .ro-label { margin: 0; font-weight: 700; color: var(--muted); font-size: .85rem; }
.duo-preview .ro-preview { box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.duo-preview .ro-edit label small { display: block; color: var(--muted); font-weight: 400; }
.duo-preview .ro-layouts, .duo-preview .ro-bg, .duo-preview .ro-loop { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.duo-preview .ro-layouts legend, .duo-preview .ro-bg legend { width: 100%; padding: 0 0 4px; font-weight: 700; }
.duo-preview .ro-layout { position: relative; display: grid; justify-items: center; gap: 4px; width: 96px; padding: 6px; border: 2px solid var(--line); border-radius: 10px; font-size: .78rem; text-align: center; cursor: pointer; }
.duo-preview .ro-layout.on { border-color: var(--gold); }
.duo-preview .ro-layout input { position: absolute; opacity: 0; }
.duo-preview .ro-layout:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.duo-preview .ro-lay-pic { width: 72px; aspect-ratio: 16 / 9; border-radius: 4px; background: #14261b; display: grid; gap: 3px; padding: 6px; }
.duo-preview .ro-lay-pic i { display: block; border-radius: 2px; background: #fbf6ea; }
.duo-preview .ro-lay-title { place-content: center; } .duo-preview .ro-lay-title i:first-child { width: 40px; height: 7px; } .duo-preview .ro-lay-title i + i { display: none; }
.duo-preview .ro-lay-text i:first-child { width: 34px; height: 6px; } .duo-preview .ro-lay-text i + i { height: 14px; opacity: .5; }
.duo-preview .ro-lay-image { grid-template-rows: 1fr auto; } .duo-preview .ro-lay-image i:first-child { background: #5b9bff; } .duo-preview .ro-lay-image i + i { height: 4px; width: 30px; justify-self: center; }
.duo-preview .ro-lay-split { grid-template-columns: 1fr 1fr; } .duo-preview .ro-lay-split i:first-child { background: #5b9bff; } .duo-preview .ro-lay-split i + i { opacity: .6; }
.duo-preview .ro-sw { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.duo-preview .ro-sw.on { box-shadow: 0 0 0 3px var(--gold); }
.duo-preview .ro-bg input[type=color] { width: 56px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.duo-preview .ro-file audio { display: block; width: 100%; margin: 6px 0; }
.duo-preview .ro-toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .3s; margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; pointer-events: none; z-index: 30; }
.duo-preview .ro-toast.bad { background: var(--red); color: #fff; }
.duo-preview .ro-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* the sisters' slide on the projector: 16:9, letterboxed to the screen; the one tap that lets the sound play */
.duo-preview .show.slide { padding: 0; background: #000; }
.duo-preview .show-slide { width: min(100vw, 177.78vh); border-radius: 0; }
.duo-preview .show-start { position: fixed; right: 3vw; bottom: 4vh; z-index: 30; min-height: 9vh; padding: 0 4vw; border: 0; border-radius: 999px; background: #ffc94a; color: #2a1d00;
  font: 700 3vh "Atkinson Hyperlegible", sans-serif; box-shadow: 0 1vh 4vh rgba(0,0,0,.5); cursor: pointer; }
.duo-preview .show-start[hidden] { display: none; }

/* The thank-you page after the gala (preview; Jane's markup, bcd8005): the title and a gold rule, the sisters'
   message as a letter, and the ways to give as tiles; the check address upright, ready to copy onto an envelope. */
.duo-preview .thanks { display: grid; gap: 14px; padding: 26px 22px 24px; text-align: left; }
.duo-preview .thanks h2.script { margin: 0; text-align: center; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1.1; }
.duo-preview .thanks .lead { margin: 0; text-align: center; font-size: 1.15rem; }
.duo-preview .thanks .lead::after { content: ""; display: block; width: 72px; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.duo-preview .thanks .sisters { position: relative; margin: 6px 0 4px; padding: 30px 20px 18px; border-radius: 14px; background: var(--raised); font-size: 1.05rem; line-height: 1.6; }
.duo-preview .thanks .sisters::before { content: "\201C"; position: absolute; top: -6px; left: 14px; font: 700 4rem/1 Georgia, serif; color: var(--gold); }
.duo-preview .thanks h3 { margin: 10px 0 0; text-align: center; font-size: 1.25rem; }
.duo-preview .thanks h3 + p { margin: 0; text-align: center; color: var(--muted); }
.duo-preview .thanks .give { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.duo-preview .thanks .give li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 700; overflow-wrap: anywhere; }
.duo-preview .thanks .give address { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--raised); font-style: normal; font-weight: 400; line-height: 1.5; user-select: all; }
@media (min-width: 640px) { .duo-preview .thanks { padding: 34px 40px 30px; } .duo-preview .thanks .give { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .duo-preview .thanks .give li:has(address) { grid-column: 1 / -1; } }

/* Attendee accounts (preview; Jane's markup, 6ac1276): the login at the header's top left, opposite the language
   picker (an icon alone where both would not fit); the account page's three cards; the buy page's gate; the
   ticket page's offer; the seller's share after a sale. */
.duo-preview header.top { position: relative; }
.duo-preview .attendee-login { position: absolute; top: 8px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 22px;
  background: var(--chip); color: var(--ink); text-decoration: none; font: 600 15px/1 -apple-system, system-ui, sans-serif; }
.duo-preview .attendee-login::before { content: ""; width: 20px; height: 20px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.duo-preview header.top:not(.hero) .attendee-login { top: 6px; }
@media (max-width: 520px) { .duo-preview .attendee-login { font-size: 0; gap: 0; padding: 0; width: 44px; justify-content: center; } }   /* the words stay for screen readers */
.duo-preview .account form { display: grid; gap: 12px; }
.duo-preview .account label { margin: 0; }
.duo-preview .account h2, .duo-preview .account h3 { margin: 0 0 12px; }
.duo-preview .account .btn.big { max-width: none; width: 100%; }
.duo-preview .account:has(> h3:first-child) { padding: 14px 18px; background: var(--raised); box-shadow: none; }   /* Forgot your password: quieter */
.duo-preview .account:has(> h3:first-child) form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 420px) { .duo-preview .account:has(> h3:first-child) form { grid-template-columns: minmax(0, 1fr); } }
.duo-preview .acct-wallets { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.duo-preview .acct-wallets a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none; font-weight: 700; }
.duo-preview .acct-wallets a::after { content: "›"; font-size: 1.4rem; color: var(--gold-deep); }
.duo-preview .account-gate { text-align: center; display: grid; gap: 10px; justify-items: center; }
.duo-preview .account-gate h2 { margin: 0; }
.duo-preview .account-gate p { margin: 0; max-width: 36ch; }
.duo-preview .account-gate .btn.big { margin-top: 6px; }
.duo-preview .account-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border-color: var(--gold); }
.duo-preview .account-offer p { margin: 0; flex: 1 1 220px; }
.duo-preview .claim-share { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin: 12px 0 0; }
.duo-preview .claim-share .claim-url { margin: 0; min-height: 48px; font: 600 .95rem/1 Menlo, monospace; }
.duo-preview .claim-share .btn { min-height: 48px; }
.duo-preview .claim-share .copy.done { background: var(--ok-bg); color: var(--ok-ink); }
@media (max-width: 520px) { .duo-preview .claim-share { grid-template-columns: 1fr 1fr; } .duo-preview .claim-share .claim-url { grid-column: 1 / -1; } }
/* Email it (Jane's form under Copy and Text it): the same row heights; the address and its button side by side, the label
   above, read left to right inside the centred card. */
.duo-preview .email-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 12px 0 0; text-align: left; }
.duo-preview .email-it label { display: grid; gap: 4px; margin: 0; font-weight: 600; }
.duo-preview .email-it input { margin: 0; min-height: 48px; }
.duo-preview .email-it .btn { min-height: 48px; }
/* the audit's dashboard tables (sell, auction items, donations, people) pushed the whole page sideways on phones:
   in the preview a card holding a table scrolls sideways itself, and the page never does */
.duo-preview body.admin .card:has(table) { overflow-x: auto; }

/* Paying the bill in the app, the tax document, checkout's verify form, and the envelope labels (preview) */
.duo-preview .bill-pay { display: grid; gap: 8px; border-color: var(--gold); }
.duo-preview .bill-pay h3 { margin: 0 0 4px; font-size: 1.3rem; }
.duo-preview .bill-pay p { margin: 0; }
.duo-preview .bill-pay .memo { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--raised); font: 700 1rem/1.4 Menlo, monospace; letter-spacing: .06em; }
.duo-preview .bill-pay form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 6px; }
.duo-preview .bill-pay form label { flex: 1 1 160px; margin: 0; }
.duo-preview .bill-pay form .btn { flex: 1 1 160px; min-height: 48px; }
.duo-preview .tax-doc { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; background: var(--ok-bg); border-color: var(--ok-line); }
.duo-preview .tax-doc p { margin: 0; }
.duo-preview .tax-doc p:first-child { flex: 1 1 220px; font-weight: 700; color: var(--ok-ink); }
.duo-preview .acct-taxdocs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.duo-preview .acct-taxdocs a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none; font-weight: 700; }
.duo-preview .acct-taxdocs a::after { content: "PDF"; font-size: .75rem; font-weight: 800; color: var(--gold-deep); }
.duo-preview form.verify { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.duo-preview form.verify label, .duo-preview form.verify fieldset { margin: 0; }
.duo-preview form.verify fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.duo-preview form.verify fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
/* only what the choice needs: the check number for a check, the address to mail it */
.duo-preview form.verify:not(:has(select[name=pay_method] option[value=check]:checked)) .check-no { display: none; }
.duo-preview form.verify:has(input[name=delivery][value=app]:checked) label:has(textarea[name=mail_address]) { display: none; }
.duo-preview form.verify label:has(textarea) { position: relative; }
.duo-preview .addr-suggest { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.duo-preview .addr-suggest[hidden] { display: none; }
.duo-preview .addr-suggest button { width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; white-space: pre-line; cursor: pointer; }
.duo-preview .addr-suggest button:hover, .duo-preview .addr-suggest button[aria-selected="true"] { background: var(--gold-soft); }
.duo-preview .labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 16px 0; }
.duo-preview .labels .label { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--paper); line-height: 1.35; }
/* printed: standard 30-up address labels (Avery 5160 / 8160: 2 5/8 x 1 in, 3 across, 10 down, Letter) */
@media print {
  @page { size: letter; margin: .5in .1875in; }
  .duo-preview .labels { display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: .125in; row-gap: 0; margin: 0; }
  .duo-preview .labels .label { box-sizing: border-box; height: 1in; overflow: hidden; padding: .12in .16in; border: 0; border-radius: 0; background: #fff; color: #000;
    display: flex; flex-direction: column; justify-content: center; font: 11pt/1.25 -apple-system, "Helvetica Neue", Arial, sans-serif; break-inside: avoid; }
  .duo-preview main.wide:has(> .labels) { max-width: none; padding: 0; margin: 0; }
}