/* Neutral appearance tokens, loaded last to replace legacy teal/navy surfaces. */
:root{color-scheme:dark;--bg:#141516;--surface:#1d1f21;--surface-raised:#26282b;--surface-soft:#2d3033;--border:#42464b;--border-soft:#33373b;--text:#f5f5f4;--secondary:#c1c3c6;--tertiary:#a8adb3;--teal:#c8d0d9;--teal-soft:#ffffff08;--action:#eeeeec;--on-action:#202224;--focus:#9abce3;--chart:#a7c2db;--selected:#34383c;--green:#51d48b;--yellow:#edc265;--orange:#f9ad69;--red:#ff858d;--purple:#c2a7ef}
:root[data-theme=light]{color-scheme:light;--bg:#f5f7fa;--surface:#ffffff;--surface-raised:#fafbfe;--surface-soft:#eef2f7;--border:#d2d8e1;--border-soft:#e4e8ef;--text:#202326;--secondary:#545b63;--tertiary:#656c74;--teal:#1769d2;--teal-soft:#edf4ff;--action:#1769d2;--on-action:#ffffff;--focus:#1769d2;--chart:#1769d2;--selected:#e8f0fc;--green:#187441;--yellow:#805d0b;--orange:#9b4c10;--red:#b52b39;--purple:#7550a2}
body,body:has(#auth-view:not([hidden])){background:var(--bg);background-image:none}
.panel,.connect-panel,.settings-panel,.note-panel,.confirmation-panel{background:var(--surface);border-color:var(--border)}
.person-card,.person-card.is-selected,.empty-slot,.detail-hero{background:var(--surface);box-shadow:none}
.person-card:hover{background:var(--surface-raised)}
.primary-button,.auth-card .primary-button{background:var(--action);color:var(--on-action);border:1px solid var(--action);box-shadow:none;border-radius:12px}
.primary-button:hover,.auth-card .primary-button:hover{background:var(--text);color:var(--bg)}
.workspace-tabs .quiet-button[aria-pressed=true],.section-tabs button[aria-pressed=true]{background:var(--selected);color:var(--text);border-color:var(--border);box-shadow:inset 3px 0 var(--text)}
.workspace-tabs .quiet-button:hover,.section-tabs button:hover,.round-button:hover{background:var(--surface-soft);color:var(--text)}
.outline-button,.add-button,.mode,.row-icon,.auth-card-icon{background:var(--surface-soft);border-color:var(--border);color:var(--text)}
.outline-button:hover,.add-button:hover{background:var(--selected);border-color:var(--secondary)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,.auth-view :is(button,a):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.chart-line{stroke:var(--chart)}.chart-dot,.chart-selected{fill:var(--chart)}.chart-crosshair{stroke:var(--secondary)}.chart-scrubber{accent-color:var(--chart)}
.today-row h4 span,.shared-health-group h4:before,.feature-symbol,.care-row .care-icon{background:var(--surface-soft);color:var(--secondary)}
.today-row:first-child h4 span,.today-row:nth-child(2) h4 span{color:var(--yellow)}
.auth-card,.auth-switch,.auth-card input,.settings-content input,.settings-content textarea,.settings-content select,#invite-form input,.health-editor input,.health-editor textarea,.health-editor select{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:none}
.auth-card input::placeholder{color:var(--tertiary)}.auth-card label,.auth-card-heading p,.auth-footnote,.auth-divider{color:var(--secondary)}
.auth-card input:focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
.auth-switch-button.is-active{background:var(--selected);color:var(--text);box-shadow:none}
.auth-story-copy h1 span{color:var(--text)}.auth-story-copy>p:not(.eyebrow),#auth-view .auth-story-copy>p:not(.eyebrow){color:var(--secondary)}
#auth-view .auth-benefits span,#auth-view .auth-benefits span:nth-child(2),.auth-story-copy .eyebrow{background:var(--surface-soft);border-color:var(--border);color:var(--secondary)}
[data-theme=light] .brand img{filter:invert(1)}
[data-theme=light] .panel,[data-theme=light] .settings-panel,[data-theme=light] .note-panel{box-shadow:0 24px 70px #20232626}
.banner,.banner.is-info,.health-conflict{background:var(--surface-soft);color:var(--text);border-color:var(--border)}
.form-message{color:var(--yellow)}.health-editor [aria-invalid=true]{border-color:var(--red)}
.theme-options{display:flex;gap:8px;padding:5px;background:var(--bg);border:1px solid var(--border);border-radius:14px;margin-bottom:26px}
.theme-options button{flex:1;min-height:48px;background:transparent;color:var(--secondary);border:1px solid transparent;border-radius:10px;font-weight:600}
.theme-options button[aria-pressed=true]{background:var(--selected);color:var(--text);border-color:var(--border)}
.theme-options button:hover{background:var(--surface-soft);color:var(--text)}
@media(max-width:420px){body:has(#workspace-view:not([hidden])) .brand img{width:105px}body:has(#workspace-view:not([hidden])) .topbar{gap:4px}body:has(#workspace-view:not([hidden])) .top-actions{gap:4px}body:has(#workspace-view:not([hidden])) .round-button{width:36px;height:40px}body:has(#workspace-view:not([hidden])) .add-button{width:36px;min-width:36px}}
/* Match the native app's light-mode accent without tinting the canvas. */
[data-theme=light] .workspace-tabs .quiet-button[aria-pressed=true],[data-theme=light] .section-tabs button[aria-pressed=true]{color:var(--action);background:var(--selected);border-color:#cbdcf5;box-shadow:none}
[data-theme=light] .workspace-tabs .quiet-button:hover,[data-theme=light] .section-tabs button:hover{color:var(--action);background:var(--teal-soft)}
[data-theme=light] .primary-button:hover,[data-theme=light] .auth-card .primary-button:hover{background:#1257b0;color:#fff;border-color:#1257b0}
[data-theme=light] .outline-button,[data-theme=light] .add-button,[data-theme=light] .row-icon,[data-theme=light] .auth-card-icon{color:var(--action);border-color:#cbdcf5;background:var(--teal-soft)}
[data-theme=light] .outline-button:hover,[data-theme=light] .add-button:hover{background:#e1edfd;border-color:var(--action)}
[data-theme=light] .today-row h4 span,[data-theme=light] .shared-health-group h4:before,[data-theme=light] .feature-symbol,[data-theme=light] .care-row .care-icon{color:var(--action);background:var(--teal-soft)}
[data-theme=light] .today-row:first-child h4 span,[data-theme=light] .today-row:nth-child(2) h4 span{color:var(--yellow);background:#fff7df}
[data-theme=light] .theme-options button[aria-pressed=true]{color:var(--action);border-color:#cbdcf5}
/* Consistent hierarchy and quieter chrome across care panels. */
.workspace-heading h1{font-weight:650;letter-spacing:-.04em}.detail-name{font-weight:650;letter-spacing:-.025em}
.section-label,.panel-kicker{font-weight:600;letter-spacing:.08em}.care-row dt{font-weight:600}.care-row dd{font-weight:500;line-height:1.6}
.today-row,.shared-health-group,.care-workspace-item{border-radius:16px}.today-row h4,.shared-health-group h4{line-height:1.4}
.section-tabs{border:0;background:var(--surface-soft);padding:4px;border-radius:14px}.section-tabs button{min-height:44px;border-radius:10px}
.person-card{border-color:var(--border);transition:border-color .15s ease,box-shadow .15s ease}.person-card:hover{border-color:var(--focus);box-shadow:0 4px 18px #00000008}
.person-card.is-selected{border-color:var(--focus)}
@media(prefers-reduced-motion:reduce){.person-card{transition:none}}