/* Shared mobile controls. Keep the close row outside the scrolling sheet. */
#modal{--sheet-top: max(calc(env(safe-area-inset-top) + 12px), calc(var(--visual-top, 0px) + 12px));position: fixed;inset: var(--sheet-top) 0 auto;margin: 0 auto;width: calc(100% - 24px);max-width: 456px;height: auto;max-height: calc(min(100dvh, var(--visual-height, 100dvh)) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);padding: 0;overflow: hidden;border: 1px solid var(--line);border-radius: var(--radius-card)}
#modal[open]{display:flex;flex-direction:column}
#modal .sheet-toolbar{display:flex;align-items:center;gap:var(--space-3);flex:none;padding:var(--space-3) var(--space-3) var(--space-2);background:var(--bg)}
#modal .modal-close, #modal .modal-back, .is-staff .staff-member-head .remove-member{position:static;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);flex:none}
#modal .modal-close{margin-left:auto}
#modal .sheet-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:var(--space-5);padding:0 var(--space-6) var(--space-6)}
#modal .sheet-content>.eyebrow{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-small)}
#modal .sheet-content>h2{padding:0}
#modal .sheet-feedback:not([hidden]){margin:0 0 var(--space-5)}
/* A recognisable refresh action remains visible as the page scrolls. */
#app-update{position:sticky;top:calc(env(safe-area-inset-top) + 12px);z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:0 0 var(--space-6);padding:var(--space-5);border-radius:var(--radius-card);background:var(--attention);color:var(--on-attention);border:1px solid var(--attention)}
#app-update[hidden]{display:none}
#app-update>div{flex:1 1 180px;min-width:0}
#app-update strong{display:block;font-size:var(--text-body);line-height:1.4}
#app-update p{margin:6px 0 0;font-size:var(--text-small);line-height:1.6}
#app-update button{flex:1 0 auto;min-height:44px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);background:var(--on-attention);color:var(--ink);font-size:var(--text-small);font-weight:600;line-height:1.4}
#app-update button:disabled{opacity:.65}
/* One labelled checkbox per drink, shared with the owner-maintained menu. */
#drinks-form{gap:var(--space-5)}
#drinks-form .drink-instructions{margin:0;font-size:var(--text-small);color:var(--muted)}
.drink-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);border:0;margin:0;padding:0;min-width:0}
.drink-checklist legend{padding:0 0 var(--space-3);font-size:var(--text-small);font-weight:600}
#drinks-form .drink-check{position:relative;display:flex;align-items:center;gap:14px;min-height:60px;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);cursor:pointer}
.drink-check input{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.drink-check>span{flex:1;min-width:0;line-height:1.5;overflow-wrap:break-word}
.drink-check strong{display:block;font-size:var(--text-body);font-weight:500}
.drink-check small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
#drinks-form .drink-check:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}
#drinks-form .drink-check:has(input:checked) small{color:var(--line)}
#drinks-form .drink-check:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.drinks-save-bar{position:static;background:var(--bg);padding:var(--space-3) 0 var(--space-4);margin-bottom:-4px;border-top:1px solid var(--line);z-index:1}
#drinks-form .drinks-save-bar p{font-size:var(--text-small);color:var(--muted);margin:0 0 10px}
#drinks-form .drinks-save-bar .primary{margin:0}
/* Phone trial: one quiet dismiss control, flat surfaces and a first-screen QR. */
#modal .modal-close,#modal .modal-back,.is-staff .staff-member-head .remove-member{background:var(--surface);color:var(--ink);box-shadow:none}
#modal .modal-close:focus-visible,#modal .modal-back:focus-visible,.is-staff .staff-member-head .remove-member:focus-visible{outline:2px solid var(--muted)!important;outline-offset:2px}
.is-welcome .shell{background:var(--bg)}
.welcome{background:var(--bg) url('/brand/welcome-background.jpg') center center / cover no-repeat}
.welcome-actions{background-image:none}
.member-qr-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);width:100%;min-height:76px;padding:18px var(--space-5);margin:0;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);text-align:left}
.member-qr-card strong,.member-qr-card small{display:block}
.member-qr-card strong{font-size:var(--text-section)}
.member-qr-card small{margin-top:var(--space-1);color:var(--muted);font-size:var(--text-small)}
.card-identity{padding-bottom:var(--space-2)}
.is-member .card-actions{position:static}
#bookings-requests.has-requests{border:0;color:var(--ink);background:var(--surface)}
#bookings-requests.has-requests[aria-pressed=true]{background:var(--ink);color:var(--bg)}
#bookings-requests.has-requests span{background:var(--attention);color:var(--on-attention)}
.reservation-diary .booking-night-status.is-closed{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.reservation-diary .booking-night-status.is-closed strong{color:var(--ink)}
.visit-work-card .tags:has(.fine:only-child){display:block}
.visit-work-card .tags>.fine{margin:0;max-width:none}
.visit-arrival{padding:var(--space-3) 14px;border-radius:var(--radius-control);background:var(--bg);color:var(--ink);font-size:var(--text-small);line-height:1.5;margin:var(--space-3) 0}
.visit-receipt .receipt-drinks{display:block;width:100%;min-height:48px;border-radius:var(--radius-control);background:var(--ink);color:var(--bg);margin:var(--space-3) 0 0;padding:var(--space-3)}
.visit-receipt .receipt-close{display:grid;place-items:center;align-self:flex-start}
.visit-receipt .receipt-close svg{width:20px;height:20px}
.sheet-pending{margin:0 0 var(--space-4)}
.card-link-backup>summary{min-height:44px;cursor:pointer;font-size:var(--text-small);color:var(--muted)}
.guest-flags{display:grid;gap:var(--space-2);padding:var(--space-3) 0}
.guest-flag{display:inline-block;margin:6px 6px 6px 0;padding:5px 9px;border-radius:var(--radius-small);background:var(--attention);color:var(--on-attention);font-size:var(--text-meta)}
.booking-match{border:0;padding:0;color:var(--muted)}
/* One spacing scale for service, calendar and owner screens. */
.is-staff .owner-block{margin-top:var(--space-8);padding-top:var(--space-6)}
.is-staff .shift-card{padding:var(--space-5)}
.is-staff .shift-card-heading{margin-bottom:var(--space-4)}
.is-staff .shift-card-heading h2{padding-top:0}
.calendar-tools .calendar-close{border:1px solid var(--line)}
.calendar-summary .is-closed strong{color:var(--ink)}
.calendar-summary button.config-row{width:100%;text-align:left;min-height:64px}
.closure-reopen{border-top:1px solid var(--line);margin-top:var(--space-6);padding-top:var(--space-6)}
.closure-reopen h3{margin:0 0 var(--space-3);font-size:var(--text-section)}
.closure-reopen p{font-size:var(--text-small);line-height:1.6;color:var(--muted)}
.closure-reopen button{width:100%;margin-bottom:0}
#modal .sheet-content>h2{font-size:var(--text-title);line-height:1.2;margin:0 0 var(--space-6);overflow-wrap:break-word}
#modal :is(input[type=date],input[type=month],input[type=time],select){min-width:0;max-width:100%;font-size:var(--text-body)}
#modal .booking-actions{gap:var(--space-3)}
.is-staff .booking-nav a{min-width:0;min-height:48px;display:flex;justify-content:center;align-items:center;padding:var(--space-2);font-size:var(--text-small)}
/* Planned shifts, recorded attendance and approved time off stay distinct. */
.rota-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding:0;min-width:0}
/* Keep the month's scrollable date strip from widening the entire page. */
.rota-page>*{min-width:0;max-width:100%}
.rota-page>.owner-back{margin-bottom:-12px}
.rota-page>h1{font-size:var(--text-title);line-height:1.2;margin:0;letter-spacing:-.035em}
.rota-selected-day{margin-top:var(--space-3)}
.rota-selected-day>h3{margin-top:0}
.rota-page h3{font-size:var(--text-body);line-height:1.4;margin:var(--space-5) 0 var(--space-3)}
.rota-page h2{font-size:var(--text-section);line-height:1.4;margin:0 0 var(--space-4)}
.rota-page .shift-card-heading h2{margin:0}
.rota-page .rota-selected-day>h3{margin-top:0}
.rota-page .fine{margin:var(--space-3) 0 0;font-size:var(--text-small);line-height:1.6;color:var(--muted)}
.rota-page #rota-my-shift:empty{display:none}
.my-shift{border:1px solid var(--line)}
.my-shift .shift-state{font-size:var(--text-section);line-height:1.5;margin:0}
.my-shift .entry-primary{margin:var(--space-4) 0 0;width:100%;min-height:48px}
.rota-month-heading{display:grid;gap:var(--space-3)}
.rota-month{display:block;min-width:0;width:100%;max-width:100%;margin:0}
.rota-month>span{font-size:var(--text-small);color:var(--muted)}
.rota-month input{width:100%;min-width:0;min-height:44px;font-size:var(--text-body);padding:10px var(--space-3);border-radius:var(--radius-control);background:var(--bg)}
.rota-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,4rem),1fr));gap:var(--space-3);color:var(--muted);font-size:var(--text-small);line-height:1.5}
.rota-totals strong{display:block;color:var(--ink);font-size:var(--text-title);line-height:1.2;margin-bottom:6px;font-weight:500}
.rota-person{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-width:0;width:100%;min-height:72px;padding:var(--space-4) 0;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink)}
.rota-person:last-child{border-bottom:0}
.rota-person>span{min-width:0;flex:1}
.rota-person strong,.rota-person small{display:block;overflow-wrap:break-word;line-height:1.5}
.rota-person strong{font-size:var(--text-body);font-weight:500}
.rota-person small{font-size:var(--text-small);color:var(--muted);margin-top:var(--space-1)}
.rota-person .pending-label{color:var(--attention)}
.rota-person>.ui-icon{flex:none}
.rota-month-person{padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.rota-month-person:last-child{border-bottom:0;padding-bottom:0}
.rota-month-person h3{margin:0 0 var(--space-3)}
#attendance-correction{margin-top:var(--space-6);border-top:1px solid var(--line);padding-top:var(--space-6)}
#attendance-correction h3,#attendance-correction p{margin:0}
.private-note{white-space:pre-wrap;overflow-wrap:break-word;background:var(--surface);padding:var(--space-4);border-radius:var(--radius-control)}
@media(max-width:360px){.is-staff .shift-card{padding:var(--space-4)}
.rota-page{gap:var(--space-5)}
.rota-month{width:100%;margin:0}
.rota-totals{gap:var(--space-2)}
}
.email-entry .entry-content{padding-top:var(--space-6)}
.email-entry h1{margin-bottom:var(--space-5)}
.email-entry form,#modal #email-start-form,#modal #email-code-form{display:grid;gap:var(--space-5);min-width:0}
.email-entry label,#email-start-form label,#email-code-form label{min-width:0}
.email-entry input,#email-start-form input,#email-code-form input{font-size:var(--text-body);max-width:100%;box-sizing:border-box}
#email-code-form input{font-size:var(--text-heading);letter-spacing:.3em;font-variant-numeric:tabular-nums}
.email-entry .fine{margin:var(--space-5) 0;line-height:1.5}
.email-entry .entry-link{display:block;margin-top:var(--space-4);text-align:center}
.email-entry .entry-error{margin:0;overflow-wrap:break-word}
.email-entry button,.email-entry a{touch-action:manipulation}
/* Fixed bars reserve their measured height on every staff screen. */
.is-staff #app{padding-bottom:calc(var(--bottom-bar-height) + var(--space-6) + env(safe-area-inset-bottom));min-width:0}
.is-staff .service,.is-staff .owner,.is-staff .reservation-diary{padding-bottom:0}
.is-staff .service-bottom nav a.active{font-weight:700;text-decoration:underline;text-underline-offset:6px}
.is-staff .topbar{gap:var(--space-4);justify-content:space-between}
.is-staff .topbar .staff-name{min-width:0;max-width:65%;overflow-wrap:break-word}
.is-staff .service-heading{align-items:center;flex-wrap:wrap;gap:var(--space-3)}
#refresh-shifts{border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3)}
#modal .sheet-content{padding-bottom:max(var(--space-6),env(safe-area-inset-bottom))}
#modal .sheet-content>:last-child{margin-bottom:0}
#modal .booking-fields-row,#modal .calendar-form-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.is-staff .owner-hub{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.card-bento{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
.progress-heading{flex-wrap:wrap}
.progress-heading .dots{max-width:100%}
.tonight-stack .tonight-item{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
.preference-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.time-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.sheet-tabs button[aria-pressed=true],.device-picker button[aria-pressed=true]{font-weight:700;text-decoration:none}
.keyboard-open .booking-nav{position:static;transform:none;max-width:100%;margin-top:var(--space-6)}
.keyboard-open .service-bottom{position:static;transform:none}
.is-staff .toast{bottom:calc(var(--bottom-bar-height) + var(--space-4))}

/* Sheet-specific layout belongs to the shared mobile shell. */
#modal.qr-sheet{inset:var(--sheet-top) 0 max(12px,env(safe-area-inset-bottom));margin:auto;height:fit-content;padding:0}
#modal .qr-caption{max-width:280px;margin:var(--space-4) auto 0}
#modal #dialog-title:focus{outline:none}
#seat-form .optional-booking-fields{margin:0}
#seat-form .optional-booking-fields summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--muted)}
#seat-form .optional-booking-fields textarea{margin-top:var(--space-2)}
#seat-date-label{margin:0}

.welcome-actions{max-width:360px;margin-inline:auto}
.welcome-login{padding-inline:var(--space-4)}
.welcome-login .welcome-art{display:none}
.welcome-login .welcome-actions{position:relative;background:var(--bg);padding:var(--space-5);border-radius:var(--radius-card);width:100%;margin:var(--space-5) auto}
.welcome-login .welcome-actions form{display:grid;gap:var(--space-4)}
.welcome-login .welcome-actions .entry-back{position:static;margin-bottom:var(--space-3)}
.welcome-login .welcome-actions h2{font-size:var(--text-title)}
.welcome-login .welcome-actions p{margin:var(--space-3) 0;line-height:1.5}
.welcome-login .welcome-actions a.entry-link{display:block;min-height:44px;padding:var(--space-3) 0;text-align:center}
.device-help{margin-bottom:var(--space-4)}
.device-help summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--muted);font-size:var(--text-small)}
.card-bento .experience-number{font-size:var(--text-title);margin:var(--space-4) 0 var(--space-3)}

.card-bento .card-section-label{min-height:2.9em;align-items:flex-start}
.member-details dd{font-size:var(--text-small);line-height:1.5}
#calendar-day{margin-bottom:0}
#modal .calendar-programme .tonight-title{margin-top:0}