/* 澄怀 · A quiet paper garden for everyday cognitive care.
   Task stimuli keep their own colours and type; this sheet styles the workspace. */
@font-face{font-family:ChenghuaiDisplay;src:url('/web/fonts/chenghuai-display.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:ChenghuaiRound;src:url('/web/fonts/chenghuai-round.woff2') format('woff2');font-display:swap;font-weight:400}
:root{--bg:#fff8ec;--paper:#fffdf7;--ink:#563b31;--muted:#786859;--line:#e6dccc;--green:#536b45;--soft:#edf2e5;--amber:#86591e;--peach:#efac82;--shadow:0 3px 0 #70524008;font:16px/1.75 ChenghuaiRound,'Microsoft YaHei','PingFang SC',sans-serif;background:var(--bg);color:var(--ink)}
body{background:var(--bg)}
h1,h2,h3,h4{color:var(--ink)}
h1,.brand,.login-card h2,.welcome-copy h2{font-family:ChenghuaiDisplay,ChenghuaiRound,sans-serif;font-weight:400;letter-spacing:.02em}
h1{font-size:34px;line-height:1.45;margin-bottom:10px}
h2{font-size:22px;line-height:1.55}
h3{font-size:18px;line-height:1.6}
p{line-height:1.85}
small,.small{font-size:14px}
.muted,.source-note{color:var(--muted)}
.eyebrow{font-size:13px;letter-spacing:.04em;color:var(--green);font-weight:400}
.page-head .eyebrow{font-size:12px;margin-bottom:5px}
.page-head{gap:24px;margin-bottom:25px;min-height:78px}
.page-head p{font-size:16px;line-height:1.85;max-width:760px}
.head-actions:empty{display:none}
.brand{font-size:33px;gap:12px}
.brand small{font:12px/1.6 ChenghuaiRound,sans-serif;letter-spacing:.04em;color:var(--muted);margin-top:0}
.brand-mark{width:52px;height:52px;display:block;flex:none;background:transparent;border-radius:0;object-fit:contain}
.btn{min-height:46px;padding:10px 19px;border-radius:13px;border:1px solid #d9cbbb;background:var(--paper);color:var(--ink);font-size:15px;font-weight:600;box-shadow:0 3px 0 #e8dece;transition:background .15s,border-color .15s,box-shadow .15s;line-height:1.6}
.btn:hover{background:#f5eddf;border-color:#bda88e}
.btn:active{box-shadow:0 1px 0 #e8dece}
.btn.primary{background:var(--peach);border-color:#da9771;color:#4d3126;box-shadow:0 3px 0 #d49874}
.btn.primary:hover{background:#e9a073;border-color:#ba7954}
.btn.ghost{color:var(--green);box-shadow:none}
.btn.small{min-height:44px;padding:7px 13px;font-size:14px;border-radius:11px}
.btn.active,.btn[aria-pressed=true]{background:#edf1e2;border-color:#9fae8e;color:#3f5c34;box-shadow:0 2px 0 #d7decb}
.btn:disabled{opacity:.6;box-shadow:none}
.icon-btn{min-width:44px;min-height:44px;font-size:16px;border-radius:12px;color:var(--ink)}
.icon-btn:hover{background:#f2e9d8}
.icon-btn[aria-pressed=true]{background:var(--soft);outline:1px solid #8b9c79}
.pill,.tag{font-size:13px;font-weight:400;border-radius:20px;padding:5px 11px;background:var(--soft);color:#4d623f;line-height:1.6}
.tag.amber,.warning{background:#fff0cf;color:#7d541b}
.panel{border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--paper);box-shadow:var(--shadow)}
.panel+.panel{margin-top:22px}
.two-col,.grid{gap:22px}
.two-col>.panel+.panel,.grid>.panel+.panel,.workspace-grid>.panel+.panel{margin-top:0}
.section-gap{margin-top:24px}
.section-head,.section-title{gap:14px;flex-wrap:wrap}
.section-head h2,.section-title h3{margin:0}
.notice-box{background:#f0f3e8;border-color:#dce3cf;border-radius:13px;color:#516146;font-size:15px;padding:16px 19px;line-height:1.85}
.notice-box.warning{background:#fff1d6;border-color:#ead7ae;color:#805721}
.error{color:#a13c32;font-size:15px}
.empty{font-size:15px;padding:26px 10px;color:var(--muted)}
.empty-state{padding:48px 28px}
.empty-state p{font-size:16px}
.empty-symbol{width:58px;height:58px;border-radius:18px;background:#f3eadb;color:#8a7057}
/* A notebook-like frame, with the illustration kept out of assessment content. */
#sidebar{width:240px;padding:27px 17px 20px;background:#fffaf1;border-right:1px solid #e6dccc;overflow-y:auto}
#sidebar .brand{font-size:32px;padding:0 12px;margin-bottom:38px}
.nav-caption{font-size:12px;letter-spacing:.05em;color:#84735f;margin:0 14px 12px}
.nav{min-height:49px;border-radius:14px;padding:12px 15px;font-size:16px;gap:13px;margin-bottom:7px;color:#73604e}
.nav:hover{background:#f4eadb}
.nav.active{background:#f5d5b9;color:#674531;font-weight:600;box-shadow:0 3px 0 #e9c7a9}
.nav.active:before{display:none}
.nav-symbol,.nav-symbol svg{width:21px;height:21px}
.nav-divider{background:#e6dccc;margin:24px 13px 18px}
.side-bottom{padding-top:22px}
.sidebar-companion{text-align:center;margin:15px 0 10px}
.sidebar-companion img{width:112px;height:115px;object-fit:contain;display:block;margin:auto}
.sidebar-companion p{font-size:12px;color:#827259;margin:4px 0 0}
body[data-page=assessment] .sidebar-companion,body[data-page=training] .sidebar-companion{display:none}
.account{padding:18px 4px 0;border-color:#e6dccc;font-size:14px;gap:9px}
.account small{font-size:12px;max-width:100px}
.user-avatar{width:36px;height:36px;background:#e8eddd;color:#546344;border:1px solid #d8dfca;border-radius:12px}
.app-body{margin-left:240px}
.topbar{height:78px;padding:0 36px;background:#fffaf3;border-bottom:1px solid var(--line)}
.breadcrumb{font-size:14px;gap:12px;color:#7a6858}
.breadcrumb b{color:var(--ink)}
.top-actions{gap:16px}
.patient-switch{font-size:13px;gap:10px}
.top-actions select{width:194px;min-height:44px;background:#fffdf8;border-radius:12px;font-size:13px;padding:8px 11px}
.connection{font-size:12px;color:#69765a}
.connection:before{width:7px;height:7px;background:#7f9865;margin-right:8px}
main{max-width:1500px;padding:32px 36px 48px;min-height:calc(100vh - 137px)}
footer{border-color:var(--line);font-size:12px;padding:18px 36px;color:#83725f}
.current-patient-bar{padding:12px 36px;background:#f0f2e5;border-color:#dfe3d1;color:#596147;font-size:14px}
.current-patient-bar b{color:#435835;font-size:16px}
.context-caption{font-size:12px}
.context-goal{color:#626e54}
.current-patient-bar .btn{min-height:44px;font-size:13px;box-shadow:none}
#offline-banner{margin:16px 36px}
.summary-strip{border-radius:17px;border-color:var(--line);padding:19px 26px;gap:24px 35px;background:var(--paper);font-size:14px;box-shadow:var(--shadow)}
.summary-strip>span{gap:14px}
.summary-strip strong{font-size:28px;color:#654834;font-weight:600}
.workspace-grid{grid-template-columns:1fr 1.1fr;gap:22px}
.next-care{position:relative;padding-top:28px;overflow:hidden}
.care-companion{float:right;object-fit:contain;width:75px;height:88px;margin:-8px -7px 4px 12px}
.next-care>.section-head{display:block}
.next-care .section-head>.btn{margin-top:6px;box-shadow:none;min-height:40px;padding:4px 0;border:0;background:transparent;color:var(--green)}
.patient-context{background:#f4efe5;border-radius:12px;font-size:15px;padding:14px 16px;clear:both}
.work-item{border-color:#e9dfd1;padding:18px 0}
.work-item small{font-size:13px;line-height:1.8;margin-top:3px}
.work-item .dot{background:#b59564}
.journey{gap:15px}
.journey li{border-top:3px solid #e9dfce;padding-top:14px}
.journey li.done{border-color:#9cac81}
.journey li.current{border-color:#e6ae72}
.journey b{font-size:14px}
.journey small{font-size:12px}
.journey .step-index{width:25px;height:25px;display:inline-grid;place-items:center;background:#f3ebdc;border-radius:50%;font-size:12px;color:#7e664a}
.journey li.done .step-index{background:#e5edd7;color:#536842}
.journey li.current .step-index{background:#f7dec0;color:#785438}
/* The first-use page has one clear action and a small illustrated landscape. */
.welcome-garden{display:grid;grid-template-columns:1fr 1.08fr;min-height:335px;align-items:center;gap:12px;padding:0;overflow:hidden;background:#fffdf7}
.welcome-copy{padding:36px 0 36px 34px;position:relative;z-index:1}
.welcome-copy h2{font-size:32px;margin:20px 0 13px}
.welcome-copy p{font-size:16px;line-height:1.9;margin-bottom:24px}
.welcome-copy .actions{gap:12px}
.welcome-art{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 18px 18px;background:#f6f1df;border-left:1px solid #eae0cb}
.welcome-art img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain}
.welcome-art figcaption{font-size:13px;color:#827656;letter-spacing:.12em;margin-top:7px}
.onboarding-steps{gap:18px}
.onboarding-steps>.panel+.panel{margin-top:0}
.onboarding-step{padding:25px;border-radius:18px;position:relative}
.onboarding-step .step-index{width:35px;height:35px;border:1px solid #d5ddc4;border-radius:11px;background:#eaf0de;color:#5a6c46;font-size:15px;margin-bottom:15px}
.onboarding-step:nth-child(2) .step-index{background:#f8e3c1;border-color:#edcf9e;color:#90683c}
.onboarding-step:nth-child(3) .step-index{background:#eee3eb;border-color:#dccbd7;color:#826579}
.onboarding-step h3{font-size:18px;font-weight:600}
.onboarding-step p{font-size:15px;line-height:1.85}
/* Forms and records keep generous targets and a legible rounded body font. */
label{font-size:15px;gap:8px}
input,select,textarea{min-height:46px;border:1px solid #d6cbb9;border-radius:11px;padding:10px 13px;background:#fffefa;color:var(--ink);font-size:16px;line-height:1.7}
input::placeholder,textarea::placeholder{color:#887965;font-size:14px}
input:disabled,select:disabled{background:#f1ebdf;color:#867665}
input:focus,select:focus,textarea:focus{outline:2px solid #788d60;outline-offset:2px;box-shadow:none;border-color:#788d60}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #788d60;outline-offset:4px}
label small{font-size:13px}
fieldset{border-radius:13px}
.form-grid{gap:20px 24px}
.form-section{padding-top:25px;margin-top:25px}
.form-section h3,.form-section summary{font-size:17px}
.form-actions{gap:12px;padding-top:23px;margin-top:25px}
.form-actions .btn.primary{min-width:130px}
.patient-workspace{grid-template-columns:285px minmax(0,1fr);gap:22px}
.patient-directory{padding:22px;top:100px}
.patient-directory h2{font-size:21px}
.directory-tools{gap:14px}
.directory-tools label{font-size:14px}
.directory-tools input,.directory-tools select{font-size:14px;min-height:44px;border-radius:10px}
.patient-list-item{padding:15px;border-radius:13px;font-size:14px;background:#fffefa;border-color:var(--line)}
.patient-list-item .section-head b{font-size:16px}
.patient-list-item small{font-size:12px}
.patient-list-item .tag{font-size:12px;padding:3px 8px}
.patient-list-item.is-selected{background:#eef2e5;border-color:#a3b28e}
.patient-list-item:hover{background:#f3f5eb;border-color:#a3b28e}
.table-wrap{border-radius:13px}
table,td{font-size:15px}
th{font-size:14px;background:#f5f0e5;color:#796551}
td,th{padding:15px 13px}
td small{font-size:13px}
details{padding-top:18px;margin:22px 0}
summary{font-size:16px;line-height:1.85;min-height:32px}
details.panel:not([open]){padding:20px 24px}
pre{background:#f2eee5;border-radius:11px;color:#685544;padding:17px;font-family:ui-monospace,monospace}
.timeline-item{padding:21px 0;border-color:var(--line)}
.plan-item{gap:20px;padding:20px 0}
.report-summary small{font-size:14px}
.task-card{padding:23px;border-radius:18px;background:#fffdf7;border-color:var(--line)}
.task-card:hover{background:#f7f5e9;border-color:#a9b68f}
.task-card p{font-size:15px;line-height:1.85}
.task-modal{background:#382b2466;backdrop-filter:blur(3px)}
.task-box{border-radius:22px;background:var(--paper);padding:27px}
.task-modal-head{padding-bottom:20px;border-color:var(--line)}
.task-preflight{gap:18px}
.assessment-option{border-radius:14px;padding:18px;background:#fffefa}
.assessment-option:has(input:checked){background:#eef3e4;border-color:#8b9f74}
.assessment-options label{font-size:17px}
.assistant-avatar{background:#edf0df;color:var(--green)}
.autonomous-prompt{font-family:'Microsoft YaHei','PingFang SC',sans-serif}
#toast{background:#5a4938;color:#fffaf1;border-radius:15px;box-shadow:0 6px 22px #51392320;font-size:15px;padding:15px 23px}
/* Authentication: a paper garden on the left and a practical form on the right. */
.login-layout{background:var(--bg);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.login-story{padding:36px clamp(32px,5vw,86px) 26px;background:#f4f0dd;border-color:#e4dac3;justify-content:flex-start}
.login-story>.brand{flex:none}
.login-intro{margin:30px 0 24px;flex:1}
.login-story h1{font-size:clamp(38px,4.3vw,61px);line-height:1.27;letter-spacing:.035em;margin:6px 0 18px}
.login-story p{font-size:16px;line-height:1.95;color:#74634e}
.login-landscape{display:block;width:100%;height:auto;max-height:310px;object-fit:contain;margin:0 auto 4px}
.login-steps{grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 0;padding-top:24px;border-top:1px solid #dfd6be}
.login-steps li{display:block}
.login-steps li>span{width:29px;height:29px;border-color:#cfd7b8;background:#e5ebd3;color:#65734b;font-size:12px;margin-bottom:10px;border-radius:50%}
.login-steps li:nth-child(2)>span{background:#f5ddbb;border-color:#e6cda8;color:#886741}
.login-steps li:nth-child(3)>span{background:#e8dce6;border-color:#dbccda;color:#80677e}
.login-steps b{font-size:15px}
.login-steps small{font-size:12px;line-height:1.8;color:#7c6d55}
.login-story .story-foot{font-size:12px;letter-spacing:.07em;margin:0}
.login-side{padding:42px clamp(28px,4vw,68px);position:relative}
.login-card{width:min(100%,460px);padding:35px 36px;border:1px solid #e5d9c7;border-radius:25px;background:#fffdf8;box-shadow:0 6px 0 #ebdfcd70}
.login-card h2{font-size:32px;margin:22px 0 12px;line-height:1.5}
.login-card>p{font-size:15px}
.login-card label{font-size:15px;margin:18px 0}
.login-card input{min-height:49px}
.login-card .btn{min-height:49px;margin:8px 0 14px}
.login-card .edition-note{font-size:12px;color:#7e715e;line-height:1.85;border-color:var(--line);margin-top:24px;padding-top:18px}
.login-card .login-help{font-size:13px}
.login-card .pill{font-size:12px}
/* Large text also applies to secondary details; illustrations never obscure it. */
body.large-text{font-size:20px}
body.large-text :is(p,label,input,select,textarea,.btn,.nav,td,th){font-size:19px}
body.large-text :is(small,.small,.muted.small,.source-note,.tag,.pill){font-size:16px}
body.large-text h1{font-size:38px}
body.large-text h2{font-size:27px}
body.large-text .autonomous-prompt{font-size:28px;line-height:1.8}
body.large-text .login-steps{grid-template-columns:1fr}
body.large-text .login-steps li{display:flex}
body[data-role=patient] .btn,body[data-role=caregiver] .btn{min-height:50px;font-size:18px}
body[data-role=patient] .page-head p,body[data-role=patient] label{font-size:18px}
@media(max-height:900px){.sidebar-companion{display:none}.login-intro{margin-top:24px}.login-landscape{max-height:245px}.login-steps{margin-top:5px;padding-top:18px}}
@media(min-width:1600px){.login-landscape{max-height:370px}.login-intro{margin-top:44px}}
@media(max-width:1250px){
  #sidebar{width:220px;padding-left:13px;padding-right:13px}.app-body{margin-left:220px}
  .connection{display:none}.topbar{padding:0 24px}.top-actions{gap:10px}
  main{padding:28px 24px 40px}.current-patient-bar{padding-left:24px;padding-right:24px}
  .workspace-grid{grid-template-columns:1fr}.patient-workspace{grid-template-columns:245px minmax(0,1fr)}
  .welcome-copy{padding:30px 0 30px 28px}.welcome-copy h2{font-size:29px}.welcome-copy .btn{padding:9px 14px}
  .login-story{padding-left:36px;padding-right:36px}.login-side{padding:32px}.login-card{padding:28px}
}
@media(max-width:1000px){
  .patient-workspace{grid-template-columns:1fr}.patient-directory{position:static}.directory-tools{grid-template-columns:1fr 1fr}.patient-list{grid-template-columns:1fr 1fr;max-height:240px}
  .welcome-garden{grid-template-columns:1fr}.welcome-copy{padding:30px}.welcome-art{border-left:0;border-top:1px solid #eae0cb;padding:12px}.welcome-art img{max-height:215px}.welcome-art figcaption{margin-top:0}
  .onboarding-steps{grid-template-columns:1fr}.onboarding-step .step-index{float:left;margin:0 16px 20px 0}
  .login-layout{grid-template-columns:1fr 1fr}.login-story{padding:32px 26px}.login-story h1{font-size:44px}.login-card{padding:25px}.login-card h2{font-size:28px}.login-side{padding:25px}
  .login-steps{grid-template-columns:1fr;gap:14px}.login-steps li{display:flex;gap:12px}.login-steps li>span{margin:0;flex:none}.login-steps small{margin:0}.login-landscape{max-height:240px}
}
@media(max-width:760px){
  #sidebar{width:240px;padding:25px 17px 20px}.app-body{margin-left:0}
  #sidebar.open{box-shadow:15px 0 50px #61483526}.sidebar-companion{display:none}
  .topbar{min-height:70px;height:auto;padding:10px 12px}.breadcrumb{font-size:14px;gap:4px}.top-actions{gap:4px}
  .top-actions select{width:135px;max-width:34vw;min-height:42px;font-size:12px;padding:7px}.top-actions #font-toggle{min-width:40px}
  main{padding:25px 17px 36px}.page-head{display:block;min-height:0;margin-bottom:23px}.page-head p{font-size:15px}.page-head .eyebrow{font-size:12px}h1{font-size:30px}
  .panel{padding:22px;border-radius:17px}.welcome-garden{padding:0;border-radius:21px}.welcome-copy{padding:26px 23px}.welcome-copy h2{font-size:29px}.welcome-copy p{font-size:15px}.welcome-copy .actions{align-items:stretch}.welcome-copy .actions .btn{flex:1 1 145px}
  .welcome-art{padding:10px 14px}.welcome-art img{max-height:190px}.welcome-art figcaption{font-size:12px}
  .onboarding-step{padding:22px}.onboarding-step p{font-size:14px}.onboarding-step h3{font-size:17px}
  .current-patient-bar{padding:12px 17px;gap:7px 12px;font-size:13px}.current-patient-bar>div{gap:8px}.context-goal{font-size:13px}
  .summary-strip{padding:18px 20px;gap:14px 24px;font-size:13px}.summary-strip strong{font-size:25px}
  .two-col,.grid,.form-grid{grid-template-columns:1fr}.form-grid{gap:18px}.patient-list{grid-template-columns:1fr}.directory-tools{gap:12px}.directory-tools label{font-size:13px}
  .journey{grid-template-columns:repeat(2,1fr)}.patient-editor{scroll-margin-top:90px}.task-box{padding:19px;border-radius:17px}.task-modal{padding:9px}
  .task-grid{grid-template-columns:1fr}.task-card{padding:22px}.empty-state{padding:36px 23px}
  .care-companion{width:65px;height:74px}.table-wrap{max-width:100%}
  .login-layout{grid-template-columns:1fr}.login-story{display:none}.login-side{padding:24px 18px;min-height:100dvh}
  .login-card{padding:27px 24px;width:min(100%,450px);border-radius:23px}.mobile-brand{display:flex;margin-bottom:25px;font-size:34px}.mobile-brand .brand-mark{width:49px;height:49px}.login-card h2{font-size:29px}
  .login-card .edition-note{font-size:12px}footer{padding:17px;display:block;font-size:12px}
  #offline-banner{margin:12px 17px}body.large-text .topbar{flex-wrap:wrap;gap:8px}body.large-text .top-actions{margin-left:auto}body.large-text h1{font-size:34px}
  body.large-text .patient-switch select{font-size:15px;max-width:40vw}
  body.large-text .autonomous-prompt{font-size:26px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sidebar-companion,.care-companion,.welcome-art{display:none}.app-body{margin:0}body,main,.panel{background:white;color:#222}.panel{box-shadow:none;border-color:#ccc}main{max-width:none;padding:0}}