/* =============================================================================
   Pakistan Trade Dashboard – "Crystal" design system
   Pakistan Bureau of Statistics · Developer: Arsalan Bashir

   Glass surfaces over a soft gradient backdrop. Exports = green, imports = red
   (lightness-separated pair, checked for protan/deutan separation: light
   #0d6e4f/#ee6352, dark #45d49a/#d24d43). Other categorical data keeps the
   validated palette --s1..--s8.
   ============================================================================= */

@font-face {
    font-family: "Inter";
    src: url(../vendor/inter/inter-latin-wght-normal.woff2) format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    color-scheme: light;
    --gutter: 16px;
    --brand: #0b6b47;
    --brand-strong: #064d36;
    --brand-wash: #e3f4ec;
    --a1: #0a5c40;
    --a2: #13a07a;

    /* surfaces */
    --page: #eef4f1;
    --surface: #f8fbfa;                      /* solid fallback; also the gap colour inside charts */
    --surface-2: rgba(13, 110, 79, .06);
    --glass: rgba(255, 255, 255, .64);
    --glass-strong: rgba(255, 255, 255, .84);
    --glass-border: rgba(255, 255, 255, .78);
    --glass-edge: rgba(13, 60, 45, .08);
    --glass-blur: blur(18px) saturate(170%);
    --shadow: 0 1px 1px rgba(255, 255, 255, .9) inset, 0 10px 30px rgba(14, 58, 44, .08), 0 1px 3px rgba(14, 58, 44, .06);
    --shadow-hover: 0 1px 1px rgba(255, 255, 255, .9) inset, 0 18px 44px rgba(14, 58, 44, .14), 0 2px 6px rgba(14, 58, 44, .08);
    --ink: #0d1a15;
    --ink-2: #44524c;
    --muted: #66746e;
    --grid: rgba(13, 60, 45, .09);
    --axis: rgba(13, 60, 45, .22);
    --border: rgba(13, 60, 45, .10);

    /* trade flows */
    --exports: #0d6e4f;   --exports-hi: #2bb487;
    --imports: #ee6352;   --imports-hi: #ff9a87;
    --balance: #2c3a35;

    /* categorical (validated palette, fixed order) */
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
    --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;

    /* sequential ramps (light -> dark) */
    --q100: #cde2fb; --q200: #9ec5f4; --q300: #6da7ec; --q400: #3987e5; --q500: #256abf; --q600: #184f95; --q700: #0d366b;
    --g100: #e3f5ec; --g200: #b9e6cf; --g300: #86d1ad; --g400: #4fb589; --g500: #23966b; --g600: #0d7552; --g700: #07543a;
    --r100: #fde8e4; --r200: #fbc6bc; --r300: #f79c8c; --r400: #ef6f5c; --r500: #d94b3c; --r600: #b0302a; --r700: #7f1d1d;
    /* diverging: deficit (red) <-> surplus (green), neutral mid */
    --div-neg-3: #a3222b; --div-neg-2: #e2503f; --div-neg-1: #f7b2a8; --div-mid: #e7ecea;
    --div-pos-1: #a7dcc4; --div-pos-2: #23996b; --div-pos-3: #0b5a40;

    --good: #12a150; --good-text: #0b6b47; --critical: #e2503f; --critical-text: #b8322a; --warning: #f2a516;
    --radius: 18px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }
@media (min-width: 1800px) { :root { --gutter: 44px; } }

/* Page accents: hero bands, markers, tile washes. */
body[data-page="Index"]    { --a1: #064d36; --a2: #17a57c; --a3: #ee6352; }
body[data-page="Exports"]  { --a1: #053f2c; --a2: #1fae80; --a3: #8be0b8; }
body[data-page="Imports"]  { --a1: #861a22; --a2: #ef6a55; --a3: #ffb199; }
body[data-page="ReExports"] { --a1: #075246; --a2: #269f8b; --a3: #8de0cd; }
body[data-page="ReImports"] { --a1: #71304b; --a2: #c15c78; --a3: #efb1c2; }
body[data-page="Partners"] { --a1: #0a4f5c; --a2: #1fb0a6; --a3: #7bd8cf; }
body[data-page="Country"]  { --a1: #29297a; --a2: #6c63d9; --a3: #b4adff; }
body[data-page="Product"]  { --a1: #4b2577; --a2: #a35bd6; --a3: #e1b8ff; }
body[data-page="Ports"]    { --a1: #0c3557; --a2: #2a86c4; --a3: #8fd0ff; }
body[data-page="Insights"] { --a1: #7d1945; --a2: #e45a7e; --a3: #ffb3c7; }
body[data-page="TradeDeficit"] { --a1: #6d1822; --a2: #c64b43; --a3: #efb06b; }
body[data-page="Explorer"] { --a1: #102f45; --a2: #1b8fa6; --a3: #f2b84b; }
body[data-page="About"]    { --a1: #0a4f3a; --a2: #2f9a6a; --a3: #9fe0c0; }
body[data-page="Login"], body[data-page="Signup"], body[data-page="ForgotPassword"], body[data-page="ChangePassword"], body[data-page="AccessDenied"] { --a1: #0a4f3a; --a2: #1f9a76; --a3: #9fe0c0; }
body[data-page="DataImport"] { --a1: #0b3f5e; --a2: #0e9f8a; --a3: #8fe3d4; }
body[data-page="Admin"] { --a1: #26364a; --a2: #357b71; --a3: #8dd3bd; }
body[data-page="Users"], body[data-page="Access"], body[data-page="Traffic"], body[data-page="Contacts"], body[data-page="Operations"], body[data-page="AdminGuide"] { --a1: #26364a; --a2: #357b71; --a3: #8dd3bd; }
body[data-page="China"]    { --a1: #7f1416; --a2: #d8342a; --a3: #f6c344; }
body[data-page="USA"]      { --a1: #142a5c; --a2: #3d63c4; --a3: #e2525c; }
body[data-page="India"]    { --a1: #7a3514; --a2: #e28a28; --a3: #5ea85a; }
body[data-page="Afghanistan"] { --a1: #313131; --a2: #a52b2b; --a3: #3e8c58; }
body[data-page="Energy"]   { --a1: #0d3b56; --a2: #2b8fc7; --a3: #f2a541; }
body[data-page="Continent"] { --a1: #173d6b; --a2: #2a9d8f; --a3: #e9c46a; }
body[data-page="Neighbours"] { --a1: #3d2c1e; --a2: #b5651d; --a3: #f2c57c; }
body[data-page="Groupings"] { --a1: #1d3557; --a2: #457b9d; --a3: #a8dadc; }
body[data-page="Governments"] { --a1: #2b2d42; --a2: #5c677d; --a3: #c9ada7; }
body[data-page="Food"]     { --a1: #3f5512; --a2: #8aa832; --a3: #f0b43c; }
body[data-page="Pulses"]   { --a1: #614315; --a2: #b47a28; --a3: #ead08a; }
body[data-page="Textiles"] { --a1: #0f4c3a; --a2: #2e9b74; --a3: #e7d8b1; }
body[data-page="Machinery"] { --a1: #303f68; --a2: #5879bd; --a3: #b8c9ec; }
body[data-page="Transport"] { --a1: #49325f; --a2: #8a5ca8; --a3: #d8bce8; }
body[data-page="Prices"]   { --a1: #3b2a6b; --a2: #7b5cd6; --a3: #f2b84b; }
body[data-page="EndUse"]   { --a1: #18465c; --a2: #2f8fa8; --a3: #f0a35e; }
body[data-page="Bulletin"] { --a1: #0b3d2e; --a2: #1f8f68; --a3: #d9b45a; }
body[data-page="Outlook"]  { --a1: #233a66; --a2: #4a78c9; --a3: #9fd3a8; }
body[data-page="Anomalies"] { --a1: #4a1f2a; --a2: #b2475c; --a3: #f0c27b; }
body[data-page="WheatSugar"] { --a1: #5c3d0e; --a2: #c08a2a; --a3: #f3d68a; }
body[data-page="Wheat"]    { --a1: #5c3d0e; --a2: #b98222; --a3: #f3d68a; }
body[data-page="Sugar"]    { --a1: #623326; --a2: #bd684d; --a3: #efd0b8; }
body[data-page="Rice"]     { --a1: #31511d; --a2: #789c3d; --a3: #e0c66d; }
body[data-page="EdibleOil"] { --a1: #66500e; --a2: #c49819; --a3: #f1d46a; }
body[data-page="Tea"]      { --a1: #53311f; --a2: #9a6040; --a3: #d8ae83; }

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --brand: #45d49a; --brand-strong: #7ee6b8; --brand-wash: #10261c;
        --page: #08100d; --surface: #141c18; --surface-2: rgba(255, 255, 255, .05);
        --glass: rgba(22, 30, 27, .58); --glass-strong: rgba(24, 33, 29, .86); --glass-border: rgba(255, 255, 255, .09); --glass-edge: rgba(255,255,255,.06);
        --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 30px rgba(0, 0, 0, .35);
        --shadow-hover: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 18px 44px rgba(0, 0, 0, .5);
        --ink: #f3faf7; --ink-2: #c2cfca; --muted: #93a19b; --grid: rgba(255, 255, 255, .07); --axis: rgba(255, 255, 255, .16); --border: rgba(255, 255, 255, .09);
        --exports: #45d49a; --exports-hi: #8ef0c4; --imports: #d24d43; --imports-hi: #f0806f; --balance: #d5e0db;
        --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
        --q100: #0d366b; --q200: #104281; --q300: #184f95; --q400: #256abf; --q500: #3987e5; --q600: #6da7ec; --q700: #9ec5f4;
        --g100: #0c2e22; --g200: #11503a; --g300: #167152; --g400: #1f936b; --g500: #36b485; --g600: #6fd3a8; --g700: #b5ecd2;
        --r100: #3a1513; --r200: #5e1f1b; --r300: #8a2a24; --r400: #b9372f; --r500: #e05a4d; --r600: #f2907f; --r700: #fbc9bf;
        --div-neg-3: #f2907f; --div-neg-2: #d24d43; --div-neg-1: #6a2420; --div-mid: #2c3632;
        --div-pos-1: #164d38; --div-pos-2: #2fae7d; --div-pos-3: #8ef0c4;
        --good: #2fbf71; --good-text: #45d49a; --critical: #e0503f; --critical-text: #ff8b7d;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #45d49a; --brand-strong: #7ee6b8; --brand-wash: #10261c;
    --page: #08100d; --surface: #141c18; --surface-2: rgba(255, 255, 255, .05);
    --glass: rgba(22, 30, 27, .58); --glass-strong: rgba(24, 33, 29, .86); --glass-border: rgba(255, 255, 255, .09); --glass-edge: rgba(255,255,255,.06);
    --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 30px rgba(0, 0, 0, .35);
    --shadow-hover: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 18px 44px rgba(0, 0, 0, .5);
    --ink: #f3faf7; --ink-2: #c2cfca; --muted: #93a19b; --grid: rgba(255, 255, 255, .07); --axis: rgba(255, 255, 255, .16); --border: rgba(255, 255, 255, .09);
    --exports: #45d49a; --exports-hi: #8ef0c4; --imports: #d24d43; --imports-hi: #f0806f; --balance: #d5e0db;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --q100: #0d366b; --q200: #104281; --q300: #184f95; --q400: #256abf; --q500: #3987e5; --q600: #6da7ec; --q700: #9ec5f4;
    --g100: #0c2e22; --g200: #11503a; --g300: #167152; --g400: #1f936b; --g500: #36b485; --g600: #6fd3a8; --g700: #b5ecd2;
    --r100: #3a1513; --r200: #5e1f1b; --r300: #8a2a24; --r400: #b9372f; --r500: #e05a4d; --r600: #f2907f; --r700: #fbc9bf;
    --div-neg-3: #f2907f; --div-neg-2: #d24d43; --div-neg-1: #6a2420; --div-mid: #2c3632;
    --div-pos-1: #164d38; --div-pos-2: #2fae7d; --div-pos-3: #8ef0c4;
    --good: #2fbf71; --good-text: #45d49a; --critical: #e0503f; --critical-text: #ff8b7d;
}

/* ---------- base & backdrop ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55;
    font-feature-settings: "cv11", "ss01";
    background-color: var(--page);
    background-image:
        radial-gradient(900px 620px at -5% -5%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 62%),
        radial-gradient(820px 600px at 105% 0%, color-mix(in srgb, var(--a3) 22%, transparent), transparent 60%),
        radial-gradient(1000px 700px at 50% 108%, color-mix(in srgb, var(--a1) 14%, transparent), transparent 62%),
        radial-gradient(640px 420px at 82% 55%, color-mix(in srgb, var(--a2) 8%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--page) 70%, #fff), var(--page));
    background-attachment: fixed;
}
body::before {   /* faint survey grid */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 44px 44px; opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
body > main { flex: 1 0 auto; }
a { color: var(--a1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); letter-spacing: -0.015em; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }
:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
.glass {
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow);
}

/* ---------- header ---------- */
.site-header {
    position: relative; z-index: 5;
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid color-mix(in srgb, var(--a2) 22%, var(--glass-edge));
}
:root[data-theme="dark"] .site-header { background: linear-gradient(180deg, rgba(20, 28, 25, .9), rgba(20, 28, 25, .6)); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .site-header { background: linear-gradient(180deg, rgba(20, 28, 25, .9), rgba(20, 28, 25, .6)); } }
.site-header .bar { display: flex; align-items: center; gap: 18px; min-height: 88px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: auto; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(7, 74, 53, .25)); transition: transform .25s; }
.brand:hover .brand-mark { transform: scale(1.05); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { font-size: 21px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; }
.brand-title b {
    font-weight: 800; background: linear-gradient(90deg, var(--exports), #13a07a 55%, var(--imports));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
/* Transparent banner art (header-banner.png, 5:1): right-aligned, sits on the header baseline; the left edge fades out when space is tight. */
.header-art { flex: 1; align-self: stretch; min-width: 0; display: flex; justify-content: flex-end; align-items: flex-end; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px); mask-image: linear-gradient(to right, transparent 0, #000 64px); }
.header-art img { height: 88px; width: auto; max-width: none; display: block; object-fit: contain; object-position: right bottom; }
:root[data-theme="dark"] .header-art img { filter: brightness(.9); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .header-art img { filter: brightness(.9); } }
@media (max-width: 1100px) { .header-art img { height: 76px; } }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 13px;
    border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-2);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 550; box-shadow: var(--shadow);
    transition: color .15s, transform .15s;
}
.icon-btn:hover { color: var(--brand); transform: translateY(-1px); text-decoration: none; }
@media (max-width: 767px) { .header-art { display: none; } .brand-title { font-size: 17px; } .brand-sub { display: none; } .brand-mark { width: auto; height: 50px; } .site-header .bar { min-height: 66px; justify-content: space-between; } }

.site-nav {
    position: relative; z-index: 40;   /* above the sticky filter bar so menus can drop over it */
    background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 62%, #000) 0%, color-mix(in srgb, var(--a1) 88%, #000) 40%, var(--a1) 75%, color-mix(in srgb, var(--a1) 75%, var(--a2)) 100%);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--a1) 22%, transparent);
}
.site-nav::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); pointer-events: none; }
.site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--a2), var(--a3) 50%, var(--a2)); opacity: .85; }
.site-nav ul { position: relative; list-style: none; margin: 0; padding: 7px 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
    display: flex; align-items: center; gap: 7px; white-space: nowrap; color: rgba(255, 255, 255, .86);
    padding: 8px 14px; font-weight: 550; font-size: 14.5px; border-radius: 999px; transition: background .15s, color .15s;
}
.site-nav a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .13); }
/* Active item: a tinted glass pill with an accent underline, in the bar's own colours. */
.site-nav a.active { color: #fff; background: color-mix(in srgb, var(--a2) 30%, rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -3px 0 color-mix(in srgb, var(--a2) 55%, #fff); }
.site-nav a.active i { color: #fff; }
.site-nav li.nav-right { margin-left: auto; }
/* Nested menus: a pill trigger that opens a glass panel (hover, focus or click). */
.nav-trigger {
    display: flex; align-items: center; gap: 7px; white-space: nowrap; color: rgba(255, 255, 255, .86); background: none; border: 0; cursor: pointer;
    padding: 8px 14px; font: inherit; font-weight: 550; font-size: 14.5px; border-radius: 999px; transition: background .15s, color .15s;
}
.nav-trigger .caret { font-size: 11px; opacity: .8; transition: transform .15s; }
.nav-trigger:hover, .has-sub.open > .nav-trigger { color: #fff; background: rgba(255, 255, 255, .13); }
.nav-trigger.active, .has-sub > .nav-trigger.active { color: #fff; background: color-mix(in srgb, var(--a2) 30%, rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -3px 0 color-mix(in srgb, var(--a2) 55%, #fff); }
.nav-trigger.active i { color: #fff; }
.site-nav .has-sub { position: relative; }
.site-nav ul.sub {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 232px; padding: 8px; flex-direction: column; gap: 2px; overflow: visible;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.site-nav ul.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* hover bridge */
.has-sub:hover > ul.sub, .has-sub:focus-within > ul.sub, .has-sub.open > ul.sub { display: flex; }
.has-sub:hover > .nav-trigger .caret, .has-sub.open > .nav-trigger .caret { transform: rotate(180deg); }
.site-nav ul.sub a { color: var(--ink); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.site-nav ul.sub a i { color: var(--a2); }
.site-nav ul.sub a:hover { background: color-mix(in srgb, var(--a2) 12%, transparent); color: var(--ink); }
.site-nav ul.sub a.active { color: var(--a1); background: color-mix(in srgb, var(--a3) 26%, transparent); box-shadow: none; }
.site-nav ul.sub .fi { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.site-nav .sub-head { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; }
.site-nav .has-nested { position: relative; }
.nested-trigger {
    width: 100%; display: flex; align-items: center; gap: 7px; color: var(--ink); background: none; border: 0; cursor: pointer;
    padding: 9px 12px; font: inherit; font-weight: 550; font-size: 14px; border-radius: 10px; text-align: left;
}
.nested-trigger .caret { margin-left: auto; font-size: 11px; transition: transform .15s; }
.nested-trigger:hover, .has-nested.open > .nested-trigger { color: var(--ink); background: color-mix(in srgb, var(--a2) 12%, transparent); }
.nested-trigger.active { color: var(--a1); background: color-mix(in srgb, var(--a3) 26%, transparent); }
.nested-trigger > i:first-child { color: var(--a2); }
.site-nav ul.nested-sub {
    display: none; position: absolute; top: -8px; left: calc(100% + 8px); z-index: 31; min-width: 210px; padding: 8px; flex-direction: column; gap: 2px; overflow: visible;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.site-nav ul.nested-sub::before { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; width: 9px; }
.has-nested:hover > ul.nested-sub, .has-nested:focus-within > ul.nested-sub, .has-nested.open > ul.nested-sub { display: flex; }
.has-nested:hover > .nested-trigger .caret, .has-nested.open > .nested-trigger .caret { transform: rotate(90deg); }
:root[data-theme="dark"] .site-nav ul.sub { background: rgba(22, 30, 27, .97); }
:root[data-theme="dark"] .site-nav ul.nested-sub { background: rgba(22, 30, 27, .97); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .site-nav ul.sub { background: rgba(22, 30, 27, .97); } }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .site-nav ul.nested-sub { background: rgba(22, 30, 27, .97); } }
@media (min-width: 901px) { .site-nav > .wrap > ul { overflow: visible; } }
/* Small screens: flatten the groups back into the scrolling strip. */
@media (max-width: 900px) {
    .site-nav .has-sub, .site-nav ul.sub, .site-nav ul.sub::before { display: contents; }
    .nav-trigger, .site-nav .sub-head { display: none; }
    .site-nav ul.sub a { color: rgba(255, 255, 255, .86); border-radius: 999px; padding: 8px 14px; font-size: 14.5px; }
    .site-nav ul.sub a i { color: inherit; }
    .site-nav ul.sub a.active { color: #fff; background: color-mix(in srgb, var(--a2) 30%, rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -3px 0 color-mix(in srgb, var(--a2) 55%, #fff); }
    .site-nav ul.sub a.active i { color: #fff; }
    .site-nav .has-nested, .site-nav ul.nested-sub, .site-nav ul.nested-sub::before { display: contents; }
    .nested-trigger { display: none; }
}
.nav-form { margin: 0; display: flex; }
.nav-btn {
    display: flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
    background: rgba(255, 255, 255, .1); padding: 7px 14px; font: inherit; font-weight: 550; font-size: 14px; border-radius: 999px; cursor: pointer;
}
.nav-btn:hover { background: rgba(255, 255, 255, .2); }
.nav-btn.nav-icon { padding: 7px 11px; border-color: transparent; background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .site-nav { background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 35%, #000), color-mix(in srgb, var(--a1) 55%, #000) 60%, color-mix(in srgb, var(--a1) 70%, #000)); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .site-nav { background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 35%, #000), color-mix(in srgb, var(--a1) 55%, #000) 60%, color-mix(in srgb, var(--a1) 70%, #000)); } }

/* ---------- filter bar ---------- */
.filterbar {
    position: sticky; top: 0; z-index: 30;
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-edge); box-shadow: 0 6px 20px rgba(14, 58, 44, .06);
}
.filterbar .row-f { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; padding-top: 10px; padding-bottom: 10px; }
.fgroup { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filterbar .row-f { align-items: center; }
.filterbar .fgroup { flex-direction: row; align-items: center; gap: 8px; }   /* label and control on one line */
.filterbar .fgroup label { white-space: nowrap; }
.fgroup label { font-size: 11.5px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
.fgroup select, .fgroup input[type=month], .fgroup input[type=text], .fgroup input[type=search], .fgroup input[type=password], .fgroup input[type=email], .fgroup input[type=tel], .fgroup input[type=number] {
    height: 40px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink);
    border-radius: 12px; padding: 0 12px; font: inherit; font-size: 14px; min-width: 0;
    box-shadow: 0 1px 2px rgba(14, 58, 44, .06), 0 0 0 1px var(--glass-edge);
}
.fgroup select:focus, .fgroup input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a2) 25%, transparent), 0 0 0 1px var(--a2); }
.seg { display: inline-flex; border-radius: 12px; overflow: hidden; background: var(--surface-2); padding: 3px; gap: 2px; box-shadow: 0 0 0 1px var(--glass-edge) inset; }
.seg button { border: 0; background: transparent; color: var(--ink-2); height: 32px; padding: 0 13px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 9px; transition: background .15s, color .15s; }
.seg button:hover:not(:disabled) { color: var(--ink); background: var(--glass-strong); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg button.on { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--a1) 35%, transparent), 0 1px 0 rgba(255,255,255,.25) inset; }
.seg button[data-f="x"].on, .seg button[data-m="x"].on { background: linear-gradient(135deg, #064d36, var(--exports-hi)); }
.seg button[data-f="m"].on, .seg button[data-m="m"].on { background: linear-gradient(135deg, #a3222b, var(--imports)); }
.period-note {
    font-size: 13px; color: var(--ink-2); margin-left: auto; padding: 8px 14px; border-radius: 999px;
    background: var(--glass-strong); box-shadow: 0 0 0 1px var(--glass-edge) inset;
}
.period-note::before { content: "\f211"; font-family: "bootstrap-icons"; color: var(--a2); margin-right: 7px; vertical-align: -1px; }
.period-note b { color: var(--ink); }
@media (max-width: 767px) { .period-note { margin-left: 0; width: 100%; border-radius: 12px; } }

/* Filter bar floating over the page hero (body.fb-over, set by trade.js). Clear while over the hero, solid glass once .stuck. */
body.fb-over .filterbar { margin-bottom: calc(-1 * var(--fb-h, 60px)); transition: background .2s, box-shadow .2s, border-color .2s; }
body.fb-over .filterbar:not(.stuck) { background: transparent; border-bottom-color: rgba(255, 255, 255, .14); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Over the hero the labels are visually hidden (still read by screen readers); the controls speak for themselves. */
body.fb-over .filterbar:not(.stuck) .fgroup label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.fb-over .filterbar:not(.stuck) .fgroup select, body.fb-over .filterbar:not(.stuck) .fgroup input[type=month] {
    background-color: rgba(0, 0, 0, .24); color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color-scheme: dark;
}
body.fb-over .filterbar:not(.stuck) .fgroup select:hover { background-color: rgba(0, 0, 0, .34); }
body.fb-over .filterbar:not(.stuck) .fgroup select option { color: #0d1a15; background: #fff; }
body.fb-over .filterbar:not(.stuck) .seg { background: rgba(0, 0, 0, .28); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.fb-over .filterbar:not(.stuck) .seg button { color: rgba(255, 255, 255, .9); }
body.fb-over .filterbar:not(.stuck) .seg button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
body.fb-over .filterbar:not(.stuck) .seg button.on { background: rgba(255, 255, 255, .82); color: var(--a1); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
body.fb-over .filterbar:not(.stuck) .period-note { background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.fb-over .filterbar:not(.stuck) .period-note b, body.fb-over .filterbar:not(.stuck) .period-note::before { color: #fff; }
body.fb-over .page-head { padding-top: calc(30px + var(--fb-h, 60px)); }

/* ---------- page hero ---------- */
.page-head {
    position: relative; overflow: hidden; margin: 0 calc(-1 * var(--gutter)); padding: 34px var(--gutter) 78px; color: #fff;
    background:
        radial-gradient(600px 300px at 85% 0%, color-mix(in srgb, var(--a3, #fff) 45%, transparent), transparent 70%),
        linear-gradient(120deg, var(--a1) 0%, color-mix(in srgb, var(--a1) 45%, var(--a2)) 55%, var(--a2) 100%);
}
.page-head::before {   /* glossy sheen + light streak */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%),
        linear-gradient(115deg, transparent 52%, rgba(255, 255, 255, .10) 52%, rgba(255, 255, 255, .02) 70%, transparent 70%);
}
.page-head::after {    /* dot grid */
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 50%; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.3px); background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
}
.page-head > * { position: relative; z-index: 1; }
/* One hero height on every page, with or without banner artwork. */
.page-head { min-height: 380px; }
@media (max-width: 767px) { .page-head { min-height: 260px; } }
body[data-page="About"] .page-head { min-height: 190px; padding-top: 24px; padding-bottom: 50px; }
@media (max-width: 767px) { body[data-page="About"] .page-head { min-height: 150px; padding-top: 18px; padding-bottom: 42px; } }
body[data-page="Admin"] .page-head,
body[data-page="Users"] .page-head,
body[data-page="Access"] .page-head,
body[data-page="Contacts"] .page-head,
body[data-page="Traffic"] .page-head,
body[data-page="DataImport"] .page-head,
body[data-page="Operations"] .page-head,
body[data-page="AdminGuide"] .page-head { min-height: 190px; padding-top: 24px; padding-bottom: 50px; }
@media (max-width: 767px) {
    body[data-page="Admin"] .page-head,
    body[data-page="Users"] .page-head,
    body[data-page="Access"] .page-head,
    body[data-page="Contacts"] .page-head,
    body[data-page="Traffic"] .page-head,
    body[data-page="DataImport"] .page-head,
    body[data-page="Operations"] .page-head,
    body[data-page="AdminGuide"] .page-head { min-height: 150px; padding-top: 18px; padding-bottom: 42px; }
}
/* Compact banners for item analysis and selected analytical pages. */
body[data-page="Product"] .page-head,
body[data-page="Wheat"] .page-head,
body[data-page="Sugar"] .page-head,
body[data-page="Pulses"] .page-head,
body[data-page="Rice"] .page-head,
body[data-page="EdibleOil"] .page-head,
body[data-page="Tea"] .page-head,
body[data-page="TradeDeficit"] .page-head,
body[data-page="Neighbours"] .page-head,
body[data-page="Groupings"] .page-head,
body[data-page="Governments"] .page-head,
body[data-page="Prices"] .page-head, body[data-page="EndUse"] .page-head, body[data-page="Bulletin"] .page-head,
body[data-page="Outlook"] .page-head, body[data-page="Anomalies"] .page-head,
body[data-page="Machinery"] .page-head { min-height: 250px; }
@media (max-width: 767px) {
    body[data-page="Product"] .page-head,
    body[data-page="Wheat"] .page-head,
    body[data-page="Sugar"] .page-head,
    body[data-page="Pulses"] .page-head,
    body[data-page="Rice"] .page-head,
    body[data-page="EdibleOil"] .page-head,
    body[data-page="Tea"] .page-head,
    body[data-page="TradeDeficit"] .page-head,
    body[data-page="Neighbours"] .page-head,
    body[data-page="Groupings"] .page-head,
    body[data-page="Governments"] .page-head,
    body[data-page="Prices"] .page-head, body[data-page="EndUse"] .page-head, body[data-page="Bulletin"] .page-head,
    body[data-page="Outlook"] .page-head, body[data-page="Anomalies"] .page-head,
    body[data-page="Machinery"] .page-head { min-height: 190px; }
}
.page-head .hero-icon {
    position: absolute; right: calc(var(--gutter) + 10px); top: 50%; transform: translateY(-58%) rotate(-8deg); z-index: 0;
    font-size: 190px; line-height: 1; pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .15));
}
.page-head .hero-icon.alt { right: calc(var(--gutter) + 210px); font-size: 96px; transform: translateY(-20%) rotate(10deg); opacity: .7; }
@media (max-width: 991px) { .page-head .hero-icon { font-size: 120px; opacity: .6; } .page-head .hero-icon.alt { display: none; } }
.page-head h1 { font-size: clamp(27px, 2.5vw, 36px); font-weight: 780; margin: 0 0 6px; color: #fff; letter-spacing: -0.025em; display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 14px rgba(0, 0, 0, .15); }
.page-head h1 > i { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; align-items: center; justify-content: center; font-size: 24px; background: rgba(255, 255, 255, .16); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
.page-head .lede { color: rgba(255, 255, 255, .92); margin: 0; max-width: 980px; font-size: 15.5px; }
.public-scope { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,255,255,.88); background: rgba(0,0,0,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px; }
.public-scope span { font-weight: 800; color: #fff; }
.public-scope b { padding-left: 7px; border-left: 1px solid rgba(255,255,255,.25); font-weight: 600; }
body[data-page="Index"] .page-head, body[data-page="Exports"] .page-head, body[data-page="Imports"] .page-head, body[data-page="ReExports"] .page-head, body[data-page="ReImports"] .page-head { min-height: 300px; }
@media (max-width: 767px) { body[data-page="Index"] .page-head, body[data-page="Exports"] .page-head, body[data-page="Imports"] .page-head, body[data-page="ReExports"] .page-head, body[data-page="ReImports"] .page-head { min-height: 225px; } .public-scope { border-radius: 14px; } }
.page-head .lede b { color: #fff; }
.page-head .lede .muted { color: rgba(255, 255, 255, .75); }
.page-head .badge-soft { background: rgba(255, 255, 255, .18); color: #fff; }
.page-head .crumbs { font-size: 13px; color: rgba(255, 255, 255, .8); margin-bottom: 6px; }
.page-head .crumbs a, .page-head .crumbs b { color: #fff; }
.page-head .chips .chip { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-head .chips .chip:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.page-head .fi { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); border-radius: 3px; }
:root[data-theme="dark"] .page-head { filter: saturate(.9) brightness(.82); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .page-head { filter: saturate(.9) brightness(.82); } }

.page-head + #valueNotice:empty + .grid, .page-head + .grid,
.page-head ~ #cBody > .grid:first-child, .page-head ~ #body > .grid:first-child,
.page-head ~ #landing, .page-head ~ #cPick { margin-top: -50px; position: relative; z-index: 2; }
.page-head + #valueNotice:not(:empty) { margin-top: -50px; position: relative; z-index: 2; }

/* ---------- grid & sections ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 20px 0; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; }
.c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
@media (max-width: 1199px) { .c3 { grid-column: span 6; } .c4 { grid-column: span 6; } .c8, .c7, .c5 { grid-column: span 12; } }
@media (max-width: 767px) { .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; } .grid { gap: 14px; } }
.section-title { grid-column: span 12; display: flex; align-items: center; gap: 12px; margin: 16px 0 -4px; flex-wrap: wrap; }
.section-title h2 { font-size: 20px; font-weight: 750; margin: 0; display: flex; align-items: center; gap: 12px; }
.section-title h2 > i {
    display: inline-flex; width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; font-size: 18px; color: #fff;
    background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--a1) 35%, transparent), 0 1px 0 rgba(255,255,255,.3) inset;
}
.section-title h2:not(:has(> i))::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.section-title .muted { font-size: 13px; }
.section-title::after { content: ""; flex: 1; min-width: 40px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--a2) 45%, transparent), transparent); }

/* ---------- commodity story pages ---------- */
.commodity-jump { position: sticky; top: 8px; z-index: 20; width: max-content; max-width: calc(100% - 24px); margin: -28px auto 24px; padding: 6px; display: flex; gap: 3px; overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 999px; background: color-mix(in srgb,var(--surface) 88%,transparent); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.commodity-jump a { padding: 8px 13px; border-radius: 999px; color: var(--ink-2); font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.commodity-jump a:hover { color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); }
.commodity-page .section-title { scroll-margin-top: 76px; }
.commodity-snapshot { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; padding: 14px; border: 1px solid var(--glass-border); border-radius: calc(var(--radius) + 4px); background: linear-gradient(135deg,color-mix(in srgb,var(--a3) 18%,var(--glass)),var(--glass)); box-shadow: var(--shadow); }
.commodity-snapshot .tile { min-height: 150px; box-shadow: none; border-color: color-mix(in srgb,var(--a2) 18%,var(--border)); }
.commodity-snapshot .t-value.compact { font-size: clamp(17px,1.8vw,25px); line-height: 1.15; }
.snapshot-narrative { grid-column: 1/-1; display: grid; grid-template-columns: 145px minmax(190px,.7fr) 1fr; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 14px; color: #fff; background: linear-gradient(115deg,var(--a1),color-mix(in srgb,var(--a1) 35%,var(--a2))); overflow: hidden; position: relative; }
.snapshot-narrative::after { content:""; position:absolute; width:180px; height:180px; right:-40px; top:-80px; border-radius:50%; border:28px solid rgba(255,255,255,.08); }
.snapshot-kicker { font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.snapshot-narrative strong { font-size: 18px; }.snapshot-narrative p { margin: 0; font-size: 13px; opacity: .9; }
.insight-strip { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 8px 10px 14px !important; }
.insight-strip li { min-height: 92px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb,var(--surface) 82%,transparent); }
.story-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:10px 12px; }
.story-metrics > div { padding:13px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.story-metrics small,.story-metrics strong { display:block; }.story-metrics small { color:var(--muted); font-size:10.5px; }.story-metrics strong { margin-top:4px; font-size:16px; }
.story-ranking { list-style:none; margin:4px 12px 16px; padding:0; counter-reset:rank; }
.story-ranking li { counter-increment:rank; display:flex; gap:8px; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--border); font-size:12px; }
.story-ranking li::before { content:counter(rank); width:20px; height:20px; display:grid; place-items:center; flex:none; border-radius:7px; color:#fff; background:var(--a2); font-size:10px; font-weight:800; }.story-ranking li span { flex:1; }.story-ranking li b { white-space:nowrap; }
.concentration-gauge { display:flex; flex-direction:column; align-items:center; padding:18px 12px 8px; }
.concentration-gauge > div { --score:50; width:150px; height:75px; overflow:hidden; position:relative; }
.concentration-gauge > div::before { content:""; position:absolute; inset:0; border-radius:150px 150px 0 0; background:conic-gradient(from 270deg at 50% 100%,var(--good) 0 20%,#e5b743 20% 40%,var(--critical) 40% 50%,color-mix(in srgb,var(--border) 70%,transparent) 50%); }
.concentration-gauge > div::after { content:""; position:absolute; width:104px; height:52px; left:23px; bottom:0; border-radius:104px 104px 0 0; background:var(--surface); }
.concentration-gauge span { position:absolute; z-index:1; left:0; right:0; bottom:2px; text-align:center; font-size:24px; font-weight:800; }.concentration-gauge b { margin-top:8px; }.concentration-gauge small { color:var(--muted); }
.concentration-gauge span::before { content:""; position:absolute; left:50%; bottom:24px; width:2px; height:45px; border-radius:2px; background:var(--ink); transform-origin:50% 100%; transform:rotate(calc(-90deg + var(--score) * 1.8deg)); box-shadow:0 0 0 2px var(--surface); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.commodity-evidence { scroll-margin-top:76px; border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass); box-shadow:var(--shadow); overflow:hidden; }
.commodity-evidence > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; }.commodity-evidence > summary::-webkit-details-marker { display:none; }
.commodity-evidence > summary > span { display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:center; }.commodity-evidence > summary span > i { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--a1),var(--a2)); }.commodity-evidence > summary b { font-size:16px; }.commodity-evidence > summary small { color:var(--muted); }.commodity-evidence[open] > summary > .bi { transform:rotate(180deg); }.commodity-evidence > summary > .bi { transition:transform .2s; }
.evidence-grid { margin:0; padding:0 14px 14px; }
.episode-ribbon { display:grid; grid-template-columns:repeat(3,minmax(260px,1fr)); gap:12px; padding:8px 12px 16px; overflow-x:auto; }
.episode-card { --export:var(--exports); --import:var(--imports); position:relative; display:grid; grid-template-columns:1fr 54px 1fr; gap:8px; align-items:center; padding:15px; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--a3) 10%,var(--surface))); }
.episode-number { position:absolute; right:10px; top:8px; color:var(--muted); font-size:11px; font-weight:800; }.episode-leg { display:flex; flex-direction:column; gap:3px; }.episode-leg small { color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:9px; font-weight:800; }.episode-leg b { font-size:12px; }.episode-leg span { font-size:10.5px; color:var(--ink-2); }.episode-leg.export { border-left:3px solid var(--export); padding-left:8px; }.episode-leg.import { border-left:3px solid var(--import); padding-left:8px; }
.episode-arrow { display:flex; flex-direction:column; align-items:center; color:var(--a2); }.episode-arrow i { font-size:20px; }.episode-arrow span { font-size:9px; text-align:center; color:var(--muted); }.episode-cost { grid-column:1/-1; padding-top:9px; border-top:1px dashed var(--border); color:var(--critical-text); font-size:11px; }
@media (max-width:1050px) { .commodity-snapshot { grid-template-columns:repeat(2,1fr); }.episode-ribbon { grid-template-columns:repeat(2,minmax(280px,1fr)); }.insight-strip { grid-template-columns:1fr; } }
@media (max-width:700px) { .commodity-jump { justify-content:flex-start; margin-top:-18px; }.commodity-snapshot { grid-template-columns:1fr; }.snapshot-narrative { grid-template-columns:1fr; gap:6px; }.episode-ribbon { grid-template-columns:repeat(6,minmax(280px,86vw)); }.commodity-evidence > summary small { display:none; } }

/* ---------- panel ---------- */
.panel {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 120px), var(--glass);
    border: 1px solid var(--glass-border); border-radius: var(--radius);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow), 0 0 0 1px var(--glass-edge); transition: box-shadow .25s, transform .25s;
}
:root[data-theme="dark"] .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 120px), var(--glass); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 120px), var(--glass); } }
.panel:hover { box-shadow: var(--shadow-hover), 0 0 0 1px var(--glass-edge); }
.panel-head { display: flex; align-items: flex-start; gap: 8px; padding: 18px 20px 6px; }
.panel-titles { flex: 1; min-width: 0; }
.panel-title { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.35; display: flex; align-items: center; gap: 10px; }
.panel-title::before { content: ""; width: 5px; height: 18px; border-radius: 4px; flex-shrink: 0; background: linear-gradient(180deg, var(--a2), var(--a1)); box-shadow: 0 2px 8px color-mix(in srgb, var(--a2) 45%, transparent); }
.panel-title.stepped::before { display: none; }
.panel-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; padding-left: 15px; }
.panel-tools { display: flex; gap: 2px; flex-shrink: 0; background: var(--glass-strong); border-radius: 12px; padding: 3px; box-shadow: 0 0 0 1px var(--glass-edge) inset; opacity: .8; transition: opacity .15s; }
.panel:hover .panel-tools { opacity: 1; }
.panel-tools .tbtn { width: 31px; height: 29px; border: 0; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px; }
.panel-tools .tbtn:hover, .panel-tools .tbtn[aria-expanded=true] { background: #fff; color: var(--a1); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .panel-tools .tbtn:hover { background: rgba(255,255,255,.1); }
.panel-tools .tbtn.on { color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.panel-controls { padding: 2px 20px 4px 35px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.panel-controls .seg button { height: 27px; font-size: 12.5px; padding: 0 11px; }
.panel-body { padding: 4px 10px 10px; flex: 1; min-height: 0; position: relative; }
.panel-chart { width: 100%; }
.panel.fill .panel-body { display: flex; flex-direction: column; }
.panel.fill .panel-chart { flex: 1; position: relative; }
.panel.fill .panel-chart > div { position: absolute !important; inset: 0; }   /* canvas must not hold the height open */
.panel-table { display: none; max-height: 480px; overflow: auto; padding: 0 8px 8px; }
.panel.show-table .panel-chart { display: none; }
.panel.show-table .panel-table { display: block; }
.panel-foot { padding: 0 20px 14px 35px; font-size: 12px; color: var(--muted); }
.panel.loading .panel-body { opacity: .4; transition: opacity .2s; }
.panel.loading::after {   /* shimmering edge while loading */
    content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--a2), transparent); background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.panel .empty { padding: 44px 16px; text-align: center; color: var(--muted); }
.tariff-access {
    margin: 26px 0 38px; padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
    border: 1px solid color-mix(in srgb, var(--a2) 28%, var(--border)); border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--a3) 12%, var(--surface)), var(--surface)); box-shadow: var(--shadow);
}
.tariff-access-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); font-size: 20px; }
.tariff-access h2 { margin: 0 0 4px; font-size: 18px; }
.tariff-access p { margin: 0; color: var(--muted); font-size: 14px; }
.tariff-features { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tariff-features span { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--a2) 10%, transparent); color: var(--ink2); font-size: 12px; }
.tariff-access-action { width: auto; height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.tariff-access-action:hover { color: #fff; text-decoration: none; }
@media (max-width: 700px) {
    .tariff-access { grid-template-columns: auto 1fr; padding: 18px; }
    .tariff-access-action { grid-column: 1 / -1; justify-content: center; width: 100%; }
}
.panel:fullscreen { border-radius: 0; padding: 16px; overflow: auto; background: var(--page); }
.panel:fullscreen .panel-chart { height: calc(100vh - 150px) !important; }
.panel:fullscreen .panel-table { max-height: calc(100vh - 150px); }

.menu {
    position: absolute; right: 16px; top: 54px; z-index: 40; min-width: 236px; display: none; padding: 6px;
    background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .18), 0 0 0 1px var(--glass-edge);
}
.menu.open { display: block; animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; border-radius: 9px; cursor: pointer; }
.menu button i { color: var(--a2); width: 18px; text-align: center; }
.menu button:hover, .menu a:hover { background: color-mix(in srgb, var(--a2) 12%, transparent); text-decoration: none; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.menu .mh { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 6px 10px 2px; font-weight: 650; }

/* ---------- stat tiles ---------- */
.tile {
    --tc: var(--a2);
    position: relative; overflow: hidden; min-width: 0; padding: 18px 20px 12px; border-radius: var(--radius);
    background:
        radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--tc) 9%, transparent), transparent 60%),
        var(--glass-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--tc) 14%, transparent);
    transition: transform .25s, box-shadow .25s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover), 0 0 0 1px color-mix(in srgb, var(--tc) 22%, transparent); }
.tile .t-icon {
    position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px;
    color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 75%, #000), var(--tc));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--tc) 40%, transparent), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.tile .t-label { font-size: 13.5px; color: var(--ink-2); font-weight: 650; display: flex; align-items: center; gap: 8px; padding-right: 52px; }
.tile .t-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.tile .t-value { font-size: 32px; font-weight: 800; line-height: 1.12; margin: 10px 0 2px; letter-spacing: -0.03em; }
.tile.hero .t-value { font-size: 38px; }
.tile .t-alt { font-size: 12.5px; color: var(--muted); }
.tile .t-delta { font-size: 13.5px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tile .t-spark { height: 46px; margin: 8px -8px -4px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; padding: 2px 9px 2px 7px; border-radius: 999px; }
.delta.up-good, .delta.down-good { color: var(--good-text); background: color-mix(in srgb, var(--good) 15%, transparent); }
.delta.up-bad, .delta.down-bad { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.delta.neutral { color: var(--ink-2); background: var(--surface-2); }
table.dt .delta { padding: 0 7px 0 5px; }
.delta-vs { color: var(--muted); font-size: 12.5px; }

.mini-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mini {
    border-radius: 14px; padding: 12px 14px; border: 1px solid var(--glass-border);
    background: linear-gradient(150deg, color-mix(in srgb, var(--a2) 12%, transparent), transparent 70%), var(--glass-strong);
}
.mini .m-label { font-size: 12px; color: var(--muted); font-weight: 650; }
.mini .m-value { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.mini .m-sub { font-size: 12px; color: var(--ink-2); }

/* ---------- highlights ---------- */
.highlights { list-style: none; margin: 0; padding: 6px 20px 16px; }
.highlights li { position: relative; padding: 10px 0 10px 44px; border-bottom: 1px dashed var(--grid); font-size: 14.5px; }
.highlights li:last-child { border-bottom: 0; }
.highlights li i {
    position: absolute; left: 0; top: 8px; width: 31px; height: 31px; border-radius: 10px; font-size: 14px; display: flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--hc, var(--a1)) 70%, #000), var(--hc, var(--a1)));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--hc, var(--a1)) 35%, transparent);
}
.highlights li:nth-child(8n+1) { --hc: var(--exports); }
.highlights li:nth-child(8n+2) { --hc: var(--imports); }
.highlights li:nth-child(8n+3) { --hc: #5b6b65; }
.highlights li:nth-child(8n+4) { --hc: #c98500; }
.highlights li:nth-child(8n+5) { --hc: #a2275f; }
.highlights li:nth-child(8n+6) { --hc: #0e7c86; }
.highlights li:nth-child(8n+7) { --hc: #5b3fb0; }
.highlights li:nth-child(8n+8) { --hc: #1d6fb8; }
.highlights b { font-weight: 700; }

/* ---------- tables ---------- */
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.dt th, table.dt td { padding: 8px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
table.dt th {
    position: sticky; top: 0; z-index: 1; font-weight: 700; color: var(--ink-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; white-space: nowrap; user-select: none;
    background: color-mix(in srgb, var(--a2) 10%, var(--surface));
}
table.dt th:first-child { border-top-left-radius: 10px; } table.dt th:last-child { border-top-right-radius: 10px; }
table.dt th.num, table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dt th .arr { color: var(--a2); font-size: 10px; }
table.dt tbody tr { transition: background .12s; }
table.dt tbody tr:hover { background: color-mix(in srgb, var(--a2) 8%, transparent); }
table.dt tbody tr.clickable { cursor: pointer; }
table.dt td.code { font-variant-numeric: tabular-nums; color: var(--a1); white-space: nowrap; font-weight: 650; }
:root[data-theme="dark"] table.dt td.code { color: var(--a3, var(--brand)); }
table.dt .bar-cell { position: relative; min-width: 90px; }
table.dt .bar-cell span.b { position: absolute; left: 10px; top: 50%; height: 10px; margin-top: -5px; border-radius: 0 6px 6px 0; }
table.dt .bar-cell span.v { position: relative; }
.table-tools { display: flex; gap: 8px; align-items: center; padding: 0 20px 10px; flex-wrap: wrap; }
.table-tools input[type=search] {
    height: 36px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink); border-radius: 12px; padding: 0 12px 0 34px;
    font: inherit; font-size: 13.5px; width: 280px; max-width: 100%; box-shadow: 0 0 0 1px var(--glass-edge);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2366746e' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 12px center;
}
.table-tools input[type=search]:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a2) 22%, transparent), 0 0 0 1px var(--a2); }
.pager { display: flex; gap: 8px; align-items: center; padding: 10px 20px 14px; font-size: 13px; color: var(--muted); }
.pager button { height: 31px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink); border-radius: 10px; padding: 0 12px; cursor: pointer; font: inherit; font-size: 13px; box-shadow: 0 0 0 1px var(--glass-edge); }
.pager button:hover:not(:disabled) { color: var(--a1); box-shadow: 0 0 0 1px var(--a2); }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---------- misc ---------- */
.fi { border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }
.badge-soft { display: inline-block; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--a2) 16%, transparent); color: var(--a1); font-size: 12px; font-weight: 700; }
:root[data-theme="dark"] .badge-soft { color: var(--a3, var(--brand)); }
.legend-inline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); padding: 0 20px 6px; }
.legend-inline .k { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.notice {
    background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 14%, transparent), transparent 60%), var(--glass); border: 1px solid var(--glass-border);
    border-left: 5px solid var(--warning); border-radius: 14px; padding: 12px 16px; font-size: 13.5px; color: var(--ink-2); margin: 14px 0; box-shadow: var(--shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.notice i { color: var(--ink); margin-right: 6px; }
.error-box { padding: 18px; color: var(--critical-text); font-size: 14px; }
.searchbox { position: relative; max-width: 700px; }
/* Product suggestions must escape the hero and sit above the cards that overlap its lower edge. */
body[data-page="Product"] .page-head { overflow: visible; }
body[data-page="Product"] .page-head .searchbox { z-index: 10; }
.searchbox input {
    width: 100%; height: 52px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .92); color: #0d1a15;
    border-radius: 16px; padding: 0 16px 0 48px; font: inherit; font-size: 15.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.searchbox input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 10px 30px rgba(0, 0, 0, .2); }
.searchbox > i { position: absolute; left: 18px; top: 16px; color: #66746e; z-index: 1; font-size: 17px; }
.suggest { position: absolute; left: 0; right: 0; top: 58px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); z-index: 50; max-height: 400px; overflow: auto; display: none; padding: 5px; }
.suggest.open { display: block; }
.suggest a { display: flex; gap: 10px; padding: 9px 12px; color: var(--ink); font-size: 14px; align-items: baseline; border-radius: 10px; }
.suggest a:hover, .suggest a.sel { background: color-mix(in srgb, var(--a2) 12%, transparent); text-decoration: none; }
.suggest .code { font-variant-numeric: tabular-nums; color: var(--a1); min-width: 70px; font-size: 13px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink);
    border-radius: 99px; padding: 6px 13px; font-size: 13.5px; box-shadow: 0 0 0 1px var(--glass-edge); transition: transform .15s, box-shadow .15s;
}
.chip:hover { box-shadow: 0 0 0 1px var(--a2), 0 6px 14px color-mix(in srgb, var(--a2) 18%, transparent); text-decoration: none; transform: translateY(-1px); }
.chip b { color: var(--a1); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(13, 26, 21, .92); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast.show { opacity: 1; }
.access-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4, 18, 13, .52); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.access-dialog-backdrop.open { opacity: 1; visibility: visible; }
.access-dialog { position: relative; width: min(500px, 100%); display: grid; grid-template-columns: 54px 1fr; gap: 17px; padding: 27px; border: 1px solid color-mix(in srgb, var(--a2) 30%, var(--border)); border-radius: 20px; color: var(--ink); background: var(--surface); box-shadow: 0 28px 75px rgba(0, 0, 0, .3); transform: translateY(10px) scale(.98); transition: transform .18s; outline: none; }
.access-dialog-backdrop.open .access-dialog { transform: none; }
.access-dialog-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--a1); background: color-mix(in srgb, var(--a2) 13%, var(--surface)); font-size: 24px; }
.access-dialog h2 { margin: 1px 32px 8px 0; font-size: 20px; }
.access-dialog p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.access-dialog-close { position: absolute; right: 15px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; }
.access-dialog-close:hover { color: var(--ink); background: var(--surface-2); }
.access-dialog-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 21px; }
.access-dialog-actions .btn-primary, .access-dialog-actions .btn-ghost { width: auto; height: 40px; display: inline-flex; align-items: center; padding: 0 16px; text-decoration: none; }
@media (max-width: 520px) { .access-dialog { grid-template-columns: 1fr; padding: 22px; } .access-dialog-actions { flex-wrap: wrap; justify-content: stretch; } .access-dialog-actions > * { flex: 1; justify-content: center; white-space: nowrap; } }
.prose h2 { font-size: 20px; margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.prose h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.prose dt { font-weight: 700; margin-top: 12px; color: var(--ink); }
.prose dd { margin-left: 0; color: var(--ink-2); }

/* Insights stories */
.policy-gateway{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:22px;margin:12px 0 28px;padding:22px;border:1px solid var(--border);border-radius:19px;background:linear-gradient(130deg,color-mix(in srgb,var(--surface) 95%,var(--a3)),var(--surface));box-shadow:var(--shadow-sm)}.policy-gateway>div:first-child{padding:8px}.policy-gateway h2{margin:5px 0 8px;font-size:24px}.policy-gateway p{margin:0;color:var(--muted);line-height:1.5}.policy-gateway>div>small{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--a2)}.policy-gateway-cards{display:grid;gap:8px}.policy-gateway-cards a{display:grid;grid-template-columns:34px 1fr 20px;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:12px;color:var(--ink);text-decoration:none;background:var(--surface);transition:transform .18s,border-color .18s}.policy-gateway-cards a:hover{transform:translateX(4px);border-color:var(--a2)}.policy-gateway-cards>a>i:first-child{font-size:20px;color:var(--a2)}.policy-gateway-cards span b,.policy-gateway-cards span small{display:block}.policy-gateway-cards span small{margin-top:3px;color:var(--muted)}
.policy-page { width:100%; max-width:none; }
.policy-hero { position:relative; overflow:hidden; padding:42px clamp(22px,5vw,72px) 28px; margin:-2px 0 28px; border:1px solid var(--border); border-radius:24px; color:#f8fbff; background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.16),transparent 28%),linear-gradient(125deg,#13283d,#214f63 58%,#8c4c35); box-shadow:0 22px 55px rgba(16,35,50,.18); }
.policy-hero:after { content:""; position:absolute; right:-60px; bottom:-110px; width:360px; height:360px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025); }
.policy-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; color:#b9e7dc; }
.policy-hero h1 { position:relative; z-index:1; max-width:900px; margin:10px 0 9px; font-size:clamp(31px,4.3vw,58px); line-height:1.04; letter-spacing:-.035em; }
.policy-hero>p { position:relative; z-index:1; max-width:770px; margin:0; color:rgba(255,255,255,.78); font-size:16px; line-height:1.65; }
.policy-journey { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:30px; }
.policy-journey a { display:flex; align-items:center; gap:10px; padding:11px 13px; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(0,0,0,.1); backdrop-filter:blur(5px); }
.policy-journey b { color:#9de0cd; font-size:11px; }.policy-journey span{font-size:12px;font-weight:700}
.policy-section { padding:25px 0 12px; scroll-margin-top:80px; }
.policy-section-head { display:grid; grid-template-columns:54px minmax(0,850px); gap:14px; align-items:start; margin:0 4px 19px; }
.policy-section-head>span { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; color:#fff; background:var(--a1); font-weight:800; box-shadow:0 8px 20px color-mix(in srgb,var(--a1) 25%,transparent); }
.policy-section-head small { display:block; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--a2); }.policy-section-head h2{margin:3px 0 4px;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.02em}.policy-section-head p{margin:0;color:var(--muted);line-height:1.55}
.policy-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.policy-facts article { min-height:138px; padding:18px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 86%,var(--a3))); box-shadow:var(--shadow-sm); }
.policy-facts i{float:right;font-size:22px;color:var(--a2)}.policy-facts strong,.policy-facts span,.policy-facts small{display:block}.policy-facts strong{font-size:25px;letter-spacing:-.02em}.policy-facts span{margin:8px 0 5px;font-weight:750}.policy-facts small{color:var(--muted);line-height:1.35}
.reading-card{padding:23px}.reading-mark{font-size:32px;color:var(--a2)}.reading-card h3{font-size:24px;margin:2px 0 8px}.reading-lead{color:var(--muted);line-height:1.55}.reading-card ol{counter-reset:read;list-style:none;padding:0;margin:18px 0 0}.reading-card li{counter-increment:read;position:relative;padding:11px 0 11px 40px;border-top:1px solid var(--border);line-height:1.4}.reading-card li:before{content:counter(read);position:absolute;left:4px;top:9px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--a2) 13%,transparent);color:var(--a1);font-weight:800;font-size:11px}
.diagnostic-ring{--score:50;display:grid;place-items:center;width:190px;height:190px;margin:22px auto;border-radius:50%;background:conic-gradient(var(--a2) calc(var(--score)*1%),color-mix(in srgb,var(--border) 65%,transparent) 0);position:relative}.diagnostic-ring:after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--surface)}.diagnostic-ring div{z-index:1;text-align:center}.diagnostic-ring strong,.diagnostic-ring span{display:block}.diagnostic-ring strong{font-size:30px}.diagnostic-ring span{max-width:110px;font-size:11px;color:var(--muted)}#pDiagnostic .panel-body>h3,#pDiagnostic .panel-body>p{padding:0 22px;text-align:center}#pDiagnostic .panel-body>p{color:var(--muted);line-height:1.5}
.policy-verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.policy-verdict article{position:relative;padding:22px;border:1px solid var(--border);border-top:4px solid;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.policy-verdict article.observed{border-top-color:#2478a6}.policy-verdict article.supported{border-top-color:#17805c}.policy-verdict article.not-proven{border-top-color:#d18a27}.policy-verdict span{font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--muted)}.policy-verdict h3{margin:9px 0 7px}.policy-verdict p{margin:0;color:var(--muted);line-height:1.5}
.policy-evidence{margin:28px 0}.policy-evidence details{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}.policy-evidence summary{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;cursor:pointer;font-weight:800}.policy-evidence summary small{font-weight:500;color:var(--muted)}.evidence-body{padding:0 22px 22px}.evidence-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;border-top:1px solid var(--border);padding-top:20px}.evidence-grid h3{margin:0 0 12px}.evidence-grid article{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--border)}.evidence-grid article:first-of-type{border-top:0}.evidence-grid time{font-weight:900;color:var(--a2)}.evidence-grid p{margin:4px 0;color:var(--muted);line-height:1.4}.evidence-grid a{font-size:11px;font-weight:800;color:var(--a1)}.evidence-grid .method-note{grid-template-columns:28px 1fr}.method-note>i{color:#d18a27;font-size:19px}
.agreement-ledger,.route-stack{padding:12px 18px}.agreement-ledger article{display:grid;grid-template-columns:48px 1fr auto;gap:8px;padding:13px 0;border-bottom:1px solid var(--border);align-items:center}.agreement-ledger article>small{grid-column:2}.agreement-ledger article>strong{grid-column:3;grid-row:1/3}.agreement-ledger span{font-size:11px;color:var(--muted)}.agreement-ledger .neg{color:var(--critical-text,#b42318)}.agreement-ledger .pos{color:var(--exports)}.method-caption{padding:0 18px 15px;color:var(--muted);font-size:12px;line-height:1.5}
.route-stack article{padding:12px 0;border-bottom:1px solid var(--border)}.route-stack article>div{display:flex;gap:8px;align-items:center}.route-stack article>strong{display:block;margin:6px 0}.route-stack article>span{display:block;height:7px;border-radius:9px;background:var(--imports);overflow:hidden}.route-stack article>span em{display:block;height:100%;background:var(--exports)}.route-stack article>small{display:block;margin-top:5px;color:var(--muted)}
.gsp-meaning{display:grid;gap:1px;padding:8px 17px 15px}.gsp-meaning article{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--border)}.gsp-meaning article:last-child{border-bottom:0}.gsp-meaning i{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:color-mix(in srgb,var(--a2) 12%,transparent);color:var(--a1)}.gsp-meaning b,.gsp-meaning small{display:block}.gsp-meaning b{font-size:13px}.gsp-meaning small{margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.4}.renewal-track{position:relative;padding:15px 20px}.renewal-track:before{content:"";position:absolute;left:35px;top:25px;bottom:27px;width:2px;background:var(--border)}.renewal-track article{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding:7px 0 12px}.renewal-track article>span{z-index:1;display:grid;place-items:center;width:31px;height:31px;border:3px solid var(--surface);border-radius:50%;background:var(--a1);color:#fff;font-size:9px;font-weight:850}.renewal-track b,.renewal-track small{display:block}.renewal-track b{font-size:13px}.renewal-track small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}.renewal-answer{margin:3px 18px 15px;padding:11px 13px;border-radius:10px;background:color-mix(in srgb,var(--a3) 22%,transparent);font-size:12px;line-height:1.45}.renewal-answer strong{color:var(--a1)}.gsp-impact-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.gsp-impact-strip article{padding:15px 17px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}.gsp-impact-strip small,.gsp-impact-strip strong,.gsp-impact-strip span{display:block}.gsp-impact-strip small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:9px;font-weight:800}.gsp-impact-strip strong{margin:5px 0 3px;font-size:21px}.gsp-impact-strip span{font-size:11.5px;color:var(--muted);line-height:1.35}
.gsp-country-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.gsp-country-grid article{position:relative;min-height:132px;padding:14px 15px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}.gsp-country-grid article.pakistan{border-color:color-mix(in srgb,var(--a2) 55%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--a3) 18%,var(--surface)),var(--surface))}.gsp-country-grid header{display:flex;align-items:center;gap:8px}.gsp-country-grid header .fi{width:22px;height:16px;border-radius:2px}.gsp-country-grid h3{margin:0;font-size:14px}.gsp-country-grid .since{margin-left:auto;padding:3px 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:9px;font-weight:800}.gsp-country-grid p{margin:9px 0 7px;color:var(--muted);font-size:11.5px;line-height:1.4}.gsp-country-grid small{font-size:10px;color:var(--ink-2)}.gsp-country-grid .scale{display:block;margin-top:6px;font-size:11px;font-weight:750;color:var(--a1)}.gsp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.gsp-quotes blockquote{margin:0;padding:15px 17px;border:1px solid var(--border);border-left:4px solid var(--a2);border-radius:12px;background:var(--surface);font-size:12.5px;line-height:1.45}.gsp-quotes cite{display:block;margin-top:8px;color:var(--muted);font-size:10px;font-style:normal}.peer-note{padding:10px 17px;color:var(--muted);font-size:11px;line-height:1.4}
.gsp-country-grid .source-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:9.5px;font-weight:750}
body[data-page="GspPlus"]{--a1:#173f78;--a2:#2f6fbd;--a3:#e3b341;--gsp-navy:#0d2b55;--gsp-blue:#245c9f;--gsp-gold:#d7aa34;--gsp-gold-ink:#825d08}body[data-page="Agreements"]{--a1:#55418e;--a2:#8a68d0;--a3:#d8cef0}body[data-page="Corridors"]{--a1:#82511e;--a2:#d48722;--a3:#f1d4a5}
@media(max-width:900px){.policy-gateway{grid-template-columns:1fr}.policy-journey,.policy-facts{grid-template-columns:repeat(2,1fr)}.policy-verdict,.evidence-grid{grid-template-columns:1fr}.policy-evidence summary small{display:none}}
@media(max-width:560px){.policy-hero{padding:30px 20px 22px;border-radius:18px}.policy-journey{grid-template-columns:1fr 1fr}.policy-journey span{font-size:10px}.policy-facts{grid-template-columns:1fr}.policy-section-head{grid-template-columns:42px 1fr}.policy-section-head>span{width:37px;height:37px}.policy-verdict{grid-template-columns:1fr}}
/* Policy stories use the same visual scale as the rest of the dashboard. */
.policy-head{margin-bottom:10px}.policy-kicker{display:flex;align-items:center;gap:7px;margin-bottom:7px;text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:800;color:var(--a2)}.policy-head h1{max-width:980px}.policy-head .lede{max-width:900px}
.policy-title{max-width:980px;margin:24px 0 18px;padding:0}.policy-title h1{margin:0 0 7px;color:var(--ink);font-size:clamp(27px,2.5vw,36px);font-weight:780;line-height:1.14;letter-spacing:-.025em}.policy-title>p{max-width:900px;margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.policy-banner{position:relative;overflow:hidden;min-height:215px;margin:18px 0 10px;padding:24px clamp(20px,3vw,38px);border-radius:18px;color:#fff;background:linear-gradient(105deg,color-mix(in srgb,var(--a1) 94%,#08151d),color-mix(in srgb,var(--a1) 78%,var(--a2)));box-shadow:var(--shadow)}.policy-banner:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 15%,rgba(255,255,255,.16),transparent 28%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.06));pointer-events:none}.policy-banner:after{content:"";position:absolute;right:-70px;bottom:-130px;width:310px;height:310px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.018)}.policy-banner>*{position:relative;z-index:1}.policy-banner .policy-kicker{margin-bottom:6px;color:rgba(255,255,255,.72)}.policy-banner h1{max-width:900px;margin:0 0 5px;color:#fff;font-size:clamp(25px,2.25vw,34px);font-weight:780;line-height:1.12;letter-spacing:-.025em}.policy-banner .policy-summary{max-width:850px;margin:0;color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.45}.policy-banner-question{max-width:920px;margin-top:16px;padding:12px 15px;border-left:3px solid rgba(255,255,255,.72);border-radius:0 10px 10px 0;background:rgba(0,0,0,.14)}.policy-banner-question small{display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65);font-size:9px;font-weight:800}.policy-banner-question h2{margin:0;color:#fff;font-size:17px;line-height:1.3}.policy-banner-question p{margin:3px 0 0;max-width:900px;color:rgba(255,255,255,.76);font-size:11.5px;line-height:1.4}
.gsp-page .policy-banner{display:flex;min-height:220px;padding:0}.gsp-page .policy-banner:before{z-index:0;background:linear-gradient(90deg,rgba(5,20,36,.34),rgba(5,20,36,.14)),radial-gradient(circle at 88% 15%,rgba(255,255,255,.16),transparent 28%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.06))}.gsp-page .policy-banner-overlay{z-index:1;box-sizing:border-box;display:flex;flex:1;flex-direction:column;justify-content:center;width:100%;min-width:0;padding:24px clamp(20px,3vw,38px);background:linear-gradient(90deg,rgba(3,15,28,.22) 0,rgba(3,15,28,.1) 72%,transparent 100%)}.gsp-page .policy-banner-overlay>h1,.gsp-page .policy-banner-overlay>.policy-summary,.gsp-page .policy-banner-question{box-sizing:border-box;width:100%;max-width:960px}.gsp-page .policy-banner-question{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);column-gap:24px;align-items:start;margin-top:15px;padding:12px 16px;background:rgba(3,15,28,.26);box-shadow:inset 0 1px rgba(255,255,255,.05)}.gsp-page .policy-banner-question small{grid-column:1/-1}.gsp-page .policy-banner-question p{margin:1px 0 0;padding-left:20px;border-left:1px solid rgba(255,255,255,.18)}
/* GSP+ uses an EU-blue and gold visual language in both colour schemes. */
.gsp-page .policy-banner{border:1px solid rgba(255,255,255,.12);background:linear-gradient(118deg,var(--gsp-navy) 0%,#17477f 58%,#2e67a9 100%);box-shadow:0 18px 42px rgba(13,43,85,.22)}.gsp-page .policy-banner:before{background:linear-gradient(90deg,rgba(2,13,27,.42),rgba(2,13,27,.12)),radial-gradient(circle at 87% 12%,rgba(227,179,65,.28),transparent 24%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.07))}.gsp-page .policy-kicker i{color:#f3cd69}.gsp-page .policy-banner-question{border-left-color:#e5bd55;background:rgba(4,18,35,.34)}
.gsp-page .policy-journey{border-color:color-mix(in srgb,var(--a2) 20%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 5%,var(--surface)),var(--surface))}.gsp-page .policy-journey a{position:relative}.gsp-page .policy-journey a:hover{background:color-mix(in srgb,var(--a2) 11%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a2) 16%,transparent)}.gsp-page .policy-journey b{color:var(--gsp-gold-ink)}
.gsp-page .policy-section{border-top:1px solid color-mix(in srgb,var(--a2) 10%,transparent)}.gsp-page .policy-section:first-of-type{border-top:0}.gsp-page .policy-section-head>span{background:linear-gradient(145deg,var(--gsp-navy),var(--a2));box-shadow:0 8px 18px color-mix(in srgb,var(--a2) 24%,transparent)}.gsp-page .policy-section-head small{color:var(--gsp-gold-ink)}
.gsp-page .policy-facts article{border-color:color-mix(in srgb,var(--a2) 18%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--a2) 6%,var(--surface)),var(--surface) 62%,color-mix(in srgb,var(--a3) 10%,var(--surface)))}.gsp-page .policy-facts i{color:var(--a2)}.gsp-page .policy-facts strong{color:var(--a1)}
.gsp-page .panel{border-color:color-mix(in srgb,var(--a2) 14%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 3%,var(--surface)),var(--surface) 150px)}.gsp-page .panel-head{border-bottom-color:color-mix(in srgb,var(--a2) 12%,var(--border))}.gsp-page .reading-card li:before{color:#fff;background:var(--a2)}.gsp-page .reading-card b,.gsp-page .panel-foot b{color:var(--a1)}
.gsp-page .finding{border-color:color-mix(in srgb,var(--a2) 15%,var(--border));border-left-color:var(--a2);background:linear-gradient(135deg,color-mix(in srgb,var(--a2) 5%,var(--surface)),var(--surface))}.gsp-page .finding.pos{border-left-color:var(--exports)}.gsp-page .finding.neg{border-left-color:var(--imports)}.gsp-page .finding>i{color:var(--a1);background:color-mix(in srgb,var(--a2) 13%,var(--surface))}.gsp-page .finding.pos>i{color:var(--exports);background:color-mix(in srgb,var(--exports) 12%,var(--surface))}.gsp-page .finding.neg>i{color:var(--imports);background:color-mix(in srgb,var(--imports) 12%,var(--surface))}
.gsp-page .event-list time{color:var(--a1);font-weight:850}.gsp-page .event-list a,.gsp-page .policy-evidence a{color:var(--a2)}.gsp-page .policy-verdict article{border-color:color-mix(in srgb,var(--a2) 12%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--a2) 4%,var(--surface)),var(--surface))}.gsp-page .policy-evidence details{border-color:color-mix(in srgb,var(--a2) 16%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 4%,var(--surface)),var(--surface))}.gsp-page .policy-evidence summary i{margin-right:7px;color:var(--a2)}
:root[data-theme="dark"] body[data-page="GspPlus"]{--a1:#9bc2ff;--a2:#75a8ee;--a3:#e6bd55;--gsp-navy:#091d38;--gsp-blue:#3c78c5;--gsp-gold:#e6bd55;--gsp-gold-ink:#f0cb70}
:root[data-theme="dark"] .gsp-page .policy-banner{border-color:rgba(142,181,235,.2);background:linear-gradient(118deg,#07172d 0%,#0e315b 58%,#174a82 100%);box-shadow:0 18px 45px rgba(0,0,0,.45)}:root[data-theme="dark"] .gsp-page .policy-banner-question{background:rgba(0,0,0,.3)}:root[data-theme="dark"] .gsp-page .panel,:root[data-theme="dark"] .gsp-page .finding,:root[data-theme="dark"] .gsp-page .policy-facts article,:root[data-theme="dark"] .gsp-page .policy-verdict article,:root[data-theme="dark"] .gsp-page .policy-evidence details{background:linear-gradient(145deg,color-mix(in srgb,var(--a2) 7%,var(--surface)),var(--surface))}
@media(prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) body[data-page="GspPlus"]{--a1:#9bc2ff;--a2:#75a8ee;--a3:#e6bd55;--gsp-navy:#091d38;--gsp-blue:#3c78c5;--gsp-gold:#e6bd55;--gsp-gold-ink:#f0cb70}:root:where(:not([data-theme="light"])) .gsp-page .policy-banner{border-color:rgba(142,181,235,.2);background:linear-gradient(118deg,#07172d 0%,#0e315b 58%,#174a82 100%);box-shadow:0 18px 45px rgba(0,0,0,.45)}:root:where(:not([data-theme="light"])) .gsp-page .policy-banner-question{background:rgba(0,0,0,.3)}:root:where(:not([data-theme="light"])) .gsp-page .panel,:root:where(:not([data-theme="light"])) .gsp-page .finding,:root:where(:not([data-theme="light"])) .gsp-page .policy-facts article,:root:where(:not([data-theme="light"])) .gsp-page .policy-verdict article,:root:where(:not([data-theme="light"])) .gsp-page .policy-evidence details{background:linear-gradient(145deg,color-mix(in srgb,var(--a2) 7%,var(--surface)),var(--surface))}}
.policy-journey{position:static;display:flex;gap:6px;margin:0 0 22px;padding:5px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}.policy-journey a{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:38px;padding:7px 10px;color:var(--ink-2);text-decoration:none;border:0;border-radius:9px;background:transparent;backdrop-filter:none}.policy-journey a:hover{color:var(--ink);background:color-mix(in srgb,var(--a2) 10%,transparent)}.policy-journey b{color:var(--a2);font-size:10px}.policy-journey span{font-size:12px;font-weight:700}
.policy-section{padding:18px 0 7px}.policy-section-head{grid-template-columns:38px minmax(0,900px);gap:11px;margin:0 2px 14px}.policy-section-head>span{width:32px;height:32px;border-radius:9px;font-size:10px;box-shadow:none}.policy-section-head small{font-size:10px;letter-spacing:.1em}.policy-section-head h2{margin:2px 0 3px;font-size:21px}.policy-section-head p{max-width:840px;font-size:13.5px;line-height:1.5}
.policy-facts article{min-height:112px;padding:15px 16px;border-radius:14px;background:var(--surface)}.policy-facts i{font-size:18px}.policy-facts strong{font-size:21px}.policy-facts span{margin:6px 0 3px;font-size:13px}.policy-facts small{font-size:11.5px}
.reading-card{padding:17px 19px}.reading-mark{display:none}.reading-card h3{font-size:18px;margin:0 0 7px}.reading-lead{font-size:13px;line-height:1.5}.reading-card ol{margin-top:13px}.reading-card li{padding:9px 0 9px 33px;font-size:12.5px}.reading-card li:before{left:2px;top:8px;width:21px;height:21px;border-radius:6px;font-size:10px}
.policy-verdict article{padding:17px 18px;border-top:1px solid var(--border);border-left:4px solid;border-radius:13px}.policy-verdict article.observed{border-left-color:#2478a6}.policy-verdict article.supported{border-left-color:#17805c}.policy-verdict article.not-proven{border-left-color:#d18a27}.policy-verdict h3{margin:7px 0 5px;font-size:16px}.policy-verdict p{font-size:12.5px;line-height:1.45}
.policy-evidence{margin:22px 0}.policy-evidence summary{padding:15px 18px}.evidence-body{padding:0 18px 18px}.evidence-grid{gap:22px;padding-top:16px}.evidence-grid article{font-size:12.5px}.evidence-grid p{font-size:12px}
.policy-evidence-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;padding-top:17px;border-top:1px solid var(--border)}.policy-evidence-grid>section{min-width:0}.policy-evidence-grid h3{margin:0 0 11px;font-size:15px}.policy-source-list article{display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;padding:11px 0;border-top:1px solid var(--border)}.policy-source-list article:first-of-type{border-top:0}.policy-source-list time{font-size:12px;font-weight:850;color:var(--a2)}.policy-source-list b{font-size:12.5px}.policy-source-list p{margin:3px 0 5px;color:var(--muted);font-size:11.5px;line-height:1.4}.policy-source-list a{font-size:10px;font-weight:750}.policy-method-intro{margin:-4px 0 9px;color:var(--muted);font-size:11px}.policy-method-list{display:flex;flex-direction:column}.policy-method-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:11px 0;border-top:1px solid var(--border)}.policy-method-card:first-of-type{border-top:0}.policy-method-card>span{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--a2) 12%,transparent);color:var(--a1);font-size:9px;font-weight:850}.policy-method-card.caution>span{background:color-mix(in srgb,#d18a27 15%,transparent);color:#a56412}.policy-method-card b{font-size:12.5px;color:var(--ink)}.policy-method-card p{margin:3px 0 0;color:var(--muted);font-size:11.5px;line-height:1.42;overflow-wrap:anywhere}
@media(max-width:900px){.policy-journey{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:820px){.policy-evidence-grid{grid-template-columns:1fr;gap:20px}}
@media(max-width:1050px){.gsp-impact-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.gsp-impact-strip,.gsp-quotes,.gsp-country-grid{grid-template-columns:1fr}}
@media(max-width:760px){.gsp-page .policy-banner-question{grid-template-columns:1fr;row-gap:5px}.gsp-page .policy-banner-question p{margin:0;padding:0;border-left:0}}
@media(max-width:560px){.policy-banner{min-height:0;margin-top:12px;padding:20px 18px}.gsp-page .policy-banner{padding:0}.gsp-page .policy-banner-overlay{padding:20px 18px}.policy-banner h1{font-size:25px}.policy-banner .policy-summary{font-size:12px}.policy-banner-question{margin-top:13px;padding:10px 12px}.policy-banner-question h2{font-size:15px}.policy-banner-question p{font-size:11px}.policy-journey{grid-template-columns:1fr 1fr}.policy-section-head{grid-template-columns:34px 1fr}.policy-section-head>span{width:30px;height:30px}}
.story {
    grid-column: span 12; border-radius: var(--radius); padding: 18px 22px; font-size: 14.5px; color: var(--ink); margin-top: 14px; scroll-margin-top: 90px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--sc, var(--a1)) 16%, transparent), transparent 70%), var(--glass);
    border: 1px solid var(--glass-border); border-left: 6px solid var(--sc, var(--a1));
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow);
}
.story h2 { font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.story b { font-weight: 700; }

/* ---------- footer ---------- */
.site-footer {
    flex: 0 0 auto; isolation: isolate; margin-top: 44px; color: rgba(255, 255, 255, .88); font-size: 13.5px; position: relative; overflow: hidden;
    background-color: #172c27;
    background-image: radial-gradient(700px 300px at 90% 0%, color-mix(in srgb, var(--a3, var(--a2)) 22%, transparent), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--a1) 45%, #000) 0%, color-mix(in srgb, var(--a1) 70%, #000) 55%, color-mix(in srgb, var(--a1) 90%, #000) 100%);
}
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--a2), var(--a3, var(--a2)) 50%, var(--a2)); }
.site-footer::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 20px 20px; pointer-events: none; }
.foot-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.4fr); gap: 24px 40px; padding-top: 30px; padding-bottom: 24px; }
@media (max-width: 991px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-logo { display: inline-block; background: rgba(255, 255, 255, .94); border-radius: 14px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.foot-logo img { height: 40px; display: block; }
.foot-brand p { margin: 12px 0 0; max-width: 360px; }
.site-footer p, .site-footer .foot-brand p { color: rgba(255, 255, 255, .84); }
.site-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 10px; display: flex; gap: 8px; align-items: center; }
.site-footer h4 i { color: var(--a3, #8dd3bd); }
.site-footer a { color: rgba(255, 255, 255, .86); display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.site-footer a i { opacity: .7; font-size: 12px; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; }
.site-footer strong { color: #fff; }
.foot-note p { margin: 0; }
.foot-bar { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.foot-bar .sep { margin: 0 6px; opacity: .6; }

/* ---------- account experience ---------- */
.auth-body { display: block; min-height: 100vh; padding: 22px clamp(14px,3vw,42px); background: var(--bg); }
.auth-backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(900px 520px at 8% 2%,color-mix(in srgb,var(--a2) 13%,transparent),transparent 72%),radial-gradient(760px 520px at 96% 96%,color-mix(in srgb,var(--a3) 12%,transparent),transparent 72%); }
.auth-backdrop::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb,var(--grid) 65%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--grid) 65%,transparent) 1px,transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(to bottom,#000,transparent 78%); mask-image: linear-gradient(to bottom,#000,transparent 78%); }
.auth-backdrop span { position: absolute; border: 1px solid color-mix(in srgb,var(--a2) 18%,transparent); border-radius: 50%; }
.auth-backdrop span:nth-child(1) { width: 360px; height: 360px; left: -180px; top: 18%; }
.auth-backdrop span:nth-child(2) { width: 160px; height: 160px; right: 8%; top: -80px; }
.auth-backdrop span:nth-child(3) { width: 520px; height: 520px; right: -300px; bottom: -240px; }
.auth-shell { width: min(1220px,100%); min-height: calc(100vh - 44px); margin: 0 auto; display: flex; flex-direction: column; }
.auth-topbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.auth-brand { width: min(330px,65vw); display: block; padding: 8px 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(8,63,49,.11); text-decoration: none; transition: transform .18s,box-shadow .18s; }
.auth-brand:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(8,63,49,.16); text-decoration: none; }
.auth-brand img { display: block; width: 100%; height: auto; }
.auth-top-actions { display: flex; align-items: center; gap: 8px; }
.auth-top-actions a,.auth-theme { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink-2); background: color-mix(in srgb,var(--surface) 88%,transparent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-top-actions a:hover,.auth-theme:hover { color: var(--a1); border-color: color-mix(in srgb,var(--a2) 52%,var(--border)); text-decoration: none; }
.auth-theme { width: 40px; padding: 0; }
.auth-workspace { flex: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr); min-height: 650px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--border) 84%,transparent); border-radius: 28px; background: var(--surface); box-shadow: 0 30px 80px rgba(8,45,36,.14); }
.auth-signup { grid-template-columns: minmax(300px,.84fr) minmax(560px,1.16fr); }
.auth-compact { width: min(1040px,100%); min-height: 600px; margin: 0 auto; grid-template-columns: minmax(300px,.82fr) minmax(390px,1.18fr); }
.auth-story { position: relative; overflow: hidden; padding: clamp(38px,5vw,72px); color: #fff; background: linear-gradient(145deg,#062d24 0%,#07563f 58%,#0e7454 100%); }
.auth-story::before { content: ""; position: absolute; width: 460px; height: 460px; right: -260px; top: -210px; border: 70px solid rgba(255,255,255,.045); border-radius: 50%; }
.auth-story::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(145deg,transparent 20%,#000); mask-image: linear-gradient(145deg,transparent 20%,#000); pointer-events: none; }
.auth-story > * { position: relative; z-index: 1; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #b8ecd8; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.auth-story h1 { max-width: 650px; margin: 18px 0 16px; color: #fff; font-size: clamp(34px,4vw,57px); line-height: 1.03; letter-spacing: -.045em; }
.auth-signup .auth-story h1,.auth-compact .auth-story h1 { font-size: clamp(31px,3.2vw,46px); }
.auth-story-lede { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.7; }
.auth-path { display: grid; gap: 8px; margin-top: 34px; }
.auth-path article { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); }
.auth-path article.featured { border-color: rgba(159,224,192,.42); background: rgba(159,224,192,.12); }
.auth-path article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #b8ecd8; background: rgba(255,255,255,.09); font-size: 10px; font-weight: 850; }
.auth-path b,.auth-path small,.auth-feature-list b,.auth-feature-list small,.auth-trust b,.auth-trust small { display: block; }
.auth-path b { color: #fff; font-size: 13px; }
.auth-path small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: 11.5px; }
.auth-trust { display: grid; grid-template-columns: 40px 1fr; gap: 11px; align-items: center; margin-top: 24px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(0,0,0,.11); }
.auth-trust > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #083f31; background: #b8ecd8; font-size: 19px; }
.auth-trust b { color: #fff; font-size: 12.5px; }
.auth-trust small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.4; }
.auth-feature-list { display: grid; gap: 10px; margin-top: 30px; }
.auth-feature-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.auth-feature-list > div > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #b8ecd8; background: rgba(255,255,255,.09); font-size: 17px; }
.auth-feature-list b { color: #fff; font-size: 13px; }
.auth-feature-list small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: 11.5px; line-height: 1.4; }
.auth-feature-list.compact { margin: 20px 0 26px; }
.auth-surface .auth-feature-list.compact > div { padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.auth-surface .auth-feature-list.compact > div > i { color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); }
.auth-surface .auth-feature-list.compact b { color: var(--ink); }
.auth-surface .auth-feature-list.compact small { color: var(--muted); }
.auth-story-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.7); font-size: 11.5px; line-height: 1.55; }
.auth-story-note i { margin-right: 6px; color: #b8ecd8; }
.auth-surface { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,4.5vw,64px); background: radial-gradient(450px 260px at 100% 0%,color-mix(in srgb,var(--a2) 7%,transparent),transparent 72%),var(--surface); }
.auth-surface-wide { justify-content: flex-start; }
.auth-form-head { display: flex; gap: 14px; align-items: center; margin-bottom: 25px; }
.auth-form-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,var(--a1),var(--a2)); box-shadow: 0 10px 24px color-mix(in srgb,var(--a1) 24%,transparent); font-size: 20px; }
.auth-kicker { color: var(--a1); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.auth-form-head h2 { margin: 2px 0 3px; color: var(--ink); font-size: clamp(23px,2.4vw,31px); letter-spacing: -.025em; }
.auth-form-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.auth-surface form { margin: 0; }
.auth-surface .fgroup { margin-bottom: 14px; }
.auth-surface .fgroup > label,.auth-label-row label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 11.5px; font-weight: 750; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-label-row a { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; }
.auth-input { position: relative; display: flex; align-items: center; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); transition: border-color .15s,box-shadow .15s,background .15s; }
.auth-input:focus-within { border-color: var(--a2); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb,var(--a2) 13%,transparent); }
.auth-input > i:first-child { width: 42px; flex: 0 0 42px; color: var(--a1); text-align: center; }
.auth-input input,.auth-input select { width: 100%; height: 44px; min-width: 0; padding: 0 12px 0 0; border: 0 !important; outline: 0; color: var(--ink); background: transparent !important; font: inherit; font-size: 13px; box-shadow: none !important; }
.auth-input select { cursor: pointer; }
.password-field input { padding-right: 45px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.pw-toggle:hover,.pw-toggle:focus-visible { color: var(--ink); background: color-mix(in srgb,var(--a2) 9%,transparent); }
.field-error { display: block; margin-top: 4px; color: var(--critical-text); font-size: 11px; }
.auth-alert { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; margin-bottom: 16px; padding: 11px 12px; border: 1px solid color-mix(in srgb,var(--critical) 25%,var(--border)); border-radius: 12px; color: var(--critical-text); background: color-mix(in srgb,var(--critical) 8%,var(--surface)); font-size: 12px; line-height: 1.45; }
.auth-alert ul { margin: 5px 0 0; padding-left: 17px; }
.auth-section-label { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.auth-section-label::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 13px; }
.password-rules { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0 15px; padding: 10px 11px; border-radius: 11px; color: var(--muted); background: color-mix(in srgb,var(--a2) 7%,var(--surface-2)); font-size: 11px; line-height: 1.45; }
.password-rules i { margin-top: 1px; color: var(--a1); }
.password-rules.ready { color: var(--exports); background: color-mix(in srgb,var(--exports) 8%,var(--surface)); }
.password-rules.mismatch { color: var(--critical-text); background: color-mix(in srgb,var(--critical) 8%,var(--surface)); }
.auth-submit,.auth-secondary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.auth-submit { width: 100%; padding: 0 18px; border: 0; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); box-shadow: 0 10px 24px color-mix(in srgb,var(--a1) 22%,transparent); }
.auth-submit:hover { filter: brightness(1.04); transform: translateY(-1px); text-decoration: none; color: #fff; }
.auth-submit.is-submitting { opacity: .72; cursor: wait; }
.auth-submit-link { width: auto; }
.auth-secondary { padding: 0 16px; border: 1px solid var(--border); color: var(--ink); background: var(--surface-2); }
.auth-secondary:hover { color: var(--a1); border-color: var(--a2); text-decoration: none; }
.auth-form-foot { display: flex; justify-content: center; gap: 6px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.auth-form-foot a { font-weight: 750; }
.auth-public-link { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 17px; color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.auth-public-link:hover { color: var(--a1); }
.recovery-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.recovery-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.recovery-steps li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); font-size: 11px; font-weight: 850; }
.recovery-steps b { color: var(--ink); font-size: 12.5px; }
.recovery-steps p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.recovery-warning { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 12px; border-radius: 11px; color: var(--ink-2); background: color-mix(in srgb,#d8a323 11%,var(--surface)); font-size: 11.5px; line-height: 1.45; }
.recovery-warning i { color: #a16f00; }
.auth-action-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.auth-inline-form { flex: 1; }
.auth-action-row > a,.auth-action-row > form { flex: 1; }
.auth-footer { min-height: 52px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10.5px; }
.auth-footer-grow { flex: 1; }
.auth-footer a { color: var(--ink-2); font-weight: 700; }
@media (max-width: 940px) { .auth-workspace,.auth-signup,.auth-compact { grid-template-columns: 1fr; width: 100%; } .auth-story { padding: 38px; } .auth-story h1,.auth-signup .auth-story h1,.auth-compact .auth-story h1 { font-size: clamp(29px,6vw,43px); } .auth-path { grid-template-columns: repeat(3,minmax(0,1fr)); } .auth-path article { grid-template-columns: 1fr; } .auth-trust { max-width: 520px; } }
@media (max-width: 650px) { .auth-body { padding: 10px 10px 16px; } .auth-topbar { min-height: 58px; margin-bottom: 10px; } .auth-brand { width: min(260px,67vw); padding: 6px 9px; } .auth-top-actions a span { display: none; } .auth-workspace { min-height: 0; border-radius: 20px; } .auth-story,.auth-surface { padding: 27px 21px; } .auth-story h1,.auth-signup .auth-story h1,.auth-compact .auth-story h1 { margin-top: 12px; font-size: 31px; } .auth-path { grid-template-columns: 1fr; margin-top: 24px; } .auth-grid { grid-template-columns: 1fr; } .auth-form-head { align-items: flex-start; } .auth-action-row { flex-direction: column; } .auth-submit-link { width: 100%; } .auth-footer { flex-wrap: wrap; justify-content: center; padding-top: 12px; text-align: center; } .auth-footer-grow { display: none; } }
/* Compact the sign-in and sign-up introductions while preserving the shared account layouts. */
.auth-login .auth-story,.auth-signup .auth-story { padding: clamp(32px,4.2vw,60px); }
.auth-login .auth-story h1 { margin: 14px 0 12px; font-size: clamp(30px,3.6vw,52px); }
.auth-login .auth-story-lede { line-height: 1.6; }
.auth-login .auth-path { gap: 7px; margin-top: 24px; }
.auth-login .auth-path article { padding: 9px 12px; }
.auth-login .auth-trust { margin-top: 18px; padding: 11px 12px; }
@media (max-width: 940px) {
    .auth-login .auth-story,.auth-signup .auth-story { padding: 32px; }
    .auth-login .auth-story h1 { font-size: clamp(29px,5vw,40px); }
}
@media (max-width: 650px) {
    .auth-login .auth-story,.auth-signup .auth-story { padding: 24px 21px; }
    .auth-login .auth-story h1 { margin-top: 12px; font-size: 29px; }
    .auth-login .auth-path { margin-top: 18px; }
    .auth-login .auth-path article { grid-template-columns: 32px minmax(0,1fr); gap: 10px; }
}
/* Sign-in and sign-up: the Uraan Pakistan mark settles into the free space at the foot of the story,
   and "Continue without signing in" is a full-size route to Public Insights. */
.auth-login .auth-story,.auth-signup .auth-story { display: flex; flex-direction: column; container-type: inline-size; }
.auth-login .auth-story h1,.auth-signup .auth-story h1 { text-wrap: balance; }
.auth-login .auth-path,.auth-signup .auth-story-note { margin-bottom: 26px; }
.auth-uraan { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: auto 0 0; padding: 14px 18px 14px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(0,0,0,.14); }
.auth-uraan-mark { flex: 0 0 auto; display: grid; place-items: center; width: 136px; padding: 9px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.auth-uraan-mark img { display: block; width: 100%; height: auto; }
.auth-uraan figcaption { flex: 1 1 180px; min-width: 0; }
.auth-uraan-kicker { display: block; color: #b8ecd8; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-uraan b { display: block; margin-top: 6px; color: #fff; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.auth-uraan small { display: block; margin-top: 6px; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.5; }
.auth-session-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; text-align: center; }
.auth-session-note i { color: var(--brand); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-or::before,.auth-or::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.auth-guest { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 76px; padding: 13px 20px 13px 14px; border: 1.5px solid color-mix(in srgb,var(--a2) 55%,var(--border)); border-radius: 16px; color: var(--ink); background: color-mix(in srgb,var(--a2) 9%,var(--surface)); box-shadow: 0 10px 26px color-mix(in srgb,var(--a1) 12%,transparent); text-decoration: none; transition: transform .16s,border-color .16s,background .16s,box-shadow .16s; }
.auth-guest:hover,.auth-guest:focus-visible { transform: translateY(-1px); border-color: var(--a2); color: var(--ink); background: color-mix(in srgb,var(--a2) 15%,var(--surface)); box-shadow: 0 16px 34px color-mix(in srgb,var(--a1) 18%,transparent); text-decoration: none; }
.auth-guest:focus-visible { outline: 3px solid color-mix(in srgb,var(--a2) 45%,transparent); outline-offset: 2px; }
.auth-guest-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,var(--a1),var(--a2)); box-shadow: 0 8px 18px color-mix(in srgb,var(--a1) 22%,transparent); font-size: 22px; }
.auth-guest-text { min-width: 0; }
.auth-guest b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.auth-guest small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.auth-guest-arrow { color: var(--brand); font-size: 21px; transition: transform .16s; }
.auth-guest:hover .auth-guest-arrow,.auth-guest:focus-visible .auth-guest-arrow { transform: translateX(3px); }
.auth-story .auth-guest { margin-top: 28px; border-color: rgba(184,236,216,.55); color: #fff; background: rgba(255,255,255,.1); box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.auth-story .auth-guest:hover,.auth-story .auth-guest:focus-visible { border-color: #b8ecd8; color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 20px 40px rgba(0,0,0,.26); }
.auth-story .auth-guest:focus-visible { outline-color: rgba(184,236,216,.6); }
.auth-story .auth-guest-icon { color: #083f31; background: #b8ecd8; box-shadow: none; }
.auth-story .auth-guest small { color: rgba(255,255,255,.72); }
.auth-story .auth-guest-arrow { color: #b8ecd8; }
@container (max-width: 389px) {
    .auth-uraan { flex-direction: column; text-align: center; padding: 16px 14px; }
    .auth-uraan figcaption { flex: 0 0 auto; }
}
@media (max-width: 650px) {
    .auth-guest { grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; min-height: 70px; padding: 12px 14px 12px 12px; }
    .auth-guest-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 19px; }
    .auth-guest b { font-size: 15.5px; }
    .auth-guest small { font-size: 11.5px; }
}
.users-card { margin: -50px 0 40px; position: relative; z-index: 2; }
.users-table-wrap { overflow-x: auto; padding: 0 14px 18px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.users-table th { padding: 11px 10px; text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.users-table td { padding: 13px 10px; vertical-align: top; border-bottom: 1px solid var(--border); }
.users-table tbody tr:hover { background: color-mix(in srgb, var(--a2) 5%, transparent); }
.role-form { display: flex; gap: 7px; align-items: center; }
.role-form select { height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 9px; }
.role-form .btn-ghost { height: 38px; padding: 0 11px; }
.admin-message { margin: -50px 0 70px; position: relative; z-index: 3; }
.access-card h2 { margin-top: 0; font-size: 20px; }
.access-card .btn-row { margin-top: 20px; }
.access-card form { margin: 0; }
.access-signout { width: auto; height: 42px; padding: 0 18px; }
.access-admin-grid { margin: -50px 0 24px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.role-access-card { padding: 22px; }
.role-access-card header { position: relative; padding-right: 110px; margin-bottom: 18px; }
.role-access-card header h2 { margin: 3px 0 0; font-size: 22px; }
.role-rank { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 750; }
.equal-role { position: absolute; right: 0; top: 4px; padding: 5px 9px; border-radius: 999px; color: var(--a1); background: color-mix(in srgb, var(--a2) 11%, transparent); font-size: 11px; font-weight: 700; }
.access-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.access-setting label { font-weight: 700; font-size: 13.5px; }
.access-setting select { height: 40px; min-width: 180px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; color: var(--ink); background: var(--surface); }
.download-permissions { padding: 16px 0 2px; border-bottom: 1px solid var(--border); }
.download-permissions h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.download-toggle { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.download-toggle input { margin-top: 4px; accent-color: var(--a1); }
.download-toggle span { display: flex; flex-direction: column; }
.download-toggle b { font-size: 13.5px; }
.download-toggle small, .download-limits small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.download-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 13px 0; }
.download-limits label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; color: var(--ink-2); font-size: 12px; }
.download-limits input { grid-row: span 2; width: 88px; height: 38px; border: 1px solid var(--border); border-radius: 9px; padding: 0 9px; color: var(--ink); background: var(--surface); }
.page-permissions h3 { margin: 18px 0 9px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.permission-row { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: start; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.permission-row:hover { background: var(--surface-2); }
.permission-row input { margin-top: 4px; accent-color: var(--a1); }
.permission-row > i { color: var(--a2); margin-top: 2px; }
.permission-row span { display: flex; flex-direction: column; }
.permission-row b { font-size: 13.5px; }
.permission-row small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.role-save { margin-top: 16px; height: 42px; }
.role-lock-note { margin-top: 15px; padding: 11px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.role-lock-note i { margin-right: 6px; }
.role-locked { opacity: .86; }
.access-footnote { margin-bottom: 38px; }
@media (max-width: 900px) { .access-admin-grid { grid-template-columns: 1fr; } }

/* Smart access-policy editor */
.access-policy-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: -50px 0 16px; }
.fixed-policy { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 13px; align-items: center; min-height: 112px; padding: 17px 19px; }
.policy-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); font-size: 21px; box-shadow: 0 8px 20px color-mix(in srgb,var(--a1) 24%,transparent); }
.admin-policy .policy-icon { background: linear-gradient(135deg,#26364a,#53756f); }
.fixed-policy > div { min-width: 0; }
.fixed-policy small { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.fixed-policy h2 { margin: 1px 0 2px; font-size: 16px; }
.fixed-policy p { margin: 0; color: var(--ink-2); font-size: 11.5px; line-height: 1.45; }
.policy-badge { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; border-radius: 99px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); font-size: 10px; font-weight: 800; white-space: nowrap; }
.role-policy-workspace { margin-bottom: 18px; overflow: hidden; }
.role-policy-header { display: grid; grid-template-columns: minmax(220px,.75fr) minmax(0,1.55fr); gap: 22px; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); background: linear-gradient(100deg,color-mix(in srgb,var(--a2) 8%,transparent),transparent 55%); }
.section-kicker { color: var(--a2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.role-policy-header h2 { margin: 2px 0 2px; font-size: 20px; }
.role-policy-header p { margin: 0; color: var(--muted); font-size: 12px; }
.role-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.role-tab { min-width: 0; display: grid; grid-template-columns: 35px 1fr; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 11px; color: var(--ink); background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s,background .15s,transform .15s; }
.role-tab:hover { transform: translateY(-1px); border-color: var(--a2); }
.role-tab.active { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--a1),var(--a2)); box-shadow: 0 8px 20px color-mix(in srgb,var(--a1) 22%,transparent); }
.role-tab-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,var(--surface)); }
.role-tab.active .role-tab-icon { color: #fff; background: rgba(255,255,255,.16); }
.role-tab > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.role-tab b { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; white-space: nowrap; }
.role-tab small { color: var(--muted); font-size: 10px; }
.role-tab.active small { color: rgba(255,255,255,.75); }
.role-policy-panel { display: none; }
.role-policy-panel.active { display: block; }
.role-policy-form { margin: 0; }
.role-editor-heading { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 22px 14px; }
.role-level { color: var(--a2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.role-editor-heading h2 { margin: 1px 0 2px; font-size: 20px; }
.role-editor-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.access-score { min-width: 145px; display: flex; flex-direction: column; align-items: flex-end; }
.access-score strong { font-size: 21px; }
.access-score span { color: var(--muted); font-size: 10.5px; }
.access-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 20px 18px; }
.access-editor-section { padding: 17px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.content-settings { grid-column: 1/-1; }
.editor-section-head { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; margin-bottom: 14px; }
.editor-section-head > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--a1); background: color-mix(in srgb,var(--a2) 13%,var(--surface)); font-size: 17px; }
.editor-section-head h3 { margin: 0; font-size: 14px; }
.editor-section-head p { margin: 1px 0 0; color: var(--muted); font-size: 10.5px; }
.smart-field { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.smart-field select { width: min(230px,60%); height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 9px; color: var(--ink); background: var(--surface); }
.detail-scale { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 14px; }
.detail-scale span { height: 6px; overflow: hidden; border-radius: 99px; color: transparent; background: var(--border); }
.detail-scale span.on { background: linear-gradient(90deg,var(--a1),var(--a2)); }
.smart-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; }
.smart-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.smart-toggle > span { position: relative; width: 38px; height: 21px; border-radius: 99px; background: var(--border); transition: background .15s; }
.smart-toggle > span::after { content:""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .15s; }
.smart-toggle input:checked + span { background: var(--a2); }
.smart-toggle input:checked + span::after { transform: translateX(17px); }
.smart-limit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.smart-limit-grid label { display: grid; grid-template-columns: 1fr auto; gap: 2px 7px; align-items: center; color: var(--ink-2); font-size: 10.5px; }
.smart-limit-grid input { grid-row: span 2; width: 82px; height: 37px; border: 1px solid var(--border); border-radius: 9px; padding: 0 8px; color: var(--ink); background: var(--surface); }
.smart-limit-grid small { color: var(--muted); font-size: 9.5px; }
.smart-permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.smart-permission { position: relative; display: grid; grid-template-columns: 36px 1fr 18px; gap: 9px; align-items: center; min-height: 63px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .15s,background .15s; }
.smart-permission:hover { border-color: var(--a2); }
.smart-permission.selected { border-color: color-mix(in srgb,var(--a2) 45%,var(--border)); background: color-mix(in srgb,var(--a2) 8%,var(--surface)); }
.smart-permission input { position: absolute; opacity: 0; pointer-events: none; }
.permission-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); background: var(--surface-2); }
.smart-permission.selected .permission-icon { color: var(--a1); background: color-mix(in srgb,var(--a2) 14%,var(--surface)); }
.permission-copy { min-width: 0; display: flex; flex-direction: column; }
.permission-copy b { font-size: 12px; }
.permission-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.permission-covers { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.permission-covers span { padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: 9.5px; line-height: 1.5; }
.smart-permission.selected .permission-covers span { border-color: color-mix(in srgb,var(--a2) 35%,var(--border)); }
.permission-check { color: var(--border); }
.smart-permission.selected .permission-check { color: var(--good); }
.role-editor-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb,var(--surface-2) 70%,transparent); }
.role-editor-footer > span { color: var(--muted); font-size: 11.5px; }
.role-editor-footer > span i { margin-right: 5px; color: var(--a2); }
.role-editor-footer .btn-primary { width: auto; height: 42px; padding: 0 18px; }
@media (max-width:900px) { .access-policy-strip { grid-template-columns:1fr; } .role-policy-header { grid-template-columns:1fr; } }
@media (max-width:700px) { .fixed-policy { grid-template-columns:42px 1fr; } .policy-icon { width:42px;height:42px; } .policy-badge { grid-column:2; width:fit-content; } .role-tabs { grid-template-columns:repeat(2,1fr); } .access-editor-grid { grid-template-columns:1fr; padding:0 12px 14px; } .content-settings { grid-column:1; } .smart-permission-grid,.smart-limit-grid { grid-template-columns:1fr; } .role-editor-heading { align-items:flex-start; } .access-score { min-width:auto; } .role-editor-footer { align-items:stretch; flex-direction:column; } .role-editor-footer .btn-primary { width:100%; } }
.admin-tool-grid { margin: -50px 0 38px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-tool-card { min-height: 142px; display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 22px; color: var(--ink); text-decoration: none; }
.admin-tool-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.admin-tool-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--a1) 28%, transparent); font-size: 23px; }
.admin-tool-card span:nth-child(2) { display: flex; flex-direction: column; }
.admin-tool-card b { font-size: 17px; }
.admin-tool-card small { margin-top: 5px; color: var(--muted); line-height: 1.5; }
.admin-tool-arrow { color: var(--a2); font-size: 20px; transition: transform .18s; }
.admin-tool-card:hover .admin-tool-arrow { transform: translateX(4px); }
@media (max-width: 760px) { .admin-tool-grid { grid-template-columns: 1fr; } }

/* ---------- administration workspace ---------- */
.admin-workspace { position: relative; z-index: 18; border-bottom: 1px solid color-mix(in srgb, var(--a2) 22%, var(--border)); background: color-mix(in srgb, var(--surface) 92%, var(--a2)); box-shadow: 0 5px 18px rgba(10,45,33,.06); }
.admin-workspace-inner { min-height: 48px; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.admin-workspace-label { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; padding-right: 14px; border-right: 1px solid var(--border); color: var(--a1); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.admin-workspace a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 9px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.admin-workspace a:hover, .admin-workspace a.active { color: var(--a1); background: color-mix(in srgb, var(--a2) 13%, var(--surface)); }
.admin-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.admin-identity { display: flex; align-items: center; gap: 11px; min-width: 230px; margin-top: 4px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: rgba(255,255,255,.11); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.admin-identity > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #0b553d; background: #fff; font-size: 19px; }
.admin-identity div { min-width: 0; display: flex; flex-direction: column; }
.admin-identity small { color: rgba(255,255,255,.68); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.admin-identity b { overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 13px; }
.admin-identity em { width: fit-content; margin-top: 3px; padding: 2px 7px; border-radius: 99px; color: #fff; background: rgba(255,255,255,.16); font-size: 10px; font-style: normal; text-transform: uppercase; }
.admin-overview-kpis { position: relative; z-index: 2; grid-template-columns: repeat(5, minmax(0,1fr)); margin: -50px 0 22px; }
.admin-overview-kpis .admin-kpi { position: relative; min-height: 132px; overflow: hidden; padding: 17px; color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.admin-overview-kpis .admin-kpi:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.admin-overview-kpis .admin-kpi > i { position: absolute; right: 13px; top: 12px; color: color-mix(in srgb, var(--a2) 45%, transparent); font-size: 28px; }
.admin-overview-kpis .admin-kpi span { max-width: calc(100% - 28px); color: var(--ink-2); font-weight: 700; }
.admin-overview-kpis .admin-kpi strong { margin-top: 16px; font-size: 28px; }
.admin-attention { display: grid; grid-template-columns: minmax(190px,.8fr) 2fr; gap: 18px; align-items: center; margin: 0 0 28px; padding: 15px 18px; border-left: 4px solid var(--warning); }
.admin-attention-title { display: flex; align-items: center; gap: 11px; }
.admin-attention-title > i { font-size: 24px; color: var(--warning); }
.admin-attention-title span { display: flex; flex-direction: column; }
.admin-attention-title small { color: var(--muted); }
.admin-attention-items { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.admin-attention-items a { display: inline-flex; gap: 6px; align-items: center; padding: 8px 11px; border-radius: 10px; color: var(--ink-2); background: var(--surface-2); font-size: 12.5px; text-decoration: none; }
.admin-attention-items a:hover { color: var(--a1); }
.admin-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin: 0 2px 14px; }
.admin-section-heading span { color: var(--a2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.admin-section-heading h2 { margin: 2px 0 0; font-size: 22px; }
.admin-section-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
.admin-tool-grid.enriched { margin: 0 0 24px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.admin-tool-grid.enriched .admin-tool-card { min-height: 130px; padding: 18px; grid-template-columns: 48px 1fr auto; }
.admin-tool-grid.enriched .admin-tool-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
.admin-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.admin-summary-panel { padding-bottom: 14px; }
.panel-link { align-self: center; color: var(--a1); font-size: 12px; font-weight: 750; }
.role-distribution { display: grid; gap: 12px; padding: 4px 20px 8px; }
.role-distribution-row { display: grid; grid-template-columns: 80px 1fr 28px; gap: 10px; align-items: center; font-size: 12.5px; text-transform: capitalize; }
.role-distribution-row > div { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.role-distribution-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--a1),var(--a2)); }
.role-distribution-row b { text-align: right; }
.admin-recent-users { padding: 0 12px 6px; }
.admin-recent-users > a { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.admin-recent-users > a:hover { background: var(--surface-2); }
.admin-recent-users > a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.admin-recent-users small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.admin-recent-users em { padding: 3px 7px; border-radius: 99px; color: var(--a1); background: color-mix(in srgb,var(--a2) 13%,transparent); font-size: 10px; font-style: normal; text-transform: uppercase; }
.mini-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); font-weight: 800; }
.admin-recent-activity { margin-bottom: 38px; padding-bottom: 10px; }
.admin-activity-stream { display: grid; padding: 0 14px 4px; }
.admin-activity-stream > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--border); }
.admin-activity-stream > div:last-child { border-bottom: 0; }
.admin-activity-stream > div > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.admin-activity-stream small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.admin-activity-stream em { color: var(--muted); font-size: 11px; font-style: normal; }
.activity-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.activity-dot.ok { color: var(--good); background: color-mix(in srgb,var(--good) 12%,transparent); }
.activity-dot.bad { color: var(--critical); background: color-mix(in srgb,var(--critical) 12%,transparent); }
.empty-admin-state { padding: 18px; text-align: center; color: var(--muted); }

/* System health and operations guide */
.operations-tabs { position: relative; z-index: 1; display: flex; gap: 4px; align-items: center; margin: 12px 0 18px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(16,36,31,.07); }
.operations-tabs a,.operations-tabs button { min-height: 38px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 0 15px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; box-shadow: none; font: inherit; font-weight: 700; cursor: pointer; }
.operations-tabs a:not(.active):hover,.operations-tabs button:hover { color: var(--a1); background: var(--surface-2); }
.operations-tabs .operations-refresh { margin-left: auto; color: var(--a1); background: color-mix(in srgb,var(--a2) 10%,transparent); }
.health-summary { display: flex; gap: 15px; align-items: center; margin: 18px 0; padding: 18px 20px; }
.health-summary-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; font-size: 25px; }
.health-summary.all-good .health-summary-icon { color: var(--good); background: color-mix(in srgb,var(--good) 12%,transparent); }
.health-summary.has-errors .health-summary-icon { color: var(--critical); background: color-mix(in srgb,var(--critical) 12%,transparent); }
.health-summary > div { display: flex; flex-direction: column; }
.health-summary > div > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.health-summary strong { font-size: 19px; }
.health-summary small { color: var(--muted); }
.health-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.health-card { grid-column: span 2; display: grid; grid-template-columns: 44px 1fr; gap: 13px; min-height: 160px; padding: 18px; }
.health-card:nth-child(4):nth-last-child(2), .health-card:nth-child(5):last-child { grid-column: span 3; }
.health-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); font-size: 20px; }
.health-card h2 { margin: 5px 0 4px; font-size: 16px; }
.health-card p { margin: 0 0 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.health-card small { color: var(--muted); }
.health-status { display: inline-flex; gap: 6px; align-items: center; color: var(--good); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.health-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }
.health-card.error .health-status { color: var(--critical); }
.runtime-panel { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-top: 14px; padding: 0; overflow: hidden; }
.runtime-panel > div { display: flex; flex-direction: column; padding: 16px; background: var(--surface-2); }
.runtime-panel span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.runtime-panel b { margin-top: 4px; font-size: 13px; }
.system-safety-note { margin-bottom: 38px; }
.admin-guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.guide-card { position: relative; min-height: 220px; padding: 22px; overflow: hidden; }
.guide-card > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); font-size: 21px; }
.guide-no { position: absolute; right: 14px; top: 8px; color: color-mix(in srgb,var(--a2) 16%,transparent); font-size: 54px; font-weight: 900; line-height: 1; }
.guide-card h2 { position: relative; margin: 15px 0 6px; font-size: 17px; }
.guide-card p { position: relative; margin: 0 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.guide-card a { position: absolute; left: 22px; bottom: 18px; font-size: 12.5px; font-weight: 750; }
.admin-checklist { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 16px 0 38px; padding: 20px; }
.admin-checklist > div { display: grid; grid-template-columns: 35px 1fr; gap: 10px; }
.admin-checklist > div > i { color: var(--a2); font-size: 22px; }
.admin-checklist span { display: flex; flex-direction: column; }
@media (max-width:620px) { .operations-tabs { overflow-x:auto; } .operations-tabs a,.operations-tabs button { flex:0 0 auto; white-space:nowrap; } .operations-tabs .operations-refresh { margin-left:0; } }
.admin-checklist small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
@media (max-width: 1050px) { .admin-overview-kpis { grid-template-columns: repeat(3,1fr); } .admin-tool-grid.enriched,.health-grid,.admin-guide-grid { grid-template-columns: repeat(2,1fr); } .health-card,.health-card:nth-child(4):nth-last-child(2),.health-card:nth-child(5):last-child { grid-column:span 1; } .health-card:last-child:nth-child(odd) { grid-column:1/-1; } .runtime-panel { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .admin-hero { display: block; } .admin-identity { display: none; } .admin-overview-kpis { grid-template-columns: repeat(2,1fr); } .admin-dashboard-grid,.admin-tool-grid.enriched,.health-grid,.admin-guide-grid,.admin-checklist { grid-template-columns: 1fr; } .health-card,.health-card:last-child:nth-child(odd) { grid-column:span 1; } .admin-attention { grid-template-columns: 1fr; } .admin-attention-items { justify-content: flex-start; } .admin-section-heading p { display: none; } .runtime-panel { grid-template-columns: 1fr; } }
.contact-admin-grid { margin: -50px 0 38px; position: relative; z-index: 2; display: grid; gap: 16px; }
.contact-admin-card { display: grid; grid-template-columns: 52px minmax(180px, .75fr) minmax(320px, 1.25fr); gap: 16px; align-items: center; padding: 20px 22px; }
.contact-avatar, .contact-person-icon { display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.contact-avatar { width: 52px; height: 52px; font-size: 23px; }
.contact-admin-card h2 { margin: 0 0 3px; font-size: 17px; }
.contact-admin-card p { margin: 0; }
.contact-edit-form label { display: block; margin-bottom: 5px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.contact-edit-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.contact-edit-row input { min-width: 0; height: 42px; border: 1px solid var(--border); border-radius: 11px; padding: 0 12px; color: var(--ink); background: var(--surface); font: inherit; }
.contact-edit-row .btn-primary { width: auto; height: 42px; padding: 0 18px; }
.contact-edit-form small { display: block; margin-top: 5px; color: var(--muted); }
.contact-add-card { padding: 20px 22px; }
.contact-admin-actions { min-width: 0; }
.contact-update-form > input { width: 100%; min-width: 0; height: 42px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 11px; padding: 0 12px; color: var(--ink); background: var(--surface); font: inherit; }
.contact-delete-form { margin-top: 14px; }
.contact-delete-form button { color: var(--critical-text); }
@media (max-width: 760px) { .contact-admin-actions { grid-column: 1 / -1; } }
.contact-add-card h2 { margin: 0 0 6px; font-size: 18px; }
.contact-add-card p { margin: 0 0 16px; }
.contact-add-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: end; }
.contact-add-form input { width: 100%; min-width: 0; height: 42px; border: 1px solid var(--border); border-radius: 11px; padding: 0 12px; color: var(--ink); background: var(--surface); font: inherit; }
.contact-add-form .btn-primary { width: auto; height: 42px; padding: 0 18px; }
.contact-validation { color: var(--critical-text); margin-bottom: 12px; }
.contact-validation.validation-summary-valid { display: none; }
@media (max-width: 1000px) { .contact-add-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .contact-add-form { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .contact-admin-card { grid-template-columns: 52px 1fr; } .contact-edit-form { grid-column: 1 / -1; } }
.btn-primary {
    height: 46px; border: 0; border-radius: 13px; width: 100%; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--a1) 35%, transparent), 0 1px 0 rgba(255, 255, 255, .25) inset;
    transition: filter .15s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: default; filter: none; transform: none; }
.btn-ghost {
    height: 42px; border: 1px solid var(--glass-border); border-radius: 12px; cursor: pointer; font: inherit; font-weight: 650; font-size: 14px;
    color: var(--a1); background: var(--glass-strong); padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 0 1px var(--glass-edge);
}
.btn-ghost:hover { box-shadow: 0 0 0 1px var(--a2), 0 6px 14px color-mix(in srgb, var(--a2) 18%, transparent); text-decoration: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row .btn-primary { width: auto; padding: 0 22px; }
.step-no { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); margin-right: 4px; flex-shrink: 0; box-shadow: 0 4px 10px color-mix(in srgb, var(--a1) 35%, transparent); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 6px 20px 20px; }
.choice {
    --cc: var(--a1); text-align: left; cursor: pointer; border: 2px solid var(--glass-border); border-radius: 18px; padding: 20px 20px 18px; font: inherit; color: var(--ink); position: relative; overflow: hidden;
    background: radial-gradient(260px 140px at 100% 0%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%), var(--glass-strong);
    box-shadow: var(--shadow); transition: border-color .15s, transform .2s, box-shadow .2s;
}
.choice:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.choice.on { border-color: var(--cc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cc) 18%, transparent), var(--shadow-hover); }
.choice .ci { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 70%, #000), var(--cc)); margin-bottom: 12px; box-shadow: 0 8px 18px color-mix(in srgb, var(--cc) 40%, transparent); }
.choice h3 { margin: 0 0 4px; font-size: 18px; }
.choice p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.choice code, .codepill { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.choice .tick { position: absolute; right: 16px; top: 16px; color: var(--cc); font-size: 24px; opacity: 0; transition: opacity .15s; }
.choice.on .tick { opacity: 1; }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; padding: 4px 20px 20px; }
@media (max-width: 991px) { .two-col { grid-template-columns: 1fr; } }
.sub-h { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 8px; }
.sub-h .btn-ghost { text-transform: none; letter-spacing: 0; font-size: 13.5px; height: 36px; }
.dropzone {
    display: block; border: 2px dashed color-mix(in srgb, var(--a2) 50%, transparent); border-radius: 18px; padding: 28px 18px; text-align: center; cursor: pointer; color: var(--ink-2);
    background: radial-gradient(400px 160px at 50% 0%, color-mix(in srgb, var(--a2) 14%, transparent), transparent 70%), var(--glass-strong); transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--a2); background: radial-gradient(400px 160px at 50% 0%, color-mix(in srgb, var(--a2) 24%, transparent), transparent 70%), var(--glass-strong); }
.dropzone i { font-size: 38px; color: var(--a2); display: block; margin-bottom: 6px; }
.dropzone b { color: var(--ink); }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.form-row .fgroup input, .form-row .fgroup select { width: 150px; }
.yy-note { font-size: 12.5px; color: var(--muted); height: 16px; }
.status-box { border-radius: 14px; padding: 12px 14px; font-size: 14px; border: 1px solid var(--glass-border); background: var(--glass-strong); }
.status-box.warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 16%, transparent), transparent), var(--glass-strong); }
.status-box.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 13%, transparent), transparent), var(--glass-strong); }
.status-box.bad { border-color: color-mix(in srgb, var(--critical) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--critical) 12%, transparent), transparent), var(--glass-strong); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 8px 0; }
.check-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--a1); }
.result-ok { font-size: 15px; }
.result-ok i { color: var(--good); font-size: 22px; vertical-align: -3px; margin-right: 6px; }

@media print {
    .site-nav, .filterbar, .panel-tools, .header-tools, .site-footer, .header-art { display: none !important; }
    body { background: #fff; } body::before { display: none; }
    .page-head { background: none !important; color: #000; padding-bottom: 10px; }
    .page-head h1, .page-head .lede { color: #000; } .page-head .hero-icon { display: none; }
    .page-head + #valueNotice:empty + .grid { margin-top: 0; }
    .panel, .tile { break-inside: avoid; box-shadow: none; backdrop-filter: none; background: #fff; }
    .no-print { display: none !important; }
    .bulletin-doc { box-shadow: none; border: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass: rgba(255, 255, 255, .92); }
    :root[data-theme="dark"] { --glass: rgba(22, 30, 27, .94); }
}

/* ---------- About: data partner logos (logos keep their own backgrounds in both themes) ---------- */
.partners { display: grid; gap: 10px; margin-top: 10px; }
.partner { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #ffffff; border: 1px solid rgba(0, 0, 0, .08); color: #3b4a44; font-size: 12.5px; line-height: 1.4; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.partner:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); text-decoration: none; color: #1d2a25; }
.partner img { height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.partner.dark { background: linear-gradient(135deg, #063b2b, #0a5a40); color: rgba(255, 255, 255, .85); border-color: transparent; }
.partner.dark:hover { color: #fff; }
.partner.dark img { height: 54px; }
.coverage-grid { display: grid; gap: 8px; margin-top: 10px; }
.coverage-grid > div { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.coverage-grid > div > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--a1); background: color-mix(in srgb,var(--a2) 13%,var(--surface)); }
.coverage-grid span { min-width: 0; display: flex; flex-direction: column; }
.coverage-grid b { font-size: 12.5px; }
.coverage-grid small { margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.contact-directory { display: grid; gap: 9px; margin-top: 10px; }
.contact-person { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.contact-person-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.contact-person > div { min-width: 0; display: flex; flex-direction: column; }
.contact-person b { font-size: 13.5px; line-height: 1.3; }
.contact-role { color: var(--muted); font-size: 12px; margin-top: 1px; }
.contact-phone { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; overflow-wrap: anywhere; }
.contact-phone.empty { padding: 0; text-align: left; color: var(--muted); font-style: italic; }
.contact-office { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.ws-ic { width: 1.1em; height: 1.1em; vertical-align: -0.12em; }
.ws-ic.sm { width: 26px; height: 26px; vertical-align: -6px; margin-right: 2px; }

/* ---------- continent cards ---------- */
.ct-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1199px) { .ct-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
    padding: 14px 14px 12px; border-radius: 18px; border: 1px solid var(--glass-border); overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 14%, var(--glass-strong)), var(--glass-strong) 60%);
    box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .15s, box-shadow .15s;
}
.ct-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ct-card.sel { border-color: var(--cc); box-shadow: var(--shadow-hover), 0 0 0 2px var(--cc) inset; }
.ct-ic { position: absolute; right: -10px; top: -12px; font-size: 64px; color: var(--cc); opacity: .16; line-height: 1; }
.ct-name { font-weight: 750; font-size: 15.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ct-name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cc); }
.ct-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); width: 100%; }
.ct-row b { color: var(--ink); margin-left: auto; }
.ct-row .muted { font-size: 11.5px; min-width: 30px; text-align: right; }
.ct-bal { margin-top: 4px; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; }
.ct-bal.pos { color: var(--exports); background: color-mix(in srgb, var(--exports) 12%, transparent); }
.ct-bal.neg { color: var(--imports); background: color-mix(in srgb, var(--imports) 12%, transparent); }
.ct-g { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* ---------- photo heroes ---------- */
.page-head.has-photo {
    background:
        linear-gradient(100deg, var(--a1) 0%, color-mix(in srgb, var(--a1) 88%, transparent) 32%, color-mix(in srgb, var(--a1) 40%, transparent) 58%, color-mix(in srgb, var(--a1) 8%, transparent) 85%, transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--a1) 45%, transparent), transparent 35%),
        var(--hero-img) center / cover no-repeat;
    min-height: 250px;
}
.page-head.has-photo::after { opacity: .35; }
.page-head.has-photo h1, .page-head.has-photo .lede { text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero-credit {
    position: absolute; right: var(--gutter); bottom: 58px; z-index: 1; font-size: 11.5px; color: rgba(255, 255, 255, .78);
    background: rgba(0, 0, 0, .22); padding: 3px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-credit:hover { color: #fff; text-decoration: none; background: rgba(0, 0, 0, .35); }
@media (max-width: 767px) { .hero-credit { display: none; } }
/* Full-colour banner artwork: shade only behind the heading so the picture stays visible. */
.page-head.has-banner {
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--a1) 82%, transparent) 0%, color-mix(in srgb, var(--a1) 55%, transparent) 30%, color-mix(in srgb, var(--a1) 12%, transparent) 55%, transparent 72%),
        linear-gradient(0deg, color-mix(in srgb, var(--a1) 40%, transparent), transparent 30%),
        var(--hero-img) center 58% / cover no-repeat;
}
.page-head.has-banner::after { opacity: .12; }
/* Flag banners: keep the flags and sky (top of the artwork) in view, with a little more height. */
body[data-page="China"] .page-head.has-banner, body[data-page="USA"] .page-head.has-banner { background-position: 0 0, 0 0, center 12%; }
body[data-page="Index"] .page-head.has-banner { background-position: 0 0, 0 0, center 45%; }
body[data-page="Food"] .page-head.has-banner, body[data-page="Textiles"] .page-head.has-banner { background-position: 0 0, 0 0, center 35%; }
@media (max-width: 900px) {
    .page-head.has-banner { background-image: linear-gradient(0deg, color-mix(in srgb, var(--a1) 85%, transparent), color-mix(in srgb, var(--a1) 45%, transparent)), var(--hero-img-sm); background-size: cover; background-position: center; }
}

/* ---------- richer stat cards ---------- */
.tile .t-wm {   /* large faint watermark icon in the corner */
    position: absolute; right: -14px; bottom: -26px; font-size: 118px; line-height: 1; pointer-events: none;
    color: var(--tc); opacity: .07; transform: rotate(-12deg);
}
.tile > *:not(.t-wm):not(.t-icon) { position: relative; }

/* ---------- Administration: users, traffic and security ---------- */
.admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.admin-tabs a { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--border); border-radius:10px; background:var(--glass-strong); color:var(--ink); text-decoration:none; font-weight:700; }
.admin-tabs a:hover,.admin-tabs a.active { color:#fff; background:var(--brand); border-color:var(--brand); }
.admin-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; margin-bottom:18px; }
.admin-kpi { padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--glass-strong); box-shadow:var(--shadow); }
.admin-kpi span,.admin-kpi small { display:block; color:var(--muted); font-size:12px; }
.admin-kpi strong { display:block; margin:5px 0 2px; font-size:24px; line-height:1.1; color:var(--ink); text-transform:capitalize; }
.admin-section-heading.compact { margin-top: 22px; margin-bottom: 10px; }
.admin-security-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin: 0 0 18px; }
.security-posture-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); background: var(--glass-strong); box-shadow: var(--shadow); text-decoration: none; transition: transform .16s ease,border-color .16s ease; }
.security-posture-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--a2) 46%,var(--border)); text-decoration: none; }
.security-posture-card > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--a1); background: color-mix(in srgb,var(--a2) 11%,transparent); font-size: 18px; }
.security-posture-card span,.security-posture-card small,.security-posture-card strong { min-width: 0; display: block; }
.security-posture-card small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.security-posture-card strong { margin-top: 3px; color: var(--ink); font-size: 22px; line-height: 1; }
.security-posture-card.watch > i { color: var(--critical-text); background: color-mix(in srgb,var(--critical) 12%,transparent); }
.security-posture-card.active > i { color: #986914; background: color-mix(in srgb,#d99a2b 14%,transparent); }
.security-posture-card.clear > i { color: var(--good-text); background: color-mix(in srgb,var(--good) 12%,transparent); }
.admin-two-col { align-items:start; margin-bottom:18px; }
.admin-chart { height:330px; }
.admin-list-panel { min-height:280px; }
.rank-list { list-style:none; margin:0; padding:0 16px 14px; }
.rank-list li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.rank-list li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-list li small { color:var(--muted); min-width:64px; text-align:right; }
.activity-panel { margin-top:18px; }
.activity-table { min-width:1050px; }
.activity-table td { vertical-align:top; }
.activity-path { max-width:330px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-id { max-width:150px; overflow:hidden; text-overflow:ellipsis; font-family:monospace; font-size:10px; }
.event-pill,.status-pill { display:inline-flex; padding:3px 7px; border-radius:999px; background:var(--surface-2); font-size:11px; font-weight:800; white-space:nowrap; }
.status-active { color:#087447; background:rgba(13,110,79,.12); }
.status-locked { color:#b23a2c; background:rgba(238,99,82,.14); }
.activity-filter,.block-form { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:15px; margin-bottom:18px; }
.activity-filter .fgroup,.block-form .fgroup { margin:0; min-width:145px; }
.activity-query,.block-value,.block-reason { flex:1 1 260px; }
.block-create { margin-bottom:18px; }
.block-create .panel-head { padding-bottom:0; }
.profile-list { display:grid; grid-template-columns:130px 1fr; gap:10px 15px; padding:8px 16px 18px; margin:0; }
.profile-list dt { color:var(--muted); font-weight:700; }
.profile-list dd { margin:0; overflow-wrap:anywhere; }
.user-security-actions { min-width:220px; }
.inline-admin-form { display:inline-block; margin:0 5px 7px 0; }
.password-reset-form { display:flex; gap:5px; }
.password-reset-form input { min-width:130px; max-width:170px; }
@media (max-width:900px) { .admin-security-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .admin-chart{height:280px}.profile-list{grid-template-columns:1fr}.profile-list dd{margin-bottom:7px}.password-reset-form{flex-direction:column}.activity-filter .btn-primary,.block-form .btn-primary{width:100%} .admin-security-strip { grid-template-columns: 1fr; } }

/* ---------- Traffic workspace ---------- */
.traffic-tabs { position: relative; z-index: 1; width: fit-content; margin: 12px 0 22px; padding: 5px; gap: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(16,36,31,.07); }
.traffic-tabs a { min-height: 38px; padding: 0 15px; border: 0; border-radius: 10px; box-shadow: none; }
.traffic-tabs a:not(.active):hover { background: var(--surface-2); }
.log-maintenance { display: grid; grid-template-columns: 42px minmax(220px,1fr) auto; gap: 12px; align-items: center; margin-bottom: 16px; padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--a2) 22%,var(--border)); border-radius: 15px; background: linear-gradient(110deg,color-mix(in srgb,var(--a2) 7%,var(--surface)),var(--surface)); }
.log-maintenance-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--a1); background: color-mix(in srgb,var(--a2) 13%,transparent); font-size: 18px; }
.log-maintenance-copy { display: flex; min-width: 0; flex-direction: column; }
.log-maintenance-copy b { color: var(--ink); font-size: 13px; }
.log-maintenance-copy span { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.log-clean-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.log-clean-form label { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.log-clean-form select { height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--surface); }
.btn-danger-soft { height: 38px; display: inline-flex; gap: 7px; align-items: center; padding: 0 13px; border: 1px solid color-mix(in srgb,var(--critical) 35%,var(--border)); border-radius: 9px; color: var(--critical-text); background: color-mix(in srgb,var(--critical) 9%,var(--surface)); font: inherit; font-size: 11.5px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.btn-danger-soft:hover { color: #fff; border-color: var(--critical); background: var(--critical); }
.traffic-overview { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.traffic-primary-stat, .traffic-stat { border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-strong); box-shadow: var(--shadow); }
.traffic-primary-stat { position: relative; display: block; min-width: 0; min-height: 126px; padding: 17px; overflow: hidden; background: radial-gradient(220px 130px at 100% 0%,color-mix(in srgb,var(--a2) 24%,transparent),transparent 72%),var(--glass-strong); }
.traffic-primary-icon { position: absolute; right: 13px; top: 11px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); font-size: 17px; box-shadow: 0 7px 18px color-mix(in srgb,var(--a1) 24%,transparent); }
.traffic-primary-stat > div { display: block; min-width: 0; }
.traffic-primary-stat small, .traffic-primary-stat span { display: block; max-width: calc(100% - 28px); overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.traffic-primary-stat small { font-weight: 700; }
.traffic-primary-stat strong { display: block; margin-top: 25px; color: var(--ink); font-size: 28px; line-height: 1; }
.traffic-primary-stat strong + span { max-width: 100%; margin-top: 5px; font-size: 10.5px; }
.traffic-stat { position: relative; min-width: 0; min-height: 126px; padding: 17px; overflow: hidden; }
.traffic-stat > i { position: absolute; right: 13px; top: 11px; color: color-mix(in srgb,var(--a2) 38%,transparent); font-size: 25px; }
.traffic-stat span { display: block; max-width: calc(100% - 24px); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.traffic-stat strong { display: block; margin-top: 25px; color: var(--ink); font-size: 24px; line-height: 1; }
.traffic-stat strong small { color: var(--muted); font-size: 11px; font-weight: 600; }
.traffic-chart-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(320px,.8fr); gap: 16px; margin-bottom: 16px; }
.traffic-chart-card { min-width: 0; }
.traffic-chart-card .admin-chart { height: 345px; }
.chart-badge { align-self: center; padding: 5px 9px; border-radius: 99px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); font-size: 11px; font-weight: 750; }
.traffic-rank-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.traffic-ranks li { grid-template-columns: 26px minmax(0,1fr) auto auto; gap: 9px; }
.traffic-ranks li em { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--a1); background: color-mix(in srgb,var(--a2) 11%,transparent); font-size: 10px; font-style: normal; font-weight: 800; }
.traffic-ranks li b { font-size: 12px; }
.activity-view-all { display: flex; justify-content: flex-end; margin: 11px 0 38px; }
.activity-panel { overflow: hidden; }
.activity-panel .users-table-wrap { padding: 0; }
.activity-table { min-width: 1120px; }
.activity-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: color-mix(in srgb,var(--surface) 92%,var(--a2)); }
.activity-table td { padding: 12px; }
.activity-time { white-space: nowrap; }
.activity-time b, .activity-time span { display: block; }
.activity-time b { font-size: 13px; }
.activity-time span { color: var(--muted); font-size: 10.5px; }
.event-pill { gap: 5px; align-items: center; padding: 5px 8px; color: var(--a1); background: color-mix(in srgb,var(--a2) 12%,transparent); }
.event-pill i { font-size: 11px; }
.event-login,.event-signup { color: var(--good-text); background: color-mix(in srgb,var(--good) 12%,transparent); }
.event-download { color: #4f61a5; background: color-mix(in srgb,#6575ba 12%,transparent); }
.event-search { color: #986914; background: color-mix(in srgb,#d99a2b 14%,transparent); }
.activity-request { max-width: 320px; }
.activity-request > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-request details { margin-top: 5px; color: var(--muted); font-size: 11px; }
.activity-request summary { cursor: pointer; color: var(--a1); }
.activity-request details p { max-width: 300px; margin: 5px 0 0; white-space: normal; overflow-wrap: anywhere; }
.client-context { min-width: 190px; font-size: 11.5px; }
.client-context code { color: var(--ink); font-size: 11.5px; }
.client-context > div:not(.device-id) { margin-top: 3px; color: var(--ink-2); }
.client-context small { color: var(--muted); }
.client-context .device-id { margin-top: 3px; color: var(--muted); }
.result-pill { display: inline-flex; gap: 5px; align-items: center; padding: 4px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; }
.result-pill.success { color: var(--good-text); background: color-mix(in srgb,var(--good) 12%,transparent); }
.result-pill.failed { color: var(--critical-text); background: color-mix(in srgb,var(--critical) 12%,transparent); }
.result-meta { margin-top: 4px; white-space: nowrap; font-size: 10.5px; }
.request-log-key { align-self: center; display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; }
.request-log-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb,var(--good) 12%,transparent); }
.empty-log { display: flex; flex-direction: column; align-items: center; padding: 32px; color: var(--muted); }
.empty-log i { color: var(--a2); font-size: 28px; }
.empty-log b { margin-top: 5px; color: var(--ink); }
.enriched-filter { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 12px; align-items: end; padding: 16px; }
.enriched-filter .filter-title { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.filter-title > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg,var(--a1),var(--a2)); }
.filter-title > div { display: flex; flex-direction: column; }
.filter-title small { color: var(--muted); }
.enriched-filter .fgroup { min-width: 0; }
.enriched-filter .activity-query { grid-column: span 2; }
.enriched-filter label { color: var(--ink-2); font-size: 11.5px; }
.enriched-filter input,.enriched-filter select { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; color: var(--ink); background: var(--surface); font: inherit; font-size: 12.5px; }
.filter-input-icon { position: relative; }
.filter-input-icon i { position: absolute; left: 11px; top: 11px; color: var(--muted); }
.filter-input-icon input { padding-left: 33px; }
.filter-actions { grid-column: span 2; display: flex; gap: 7px; }
.filter-actions .btn-primary,.filter-actions .btn-ghost { width: auto; height: 42px; padding: 0 14px; white-space: nowrap; }
.log-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 13px 0 38px; }
.log-pagination > div:first-child { display: flex; gap: 5px; color: var(--muted); font-size: 12px; }
.log-pagination > div:first-child strong { color: var(--ink); }
.page-buttons { display: flex; gap: 5px; }
.page-buttons a { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--ink-2); background: var(--surface); font-size: 12px; font-weight: 700; text-decoration: none; }
.page-buttons a:hover,.page-buttons a.active { color: #fff; border-color: var(--a1); background: var(--a1); }
.page-buttons a.disabled { opacity: .35; pointer-events: none; }
@media (max-width:900px) { .traffic-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } .enriched-filter { grid-template-columns:repeat(4,1fr); } .traffic-chart-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .traffic-tabs { width:100%; margin:10px 0 18px; flex-wrap:nowrap; overflow-x:auto; } .traffic-tabs a { flex:1 0 auto; justify-content:center; } .log-maintenance { grid-template-columns:42px 1fr; } .log-clean-form { grid-column:1/-1; } .traffic-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .traffic-primary-stat,.traffic-stat { min-height:108px; } .traffic-rank-grid { grid-template-columns:1fr; } .enriched-filter { grid-template-columns:1fr; } .enriched-filter .activity-query,.filter-actions { grid-column:span 1; } .log-pagination { align-items:flex-start; flex-direction:column; } .page-buttons { max-width:100%; overflow-x:auto; } }
@media (max-width:480px) { .log-clean-form { display:grid; grid-template-columns:1fr auto; } .log-clean-form label { grid-column:1/-1; } .btn-danger-soft { justify-content:center; } }

/* ---------- Analysis pages: method notes, quality flags and the printable bulletin ---------- */
.method-note { grid-column: span 12; font-size: 13px; color: var(--muted); line-height: 1.55; padding: 12px 16px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface-2); }
.method-note b { color: var(--ink-2); }
.quality-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; color: #8a5a00; background: rgba(240, 170, 40, .16); }
:root[data-theme="dark"] .quality-flag { color: #f3c46b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quality-flag { color: #f3c46b; } }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; position: relative; z-index: 1; }
.page-actions select, .page-actions .btn-lite { height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.22); color: #fff; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.page-actions select option { color: #000; }
.bulletin-doc { grid-column: span 12; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px; padding: 26px 30px; box-shadow: var(--shadow); line-height: 1.6; }
.bulletin-doc h2 { font-size: 22px; margin: 0 0 4px; }
.bulletin-doc h3 { font-size: 16px; margin: 22px 0 8px; }
.bulletin-doc .b-meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.bulletin-doc ul { margin: 6px 0 0 18px; padding: 0; }
.bulletin-doc li { margin: 4px 0; }
.bulletin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.bulletin-table th, .bulletin-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.bulletin-table th:first-child, .bulletin-table td:first-child { text-align: left; }
.bulletin-table thead th { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gauge-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 767px) { .gauge-row { grid-template-columns: 1fr; } .bulletin-doc { padding: 18px 16px; } }

/* ---------- Trade agreements page ---------- */
.finding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.finding { position: relative; padding: 18px 20px 16px 62px; border: 1px solid var(--border); border-left: 4px solid var(--a2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.finding.neg { border-left-color: var(--imports); } .finding.pos { border-left-color: var(--exports); }
.finding > i { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: 16px; color: var(--a1); background: color-mix(in srgb, var(--a2) 14%, transparent); }
.finding h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.finding p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.agreement-facts .fi { width: 30px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
.score-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.score-table th { text-align: left; font-size: 12px; font-weight: 750; color: var(--ink-2); padding: 10px 12px; border-bottom: 2px solid var(--border); vertical-align: bottom; }
.score-table th small, .score-table td small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
.score-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.score-table tbody tr { cursor: pointer; transition: background .15s; }
.score-table tbody tr:hover { background: color-mix(in srgb, var(--a2) 7%, transparent); }
.score-table .ba { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.score-table .ba > span { color: var(--muted); } .score-table .ba i { color: var(--muted); font-size: 12px; }
.score-table .pos { color: var(--exports); } .score-table .neg { color: var(--imports); }
.verdict-pill { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1.3; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink-2); }
.verdict-pill.pos { background: color-mix(in srgb, var(--exports) 15%, transparent); color: var(--exports); }
.verdict-pill.neg { background: color-mix(in srgb, var(--imports) 15%, transparent); color: var(--imports); }
.agreement-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; }
.agreement-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 750; font-size: 14.5px; cursor: pointer; text-align: left; transition: box-shadow .15s, border-color .15s; }
.agreement-tabs button small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.agreement-tabs button.on { border-color: var(--a2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a2) 35%, transparent); background: color-mix(in srgb, var(--a2) 8%, var(--surface)); }
.agreement-story { padding: 4px 18px 16px; font-size: 13.5px; line-height: 1.55; }
.agreement-story h3 { margin: 10px 0 6px; font-size: 17px; }
.agreement-story h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--a1); }
.agreement-story p { margin: 6px 0; color: var(--ink-2); }
.story-terms { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.story-terms b { color: var(--ink-2); }
.story-terms-list p { display: flex; gap: 8px; font-size: 12.5px; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: var(--surface-2); }
.story-terms-list i { color: var(--a2); }
@media (max-width: 900px) { .finding-grid { grid-template-columns: 1fr; } .agreement-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-page="AfghanTransit"] { --a1: #5a3a1f; --a2: #b0602a; --a3: #ead2b4; }
body[data-page="Corridors"] { --a1: #7a1f24; --a2: #c8473a; --a3: #f3c9a0; }
.event-list { list-style: none; margin: 0; padding: 4px 18px 14px; }
.event-list li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.event-list li:last-child { border-bottom: 0; }
.event-list time { font-weight: 750; color: var(--a1); font-size: 12px; }
.event-list small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.event-list a { font-size: 11.5px; }
.port-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.port-table th, .port-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; }
.port-table th:first-child, .port-table td:first-child { text-align: left; }
.port-table thead th { font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* ---------- Commodity expert view ---------- */
.ci-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; padding: 4px 16px 16px; margin: 0; list-style: none; }
.ci-findings li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13.5px; line-height: 1.5; }
.ci-findings li > i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--a1); background: color-mix(in srgb, var(--a2) 14%, transparent); }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 800px) { .event-grid { grid-template-columns: 1fr; } }
.episode-cost small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--muted); }

body[data-page="Fertilizer"] { --a1: #3d5a1e; --a2: #7aa33a; --a3: #e2d48a; }
body[data-page="Pharmaceutical"] { --a1: #134a63; --a2: #2a93b3; --a3: #b9e3ef; }
body[data-page="PreciousMetals"] { --a1: #6b4d12; --a2: #c49a2c; --a3: #f1dfa6; }
body[data-page="SportsGoods"] { --a1: #1d4a2c; --a2: #2f9a5a; --a3: #f0c75e; }

/* ---------- About: contents, datasets table, glossary; method links on analysis pages ---------- */
.about-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.about-toc a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 650; text-decoration: none; }
.about-toc a:hover { color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); border-color: transparent; }
.prose h2[id] { scroll-margin-top: 80px; }
.about-table-wrap { overflow-x: auto; margin: 10px 0; }
.about-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.about-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--border); }
.about-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--ink-2); line-height: 1.45; }
.about-table td:first-child { color: var(--ink); font-weight: 650; }
.glossary { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0 18px; }
.glossary dt { margin-top: 10px; }
.glossary dd { margin-top: 10px; }
@media (max-width: 700px) { .glossary { grid-template-columns: 1fr; } .glossary dd { margin-top: 2px; } }
.method-link { grid-column: span 12; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.method-link a { font-weight: 650; }

body[data-page="Iran"] { --a1: #1d5a3a; --a2: #2f9a5e; --a3: #e04b4b; }
body[data-page="UAE"] { --a1: #1f3b2c; --a2: #2e8b57; --a3: #c8102e; }
body[data-page="SaudiArabia"] { --a1: #0c4d2c; --a2: #1a8a4f; --a3: #d9c07a; }
body[data-page="Turkey"] { --a1: #7a1214; --a2: #d0343a; --a3: #f1b3b0; }
body[data-page="UK"] { --a1: #142a5c; --a2: #3157a8; --a3: #c8102e; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 4px 16px 16px; }
.sig-card { padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--a2); border-radius: 12px; background: var(--surface); }
.sig-card strong { display: block; font-size: 22px; letter-spacing: -.02em; }
.sig-card span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sig-card small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* Uraan menu icon: the eagle from the original Ministry programme cover, on a white tile because its left wing is white. */
.uraan-nav-icon { display:inline-block; width:22px; height:22px; background:url('../images/uraan/eagle-icon.png') center/88% no-repeat; filter:grayscale(1) invert(1); mix-blend-mode:screen; vertical-align:middle; }