/* HomeCare design tokens; mobile-first CSCT home, no external asset requests. */
:root { --care-navy:#0b2f61; --care-muted:#7186a0; --care-blue:#2f78bf; --care-teal:#259aa5; --care-line:#dbe8f3; }
html.lang-en body, html.lang-zh-cn body, html.lang-ms body { font-family:Inter,"SF Pro Text","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; }
.app-wrap.home { background:#f6faff; color:var(--care-navy); }
.app-wrap.home .header { background:rgba(255,255,255,.94); border-bottom:1px solid var(--care-line); padding-top:env(safe-area-inset-top) !important; }
.app-wrap.home .header .row { align-items:center; min-height:68px; }
.app-wrap.home .header-text { font-size:22px; letter-spacing:-.5px; color:var(--care-navy); }
.app-wrap.home .menu-btn { color:var(--care-navy); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.care-language { border:1px solid var(--care-line); background:#f6faff; color:var(--care-blue); border-radius:99px; min-height:44px; padding:0 12px; font-size:12px; font-weight:600; cursor:pointer; }
.care-home { width:100%; max-width:600px; margin:0 auto; padding:25px 20px calc(24px + env(safe-area-inset-bottom)); }
.care-home *, .care-home *::before, .care-home *::after { box-sizing:border-box; }
.care-home svg { width:25px; height:25px; flex-shrink:0; }
.care-intro h1 { font-size:25px; font-weight:750; letter-spacing:-.7px; line-height:1.35; margin:0 0 8px; }
.care-intro p { font-size:14px; line-height:1.6; color:var(--care-muted); margin:0 0 23px; }
.care-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.care-tile { display:flex; align-items:flex-start; flex-direction:column; min-width:0; min-height:139px; padding:17px; border:1px solid var(--care-line); border-radius:18px; background:#fff; color:var(--care-navy); text-align:left; box-shadow:0 5px 18px rgba(34,82,126,.035); cursor:pointer; transition:background .15s, border-color .15s; }
.care-icon-box { display:grid; place-items:center; width:46px; height:46px; background:#edf6ff; color:var(--care-blue); border-radius:50%; margin-bottom:11px; }
.care-tile strong { font-size:16px; font-weight:650; line-height:1.35; }
.care-tile > span:last-child { font-size:12px; color:var(--care-muted); line-height:1.5; margin-top:5px; }
.care-support h2 { font-size:16px; font-weight:650; margin:24px 0 12px; }
.care-service { display:flex; align-items:center; gap:14px; min-height:96px; border:1px solid var(--care-line); border-radius:18px; padding:18px; margin-bottom:12px; background:#fff; color:var(--care-navy); text-decoration:none; box-shadow:0 5px 18px rgba(34,82,126,.035); }
.care-service:hover { color:var(--care-navy); text-decoration:none; border-color:#9bbfda; background:#fbfdff; }
.care-service-icon { width:50px; height:50px; border-radius:16px; background:linear-gradient(145deg,#398bd1,#286fae); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.care-service-icon svg { width:28px; height:28px; }
.resilink .care-service-icon { background:linear-gradient(145deg,#36adb4,#218e9b); color:#fff; }
.care-service-copy { display:flex; flex-direction:column; flex:1; min-width:0; gap:4px; }
.care-service-copy strong { font-size:18px; font-weight:700; line-height:1.3; }
.care-service-copy span { font-size:14px; color:var(--care-muted); }
.care-service > svg { width:19px; color:var(--care-muted); }
.care-privacy { font-size:12px; line-height:1.7; color:var(--care-muted); text-align:center; margin:18px 0; }
.care-logout { width:100%; min-height:48px; border:1px solid #bed2e3; border-radius:13px; color:var(--care-blue); background:transparent; font-size:15px; font-weight:600; cursor:pointer; }
.care-tile:hover, .care-logout:hover { border-color:#9bbfda; background:#edf6ff; }
.care-home a:focus-visible, .care-home button:focus-visible, .care-language:focus-visible { outline:3px solid #259aa5; outline-offset:3px; }
.app-wrap.home .main-content { min-height:0; width:100%; }
@media (max-width:359px) { .care-home { padding-left:14px; padding-right:14px; } .care-tile { padding:14px; } .care-intro h1 { font-size:23px; } .care-language { padding:0 9px; } .app-wrap.home .header-text { font-size:20px; } }
@media (prefers-reduced-motion:reduce) { .care-tile { transition:none; } }
/* Full product names must remain readable at mobile widths. */
.app-wrap.home .header-text { font-size:16px; line-height:1.3; letter-spacing:0; overflow-wrap:break-word; }
.app-wrap.home .header .row { height:auto; padding:10px 0; }
.care-service-copy strong { font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
#login-page .logotype .care-login-name { font-size:clamp(24px,7vw,36px); line-height:1.25; max-width:440px; margin:12px auto; padding:0 12px; font-weight:700; color:var(--care-navy); }
#login-page .logotype .type-ch { font-size:20px; line-height:1.5; }
.side-menu .logotype { font-size:22px; line-height:1.3; padding:24px 0; overflow-wrap:break-word; color:var(--care-navy); }
html.lang-ms .btn { white-space:normal; overflow-wrap:break-word; }

.care-language-notice { margin:12px 16px; padding:12px; border:1px solid #dbe8f3; border-radius:10px; background:#edf6ff; color:#315d7b; font-size:13px; line-height:1.6; flex-shrink:0; }

/* Assessment uses the same mobile design tokens as the home screen. */
.care-evaluation { background:#f6faff; color:var(--care-navy); min-height:0; }
.care-evaluation .section-info { background:#fff; border-bottom:1px solid var(--care-line); padding:12px 16px; flex-wrap:nowrap; gap:8px; }
.care-evaluation .section-info .title { font-size:18px; font-weight:650; line-height:1.4; }
.care-evaluation .section-info .num { font-size:16px; color:var(--care-teal); }
.care-evaluation .section-info .action-col { font-size:18px; white-space:nowrap; }
.care-evaluation .section-info .answer-progress { font-size:14px; background:#edf6ff; color:var(--care-navy); }
.care-evaluation .form-main { padding:0 16px; min-height:0; }
.care-evaluation .form-content { max-width:680px; margin:auto; }
.care-evaluation .form-content .question-item { padding:12px 0 !important; border-bottom:1px solid var(--care-line); }
.care-evaluation .form-content .question-text { font-size:18px; line-height:1.45; margin-bottom:9px; }
.care-evaluation .form-content .options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 !important; margin:0; }
.care-evaluation .form-content .options .option-item { display:flex; align-items:center; min-width:0; min-height:44px; padding:7px 8px 7px 34px; margin:0; font-size:16px; line-height:1.35; border:1px solid var(--care-line); border-radius:12px; background:#fff; }
.care-evaluation .form-content .options .option-item.selected { border-color:var(--care-blue); background:#eaf4ff; color:var(--care-navy); }
.care-evaluation .form-content .options .checkmark { width:20px; height:20px; top:50%; left:10px; transform:translateY(-50%); padding:0; }
.care-evaluation .option-item:focus-within { outline:2px solid var(--care-teal); outline-offset:2px; }
.care-evaluation .form-footer { background:#fff; border-top:1px solid var(--care-line); padding:12px 8px calc(12px + env(safe-area-inset-bottom)) !important; }
.care-evaluation .form-footer .btn { min-height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:16px; }
.care-evaluation .form-footer .btn-pink { background:var(--care-blue); color:#fff; }
.care-evaluation .section-list { background:#fff; }
@media(min-width:600px) { .care-evaluation .form-content .options { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.app-wrap.self-evaluation .header { background:#fff; color:var(--care-navy); border-bottom:1px solid var(--care-line); }
.app-wrap.self-evaluation .header-text { font-size:20px; line-height:1.3; }
.app-wrap.self-evaluation .header .row { min-height:64px; align-items:center; }

/* Keep a host-owned return control above each integrated service. */
.care-platform { position:fixed; inset:0; z-index:2000; background:#fff; display:flex; flex-direction:column; height:100%; height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.care-platform-bar { flex-shrink:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:8px 12px; background:#f6faff; border-bottom:1px solid var(--care-line); }
.care-platform-back { min-height:44px; border:1px solid var(--care-line); border-radius:10px; padding:8px 12px; background:#fff; color:var(--care-blue); font-size:14px; font-weight:600; cursor:pointer; }
.care-platform-back:focus-visible { outline:3px solid var(--care-teal); outline-offset:2px; }
.care-platform-bar strong { font-size:13px; line-height:1.4; color:var(--care-navy); }
.care-platform iframe { flex:1; min-height:0; width:100%; border:0; }

/* Bound the assessment to the visible viewport; only questions scroll. */
.app-wrap.self-evaluation { height:100vh !important; height:100dvh !important; overflow:hidden; }
.app-wrap.self-evaluation .main-content { flex:1 1 0; min-height:0; overflow:hidden !important; }
.care-evaluation { flex:1 1 0; height:auto !important; overflow:hidden; }
.care-evaluation .form-header,.care-evaluation .form-footer { flex-shrink:0; }
.care-evaluation .form-main { flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; }
.care-assessment-home { align-self:flex-start; flex-shrink:0; border:0; background:none; color:var(--care-blue); font-size:15px; font-weight:600; min-height:44px; padding:8px 16px; }
.care-evaluation .form-footer { padding:8px 4px calc(8px + env(safe-area-inset-bottom)) !important; box-shadow:0 -3px 12px rgba(11,47,97,.06); }
.care-evaluation .form-footer .col { padding:0 8px; }
.care-evaluation .form-footer .btn { font-size:17px; font-weight:650; }
.care-evaluation .form-footer .btn-pink { box-shadow:0 3px 8px rgba(47,120,191,.22); }

.care-platform-external { font-size:13px; color:var(--care-blue); padding:8px 0; }
.care-platform-note { flex-basis:100%; color:#52677d; font-size:12px; line-height:1.4; }

.care-team-content { flex:1; min-height:0; overflow-y:auto; padding:20px; width:100%; max-width:640px; margin:0 auto; }
.care-team-content h1 { font-size:24px; line-height:1.35; font-weight:700; color:var(--care-navy); margin:0 0 8px; }
.care-team-intro { color:#52677d; font-size:15px; margin-bottom:12px; }
.care-team-member { display:flex; align-items:flex-start; gap:12px; padding:18px 0; border-bottom:1px solid var(--care-line); }
.care-team-icon { flex-shrink:0; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#edf6ff; color:var(--care-blue); }
.care-team-member h2 { font-size:17px; line-height:1.45; overflow-wrap:anywhere; margin:0 0 5px; color:var(--care-navy); }
.care-team-member p { font-size:14px; color:#52677d; line-height:1.6; margin:0; }
.care-team-member a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--care-blue); text-decoration:underline; }

.lifereview .care-service-icon { background:linear-gradient(145deg,#7684be,#596aa4); }
/* Account forms use the same mobile spacing and touch targets as the home screen. */
.app-wrap.account { background:#f6faff; }
.app-wrap.account .header { background:white; padding-top:env(safe-area-inset-top) !important; }
.care-account { width:100%; max-width:640px; margin:0 auto; padding:20px 20px calc(28px + env(safe-area-inset-bottom)); color:#153b52; }
.care-account h1 { font-size:24px; margin:20px 0 12px; }
.care-account h2 { font-size:20px; margin-bottom:16px; }
.care-account p { font-size:15px; line-height:1.6; }
.care-account form,.care-account dl { background:white; border:1px solid #dce8ed; border-radius:18px; padding:18px; margin:20px 0; }
.care-account dt { font-size:14px; color:#637984; }
.care-account dd { overflow-wrap:anywhere; margin-bottom:12px; font-size:16px; }
.care-account label { display:block; font-size:15px; margin-bottom:16px; }
.care-account input { display:block; width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid #b9cdd7; border-radius:10px; font-size:16px; }
.care-account-primary,.care-account-entry { min-height:44px; border:0; border-radius:12px; background:#247caf; color:white; font-size:16px; padding:10px 18px; }
.care-account-primary:disabled { opacity:.55; }
.care-account-entry { margin-bottom:16px; }
.care-account button:focus-visible,.care-account input:focus-visible { outline:3px solid #55afc7; outline-offset:3px; }