/* Shared soft surfaces across account, booking, patient and staff screens. */
:root{--app-surface:#f8faf8;--app-edge:#e1e9e3;--app-raised:5px 6px 15px #244c3b12,-5px -5px 14px #fff;--app-inset:inset 3px 3px 7px #244c3b13,inset -3px -3px 7px #fff}
dialog{background:var(--app-surface);border:1px solid var(--app-edge);box-shadow:15px 18px 50px #173d3626,-8px -8px 28px #ffffffbb;border-radius:26px}
dialog::backdrop{background:#e7efebce;backdrop-filter:blur(8px)}
dialog h2,dialog h3{color:#254e68}
dialog .close{color:#426454;min-width:44px;min-height:44px}
#account .auth-brand{display:flex;width:fit-content;margin:3px auto 24px;gap:8px}
#account>.eyebrow{display:none}
#account .auth-brand .brand-word{font-size:28px}
#account #account-title{color:#254e68;font-size:32px;line-height:1.2;letter-spacing:-.9px}
#account .auth-mode-tabs{background:#f6f9f6;border:1px solid #e5ece6;box-shadow:var(--app-inset);padding:5px;border-radius:14px}
#account .auth-mode-tabs button{flex:1;background:none;border-radius:10px;color:#426251}
#account .auth-mode-tabs button[aria-pressed=true]{background:#fff;color:#0d7667;box-shadow:var(--app-raised)}
dialog input:not([type=checkbox]):not([type=radio]):not([type=file]),dialog select,dialog textarea,.patient-view input:not([type=checkbox]):not([type=radio]):not([type=file]),.patient-view select,.patient-view textarea,#care-admin input:not([type=checkbox]):not([type=radio]):not([type=file]),#care-admin select,#admin-panel input:not([type=file]):not([type=hidden]),#admin-panel textarea,#admin-panel select{background:var(--app-surface);border:1px solid var(--app-edge);border-radius:13px;box-shadow:var(--app-inset);color:#234a59;font-size:16px;min-height:48px}
dialog input:focus-visible,dialog select:focus-visible,dialog textarea:focus-visible,.patient-view input:focus-visible,.patient-view select:focus-visible,.patient-view textarea:focus-visible,#care-admin input:focus-visible,#care-admin select:focus-visible,#admin-panel input:focus-visible,#admin-panel textarea:focus-visible{outline:2px solid #108c80;outline-offset:3px}
#account .auth-input-shell input{background:transparent!important;border:0;border-radius:0;box-shadow:none;min-height:0}
dialog input[type=checkbox]{accent-color:#108c80}
dialog .btn,.patient-primary,#care-admin .btn,#admin-panel .btn{border-radius:14px;box-shadow:4px 5px 12px #244c3b20,inset 1px 1px 2px #ffffff30}
dialog .btn.teal,.patient-primary,#care-admin .btn.teal{background:#1c5967;color:#fff;border:1px solid #286571}
dialog .btn.outline,.patient-secondary,#care-admin .btn.outline,#admin-panel .btn.outline{background:#fff;border:1px solid var(--app-edge);box-shadow:var(--app-raised);color:#25574a;border-radius:12px}
#account .auth-google{background:#f8faf8;border:1px solid var(--app-edge);border-radius:14px;box-shadow:var(--app-raised);color:#254e68}
#account .care-limit,#account #managed-auth-fallback,.patient-onboarding{background:#f3f8f4;border:1px solid #dce8de;border-radius:15px;padding:18px;box-shadow:var(--app-inset)}
body.patient-session{background:#f8faf8}
.patient-shell{background:#fff;border:1px solid var(--app-edge);box-shadow:9px 10px 25px #244c3b0d,-6px -6px 18px #fff}
.patient-avatar,.doctor-avatar{background:#f4f9f6;border:1px solid #e1ebe4;box-shadow:var(--app-inset);color:#2c6453}
.assigned-doctor,.patient-appointment,.patient-empty,.patient-contact,.payment-card,.patient-symptom-details,.patient-staff-visit,.doctor-roster-form,#availability-form,#post-form,.journal-admin-row,.patient-care-admin #doctor-add-form{background:#fff;border:1px solid var(--app-edge);box-shadow:var(--app-raised);border-radius:19px}
.patient-date-tiles button,.patient-time-tiles span,.symptom-chips button{background:#fff;border:1px solid var(--app-edge);box-shadow:var(--app-raised);color:#345e4d}
.patient-date-tiles button[aria-pressed=true],.patient-time-tiles input:checked+span{background:#108c80;color:#fff;border-color:#108c80;box-shadow:inset 2px 2px 5px #075d4f55,inset -2px -2px 5px #ffffff21}
.patient-date-tiles button:focus-visible,.patient-secondary:focus-visible,.patient-primary:focus-visible,.patient-bottom-nav button:focus-visible{outline:3px solid #108c80;outline-offset:3px}
.patient-view textarea{padding:15px}
.patient-bottom-nav{background:#fff;border:1px solid var(--app-edge);box-shadow:0 -2px 18px #244c3b0d,0 4px 15px #244c3b12;backdrop-filter:none}
.patient-bottom-nav button[aria-current=page]{background:#f0f7f3;color:#0f7667;box-shadow:var(--app-inset)}
.patient-status,.doctor-rating{background:#eef7f2;color:#27634d;border:1px solid #deece3;box-shadow:inset 1px 1px 3px #244c3b08}
.patient-staff-visit details,.patient-rating-form{border-color:#e1eae3}
#info-content .journal-body{padding:8px 0}
#landing .desktop-call-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;list-style:none;margin:20px 0 0;padding:0}
.desktop-call-methods li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:12px 5px;background:#fff;border:1px solid var(--app-edge);box-shadow:var(--app-raised);border-radius:13px;color:#345e4d;font-size:12px;line-height:1.4;text-align:center}
.desktop-call-methods svg{width:24px;height:24px;color:#108c80}
.motion-symbol{width:17px!important;height:17px!important;flex-shrink:0}
.motion-symbol .motion-play{display:none}
[data-motion-state=paused] .motion-symbol .motion-play{display:initial}
[data-motion-state=paused] .motion-symbol .motion-pause{display:none}
#motion-toggle,.how-slide-motion{display:inline-flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:760px){
 .hero .hero-copy .hero-introduction{font-size:15px;line-height:1.6}
 #landing>.hero{order:0}#landing>.how-section{order:1}#landing>.reviews-section{order:2}#landing>.blog{order:3}#landing>.about{order:4}#landing>.faq{order:5}#landing>.cta{order:6}
 .patient-shell{padding:22px;border:0;border-radius:0;background:#fff;box-shadow:none}
 .patient-topbar{padding:12px 13px;background:#fff;border:1px solid var(--app-edge);border-radius:17px;box-shadow:var(--app-raised)}
 .patient-topbar .brand-word{font-size:22px}.patient-topbar .brand-mark{width:28px;height:28px}.patient-topbar{gap:8px}
 .patient-avatar{width:38px;height:38px;font-size:13px}
 .patient-section-heading input{padding:12px;border:1px solid var(--app-edge);width:100%}
 .patient-bottom-nav{border-radius:18px 18px 0 0;border:1px solid var(--app-edge)}
 #account #account-title{font-size:29px}
 .how-slider-controls .how-slide-motion{gap:5px;font-size:13px}
}
/* Compact mobile registration while preserving readable text and touch targets. */
@media(max-width:760px){
 #account[data-auth-view=signup]{width:min(440px,calc(100% - 24px));max-height:94dvh;padding:23px 20px 20px;border-radius:21px}
 #account[data-auth-view=signup] .auth-brand{margin:0 auto 14px;gap:6px}
 #account[data-auth-view=signup] .auth-brand .brand-word{font-size:24px}
 #account[data-auth-view=signup] .auth-brand .brand-mark{width:29px;height:29px}
 #account[data-auth-view=signup] #account-title{font-size:26px;margin:0 0 13px}
 #account[data-auth-view=signup] .close{right:5px;top:4px;font-size:24px}
 #account[data-auth-view=signup] .auth-mode-tabs{margin:10px 0 15px;padding:3px;gap:4px}
 #account[data-auth-view=signup] .auth-mode-tabs button{font-size:14px;min-height:40px;padding:8px 12px}
 #account[data-auth-view=signup] #auth-setup-message[data-kind=info]{display:none}
 #account[data-auth-view=signup] #auth-setup-message{font-size:13px;line-height:1.5}
 #account[data-auth-view=signup] .account-auth-form label:not(.check){margin:10px 0;font-size:14px;line-height:1.4}
 #account[data-auth-view=signup] .account-auth-form input:not([type=checkbox]){min-height:44px;margin-top:5px;padding:10px 12px;border-radius:11px;font-size:16px}
 #account[data-auth-view=signup] .small-copy{font-size:12px!important;line-height:1.5;margin:9px 0 12px}
 #account[data-auth-view=signup] .check{font-size:13px;line-height:1.5;gap:9px;margin:11px 0}
 #account[data-auth-view=signup] .check input{width:19px;height:19px;min-height:19px;margin-top:1px}
 #account[data-auth-view=signup] .account-auth-form .btn{min-height:46px;font-size:15px;padding:12px 17px;border-radius:12px;margin-top:5px}
 #account[data-auth-view=signup] .auth-google:disabled{display:none}
}
.signup-terms-copy{margin:10px 0!important;font-size:13px!important;line-height:1.5}.signup-terms-copy a{color:#087966;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px;min-height:36px}.signup-terms-copy a:focus-visible{outline:2px solid #108c80;outline-offset:3px;border-radius:3px}