/* THE LAST LECTURE online registration.
   One question per screen and the springy motion of the student screens of the teamwork evaluation app, drawn matte:
   flat fills and fine lines in the event's maroon, rain tree pink and gold on warm paper, Bai Jamjuree. No embossed
   surfaces and no drop shadows. */

@font-face { font-family: 'Bai Jamjuree'; src: url(/static/assets/fonts/BaiJamjuree-Light.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url(/static/assets/fonts/BaiJamjuree-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url(/static/assets/fonts/BaiJamjuree-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url(/static/assets/fonts/BaiJamjuree-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url(/static/assets/fonts/BaiJamjuree-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Anton'; src: url(/static/assets/fonts/Anton-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  /* paper and lines */
  --c-bg: #F6EFE5; --c-card: #FFFCF7; --c-fill: #EFE6D9; --c-fill-press: #E6DACA;
  --c-line: #E3D6C4; --c-line-strong: #CDBBA2;
  /* ink */
  --c-ink: #2B0A10; --c-ink-soft: #5B3A40; --c-ink-quiet: #8A6E72; --c-ink-onhue: #FFF8EF;
  /* event colours */
  --c-maroon: #791B2B; --c-maroon-dark: #5E1120; --c-maroon-deep: #4A1520; --c-maroon-ring: rgba(121, 27, 43, .14);
  --c-pink: #E29AB0; --c-pink-soft: #F3CCD8; --c-pink-wash: #FBEDF1;
  --c-gold: #BF9040; --c-gold-soft: #E9D3A3; --c-gold-wash: #F9F0DC; --c-gold-ink: #75520F;
  --c-green: #6E9455; --c-green-soft: #C9DCB8; --c-green-wash: #EEF5E7; --c-green-ink: #3E6A2A;
  --c-bad: #A51536;
  --f-ui: 'Bai Jamjuree', 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;
  --t-display: 30px; --t-ask: 27px; --t-body: 16px; --t-sub: 14.5px; --t-fine: 13px; --t-micro: 12px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 26px;
  --r-2: 16px; --r-3: 20px; --r-4: 24px; --r-pill: 999px;
  --m-fast: 140ms; --m-base: 190ms; --m-slow: 280ms; --m-long: 420ms;
  --m-ease: cubic-bezier(.3, .85, .3, 1); --m-spring: cubic-bezier(.25, 1.12, .4, 1);
  --tap: 54px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f-ui); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased;
  font-size: var(--t-body); line-height: 1.55; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ the scene: brand panel and the phone */
.scene { min-height: 100%; display: flex; }
.brand { display: none; }
.phone { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 20px max(12px, env(safe-area-inset-bottom)); background: var(--c-bg); }
/* LINE and other in app browsers on iPhone float their own toolbar over the bottom of the page: keep the buttons
   clear of it, and give the top a little less room */
.inapp .phone { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: calc(env(safe-area-inset-bottom) + 66px); }

@media (min-width: 900px) {
  body { background: #3F0A14; }
  .scene { align-items: center; justify-content: center; gap: clamp(32px, 6vw, 96px); padding: 24px; min-height: 100vh; }
  .brand { display: flex; flex-direction: column; align-items: center; position: relative; width: min(42vw, 520px); }
  .brand-ring { position: absolute; inset: -12% -6% auto; aspect-ratio: 1; opacity: .9; pointer-events: none; }
  .brand-ring svg { width: 100%; height: 100%; animation: drift 240s linear infinite; }
  .brand-logo { position: relative; width: 78%; margin-top: 22%; }
  .brand-date { position: relative; margin: 26px 0 0; text-align: center; color: var(--c-gold-soft); font-size: 15px; letter-spacing: .02em; line-height: 1.7; }
  .phone { width: 430px; min-height: 0; height: min(880px, calc(100vh - 48px)); border-radius: 32px; outline: 1px solid rgba(255, 255, 255, .08); }
}
@keyframes drift { to { transform: rotate(360deg); } }

/* top context pill: the event logo straight on a deep maroon, where both its red letters and its white script read;
   no stamp frame and no dot, nothing that does not carry meaning */
.context { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: 8px 20px 8px 18px; margin-bottom: var(--sp-3);
  border-radius: var(--r-pill); background: var(--c-maroon-deep); color: var(--c-ink-onhue); }
.context-logo { display: block; height: 32px; width: auto; }
.context-text { margin-left: auto; font-size: var(--t-sub); font-weight: 500; letter-spacing: .02em; color: var(--c-gold-soft); }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.progress { flex: none; display: flex; gap: 6px; height: 4px; margin: 0 4px var(--sp-3); }
.progress span { flex: 1; border-radius: 2px; background: var(--c-line); overflow: hidden; position: relative; }
.progress span::after { content: ''; position: absolute; inset: 0; background: var(--c-maroon);
  transform: scaleX(0); transform-origin: left; transition: transform var(--m-long) var(--m-spring); }
.progress span.on::after { transform: scaleX(1); }
.phone[data-flow="none"] .progress { visibility: hidden; }

/* ------------------------------------------------------------------ views */
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.on { display: flex; animation: enter var(--m-long) var(--m-spring) both; }
.view.on.back-in { animation-name: enter-back; }
@keyframes enter { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.core { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding-top: 10px;
  overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; margin: 0 -8px; padding-left: 8px; padding-right: 8px; padding-bottom: 8px; }
.core-top { padding-top: 6px; }
/* on a computer the page is a phone sized card of fixed height: the column scrolls, nothing in it is squeezed
   (the photo circle had no content of its own to hold its height and folded into a line) */
.core > * { flex-shrink: 0; }
.say > * { margin: 0; }
.headline { font-size: var(--t-display); font-weight: 300; line-height: 1.25; text-wrap: balance; color: var(--c-ink); }
.headline.small { font-size: 26px; }
.ask { margin: 4px 0 0; font-size: var(--t-ask); font-weight: 300; line-height: 1.28; text-wrap: balance; }
.ask.small { font-size: 24px; }
.support { max-width: 30ch; margin: var(--sp-2) auto 0; color: var(--c-ink-soft); font-size: var(--t-sub); line-height: 1.6; text-wrap: pretty; }
.aside { max-width: 32ch; margin: 0 auto; font-size: var(--t-fine); color: var(--c-ink-quiet); }
.aside.wide { max-width: none; }
.q-label { margin: 6px 0 -4px; align-self: stretch; text-align: left; font-size: var(--t-sub); font-weight: 600; color: var(--c-ink-soft); }
.err { min-height: 1.2em; margin: 0; font-size: var(--t-fine); color: var(--c-bad); }
.err:empty { min-height: 0; }
.note { margin: 6px 0 0; padding: 10px 14px; border-radius: var(--r-2); background: var(--c-fill); font-size: var(--t-fine); color: var(--c-ink-soft); text-align: left; }
.note.warn { background: var(--c-gold-wash); border: 1.5px solid var(--c-gold-soft); color: var(--c-gold-ink); }
/* guided filling (6 Oct 2569): the first page says what is already saved and how many short pages follow */
.qnote { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: var(--r-2);
  background: var(--c-gold-wash); border: 1.5px solid var(--c-gold-soft); color: var(--c-gold-ink);
  font-size: var(--t-fine); font-weight: 500; line-height: 1.5; text-align: left; text-wrap: pretty; }
.qnote b { font-weight: 600; }
.qnote.saved { background: var(--c-green-wash); border-color: var(--c-green-soft); color: var(--c-green-ink); }
.qnote.saved::before { content: ''; flex: none; width: 6px; height: 11px; margin: 0 3px 3px 4px; border: solid var(--c-green-ink);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.qnote[hidden] { display: none; }
/* the page that confirms the answer from the email opens first: there is nothing to go back to */
#app[data-confirm="on"] .view[data-view="attend"] .back { visibility: hidden; }
.view [tabindex="-1"]:focus { outline: none; }

.topbar { flex: none; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.back { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); cursor: pointer; background: var(--c-card); position: relative;
  transition: background var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); }
.back::before { content: ''; position: absolute; left: 17px; top: 14px; width: 11px; height: 11px; border: solid var(--c-ink); border-width: 0 0 2.2px 2.2px; transform: rotate(45deg); border-radius: 1px; }
.back:active { background: var(--c-fill); transform: scale(.94); }
.topbar-title { flex: 1; text-align: center; font-size: var(--t-sub); font-weight: 500; color: var(--c-ink-soft); }
.topbar-step, .topbar-gap { width: 52px; white-space: nowrap; text-align: right; font-size: var(--t-fine); font-weight: 500; color: var(--c-ink-quiet); font-variant-numeric: tabular-nums; }
.topbar-link { width: 44px; border: 0; background: none; color: var(--c-maroon); font-weight: 600; font-size: var(--t-sub); cursor: pointer; }

/* ------------------------------------------------------------------ the seal: a flat disc for the art */
.seal { position: relative; flex: none; width: 164px; height: 164px; border: 0; padding: 0; background: none; }
.seal-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seal-track { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c-line); background: var(--c-card); }
.seal-face { position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 50%; background: var(--c-pink-wash); overflow: hidden; transition: transform var(--m-base) var(--m-ease); }
.seal-img { width: 72px; height: 72px; }
.initial { font-size: 52px; font-weight: 300; color: var(--c-maroon); }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--c-pink-soft); border-top-color: var(--c-maroon); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.puff { width: 132px; height: 132px; overflow: visible; }
.puff .fil { stroke: var(--c-pink); stroke-width: 1.4; stroke-linecap: round; }
.puff .tip { fill: var(--c-maroon); }
.puff .fil, .puff .tip { transform-origin: 60px 74px; animation: bloom 1.1s var(--m-spring) both; animation-delay: var(--d, 0ms); }
.puff .calyx { fill: var(--c-green); }
.puff .stalk { stroke: #5E8247; stroke-width: 2.6; stroke-linecap: round; }
@keyframes bloom { from { transform: scale(.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.seal-btn:active .seal-face { transform: scale(.97); }

/* ------------------------------------------------------------------ lists of facts */
.proof { width: 100%; margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-3); background: var(--c-card); border: 1.5px solid var(--c-line); text-align: left; }
.proof-row { display: grid; grid-template-columns: 6.4em 1fr; gap: var(--sp-2); align-items: start; padding: 10px 0;
  font-size: 14px; border-bottom: 1px solid var(--c-line); }
.proof-row:last-child { border-bottom: 0; }
.proof dt { color: var(--c-ink-quiet); }
.proof dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.proof-edit .proof-row { grid-template-columns: 6.4em 1fr auto; align-items: center; }
.proof-edit .edit { border: 0; background: none; color: var(--c-maroon); font-weight: 600; font-size: 13.5px; padding: 6px 2px 6px 8px; cursor: pointer; }
.proof dd .muted { color: var(--c-ink-quiet); font-weight: 400; }
.proof-row.want { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; border-bottom-color: transparent; background: var(--c-gold-wash); }
.proof-row.want dd .muted { color: var(--c-gold-ink); font-weight: 600; }

.phone[data-view="welcome"] .progress { display: none; }
.view[data-view="welcome"] .core { gap: 12px; padding-top: 4px; }
.view[data-view="welcome"] .seal { width: 104px; height: 104px; }
.view[data-view="welcome"] .seal-face { inset: 8px; }
.view[data-view="welcome"] .puff { width: 82px; height: 82px; }

.view[data-view="welcome"] .headline { font-size: 28px; }
.view[data-view="welcome"] .support { margin-top: 6px; }
.proof-welcome .proof-row { padding: 8px 0; }
/* after the day (11 Oct 2569, r18): the thanks line that takes the place of the date and the venue */
.wish-thanks { max-width: 32ch; padding: 10px 14px; border-radius: var(--r-2); background: var(--c-gold-wash); color: var(--c-gold-ink); font-size: var(--t-fine); }
.poster-link { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: none; cursor: pointer; font-weight: 600; color: var(--c-maroon);
  text-decoration: underline; text-underline-offset: 3px; }
.poster-link img { width: 22px; height: 29px; object-fit: cover; border-radius: 4px; outline: 1px solid var(--c-line); }
/* the poster: a small tile, corners concentric with the thumbnail (16 outside, 10 inside, 6 between) */
.poster-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border: 1.5px solid var(--c-line); border-radius: var(--r-2);
  background: var(--c-card); cursor: pointer; text-align: left; font: inherit; transition: transform var(--m-base) var(--m-ease); }
.poster-chip img { width: 34px; height: 45px; object-fit: cover; border-radius: 10px; display: block; }
.poster-chip b { display: block; font-size: 15px; font-weight: 600; color: var(--c-maroon); line-height: 1.25; }
.poster-chip small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--c-ink-quiet); line-height: 1.35; }
.poster-chip:active { transform: scale(.97); background: var(--c-fill); }
/* the poster and the agenda side by side: two chips on the welcome and done pages, two tiles on the summary */
.pics { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.pics .poster-chip { flex: 1 1 0; min-width: 0; padding-right: 12px; }
.pics .poster-chip b, .pics .poster-chip small { white-space: nowrap; }
.pic-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.pic-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border: 1.5px solid var(--c-line); border-radius: var(--r-3);
  background: var(--c-card); cursor: pointer; font: inherit; font-size: var(--t-sub); font-weight: 600; color: var(--c-maroon); text-align: center;
  transition: transform var(--m-base) var(--m-ease); }
.pic-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: var(--c-fill); }
.pic-tile:active { transform: scale(.97); background: var(--c-fill); }

/* ------------------------------------------------------------------ buttons */
.act { flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: var(--sp-3); }
.hint { margin: 0; padding: 0 var(--sp-3); text-align: center; font-size: var(--t-fine); color: var(--c-ink-quiet); }
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5); border: 1.5px solid transparent; border-radius: var(--r-pill); font-weight: 500; color: var(--c-ink); cursor: pointer;
  background: var(--c-fill); text-decoration: none;
  transition: background var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease); }
.btn:active { background: var(--c-fill-press); transform: scale(.978); }
.btn:disabled { cursor: default; color: var(--c-ink-quiet); background: #F0E9DF; border-color: transparent; transform: none; }
.btn-go, .btn.ready { color: var(--c-ink-onhue); background: var(--c-maroon); }
.btn-go:active, .btn.ready:active { background: var(--c-maroon-dark); }
.btn-line { background: transparent; border-color: var(--c-line-strong); }
.btn-line:active { background: var(--c-fill); }
.btn-text { min-height: 40px; background: none; border: 0; color: var(--c-maroon); font-weight: 600; font-size: var(--t-sub); }
.btn-text:active { background: none; transform: scale(.97); }
.btn-text.danger { color: var(--c-bad); font-weight: 500; }
.btn-go.danger { background: var(--c-bad); }
.btn-go.danger:active { background: #861029; }
.btn-sm { min-height: 46px; width: auto; flex: 1; padding: 10px 14px; font-size: var(--t-sub); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn:not(.btn-go):not(.ready).busy::after { border-color: var(--c-line-strong); border-top-color: var(--c-maroon); }
.btn-row { display: flex; gap: 10px; width: 100%; }
.btn-row .btn { flex: 1; min-height: 48px; font-size: var(--t-sub); padding: 10px 12px; }

/* ------------------------------------------------------------------ fields */
.pill-field { position: relative; display: block; width: 100%; }
.pill-field input { width: 100%; height: 58px; padding: 0 22px; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); text-align: center; font-size: 18px;
  background: var(--c-card); outline: none; transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.pill-field.soft input { height: 52px; font-size: 16px; }
.pill-field input::placeholder { color: var(--c-ink-quiet); opacity: .85; }
.pill-field input:focus { border-color: var(--c-maroon); box-shadow: 0 0 0 3px var(--c-maroon-ring); }
.pill-field input.bad { border-color: var(--c-bad); animation: shake 380ms var(--m-ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.well-field { position: relative; display: block; width: 100%; }
.well-field textarea { width: 100%; min-height: 168px; padding: 18px 20px 28px; border: 1.5px solid var(--c-line); border-radius: var(--r-3); resize: vertical; outline: none;
  background: var(--c-card); line-height: 1.7; font-size: 16px; transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.well-field textarea:focus { border-color: var(--c-maroon); box-shadow: 0 0 0 3px var(--c-maroon-ring); }
.count { position: absolute; right: 16px; bottom: 10px; font-size: var(--t-micro); color: var(--c-ink-quiet); font-variant-numeric: tabular-nums; }

/* chips for roles: outlined when off, filled pink when on */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 18px 8px 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-card); cursor: pointer; font-size: 15px; font-weight: 500;
  transition: background var(--m-slow) var(--m-ease), border-color var(--m-slow) var(--m-ease), color var(--m-slow) var(--m-ease), transform 320ms var(--m-spring); -webkit-tap-highlight-color: transparent; }
.chip .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--c-line-strong); background: var(--c-card);
  transition: background var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease), transform 320ms var(--m-spring); }
.chip .tick::after { content: ''; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity var(--m-base); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--c-pink-wash); border-color: var(--c-pink); color: var(--c-maroon); }
.chip[aria-checked="true"] .tick, .chip[aria-pressed="true"] .tick { background: var(--c-maroon); border-color: var(--c-maroon); transform: scale(1.08); }
.chip[aria-checked="true"] .tick::after, .chip[aria-pressed="true"] .tick::after { opacity: 1; }
.chip:active { transform: scale(.96); }
.reveal { width: 100%; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--m-long) var(--m-spring), opacity var(--m-slow) var(--m-ease); }
.reveal > * { min-height: 0; overflow: hidden; }
.reveal.open { grid-template-rows: 1fr; opacity: 1; }
.reveal .pill-field { padding: 4px 2px; }

/* attendance: the big question */
.badge-new { margin: 0; padding: 3px 14px; border-radius: 999px; background: var(--c-gold-wash); border: 1.5px solid var(--c-gold-soft);
  color: var(--c-gold-ink); font-size: var(--t-fine); font-weight: 600; letter-spacing: .04em; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 4px; }
.choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-4);
  background: var(--c-card); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--m-slow) var(--m-ease), border-color var(--m-slow) var(--m-ease), transform 340ms var(--m-spring); }
.choice b { font-size: 18px; font-weight: 600; }
.choice span { font-size: var(--t-fine); color: var(--c-ink-quiet); }
.choice-art { width: 76px; height: 76px; margin-bottom: 6px; overflow: visible; }
.choice-art .stem { stroke: #5E8247; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.choice-art .leaf { fill: var(--c-green); transform-origin: 32px 33px; transition: transform 520ms var(--m-spring); transform: scale(.55); }
.choice-art .soil { fill: #C9B79C; }
.choice-art .seed { fill: #6B2E2E; }
.choice-art .hilum { stroke: #F3D9C4; stroke-width: 2; fill: none; stroke-linecap: round; }
.choice-art .z { stroke: var(--c-ink-quiet); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .35; transition: opacity var(--m-slow), transform 520ms var(--m-spring); }
.choice[data-v="yes"][aria-checked="true"] { background: var(--c-green-wash); border: 2px solid var(--c-green); transform: translateY(-2px); }
.choice[data-v="yes"][aria-checked="true"] .leaf { transform: scale(1.06); }
.choice[data-v="no"][aria-checked="true"] { background: var(--c-gold-wash); border: 2px solid var(--c-gold); transform: translateY(-2px); }
.choice[data-v="no"][aria-checked="true"] .z { opacity: .9; transform: translateY(-3px); }
.choice:active { transform: scale(.97); }

/* photo */
.photo-well { position: relative; flex: none; width: 176px; height: 176px; margin-bottom: 14px; border-radius: 50%; background: var(--c-fill); border: 1.5px dashed var(--c-line-strong); display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease); }
.photo-well:active { background: var(--c-fill-press); }
.photo-well img { position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); border-radius: 50%; object-fit: cover; animation: pop 420ms var(--m-spring); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.photo-well::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2.5px solid transparent; transition: border-color var(--m-slow) var(--m-ease), transform 420ms var(--m-spring); pointer-events: none; }
.photo-well.good::after { border-color: var(--c-green); transform: scale(1.02); }
.photo-well.warn::after { border-color: var(--c-gold-soft); }
.photo-ph { width: 92px; height: 92px; fill: none; stroke: var(--c-ink-quiet); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.pick-again { min-height: 34px; margin-top: -4px; width: auto; padding: 4px 12px; font-size: var(--t-fine); }
.uses { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; gap: 6px; text-align: left; }
.uses li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--c-card);
  border: 1.5px solid var(--c-line); font-size: var(--t-fine); color: var(--c-ink-soft); }
.uses svg { width: 24px; height: 24px; fill: none; stroke: var(--c-maroon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.photo-well img:not([hidden]) ~ .photo-ph { display: none; }
.photo-chip { position: absolute; z-index: 3; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--c-green-wash); border: 1.5px solid var(--c-green-soft); color: var(--c-green-ink); }
.photo-chip.warn { background: var(--c-gold-wash); border-color: var(--c-gold-soft); color: var(--c-gold-ink); }
.photo-btns { display: flex; gap: 10px; width: 100%; }
.tips { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; gap: 6px; text-align: left; }
.tips li { position: relative; padding-left: 26px; font-size: var(--t-fine); color: var(--c-ink-soft); }
.tips li::before { content: ''; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-pink); }
.consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--c-card); border: 1.5px solid var(--c-line); text-align: left; font-size: var(--t-fine); color: var(--c-ink-soft); cursor: pointer;
  transition: border-color var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease); }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--c-line); transition: background var(--m-base) var(--m-ease); margin-top: 2px; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 320ms var(--m-spring); }
.consent input:checked + .switch { background: var(--c-maroon); }
.consent input:checked + .switch::after { transform: translateX(18px); }
.consent input:focus-visible + .switch { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.consent:has(input:checked) { border-color: var(--c-pink); background: var(--c-pink-wash); }
.consent.need { border-color: var(--c-gold); background: var(--c-gold-wash); animation: shake 380ms var(--m-ease); }
.consent span:last-child { grid-column: 2; }
.consent .switch { grid-column: 1; grid-row: 1; }
.consent .link { border: 0; padding: 0; background: none; color: var(--c-maroon); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

/* one time code: six cells, a hidden real input on top */
.otp { position: relative; display: block; width: 100%; max-width: 340px; margin: 6px auto 0; }
/* the input is see through but not opacity 0: iOS (and LINE inside it) shows no Paste menu on an invisible field */
.otp input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 14px; outline: none;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px;
  -webkit-appearance: none; appearance: none; }
.otp input::selection { background: transparent; }
.otp-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.otp-cells i { display: grid; place-items: center; height: 60px; border-radius: 14px; background: var(--c-card); border: 1.5px solid var(--c-line);
  font-style: normal; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--m-base) var(--m-ease), transform 260ms var(--m-spring); }
.otp-cells i.filled { border-color: var(--c-line-strong); transform: translateY(-1px); }
.otp.focus .otp-cells i.cur { border-color: var(--c-maroon); box-shadow: 0 0 0 3px var(--c-maroon-ring); }
.otp.focus .otp-cells i.cur:empty::after { content: ''; width: 2px; height: 26px; background: var(--c-ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.otp.bad .otp-cells { animation: shake 380ms var(--m-ease); }
.otp.bad .otp-cells i { border-color: var(--c-bad); }
.otp.ok .otp-cells i { background: var(--c-green-wash); border-color: var(--c-green); }
/* checking: the six digits rise one after another so the guest sees the code was read and is being checked */
.otp.checking .otp-cells i { border-color: var(--c-line-strong); color: var(--c-ink-soft); animation: otp-wait 1.2s var(--m-ease) infinite; }
.otp.checking .otp-cells i:nth-child(2) { animation-delay: .1s; }
.otp.checking .otp-cells i:nth-child(3) { animation-delay: .2s; }
.otp.checking .otp-cells i:nth-child(4) { animation-delay: .3s; }
.otp.checking .otp-cells i:nth-child(5) { animation-delay: .4s; }
.otp.checking .otp-cells i:nth-child(6) { animation-delay: .5s; }
@keyframes otp-wait { 0%, 50%, 100% { transform: none; background: var(--c-card); } 25% { transform: translateY(-5px); background: var(--c-pink-wash); } }
.otp-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; font-size: var(--t-sub); font-weight: 600; color: var(--c-maroon); }
.otp-status[hidden] { display: none; }
.otp-spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid var(--c-pink-soft); border-top-color: var(--c-maroon); animation: spin .8s linear infinite; }
.otp-status.done { color: var(--c-green-ink); }
.otp-status.done .otp-spin { position: relative; border: 0; background: var(--c-green); animation: none; }
.otp-status.done .otp-spin::after { content: ''; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.otp-tools { display: flex; justify-content: center; gap: 4px 16px; flex-wrap: wrap; margin-top: 4px; }
.otp.checking ~ .otp-tools, .otp.ok ~ .otp-tools { visibility: hidden; }
.otp-tools:not(:has(button:not([hidden]))) { display: none; }

/* is this you */
.match-list { width: 100%; display: grid; gap: 10px; }
.match { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; width: 100%; padding: 12px 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-3);
  text-align: left; background: var(--c-card); cursor: pointer; transition: background var(--m-slow) var(--m-ease), border-color var(--m-slow) var(--m-ease); }
.match .dot { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: var(--c-card); transition: border var(--m-base) var(--m-ease); }
.match b { font-weight: 600; font-size: 16px; }
.match span { font-size: var(--t-fine); color: var(--c-ink-quiet); }
.match[aria-checked="true"] { background: var(--c-pink-wash); border-color: var(--c-pink); }
.match[aria-checked="true"] .dot { border: 6px solid var(--c-maroon); }

/* returning guest: what still needs an answer stands out in gold */
.todo { width: 100%; display: grid; gap: 12px; }
.todo-card { position: relative; width: 100%; padding: 16px 16px 14px; border-radius: var(--r-3); text-align: left;
  background: var(--c-gold-wash); border: 2px solid var(--c-gold); animation: attention 2.4s ease-in-out infinite; }
.todo-card h3 { margin: 0; font-size: 17px; font-weight: 600; text-wrap: balance; }
.todo-card p { margin: 4px 0 12px; font-size: var(--t-fine); color: var(--c-ink-soft); }
.todo-card .pill { display: inline-block; margin-bottom: 6px; padding: 1px 10px; border-radius: 999px; background: var(--c-maroon); color: #fff; font-size: 11.5px; font-weight: 600; }
.todo-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.todo-card .btn { min-height: 46px; font-size: 15px; }
.todo-card .btn:not(.btn-go) { background: var(--c-card); border-color: var(--c-gold-soft); }
@keyframes attention { 0%, 100% { border-color: var(--c-gold); } 50% { border-color: var(--c-gold-soft); } }
.todo-card.soft { animation: none; background: var(--c-card); border: 1.5px solid var(--c-line); }
/* the answer the guest tapped in the email, waiting for one tap here to confirm it (5 Oct 2569) */
.todo-card.mailpick { box-shadow: 0 0 0 2px var(--c-gold), 0 10px 26px rgba(121, 27, 43, .16); }
.todo-card.soft .btn:not(.btn-go) { background: var(--c-fill); border-color: transparent; }
/* consent first: a soft card, a short summary of the notice and a link to all of it. The screen is exactly
   the phone's height, so the summary scrolls inside and the accept button always stays above LINE's toolbar */
@media (max-width: 899px) { .phone[data-view="consent"] { height: 100vh; height: 100dvh; min-height: 0; } }
.view[data-view="consent"] .core { padding-top: 2px; padding-bottom: 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
/* soft and friendly, not a warning: paper card, rain tree pink, the flower, protecting the guest's rights */
.gate-card { animation: none; padding: 14px 16px 10px; background: var(--c-card); border: 1.5px solid var(--c-pink-soft); }
.gate-card::after { content: ''; position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; pointer-events: none;
  background: url(/static/assets/icons/flower.svg) center / contain no-repeat; }
.gate-card .pill { background: var(--c-pink-wash); color: var(--c-maroon); box-shadow: inset 0 0 0 1px var(--c-pink-soft); }
.gate-card h3 { padding-right: 44px; }
.gate-card p { margin-bottom: 8px; }
.gate-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.gate-list li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding-top: 6px; border-top: 1px solid var(--c-line);
  font-size: var(--t-fine); line-height: 1.45; color: var(--c-ink-soft); }
.gate-card p.gate-note { margin: 2px 0 4px; font-size: 12.5px; color: var(--c-green-ink); }
.gate-list b { font-weight: 600; color: var(--c-maroon); }
.gate-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.gate-read { min-height: 36px; border: 0; padding: 0; background: none; color: var(--c-maroon); font: inherit; font-size: var(--t-fine); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate-read.quiet { color: var(--c-ink-quiet); font-weight: 500; }

/* the entry ticket: a QR for the kiosk */
.ticket { width: 100%; border-radius: var(--r-4); background: #fff; border: 1.5px solid var(--c-line); text-align: center; }
.ticket-qr { position: relative; width: 100%; padding: 18px 18px 10px; display: grid; place-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit;
  cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.ticket-qr img, .ticket-qr .ph { width: min(232px, 62vw); height: auto; aspect-ratio: 1; display: block; }
.ticket-qr .ph { border-radius: 12px; background: var(--c-fill); }
.ticket-qr .tap { font-size: var(--t-micro); color: var(--c-ink-quiet); }
.ticket-qr:active img { transform: scale(.98); }
.ticket-qr img:not([hidden]) + .ph { display: none; }
.ticket-cut { position: relative; height: 0; border-top: 1.5px dashed var(--c-line-strong); margin: 0 18px; }
.ticket-cut::before, .ticket-cut::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-bg); border: 1.5px solid var(--c-line); }
.ticket-cut::before { left: -30px; clip-path: inset(0 0 0 50%); }
.ticket-cut::after { right: -30px; clip-path: inset(0 50% 0 0); }
.ticket-info { padding: 12px 18px 16px; display: grid; gap: 2px; }
.ticket-info .who { font-weight: 600; font-size: 16px; }
.ticket-info .code { font-family: 'Anton', var(--f-ui); font-weight: 400; font-size: 26px; letter-spacing: .14em; color: var(--c-maroon); line-height: 1.2; }
.ticket-info .lbl { font-size: var(--t-micro); color: var(--c-ink-quiet); letter-spacing: .06em; }
.how { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.how li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-2); background: var(--c-card); border: 1.5px solid var(--c-line); font-size: var(--t-fine); color: var(--c-ink-soft); }
.how li b { display: block; color: var(--c-ink); font-weight: 600; font-size: var(--t-sub); }
.how svg { width: 30px; height: 30px; fill: none; stroke: var(--c-maroon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.how li.main { background: var(--c-green-wash); border-color: var(--c-green-soft); }
.how li.main svg { stroke: var(--c-green-ink); }
.section-label { align-self: stretch; margin: 8px 0 -6px; text-align: left; font-size: var(--t-fine); font-weight: 600; letter-spacing: .04em; color: var(--c-ink-quiet); }

/* done */
#doneText { max-width: none; white-space: pre-line; }
.done-mark { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--c-green-wash); border: 1.5px solid var(--c-green-soft); display: grid; place-items: center; }
.done-mark svg { width: 36px; height: 36px; fill: none; stroke: var(--c-green-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.view.on .done-mark { animation: pop 520ms var(--m-spring) 80ms both; }
.view.on .done-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 520ms var(--m-ease) 360ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* confetti burst, as in the student app, in the event colours */
.burst { position: absolute; z-index: 5; left: 50%; top: 34%; width: 0; height: 0; pointer-events: none; }
.shard { position: absolute; left: -3px; top: -5px; width: var(--w, 6px); height: var(--h, 10px); border-radius: 2px; opacity: 0;
  animation: fling 1700ms var(--m-spring) both; animation-delay: var(--dl, 0ms); }
@keyframes fling { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0deg); } 10% { opacity: 1; }
  78% { opacity: 1; transform: rotate(var(--a)) translateY(var(--d)) rotate(300deg); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d2)) rotate(460deg); } }

/* the guest's own messages, each editable; a removed one can be brought back until saving */
.msg-list { display: grid; gap: 14px; width: 100%; text-align: left; }
.msg-item { display: grid; gap: 6px; }
.msg-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--t-fine); color: var(--c-ink-quiet); }
.msg-meta b { color: var(--c-ink-soft); font-weight: 600; }
.msg-del { flex: none; border: 0; background: none; padding: 4px 2px; color: var(--c-maroon); font: inherit; font-weight: 600; cursor: pointer; }
.msg-item .well-field textarea { min-height: 120px; }
.msg-item.gone .well-field { opacity: .45; }
.msg-item.gone textarea { text-decoration: line-through; }
.earlier { width: 100%; text-align: left; }
.earlier blockquote { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--c-pink-wash); font-size: var(--t-fine); color: var(--c-ink-soft); white-space: pre-line; }
.promise { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 14px; border-radius: var(--r-2); text-align: left;
  background: var(--c-pink-wash); border: 1.5px solid var(--c-pink-soft); font-size: var(--t-sub); color: var(--c-ink-soft); }
.promise svg, .note.booth svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--c-maroon); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.promise b { font-weight: 600; color: var(--c-maroon); }
.note.booth { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; }

.toast { position: absolute; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 6; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: var(--t-sub); white-space: nowrap;
  transition: opacity var(--m-slow) var(--m-ease), transform var(--m-long) var(--m-spring); }
.toast.on { opacity: .94; transform: translate(-50%, 0); }

/* dialogs: the poster, the privacy notice, confirmations */
dialog { border: 0; padding: 0; color: var(--c-ink); }
dialog::backdrop { background: rgba(28, 3, 8, .62); }
.poster::backdrop { background: rgba(24, 4, 9, .92); }
.poster { background: transparent; max-width: min(94vw, 560px); max-height: 96dvh; overflow: visible; }
.poster-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.poster img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(96dvh - 62px); margin: 0 auto; border-radius: 16px; }
.poster form { margin: 0; }
.poster-close { border: 0; border-radius: 999px; padding: 8px 16px; background: #fff; font-weight: 600; cursor: pointer; }
/* which picture: light pills on the dark backdrop, the chosen one filled */
.pic-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 248, 239, .16); }
.pic-seg button { border: 0; border-radius: 999px; padding: 6px 14px; background: transparent; color: #FFF8EF; font-weight: 600; cursor: pointer; }
.pic-seg button[aria-selected="true"] { background: #FFF8EF; color: var(--c-maroon); }
.sheet { width: min(92vw, 460px); max-height: 86vh; border-radius: var(--r-4); background: var(--c-card); }
.sheet-in { display: flex; flex-direction: column; max-height: 86vh; }
.sheet-body { overflow-y: auto; padding: 22px 22px 14px; }
.sheet h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; }
.sheet h3 { margin: 16px 0 4px; font-size: 15px; font-weight: 600; color: var(--c-maroon); }
.sheet p { margin: 0 0 6px; font-size: var(--t-sub); color: var(--c-ink-soft); line-height: 1.65; }
.sheet .act { padding: 12px 22px 18px; border-top: 1px solid var(--c-line); }
.qr-full { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: #fff; }
.qr-full::backdrop { background: #fff; }
.qr-full-in { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.qr-full img { width: min(86vw, 62dvh, 440px); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.qr-full-code { margin: 0; font-family: 'Anton', var(--f-ui); font-size: 34px; letter-spacing: .14em; color: var(--c-maroon); }
.qr-full-tip { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sub); }
.qr-full .btn { max-width: 320px; }

button:focus-visible, .btn:focus-visible, .chip:focus-visible, .choice:focus-visible, .match:focus-visible { outline: 2.5px solid var(--c-ink); outline-offset: 3px; }

@media (max-height: 700px) {
  .seal { width: 136px; height: 136px; } .puff { width: 108px; height: 108px; }
  .view[data-view="welcome"] .seal { width: 64px; height: 64px; } .view[data-view="welcome"] .seal-face { inset: 5px; }
  .view[data-view="welcome"] .puff { width: 52px; height: 52px; }
  .view[data-view="welcome"] .headline { font-size: 23px; }
  .view[data-view="welcome"] .core { gap: 6px; padding-top: 0; }
  .proof-welcome .proof-row { padding: 5px 0; font-size: 13.5px; }
  .view[data-view="welcome"] .poster-chip { padding: 4px 16px 4px 4px; border-radius: 12px; }
  .view[data-view="welcome"] .poster-chip img { width: 26px; height: 35px; border-radius: 8px; }
  .view[data-view="welcome"] .poster-chip small { display: none; }
  .headline { font-size: 26px; } .ask { font-size: 24px; } .core { gap: 12px; }
  .photo-well { width: 150px; height: 150px; }
  .ticket-qr img, .ticket-qr .ph { width: min(196px, 56vw); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* several people in the photo: the guest taps their own face and sees it zoomed */
.pick { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--c-bg); }
.pick::backdrop { background: var(--c-bg); }
.pick-in { height: 100%; display: flex; flex-direction: column; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); }
.inapp .pick-in { padding-bottom: calc(env(safe-area-inset-bottom) + 66px); }
.pick-head { text-align: center; }
.pick-head h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 300; }
.pick-head p { margin: 0 auto; max-width: 32ch; font-size: var(--t-sub); color: var(--c-ink-soft); }
.pick-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.pick-frame { position: relative; max-width: 100%; max-height: 100%; line-height: 0; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--c-line); cursor: crosshair; }
.pick-frame img { display: block; max-width: 100%; max-height: min(52dvh, 520px); width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.pick-marks { position: absolute; inset: 0; }
.pick-face { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; cursor: pointer;
  border: 2.5px dashed rgba(255, 255, 255, .95); background: transparent; outline: 1.5px solid rgba(43, 10, 16, .35); outline-offset: 0; }
.pick-face.on { border: 3px solid #fff; outline: 3px solid var(--c-maroon); }
.pick-face.out { border-style: dotted; border-color: rgba(255, 255, 255, .6); outline-color: rgba(43, 10, 16, .2); }
.pick-dot { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #fff; background: var(--c-maroon); }
.pick-zoom { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pick-zoom canvas { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--c-green); background: var(--c-fill); }
.pick-zoom span { font-size: var(--t-sub); font-weight: 600; color: var(--c-ink); }
.pick-zoom small { font-weight: 400; color: var(--c-ink-quiet); font-size: var(--t-fine); }
.pick .act { padding-top: 0; }

/* the page is older than the server it talks to: offer a reload */
.stale-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 18px; border-radius: 16px;
  background: #6E1F2E; color: #FBF6EC; font-size: 15px; font-weight: 600; }
.stale-bar button { flex: none; border: 0; border-radius: 12px; padding: 8px 14px; background: #FBF6EC; color: #6E1F2E; font: inherit; cursor: pointer; }

/* the name has no surname: ask before going on */
.surname-ask { display: grid; gap: 10px; width: 100%; }
.surname-ask[hidden] { display: none; }
.surname-ask p { margin: 0; }
.surname-ask .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.surname-ask .btn { min-height: 46px; }

/* a voice message to the professor */
.voice { width: 100%; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-3); background: var(--c-card); border: 1.5px solid var(--c-line); text-align: left; }
.voice-head { display: flex; gap: 12px; align-items: flex-start; }
.voice-head svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--c-maroon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.voice-head b { display: block; font-size: var(--t-sub); color: var(--c-ink); }
.voice-head span { display: block; font-size: var(--t-fine); color: var(--c-ink-quiet); }
.voice-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voice-row[hidden] { display: none; }
.voice-row .btn { width: auto; min-height: 44px; padding: 0 18px; }
.voice-row .btn-text { padding: 0 6px; }
.voice-pick { cursor: pointer; }
.voice-time { flex: 1; font-size: var(--t-sub); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.voice-time b { color: var(--c-ink); font-weight: 600; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-bad); animation: breathe 1.2s var(--m-ease) infinite; }
.voice-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--c-maroon); display: grid; place-items: center; cursor: pointer; }
.voice-play svg { width: 22px; height: 22px; fill: #fff; }
.voice-play .i-pause { display: none; }
.voice-play.on .i-play { display: none; }
.voice-play.on .i-pause { display: inline; }

/* deleting the registration: four calm steps in one sheet, an email code when the login was not made with one */
.del-step { margin: 0 0 4px !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: .02em; color: var(--c-ink-quiet) !important; }
.del-text ul { margin: 4px 0 8px; padding-left: 20px; font-size: var(--t-sub); color: var(--c-ink-soft); line-height: 1.6; }
.del-text b { color: var(--c-ink); }
.del-sheet .pill-field { margin-top: 10px; }
.del-sheet .act .btn-go { min-height: 50px; }
.del-text a.link { color: var(--c-maroon); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* ------------------------------------------------------------------ the address for the professor's reply letter
   (7 Oct 2569): the postal code first, big and numeric; its sub districts as the role chips; the place found shown
   back in green; the rest in the usual fields */
.addr-box { width: 100%; display: grid; gap: 10px; }
.addr-zip input { font-size: 22px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.addr-zip input::placeholder { letter-spacing: 0; font-size: 17px; }
.addr-note { margin: -2px 0 0; font-size: var(--t-fine); color: var(--c-ink-quiet); min-height: 1.4em; }
.addr-note:empty { display: none; }
.addr-note.warn { color: var(--c-gold-ink); font-weight: 500; }
.addr-note .link, .addr-hint .link { border: 0; padding: 0; background: none; color: var(--c-maroon); font-weight: 600; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.addr-subs { gap: 8px; }
.addr-chip { min-height: 44px; padding: 7px 16px 7px 10px; font-size: 14.5px; text-align: left; }
.addr-chip > span:last-child { display: grid; line-height: 1.3; }
.addr-chip small { font-size: 11.5px; font-weight: 400; color: var(--c-ink-quiet); }
.addr-chip[aria-checked="true"] small { color: var(--c-maroon); }
.addr-picked { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; margin: 0; padding: 10px 14px;
  border-radius: var(--r-2); border: 1.5px solid var(--c-green-soft); background: var(--c-green-wash); color: var(--c-green-ink);
  text-align: left; font-size: var(--t-sub); font-weight: 500; line-height: 1.5; animation: enter var(--m-long) var(--m-spring) both; }
.addr-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--c-green); position: relative; }
.addr-ok::after { content: ''; position: absolute; left: 6px; top: 6px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: rotate(-45deg); }
.addr-manual { display: grid; gap: 8px; }
.addr-find { display: grid; gap: 8px; }
.addr-results { display: grid; gap: 6px; }
.addr-hit { display: grid; gap: 1px; width: 100%; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--c-line); background: var(--c-card);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 320ms var(--m-spring), border-color var(--m-base) var(--m-ease); }
.addr-hit b { font-weight: 600; font-size: 15px; }
.addr-hit span { font-size: var(--t-fine); color: var(--c-ink-soft); }
.addr-hit:active { transform: scale(.98); border-color: var(--c-pink); }
.addr-none { margin: 0; font-size: var(--t-fine); color: var(--c-ink-quiet); }
.addr-line textarea { min-height: 78px; padding: 14px 18px; line-height: 1.55; }
.addr-label { margin: 6px 0 -2px; text-align: left; font-size: var(--t-fine); font-weight: 600; letter-spacing: .04em; color: var(--c-ink-quiet); }