/* @docs diagrams.css - inline-SVG diagrams: ISTP "how is the sewage treated?" flow (.istp-flow-*, .iflow-*), ISTP visual tech-chart wrapper + cards + meta, social-asset taxonomy grid (Overview tab), industry floating circles (PPP landing) + float keyframes, PPP structure diagram (.ppp-diagram-wrap), ORG chart / shareholding diagram (org-node/anchor/tadweer/soft, org-connector, org-rail-wrap, org-leader-card, org-legend), ISTP plan detail panel + numbered legend (.istp-pdh, .istp-pdl, .istp-plan-legend-item), ISTP real-world example carousel (.istp-carousel-*). */

        /* ========= ISTP: "How is the sewage treated?" flow diagram ========= */
        .istp-flow-wrap {
            background: var(--bg-sidebar);
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 1.2rem 1.25rem 1rem;
            margin: 0.9rem 0 1.5rem;
        }
        .istp-flow-svg {
            display: block;
            width: 100%;
            max-width: 720px;
            height: auto;
            margin: 0 auto;
        }
        .iflow-box {
            cursor: pointer;
            transition: filter 150ms ease, opacity 150ms ease;
        }
        .iflow-box rect {
            transition: stroke-width 150ms ease, filter 150ms ease;
        }
        .iflow-box:hover rect,
        .iflow-box:focus rect {
            stroke-width: 2;
            filter: brightness(0.98);
        }
        .iflow-box:focus { outline: none; }
        .iflow-box.is-active rect {
            stroke-width: 2.5;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
        }
        .istp-flow-legend {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.4rem 1.5rem;
            margin: 0.75rem 0 0;
            font-size: 13px;
            color: var(--text-dark-secondary);
        }
        .iflow-lg { display: inline-flex; align-items: center; gap: 0.4rem; }
        .iflow-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid currentColor; }
        .istp-flow-detail {
            margin-top: 1rem;
            padding: 0.95rem 1.1rem;
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 8px;
        }
        .istp-flow-detail[data-empty="true"] h4,
        .istp-flow-detail[data-empty="true"] p { color: var(--text-dark-tertiary); }
        .istp-flow-detail h4 {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 0.4rem;
            color: var(--text-dark);
        }
        .istp-flow-detail p {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-dark-secondary);
            margin: 0;
        }

        /* ========= ISTP: visual treatment-technologies block ========= */
        .istp-tech-chart-wrap {
            background: var(--bg-sidebar);
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 1.1rem 1.25rem 0.85rem;
            margin: 0.9rem 0 1.25rem;
        }
        .istp-tech-chart-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-dark-tertiary);
            margin-bottom: 0.35rem;
        }
        .istp-tech-chart {
            display: block;
            width: 100%;
            height: auto;
            max-width: 760px;
            margin: 0 auto;
        }
        .istp-tech-chart-source {
            font-size: 11.5px;
            color: var(--text-dark-tertiary);
            margin: 0.5rem 0 0;
            line-height: 1.5;
        }
        .istp-tech-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 0.85rem;
            margin: 0 0 0.85rem;
        }
        .istp-tech-card {
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 0.85rem 1rem 0.9rem;
        }
        .istp-tech-card-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
        .istp-tech-tag {
            display: inline-block;
            padding: 0.18rem 0.55rem;
            border-radius: 5px;
            background: var(--tag, #a8b8b4);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.03em;
        }
        .istp-tech-full {
            font-size: 11.5px;
            color: var(--text-dark-tertiary);
            font-style: italic;
        }
        .istp-tech-desc {
            font-size: 12.5px;
            color: var(--text-dark);
            line-height: 1.5;
            margin: 0 0 0.6rem;
        }
        .istp-tech-meta {
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: 0.9rem;
            row-gap: 0.18rem;
            margin: 0;
            font-size: 12px;
        }
        .istp-tech-meta dt { color: var(--text-dark-tertiary); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; padding-top: 1px; }
        .istp-tech-meta dd { margin: 0; color: var(--text-dark); }

        /* ========= SOCIAL INFRA: asset-taxonomy grid (Overview tab) ========= */
        .social-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin: 1rem 0 1.5rem; }
        .social-asset-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.85rem 0.95rem 0.9rem; }
        .social-asset-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dark-tertiary); margin-bottom: 0.3rem; }
        .social-asset-name { font-size: 13.5px; font-weight: 600; color: var(--text-dark); line-height: 1.35; margin-bottom: 0.3rem; }
        .social-asset-note { font-size: 12px; line-height: 1.45; color: var(--text-dark-secondary); }

        /* ========= INDUSTRY FLOATING CIRCLES (PPP landing) =========
           Seven sector circles in a wrapping flex row; each gently floats with
           a staggered animation delay so they bob out of sync. Click drills
           into the sector page. Reduced-motion media query disables the float. */
        /* Default (mobile / tablet): centered flex layout */
        .industry-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.4rem; margin: 2rem 0 2.5rem; padding: 0.5rem 0; }
        .industry-tile {
            width: 150px; height: 150px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid var(--border-soft);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center;
            padding: 1rem;
            color: var(--text-dark);
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0,0,0,0.05);
            transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
            animation: industry-float 5.5s ease-in-out infinite;
            will-change: transform;
        }
        .industry-tile:hover {
            transform: scale(1.07);
            box-shadow: 0 10px 28px rgba(0,0,0,0.12);
            border-color: #6b6360;
            animation-play-state: paused;
        }
        .industry-tile-name { font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--text-dark); margin-bottom: 0.5rem; }
        .industry-tile-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dark-tertiary); }
        /* Desktop: scatter the balls across the full content area in
           absolute positions so they fill the page rather than line up
           in a neat row. Each tile gets a distinct top/left so the
           layout reads as random. */
        @media (min-width: 900px) {
            .industry-tiles {
                position: relative;
                width: 100%;
                height: 500px;
                margin: 1.5rem 0 2rem;
                padding: 0;
                display: block;
            }
            .industry-tile {
                position: absolute;
                width: 176px; height: 176px;
            }
            .industry-tile:nth-child(1) { top: 8px;   left: 2%;  }
            .industry-tile:nth-child(2) { top: 140px; left: 22%; }
            .industry-tile:nth-child(3) { top: 24px;  left: 42%; }
            .industry-tile:nth-child(4) { top: 160px; left: 62%; }
            .industry-tile:nth-child(5) { top: 40px;  left: 78%; }
            .industry-tile:nth-child(6) { top: 304px; left: 8%;  }
            .industry-tile:nth-child(7) { top: 320px; left: 36%; }
            .industry-tile:nth-child(8) { top: 304px; left: 64%; }
            .industry-tile-name { font-size: 15px; }
            .industry-tile-tag { font-size: 11px; }
        }
        /* Random-walk float: each circle gets a different keyframe path so they
           drift in 2D (not just up/down) and feel less synchronised. */
        @keyframes float-a { 0%,100% { transform: translate(0,0); }   25% { transform: translate(7px,-9px); }   50% { transform: translate(-4px,-12px); } 75% { transform: translate(-8px,4px); } }
        @keyframes float-b { 0%,100% { transform: translate(0,0); }   25% { transform: translate(-6px,7px); }   50% { transform: translate(9px,11px); }   75% { transform: translate(4px,-7px); } }
        @keyframes float-c { 0%,100% { transform: translate(0,0); }   25% { transform: translate(10px,5px); }   50% { transform: translate(-7px,-8px); }  75% { transform: translate(8px,-11px); } }
        @keyframes float-d { 0%,100% { transform: translate(0,0); }   25% { transform: translate(-9px,-5px); }  50% { transform: translate(5px,10px); }   75% { transform: translate(-11px,8px); } }
        @keyframes float-e { 0%,100% { transform: translate(0,0); }   33% { transform: translate(6px,-11px); }  66% { transform: translate(-9px,6px); } }
        @keyframes float-f { 0%,100% { transform: translate(0,0); }   33% { transform: translate(-8px,8px); }   66% { transform: translate(10px,-7px); } }
        /* Stagger animation + colour per circle */
        .industry-tile:nth-child(1) { animation-name: float-a; animation-duration: 6.5s; animation-delay: 0s;    background: #fdf6ee; }
        .industry-tile:nth-child(2) { animation-name: float-b; animation-duration: 7.5s; animation-delay: 0.3s; background: #f0eee9; }
        .industry-tile:nth-child(3) { animation-name: float-c; animation-duration: 8s;   animation-delay: 0.7s; background: #e9f0f1; }
        .industry-tile:nth-child(4) { animation-name: float-d; animation-duration: 7s;   animation-delay: 1.1s; background: #fff5e6; }
        .industry-tile:nth-child(5) { animation-name: float-e; animation-duration: 6s;   animation-delay: 1.4s; background: #f4ede4; }
        .industry-tile:nth-child(6) { animation-name: float-f; animation-duration: 8.5s; animation-delay: 1.8s; background: #ecf0f0; }
        .industry-tile:nth-child(7) { animation-name: float-a; animation-duration: 7.2s; animation-delay: 2.2s; background: #f5efe6; }
        .industry-tile:nth-child(8) { animation-name: float-c; animation-duration: 6.8s; animation-delay: 2.6s; background: #efeae3; }
        @media (prefers-reduced-motion: reduce) {
            .industry-tile { animation: none; }
        }

        /* ========= PPP STRUCTURE DIAGRAM (Database overview) ========= */
        .ppp-diagram-wrap { width: 100%; max-width: 1040px; margin: 1.25rem 0 1.5rem; padding: 0.85rem 1rem 1rem; background: var(--bg-sidebar); border: 1px solid var(--border-soft); border-radius: 10px; }
        .ppp-diagram { width: 100%; height: auto; display: block; }
        /* ========= ORG CHART / SHAREHOLDING DIAGRAM ========= */
        .org-chart {
            background: linear-gradient(180deg, #faf8f6 0%, #ece8e1 100%);
            border-radius: 14px;
            padding: 1.5rem 1.25rem 1.75rem;
            margin: 1rem 0 1.75rem;
            overflow-x: auto;
        }
        .org-tier { display: flex; justify-content: center; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; }
        .org-node {
            background: #fff;
            border: 1px solid var(--border-mid);
            border-radius: 10px;
            padding: 0.7rem 1rem 0.65rem;
            min-width: 170px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
            display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .org-node-anchor {
            background: linear-gradient(135deg, #1a1a1a 0%, #3E4C59 100%);
            color: #fff;
            border-color: #1a1a1a;
        }
        .org-node-tadweer { background: linear-gradient(135deg, #3E4C59 0%, #1a1a1a 100%); color: #fff; }
        .org-node-tadweer .org-node-label, .org-node-tadweer .org-node-sub { color: #fff; }
        .org-node-tadweer .org-node-sub { color: rgba(255,255,255,0.65); }
        .org-node-soft {
            background: #fff;
            border-color: rgba(26,26,26,0.14);
            color: var(--text-dark);
        }
        .org-node-soft .org-node-label { color: var(--text-dark); }
        .org-node-soft .org-node-sub { color: var(--text-dark-tertiary); }
        .org-node-label {
            font-size: 13.5px; font-weight: 500;
            letter-spacing: -0.012em; line-height: 1.22;
        }
        .org-node-anchor .org-node-label { color: #fff; }
        .org-node-sub {
            font-size: 10.5px; color: var(--text-dark-tertiary);
            letter-spacing: 0.08em; text-transform: uppercase;
            margin-top: 4px;
        }
        .org-node-anchor .org-node-sub { color: rgba(255,255,255,0.65); }
        .org-node-mark {
            width: 28px; height: 28px;
            border-radius: 6px;
            margin-bottom: 6px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 600;
            background: #fff; color: #1a1a1a;
            letter-spacing: -0.01em;
            overflow: hidden;
        }
        .org-node-mark img {
            max-width: 80%; max-height: 80%;
            object-fit: contain;
            display: block;
        }
        .org-node-logo {
            height: 26px;
            max-width: 140px;
            object-fit: contain;
            margin-bottom: 6px;
            display: block;
        }
        .org-node-anchor .org-node-mark { background: rgba(255,255,255,0.15); color: #fff; }

        .org-connector {
            width: 1px; min-height: 26px;
            background: rgba(26,26,26,0.25);
            margin: 0 auto;
        }
        .org-rail-wrap {
            position: relative;
            padding-top: 24px;
            display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
        }
        .org-rail-wrap::before {
            content: '';
            position: absolute;
            top: 0;
            left: calc(50% - 0.5px);
            width: 1px; height: 12px;
            background: rgba(26,26,26,0.25);
        }
        .org-rail-wrap > * {
            position: relative;
        }
        .org-rail-wrap > *::before {
            content: '';
            position: absolute;
            top: -12px; left: 50%;
            width: 1px; height: 12px;
            background: rgba(26,26,26,0.25);
        }
        .org-rail-wrap.has-rail::after {
            content: '';
            position: absolute;
            top: 12px;
            left: 10%; right: 10%;
            height: 1px;
            background: rgba(26,26,26,0.25);
        }

        .org-leader-card {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 0.5rem 0.85rem 0.5rem 0.5rem;
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 999px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        }
        .org-leader-photo {
            width: 34px; height: 34px;
            border-radius: 50%;
            object-fit: cover; object-position: top center;
            background: linear-gradient(135deg, #3E4C59, #1a1a1a);
            flex-shrink: 0;
        }
        .org-leader-photo-initials {
            display: inline-flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 500; font-size: 12px;
            letter-spacing: 0.02em;
            background: linear-gradient(135deg, #3E4C59, #1a1a1a);
        }
        .org-leader-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; }
        .org-leader-name { font-size: 12.5px; font-weight: 500; letter-spacing: -0.012em; }
        .org-leader-role { font-size: 10.5px; color: var(--text-dark-tertiary); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

        .org-legend {
            font-size: 11.5px; color: var(--text-dark-tertiary);
            text-align: center;
            margin-top: 1rem;
            letter-spacing: -0.005em;
        }

/* ===== ISTP plan detail panel + numbered legend (was inline) ===== */
.istp-pdh { margin: 0 0 0.45rem; font-size: 15px; font-weight: 600; color: var(--text-dark); }
.istp-pdp { margin: 0 0 0.7rem; font-size: 13.5px; line-height: 1.55; color: var(--text-dark); }
.istp-pdl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; column-gap: 1.25rem; row-gap: 0.3rem; margin: 0; font-size: 12.5px; }
.istp-pdl dt { color: var(--text-dark-secondary); margin: 0; }
.istp-pdl dd { margin: 0; color: var(--text-dark); }
@media (max-width: 600px) { .istp-pdl { grid-template-columns: 1fr; row-gap: 0.15rem; } .istp-pdl dt { padding-top: 0.4rem; } .istp-pdl dt:first-child { padding-top: 0; } }
.istp-plan-legend-item { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 13px; padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; transition: background 120ms; }
.istp-plan-legend-item:hover { background: rgba(146, 137, 137, 0.12); }
.istp-plan-legend-item.is-selected { background: #fff8d6; }
.istp-plan-legend-item .lb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid #1a1a1a; font-weight: 700; font-size: 11px; color: #1a1a1a; }
.istp-plan-legend-item.is-selected .lb { background: #f6c542; }

/* ===== ISTP real-world example carousel (was inline) ===== */
.istp-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 0; border-radius: 12px; }
.istp-carousel-track::-webkit-scrollbar { display: none; }
.istp-carousel-slide { scroll-snap-align: start; margin: 0; background: var(--bg-sidebar); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); }
.istp-carousel-image { position: relative; height: clamp(280px, 52vh, 560px); background-size: cover; background-position: center; background-color: #cdc4be; }
.istp-carousel-download { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 0.45rem 0.8rem; background: rgba(255,255,255,0.94); border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; cursor: pointer; color: #1a1a1a; font-family: inherit; font-size: 12px; font-weight: 500; transition: background 150ms, color 150ms; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.istp-carousel-download:hover { background: var(--bg-warm-dark); color: #fff; border-color: var(--bg-warm-dark); }
.istp-carousel-caption { padding: 1.1rem 1.4rem 1.4rem; }
.istp-carousel-caption h4 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.4rem; color: var(--text-dark); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.istp-carousel-country { font-size: 0.85rem; font-weight: 400; color: var(--text-dark-secondary); letter-spacing: 0.02em; }
.istp-carousel-stats { margin: 0 0 0.45rem; font-size: 12.5px; color: var(--text-dark-secondary); line-height: 1.5; }
.istp-carousel-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.1rem;
    row-gap: 0.22rem;
    margin: 0.2rem 0 0.75rem;
    font-size: 12.5px;
}
.istp-carousel-facts dt {
    color: var(--text-dark-tertiary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 1px;
    white-space: nowrap;
}
.istp-carousel-facts dd {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.45;
}
.istp-carousel-detail { margin: 0; font-size: 13.5px; color: var(--text-dark); line-height: 1.55; }
.istp-carousel-prev, .istp-carousel-next { position: absolute; top: clamp(140px, 26vh, 280px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.15); z-index: 5; color: #1a1a1a; padding: 0; transition: background 150ms, color 150ms; }
.istp-carousel-prev { left: 14px; }
.istp-carousel-next { right: 14px; }
.istp-carousel-prev:hover, .istp-carousel-next:hover { background: var(--bg-warm-dark); color: #fff; border-color: var(--bg-warm-dark); }
.istp-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.istp-carousel-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,0.18); border: 0; cursor: pointer; padding: 0; transition: background 150ms, transform 150ms; }
.istp-carousel-dots button:hover { background: rgba(0,0,0,0.35); }
.istp-carousel-dots button[aria-current="true"] { background: var(--text-dark); transform: scale(1.25); }
@media (max-width: 768px) {
    .istp-carousel-prev, .istp-carousel-next { width: 38px; height: 38px; }
    .istp-carousel-caption h4 { font-size: 1.05rem; }
    .istp-carousel-detail { font-size: 13px; }
}