:root{color-scheme:light dark;--bg:#f5f7fb;--surface:#fff;--text:#18283f;--muted:#6b778b;--line:#e5eaf2;--blue:#2463eb;--tint:#edf3ff;--night:#eeeaff;--night-text:#7156b1;--holiday:#a45b0a;--notice:#fff6e7;font-family:Inter,'Segoe UI',sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:var(--blue);text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #f5a623;outline-offset:4px}h1,h2,p{margin-top:0}h1{font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-1.2px;margin-bottom:10px;line-height:1.2}h2{font-size:1.12rem;line-height:1.45;margin-bottom:16px}p{line-height:1.65}.muted,.page-heading p{color:var(--muted)}.blue{color:var(--blue)}.eyebrow{font-size:.75rem!important;font-weight:700;letter-spacing:1.6px;margin-bottom:14px;color:var(--muted)}.sidebar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);z-index:5;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.brand,.sidebar-foot{display:none}nav{display:flex;justify-content:space-around;padding:8px}nav a{display:flex;align-items:center;flex-direction:column;gap:5px;padding:8px 12px;color:var(--muted);font-size:.8rem;border-radius:12px}nav a>span{font-size:1.5rem;line-height:1}nav a[aria-current]{color:var(--blue);background:var(--tint);font-weight:600}main{max-width:1500px;padding:0 20px 100px;margin:auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--muted);margin-bottom:30px}.demo-badge{font-size:.65rem;letter-spacing:1.2px;background:var(--tint);color:var(--blue);padding:7px 10px;border-radius:6px;font-weight:700}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}.page-heading p{margin-bottom:0}.page-heading .eyebrow{margin-bottom:12px}.chip{display:none;border:1px solid var(--line);background:var(--surface);padding:10px 16px;border-radius:10px;font-size:.85rem;white-space:nowrap}.overview-grid{display:grid;gap:20px}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}.next-shift{padding:26px;border-radius:18px;color:#fff;background:linear-gradient(115deg,#1e5ee2,#397af4);box-shadow:0 12px 28px #2463eb20}.overline{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;letter-spacing:1.3px;color:#dbe7ff}.overline span{font-size:2rem}.next-date{color:#dbe7ff;font-size:.875rem;margin:20px 0 8px}.next-shift h2{font-size:1.45rem;margin-bottom:6px}.big-time{font-size:clamp(1.7rem,4vw,2.8rem);font-weight:650;letter-spacing:-1px;line-height:1.4}.hero-bottom{margin-top:26px;padding-top:19px;border-top:1px solid #ffffff35;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem}.hero-bottom a{color:white}.hero-bottom i{margin:0 8px;opacity:.5}.holiday-card{display:flex;flex-direction:column;justify-content:center}.flag{font-size:1.8rem;margin-bottom:20px}.holiday-card h2{font-size:1.35rem;margin-bottom:10px}.holiday-card p:last-child{color:var(--muted);font-size:.9rem;margin-bottom:0}.section{margin-top:30px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.section-heading h2{margin:0}.section-heading>span,.section-heading>a{font-size:.85rem}.section-heading>span{color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metrics article{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px}.metrics article>span{display:block;color:var(--muted);font-size:.85rem;margin-bottom:14px}.metrics b{font-size:2rem;font-weight:650;letter-spacing:-1px}.metrics b small{font-size:1rem;font-weight:400;color:var(--muted)}.lower{margin-top:24px}.shift-row{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}.date-tile{background:var(--bg);border-radius:12px;min-width:54px;padding:8px;text-align:center}.date-tile b{display:block;font-size:1.2rem}.date-tile small{font-size:.75rem;color:var(--muted)}.shift-info{flex:1;min-width:0}.shift-info strong{display:block;font-size:.95rem}.shift-info>span{display:block;color:var(--muted);font-size:.85rem;margin-top:5px}.holiday-text{display:block;color:var(--holiday);font-size:.75rem;margin-top:6px}.shift-symbol{border-radius:50%;padding:8px 12px}.day{background:var(--tint);color:var(--blue)}.night{background:var(--night);color:var(--night-text)}.footnote{font-size:.8rem;margin:18px 0 0}.month-graphic{font-size:4rem;font-weight:650;letter-spacing:-3px;color:var(--blue);margin:22px 0 18px}.month-graphic span{display:block;font-size:.9rem;letter-spacing:0;font-weight:400;color:var(--muted)}.text-link{font-size:.9rem}footer{margin-top:36px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem}footer span{opacity:.75}.calendar-layout{display:grid;gap:20px}.calendar-card{padding:16px}.calendar-card .section-heading{flex-wrap:wrap}.month-controls{display:flex;gap:6px}.month-controls button{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--surface);font-size:.8rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.weekday{text-align:center;font-size:.8rem;color:var(--muted);padding:12px 0}.day-cell{position:relative;min-height:72px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:8px 3px;text-align:center}.weekend{background:var(--bg)}.day-number{font-size:.9rem;display:inline-grid;place-items:center;min-width:25px;min-height:25px}.today .day-number{background:var(--blue);color:white;border-radius:50%}.selected{border:2px solid var(--blue);background:var(--tint)}.holiday-dot{position:absolute;right:5px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--holiday)}.cal-shift{display:block;margin-top:7px;border-radius:5px;padding:3px;font-size:.75rem}.cal-shift>span{display:none}.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;color:var(--muted);font-size:.75rem}.notice{background:var(--notice);color:var(--holiday);padding:14px;border-radius:10px;font-size:.85rem;line-height:1.6;margin:16px 0}.detail{align-self:start}.detail h2{text-transform:capitalize}.stacked{height:24px;border-radius:8px;background:var(--night-text);overflow:hidden;margin:30px 0 22px}.stacked span{display:block;background:var(--blue);height:100%}.bars{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:30px}.bars>div{flex:1;text-align:center}.bars b,.bars small{display:block;font-size:.75rem;color:var(--muted)}.bars span{display:block;background:var(--blue);border-radius:7px 7px 0 0;margin:12px 0;min-height:2px;opacity:.8}.profile-head{display:flex;align-items:center;gap:20px;margin-bottom:20px}.profile-head h2,.profile-head p{margin:0}.avatar{background:var(--tint);color:var(--blue);width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;font-weight:600;flex-shrink:0}.avatar.large{width:64px;height:64px;font-size:1.1rem}.setting{border-top:1px solid var(--line);padding-top:20px;margin-top:20px;display:flex;justify-content:space-between}.setting p{font-size:.85rem;margin:6px 0}.skip{position:fixed;top:-100px;z-index:20;background:var(--surface);padding:10px}.skip:focus{top:0}.loading{padding:40px}#retry{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:12px 20px}
@media(min-width:700px){main{padding:0 32px 110px}.overview-grid{grid-template-columns:1.65fr 1fr}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.chip{display:block}.next-shift{padding:30px}.cal-shift>span{display:inline}.day-cell{min-height:90px}.calendar-card{padding:24px}.page-heading{margin-bottom:32px}.holiday-card{padding:28px}}
@media(min-width:1100px){.sidebar{top:0;bottom:0;width:240px;border-top:0;border-right:1px solid var(--line);padding:35px 20px;display:flex;flex-direction:column}.brand{display:flex;color:var(--text);gap:12px;align-items:center;font-weight:700;font-size:1.15rem;padding:0 4px;margin-bottom:48px}.brand small{display:block;font-size:.7rem;color:var(--muted);font-weight:400;margin-top:5px}.brand-icon{background:var(--blue);color:white;padding:8px 12px;border-radius:12px;font-size:1.5rem}nav{display:flex;flex-direction:column;gap:10px;padding:0}nav a{flex-direction:row;gap:14px;padding:15px 18px;font-size:.9rem}nav a>span{width:24px;text-align:center}.sidebar-foot{display:flex;gap:12px;align-items:center;margin-top:auto;padding:20px 8px 0;border-top:1px solid var(--line);font-size:.9rem}.sidebar-foot small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}main{margin-left:240px;padding:0 48px 35px}.topbar{height:87px;margin-bottom:36px}.calendar-layout{grid-template-columns:minmax(0,1fr) 300px}.day-cell{min-height:96px}}
@media(prefers-color-scheme:dark){:root{--bg:#0d1421;--surface:#151f30;--text:#e7edf8;--muted:#a0aec2;--line:#29364c;--blue:#7aabff;--tint:#203350;--night:#302a48;--night-text:#c4b2ff;--holiday:#f2bb6d;--notice:#322a20}.next-shift{background:linear-gradient(115deg,#194cb5,#2864cd)}.brand-icon{background:#2463eb}.bars span,.stacked span{background:#6397f6}.today .day-number{color:#101828}}
@media(prefers-reduced-motion:no-preference){a,button{transition:background .15s,border-color .15s}@keyframes enter{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}}
/* Personal preferences and access screens */
[hidden]{display:none!important}.entry main{margin:0 auto;padding:45px 20px;max-width:900px}.entry-card{margin:30px auto;max-width:780px;padding:clamp(24px,5vw,48px)}.entry-card h1{margin:14px 0 20px}input,select{font:inherit;padding:12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);max-width:100%}label{font-size:.9rem}#login-form{display:grid;gap:12px;max-width:440px}button{border:1px solid var(--line);border-radius:10px;background:var(--tint);padding:12px 16px}button:disabled{opacity:.5;cursor:wait}#login-form button{background:#2463eb;color:white}.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.people-grid button{text-align:left;padding:20px}.people-grid span{display:block;color:var(--muted);font-size:.85rem;margin-top:7px}.holiday-strip,.event-strip{border-radius:8px;padding:10px 14px;margin:0 0 16px;background:var(--tint);color:var(--text);font-size:.875rem;border-left:3px solid var(--blue)}.holiday-strip{margin-top:-8px}.next-shift .event-strip{background:#ffffff18;color:white;border-color:#ffffff80;margin:16px 0 0}.next-shift button{color:white;background:#ffffff18;border-color:#ffffff35}.row-button{display:block;width:100%;padding:0;border:0;background:none;text-align:left}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.theme-grid button{background:var(--bg);font-size:.85rem;display:flex;align-items:center;gap:9px;padding:12px}.theme-grid [aria-pressed=true]{outline:2px solid var(--blue)}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid;flex-shrink:0}.secondary{margin:10px}.month-picker{display:flex;align-items:center;gap:12px;margin:0 0 24px;flex-wrap:wrap}.peak-mark{display:block;font-size:.75rem;color:var(--blue);margin-top:3px}.absence{background:var(--bg);color:var(--muted)}.role-stat{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.9rem}.role-bar{flex-basis:100%;height:7px;background:linear-gradient(to right,var(--blue) var(--share),var(--bg) var(--share));border-radius:5px}.page-heading h1:first-letter{text-transform:uppercase}.hero-bottom button{font-size:.85rem}.detail .shift-row{gap:10px}.detail .shift-symbol{padding:6px;font-size:.8rem}#login-error{color:var(--holiday)}html[data-theme]:not([data-theme=system]){--notice:var(--tint);--holiday:var(--blue);--night:var(--tint);--night-text:var(--blue)}@media(min-width:1100px){.calendar-layout{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}}
.detail h2{text-transform:none}.detail h2:first-letter{text-transform:uppercase}
.shift-row.vacant{border-left:3px solid var(--holiday);padding-left:12px}.vacant .shift-info strong{color:var(--holiday)}
/* Accessible semantic theme surfaces */
.next-shift{background:var(--hero);box-shadow:0 10px 28px #00000018}.next-date,.overline{color:#fff}.brand-icon,#login-form button{background:var(--hero);color:#fff}.today .day-number{color:var(--shift-text);background:var(--shift-bg)}.day-cell.weekend{background:var(--bg)}.day-cell.selected{border:2px solid var(--blue);background:var(--tint)}.cal-shift.day,.cal-shift.night,.shift-symbol.day,.shift-symbol.night{background:var(--shift-bg);color:var(--shift-text);font-weight:700;border:1px solid var(--shift-bg)}.cal-shift.night{border-style:dashed;outline:1px dashed var(--shift-text);outline-offset:-3px}.cal-shift.absence{border:1px solid var(--line)}.vacation-list{display:grid;gap:10px}.vacation-list .absence-person{padding:16px;border:1px solid var(--line);border-radius:12px}.vacation-list strong{display:block;font-weight:600}.vacation-list p{margin:12px 0 0;color:var(--muted)}.event-marker{display:block;margin-top:5px;font-size:.75rem;color:var(--text);overflow-wrap:anywhere}.event-strip small{display:block;margin-top:5px}.theme-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.day-cell{min-width:0}.calendar-grid{padding-bottom:4px}.stats-filters{display:flex;flex-wrap:wrap;gap:16px}html[data-theme=oled] body{background:#000}html[data-theme=iris] body{background-image:radial-gradient(#ceafff0a 1px,transparent 1px);background-size:18px 18px}
/* Keep all week rows equal, including days with events or Peak Day markers. */
.calendar-grid{grid-template-rows:auto;grid-auto-rows:minmax(96px,1fr)}
.day-cell{min-height:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px 3px;gap:4px}
.day-cell .day-number{flex-shrink:0}
.day-cell .cal-shift{width:100%;margin-top:0;flex-shrink:0}
.day-cell .event-marker{width:100%;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.day-cell .peak-mark{position:absolute;left:4px;bottom:3px;margin:0;font-size:.65rem;line-height:1}
nav a>span{display:grid;place-items:center;width:24px;height:24px}
nav svg{width:24px;height:24px;display:block}

/* Compact, equal calendar rows, including days with events. */
.calendar-grid{grid-auto-rows:minmax(72px,1fr)}
.day-cell{padding:5px 3px;gap:3px}
.calendar-event-dot{position:absolute;bottom:2px;right:4px;font-size:.6rem;color:var(--blue)}
.holiday-legend{display:inline-flex;align-items:center;gap:7px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--holiday,var(--blue));flex-shrink:0}
.metrics article small{display:block;color:var(--muted);font-size:.78rem;line-height:1.6;margin-top:7px}
.accent-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.accent-grid button{display:flex;align-items:center;gap:7px;padding:9px 12px}
.accent-grid button span{width:15px;height:15px;border-radius:50%}
.accent-grid button[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:2px;background:var(--tint)}
.sync-status{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0 0 18px}
[data-theme=rose] body{background-image:radial-gradient(ellipse at 0 0,#ffb3cc0d,transparent 60%),repeating-linear-gradient(135deg,transparent 0 48px,#ffb3cc05 49px 50px)}

/* Neutral fills keep their own contrast, independently of link/focus colors. */
.next-shift,.next-shift .next-date,.next-shift .overline,.next-shift button,.next-shift .event-strip,.brand-icon,#login-form button{color:var(--hero-text,#fff)}
.next-shift{border:1px solid var(--shift-border,var(--line))}
.next-shift button,.next-shift .event-strip{border-color:currentColor}
.cal-shift.day,.cal-shift.night,.shift-symbol.day,.shift-symbol.night{border-color:var(--shift-border)}
.today .day-number{box-shadow:inset 0 0 0 1px var(--shift-border)}
.accent-grid button span{border:1px solid var(--muted)}

/* Pure black and white: no blended surfaces, colored accents or soft shadows. */
/* Calendar focus and weekend rhythm follow the active palette. */
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.day-cell:focus:not(:focus-visible){outline:none}
.day-cell.weekend,.weekday.weekend-heading{background:color-mix(in srgb,var(--surface) 92%,var(--text) 8%)}
.weekday.weekend-heading{border-radius:7px;font-weight:700}
.day-cell.selected{background:var(--tint)}
.page-heading p{font-size:.85rem}
.next-shift .hero-detail-link{display:block;width:max-content;max-width:100%;margin-top:18px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;text-align:left;font-weight:600}
.next-shift .overline{font-size:.95rem}
.next-shift .today-status{font-size:1rem}
.published-stamp{margin-top:20px;padding:16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;background:var(--tint)}
.published-stamp>span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:7px}
.published-stamp time{display:block;font-size:1rem;font-weight:700;color:var(--text)}
.developer-signature{text-align:center;color:var(--muted);font-size:.8rem;margin:40px 0 0;padding-top:20px;border:0}
.developer-signature strong{color:var(--text);font-weight:600}
.admin-dialog{width:min(960px,calc(100vw - 24px));max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--surface);color:var(--text);box-sizing:border-box}.admin-dialog::backdrop{background:#0009}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-heading h2{margin:0}.admin-heading button{font-size:26px}.admin-toolbar,.admin-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.admin-dialog label{display:grid;gap:7px;margin:12px 0}.admin-dialog input,.admin-dialog select{width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}.admin-dialog button{cursor:pointer;max-width:100%;white-space:normal}.admin-form{padding:18px;border:1px solid var(--line);border-radius:16px;margin:16px 0}.admin-dialog fieldset{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:10px}.admin-dialog .admin-check{display:flex;align-items:center;gap:10px}.admin-check input{width:20px;height:20px}.admin-dialog details{margin:18px 0;padding:12px;border:1px solid var(--line);border-radius:12px}.admin-dialog summary{cursor:pointer;font-weight:700}.admin-table{overflow:auto;max-height:420px;margin:12px 0}.admin-table table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;padding:9px;border-bottom:1px solid var(--line);white-space:nowrap}.admin-review{border-left:3px solid var(--blue);padding:12px 18px;background:var(--bg);border-radius:10px}.admin-review li{margin:8px 0}.change-note{display:block;margin:7px 0;font-size:.8rem;line-height:1.5}.admin-dialog [hidden]{display:none!important}nav a[href="#profile"]{-webkit-touch-callout:none;user-select:none;touch-action:manipulation}@media(max-width:600px){.admin-dialog{padding:16px}.admin-toolbar>*{width:100%}}

.admin-confirm{position:fixed;inset:25% max(22px,calc((100vw - 600px)/2)) auto;padding:24px;background:var(--surface);color:var(--text);border:2px solid var(--blue);border-radius:18px;box-shadow:0 0 0 100vmax #000a;z-index:100;max-height:70dvh;overflow:auto}.admin-confirm button{margin:6px}

/* Compact calendar, with markers kept outside the shift label. */
.calendar-grid{grid-auto-rows:64px}.day-cell{overflow:hidden;padding:4px 3px;gap:2px}.day-cell .day-number{min-height:23px}.day-cell .cal-shift{font-size:.72rem;padding:2px;line-height:1.1}.calendar-event-dot{top:3px;right:4px;bottom:auto;line-height:1}.holiday-dot{left:4px;right:auto;top:5px}.day-cell .peak-mark{bottom:2px;font-size:.5rem}.published-stamp{margin-bottom:20px}.setting>div{width:100%}.brand img.brand-icon{padding:0;border-radius:10px;width:40px;height:40px;flex-shrink:0}.demo-badge{font-size:.78rem;letter-spacing:0;max-width:65%;text-align:right}.ornament-setting{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:.9rem;cursor:pointer}.ornament-setting input{width:20px;height:20px;accent-color:var(--blue)}
/* A restrained pen-and-paper treatment; the saved graphite choice migrates here. */
html[data-theme] body{background-image:none}
html[data-ornaments=on] body{background-image:repeating-radial-gradient(ellipse at 110% -10%,transparent 0 85px,color-mix(in srgb,var(--blue) 9%,transparent) 86px 87px,transparent 88px 125px);background-attachment:fixed}
@media(prefers-reduced-motion:reduce){html[data-ornaments=on] body{background-attachment:scroll}}

/* Loose ink contours and pencil hatching, with stable calendar geometry. */
#push-test{margin:12px 0 0;display:block}

/* Shared SVG geometry for calendar and legend, independent of font metrics. */
.day-markers{position:absolute;right:3px;top:3px;display:flex;gap:1px;align-items:center;pointer-events:none;height:10px}
.calendar-marker{width:9px;height:9px;display:inline-block;flex-shrink:0;fill:currentColor;color:var(--blue);vertical-align:middle}
.calendar-grid .day-cell{padding-top:12px;gap:2px}
.calendar-grid .day-cell .day-number{min-height:20px;line-height:20px}
.legend>span{display:inline-flex;align-items:center;gap:6px}.legend b{font-weight:750}
.cal-shift.night{border-style:solid;outline:none!important;position:relative}
.night-moon{width:10px;height:10px;display:inline-block;flex-shrink:0;fill:#ffd65a;stroke:#765700;stroke-width:.8;vertical-align:middle}
.cal-shift .night-moon{position:absolute;left:1px;top:50%;transform:translateY(-50%);width:7px;height:7px}
.cal-shift.night{padding-inline:2px;text-align:center}
.topbar-person{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.topbar-person .demo-badge{max-width:none}
#inbox-bell{width:42px;height:42px;flex-shrink:0;padding:9px;background:var(--surface);color:var(--text);position:relative;border-radius:50%}
#inbox-bell svg{display:block;width:22px;height:22px}.unread-dot{display:none;position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid var(--surface)}
#inbox-bell.has-unread .unread-dot{display:block}
.inbox-dialog{width:min(580px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:22px}
.inbox-dialog::backdrop{background:#0009}.inbox-dialog header{display:flex;align-items:center;justify-content:space-between;gap:14px}.inbox-dialog header h2{margin:0}.inbox-dialog header button,.inbox-item>button{font-size:24px;line-height:1;padding:9px;min-width:42px;min-height:42px;background:transparent}
.inbox-dialog>.muted{font-size:.8rem;margin:16px 0}.inbox-item{display:flex;align-items:flex-start;gap:10px;padding:18px 0;border-top:1px solid var(--line)}.inbox-item>div{flex:1;min-width:0}.inbox-item time{font-size:.75rem;color:var(--muted)}.inbox-item h3{font-size:1rem;margin:8px 0}.inbox-item p{font-size:.9rem;margin:0;overflow-wrap:anywhere}.admin-notifications{border:1px solid var(--line);padding:12px 16px;border-radius:12px;margin-bottom:16px}

.overview-notices{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:14px;background:var(--surface);padding:16px 20px;margin:0 0 24px}.overview-notices p{font-size:1rem;font-weight:600;line-height:1.5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.overview-notices p+p{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.today-status{font-size:1.15rem;font-weight:650;margin:0 0 16px}.absence-range{font-size:.85rem;margin:-8px 0 20px}.relative-label{display:block;font-size:.75rem;font-weight:700;color:var(--blue);margin-bottom:4px}.admin-form textarea{font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;resize:vertical}

.today-divider{border:0;border-top:1px solid currentColor;opacity:.22;margin:0 0 18px}.admin-tabs{flex-direction:column;align-items:stretch}.admin-tabs>button{text-align:left}.admin-tabs>button[aria-expanded=true]{border-color:var(--blue);background:var(--tint);color:var(--text)}.admin-tabs>#admin-editor{min-width:0;width:100%}.admin-tabs>#admin-editor .admin-form{margin:0 0 8px}

.bulletin-entry>p{white-space:pre-wrap;overflow-wrap:anywhere}.bulletin-entry>small{display:block;color:var(--muted);overflow-wrap:anywhere}
/* Wallpaper themes share the same semantic colors as the calendar and dialogs. */
body{isolation:isolate}
html[data-wallpaper=on] body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgb(0 0 0 / var(--wallpaper-dim)),rgb(0 0 0 / var(--wallpaper-dim))),var(--wallpaper);background-position:center;background-size:cover;background-color:var(--bg)}
html[data-wallpaper=on] body{background-image:none!important}
html[data-wallpaper=on] :is(.card,.metrics article,.overview-notices){background:color-mix(in srgb,var(--surface) calc(var(--panel-alpha)*100%),transparent);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));border-radius:var(--panel-radius);border-color:var(--panel-border);box-shadow:var(--panel-shadow)}
html[data-wallpaper=on] :is(.sidebar,.topbar,.page-heading,footer,.sync-status){background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur))}
html[data-wallpaper=on] :is(.topbar,.page-heading,footer,.sync-status){border-radius:var(--panel-radius);padding:14px 18px}
html[data-wallpaper=on] .next-shift{border-radius:var(--panel-radius);box-shadow:var(--panel-shadow)}
html[data-wallpaper=on] .day-cell{background:var(--surface)}
html[data-wallpaper=on] .day-cell.weekend{background:var(--bg);border-bottom:2px solid var(--line)}
html[data-wallpaper=on] .day-cell.selected{background:var(--tint);border:2px solid var(--blue)}
html[data-wallpaper=on] :is(button:not(.day-cell),input,select){border-radius:min(var(--panel-radius),14px)}
.theme-grid .swatch{width:34px;height:34px;border-radius:10px}
.appearance-editor{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:clamp(16px,4vw,40px);padding-bottom:max(24px,env(safe-area-inset-bottom));overflow:auto;background-color:var(--bg);background-image:linear-gradient(rgb(0 0 0 / var(--wallpaper-dim)),rgb(0 0 0 / var(--wallpaper-dim))),var(--wallpaper);background-size:cover;background-position:center;background-attachment:fixed;color:var(--text)}
.appearance-editor::backdrop{background:#000b}
.appearance-editor>header{max-width:1100px;margin:0 auto 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border-radius:16px;padding:20px}
.appearance-editor h1{font-size:clamp(1.5rem,4vw,2.2rem)}
.appearance-editor header h1,.appearance-editor header p{margin:0}
.appearance-editor header .eyebrow{font-size:.6rem!important;margin-bottom:8px}
#appearance-close{font-size:26px;min-width:44px;line-height:1}
.appearance-layout{max-width:1100px;margin:auto;display:grid;gap:22px}
.appearance-preview .card{padding:22px}.appearance-preview .next-shift{padding:20px}.appearance-preview .next-shift p:last-child{margin-bottom:0}
.appearance-sample{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 10px}
.appearance-sample .day-cell{height:64px;min-height:64px;display:flex;flex-direction:column;justify-content:center;align-items:stretch}
.appearance-sample .cal-shift{margin-top:3px}.appearance-preview>.card>span{font-size:.8rem}
.appearance-controls{display:grid;gap:18px;min-width:0}
.appearance-controls section{display:grid;gap:18px}
.appearance-controls label{display:grid;gap:10px;min-width:0}
.appearance-controls input[type=color]{width:100%;height:48px;padding:5px}
.appearance-controls input[type=range]{width:100%;padding:0;accent-color:var(--blue)}
.appearance-controls .appearance-range{grid-template-columns:1fr auto;align-items:center}.appearance-range input{grid-column:1/-1}
.appearance-controls .appearance-check{display:flex;align-items:center;gap:10px;line-height:1.45}.appearance-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--blue)}
.appearance-controls h2,.appearance-controls .footnote{margin:0}
.appearance-controls input[type=file]{width:100%;font-size:.8rem}
.appearance-actions{display:flex;flex-wrap:wrap;gap:12px;background:var(--surface);padding:16px;border-radius:16px}
.appearance-actions button{flex:1}.appearance-actions button[type=submit]{background:var(--shift-bg);color:var(--shift-text);font-weight:700}
#appearance-status:not(:empty){margin:0;background:var(--surface);padding:14px;border-radius:12px}
@media(min-width:800px){.appearance-layout{grid-template-columns:1fr 1.15fr;align-items:start}.appearance-preview{position:sticky;top:20px}}
/* Compact, centered role badges; calendar badges keep their rectangular shape. */
.shift-row .shift-symbol,.detail .shift-row .shift-symbol{width:32px;height:32px;min-width:32px;flex:0 0 32px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:.78rem;line-height:1;letter-spacing:0}
main{padding-top:calc(env(safe-area-inset-top,0px) + 26px)}
.calendar-grid .day-cell.today .day-number{background:none;color:inherit;border-radius:0;box-shadow:none;font-weight:750}
html .calendar-grid .day-cell.today{border:2px solid var(--today-border);box-shadow:none}
.calendar-grid .day-cell.today.selected{box-shadow:inset 0 0 0 1px var(--blue)}
.calendar-grid .day-number{align-self:center;text-align:center}
.night-moon{width:11px;height:11px;fill:var(--moon-legend);stroke:none}
.cal-shift .night-moon{width:11px;height:11px;left:1px;fill:var(--moon-ink);stroke:none}
html.appearance-open{overflow:hidden;overscroll-behavior:none}
.appearance-editor{overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable}
@media(min-width:1100px){main{padding-top:18px}}
.cal-shift.night{position:static}
.cal-shift .night-moon{left:3px;top:4px;transform:none;fill:var(--moon-legend)}
.icon-settings{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.icon-options{display:flex;gap:16px;align-items:center}.icon-options img{border-radius:13px;border:1px solid var(--line);flex-shrink:0}.icon-options label{display:grid;gap:8px;min-width:0;flex:1}.icon-options select{width:100%;font-size:.85rem}

/* Keep controls next to their toggle, including Safari checkbox changes. */
.appearance-controls [hidden],.glass-strength[hidden]{display:none!important}
.topbar{margin-bottom:23px}
.page-heading{margin-bottom:20px}
html .calendar-grid .day-cell.today{background:color-mix(in srgb,var(--surface) 86%,var(--today-border) 14%)}
.glass-strength{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px;font-size:.9rem}.glass-strength input{grid-column:1/-1;width:100%;accent-color:var(--blue)}

@media(max-width:1099px){main{padding-bottom:calc(var(--bottom-nav-height,calc(100px + env(safe-area-inset-bottom,0px))) + 24px)}html{scroll-padding-bottom:calc(var(--bottom-nav-height,calc(100px + env(safe-area-inset-bottom,0px))) + 24px)}}

html.admin-open{overflow:hidden;overscroll-behavior:none}
.admin-dialog{overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable}
.admin-dialog :is(fieldset,.admin-table){overscroll-behavior:contain}

/* Administration uses the same full-screen surface as the appearance editor. */
.admin-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:clamp(16px,4vw,40px);padding-top:calc(env(safe-area-inset-top,0px) + 20px);padding-bottom:max(24px,env(safe-area-inset-bottom,0px));background-color:var(--bg);background-image:linear-gradient(rgb(0 0 0 / var(--wallpaper-dim,.48)),rgb(0 0 0 / var(--wallpaper-dim,.48))),var(--wallpaper,none);background-size:cover;background-position:center;background-attachment:fixed;touch-action:pan-y pinch-zoom}
.admin-dialog>*{max-width:1100px;margin-left:auto;margin-right:auto}
.admin-heading{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:24px}
.admin-heading .eyebrow{margin-bottom:8px}
#admin-close{min-width:44px;min-height:44px}
#admin-login{max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.admin-dialog :is(input,select,textarea){font-size:max(16px,1rem)}
.admin-dialog :is(.admin-tabs,.admin-toolbar,.admin-form,.admin-review,#import-question){background:var(--surface);border-radius:16px;padding:18px}
#admin-error:not(:empty){background:var(--surface);border-radius:12px;padding:14px}
html:not([data-wallpaper=on]) .admin-dialog{background-image:none}

/* The focus target must not draw a page-wide ring after navigation. */
main:focus{outline:none}
html{scroll-padding-top:130px}
.topbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:6;background:color-mix(in srgb,var(--surface) 94%,transparent);isolation:isolate;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:14px 18px}
.topbar::before{content:'';position:absolute;inset:-12px -6px;z-index:-1;border-radius:26px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.absence-caption{display:block;font-size:.8rem;margin-top:3px}
.appearance-choice{display:grid;gap:8px;margin:20px 0}.appearance-choice select{width:100%;font-size:16px}


.statistics-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;padding:18px;margin-bottom:20px}
.statistics-filter{display:grid;gap:8px;min-width:0;font-size:.78rem;font-weight:600;color:var(--muted)}
.select-shell{display:block;position:relative;min-width:0}
.select-shell::after{content:'';position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.statistics-filter select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;min-height:48px;font-size:16px;font-weight:500;line-height:1.4;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 42px 11px 14px;text-overflow:ellipsis}
.statistics-filter select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Shared page title: wraps naturally alongside the profile on small screens. */
.topbar{height:auto;min-height:88px;gap:14px}
.topbar-title{flex:1;min-width:0;color:var(--text)}
.topbar-title h1{font-size:clamp(1.1rem,2.5vw,1.65rem);line-height:1.25;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}
.topbar-title h1:first-letter{text-transform:uppercase}
.topbar-title p{font-size:.75rem;line-height:1.4;color:var(--muted);margin:6px 0 0;overflow-wrap:anywhere}
.topbar-person{flex:0 0 auto;gap:8px;max-width:45%}
.topbar-person .demo-badge{font-size:.75rem;line-height:1.35;letter-spacing:0;min-width:0;padding:6px 8px;overflow-wrap:anywhere}
@media(max-width:480px){.topbar,html[data-wallpaper=on] .topbar{padding:14px 12px;gap:10px}.topbar-person{gap:6px;max-width:44%}.topbar-person .demo-badge{padding:5px 6px;font-size:.7rem}.topbar-person #inbox-bell{width:34px;height:34px;min-width:34px;padding:6px}.topbar-person #inbox-bell svg{width:20px;height:20px}}

.account-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 28px);border:0;border-radius:0;background:var(--bg);color:var(--text);overflow-y:auto;overscroll-behavior:contain}
.account-dialog>header,.account-content{max-width:720px;margin:0 auto}.account-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.account-dialog header h2{margin:0}.account-content form{display:grid;gap:16px}.account-content label{display:grid;gap:8px}.account-content input,.account-content select,.account-content textarea{font:inherit;font-size:16px;width:100%;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--surface)}.account-content input[type=checkbox]{width:auto}.account-content textarea{resize:vertical}.feedback-list{display:grid;gap:16px;margin-top:24px}.feedback-list p{white-space:pre-wrap;overflow-wrap:anywhere}.feedback-reply{border-left:3px solid var(--blue);padding:12px;background:var(--tint);border-radius:8px}#profile-admin,#profile-password,#profile-reset{display:block;margin-top:12px}#profile-sync-status{margin-top:20px}
/* Private calendar notes share the app's existing card and notice palette. */
.personal-note{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.personal-note p,.personal-note-overview p{white-space:pre-wrap;overflow-wrap:anywhere}
.personal-note-actions{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap}
.personal-note-actions summary{cursor:pointer;color:var(--muted)}
#personal-notes-overview:empty{display:none}
.calendar-card .calendar-heading{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:space-between;gap:10px;align-items:center}
.calendar-month{width:max-content;max-width:100%;min-width:0}
.calendar-month select{display:block;width:auto;max-width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:clamp(1rem,3vw,1.2rem);font-weight:650;padding:11px 34px 11px 12px;border-radius:12px;background:var(--surface);text-overflow:ellipsis}
.calendar-month::after{right:15px}
.calendar-heading .month-controls{gap:4px}.calendar-heading .month-controls button{padding:8px;min-width:30px}
.calendar-legend{margin-top:18px}.calendar-legend>summary{display:inline-flex;align-items:center;cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:.78rem;list-style:none}
.calendar-legend>summary::-webkit-details-marker{display:none}.calendar-legend>summary::after{content:none}
.calendar-legend .legend{margin-top:14px}
.day-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.day-detail-heading .eyebrow{margin:0;font-size:1.05rem!important;letter-spacing:1.3px}
.note-edit-button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:.75rem;font-weight:600;white-space:nowrap}.note-edit-button svg{width:18px;height:18px;flex-shrink:0}
#personal-notes-day:empty{display:none}.detail .personal-note-overview{margin-bottom:18px}
.account-content{min-width:0}.account-content form,.account-content label{min-width:0;max-width:100%}
.account-content input:not([type=checkbox]),.account-content select,.account-content textarea{display:block;box-sizing:border-box;min-width:0;width:100%;max-width:100%}
.account-content input:not([type=checkbox]),.account-content select{height:48px}
.account-content input[type=date],.account-content input[type=datetime-local]{appearance:none;-webkit-appearance:none;overflow:hidden}
.account-content input::-webkit-date-and-time-value{min-width:0;text-align:left}.account-content input::-webkit-calendar-picker-indicator{flex-shrink:0}
.personal-note-form textarea{min-height:136px}.note-delete-confirm summary{cursor:pointer;color:var(--muted)}
.admin-dialog .admin-form,.admin-dialog label{min-width:0;max-width:100%}
.admin-dialog input[type=date]{display:block;width:100%;max-width:100%;min-width:0;height:48px;min-height:48px;box-sizing:border-box;appearance:none;-webkit-appearance:none;overflow:hidden}
.admin-dialog input[type=date]::-webkit-date-and-time-value{min-width:0;text-align:left}
.admin-dialog input[type=date]::-webkit-calendar-picker-indicator{flex-shrink:0}
/* A darker weekend uses the same base in light, dark and wallpaper themes. */
html .calendar-grid .day-cell{--calendar-cell:color-mix(in srgb,var(--surface) 94%,#fff 6%);background:var(--calendar-cell)}
html .calendar-grid .day-cell.weekend{--calendar-cell:color-mix(in srgb,var(--surface) 88%,#000 12%);background:var(--calendar-cell)}
html .calendar-grid .weekday.weekend-heading{background:color-mix(in srgb,var(--surface) 88%,#000 12%)}
html .calendar-grid .day-cell.today{background:color-mix(in srgb,var(--calendar-cell) 86%,var(--today-border) 14%)}
/* Keep scrolling and pinch zoom while suppressing double-tap zoom. */
html,body{touch-action:manipulation}
#profile-sync{display:block;margin-top:24px}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body :is(input,textarea,[contenteditable=true],[contenteditable=true] *){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Keep dropdown arrows away from the edge, including native desktop selects. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:42px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%238692a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
.select-shell select:not([multiple]):not([size]){background-image:none}
.admin-dialog>.admin-month-picker{width:100%;max-width:1100px;margin:12px auto}.admin-month-picker select{width:240px;max-width:100%}
.unread-dot{width:13px;height:13px;background:color-mix(in srgb,var(--blue) 30%,#ff4f65 70%);box-shadow:0 0 0 1px var(--surface)}
.temporary-password{font-family:ui-monospace,monospace}.copy-temporary-password{justify-self:start}

/* Account and device approval screens */
.sidebar[hidden]{display:none!important}.access-card form{display:grid;gap:1rem}.access-card label,.access-list small{display:block}.access-card input{width:100%;box-sizing:border-box}.access-code{display:block;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;margin:1rem 0}.access-list{display:grid;gap:1rem}.access-list article{border:1px solid var(--line,#8885);padding:1rem;border-radius:1rem}.access-list button{margin:.25rem}.access-bootstrap{margin-top:2rem}.access-bootstrap form{margin-top:1rem}
/* Shared sign-in design follows the active application theme. */
.entry .access-card{max-width:480px;border-radius:28px;padding:clamp(24px,5vw,40px);box-shadow:0 22px 70px color-mix(in srgb,var(--blue) 9%,transparent);border:1px solid var(--line)}
.access-brand{display:flex;align-items:center;gap:14px;margin-bottom:30px}.access-brand img{border-radius:14px}.access-brand .eyebrow{margin:0 0 5px;font-size:.72rem;letter-spacing:.16em;font-weight:750;color:var(--blue)}.access-brand span{font-size:.8rem;color:var(--muted)}
.access-card h1{font-size:clamp(1.65rem,5vw,2rem);line-height:1.15;letter-spacing:-.035em}.access-card p{line-height:1.6}.access-card label{font-weight:600}.access-card input{margin-top:8px;min-height:49px;border-radius:13px}.access-card input:focus{outline:2px solid var(--blue);outline-offset:2px}.access-card form{margin-top:24px}.access-card button[type=submit],.access-card>button:first-of-type,.access-link{background:var(--blue);color:white;min-height:48px;border:0;border-radius:13px;font-weight:650}.access-card .access-hint{font-size:.79rem;color:var(--muted);font-weight:400;margin:0}.access-footer{border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:.74rem;text-align:center;color:var(--muted)}.access-identity{padding:18px;border-radius:16px;background:var(--tint);margin:22px 0}.access-identity small,.access-identity strong{display:block}.access-identity small{color:var(--muted);margin-bottom:7px}.access-identity strong{font-size:1.2rem;overflow-wrap:anywhere}.access-link{display:block;text-align:center;padding:14px;text-decoration:none}.access-warning{color:var(--holiday);font-weight:650}
.password-field{display:flex;position:relative;align-items:center;width:100%;margin-top:8px}.password-field input{width:100%;box-sizing:border-box;padding-right:54px!important;margin-top:0!important}.password-peek{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;padding:10px!important;border:0!important;background:transparent!important;color:var(--muted)!important;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.password-peek svg{width:22px;height:22px}.password-peek.revealed{color:var(--blue)!important}.password-peek:focus-visible{outline:2px solid var(--blue)}.access-card [role=alert]:empty,.access-card [data-login-status]:empty{display:none}.access-card [role=alert]{font-size:.87rem;color:var(--holiday)}#create-account{display:grid;gap:12px;margin:20px 0}#create-account select{display:block;width:100%;margin-top:8px}

.profile-security-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin-top:20px}.profile-security-actions>button{width:100%;min-height:48px;white-space:normal;margin:0}.profile-security-actions #profile-admin,.profile-security-actions #profile-password{margin:0}

.annual-breakdowns{display:grid;gap:28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.annual-breakdowns>section{min-width:0}.annual-breakdowns h3{margin:0 0 8px;font-size:1rem}.annual-breakdowns .role-stat>span{overflow-wrap:anywhere;flex:1;min-width:0}.annual-breakdowns .role-stat>strong{white-space:nowrap}.annual-breakdowns .role-stat>small{flex-basis:100%;color:var(--muted)}.annual-months{display:grid;gap:16px;margin-top:22px}.annual-month-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;font-size:.85rem}.annual-month-row>span::first-letter{text-transform:uppercase}.annual-month-row .role-bar{grid-column:1/-1}.annual-month-row.missing{color:var(--muted)}.annual-month-row.missing strong{font-weight:400;font-size:.8rem}.annual-month-row.missing .role-bar{opacity:.45}.annual-stat-note{margin:28px 0 0}@media(min-width:700px){.annual-breakdowns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}

.open-device-page{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:20px;text-align:left;margin:0 0 24px}.open-device-page>span:first-child{font-size:1.05rem;font-weight:700}.open-device-page>small{grid-column:1;color:var(--muted)}.open-device-page>span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-size:1.4rem}.manager-page-heading{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}.profile-scroll,.device-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px;max-height:60vh;max-height:60dvh}.device-scroll{max-height:68vh;max-height:68dvh}.profile-scroll{border:1px solid var(--line);border-radius:16px;background:var(--surface)}.account-row+.account-row{border-top:1px solid var(--line)}.account-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:18px 16px;border:0;background:transparent;border-radius:10px}.account-toggle strong,.account-toggle small{display:block;overflow-wrap:anywhere}.account-toggle small{font-weight:400;color:var(--muted);margin-top:6px}.account-toggle[aria-expanded=true]{background:var(--tint)}.account-chevron{font-size:1.4rem;flex-shrink:0}.account-detail{padding:4px 16px 20px}.account-actions,.device-actions{display:grid;gap:10px;margin-top:12px}.account-actions button,.access-list .device-actions button{margin:0;min-height:44px;text-align:left;white-space:normal}.account-role-action{margin-top:10px!important}.account-toggle:focus-visible,.profile-scroll:focus-visible,.device-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.setup-requests{max-height:35dvh;overflow-y:auto}

.access-onboarding{margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--tint)}.access-onboarding h2{font-size:.95rem;margin:0 0 12px}.access-onboarding p{font-size:.82rem;line-height:1.6;margin:10px 0 0}

dialog.access-manager-dialog[open]{display:flex;flex-direction:column;overflow:hidden}.access-manager-dialog>header{width:100%;flex-shrink:0}.access-manager-dialog>.account-content{width:100%;min-height:0;overflow-y:auto;flex:1}.access-manager-dialog .profile-scroll{overflow-anchor:none}

.password-dialog>header,.password-dialog>.account-content{width:100%;max-width:720px;margin-left:auto;margin-right:auto}

.permission-form{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:14px}.permission-form[hidden]{display:none}.permission-form fieldset{min-width:0;margin:0;padding:0;border:0}.permission-form legend{font-weight:700;margin-bottom:14px}.permission-form label{display:flex;align-items:flex-start;gap:12px;margin:14px 0}.permission-form input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:2px 0}.permission-form .muted{font-size:.85rem;margin:0}

/* Keep the app at its original scale while allowing normal scrolling. */
html,body{touch-action:pan-x pan-y}
@media (pointer:coarse){input,select,textarea{font-size:max(16px,1em)}}

.owner-security-alert{display:block;width:100%;margin:0 0 1.25rem;padding:1rem 1.25rem;text-align:left;border:1px solid var(--blue);border-radius:16px;font-weight:700}.owner-security-alert[hidden]{display:none}.inbox-item [data-security]{font-size:.85rem;line-height:1.4;background:var(--tint);color:var(--blue);flex-shrink:0;align-self:center;padding:.6rem .8rem;width:auto;height:auto;border-radius:10px}

/* Let the device list fill the remaining dialog height, including on short phones. */
.access-manager-dialog>.account-content[data-manager-page=devices]{display:flex;flex-direction:column;overflow:hidden}
.access-manager-dialog [data-manager-page=devices]>.manager-page-heading,.access-manager-dialog [data-manager-page=devices]>p{flex-shrink:0}
.access-manager-dialog [data-manager-page=devices]>.device-scroll{flex:1;min-height:0;max-height:none;grid-auto-rows:max-content;align-content:start;padding:4px 18px 32px 4px;scroll-padding-bottom:32px}
.access-manager-dialog [data-manager-page=devices]>[role=alert]:empty{display:none}

/* Separate the page scrollbar from the nested profile list and its highlighted rows. */
.access-manager-dialog>.account-content[data-manager-page=accounts]{padding-right:16px;scroll-padding-bottom:24px}
.access-manager-dialog [data-manager-page=accounts]>.profile-scroll{padding:8px 16px 24px 8px;scroll-padding-block:12px 24px}
.access-manager-dialog .account-row{padding-block:8px}

.developer-signature .app-version{display:block;margin-top:6px;font-size:.75rem}

.profile-feedback-card{text-align:center}.profile-feedback-card #profile-feedback{display:block;margin-inline:auto}

.profile-settings>#profile-settings-toggle{width:100%;min-height:50px}.profile-settings #profile-settings-panel[hidden]{display:none}.published-schedule .schedule-edit-button{display:block;max-width:100%;white-space:normal;margin-top:18px}

.profile-security-actions{grid-auto-rows:1fr}.profile-security-actions>button{min-height:52px;height:100%;padding:12px 16px;text-align:center}

.published-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.published-controls .info-circle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-family:Georgia,serif;font-size:22px;font-weight:700}.published-schedule #refresh-status:empty{display:none}.published-schedule #published-info{margin-top:18px;margin-bottom:0}.published-schedule #published-info[hidden]{display:none}

.published-controls .info-circle{border:0;border-radius:0;background:transparent;box-shadow:none}.published-controls .info-circle:hover,.published-controls .info-circle:active{background:transparent;border-color:transparent;box-shadow:none}

/* One spacing scale for page cards; controls inside cards retain their spacing. */
:root{--card-gap:20px}
.page-content{display:flex;flex-direction:column;gap:var(--card-gap)}
.page-content>:is(.card,.section,.metrics,.overview-grid,.calendar-layout,.next-shift,.overview-notices,.holiday-strip,.event-strip){margin-block:0}
.page-content :is(.overview-grid,.calendar-layout,.metrics){gap:var(--card-gap)}
#profile-settings-panel{display:flex;flex-direction:column;gap:var(--card-gap);padding-top:var(--card-gap)}
#profile-settings-panel>:is(.card,.overview-grid){margin-block:0}
.published-schedule{position:relative}
.published-schedule>h2{padding-right:36px}
.published-schedule>.info-circle{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-family:Georgia,serif;font-size:16px;font-weight:700}
.published-schedule>.info-circle:hover,.published-schedule>.info-circle:active{background:transparent;box-shadow:none}

.topbar{margin-bottom:var(--card-gap)}.page-content>#personal-notes-overview>.overview-notices{margin-block:0}

/* Native checkbox behavior, switch presentation. Animation runs only on interaction. */
html body input[type=checkbox][role=switch]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;box-sizing:border-box;flex:0 0 48px;width:48px;min-width:48px;max-width:48px;height:28px;padding:0;margin:2px 0;vertical-align:middle;border:1px solid color-mix(in srgb,var(--muted) 65%,var(--surface));border-radius:999px;background:color-mix(in srgb,var(--muted) 35%,var(--surface));cursor:pointer;transition:background-color .24s ease,border-color .24s ease}
html body input[type=checkbox][role=switch]::before{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transform:translateX(0);transition:transform .36s cubic-bezier(.34,1.56,.64,1)}
html body input[type=checkbox][role=switch]:checked{background:var(--blue);border-color:var(--blue)}
html body input[type=checkbox][role=switch]:checked::before{transform:translateX(20px)}
html body input[type=checkbox][role=switch]:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
html body input[type=checkbox][role=switch]:disabled{opacity:.45;cursor:not-allowed}
.ornament-setting,.appearance-check,.admin-check,.permission-form label{min-height:44px;gap:12px;align-items:center}
@media(prefers-reduced-motion:reduce){html body input[type=checkbox][role=switch],html body input[type=checkbox][role=switch]::before{transition:none}}
/* Keep page content out of the system status region; mobile navigation floats above its safe area. */
@media(max-width:899px){
 body:not(.entry) main{padding-top:0;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 .topbar,html[data-wallpaper=on] .topbar{top:0;min-height:72px;margin-top:0;margin-left:-20px;margin-right:-20px;border-radius:0;padding:calc(10px + env(safe-area-inset-top,0px)) 20px 12px;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
 .topbar::before{display:none}
 .sidebar,html[data-wallpaper=on] .sidebar{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;max-width:430px;margin-inline:auto;padding:0;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:0 8px 28px #0003;z-index:8}
 .sidebar nav{padding:6px;gap:4px;justify-content:space-between}
 .sidebar nav a{flex:1;min-width:44px;min-height:48px;padding:12px;border-radius:22px;justify-content:center}
 .sidebar nav a>span:first-child{font-size:24px;display:flex}
 .sidebar .nav-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .sidebar nav a[aria-current]{background:color-mix(in srgb,var(--blue) 16%,var(--surface));color:var(--blue)}
}
@supports not (backdrop-filter:blur(1px)){.sidebar{background:var(--surface)}}
.fund-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 24px}.fund-total>strong{font-size:2.4rem;color:var(--blue);letter-spacing:-1px}.fund-total strong small{font-size:1rem;letter-spacing:0}.fund-total>span{color:var(--muted);font-size:.9rem}
.fund-year{margin-top:22px}.fund-year summary{cursor:pointer;padding:12px 0;font-weight:600}.fund-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px}.fund-month{display:grid;gap:7px;padding:16px;border:1px solid var(--line);border-radius:14px}.fund-month>span{text-transform:capitalize}.fund-month>strong{font-size:1.3rem}.fund-month>small{color:var(--muted);font-size:.75rem}.fund-month.is-selected{border-color:var(--blue);background:var(--tint)}

nav a>.nav-label{font-size:.85rem;line-height:1.3}
@media(prefers-reduced-motion:no-preference){.sidebar nav a>span:first-child{transition:transform .22s cubic-bezier(.34,1.4,.64,1)}.sidebar nav a:active>span:first-child{transform:scale(.9)}}

/* Fixed mobile chrome must not travel with Safari's pull-down overscroll. */
@media(max-width:899px){
 html,body{overscroll-behavior-y:none}
 body:not(.entry) main{padding-top:calc(var(--topbar-height,calc(72px + env(safe-area-inset-top,0px))) + var(--card-gap))}
 .topbar,html[data-wallpaper=on] .topbar{position:fixed;top:0;left:0;right:0;width:auto;margin:0;z-index:9}
 .sidebar,html[data-wallpaper=on] .sidebar{bottom:max(12px,calc(env(safe-area-inset-bottom,0px) - 12px));background:color-mix(in srgb,var(--surface) 64%,transparent);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);border-color:color-mix(in srgb,var(--line) 65%,transparent);box-shadow:inset 0 1px 0 #ffffff30,0 6px 24px #0002}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sidebar,html[data-wallpaper=on] .sidebar{background:var(--surface)}}

.fund-year-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 16px}.fund-year-controls button{min-width:44px;min-height:44px;font-size:24px;padding:6px 14px}.fund-year-controls strong{font-size:1.15rem}
@media(max-width:899px){
 body:not(.entry){height:100dvh;overflow:hidden}
 body:not(.entry) main{position:fixed;top:var(--topbar-height,calc(72px + env(safe-area-inset-top,0px)));bottom:0;left:0;right:0;width:100%;max-width:none;margin:0;padding-top:var(--card-gap);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none;scroll-padding-top:var(--card-gap);-webkit-overflow-scrolling:touch}
 /* Sibling filter planes keep halo and inner glass independently adjustable. */
 .sidebar,html[data-wallpaper=on] .sidebar{isolation:auto;overflow:visible;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none}
 .sidebar::before{content:'';position:absolute;inset:calc(-1 * var(--nav-halo-spread,10px));border-radius:calc(28px + var(--nav-halo-spread,10px));pointer-events:none;backdrop-filter:blur(var(--nav-halo-blur,0px));-webkit-backdrop-filter:blur(var(--nav-halo-blur,0px));background:transparent;z-index:0;mask-image:var(--nav-halo-mask);-webkit-mask-image:var(--nav-halo-mask);mask-size:var(--nav-halo-size);-webkit-mask-size:var(--nav-halo-size);mask-position:center,center,top left,top right,bottom left,bottom right;-webkit-mask-position:center,center,top left,top right,bottom left,bottom right;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
 .sidebar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(rgb(0 0 0 / var(--nav-darkening,0)),rgb(0 0 0 / var(--nav-darkening,0))),linear-gradient(135deg,rgb(255 255 255 / var(--nav-reflection,0)),transparent 55%),color-mix(in srgb,var(--surface) var(--nav-opacity,14%),transparent);backdrop-filter:blur(var(--nav-blur,8px)) saturate(var(--nav-saturation,125%));-webkit-backdrop-filter:blur(var(--nav-blur,8px)) saturate(var(--nav-saturation,125%));border:1px solid color-mix(in srgb,var(--text) var(--nav-border,22%),transparent);box-shadow:none;z-index:0}
 .sidebar nav{position:relative;z-index:1}
 .sidebar nav a{color:var(--text);box-shadow:none}
 .sidebar nav a[aria-current]{background:color-mix(in srgb,var(--text) var(--nav-selection,14%),transparent);color:var(--blue);box-shadow:none}


}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sidebar,html[data-wallpaper=on] .sidebar{background:var(--surface)}}

.navigation-tuner{margin-top:22px}.navigation-tuner summary{cursor:pointer;font-weight:600;padding:12px 0}.navigation-tuner .appearance-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:22px}.navigation-tuner output{font-variant-numeric:tabular-nums;color:var(--blue);white-space:nowrap}.navigation-tuner input[type=range]{grid-column:1/-1;width:100%;margin:0;accent-color:var(--blue)}

.navigation-lens{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}

.navigation-presets{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.navigation-presets button{flex:1 1 160px;min-height:44px}

.liquid-navigation-canvas{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);pointer-events:none;z-index:0}.sidebar.liquid-navigation-active::after{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Plain disclosure labels retain native keyboard and expanded semantics. */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::marker{content:''}
@media(max-width:899px){
 .topbar,html[data-wallpaper=on] .topbar{border-bottom:1px solid color-mix(in srgb,var(--line) 35%,transparent);box-shadow:none}
 html[data-navigation-glass=on] .sidebar nav a[aria-current]{background:rgb(255 255 255 / 15%)}
 html[data-navigation-glass=on][data-scheme=light] .sidebar nav a{color:#f7f9fc}
 html[data-navigation-glass=on][data-scheme=light] .sidebar nav a[aria-current]{color:#fff;background:rgb(255 255 255 / 23%)}
}

/* Live backdrop bridges asynchronous refraction captures without stale page text. */
.liquid-navigation-live{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;backdrop-filter:blur(var(--nav-blur,8px)) saturate(var(--nav-saturation,125%));-webkit-backdrop-filter:blur(var(--nav-blur,8px)) saturate(var(--nav-saturation,125%))}
.liquid-navigation-canvas{transition:opacity .18s ease-out}
.sidebar.liquid-navigation-pending::after{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.liquid-navigation-canvas{transition:none}}

/* Before scrolling, glass shows the theme alone, not delayed page text. */
.liquid-navigation-live{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-wallpaper=on] .liquid-navigation-live{background-image:linear-gradient(rgb(0 0 0 / var(--wallpaper-dim)),rgb(0 0 0 / var(--wallpaper-dim))),var(--wallpaper);background-size:cover;background-position:center}
.liquid-navigation-canvas{transition:none}
.fund-year-controls{justify-content:center;gap:8px}
.fund-year-controls button{width:44px;min-width:44px;height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text);font-size:28px}
.fund-year-controls button:hover:not(:disabled){background:color-mix(in srgb,var(--text) 8%,transparent)}

.fund-comparison-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.fund-comparison-values>div{display:flex;flex-direction:column;gap:8px}
.fund-comparison-values span{color:var(--muted);font-size:.85rem}
.fund-comparison-values strong{font-size:clamp(1.2rem,4vw,1.8rem);font-variant-numeric:tabular-nums}
.annual-stats>.fund-comparison{margin-top:var(--card-gap)}
.annual-fund{grid-column:1/-1;color:var(--muted)}
.move-notice{background:var(--notice);color:var(--text);border:2px solid var(--holiday);border-radius:18px;padding:20px;margin:0 0 24px}.move-notice h2{color:var(--holiday);margin-bottom:8px}.move-notice p{margin-bottom:8px}.move-notice button{margin-top:8px;width:100%;border:0;border-radius:12px;padding:14px;background:var(--blue);color:#fff;font-weight:600}.move-notice button:disabled{opacity:.6}.move-notice a{font-weight:600}