:root {
  --canvas:#FAF7F0; --paper:#fffdf8; --ink:#333333; --muted:#666666;
  --blue:#D98324; --blue-deep:#65380e; --sky:#faead5;
  --sun:#D98324; --sun-soft:#faead5; --line:#E2E2E2;
}
body, .family-desktop, .care-main { background:#FAF7F0; color:#333333; }
.topbar, .care-topbar, .main-nav { background:#FAF7F0; color:#333333; border-color:#E2E2E2; }
.care-rail { background:#563311; }
.care-welcome, .page-hero, .home-grid .welcome-card, .mobile-family-note { background:#fbecd8; color:#333333; }
.care-welcome :is(h1,p), .care-welcome .care-kicker, .care-page-title h1, .page-hero h1 { color:#333333; }
.care-welcome .care-state, .safety-card, .voice-orb, .emergency-mark, .sos-symbol { background:#D98324; color:#21170d; }
.safety-card :is(strong,small,span), .voice-orb small { color:#21170d; opacity:1; }
:is(.primary-action,.hero-button,.dialog-submit,.care-primary,.checkin-submit,.assistant-form button,.safety-card button,.emergency-panel > button,.call-actions a) {
  background:#D98324; color:#21170d; border-color:#D98324;
}
:is(.secondary-action,.care-shortcuts button,.tool-button,.suggestion-chips button,.call-actions button) {
  background:#E2E2E2; color:#333333;
}
.main-nav button { color:#333333; }
.main-nav button.active, .main-nav .voice-nav, .main-nav .voice-nav.active { background:#D98324; color:#21170d; }
.calendar-day[aria-pressed="true"] { outline-color:#a3540e; }
.voice-orb { border-color:#f6ddbf; box-shadow:0 0 0 2px #D98324, 0 13px 35px #65380e26; }
.voice-waves i { background:#563311; }
.voice-orb[aria-pressed="true"] { outline:4px solid #65380e; outline-offset:3px; }
.device-controls { display:flex; flex-wrap:wrap; gap:8px; }
#deviceSummary { margin-block:16px; }
#deviceSummary .device-card { padding:12px 0; border-bottom:1px solid #E2E2E2; }
#deviceSummary strong, #deviceSummary small { display:block; }
#bridgeKey { display:block; overflow-wrap:anywhere; font-family:monospace; }
#videoLink[hidden] { display:none; }
.call-actions { flex-wrap:wrap; }
#voiceStatus { margin:4px 0 12px; color:#666666; }
#assistantReply button { margin:8px 8px 0 0; min-height:56px; padding:8px 16px; border-radius:12px; border:1px solid #D98324; }
#assistantReply p { white-space:pre-line; }
.elder-force :is(#app,.main-nav,.topbar,dialog) {
  font-size:calc(clamp(24px, 2.2vw, 29px) * var(--font-scale));
  line-height:1.45;
}
.elder-force :is(#app,.main-nav,.topbar,dialog) :is(p,span,small,label,legend,b,button,input,textarea,select,summary,a,output,time,em,li) {
  font-size:inherit;
}
.elder-force :is(#app,dialog) :is(h1,h2,h3) { line-height:1.16; }
.elder-force #app h1 { font-size:clamp(36px, 5vw, 54px); }
.elder-force :is(#app,dialog) h2 { font-size:clamp(30px, 3.8vw, 42px); }
.elder-force #app h3 { font-size:1.14em; }
.elder-force :is(#app,dialog) :is(input,select,textarea) { min-height:56px; width:100%; }
.elder-force #app :is(input[type=radio],input[type=checkbox]) { min-height:initial; width:auto; }
.elder-force dialog input[type=file] { min-height:initial; }
.elder-force .checkin-form fieldset, .elder-force .checkin-form :is(label,.daily-entry) { min-inline-size:0; }
.elder-force .daily-entry label { overflow-wrap:anywhere; }
.elder-force :is(#app,dialog) :is(button,a) { min-height:54px; overflow-wrap:anywhere; }
.elder-force :is(.quick-actions,.care-shortcuts,.access-tools) button { width:auto; max-width:100%; }
.elder-force .main-nav { width:min(100%,1120px); }
.elder-force .main-nav button { min-height:64px; line-height:1.2; white-space:normal; padding:3px; }
.elder-force .main-nav button b { font-size:clamp(18px,2.5vw,24px); }
.elder-force .tool-button { font-size:20px; }
.elder-force .brand { min-width:0; }
.elder-force .brand strong { font-size:clamp(22px,3vw,34px); letter-spacing:0; }
.elder-force .topbar { height:auto; min-height:80px; }
.elder-force .topbar-center { display:none; }
.elder-force .access-tools { flex-wrap:wrap; justify-content:flex-end; }
.elder-force .daily-metric { overflow-wrap:anywhere; }
.elder-force .daily-metric strong { font-size:1.18em; }
.elder-force .daily-metric small, .elder-force #deviceSummary small { font-size:.83em; color:#666666; }
.elder-force .calendar-day { min-height:56px; }
.elder-force .voice-orb { width:min(244px, 85vw); height: min(244px, 85vw); }
.elder-force .voice-orb strong { font-size:1.14em; }
.elder-force .voice-orb small { font-size:.83em; }
.elder-force .profile-setting input { flex-basis:100%; }
.elder-force .dialog-shell { padding-top:50px; }
.elder-force .dialog-close { min-height:42px; width:42px; top:6px; right:8px; }
.elder-force .orbit-stage img { object-fit:contain; }
.elder-force .assistant-form input { width:0; flex:1 1 0; }
@media (max-width:720px) {
  .elder-force #app { padding-bottom:164px; }
  .elder-force .topbar { grid-template-columns:minmax(0,1fr); gap:3px; }
  .elder-force .access-tools { justify-content:flex-start; }
  .elder-force .access-tools .tool-button { display:inline-flex; min-height:42px; padding:5px 8px; }
  .elder-force .access-tools .tool-button#fontToggle, .elder-force .access-tools .tool-button#contrastToggle { display:none; }
  .elder-force .access-tools .tool-button span { display:none; }
  .elder-force .home-grid .welcome-card { grid-template-columns:minmax(0,1fr); }
  .elder-force .welcome-copy { padding:20px; }
  .elder-force .welcome-copy :is(h1,p) { max-width:100%; }
  .elder-force .orbit-stage { min-height:175px; }
  .elder-force .orbit-stage img { width:150px; height:145px; bottom:10px; right:10px; }
  .elder-force .safety-card { grid-template-columns:minmax(0,1fr); }
  .elder-force .safety-icon { display:none; }
  .elder-force .main-nav button b { font-size:19px; }
  .elder-force .main-nav button span { font-size:22px; }
  .elder-force .assistant-form { flex-wrap:wrap; }
  .elder-force .assistant-form input { flex-basis:100%; width:100%; }
  .elder-force .assistant-form button { width:100%; }
  .elder-force .calendar-days { gap:4px; }
  .elder-force .calendar-day { padding:3px; }
  .elder-force .medicine-item { grid-template-columns:minmax(0,1fr); }
  .elder-force .choice-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Keep the assistant in a single reading order, including on narrow phones. */
.elder-force .assistant-stage {
  width:min(100%,690px);
  min-height:0;
  margin-inline:auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:16px;
  text-align:left;
}
.elder-force .assistant-stage::before,
.elder-force .assistant-stage::after { display:none; }
.elder-force .assistant-intro {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.elder-force .assistant-intro img { width:58px; height:58px; }
.elder-force #app .assistant-intro h1 { margin:0 0 4px; font-size:clamp(31px,5vw,44px); }
.elder-force .assistant-intro p { margin:0; font-size:20px; color:#666666; }
.elder-force .assistant-panel,
.elder-force .assistant-form,
.elder-force .assistant-reply {
  min-width:0;
  width:100%;
  padding:16px;
  border:1px solid #E2E2E2;
  border-radius:20px;
  background:#fffdf8;
  box-shadow:none;
}
.elder-force .assistant-panel { display:grid; gap:10px; }
.elder-force #app .assistant-panel .voice-orb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  height:auto;
  min-height:66px;
  margin:0;
  padding:10px 12px;
  border:0;
  border-radius:14px;
  box-shadow:none;
}
.elder-force .assistant-panel .voice-orb strong { margin:0; font-size:1.12em; }
.elder-force .assistant-panel .voice-orb svg { flex:none; }
.elder-force #voiceStatus {
  min-height:1.45em;
  margin:0;
  color:#333333;
  font-size:21px;
  overflow-wrap:anywhere;
}
.elder-force #voiceStatus.voice-error {
  padding:9px 12px;
  border-radius:10px;
  background:#faead5;
  color:#59320d;
}
.elder-force #keyboardVoice,
.elder-force #testMicrophone,
.elder-force .parent-menu-links button {
  width:100%;
  padding:8px 10px;
  border:1px solid #E2E2E2;
  border-radius:12px;
  background:#E2E2E2;
  color:#333333;
  font-weight:700;
}
.elder-force #keyboardVoiceHelp,
.elder-force #voiceHelp p { margin:0; font-size:20px; color:#666666; }
.elder-force #voiceHelp { padding-top:8px; border-top:1px solid #E2E2E2; }
.elder-force #voiceHelp summary { font-size:20px; font-weight:700; cursor:pointer; }
.elder-force #voiceHelp[open] > * + * { margin-top:8px; }
.elder-force #openAssistantPage { display:block; min-height:initial; }
.elder-force #openAssistantPage[hidden] { display:none; }
.elder-force .assistant-form { display:grid; gap:8px; }
.elder-force .assistant-form > label { font-weight:700; }
.elder-force .assistant-input-row {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.elder-force .assistant-input-row input { width:100%; padding:8px 12px; }
.elder-force .assistant-input-row button { width:auto; padding:0 12px; white-space:nowrap; }
.elder-force #assistantReply { margin:0; scroll-margin-block:24px 90px; }
.elder-force #assistantReply p { margin:6px 0 0; overflow-wrap:anywhere; }
.elder-force #app .assistant-examples h2 { margin:0 0 8px; font-size:24px; }
.elder-force .assistant-examples .suggestion-chips {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
}
.elder-force .assistant-examples .suggestion-chips button {
  min-width:0;
  padding:6px;
  border-radius:12px;
  background:#fffdf8;
  font-size:20px;
  white-space:normal;
}
.main-nav .mobile-more { display:none; }
.parent-menu-links { display:grid; gap:8px; }
@media (max-width:720px) {
  .elder-force .main-nav button:not([data-page="home"],[data-page="health"],[data-page="assistant"],.mobile-more) { display:none; }
  .elder-force .main-nav .mobile-more { display:grid; }
  .elder-force .main-nav { min-height:66px; padding-block:4px calc(4px + env(safe-area-inset-bottom)); }
  .elder-force .main-nav button { min-height:56px; }
  .elder-force .main-nav button b { font-size:20px; }
  .elder-force #app { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .elder-force .assistant-stage { gap:12px; }
  .elder-force .assistant-panel, .elder-force .assistant-form, .elder-force .assistant-reply { padding:12px; }
  .elder-force .assistant-input-row input { font-size:22px; }
}

.elder-force #keyboardVoice[hidden], .elder-force #voiceHelp[hidden] { display:none; }

.home-date { display:flex; gap:8px 16px; flex-wrap:wrap; margin-bottom:12px; align-items:baseline; color:#333; }
.home-date span { color:#666; }
.elder-force #mobileFamilyNote {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:16px;
  padding:14px; border:1px solid #eadabb; border-radius:18px; background:#fff1d8;
}
#mobileFamilyNote .note-avatar { display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border-radius:14px; background:#efd4a5; color:#422710; }
#mobileFamilyNote small { display:block; font-weight:700; color:#563311; }
#mobileFamilyNote p { margin:2px 0 0; color:#333; overflow-wrap:anywhere; }
#mobileFamilyNote button { padding:6px 12px; border:1px solid #D98324; border-radius:12px; color:#422710; background:#fffdf8; }
.elder-force #elderDaily article:nth-child(3n+1) { background:#f7eddc; }
.elder-force #elderDaily article:nth-child(3n+2) { background:#edf2e7; }
.elder-force #elderDaily article:nth-child(3n+3) { background:#f1eef7; }
.elder-force .home-grid .timeline-card { background:#fff4e4; }
.elder-force .home-grid .health-glance { background:#eef4ed; }
.elder-force .home-grid .family-glance { background:#f3edf6; }
.elder-force .home-grid .safety-card { background:#f6e4cb; }
.review-dialog { width:min(700px,calc(100vw - 24px)); }
.review-dialog :is(label,textarea,input[type=file]) { display:block; width:100%; }
.review-dialog textarea { margin-bottom:12px; }
.review-card { border:1px solid #E2E2E2; padding:12px; margin:10px 0; border-radius:14px; background:#f7f3eb; overflow-wrap:anywhere; }
.review-card :is(p,h3,blockquote) { margin:4px 0; }
.review-card blockquote { border-inline-start:3px solid #D98324; padding-inline-start:10px; white-space:pre-wrap; }
.weather-day { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #E2E2E2; }
.weather-day strong,.weather-day time { display:block; }
.desk-contact-card footer { flex-wrap:wrap; }
@media (max-width:480px) {
  .elder-force #mobileFamilyNote { grid-template-columns:auto minmax(0,1fr); }
  .elder-force #mobileFamilyNote button { grid-column:1/-1; }
  .weather-day { gap:6px; }
  .weather-day > span { grid-column:2; }
}


/* The parent view uses the same phone-first structure at every window width. */
body.elder-force {
  --elder-content-width: 640px;
  --elder-gutter: 12px;
  --elder-font-scale: 1;
  min-width: 0;
}
.elder-force :is(#app, .topbar, .main-nav, dialog) {
  font-size: calc(24px * var(--elder-font-scale));
}
.elder-force #app {
  width: min(100%, var(--elder-content-width));
  margin-inline: auto;
  padding: 16px var(--elder-gutter) calc(94px + env(safe-area-inset-bottom));
}
.elder-force > .topbar {
  width: min(100%, var(--elder-content-width));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px var(--elder-gutter);
}
.elder-force .topbar .brand { gap: 8px; }
.elder-force .topbar .brand img { width: 42px; height: 42px; }
.elder-force .topbar .brand strong { font-size: calc(23px * var(--elder-font-scale)); }
.elder-force .topbar .brand small,
.elder-force .topbar .access-tools :is(#fontToggle, #contrastToggle, .tool-button span) { display: none; }
.elder-force .topbar .access-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.elder-force .topbar .access-tools .tool-button:not(#fontToggle, #contrastToggle) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 4px;
  border-radius: 10px;
  font-size: calc(20px * var(--elder-font-scale));
}
.elder-force .main-nav {
  width: min(100%, var(--elder-content-width));
  bottom: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 66px;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 0 24px #3332;
}
.elder-force .main-nav button:not([data-page="home"],[data-page="health"],[data-page="assistant"],.mobile-more) { display: none; }
.elder-force .main-nav :is(button[data-page="home"],button[data-page="health"],button[data-page="assistant"],.mobile-more) {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 100%;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.elder-force .main-nav button b { font-size: calc(20px * var(--elder-font-scale)); white-space: nowrap; }
.elder-force .main-nav button span { font-size: 20px; }
.elder-force #app :is(.home-grid,.settings-grid,.medicine-layout,.calendar-layout,.two-column-layout,.family-grid,.knowledge-grid,.daily-entry),
.elder-force .app-dialog .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.elder-force .home-grid > * { grid-column: auto; min-width: 0; margin: 0; }
.elder-force #app :is(#elderDaily,.metric-ribbon,.health-number-row,.care-shortcuts,.choice-row) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.elder-force #app :is(.health-number-row > div,.metric-card,.daily-metric,.care-shortcuts button) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.elder-force #app .care-shortcuts button { width: 100%; }
.elder-force #app #mobileFamilyNote { grid-template-columns: 48px minmax(0, 1fr); }
.elder-force #app #mobileFamilyNote button { grid-column: 1 / -1; }
.elder-force #app .home-grid .welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  align-items: start;
  min-height: 0;
  padding: 14px;
}
.elder-force .welcome-copy { min-width: 0; padding: 0; }
.elder-force .welcome-copy :is(h1,p) { max-width: none; }
.elder-force .welcome-card .orbit-stage { min-height: 0; padding-top: 8px; }
.elder-force .welcome-card .orbit-stage img { position: static; width: 68px; height: 68px; }
.elder-force .welcome-card :is(.orbit,.orbit-star,.orbit-note) { display: none; }
.elder-force #app .quick-actions { display: grid; gap: 8px; margin-top: 12px; }
.elder-force #app .quick-actions button { width: 100%; white-space: normal; }
.elder-force #app .home-grid :is(.family-glance,.daily-card,.safety-card) { display: block; min-height: 0; padding: 16px; text-align: left; }
.elder-force #app .safety-icon { display: none; }
.elder-force #app .safety-card button { margin: 10px 0 0; }
.elder-force #app .page-hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding: 16px; gap: 12px; }
.elder-force #app .page-hero :is(button,.hero-search) { width: 100%; margin: 0; }
.elder-force #app :is(.section-heading,.record-row,.medicine-item,.family-message,.emergency-panel,.profile-setting form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.elder-force #app .section-heading > button { justify-self: start; }
.elder-force #app .contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.elder-force #app .contact-button { min-width: 0; }
.elder-force #app .contact-button .contact-avatar { margin-inline: auto; }
.elder-force #app .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.elder-force #app .segmented button { min-width: 0; padding-inline: 3px; }
.elder-force #app .calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.elder-force #app .calendar-day { min-width: 0; padding: 2px; text-align: center; }
.elder-force #app .timeline-item { grid-template-columns: 68px 12px minmax(0, 1fr); }
.elder-force #app .timeline-item em { display: none; }
.elder-force #app .timeline-item time { font-size: calc(17px * var(--elder-font-scale)); }
.elder-force #app :is(h1,h2,h3,p,small,label) { overflow-wrap: anywhere; }
.elder-force #app h1 { font-size: calc(34px * var(--elder-font-scale)); }
.elder-force :is(#app,dialog) h2 { font-size: calc(29px * var(--elder-font-scale)); }
.elder-force #app .assistant-intro h1 { font-size: calc(32px * var(--elder-font-scale)); }
.elder-force .assistant-input-row input { font-size: calc(21px * var(--elder-font-scale)); }
.elder-force .app-dialog .form-grid > * { min-width: 0; grid-column: auto; }