:root { --bg:#f9fafb; --card:#fff; --ink:#042d38; --muted:#4f6a72; --line:#d6e3e5; --brand:#ff7f00; --brand-dark:#e07000; --teal:#38939b; --link:#117380; --tint:rgba(56,147,155,.08); --danger:#c62828; }
* { box-sizing:border-box }
body { margin:0; font:16px/1.45 Urbanist,system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--ink) }
h1 { font-size:1.4rem; margin:0 0 .5rem } h2 { font-size:1.1rem; margin:1.5rem 0 .5rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem; max-width:34rem; margin:1rem auto }
.wrap .card { margin:1rem 0 }
.center { text-align:center; margin-top:20vh }
.wrap { max-width:72rem; margin:0 auto; padding:1rem }
header.bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; margin-bottom:1rem }
header.bar .actions { display:flex; flex-wrap:wrap; gap:.5rem }
button, .btn { font:inherit; font-weight:600; padding:.6rem 1rem; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block }
button.primary, .btn.primary { background:var(--brand); border-color:var(--brand); color:#fff }
button.primary:hover, .btn.primary:hover { background:var(--brand-dark) }
a { color:var(--link) }
header.brand { background:#fff; padding:.8rem 1rem; display:flex; align-items:center; gap:.75rem; border-bottom:4px solid var(--teal) }
header.brand img { height:30px; display:block }
header.brand span { color:var(--ink); font-weight:800; letter-spacing:.04em; font-size:1.25rem }
button.danger { color:var(--danger) }
button:disabled { opacity:.5; cursor:default }
input[type=text], input[type=email], input[type=number], input[type=datetime-local] { font:inherit; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; width:100%; max-width:24rem }
label { display:block; margin:.7rem 0 .2rem; font-weight:600 }
.muted { color:var(--muted) } .error { color:var(--danger) } .ok { color:#1b7f3b }
h1, h2 { color:var(--ink); font-weight:700 }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem }
.tile { position:relative; background:var(--tint); border-radius:10px; overflow:hidden; aspect-ratio:1 }
.tile img { width:100%; height:100%; object-fit:cover; display:block }
.tile button { position:absolute; top:6px; right:6px; padding:.25rem .55rem; background:rgba(255,255,255,.92) }
.tile .tag { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; padding:.1rem .4rem; border-radius:6px }
.drop { display:block; text-align:center; padding:1.6rem; border:2px dashed var(--brand); border-radius:12px; background:#fff3e6; font-weight:700; color:var(--brand-dark); cursor:pointer }
.drop input { display:none }
.queue { margin:.75rem 0; font-size:.9rem } .queue div { display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0 }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.3rem 0 }
.qr { width:220px; height:220px; background:#fff; border:1px solid var(--line); border-radius:8px }
code.link { display:block; word-break:break-all; background:var(--tint); padding:.5rem; border-radius:8px; font-size:.85rem }
.preview { background:#fff3e6; border-bottom:1px solid var(--brand); padding:.5rem 1rem; font-size:.9rem; text-align:center }
body.slideshow { background:#000; color:#fff; overflow:hidden }
body.slideshow header.brand, body.poster header.brand { display:none }
body.slideshow img { position:fixed; inset:0; width:100%; height:100%; object-fit:contain }
body.slideshow .hint { position:fixed; bottom:12px; left:12px; opacity:.6; font-size:.85rem }
strong.code { font-size:1.4rem; letter-spacing:.12em }
@media print { button, .btn { display:none } }

img.clickable { cursor:zoom-in }
body.viewer-open { overflow:hidden }
.viewer { position:fixed; inset:0; z-index:50; background:#041216; display:flex; align-items:center; justify-content:center }
.viewer-img { max-width:100%; max-height:100%; object-fit:contain; display:block }
.viewer-bar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem .8rem; color:#fff; background:linear-gradient(rgba(0,0,0,.6),transparent); z-index:2 }
.viewer-caption { font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.viewer-actions { display:flex; gap:.4rem; flex-shrink:0 }
.viewer-btn { padding:.4rem .8rem; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35) }
.viewer-btn.danger { color:#ffb4b4 }
.viewer-nav { position:absolute; top:50%; transform:translateY(-50%); width:3rem; height:4.5rem; font-size:2.6rem; line-height:1; padding:0; background:rgba(255,255,255,.12); color:#fff; border:0; z-index:2 }
.viewer-nav.prev { left:0; border-radius:0 8px 8px 0 } .viewer-nav.next { right:0; border-radius:8px 0 0 8px }
.viewer [hidden] { display:none }

/* admin: left menu + one section at a time */
body.settings #app { min-height:calc(100vh - 62px) }
.shell { display:grid; grid-template-columns:240px 1fr; gap:0; align-items:start; max-width:none; margin:0 } /* flush to the left edge at any window width */
.sidenav { position:sticky; top:0; align-self:start; height:calc(100vh - 62px); display:flex; flex-direction:column; justify-content:space-between; padding:1rem .75rem; border-right:1px solid var(--line); background:#fff }
.navlist { display:flex; flex-direction:column; gap:.15rem }
.navitem { display:block; padding:.55rem .75rem; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600 }
.navitem:hover { background:var(--tint) }
.navitem.active { background:var(--tint); color:var(--link); box-shadow:inset 3px 0 0 var(--teal) }
.navhead { margin:.9rem .75rem .25rem; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); overflow-wrap:anywhere }
.navsignout { width:100%; text-align:left }
.pane { padding:1.25rem 1.5rem; min-width:0 }
.pane h1 { margin-bottom:1rem }
.pane .card { margin:1rem 0; max-width:40rem }
@media (max-width:760px) {
  .shell { grid-template-columns:1fr }
  .sidenav { position:static; height:auto; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line); padding:.4rem .5rem; gap:.5rem }
  .navlist { flex-direction:row; overflow-x:auto; flex:1; gap:.25rem }
  .navitem { white-space:nowrap } .navhead { display:none }
  .navsignout { width:auto; flex-shrink:0 }
  .pane { padding:1rem }
}
label.inline { display:inline; margin:0 }
body.slideshow .hint { z-index:1 }

.tile .time { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; padding:.1rem .4rem; border-radius:6px }
.row.spread { justify-content:space-between }
.sortselect { font:inherit; padding:.35rem .6rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink) }
body.slideshow .hint { transition:opacity 1s } body.slideshow .hint.faded { opacity:0 }

/* poster: colours come from the event's poster settings via --p-bg, --p-fg and --p-accent */
.poster { --p-bg:#fff; --p-fg:#042d38; --p-accent:#38939b; min-height:100vh; box-sizing:border-box; padding:2.5rem 1.5rem; text-align:center; background:var(--p-bg); color:var(--p-fg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; -webkit-print-color-adjust:exact; print-color-adjust:exact }
.poster .p-logo { background:#fff; padding:.6rem 1rem; border-radius:12px } .poster .p-logo img { height:56px; max-width:260px; object-fit:contain; display:block }
.poster .p-head { font-size:clamp(1.8rem,5vw,3rem); line-height:1.1; margin:0; color:var(--p-fg); max-width:20ch; border-bottom:6px solid var(--p-accent); padding-bottom:.6rem }
.poster .p-qr { background:#fff; border:12px solid var(--p-accent); border-radius:20px; padding:.5rem } .poster .p-qr img { width:min(70vw,440px); height:auto; display:block }
.poster .p-sub { font-size:clamp(1.3rem,3.5vw,2rem); font-weight:700; margin:0; color:var(--p-fg) }
.poster .p-url { font-size:1.25rem; font-weight:700; margin:0; word-break:break-all; color:var(--p-fg) }
.poster .p-code { font-size:1.1rem; margin:0; color:var(--p-fg) } .poster .p-code strong { letter-spacing:.12em; font-size:1.3rem }
body.poster header.brand { display:none }
.printbtn { position:fixed; top:12px; right:12px; background:var(--brand); color:#fff; border-color:var(--brand) }
@media print { .printbtn { display:none } body.poster { background:none } }
/* editor */
.pform { display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:1.5rem; align-items:start }
.pform .colors { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.4rem } .pform .colors label { margin:0; font-weight:600; font-size:.85rem } .pform input[type=color] { display:block; width:3.2rem; height:2.2rem; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff }
.pform .radios label { display:block; font-weight:400; margin:.2rem 0 } .pform .radios input { margin-right:.4rem }
.ppreview { zoom:.42; border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:0 } .ppreview .poster { min-height:1000px; padding:2rem 1rem }
@media (max-width:1000px) { .pform { grid-template-columns:1fr } .ppreview { zoom:.38 } }
.chip { font-size:.8rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; background:var(--tint); color:var(--muted) } .chip.ok { background:#e3f4e8; color:#1b7f3b } .chip.wait { background:#fff3e6; color:#b45f00 }

/* photos: thumbnails left, selected photo right */
.wrap.wide { max-width:none }
.pane.photos { height:calc(100vh - 62px); display:flex; flex-direction:column; box-sizing:border-box; padding-bottom:1rem }
.pane.photos .bar { margin-bottom:.25rem } .pane.photos h1 { margin-bottom:.1rem }
.gallery { display:grid; grid-template-columns:minmax(220px,30%) 1fr; gap:1rem; flex:1; min-height:300px; margin-top:.5rem }
.thumbs { overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.4rem; align-content:start; padding:.15rem }
.thumb { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--tint); outline:3px solid transparent; outline-offset:-3px }
.thumb img { width:100%; height:100%; object-fit:cover; display:block }
.thumb.active { outline-color:var(--brand) } .thumb:focus-visible { outline-color:var(--link) }
.thumb .time { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,.6); color:#fff; font-size:.68rem; padding:.05rem .3rem; border-radius:5px }
.thumb .tag { position:absolute; left:4px; top:4px; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(0,0,0,.6); color:#fff; font-size:.68rem; padding:.05rem .3rem; border-radius:5px }
.stage { position:relative; background:#041216; border-radius:12px; display:flex; flex-direction:column; min-height:0; overflow:hidden }
.stage-img { flex:1; min-height:0; width:100%; object-fit:contain; display:block }
.stage-empty { margin:auto; color:#9fb5ba }
.stage-bar { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; align-items:center; padding:.6rem .8rem; background:#0a232a; color:#fff }
.stage-caption { font-size:.95rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis }
.stage-controls { display:flex; flex-wrap:wrap; gap:.4rem }
.stage-btn { padding:.4rem .8rem; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3) } .stage-btn.danger { color:#ffb4b4 }
.stage [hidden] { display:none }
.stage-img { flex:1 1 0 }
@media (max-width:860px) {
  .pane.photos { height:auto; display:block }
  .gallery { grid-template-columns:1fr; height:auto }
  .stage { order:-1; height:62vh }
  .thumbs { display:flex; overflow-x:auto; overflow-y:hidden } .thumb { flex:0 0 92px; height:92px }
}

/* terms landing page */
.card.terms { max-width:42rem; margin:1.25rem auto }
.terms-text { max-height:50vh; overflow:auto; padding:.75rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); margin:.75rem 0 }
.terms-text p { margin:.4rem 0 }
label.agree { display:block; font-weight:600; margin:.8rem 0 }
.termsbox { width:100%; font:inherit; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; resize:vertical }
.navitem.disabled { color:var(--muted); opacity:.5; cursor:default } .navitem.disabled:hover { background:none }
.pane { text-align:left }

/* ---- admin UI review ---- */
/* tree menu: events are nodes, the current one opens to its pages */
.navlist { overflow-y:auto; min-height:0 } .sidenav { overflow:hidden }
.tree { display:flex; flex-direction:column; gap:.05rem; margin:.15rem 0 }
.navnode { display:flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600 }
.navnode:hover { background:var(--tint) } .navnode.open { background:var(--tint) }
.navnode .chev { width:.9rem; color:var(--muted); font-size:.75rem; flex-shrink:0 } .navnode .navname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.navchildren { margin:.1rem 0 .35rem 1.15rem; padding-left:.55rem; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:.05rem }
.navchildren .navitem { padding:.4rem .65rem; font-weight:500; font-size:.94rem }
.navchildren .navitem.active { box-shadow:none; background:var(--tint); color:var(--link); font-weight:700 }
.navsearch { width:100%; margin:.3rem 0; padding:.45rem .6rem; font:inherit; border:1px solid var(--line); border-radius:8px; box-sizing:border-box }
.navmore { margin:.2rem .75rem; font-size:.8rem; color:var(--muted) }
/* tables and toolbars */
.table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.table th { text-align:left; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:.55rem .8rem; background:var(--bg); border-bottom:1px solid var(--line) }
.table td { padding:.6rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle } .table tr:last-child td { border-bottom:0 }
.table .right { text-align:right; white-space:nowrap } .table .mono, .mono { font-family:ui-monospace,Menlo,monospace; letter-spacing:.06em }
.table.review th { width:9rem; text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--muted) }
.toolsearch { font:inherit; padding:.5rem .7rem; border:1px solid var(--line); border-radius:8px; min-width:14rem }
button.small, .btn.small { padding:.3rem .65rem; font-size:.85rem }
.inlineform { margin:.75rem 0 } .inlineform input[type=text] { flex:1 1 12rem; max-width:20rem }
.lead { margin:.25rem 0 1rem } p.small, .small { font-size:.85rem }
.pane h1 { margin-bottom:.5rem } .pane header.bar h1 { margin:0 }
/* QR code and poster: controls beside a large sticky preview */
.pform { display:grid; grid-template-columns:minmax(300px,24rem) minmax(0,1fr); gap:1.25rem; align-items:start }
.pcontrols { display:flex; flex-direction:column; gap:.9rem } .card.tight { padding:1rem; margin:0; max-width:none } .card.tight h2 { margin:0 0 .4rem }
.pcontrols label, .wizbody label, .field label { display:block; margin:.55rem 0 .2rem; font-weight:600; font-size:.9rem }
.swatch { display:flex !important; flex-direction:column; align-items:flex-start; gap:.2rem; font-weight:600; font-size:.8rem; margin:0 !important }
.ppreview { position:sticky; top:.5rem; zoom:1 !important; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff }
.pframe { width:100%; overflow:hidden } .pframe .poster { width:800px; height:1131px; min-height:0; margin:0 auto; box-sizing:border-box; justify-content:center }
.qr.big { width:min(100%,360px); height:auto; display:block; margin:1rem auto }
@media (max-width:1000px) { .pform { grid-template-columns:1fr } .ppreview { position:static } }
/* wizard */
.stepper { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; list-style:none; padding:0; margin:.25rem 0 1.25rem; counter-reset:none }
.stepper li { display:flex; align-items:center; gap:.45rem; color:var(--muted); font-weight:600 } .stepper .n { display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--line); color:var(--ink); font-size:.8rem }
.stepper .now { color:var(--ink) } .stepper .now .n { background:var(--brand); color:#fff } .stepper .done .n { background:var(--teal); color:#fff }
.wizbody { max-width:46rem } .wizbody .pform { max-width:none } .field { margin-bottom:.8rem } .field input[type=text], .field input[type=number], .field input[type=datetime-local] { width:100%; max-width:26rem }
.wiznav { margin-top:1.2rem }
/* photo stage: a light grey loading state instead of a black box */
.stage { background:#e6ecee } .stage-img { transition:opacity .25s } .stage.loading .stage-img { opacity:0 }
.stage.loading::after { content:""; position:absolute; left:50%; top:calc(50% - 1.5rem); width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; border:4px solid #c9d4d7; border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.stage-empty { color:var(--muted) }
.stage-bar { background:#fff; color:var(--ink); border-top:1px solid var(--line) }
.stage-btn { background:#fff; color:var(--ink); border:1px solid var(--line) } .stage-btn.danger { color:var(--danger) }
.thumb { background:#e6ecee }
/* only the event tree scrolls; everything else in the menu stays in view */
.navlist { display:flex; flex-direction:column; min-height:0; flex:1; overflow:hidden } .navlist > * { flex-shrink:0 }
.navlist > .tree { flex-shrink:1; overflow-y:auto; min-height:90px }
@media (max-width:760px) { .navlist { flex-direction:row; overflow-x:auto } .navlist > .tree { flex-direction:row; overflow:visible } .navchildren { margin:0; padding:0; border:0; flex-direction:row } }
[hidden] { display:none !important }
.sortbox { display:inline-flex; gap:.4rem; align-items:center }

/* 24 per page, rows of 3 */
.thumbcol { display:flex; flex-direction:column; min-height:0; gap:.5rem }
.thumbcol .thumbs { grid-template-columns:repeat(3, 1fr); flex:1 1 auto; min-height:0 }
.pager { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.25rem .1rem; font-size:.85rem; color:var(--muted) }
.pager button:disabled { opacity:.4; cursor:default }
@media (max-width:860px) { .thumbcol .thumbs { grid-template-columns:none } }

/* sort links: the active one is marked and shows its direction */
.sortlinks { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.2rem .9rem }
.sortlink { background:none; border:0; padding:.15rem 0; font:inherit; font-weight:600; color:var(--link); cursor:pointer; border-bottom:2px solid transparent }
.sortlink:hover { border-bottom-color:var(--line) } .sortlink.active { color:var(--ink); border-bottom-color:var(--brand) }

/* moderation */
.thumb .state { position:absolute; left:4px; bottom:4px; width:.7rem; height:.7rem; border-radius:50%; border:2px solid #fff; background:#b45f00 }
.thumb .state.approved { background:#1b7f3b } .thumb .state.hidden { background:#8a959a }
.stage-btn.approve { background:var(--brand); border-color:var(--brand); color:#fff }

/* live screen: sized for a projector */
body.live header.brand { display:none } body.live { cursor:none; overflow:hidden }
.livepage { position:fixed; inset:0; display:flex; flex-direction:column; gap:clamp(.8rem,1.8vw,2.2rem); box-sizing:border-box; padding:clamp(1rem,2.4vw,3rem) clamp(1.2rem,3.2vw,4rem); background:#f3f6f7; color:var(--ink) }
.livepage.dark { background:#05080a; color:#fff }
.lhead { display:flex; align-items:center; justify-content:space-between; gap:2vw }
.ltitle { min-width:0; flex:1 1 auto } .ltitle h1 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; font-size:clamp(2.2rem,4.8vw,5.4rem); line-height:1.05; font-weight:800; color:inherit; letter-spacing:-.01em }
.lsub { margin:.25em 0 0; font-size:clamp(1.1rem,2vw,2.3rem); color:var(--muted); font-weight:600 } .livepage.dark .lsub { color:#9fb5ba }

.join { display:flex; align-items:center; gap:clamp(.5rem,.9vw,1.1rem); background:#fff; color:var(--ink); padding:clamp(.35rem,.55vw,.7rem) clamp(.7rem,1.1vw,1.4rem) clamp(.35rem,.55vw,.7rem) clamp(.35rem,.55vw,.7rem); border-radius:.9vw; box-shadow:0 2px 12px rgba(0,0,0,.16); flex-shrink:0 }
.join img { width:clamp(60px,5.6vw,116px); height:auto; display:block }
.jtext { display:flex; flex-direction:column; font-weight:800; line-height:1.05; font-size:clamp(1rem,1.7vw,2rem) }

/* the body shows one layout at a time */
.lbody { flex:1; min-height:0; position:relative; display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); gap:clamp(.8rem,1.6vw,2rem); transition:margin-bottom .5s ease }
.lbody > * { min-width:0; min-height:0 }
.lbody .strip, .lbody .mosaic, .lbody .pile, .lbody .multi { display:none }
.layout-strip { grid-template-columns:minmax(0,1fr) clamp(150px,19vw,360px) } .layout-strip .strip { display:flex }
.layout-spotlight .spotwrap, .layout-mosaic .spotwrap, .layout-pile .spotwrap, .layout-pair .spotwrap, .layout-trio .spotwrap, .layout-quad .spotwrap { display:none } .layout-mosaic .mosaic { display:grid } .layout-pile .pile { display:block } .layout-spotlight .multi, .layout-pair .multi, .layout-trio .multi, .layout-quad .multi { display:grid }

.spotwrap { position:relative; border-radius:1.4vw; overflow:hidden; background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.8), rgba(4,45,56,.07) 85%) } .livepage.dark .spotwrap { background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.1), rgba(255,255,255,.03) 85%) }
.livepage .layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:clamp(1rem,2.6vw,3.4rem); opacity:0 }
.livepage .layer.on { opacity:1 }
.livepage .layer .print { flex:none }
.bd { display:none; position:absolute; inset:-8%; background-size:cover; background-position:center; filter:blur(clamp(28px,3.4vw,64px)) saturate(1.2) brightness(.9); opacity:.9 }
.livepage.blurred .bd { display:block }
.livepage.dark .bd { filter:blur(clamp(28px,3.4vw,64px)) saturate(1.1) brightness(.6) }
.bdclip { position:absolute; inset:0; overflow:hidden; border-radius:inherit }

/* a physical print: paper with a pixel of highlight and shadow on its edge, the photo set a hair below the paper, and a soft drop shadow */
.print { --bw:clamp(5px,.75vw,14px); position:relative; box-sizing:border-box; background:#fdfcf9; border:var(--bw) solid #fdfcf9; border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08), 0 .5vw 2.2vw rgba(0,0,0,.3) }
.print::before { content:""; position:absolute; inset:calc(-1 * var(--bw)); border-radius:3px; pointer-events:none; z-index:4;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.13) }
.print::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), inset 0 1px 3px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.16) }
.print img { position:relative; display:block; width:100%; height:100%; object-fit:cover }

.strip { height:100%; box-sizing:border-box; padding:clamp(.5rem,1vw,1.2rem); flex-direction:column; gap:clamp(.8rem,1.4vw,1.6rem); min-height:0 }
.strip .print { --bw:clamp(3px,.5vw,9px); flex:1 1 0; min-height:0; width:100% } .strip .print img { position:absolute; inset:0 }

.mosaic { height:100%; box-sizing:border-box; padding:clamp(.5rem,1vw,1.2rem); grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(.8rem,1.4vw,1.6rem) }
.mrest { display:flex; flex-direction:column; gap:clamp(.8rem,1.4vw,1.6rem); min-height:0; min-width:0 }
.mrow { flex:1 1 0; display:flex; gap:clamp(.8rem,1.4vw,1.6rem); min-height:0 }
.mtile { --bw:clamp(3px,.5vw,9px); flex:1 1 0; min-width:0; min-height:0 }
.mtile img { position:absolute; inset:0 }
.mtile.big { flex:none } .mtile.big img { object-fit:contain; z-index:1 } .mtile.big .bdclip { background:rgba(4,45,56,.07) }

/* the pile: prints dropped on a table one by one, overlapping and tilted, the newest on top */
.pile { position:relative; border-radius:1.4vw; background:rgba(4,45,56,.06); overflow:hidden } .livepage.dark .pile { background:rgba(255,255,255,.05) }
.pp { --bw:clamp(5px,.8vw,15px); position:absolute } .pp img { position:absolute; inset:0 }
.pp.leave { opacity:0; transition:opacity .55s ease }

.toast { position:absolute; left:50%; top:clamp(.9rem,2.2vw,2.8rem); transform:translateX(-50%); background:var(--brand); color:#fff; font-weight:800; font-size:clamp(1.3rem,3vw,3.4rem); padding:.28em 1.1em; border-radius:999px; box-shadow:0 6px 26px rgba(0,0,0,.3); white-space:nowrap; z-index:50 }

.livepage .waiting { position:relative; flex:1; min-height:0; box-sizing:border-box; padding:0 clamp(1rem,3vw,4rem); border-radius:1.4vw; background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.8), rgba(4,45,56,.07) 85%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.livepage .waiting h2 { font-size:clamp(2rem,5vw,5rem); margin:0 0 .4em; color:inherit } .livepage .waiting p { font-size:clamp(1.2rem,3vw,3rem); margin:0; color:var(--muted) }
@keyframes throw { 0% { opacity:0; transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--tr,0)) scale(1.15) } 10% { opacity:1 } 100% { opacity:1; transform:none } }
@keyframes flyout { 0% { opacity:1; transform:none } 100% { opacity:0; transform:translate(var(--ox,0), var(--oy,0)) rotate(var(--or,0)) scale(.9) } }




ul.plain { padding-left:1.1rem; margin:.5rem 0 1rem } ul.plain li { margin:.25rem 0 }
.choice { display:flex !important; align-items:flex-start; gap:.5rem; font-weight:400 !important; margin:.35rem 0 !important } .choice strong { font-weight:700 }
.ltitle h1[data-size="l"] { font-size:clamp(1.8rem,3.6vw,4.1rem) } .ltitle h1[data-size="xl"] { font-size:clamp(1.5rem,2.9vw,3.3rem) }

.danger-zone { margin-top:1.5rem; border-color:#f0cfcf } .danger-zone h2 { color:var(--danger) }

/* thrown in: from off the table, spinning, a half-second after the one before, then still */
.thrown { animation:throw .65s cubic-bezier(.2,.8,.3,1.05) both; animation-delay:var(--delay,0ms) }
/* a camera flash when a new photo arrives */

@media (prefers-reduced-motion: reduce) { .thrown, .flyout { animation:none !important } .pp.leave { transition:none } }

/* pair, trio, quad: several framed photos at once, each scaled to fit its own cell */
.multi { border-radius:1.4vw; overflow:hidden; gap:0; background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.8), rgba(4,45,56,.07) 85%) } .livepage.dark .multi { background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.1), rgba(255,255,255,.03) 85%) }
.multi.spotlight { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) }
.multi.pair { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) }
.multi.trio { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr) } .multi.trio .cell:first-child { grid-row:1 / span 2 }
.multi.quad { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,1fr) }
.cell { position:relative; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:0; min-height:0; padding:clamp(.8rem,2vw,2.6rem) } .cell .print { flex:none }

/* thrown out: each photo leaves in its own direction, spinning and fading, quicker than it came in */
.livepage .flyout { animation:flyout .55s cubic-bezier(.55,0,.9,.45) both; animation-delay:var(--odelay,0ms) }


/* the live screen's two pages sit under it in the menu */
.navitem.sub { padding-left:2.4rem; font-size:.92em }
.pagecard h3 { margin:0 }
.pagehead { display:grid; grid-template-columns:minmax(0,1fr) 9rem 6rem; gap:.8rem }
.pagecols { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem }
.richedit { display:grid; gap:.4rem }
.toolbar { display:flex; gap:.3rem } .toolbar .tool { min-width:2.2rem; padding:.2rem .5rem; font-weight:700 }
.richedit .preview { border:1px dashed #c9d4d7; border-radius:8px; padding:.6rem .9rem; min-height:2.5rem; background:#fff }
.rt h3 { font-size:1.25rem; margin:.2em 0 } .rt h4 { font-size:1.05rem; margin:.2em 0 } .rt p { margin:.25em 0 } .rt ul { margin:.3em 0; padding-left:1.2rem }

/* an info page: a title, then one or two columns of rich text */
.livepage .waiting .pg { width:100%; display:grid; gap:4vw; margin-top:2vh; box-sizing:border-box; padding:0 3vw; text-align:left; align-items:start }
.livepage .waiting .pg:empty { display:none }
.livepage .waiting .pg.one { grid-template-columns:minmax(0,46em); justify-content:center }
.livepage .waiting .pg.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.livepage .waiting .pg h3 { font-size:clamp(1.6rem,3.2vw,3.4rem); margin:.1em 0 .3em }
.livepage .waiting .pg h4 { font-size:clamp(1.3rem,2.6vw,2.6rem); margin:.1em 0 .3em }
.livepage .waiting .pg p { font-size:clamp(1.15rem,2.3vw,2.4rem); margin:.3em 0; max-width:none; color:var(--muted) }
.livepage .waiting .pg ul { list-style:none; margin:.4em 0; padding:0; display:grid; gap:.5em; font-size:clamp(1.15rem,2.3vw,2.4rem) }
.livepage .waiting .pg li { padding-left:.9em; border-left:.2em solid var(--brand,currentColor) }
.livepage .waiting p:empty { display:none }
.livepage .waiting { overflow:hidden }
.livepage .waiting .wrapin { width:100%; display:flex; flex-direction:column; align-items:center; transform-origin:center; flex:none }
.navitem.sub2 { padding-left:3.8rem; font-size:.88em }
.pagelist .row { align-items:center }
.richedit .preview { text-align:left } .richedit textarea { width:100%; box-sizing:border-box; font-family:ui-monospace,Menlo,monospace }
.pagehead select { width:100%; padding:.5rem; border:1px solid #c9d4d7; border-radius:8px; background:#fff; font:inherit }

/* the visual editor */
.richedit .wysiwyg { border:1px solid #c9d4d7; border-radius:8px; background:#fff; padding:.7rem .9rem; min-height:11rem; max-height:26rem; overflow:auto; text-align:left; outline:none }
.richedit .wysiwyg:focus { border-color:var(--teal,#2a9aa6); box-shadow:0 0 0 3px rgba(42,154,166,.18) }
.richedit .wysiwyg:empty::before { content:attr(data-placeholder); color:#8da1a6; white-space:pre-line }
.richedit .wysiwyg ul { padding-left:1.3rem }
.toolbar .tool { padding:.3rem .7rem; min-width:2.4rem }
.toolbar .t-b { font-weight:800 } .toolbar .t-i { font-style:italic }

/* photos inside info pages */
.rt figure { margin:.4em 0; text-align:center } .rt figure img { max-width:100%; max-height:14rem; border-radius:6px }
.richedit .wysiwyg figure { padding:.2rem; border:1px dashed transparent } .richedit .wysiwyg figure:hover { border-color:#c9d4d7 }
.livepage .waiting .pg figure { margin:.3em 0; text-align:center } .livepage .waiting .pg figure img { max-width:100%; max-height:36vh; object-fit:contain; border-radius:.6vw; box-shadow:0 2px 14px rgba(0,0,0,.18) }

/* photos waiting for approval */
.badge { display:inline-block; min-width:1.35em; padding:.05em .5em; margin-left:.5rem; border-radius:999px; background:var(--brand,#f58220); color:#fff; font-size:.78rem; font-weight:800; line-height:1.5; text-align:center; vertical-align:middle }
.badge[hidden] { display:none }
.navnode .badge { margin-left:auto }