/* ===== Ansal brand: colours taken from the logo (navy, coral, sage, teal). Loaded last so it overrides earlier palettes. ===== */
:root{
--bg:#0A151E;--bg2:#0E1C27;--card:#11212D;--card2:#152834;--line:#21384A;--line2:#2C475B;
--ink:#EAF1F5;--muted:#A3B6C3;--dim:#8398A7;--text2:#C9D7E0;--text3:#D5E1E8;
--mint:#6CC3BF;--mint2:#4FA8A5;--mintink:#06201F;--mintHover:#93D8D4;--accrgb:108,195,191;
--sky:#8EC5E6;--coral:#F2A285;--coralrgb:242,162,133;--green:#B4C79A;--greenrgb:180,199,154;
--sand:#F2A285;--sandrgb:242,162,133;--s4:#F2A285;--s3:#6CC3BF;--s2:#8EC5E6;--s1:#8FA2AF;
--wideSub:#0D3B3A;--b1:#2C475B;--hdr:rgba(10,21,30,.84);
--brand-navy:#284D67;--brand-coral:#EC977D;--brand-sage:#9FAC88;--brand-teal:#569597}
html[data-theme=light]{
--bg:#F6F9FB;--bg2:#ECF2F6;--card:#FFFFFF;--card2:#F6F9FB;--line:#DCE5EC;--line2:#C6D3DD;
--ink:#14283A;--muted:#4C5F70;--dim:#607385;--text2:#26394A;--text3:#1C3042;
--mint:#24506C;--mintink:#FFFFFF;--mintHover:#183A51;--accrgb:36,80,108;
--sky:#2F7A7C;--coral:#B4471A;--coralrgb:180,71,26;--green:#55703B;--greenrgb:85,112,59;
--sand:#B3563A;--sandrgb:179,86,58;--s4:#B3563A;--s3:#24506C;--s2:#3F8C8E;--s1:#6B7D8A;
--wideSub:#D6E6F0;--b1:#C6D3DD;--hdr:rgba(255,255,255,.88);
--glow:0 0 0 1px rgba(36,80,108,.32),0 8px 22px rgba(36,80,108,.13);
--phoneShadow:0 24px 50px -28px rgba(20,40,58,.32)}
html[data-theme=light] body{background:linear-gradient(180deg,#EEF4F8 0,#F8FAFC 420px,#FFFFFF 100%);background-attachment:scroll}
/* logo mark */
img.bmark{width:34px;height:34px;object-fit:contain;flex:none;display:block}
html:not([data-theme=light]) img.bmark{background:#F4F8FB;border-radius:10px;padding:2px}
.bname{letter-spacing:.01em}
.orbit .cmark{pointer-events:none}
@media (max-width:480px){.sitehdr img.bmark{width:30px;height:30px}}
@media print{img.bmark{background:none!important}}
.sitehdr img.bmark{animation:markin .7s cubic-bezier(.3,1.3,.5,1) both}
.brand:hover img.bmark{transform:scale(1.08) rotate(-4deg);transition:transform .25s}
@keyframes markin{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sitehdr img.bmark{animation:none}.brand:hover img.bmark{transform:none}}

/* UX pass: task hierarchy, contextual privacy and patient mobile navigation. */
.task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.task-link{display:flex;align-items:flex-start;gap:14px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none}
.task-link>.ic2{flex:none;color:var(--mint);width:24px;height:24px}
.task-link b,.task-link small{display:block}.task-link b{font-size:18px;margin-bottom:6px}.task-link small{color:var(--muted);font-size:14px;line-height:1.65}
.task-link:hover{border-color:var(--mint);background:var(--card2)}
.next-focus{border-inline-start:4px solid var(--mint);padding:24px}.next-focus h2{margin:4px 0 16px}.next-focus>.link{display:inline-block;margin-top:16px}
.privacy-context{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 20px;background:var(--bg2);color:var(--muted)}
.privacy-context>.ic2{flex:none;margin-top:3px}.privacy-context p{margin:0;font-size:14px;line-height:1.75}.privacy-context a{font-weight:600;text-decoration:underline}
.patient-bottom{display:none}
.task-link:focus-visible,.patient-bottom a:focus-visible,.patient-bottom button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
[lang=ar] .art p,[lang=ar] .art li{line-height:1.95}
@media(max-width:720px){.task-grid{grid-template-columns:1fr}.task-link{padding:18px}.next-focus{padding:20px}}
@media(max-width:1060px){
 .patient-shell .patient-bottom{position:fixed;inset-inline:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 20px #0000000a}
 .patient-bottom a,.patient-bottom button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--muted);text-decoration:none;font:inherit;font-size:12px;cursor:pointer}
 .patient-bottom .ic2{width:22px;height:22px}.patient-bottom [aria-current=page],.patient-bottom .on{background:var(--bg2);color:var(--mint);font-weight:600}
 .patient-shell .appmain{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 .patient-shell .sidebar{z-index:70}.patient-shell .scrim{z-index:65}
 .patient-shell .topbar .langbtn{display:inline-flex!important;flex-shrink:0}
 .patient-shell .gsearch{flex:1;min-width:40px}.patient-shell .envtag{display:none}
}
@media print{.patient-bottom{display:none!important}.patient-shell .appmain{padding-bottom:0}}
.patient-shell.drawer .scrim{z-index:65}.patient-shell .modal{z-index:80}

/* UX-02: patient Home hierarchy */
.next-focus h2{font-size:clamp(22px,2.6vw,28px);line-height:1.3;margin:4px 0 10px}
.next-focus .nwhy{margin:0 0 18px;line-height:1.7}.next-focus .nwhy .who{margin-inline-end:6px}
.next-focus .btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.next-focus .nprog{margin:14px 0 0}
.rsum{border-inline-start:4px solid var(--line2)}.rsum.s3{border-inline-start-color:var(--sky)}.rsum.s4{border-inline-start-color:var(--sand)}.rsum.s2{border-inline-start-color:var(--green)}
.rsum p{margin:8px 0 10px}
.btn.done{background:var(--bg2);color:var(--ink);border:1px dashed var(--line2)}

/* UX-03 / A11Y-01: drawer close button, language switch on phones for every bilingual shell */
.sidebar .dclose{display:none}
@media(max-width:1060px){
 .shell.drawer .sidebar .dclose{display:inline-flex;position:absolute;top:12px;inset-inline-end:12px;z-index:2}
}
@media (max-width:420px){.topbar .langbtn:not(:disabled){display:inline-flex!important;flex-shrink:0;padding:0 10px}}
.mtoggle:focus-visible,.dclose:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media(max-width:1060px){.patient-shell .topbar .mtoggle{display:none}}
@media(max-width:480px){.aprow{flex-wrap:wrap}.aprow .apt{flex:1 1 calc(100% - 70px)}.aprow .tag{margin-inline-start:62px}.arow{flex-wrap:wrap}.arow .atx{flex:1 1 60%}.arow .btn{margin-inline-start:auto}}

/* UX-04 sharing preview */
.shareprev{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;margin:14px 0}
.shareprev dt{font-weight:600;color:var(--muted);font-size:14px}.shareprev dd{margin:0}.shareprev ul{margin:0;padding-inline-start:18px;list-style:disc}.shareprev li{margin:0 0 4px}
@media(max-width:480px){.shareprev{grid-template-columns:1fr;gap:4px}.shareprev dd{margin-bottom:10px}}

/* UX-01 homepage: secondary exploration */
.explore .xgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.xlink{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}
.xlink>.ic2{flex:none;color:var(--mint);width:22px;height:22px}.xlink b,.xlink small{display:block}.xlink b{margin-bottom:4px}.xlink small{color:var(--muted);line-height:1.6}
.xlink:hover{border-color:var(--mint)}.xlink:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
@media(max-width:960px){.explore .xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.explore .xgrid{grid-template-columns:1fr}}
.retnote{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 12px}

/* UX-05 / UX-06 */
.tag.pilot{font-size:11px;padding:2px 8px;margin-inline-start:6px;vertical-align:middle}
.btn[disabled]{opacity:.7;cursor:not-allowed}
.gdesc{margin:-4px 0 10px}
.artstatus{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}.artstatus a{font-size:14px}