/* @docs base.css - reset, design tokens (CSS vars), typography, top bar, About + Methodology hero, Stat aside, vars-footer + overview entry cards, plus generic site chrome: RTL flips, .content shell, breadcrumb, .topic + fadeIn, keyfacts, .data-table, .tag/.verify badges, topic grid, children-list, empty-stub, services list, .lang-tag, KPI strip, .data-subhead, footer-note, banner-disclaimer + icon, .u-* utility classes. */

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg-primary: #ffffff;
            --bg-warm: #c4b8b0;
            --bg-warm-light: #d9cfc8;
            --bg-warm-dark: #928989;
            --bg-light: #f5f3f0;
            --bg-sidebar: #faf8f6;
            --bg-dark: #1a1a1a;
            --text-dark: #1a1a1a;
            --text-dark-secondary: rgba(26, 26, 26, 0.55);
            --text-dark-tertiary: rgba(26, 26, 26, 0.4);
            --text-light: #ffffff;
            --border-soft: rgba(26, 26, 26, 0.08);
            --border-mid: rgba(26, 26, 26, 0.14);
        }

        html { scroll-behavior: smooth; }
        /* Prevent the page itself from ever scrolling horizontally - any wide content
           (e.g. the ISTP table) must scroll within its own container, not push the page. */
        html, body { overflow-x: hidden; }

        body {
            font-family: 'Helvetica Now Text', 'Inter', Arial, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-dark);
            font-size: 15px;
            font-weight: 400;
            line-height: 1.55;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.045em; margin-bottom: 1rem; }
        h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; margin-top: 2.5rem; margin-bottom: 0.85rem; }
        h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; margin-top: 1.75rem; margin-bottom: 0.65rem; color: var(--text-dark); }
        h4 { font-size: 0.95rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }

        p { margin-bottom: 0.9rem; color: var(--text-dark); }
        p.lede { font-size: 1.0625rem; color: var(--text-dark-secondary); line-height: 1.6; letter-spacing: -0.02em; margin-bottom: 1.75rem; }

        a { color: #4a5d6e; text-decoration: none; }
        a:hover { color: var(--text-dark); text-decoration: underline; text-decoration-color: rgba(26,26,26,0.25); text-underline-offset: 3px; }

        ul, ol { margin: 0.5rem 0 1.25rem 1.4rem; }
        li { margin-bottom: 0.35rem; }
        li::marker { color: var(--text-dark-tertiary); }

        code, .mono { font-family: 'SF Mono', 'Menlo', 'Monaco', monospace; font-size: 0.85em; background: var(--bg-light); padding: 1px 6px; border-radius: 4px; }

        /* ========= TOP NAV ========= */
        .topbar {
            position: sticky; top: 0; z-index: 100;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-soft);
            padding: 0.85rem 2.5rem;
        }
        .topbar-inner { display: flex; align-items: center; justify-content: flex-start; max-width: 100%; gap: 1.5rem; }
        .topbar-inner .topbar-search { margin-left: auto; }
        .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text-dark); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.025em; cursor: pointer; }
        .brand-mark {
            display: inline-flex; align-items: center; justify-content: center;
        }
        .brand-name { display: flex; flex-direction: column; line-height: 1.05; }
        .brand-name-main { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.025em; }
        .brand-name-sub { font-size: 0.7rem; font-weight: 400; color: var(--text-dark-secondary); letter-spacing: 0; margin-top: 1px; }

        .topbar-search {
            flex: 1; max-width: 480px;
            position: relative;
        }
        .topbar-search input {
            width: 100%; height: 36px;
            border: 1px solid var(--border-mid);
            border-radius: 8px;
            padding: 0 36px 0 36px;
            font-family: inherit; font-size: 13.5px; color: var(--text-dark);
            background: #fff;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
            letter-spacing: -0.01em;
        }
        .topbar-search input::placeholder { color: var(--text-dark-tertiary); }
        .topbar-search input:focus { outline: none; border-color: var(--bg-warm-dark); box-shadow: 0 0 0 3px rgba(146,137,137,0.12); }
        .topbar-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dark-tertiary); pointer-events: none; }
        .topbar-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dark-tertiary); cursor: pointer; font-size: 14px; display: none; padding: 2px 6px; }
        .topbar-search input:not(:placeholder-shown) + .topbar-search-clear { display: block; }

        .topbar-meta { font-size: 0.75rem; color: var(--text-dark-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }

        /* Top-bar nav links - matches vars.live style */
        .topbar-nav { display: flex; align-items: center; gap: 1.5rem; }
        .topbar-nav-link {
            font-size: 14px;
            color: var(--text-dark-secondary);
            text-decoration: none;
            font-weight: 500;
            letter-spacing: -0.01em;
            transition: color 0.15s ease;
            cursor: pointer;
        }
        .topbar-nav-link:hover { color: var(--text-dark); }
        @media (max-width: 768px) {
            .topbar-nav { display: none; }
        }

        /* On About / Methodology the sidebar is hidden so the content uses the full width.
           The breadcrumb stays visible (every page needs path context). */
        body.view-fullwidth aside.sidebar,
        body.view-fullwidth .sidebar-resize { display: none !important; }
        body.view-fullwidth .layout { grid-template-columns: 1fr !important; }
        body.view-fullwidth .content { padding: 2rem 2rem 6rem; }

        /* About page styling (vars.live-inspired) - full content width, body padding handles edges */
        .about-hero { width: 100%; text-align: left; padding: 1rem 0 3rem; }
        .about-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.05; margin-bottom: 1.5rem; }
        .about-hero .lede { font-size: 1.125rem; color: var(--text-dark-secondary); line-height: 1.65; margin-bottom: 2rem; }
        .about-section { width: 100%; margin: 0 0 3rem; }
        .about-section h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 0.85rem; }
        .about-section p { color: var(--text-dark); line-height: 1.7; margin-bottom: 0.9rem; }
        .about-divider { width: 100%; margin: 3rem 0; border: none; border-top: 1px solid var(--border-soft); }

        /* Statista-style stat aside on About / Methodology pages */
        .about-stats {
            float: right;
            width: 360px;
            margin: 0.5rem 0 1.5rem 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        .stat-card {
            padding: 1.5rem 1.75rem;
            border-radius: 10px;
            background: var(--bg-warm-light);
            border: 1px solid var(--border-soft);
        }
        .stat-card-primary { background: #2c5cdc; color: #fff; border: 0; }
        .stat-card-dark { background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%); color: #fff; border: 0; }
        .stat-card .stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dark-secondary); margin-bottom: 0.45rem; }
        .stat-card-primary .stat-label, .stat-card-dark .stat-label { color: rgba(255,255,255,0.78); }
        .stat-card .stat-value { font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-dark); }
        .stat-card-primary .stat-value, .stat-card-dark .stat-value { color: #fff; }
        @media (max-width: 900px) {
            .about-stats { float: none; width: auto; margin: 0 0 2rem; }
            .stat-card { padding: 1rem 1.2rem; }
            .stat-card .stat-value { font-size: 1.6rem; }
        }
        /* vars.live-style multi-column footer for the About page - spans full content width */
        .vars-footer { width: 100%; margin: 4rem 0 0; padding: 4rem 0 1.5rem; border-top: 1px solid rgba(0,0,0,0.08); }
        .gulfinfra-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
        .gulfinfra-footer-brand-name { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.04em; margin: 0 0 0.85rem; color: var(--text-dark); }
        .gulfinfra-footer-tagline { font-size: 14px; color: var(--text-dark-secondary); line-height: 1.55; margin: 0; max-width: 320px; }
        .gulfinfra-footer-col-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dark-secondary); margin-bottom: 1rem; }
        .gulfinfra-footer-col a, .gulfinfra-footer-col span { display: block; font-size: 14px; color: var(--text-dark); text-decoration: none; padding: 0.25rem 0; cursor: pointer; }
        .gulfinfra-footer-col a:hover { text-decoration: underline; }
        .gulfinfra-footer-bottom { width: 100%; margin: 3rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(0,0,0,0.06); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dark-secondary); }
        .gulfinfra-footer-publisher { width: 100%; margin: 0.5rem 0 0; display: flex; align-items: center; gap: 0.6rem; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dark-tertiary); }
        .gulfinfra-footer-publisher-label { font-weight: 500; }
        .gulfinfra-footer-publisher-mark { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--text-dark-secondary); font-weight: 600; letter-spacing: 0.04em; }
        .gulfinfra-footer-publisher-mark img { height: 16px; width: auto; }

        /* Overview page: side-by-side entry-point cards (Infrastructure database + Methodology) */
        .overview-embeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 2rem 0; }
        .overview-embed-card { display: block; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text-dark); text-decoration: none; transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
        .overview-embed-card:hover { border-color: #6b6360; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .overview-embed-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark-tertiary); margin-bottom: 0.5rem; }
        .overview-embed-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.55rem; }
        .overview-embed-blurb { font-size: 14px; color: var(--text-dark-secondary); line-height: 1.55; margin: 0 0 1rem; }
        .overview-embed-cta { font-size: 13px; font-weight: 500; color: var(--text-dark); }
        @media (max-width: 768px) {
            .gulfinfra-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
        }

        /* ========= RTL (Arabic) =========
           Minimal flip - the main grid still uses sidebar-on-left, content-on-right,
           but text inside elements becomes right-aligned and inline spacing mirrors.
           We keep the visual layout consistent so users can compare the EN + AR
           versions of the same page side-by-side without remapping their mental model. */
        html[dir='rtl'] body { font-family: 'IBM Plex Sans Arabic', 'Plex Sans', 'Helvetica Neue', Arial, sans-serif; }
        html[dir='rtl'] .topbar-nav { gap: 1.25rem; }
        html[dir='rtl'] .tree-row { text-align: right; }
        html[dir='rtl'] .tree-row .tree-icon { margin-left: 0.5rem; margin-right: 0; }
        html[dir='rtl'] .tree-group-label { text-align: right; }
        html[dir='rtl'] .lang-toggle:focus-visible { outline: 2px solid #1a1a1a; }
        html[dir='rtl'] .player-card-stats { justify-content: flex-end; }
        html[dir='rtl'] .news-card-meta { justify-content: flex-end; }
        html[dir='rtl'] .breadcrumb { direction: rtl; }
        /* Latin-script proper nouns (entity names, sources) should stay LTR even on
           an RTL page so dates / acronyms / company names render readably. */
        html[dir='rtl'] .news-card-title,
        html[dir='rtl'] .player-card-name,
        html[dir='rtl'] .tender-card-title { unicode-bidi: plaintext; }

        /* ========= CONTENT ========= */
        .content {
            padding: 2.5rem 2.5rem 5rem 2.5rem;   /* right padding matches the topbar's 2.5rem - table right edge lines up with the search-bar right edge */
            width: 100%;
            min-width: 0;                        /* lets the wide table scroll internally instead of stretching the grid item */
            box-sizing: border-box;
        }
        .content > * { max-width: 100%; }
        /* All pages span the full content width; horizontal padding on .content keeps text off the edges. */
        .topic { max-width: 100%; }

        /* Breadcrumb hidden so each topic reads like a standalone SEO page.
           The path still drives the document <title> + canonical URL for crawlers. */
        /* Path breadcrumb above every main-content page. Reads like
           "Database › Industries › Sewage Treatment Plants". Each segment is clickable. */
        /* Breadcrumb is hidden site-wide. The H1 of each page already names
           the page; the sidebar shows the path. Keeping the breadcrumb just
           duplicated information across every page. */
        .breadcrumb { display: none !important; }
        .breadcrumb-sep { color: var(--text-dark-tertiary); user-select: none; }
        .breadcrumb-item {
            color: var(--text-dark-tertiary);
            cursor: pointer;
            text-decoration: none;
            transition: color 120ms;
        }
        .breadcrumb-item:hover { color: var(--text-dark); }
        .breadcrumb-item.current { color: var(--text-dark); font-weight: 500; cursor: default; }
        .breadcrumb-item.current:hover { color: var(--text-dark); }

        .topic { display: none; animation: fadeIn 0.35s ease-out; }
        .topic.visible { display: block; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .topic-meta {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-size: 11.5px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-dark-tertiary);
            margin-bottom: 1rem;
        }
        .topic-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bg-warm-dark); }

        /* Definition / key-fact block */
        .keyfacts {
            background: var(--bg-light);
            border-radius: 10px;
            padding: 1.1rem 1.25rem;
            margin: 1.25rem 0 1.75rem;
            border: 1px solid var(--border-soft);
        }
        .keyfacts dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.5rem; margin: 0; }
        .keyfacts dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark-tertiary); font-weight: 500; padding-top: 2px; }
        .keyfacts dd { font-size: 14px; color: var(--text-dark); margin: 0; }

        /* Table */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.25rem 0 1.75rem;
            font-size: 13.5px;
            border: 1px solid var(--border-soft);
            border-radius: 8px;
            overflow: hidden;
        }
        .data-table th {
            background: var(--bg-sidebar);
            text-align: left;
            font-weight: 500;
            font-size: 12px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-dark-secondary);
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-soft);
        }
        .data-table td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-soft);
            vertical-align: top;
            color: var(--text-dark);
        }
        .data-table tr:last-child td { border-bottom: none; }
        .data-table tr:hover td { background: rgba(146,137,137,0.04); }

        /* Glossary - click-to-expand term description rows. Term rows carry
           data-desc; on click, the glossary JS toggles is-open which displays
           the description panel below. The description sits in a follow-up
           <tr.gloss-desc> that the JS lazily inserts, so the markup in
           shell.html stays compact. */
        article[data-topic="glossary"] tr[data-desc] {
            cursor: pointer;
            user-select: none;
            transition: background 120ms ease;
        }
        article[data-topic="glossary"] tr[data-desc] td:first-child {
            position: relative;
            padding-left: 28px;
        }
        article[data-topic="glossary"] tr[data-desc] td:first-child::before {
            content: "+";
            position: absolute;
            left: 10px;
            top: 10px;
            color: var(--text-dark-tertiary);
            font-weight: 400;
            font-size: 13px;
            transition: transform 120ms ease, color 120ms ease;
        }
        article[data-topic="glossary"] tr[data-desc].is-open td:first-child::before {
            content: "-";
            color: var(--text-dark);
        }
        article[data-topic="glossary"] tr.gloss-desc {
            background: var(--bg-sidebar);
        }
        article[data-topic="glossary"] tr.gloss-desc td {
            padding: 12px 20px 16px 28px;
            border-bottom: 1px solid var(--border-soft);
            color: var(--text-dark-secondary);
            font-size: 13.25px;
            line-height: 1.55;
        }
        article[data-topic="glossary"] tr.gloss-desc:not(.is-open) { display: none; }

        /* News detail - "per-claim source attribution pending" banner.
           Soft amber, calm typography. Shown above the facts card on every
           legacy item until its field_sources map is populated by the audit
           pass. Items that have already been round-tripped against their
           source pages don't get this. */
        .news-audit-banner {
            margin: 0.4rem 0 0.85rem;
            padding: 0.7rem 0.95rem 0.75rem;
            background: rgba(187, 145, 70, 0.06);
            border: 1px solid rgba(187, 145, 70, 0.28);
            border-left-width: 3px;
            border-radius: 6px;
            font-size: 12.5px;
            line-height: 1.5;
            color: var(--text-dark-secondary);
        }
        .news-audit-banner strong {
            color: var(--text-dark);
            font-weight: 600;
            margin-right: 0.25rem;
        }

        /* Tags / badges */
        .tag {
            display: inline-block;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: var(--bg-light);
            color: var(--text-dark-secondary);
            letter-spacing: 0;
            margin-right: 0.35rem;
            font-weight: 500;
            border: 1px solid var(--border-soft);
        }
        .tag-green { background: #e6ede2; color: #4f6240; border-color: #d4ddca; }
        .tag-amber { background: #f1e7d3; color: #7a6432; border-color: #e3d4b0; }
        .tag-red    { background: #efdcd9; color: #884740; border-color: #e0c1bc; }
        .tag-blue   { background: #dee3ec; color: #4a5a72; border-color: #c8d1de; }
        .tag-grey   { background: #e6e3df; color: #555049; border-color: #d4d0cc; }

        .verify {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 500;
            padding: 1px 7px;
            border-radius: 4px;
            background: #fbf0d8;
            color: #8c6a1f;
            letter-spacing: 0.02em;
            border: 1px solid #f0dca8;
            margin-left: 6px;
            vertical-align: middle;
            cursor: help;
        }

        /* Topic card grid (used on overview) */
        .topic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 0.85rem;
            margin: 1.5rem 0 2rem;
        }
        .topic-card {
            display: block;
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 1.1rem 1.2rem 1rem;
            cursor: pointer;
            transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
            text-decoration: none;
            color: var(--text-dark);
        }
        .topic-card:hover {
            border-color: var(--border-mid);
            transform: translateY(-2px);
            box-shadow: 0 6px 22px rgba(0,0,0,0.045);
            text-decoration: none;
        }
        .topic-card-num {
            font-size: 11px;
            color: var(--text-dark-tertiary);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 0.45rem;
        }
        .topic-card-title {
            font-size: 1.05rem;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 0.4rem;
        }
        .topic-card-desc {
            font-size: 13px;
            color: var(--text-dark-secondary);
            line-height: 1.45;
        }
        .topic-card-count {
            font-size: 11px;
            color: var(--text-dark-tertiary);
            margin-top: 0.65rem;
            letter-spacing: 0.04em;
        }

        /* Children list (sub-page index inside a category) */
        .children-list {
            list-style: none;
            margin: 1rem 0 1.5rem;
            padding: 0;
            border-top: 1px solid var(--border-soft);
        }
        .children-list li {
            border-bottom: 1px solid var(--border-soft);
            margin: 0;
        }
        .children-list a {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.75rem 0;
            color: var(--text-dark);
            text-decoration: none;
            gap: 1rem;
        }
        .children-list a:hover { text-decoration: none; color: var(--text-dark); }
        .children-list-title { font-weight: 500; font-size: 14px; }
        .children-list-desc { font-size: 13px; color: var(--text-dark-secondary); flex: 1; }
        .children-list-arrow { color: var(--text-dark-tertiary); font-size: 14px; }
        .children-list a:hover .children-list-arrow { color: var(--text-dark); transform: translateX(2px); transition: transform 0.15s ease, color 0.15s ease; }

        .empty-stub {
            border: 1px dashed var(--border-mid);
            border-radius: 8px;
            padding: 1rem 1.25rem;
            font-size: 13px;
            color: var(--text-dark-secondary);
            background: rgba(250,248,246,0.5);
            margin: 1rem 0 1.5rem;
        }
        .empty-stub strong { color: var(--text-dark); font-weight: 500; }

        /* ========= SERVICES LIST ========= */
        .services-list {
            display: grid; gap: 0.5rem;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            margin: 0.85rem 0 1.5rem;
        }
        .service-row {
            background: #fff; border: 1px solid var(--border-soft);
            border-radius: 8px;
            padding: 0.7rem 0.95rem 0.7rem 0.8rem;
            display: flex; align-items: center; gap: 0.8rem;
            text-decoration: none; color: var(--text-dark);
            transition: border-color 0.15s ease, transform 0.15s ease;
        }
        .service-row:hover { border-color: var(--border-mid); transform: translateY(-1px); text-decoration: none; color: var(--text-dark); }
        .service-icon {
            flex-shrink: 0;
            width: 30px; height: 30px;
            border-radius: 6px;
            background: var(--bg-light);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .service-body { flex: 1; min-width: 0; }
        .service-name { font-size: 13.5px; font-weight: 500; letter-spacing: -0.012em; }
        .service-cat { font-size: 11px; color: var(--text-dark-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }
        .service-arrow { color: var(--text-dark-tertiary); font-size: 14px; }
        .service-row:hover .service-arrow { color: var(--text-dark); }

        .section-source-link {
            display: inline-block;
            font-size: 12.5px;
            color: var(--text-dark-secondary);
            text-decoration: none;
            margin: -0.5rem 0 1.5rem;
            letter-spacing: -0.005em;
        }
        .section-source-link:hover { color: var(--text-dark); text-decoration: underline; }

        /* ========= LANGUAGE / OFFICIAL BADGES ========= */
        .lang-tag {
            display: inline-block;
            font-size: 9.5px;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 3px;
            background: rgba(0,0,0,0.06);
            color: var(--text-dark-secondary);
            letter-spacing: 0.06em;
            margin-left: 6px;
            vertical-align: middle;
            text-transform: uppercase;
        }
        .lang-tag.official { background: #d8e7df; color: #2d5a3f; }

        /* ========= KPI STRIP ========= */
        .kpi-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 0.6rem;
            margin: 1rem 0 1.75rem;
        }
        .kpi-card {
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 0.95rem 1.05rem 0.85rem;
            transition: border-color 0.15s ease;
        }
        .kpi-card:hover { border-color: var(--border-mid); }
        .kpi-value {
            font-size: 1.55rem;
            font-weight: 500;
            letter-spacing: -0.04em;
            color: var(--text-dark);
            line-height: 1.05;
            margin-bottom: 0.35rem;
        }
        .kpi-value-unit {
            font-size: 0.55em;
            color: var(--text-dark-secondary);
            margin-left: 3px;
            font-weight: 400;
            letter-spacing: -0.015em;
            text-transform: uppercase;
        }
        .kpi-label {
            font-size: 12.5px;
            color: var(--text-dark-secondary);
            line-height: 1.4;
            letter-spacing: -0.005em;
            margin-bottom: 0.45rem;
        }
        .kpi-source {
            font-size: 10.5px;
            color: var(--text-dark-tertiary);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 500;
        }
        .kpi-source a { color: inherit; text-decoration: none; }
        .kpi-source a:hover { color: var(--text-dark); }

        .data-subhead {
            font-size: 11px;
            color: var(--text-dark-tertiary);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-weight: 500;
            margin: 1.5rem 0 0.5rem;
        }

        /* Disclaimer banner */
        .banner-disclaimer {
            background: #fbf6ec;
            border: 1px solid #e9d8af;
            border-radius: 8px;
            padding: 0.65rem 0.95rem;
            font-size: 12.5px;
            color: #6f5728;
            margin-bottom: 1.5rem;
            display: flex; align-items: flex-start; gap: 0.6rem;
        }
        .banner-disclaimer-icon { flex-shrink: 0; margin-top: 1px; }

/* ===== Utility classes — replace high-frequency inline style="..." values =====
   Naming: `.u-<short-tag>`. These exist to fold the most-repeated inline
   style attributes out of index.html. Visual output is identical to the
   original inline declarations. Do not extend without good reason. */
.u-td        { padding: 8px 10px; }
.u-m0        { margin: 0; }
.u-t-sub     { font-size: 11px; color: var(--text-dark-tertiary); margin-top: 2px; }
.u-card-img  { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.u-t-12b     { font-size: 12px; font-weight: 600; }
.u-t-11g     { font-size: 11px; color: #666; margin-top: 3px; }
.u-card-ph   { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.u-bb-rule   { border-bottom: 1px solid var(--rule); }
.u-h-sec     { font-size: 18px; margin-top: 22px; }
.u-t-sec-m0  { color: var(--text-dark-secondary); margin: 0; }
.u-clic      { cursor: pointer; }
.u-link-sub  { display: block; color: var(--text-dark-secondary); font-size: 11.5px; line-height: 1.45; }
.u-link-dark { color: var(--text-dark); display: block; }