:root{font:13px/1.35 system-ui,sans-serif;color:var(--text);background:var(--surface);scrollbar-width:thin}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:transparent}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:0;top:0;z-index:50;background:var(--surface);padding:12px}.app-shell{max-width:960px;margin:auto}.utility-header{height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 7px;gap:5px}.brand{font-size:13px;font-weight:700;text-decoration:none;color:var(--ink)}.utility-header nav{display:flex;flex:1}.utility-header nav button{min-height:44px;padding:0 8px;font-size:12px}button[aria-pressed=true]{font-weight:650;box-shadow:inset 0 -2px var(--ink)}.source-info{position:relative}.source-info summary{display:flex;align-items:center;justify-content:center;width:25px;height:44px;cursor:pointer;font-size:20px;list-style:none}.source-info summary::-webkit-details-marker{display:none}.info-content{position:absolute;right:0;top:43px;background:var(--surface);border:1px solid var(--border);padding:9px;width:min(285px,90vw);z-index:20;font-size:12px;overflow-wrap:anywhere}.info-content select{width:100%;min-height:44px;border:0;border-bottom:1px solid var(--border);background:var(--surface)}.info-content p{margin:7px 0}.info-content label{display:block;margin:4px 0}#source-badge{font-size:8px;color:var(--faint)}#refresh,#job-refresh{width:32px;min-width:32px;height:44px;font-size:18px}button[data-state=fresh]{color:var(--success)}button[data-state=cached]{color:var(--faint)}button[data-state=error]{color:var(--error);font-weight:700}button[data-state=loading]{color:var(--pending)}button[data-state=loading] span{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toolbar{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}.month-navigation{display:flex;align-items:center;height:44px;flex:1;min-width:200px;padding:0 3px}.month-navigation button{height:44px;width:30px;font-size:20px}.month-navigation #today{width:43px;font-size:11px}#month-heading{font-size:13px;font-weight:650;margin:0 4px;white-space:nowrap}.view-switch{display:flex;align-items:center;height:44px;padding:0 3px}.view-switch button{height:44px;font-size:11px;padding:0 10px}.filter-bar{display:flex;align-items:center;height:34px;border-bottom:1px solid var(--line);padding:0 7px;gap:5px}#search{flex:1;min-width:0;border:0;background:transparent;height:34px;padding:0;font-size:12px}#result-count{font-size:10px;color:var(--muted2)}#clear-day{height:34px;font-size:11px;padding:0 6px}.job-row{position:relative;display:flex;gap:6px;align-items:center;min-height:44px;padding:4px 7px;border-bottom:1px solid var(--row-line)}.row-open{min-width:0;flex:1;text-align:left;padding:0;line-height:1.25}.row-open:after{position:absolute;inset:0;content:""}.row-open strong{display:block;font-weight:600;font-size:12px;overflow-wrap:anywhere}.row-open span{display:block;font-size:10px;color:var(--muted);margin-top:2px}.job-range{font-size:10px;white-space:nowrap;color:var(--muted2)}.call-card{display:grid;grid-template-columns:38px 1fr;gap:7px;padding:5px 7px;min-height:49px;border-bottom:1px solid var(--row-line)}.call-time strong{font-size:12px}.call-time span{display:block;font-size:10px;color:var(--muted2)}.call-info{min-width:0}.call-info>strong{font-size:12px;font-weight:600}.call-info>span{display:block;font-size:10px;color:var(--muted2)}.empty-state,.error-state{font-size:12px;padding:14px 7px;min-height:70px}.error-state{color:var(--error2)}.loading-state{padding:18px 7px;min-height:70px}.spinner{display:inline-block;width:12px;height:12px;border:1px solid var(--faint-border);border-top-color:var(--spinner);border-radius:50%;animation:spin 1s linear infinite}.weekday-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:10px;color:var(--muted2);text-align:center;height:21px;align-items:center;border-bottom:1px solid var(--line)}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-day{min-width:0;height:44px;text-align:left;padding:4px 5px;border-bottom:1px solid var(--line);border-right:1px solid var(--wash);font-size:12px;display:flex;justify-content:space-between;align-items:flex-start}.calendar-day small{font-size:9px;color:var(--muted2)}.calendar-day.selected{outline:1px solid var(--muted3);outline-offset:-1px;background:var(--selected)}.outside{color:var(--faint-border)}.day-agenda{border-top:1px solid var(--strong-border);margin-top:6px}.day-agenda h2{font-size:12px;font-weight:600;margin:6px 7px}.calendar-week{border-bottom:1px solid var(--border);position:relative}.week-dates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:27px}.week-date{height:27px;text-align:left;font-size:11px;padding:3px 5px;position:relative}.week-date:after{position:absolute;inset:0;bottom:-15px;content:""}.week-spans{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--lanes),24px);gap:2px 0;padding:0 0 2px}.job-span{position:relative;min-width:0;padding:0 4px;margin:0 1px;background:var(--wash);border-left:2px solid var(--faint);height:24px;font-size:10px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}.job-span:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.week-overflow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:21px}.week-overflow button{font-size:10px;padding:0 4px;text-align:left;height:21px;position:relative}.week-overflow button:after{position:absolute;inset:-10px 0 0;content:""}.week-overflow:has(button){height:26px}.span-calendar{border-bottom:1px solid var(--faint-border)}dialog{border:1px solid var(--stronger-border);padding:0;background:var(--surface);color:var(--ink);max-width:600px;width:100%;max-height:90dvh;margin:auto auto 0;box-shadow:none}dialog::backdrop{background:#0005}.detail-top{display:flex;align-items:center;padding:0 5px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:5}.detail-top button{height:44px;min-width:32px;font-size:20px}.detail-top h2{font-size:13px;font-weight:600;flex:1;min-width:0;margin:5px;overflow-wrap:anywhere}#detail-info{font-size:10px;color:var(--muted2);padding:5px 7px}.call-scope{display:flex;border-bottom:1px solid var(--line)}.call-scope button{height:34px;font-size:11px;padding:0 9px}.date-heading{padding:3px 7px;background:var(--subtle);font-size:10px;font-weight:600;border-bottom:1px solid var(--line)}.roster{margin:3px 0 0;padding:0;list-style:none;font-size:10px}.roster li{padding:2px 0;border-top:1px solid var(--wash)}.call-note{font-size:10px;margin:2px 0;color:var(--note)}.missing{color:var(--missing);font-size:10px}
@media(min-width:600px){.toolbar{flex-wrap:nowrap}.filter-bar{height:34px}dialog{margin:auto}.calendar-day{height:52px}.job-span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.spinner,button[data-state=loading] span{animation:none}}
.start-1{grid-column-start:1}.end-2{grid-column-end:2}.start-2{grid-column-start:2}.end-3{grid-column-end:3}.start-3{grid-column-start:3}.end-4{grid-column-end:4}.start-4{grid-column-start:4}.end-5{grid-column-end:5}.start-5{grid-column-start:5}.end-6{grid-column-end:6}.start-6{grid-column-start:6}.end-7{grid-column-end:7}.start-7{grid-column-start:7}.end-8{grid-column-end:8}.lane-1{grid-row:1}.lanes-1{--lanes:1}.lane-2{grid-row:2}.lanes-2{--lanes:2}.lane-3{grid-row:3}.lanes-3{--lanes:3}
dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;overflow-y:auto}dialog::backdrop{background:var(--surface)}.detail-top{height:44px}.detail-top h2{white-space:normal}#day-body,#detail-body{padding-bottom:12px}

.sample-tag{font-size:8px;color:var(--faint);white-space:nowrap}

/* Persistent controls stay in the same grid cells across sections and views. */
:root{scrollbar-gutter:stable}body{overflow-y:scroll}.utility-header{display:grid;grid-template-columns:44px minmax(0,1fr) 25px 35px 32px;gap:3px}.utility-header nav{display:grid;grid-template-columns:1fr 1fr;min-width:0}.utility-header nav button{padding:0;min-width:0}.view-switch{display:grid;grid-template-columns:40px 70px 70px;padding:0 3px}.view-switch button{padding:0;width:100%}.filter-bar{display:grid;grid-template-columns:minmax(0,1fr) 24px 55px}.filter-bar #clear-day[hidden]{display:block!important;visibility:hidden;pointer-events:none}#month-heading{width:117px;text-align:center;margin:0}dialog{width:100%;max-width:100%;scrollbar-gutter:stable}

.view-switch{grid-template-columns:34px 63px 63px}.month-navigation{min-width:214px}.month-navigation button{flex:0 0 26px;width:26px}.month-navigation #today{flex:0 0 43px}#month-heading{flex:0 0 113px;width:113px}

.call-info,.call-note,.roster{overflow-wrap:anywhere}

/* Exact stored job UUID colors are validated before they become CSS values. */
:root{--job-accent:#777;--job-tint:#eee}
.utility-header{position:sticky;top:0;z-index:30;background:var(--surface)}
.view-controls{position:sticky;top:44px;z-index:10;background:var(--surface)}
.job-row{border-left:4px solid var(--job-accent);background:var(--surface)}
.week-date:after{bottom:0}
.week-spans{grid-template-rows:none;grid-auto-rows:minmax(24px,auto);gap:2px 0}
.job-span{height:auto;min-height:24px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25;padding:4px;background:var(--job-tint);border-left:4px solid var(--job-accent);color:var(--text)}
.schedule-spans .job-span{background:var(--surface)}
.calendar-day:has(.day-jobs){height:auto;min-height:44px;display:block;padding:0}
.calendar-date{display:flex;justify-content:space-between;align-items:flex-start;text-align:left;width:100%;min-height:27px;padding:4px 5px}
.calendar-date small{font-size:9px;color:var(--muted2)}
.day-jobs{display:grid;gap:2px;padding:0 1px 3px}
.day-job{min-width:0;min-height:24px;padding:4px 2px;line-height:1.25;font-size:10px;text-align:left;overflow-wrap:anywhere;background:var(--job-tint);border-left:4px solid var(--job-accent);color:var(--text)}

/* Date context follows each tall day/week below the existing pinned controls. */
:root{--controls-bottom:166px}
:root{scroll-padding-top:calc(var(--controls-bottom) + 48px)}
.job-span,.day-job,.row-open{scroll-margin-top:calc(var(--controls-bottom) + 48px)}
.job-calendar>.weekday-row,.span-calendar>.weekday-row{position:sticky;top:var(--controls-bottom);z-index:9;background:var(--surface)}
.calendar-date,.week-dates{position:sticky;top:calc(var(--controls-bottom) + 21px);z-index:8;background:var(--surface)}
.mobile-date{display:none}
@media(max-width:599px){
  .job-calendar>.weekday-row{display:none}
  .job-calendar>.calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .job-calendar .calendar-date{top:var(--controls-bottom);font-size:11px;min-height:27px}
  .compact-date{display:none}.mobile-date{display:inline}
  .day-job{font-size:11px;padding:4px}
}

/* Calendar List: stable dates-left column; exact color only on the thin strip. */
.job-row.list-job{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;padding:0 7px 0 0;background:var(--surface)}
.list-job .job-range{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:4px 5px;white-space:normal;font-size:11px;line-height:1.25;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--muted3)}
.list-job .job-range time,.list-job .range-end{display:block;white-space:nowrap}
.list-job .range-end time{display:inline}
.list-job .row-open{padding:4px 0}
.list-job .row-open span{color:var(--muted3)}

/* Personal Schedule uses the same exact job strip and only available call details. */
.personal-call{border-left:4px solid var(--job-accent);background:var(--surface);grid-template-columns:62px minmax(0,1fr)}

.call-role{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px}
.call-role strong{font-size:12px;font-weight:600}
.call-role span{font-size:10px;color:var(--muted3)}
.personal-call .call-info>span{color:var(--muted3)}
.schedule-day{position:relative;padding-left:9px;background:var(--surface)}
.schedule-strips{position:absolute;inset:0 auto 0 0;width:4px;display:flex;flex-direction:column;pointer-events:none}
.schedule-strip{display:block;flex:1;min-height:0;background:var(--job-accent)}

.auth-panel{max-width:390px;margin:auto;padding:12px 7px;font-size:12px}.auth-panel form{display:grid;gap:8px;margin-top:12px}.auth-panel label{display:grid;gap:3px}.auth-panel input{min-height:44px;width:100%;border:1px solid var(--line);padding:7px}.auth-panel button{min-height:44px;padding:5px 9px;border:1px solid var(--line)}.auth-panel p{margin:5px 0}.auth-panel:has(#signin[hidden]){max-width:960px;display:flex;align-items:center;gap:7px;padding:0 7px;min-height:44px}.auth-panel:has(#signin[hidden])>.brand{display:none}.auth-panel:has(#signin[hidden]) #signout{margin-left:auto;border:0}

/* Job roster details and matching stacked time typography for both call lists. */
.roster-call{grid-template-columns:66px minmax(0,1fr)}
.roster-call .call-time,.personal-call .call-time{font-variant-numeric:tabular-nums}
.roster-call .call-time>*,.personal-call .call-time>*{display:block;white-space:nowrap;font-family:inherit;font-size:11px;font-weight:400;font-style:normal;line-height:1.4;color:var(--ink)}
.roster-call.current-user-call{background:var(--current-bg)}
.roster-line{gap:2px 5px}
.roster-line>strong{min-width:0;max-width:100%;overflow-wrap:anywhere}
.roster-field{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;min-width:0}
.roster-field>span:last-child{min-width:0;overflow-wrap:anywhere}
.roster-call .call-position{font-size:11px;color:var(--muted3)}
.roster-call .call-note{white-space:pre-wrap}
#detail-info{display:grid;grid-template-columns:21ch minmax(0,1fr);gap:7px;align-items:start}
.job-detail-range{font-variant-numeric:tabular-nums;white-space:nowrap}
.job-detail-venue{min-width:0;overflow-wrap:anywhere;text-align:left}

/* Appearance changes only; validated job accents and the accepted pastel job tint remain exact. */
:root{--bg:#FFFFFF;--surface:#FFFFFF;--text:#202124;--ink:#222222;--line:#DDDDDD;--row-line:#E5E5E5;--border:#CCCCCC;--faint-border:#BBBBBB;--strong-border:#AAAAAA;--stronger-border:#999999;--subtle:#F5F5F5;--selected:#F3F3F3;--wash:#EEEEEE;--muted:#656565;--muted2:#666666;--muted3:#555555;--note:#444444;--faint:#6C6C6C;--focus:#111111;--spinner:#333333;--error:#A72A1F;--error2:#8F2319;--missing:#8F5A22;--success:#247443;--pending:#73551C;--current-bg:#E9F5E7;--outside-text:#6C6C6C;--control-border:#888888;color-scheme:light;background:var(--bg)}
:root[data-theme="dark"]{--bg:#14171B;--surface:#1D2127;--text:#EEF1F5;--ink:#EEF1F5;--line:#3D4652;--row-line:#3D4652;--border:#697787;--faint-border:#566170;--strong-border:#728093;--stronger-border:#8895A5;--subtle:#262C34;--selected:#303944;--wash:#29303A;--muted:#B8C1CD;--muted2:#B8C1CD;--muted3:#B8C1CD;--note:#CAD2DD;--faint:#A7B3C2;--focus:#EEF1F5;--spinner:#EEF1F5;--error:#FFB4A9;--error2:#FFB4A9;--missing:#EFCE94;--success:#8FD6A4;--pending:#EFCE94;--current-bg:#203C2B;--outside-text:#A7B3C2;--control-border:#728093;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg:#14171B;--surface:#1D2127;--text:#EEF1F5;--ink:#EEF1F5;--line:#3D4652;--row-line:#3D4652;--border:#697787;--faint-border:#566170;--strong-border:#728093;--stronger-border:#8895A5;--subtle:#262C34;--selected:#303944;--wash:#29303A;--muted:#B8C1CD;--muted2:#B8C1CD;--muted3:#B8C1CD;--note:#CAD2DD;--faint:#A7B3C2;--focus:#EEF1F5;--spinner:#EEF1F5;--error:#FFB4A9;--error2:#FFB4A9;--missing:#EFCE94;--success:#8FD6A4;--pending:#EFCE94;--current-bg:#203C2B;--outside-text:#A7B3C2;--control-border:#728093;color-scheme:dark}}
body{background:var(--bg)}.app-shell{background:var(--surface)}
.job-span,.day-job{color:#202124}.schedule-spans .job-span{color:var(--text)}
.outside{color:var(--outside-text)}input::placeholder{color:var(--muted2);opacity:1}
.auth-panel input,.auth-panel button,.info-content select{border-color:var(--control-border)}
.auth-panel input{background:var(--surface)}
.theme-control{display:flex;align-items:center;gap:7px;min-height:44px;font-size:12px}
.auth-panel .theme-control,.info-content .theme-control{display:flex;align-items:center;gap:7px;margin:0}
.auth-panel .theme-control{justify-content:flex-end}.auth-panel[data-state="checking"] .theme-control{margin-left:auto}
.theme-control select{width:92px;min-height:32px;padding:3px 5px;background:var(--surface);color:var(--text);border:1px solid var(--control-border);border-radius:2px}
.info-content .theme-control select{width:auto;flex:1;min-height:44px}

/* User administration uses the existing theme tokens and dialog surface. */
#users-dialog{max-width:42rem;width:calc(100% - 2rem)}#users-dialog form{display:grid;gap:.75rem;padding:1rem}#users-dialog label{display:grid;gap:.25rem}#users-dialog label:has(input[type=checkbox]){display:flex}#users-list{padding:1rem 2rem}#users-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}#users-status{padding:0 1rem}

/* Recovery shares the login layout and light/dark/system theme tokens. */
.auth-panel[data-view="reset"]:has(#signin[hidden]){display:block;max-width:390px;padding:12px 7px}
.auth-panel[data-view="reset"]:has(#signin[hidden])>.brand{display:inline}
.auth-panel .auth-link{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:var(--muted3);text-underline-offset:3px}
.auth-panel .auth-link:focus-visible,#reset-heading:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#reset-heading{font-size:16px;font-weight:600;margin:16px 0 8px}
#reset-status{overflow-wrap:anywhere}

/* Employee-first app access keeps employee identity visible and immutable. */
#users-dialog{margin:auto;max-height:calc(100dvh - 2rem);height:auto;border:1px solid var(--border)}
#users-dialog .detail-top #users-reload{font-size:12px;padding:0 10px}
#users-dialog .users-intro,#users-empty{padding:0 1rem;overflow-wrap:anywhere}
#users-dialog .users-search{padding:0 1rem}
#users-dialog input:not([type=checkbox]),#users-dialog select{width:100%;min-height:40px;padding:7px;border:1px solid var(--control-border);background:var(--surface);color:var(--text)}
#users-dialog input[type=checkbox]{width:18px;height:18px;margin:0}
#users-list{list-style:none;padding:0 1rem;margin:.5rem 0;max-height:35dvh;overflow:auto}
#users-list li{border-bottom:1px solid var(--line)}
#users-list li>div{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
#users-list li span{font-size:11px;color:var(--muted3)}
#users-list button,.user-actions button{min-height:44px;padding:7px 10px;border:1px solid var(--control-border)}
#users-list button{flex-shrink:0}
#users-dialog form{border-top:1px solid var(--line)}
#users-dialog form h3,#users-dialog form p{margin:0;overflow-wrap:anywhere}
#users-dialog form p{font-size:12px;color:var(--muted3)}
.user-actions{display:flex;flex-wrap:wrap;gap:.5rem}
#users-dialog button:disabled,#users-dialog input:disabled,#users-dialog select:disabled{opacity:.55}
@media(max-width:420px){#users-list li{align-items:stretch;flex-direction:column;gap:.5rem}#users-list button{text-align:left}.user-actions{display:grid}}

#users-dialog .users-import{display:flex;align-items:center;gap:.75rem;padding:0 1rem .75rem}
#users-dialog .users-import button{min-height:44px;padding:7px 10px;border:1px solid var(--control-border);flex-shrink:0}
#users-dialog .users-import p{margin:0;font-size:11px;color:var(--muted3)}
@media(max-width:420px){#users-dialog .users-import{align-items:stretch;flex-direction:column}}

/* Shared account control stays visible in Calendar and Schedule. */
.utility-header .session-controls{display:flex;align-items:center;flex-shrink:0}.utility-header .session-controls button{min-height:44px;padding:0 7px;font-size:11px;white-space:nowrap}

/* One account menu shared by Calendar and Schedule. Native disclosures support touch and keyboard. */
.account-menu{flex-shrink:0}.account-menu>summary{width:44px;height:44px;font-size:22px}.account-menu-content{width:min(285px,calc(100vw - 24px));max-height:calc(100dvh - 64px);overflow:auto}
.account-menu .account-section>summary{width:100%;min-height:44px;height:auto;justify-content:flex-start;font-size:12px;padding:8px 6px;list-style:none}.account-menu .account-section>summary::after{content:'⌄';margin-left:auto}.account-menu .account-section[open]>summary::after{content:'⌃'}
.account-menu .account-section{border-bottom:1px solid var(--line);padding-bottom:3px}.account-menu-content>button,.account-menu .session-controls,.account-menu .session-controls button{width:100%;text-align:left;min-height:44px}.account-menu-content>button,.account-menu .session-controls button{padding:8px 6px;font-size:12px}

.admin-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 1rem;gap:.5rem}.admin-tabs [role=tab]{min-height:44px;padding:8px;font-size:12px}.admin-tabs [aria-selected=true]{font-weight:650;box-shadow:inset 0 -2px var(--ink)}.admin-panel-toolbar{padding:.5rem 1rem 0}.admin-panel-toolbar button{min-height:44px;border:1px solid var(--control-border);padding:7px 10px}.admin-settings-panel{padding:1rem}.admin-settings-panel h3{font-size:14px;margin:0 0 .5rem}.admin-settings-panel h3:not(:first-child){margin-top:1.5rem}.admin-settings-panel p{font-size:12px;color:var(--muted3);overflow-wrap:anywhere}.admin-settings-panel label{min-height:44px;align-items:center}