:root{--teal:#0F6E6E;--teal2:#138a8a;--gold:#F2A93B;--sun:#F7C873;--cream:#FFF8EC;--ink:#23302f;--muted:#5d6b6a;--card:#fff;--line:#eadfcb;--red:#c0392b;--green:#2e8b57}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans","Noto Sans Khmer","Noto Sans Lao","Noto Sans Myanmar","Noto Sans TC","Noto Sans SC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.55}
body{padding-bottom:76px}
a{color:var(--teal)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(255,248,236,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--teal);font-weight:700;letter-spacing:.08em;font-size:1.15rem}
.brand img{height:34px}
.lang{display:flex;align-items:center;gap:6px}.lang select{max-width:150px}.lang img{width:22px;height:22px}
select,input,textarea,button{font:inherit}
select,input[type=text],input[type=date],textarea{border:1px solid #d9cdb6;border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink);max-width:100%}
main{max-width:860px;margin:0 auto;padding:16px}
main.wide{max-width:1100px}
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:300px;background:linear-gradient(160deg,#ffe2a8,#f7c873 40%,#0F6E6E);color:#fff;display:flex;align-items:flex-end}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ov{position:relative;padding:22px;background:linear-gradient(transparent,rgba(10,40,40,.78));width:100%}
.hero h1{margin:0 0 4px;font-size:2rem;letter-spacing:.06em}
.hero p{margin:0;opacity:.95}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 2px 10px rgba(80,60,20,.05)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.tile img{width:44px;height:44px;flex:none}
.tile b{display:block;color:var(--teal)}
.tile small{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;background:var(--teal);color:#fff;cursor:pointer;text-decoration:none;font-weight:600}
.btn.alt{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}
.btn.gold{background:var(--gold);color:#3a2600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);background:#fff6e3;border-left:4px solid var(--gold);padding:8px 12px;border-radius:8px}
.draft{font-size:.72rem;color:#8a5a00;background:#fff1cc;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}
.q.missing{border-color:var(--red);box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.q .t{font-weight:600;margin-bottom:10px}
.q .n{color:var(--teal);margin-right:6px}
.scale{display:grid;grid-template-columns:auto repeat(7,1fr) auto;gap:4px;align-items:center}
.scale small{font-size:.72rem;color:var(--muted)}
.scale label{display:block}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale span{display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;border:1.5px solid #d6e6e6;background:#f6fbfb;cursor:pointer;font-weight:600;color:var(--teal)}
.scale input:checked+span{background:var(--teal);color:#fff;border-color:var(--teal)}
.scale input:focus-visible+span{outline:3px solid var(--gold)}
.opts label{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;border:1px solid #e5eded;margin:6px 0;background:#f9fcfc;cursor:pointer}
.progress{position:sticky;top:58px;z-index:10;background:var(--cream);padding:6px 0}
.bar{height:8px;background:#e9e1d1;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--teal));width:0}
nav.bottom{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;background:#fff;border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
nav.bottom a{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--muted);text-decoration:none;min-width:56px}
nav.bottom a img{width:24px;height:24px;opacity:.75}
nav.bottom a.on{color:var(--teal);font-weight:700}nav.bottom a.on img{opacity:1}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#23302f;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;transition:.3s;pointer-events:none;z-index:50;max-width:90vw}
#toast.show{opacity:1}
.tribute img.top{width:100%;border-radius:18px;max-height:340px;object-fit:cover}
.tribute h2{font-family:"Noto Serif",serif;color:var(--teal)}
.tribute blockquote{font-family:"Noto Serif",serif;font-style:italic;border-left:4px solid var(--gold);margin:12px 0;padding:6px 14px;color:#3d4a49}
table.list{width:100%;border-collapse:collapse}table.list td,table.list th{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:.92rem}
.qrbox{display:flex;justify-content:center;padding:10px;background:#fff;border-radius:12px}
.qrbox img,.qrbox canvas{width:min(320px,80vw);height:auto;image-rendering:pixelated}
video.scan{width:100%;max-width:420px;border-radius:12px;background:#000}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.tabs button{border:1px solid var(--teal);background:#fff;color:var(--teal);border-radius:999px;padding:6px 14px;cursor:pointer}.tabs button.on{background:var(--teal);color:#fff}
/* report pages */
.rpt{display:flex;flex-direction:column;align-items:center;gap:16px}
.page-wrap{width:100%;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.12);border-radius:4px}
.page{position:relative;transform-origin:0 0;background:#fff;font-family:Calibri,"Noto Sans","Noto Sans Khmer","Noto Sans Lao","Noto Sans Myanmar",sans-serif;color:#000}
.page .c{position:absolute;overflow:hidden;padding:1px 3px;white-space:nowrap;line-height:1.2;display:flex}
.page .c.w{white-space:pre-wrap;word-break:break-word}
.page img{position:absolute}
.page svg{position:absolute}
.spinner{width:42px;height:42px;border:4px solid #eadfcb;border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite;margin:30px auto}@keyframes sp{to{transform:rotate(360deg)}}
@media print{.top,nav.bottom,.noprint,#toast{display:none!important}body{padding:0;background:#fff}main{max-width:none;padding:0}.page-wrap{box-shadow:none;page-break-after:always;border-radius:0}.rpt{gap:0}}
/* v2 friendly mobile-first */
#saved{white-space:nowrap;font-size:.72rem;color:var(--green);background:#e8f6ee;border-radius:999px;padding:3px 10px;opacity:0;transition:opacity .3s;margin-left:auto;margin-right:8px}#saved.on{opacity:1}
.sh{display:flex;align-items:center;gap:10px;color:var(--teal)}.sh img{width:34px;height:34px}
.banner{width:100%;max-height:200px;object-fit:cover;border-radius:18px;margin:4px 0 8px}
.heromark{width:54px;height:54px;background:#fff;border-radius:14px;padding:6px;margin-bottom:6px}
.btn.big{padding:15px 22px;font-size:1.05rem;min-height:54px}.btn .bi{width:24px;height:24px;background:#fff;border-radius:6px;padding:2px}
p.big{font-size:1.05rem}
.resume{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);border-color:var(--gold);background:#fff8e6}.resume img{width:46px}.resume>div{flex:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink)}.step img{width:100%;height:150px;object-fit:cover;display:block}.step div{padding:10px 14px}.step b{display:block;color:var(--teal);font-size:1.05rem}.step small{color:var(--muted)}
.num{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#3a2600;font-weight:700;align-items:center;justify-content:center;margin-bottom:4px}
.qnav{justify-content:space-between;margin:10px 0;display:none}
.onecard #qs .q{display:none}.onecard #qs .q.cur{display:block;min-height:300px;padding:22px 16px}
.onecard .qnav{display:flex;position:sticky;bottom:72px;background:var(--cream);padding:8px 0;z-index:5}
.onecard #qs .q.cur .t{font-size:1.25rem;line-height:1.5;margin-bottom:22px}
.onecard .scale{grid-template-columns:repeat(7,1fr)}.onecard .scale small{grid-column:span 7;display:none}
.onecard .scale span{height:56px;font-size:1.2rem}
.onecard .scale::before,.onecard .scale::after{content:none}
.onecard .opts label{padding:14px;font-size:1.05rem}
.summary{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,#fff)}
.sumhead{display:flex;gap:14px;align-items:center}.sumhead img{width:110px;height:90px;object-fit:cover;border-radius:14px}
.codes{display:flex;gap:8px}.codes span{background:var(--teal);color:#fff;border-radius:10px;padding:4px 12px;font-weight:700;letter-spacing:.08em}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}.sumgrid>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.sumgrid h4{margin:0 0 4px;color:var(--teal)}.sumgrid ul{margin:0;padding-left:18px}
.cheer{font-weight:600;color:#7a4b00;margin:12px 0 0}
@media (min-width:900px){nav.bottom{max-width:860px;margin:0 auto;border-radius:16px 16px 0 0;left:0;right:0}}
/* ---------- v3: accessibility, easy-read report, learn, plan ---------- */
:root{--focus:#0b3d3d;--warn:#9a3412;--hc-line:#23302f}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #fff}
.scale input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--teal);color:#fff;padding:10px 14px;border-radius:10px}.skip:focus{top:8px}
/* separate rules: a browser that does not know :focus-visible drops the whole selector list */
h1:focus,h2:focus,main:focus{outline:none;box-shadow:none}
h1:focus-visible,h2:focus-visible,main:focus-visible{outline:none;box-shadow:none}
.top{gap:8px;padding:8px 12px}.top .tools{display:flex;align-items:center;gap:6px;min-width:0}.lang select{max-width:128px;min-height:40px}
.iconbtn{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;border:1px solid #d9cdb6;background:#fff}.iconbtn img{width:24px;height:24px}
#saved{margin-left:auto;margin-right:0}
@media (max-width:380px){.brand span{display:none}.lang img{display:none}.lang select{max-width:116px}}
nav.bottom a{font-size:.78rem;min-width:0;flex:1;padding:2px 2px;text-align:center;line-height:1.2}nav.bottom a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
nav.bottom a.on{background:#e8f3f3;border-radius:12px}
input[type=text],input[type=date],input[type=search],textarea,select{width:100%;min-height:44px;font-size:1rem}
label{display:block;font-weight:600;margin-bottom:4px}label.switch,label.muted,.opts label,.scale label{font-weight:400}
.who p{margin:0 0 12px}.who small{display:block;margin-top:4px}.who .row>p{flex:1 1 180px}
.note.warn{color:var(--warn);background:#fff1ec;border-left-color:var(--warn)}.note.small{font-size:.85rem}
.btn{min-height:44px}.btn.sm{min-height:36px;padding:6px 12px;font-size:.9rem}.btn.danger{color:var(--warn);border-color:#e5b5a3}
.btn .bi.inv{background:transparent;filter:brightness(0) invert(1)}.btn.alt .bi{background:transparent}
.center{text-align:center}.row.center{justify-content:center}.row.between{justify-content:space-between;margin:16px 0}
.ill{display:block;width:100%;height:auto}.ill.sm{width:84px;flex:none}.ill.md{width:min(220px,60vw);margin:0 auto 8px}.ill.top{width:min(260px,70vw);margin:0 auto}
.hero .acro{font-size:.98rem;line-height:1.4}.hero .acro b{color:var(--sun);font-weight:800}
.resume.done{border-color:var(--teal);background:#eef7f6}
ol.steps{list-style:none;padding:0;margin:0 0 14px}.step{display:block;height:100%}.step .ill{background:#f3faf9;height:150px;object-fit:contain;padding:6px}
.privacy{display:flex;gap:14px;align-items:center}.privacy p{margin:4px 0 8px}
.tribute-tile{align-items:center}.tile small{display:block}
.intro summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:1.05rem}.intro summary::-webkit-details-marker{display:none}.intro summary::after{content:'▾';margin-left:auto;color:var(--teal)}.intro[open] summary::after{content:'▴'}
.say{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:8px;border-radius:50%;border:1px solid var(--line);background:#fff;vertical-align:middle;cursor:pointer}.say img{width:22px;height:22px}
.instr{margin:6px 0}
/* keep the 1–7 meaning visible in one-question mode */
.onecard .scale small{display:block;grid-column:auto}.onecard .scale{grid-template-columns:repeat(7,1fr);row-gap:6px}
.onecard .scale small:first-child{grid-row:2;grid-column:1/4;text-align:left}.onecard .scale small:last-child{grid-row:2;grid-column:5/8;text-align:right}
.scale small{font-size:.8rem}.scale span{min-height:44px;height:auto;border-color:#9fbcbc}
.scale input:checked+span::after{content:'✓';font-size:.75em;margin-left:2px}
.onecard .qnav{bottom:calc(76px + env(safe-area-inset-bottom))}
/* report screen */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--teal);font-weight:600;text-decoration:none;cursor:pointer;text-align:center;font-size:.95rem}.act img{width:30px;height:30px}
.act:hover,.tile:hover,.step:hover{border-color:var(--teal)}
.seg{display:inline-flex;border:1.5px solid var(--teal);border-radius:999px;overflow:hidden;margin:6px 0}.seg button{border:0;background:#fff;color:var(--teal);padding:8px 16px;min-height:42px;cursor:pointer;font-weight:600}.seg button[aria-pressed=true]{background:var(--teal);color:#fff}
.codes a,.codes span{display:inline-flex;flex-direction:column;align-items:center;background:var(--teal);color:#fff;border-radius:12px;padding:4px 14px;font-weight:800;letter-spacing:.08em;text-decoration:none;line-height:1.2}.codes small{font-size:.65rem;font-weight:600;opacity:.9;letter-spacing:.04em}
.codes{flex-wrap:wrap;margin:8px 0}
.sumhead .ill{width:120px;flex:none}.sumhead img.ill{height:auto;border-radius:0;object-fit:contain}
.sumgrid h4{display:flex;gap:8px;align-items:center}.sumgrid h4 img{width:24px;height:24px}
.profile .charts,.summary .charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
figure.chart h5{margin:2px 4px 8px;font-size:1rem;color:var(--teal)}
figure.chart{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}figure.chart svg{width:100%;height:auto;display:block}
figcaption{font-size:.9rem;margin-top:6px}figcaption details{display:block;overflow-x:auto}figcaption table,.fchart table,.tblwrap table{border-collapse:collapse;margin-top:6px;font-size:.9rem}figcaption th,figcaption td,.fchart th,.fchart td,.tblwrap th,.tblwrap td{border:1px solid var(--line);padding:4px 8px;text-align:left}
summary{cursor:pointer;color:var(--teal);font-weight:600}
/* easy-read report */
#rpt.flow{display:block}
.fpage{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0;font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.fh{margin:14px 0 8px}.fh .fc{display:block;padding:6px 12px;border-radius:10px;font-weight:700;font-size:1.05rem}.fh.big .fc{font-size:1.2rem}
.frow{display:flex;flex-wrap:wrap;gap:6px 12px;margin:6px 0}.frow .fc{white-space:pre-line}.frow.multi .fc{padding:2px 0}.frow .fc[style*=background]{padding:4px 10px;border-radius:8px}
.fc.b{font-weight:700}.fc.i{font-style:italic}.fc.ctr{text-align:center}
.fimgs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0}.fimgs img{max-width:100%;height:auto;border-radius:8px}
.ffoot{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);margin:14px 0 0;padding-top:6px}
.fchart{margin:10px 0}.fchart svg{width:100%;height:auto;position:static;max-height:360px}
/* learn */
.crumbs{margin:4px 0}.crumbs a{text-decoration:none;font-weight:600}.crumbs a::before{content:'‹ '}
.learnhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.learnhead .ill{width:140px;margin:0}.learnhead p{flex:1 1 220px;margin:0}
ul.guide-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.prose{font-size:1.02rem;line-height:1.7}.prose p,.prose li,.prose td,.prose blockquote{white-space:pre-line}.prose h3{color:var(--teal);margin:18px 0 6px}.prose blockquote{border-left:4px solid var(--gold);margin:12px 0;padding:6px 14px;background:#fffaf0;border-radius:8px}.prose .src{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
.tblwrap{overflow-x:auto}
.guide>svg,.guide>.diagram,main>svg{display:block;width:100%;height:auto;margin:10px 0}
svg[role=img]{max-width:100%}
/* plan */
.planhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.planhead .ill{width:160px;margin:0}.planhead>div{flex:1 1 220px}
form.plan p{margin:0 0 14px}.letter{display:inline-flex;width:30px;height:30px;border-radius:8px;background:var(--gold);color:#3a2600;font-weight:800;align-items:center;justify-content:center;margin-right:6px}
form.plan .row>p{flex:1 1 160px}
/* lists */
.cards .rec{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.search{display:flex;align-items:center;gap:8px;border:1px solid #d9cdb6;border-radius:12px;padding:0 10px;background:#fff;margin:6px 0 10px}.search img{width:22px}.search input{border:0;min-height:44px;padding:6px 0}
ul.stulist,ul.rs-list{list-style:none;padding:0;margin:0}.stu{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:8px 0;padding:12px 14px}.stu small{display:block}
.rs-list li{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0}.rs-list label{font-weight:400;margin:0}
.empty p{color:var(--muted)}
.link{word-break:break-all}
fieldset{border:0;padding:0;margin:0 0 12px}legend{font-weight:700;margin-bottom:6px}
.tribute .photo{width:100%;border-radius:18px;max-height:300px;object-fit:cover;margin-top:10px}
/* high contrast and calm modes (Settings) */
.hc{--muted:#2f3a39;--line:#23302f;--cream:#ffffff}
.hc body{background:#fff}.hc .card,.hc .q,.hc .tile,.hc .step,.hc .fpage,.hc .act{border-width:2px;border-color:#23302f;box-shadow:none}
.hc .scale span{border:2px solid #23302f;color:#0b3d3d}.hc .note{color:#23302f}.hc .hero .ov{background:rgba(10,40,40,.88)}
.calm *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
@media print{.say,.actions,.seg,.tabs,.crumbs,.skip,.iconbtn{display:none!important}.fpage{break-inside:avoid-page;border:0}form.plan textarea{border:1px solid #999;min-height:4em}}
ol.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (max-width:600px){.step{display:flex;align-items:center}.step .ill{width:116px;height:100px;flex:none}.step div{padding:10px 12px}}
input[type=checkbox]{width:22px;height:22px;vertical-align:middle;margin-right:8px;accent-color:var(--teal)}label.switch{display:flex;align-items:center;min-height:44px}
/* v3.1 questionnaire steps */
.stepper{list-style:none;display:flex;gap:4px;padding:0;margin:4px 0 12px;counter-reset:s}.stepper li{flex:1;position:relative}
.stepper li:not(:last-child)::after{content:'';position:absolute;top:22px;right:-6px;width:12px;height:2px;background:var(--line)}
.stepper button{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:8px 4px;cursor:pointer;color:var(--muted);font-size:.85rem;min-height:44px}
.stepper .dot{display:inline-flex;width:26px;height:26px;border-radius:50%;background:#eee6d6;color:var(--ink);font-weight:700;align-items:center;justify-content:center}
.stepper img{width:22px;height:22px}.stepper .lbl{line-height:1.2;text-align:center}
.stepper li.cur button{border-color:var(--teal);background:#eef7f6;color:var(--teal);font-weight:700}.stepper li.cur .dot{background:var(--teal);color:#fff}
.stepper li.done .dot{background:var(--green);color:#fff}
.glist{list-style:none;padding:0;margin:8px 0}.glist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}.glist img{width:26px;height:26px;flex:none;margin-top:2px}
.howscale .ill{max-width:320px;margin:0 auto}.scale.demo{grid-template-columns:auto repeat(7,1fr) auto;margin:10px 0}.scale.demo span{min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid #9fbcbc;background:#f6fbfb;color:var(--teal);font-weight:700}
.scale.demo span.pick{background:var(--teal);color:#fff;box-shadow:0 0 0 3px var(--gold)}
.prow{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:4px}.prow #pc{font-weight:700;color:var(--teal)}
.tleft{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.9rem}.tleft img{width:18px;height:18px}
.iconbtn.sm{width:40px;height:40px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin:10px 0}.qgrid button{min-height:40px;border-radius:10px;border:1.5px solid var(--teal);background:var(--teal);color:#fff;font-weight:700;cursor:pointer}
.qgrid button.miss{background:#fff;color:var(--warn);border:2px dashed var(--warn)}
#gridArea{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 10px;margin-top:8px;max-height:46vh;overflow:auto}
.scalekey{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.9rem}
.done-card{border-color:var(--green);background:#f0faf4}.done-card .ill{margin:0 auto}
.overlay{position:fixed;inset:0;z-index:60;background:rgba(20,40,40,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.overlay[hidden]{display:none}.sheet{background:#fff;border-radius:22px;padding:20px;max-width:440px;width:100%;margin-bottom:calc(70px + env(safe-area-inset-bottom));box-shadow:0 10px 40px rgba(0,0,0,.25)}
.sheet svg[role=img]{width:72px;height:72px;margin:0 auto;display:block}
.linkbtn{background:none;border:0;color:var(--teal);text-decoration:underline;cursor:pointer;font:inherit;min-height:44px}
.nosave{margin:0;border-radius:0}.small{font-size:.88rem}
@media (max-width:420px){.stepper .lbl{font-size:.75rem}.stepper img{display:none}}
/* v3.1 report guide */
.codes-explained{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:12px}.codes-explained h4{margin:0 0 6px}
.cx{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.cxh{margin:4px 0;color:var(--muted)}.cxh b{color:var(--teal);letter-spacing:.08em;font-size:1.1rem}
ol.lts,ul.lts{list-style:none;padding:0;margin:0 0 6px}.lts li{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}.lts li>span:nth-child(2){flex:1}.lts small{display:block;color:var(--muted)}
.lt{display:inline-flex;width:38px;height:38px;flex:none;border-radius:10px;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;background:var(--teal)}
.lt.d0{background:#0b5757}.lt.d1{background:#138a8a}.lt.d2{background:#4f9a9a}.lt.d3{background:#6b8c8c}.lt.f{background:#9a5b00}
.rk{display:inline-flex;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--teal);color:var(--teal);font-weight:700;align-items:center;justify-content:center;font-size:.85rem}
.sumgrid.two .hint{background:#fffaf0}
.nextsteps .nslist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.ns{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;height:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;position:relative}
.ns:hover{border-color:var(--teal)}.ns .ill.nsimg{width:100%;height:120px;object-fit:contain;background:#f3faf9;border-radius:12px}.ns b{color:var(--teal);font-size:1.05rem}.ns small{color:var(--muted)}.ns .num{position:absolute;top:18px;left:18px}
.ns .switch{margin-top:6px;font-size:.92rem}
.rmap summary{list-style:none}.rmap summary::-webkit-details-marker{display:none}.rmap summary .sh{margin:0}
ol.maplist{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.maplist button{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;font-size:.9rem;color:var(--ink);text-align:center;min-height:44px}
.maplist button img{width:28px;height:28px}.maplist button:hover{border-color:var(--teal)}
.fpage:focus{outline:3px solid var(--focus);outline-offset:2px}
.journey h2{margin:0}.jsteps{list-style:none;padding:0;margin:10px 0 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.jsteps a{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;text-decoration:none;color:var(--muted);font-size:.85rem;line-height:1.25;padding:8px 4px;border-radius:14px;border:1.5px solid var(--line);background:#fff;height:100%}
.jsteps img{width:26px;height:26px}.jsteps .dot{display:inline-flex;width:26px;height:26px;border-radius:50%;background:#eee6d6;color:var(--ink);font-weight:700;align-items:center;justify-content:center}
.jsteps li.done .dot{background:var(--green);color:#fff}.jsteps li.now a{border-color:var(--gold);background:#fff8e6;color:var(--ink);font-weight:700}.jsteps li.now small{color:#8a5a00}
/* review fixes: no overflow at 320–360px */
.sumhead{flex-wrap:wrap}.sumhead>div{flex:1 1 180px;min-width:0}.sumhead h3,.summary h3,.journey h2{overflow-wrap:anywhere}
nav.bottom a{font-size:.72rem;overflow-wrap:anywhere}nav.bottom a span{word-break:break-word}
.jsteps a{overflow-wrap:anywhere;min-width:0}.jsteps{grid-template-columns:repeat(4,minmax(0,1fr))}
.addfb{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;margin-top:6px}.addfb .bi{width:20px;height:20px}
.qpeek{background:#f6fbfb;border-radius:12px;padding:8px 12px;text-align:left}
nav.bottom a,nav.bottom a span,.jsteps a{overflow-wrap:break-word;word-break:normal;hyphens:auto}
@media (max-width:420px){.jsteps{grid-template-columns:repeat(2,minmax(0,1fr))}.jsteps a{flex-direction:row;justify-content:flex-start;text-align:left;gap:8px;padding:8px}.jsteps a small{margin-left:auto}nav.bottom a{font-size:.68rem;letter-spacing:-.01em}}
@media (max-width:420px){.jsteps a{flex-wrap:wrap}.jsteps a img{display:none}.jsteps a>span:not(.dot){flex:1;min-width:0}.jsteps a small{flex-basis:100%;margin-left:34px}}
@media (max-width:420px){.jsteps a{font-size:.78rem;gap:6px;padding:8px 6px}.jsteps .dot{width:24px;height:24px}}
.card p,.card li,.prose{overflow-wrap:break-word}.card a[href^="mailto"],.card b{overflow-wrap:anywhere}
/* the summary heading ("CONGRATULATIONS!" and its translations) shrinks to fit beside the picture instead of breaking off its last letter */
.sumhead h3{font-size:clamp(1rem,4.6vw,1.35rem);overflow-wrap:break-word}
/* very narrow phones (320–360px): smaller bottom-bar labels so single words ("Counsellor", Khmer/Lao/Burmese words) are not split */
@media (max-width:360px){nav.bottom a{font-size:.6rem;padding:2px 1px;letter-spacing:-.01em}nav.bottom a img{width:22px;height:22px}}
/* bottom-bar captions stay within a size range at A+/A++ (they sit under icons; page text still grows) */
nav.bottom a{font-size:clamp(9px,.72rem,11.5px)}
@media (max-width:360px){nav.bottom a{font-size:clamp(8.5px,.6rem,9.6px)}}