:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#172e3d;background:#e9eef2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d9793c;outline-offset:3px}.shell{max-width:520px;min-height:100dvh;margin:auto;background:#f6f7f9;box-shadow:0 0 60px #18304712}header{height:88px;background:#142a3a;color:white;display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:3px solid #eb8245}header strong{font-size:20px}header small{display:block;color:#bccbd4;font-size:12px;margin-top:2px}.brand{font-size:34px;font-weight:850;letter-spacing:-3px}.dot{color:#eb8245}.tag{margin-left:auto;font-size:11px;border:1px solid #ffffff30;border-radius:20px;padding:6px 10px;color:#d2dce3}main{padding:26px 22px 120px;min-height:75vh}h1{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin:8px 0 12px}h2{font-size:18px;margin:28px 0 12px}p{line-height:1.6}.muted,.eyebrow{color:#677987;font-size:14px}.eyebrow{font-size:12px;letter-spacing:1px;text-transform:uppercase}.hero{background:#19394a;color:white;padding:24px;border-radius:20px;margin:24px 0}.hero .muted{color:#c4d4df}.hero .time{font-size:38px;font-weight:750;letter-spacing:-1px;margin:12px 0}.pill{display:inline-block;font-size:12px;padding:5px 9px;border-radius:8px;background:#edf2f6;color:#476173}.hero .pill{background:#ffffff18;color:white}.card{padding:18px;background:white;border:1px solid #e0e6ea;border-radius:14px;margin:10px 0}.card h3{margin:3px 0 8px;font-size:17px}.card p{margin:5px 0}.date{font-size:13px;color:#6a7c87}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.big{font-size:28px;font-weight:750}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.split .card{margin:0}.primary,.secondary{display:block;width:100%;min-height:48px;border:0;border-radius:12px;padding:12px 16px;font-weight:650}.primary{background:#cb622d;color:white}.secondary{background:#e8eef2;color:#234254}.hero .secondary{margin-top:20px;background:white;color:#19394a}.empty{border:1px dashed #cbd6df;border-radius:14px;padding:24px;color:#637684;line-height:1.6;font-size:14px}.note{font-size:13px;color:#6d7e89;line-height:1.6}label{display:block;font-size:14px;font-weight:600;margin:18px 0 7px}input,select,textarea{width:100%;border:1px solid #cbd6df;border-radius:10px;padding:13px;background:white;color:#172e3d;min-height:48px}textarea{resize:vertical}input[type=checkbox]{width:20px;min-height:20px;accent-color:#cb622d}.check{display:flex;gap:10px;align-items:center}.form-actions{margin-top:22px}.week{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.week button{background:white;border:1px solid #d6e0e6;border-radius:10px;width:44px;height:44px;font-size:22px}.week strong{font-size:14px}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);padding:10px 8px max(12px,env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(14px);border-top:1px solid #e0e6ea;display:flex;z-index:5}nav[hidden]{display:none}nav button{flex:1;min-width:0;border:0;background:none;color:#74848e;font-size:24px;padding:5px 0;min-height:54px;border-radius:12px}nav span{display:block;font-size:10px;font-weight:650;margin-top:3px}nav button[aria-current=page]{background:#fff1e7;color:#ac4a23}.available{border-left:4px solid #439476}.unavailable{border-left:4px solid #ca725f}.status{font-size:12px;font-weight:600;color:#38775c}.pending{color:#986719}.error{color:#a63a2e;font-size:14px}#message:not(:empty){position:fixed;bottom:100px;left:50%;transform:translateX(-50%);width:min(90%,450px);background:#19394a;color:white;padding:15px 20px;border-radius:12px;z-index:9}button:disabled{opacity:.5;cursor:wait}.login{padding-top:26px}.login .primary{margin-top:26px}@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s}}@media(max-width:360px){main{padding-inline:16px}header{padding-inline:16px}nav span{font-size:9px}}

.roster-shift{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;color:inherit}.roster-shift span{font-size:13px;white-space:nowrap}.week input{width:65%;min-width:0}.fab{position:fixed;bottom:105px;right:max(22px,calc((100vw - 520px)/2 + 22px));width:56px;height:56px;border:0;border-radius:50%;background:#cb622d;color:white;font-size:32px;box-shadow:0 4px 16px #142a3a40;z-index:4}dialog{width:min(92vw,450px);border:0;border-radius:18px;padding:24px;color:#172e3d}dialog::backdrop{background:#142a3a99}dialog button{margin-top:12px}summary{cursor:pointer;font-weight:650}

.roster-heading{padding:10px 12px;border-radius:9px;color:white}.layer-dot{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}

.card.registered-shift{border:2px solid #399a6b!important;box-shadow:0 0 0 3px #399a6b18;background:#effaf3!important}.registered-label{color:#227348;font-weight:700}.card [data-register]{margin-top:14px}

.hours-reminder{border:1px solid #dcaa62;background:#fff5df;border-radius:14px;padding:16px;margin:16px 0}.hours-reminder p{font-size:13px}

/* Fixed mobile scale while retaining normal scrolling. */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}input,select,textarea{font-size:16px}

.roster-date{display:flex;flex-direction:column;align-items:center;gap:6px;width:65%;min-width:0}.roster-date strong{text-transform:capitalize}.week .roster-date input{width:100%}

.shell{overflow-x:clip}main{backface-visibility:hidden}

/* Keep all bottom navigation icons and labels on shared baselines. */
nav{align-items:stretch}nav button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;font-size:22px;line-height:26px;padding:5px 1px}nav button span{display:flex;align-items:center;justify-content:center;min-height:26px;margin-top:0;font-size:9px;line-height:12px;text-align:center}nav button[data-tab=availability] span{display:block;padding-top:1px}

/* A shared two-line label area keeps every navigation tab aligned. */
nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
nav button{gap:5px;min-width:0}
nav button span,nav button[data-tab=availability] span{display:block;width:100%;min-height:26px;padding:0;margin:0;line-height:12px;font-size:clamp(7px,2.1vw,9px);text-align:center}
.availability-title{font-size:clamp(23px,6.3vw,28px);line-height:1.2;overflow-wrap:normal}
#availability{min-width:0}
#availability>label:first-child{margin-top:0}
#availability .split{grid-template-columns:repeat(2,minmax(0,1fr))}
#availability .split>div{min-width:0}
#availability input,#availability select,#availability textarea{min-width:0;max-width:100%}
#availability input[type=date],#availability input[type=time]{display:block;min-height:48px;text-align:left}
#availability input::-webkit-date-and-time-value{text-align:left}
#availability .check{min-height:44px;margin:12px 0 0;gap:10px}
#availability .check input{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:0;padding:0}

/* The native iOS date field is an invisible picker, never a layout-sized box. */
.availability-day{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:6px;min-width:0}
.availability-day>button{width:36px;height:48px;border:1px solid #d6e0e6;border-radius:10px;background:#f6f8fa;color:#234254;font-size:25px;padding:0}
.availability-day>button:disabled{cursor:default;opacity:.35}
.date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-width:0;height:48px;padding:8px 10px;border:1px solid #cbd6df;border-radius:10px;background:white;overflow:hidden}
.date-picker>span:first-child{min-width:0;font-size:13px;line-height:16px;font-weight:600}
.date-picker-icon{flex:none;color:#677987}
#availability .date-picker input{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.date-picker:focus-within{outline:2px solid #cb622d;outline-offset:2px}

header{height:104px;padding:8px 22px}
.royal-logo{display:block;width:84px;height:84px;object-fit:contain;flex:none;border-radius:10px}

.install-card{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:14px;margin:20px 0}
.install-icon{width:60px;height:60px;border-radius:13px;display:block;object-fit:contain}
.install-card h2{margin:0;font-size:17px}
.install-card .note{margin:5px 0 0}
.install-card button{grid-column:1/-1}
#install-help h2{margin:18px 0 10px}
.install-steps{padding-left:22px;line-height:1.6}
.install-steps li{padding-left:4px;margin:12px 0}

.availability-delete{display:block;margin-top:14px;padding:10px 14px;min-height:44px;border:1px solid #e4c8c2;border-radius:10px;background:#fff7f5;color:#a63a2e;font-weight:600}
.entry-links{display:flex;flex-direction:column;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid #dce4e9}.entry-links a{color:#a04822;font-size:14px;font-weight:600;text-underline-offset:3px}
/* Desktop employees share the same data and permissions with the phone app. */
@media(min-width:1000px){
 .shell{max-width:none;min-height:100vh;box-shadow:none;overflow-x:visible;padding-left:224px}
 header{position:fixed;left:0;top:0;width:224px;height:110px;z-index:6;padding:18px}.tag{display:none}
 nav{left:0;top:110px;bottom:0;transform:none;width:224px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:20px 12px;border:0;background:#142a3a;backdrop-filter:none}
 nav button{flex:none;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:12px 14px;color:#cad7df;min-height:52px;font-size:22px}
 nav button span,nav button[data-tab=availability] span{width:auto;text-align:left;min-height:0;font-size:13px;line-height:18px}nav br{display:none}nav button[aria-current=page]{background:#ffffff16;color:#fff;border-left:3px solid #eb8245}
 main{padding:38px 32px 50px;max-width:1800px;margin:auto;min-height:100vh}h1{font-size:32px}
 main[data-view=home]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start}main[data-view=home]>.eyebrow,main[data-view=home]>h1,main[data-view=home]>.week,main[data-view=home]>.empty,main[data-view=home]>.hours-reminder{grid-column:1/-1}main[data-view=home]>.card{margin:0}
 main[data-view=profile],main[data-view=availability],main[data-view=hours],main[data-view=messages]{max-width:1000px}.login{max-width:440px;margin:6vh auto}.shell:has(nav[hidden]){padding-left:0}.shell:has(nav[hidden]) header{position:static;width:100%;height:100px}.shell:has(nav[hidden]) main{min-height:auto}
 .week{justify-content:flex-start;gap:18px}.week input{width:160px;margin-left:auto}.desktop-layers>div{display:flex;flex-wrap:wrap;gap:10px 22px}.desktop-layers label{margin:14px 0 0}
 .desktop-roster{overflow:auto;border:1px solid #dce4e9;border-radius:14px;background:#fff}.desktop-roster table{border-collapse:collapse;width:100%;table-layout:fixed;min-width:1000px}.desktop-roster th,.desktop-roster td{padding:12px 8px;border-right:1px solid #e4e9ed;border-bottom:1px solid #e4e9ed;vertical-align:top;text-align:left;font-size:12px}.desktop-roster th{background:#eff3f6;font-weight:650}.desktop-roster th:first-child{width:125px}.desktop-roster .is-today{background:#fff7ee}.desktop-shift{display:block;width:100%;border:1px solid #e1e6ea;border-radius:7px;padding:10px 7px;margin:0 0 7px;text-align:left;color:inherit}.desktop-shift strong{display:block;font-size:12px;overflow-wrap:anywhere}.desktop-shift span{display:block;font-size:11px;margin-top:5px}.day-request{display:block;margin-top:8px;background:white;border:1px solid #cbd6df;border-radius:6px;width:28px;height:28px;color:#b14e25;font-size:20px}
 #message:not(:empty){bottom:24px}.fab{right:24px;bottom:24px}.install-card{display:none}
}
@media(min-width:1000px){nav button[data-tab=availability] span{font-size:12px;overflow-wrap:anywhere}nav button[data-tab=availability] br{display:block}}
/* Small screens reflow instead of shrinking the entire interface. */
@media(max-width:999px){
 .shell{width:100%;min-width:0}main{padding:22px clamp(12px,4.5vw,22px) calc(116px + env(safe-area-inset-bottom));min-width:0}
 header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 h1{font-size:clamp(24px,6.4vw,28px);overflow-wrap:anywhere}.card{padding:clamp(12px,4vw,18px);min-width:0}.card h3,.card p,.row>*{min-width:0;overflow-wrap:anywhere}
 .week{gap:8px}.week>button{flex:0 0 44px}.week>strong{min-width:0;text-align:center;line-height:1.45;font-size:13px}.roster-date{flex:1;width:auto;min-width:0}.roster-date input{max-width:100%;padding:10px 6px}
 .split{grid-template-columns:repeat(2,minmax(0,1fr))}.split>div{min-width:0}.big{font-size:clamp(22px,7vw,28px)}
 .roster-shift{flex-wrap:wrap;gap:6px}.roster-shift strong{overflow-wrap:anywhere}.roster-shift span{margin-left:auto}
 nav{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}nav button{min-height:60px}nav button span{font-size:10px!important;line-height:13px!important;overflow-wrap:normal}
 nav button[data-tab=availability] span{font-size:8px!important;letter-spacing:-.25px}
 .fab{bottom:calc(100px + env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right))}
 dialog{max-height:calc(100dvh - 32px);overflow-y:auto;padding:20px;width:calc(100% - 24px);max-width:450px}dialog h2{margin-top:0}
 input[type=date],input[type=time]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
 #message:not(:empty){bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 header{height:80px}.royal-logo{width:64px;height:64px}main{padding-top:18px}.row{flex-wrap:wrap}.availability-day{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px}.availability-day>button{width:32px}.date-picker{padding:6px}.date-picker>span:first-child{font-size:12px}.date-picker-icon{display:none}
 #availability .split{grid-template-columns:1fr}nav button span{font-size:9px!important}nav button[data-tab=availability] span{font-size:7px!important}
}
@media(max-height:500px) and (max-width:999px){header{height:72px}.royal-logo{height:56px;width:56px}dialog{max-height:calc(100dvh - 16px)}}
@media(max-width:999px){nav button[data-tab=availability] span{font-size:10px!important;letter-spacing:normal;hyphens:manual;max-width:64px}}
@media(max-width:360px){nav button[data-tab=availability] span{font-size:9px!important}}

#push-settings button[hidden]{display:none}