@font-face { font-family:"Cormorant Garamond"; src:url("/assets/fonts/cormorant-garamond-variable.ttf") format("truetype"); font-weight:300 700; font-display:swap; }
@font-face { font-family:"Fresh Mango"; src:url("/assets/fonts/fresh-mango-regular.ttf") format("truetype"); font-display:swap; }
:root { --cream:#f8dba3; --paper:#ffe9bd; --white:#fffaf0; --olive:#54611b; --green:#316c4c; --rust:#a9461f; --gold:#dfaa4c; --border:rgba(84,97,27,.32); color:var(--olive); background:var(--cream); font-family:"Cormorant Garamond",Georgia,serif; font-size:20px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { min-width:320px; min-height:100vh; min-height:100dvh; margin:0; background:radial-gradient(circle at 12% 5%,rgba(255,250,240,.78),transparent 28rem),var(--cream); }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:var(--green); }
:focus-visible { outline:4px solid var(--rust); outline-offset:3px; }
.kiosk-header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left)); border-bottom:2px solid var(--border); background:rgba(255,233,189,.94); }
.kiosk-header img { display:block; width:min(290px,52vw); height:auto; }
.connection-status { display:inline-flex; align-items:center; gap:.4rem; padding:.38rem .7rem; border:1px solid var(--green); border-radius:999px; color:var(--green); background:var(--white); font-size:.83rem; font-weight:700; }
.connection-status::before { width:.58rem; height:.58rem; border-radius:50%; background:currentColor; content:""; }
.connection-status.offline { border-color:var(--rust); color:var(--rust); }
.kiosk-shell { width:min(760px,calc(100% - 2rem)); margin:0 auto; padding:clamp(1.5rem,5vw,3.5rem) 0 max(2rem,env(safe-area-inset-bottom)); }
.screen { padding:clamp(1.25rem,5vw,3.25rem); border:2px solid var(--border); background:rgba(255,250,240,.9); box-shadow:12px 12px 0 rgba(223,170,76,.72); }
.eyebrow { margin:0 0 .55rem; color:var(--green); font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:13ch; margin:.1rem 0 .8rem; color:var(--rust); font:400 clamp(3rem,9vw,5.6rem)/.88 "Fresh Mango",Georgia,serif; }
.signup-title { max-width:100%; font-size:clamp(.85rem,5.2vw,2.2rem); white-space:nowrap; }
.signup-title-lead { font-size:.84em; }
.signup-title-name { font-size:1em; }
.screen>p:not(.eyebrow),.intro { max-width:34rem; font-size:1.16rem; }
.city-form,.signup-form { display:grid; gap:.65rem; margin-top:1.7rem; }
.form-field { display:grid; gap:.65rem; }
label { margin-top:.48rem; font-weight:700; }
label span { font-weight:400; }
input[type="text"],input[type="email"],select { width:100%; min-height:62px; padding:.72rem .88rem; border:2px solid rgba(84,97,27,.58); border-radius:4px; color:#334111; background:#fffdf7; font-size:1.1rem; }
input:focus,select:focus { border-color:var(--green); }
select { height:62px; padding-right:3rem; -webkit-appearance:none; appearance:none; background-color:#fffdf7; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M2 2l7 7 7-7' fill='none' stroke='%23316c4c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:18px 12px; line-height:1.2; }
.other-field { margin-top:.15rem; padding:.2rem 0 0 1rem; border-left:4px solid var(--gold); }
.primary-button,.secondary-button { min-height:58px; display:inline-flex; align-items:center; justify-content:center; margin-top:.8rem; padding:.72rem 1.2rem; border:2px solid var(--green); border-radius:4px; color:var(--white); background:var(--green); font-weight:700; }
.primary-button:active { background:var(--olive); }
.secondary-button { min-height:48px; margin:0; color:var(--green); background:transparent; }
button:disabled { cursor:not-allowed; opacity:.45; }
.join-button { margin-top:1.1rem; font-size:1.12rem; }
.consent-row { display:grid; grid-template-columns:34px 1fr; gap:.7rem; align-items:start; margin-top:1rem; padding:1rem; border-left:5px solid var(--gold); background:var(--paper); font-size:.95rem; font-weight:500; }
.consent-row input { width:28px; height:28px; margin:.1rem 0 0; accent-color:var(--green); }
.required-note { display:inline-block; margin-left:.25rem; color:var(--rust); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.privacy-copy { margin:.55rem 0 0; font-size:.82rem; }
.confirmation-screen { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.confirmation-screen h1 { max-width:none; }
.success-mark { width:88px; height:88px; display:grid; place-items:center; margin-bottom:1.2rem; border-radius:50%; color:var(--white); background:var(--green); font:700 3.2rem/1 Georgia,serif; }
.queue-panel,.install-help { margin-top:1.4rem; border:1px solid var(--border); background:rgba(255,250,240,.72); }
.queue-panel.has-pending { border:2px solid var(--rust); }
.queue-panel summary,.install-help summary { min-height:52px; display:flex; align-items:center; padding:.65rem 1rem; color:var(--green); font-weight:700; cursor:pointer; }
.queue-content,.install-help p { padding:0 1rem 1rem; }
.queue-content>p:first-child { margin-top:.25rem; }
.queue-content strong { color:var(--rust); font-size:1.5rem; }
.organizer-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.text-button { min-height:48px; padding:.55rem .3rem; border:0; color:var(--green); background:transparent; font-weight:700; text-decoration:underline; text-underline-offset:.2rem; }
.queue-note { font-size:.82rem; }
.app-status { margin:0 0 1rem; padding:.8rem 1rem; border-left:5px solid var(--gold); background:var(--white); }
.app-status.success { border-color:var(--green); }
.app-status.warning { border-color:var(--rust); }
@media (min-width:700px) and (max-width:1400px) {
  .kiosk-header { min-height:84px; padding:max(.55rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) .55rem max(1.25rem,env(safe-area-inset-left)); }
  .kiosk-header img { width:min(250px,40vw); }
  .kiosk-shell { width:min(94vw,980px); padding:1rem 0 max(1rem,env(safe-area-inset-bottom)); }
  .screen { padding:clamp(1.2rem,3vw,2rem); }
  .signup-title { margin:0 0 .35rem; font-size:clamp(2rem,5.2vw,3.2rem); }
  .intro { margin:.25rem 0 .65rem; }
  .signup-form { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:1.25rem; row-gap:.55rem; margin-top:.7rem; }
  .form-field { gap:.35rem; }
  .form-field label { margin-top:.2rem; }
  .other-field { margin-top:0; padding:.1rem 0 0 1rem; }
  .consent-row,.join-button,.privacy-copy { grid-column:1 / -1; }
  .consent-row { margin-top:.45rem; padding:.75rem; font-size:.9rem; }
  .join-button { width:min(100%,420px); min-height:54px; justify-self:center; margin-top:.35rem; }
  .privacy-copy { margin:.15rem 0 0; text-align:center; }
  .queue-panel { margin-top:.75rem; }
  .queue-panel summary { min-height:46px; }
}
@media (min-width:700px) and (max-height:860px) {
  .kiosk-header { min-height:72px; }
  .kiosk-header img { width:220px; }
  .kiosk-shell { padding:.65rem 0 max(.65rem,env(safe-area-inset-bottom)); }
  .screen { padding:1rem 1.25rem; box-shadow:8px 8px 0 rgba(223,170,76,.72); }
  .signup-title { margin:0 0 .1rem; }
  .intro { margin:.1rem 0 .35rem; font-size:1.02rem; }
  .signup-form { row-gap:.35rem; margin-top:.45rem; }
  .form-field { gap:.2rem; }
  .form-field label { margin-top:.1rem; }
  input[type="text"],input[type="email"],select { min-height:50px; padding:.5rem .75rem; }
  select { height:50px; }
  .consent-row { grid-template-columns:30px 1fr; gap:.55rem; margin-top:.25rem; padding:.55rem .7rem; font-size:.84rem; }
  .consent-row input { width:26px; height:26px; }
  .join-button { min-height:48px; margin-top:.15rem; padding:.5rem 1rem; }
  .privacy-copy { font-size:.72rem; }
  .queue-panel { margin-top:.5rem; }
  .queue-panel summary { min-height:42px; padding:.45rem .8rem; }
}
@media (max-width:560px) { :root{font-size:18px}.kiosk-header{align-items:flex-start;flex-direction:column}.kiosk-header img{width:230px}.kiosk-shell{width:min(100% - 1rem,760px)}.screen{padding:1.2rem;box-shadow:6px 6px 0 rgba(223,170,76,.72)}h1{font-size:clamp(2.8rem,15vw,4.5rem)}.signup-title{font-size:clamp(.85rem,5.2vw,2rem)} }