/* Responsive layout: content width, not operating-system detection. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*, *::before, *::after { box-sizing:border-box; }
img, video, canvas { max-width:100%; }
input, select, textarea { max-width:100%; min-width:0; font:inherit; }
textarea { resize:vertical; }
button, a, input, select, textarea, summary { touch-action:manipulation; }
label, .setting-summary, .appointment-card-info { min-width:0; }
main, .setting-body, .appointment-detail { overflow-wrap:anywhere; }
:focus-visible { outline:2px solid #edcd8b; outline-offset:3px; }
/* Keep the phone flow, including zoom and safe areas. */
.staff-app .wrap { width:100%; min-height:100vh; min-height:100svh; }
.staff-app body .wrap { padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right)); }
.staff-app #dashboard { min-width:0; }
.staff-app #dashboardContent > section { min-width:0; }
.staff-app #dashboard .dashboard-date-actions { min-width:0; width:100%; }
.staff-app #dashboard .dashboard-date-actions label { min-width:0; }
.staff-app #dashboard .dashboard-date-actions input { min-width:0; width:100%; }
.staff-app #dashboard .dashboard-bottom { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.staff-app .daily-menu-body { max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overscroll-behavior:contain; }
.staff-app #loginCard, .staff-app #authLoading { width:100%; max-width:520px; margin-inline:auto; }
.staff-app #dashboard .setting-body textarea { width:100%; }
.staff-app .setting-body label, .staff-app .studio-profile > div { min-width:0; }
.staff-app #dashboard .studio-profile strong { overflow-wrap:anywhere; }
.staff-app #dashboard .daily-heading h1 { overflow-wrap:anywhere; }
@media (pointer:coarse) {
 button, select, summary, .setting-link { min-height:44px; }
 .staff-app #dashboard input, .staff-app #dashboard select,
 body.booking-mode #customer input, body.booking-mode #customer select { font-size:16px; }
}
@media (max-width:359px) {
 .staff-app #dashboard .dashboard-date-actions { flex-wrap:wrap; }
 .staff-app #dashboard .dashboard-date-actions label { flex:1 1 100%; }
 .staff-app #dashboard .dashboard-date-actions button { flex:1; }
 .staff-app #dashboard .daily-stats { grid-template-columns:minmax(0,1fr); }
 .staff-app .top .customer-preview { white-space:normal; text-align:end; max-width:90px; }
 .staff-app #dashboard .appointment-main-actions { flex-wrap:wrap; }
 .staff-app #dashboard .appointment-main-actions > * { flex:1 1 100px; }
}
/* Tablet: use available width and two settings columns. */
@media (min-width:700px) {
 .staff-app body .wrap { max-width:1440px!important; padding:0 clamp(24px,3vw,48px) 120px!important; }
 .staff-app body .top { padding-block:26px; gap:20px; }
 .staff-app body .top .staff-logo { width:220px; max-width:50%; }
 .staff-app #dashboard { width:100%; }
 .staff-app #dashboard .daily-heading h1 { font-size:42px; }
 .staff-app #dashboard .daily-stats { gap:20px; }
 .staff-app #dashboard .daily-stat { padding:24px; min-height:116px; }
 .staff-app #dashboard .settings-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
 .staff-app #dashboard .dashboard-setting { min-width:0; }
 .staff-app #dashboard .settings-heading { margin-top:14px; }
 .staff-app #dashboard .dashboard-bottom { max-width:none; gap:20px; padding-inline:clamp(24px,8vw,120px); }
 .staff-app #dashboard .dashboard-date-actions { max-width:600px; }
 .staff-app #dashboard .appointment-card:not(.daily-featured) .appointment-main { grid-template-columns:76px minmax(0,1fr); padding:22px; }
 .staff-app #dashboard .appointment-card:not(.daily-featured) .appointment-main-actions { grid-column:2; justify-content:flex-start; }
 .staff-app #dashboard .setting-body { padding:22px; }
}
/* Desktop: an in-flow sticky sidebar never covers page content. */
@media (min-width:1100px) {
 .staff-app body .wrap { padding-bottom:48px!important; }
 .staff-app #dashboardContent { display:grid; grid-template-columns:210px minmax(0,1fr); gap:32px; align-items:start; }
 .staff-app #dashboardContent > section { grid-column:2; grid-row:1; }
 .staff-app #dashboard .dashboard-bottom { position:sticky; top:24px; bottom:auto; left:auto; right:auto; transform:none; grid-column:1; grid-row:1; width:100%; max-width:none; display:flex; flex-direction:column; justify-content:flex-start; align-self:start; align-items:stretch; gap:8px; padding:12px; margin:16px 0 0; border:1px solid #454b3e; border-radius:18px; box-shadow:none; }
 .staff-app #dashboard .dashboard-bottom button { flex:none; display:flex; justify-content:flex-start; align-items:center; gap:14px; min-height:58px; padding:14px 16px; border-radius:12px!important; text-align:start; }
 .staff-app #dashboard .dashboard-bottom button.primary { border:1px solid #75623d; border-radius:12px!important; background:#222b21!important; }
 .staff-app #dashboard .dashboard-bottom button::before { flex:none; }
 .staff-app #dashboard .daily-heading { margin-top:16px; }
 .staff-app #dashboard .daily-stats { max-width:none; }
 .staff-app #dashboard .daily-stat strong { font-size:38px; }
 .staff-app #dashboard .appointment-card:not(.daily-featured) .appointment-main { grid-template-columns:76px minmax(0,1fr) auto; align-items:center; }
 .staff-app #dashboard .appointment-card:not(.daily-featured) .appointment-main-actions { grid-column:3; grid-row:1; margin:0; width:auto; }
 .staff-app #dashboard .appointment-main-actions .card-call, .staff-app #dashboard .appointment-main-actions .card-details { min-height:44px; }
 .staff-app #dashboard .daily-featured .appointment-main { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
 .staff-app #dashboard .daily-featured .appointment-card-info { grid-column:1; grid-row:1; }
 .staff-app #dashboard .daily-featured .appointment-time { grid-column:2; grid-row:1; font-size:32px; }
 .staff-app #dashboard .daily-featured .appointment-main-actions { grid-column:1/-1; grid-row:2; justify-content:flex-start; gap:16px; }
 .staff-app #dashboard .daily-featured .appointment-main-actions > * { width:auto; min-width:150px; }
}
/* Booking: wider forms and service selection on tablet/desktop. */
@media (min-width:700px) {
 html:not(.staff-app) body.booking-mode .wrap { width:100%; max-width:960px; margin-inline:auto; }
 html:not(.staff-app) body.booking-mode .top { max-width:none; }
 html:not(.staff-app) body.booking-mode #customer { max-width:none; padding-top:360px; padding-top:clamp(280px,40vh,420px); }
 html:not(.staff-app) body.booking-mode #customer .card { padding:32px; }
 html:not(.staff-app) body.booking-mode #customer .services { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
 html:not(.staff-app) body.booking-mode #customer .service { min-width:0; }
 html:not(.staff-app) body.booking-mode #customer .time-chips { grid-template-columns:repeat(4,minmax(0,1fr)); }
 html:not(.staff-app) body.booking-mode #customer .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html:not(.staff-app) body.booking-mode .wizard-top { inset-inline:32px; }
}
@media (max-height:500px) and (orientation:landscape) {
 html:not(.staff-app) .hero { min-height:480px; height:auto; }
 html:not(.staff-app) body.booking-mode #customer { padding-top:180px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto!important; }
 *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}