@font-face{font-family:'Gelasio';src:url(/assets/fonts/gelasio.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Noto Nastaliq Urdu';unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF;src:url(/assets/fonts/noto-nastaliq-urdu.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root{
--navy:#082449;--teal:#006678;--teal-bright:#097483;--ink:#19334c;--muted:#46565f;--border:#e2e9ed;
--paper:#fff;--bg:#fff;--wash:#f2f8fc;--sky:#eaf6fa;--shadow:0 3px 12px rgba(18,47,73,.09);
--pink:#fff0f3;--green:#e8f8f0;--cream:#fdf6ec;--lav:#f1eefb;--mint:#e6f5f0;--peach:#fdeee4;--urgent-bg:#fff0f3;--urgent-ink:#a92b3c;
--quick-bg:#eef8f1;--focus:#B7791F;--chip:#fff;--drawer-bg:#fff;--input-bg:#fff;--head-ink:#082449;
--btn-bg:#006678;}
html[data-theme="dark"]{
--navy:#d7e6f5;--teal:#3fb9cc;--teal-bright:#5cc6d8;--ink:#e6eef6;--muted:#9db2c4;--border:#22374d;
--paper:#101c2c;--bg:#0b141f;--wash:#0e1a29;--sky:#122636;--shadow:0 3px 14px rgba(0,0,0,.45);
--pink:#2b1a24;--green:#152b21;--cream:#2a2115;--lav:#201c33;--mint:#14291f;--peach:#2b1d16;--urgent-bg:#331820;--urgent-ink:#ff9aa8;
--quick-bg:#122a1e;--chip:#132334;--drawer-bg:#0f1b2a;--input-bg:#0d1826;--head-ink:#eaf2fa;
--btn-bg:#006678;}
html[data-cb="on"]{--teal:#0072B2;--teal-bright:#0072B2;--urgent-ink:#D55E00;--urgent-bg:#fdf3e7;--focus:#E69F00}
html[data-cb="on"][data-theme="dark"]{--teal:#56B4E9;--teal-bright:#56B4E9;--urgent-bg:#33241a;--urgent-ink:#E69F00;--focus:#E69F00}
/* FIX 27-Oct-2026 (#3): dark-mode active states must keep >=4.5:1 contrast (was 2.33:1 white on #3fb9cc / 2.31:1 on #56B4E9). --teal itself is NOT changed: CB mode overrides it. */
html[data-theme="dark"] .tgl[aria-pressed="true"],html[data-theme="dark"] .opt-seg.active,html[data-theme="dark"] .unit-toggle button.active{background:#006678;border-color:#006678;color:#fff}
html[data-theme="dark"][data-cb="on"] .tgl[aria-pressed="true"],html[data-theme="dark"][data-cb="on"] .opt-seg.active,html[data-theme="dark"][data-cb="on"] .unit-toggle button.active{background:#0072B2;border-color:#0072B2;color:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,"Segoe UI",sans-serif;transition:background .25s,color .25s}
body.ur{font-family:'Noto Nastaliq Urdu',Tahoma,serif;line-height:2.0}
h1,h2,h3,.serif{font-family:Gelasio,Georgia,'Times New Roman',serif;color:var(--head-ink)}
body.ur h1,body.ur h2,body.ur h3,body.ur .serif{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9;letter-spacing:0}
button,input,select,textarea{font:inherit}button{cursor:pointer}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.small{font-size:12px}.muted{color:var(--muted)}
.hidden{display:none!important}
/* bilingual span swap (live panels/tiles/about markup) */
span.ur{display:none}
body.ur span.ur{display:inline}
body.ur span.en{display:none}
/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--paper);box-shadow:0 2px 14px rgba(10,38,69,.10);overflow-x:hidden}
.nav{max-width:1536px;margin:auto;display:flex;align-items:center;gap:clamp(10px,1.4vw,24px);min-height:66px;padding:9px clamp(16px,3.1vw,50px);overflow-x:hidden}
.logo{display:flex;gap:10px;align-items:center;background:none;border:0;color:var(--head-ink);text-align:start;padding:0}
.logo-mark{width:46px;height:46px;min-width:46px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.logo-mark svg{width:30px;height:30px}
.logo b{font-family:Gelasio,Georgia,serif;font-size:27px;letter-spacing:-.5px;display:block;line-height:1.05;white-space:nowrap}
.logo{flex:0 0 auto}
body.ur .logo b{font-family:'Noto Nastaliq Urdu',serif;font-size:21px}
.logo small{font-size:10.5px;color:var(--muted);letter-spacing:.4px}
.nav .desktop{background:none;border:0;font-size:14.5px;color:var(--ink);padding:8px 4px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.nav-search{flex:1 1 420px;max-width:540px;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);padding:0 6px 0 14px;height:45px}
.nav-search svg{color:var(--muted);flex:0 0 auto}
.nav-search input{border:0;outline:none;flex:1;background:transparent;color:var(--ink);font-size:14px;min-width:0}
.toggles{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0}
.tgl{border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:30px;padding:6px 11px;font-size:12.5px;display:inline-flex;gap:5px;align-items:center;white-space:nowrap;min-height:44px}
.tgl[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.tgl svg{width:15px;height:15px}
.menu-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:11px;padding:7px 11px;font-size:.85rem;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;min-height:44px}
.menu-btn svg{width:26px;height:26px}
/* ---------- hero ---------- */
.hero{background-image:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.45) 45%,rgba(245,251,255,.25)),var(--hero);background-size:cover;background-position:center 47%}
html[data-theme="dark"] .hero{background-image:linear-gradient(90deg,rgba(9,18,30,.65),rgba(9,18,30,.50) 48%,rgba(9,18,30,.30)),var(--hero)}
.hero-inner{max-width:1536px;margin:auto;padding:26px clamp(20px,3.1vw,50px) 22px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr);gap:56px;align-items:center;min-height:322px}
.eyebrow{font-size:11px;letter-spacing:3.2px;font-weight:700;color:var(--muted)}
/* POLISH FIX 1 (prototype QA): Urdu eyebrow — no letter-spacing, tighter line box, breathing room above the H1 */
body.ur .eyebrow{letter-spacing:0;font-size:13.5px;line-height:1.7;padding:8px 0 0;margin-bottom:2px}
.hero h1{font-size:clamp(42px,4.5vw,66px);line-height:1.05;margin:10px 0 10px;letter-spacing:-.03em}
body.ur .hero h1{font-size:clamp(34px,3.6vw,54px);line-height:1.8;letter-spacing:0;margin-top:2px}
.hero p.sub{font-size:18.5px;line-height:1.32;max-width:545px;margin:0 0 17px;color:var(--ink)}
body.ur .hero p.sub{line-height:1.9}
.hero-search{display:flex;gap:6px;max-width:770px;background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:0 5px 18px rgba(25,60,82,.12)}
.hero-search input{flex:1;border:0;outline:none;background:transparent;color:var(--ink);padding:0 12px;font-size:14.5px;min-width:0}
.btn{background:var(--btn-bg);color:#fff;border:0;border-radius:9px;padding:11px 22px;font-weight:600}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.chip{background:var(--chip);border:1px solid var(--border);border-radius:30px;padding:5px 13px;font-size:13px;color:var(--ink);box-shadow:0 2px 5px rgba(35,68,160,.06)}
.trust{background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 32px rgba(19,59,76,.12);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;max-width:505px;justify-self:end;width:100%}
.trust-item{display:flex;gap:11px;align-items:flex-start}
.trust .round{width:50px;height:50px;min-width:50px;border-radius:50%;background:var(--mint);color:var(--teal-bright);display:grid;place-items:center}
html[data-theme="dark"] .trust .round{background:#17352b}
.trust .round svg{width:27px;height:27px}
.trust b{font-size:14.5px;line-height:1.2;display:block;color:var(--head-ink)}
.trust small{font-size:11.5px;color:var(--muted);line-height:1.35;display:block;margin-top:3px}
/* ---------- sections & cards ---------- */
.shell{max-width:1536px;margin:auto;padding:6px clamp(20px,3.1vw,50px) 60px}
.section{margin-top:20px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
@media(max-width:560px){.section-head{flex-direction:column;align-items:flex-start;gap:2px}.section-head a{white-space:nowrap}}
.section h2{font-size:25px;margin:0 0 11px;letter-spacing:-.4px}
.topic-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:13px}
.topic-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;padding:0 0 11px;text-align:start;background:var(--paper);box-shadow:0 3px 10px rgba(16,46,84,.05);transition:transform .18s,box-shadow .18s;position:relative;color:var(--ink)}
.topic-card:hover,.article-card:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(24,54,80,.14)}
.topic-photo{height:84px;width:100%;object-fit:cover;display:block}
.topic-card .symbol{margin:2px 13px 0;display:flex;align-items:center;justify-content:flex-start;width:35px;height:35px;background:none;font-size:0;line-height:0}
.topic-card .symbol svg{width:30px;height:30px;display:block}
.topic-card b{font-family:Gelasio,Georgia,serif;font-size:16.5px;line-height:1.12;margin:1px 13px;display:block;color:var(--head-ink)}
body.ur .topic-card b{font-family:'Noto Nastaliq Urdu',serif;line-height:1.8;font-size:15.5px}
.topic-card small{font-size:11.5px;color:var(--muted);margin:4px 13px 0;line-height:1.3;display:block;padding-inline-end:30px}
.topic-card .chev{position:absolute;bottom:10px;inset-inline-end:9px;width:24px;height:24px;border-radius:50%;background:var(--sky);color:var(--teal-bright);display:grid;place-items:center;font-size:18px;line-height:1}
.article-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.article-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--paper);box-shadow:0 3px 12px rgba(27,59,81,.05);text-align:start;padding:0;color:var(--ink);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.thumb{height:83px;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-wash{height:83px;display:grid;place-items:center;color:var(--teal)}
.thumb-wash svg{width:40px;height:40px;opacity:.85}
.article-card .content{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.cat{font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--urgent-ink);text-transform:uppercase}
body.ur .cat{letter-spacing:0;font-size:12px}
.article-card strong{font-family:Gelasio,Georgia,serif;font-size:16.5px;line-height:1.16;color:var(--head-ink);margin:3px 0 8px;display:block}
body.ur .article-card strong{font-family:'Noto Nastaliq Urdu',serif;line-height:1.85;font-size:15px}
.article-card .bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.article-card .arr{width:26px;height:26px;border-radius:50%;background:var(--sky);color:var(--teal);display:grid;place-items:center;font-weight:700}
.clock-ic{width:12px;height:12px;vertical-align:-2px}
/* ---------- pages ---------- */
.page{display:none}.page.active{display:block}
.breadcrumb{font-size:12.5px;color:var(--muted);margin:16px 0 6px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--teal)}
.three{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:22px;align-items:start}
.panel{border:1px solid var(--border);border-radius:12px;background:var(--paper);padding:16px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 10px;font-size:17px}
.side-link{display:block;width:100%;text-align:start;background:none;border:0;padding:8px 9px;border-radius:8px;color:var(--ink);font-size:14px;text-decoration:none}
.side-link.active{background:var(--sky);font-weight:600}
.side-link:hover{background:var(--wash)}
.prose h1.article-title{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin:4px 0 12px;letter-spacing:-.02em}
body.ur .prose h1.article-title{line-height:1.75;letter-spacing:0}
.tag{display:inline-block;background:var(--sky);color:var(--teal-bright);border-radius:20px;padding:3px 11px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tag-btn{border:0;cursor:pointer;font-family:inherit}
.tag-btn:hover{text-decoration:underline}
body.ur .tag{letter-spacing:0;font-size:12.5px}
.byline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--mint)}
.byline .who b{display:block;font-size:14.5px}
.byline-name{color:var(--head-ink);text-decoration:none;font-weight:700}
.review-chip{display:inline-block;background:var(--green);color:var(--teal-bright);border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:700;margin-inline-start:8px}
.answer,.quick-answer{background:var(--quick-bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:6px 0 16px}
.answer h3,.qa-label{margin:0 0 6px;color:var(--teal-bright);font-size:18px;font-family:Gelasio,Georgia,serif;font-weight:700}
body.ur .qa-label{font-family:'Noto Nastaliq Urdu',serif}
.prose section{margin:20px 0}
.prose section h2,.prose section h3{font-size:21px;margin:0 0 7px}
.prose p{margin:0 0 10px}
.prose p.lead{font-size:16.5px}
.prose ul{margin:4px 0 10px;padding-inline-start:20px}
.prose li{margin:4px 0}
.icon-list{list-style:none;padding:0;margin:4px 0 10px}
.icon-list li{display:flex;gap:10px;margin:8px 0;align-items:flex-start}
.bullet-icon{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--sky);color:var(--teal);display:grid;place-items:center;font-size:12.5px;font-weight:700;margin-top:2px}
body.ur .bullet-icon{margin-top:8px}
.faq,.faq-item{border:1px solid var(--border);border-radius:10px;padding:11px 14px;margin:8px 0;background:var(--paper)}
.faq > b,.faq-item > b{display:block;margin-bottom:4px}
.hero-img{width:100%;border-radius:12px;display:block;margin:4px 0 8px}
.urgent,.side-box.urgent{background:var(--urgent-bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.urgent h3{color:var(--urgent-ink);margin:0 0 8px;font-size:17px}
.urgent ul{margin:0;padding-inline-start:18px}.urgent li{margin:5px 0;font-size:14px}
.side-box{border:1px solid var(--border);border-radius:12px;background:var(--paper);padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.side-box h3{margin:0 0 10px;font-size:17px}
.side-box ul{margin:0;padding-inline-start:18px}.side-box li{margin:5px 0;font-size:14px}
.red-flags{background:var(--urgent-bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.red-flags h3{color:var(--urgent-ink);margin:0 0 8px}
/* ===== WARNING ENGINE strips (Phase 7 build — ENGINE OFF; visible only in QA preview) =====
   Presentation rule (Dr. Umer, 21-Oct-2026): main content large; citations + version stamp SMALL print. */
.we-strip{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--paper);position:relative}
.we-strip .we-band{font-weight:800;display:block;margin-bottom:4px;font-size:16.5px}
.we-strip p{margin:0;font-size:15.5px;line-height:1.55}
/* CALM PRESENTATION (Dr. Umer, 21-Oct-2026 ~16:35 PKT): every band renders as
   the SAME soft neutral panel — a bold label line, no saturated/panicky red,
   no flashing or blinking, nothing that spreads panic. EN + UR, light + dark. */
.we-strip{background:var(--wash)}
.we-strip .we-band{color:var(--ink)}
.we-meta{margin-top:9px;display:flex;gap:6px 12px;flex-wrap:wrap}
.we-meta small{font-size:.72rem;color:var(--muted);line-height:1.35}
.we-preview-tag{display:block;font-size:.72rem;font-weight:800;color:var(--urgent-ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.we-strip-tools{margin-top:10px;display:flex;gap:8px;align-items:center}
/* operator flag control (gate G8 redesign) — hidden from the public; revealed
   only in operator mode (?weadmin=1 sets html[data-we-admin="1"]) */
.we-flag-btn{display:none;border:1px solid var(--urgent-ink);background:var(--urgent-bg);color:var(--urgent-ink);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}
html[data-we-admin="1"] .we-flag-btn{display:inline-flex;align-items:center;gap:5px}
.we-strip.we-flagged{border-style:dashed;color:var(--muted);background:var(--wash)}
/* ===== site report menu — small 3-dot menu on articles / tools / warnings ===== */
.tool-panel{position:relative}
.menu3-btn{width:30px;height:30px;min-width:30px;border-radius:50%;border:1px solid var(--border);background:var(--paper);color:var(--muted);font-size:17px;line-height:1;display:inline-grid;place-items:center;padding:0}
.menu3-btn:hover{color:var(--teal);border-color:var(--teal)}
.menu3-abs{position:absolute;top:10px;inset-inline-end:10px;z-index:5}
.menu3-inline{margin-inline-start:auto;flex:0 0 auto}
.we-strip-tools .menu3-inline{margin-inline-start:0}
#menu3Pop{position:fixed;z-index:130;min-width:224px;background:var(--paper);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(8,31,58,.25);padding:6px}
#menu3Pop button{display:flex;width:100%;gap:9px;align-items:center;background:none;border:0;padding:9px 10px;border-radius:8px;color:var(--ink);font-size:14px;text-align:start}
#menu3Pop button:hover{background:var(--wash)}
#menu3Pop .m3-ic{color:var(--teal);width:18px;text-align:center;flex:0 0 auto;font-style:normal}
#menu3Pop .m3-ic-report{color:var(--urgent-ink)}
#reportDlg{position:fixed;inset:0;z-index:140;display:grid;place-items:center;background:rgba(6,20,35,.45);padding:16px}
#reportDlg .rd-card{background:var(--paper);border:1px solid var(--border);border-radius:14px;max-width:440px;width:100%;padding:18px;box-shadow:0 18px 50px rgba(8,31,58,.3);max-height:90vh;overflow:auto}
#reportDlg .rd-title{margin:0 0 4px;font-size:19px}
#reportDlg .rd-ctx{font-size:13.5px;color:var(--ink);margin-bottom:10px}
#reportDlg .rd-label{font-size:13px;font-weight:600;margin:6px 0}
#reportDlg .rd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#reportDlg .rd-chip{border:1px solid var(--border);background:var(--chip);color:var(--ink);border-radius:20px;padding:5px 12px;font-size:12.5px}
#reportDlg .rd-chip[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
#reportDlg .rd-msg{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--ink);padding:10px;min-height:88px;font-size:14.5px;resize:vertical}
#reportDlg .rd-note{font-size:12px;color:var(--muted);margin:8px 0 12px}
#reportDlg .rd-actions{display:flex;gap:8px;justify-content:flex-end}

/* verbatim review block (live reviewBlock()) */
.review-block{border:1px dashed var(--border);border-radius:12px;padding:14px 16px;margin-top:22px;font-size:13.5px;background:var(--wash)}
.review-block h2{font-size:17px;margin:0 0 8px}
.review-block ul{margin:0;padding-inline-start:18px}
.review-block li{margin:5px 0}
.methodology-note{font-size:12.5px;color:var(--muted);border-inline-start:3px solid var(--border);padding:4px 10px;margin:10px 0}
/* BP category bar (live renderBPBar) */
.bp-category-bar{margin:18px 0}
.bp-bar-track{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.bp-bar-track span{flex:1;padding:9px 6px;font-size:12px;text-align:center;line-height:1.35;color:#123}
.bp-normal{background:#cdeacb}.bp-elevated{background:#f2e3ac}.bp-stage1{background:#f6c177}.bp-stage2{background:#ef8f6b}.bp-crisis{background:#d9534f;color:#fff!important}
.bp-bar-note{font-size:12.5px;color:var(--muted)}
.bp-alert-grid{display:grid;gap:9px}
.bp-alert-row{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--paper)}
.bp-alert-row b{color:var(--urgent-ink);display:block;margin-bottom:2px}
/* glossary */
.gterm{border-bottom:1px dotted var(--teal);cursor:pointer;color:var(--teal-bright)}
#glossaryPop{position:fixed;z-index:120;width:320px;max-width:calc(100vw - 28px);background:var(--paper);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(8,31,58,.25);padding:13px 15px;font-size:13.5px}
#glossaryPop b{display:block;margin-bottom:4px;color:var(--head-ink)}
/* ---------- tools ---------- */
.tool-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.tool-panel h3{font-size:21px;margin:0 0 6px}
.hint{color:var(--muted);margin:0 0 14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:12px}
.field label{font-weight:600;font-size:14px;display:block;margin-bottom:4px}
.field-help{font-size:12px;color:var(--muted);margin:0 0 5px}
.field input[type=number],.field input[type=date],.field input[type=text],.field select{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--ink);font-size:16px}
.check-field{margin:13px 0}
.unit-toggle{display:inline-flex;border:1px solid var(--border);border-radius:30px;overflow:hidden;margin:0 0 14px}
.unit-toggle button{background:var(--paper);border:0;padding:7px 16px;color:var(--ink);font-size:13.5px}
.unit-toggle button.active{background:var(--teal);color:#fff}
.result{margin-top:16px}
.result:focus{outline:none}
.result:empty{display:none}
.bp-result{border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--wash)}
.bp-result .big{font-family:Gelasio,Georgia,serif;font-size:34px;font-weight:700;color:var(--head-ink)}
.bp-result .cat{font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--head-ink)}
.bp-result.critical{background:var(--urgent-bg);border-color:var(--urgent-ink)}
.bmi-number{font-family:Gelasio,Georgia,serif;font-size:40px;font-weight:700;color:var(--head-ink)}
.weight-range,.band-note,.fine-note{font-size:12.5px;color:var(--muted)}
.result-secondary{color:var(--muted)}
.range-wrap{position:relative;margin:12px 0 4px}
.range-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#edf0f3}
html[data-theme="dark"] .range-bar{background:#1b2c42}
.range-seg{height:100%}.range-seg.b{background:#7db8e8}.range-seg.g{background:#43b581}.range-seg.y{background:#f2c14e}.range-seg.r{background:#e05a4e}
.range-marker,.range-pin{position:absolute;top:-4px;width:3px;height:22px;background:var(--head-ink);border-radius:2px;transform:translateX(-50%)}
.range-labels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:5px;gap:4px}
.range-labels span{min-width:0;text-align:center}
/* POLISH FIX 2 (prototype QA): mobile BP range-bar labels were too tight */
@media(max-width:480px){.range-labels{font-size:9px;gap:2px;line-height:1.25}.range-labels span{flex:1 1 0}}
.emergency-strip{display:block;background:#9f221f;color:#fff;text-decoration:none;font-weight:700;text-align:center;border-radius:9px;padding:11px 14px;margin:12px 0}
.emergency-strip .crisis-secondary{display:block;font-weight:400;font-size:12px;opacity:.85}.emergency-strip .crisis-secondary a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.emergency-strip .ph{margin-inline-end:6px}
/* CALM 1122 STRIP in tool + search contexts (Dr. Umer, 21-Oct-2026 ~16:35 PKT):
   the visitor-facing 1122 strip inside tools and search results is a simple
   bold line on a soft neutral background — never a saturated red block,
   never flashing. (Article urgent boxes keep their own styling; this override
   is scoped to tool panels and the search crisis strip.) */
.tool-panel .emergency-strip,#we-crisis .emergency-strip{background:var(--wash);color:var(--ink);border:1px solid var(--border)}
/* ===== Review My Report form (21-Oct-2026) — calm result cards ===== */
.rr-note{font-size:13px;color:var(--muted);margin:0 0 10px}
.rr-group{margin:16px 0 4px}
.rr-group>h4{font-family:Gelasio,Georgia,serif;font-size:16px;margin:0 0 8px;color:var(--head-ink)}
body.ur .rr-group>h4{font-family:'Noto Nastaliq Urdu',serif}
.rr-seg{display:flex;gap:8px}
.rr-seg button{border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:30px;padding:7px 16px;font-size:13.5px;font-weight:600}
.rr-seg button[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.rr-unitrow{display:flex;gap:8px}
.rr-unitrow input{flex:1;min-width:0}
.rr-unitrow select{flex:0 0 auto;width:auto;padding:11px 8px;border:1px solid var(--border);border-radius:9px;background:var(--input-bg);color:var(--ink);font-size:14px}
.rr-check{display:flex;gap:9px;align-items:flex-start;margin:8px 0;font-size:14.5px}
.rr-check input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.rr-notice{border:1px dashed var(--border);background:var(--wash);border-radius:12px;padding:13px 15px;margin:12px 0}
.rr-notice p{margin:0 0 10px;font-size:15px}
.rr-notice .btn{margin-inline-end:8px}
.rr-urgent{border:1px solid var(--border);background:var(--wash);border-radius:12px;padding:14px 16px;margin:12px 0;font-size:15.5px;line-height:1.55}
.rr-urgent a{font-weight:800}
.rr-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin:10px 0;background:var(--paper)}
.rr-corr{margin-top:16px}
.rr-corr h3{font-size:17px;margin:14px 0 2px}
.rr-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px}
.rr-card-head b{font-size:15.5px}
.rr-chip{font-weight:700;font-size:12px;background:var(--sky);color:var(--ink);border:1px solid var(--border);border-radius:20px;padding:2px 11px;white-space:nowrap}
.rr-val{font-size:21px;font-weight:800;margin:2px 0}
.rr-val small{font-size:13px;font-weight:600;color:var(--muted)}
.rr-card p{margin:5px 0;font-size:14.5px;line-height:1.55}
.rr-range{color:var(--muted);font-size:13px}
.rr-disc{border-top:1px dashed var(--border);margin-top:16px;padding-top:10px}
.rr-disc p{font-size:12.5px;color:var(--muted);margin:6px 0;line-height:1.5}
.rr-links{margin-top:12px;font-size:14px}
.rr-links a{margin-inline-end:16px}
.rr-confirm{border:1px dashed var(--border);background:var(--wash);border-radius:12px;padding:13px 15px;margin:10px 0}
.rr-confirm p{margin:0 0 8px;font-size:14.5px}
input[aria-invalid="true"]{border-color:var(--urgent-ink)!important;box-shadow:0 0 0 2px var(--urgent-bg)}
.err{background:var(--urgent-bg);border:1px solid var(--urgent-ink);color:var(--urgent-ink);border-radius:10px;padding:11px 14px}
.calc-disclaimer{font-size:12.5px;color:var(--muted);margin-top:14px}
.info-box{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin:12px 0;background:var(--paper)}
.info-box h4{margin:0 0 6px;font-size:15px;color:var(--head-ink);display:flex;gap:7px;align-items:center}
.info-box p{margin:0}.info-box ul{margin:4px 0;padding-inline-start:18px}
.mean-box{background:var(--sky)}.do-box{background:var(--quick-bg)}.doctor-box{background:var(--urgent-bg)}
.doctor-cta{display:inline-block;margin-top:8px;font-weight:600}
.category-table{width:100%;border-collapse:collapse;margin:8px 0}
.category-table th,.category-table td{border-bottom:1px solid var(--border);padding:7px 8px;text-align:start;font-size:13.5px}
.cat-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:7px}
.limit-box{border:1px dashed var(--border);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--muted);background:var(--wash)}
.zone-table{width:100%;border-collapse:collapse;margin:8px 0}
.zone-table th,.zone-table td{border:1px solid var(--border);padding:7px 9px;font-size:13.5px;text-align:start}
.meal-outline{border:1px solid var(--border);border-radius:10px;padding:12px 15px;background:var(--wash)}
.egfr-seek{color:var(--urgent-ink);font-weight:700}
.tool-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
/* tool presentation — V9 card format (Umer ruling, Oct 20): white card, thin border,
   emoji INLINE before the serif title, muted description, teal "Open tool" action.
   Values measured from the rendered V9 prototype, not eyeballed. */
.tool-mini{border:1px solid var(--border);background:var(--paper);border-radius:11px;padding:18px;text-align:start;color:var(--ink);box-shadow:var(--shadow)}
.tool-mini .tm-line{display:flex;align-items:center;gap:8px}
.tool-mini .tmic{font-size:19px;line-height:1}
.tool-mini b{font-family:Gelasio,Georgia,serif;font-weight:700;font-size:19px;line-height:1.15;color:var(--head-ink)}
body.ur .tool-mini b{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
.tool-mini small{display:block;color:var(--muted);font-size:15px;line-height:1.55;margin-top:9px}
/* tools hub page — V9's exact tools-page metrics */
#tools .breadcrumb{font-size:13px;margin:20px 0}
#tools h1{font-size:clamp(35px,4vw,55px);margin:8px 0;line-height:1.15}
#tools>p.muted{font-size:15px;margin:9px 0 14px}
#tools>h2{font-size:28px;margin:0 0 17px;line-height:1.15}
#tools>h2.tools-sec2{margin-top:9px}
.tool-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tool-card{background:var(--paper);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);padding:18px;text-align:start;color:var(--ink);width:100%}
.tool-card h3{font-size:19px;font-weight:700;line-height:1.15;margin:0 0 8px;color:var(--head-ink)}
.tool-card p{font-size:15px;color:var(--muted);margin:9px 0 14px;line-height:1.55}
body.ur .tool-card p{line-height:2}
.tool-card .open{color:var(--teal);font-size:15px}
@media(max-width:760px){.tool-cards{grid-template-columns:repeat(2,1fr)}#tools>h2.tools-sec2{margin-top:22px}}
/* Nastaliq needs tall line boxes — small Urdu text must not clip */
body.ur .topic-card small,body.ur .trust small,body.ur .dlink small,body.ur .tool-mini small,body.ur .field-help,body.ur .hint,body.ur .portrait-caption,body.ur .article-card .bottom,body.ur .breadcrumb,body.ur .footer{line-height:2.0}
body.ur .topic-card{padding-bottom:14px}
/* URDU LINE-HEIGHT PASS (Umer prototype review fix, Oct 20): multi-line Nastaliq was
   colliding — trust-card titles ("ڈاکٹر کی زیرِ نگرانی مواد", "جانچ اور تازہ کاری"),
   big wrapping headings (search H1) and card/drawer titles sat on ~1.2–1.9 line
   boxes. Nastaliq stacks tall glyphs above and below the baseline, so Urdu display
   text now gets ~2.0–2.15 line boxes. English rules are untouched. */
body.ur h1,body.ur h2,body.ur h3,body.ur .serif{line-height:2.12}
body.ur .hero h1{line-height:2.05}
body.ur .prose h1.article-title{line-height:2.0}
body.ur .trust b{line-height:2.05}
body.ur .trust-item{align-items:flex-start}
body.ur .article-card strong{line-height:2.0}
body.ur .topic-card b{line-height:1.98}
body.ur .tool-mini b,body.ur .tool-card h3{line-height:2.0}
body.ur .dlink b{line-height:1.95}
body.ur .byline-name{line-height:2.0}
body.ur .qa-label,body.ur .answer h3{line-height:2.0}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start;margin-top:18px}
.portrait-card{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}
.portrait-frame img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.portrait-caption{padding:11px 13px;font-size:12.5px;color:var(--muted)}
.cred{color:var(--teal-bright);font-weight:700;margin-bottom:8px}
#about p{margin:0 0 12px;line-height:1.65}
body.ur #about p{line-height:2.05}
/* ---------- drawer / bottom nav / footer ---------- */
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(355px,88vw);background:var(--drawer-bg);z-index:90;transform:translateX(-105%);transition:transform .3s;box-shadow:18px 0 44px rgba(8,31,58,.22);overflow:auto;padding:18px 20px 26px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.drawer::-webkit-scrollbar{width:6px}
.drawer::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.drawer::-webkit-scrollbar-track{background:transparent}
body.lang-swap .drawer{transition:none!important}
[dir="rtl"] .drawer{transform:translateX(105%);box-shadow:-18px 0 44px rgba(8,31,58,.22)}
.drawer.open{transform:translateX(0)!important}
.scrim{position:fixed;inset:0;background:rgba(6,20,35,.45);z-index:85;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start}
/* ---------- drawer brand head + Options panel (redesigned 26-Oct-2026, v41):
   the head carries the logo mark + doctor trust line; all settings live in ONE
   inline Options panel instead of three scattered controls. ---------- */
.drawer-brand{display:flex;gap:11px;align-items:center;min-width:0}
.drawer-brand .logo-mark{width:44px;height:44px;min-width:44px}
.drawer-brand .logo-mark svg{width:28px;height:28px}
.drawer-brand b{font-size:19px;display:block;line-height:1.2}
.drawer-brand .trust-line{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.drawer-opts{margin-top:16px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--paper)}
.drawer-opts-toggle{display:flex;gap:11px;align-items:center;width:100%;background:none;border:0;padding:12px;color:var(--ink);text-align:start;cursor:pointer}
.drawer-opts-toggle .ic{width:38px;height:38px;min-width:38px;border-radius:10px;background:var(--sky);color:var(--teal-bright);display:grid;place-items:center}
.drawer-opts-toggle .ic svg{width:21px;height:21px}
.drawer-opts-toggle b{display:block;font-size:14.5px;line-height:1.25}
.drawer-opts-toggle small{color:var(--muted);font-size:11.5px}
.drawer-opts-toggle .ch{margin-inline-start:auto;color:var(--muted);font-size:19px;transition:transform .2s}
.drawer-opts-toggle[aria-expanded="true"] .ch{transform:rotate(90deg)}
.drawer-opts-panel{border-top:1px solid var(--border);padding:6px 14px 12px}
.drawer-opts-panel[hidden]{display:none}
.opts-pct{font-size:12px;color:var(--muted);margin-inline-start:8px;white-space:nowrap}
.drawer .eyebrow2{font-size:10.5px;letter-spacing:.13em;font-weight:800;color:var(--muted);margin:15px 2px 9px}
body.ur .drawer .eyebrow2{letter-spacing:0;font-size:13px}
.dlink{display:flex;gap:11px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--border);padding:10px 2px;color:var(--ink);text-align:start}
.dlink .ic{width:38px;height:38px;min-width:38px;border-radius:10px;background:var(--sky);color:var(--teal-bright);display:grid;place-items:center}
.dlink .ic svg{width:21px;height:21px}
.dlink b{display:block;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlink small{color:var(--muted);font-size:11.5px}
.dlink .ch{margin-inline-start:auto;color:var(--muted);font-size:19px}
.dlink>span:not(.ic):not(.ch){min-width:0} /* let the middle span shrink so the title ellipsis can clip (#12) */
.mobile-bottom{display:none}
.footer{border-top:1px solid var(--border);padding:18px clamp(20px,3.1vw,50px) 30px;color:var(--muted);font-size:12.5px;max-width:1536px;margin:auto}
.prototag{display:inline-block;background:var(--sky);color:var(--teal-bright);border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700;margin-inline-start:8px}
.search-band{margin-top:22px}
.search-band h2{font-size:21px}
/* ---------- responsive ---------- */
@media(max-width:1250px){.topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.article-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.three{grid-template-columns:210px minmax(0,1fr) 260px}}
@media(max-width:1020px){.three{grid-template-columns:minmax(0,1fr)}.three .leftside,.three .rightside{display:none}.tool-layout{grid-template-columns:minmax(0,1fr)}.tool-layout .leftside{display:none}.about-grid{grid-template-columns:minmax(0,1fr)}.portrait-card{max-width:320px}}
/* FIX 27-Oct-2026 (#1): below 1400px the desktop nav + header search move to the drawer (Mayo/NHS pattern) — at 1280/1440px the nav buttons were squeezed below their text width ("Health TopArticles"). (#2) below 900px the header toggles hide too — Font size, EN, Dark, CB all live in the drawer Options panel. */
@media(max-width:1400px){.nav .desktop,.nav-search{display:none}}
@media(max-width:900px){
.toggles{display:none}
.menu-btn{display:inline-flex}
.logo small{display:none}
.logo b{white-space:nowrap}
body.ur .logo b{font-size:19px}
.hero-inner{grid-template-columns:1fr;gap:18px;min-height:0;padding-top:22px}
.trust{justify-self:stretch;max-width:none}
.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.topic-card .symbol{width:30px;height:30px;margin:4px 10px 0}
.topic-card .symbol svg{width:27px;height:27px}
.topic-card b{margin:1px 10px}
.topic-card small{margin:4px 10px 0}
.mobile-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--border);z-index:70;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.mobile-bottom button{background:none;border:0;color:var(--ink);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mobile-bottom svg{width:21px;height:21px}
body{padding-bottom:58px}
.field-row{grid-template-columns:1fr}
.byline .who{min-width:140px}
}
@media(max-width:430px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-card strong{font-size:14.5px}.trust{grid-template-columns:1fr 1fr;padding:16px;gap:14px 10px}}
/* ---------- Options rows (21-Oct-2026; the panel now lives inside the drawer, v41) ---------- */
.opts-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0}
.opts-row + .opts-row{border-top:1px solid var(--border)}
.opts-hint{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px;white-space:normal}.opts-lab.lab-wrap{white-space:normal;line-height:1.35}
.opts-lab{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.opts-ctl{display:inline-flex;border:1px solid var(--border);border-radius:30px;overflow:hidden;flex:0 0 auto}
.opt-seg{background:var(--paper);border:0;padding:10px 14px;font-size:12.5px;color:var(--ink);white-space:nowrap;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.opt-seg.active{background:var(--teal);color:#fff;font-weight:700}
.article-grid.home3{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-grid.home-topics{grid-template-columns:repeat(4,minmax(0,1fr))}
.f-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:4px}
.f-head label{font-weight:600;font-size:14px;display:block;margin-bottom:0}
.u-sel{border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--ink);font-size:12.5px;padding:4px 6px;flex:0 0 auto;cursor:pointer}
.u-ftin{display:flex;gap:8px}
.u-ftin input{flex:1;min-width:0}
@media(max-width:1250px){.logo b{font-size:24px}body.ur .logo b{font-size:20px}.nav-search{max-width:430px}}
@media(max-width:900px){.article-grid.home3{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-grid.home-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.nav{gap:8px;padding:9px 12px}.logo{gap:7px}.logo-mark{width:38px;height:38px;min-width:38px}.logo-mark svg{width:25px;height:25px}.logo b{font-size:20px}body.ur .logo b{font-size:17px}}

/* ---------- regression fix 26-Oct-2026: sticky 1122 pill (WH-1), font controls (WH-2), drawer close + 44px net (WH-3) ---------- */
/* emg-pill removed 26-Oct-2026 per Umer: top emergency pill off the header (BP/article emergency strips + footer numbers stay) */
.drawer-close{width:48px;height:48px;min-width:48px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font-size:1.25rem;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;}
.drawer-close:hover{background:var(--sky);color:var(--teal);}
.drawer-close svg{width:20px;height:20px;}
button{min-width:44px;}
/* ===== Health News section (LIVE 22-Oct-2026) =====
   Uses ONLY the site's theme variables (--paper, --ink, --border, --sky,
   --teal, --muted, --head-ink, --shadow), so it follows the homepage's
   light AND dark themes automatically. Card shape mirrors .article-card:
   10px radius, 1px border, soft shadow, lift on hover. Items are hand-
   verified summaries (HEALTH-NEWS-BUILD-STATUS.md); a JSON-driven live-feed
   updater is designed in askdrumer/health-news/LIVE-NEWS-DESIGN.md. */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:12px}
.news-card{border:1px solid var(--border);border-radius:10px;background:var(--paper);box-shadow:var(--shadow);padding:13px 14px 12px;display:flex;flex-direction:column;text-align:start;color:var(--ink);transition:transform .18s,box-shadow .18s}
.news-card:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(24,54,80,.14)}
.news-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.news-ico{width:34px;height:34px;min-width:34px;border-radius:9px;background:var(--sky);color:var(--teal);display:grid;place-items:center}
.news-ico svg{width:20px;height:20px;display:block}
.news-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-bright)}
body.ur .news-tag{letter-spacing:0;text-transform:none;font-size:12.5px}
.news-date{margin-inline-start:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.news-card h3{font-family:Gelasio,Georgia,serif;font-size:16.5px;line-height:1.2;color:var(--head-ink);margin:0 0 7px}
body.ur .news-card h3{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9;font-size:15.5px}
.news-card p{font-size:13px;line-height:1.5;color:var(--ink);margin:0 0 10px}
body.ur .news-card p{font-family:'Noto Nastaliq Urdu',serif;line-height:2.05;font-size:13.5px}
.news-src{margin-top:auto;padding-top:9px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.news-src a{color:var(--teal-bright);font-weight:700;text-decoration:none;white-space:nowrap}
.news-src a:hover{text-decoration:underline}
.news-note{font-size:12px;color:var(--muted)}
@media (max-width:1000px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.news-grid{grid-template-columns:minmax(0,1fr)}}
.hero-side{display:flex;flex-direction:column;gap:14px;justify-self:end;width:100%;max-width:505px}
.hero-side .trust{justify-self:auto}
.hero-portrait{margin:0;display:flex;gap:14px;align-items:center;background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 32px rgba(19,59,76,.12);padding:12px 16px 12px 12px}
.hero-portrait img{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:center 22%;display:block;flex:none}
.hero-portrait figcaption{font-size:13px;color:var(--muted);line-height:1.45;min-width:0}
.hero-portrait figcaption b{display:block;font-size:16px;color:var(--head-ink);line-height:1.3;margin-bottom:2px}
body.ur .hero-portrait figcaption{line-height:2.0}
@media(max-width:1020px){.hero-side{max-width:none;justify-self:stretch}}

/* A02 fix (2026-10-30): visible keyboard focus for search fields */
.nav-search:focus-within,.hero-search:focus-within{outline:3px solid var(--focus,#E69F00);outline-offset:2px;border-radius:12px}
.nav-search input:focus,.hero-search input:focus{outline:none}
/* A13 fix (2026-10-30): honor reduced-motion preferences */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* A03: native <dialog> normalization — keep custom card look */
dialog#reportDlg{border:0;padding:0;background:transparent;max-width:min(94vw,480px)}
dialog#reportDlg::backdrop{background:rgba(10,25,35,.55)}

/* Compact news cards - Umer 30 Oct 2026 */
.news-card{padding:10px 12px 10px}
.news-card h3{font-size:14.5px;margin:0 0 5px}
.news-card p{font-size:12px;line-height:1.45;margin:0 0 8px}
.news-top{gap:6px;margin-bottom:6px}
.news-ico svg{width:18px;height:18px}
.news-tag{font-size:11px;padding:2px 8px}
.news-date{font-size:11px}

/* Clear category sections - Umer 30 Oct 2026 */
/* section-head underline removed 30 Oct 2026 - Umer: no underlines */

/* Umer 30 Oct: remove underlines under drawer menu lines */
.dlink{border-bottom:0!important}

/* Umer 30 Oct: remove ALL underlines site-wide */
a,a:hover,a:focus,a:active{text-decoration:none!important}

/* Umer 30 Oct: range marker = small arrow (teer), not a line */
.range-marker{position:absolute;top:-12px;transform:translateX(-50%);width:0!important;height:0!important;background:none!important;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--head-ink);border-radius:0!important}
.range-pin{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:var(--head-ink);background:none!important;width:auto!important;height:auto!important;border-radius:0!important}

/* Umer 30 Oct: bigger featured article icons + boxes, no animation */
.article-card .thumb{height:110px!important}
.article-card .thumb-wash{height:110px!important}
.article-card .thumb-wash svg{width:56px!important;height:56px!important}
.article-card:hover{transform:none!important}
.topic-card:hover{transform:none!important}

/* Audit remediation and focused usability improvements */
.skip-link{position:fixed;top:8px;inset-inline-start:16px;z-index:150;transform:translateY(-180%);background:var(--head-ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-weight:700;transition:transform .18s ease-out}
.skip-link:focus{transform:translateY(0)}
#mainContent:focus{outline:none}
.tools-browser{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px 16px;align-items:center;margin:20px 0 26px;padding:16px 0;border-block:1px solid var(--border)}
.tools-filter{display:flex;align-items:center;gap:10px;width:100%;max-width:680px;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--muted)}
.tools-filter:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.tools-filter svg{width:20px;height:20px;flex:0 0 auto}
.tools-filter input{width:100%;min-width:0;min-height:46px;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.tool-filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.tool-filter-chips .chip{min-height:44px;box-shadow:none;margin:0}
.tool-filter-chips .chip.active{background:#006678;border-color:#006678;color:#fff}
#toolsHubStatus{grid-column:1/-1;margin:0;min-height:1.65em}
.tool-card,.tool-mini{transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s}
.tool-card:hover,.tool-mini:hover{background:var(--wash);border-color:var(--teal)}
.tool-card:active,.tool-mini:active{transform:translateY(1px)}
.article-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex:0 0 auto}
.article-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:var(--paper);color:var(--teal);font-size:13px;font-weight:700;white-space:nowrap}
.article-action svg{width:18px;height:18px;flex:0 0 auto}
.article-action:hover{background:var(--wash);border-color:var(--teal)}
.article-action:active{transform:translateY(1px)}
.article-actions .menu3-inline{margin-inline-start:0}
.tag-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.menu3-btn{width:44px;height:44px;min-width:44px}
.topic-tool-callout{display:flex;align-items:center;gap:16px;width:100%;margin:20px 0 4px;padding:18px 20px;border:1px solid var(--border);border-radius:12px;background:var(--sky);color:var(--ink);text-align:start;transition:border-color .18s,background-color .18s}
.topic-tool-callout:hover{border-color:var(--teal);background:var(--wash)}
.topic-tool-callout:active{transform:translateY(1px)}
.topic-tool-icon{width:34px;height:34px;flex:0 0 auto;color:var(--teal)}
.topic-tool-icon svg{width:34px;height:34px;display:block}
.topic-tool-callout strong{display:block;font-family:Gelasio,Georgia,serif;font-size:20px;line-height:1.25;color:var(--head-ink)}
.topic-tool-callout small{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.5}
.topic-tool-action{margin-inline-start:auto;color:var(--teal);font-size:14px;font-weight:800;white-space:nowrap}
body.ur .topic-tool-callout strong{font-family:'Noto Nastaliq Urdu',serif;line-height:2}
body.ur .topic-tool-callout small{line-height:2}
.prose{min-width:0;overflow-wrap:break-word}
.version-meta{max-width:100%;overflow-x:auto}
@media(min-width:1180px) and (max-width:1400px){
.nav .desktop{display:inline-flex}
.nav-search{display:none}
.nav{gap:clamp(8px,1vw,16px)}
}
@media(max-width:900px){
.mobile-bottom button{min-height:48px}
.chip,.news-more{min-height:44px}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(max-width:760px){
.tools-browser{grid-template-columns:minmax(0,1fr)}
.tools-filter{max-width:none}
.tool-filter-chips{grid-row:2}
#toolsHubStatus{grid-row:3}
}
@media(max-width:700px){
.byline{align-items:flex-start}
.article-actions{flex-basis:100%;margin-inline-start:0}
}
@media(max-width:560px){
.hero-inner,.shell{padding-inline:16px}
.hero h1{font-size:38px}
.hero-search .btn{padding-inline:16px}
.article-grid,.article-grid.home3{grid-template-columns:minmax(0,1fr)}
.article-card{display:grid;grid-template-columns:108px minmax(0,1fr)}
.article-card .thumb,.article-card .thumb-wash{height:100%!important;min-height:146px}
.article-card .thumb-wash svg{width:42px!important;height:42px!important}
.article-card .content{padding:12px 14px}
.article-card strong{font-size:17px;line-height:1.25}
.tool-cards,.tool-strip{grid-template-columns:minmax(0,1fr)}
.topic-tool-callout{align-items:flex-start;flex-wrap:wrap;padding:16px}
.topic-tool-callout>span:nth-child(2){flex:1;min-width:180px}
.topic-tool-action{width:100%;margin-inline-start:50px}
}