/* Shared layout corrections. Feature modules retain their fields and workflows. */
.carePage,.centerModuleBody,.participantBody,.crmBody,.settingsSection,.formField,.formGrid>*{min-width:0}
.carePage h1,.carePage h2,.carePage h3,dialog h2,dialog h3{overflow-wrap:anywhere;text-transform:none}
.carePage p,.carePage .notice,.carePage .error,dialog p,dialog .error{overflow-wrap:anywhere}
.carePage button,dialog button{white-space:normal;overflow-wrap:anywhere}
.formGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.formGrid>.actions{grid-column:1/-1}
.formField input,.formField select,.formField textarea{min-width:0;max-width:100%}
.hayatOne .tableWrap td{white-space:normal;overflow-wrap:anywhere;min-width:100px;max-width:320px;vertical-align:top;line-height:1.65}
.hayatOne .tableWrap td.amount,.hayatOne .tableWrap td .badge{white-space:nowrap}
.hayatOne .tableWrap .rowActions{min-width:150px;max-width:250px}
.hayatOne .tableWrap:focus-visible{outline:3px solid #75baff;outline-offset:3px}
.hayatOne .profileRow>span,.hayatOne .profileRow>strong,.responseIdentifiers>*{min-width:0;overflow-wrap:anywhere}
.hoFeatureArt,.hoFeatureArt svg,.hoTileIcon,.mobileQuickGrid button,.hayatOne .careTile,.hayatOne .careTile:hover{box-shadow:none!important;filter:none!important}
.hoFeatureResult>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.hoDialogHeading>div{min-width:0}.hoDialogHeading>button{flex:none}

/* Image and text have their own space; artwork stays inside the blended header. */
.screenIllustration,.friendlyEntryHero,.entryHeading{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:22px;min-height:0;padding:24px 28px;margin-bottom:0;overflow:hidden}
.screenIllustration{margin:0 0 22px}
.screenIllustrationCopy,.friendlyEntryCopy,.entryHeadingCopy{min-width:0}
.screenIllustration .entryArt,.friendlyEntryArt,.entryHeading .entryArt{position:static;transform:none;display:block;right:auto;top:auto;width:200px;height:200px;max-width:100%;object-fit:contain;justify-self:end;pointer-events:none;background:transparent;border:0;box-shadow:none;filter:none;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse closest-side,#000 62%,#000e 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 62%,#000e 76%,transparent 100%)}
.friendlyEntryCopy>.hoFeatureArt,.entryHeadingCopy>.hoFeatureArt{display:inline-flex;width:36px;height:36px;flex-basis:36px;float:left;margin:0 10px 8px 0}
.friendlyEntryHero h2,.entryHeading h2{clear:both;margin:8px 0 10px;line-height:1.3;font-size:25px}
.entryHeading .eyebrow,.friendlyEntryEyebrow{display:block;padding-top:9px;line-height:1.6}
.friendlyEntryHero p,.entryHeading p{margin:0;font-size:13px;line-height:1.65}
.entryClose{position:absolute;right:14px;top:14px;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-height:36px;width:36px;padding:7px;border:1px solid #d4e8f9;border-radius:50%;background:#ffffffed;color:#527ba6;box-shadow:none}
.entryClose .hoIcon,.entryClose svg{width:19px;height:19px;flex-basis:19px}
.friendlyEntryHero,.entryHeading{padding-right:48px}
dialog{overscroll-behavior:contain;scroll-padding:20px;max-width:calc(100vw - 24px)}
dialog.friendlyEntry,dialog.hoEntryDialog,dialog.companyDialog{max-height:calc(100dvh - 32px)}
.friendlyEntry>form,.friendlyEntry>section,.hoEntryDialog>form{min-width:0}
.entryPerson>div{min-width:0;overflow-wrap:anywhere}
.friendlyEntry .actions,.hoEntryDialog .actions,.companyDialog .actions{gap:10px;padding-bottom:12px}
.hoEntryDialog form>.actions{bottom:0;background:#f6fbfff5;backdrop-filter:blur(8px)}

.hoCareArt{right:0;bottom:0;width:52%;height:100%;object-fit:contain;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%)}
.hoWelcomeCopy{max-width:58%}
@media(min-width:601px) and (max-width:1100px){.hoWelcomeRow{grid-template-columns:1fr}.hoGlance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.hoGlance h2{grid-column:1/-1}}

/* Authentication must remain scrollable even when the care shell uses a fixed frame. */
body:has(.auth){height:auto;min-height:100dvh;overflow:auto}
@media screen and (min-width:801px) and (max-width:1400px){.careShell.hayatOne{height:calc(100dvh - 32px)}}
@media(max-width:800px){
 .hayatOne .careHeader{gap:10px}.hayatOne .headerAccount{gap:8px}
 .hayatOne .headerAccount>.hoIconButton{display:inline-flex;justify-content:center;min-height:36px;width:32px;padding:4px}
 .hayatOne .careMain{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
 .hayatOne .settingsNavigation{min-width:0;max-width:100%}
 .hayatOne .tableWrap td{max-width:260px}
}
@media(max-width:650px){.formGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .screenIllustration,.friendlyEntryHero,.entryHeading{grid-template-columns:minmax(0,1fr) 112px;gap:12px;padding:20px 18px;min-height:0}
 .friendlyEntryHero,.entryHeading{padding-top:36px}
 .screenIllustration .entryArt,.friendlyEntryArt,.entryHeading .entryArt{width:112px;height:112px}
 .screenIllustrationLead{font-size:20px}.screenIllustration .muted{font-size:12px;line-height:1.6}
 .friendlyEntryHero h2,.entryHeading h2{font-size:21px;letter-spacing:-.5px}
 .friendlyEntryHero p,.entryHeading p{font-size:12px}
 .entryHeading .eyebrow,.friendlyEntryEyebrow{font-size:8px;letter-spacing:1.3px;padding-top:7px}
 .friendlyEntryCopy>.hoFeatureArt,.entryHeadingCopy>.hoFeatureArt{width:28px;height:28px;margin-right:7px}
 dialog .formField input:not([type=checkbox]):not([type=radio]),dialog .formField select,dialog .formField textarea,.careMain input:not([type=checkbox]):not([type=radio]),.careMain select,.careMain textarea,.externalCard input,.externalCard select,.externalCard textarea{font-size:16px}
 .friendlyEntry>form,.friendlyEntry>section,.friendlyEntry>div{margin:18px}
 .friendlyEntry .actions button,.hoEntryDialog .actions button{flex:1 1 110px;min-height:44px}
 .questionTop{flex-wrap:wrap;align-items:flex-start}.questionTop strong{flex:1 1 150px}
 .questionTop select{min-width:0;flex:1 1 140px}.questionTop button{flex:none}
 .optionRow input,.optionRow select{min-width:0;flex:1 1 140px}
 .insightFilters>button{max-height:none;height:auto}
 .hoWelcomeCopy{max-width:100%}.hoWelcomeCopy h2,.hoWelcomeCopy p{max-width:100%}
 .hoWelcome{min-height:0;padding-bottom:215px}.hoCareArt{height:205px;width:100%;right:0;bottom:0;object-fit:contain;object-position:center;mask-image:linear-gradient(transparent,#000 20%);-webkit-mask-image:linear-gradient(transparent,#000 20%)}
 .mobileStaffHero{display:flex;flex-direction:column;min-height:0;padding:22px 22px 200px}
 .mobileStaffHero h2,.mobileStaffHero p,.mobileStaffHero button{max-width:100%}
 .mobileStaffArt{right:0;top:auto;bottom:0;width:100%;height:190px;max-width:100%;object-fit:contain;object-position:center;opacity:1;mask-image:linear-gradient(transparent,#000 20%);-webkit-mask-image:linear-gradient(transparent,#000 20%)}
}
@media(max-width:380px){
 .screenIllustration,.friendlyEntryHero,.entryHeading{grid-template-columns:minmax(0,1fr) 86px;gap:8px;padding-left:16px;padding-right:16px}
 .screenIllustration .entryArt,.friendlyEntryArt,.entryHeading .entryArt{width:86px;height:86px}
 .screenIllustrationLead,.friendlyEntryHero h2,.entryHeading h2{font-size:19px}
 .hoMobileBrand strong{font-size:19px}.hayatOne .careHeader{padding-left:12px;padding-right:12px;gap:7px}
 .hayatOne .headerAccount{gap:5px}.hoMetric{gap:8px;padding:15px 10px}.hoMetric .hoTintIcon{width:30px;flex-basis:30px}
}
@media print{
 .entryClose{display:none!important}.screenIllustration{display:none!important}
 dialog,.friendlyEntry,.hoEntryDialog{max-height:none!important;overflow:visible!important}
 .careShell.hayatOne{height:auto!important}.hoFeatureArt{box-shadow:none!important}
}

/* One compact selector shares the same real role permissions inside the isolated workspace. */
.hoRolePicker{display:flex;flex-direction:column;flex:0 0 158px;gap:1px;background:#edf7ff;border:1px solid #d5eaff;border-radius:14px;padding:5px 10px;min-width:0;box-shadow:none}
.hoRolePicker>span{font-size:10px;color:#6385aa;line-height:1.2}
.hoRolePicker select{border:0;background:transparent;font-size:13px;font-weight:600;padding:0 20px 0 0;margin:0;min-height:28px;width:100%;color:#142b54;border-radius:4px}
.hoRolePicker:focus-within{outline:2px solid #1986ff;outline-offset:2px}
@media(max-width:800px){
 .hayatOne .careHeader:has(.hoRolePicker){flex-wrap:wrap;height:auto;min-height:76px}
 .hayatOne .careHeader:has(.hoRolePicker) .hoRolePicker{order:3;flex-basis:100%;flex-direction:row;align-items:center;gap:10px;padding:5px 12px}
 .hoRolePicker>span{font-size:12px;white-space:nowrap}.hoRolePicker select{font-size:16px;min-height:32px}
}

/* Let card actions move to the next line instead of splitting heading words. */
.hoPanelHeading{flex-wrap:wrap;gap:8px 12px;align-items:center}
.hoPanelHeading h2{flex:1 1 130px;min-width:0;overflow-wrap:normal;word-break:normal}
.hoPanelHeading>.hoTextButton{flex:0 1 auto}

/* Keep large feature menus and form overlays responsive in Android WebView. */
@media(max-width:800px){
 dialog::backdrop,.hoFeatureDialog::backdrop,.friendlyEntry::backdrop,.companyDialog::backdrop,.hoEntryDialog::backdrop,.attentionDialog::backdrop,.hoMobileNav,.hayatOne .careHeader,.hoEntryDialog form>.actions{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* Blend the illustration itself, rather than the empty space around it. */
.hayatOne .mobileStaffArt{
 width:300px;max-width:48%;height:calc(100% - 16px);
 object-fit:cover;object-position:center;
 mix-blend-mode:multiply;
 mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 90%,transparent 100%),linear-gradient(transparent 0%,#000 12%,#000 86%,transparent 100%);
 mask-composite:intersect;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 90%,transparent 100%),linear-gradient(transparent 0%,#000 12%,#000 86%,transparent 100%);
 -webkit-mask-composite:source-in;
}
@media(max-width:560px){.hayatOne .mobileStaffArt{width:calc(100% - 16px);max-width:none;height:250px;object-fit:contain;mix-blend-mode:multiply}}
/* Native select semantics with a styled in-page picker on supporting browsers. */
@supports (appearance:base-select){
 select,
 select::picker(select){appearance:base-select}
 select{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
 select::picker(select){
  background:#fff;border:1px solid #dce8f5;border-radius:16px;padding:6px;
  margin-block:6px;box-shadow:0 12px 36px #163b6726;color:#142b54;
  max-height:min(320px,55vh);overflow-y:auto;scrollbar-width:thin;
 }
 select option{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:10px 12px;
  border-radius:10px;font:inherit;line-height:1.4;cursor:pointer;background:#fff;color:#294363;
 }
 select option:hover,
 select option:focus-visible{background:#eef6ff;outline:none}
 select option:checked{background:#e5f2ff;color:#0866ca;font-weight:700}
 select option::checkmark{order:1;margin-left:auto;color:#1687ff}
 select::picker-icon{color:#7189a5;transition:rotate .15s}
 select:open::picker-icon{rotate:180deg}
}
.shiftPage{max-width:1400px;margin:auto}.shiftPage .hoStats{grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0}.shiftColumns{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0}.shiftActions{display:flex;flex-wrap:wrap;gap:9px}.shiftTask{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #e4eef8}.shiftTask>div{flex:1}.shiftTask p{margin:6px 0 0}.shiftOverdue{background:#fff1e9;color:#a54116;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700}.shiftPerson{border:1px solid #dce8f5;border-radius:16px;padding:18px;margin:12px 0}.shiftPerson p{margin:9px 0}.shiftPerson .directoryName{padding:0;background:none;text-align:left}.shiftLibrary summary{font-weight:700;cursor:pointer;padding:8px}.shiftLibrary .careFeatureGrid{margin-top:18px}.shiftQuick{margin-top:18px}.shiftQuick h2{margin-bottom:8px}@media(max-width:850px){.shiftColumns{grid-template-columns:1fr}.shiftPage .hoStats{grid-template-columns:1fr}.shiftTask{flex-wrap:wrap}}
.shiftActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shiftActions .hoShortcut{width:100%;margin:0;min-height:46px;text-align:center;justify-content:center;font-size:13px;padding:12px}.shiftPerson .shiftActions{grid-template-columns:repeat(3,minmax(0,1fr))}.shiftQuick .muted{margin-bottom:16px}@media(max-width:600px){.shiftActions,.shiftPerson .shiftActions{grid-template-columns:1fr 1fr}}

.careRecordFilters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end;margin:16px 0}.careRecordFilters .formField{margin:0}.careRecordFilters>button{margin-bottom:0}@media(max-width:700px){.careRecordFilters{grid-template-columns:1fr 1fr}}


/* AI-generated fictional portraits are displayed only in the public demo. */
.hayatOne .demoParticipantPortrait{background-image:url('/assets/demo-participant-portraits-v1.jpg');background-size:600% 300%;background-repeat:no-repeat;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3px #dce8f5}

.hayatOne .demoPortrait0{background-position:0% 0%}
.hayatOne .demoPortrait1{background-position:20% 0%}
.hayatOne .demoPortrait2{background-position:40% 0%}
.hayatOne .demoPortrait3{background-position:60% 0%}
.hayatOne .demoPortrait4{background-position:80% 0%}
.hayatOne .demoPortrait5{background-position:100% 0%}
.hayatOne .demoPortrait6{background-position:0% 50%}
.hayatOne .demoPortrait7{background-position:20% 50%}
.hayatOne .demoPortrait8{background-position:40% 50%}
.hayatOne .demoPortrait9{background-position:60% 50%}
.hayatOne .demoPortrait10{background-position:80% 50%}
.hayatOne .demoPortrait11{background-position:100% 50%}
.hayatOne .demoPortrait12{background-position:0% 100%}
.hayatOne .demoPortrait13{background-position:20% 100%}
.hayatOne .demoPortrait14{background-position:40% 100%}
.hayatOne .demoPortrait15{background-position:60% 100%}
.hayatOne .demoPortrait16{background-position:80% 100%}
.hayatOne .demoPortrait17{background-position:100% 100%}

/* A calm first paint, followed by a lightweight indicator for slower navigation. */
.hoLoadingScreen{min-height:calc(100dvh - 32px);display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 28%,#fff 0%,#f4fbff 44%,#e6f3ff 100%);border-radius:24px;color:#12315c}
.hoLoadingCard{width:min(100%,480px);text-align:center;padding:44px 32px;background:#ffffffdf;border:1px solid #fff;border-radius:28px;box-shadow:0 24px 80px #2863a410}
.hoLoadingBrand{margin:0 auto 26px;max-width:232px}.hoLoadingBrand img{display:block;width:100%;height:auto}
.hoLoadingCard h1{font-family:Manrope,Arial,sans-serif;font-size:24px;line-height:1.35;letter-spacing:-.5px;margin:0 0 12px}.hoLoadingCard p{font-size:14px;line-height:1.7;color:#6a819c;margin:0 auto;max-width:300px}.hoLoadingCard small{display:block;margin-top:32px;color:#8094ab;font-size:12px}
.hoLoadingDots{display:flex;justify-content:center;gap:9px;margin-top:26px}.hoLoadingDots span{width:8px;height:8px;border-radius:50%;background:#1687ff;animation:hoLoadingPulse 1.25s ease-in-out infinite}.hoLoadingDots span:nth-child(2){background:#2ab8c2;animation-delay:.16s}.hoLoadingDots span:nth-child(3){animation-delay:.32s}
@keyframes hoLoadingPulse{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-5px)}}
.hoNavigationLoading{position:fixed;inset:0 0 auto;z-index:10000;pointer-events:none;height:3px;overflow:visible}.hoNavigationLoadingBar{display:block;height:3px;width:32%;border-radius:3px;background:linear-gradient(90deg,#1687ff,#20c4b8);animation:hoLoadingSlide 1.3s ease-in-out infinite}.hoNavigationLoadingLabel{position:absolute;right:20px;top:14px;font:13px Manrope,Arial,sans-serif;color:#24466d;background:#fff;padding:10px 16px;border:1px solid #dce8f5;border-radius:12px;box-shadow:0 5px 18px #163b6714}
@keyframes hoLoadingSlide{from{transform:translateX(-110%)}to{transform:translateX(420%)}}
@media(prefers-reduced-motion:reduce){.hoLoadingDots span,.hoNavigationLoadingBar{animation:none}.hoLoadingDots span{opacity:1}.hoNavigationLoadingBar{width:100%}}
@media(max-width:560px){.hoLoadingCard{padding:32px 22px}.hoLoadingCard h1{font-size:21px}.hoLoadingScreen{padding:16px}}

.activityPhotoPicker{padding:18px;border:1px solid #dce8f5;border-radius:16px;margin:16px 0;background:#f8fcff}.activityPhotoGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0}.activityPhotoGallery figure{margin:0;min-width:0;border:1px solid #dce8f5;border-radius:14px;overflow:hidden;background:#fff}.activityPhotoGallery img{display:block;width:100%;height:180px;object-fit:cover}.activityPhotoGallery figcaption{padding:10px 12px;font-size:12px;overflow-wrap:anywhere}.activityPhotoGallery figure>button{margin:0 10px 12px;font-size:12px}.participantActivityPhotos{margin:20px 0}.participantActivityPhotos h3{font-size:16px}@media(max-width:560px){.activityPhotoGallery{grid-template-columns:1fr}.activityPhotoGallery img{height:200px}}

.participantActivityPhotoDays{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin-top:20px;align-items:start}.participantActivityPhotoDays .participantActivityPhotos{margin:0;min-width:0;padding:16px;border:1px solid #dce8f5;border-radius:16px;background:#f9fcff}.participantActivityPhotoDays .participantActivityPhotos h3{margin:0 0 12px;font-size:15px}.participantActivityPhotoDays .activityPhotoGallery{display:block;margin:0}.participantActivityPhotoDays .activityPhotoGallery figure+figure{margin-top:12px}.participantActivityPhotoDays .activityPhotoGallery img{height:auto;aspect-ratio:3/2;object-fit:cover}