/* Phase 5 round 2. Shared surfaces, controls and motion; overlay geometry stays
   in overlays.css. Only the new mobile shell sheets use bottom alignment. */
body{background:var(--dp-bg);color:var(--dp-ink)}
:where(.topbar,.calendar-area,.summary,.auth-card,.client-tab,.view-switch,.home-bottom-nav,#drawer,.drawer-footer){transition:background-color var(--motion-slow) var(--ease-soft),color var(--motion-slow) var(--ease-soft),border-color var(--motion-slow) var(--ease-soft)}
body::before{background:radial-gradient(ellipse at 10% 20%,#ffffff04,transparent 48%),radial-gradient(ellipse at 95% 85%,#c8834008,transparent 46%),var(--dp-bg)}
body::after{background-image:none!important}
:root[data-theme=light] body::before{background:radial-gradient(ellipse at 10% 20%,#dccab80c,transparent 48%),var(--dp-bg)}
/* Shared controls do not alter input date dimensions or stored values. */
.primary{background:linear-gradient(135deg,var(--dp-accent),#f37112);color:var(--dp-on-accent);border-color:var(--action-border);border-radius:var(--dp-radius-control);min-height:44px;box-shadow:var(--dp-glow)}
.secondary{border-radius:var(--dp-radius-control);background:var(--dp-inset);border-color:var(--dp-line-strong);color:var(--dp-ink);min-height:44px}
:where(button,summary,a,input,select,textarea){transition:background-color var(--motion-slow) var(--ease-soft),color var(--motion-slow) var(--ease-soft),border-color var(--dp-motion),box-shadow var(--dp-motion),transform var(--motion-fast) var(--ease-soft)}
:where(button,summary,a):focus-visible{outline:2px solid var(--dp-accent);outline-offset:3px}
:where(input,select,textarea){accent-color:var(--dp-accent)}
:where(input,select,textarea):focus-visible{outline:2px solid var(--dp-accent);outline-offset:2px}
:where(button:active:not(:disabled),summary:active){transform:scale(.98);background-color:var(--dp-highlight)}
.primary:active:not(:disabled){background:var(--dp-accent-pressed)}
button:disabled{box-shadow:none}
@media(hover:hover) and (pointer:fine){
 :where(button:not(:disabled),summary):hover{background-color:var(--dp-highlight)}
 .primary:not(:disabled):hover,.phase5-home .primary:not(:disabled):hover,#drawer.record-drawer .primary:not(:disabled):hover{background:var(--dp-accent-hover);box-shadow:var(--dp-glow);transform:translateY(-1px)}
 .event:hover{transform:translateY(-2px);border-color:var(--dp-line-strong)}
}
/* Shared overlay surfaces + external action areas. */
#overlay-root dialog,#overlay-root #drawer.record-drawer,#overlay-root :is(.account-popover,.client-menu-options,.period-picker){background:var(--dp-panel);border-color:var(--dp-line);box-shadow:var(--dp-shadow);border-radius:var(--dp-radius-panel);backdrop-filter:blur(var(--dp-blur)) saturate(var(--dp-saturation));-webkit-backdrop-filter:blur(var(--dp-blur)) saturate(var(--dp-saturation))}
#overlay-root #drawer.structured-dialog .drawer-footer{background:var(--dp-nav);border-top-color:var(--dp-line);backdrop-filter:blur(44px) saturate(var(--dp-saturation));-webkit-backdrop-filter:blur(44px) saturate(var(--dp-saturation))}
#overlay-root #drawer.day-details-drawer{border-radius:28px 28px 0 0}
#drawer h2{font-size:27px;letter-spacing:-.8px;color:var(--dp-ink)}
#drawer :is(input:not([type=date]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea),.auth-card input{background:var(--dp-field);border:1px solid var(--dp-line-strong);border-radius:var(--dp-radius-input);color:var(--dp-ink);font-size:16px}
#drawer input[type=date]{background:var(--dp-field);color:var(--dp-ink);border-color:var(--dp-line-strong)}
#drawer label{color:var(--dp-muted)}
#overlay-root :is(.account-popover,.client-menu-options,.period-picker){border-radius:20px}
.account-actions button,.settings-links button{border-radius:14px;min-height:44px}
/* Login shares the shell without modifying any Auth form/control contracts. */
#app:not(.phase5-home){max-width:1500px;margin:auto;padding:calc(var(--safe-top) + 24px) 32px 24px}
.auth-layout{min-height:calc(100dvh - var(--safe-top) - 48px);padding:48px 36px;gap:clamp(30px,8vw,120px);align-items:center}
.auth-card{background:var(--dp-panel);border:1px solid var(--dp-line);border-radius:32px;box-shadow:var(--dp-shadow);padding:36px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.auth-card input{min-height:48px}.auth-card .primary{min-height:48px}
.auth-emblem{filter:var(--logo-filter);opacity:1}.auth-welcome h2{color:var(--dp-ink)}
.auth-signature{color:var(--dp-accent-text)}
/* New sheets use the same structured header/body/footer and scroll lock. */
.shell-client-list,.shell-account-actions{display:flex;flex-direction:column;gap:8px}
.shell-client,.shell-account-actions button{display:flex;align-items:center;gap:14px;min-height:58px;width:100%;padding:10px 14px;border:1px solid transparent;border-radius:18px;text-align:left}
.shell-client>span:nth-child(2){flex:1;overflow-wrap:anywhere}.shell-client>svg{margin-left:auto}
.shell-client.selected{background:var(--accent-soft);border-color:#ff7a1a20;color:var(--dp-accent-text)}
.shell-account-actions button>svg:last-child,.shell-account-actions button>span{margin-left:auto}
.shell-sheet .account-identity{padding:0 0 24px}.shell-sheet .account-avatar{width:44px;height:44px;font-size:16px}
#overlay-root #drawer.shell-sheet .drawer-footer{flex-wrap:wrap;gap:10px}
@media(min-width:701px) and (max-width:1150px){.phase5-home .topbar{padding-inline:14px}.phase5-home .brand{font-size:16px}.phase5-home .clients{padding-inline:10px}.phase5-home .account-name{display:none}}
@media(max-width:700px){
 .phase5-home .home-bottom-nav{border-radius:999px}
 .phase5-home .home-bottom-nav button{border-radius:999px}
 .home-bottom-nav button.is-active{background:var(--accent-soft);color:var(--dp-accent-text);box-shadow:inset 0 1px var(--dp-highlight)}
 .phase5-home .home-bottom-nav button svg{width:23px;height:23px}
 .phase5-home .home-bottom-nav .home-new-icon svg{width:26px;height:26px;stroke-width:1.9}
 .phase5-home .topbar{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:center}
 #overlay-root #drawer.shell-sheet{inset:auto var(--safe-right) 0 var(--safe-left);margin:0 auto;width:calc(100% - var(--safe-left) - var(--safe-right));max-width:620px;border-radius:30px 30px 0 0;border-inline:0;border-bottom:0;border-top:1px solid var(--dp-line-strong);box-shadow:0 -16px 56px #00000024}
 #overlay-root #drawer.shell-sheet .dialog-header::before{content:'';display:block;width:34px;height:4px;border-radius:999px;margin:0 auto 14px;background:var(--dp-line-strong)}
 #overlay-root #drawer.shell-sheet .drawer-footer{padding-bottom:calc(16px + var(--safe-bottom))}
 #app:not(.phase5-home){padding:calc(var(--safe-top) + 12px) 14px 24px}
 .auth-layout{padding:32px 0;gap:24px}.auth-card{padding:24px;border-radius:28px}.auth-welcome{padding:0 10px}.auth-welcome h2{font-size:28px}
}
/* Static blur; animate only content opacity/transform, never viewport geometry. */
@keyframes glass-arrive{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes sheet-arrive{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes veil-arrive{from{opacity:0}to{opacity:1}}
#overlay-root dialog[open]{animation:glass-arrive var(--motion-normal) var(--ease-arrive)}
#overlay-root dialog[open]::backdrop{animation:veil-arrive var(--motion-normal) var(--ease-soft)}
#overlay-root [popover]:popover-open{animation:glass-arrive var(--motion-fast) var(--ease-arrive);transform-origin:top right}
@media(max-width:700px){#overlay-root #drawer:is(.shell-sheet,.day-details-drawer)[open]{animation:sheet-arrive var(--motion-slow) var(--ease-arrive)}}
/* Native discrete close transitions retain top-layer and focus semantics. */
@supports(transition-behavior:allow-discrete){
 #overlay-root dialog{transition:opacity var(--motion-fast) var(--ease-soft),transform var(--motion-fast) var(--ease-soft),display var(--motion-fast) allow-discrete,overlay var(--motion-fast) allow-discrete;opacity:0;transform:translateY(8px) scale(.99)}
 #overlay-root dialog[open]{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 :where(button:active:not(:disabled),summary:active),#overlay-root dialog{transform:none!important}
}

/* Round 3: shared action states, no geometry or data-flow changes. */
.secondary,.danger-button{border-radius:var(--dp-radius-control);min-height:44px;border:1px solid var(--dp-line);box-shadow:none}
.danger-button{background:var(--dp-danger-surface);color:var(--dp-error)}
.text-button.danger{color:var(--dp-error);border-radius:var(--dp-radius-control)}
.primary:disabled,.secondary:disabled,.danger-button:disabled{transform:none;filter:none;opacity:.42;box-shadow:none}
@media(hover:hover) and (pointer:fine){
 .secondary:not(:disabled):hover{background:var(--dp-highlight);border-color:var(--dp-line-strong)}
 .danger-button:not(:disabled):hover,.text-button.danger:not(:disabled):hover{background:color-mix(in srgb,var(--dp-error) 15%,transparent);color:var(--dp-error)}
}
.primary:active:not(:disabled),.phase5-home .primary:active:not(:disabled),#drawer.record-drawer .primary:active:not(:disabled){background:var(--dp-accent-pressed);transform:scale(.98);box-shadow:none}
.secondary:active:not(:disabled),.danger-button:active:not(:disabled){transform:scale(.98);background:var(--dp-highlight)}
@media(max-width:700px){
 #overlay-root #drawer.day-details-drawer{border-inline:0;border-bottom:0;border-top:1px solid var(--dp-line-strong);box-shadow:0 -16px 56px #00000024}
 .home-bottom-nav button:active:not(:disabled){transform:scale(.96);background-color:var(--accent-soft)}
}
@media(prefers-reduced-motion:reduce){.primary:active:not(:disabled),.phase5-home .primary:active:not(:disabled),#drawer.record-drawer .primary:active:not(:disabled),.home-bottom-nav button:active:not(:disabled){transform:none}}

/* Accessible native switch: device-only visual preference. */
.contrast-preference{position:relative;display:flex!important;align-items:center;gap:16px;min-height:44px;margin-top:20px;cursor:pointer}
.contrast-preference>span:first-child{flex:1;min-width:0}
.contrast-preference strong{display:block;font-size:14px;font-weight:500;line-height:1.5}
.contrast-preference small{display:block;font-size:12px;color:var(--dp-muted);line-height:1.6;margin-top:6px;font-weight:400}
.contrast-preference input[data-extra-contrast-toggle]{position:absolute;right:0;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}
.contrast-switch{flex:0 0 44px;width:44px;height:26px;border:1px solid var(--dp-line-strong);background:var(--dp-inset);border-radius:99px;pointer-events:none;transition:background-color var(--motion-fast) var(--ease-soft)}
.contrast-switch::after{content:'';display:block;width:18px;height:18px;border-radius:50%;margin:3px;background:var(--dp-muted);transition:transform var(--motion-fast) var(--ease-soft),background-color var(--motion-fast) var(--ease-soft)}
.contrast-preference input:checked+.contrast-switch{background:var(--dp-accent)}
.contrast-preference input:checked+.contrast-switch::after{transform:translateX(18px);background:var(--dp-on-accent)}
.contrast-preference input:focus-visible+.contrast-switch{outline:2px solid var(--dp-accent);outline-offset:4px}