/* Shared glass treatment for floating selections and notices; no interaction changes. */
:root{
 --floating-blur:12px;--floating-backdrop-blur:2px;
 --floating-title-size:20px;--floating-body-size:17px;--floating-note-size:14px;
 --floating-glass:color-mix(in srgb,var(--apple-surface) 38%,transparent);
 --floating-border:color-mix(in srgb,var(--apple-white) 78%,var(--line));
 --floating-sheen:color-mix(in srgb,var(--apple-white) 8%,transparent);
 --floating-shadow:0 12px 36px color-mix(in srgb,var(--apple-black) 17%,transparent);
 --floating-scrim:color-mix(in srgb,var(--apple-black) 14%,transparent);
}
:root[data-theme=dark]{
 --floating-glass:color-mix(in srgb,var(--apple-surface) 42%,transparent);
 --floating-border:color-mix(in srgb,var(--apple-white) 24%,transparent);
 --floating-sheen:color-mix(in srgb,var(--apple-white) 4%,transparent);
 --floating-shadow:0 12px 36px color-mix(in srgb,var(--apple-black) 32%,transparent);
 --floating-scrim:color-mix(in srgb,var(--apple-black) 24%,transparent);
}
@media screen{
 /* A brighter rim and two soft shadows distinguish light glass from its canvas. */
 html[data-theme=light] body.workspace-ui{
  --floating-border:color-mix(in srgb,var(--apple-white) 92%,var(--line));
  --floating-sheen:color-mix(in srgb,var(--apple-white) 14%,transparent);
  --floating-shadow:0 12px 36px color-mix(in srgb,var(--apple-black) 15%,transparent),0 1px 3px color-mix(in srgb,var(--apple-black) 8%,transparent);
 }
 body.workspace-ui :is(#attendanceMonthPicker,#attendanceActionsMenu,#attendanceDayPicker,#cellRules),
 body.workspace-ui .app-notice-toast,
 body.workspace-ui .duty-picker-panel,
 body.workspace-ui #appNoticeDialog .app-notice-card{
  border:1px solid var(--floating-border);border-radius:var(--radius-panel);
  background:linear-gradient(135deg,var(--floating-sheen),transparent 65%),var(--floating-glass);
  backdrop-filter:blur(var(--floating-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--floating-blur)) saturate(150%);
  box-shadow:var(--floating-shadow),inset 0 1px 0 var(--floating-sheen),inset 0 -1px 0 color-mix(in srgb,var(--apple-black) 5%,transparent);
  color:var(--text);
 }
 /* Popovers keep the rest of the page available, with blur confined to their surface. */
 body.workspace-ui :is(#attendanceMonthPicker,#attendanceActionsMenu,#attendanceDayPicker,#cellRules)::backdrop{background:transparent}
 body.workspace-ui #attendanceMonthPicker .attendance-month-year button,
 body.workspace-ui #attendanceMonthPicker .attendance-month-grid button:not([aria-pressed=true]){background:color-mix(in srgb,var(--surface) 22%,transparent)}
 body.workspace-ui #attendanceMonthPicker .attendance-month-grid button:not([aria-pressed=true]):hover{background:var(--info-bg);color:var(--accent)}
 body.workspace-ui #attendanceDayPicker .day-picker-options button:not([aria-pressed=true]){background:transparent}
 body.workspace-ui #attendanceDayPicker .day-picker-options button:not([aria-pressed=true]):hover{background:var(--bg-alt)}
 /* Preserve centered/scoped confirmations and their existing cancel behavior. */
 body.workspace-ui #appNoticeDialog .app-notice-region{
  background:var(--floating-scrim);backdrop-filter:blur(var(--floating-backdrop-blur));-webkit-backdrop-filter:blur(var(--floating-backdrop-blur));
  animation:floating-scrim-enter 180ms var(--ui-ease);
 }
 body.workspace-ui #appNoticeDialog .app-notice-actions{background:color-mix(in srgb,var(--surface-soft) 25%,transparent);border-color:var(--line)}
 body.workspace-ui #appNoticeDialog .app-notice-card{animation:floating-card-enter 220ms var(--ui-ease)}
 body.workspace-ui .app-notice-toast{font-family:var(--font)}
 /* Readable typography for messages, choices and their actions, including mobile. */
 body.workspace-ui #appNoticeDialog .app-notice-card{width:min(440px,100%);font-family:var(--font)}
 body.workspace-ui #appNoticeDialog h2{font-size:var(--floating-title-size);font-weight:600;line-height:1.35}
 body.workspace-ui #appNoticeDialog .app-notice-message{font-size:var(--floating-body-size);line-height:1.55;color:var(--text)}
 body.workspace-ui #appNoticeDialog button{max-width:100%;min-height:44px;padding:10px 16px;font-size:var(--floating-body-size);font-weight:500;overflow-wrap:anywhere}
 body.workspace-ui #appNoticeDialog button.app-notice-close{width:44px;min-width:44px;height:44px;min-height:44px;padding:12px}
 body.workspace-ui #appNoticeDialog .app-notice-summary-caption,
 body.workspace-ui #appNoticeDialog .app-notice-change-row small,
 body.workspace-ui #appNoticeDialog .app-notice-option small{font-size:var(--floating-note-size);line-height:1.5}
 body.workspace-ui #appNoticeDialog .app-notice-change-row,
 body.workspace-ui #appNoticeDialog .app-notice-option strong{font-size:var(--floating-body-size);line-height:1.5}
 body.workspace-ui #appNoticeDialog .app-notice-option input{width:18px;height:18px;margin-top:4px}
 body.workspace-ui .app-notice-toast{width:min(400px,calc(100vw - 32px));padding:12px 14px;gap:10px;font-size:var(--floating-body-size);line-height:1.5}
 body.workspace-ui .app-notice-toast button{width:44px;min-width:44px;height:44px;min-height:44px;padding:12px}
 body.workspace-ui .app-notice-toast button svg{width:18px;height:18px}
 body.workspace-ui #attendanceMonthPicker .attendance-month-grid button{font-size:var(--floating-body-size)}
 body.workspace-ui #attendanceMonthPicker .attendance-month-footer span{font-size:var(--floating-note-size)}
 body.workspace-ui #attendanceMonthPicker [data-month-now]{min-height:44px;font-size:var(--floating-note-size)}
 body.workspace-ui #attendanceActionsMenu #clearMonth,
 body.workspace-ui #attendanceDayPicker .day-picker-options button{min-height:44px;font-size:var(--floating-body-size)}
 /* Native selects retain their platform controls; glass is for custom floating UI. */
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.workspace-ui :is(#attendanceMonthPicker,#attendanceActionsMenu,#attendanceDayPicker,#cellRules),
  body.workspace-ui .app-notice-toast,
 body.workspace-ui .duty-picker-panel,
  body.workspace-ui #appNoticeDialog .app-notice-card{background:var(--surface)}
 }
}
@keyframes floating-scrim-enter{from{opacity:0}to{opacity:1}}
@keyframes floating-card-enter{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:none}}