/* ============================================================================
HRC Mapper — native app reconstruction · "Diplomatic Modern" design system
UN navy chrome · official UN cyan-blue accent · warm paper
Typography per the UN/OHCHR Style Guide: Roboto Condensed Bold headings + Roboto body.
Fonts vendored locally (assets/fonts/) so they render the same offline (file://) and
on Azure, with no Google-Fonts / CSP dependency.
========================================================================== */
/* Roboto (body/UI) · Roboto Condensed (headings/counts, 500–700 used) · Roboto Mono (symbols).
latin + latin-ext, variable weight. Self-hosted from Google's own woff2 — no @import, no CSP/network dependency. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/robotocondensed-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/robotocondensed-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/robotomono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/robotomono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
/* chrome — UN Darker Blue family */
--navy-950:#102f48; --navy-900:#1c4969; --navy-800:#22557a; --navy-line:#2e5d82;
/* brand — official UN Style Guide */
--un:#009edb; /* UN Blue — accents, lines, active (NOT button fills) */
--un-deep:#0a5a82; /* Information Blue — primary actions, AAA on white */
--un-ink:#0a5a82; /* links / emphasis (Information Blue) */
--darker:#1c4969; /* Darker Blue — text on blue, deep brand */
--un-25:#bfe6f6; --un-50:#7fceec; --un-5:#f2fafd; --un-wash:#eaf6fd;
--gold:#9c6a16; --gold-wash:#fbeed2; /* Golden Brown — indicative/proto accent */
/* ink + surfaces (cool UN neutrals) */
--ink:#222b33; --ink-soft:#4a5763; --ink-faint:#7d8a97; --ink-on-navy:#dbe7f2;
--paper:#eef2f6; --surface:#ffffff; --surface-2:#f7fafc; --surface-3:#edf2f7;
--line:#e1e8ef; --line-cool:#e8edf2; --line-strong:#cdd8e2;
/* status — official UN colours + 25% washes */
--ok:#3f7a2e; --ok-wash:#d3e6ce; --warn:#8a5a12; --warn-wash:#fee6cd; --bad:#b3283a; --bad-wash:#fececa;
--shadow-sm:0 1px 2px rgba(16,30,50,.06),0 1px 3px rgba(16,30,50,.05);
--shadow:0 6px 24px -8px rgba(11,32,56,.18);
--shadow-lg:0 24px 60px -24px rgba(11,32,56,.34);
--r:10px; --r-sm:7px; --r-lg:16px;
--sidebar-w:268px;
--font-ui:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
--font-display:'Roboto Condensed','Roboto',Arial,sans-serif; /* UN Style Guide: headings = Roboto Condensed Bold */
--font-mono:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
}
.phead h2,.kpi .n,.statcard .n,.phead .count,.kbanner,.panel h3,.brand h1{font-family:var(--font-display);font-weight:700}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
font-family:var(--font-ui);color:var(--ink);background:var(--paper);
font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased; /* UN Style Guide: 16px base (Type S) */
display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:100vh;overflow:hidden;
}
::selection{background:var(--un);color:#fff}
a{color:var(--un-ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
/* ---------- Sidebar ---------- */
.sidebar{
background:linear-gradient(195deg,var(--navy-900),var(--navy-950));
color:var(--ink-on-navy);display:flex;flex-direction:column;overflow:visible;position:relative;
border-right:1px solid var(--navy-line);transition:none;
}
/* collapse-to-rail toggle */
.sidebar-toggle{position:absolute;left:16px;bottom:18px;width:38px;height:38px;border-radius:50%;background:var(--un-deep);border:2px solid rgba(255,255,255,.85);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 5px 16px rgba(0,0,0,.35);z-index:20}
.sidebar-toggle:hover{background:#0c6ea0}
.sidebar-toggle svg{transition:transform .25s}
body.sidebar-collapsed .sidebar-toggle svg{transform:rotate(180deg)}
/* collapsed (icon-only) state */
body{transition:grid-template-columns .22s ease}
body.sidebar-collapsed{grid-template-columns:68px 1fr}
body.sidebar-collapsed .brand{justify-content:center;padding:18px 0 16px}
body.sidebar-collapsed .brand>div{display:none}
body.sidebar-collapsed .brand .mark-img{width:42px;height:42px}
body.sidebar-collapsed .gh{justify-content:center;padding:13px 0;gap:0}
body.sidebar-collapsed .gh .gh-label,body.sidebar-collapsed .gh .chev{display:none}
body.sidebar-collapsed .gh .ico{width:20px;height:20px}
body.sidebar-collapsed .nav-group-body{max-height:0!important}
body.sidebar-collapsed .nav{padding:10px 8px 66px}
.brand{padding:18px 20px;border-bottom:1px solid var(--navy-line);display:flex;gap:13px;align-items:center}
.brand .mark-img{width:50px;height:50px;object-fit:contain;flex:0 0 auto;filter:brightness(0) invert(1)} /* recolour the blue laurel to white for the dark sidebar */
.brand-link{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;border-radius:8px;transition:opacity .15s} /* logo links to the OHCHR HRC home page */
.brand-link:hover{text-decoration:none;opacity:.82}
.brand-link:focus-visible{outline:2px solid var(--un);outline-offset:3px}
.brand h1{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0;line-height:1.1;color:#fff;letter-spacing:.1px}
.brand .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7fb4d8;margin-top:3px;font-weight:600}
/* About page: drop the redundant "HRC Mapper / Public Beta" text (the hero shows it) and present the
OHCHR logo on its own, larger + centred. Fades back to the normal brand on every other page. */
.brand{transition:padding .35s ease}
.brand .mark-img{transition:width .35s ease,height .35s ease}
.brand > div{transition:opacity .3s ease,max-width .4s ease;overflow:hidden;white-space:nowrap}
body.brand-about .brand{justify-content:center;padding:22px 0 18px}
body.brand-about .brand > div{opacity:0;max-width:0;margin:0}
body.brand-about:not(.sidebar-collapsed) .brand .mark-img{width:66px;height:66px}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 66px}
.nav::-webkit-scrollbar{width:8px}.nav::-webkit-scrollbar-thumb{background:#21456a;border-radius:8px}
.nav-group{margin-top:5px}
.nav-group:first-child{margin-top:2px}
/* subtle inset divider between top-level nav groups (partial width — does not reach the sidebar edges) */
.nav-group + .nav-group::before{content:'';display:block;height:0;margin:3px 28px 9px 14px;border-top:1px dotted rgba(255,255,255,.08)}
body.sidebar-collapsed .nav-group + .nav-group::before{margin:3px 12px 9px}
.gh{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;color:#e3edf6;font-family:var(--font-display);font-size:17.5px;font-weight:700;letter-spacing:.01em;transition:background .15s,color .15s}
.gh:hover{background:rgba(255,255,255,.06);color:#fff}
.gh .ico{width:17px;height:17px;opacity:.9;flex:0 0 auto}
.gh .gh-label{flex:1;text-align:left}
.gh .chev{width:13px;height:13px;transition:transform .22s;opacity:.7}
.nav-group:not(.collapsed) .gh{color:#fff}
.nav-group:not(.collapsed) .gh .chev{transform:rotate(90deg)}
.nav-group-body{overflow:hidden;max-height:640px;transition:max-height .26s ease;padding-left:8px}
.nav-group.collapsed .nav-group-body{max-height:0}
.nav-item{
display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;
color:#bcd0e2;font-size:14.5px;font-weight:500;position:relative;transition:background .15s,color .15s;
}
.nav-item .ico{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:linear-gradient(120deg,#009edb,#0a7fb8);color:#fff;box-shadow:0 5px 16px -5px rgba(0,158,219,.65)}
.nav-item.active .ico{opacity:1}
/* chatHRC is a DIRECT nav entry (no child) — the group header itself navigates + highlights */
.nav-direct .gh.active{background:linear-gradient(120deg,#009edb,#0a7fb8);color:#fff;box-shadow:0 5px 16px -5px rgba(0,158,219,.65)}
.nav-direct .gh.active .ico{opacity:1}
.nav-foot{padding:12px;border-top:1px solid var(--navy-line)}
.nav-dl{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;background:var(--un-deep);color:#fff;font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent}
.nav-dl:hover{background:#0c6ea0}
/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.topbar{
height:60px;flex:0 0 auto;position:relative;display:flex;align-items:center;gap:16px;padding:0 26px;
background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(8px);
border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);z-index:5;
}
.crumb{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.ohchr-logo{display:inline-flex;align-items:center;height:60px;text-decoration:none}
.ohchr-logo img{height:36px;width:auto;display:block}
.topbar .sp{flex:1}
.topbar-brand{display:none;align-items:center;gap:9px;text-decoration:none}
.topbar-brand img{height:28px;width:auto;display:block;flex:0 0 auto}
.topbar-brand .tb-text{display:flex;flex-direction:column;line-height:1.06}
.topbar-brand .tb-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:.2px}
.topbar-brand .tb-beta{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--un-ink);font-weight:600;margin-top:1px;white-space:nowrap}
.nav-close{display:none}
.nav-backdrop{display:none}
.gsearch{position:relative;width:300px;max-width:34vw}
.gsearch input{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:0 12px 0 36px;font:inherit;color:var(--ink)}
.gsearch input:focus{outline:none;border-color:var(--un);box-shadow:0 0 0 3px var(--un-wash)}
.gsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint)}
.tbtn{height:38px;padding:0 13px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;color:var(--ink-soft);font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:.15s}
.tbtn:hover{border-color:var(--un);color:var(--un-ink);background:var(--un-wash)}
.tbtn.lang{min-width:52px;justify-content:center}
.content{flex:1;overflow-y:auto;overflow-x:hidden}
.content::-webkit-scrollbar{width:11px}.content::-webkit-scrollbar-thumb{background:#d9d2c5;border-radius:9px;border:3px solid var(--paper)}
.page{max-width:1500px;margin:0 auto;padding:26px 30px 70px;animation:rise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* page header */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.phead .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--un-ink);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.phead h2{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:0;margin:0;line-height:1.05;position:relative;padding-bottom:11px}
.phead h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--un);border-radius:3px} /* UN "blue miscellaneous line" */
.phead p{margin:9px 0 0;color:var(--ink-soft);font-size:13.5px;max-width:64ch}
.phead .count{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--un-ink);line-height:1;text-align:right}
.phead .count small{display:block;font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-top:5px}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--gold-wash);border:1px solid #ecd9ad;border-radius:var(--r-sm);padding:11px 15px;font-size:12.5px;color:#6b4e16;margin-bottom:18px}
.note b{color:#5a4112}
/* ---------- Filter bar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.ffield{position:relative}
.ffield > label{position:absolute;top:-7px;left:9px;background:var(--paper);padding:0 5px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.fselect,.fsearch input{height:38px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:0 30px 0 12px;cursor:pointer;min-width:150px;appearance:none;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center}
.fselect:focus{outline:none;border-color:var(--un);box-shadow:0 0 0 3px var(--un-wash)}
.fsearch{position:relative}
.fsearch input{padding-left:34px;min-width:220px;cursor:text;background-image:none}
.fsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint)}
.fbar-sp{flex:1}
.chip-clear{height:30px;padding:0 12px;border-radius:999px;border:1px dashed var(--un-deep);color:var(--un-ink);background:var(--un-wash);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.resultline{font-size:12.5px;color:var(--ink-faint);font-weight:500}
.resultline b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* ---------- Table ---------- */
/* top horizontal scrollbar (mirrors the body scroller so wide tables scroll from top or bottom) */
.tscroll-top{overflow-x:auto;overflow-y:hidden;margin-bottom:7px}
.tscroll-top > div{height:1px}
.tscroll-top::-webkit-scrollbar{height:10px}
.tscroll-top::-webkit-scrollbar-track{background:transparent}
.tscroll-top::-webkit-scrollbar-thumb{background:#cdd8e2;border-radius:8px}
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.tscroll{overflow:auto;max-height:calc(100vh - 230px);min-height:200px;resize:vertical}
/* drag-resizable columns: faint separators show the grab zone; a handle sits on each header's right edge */
table.grid thead th{border-right:1px solid var(--line)}
table.grid tbody td{border-right:1px solid var(--line-cool)}
table.grid thead th:last-child,table.grid tbody td:last-child{border-right:0}
table.grid tbody td{overflow-wrap:break-word}
table.grid .cell-sym{white-space:normal;overflow-wrap:anywhere}
th .col-resizer{position:absolute;top:0;right:-1px;width:9px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
th .col-resizer:hover,body.col-resizing th .col-resizer{background:linear-gradient(90deg,transparent,var(--un))}
body.col-resizing{cursor:col-resize!important;user-select:none}
.tscroll::-webkit-scrollbar{height:11px;width:11px}.tscroll::-webkit-scrollbar-thumb{background:#dcd5c8;border-radius:9px;border:3px solid #fff}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
table.grid thead th{
position:sticky;top:0;z-index:2;background:var(--surface-3);color:var(--ink-soft);
text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
padding:11px 13px;border-bottom:1px solid var(--line-strong);white-space:nowrap;cursor:pointer;user-select:none;
}
table.grid thead th:hover{color:var(--un-ink)}
table.grid thead th .ar{opacity:.35;margin-left:5px;font-size:9px}
table.grid thead th[aria-sort] .ar{opacity:1;color:var(--un)}
table.grid tbody td{padding:10px 13px;border-bottom:1px solid var(--line-cool);vertical-align:top;max-width:360px}
table.grid tbody tr:hover td{background:var(--un-wash)}
table.grid tbody tr:last-child td{border-bottom:0}
.cell-sym{font-family:var(--font-mono);font-size:12px;font-weight:500;white-space:nowrap;color:var(--un-ink)}
.cell-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cell-wrap{min-width:200px}
.cell-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell-title{font-weight:600;color:var(--ink)}
.expand{color:var(--un-ink);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--un-wash);color:var(--un-ink);white-space:nowrap;border:1px solid #cfe7f6}
.chip.muted{background:var(--surface-3);color:var(--ink-soft);border-color:var(--line)}
.badge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:6px;white-space:nowrap;text-transform:capitalize}
.b-ok{background:var(--ok-wash);color:var(--ok)} .b-warn{background:var(--warn-wash);color:var(--warn)}
.b-bad{background:var(--bad-wash);color:var(--bad)} .b-neu{background:var(--surface-3);color:var(--ink-soft)}
.b-blue{background:var(--un-wash);color:var(--un-ink)}
/* mandate mapping (per sortable column): "N.N) value" items with an index badge; a dashed rule
separates operative-paragraph groups within the cell. The activity columns share the same N.N keys
so their separators line up with one another; the index badge traces one activity across columns. */
.mapcol{display:flex;flex-direction:column;min-width:130px}
.mapgrp{padding:5px 0}
.mapgrp:first-child{padding-top:0}.mapgrp:last-child{padding-bottom:0}
.mapgrp + .mapgrp{border-top:1px dashed var(--line-strong)}
.mapitem{display:flex;gap:7px;align-items:baseline;padding:2.5px 0}
.mapidx{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--un-ink);background:var(--un-wash);border:1px solid #d3e7f4;border-radius:5px;padding:1px 5px;min-width:38px;text-align:center;line-height:1.5}
.maptext{font-size:12.5px;color:var(--ink);line-height:1.45}
.maptext.mclip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root[data-theme="dark"] .mapidx{border-color:#274457}
/* activity-row mandate table: one per activity, operative text rowspanned per OP, doc cols per record.
Borders are real table-row borders, so the OP separator (MAJOR dashed) and the activity separator
(MINOR dotted) ALIGN across operative-text + every activity column. Solid rule ends a record. */
.actrow td{vertical-align:top;padding:8px 13px}
.actcell.act-mid{border-bottom:1px dotted var(--line)!important}
.actcell.op-end,.opcell{border-bottom:1.5px dashed var(--line-strong)!important}
.actcell.rec-end,.opcell.rec-end,.doccell{border-bottom:2px solid var(--line-strong)!important}
.opwrap{display:flex;gap:8px;align-items:flex-start}
.optw{display:flex;flex-direction:column;gap:3px;min-width:0}
.optext{font-size:12.5px;color:var(--ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.optext.expanded,.ops-open .optext{-webkit-line-clamp:unset;display:block;overflow:visible}
.op-more{align-self:flex-start;border:0;background:none;color:var(--un-ink);font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:1px 0}
.op-more:hover{text-decoration:underline}
.ops-open .op-more{display:none}
.actval{font-size:12.5px;color:var(--ink);line-height:1.45}
.opcell .mapidx,.actcell .mapidx{align-self:flex-start}
/* ---------- KPI cards (Key Stats) ---------- */
/* Key Stats nested funnel: source universe → analysed → mapping flow */
.kfunnel{margin:6px 0 18px}
.kf-l1{background:linear-gradient(135deg,rgba(0,158,219,.13),rgba(0,158,219,.05));border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.kf-l1head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.kf-srcs{display:flex;align-items:center;gap:18px}
.kf-src{display:flex;flex-direction:column;line-height:1}
.kf-src .kf-n{font-family:var(--font-display);font-weight:700;font-size:36px;letter-spacing:-.02em;color:var(--navy-900);font-variant-numeric:tabular-nums}
.kf-src .kf-l{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.kf-plus{font-size:30px;font-weight:300;color:var(--un)}
.kf-tag{display:flex;flex-direction:column;gap:2px;text-align:right;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 13px}
.kf-tag b{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--un-deep)}
.kf-tag span{font-size:11.5px;color:var(--ink-soft)}
.kf-cap{font-size:12px;color:var(--ink-faint);margin:11px 2px 0}
.kf-l2{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;margin-top:15px}
.kf-l2head{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:14px;display:flex;align-items:baseline;gap:11px}
.kf-l2head .kf-big{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--un-ink)}
.kflow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.kpi{flex:1 1 180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--un),var(--un-deep))}
.kpi .n{font-family:var(--font-display);font-size:42px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--navy-900);font-variant-numeric:tabular-nums}
.kpi .lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-top:9px}
.kpi .sub{font-size:11px;color:var(--ink-faint);margin-top:3px}
.kflow .arrow{display:grid;place-items:center;color:var(--un);flex:0 0 36px;font-size:20px;align-self:center}
.kbanner{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--ink);margin:6px 0 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.kbanner .big{font-size:46px;font-weight:600;color:var(--un-ink);letter-spacing:-.02em}
.kbanner-ods{margin:6px 0 6px;font-size:20px;color:var(--ink-soft)}
.kbanner-ods .big{font-size:40px;color:var(--navy-900)}
.kbanner .ksub{font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;color:var(--ink-faint);letter-spacing:0;text-transform:none;align-self:center}
/* ---------- Chart panels ---------- */
.grid-charts{display:grid;gap:18px}
.gc-2{grid-template-columns:1fr 1fr}.gc-12{grid-template-columns:1fr 2fr}.gc-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.gc-2,.gc-12,.gc-3{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 18px 8px;min-width:0}
.panel h3{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0 0 2px}
.byt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 16px}
.byt-toolbar .byt-tlabel{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.byt-toolbar .byt-tlabel:not(:first-child){margin-left:18px;padding-left:18px;border-left:1px solid var(--line)}
.byt-toolbar .byt-thint{font-size:11.5px;color:var(--ink-faint);margin-left:6px}
.map-disclaimer{font-size:10.5px;line-height:1.4;color:var(--ink-faint);font-style:italic;margin:6px 2px 4px;max-width:760px}
.tg-allbox{padding:2px}
.tg-player{display:inline-flex;align-items:center;gap:8px}
.tg-pbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--un-deep);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:.15s}
.tg-pbtn:hover{background:var(--surface-3);border-color:var(--line-strong)}
.tg-slider{width:150px;height:4px;accent-color:var(--un-deep);cursor:pointer;margin:0 2px}
.tg-yr{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--un-deep);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.hd-yr{display:inline-block;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;color:var(--un-deep);background:rgba(0,158,219,.12);border-radius:6px;padding:2px 9px;margin-left:6px;vertical-align:middle;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.panel .ph-sub{font-size:11.5px;color:var(--ink-faint);margin-bottom:8px}
.chart{width:100%;height:340px}
.chart.tall{height:430px}.chart.short{height:240px}
.statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.statcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.statcard .n{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--navy-900);line-height:1;font-variant-numeric:tabular-nums}
.statcard .lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-top:7px}
/* empty / loading */
.empty{display:grid;place-items:center;padding:60px 20px;color:var(--ink-faint);text-align:center}
.empty svg{opacity:.4;margin-bottom:10px}
.skeleton{height:300px;border-radius:var(--r);background:linear-gradient(100deg,var(--surface-3) 30%,#f6f2ea 50%,var(--surface-3) 70%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
/* expandable detail row */
.detailrow td{background:var(--surface-2);border-bottom:1px solid var(--line);padding:0}
.detailbox{padding:14px 18px;font-size:12.5px;color:var(--ink-soft);line-height:1.65}
.detailbox .dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.detailbox .dl dt{color:var(--ink-faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.detailbox .op{font-family:var(--font-mono);font-size:11.5px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-top:6px;white-space:pre-wrap}
.footer-note{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint)}
.proto-pill{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:var(--gold-wash);border:1px solid #e7d3a3;padding:2px 8px;border-radius:999px}
/* ---------- per-page scorecard (mirrors the live KPI strip) ---------- */
.scorecard{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.scard{flex:1 1 120px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 17px;box-shadow:var(--shadow-sm)}
.scard.main{background:linear-gradient(135deg,var(--un-5),#fff);border-color:#cfe7f6}
.scard .scn{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1;color:var(--navy-900);font-variant-numeric:tabular-nums}
.scard.main .scn{color:var(--un-ink);font-size:31px}
.scard .scl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-top:7px}
/* ---------- filter bar (collapsible) ---------- */
.filterbar{margin-bottom:14px}
.fb-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fb-toggle{height:38px;padding:0 13px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;color:var(--ink-soft);font:inherit;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.fb-toggle:hover{border-color:var(--un);color:var(--un-ink)}
.fb-toggle .fb-ch{transition:transform .2s}
.fb-toggle.closed .fb-ch{transform:rotate(-90deg)}
.fb-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--un-deep);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.fb-count:empty{display:none}
.facets{display:flex;flex-wrap:wrap;gap:16px 12px;margin-top:14px;align-items:flex-end}
.facets.collapsed{display:none}
.facets .ffield{min-width:172px}
/* ---------- searchable single/multi combobox ---------- */
.combo{position:relative}
.combo-btn{height:38px;width:100%;min-width:172px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left}
.combo-btn:hover{border-color:var(--un)}
.combo.open .combo-btn,.combo.has-val .combo-btn{border-color:var(--un);box-shadow:0 0 0 3px var(--un-wash)}
.combo-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo.has-val .combo-val{color:var(--un-ink);font-weight:600}
.cv-ch{color:var(--ink-faint);transition:transform .2s;flex:0 0 auto}
.combo.open .cv-ch{transform:rotate(180deg)}
.combo-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:308px;max-width:86vw;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
.combo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line)}
.mode-toggle{display:inline-flex;background:var(--surface-3);border-radius:8px;padding:2px}
.mode-toggle button{border:0;background:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-soft);padding:4px 11px;border-radius:6px;cursor:pointer;transition:.15s}
.mode-toggle button.active{background:var(--un-deep);color:#fff}
.mode-toggle.disabled{opacity:.4;pointer-events:none}
/* analytics "Filters" panel — each group is its own boxed card (like the Database Explorer facets) */
.afilterbar{margin-bottom:16px}
.afacets{align-items:flex-start}
.afgroup{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px 11px}
.afg-label{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.afg-note{flex-basis:100%;font-size:11.5px;color:var(--ink-faint);font-style:italic;margin-top:2px}
/* tier toggle (Geography: Country / Region / Sub-region) — segmented control like Single/Multiple */
.tier-toggle{display:flex;background:var(--surface-3);border-radius:8px;padding:2px;margin:9px 10px 0}
.tier-toggle button{flex:1;border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--ink-soft);padding:5px 4px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}
.tier-toggle button:hover{color:var(--un-ink)}
.tier-toggle button.active{background:var(--un-deep);color:#fff}
/* region standard sub-toggle (M49 vs UN Regional Group) — subordinate to the tier toggle */
.std-toggle{display:flex;align-items:center;gap:8px;margin:7px 10px 0}
.std-toggle[hidden]{display:none}
.std-cap{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.std-seg{display:flex;flex:1;background:var(--surface-3);border-radius:8px;padding:2px}
.std-seg button{flex:1;border:0;background:none;font:inherit;font-size:10.5px;font-weight:600;color:var(--ink-soft);padding:4px 4px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}
.std-seg button[hidden]{display:none}
.std-seg button:hover{color:var(--un-ink)}
.std-seg button.active{background:var(--un-deep);color:#fff}
/* read-only badge (Sub-region): looks like the toggle but not interactive — no UN-group equivalent exists */
.std-toggle.readonly .std-seg{cursor:default}
.std-toggle.readonly .std-seg button{cursor:default;pointer-events:none}
.combo-reset{border:0;background:none;color:var(--un-ink);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.combo-search-wrap{position:relative;padding:9px 10px;border-bottom:1px solid var(--line)}
.combo-search-wrap svg{position:absolute;left:20px;top:50%;transform:translateY(-50%)}
.combo-search{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px 0 30px;font:inherit;font-size:13px;color:var(--ink)}
.combo-search:focus{outline:none;border-color:var(--un);box-shadow:0 0 0 3px var(--un-wash)}
.combo-list{max-height:288px;overflow-y:auto;padding:5px}
.combo-list::-webkit-scrollbar{width:9px}.combo-list::-webkit-scrollbar-thumb{background:#cdd8e2;border-radius:8px;border:2px solid #fff}
.combo-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink)}
.combo-opt:hover{background:var(--un-wash)}
.combo-opt.sel{background:var(--un-25);color:var(--darker);font-weight:600}
.combo-opt.all{font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--line);border-radius:0;margin:0 0 4px}
.combo-opt .ck{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;font-size:11px;color:#fff;flex:0 0 auto}
.combo-opt.sel .ck{background:var(--un-deep);border-color:var(--un-deep)}
.combo-opt .ct{overflow:hidden;text-overflow:ellipsis}
/* hierarchical Activity type/sub-type tree (live-style Type › sub-type) */
.hier-hint{font-size:11px;color:var(--ink-faint);font-weight:600}
.hier-chev{flex:0 0 auto;width:13px;text-align:center;color:var(--ink-faint);cursor:pointer;transition:transform .15s;font-size:11px}
.hier-chev.open{transform:rotate(90deg)}
.combo-opt.hier-type{font-weight:600}
.combo-opt.hier-type .ck.part{background:var(--un-deep);border-color:var(--un-deep);color:#fff}
.combo-opt.hier-sub{padding-left:34px}
.hier-n{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ink-faint);background:var(--surface-3);border-radius:9px;padding:1px 7px;flex:0 0 auto}
.combo-empty{padding:16px;text-align:center;color:var(--ink-faint);font-size:12.5px}
/* ---------- guide article ---------- */
.article{max-width:780px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:28px 32px}
.article .lead{font-size:16px;line-height:1.72;color:var(--ink);margin-top:0}
.article h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--darker);margin:24px 0 9px;position:relative;padding-bottom:8px}
.article h3::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--un);border-radius:3px}
.article p{color:var(--ink-soft);line-height:1.72}
.article ul{color:var(--ink-soft);line-height:1.72;padding-left:20px}
.article b{color:var(--ink)}
.article .muted{color:var(--ink-faint);font-size:12.5px}
/* ---------- misc cells + toast ---------- */
.cell-link{font-size:11.5px;font-weight:600;color:var(--un-ink);white-space:nowrap}
.cell-faint{color:var(--ink-faint)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--darker);color:#eaf6fd;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- registry crosswalk ---------- */
.sec{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--darker);margin:28px 0 13px;position:relative;padding-bottom:8px}
.sec::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--un);border-radius:3px}
.xcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
.xcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:17px 19px;border-top:3px solid var(--un)}
.xcard.x-ok{border-top-color:var(--ok)} .xcard.x-warn{border-top-color:var(--warn)} .xcard.x-blue{border-top-color:var(--un)}
.xcard .n{font-family:var(--font-display);font-weight:700;font-size:33px;line-height:1;color:var(--navy-900);font-variant-numeric:tabular-nums}
.xcard.x-ok .n{color:var(--ok)} .xcard.x-warn .n{color:var(--warn)} .xcard.x-blue .n{color:var(--un-ink)}
.xcard .xlbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-top:9px}
.xcard .xdesc{font-size:12px;color:var(--ink-faint);margin-top:6px;line-height:1.5}
.xcard .xdesc b{color:var(--ink-soft)}
.xcard .xbreak{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.xcard .xrow{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.4}
.xcard .xn{flex:0 0 auto;min-width:30px;text-align:right;font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.xcard.x-ok .xn{color:var(--ok)} .xcard.x-warn .xn{color:var(--warn)} .xcard.x-blue .xn{color:var(--un-ink)}
.xcard .xl{color:var(--ink-faint)}
/* records "Show" selector (above the crosswalk records table) */
.b-blue{background:rgba(0,158,219,.16);color:var(--un-deep)}
.rfilter-wrap{display:inline-flex;align-items:center;gap:8px}
.rfilter-lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.rfilter{font:inherit;font-size:13px;font-weight:600;color:var(--un-ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:8px 30px 8px 12px;cursor:pointer;max-width:340px;
appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center}
.rfilter:hover{border-color:var(--un)}
.rfilter:focus-visible{outline:2px solid var(--un);outline-offset:1px}
.cell-ents{white-space:normal}
.cell-ents .ent-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);margin-right:5px}
.cell-ents .ent-tag{display:inline-block;font-size:10.5px;font-weight:600;color:var(--un-deep);background:rgba(0,158,219,.1);border-radius:5px;padding:1px 6px;margin:1px 3px 1px 0;letter-spacing:.02em}
/* ---------- global search (topbar) ---------- */
.gsearch.global{width:480px;max-width:46vw}
.gresults{position:absolute;top:calc(100% + 7px);left:0;right:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg);max-height:64vh;overflow-y:auto;z-index:60;padding:6px}
.gresults::-webkit-scrollbar{width:9px}.gresults::-webkit-scrollbar-thumb{background:#cdd8e2;border-radius:8px;border:2px solid #fff}
.gr-group{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--un-ink);padding:10px 10px 5px}
.gr-group span{color:var(--ink-faint);font-weight:600}
.gr-item{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:7px;cursor:pointer}
.gr-item:hover{background:var(--un-wash)}
.gr-sym{font-family:var(--font-mono);font-size:12px;color:var(--un-ink);font-weight:500}
.gr-sub{font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-empty{padding:18px;text-align:center;color:var(--ink-faint);font-size:12.5px}
/* ---------- guide: rich pages (About / Metadata / PBI / Demos / Calendar) ---------- */
.guide-wide{max-width:1180px}
.about-hero{position:relative;border-radius:16px;overflow:hidden;margin:0 0 22px;min-height:330px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.about-hero-bg{position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,40,66,.93),rgba(10,90,130,.66)),url('../img/hero.jpg') center/cover no-repeat}
.about-hero-inner{position:relative;padding:30px 36px;color:#fff;width:100%}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9fd2ee}
.hero-title{font-family:var(--font-display);font-weight:700;font-size:46px;margin:6px 0 4px;line-height:1.02;color:#fff}
.hero-title span{color:var(--un)}
.hero-sub{font-size:16px;color:#dbeaf6;margin:0 0 14px;max-width:62ch}
.version-badge{display:inline-block;font-size:12px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:5px 13px;border-radius:999px;color:#fff}
.quick-links{margin-top:22px}
.ql-label{font-size:13px;font-weight:600;color:#cfe3f2;margin:0 0 10px}
.ql-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:10px}
.ql{display:flex;align-items:center;gap:11px;text-align:left;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:11px 13px;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.16s}
.ql:hover{background:var(--un);border-color:var(--un);transform:translateY(-2px)}
/* content line-icons (SVG) — consistent sizing across contexts */
.cico{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.ql .cico{width:23px;height:23px;opacity:.95}
.ic-ico .cico{width:17px;height:17px}
.feat .cico{width:17px;height:17px;color:var(--un-ink)}
.pc-head .cico{width:16px;height:16px}
.contact-link .cico{width:15px;height:15px}
.gh-title .cico{width:24px;height:24px}
.about-grid,.param-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.about-grid,.param-grid{grid-template-columns:1fr}}
.about-grid .span2,.param-grid .span2,.guide-wide .span2{grid-column:1/-1}
.info-card,.param-cat{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:20px 22px}
.ic-head,.pc-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ic-ico{width:30px;height:30px;display:grid;place-items:center;background:var(--un-wash);color:var(--un-ink);border-radius:8px;font-size:15px;flex:0 0 auto}
.ic-head h3,.pc-head{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0;color:var(--darker)}
.info-card p{color:var(--ink-soft);line-height:1.6;margin:.4em 0}
.info-card ul{color:var(--ink-soft);line-height:1.65;padding-left:20px;margin:.4em 0}
.info-card b{color:var(--ink)}
.purpose-box{background:var(--un-wash);border:1px solid #d3e7f4;border-radius:9px;padding:12px 15px;font-size:14px;color:var(--ink-soft);margin-top:10px}
.timeline{display:flex;flex-direction:column;padding-left:5px}
.tl-item{display:flex;gap:13px;padding:7px 0;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:4px;top:18px;bottom:-3px;width:2px;background:var(--line-strong)}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--un);margin-top:5px;flex:0 0 auto;box-shadow:0 0 0 3px var(--un-wash)}
.tl-item.fc .tl-dot{background:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.tl-item h4{font-size:13.5px;margin:0 0 2px;color:var(--ink)}
.tl-item p{font-size:12.5px;margin:0;color:var(--ink-faint)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.feat{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.feat-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.feat-sub{font-size:10.5px;color:var(--ink-faint);line-height:1.4}
.feat-sub b{color:var(--ink-soft);font-weight:700}
.fb{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;white-space:nowrap}
.fb.new{background:var(--ok-wash);color:var(--ok)}.fb.upd{background:var(--un-wash);color:var(--un-ink)}.fb.dev{background:var(--warn-wash);color:var(--warn)}
.ai-row{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:7px 0}
.disclaimer{background:var(--warn-wash);border:1px solid #f0dcb0;border-radius:9px;padding:12px 15px;font-size:13.5px;line-height:1.55;color:#6b4e16}
.rm-h{font-size:13px;color:var(--darker);margin:12px 0 5px}
.rm-list{margin:0;padding-left:18px;color:var(--ink-soft);font-size:13px;line-height:1.6}
.contact-link{display:inline-block;font-family:var(--font-mono);font-size:13px;background:var(--un-wash);border:1px solid #cfe7f6;border-radius:8px;padding:8px 12px;margin:8px 0 12px;color:var(--un-ink)}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.abtn{font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid var(--line-strong);text-decoration:none;display:inline-block}
.abtn.primary{background:var(--un-deep);color:#fff;border-color:var(--un-deep)}.abtn.primary:hover{background:#0c6ea0}
.abtn.secondary{background:#fff;color:var(--darker)}.abtn.secondary:hover{background:var(--un-wash);border-color:var(--un)}
/* guide hero (Metadata / PBI / Demos / Calendar) */
.guide-hero{position:relative;border-radius:16px;overflow:hidden;margin:0 0 20px;padding:34px 34px 30px;min-height:200px;display:flex;align-items:flex-end;background:linear-gradient(120deg,rgba(12,40,66,.93),rgba(10,90,130,.66)),url('../img/hero.jpg') center/cover no-repeat;color:#fff;box-shadow:var(--shadow)}
.guide-hero .gh-inner{position:relative;width:100%}
/* Mobile: the About hero becomes a full-bleed banner (edge-to-edge, no rounded card).
.about-hero exists ONLY on the About page; breaks out of .page's 26px top / 30px side padding. */
@media(max-width:600px){
/* tighter page gutters on phones → more room for content (hero bleed matched below) */
.page{padding:18px 16px 54px}
.about-hero{border-radius:0;margin:-18px -16px 20px}
.guide-hero{border-radius:0;margin:-18px -16px 18px;padding:26px 22px 22px;min-height:150px}
.phead{flex-wrap:wrap;gap:10px}
.phead h2{font-size:24px}
.phead .count{font-size:26px;text-align:left}
.panel{padding:14px 14px 8px}
.chart{height:360px}.chart.tall{height:400px}
}
.gh-title{font-family:var(--font-display);font-weight:700;font-size:34px;margin:5px 0 4px;color:#fff;line-height:1.05}
.gh-sub{font-size:15px;color:#dbeaf6;margin:0;max-width:70ch}
.gh-stats{display:flex;gap:28px;margin-top:18px}
.gh-stats > div{display:flex;flex-direction:column}
.ghn{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;color:#fff}
.ghl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9fd2ee;font-weight:600;margin-top:4px}
/* metadata params */
.pc-head .ic-ico{font-size:14px}
.pi{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line-cool)}
.pi:first-of-type{border-top:0}
.pn{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;background:var(--navy-900);color:#fff;border-radius:7px;font-family:var(--font-display);font-weight:700;font-size:13px}
.pi h4{font-size:14.5px;margin:1px 0 3px;color:var(--ink)}
.pi p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5}
.pi{border-radius:8px;transition:background .25s;scroll-margin-top:80px}
.pi.flash{animation:piflash 1.6s ease}
@keyframes piflash{0%,100%{background:transparent}18%{background:var(--un-25)}}
/* pbi */
.pbi-selector{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.pbi-selector label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.pbi-fig{background:var(--un-wash);border-radius:8px;padding:10px 14px;font-size:13.5px;color:var(--un-ink);margin-top:8px}
/* PBI examples — figure cards + breakdowns */
.pbi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:4px 0 14px}
.pbi-card{background:var(--surface,#fff);border:1px solid var(--line,#e2e8ee);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.pbi-card-total{font-size:30px;font-weight:800;color:var(--un-ink,#103048);line-height:1.05;display:flex;flex-direction:column}
.pbi-card-unit{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint,#8a99a8);margin-top:3px}
.pbi-card-name{font-size:13.5px;font-weight:600;color:var(--ink,#1a2733);line-height:1.35}
.pbi-bd{margin-top:2px;font-size:12.5px}
.pbi-bd>summary{cursor:pointer;color:var(--un-blue,#009edb);font-weight:600;font-size:12px;list-style:revert}
.pbi-bd table{width:100%;border-collapse:collapse;margin-top:6px}
.pbi-bd td{padding:3px 4px;border-bottom:1px solid var(--line,#eef2f5);color:var(--ink-soft,#3d4d5c)}
.pbi-bd td.amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink,#1a2733)}
.pbi-moreinfo{margin-top:8px;border-top:1px solid var(--line,#eef2f5);padding-top:8px}
.pbi-moreinfo>summary{cursor:pointer;font-weight:700;color:var(--ink-soft,#3d4d5c);display:flex;align-items:center;gap:6px}
.pbi-moreinfo p{margin:8px 0;color:var(--ink-soft,#3d4d5c);font-size:13.5px;line-height:1.55}
.pbi-note{font-size:12px!important;color:var(--ink-faint,#8a99a8)!important}
/* PBI: type header + verbatim description + composition bar + Section→child hierarchy */
.pbi-typehead{display:flex;align-items:center;gap:11px;margin:8px 0 14px}
.pbi-typenum{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--un-deep);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;display:grid;place-items:center}
.pbi-typehead h3{margin:0;font-family:var(--font-display);font-size:19px;color:var(--un-ink)}
.pbi-about{margin:0 0 16px;max-width:none}
.pbi-about p{font-size:13.5px}
.pbi-about .pbi-note{margin-top:8px}
/* "About these figures" intro: one lead line + a tidy, same-size bulleted list of the key points */
.info-card .pbi-lead{font-size:14px;line-height:1.6;margin:0 0 11px}
.info-card ul.pbi-points{margin:0 0 2px;padding-left:21px}
.info-card .pbi-points li{font-size:14px;line-height:1.55;margin:0 0 8px}
.info-card .pbi-points li:last-child{margin-bottom:0}
.info-card .pbi-points li::marker{color:var(--un)}
.info-card .disclaimer{margin-top:15px} /* separate the callout from the text above it */
/* cross-scenario comparison strip (shared scale) */
.pbi-compare{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:15px 18px;margin:0 0 16px}
.pbi-compare-head{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--un-ink);margin-bottom:11px}
.pbi-compare-head span{font-family:var(--font-ui);font-weight:400;font-size:12px;color:var(--ink-faint)}
.pbi-crow{display:grid;grid-template-columns:minmax(150px,2.2fr) 6fr auto;align-items:center;gap:14px;padding:5px 0}
.pbi-clabel{font-size:12.5px;color:var(--ink-soft);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pbi-ctrack{display:flex;height:15px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
.pbi-ctot{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--un-ink);font-variant-numeric:tabular-nums;text-align:right;min-width:70px}
.pbi-crow-go{cursor:pointer;border-radius:8px;padding:6px 8px;margin:0 -8px;transition:background .12s}
.pbi-crow-go:hover{background:rgba(0,158,219,.07)}
.pbi-range{position:absolute;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#0a5a82,#3aa0c9)}
/* all-types range chart: narrow 2-line label · wide track, taller bars, value label at each bar end */
.pbi-compare-all .pbi-crow{grid-template-columns:minmax(140px,290px) 1fr;min-height:54px;align-items:center;gap:18px}
.pbi-compare-all .pbi-clabel{-webkit-line-clamp:2;font-size:13px;line-height:1.35}
.pbi-compare-all .pbi-ctrack{position:relative;overflow:visible;height:24px;border-radius:7px}
.pbi-grid{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--line)}
.pbi-range{border-radius:7px;box-shadow:0 1px 2px rgba(10,90,130,.25)}
.pbi-rangeval{position:absolute;top:50%;transform:translateY(-50%);margin-left:11px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--un-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pbi-rangeval-top{display:none} /* mobile only — value shown next to the label, bar full-width below */
.pbi-axis-row{min-height:0;padding-top:3px}
.pbi-axis{background:none!important;height:16px}
.pbi-tick{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--ink-faint);white-space:nowrap}
.pbi-tick::before{content:"";position:absolute;left:50%;top:-5px;height:5px;width:1px;background:var(--line)}
.pbi-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
.pbi-leg{font-size:11.5px;color:var(--ink-soft);display:inline-flex;align-items:center}
.pbi-stack{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--surface-3);margin:4px 0 2px}
.pbi-seg{height:100%;min-width:2px}
.pbi-bd tr.pbi-sec td{font-weight:700;color:var(--ink);padding-top:8px;border-bottom:1px solid var(--line-strong)}
.pbi-bd tr.pbi-child td{padding-left:20px;border-bottom:0;color:var(--ink-soft);font-weight:400}
.pbi-bd tr.pbi-child td.amt{font-weight:600;color:var(--ink-soft)}
.pbi-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
/* demos — gradient cards + modal player */
.demo-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.demo-card2{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;padding:0;transition:transform .18s,box-shadow .18s}
.demo-card2:not(.disabled):hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.demo-card2.disabled{cursor:default}
.dc-hero{position:relative;height:172px;display:grid;place-items:center}
.dc-hero .cico{width:56px;height:56px;color:rgba(255,255,255,.94)}
.demo-card2.disabled .dc-hero .cico{color:rgba(255,255,255,.6)}
.dc-badge{position:absolute;right:12px;bottom:12px;font-size:11px;font-weight:700;padding:3px 11px;border-radius:999px;background:rgba(12,32,56,.8);color:#fff}
.dc-badge.pending{background:rgba(12,32,56,.5)}
.dc-body{padding:16px 18px}
.dc-body h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin:0 0 6px;color:var(--darker)}
.dc-body p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5}
.g-cyan{background:linear-gradient(135deg,#28c0e8,#0a93cf)}
.g-pink{background:linear-gradient(135deg,#f857a6,#ff5b5b)}
.g-purple{background:linear-gradient(135deg,#7b6cf0,#9b5de5)}
.g-orange{background:linear-gradient(135deg,#ff9d5c,#ffd152)}
.g-teal{background:linear-gradient(135deg,#86d9c6,#bfe8df)}
.demo-modal{position:fixed;inset:0;background:rgba(8,22,40,.72);display:none;place-items:center;z-index:200;padding:24px;backdrop-filter:blur(3px)}
.demo-modal.show{display:grid}
.dm-box{background:#0b2038;border-radius:14px;padding:14px;max-width:920px;width:100%;box-shadow:var(--shadow-lg);position:relative}
.dm-box h4{color:#fff;font-family:var(--font-display);margin:2px 6px 10px;font-size:17px}
.dm-box video{width:100%;border-radius:10px;display:block;max-height:72vh;background:#000}
.dm-close{position:absolute;top:11px;right:13px;background:rgba(255,255,255,.16);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;z-index:2}
.dm-close:hover{background:rgba(255,255,255,.32)}
/* per-page export menu */
.exp-wrap{position:relative}
.exp-btn svg:last-child{margin-left:2px}
.exp-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-lg);padding:5px;z-index:40;min-width:152px}
.exp-menu button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);padding:8px 11px;border-radius:7px;cursor:pointer}
.exp-menu button:hover{background:var(--un-wash);color:var(--un-ink)}
@media(max-width:860px){
.xcards{grid-template-columns:1fr}
.gsearch.global{display:none}
body{grid-template-columns:1fr}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:50;transform:translateX(-100%);transition:transform .25s}
body.nav-open .sidebar{transform:none}
.gsearch{display:none}
/* OHCHR brand lockup centred in the AVAILABLE space between the hamburger and the right
buttons. Auto margins balance the gaps — the right cluster has 2 buttons vs 1 on the left,
so true screen-centre would hug the buttons. About = logo only (hero shows the wordmark). */
.topbar-brand{display:inline-flex;margin:0 auto;max-width:60vw;gap:8px}
.topbar .sp{display:none}
body.brand-about .topbar-brand .tb-text{display:none}
body.brand-about .topbar-brand img{height:34px}
/* mobile = hamburger drawer only; the desktop collapse-to-rail toggle makes no sense here
(tapping it produced a broken half-width icon rail with empty content) */
.sidebar-toggle{display:none}
body.sidebar-collapsed{grid-template-columns:1fr}
/* drawer close (X) + tap-anywhere backdrop so the menu has an exit other than picking a route */
.nav-close{display:grid;place-items:center;position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;z-index:60}
.nav-close:hover{background:rgba(255,255,255,.2)}
.nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,22,40,.5);z-index:45;opacity:0;pointer-events:none;transition:opacity .25s}
body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
}
/* ============================================================================
DARK THEME — "lights off": dim, low-glare. Muted off-white text (never pure
white), deep desaturated navy-charcoal surfaces, subtle borders over shadows,
UN cyan kept as a restrained accent. Toggled via .
========================================================================== */
:root[data-theme="dark"]{
color-scheme:dark;
/* chrome — navy kept, deepened so the sidebar reads as a panel lifted above the canvas */
--navy-950:#0b2032; --navy-900:#143047; --navy-800:#1a3b56; --navy-line:#22425f;
/* brand — UN cyan stays the accent; the "ink" cyan is brightened so links/symbols read on dark */
--un:#1f9fd1; --un-deep:#0d6c9c; --un-ink:#5cb8e6; --darker:#cbd8e3;
--un-25:#1c3f55; --un-50:#2a6485; --un-5:#13202b; --un-wash:#16303f;
--gold:#caa253; --gold-wash:#2a2516;
/* ink + surfaces — DIM. soft off-white, not bright white */
--ink:#cad4de; --ink-soft:#9caab7; --ink-faint:#7e8c9a; --ink-on-navy:#c6d2dd;
--paper:#0f1822; --surface:#16212c; --surface-2:#131c26; --surface-3:#1b2734;
--line:#243240; --line-cool:#1d2935; --line-strong:#30445a;
/* status — brighter foreground on dark, deep washes */
--ok:#6cbf6a; --ok-wash:#18291a; --warn:#d4a45c; --warn-wash:#2a2415; --bad:#e08a8a; --bad-wash:#2f1b1d;
/* shadows — soft; dark mode leans on borders, not shadows */
--shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 22px -10px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.72);
}
/* targeted overrides where colours were hardcoded light */
:root[data-theme="dark"] .topbar{background:rgba(15,24,34,.84)}
:root[data-theme="dark"] .topbar-brand img{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .scard.main{background:linear-gradient(135deg,#15303f,var(--surface));border-color:#1d4258}
:root[data-theme="dark"] .scard.main .scn{color:var(--un-ink)}
:root[data-theme="dark"] .abtn.secondary{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .abtn.secondary:hover{background:var(--un-wash);border-color:var(--un)}
:root[data-theme="dark"] .toast{background:#1b2734;color:#dbe7f2;border:1px solid var(--line-strong)}
:root[data-theme="dark"] .chip{border-color:#274457}
:root[data-theme="dark"] .purpose-box{border-color:#1d4258}
:root[data-theme="dark"] .contact-link{border-color:#274457}
:root[data-theme="dark"] .note{border-color:#3a3320;color:#d8b878}
:root[data-theme="dark"] .note b{color:#e6c98a}
:root[data-theme="dark"] .disclaimer{border-color:#3a3320;color:#d8b878}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2b3a48;border-color:var(--paper)}
:root[data-theme="dark"] ::selection{background:var(--un);color:#08151f}
:root[data-theme="dark"] .skeleton{background:linear-gradient(100deg,var(--surface-3) 30%,#22303d 50%,var(--surface-3) 70%);background-size:200% 100%}
/* big data numbers default to --navy-900 (dark chrome) which is invisible on a dark canvas — lift them */
:root[data-theme="dark"] .kpi .n,:root[data-theme="dark"] .statcard .n,:root[data-theme="dark"] .scard .scn,:root[data-theme="dark"] .xcard .n,:root[data-theme="dark"] .kbanner-ods .big,:root[data-theme="dark"] .kf-src .kf-n{color:#d6e1ec}
/* dark: dim the bright accents — active nav item, hero quick-links + version badge */
:root[data-theme="dark"] .nav-item.active{background:linear-gradient(120deg,#0d5e86,#0a4a6b);box-shadow:0 4px 14px -7px rgba(0,0,0,.6)}
:root[data-theme="dark"] .nav-direct .gh.active{background:linear-gradient(120deg,#0d5e86,#0a4a6b);box-shadow:0 4px 14px -7px rgba(0,0,0,.6)}
:root[data-theme="dark"] .ql{background:rgba(6,12,20,.5);border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .ql:hover{background:var(--un-deep);border-color:var(--un)}
:root[data-theme="dark"] .version-badge{background:rgba(6,12,20,.5);border-color:rgba(255,255,255,.16)}
/* dark: dull the bright demo-card gradient heroes (deeper, desaturated) */
:root[data-theme="dark"] .g-cyan{background:linear-gradient(135deg,#1a5e78,#0e4763)}
:root[data-theme="dark"] .g-pink{background:linear-gradient(135deg,#844060,#7e3a3a)}
:root[data-theme="dark"] .g-purple{background:linear-gradient(135deg,#4a4080,#4d386b)}
:root[data-theme="dark"] .g-orange{background:linear-gradient(135deg,#7e5a32,#7d6a2e)}
:root[data-theme="dark"] .g-teal{background:linear-gradient(135deg,#3c6a5e,#45685f)}
:root[data-theme="dark"] .gsearch input::placeholder,:root[data-theme="dark"] .combo-search::placeholder{color:var(--ink-faint)}
/* theme toggle button — moon in light mode (→ go dark), sun in dark mode (→ go light) */
.theme-toggle{padding:0 11px}
.theme-toggle svg{display:block}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
/* ---- phone overrides for the PBI examples page ----
Placed AFTER the base .pbi-* rules so single-column stacking wins (same specificity → source
order decides). On phones the bar goes UNDER each mandate-type label → full-width track. */
@media(max-width:600px){
.pbi-selector{flex-wrap:wrap;gap:8px}
.pbi-selector .fselect{min-width:0!important;width:100%}
.pbi-compare{padding:13px 9px}
/* per-type "compare scenarios": label on its own line, then bar + total */
.pbi-compare:not(.pbi-compare-all) .pbi-crow{grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.pbi-compare:not(.pbi-compare-all) .pbi-clabel{grid-column:1/-1;-webkit-line-clamp:none}
/* "all mandate types" range chart: type label + $range on ONE line, full-width bar UNDER it,
so the value can never block the bar (no matter where the bar sits). */
.pbi-compare-all .pbi-crow{grid-template-columns:1fr;gap:7px;min-height:0;padding:11px 0}
.pbi-compare-all .pbi-clabel{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;-webkit-line-clamp:none}
.pbi-compare-all .pbi-cl-t{flex:1 1 auto}
.pbi-compare-all .pbi-rangeval{display:none}
.pbi-compare-all .pbi-rangeval-top{display:inline-block;flex:0 0 auto;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--un-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pbi-compare-all .pbi-ctrack{height:22px}
.pbi-axis-row > div:first-child{display:none}
.pbi-cards{grid-template-columns:1fr}
}
/* ============================================================================
chatHRC — AI assistant (preview). UN-styled chat surface: header + 6-language
bar, impact strip, message stream with action icons, suggestions + composer.
========================================================================== */
.chat-page{max-width:980px}
.chat-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat-id{display:flex;align-items:center;gap:12px}
.chat-ava{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--un),var(--un-deep));color:#fff;box-shadow:0 5px 14px -5px rgba(0,158,219,.55)}
.chat-ava svg{width:23px;height:23px}
.chat-id .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--un-ink);font-weight:700;margin-bottom:3px}
.chat-title{font-family:var(--font-display);font-weight:700;font-size:26px;margin:0;line-height:1.05;color:var(--ink)}
.chat-badge{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);background:var(--gold-wash);border-radius:999px;padding:3px 10px}
.chat-preview{align-self:center;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--gold-wash);border:1px solid #f0dcb0;border-radius:999px;padding:7px 18px;white-space:nowrap}
.chat-composer input[readonly]{cursor:default}
.lang-bar{display:flex;gap:3px;background:var(--surface-3);border-radius:11px;padding:3px}
.lang-pill{min-width:34px;height:30px;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);border-radius:8px;cursor:pointer;transition:.12s}
.lang-pill:hover{color:var(--un-ink)}
.lang-pill.active{background:var(--un-deep);color:#fff}
.chat-impact{background:linear-gradient(120deg,var(--un-5),var(--surface));border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin-bottom:16px}
.ci-tiles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:11px}
.ci-tile{flex:1 1 auto;min-width:94px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 13px;display:flex;flex-direction:column}
.ci-tile.ci-wide{min-width:158px}
.ci-n{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--navy-900);line-height:1;font-variant-numeric:tabular-nums}
.ci-l{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:5px}
.ci-blurb{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.55}
.chat-stream{display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:min(56vh,540px);min-height:260px;padding:6px 4px 6px 0;scroll-behavior:smooth}
.msg{display:flex;gap:11px;max-width:100%}
.msg.user{justify-content:flex-end}
.msg.user .msg-body{background:var(--un-deep);color:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;max-width:82%;font-size:14px;line-height:1.5}
.msg.ai{align-items:flex-start}
.msg-ava{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--un),var(--un-deep));color:#fff;margin-top:1px}
.msg-ava svg{width:17px;height:17px}
.msg.ai .msg-body{background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:14px 16px 9px;max-width:90%;box-shadow:var(--shadow-sm);font-size:14px;line-height:1.6;color:var(--ink)}
.msg-body p{margin:0 0 9px}
.msg-body p:last-child{margin-bottom:0}
.msg-body ul{margin:5px 0 9px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.msg-body li{font-size:13.5px;line-height:1.5}
.msg-body li::marker{color:var(--un)}
.msg-body b{color:var(--un-ink);font-weight:700}
.msg.user .msg-body b{color:#fff}
.msg-body .ai-foot{font-size:12.5px;color:var(--ink-faint);margin-top:4px}
.ai-src{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.src-chip{font-family:var(--font-mono);font-size:11px;color:var(--un-ink);background:var(--un-wash);border:1px solid #cfe7f6;border-radius:6px;padding:2px 7px;cursor:pointer;transition:.12s;white-space:nowrap}
.src-chip:hover{background:var(--un);color:#fff;border-color:var(--un)}
.ai-cta{display:inline-block;margin-top:11px;font-size:13px;font-weight:600;color:#fff;background:var(--un-deep);border:0;border-radius:9px;padding:9px 15px;cursor:pointer;text-decoration:none}
.ai-cta:hover{background:#0c6ea0;text-decoration:none}
.ai-insight{margin-top:10px;font-size:12.5px;color:var(--ink-soft);background:var(--surface-2);border-left:3px solid var(--un);border-radius:0 7px 7px 0;padding:9px 12px;line-height:1.5}
.ai-actions{display:flex;gap:2px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-cool)}
.ai-act{width:30px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--ink-faint);border-radius:7px;cursor:pointer;transition:.12s;position:relative}
.ai-act svg{width:16px;height:16px}
.ai-act:hover{background:var(--un-wash);color:var(--un-ink)}
.ai-act.on{color:var(--un);background:var(--un-wash)}
.ai-act.done{color:var(--ok)}
.typing{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:15px 16px;box-shadow:var(--shadow-sm)}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--un-50);animation:tdot 1s infinite}
.typing span:nth-child(2){animation-delay:.16s}
.typing span:nth-child(3){animation-delay:.32s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-suggest{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 12px}
.sg-chip{font:inherit;font-size:12.5px;font-weight:600;color:var(--un-ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.12s}
.sg-chip:hover{background:var(--un-wash);border-color:var(--un)}
.chat-composer{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:6px 6px 6px 8px;box-shadow:var(--shadow-sm)}
.chat-composer:focus-within{border-color:var(--un);box-shadow:0 0 0 3px var(--un-wash)}
.chat-composer input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);padding:9px 4px;outline:none}
.cmp-mic,.cmp-send{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:11px;cursor:pointer;transition:.14s}
.cmp-mic{background:var(--surface-3);color:var(--ink-soft)}
.cmp-mic:hover{background:var(--un-wash);color:var(--un-ink)}
.cmp-mic.on{background:var(--bad);color:#fff;animation:micpulse 1.3s infinite}
.cmp-mic.flash{background:var(--warn-wash);color:var(--warn)}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(179,40,58,.45)}50%{box-shadow:0 0 0 6px rgba(179,40,58,0)}}
.cmp-mic svg,.cmp-send svg{width:18px;height:18px}
.cmp-send{background:var(--un-deep);color:#fff}
.cmp-send:hover{background:#0c6ea0}
.chat-note{font-size:11.5px;color:var(--ink-faint);margin:9px 2px 0;line-height:1.5}
.chat-stream[dir="rtl"]{text-align:right}
.chat-stream[dir="rtl"] .msg.ai{flex-direction:row-reverse}
.chat-stream[dir="rtl"] .msg.user{justify-content:flex-start}
.chat-stream[dir="rtl"] .msg-body ul{padding-left:0;padding-right:20px}
:root[data-theme="dark"] .chat-impact{background:linear-gradient(120deg,#13202b,var(--surface))}
:root[data-theme="dark"] .ci-n{color:#d6e1ec}
:root[data-theme="dark"] .src-chip{border-color:#274457}
@media(max-width:600px){
.chat-title{font-size:22px}
.chat-ava{width:38px;height:38px}
.chat-stream{max-height:54vh}
.msg.user .msg-body,.msg.ai .msg-body{max-width:92%}
.ci-tile{min-width:78px;padding:8px 10px}
.ci-n{font-size:18px}
}