/* Economic Security Portal — house stylesheet.
   Register: restrained institutional, executed to a high standard (PRD section 16).
   Two voices, in both scripts (programme PRD 13.5, docs/DESIGN.md "Type"): the Center's publication serif for headings and
   verdicts (Noto Serif; Arabic Noto Naskh Arabic), the same faces as its reports, and one text face for reading, labels,
   tables, charts and figures (Source Sans 3 with tabular lining figures; Arabic IBM Plex Sans Arabic). No monospace
   in the interface except for credentials and identifiers (--code).
   Themes: light (stone ground, white paper) and dark (deep navy ground, slate paper); the dark block is
   generated twice below, once for the saved choice and once for the system setting.
   Type scale (PRD 16.3, 19.2): body 17px; no text below 12px (.75rem), chart labels included; controls at least 40px, 44px on phones. */
:root{
  /* neutrals: one cool stone family on the navy's hue (23 October 2026; the warm ground and the cool rules had disagreed) */
  --ground:#f1f3f5; --paper:#ffffff; --raise:#f7f8fa; --sunk:#e8ebef;
  --ink:#121a24; --ink-2:#364350; --muted:#566271; --faint:#7a8594;
  --rule:#d6dbe1; --rule-soft:#e6e9ed; --rule-strong:#aeb7c2;
  --navy:#15334e; --navy-ink:#ffffff; --blue:#1f6091; --blue-soft:#e3ecf4; --rust:#c0632a; --rust-soft:#f7e6da;
  --brass:#a3864a; --brass-soft:#efe6d1; --brass-ink:#8a6d32;
  --good:#1d6b55; --good-soft:#dcefe7; --warn:#8a5a12; --warn-soft:#f7ecd6; --bad:#9c3d14; --bad-soft:#f6e0d4;
  --gold-soft:#f6ecd2; --gold-ink:#7a5a0c; --gold-line:#e3cf98;
  --uae:var(--navy); --cty:var(--rust); --proj:#eef2f6; --focus:#1f6091; --x1:#2a7f76; --x2:#9a7418;
  --w-up1:#c9d8e6; --w-up2:#8fb0cf; --w-up3:#3d6a92; --w-dn1:#efd6c4; --w-dn2:#e0a97f; --w-dn3:#b8622a; --w-none:#d7dbdf; --w-border:#ffffff;
  --shadow:0 1px 2px rgba(18,26,36,.05),0 8px 22px -16px rgba(18,26,36,.18);
  --shadow-up:0 2px 4px rgba(18,26,36,.06),0 18px 40px -18px rgba(18,26,36,.26);
  --display:'Noto Serif','Noto Serif Fallback','Noto Naskh Arabic',Georgia,'Times New Roman',serif;
  --display-ar:'Noto Naskh Arabic','Noto Serif','Times New Roman',serif;
  --sans:'Source Sans 3','Source Sans 3 Fallback','IBM Plex Sans Arabic','Helvetica Neue',Arial,sans-serif;
  /* the data face: figures, labels and chart text, set in the text face with tabular lining figures (the rules that
     use it add font-variant-numeric). The name stays "--mono" so a hundred rules keep one meaning: "data". */
  --mono:'Source Sans 3','Source Sans 3 Fallback','IBM Plex Sans Arabic','Helvetica Neue',Arial,sans-serif;
  --code:ui-monospace,'SFMono-Regular','Cascadia Mono',Menlo,Consolas,monospace;
  --arabic:'IBM Plex Sans Arabic','Segoe UI','Tahoma',sans-serif;
  --r:4px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0d141b; --paper:#131b24; --raise:#182230; --sunk:#0a1016;
  --ink:#e8edf2; --ink-2:#c9d2db; --muted:#a3afbb; --faint:#7f8b98;
  --rule:#2b3846; --rule-soft:#222d39; --rule-strong:#475666;
  --navy:#a9c8e6; --navy-ink:#0d141b; --blue:#7fb2dd; --blue-soft:#1b2d3f; --rust:#e79a67; --rust-soft:#3b2416;
  --brass:#c9a86a; --brass-soft:#3a2f1a; --brass-ink:#d9bd85;
  --good:#8fd3bb; --good-soft:#173a31; --warn:#e9c27a; --warn-soft:#3a2f18; --bad:#f0a07a; --bad-soft:#44261a;
  --gold-soft:#3a3016; --gold-ink:#f0d68e; --gold-line:#5c4b1e;
  --proj:#1b2530; --focus:#7fb2dd; --x1:#6cc7bb; --x2:#e0bc5e;
  --w-up1:#2e4e6e; --w-up2:#4a7aa8; --w-up3:#8fbfe8; --w-dn1:#4a2e1c; --w-dn2:#8a4f28; --w-dn3:#e79a67; --w-none:#1e2833; --w-border:#0d141b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.6);
  --shadow-up:0 2px 4px rgba(0,0,0,.35),0 22px 44px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0d141b; --paper:#131b24; --raise:#182230; --sunk:#0a1016;
  --ink:#e8edf2; --ink-2:#c9d2db; --muted:#a3afbb; --faint:#7f8b98;
  --rule:#2b3846; --rule-soft:#222d39; --rule-strong:#475666;
  --navy:#a9c8e6; --navy-ink:#0d141b; --blue:#7fb2dd; --blue-soft:#1b2d3f; --rust:#e79a67; --rust-soft:#3b2416;
  --brass:#c9a86a; --brass-soft:#3a2f1a; --brass-ink:#d9bd85;
  --good:#8fd3bb; --good-soft:#173a31; --warn:#e9c27a; --warn-soft:#3a2f18; --bad:#f0a07a; --bad-soft:#44261a;
  --gold-soft:#3a3016; --gold-ink:#f0d68e; --gold-line:#5c4b1e;
  --proj:#1b2530; --focus:#7fb2dd; --x1:#6cc7bb; --x2:#e0bc5e;
  --w-up1:#2e4e6e; --w-up2:#4a7aa8; --w-up3:#8fbfe8; --w-dn1:#4a2e1c; --w-dn2:#8a4f28; --w-dn3:#e79a67; --w-none:#1e2833; --w-border:#0d141b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.6);
  --shadow-up:0 2px 4px rgba(0,0,0,.35),0 22px 44px -18px rgba(0,0,0,.7);
  color-scheme:dark;
} }
/* ---------- design tokens (docs/DESIGN.md; type scale and label tracking revised 23 October 2026, programme PRD 13.5) ---------- */
:root{
  /* type: roles, not sizes. Labels 13 px (the text face is smaller on the body than the old mono at 12 px), captions 14,
     secondary text 15, controls 16, reading 17; headings step 19 / 22 / 28 / 32-44 so each level is plainly another level */
  --fs-min:.75rem;--fs-label:.8125rem; --fs-caption:.875rem; --fs-small:.9375rem; --fs-ui:1rem; --fs-body:1.0625rem;
  --fs-title:1.1875rem; --fs-h3:1.375rem; --fs-h2:1.75rem;
  --fs-h1:clamp(1.875rem,1.35rem + 1.9vw,2.75rem); --fs-display:clamp(2rem,1.3rem + 2.6vw,3.25rem);
  --fs-fig-s:1.0625rem; --fs-fig:1.375rem; --fs-fig-l:1.75rem; --fs-fig-xl:2.5rem;
  --lh-tight:1.15; --lh-head:1.25; --lh-ui:1.35; --lh-body:1.55; --lh-read:1.65; --lh-ar:1.85; --lh-ar-head:1.6;
  --track-label:0; --track-brand:.16em; --track-display:-.012em;
  /* space: 4px base */
  --sp-0:.125rem; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:2rem; --sp-8:3rem;
  --gutter:16px; --page-max:78rem; --measure:48rem; --measure-wide:64rem;
  /* shape */
  --r-pill:999px; --r-sheet:10px; --r-media:6px; --bw:1px; --bw-accent:3px;
  /* lines and grounds */
  --line-field:var(--faint);          /* form-field outline: 3.6:1 light, 5.0:1 dark against paper */
  --doc-paper:#ffffff;                /* behind report documents, which are always light */
  --pdf-ground:#525659; --media-ground:#0d141b;
  --scrim:rgba(9,14,20,.74);
  --head-deep:color-mix(in srgb,var(--head) 88%,#000);
  --head-raise:color-mix(in srgb,var(--head) 82%,#fff);
  --head-hover:rgba(255,255,255,.08);
  /* depth */
  --shadow-overlay:0 14px 36px -14px rgba(0,0,0,.4);
  --shadow-edge:0 6px 18px -6px rgba(0,0,0,.45);
  --shadow-modal:0 30px 80px -20px rgba(0,0,0,.6);
  --ring-lit:0 0 0 3px var(--brass-soft);
  /* motion */
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:250ms; --dur-enter:450ms; --stagger:45ms;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* layers */
  --z-raised:2; --z-local:5; --z-masthead:30; --z-popover:40; --z-rail:880; --z-edge:900; --z-drawer:960; --z-modal:1000;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
small{font-size:max(12px,.85em)}
html{-webkit-text-size-adjust:100%;font-optical-sizing:auto}
/* PRD 46: an Arabic reader's page before its words arrive (theme-boot.js): the English placeholder words are hidden, their
   room kept; app.js removes the class once the Arabic is in (theme-boot.js removes it after 8 seconds in any case) */
html.i18n-pending [data-i18n]{visibility:hidden}
/* ...and the masthead's menu row and tools until the account and the language are in (app.js showMasthead), so the row is
   drawn once, in its final layout (at most 3 seconds); the page's main part too, except on a phone the Overview once its
   first part is drawn (html.ov-in, overview.js; PRD 46.6: shown at once, not held for the menu row; on wider screens the
   menu row's fit can still change the masthead's height, so the page waits for it there); Section 46.10: on a phone every
   other view too, once it is drawn (html.view-in, app.js), not held for the menu row's tools (main.wrap in a rule of its
   own: inside the :is() list with the #top selectors it took their weight, and the phone rule below never applied) */
html.booting :is(#top .nav,#top .top-tools,#top .user-box,#tape){visibility:hidden}
html.booting main.wrap{visibility:hidden}
@media (max-width:760px){html.booting:is(.ov-in,.view-in) main.wrap{visibility:visible}}
html.booting #top *{transition:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;font-kerning:normal}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--brass) 32%,transparent);color:var(--ink)}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);color:var(--navy);text-wrap:balance;margin:0;font-weight:500;letter-spacing:var(--track-display)}
/* display sizes are set at the regular weight, section heads at medium (a heavy serif at 44 px shouts); headings set solid */
h1{font-weight:400;line-height:var(--lh-tight)}
h2,h3{line-height:var(--lh-head)}
/* Arabic: the Naskh display face reads as running text at the medium weight, so section and card titles are set bold
   and page titles semi-bold (the editor, 24 October 2026: titles must stand apart from the text by size and weight) */
html[dir="rtl"] :is(h2,h3,h4){font-weight:700}
html[dir="rtl"] h1{font-weight:600}
p,li{text-wrap:pretty}
code,kbd,samp{font-family:var(--code)}
.num,.tab,.tape-v,.kv b,.val b,.fact b,.spine .sp-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}
[hidden]{display:none!important}

/* ---------- masthead (the signature): both names, a brass double rule, then the navigation ---------- */
.top{background:var(--head);color:var(--head-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:1px solid var(--rule)}
.top-in{max-width:78rem;margin:0 auto;padding-inline:16px}
.head-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand alt" "rule rule" "bar bar";align-items:start;column-gap:2rem;padding-top:1.05rem;transition:padding .25s ease}
.navbar{grid-area:bar;display:flex;align-items:center;gap:.4rem;min-width:0}
.head-grid .brand{grid-area:brand;padding-bottom:.85rem}
.head-grid .brand-alt{grid-area:alt;padding-bottom:.85rem}
.head-grid .rule-brass{grid-area:rule}
.navbar .nav{min-width:0}
.navbar .top-tools{margin-inline-start:auto}
.brand{text-decoration:none;color:inherit;min-width:0}
.brand-main{display:flex;flex-direction:column;gap:.3rem}
.brand-main b{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.15;color:var(--head-ink);letter-spacing:-.006em;text-wrap:balance;max-width:34rem}
.brand-sub{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--head-muted);font-variant-numeric:tabular-nums lining-nums}
.brand-short{display:none;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.14em;color:var(--head-ink)}
.brand-alt{font-family:var(--display-ar);font-size:1.02rem;line-height:1.55;color:var(--head-muted);max-width:24rem;text-align:end;flex:none;margin-top:.1rem}
.brand-alt[lang="en"]{font-family:var(--display);font-size:.95rem;line-height:1.3;max-width:22rem}
.rule-brass::before{content:"";display:block;height:4px;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);transform-origin:0 50%}
.nav{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;margin-inline-start:-.75rem}
.nav::-webkit-scrollbar{display:none}
.nav a,.nav .nav-parent{position:relative;color:var(--head-muted);text-decoration:none;font-family:var(--mono);font-weight:600;font-size:var(--fs-label);padding:1rem .75rem .9rem;white-space:nowrap;transition:color .15s;display:inline-flex;align-items:center;min-height:44px;font-variant-numeric:tabular-nums lining-nums}
.nav a::after,.nav .nav-parent::after{content:"";position:absolute;inset-inline:.75rem;bottom:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s ease}
.nav a:hover,.nav .nav-parent:hover{color:var(--head-ink)}
.nav a[aria-current="page"],.nav .nav-parent[aria-current="page"]{color:var(--head-ink)}
.nav a[aria-current="page"]::after,.nav .nav-parent[aria-current="page"]::after{transform:scaleX(1)}
.top-tools{display:flex;align-items:center;gap:.4rem;padding-block:.45rem}
.theme-switch,.lang-switch{height:2.5rem;border:1px solid var(--rule-strong);background:transparent;color:var(--head-ink);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.theme-switch{width:2.5rem;position:relative;padding:0}
.theme-switch .ico{position:absolute;width:1.1rem;height:1.1rem;transition:opacity .25s,transform .35s ease}
.theme-switch[data-mode="light"] .sun,.theme-switch[data-mode="dark"] .moon{opacity:0;transform:rotate(-90deg) scale(.6)}
.theme-switch[data-mode="light"] .moon,.theme-switch[data-mode="dark"] .sun{opacity:1;transform:none}
.theme-switch:hover,.lang-switch:hover{border-color:var(--navy);background:var(--raise)}
.lang-switch{font-family:var(--arabic);font-weight:700;font-size:1rem;padding:0 .9rem;line-height:1}
html[lang="ar"] .lang-switch{font-family:var(--mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums lining-nums}
/* docs/PRD.md Section 46.9: on an English page the switch's Arabic word asks for its web font (45 KB) only once the view is
   drawn (app.js later, class fonts-late); until then the system's Arabic, as while the font loads */
html:not([lang="ar"]):not(.fonts-late) .lang-switch{font-family:'Segoe UI','Tahoma',sans-serif}
/* docs/PRD.md Section 46.10: on a view other than the Overview the web fonts are asked for once the view is drawn (class
   fonts-wait: theme-boot.js sets it, app.js takes it off), so they do not share the network with the view's own files;
   until then the fallback faces, sized to match (fonts.css), and the system's Arabic */
html.fonts-wait,html.fonts-wait[dir="rtl"]{--display:'Noto Serif Fallback',Georgia,'Times New Roman',serif;--sans:'Source Sans 3 Fallback','Helvetica Neue',Arial,sans-serif;--mono:'Source Sans 3 Fallback','Helvetica Neue',Arial,sans-serif;--arabic:'Segoe UI','Tahoma',sans-serif;--display-ar:'Segoe UI','Tahoma',serif}
html.fonts-wait[dir="rtl"]{--display:'Segoe UI','Tahoma',serif;--mono:'Segoe UI','Tahoma',sans-serif}
.user-box{position:relative;padding-inline-start:.2rem}
.user-menu summary{list-style:none;display:flex;align-items:center;gap:.45rem;cursor:pointer;height:2.5rem;padding:0 .6rem 0 .25rem;border:1px solid transparent;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--head-ink)}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover,.user-menu[open] summary{border-color:var(--rule-strong);background:var(--raise)}
.user-menu .avatar{width:1.8rem;height:1.8rem;border-radius:50%;background:var(--navy);color:var(--navy-ink);font-family:var(--mono);font-size:var(--fs-label);font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums lining-nums}
.user-menu .who{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu summary .ico{width:.85rem;height:.85rem;color:var(--muted);transition:transform .2s}
.user-menu[open] summary .ico{transform:rotate(180deg)}
.user-menu .menu{position:absolute;inset-inline-end:0;top:calc(100% + .4rem);min-width:14rem;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-up);padding:.35rem;z-index:40;display:grid;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@starting-style{.user-menu .menu{opacity:0;transform:translateY(-4px)}}
.user-menu .menu a,.user-menu .menu button{display:block;width:100%;text-align:start;text-decoration:none;color:var(--ink);background:none;border:0;font-size:.95rem;font-weight:600;padding:.6rem .75rem;min-height:40px;border-radius:2px}
.user-menu .menu a:hover,.user-menu .menu button:hover{background:var(--raise);color:var(--navy)}
.user-menu .menu button{border-top:1px solid var(--rule-soft);margin-top:.25rem;color:var(--muted)}
/* scrolled: the name row scrolls away and the menu row stays, led by the short name (PRD 25.2). Nothing here may
   change the masthead's height: a height change moves the page under the reader, the browser corrects the scroll
   position, the threshold is crossed back and the masthead flickers between the two names. */
.brand-mini{display:none}

/* ---------- the tape: the UAE's headline indicators ---------- */
.tape{background:var(--sunk);border-bottom:1px solid var(--rule)}
/* docs/PRD.md Section 46.9: Latest opened directly: its pulse, the strip and the page come together (app.js view-wait) */
html.view-wait #tape,html.view-wait main.wrap{display:none}
.tape-in{max-width:78rem;margin:0 auto;padding-inline:16px;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tape-in::-webkit-scrollbar{display:none}
.tape-h{flex:none;display:flex;flex-direction:column;justify-content:center;padding:.4rem .9rem .4rem 0;border-inline-end:1px solid var(--rule);font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.tape-h b{font-weight:600;color:var(--navy)}
.tape-i{flex:none;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;column-gap:.6rem;align-items:center;justify-content:start;padding:.5rem 1rem .45rem;border-inline-end:1px solid var(--rule)}
.tape-l{grid-column:1/-1;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);white-space:nowrap;line-height:1.3;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.tape-v{grid-column:1;grid-row:2;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap}
.tape-y{grid-column:1/-1;grid-row:3;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);white-space:nowrap;line-height:1.3;unicode-bidi:plaintext;font-variant-numeric:tabular-nums lining-nums}
.tape-i .spark{grid-column:2;grid-row:2;width:3.6rem;height:1.25rem;align-self:center;direction:ltr}
/* the years the small line covers, under it; the year line beside it (design review D-33) */
.tape-i:has(.tape-r) .tape-y{grid-column:1}
.tape-r{grid-column:2;grid-row:3;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);white-space:nowrap;line-height:1.3;text-align:center;direction:ltr;font-variant-numeric:tabular-nums lining-nums}
/* when the strip is wider than the screen, its far edge fades to show there is more to scroll */
.tape-in.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent)}
.spark path{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--rust)}
.spark path.proj{stroke-dasharray:2 2;stroke-width:1.2}

/* ---------- page furniture ---------- */
.wrap{max-width:78rem;margin:0 auto;padding-inline:16px;padding-block:1.8rem 3rem}
/* PRD 46 (the portal page only: the one whose views include the Overview): until the first view is drawn, and while the
   open view shows only its "Loading" line (or, Section 46.9, its only box is still empty), the footer waits a screen
   lower, so it does not jump down (a layout shift) when the content arrives */
main.wrap:has(> #v-overview):not(:has(> section:not([hidden]))) > .foot,main.wrap:has(> #v-overview):has(> section:not([hidden]) > div > .empty.is-loading:only-child) > .foot,main.wrap:has(> #v-overview):has(> section:not([hidden]) > div:only-child:empty) > .foot,main.wrap:has(> #v-overview):has(> section:not([hidden]) .rm-grid > .empty.is-loading:only-child) > .foot{margin-top:100vh}
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);color:var(--muted);font-weight:600;margin:0 0 .5rem}
/* programme PRD 13.5 (impeccable's craft floor): no kicker above a heading. A label that only repeated the menu or the
   heading is gone; one that carried a fact (which brief, which issue) now follows the heading as its meta line. Labels
   that are themselves the only heading of a block ("How the portal works", "Key figures today") stay, set as headings. */
.eyebrow:has(+ :is(h1,h2,h3,.lead-meta,#latest-box,.tabs)){display:none}
.meta-line{font-size:var(--fs-small);color:var(--muted);margin:.35rem 0 0;font-weight:600}
.meta-line .ico{width:1rem;height:1rem;vertical-align:-.15em;margin-inline-end:.3rem;color:var(--brass-ink)}
.lede{color:var(--ink-2);max-width:48rem;margin:.4rem 0 0;font-size:1.02rem;line-height:1.6}
.page-lede{margin:0 0 var(--sp-4)}
.page-h{font-size:var(--fs-h1);font-weight:400;line-height:var(--lh-tight);margin:0 0 var(--sp-2)}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;padding:.3rem .65rem;border-radius:2px;background:var(--blue-soft);color:var(--navy);white-space:nowrap;line-height:1.2;font-variant-numeric:tabular-nums lining-nums}

.chip.quiet{background:transparent;color:var(--ink-2);border:1px solid var(--rule)}
.chip.sp{background:var(--navy);color:var(--navy-ink)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-weight:600;font-size:.92rem;padding:.6rem 1rem;min-height:40px;border-radius:var(--r);text-decoration:none;line-height:1.2;transition:border-color .15s,transform .15s,box-shadow .15s,background .15s}
.btn:hover{border-color:var(--navy);box-shadow:var(--shadow)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){ .btn:active{transform:scale(.98)} }
.btn:active{transform:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.status{font-size:.85rem;color:var(--muted);min-height:1.2em;margin-top:.5rem}
.src{font-size:.82rem;color:var(--muted);margin-top:auto;line-height:1.55}
.card .src,.profile .src{font-family:var(--mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums lining-nums}
.empty{background:var(--paper);border:1px solid var(--rule);border-top:var(--bw-accent) solid var(--brass);box-shadow:var(--shadow);padding:1.8rem 2rem}
.empty h2{font-size:1.5rem;margin-bottom:.4rem}

/* ---------- the plate: the latest issue ---------- */

.lead-main h1{font-size:clamp(1.7rem,1.1rem + 2.1vw,2.55rem);line-height:1.1;margin:.7rem 0 .8rem;max-width:30ch;font-weight:400}

.kv{display:grid;gap:.85rem}
.kv > div{border-top:1px solid var(--rule-strong);padding-top:.45rem}
.kv b{display:block;font-size:1.45rem;font-weight:600;color:var(--navy);line-height:1.1;letter-spacing:-.01em}

.ed{display:flex;flex-wrap:wrap;gap:.35rem}
.ed a.chip{text-decoration:none;transition:background .15s}
.ed a.chip:hover{background:var(--navy);color:var(--navy-ink)}

.panel{background:var(--paper);border:1px solid var(--rule);padding:1.25rem 1.4rem;transition:border-color .2s,box-shadow .2s,transform .2s}
.panel h2{font-size:1.15rem;margin-bottom:.45rem}
.panel p{margin:.2rem 0 .7rem;color:var(--ink-2);font-size:.97rem;line-height:1.6}
.grid-2 .panel:hover{border-color:var(--rule-strong);box-shadow:var(--shadow)}
/* panels and menu cards: hover changes border and tone, no lift (programme PRD 13.5) */

.linkrow .ico{transition:transform .2s}
@media (hover:hover) and (pointer:fine){
  .linkrow:hover .ico{transform:translateX(3px)}
  html[dir="rtl"] .linkrow:hover .ico{transform:translateX(-3px) scaleX(-1)}
}
/* the latest special report */

 /* the weekly archive, reached from the Daily brief page (PRD 29.4) */
.sp-panel .eyebrow{margin-bottom:.6rem}
.sp-panel h2{font-size:1.5rem;line-height:1.25;margin:.7rem 0 .4rem;font-weight:400}
.sp-panel .lede{font-size:1rem;max-width:60rem}

.sp-panel .src{margin:.6rem 0 0}

/* ---------- lists: issues and special reports ---------- */
.tw{overflow-x:auto;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow)}
table.list{width:100%;border-collapse:collapse;font-size:.94rem}
table.list th{background:var(--raise);color:var(--muted);text-align:start;font-family:var(--mono);font-weight:600;font-size:var(--fs-label);padding:.75rem .8rem;white-space:nowrap;border-bottom:1px solid var(--rule-strong);font-variant-numeric:tabular-nums lining-nums}
table.list td{padding:.85rem .8rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.list tbody tr:last-child td{border-bottom:0}
table.list tbody tr{transition:background .15s}
table.list tbody tr:hover{background:var(--raise)}
table.list td.n{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1;color:var(--navy);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
table.list td.hl a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem}
table.list td.hl a:hover{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
table.list td.sc{color:var(--ink-2);font-size:.9rem}
table.list td.num{font-family:var(--mono);font-size:.86rem;color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums}

/* ---------- reader ---------- */

.reader-head h1{font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);max-width:52rem;line-height:1.2;font-weight:400}
/* ---------- Tab bar (programme PRD 13.2, redrawn for 13.5; docs/DESIGN.md "Tab bar"): one component for every bar of
   tabs or tab-like filters: the reader's Summary / Report / Dashboard, Reports' Daily / Weekly, the Resilience & Outlook
   sub-tabs, the world map's indicators, quick picks, CEPA's products and filters, the fuel years and the scorecard
   filters. The items stand on a rail (a 1 px rule under each item, so a bar that wraps keeps a rail under every line);
   labels are bold sans at 15 px; the current item is tinted, set in navy at a heavier weight and stands on a 3 px navy
   indicator (never colour alone); hover tints an item without the indicator; keyboard focus draws the ring inside the
   item (a scrolling bar would clip one outside it). The old sunk trough read as a phone's segmented control. ---------- */
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters){display:flex;flex-wrap:wrap;align-items:stretch;column-gap:0;row-gap:var(--sp-2);padding:0;background:none;border:0;border-radius:0}
.tabs{box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--rule-strong)}
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;margin:0;padding:var(--sp-2) var(--sp-4);border:0;border-radius:var(--r) var(--r) 0 0;background:transparent;box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--rule-strong);color:var(--ink-2);font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;line-height:var(--lh-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a):hover{background:color-mix(in srgb,var(--blue-soft) 60%,transparent);color:var(--ink);box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--ink-2)}
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a):focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a):is([aria-selected="true"],[aria-current="page"],[aria-pressed="true"]){background:var(--blue-soft);color:var(--navy);font-weight:700;box-shadow:inset 0 calc(-1 * var(--bw-accent)) 0 var(--navy)}
html[dir="rtl"] :is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a){font-family:var(--arabic)}
/* coordinating session, 23 Oct 2026: a tab label longer than a phone screen wraps instead of widening the page */
:is(.tabs,.pins,.world-chips,.cp-filters,.cp-prods,.sc-filters,.tl-filters,.dr-filters) > :is(button,a){max-width:100%;white-space:normal;text-align:center}
.frame{background:var(--paper);border:1px solid var(--rule);border-top:0;box-shadow:var(--shadow)}
.frame iframe{display:block;width:100%;height:78vh;min-height:32rem;border:0;background:#fff}
.frame.pdf iframe{height:86vh;background:#525659}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

.pdf-phone p{margin:.4rem 0 .8rem}

/* ---------- archive dates and update indicator ---------- */

.upd-log li+li{margin-top:.25rem}

/* ---------- countries ---------- */

.cmp-head h1{font-size:var(--fs-h1);font-weight:400}
.vs{color:var(--muted);font-weight:400}   /* the joining words of a title stay upright (programme PRD 13.5: one face, no italic for emphasis) */
.selector{position:relative;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-end;margin:0 0 .8rem}
.dd{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.dd-label,.pins .lab,.picker label,.fact span,.reading .tag,table.gl th{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}

.cchip i,.also i,.dotk{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;flex:none}

.cchip button{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;padding:0 .25rem;border-radius:2px}
.cchip button:hover{color:var(--ink);background:var(--raise)}

.dd-panel{position:absolute;z-index:40;top:100%;inset-inline-start:0;margin-top:.35rem;width:min(26rem,calc(100vw - 32px));background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-up);padding:.75rem;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@starting-style{.dd-panel{opacity:0;transform:translateY(-4px)}}

.dd-head b{font-family:var(--display);color:var(--navy);font-size:1.05rem;font-weight:500}

#dd-list li{padding:.55rem .6rem;min-height:40px;align-items:center;display:flex;justify-content:space-between;gap:1rem;cursor:pointer;border-radius:2px}
#dd-list li small{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
#dd-list li[aria-selected="true"],#dd-list li[data-iso]:hover{background:var(--blue-soft)}
#dd-list li.cur{font-weight:700;color:var(--navy)}

#dd-list li.none{cursor:default;color:var(--muted)}
.pins{margin:.2rem 0 1.3rem}
.pins .lab{align-self:center;margin-inline:var(--sp-2) .3rem}

.profile .sum h2{font-size:1.2rem;margin-bottom:.6rem}
.profile .sum ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:.5rem;color:var(--ink-2)}
.profile .facts{padding:1.4rem 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;align-content:start;background:var(--raise)}
.fact span{display:block}
.profile .facts.cmp{display:flex;flex-direction:column;gap:1.1rem}

table.gl.fact-t td{white-space:normal}
table.gl.fact-t td.v,table.gl.fact-t td.v .aed{white-space:nowrap}
table.gl.fact-t td.v b.num{font-family:var(--mono);font-weight:600;font-size:.95rem;color:var(--ink)}

.fact b{font-family:var(--display);font-size:1.1rem;font-weight:500;color:var(--ink);display:block;margin-top:.15rem}
.fact b.num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.reading .num,.sum .num,.lede .num{font-family:var(--sans);font-weight:700}
.fact .aed{text-transform:none;letter-spacing:0;font-weight:400}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.82rem;color:var(--ink-2);margin:1.2rem 0 .4rem;align-items:center}
.sw{display:inline-block;width:1.1rem;height:3px;vertical-align:middle;margin-inline-end:.35rem}
.sw.box{height:.7rem;width:.9rem;background:var(--proj);border:1px solid var(--rule)}
.glance{margin-top:1rem}
/* the comparison table keeps its column names in view under the masthead on a computer (design review D-21); below
   1000 px the table may need to scroll sideways, and on phones each row names its columns (tables.js) */
@media (min-width:1000px){
  #c-glance .tw{overflow:visible}
  #c-glance thead th{position:sticky;top:var(--head-stay,0px);z-index:var(--z-local);background:var(--paper)}
}
table.gl{width:100%;border-collapse:collapse;font-size:.9rem}
table.gl th{text-align:start;padding:.55rem .6rem;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
/* a fixed-layout table has set column widths, so a long heading must wrap inside its column instead of running over the
   next heading (the editor, 24 October 2026: overlapping headings on CEPA opportunities) */
table:is(.cpo-tbl,.ag3-log,.ag-tbl,.dos-mini,.rk-tbl,.cp-tbl,.cpo-bdt,.cpo-terms) th{white-space:normal;overflow-wrap:break-word;vertical-align:bottom}
/* a table with fixed column widths wraps its headings, so a long heading (Arabic especially) never runs into the next column */
.cpo-tbl th,.cp-tbl th,.rk-tbl th,.dos-mini th,table[style*="fixed"] th{white-space:normal;overflow-wrap:break-word;vertical-align:bottom}
table.gl th.v{text-align:end}
table.gl td{padding:.55rem .6rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.gl td.v{text-align:end;white-space:nowrap;font-family:var(--mono);font-size:.84rem;font-variant-numeric:tabular-nums lining-nums}
table.gl td.lbl a{color:var(--ink);text-decoration:none;font-weight:600}
table.gl td.lbl a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
table.gl .yr{font-family:var(--mono);color:var(--muted);font-size:var(--fs-label);font-variant-numeric:tabular-nums lining-nums}
.flag{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;padding:.14rem .45rem;border-radius:2px;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.flag.hi{background:var(--good-soft);color:var(--good)}
.flag.lo{background:var(--bad-soft);color:var(--bad)}

.group-h h2{font-size:1.3rem;font-weight:400}
.group-h span{color:var(--muted);font-size:.85rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:1rem}
.card{background:var(--paper);border:1px solid var(--rule);padding:1.1rem 1.2rem 1rem;display:flex;flex-direction:column;gap:.6rem;scroll-margin-top:5rem;transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--rule-strong);box-shadow:var(--shadow)}
.card h3{font-size:1.05rem;line-height:1.3;font-weight:500;color:var(--ink)}

/* the finding under a country card's title (docs/PRD-card-titles.md): a caption, after the indicator it describes */

.card .unit{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums lining-nums}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.val{border-top:2px solid var(--cty);padding-top:.35rem}
.val.u{border-top-color:var(--uae)}
.val b{display:block;font-size:1.35rem;font-weight:600;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.val span{font-size:.82rem;color:var(--muted)}
.aed{color:var(--muted);font-weight:400;font-size:max(12px,.86em);white-space:nowrap}
.val .aed,.kv .aed,.fact .aed,table.gl .aed{display:block;font-family:var(--mono);font-size:var(--fs-label);margin-top:.1rem;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--mono);font-size:12px;fill:var(--muted);font-variant-numeric:tabular-nums lining-nums}
/* one chart style across the platform (programme PRD 13.5, after the ONS and World Bank chart guides): text in the text
   face with tabular figures, 12 px, muted; gridlines light and dashed so they recede; the zero line solid and darker;
   no axis lines; lines 2 px; measured data solid, projections dashed */
.chart svg line[stroke="var(--rule)"],.chart svg .f-grid,.pulse-line svg .p-grid{stroke-dasharray:3 3}
.chart svg text{letter-spacing:0}
/* the parts every chart shares (programme PRD 13.3): the value axis's unit above it, names at the ends of lines (with a
   halo, so a line under them never cuts a letter), the caption under a chart's title, and a key beside the chart */
.chart text.ax-u{font-family:var(--sans);font-weight:600;fill:var(--ink-2)}
.chart text.end-l,.rk-ch svg .rk-nx{font-family:var(--sans);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}

.ch-key{margin:var(--sp-1) 0 var(--sp-2)}
.ch-key > span{display:inline-flex;align-items:center;gap:var(--sp-1)}
.ch-sw{width:1.75rem;height:.75rem;flex:none;overflow:visible}

html[dir="rtl"] .chart text.ax-u,html[dir="rtl"] .chart text.end-l{font-family:var(--arabic)}
.pos{font-size:.8rem;color:var(--ink-2)}
.strip{position:relative;height:1.6rem;margin:.2rem .4rem 0;direction:ltr}
.strip .track{position:absolute;left:0;right:0;top:.75rem;height:2px;background:var(--rule)}
.strip i{position:absolute;top:.5rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--faint);opacity:.35;transform:translateX(-50%)}
.strip em{position:absolute;top:.3rem;width:.95rem;height:.95rem;border-radius:50%;transform:translateX(-50%);border:2px solid var(--paper)}
.strip em.c{background:var(--cty)} .strip em.u{background:var(--uae)} .strip em.x{width:.8rem;height:.8rem;top:.38rem}
/* the strip's markers have the chart's shapes (13.3): the country a square, the UAE a circle, the others a triangle and a diamond */
.strip em.c{border-radius:2px} .strip em.x0{border-radius:0;border:0;clip-path:polygon(50% 0,100% 100%,0 100%)} .strip em.x1{border-radius:0;transform:translateX(-50%) rotate(45deg);width:.7rem;height:.7rem}
.strip .ends{position:absolute;top:1.15rem;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.also{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.84rem;color:var(--ink-2)}
.also span{display:inline-flex;align-items:center;gap:.35rem}
.reading{border-top:1px solid var(--rule-soft);padding-top:.6rem;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.reading p{margin:0 0 .45rem}
.reading .tag{display:block;margin-bottom:.3rem}
.reading .so{color:var(--ink);font-weight:600}
   /* a missing value, highlighted like .cp-nd and .nd (DESIGN.md step 7) */
.note{background:var(--warn-soft);border-top:var(--bw-accent) solid var(--warn);padding:.8rem 1rem;margin-top:1rem;font-size:.93rem}
.note b{color:var(--warn)}
.note.ok{background:var(--good-soft);color:var(--good);padding:.6rem .8rem;font-weight:600;border-top-color:var(--good)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule-strong);margin-top:3rem;padding-top:1.1rem;font-size:.86rem;line-height:1.6;color:var(--muted);display:grid;gap:.4rem;max-width:60rem}
.foot #data-stamp{font-family:var(--mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums lining-nums}

/* ---------- installed app ---------- */
.offline{background:var(--warn-soft);color:var(--warn);text-align:center;font-size:.88rem;font-weight:600;padding:.45rem 16px;border-bottom:1px solid var(--rule)}
@media (display-mode: standalone){
 .top{top:0;padding-top:env(safe-area-inset-top,0px)}
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 .top-in,.tape-in{padding-inline:max(16px,env(safe-area-inset-left,0px))}
}
.inst-hero{display:flex;gap:1.2rem;align-items:center;margin:.4rem 0 1.2rem}
.inst-hero img{border-radius:18px;box-shadow:var(--shadow);flex:none}
.inst-hero h1{font-size:var(--fs-h1);margin:0 0 .2rem;font-weight:400}
.inst-hero .lede{margin:0}
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1rem 0}
.panel.inst h2{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:1.1rem}
.panel.inst.mine{border-color:var(--navy);box-shadow:inset 0 3px 0 var(--navy)}
.steps{margin:.4rem 0 0;padding-inline-start:1.3rem;display:grid;gap:.35rem}

/* ---------- motion (programme PRD 13.5, after the animate skill's gate): data at rest. Pages, figures, charts and the
   map no longer rise, count up, draw themselves or fade in on scroll: a reader sees them tens of times a day and reads
   them, so they must be there at once. One authored moment stays: the masthead's brass double rule draws once per
   visit (html.first-visit, set by theme.js for the first page of a session). Overlays, drawers and the figure panel keep
   short entrances (spatial: where they came from); controls keep 150 ms colour feedback. Reduced motion binds. ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  html.first-visit .rule-brass::before{animation:draw .7s var(--ease-out) both}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .reveal,.card{opacity:1!important;transform:none!important}
  .btn,.grid-2 .panel,.nm-card,.linkrow .ico{transform:none!important}
  .user-menu .menu,.dd-panel{transition:none}
}

/* a headline in the other language keeps to the page's side, so it lines up with the rest of the column */
html[dir="ltr"] :is(h1,h2,h3)[dir="auto"]{text-align:left}
/* ---------- section 17.1: key figures drawn, each point labelled with the date it belongs to ---------- */
.kv:has(.has-viz){gap:1.05rem}

.kvi.has-viz > b{grid-column:2}

.kv-ico .ico{width:1.2rem;height:1.2rem}

.kz-track i{position:absolute;top:0;bottom:0;inset-inline-start:0;background:var(--rule-strong);border-radius:1px}
.kz-row.bad .kz-track i{background:var(--rust)}
.kz-row.good .kz-track i{background:var(--blue)}
.kz-row.neutral .kz-track i{background:var(--navy)}

.kz-step svg{display:block;width:100%;height:2.3rem;overflow:visible}

.kz-step .p1{stroke:var(--navy);stroke-width:9}
.kz-step.bad .kz-line,.kz-step.bad .p1{stroke:var(--rust)}
.kz-step.good .kz-line,.kz-step.good .p1{stroke:var(--blue)}

.kz-ends > span:not(.kz-chip){display:flex;flex-direction:column;line-height:1.2}
.kz-ends > span:last-child{text-align:end;align-items:flex-end}
.kz-ends small{font-family:var(--sans);font-size:.75rem;color:var(--muted)}
.kz-ends em{font-style:normal;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums}
.kz-chip{display:inline-flex;align-items:center;gap:.25rem;justify-self:center;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;padding:.14rem .45rem;border-radius:2px;background:var(--raise);color:var(--ink-2);border:1px solid var(--rule);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.kz-chip i{font-style:normal;font-size:.75rem}
.kz-chip.bad{background:var(--rust-soft);color:var(--bad);border-color:transparent}
.kz-chip.good{background:var(--blue-soft);color:var(--blue);border-color:transparent}

.kz-day em{display:block;width:100%;text-align:center;font-style:normal;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);background:var(--rule-soft);padding:.18rem 0;border-radius:1px;font-variant-numeric:tabular-nums lining-nums}
.kz-day.on em{background:var(--navy);color:var(--navy-ink);font-weight:600}
.kz-event.bad .kz-day.on em{background:var(--bad);color:var(--paper)}

.kz-pin .ico{width:1.05rem;height:1.05rem}

.kz-note{margin:0;font-size:.75rem;line-height:1.4;color:var(--muted);border-top:1px dashed var(--rule);padding-top:.55rem}
/* on wide screens the key figures, drawn or plain, run as a band across the foot of the plate, one column each (D-41) */
@media (min-width: 1001px){
  
  
  
  .lead:has(.lead-side .kv) .lead-side .kv{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));column-gap:1.4rem}
}
/* ---------- responsive ---------- */
@media (max-width: 1000px){
  
  
  .lead-side .kv{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  .lead-side .kv:has(.has-viz){grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));column-gap:1.4rem}
  
  .brand-alt{max-width:16rem}
}
@media (max-width: 860px){
     /* minmax: a wide table inside scrolls in its own box instead of widening the page */
  
  
  
  .cards{grid-template-columns:1fr}
  .frame iframe{height:70vh}
}
@media (max-width: 760px){
  .top{position:relative}
  /* the menu takes the whole row, with the account button at its end (the tools above no longer set the menu's width, PRD 21.4) */
  .head-grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "rule rule" "nav nav";padding-top:.8rem;column-gap:.75rem}
  .navbar{display:contents}
  .navbar .nav{grid-area:nav;padding-inline-end:4.1rem} .navbar .top-tools{grid-area:tools;align-self:start;padding-block:0;margin:0} .navbar .user-box{grid-area:nav;align-self:center;justify-self:end;position:relative;z-index:2}
  /* on the pages that get the search button (the portal and My account: utils.js) the tools' column keeps its final size
     from the first paint (utils.css: 9.5rem wide once the search button is in, two rows of 2.75rem buttons): the search
     and language buttons arrive a moment later, and the column used to grow then, narrowing the name to a third line and
     moving the logo and the brass rule (docs/PRD.md Section 48.3) */
  body:is(:not([data-page]),[data-page="account"]) .navbar .top-tools{min-width:9.5rem;min-height:calc(5.5rem + var(--sp-2))}
  .head-grid .brand{padding-bottom:.55rem}
  .brand-main b{font-size:.94rem;max-width:none;line-height:1.2}
  .brand-sub{font-size:.75rem;letter-spacing:.16em}
  .brand-alt{display:none}
  .nav{margin-inline-start:-.6rem;min-width:0;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  html[dir="rtl"] .nav{-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent)}
  .nav a,.nav .nav-parent{padding:.8rem .6rem .7rem;font-size:.75rem}
  .theme-switch,.lang-switch,.user-menu summary{height:2.75rem} .theme-switch{width:2.75rem}
  .btn,.world-read .wr-go{min-height:44px}
  body{font-size:16px}
  .user-menu .who{display:none}
  .user-menu summary{padding-inline:.15rem}
  
  
  
  
  
  
  .lead-meta .chip{white-space:normal}
  .tape-in{padding-inline:12px}
  .tape-h{padding-inline-end:.7rem}
  .tape-i{padding-inline:.75rem}
  
}
@media (max-width: 520px){
  .profile .facts{grid-template-columns:1fr 1fr}
  
  /* three columns must share a phone's width: tighter cells, values may wrap, the name column keeps room */
  table.gl td,table.gl th{padding:.5rem .45rem} table.gl th,table.gl td.v,table.gl .aed{white-space:normal} table.gl th.v,table.gl td.v{width:31%}
  .pins{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
  .pins button{flex:none}
   .dd{width:100%}
  .inst-hero{flex-direction:column;align-items:flex-start;gap:.7rem} .inst-hero img{width:60px;height:60px;border-radius:14px}
  
}
/* issue archive as cards on phones */
@media (max-width:640px){
 table.list.issues thead{display:none}
 table.list.issues,table.list.issues tbody{display:block}
 table.list.issues tr{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.3rem .7rem;padding:1rem .9rem;border-bottom:1px solid var(--rule-soft)}
 table.list.issues td{border:0;padding:0;grid-column:2}
 table.list.issues td.n{grid-column:1;grid-row:1/span 6;font-size:1.6rem}
 
 table.list.issues td.hl a{font-size:1.05rem}
 table.list.issues td.pub,table.list.issues td.wk{font-size:.75rem;color:var(--ink-2)}
 table.list.issues td.pub::before,table.list.issues td.wk::before{content:attr(data-l) " · ";color:var(--muted)}
 table.list.issues td.sc{font-size:.84rem}
 
}

/* ---------- alive: the world against the UAE ---------- */

.world-head h2{font-size:1.4rem;font-weight:400;margin-top:.1rem}
.world-panel.compact .world-head h2{font-size:1.1rem}

.world-box{position:relative;background:var(--sunk);border:1px solid var(--rule-soft);overflow:hidden}
.world-box svg{display:block;width:100%;height:auto}
.world{--up1:var(--w-up1);--up2:var(--w-up2);--up3:var(--w-up3);--dn1:var(--w-dn1);--dn2:var(--w-dn2);--dn3:var(--w-dn3);--none:var(--w-none);--sea:transparent;--border:var(--w-border)}

.world .w-land path:not([data-iso]){fill:var(--none);stroke:var(--border);stroke-width:.35}
.world [data-iso]{fill:var(--none);stroke:var(--border);stroke-width:.35;transition:fill .5s ease,opacity .3s}
.world [data-lvl="up1"]{fill:var(--up1)} .world [data-lvl="up2"]{fill:var(--up2)} .world [data-lvl="up3"]{fill:var(--up3)}
.world [data-lvl="down1"]{fill:var(--dn1)} .world [data-lvl="down2"]{fill:var(--dn2)} .world [data-lvl="down3"]{fill:var(--dn3)}
.world [data-lvl="uae"]{fill:var(--brass);stroke:var(--brass);stroke-width:1.2}

.world [data-iso]:hover{filter:brightness(.85);cursor:pointer}
.world [data-lvl="none"]:hover{cursor:default;filter:none}
/* no figure: paper with a strong outline, so it cannot be read as the palest "higher" shade (design review D-23) */
.world [data-lvl="none"],.world .w-land path:not([data-iso]){fill:var(--paper);stroke:var(--rule-strong);stroke-width:.6}
.world .sel{stroke:var(--ink);stroke-width:1.1;filter:none}

.world-tip b{font-weight:600}
.world-tip .gap{color:var(--faint);font-size:.82rem}

 
 

/* the map paints at rest; the UAE (and a chosen country) is marked by three slow pulses of its outline: explanation, so
   the eye finds a small country on a world map, then it stops */
@media (prefers-reduced-motion: no-preference){
  @keyframes beacon{0%,100%{stroke-width:1.2;stroke-opacity:1}50%{stroke-width:4;stroke-opacity:.35}}
  .world [data-lvl="uae"]{animation:beacon 2.4s ease-in-out .4s 3}
  .world .sel{animation:beacon 2.2s ease-in-out 3}
}

/* ---------- alive: live data (the pulse, the clock, each card's "Data as of"), not moving data ---------- */
@media print{ .reveal{opacity:1!important;transform:none!important} }
.tape-clock{display:block;font-weight:400;font-size:.75rem;letter-spacing:0;margin-top:.2rem;font-variant-numeric:tabular-nums}

/* theme change: the new theme spreads from the switch */
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;mix-blend-mode:normal}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:spread .45s var(--ease-out) both}
@media (prefers-reduced-motion: reduce){ ::view-transition-new(root){animation:none} }
@keyframes spread{from{clip-path:circle(0 at var(--tx,50%) var(--ty,0))}to{clip-path:circle(160% at var(--tx,50%) var(--ty,0))}}
@media (max-width:760px){
  
  
  .world-chips button{white-space:normal;justify-content:flex-start;text-align:start;padding:var(--sp-2) var(--sp-3)}
  .world-head h2{font-size:1.15rem}
  
}

/* ---------- map readout (tap or click a country) ---------- */

.world .pick{stroke:var(--ink);stroke-width:1.2}

/* tape items open the comparison at that indicator */
a.tape-i{text-decoration:none;color:inherit;transition:background .15s}
a.tape-i:hover{background:var(--raise)}
a.tape-i:hover .tape-l{color:var(--navy)}

.lead-empty h2{font-size:1.7rem;font-weight:400}

/* keyboard route to the map: a country list beside the indicator tabs (PRD section 16.3) */

.world-head>div:first-child{grid-column:1}

.world-find select{font:inherit;font-family:var(--sans);font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:var(--bw) solid var(--line-field);border-radius:var(--r);padding:.45rem .6rem;min-height:40px;max-width:16rem}

@media (max-width:760px){  .world-find span{display:none} .world-find select{max-width:none;flex:1;min-height:44px} }

/* ---------- section 17: the navy masthead with the Center's logo and a larger name ---------- */
:root{--head:#0f2a44;--head-ink:#ffffff;--head-muted:#b8c7d6;--head-brass:#dcc38a;--head-line:rgba(255,255,255,.22)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--head:#07111b;--head-ink:#eef2f6;--head-muted:#9fb0c0;--head-brass:#d4b77a;--head-line:rgba(255,255,255,.16)} }
:root[data-theme="dark"]{--head:#07111b;--head-ink:#eef2f6;--head-muted:#9fb0c0;--head-brass:#d4b77a;--head-line:rgba(255,255,255,.16)}
.top{background:linear-gradient(180deg,var(--head) 0%,color-mix(in srgb,var(--head) 88%,#000) 100%);border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.head-grid{padding-top:1.3rem}
.brand{display:flex;align-items:center;gap:1rem}
.brand-logo{width:3.6rem;height:3.6rem;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand-main b{font-size:clamp(1.45rem,2.3vw,2.05rem);font-weight:600;line-height:1.1;color:var(--head-ink);max-width:40rem;letter-spacing:-.01em}
.brand-sub{color:var(--head-brass);font-size:.75rem}
.brand-alt{color:var(--head-brass);font-size:1.25rem;line-height:1.6;max-width:26rem;margin-top:.35rem}
.brand-alt[lang="en"]{font-size:1.15rem;color:var(--head-brass)}
.brand-short{color:var(--head-ink);font-size:1.2rem}
.rule-brass::before{border-color:var(--head-brass)}
.nav a,.nav .nav-parent{color:var(--head-muted)}
.nav a:hover,.nav a[aria-current="page"],.nav .nav-parent:hover,.nav .nav-parent[aria-current="page"]{color:var(--head-ink)}
.nav a::after,.nav .nav-parent::after{background:var(--head-brass);height:3px}
.nav a .ico,.nav .nav-parent .ico{width:1.05rem;height:1.05rem;margin-inline-end:.45rem;opacity:.85;flex:none}
.theme-switch,.lang-switch{border-color:var(--head-line);color:var(--head-ink)}
.theme-switch:hover,.lang-switch:hover{border-color:var(--head-brass);background:rgba(255,255,255,.08)}
.user-menu summary{color:var(--head-ink)}
.user-menu summary:hover,.user-menu[open] summary{border-color:var(--head-line);background:rgba(255,255,255,.08)}
.user-menu .avatar{background:var(--head-brass);color:#0f2a44}
.user-menu summary .ico{color:var(--head-muted)}
@media (max-width: 760px){
  .brand-sub{display:none}   /* the first screen is for content, not the masthead (design review D-42) */
  .head-grid{padding-top:.9rem}
  .brand{gap:.7rem}
  .brand-logo{width:2.9rem;height:2.9rem}
  .brand-main b{font-size:1.08rem;line-height:1.2}
  /* four tabs, each an icon over its name, so every section is visible without scrolling */
  .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-inline-start:-.35rem;overflow:visible;-webkit-mask-image:none;mask-image:none}
  html[dir="rtl"] .nav{-webkit-mask-image:none;mask-image:none}
    /* the four names share the row with the account button, so they are set in the narrower sans (mono capitals would not fit) */
  .nav a,.nav .nav-parent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.55rem .1rem .65rem;font-family:var(--sans);font-weight:600;font-size:.75rem;letter-spacing:0;line-height:1.2;white-space:normal;text-align:center}
  .nav a .ico,.nav .nav-parent .ico{display:block;width:1.2rem;height:1.2rem;margin:0}
  .nav a:only-child{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;white-space:nowrap;padding-inline:.75rem}   /* a page with one link (My account, Users): the whole row, one line, from the start edge (D-28) */
  .nav a::after,.nav .nav-parent::after{inset-inline:.8rem}
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .tabs button,.tabs a{padding:var(--sp-2) var(--sp-1);white-space:normal;text-align:center}
}

/* ---------- section 17: icons, the home decision dashboard and the visual guide ---------- */

.ey-ico .ico{width:1.05rem;height:1.05rem;color:var(--brass);flex:none}

.hd-title h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:.1rem 0 .3rem}
.hd-title .lede{margin:0;font-size:.98rem}

/* one linked line: how many of the dashboard's recommendations are due now (design review D-19) */

a.hd-stat.hd-due > .ico{width:1.25rem;height:1.25rem;flex:none;color:var(--brass)}
a.hd-stat.hd-due b{font-size:var(--fs-title);line-height:var(--lh-head)}
a.hd-stat.hd-due:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

.hd-k .ico{width:1rem;height:1rem;color:var(--brass)}
.hd-stat b{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--navy);line-height:1.15}
.hd-stat b.hi{color:var(--rust)}
.hd-stat small{font-size:.8rem;color:var(--muted)}

.hd .status{padding-inline:1.4rem}

.hd-frame iframe{display:block;width:100%;height:60rem;border:0;background:transparent}
.hd-frame.pdf iframe{height:80vh}
.guide{margin-top:1.8rem}

.guide-steps li{position:relative;background:var(--paper);border:1px solid var(--rule);padding:1.1rem 1.1rem 1rem;display:flex;flex-direction:column;gap:.35rem;counter-increment:g}
.guide-steps li::before{content:counter(g);position:absolute;inset-inline-end:.9rem;top:.7rem;font-family:var(--display);font-size:1.7rem;color:var(--rule-strong);line-height:1}
.guide-steps li:not(:last-child)::after{content:"";position:absolute;top:2.2rem;inset-inline-end:-1rem;width:1rem;height:2px;background:var(--brass)}

.g-ico .ico{width:1.45rem;height:1.45rem}
.guide-steps b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--navy)}
.guide-steps p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.5}

.guide-steps.six li:nth-child(3)::after{display:none}
.guide-steps li > a{display:flex;flex-direction:column;gap:.35rem;color:inherit;text-decoration:none;height:100%}
.guide-steps li:has(> a:hover){border-color:var(--navy);box-shadow:var(--shadow)}
.guide-steps li > a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* programme PRD 13.5: "How the portal works" is a directory, not six boxed cards with step numbers (the parts are not a
   sequence): each part is a row with a small icon, its name and one line, separated by space and a hairline. The About
   page's flow (.about-flow) is a real sequence and keeps its numbers. */
#guide-h,.guide > .eyebrow{font-family:var(--display);font-size:var(--fs-h3);font-weight:500;color:var(--navy);margin:0 0 var(--sp-2)}

.guide-steps:not(.about-flow) li{background:none;border:0;border-top:var(--bw) solid var(--rule);padding:var(--sp-4) 0 var(--sp-5);box-shadow:none}
.guide-steps:not(.about-flow) li::before,.guide-steps:not(.about-flow) li::after{display:none}
.guide-steps:not(.about-flow) li > a{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--sp-3);align-content:start}

.guide-steps:not(.about-flow) .g-ico .ico{width:1.25rem;height:1.25rem}
.guide-steps:not(.about-flow) li:has(> a:hover){box-shadow:none;border-color:var(--navy)}
.guide-steps:not(.about-flow) li > a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
html[dir="rtl"] #guide-h,html[dir="rtl"] .guide > .eyebrow{font-family:var(--display);font-size:var(--fs-h3);line-height:var(--lh-ar-head)}
.nav-short{display:none}
@media (max-width: 900px){  .guide-steps li::after{display:none} }

/* ---------- section 18.1: UAE in global rankings (a view inside Countries) ---------- */

.rk-head h1{font-size:var(--fs-h1);font-weight:400}

.rk-chip b{font-family:var(--mono);font-size:1.55rem;font-weight:600;line-height:1.1;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}

  
 

.rk-ye > div{padding:1.2rem 1.35rem}
.rk-ye > div + div{border-inline-start:1px solid var(--rule-soft)}
.rk-ye h2{font-size:1.25rem;font-weight:400;margin-bottom:.5rem}
.rk-ye h3{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin-bottom:.55rem;font-variant-numeric:tabular-nums lining-nums}
.rk-ye p{color:var(--ink-2);font-size:.95rem;line-height:1.6;margin:0}
.rk-ye ul{margin:0 0 .6rem;padding:0;list-style:none;display:grid;gap:.45rem;font-size:.93rem}
.rk-ye li{line-height:1.5}
.rk-ye a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.rk-ye a:hover{border-bottom-color:var(--navy)}
.rk-ye .src{margin-top:.4rem}
.rk-cards{grid-template-columns:repeat(auto-fill,minmax(31rem,1fr));gap:1.1rem}
.rk-card{gap:.75rem;padding:1.2rem 1.3rem 1.1rem}

.rk-card h3{font-family:var(--display);font-size:1.28rem;font-weight:500;line-height:1.25}

.rk-big b{font-family:var(--mono);font-size:2rem;font-weight:600;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.rk-big span{font-size:.78rem;color:var(--muted);margin-top:.25rem;max-width:12rem}

.rk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1rem 1.6rem;border-top:1px solid var(--rule-soft);padding-top:.8rem}
.rk-grid:empty{display:none}
.rk-card h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0 0 .45rem;font-variant-numeric:tabular-nums lining-nums}

.rk-peers ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.86rem}
.rk-peers li{display:flex;gap:.55rem;align-items:baseline;padding:.12rem .3rem;border-radius:2px}
.rk-peers li.u{background:var(--blue-soft);color:var(--navy);font-weight:700}

.rk-sub ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.9rem}

.rk-pl-h b{font-family:var(--mono);font-weight:600;font-size:1.05rem;color:var(--navy);flex:none;font-variant-numeric:tabular-nums lining-nums}
/* position among all economies: first place at the start of the bar, last place at the end */

.rk-pl-bar i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--navy);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--navy);transform:translate(-50%,-50%)}
/* last edition's place: a hollow ring joined to this edition's dot by a line in the colour of the move */
.rk-pl-bar em{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--faint);transform:translate(-50%,-50%)}
.rk-pl-bar s{position:absolute;top:50%;height:3px;transform:translateY(-50%);background:var(--faint);text-decoration:none}
.rk-pl-bar s.up{background:var(--good)} .rk-pl-bar s.down{background:var(--bad)}

.rk-pl.weak .rk-pl-h b{color:var(--bad)} .rk-pl.weak .rk-pl-bar i{background:var(--bad);box-shadow:0 0 0 1px var(--bad)}
/* index parts: a pair of bars per part, the UAE above the tenth-placed economy, higher is better */
 
 

.rk-cb i{display:block;height:9px;border-radius:2px;background:var(--rule);min-width:2px}
.rk-cb.uae i{background:var(--uae)} .rk-cb.ref i{background:var(--cty)}
.rk-cb span{white-space:nowrap} .rk-cb b{font-family:var(--mono);font-weight:600;color:var(--ink);margin-inline-start:.25rem;font-variant-numeric:tabular-nums lining-nums}

.rk-out h4{color:var(--navy)}
.rk-out p{margin:.2rem 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}

.rk-meta span{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-bottom:.15rem;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.rk-meta b{font-weight:600;color:var(--ink);line-height:1.45}
.rk-meta b .flag{font-style:normal;margin-inline-start:.3rem}
.rk-meta small{display:block;color:var(--muted);margin-top:.2rem;line-height:1.45}
.rk-src summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--blue);min-height:32px;display:flex;align-items:center}
.rk-src ul{margin:.3rem 0 .4rem;padding-inline-start:1.1rem;columns:2;column-gap:1.4rem;font-size:.82rem}
.rk-src a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;word-break:break-word}

#rk-gaps .lede{margin-bottom:1rem}
.rk-gap td{font-size:.9rem;line-height:1.5}
.rk-method{margin-top:2rem;background:var(--paper);border:1px solid var(--rule);border-top:var(--bw-accent) solid var(--brass);padding:1.2rem 1.4rem;max-width:60rem}
.rk-method h2{font-size:1.15rem;font-weight:400;margin-bottom:.4rem}
.rk-method p{color:var(--ink-2);font-size:.94rem;line-height:1.65;margin:.4rem 0 0}
@media (max-width: 1000px){  .rk-ye > div + div{border-inline-start:0;border-top:1px solid var(--rule-soft)} }
@media (max-width: 760px){
  .rk-cards{grid-template-columns:1fr}
  
  
  
  .rk-grid{grid-template-columns:1fr}
  
  .rk-chip b{font-size:1.35rem}
  .rk-big b{font-size:1.65rem}
  .rk-src ul{columns:1}
  
}

/* ---------- Countries sub-menu in the main menu (PRD 19.1) ---------- */
.nav .nav-parent{background:none;border:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0}
.nav .nav-parent .lbl{display:inline-flex;align-items:center;gap:.3rem}
.nav .nav-parent .caret{width:.75rem;height:.75rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.nav .nav-parent[aria-expanded="true"]{color:var(--head-ink)}
.nav .nav-parent[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:46rem;max-width:calc(100vw - 32px);margin:0;padding:.6rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-top:3px solid var(--head-brass,var(--brass));border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow-up);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@starting-style{.nav-menu{opacity:0;transform:translateY(-4px)}}
.nav-menu[hidden]{display:none}
.nm-card{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem .9rem;border:1px solid var(--rule-soft);border-radius:var(--r);background:var(--paper);color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.nm-card:hover,.nm-card:focus-visible{background:var(--raise);border-color:var(--rule-strong)}

.nm-card[aria-current="page"]{border-color:var(--brass);background:var(--raise);box-shadow:inset 3px 0 0 var(--brass)}
html[dir="rtl"] .nm-card[aria-current="page"]{box-shadow:inset -3px 0 0 var(--brass)}
.nm-art{flex:none;width:4.5rem;height:3.25rem;padding:.3rem .35rem;border-radius:var(--r);background:var(--blue-soft);display:block}
.nm-art svg{width:100%;height:100%;display:block;overflow:visible}
.nm-art .grid{stroke:var(--rule-strong);stroke-width:.8;fill:none;opacity:.7}
.nm-art .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nm-art .uae,.nm-art .dot.uae{stroke:var(--uae)} .nm-art .dot.uae{fill:var(--uae)}
.nm-art .cty,.nm-art .dot.cty{stroke:var(--cty)} .nm-art .dot.cty{fill:var(--cty)}
.nm-art .bar{fill:var(--rule-strong)} .nm-art .bar.top{fill:var(--navy)} .nm-art .star{fill:var(--brass)}
.nm-rk{background:var(--brass-soft)}
/* the menu cards no longer draw or pop on hover (seen tens of times a day; the hover colour is the feedback) */
@keyframes nmdraw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
@keyframes nmpop{0%{transform:scale(.6);transform-origin:36px 8px}60%{transform:scale(1.2);transform-origin:36px 8px}100%{transform:scale(1);transform-origin:36px 8px}}
.nm-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.nm-t{font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--navy)}
.nm-p{font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.nm-m{margin-top:.15rem;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums lining-nums}
.nm-m:empty{display:none}
.nav-menu.full{left:0!important;right:0!important;width:auto;max-width:none;grid-template-columns:1fr;gap:.35rem;padding:.5rem 16px .7rem;border-inline:0;border-radius:0}
.nav-menu.full .nm-card{padding:.7rem .75rem}
@keyframes navmenu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.nav-menu,.nm-card,.nm-art *{animation:none!important;transition:none}}
@media (max-width: 760px){
  /* the caret sits inline after the label, not floating at the top corner (design review D-26) */
  .nav .nav-parent .lbl{display:inline-flex;align-items:center;gap:.15rem}
  .nav .nav-parent .caret{position:static;width:.65rem;height:.65rem;opacity:.9}
}
/* rankings: pillar and parts tables */
.rk-tbl{font-size:.88rem;margin-top:.2rem}
.rk-tbl th{font-size:.75rem;white-space:normal;line-height:1.3}
.rk-tbl td,.rk-tbl th{padding:.45rem .4rem;vertical-align:middle}

.rk-tbl td:last-child,.rk-tbl th:last-child{padding-inline-end:.2rem}
.rk-tbl td:first-child{padding-inline-start:0} .rk-tbl th:first-child{padding-inline-start:0}
.rk-tbl td.v{white-space:nowrap;font-family:var(--mono);font-size:.88rem;font-variant-numeric:tabular-nums lining-nums}
.rk-tbl td.v b{font-weight:600;color:var(--navy)}
.rk-tbl tr.weak td.v:first-of-type b{color:var(--bad)}

@media (max-width: 520px){.rk-tbl{table-layout:fixed;width:100%} .rk-tbl .rk-mv .w{display:none} .rk-tbl td,.rk-tbl th{padding:.45rem .25rem} .rk-tbl th{letter-spacing:0} .rk-tbl th:first-child{width:40%} .rk-sub.wide .rk-tbl th:first-child{width:34%} .rk-sub.wide .rk-tbl th:nth-child(2){width:18%} .rk-sub.wide .rk-tbl th:nth-child(3){width:22%} .rk-tbl td.v{white-space:normal}}

/* ---------- CEPA (PRD section 20) ---------- */

.cp-head h1{font-size:var(--fs-h1);margin-bottom:.5rem;font-weight:400}
.cp-head .lede{max-width:64rem}

.cp-chip b{font-size:1.45rem}

   /* a missing figure, highlighted (PRD 21.3) */

.cp-col summary{list-style:none;cursor:default;display:grid;gap:.15rem}
.cp-col summary::-webkit-details-marker{display:none}

.cp-col:not([open]) summary h3{margin:0}
  
.cp-col h3{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0 0 .3rem;display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;font-variant-numeric:tabular-nums lining-nums}
.cp-col h3 .num{color:var(--navy);font-size:.95rem;letter-spacing:0}

.cp-tile b{font-weight:600;font-size:.92rem;line-height:1.3}
.cp-tile span{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

/* PRD 35: the members of a group agreement, under its name (table row, agreement panel) */

.cp-mem a,.cp-mem-own a,.cp-mem-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cp-mem-all summary{cursor:pointer;list-style-position:inside}
.cp-mem-all summary::-webkit-details-marker{margin-inline-end:.25rem}

.cp-mem-all p{margin:.3rem 0 0}

.cp-filters{margin:0 0 .8rem}
.cp-filters input{margin-inline-start:auto;min-width:14rem;padding:.45rem .7rem;border:var(--bw) solid var(--line-field);background:var(--paper);color:var(--ink);font:inherit;font-size:.9rem;min-height:36px}
.cp-tbl{font-size:.86rem}
.cp-tbl td{vertical-align:top}
.cp-tbl{table-layout:fixed;width:100%}
     .cp-tbl .c-trade{width:10%} .cp-tbl .c-since{width:9%}  
table.gl.cp-tbl th{white-space:normal;line-height:1.3;vertical-align:bottom;letter-spacing:0}
table.gl.cp-tbl td.v{white-space:normal}

.cp-tbl th,.cp-tbl td{padding:.5rem .45rem;overflow-wrap:anywhere}
.cp-tbl td.v b{white-space:nowrap}
.cp-tbl td.lbl a{overflow-wrap:normal}
.cp-tbl td.yr{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-2);white-space:normal;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}

.cp-pick-l span{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.cp-pick-l select{width:100%;padding:.55rem .7rem;border:var(--bw) solid var(--line-field);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;min-height:44px;border-radius:var(--r)}

.cp-covers li{font-size:.82rem;line-height:1.35;padding:.25rem .55rem;background:var(--raise);border:1px solid var(--rule-soft);border-radius:2px;color:var(--ink-2)}

.cp-figs b{font-family:var(--mono);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

.cp-fcsc span{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-bottom:.15rem;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.cp-fcsc b{font-family:var(--mono);font-size:1.05rem;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

.cp-mentions a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.cp-mentions a:hover{border-bottom-color:var(--navy)}
.cp-mentions .yr{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}

.cp-fpanel,.cp-fhead > div,.cp-fgrid > div,.cp-ftot > div{min-width:0}

.cp-fhead h3{font-family:var(--display);font-size:1.28rem;font-weight:500;line-height:1.25;margin:0 0 .2rem}

.cp-why a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong)}

.cp-ftot span{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-bottom:.15rem;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.cp-ftot b{font-family:var(--mono);font-size:1.25rem;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

.cp-fgrid h4,.cp-card h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0 0 .45rem;font-variant-numeric:tabular-nums lining-nums}

.cp-ftbl td.v b{white-space:nowrap}

.cp-fgroup h5{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink);margin:0 0 .4rem;line-height:1.4}

.cp-fgrid .rk-peers li{justify-content:space-between} .cp-fgrid .rk-peers li span:nth-child(2){flex:1;text-align:start}

.cp-method{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.cp-method h2{font-size:1.15rem;font-weight:400;margin-bottom:.4rem}
.cp-method p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0 0 .5rem;max-width:64rem}

@media (max-width: 760px){
  
  
  .cp-filters input{margin-inline-start:0;width:100%}
  .cp-tbl,.cp-tbl tbody,.cp-tbl tr,.cp-tbl td{display:block;width:auto}
  
  table.gl.cp-tbl td.v{width:auto;font-family:var(--sans);font-size:.9rem}   /* the coverage, sectors and signed date stay in the details panel on a phone */
  .cp-tbl thead,.cp-tbl colgroup{display:none}
  .cp-tbl tr{padding:.7rem .85rem .6rem;border-bottom:1px solid var(--rule)}
  .cp-tbl tr[hidden]{display:none}
  table.gl.cp-tbl td{border:0;padding:.15rem 0;display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:.4rem;align-items:baseline;text-align:start}
  
  
  table.gl.cp-tbl td::before{content:attr(data-l);font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
  table.gl.cp-tbl td.lbl{display:block;padding-bottom:.3rem;font-size:1rem}
  table.gl.cp-tbl td.lbl::before{content:none}
  
  
  
  .cp-col summary{cursor:pointer}
  .cp-col summary h3::after{content:'+';font-size:1rem;color:var(--navy);margin-inline-start:.4rem}
  .cp-col[open] summary h3::after{content:'−'}
  
  
  .cp-chip b{font-size:1.3rem}
  .nav{grid-template-columns:repeat(6,minmax(0,1fr))}   /* six sections since the Fuel tab (PRD 22.1); short names on phones */
  .nav a,.nav .nav-parent{padding:.55rem 0 .65rem;letter-spacing:0}
  .nav-long{display:none} .nav-short{display:inline}   /* "Special" on phones: "Special reports" alone wrapped to two lines (PRD 21.4) */
  .nav a,.nav .nav-parent{text-transform:none;font-size:.78rem}   /* mixed case: five names must share a phone's width without touching */
  .nav .nav-parent .lbl{gap:.1rem}
}
/* CEPA: terms, what the UAE buys and sells, the Center's reading (PRD 20.7) */

.cp-bs h5{font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);margin:0 0 .3rem;line-height:1.4}
.cp-bs ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;font-size:.86rem}
.cp-bs li{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;padding:.15rem 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.cp-bs li b{font-family:var(--mono);color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

.cp-read h4{color:var(--gold-ink)!important}
.cp-read p{font-size:.92rem;line-height:1.65;color:var(--ink)}
.cp-read a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong)}

/* CEPA finder: status tabs (PRD 20.2) */

.cp-stab b{grid-area:n;font-family:var(--mono);font-size:1.25rem;font-weight:600;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums lining-nums}

/* the CEPA stage tabs are cards, with the tab bar's current state (13.2): paper, the navy 3 px indicator, a heavier name */

/* ---------- Fuel prices (PRD section 22) ---------- */
#v-fuel section,.fl-tbl tr,.fl-ev,#v-cepa section{scroll-margin-top:7.5rem}   /* an address that opens a month, an event or a section lands below the sticky header */
   /* four grades and Brent: five columns, no empty sixth cell */

.fl-chip b{font-size:1.35rem;display:block;white-space:nowrap}

.fl-why p,.fl-read p{font-size:.95rem;line-height:1.65}
.fl-h3{font-family:var(--display);font-size:1.15rem;font-weight:500;margin:1.4rem 0 .4rem;color:var(--navy)}

.fl-ro b{color:var(--navy)}

.fl-hh td.v b{white-space:nowrap}

 

.fl-ev-k .yr{letter-spacing:0;text-transform:none}
.fl-ev h4{font-family:var(--display);font-size:1.05rem;font-weight:500;margin:0;line-height:1.3;color:var(--navy);letter-spacing:0;text-transform:none}
.fl-ev p{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin:0}

@media (max-width: 760px){
     /* D-04 */
  
  
  
  .cp-col summary,.cp-tile,.ed a.chip,.cp-filters input,.rk-src summary{min-height:44px}   /* D-32: comfortable tap targets */
  
  .ed a.chip{display:inline-flex;align-items:center}
  .fl-chip b{font-size:1.12rem;white-space:nowrap}
  
  
}

/* ---------- section 24: the explainer — Help tab and the pop-up at sign-in ---------- */
.user-menu .menu a.menu-help{display:none}
.help-h{font-family:var(--display);font-weight:500;font-size:var(--fs-h1);color:var(--navy);margin:.2rem 0 .5rem;line-height:1.15}
.help-video{max-width:1100px;aspect-ratio:16/9;background:#0d141b;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-up);margin:1.2rem 0 1.8rem;border-top:3px solid var(--brass)}
.help-video video,.intro-video video{display:block;width:100%;height:100%;background:#0d141b}
#help-guide .guide{margin-top:0}

.intro{position:fixed;inset:0;z-index:1000;background:rgba(9,14,20,.74);display:grid;place-items:center;padding:16px;animation:introIn .25s ease}
.intro[hidden]{display:none}
@keyframes introIn{from{opacity:0}to{opacity:1}}
.intro-card{width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:6px;border-top:3px solid var(--brass);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.intro-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.25rem .8rem}
.intro-head .eyebrow{margin:0 0 .25rem}
.intro-head h2{font-family:var(--display);font-weight:500;font-size:1.6rem;line-height:1.2;color:var(--navy);margin:0}
.intro-x{flex:none;width:2.75rem;height:2.75rem;border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s}
.intro-x svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.intro-x:hover{border-color:var(--navy);background:var(--raise)}
.intro-video{aspect-ratio:16/9;background:#0d141b}
.intro-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;padding:.9rem 1.25rem 1.1rem}
.intro-foot p{margin:0;color:var(--muted);font-size:.9rem}
.intro-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.intro-btns .btn{cursor:pointer}
@media (max-width: 760px){
  .nav .nav-help{display:none}
  .user-menu .menu a.menu-help{display:block}
  .intro{padding:8px}
  .intro-head{padding:.8rem .9rem .6rem}
  .intro-head h2{font-size:1.3rem}
  .intro-foot{padding:.8rem .9rem 1rem}
  .intro-btns{width:100%}
  .intro-btns .btn{flex:1;justify-content:center}
}

/* ---------- section 25.1: the explainer's chapters, the replay mode and the side tab ---------- */
.intro-lede{margin:.35rem 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.5;max-width:46rem}
.intro[data-mode="replay"] #intro-never{display:none}
.xp-chapters{margin:-.6rem 0 1.6rem;max-width:1100px}
.intro .xp-chapters{margin:0;padding:.85rem 1.25rem 0}
.xp-ch-h{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin:0 0 .45rem;font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.xp-ch-list{display:flex;flex-wrap:wrap;gap:.4rem}
.xp-ch{display:inline-flex;align-items:baseline;gap:.45rem;min-height:40px;padding:.45rem .8rem;border:1px solid var(--rule-strong);border-radius:999px;background:var(--paper);color:var(--ink);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.xp-ch:hover{border-color:var(--navy);background:var(--raise)}
.xp-ch-t{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.xp-more{margin:.6rem 0 0;font-size:.9rem}
.xp-tr{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.xp-tr:hover{border-bottom-color:var(--navy)}
.xp-note{margin:.35rem 0 0;font-size:.86rem;color:var(--muted)}
.xp-tab{position:fixed;inset-inline-end:0;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:3.6rem;padding:.75rem .5rem .7rem;border:1px solid var(--head-line);border-inline-end:0;border-start-start-radius:10px;border-end-start-radius:10px;background:var(--head);color:var(--head-ink);box-shadow:0 6px 18px -6px rgba(0,0,0,.45);cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;transition:background .15s,transform var(--dur-fast) var(--ease-out);font-variant-numeric:tabular-nums lining-nums}
.xp-tab svg{width:1.45rem;height:1.45rem;fill:none;stroke:var(--head-ink);stroke-width:1.5}
.xp-tab svg path{fill:var(--head-brass);stroke:none}
.xp-tab-l{display:flex;flex-direction:column;align-items:center;gap:.1rem;line-height:1.2}
.xp-tab small{font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--head-muted)}
.xp-tab:hover{background:color-mix(in srgb,var(--head) 82%,#fff)}
html[lang="ar"] .xp-tab{font-family:var(--arabic);letter-spacing:0;text-transform:none}
/* tab bars in Arabic: tracking breaks the joined letters (seen on the Resilience & Outlook sub-tabs) */
html[lang="ar"] .tabs button,html[lang="ar"] .tabs a{font-family:var(--arabic)}
@media (max-width: 760px){
  .xp-tab{top:auto;bottom:calc(6rem + env(safe-area-inset-bottom,0px));transform:none;min-width:2.75rem;padding:.7rem .6rem}
  .xp-tab .xp-tab-l{display:none}
  .xp-chapters{margin-top:-.8rem}
  .intro .xp-chapters{padding:.75rem .9rem 0}
  .xp-ch{font-size:.86rem;padding:.4rem .65rem}
}
@media print{ .xp-tab,.intro{display:none!important} }

/* ---------- section 25.3: fuel prices — the year, month by month ---------- */
.fl-years{margin:.2rem 0 .4rem}

.fl-yc h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0;font-variant-numeric:tabular-nums lining-nums}

.fl-yc-now b{font-size:1.35rem;color:var(--navy);white-space:nowrap}

.fl-yc-dl div{display:grid;gap:.1rem;padding-top:.4rem;border-top:1px solid var(--rule-soft)}
.fl-yc-dl dt{font-size:.78rem;color:var(--muted);line-height:1.35}
.fl-yc-dl dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink)}

.fl-yc-dl dd b{color:var(--navy)}

     
.fl-yy td.lbl a{font-weight:600}

/* ---------- section 25.4: CEPA — the total, the counts on the filters, the share of trade covered ---------- */
/* the strip: the total leads, two rows high, with the six other figures in three columns beside it */
@media (min-width: 761px){
  
  
  
  .rk-strip.cp-strip .rk-chip:first-child b{font-size:2.4rem}
  
  
  
}

  

.cp-covi b{font-size:1.3rem;color:var(--navy)}
.cp-covi > span:last-child{font-size:.8rem;color:var(--ink-2);line-height:1.4}

.cp-covi.all > span:first-child{font-size:.8rem;font-weight:600;color:var(--ink)}

/* ---------- section 25.2: the masthead on scroll. The name row scrolls away with the page (the masthead sticks at
   minus its height, measured by theme.js into --head-collapse), the menu row stays and the short name fades in at its
   start. Only opacity and width change, never the masthead's height, so the page never jumps and nothing flickers. */
@media (min-width: 761px){
  .top{top:calc(env(safe-area-inset-top,0px) - var(--head-collapse,0px))}
  .brand-mini{display:inline-flex;align-items:center;gap:.55rem;flex:none;max-width:0;overflow:hidden;opacity:0;visibility:hidden;white-space:nowrap;text-decoration:none;color:var(--head-ink);font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.14em;transition:max-width .25s ease,opacity .2s ease,margin .25s ease,visibility 0s linear .25s}
  .brand-mini img{width:2rem;height:2rem;flex:none}
  .top.compact .brand-mini{max-width:12rem;opacity:1;visibility:visible;margin-inline-end:.9rem;transition:max-width .25s ease,opacity .2s ease .05s,margin .25s ease,visibility 0s}
  .top.compact .navbar .nav{margin-inline-start:0}
  /* once scrolled, the menu's items close up a little to make room for the short name (width only, PRD 27.2) */
  .nav a,.nav .nav-parent{transition:color .15s,padding .25s ease}
  .top.compact:not(.nav-compact) .nav a,.top.compact:not(.nav-compact) .nav .nav-parent{padding-inline:.55rem}
  .top.compact:not(.nav-compact) .nav a::after,.top.compact:not(.nav-compact) .nav .nav-parent::after{inset-inline:.55rem}
  .top.nav-tight .nav a,.top.nav-tight .nav .nav-parent{padding-inline:.55rem;transition:none}   /* theme.js measures with this */
}
@media (min-width: 761px) and (display-mode: standalone){
  .top{top:calc(0px - var(--head-collapse,0px))}
}
@media (prefers-reduced-motion: reduce){ .brand-mini,.top.compact .brand-mini{transition:none} }
/* between 761 and 999 px the squeezed menu keeps Help in the account menu, as before design review D-27 */
@media (min-width: 761px) and (max-width: 999px){
  .top.nav-compact .nav .nav-help{display:none}
  .top.nav-compact .user-menu .menu a.menu-help{display:block}
}

/* ---------- section 27.2: the menu when it does not fit its row on a screen wider than a phone (iPads upright, narrow
   windows). theme.js sets .nav-compact on the masthead only when the full menu, with room for the short name that fades
   in on scroll, is wider than its row. The menu then takes the phone's tabs: an icon over a short name, the tabs sharing
   the row equally, Help in the account menu. The rest of the masthead is unchanged. */
@media (min-width: 761px){
  .top.nav-compact .navbar .nav{flex:1 1 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin-inline-start:-.35rem;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .top.nav-compact .nav a,.top.nav-compact .nav .nav-parent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.55rem .1rem .65rem;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:0;text-transform:none;line-height:1.2;white-space:normal;text-align:center}
  .top.nav-compact .nav a .ico,.top.nav-compact .nav .nav-parent .ico{display:block;width:1.2rem;height:1.2rem;margin:0}
  .top.nav-compact .nav a::after,.top.nav-compact .nav .nav-parent::after{inset-inline:.8rem}
  .top.nav-compact .nav .nav-parent .lbl{display:inline-flex;align-items:center;gap:.15rem}
  .top.nav-compact .nav .nav-parent .caret{position:static;width:.65rem;height:.65rem;opacity:.9}
  .top.nav-compact .nav-long{display:none} .top.nav-compact .nav-short{display:inline}
  .top.nav-compact.compact .navbar .nav{margin-inline-start:0}
}

/* ---------- section 28: section shortcuts on long pages (app.js fills #toc and decides its form) ---------- */
.toc[hidden],.toc-tab[hidden]{display:none!important}
.toc{position:fixed;z-index:880}
.toc.drawer,.toc.sheet{z-index:960}   /* above the two edge tabs while open */
.toc .toc-h{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:0 0 .55rem;padding-inline-start:.75rem;font-variant-numeric:tabular-nums lining-nums}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.toc button{display:flex;align-items:baseline;gap:.55rem;width:100%;min-height:36px;text-align:start;background:none;border:0;border-inline-start:2px solid var(--rule);border-radius:0;padding:.42rem .65rem;color:var(--ink-2,var(--muted));font:inherit;font-size:.86rem;line-height:1.35;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.toc button:hover{color:var(--ink);border-inline-start-color:var(--rule-strong);background:var(--raise)}
.toc button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.toc button[aria-current]{color:var(--navy);font-weight:700;border-inline-start-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,transparent)}
.toc .toc-n{flex:none;min-width:1.1rem;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.toc button[aria-current] .toc-n{color:var(--brass)}
.toc li.l2 button{padding-inline-start:2.35rem;font-size:.84rem}
/* wide screens: the list stays in the margin beside the page */
.toc.rail{inset-inline-start:max(12px,calc((100vw - 78rem) / 2 - 14.5rem));top:var(--toc-top,7rem);width:13.5rem;max-height:calc(100vh - var(--toc-top,7rem) - 1.5rem);overflow-y:auto;scrollbar-width:thin;padding-block:.2rem}
/* other screens: a tab on the inline-start edge (the Guide tab is on the other edge) opens the list as a panel */
.toc.drawer{inset-inline-start:0;top:var(--toc-top,5rem);width:min(21rem,86vw);max-height:calc(100vh - var(--toc-top,5rem) - 1rem);overflow-y:auto;background:var(--paper);border:1px solid var(--rule);border-inline-start:0;border-start-end-radius:10px;border-end-end-radius:10px;box-shadow:0 14px 36px -14px rgba(0,0,0,.4);padding:1rem .8rem .9rem;animation:tocin .18s ease both}
.toc-tab{position:fixed;inset-inline-start:0;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:3.6rem;padding:.75rem .5rem .7rem;border:1px solid var(--head-line);border-inline-start:0;border-start-end-radius:10px;border-end-end-radius:10px;background:var(--head);color:var(--head-ink);box-shadow:0 6px 18px -6px rgba(0,0,0,.45);cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;transition:background .15s,transform var(--dur-fast) var(--ease-out);font-variant-numeric:tabular-nums lining-nums}
/* the edge tabs answer a hover by moving 3 px towards the page, not by changing their padding (motion review); only where
   they sit on the screen edge (1400 px and wider) and only for a fine pointer */
@media (min-width:1400px) and (hover:hover) and (pointer:fine){
  .toc-tab:hover,.toc-tab[aria-expanded="true"]{transform:translateY(-50%) translateX(3px)}
  html[dir="rtl"] .toc-tab:hover,html[dir="rtl"] .toc-tab[aria-expanded="true"]{transform:translateY(-50%) translateX(-3px)}
  .xp-tab:hover{transform:translateY(-50%) translateX(-3px)}
  html[dir="rtl"] .xp-tab:hover{transform:translateY(-50%) translateX(3px)}
}
.toc-tab svg{width:1.4rem;height:1.4rem;fill:none;stroke:var(--head-ink);stroke-width:1.6;stroke-linecap:round}
.toc-tab svg circle{fill:var(--head-brass);stroke:none}
.toc-tab-l{display:flex;flex-direction:column;align-items:center;gap:.1rem;line-height:1.2}
.toc-tab small{font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--head-muted)}
.toc-tab:hover,.toc-tab[aria-expanded="true"]{background:color-mix(in srgb,var(--head) 82%,#fff)}
.toc-tab:focus-visible{outline:2px solid var(--head-brass);outline-offset:2px}
html[lang="ar"] .toc-tab,html[lang="ar"] .toc .toc-h{font-family:var(--arabic);letter-spacing:0;text-transform:none}
html[lang="ar"] .toc .toc-h{font-size:.9rem}
@keyframes tocin{from{opacity:0}to{opacity:1}}
@media (max-width: 760px){
  .toc-tab{top:auto;bottom:calc(6rem + env(safe-area-inset-bottom,0px));transform:none;min-width:2.75rem;padding:.7rem .6rem}
  .toc-tab .toc-tab-l{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}   /* hidden from sight, not from screen readers (D-02) */
  .toc.sheet{inset-inline:0;top:auto;bottom:0;max-height:72vh;overflow-y:auto;background:var(--paper);border-top:1px solid var(--rule);border-radius:14px 14px 0 0;box-shadow:0 -14px 36px -14px rgba(0,0,0,.45);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));animation:tocin .18s ease both}
  .toc.sheet button{min-height:44px}
}
@media (prefers-reduced-motion: reduce){ .toc.drawer,.toc.sheet{animation:none} }
@media print{ .toc,.toc-tab{display:none!important} }
/* Reports: Daily and Weekly tabs (PRD 31.1), the reader's tab style as links */
.tabs a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.rep-tabs{margin:.15rem 0 0}

/* ---------- New components of the platform programme (docs/DESIGN.md, "New components"; locked 22 October 2026).
   For the coordinating session to append to site/assets/style.css after the token block (handoff step 1).
   Tokens only: no literal colour, size, space, radius, shadow, duration or z-index. Logical properties throughout, so the
   same rules serve Arabic right to left; Arabic face and sizes are set at the end. ---------- */

/* shared: a missing value, said in words and highlighted (replaces the look of .nodata and matches .cp-nd) */
.nd,.fig-na{display:inline-block;font-family:var(--sans);font-size:var(--fs-caption);font-weight:600;line-height:var(--lh-ui);padding:var(--sp-0) var(--sp-2);border-radius:var(--r);background:var(--gold-soft);color:var(--gold-ink);border:var(--bw) solid var(--gold-line);white-space:normal}

/* shared: "How to read this page" (PRD 3.3), always visible under the opening line */
.how{max-width:var(--measure);margin:var(--sp-3) 0 var(--sp-6);padding:var(--sp-3) var(--sp-4);background:var(--raise);border-top:var(--bw-accent) solid var(--brass);font-size:var(--fs-small);line-height:var(--lh-read);color:var(--ink-2)}
.how h2{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);color:var(--muted);margin:0 0 var(--sp-1);font-variant-numeric:tabular-nums lining-nums}
.how p{margin:0}

/* shared: loading and failure no longer look like an empty state */
.empty.is-loading{border-top-color:var(--rule-strong);box-shadow:none}
.empty.is-error{background:var(--bad-soft);border-top-color:var(--bad)}
.empty.is-error h2{color:var(--bad)}
.empty .btn{margin-top:var(--sp-3)}

/* shared: the Figure pattern for new stat tiles */
.figt{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;padding:var(--sp-3) var(--sp-4);background:var(--paper);border:var(--bw) solid var(--rule)}
.figt-l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--muted);line-height:var(--lh-ui);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.figt-v{font-family:var(--mono);font-size:var(--fs-fig-l);font-weight:600;line-height:var(--lh-tight);color:var(--navy);font-variant-numeric:tabular-nums}
.figt-s{font-size:var(--fs-caption);line-height:var(--lh-ui);color:var(--ink-2)}
.figt-asof{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-top:auto;font-variant-numeric:tabular-nums lining-nums}

/* 1. figure panel: the trigger and the panel. Written for the panel as built in site/assets/figure-panel.js (Trust lane):
   a native <dialog> opened modal, centred on wide screens, a bottom sheet on phones. Midday merge, 22 October 2026:
   one style per component (the script's own injected rules removed; DESIGN.md component 1). */
.fig,.fig-tap{cursor:pointer;text-decoration:underline dotted var(--muted);text-decoration-thickness:1px;text-underline-offset:3px;border-radius:var(--r)}
td .fig-tap[role="button"],.cv>.fig-tap[role="button"]{display:inline-block;min-width:24px;min-height:24px;line-height:24px;margin-block:2px}  /* WCAG 2.5.8: a figure in a table cell is a 24 px target (27 October 2026) */
.fig:hover,.fig:focus-visible,.fig[aria-expanded="true"],.fig-tap:hover,.fig-tap:focus-visible{text-decoration-style:solid;text-decoration-color:var(--navy)}

.fig-panel h2{margin:0;font-family:var(--display);font-size:var(--fs-title);line-height:var(--lh-head);color:var(--navy)}

.fig-val b{font-family:var(--mono);font-size:var(--fs-fig-l);font-weight:600;line-height:var(--lh-tight);color:var(--navy);font-variant-numeric:tabular-nums lining-nums}

.fig-dl div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:var(--sp-2);align-items:baseline}
.fig-dl dt{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.fig-dl dd{margin:0;color:var(--ink-2)}
.fig-dl a{color:var(--blue);text-underline-offset:2px;overflow-wrap:anywhere}

.fig-where a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:var(--bw) solid var(--rule-strong)}

@media (max-width: 520px){ .fig-dl div{grid-template-columns:minmax(0,1fr);gap:0} }
@media (prefers-reduced-motion: no-preference){
  
  @keyframes fig-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px){
  
  @keyframes fig-up{from{transform:translateY(100%)}to{transform:none}}
}

/* 2. pulse ribbon (inside the masthead, under the menu row; adopted only after review) */
.pulse{display:flex;align-items:center;gap:var(--sp-2) var(--sp-4);min-height:2.75rem;padding-block:var(--sp-1);border-top:var(--bw) solid var(--head-line);color:var(--head-ink);font-size:var(--fs-caption);line-height:var(--lh-ui)}

.pulse-say .num{font-weight:600}

.pulse-line .band{fill:var(--head-line)}
.pulse-line .ln{fill:none;stroke:var(--head-brass);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pulse-line .now{fill:var(--head-brass)}

.pulse a{flex:none;color:var(--head-ink);font-weight:600;text-underline-offset:3px}
@media (max-width: 760px){
  .pulse{flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
  
  
  .pulse a{order:3}
}

/* 3. scorecard: outcome badges, filters and the list (site/assets/scorecard.js); the summary strip reuses .rk-strip/.rk-chip */

.sc-filters,.tl-filters,.dr-filters{margin:0 0 var(--sp-3)}

.sc-ev a{overflow-wrap:anywhere;white-space:normal}
/* the scorecard page as built (site/assets/scorecard.js): summary strip on .rk-strip, tables on table.gl */

.sc-tbl td{vertical-align:top}

.sc-how{margin-top:var(--sp-6)}
/* Is the Center getting more accurate? (programme PRD 11 items 2 and 5, 27 October 2026): small multiples on the
   Resilience tab's chart classes (.res-pg-ch scope for gridlines and the zero line); the Center navy and solid, the IMF
   muted and dotted, the simple benchmark brass and dashed; a marker shape each, so the lines differ without colour */

.sc-acc-card .src{margin:var(--sp-1) 0 0}

.sc-acc-data summary{cursor:pointer;color:var(--blue);font-weight:600;min-height:32px;display:flex;align-items:center}

  

@media (max-width: 760px){
  
  
  .sc-tbl thead{display:none}
  .sc-tbl tr{display:block;border-bottom:var(--bw) solid var(--rule);padding:var(--sp-2) 0}
  .sc-tbl td{display:block;border:0;padding:var(--sp-1) var(--sp-2)}
  .sc-tbl td[data-l]:not(.sc-item)::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
}

/* 4. timeline (event chronology) */
.tl{list-style:none;margin:0;padding:0}
.tl-e{position:relative;padding-block:var(--sp-3) var(--sp-4);padding-inline-start:var(--sp-6);border-inline-start:var(--bw) solid var(--rule)}
.tl-e::before{content:"";position:absolute;inset-inline-start:calc(-1 * (var(--sp-1) + 1px));top:calc(var(--sp-3) + .45em);width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--rule-strong)}

.tl-e h3{font-family:var(--display);font-size:var(--fs-title);font-weight:500;line-height:var(--lh-head);color:var(--navy);margin:var(--sp-1) 0}
.tl-e p{margin:0 0 var(--sp-2);font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2);max-width:var(--measure)}

.tl-more summary{cursor:pointer;font-size:var(--fs-caption);font-weight:600;color:var(--blue);min-height:2.25rem;display:flex;align-items:center}

/* 5. decision room table: status badges and the overdue marker; the table is table.gl + the .cp-tbl phone pattern */
.dr-st{display:inline-block;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);padding:var(--sp-0) var(--sp-2);border-radius:var(--r);border:var(--bw) solid transparent;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.dr-open{background:var(--raise);color:var(--ink-2);border-color:var(--rule)}

/* 6. search */
.search-btn{height:2.5rem;display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);border:var(--bw) solid var(--head-line);border-radius:var(--r-pill);background:transparent;color:var(--head-ink);font-size:var(--fs-small);font-weight:600;transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease}
.search-btn:hover{border-color:var(--head-brass);background:var(--head-hover)}
.search{position:absolute;inset-inline:0;top:100%;z-index:var(--z-popover);background:var(--paper);color:var(--ink);border-bottom:var(--bw) solid var(--rule);box-shadow:var(--shadow-up)}
.search[hidden]{display:none}
.search-in-wrap{max-width:var(--page-max);margin:0 auto;padding:var(--sp-4) var(--gutter) var(--sp-2)}
.search label{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--muted);margin-bottom:var(--sp-1);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.search-in{width:100%;font:inherit;font-size:var(--fs-ui);min-height:44px;padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--line-field);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.search-res{list-style:none;max-width:var(--page-max);max-height:60vh;overflow-y:auto;margin:0 auto;padding:0 var(--gutter) var(--sp-4)}
.search-res h3{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);color:var(--muted);margin:var(--sp-4) 0 var(--sp-1);font-variant-numeric:tabular-nums lining-nums}
.search-hit{display:grid;gap:var(--sp-0);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);color:var(--ink);text-decoration:none}
.search-hit:hover,.search-hit[aria-selected="true"]{background:var(--blue-soft)}
.search-hit b{font-weight:600;color:var(--navy)}
.search-hit small{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.search-hit span{font-size:var(--fs-caption);color:var(--ink-2);line-height:var(--lh-ui)}
.search mark{background:var(--gold-soft);color:inherit;border-radius:var(--r);padding-inline:var(--sp-0)}
.search-msg{max-width:var(--page-max);margin:0 auto;padding:var(--sp-2) var(--gutter) var(--sp-4);font-size:var(--fs-small);color:var(--muted)}
@media (max-width: 760px){
  .search-btn span{display:none} .search-btn{width:2.75rem;height:2.75rem;padding:0;justify-content:center}
  .search{position:fixed;inset:0;z-index:var(--z-modal);overflow-y:auto;border:0}
  .search-res{max-height:none}
}

/* 7. watchlists */
.watch-g{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.watch-g h3{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);color:var(--muted);margin:0;font-variant-numeric:tabular-nums lining-nums}
.watch-pills{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2)}
.watch-pill{border:var(--bw) solid var(--rule);background:var(--paper);color:var(--ink-2);font-size:var(--fs-small);font-weight:600;padding:var(--sp-2) var(--sp-3);min-height:36px;border-radius:var(--r-pill);transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.watch-pill:hover{border-color:var(--navy);color:var(--navy)}
.watch-pill[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.btn.follow[aria-pressed="true"]{border-color:var(--navy);color:var(--navy);background:var(--blue-soft)}

/* 8. view switch: decision view and analyst view */
.view-switch{display:inline-flex;border:var(--bw) solid var(--head-line);border-radius:var(--r-pill);padding:var(--sp-0)}
.view-switch button{border:0;background:transparent;color:var(--head-muted);font-size:var(--fs-caption);font-weight:600;padding:0 var(--sp-3);min-height:2.25rem;border-radius:var(--r-pill);transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.view-switch button:hover{color:var(--head-ink)}
.view-switch button[aria-pressed="true"]{background:var(--head-brass);color:var(--head)}
.user-menu .menu .view-switch{border-color:var(--rule);margin:var(--sp-1) var(--sp-2)}
.user-menu .menu .view-switch button{color:var(--ink-2);min-height:40px}
.user-menu .menu .view-switch button[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink)}
html[data-view="decision"] [data-level="analyst"],html:not([data-view]) [data-level="analyst"]{display:none!important}
.view-more{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-small);font-weight:600;color:var(--blue);background:none;border:0;padding:0;min-height:40px}

/* 9. glossary term */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted var(--muted);text-decoration-thickness:1px;text-underline-offset:3px}
.term:hover,.term:focus-visible,.term[aria-expanded="true"]{text-decoration-style:solid;text-decoration-color:var(--navy)}
.term-pop{position:absolute;z-index:var(--z-popover);width:min(20rem,calc(100vw - 2 * var(--gutter)));background:var(--paper);color:var(--ink-2);border:var(--bw) solid var(--rule);box-shadow:var(--shadow-up);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-small);line-height:var(--lh-body);text-align:start}
.term-pop[hidden]{display:none}
.term-pop b{color:var(--ink)}
.term-pop a{display:inline-block;margin-top:var(--sp-1);font-weight:600;color:var(--blue)}
@media (prefers-reduced-motion: no-preference){ .term-pop{animation:fig-in var(--dur-base) var(--ease-out) both} }

/* 10. "as of" banner */

.asof-bar .btn{min-height:36px;padding:var(--sp-1) var(--sp-3)}
.asof-pick{font-size:var(--fs-caption);font-weight:600;color:var(--blue);background:none;border:0;padding:0;min-height:36px;text-decoration:underline;text-underline-offset:3px}
@media (max-width: 760px){ .asof-bar .btn,.asof-pick{min-height:44px} }

/* phones: toggles and filters reach 44px (PRD 3.3, comfortable tap targets) */
@media (max-width: 760px){
  .watch-pill{min-height:44px}
}

/* Arabic: labels set in mono capitals take the Arabic face, no tracking or capitals, one step larger */
html[dir="rtl"] :is(.how h2,.figt-l,.fig-dl dt,.fig-where h3,.fig-panel-k,.pulse-k,.oc,.flag.sc-st,.sc-cls,.dr-st,.search label,.search-res h3,.watch-g h3){font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:var(--fs-caption)}
html[dir="rtl"] :is(.how,.tl-e p,.fig-panel,.term-pop){line-height:var(--lh-ar)}
html[dir="rtl"] .sc-tbl td[data-l]::before{font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:var(--fs-caption)}
html[dir="rtl"] :is(.figt-v,.fig-val b,.tl-d,.pulse-asof,.search-hit small) bdi{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}

@media print{ .fig-panel,.term-pop,.search,.view-switch,.asof-pick{display:none!important} }

/* ---------- About the Center (programme PRD 6.9; site/assets/about.js; About lane R8 on the tokens) ---------- */
.about-sec .lede + .lede{margin-top:var(--sp-3)}
.about-sec h3{font-size:var(--fs-title);margin:var(--sp-6) 0 var(--sp-2)}

.tw:has(> .about-tbl) + *{margin-top:var(--sp-5)}   /* the paragraph after a table starts below it, not against it */
.about-tbl th,.about-tbl td{overflow-wrap:break-word}
.about-tbl td.lbl{min-width:8.5rem;font-weight:600}

.guide-steps.about-flow li:nth-child(4)::after{display:none}
.about-items,.about-disc{max-width:var(--measure)}
/* the opening of About (programme PRD 13.5, persuade): the cover's navy field at the head of the page, the heading at cover
   size, the brass double rule, the question the page answers; the sections below stay a calm reading column */

.about-cover h1{color:var(--head-ink);font-size:clamp(2.25rem,1.4rem + 2.8vw,3.5rem);line-height:1.06;letter-spacing:-.018em;margin:0}
.about-cover .cover-rule{width:min(16rem,62%);height:5px;border-top:1px solid var(--head-brass);border-bottom:1px solid var(--head-brass);margin:var(--sp-5) 0 var(--sp-4);transform-origin:0 50%}
.about-cover .lede{color:var(--head-muted);font-size:1.1875rem;max-width:44rem}
.about-cover .src{color:var(--head-muted);margin-top:var(--sp-3)}
html[dir="rtl"] .about-cover .cover-rule{transform-origin:100% 50%}
html[dir="rtl"] .about-cover h1{letter-spacing:0;line-height:1.45}
.about-items .chip{margin-inline-start:var(--sp-1)}
/* --- How it was built (programme PRD 6.9.2): six points, the live figures, the tables of the sealed version --- */

.bt-points li{padding:var(--sp-4);background:var(--paper);border:var(--bw) solid var(--rule);border-top:3px solid var(--navy);min-width:0}
.bt-points h3{margin:0 0 var(--sp-2);font-size:var(--fs-body);line-height:var(--lh-ui);color:var(--navy);text-wrap:balance}
.bt-points p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.bt-hard li{line-height:1.6}

.bt-stats .figt{gap:var(--sp-2)}

/* --- about lane: sub-tabs and the mind map (programme PRD 6.9.1; site/assets/about.js; DESIGN.md "About map") --- */
.about-tabs{margin:0 0 var(--sp-6)}

.about-tbl .about-grp-h th{font-family:var(--sans);font-weight:700;font-size:var(--fs-small);color:var(--navy);background:var(--raise);text-align:start;padding:var(--sp-2) var(--sp-3);letter-spacing:0;text-transform:none}
@media (max-width: 760px){ table.gl.cp-tbl.about-tbl .about-grp-h th{display:block;border:0;padding:var(--sp-2) var(--sp-3)} }

.about-sec .am-route h3{font-family:var(--sans);font-weight:700;font-size:var(--fs-small);line-height:1.3;color:var(--ink);margin:0}
.am-route p{font-size:var(--fs-caption);color:var(--ink-2);margin:2px 0 0}
.am-route ol{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) 0}
.am-route li{display:flex;align-items:center}

.am-links path{fill:none;stroke:var(--rule-strong);stroke-width:1.25}

.about-sec .am-card-h h3{font-family:var(--sans);font-weight:700;font-size:var(--fs-ui);line-height:1.3;margin:0;color:var(--ink);letter-spacing:0}
html[dir="rtl"] .about-sec .am-card-h h3{font-family:var(--arabic)}

.am-card-h .chip{grid-column:2;justify-self:start;margin-top:var(--sp-2)}

html[dir="rtl"] :is(.am-n,.am-s,.am-route p,.am-cap,.am-card-d,.am-c-s,.am-d dl){font-family:var(--arabic)}

.am-m .chip{margin-top:6px}

.am-d dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px var(--sp-3);margin:0;font-size:var(--fs-caption);line-height:1.4}
.am-d dt{color:var(--muted);font-weight:600}
.am-d dd{margin:0;color:var(--ink)}

/* 640 to 959 px of map: the centre on top, two columns, one spine down the gap */

/* phones: an outline; a spine on the inline-start side with a tick to each card, stopping at the last tick; no SVG */
@container (max-width: 639px){
  
  
  .am-route ol{flex-direction:column;align-items:stretch;gap:0}
  .am-route li{flex-direction:column;align-items:stretch}
  
  
  
  
  
  
  
  
  
  
  
  .am-d dl{grid-template-columns:minmax(0,1fr)}
  .am-d dd + dt{margin-top:var(--sp-1)}
}
/* --- end about lane --- */

/* ---------- Resilience & Outlook tab, Phase 1 (Resilience PRD 2, 3, 4, 7, 11, 17.1; site/assets/resilience.js; screens lane,
   22 October 2026). Tokens only; logical properties, so the same rules run right to left in Arabic. ---------- */
.res-vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* today's pulse under the masthead, on the navy ground (DESIGN.md component 2); it scrolls away with the page */
.pulse-bar{background:var(--head)}
.pulse-bar .pulse{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.pulse-line .now{fill:none;stroke:var(--head-brass);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* page head and the sub-tab bar: links, because each sub-tab has its own address; sideways scroll on phones */

.res-tabs a{flex:none;text-decoration:none}
@media (max-width:760px){ .res-tabs a{padding-inline:var(--sp-3)} }   /* the bar scrolls on a phone: each tab keeps its room rather than being squeezed against the next */
/* shared pieces */

.res-sec > h2{font-size:var(--fs-h3);font-weight:400;border-bottom:var(--bw) solid var(--navy);padding-bottom:var(--sp-1);margin:0 0 var(--sp-4)}
.res-v{display:inline-block;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);line-height:var(--lh-ui);padding:var(--sp-0) var(--sp-2);border-radius:var(--r);white-space:nowrap;vertical-align:middle;margin-inline-start:var(--sp-2);font-variant-numeric:tabular-nums lining-nums}
.res-v.strong{background:var(--good-soft);color:var(--good)}
.res-v.watch{background:var(--warn-soft);color:var(--warn)}
.res-v.weak{background:var(--bad-soft);color:var(--bad)}

 

.res-data{margin-top:var(--sp-3)}
.res-data h4{font-size:var(--fs-small);margin:var(--sp-4) 0 var(--sp-2)}

  

  
.res-howd{margin-top:var(--sp-6);border-top:var(--bw) solid var(--rule);max-width:var(--measure-wide)}
.res-howd summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
/* the disclosure says it opens: a chevron after the label, turned when open (programme PRD 13.5) */
.res-howd summary::-webkit-details-marker{display:none}
.res-howd summary::after{content:"";flex:none;width:.45rem;height:.45rem;margin-inline-start:.7rem;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15rem) rotate(45deg);transition:transform var(--dur-fast) ease}
.res-howd[open] summary::after{transform:translateY(.1rem) rotate(-135deg)}
.res-howd summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media (prefers-reduced-motion: reduce){ .res-howd summary::after{transition:none} }
   /* a card that says "Data not available" is as tall as what it says, not as its chart neighbour */
.res-howd p,.res-howd li{font-size:var(--fs-small);line-height:var(--lh-read);color:var(--ink-2)}
.res-howd ol{padding-inline-start:var(--sp-5);margin:0 0 var(--sp-3)}
.res-howd h4{font-size:var(--fs-small);margin:var(--sp-3) 0 var(--sp-1)}

table.gl.res-tbl th.lbl{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;text-align:start;vertical-align:top;min-width:11rem;white-space:normal;color:var(--ink);border-bottom:var(--bw) solid var(--rule-soft)}
.res-tbl td{overflow-wrap:break-word}
.res-tbl .num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.res-tbl td .num{white-space:nowrap}

.res-ind th:nth-child(1){width:30%} .res-ind th:nth-child(2){width:17%} .res-ind th:nth-child(3){width:10%} .res-ind th:nth-child(4){width:18%} .res-ind th:nth-child(5){width:15%}
.res-ctx th:nth-child(1){width:26%} .res-ctx th:nth-child(2){width:20%} .res-ctx th:nth-child(3){width:28%} .res-ctx th:nth-child(4){width:14%}
.res-ind td:last-child,.res-ctx td:last-child{white-space:nowrap}
/* overview: the verdict and the situation now */

.res-big .res-v{margin-inline-start:0}
.res-big-v b{font-family:var(--mono);font-size:var(--fs-fig-xl);font-weight:600;line-height:var(--lh-tight);color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.res-big-v small,.res-pcard-v small{font-size:var(--fs-caption);color:var(--muted);margin-inline-start:var(--sp-1)}

.res-now .figt{background:var(--raise)}
.res-now .figt-v{font-size:var(--fs-fig)}
/* overview: one card per sub-tab, with its one-line answer */

.res-card-go .ico{width:1rem;height:1rem}
/* the pulse on the Overview: two charts, each line against normal */

/* every chart is titled by its finding, in the publication serif (programme PRD 13.5: one chart style) */

.res-ct .res-v{margin-inline-start:var(--sp-1)}

.res-dates li + li{margin-top:var(--sp-1)}
.res-pc .src{margin:0}

/* Resilience: horizontal bars 0 to 100 with Strong / Watch / Weak bands behind them and the peer median as a tick (PRD 11) */

/* the score scale under the bars (13.3); every row's value column has one width, so the tracks and the scale line up */

.res-ticks > span{position:absolute;top:0;inset-inline-start:var(--x);transform:translateX(-50%);white-space:nowrap}
html[dir="rtl"] .res-ticks > span{transform:translateX(50%)}

  

.res-row-v > .num{font-family:var(--mono);font-size:var(--fs-fig-s);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums lining-nums}
.res-row-v .res-v{margin-inline-start:0}

.res-peers .peer .res-row-v > .num{color:var(--ink-2)}

.res-legend > span{display:inline-block}

.res-pcard > .res-data{grid-column:1 / -1}
.res-pcard-b > :first-child{margin-top:0}

  
.res-pcard h3{font-size:var(--fs-title);margin:0}

.res-pcard-v > .num{font-family:var(--mono);font-size:var(--fs-fig-l);font-weight:600;color:var(--navy);line-height:var(--lh-tight);font-variant-numeric:tabular-nums lining-nums}

.res-rob p{margin:0} .res-rob p + p{margin-top:var(--sp-2)}

/* Regional: one card per issue; one bar across the outcomes; signposts as lights with words */

.res-issue-h h3{font-size:var(--fs-title);margin:0}

.res-seg b{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

.res-out p{margin:0;font-size:var(--fs-small);line-height:var(--lh-body)}

.res-out-p > .num{font-family:var(--mono);color:var(--navy);font-variant-numeric:tabular-nums lining-nums}

.res-hz li{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:0 var(--sp-3);align-items:center;padding:var(--sp-1) 0}

table.gl.res-tbl tr.res-part th.lbl{font-weight:400;color:var(--ink-2);padding-inline-start:var(--sp-5)}
.res-out-gall p{margin:0;font-size:var(--fs-small);line-height:var(--lh-body)}
.res-issue h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);color:var(--muted);margin:var(--sp-4) 0 var(--sp-1);font-variant-numeric:tabular-nums lining-nums}

.res-light i{width:.8rem;height:.8rem;border-radius:50%;flex:none;margin-top:var(--sp-0);background:var(--rule-strong)}
.res-light.green i{background:var(--good)} .res-light.amber i{background:var(--warn)} .res-light.red i{background:var(--bad)}

.res-srcs{margin:var(--sp-3) 0 0}
.res-issue .res-howd{margin-top:var(--sp-3)}

.res-cal li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:var(--bw) solid var(--rule-soft)}
.res-cal time{font-family:var(--mono);font-size:var(--fs-small);color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.res-cal li > span{display:flex;flex-direction:column}
@media (hover:hover) and (pointer:fine){ .res-card:hover .res-card-go .ico{transform:translateX(2px)} }

@media (max-width: 760px){
  
  
    
  
  
  
  
  .res-cal li{grid-template-columns:minmax(0,1fr);gap:0}
  .res-hz li{grid-template-columns:minmax(0,1fr)}
  
  
  table.gl.cp-tbl.res-tbl th.lbl{display:block;padding:0 0 var(--sp-1);font-size:var(--fs-ui);border:0}
}
html[dir="rtl"] :is(.res-v,.res-eye,.res-card-k,.res-issue h4){font-family:var(--arabic);letter-spacing:0;text-transform:none;font-size:var(--fs-caption)}
html[dir="rtl"] :is(.res-say,.res-fig .res-ct){font-family:var(--display);line-height:var(--lh-ar)}

html[dir="rtl"] :is(.res-note,.res-howd p,.res-howd li,.res-rob,.res-card-v,.res-out p,.res-dates){line-height:var(--lh-ar)}
html[dir="rtl"] :is(.res-big-v,.res-row-v,.res-pcard-v,.res-out-p,.res-cal time) bdi{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
html[dir="rtl"] .res-card-go .ico{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){ html[dir="rtl"] .res-card:hover .res-card-go .ico{transform:scaleX(-1) translateX(2px)} }
/* phones: the menu keeps every section on one row when Resilience & Outlook makes it seven (each column as wide as its name) */
@media (max-width: 760px){
  .nav:has(> a[data-view="resilience"]:not([hidden])){grid-template-columns:repeat(7,auto);justify-content:space-between}
  .nav:has(> a[data-view="resilience"]:not([hidden])) > :is(a,.nav-parent){padding-inline:var(--sp-0);font-size:var(--fs-min)}
  /* the account button keeps its own space at the row's end: the menu stops before it (margin, not padding) and scrolls
     on phones narrower than 390px instead of running under it; the button drops its chevron to leave the names room */
  .navbar .nav:has(> a[data-view="resilience"]:not([hidden])){padding-inline-end:0;margin-inline-end:2.75rem;overflow-x:auto;scrollbar-width:none}
  .top:has(.nav > a[data-view="resilience"]:not([hidden])) .user-menu summary > .ico{display:none}
  
  .pulse-bar .pulse a{order:4;padding-block:var(--sp-2)}
}

/* ---------- Resilience & Outlook tab, Phase 2 (Resilience PRD 5, 6, 11, 17.3, 17.4, 20; site/assets/resilience.js; screens lane,
   Day 3, 22 October 2026): Outlook, What if? and Method. Tokens only; logical properties, so the same rules run right to left. ---------- */

.res-mlink a{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600}
.res-mlink .ico{width:1rem;height:1rem}

/* cards: one per indicator, outlook path, shock, replay and track record */

.res-fc-h h3,.res-sc h3{font-size:var(--fs-title);margin:0}

.res-fc > .res-ct .num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

.res-read .num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.res-fc .src,.res-ac .src,.res-rp .src{margin:var(--sp-2) 0 0}

/* the fan chart (Section 11): past solid, forecast dashed, range shaded, IMF thin grey dashed, a dotted "Today" */

  

/* the outcome paths (17.4): each outcome with its probability and what it assumes; one switch draws them on the charts */

.res-cb-outs li{padding:var(--sp-2) 0;border-top:var(--bw) dotted var(--rule);font-size:var(--fs-small);line-height:var(--lh-body)}

.res-as li + li{margin-top:var(--sp-2)}

/* the range bar chart (programme PRD 13.3, 13.4): Scenarios, the custom scenario and the replays. Each row is a label (a
   year or a forecaster), a bar from zero (solid in year 1, light with an outline in year 2), the range as a line with end
   marks, and the value in words. Gridlines at the ticks, a stronger zero line, then the tick row, the meaning of each
   side and the axis title. Values sit beside the bars in a wide chart and under them in a narrow one (a container query). */

.res-pg-h{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-head);color:var(--navy);margin:0}

.rb-v .num{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}

  
  

.rb-at > span{position:absolute;top:0;inset-inline-start:var(--x);transform:translateX(-50%);white-space:nowrap}
html[dir="rtl"] .rb-at > span{transform:translateX(50%)}

.rb-dir > span:last-child{text-align:end}

.res-cmp + .src,.rb-fig .src{margin-top:var(--sp-3)}

/* the "What if?" panel: two sliders, results at once */

.res-sl label{font-weight:600;font-size:var(--fs-small);line-height:var(--lh-ui)}
.res-sl output{font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.res-sl output bdi{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
.res-sl input[type="range"]{display:block;width:100%;min-height:44px;margin:var(--sp-2) 0 var(--sp-1);accent-color:var(--navy);cursor:pointer}
.res-sl input[type="range"]:focus-visible{outline-offset:0}

/* Scenarios, second redesign (programme PRD 13.4.1): plain ranked bars, the custom shock's result cards, the impact
   table tinted by direction and size, and each shock's details behind a closed panel */

.sr{list-style:none;margin:0;padding:0}

  

:is(.sr-v,.wi-tc,.hx,.res-scd-c) .ico{width:.9rem;height:.9rem;vertical-align:-.12em;margin-inline-end:var(--sp-0)}
:is(.sr-v,.wi-tc,.hx,.res-scd-c,.wi-big) bdi{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
:is(.sr-r,.wi-tile,.hx,.res-scd-c).d-neg .ico{color:var(--bad)} :is(.sr-r,.wi-tile,.hx,.res-scd-c).d-pos .ico{color:var(--blue)}

.sr-t.sr-dir > span:last-child{text-align:end}

    

 
.wi-tile p{margin:0}

.wi-big bdi{font-size:var(--fs-fig)}

.res-scd > summary{cursor:pointer;list-style:none;min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-1) var(--sp-4);padding:var(--sp-2) var(--sp-4);font-weight:600;color:var(--navy)}
.res-scd > summary::-webkit-details-marker{display:none}
.res-scd > summary::after{content:"";width:.45rem;height:.45rem;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15rem) rotate(45deg);transition:transform var(--dur-fast) ease}
.res-scd[open] > summary::after{transform:translateY(.1rem) rotate(-135deg)}

@media (prefers-reduced-motion: reduce){ .res-scd > summary::after{transition:none} }

.res-scd-l li{padding:var(--sp-2) 0;border-top:var(--bw) dotted var(--rule);font-size:var(--fs-small);line-height:var(--lh-body)}
.res-scd-l li:first-child{border-top:0}

/* Method: track record bars (shorter is better), replays with "Saw it / Partly / Missed" */

.res-acc-v{font-size:var(--fs-caption);color:var(--ink-2)}
.res-acc-v .num{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}

.res-rp-w dt{font-size:var(--fs-small);font-weight:600}
.res-rp-w dd{margin:0;font-size:var(--fs-small);line-height:var(--lh-body)}
.res-rp-w dd > .num{font-family:var(--mono);font-size:var(--fs-fig-s);font-weight:600;color:var(--navy);margin-inline-end:var(--sp-2);font-variant-numeric:tabular-nums lining-nums}

.res-thin-l li + li{margin-top:var(--sp-2)}
.res-mdt th:nth-child(1){width:24%}
/* Regional on phones: each issue's evidence folds behind "Show details" (Day 3); computers show it all */

html[dir="rtl"] :is(.res-fc > .res-ct,.res-wi-out > .res-ct,.rb-t1,.res-pg-h){font-family:var(--display);line-height:var(--lh-ar)}

html[dir="rtl"] :is(.res-sc-say,.res-sc-sh,.res-sc-x,.rb-v,.rb-gh,.rb-dir,.rb-axt,.rb-t2,.res-pg-q,.res-rp-at,.res-rp-st,.res-rp-w dd,.res-read,.res-fc-d,.res-thin,.res-acc-cap,.res-cb-outs li,.res-as){line-height:var(--lh-ar)}
html[dir="rtl"] :is(.rb-v .num,.res-acc-v .num,.res-rp-w dd > .num,.res-read .num) bdi{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
html[dir="rtl"] .res-mlink .ico{transform:scaleX(-1)}

/* ---------- D-01 (DESIGN.md step 24, applied Day 3): below 1400 px the two edge tabs leave the content column. The
   "Sections" tab covered the start of the Resilience & Outlook sub-tab bar at 1366 px (and text, labels and figures from
   390 to 1366 px on other long pages): it becomes a round button in the end corner; the Guide tab stays under Help. ---------- */
@media (max-width: 1399px){
  .toc-tab{top:auto;bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));inset-inline-start:auto;inset-inline-end:var(--sp-4);transform:none;flex-direction:row;justify-content:center;border:var(--bw) solid var(--head-line);border-radius:var(--r-pill);min-width:2.75rem;min-height:2.75rem;padding:var(--sp-2)}
  /* a round button, its name kept for screen readers (aria-label "On this page", as on phones, D-02): a labelled pill,
     about 115 px wide, would still cover the end of the content column at 1366 px; the 44 px button sits in the margin */
  .toc-tab .toc-tab-l{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .xp-tab{display:none}
  .wrap{padding-bottom:calc(var(--sp-8) + 2.75rem)}
}

/* ---------- the supply side and "Equations and tests" (Resilience PRD 21.3-21.4; the chart style of programme PRD 13.5) ---------- */

/* growth accounting: one colour per source of growth (each named in the key, the readout and the table); total growth a
   dark rule and dot on a paper halo, drawn over the segments */

/* potential growth (line over its range) and the output gap (bars from zero, range as a line with end marks) */

/* equations: mathematics in the publication serif, always left to right; standard errors under their coefficients */

.res-eqc h3{font-size:var(--fs-title);margin:0 0 var(--sp-1)}

.eq var,.eq-in var{font-family:var(--display);font-style:italic}
.eq sub,.eq sup,.eq-in sub,.eq-in sup{font-size:max(12px,.72em);line-height:0}   /* the 12 px floor holds for indices too */

.res-v.none{background:var(--sunk);color:var(--ink-2)}
.res-tst td .res-v,.res-dmt td .res-v,.res-eqt td .res-v{margin:0}

.res-dmt tbody tr.res-dm-first > *{border-top:var(--bw) solid var(--rule-strong)}   /* a firmer rule where an indicator starts */
.res-dmt tbody tr.res-dm-first:first-child > *{border-top:0}

/* text never runs out of its box (programme PRD 13.7, the overlap check): labels in narrow columns and cards wrap */

@media (max-width:520px){.res-scd > summary{grid-template-columns:minmax(0,1fr) auto}}

/* a country's flag beside its name (cepa-lane.js flag()); a thin outline so white flags show on a white card */

/* Tables on a phone (programme PRD 13.8): a table with more than two columns (marked "t-card" by tables.js) shows each
   row as a card. The first cell is the card's heading; every other cell follows on its own line, its column heading
   (data-th, copied from the header row) on the reading side and the value beside it; a long value continues below.
   Words wrap only between words. */
@media (max-width:640px){
  table.t-card{display:block;width:100%!important;min-width:0!important;max-width:100%;table-layout:auto!important;border:0}
  table.t-card colgroup,table.t-card col{display:none}
  /* the caption spans the card list: left as a table caption inside a block table it shrank to its longest word and
     broke after almost every word (the editor's phone screenshot, 30 October 2026) */
  table.t-card caption:not(.cl-sr):not(.res-vh):not(.ut-sr){display:block;text-align:start;margin:0 0 .55rem}
  /* chips and flags with a long label wrap on a phone instead of pushing the page sideways; a ranking card's heading
     takes the full width above its score (phone width sweep, 30 October 2026) */
  .chip,.flag,.ag2-chip{white-space:normal;max-width:100%}
  .chip{flex-wrap:wrap}
  
  .rk-ch-h>div:first-child{flex:1 1 100%;min-width:0}
  table.t-card thead,table.t-card tr.t-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  table.t-card tbody,table.t-card tfoot{display:block;width:100%}
  table.t-card tr{display:block;width:auto;padding:.7rem .85rem .55rem;margin:0 0 .6rem;border:1px solid var(--rule-soft);background:var(--paper)}
  table.t-card tr:hover{background:var(--paper)}
  table.t-card tr.t-group{padding:.4rem 0 .2rem;border:0;background:none;margin:.4rem 0 .2rem}
  table.t-card td,table.t-card tbody th,table.t-card tfoot th{display:flow-root;width:auto!important;min-width:0!important;max-width:none!important;padding:.32rem 0!important;border:0!important;text-align:start!important;
    white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:manual;background:none;position:static}
  table.t-card td::before,table.t-card tbody th::before,table.t-card tfoot th::before{content:attr(data-th);font-family:var(--mono);font-size:var(--fs-label);
    font-weight:600;color:var(--muted);line-height:1.35;letter-spacing:0;text-transform:none;float:inline-start;width:42%;padding-inline-end:.75rem;box-sizing:border-box;margin:0}
  table.t-card td[data-th=""],table.t-card tbody th[data-th=""],table.t-card td:not([data-th]){display:block}
  table.t-card td[data-th=""]::before,table.t-card tbody th[data-th=""]::before,table.t-card td:not([data-th])::before{content:none}
  table.t-card tr>:first-child{display:block;font-weight:600;font-size:1rem;line-height:1.4;padding:0 0 .45rem!important;margin:0 0 .3rem;border-bottom:1px solid var(--rule-soft)!important}
  table.t-card tr>:first-child::before{content:none}
  table.t-card tr.t-group>:first-child{border:0!important;font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
  table.t-card td:empty{display:none}
  table.t-card td>*{min-width:0;max-width:100%}
  table.t-card td :is(a,span,bdi,b,strong,em){overflow-wrap:normal;word-break:normal}
  
  
}
/* a row heading that needs its column's name to make sense on its own as a card heading (the actions grid) */

.t-nw{white-space:nowrap}

/* ---------- native date fields (PRD decision tools 13.2; the editor's phone, 1 November 2026): an iPhone draws a date field
   at its own width, wider than its column (it stood out past the deck's card at 390 px); every date field keeps to its
   column, starts where the other fields start and keeps a finger's height. date-field.js adds the chosen date in the
   portal's Arabic date style under it on Arabic pages (.date-say). ---------- */
input[type="date"],input[type="time"]{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-align:start;min-height:44px;line-height:1.3}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value{text-align:start;min-height:1.3em}
.asof-row input[type="date"]{width:auto;min-width:10.5em}
.asof-row .date-say{flex-basis:100%;order:3;margin-top:0}
.date-say{display:block;margin-top:var(--sp-1);font-size:var(--fs-small);line-height:1.4;color:var(--muted)}
.date-say[hidden]{display:none}