/* A single close/remove treatment throughout the portal. */
.sheet .sheethead .close{color:#b50927;font-weight:900;font-size:34px;background:#fff;border:1px solid #e4cbd0;display:grid;place-items:center;width:44px;height:44px;line-height:1;padding:0}
.bk-selected-guests .cp-remove{color:#b50927;font-weight:900;background:#fff;border-radius:4px}
.menu .menu-profile-status,.reference-nav .menu-profile-status{display:block;width:100%;margin:10px 0 0;padding:12px 16px;background:#f6f2e8;border:1px solid #d7caab;border-radius:8px;text-align:left;color:var(--navy);line-height:1.6}
.menu-profile-heading{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:800}
.menu-profile-heading>b{font-size:24px;color:#8a7039}
.menu-profile-current{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.menu-profile-current>strong{font-size:12px;background:#75633c;color:#fff;border-radius:20px;padding:2px 10px}
.directory-add{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;margin:14px 0 18px;border:1px solid #ae9860;background:#fff;color:#70592c;border-radius:6px;min-height:46px;font-size:16px;font-weight:800}
.directory-add>span{font-size:22px}
.companion-registration,.photo-editor{padding:20px 18px 28px;max-width:560px;margin:auto}
.companion-registration label{margin:12px 0 2px;font-size:15px}.companion-registration label small{font-size:11px;margin-left:6px;color:#876e39}.companion-registration .field{margin-bottom:8px;font-size:16px;min-height:46px}.companion-registration .bk-note,.photo-editor .bk-note{font-size:12px;line-height:1.8}
.reference-body .reference-photo-overlay{position:absolute;display:block;left:32%;top:3.4%;width:36%;aspect-ratio:1;border-radius:50%;background:var(--paper);border:0;padding:0;overflow:visible;z-index:1}
.reference-body .reference-photo-overlay .own-photo{display:block;position:static;width:100%;height:100%;object-fit:cover;border-radius:50%;transform:none;mix-blend-mode:normal}
.reference-photo-overlay .own-public-photo{border-radius:50%}.own-photo{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.reference-body.reference-checkin .reference-photo-overlay{top:29.5%}
.photo-edit-badge{display:grid;place-items:center;position:absolute;right:0;bottom:0;background:#fff;color:#80682d;border:1px solid #cbbd98;border-radius:50%;width:34px;height:34px;font-size:25px;box-shadow:0 2px 6px #0002}
.photo-file-label{position:relative;display:block;text-align:center;padding:13px 12px;border:1px solid #ab945b;border-radius:6px;background:#fff;color:#715b30;font-weight:800;font-size:16px;cursor:pointer;overflow:hidden}
.photo-file-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.photo-file-label:focus-within{outline:3px solid #1769a0;outline-offset:3px}
.photo-crop-stage{width:min(260px,100%);aspect-ratio:1;margin:24px auto 10px;background:#e9e5dc;border-radius:50%;overflow:hidden;outline:3px solid #c5b58c;outline-offset:4px}
#photoCropCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.photo-drag-hint{text-align:center;font-size:12px;color:#71664e;margin:12px 0 20px}
.photo-controls label{display:flex;justify-content:space-between;font-size:14px;color:#4c5965}.photo-controls input[type=range]{width:100%;min-height:34px;margin:3px 0 10px;accent-color:#816c3b}
.photo-reset{display:block;margin:0 auto 16px;padding:8px 12px;min-height:40px;background:#fff;border:1px solid #d6cdb6;border-radius:5px;color:#6d5c36;font-size:13px}
.photo-privacy-note{background:#eee9dc;color:#5c533f;padding:12px;border-radius:6px;font-size:12px;line-height:1.8}.photo-editor .bk-primary:disabled{opacity:.45;cursor:default}

/* Keep the underlying page visible at the left of the menu. */
.menu{padding:8px 16px 16px;border-radius:12px 0 0 12px}
.menu .menu-heading,.reference-nav .menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 6px 12px;border-bottom:1px solid #eee;color:var(--navy);font-size:15px;background:#fff}
.menu .menu-close,.reference-nav .menu-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid #e4cbd0;border-radius:50%;background:#fff;color:#b50927;font-size:34px;font-weight:900;line-height:1;text-align:center;box-shadow:0 2px 5px #45232a12}
.menu .menu-close:focus-visible,.reference-nav .menu-close:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.reference-nav{margin-left:48px;padding:8px 16px 16px;border-radius:12px 0 0 12px;box-shadow:-5px 5px 18px #09285212}
.member-view .reference-nav .menu-heading{background:var(--paper)}
@media(max-width:849px){.menu{left:auto;right:max(0px,calc((100vw - 560px)/2));transform:none;width:min(512px,calc(100% - 48px))}}

/* High-contrast reservation filters and explicit selected state. */
.booking-view .rs-tabs{grid-template-columns:1fr 1.2fr 1.65fr 1.4fr;gap:4px;border:0}
.booking-view .rs-tabs button{display:flex;align-items:center;justify-content:center;gap:0;min-height:44px;padding:8px 2px;border:1px solid #64758a;border-radius:7px;background:#fff;color:#062852;font-size:13px;font-weight:800;line-height:1.4;white-space:nowrap}
.booking-view .rs-tabs button.active{background:#062852;color:#fff;border:2px solid #062852;font-weight:800}
.booking-view .rs-tabs button.active:before{content:none}
.booking-view .rs-tabs button:focus-visible{outline:3px solid #b50927;outline-offset:3px}
.booking-view .rs-status{background:#062852;color:#fff;font-weight:800;font-size:13px;padding:5px 9px}
.booking-view .rs-status.visited{background:#e7eeea;color:#24513c}
.booking-view .rs-status.cancelled{background:#f5e7e8;color:#9a1230}
@media(min-width:700px){.booking-view .rs-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.booking-view .rs-tabs button{font-size:14px}}

/* Compact monthly overview keeps reservations within easy reach. */
.booking-view .rs-summary{padding:8px 10px}
.booking-view .rs-month-heading{gap:6px}
.booking-view .rs-month-heading>div{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.booking-view .rs-month-heading small{font-size:10px;color:#665b43;letter-spacing:0}
.booking-view .rs-month-heading h3{font-size:18px;line-height:1.3;margin:0}
.booking-view .rs-month-heading>button{width:44px;height:44px;flex-shrink:0;font-size:25px}
.booking-view .rs-counts{margin:4px 0 0}
.booking-view .rs-counts button{padding:3px 0;min-height:44px}
.booking-view .rs-counts button>span{font-size:12px;color:#615b4e;line-height:1.3}
.booking-view .rs-counts strong{font-size:23px;line-height:1.15}
.booking-view .rs-counts strong small{font-size:12px}
.booking-view .rs-summary>p{margin:5px 0 0;font-size:10px;line-height:1.4;color:#615b4e}

/* Reserve the mobile viewport for the booking task and time list. */
@media(max-width:699px){
.sheet.booking-flow{position:fixed;inset:0;width:100%;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
.booking-flow .sheethead{min-height:56px;padding:5px 12px;padding-top:max(5px,env(safe-area-inset-top))}
.booking-times-view #panelBody{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.booking-times-view #panelBody>details,.booking-times-view .bk-datebar,.booking-times-view .bk-selection,.booking-times-view #panelBody>.bk-note{flex-shrink:0}
.booking-times-view .bk-times{flex:1;min-height:180px}
.booking-times-view .bk-time-main{display:flex;flex-direction:column;min-height:0}
.booking-times-view .bk-slot-list{flex:1;min-height:0;height:auto}
.booking-times-view .bk-slot-toolbar{height:48px;flex-shrink:0;padding:2px 10px}
.booking-times-view .bk-hours{padding-top:48px}
.booking-times-view .bk-datebar{height:62px}
.booking-times-view .bk-dates{padding:4px 8px}
.booking-times-view .bk-dates button{height:52px}
.booking-times-view .bk-selection{position:static;display:flex;align-items:center;gap:8px;padding:7px 12px}
.booking-times-view .bk-selection[hidden]{display:none}
.booking-times-view .bk-selection>div{flex:1;display:block;margin:0}
.booking-times-view .bk-selection>div>button{display:block;min-height:28px;margin-top:2px}
.booking-times-view .bk-selection>.bk-primary{width:88px;flex-shrink:0;min-height:44px;padding:8px}
.booking-times-view #panelBody>.bk-note{font-size:10px;line-height:1.4;margin:4px 8px}
.booking-times-view .bk-controls{padding:8px 12px}
.booking-times-view .bk-courses{margin-bottom:6px}
.booking-times-view .bk-courses button{height:44px;font-size:17px}
}
.bk-condition-panel{border-bottom:1px solid #e9e8e5;background:#fff}
.bk-condition-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:6px 12px;cursor:pointer;list-style:none;color:#062852;font-size:12px;font-weight:700}
.bk-condition-panel>summary::-webkit-details-marker{display:none}
.bk-condition-panel>summary b{flex-shrink:0;text-decoration:underline}
.bk-condition-panel>summary b:after{content:' ▾'}
.bk-condition-panel[open]>summary b:after{content:' ▴'}

/* Compact party-size circles with a 44px touch target. */
.booking-view .bk-people{width:44px;height:44px;min-width:44px;max-width:44px;aspect-ratio:1;justify-self:center;font-size:21px;line-height:1}

/* Tight calendar rows retain readable dates and availability counts. */
@media(max-width:699px){
.booking-flow:not(.booking-times-view) .bk-controls{padding:8px 16px}
.booking-flow:not(.booking-times-view) .bk-courses{margin-bottom:7px}
.booking-flow:not(.booking-times-view) .bk-courses button{height:44px;font-size:18px}
.booking-flow:not(.booking-times-view) .bk-filters label>span{margin-top:3px}
.booking-flow .bk-months{padding:0 16px 6px;gap:6px}
.booking-flow .bk-months button{min-width:0;min-height:44px;padding:6px 3px}
.booking-flow .bk-calendar-title{padding:7px 16px 3px}
.booking-flow .bk-calendar{padding:2px 12px 0;gap:2px}
.booking-flow .bk-weekday{padding:3px 0;font-size:14px}
.booking-flow .bk-day{min-height:50px;padding:2px 0;gap:1px;font-size:20px;line-height:1.2}
.booking-flow .bk-day small{padding:2px 5px;font-size:11px;line-height:1.3}
.booking-flow .bk-calendar+.bk-note{margin:5px 12px;font-size:11px}
}

/* Align occupied and available slots at the same compact size. */
.booking-view .bk-seat,.booking-view .bk-avatar,.booking-view .bk-guest{width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;aspect-ratio:1;justify-self:center}
.booking-view .bk-guest{font-size:18px}
.booking-view .bk-slot{min-height:60px;padding-top:7px;padding-bottom:7px}
.booking-view .bk-slot-main{row-gap:3px}
/* Larger hour labels balance the compact slot controls. */
.booking-times-view .bk-hours{flex-basis:60px}
.booking-times-view .bk-hours button{font-size:16px;font-weight:800;white-space:nowrap;padding:0 2px}
.booking-times-view .bk-calendar-back{flex-basis:60px}
/* Reserve a same-row status column instead of an extra full-booking line. */
.booking-view .bk-slot-main{grid-template-columns:repeat(4,minmax(0,1fr)) 24px;column-gap:4px;row-gap:0}
.booking-view .bk-full{grid-column:5;grid-row:1;align-self:center;justify-self:end;margin:0;font-size:12px;font-weight:700;line-height:1.4}
.booking-view .bk-people,.booking-view .bk-seat,.booking-view .bk-avatar,.booking-view .bk-guest{width:100%;min-width:0;height:auto;min-height:0;aspect-ratio:1}
/* Desktop calendar: fit the month while preserving the mobile layout. */
@media(min-width:700px){
.sheet.booking-flow:has(.bk-calendar){height:auto;max-height:calc(100dvh - 32px)}
.booking-flow:has(.bk-calendar) #panelBody{flex:0 1 auto;padding-bottom:10px}
.booking-flow:has(.bk-calendar) .sheethead{min-height:56px;padding:5px 18px}
.booking-flow:has(.bk-calendar) .bk-controls{padding:10px 24px 8px}
.booking-flow:has(.bk-calendar) .bk-courses{margin-bottom:8px}
.booking-flow:has(.bk-calendar) .bk-courses button{height:44px;font-size:20px}
.booking-flow:has(.bk-calendar) .bk-filters label>span{height:40px;margin-top:3px}
.booking-flow:has(.bk-calendar) .bk-months{padding:0 24px 8px;gap:8px}
.booking-flow:has(.bk-calendar) .bk-months button{min-height:38px;padding:6px 5px}
.booking-flow:has(.bk-calendar) .bk-calendar-title{padding:8px 24px 4px;font-size:17px}
.booking-flow:has(.bk-calendar) .bk-calendar{padding:2px 20px 0;gap:2px}
.booking-flow:has(.bk-calendar) .bk-weekday{padding:3px 0;font-size:15px}
.booking-flow:has(.bk-calendar) .bk-day{min-height:clamp(44px,calc((100dvh - 390px)/6),56px);padding:2px 0;gap:1px;font-size:22px;line-height:1.1}
.booking-flow:has(.bk-calendar) .bk-day small{font-size:11px;padding:1px 7px;line-height:1.1}
.booking-flow:has(.bk-calendar) .bk-note{margin:5px 18px;font-size:11px}
}