/* =============================================================================
   ww.css — the world water map on ė.co/liquid/ (#water, #ww-notes,
   #ww-index, #ww-credits, and the hero that points at them). Paper edition.
   -----------------------------------------------------------------------------
   Linked after toast.css and before ../assets/css/search.css, so dark.css still
   loads last. Every colour the map draws is a token defined here on :root and
   redefined for the dark edition in dark.css between WW:START and WW:END; the
   engine (assets/js/ww-map.js) reads the same tokens off #ww-stage, so the
   canvas, the legend, the table swatches and the dossier charts cannot drift.
   The palette is validated (DESIGN.md §D.7): sequential ramps only, no ramp in
   the accent or green hues, no red-green or diverging scale, and the accent is
   never a fill. Every selector begins .ww, #water, #ww-, .hero.ww-hero,
   #fiction, details.ww-m, body.ww-lock or dl.spec.
   ========================================================================== */

:root {
    --line-strong: rgba(30, 38, 43, .28);
    --ww-ocean: #EEF3F6;  --ww-nf: #FFFFFF;  --ww-hatch: #83888A;  --ww-coast: #71787C;
    --ww-land: #E6E9EB;  --ww-halo: #FFFFFF;  --ww-sel: #1E262B;  --ww-lake: #CFE7F5;  --ww-card: var(--paper);
    --ww-blue-1: #E6F2FF;  --ww-blue-2: #B4D3F6;  --ww-blue-3: #84B2E6;  --ww-blue-4: #5991CF;  --ww-blue-5: #3771AF;  --ww-blue-6: #1D5187;
    --ww-umber-1: #FFECDD;  --ww-umber-2: #EDC7A8;  --ww-umber-3: #D8A173;  --ww-umber-4: #BE7C43;  --ww-umber-5: #9F5C1C;  --ww-umber-6: #783F00;
    --ww-teal-1: #DAF7F7;  --ww-teal-2: #A1DCDD;  --ww-teal-3: #61C0C2;  --ww-teal-4: #00A1A6;  --ww-teal-5: #007E83;  --ww-teal-6: #005C60;
    --ww-plum-1: #FFE9F7;  --ww-plum-2: #EBC1DC;  --ww-plum-3: #D598C0;  --ww-plum-4: #BA72A3;  --ww-plum-5: #9A5284;  --ww-plum-6: #743662;
    --ww-indigo-1: #EDEFFF;  --ww-indigo-2: #C7CCF7;  --ww-indigo-3: #A2A8E6;  --ww-indigo-4: #8185CF;  --ww-indigo-5: #6265B0;  --ww-indigo-6: #464788;
    --ww-olive-1: #F4EDD3;  --ww-olive-2: #D3C28B;  --ww-olive-3: #B39948;  --ww-olive-4: #907202;  --ww-olive-5: #664F00;
    --ww-violet-1: #F2E8FF;  --ww-violet-2: #CEB7EA;  --ww-violet-3: #AA8AD0;  --ww-violet-4: #8663AC;  --ww-violet-5: #604180;
    --ww-cyan-1: #D5F2FF;  --ww-cyan-2: #8ECDE8;  --ww-cyan-3: #49A8CE;  --ww-cyan-4: #0081AA;  --ww-cyan-5: #005B79;
    --ww-cat-ag: #C4A43F;  --ww-cat-in: #6B3A98;  --ww-cat-mu: #1B8BB3;
    --ww-mk-surface: #0369A1;  --ww-mk-ground: #6D28D9;  --ww-mk-built: #334155;  --ww-mk-bottled: #A16207;
    /* The texture ink for the largest-share categories: the halo at .55,
       resolved on the root element so it follows the dark block's halo. */
    --ww-tex: color-mix(in srgb, var(--ww-halo) 55%, transparent);
    --ww-hatch-bg: repeating-linear-gradient(45deg, var(--ww-hatch) 0 1px, var(--ww-nf) 1px 6px);
    /* The edge of a text field or select: ink at .55, resolved on the root so
       the dark edition's ink lights it too. --line-strong (.28 on paper) is a
       hairline, 1.8:1; a field's boundary needs 3:1 (WCAG 1.4.11; A11Y-7). */
    --ww-field-line: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ------------------------------------------------------------------ hero -- */
.hero.ww-hero { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.hero.ww-hero .hero__in { max-width: 46rem; }
.ww-hero__t { min-width: 0; }
.ww-hero__t .lede { margin: 0; }
.ww-hero__facts { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 1.8rem; }
.ww-hero__facts .hero__fact { min-width: 0; max-width: 16rem; }
.ww-hero .hero__fact .ww-cite {
    display: block; margin-top: .2rem; font-size: .78rem; color: var(--ink-55);
    text-decoration: none;
}
.ww-hero .hero__fact .ww-cite:hover { text-decoration: underline; color: var(--ink); }
.ww-fic {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem;
    margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .86rem; color: var(--ink-55); max-width: 72ch;
}
.ww-fic__tag {
    font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-55); border: 1px dashed var(--line); border-radius: 4px; padding: 2px 6px;
}
@media (min-width: 1100px) {
    .hero.ww-hero .hero__in {
        max-width: var(--measure); display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem 4rem; align-items: end;
    }
    .ww-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
    .ww-hero .ww-fic { grid-column: 1 / -1; max-width: none; }
}
#fiction h2.d1 { margin-bottom: 1.5rem; }

/* --------------------------------------------------------- section shell -- */
#water { position: relative; }
.ww-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
.ww-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.4rem; }
.ww-head__t { flex: 1 1 32rem; min-width: 0; }
.ww-head .d2 { margin-bottom: .8rem; }
.ww-head .lede { margin: 0; }
.ww-find { position: relative; flex: 0 1 22rem; min-width: 0; }
@media (max-width: 1099px) { .ww-find { flex-basis: 100%; } }
.ww-nojs { margin-top: 1rem; }
.ww-q {
    display: block; width: 100%; height: 44px; padding: 0 .9rem; margin: 0;
    border: 1px solid var(--line-strong); border-color: var(--ww-field-line); border-radius: 10px;
    background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
    -webkit-appearance: none; appearance: none;
}
.ww-q::placeholder { color: var(--ink-55); opacity: 1; }
.ww-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ww-sugg {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
    margin: 0; padding: .35rem; list-style: none;
    background: var(--ww-card); border: 1px solid var(--line); border-radius: 12px;
    max-height: 22rem; overflow-y: auto; box-shadow: none;
}
.ww-sugg ul { list-style: none; margin: 0; padding: 0; }
.ww-sugg__h {
    display: block; padding: .45rem .55rem .2rem; font-size: .62rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55);
}
.ww-sugg [role="option"] {
    display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
    padding: .45rem .55rem; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: .9rem;
}
.ww-sugg [role="option"] small { color: var(--ink-55); font-size: .74rem; text-align: right; }
.ww-sugg [role="option"]:hover { background: var(--line-soft); }
.ww-sugg [role="option"][aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
.ww-sugg__note { padding: .45rem .55rem; color: var(--ink-55); font-size: .8rem; }

/* ----------------------------------------------------------------- stage -- */
.ww-stage { max-width: 1480px; margin: 1.2rem auto 0; padding-inline: var(--gutter); }
.ww-stage [hidden], #ww-index [hidden], .ww-sugg[hidden] { display: none !important; }
.ww-bar { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .9rem; min-width: 0; }
.ww-modes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; min-width: 0; }
.ww-grp {
    font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-55); margin: 0 .1rem 0 .6rem; white-space: nowrap;
}
.ww-grp:first-child { margin-left: 0; }
.ww-chip {
    display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
    color: var(--ink-77); font: inherit; font-size: .8rem; line-height: 1; white-space: nowrap; cursor: pointer;
}
.ww-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.ww-chip[aria-checked="true"] {
    border-color: var(--ink); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink);
}
.ww-ramp {
    display: inline-block; flex: 0 0 auto; width: 36px; height: 6px; border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--line);
}
.ww-mode-sel {
    display: none; width: 100%; height: 44px; padding: 0 .7rem;
    border: 1px solid var(--line-strong); border-color: var(--ww-field-line); border-radius: 10px;
    background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem;
}
.ww-sub { display: flex; flex-wrap: wrap; gap: .35rem; }
.ww-sub .ww-chip { height: 32px; font-size: .76rem; }
@media (min-width: 768px) and (max-width: 1099px) {
    .ww-modes { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .35rem; }
    .ww-chip { scroll-snap-align: start; }
}
@media (max-width: 767px) {
    .ww-modes { display: none; }
    .ww-mode-sel { display: block; }
}
@media (pointer: coarse) {
    .ww-q, .ww-mode-sel, .ww-tq { font-size: 16px; }
    .ww-chip, .ww-sub .ww-chip { height: 44px; }
    /* every touch target 44px on a coarse pointer (A11Y-5) */
    .ww-sugg [role="option"] { min-height: 44px; align-items: center; }
    .ww-lg__miss { min-height: 44px; }
    details.ww-m > summary { padding-block: .7rem; }
    .ww-sort { min-height: 44px; }
    .ww-table th[scope="row"] a { display: inline-block; padding-block: 14px; }
    .ww-parts a { display: inline-flex; align-items: center; min-height: 44px; }
    .ww-seg button { min-width: 44px; }
    /* the standalone links of the new sections (A11Y2-8); cites inside a
       sentence stay inline (WCAG 2.5.8 exempts them) */
    .ww-hero .hero__fact .ww-cite { display: flex; align-items: center; min-height: 44px; margin-top: 0; }
    .ww-legend a, .ww-lg__tbl, .ww-fic a, .ww-fic .btn { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------- body grid -- */
.ww-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 1100px) {
    .ww-body { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px); align-items: stretch; }
}
.ww-mapcol { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ww-map {
    position: relative; aspect-ratio: 2.286 / 1; min-height: 240px;
    max-height: calc(100svh - var(--nav-h) - 180px);
    background: var(--ww-card); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; touch-action: pan-y; cursor: grab;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ww-map.is-drag { cursor: grabbing; }
.ww-map.is-hot { cursor: pointer; }
.ww-map:focus { outline: none; }
.ww-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ww-cv, .ww-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ww-ov { pointer-events: none; }
@media (max-width: 767px) {
    .ww-map {
        margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; min-height: 0;
    }
}
@media (max-height: 520px) and (orientation: landscape) { .ww-map { max-height: none; } }

/* ----------------------------------------------------------- map chrome -- */
.ww-ctl { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.ww-ctl__b {
    min-width: 36px; height: 36px; padding: 0 .55rem; margin: 0;
    border: 1px solid var(--line); border-radius: 10px; background: var(--ww-card);
    color: var(--ink); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
#ww-lay-btn { font-size: .74rem; font-weight: 600; }
.ww-ctl__b:hover { border-color: var(--line-strong); }
.ww-ctl__b[aria-pressed="true"], .ww-ctl__b[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (pointer: coarse) { .ww-ctl__b { min-width: 44px; height: 44px; } }
@media (max-width: 767px) { .ww-ctl { flex-direction: row; top: 8px; right: 8px; } }
/* below 768px the engine moves the controls out of the map strip into a row
   above it, so they cover no country (A11Y2-9) */
.ww-ctl.is-out { position: static; flex-direction: row; justify-content: flex-end; margin: 0; }

.ww-layers {
    position: absolute; z-index: 5; top: 10px; right: 58px;
    width: min(21rem, calc(100% - 72px)); max-height: calc(100% - 20px); overflow-y: auto;
    padding: .8rem .9rem; background: var(--ww-card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10); cursor: auto;
}
@media (max-width: 767px), (max-height: 420px) {
    .ww-layers {
        position: fixed; z-index: 80; left: 12px; right: 12px; top: auto; bottom: 12px;
        width: auto; max-height: 70vh;
    }
}
.ww-layers__h {
    margin: 0 0 .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-55);
}
.ww-lay {
    display: grid; grid-template-columns: auto 18px minmax(0, 1fr); gap: .1rem .5rem; align-items: start;
    padding: .5rem 0; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-77); cursor: pointer;
}
.ww-lay input { width: 16px; height: 16px; margin: .15rem 0 0; accent-color: var(--ink); }
.ww-lay svg { display: block; margin-top: .1rem; overflow: visible; }
.ww-lay b { color: var(--ink); font-weight: 600; }
.ww-lay__k {
    display: inline-block; margin-left: .35rem; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px;
    font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
    vertical-align: 1px;
}
.ww-lay__d { display: block; font-size: .72rem; line-height: 1.4; color: var(--ink-55); }
.ww-lay__w { margin: .5rem 0 0; font-size: .74rem; color: var(--ink); }
@media (pointer: coarse) { .ww-lay { padding: .7rem 0; } .ww-lay input { width: 20px; height: 20px; } }

.ww-tip {
    position: absolute; z-index: 4; top: 0; left: 0; max-width: 18rem; pointer-events: none;
    padding: .55rem .7rem; background: var(--ww-card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    font-size: .8rem; line-height: 1.4; color: var(--ink-77);
}
.ww-tip__n { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; color: var(--ink); font-weight: 600; }
.ww-tip__n span { font-weight: 400; font-size: .72rem; color: var(--ink-55); text-align: right; }
.ww-tip__v { display: block; margin-top: .2rem; color: var(--ink); font-size: .8rem; }
.ww-tip__v b { font-size: 1.2rem; font-weight: 600; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.ww-tip__y { display: block; font-size: .72rem; color: var(--ink-55); }
.ww-tip__x { display: block; margin-top: .25rem; font-size: .76rem; color: var(--ink-77); }
.ww-tip__g { display: block; margin-top: .2rem; color: var(--ink-77); }
.ww-tip__h { display: block; margin-top: .3rem; font-size: .7rem; color: var(--ink-55); }

.ww-coop {
    position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
    margin: 0; max-width: calc(100% - 24px); padding: .55rem .9rem;
    background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
    font-size: .85rem; text-align: center; pointer-events: none; transition: opacity .2s;
}
.ww-peek {
    position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; max-height: calc(100% - 16px); overflow-y: auto;
    padding: .6rem .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    font-size: .8rem; line-height: 1.4; color: var(--ink-77); cursor: auto;
}
.ww-peek__n { display: flex; justify-content: space-between; gap: .6rem; color: var(--ink); font-weight: 600; font-size: .9rem; }
.ww-peek__x {
    flex: 0 0 auto; width: 32px; height: 32px; margin: -.3rem -.4rem 0 0; border: 0; background: none;
    color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; border-radius: 8px;
}
.ww-peek__acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
/* Below 768px the card leaves the map for the page, under it (ww-map.js
   showPeek): the map strip stays visible, controls and all (A11Y-4). */
.ww-peek.is-flow { position: static; max-height: none; overflow: visible; }
@media (pointer: coarse) { .ww-peek__x { width: 44px; height: 44px; } }
.ww-load {
    position: absolute; z-index: 4; left: 10px; bottom: 10px; max-width: calc(100% - 20px); margin: 0;
    padding: .45rem .7rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line);
    border-radius: 10px; font-size: .8rem;
}
.ww-load.is-err { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.ww-load a { color: inherit; }

/* ---------------------------------------------------------------- legend -- */
.ww-legend {
    padding: .9rem 1rem; background: var(--ww-card); border: 1px solid var(--line); border-radius: 14px;
    font-size: .8rem; color: var(--ink-77); min-width: 0;
}
.ww-lg__t { margin: 0; font-size: .688rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ww-lg__t span { color: var(--ink-55); letter-spacing: .08em; }
.ww-lg__y { margin: .25rem 0 .6rem; font-size: .76rem; color: var(--ink-55); }
.ww-lg__d { margin: -.3rem 0 .6rem; max-width: 60ch; font-size: .76rem; color: var(--ink-77); }
.ww-lg__cls { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; }
.ww-lg__ends { font-size: .72rem; color: var(--ink-55); }
.ww-lg__c {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; margin: 0; padding: .2rem .5rem .2rem .35rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
    font: inherit; font-size: .76rem; line-height: 1.2; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ww-lg__c i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ww-coast); }
.ww-lg__c small { font-size: .7rem; color: var(--ink-55); }
.ww-lg__c:hover { border-color: var(--line-strong); }
.ww-lg__c[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 0; }
.ww-lg__nf i, .ww-sw-nf { background: var(--ww-hatch-bg); }
/* "largest not named": the three sector colours in thin stripes on land,
   running against the no-figure hatch; never the hatch itself (A11Y2-2) */
.ww-lg__c i.ww-sw-pt, .ww-sw-pt {
    background: repeating-linear-gradient(-45deg, var(--ww-cat-ag) 0 1.5px, var(--ww-land) 1.5px 3px,
        var(--ww-cat-in) 3px 4.5px, var(--ww-land) 4.5px 6px, var(--ww-cat-mu) 6px 7.5px, var(--ww-land) 7.5px 9px);
}
.ww-lg__cov, .ww-lg__x { margin: .55rem 0 0; font-size: .76rem; }
.ww-lg__x { color: var(--ink-55); }
.ww-lg__miss {
    margin: 0; padding: 0 .1rem; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px;
}
.ww-lg__miss:hover { text-decoration-color: currentColor; }
.ww-legend a, .ww-lg__tbl { color: var(--ink); }
@media (pointer: coarse) { .ww-lg__c { min-height: 44px; } .ww-lg__miss { padding: .35rem .15rem; } }

/* Textures of the largest-share categories: colour AND pattern. */
.ww-tx-ag { background-color: var(--ww-cat-ag); }
.ww-tx-in { background-color: var(--ww-cat-in); background-image: repeating-linear-gradient(180deg, transparent 0 3px, var(--ww-tex) 3px 4px); }
.ww-tx-mu { background-color: var(--ww-cat-mu); background-image: radial-gradient(circle, var(--ww-tex) 0 .6px, transparent 1px); background-size: 5px 5px; }

/* ----------------------------------------------------------------- panel -- */
.ww-panel { position: relative; min-width: 0; background: var(--ww-card); border: 1px solid var(--line); border-radius: 14px; }
.ww-panel__in { padding: 0 1.2rem 1.1rem; }
@media (min-width: 1100px) {
    .ww-panel { min-height: 100%; }
    .ww-panel__in { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
}
.ww-world { padding-top: 1.1rem; }
.ww-ph { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ww-def { margin: 0 0 .7rem; font-size: .88rem; }
.ww-cov { margin: 0 0 .7rem; font-size: .84rem; }
.ww-cov b { color: var(--ink); }
.ww-wf { margin: 0 0 .6rem; font-size: .84rem; }
.ww-wf b { margin-right: .25rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-cite {
    color: var(--ink-55); font-size: .76rem;
    text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px;
}
.ww-cite:hover { color: var(--ink); }
.ww-world .hint a { color: var(--ink); }
.ww-pick { margin: .9rem 0 0; font-size: .84rem; }
.ww-pick a { color: var(--ink); }

/* --------------------------------------------------------------- dossier -- */
.ww-dos, .ww-feat { font-size: .86rem; overflow-wrap: break-word; min-width: 0; }
/* Revision URLs and long aquifer names must never widen the page on a phone. */
.ww-src, .ww-dos a, .ww-feat a, .ww-part li, .ww-dl dd { overflow-wrap: anywhere; }
.ww-dos a, .ww-feat a { color: var(--ink); }
.ww-dos__head {
    margin: 0 -1.2rem; padding: 1rem 1.2rem .7rem; background: var(--ww-card);
    border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 1100px) { .ww-dos__head { position: sticky; top: 0; z-index: 2; } }
.ww-dos__bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; margin-bottom: .5rem; }
.ww-btn.ww-back { margin-right: auto; }
@media (min-width: 1100px) { .ww-btn.ww-back { display: none; } }
.ww-btn {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; margin: 0; padding: .25rem .65rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
    font: inherit; font-size: .76rem; line-height: 1.2; cursor: pointer; text-decoration: none;
}
.ww-btn:hover { border-color: var(--line-strong); }
@media (pointer: coarse) { .ww-btn { min-height: 44px; } }
.ww-d-h { margin: .15rem 0 .15rem; font-size: 1.6rem; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.ww-d-h:focus { outline: none; }
.ww-d-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ww-d-sub { margin: 0 0 .6rem; font-size: .78rem; color: var(--ink-55); }
.ww-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0 0 .6rem; }
.ww-tile { min-width: 0; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 10px; }
.ww-tile b { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-tile span { display: block; font-size: .72rem; color: var(--ink-77); }
.ww-tile small { display: block; margin-top: .1rem; font-size: .66rem; line-height: 1.3; color: var(--ink-55); }
.ww-tile .ww-tile__g { font-size: .7rem; line-height: 1.35; color: var(--ink-55); }
.ww-inv, .ww-gapl { margin: 0 0 .45rem; font-size: .76rem; }
.ww-gapl { color: var(--ink-55); }
.ww-parts { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; }
.ww-parts a {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem;
    border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; color: var(--ink); text-decoration: none;
}
.ww-parts a:hover { border-color: var(--ink); }
.ww-ring { display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--ww-coast); border-radius: 50%; }
@media (pointer: coarse) { .ww-parts a { padding: .55rem .7rem; } }
.ww-part { padding: 1.05rem 0 .5rem; border-bottom: 1px solid var(--line-soft); }
.ww-part:last-of-type { border-bottom: 0; }
.ww-part h4 {
    margin: 0 0 .65rem; font-size: .66rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-55);
}
.ww-part h5 { margin: .9rem 0 .35rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.ww-part p { margin: 0 0 .5rem; }
.ww-part ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.ww-part li { margin-bottom: .3rem; }
.ww-yw { font-size: .72rem; color: var(--ink-55); }
.ww-note { font-size: .74rem; color: var(--ink-55); }
.ww-dos .ww-gap, .ww-feat .ww-gap, .ww-world .ww-gap {
    display: flex; align-items: baseline; gap: .45rem; margin: .3rem 0 .55rem; padding-left: .55rem;
    border-left: 1px dotted var(--line-strong); font-size: .8rem; color: var(--ink-55);
}
.ww-dos .ww-gap::before, .ww-feat .ww-gap::before {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px; transform: translateY(1px);
    background: var(--ww-hatch-bg); box-shadow: inset 0 0 0 1px var(--line);
}
.ww-loading { font-size: .8rem; color: var(--ink-55); }
.ww-fail { padding-left: .55rem; border-left: 2px solid var(--ink); font-size: .8rem; color: var(--ink); }
.ww-chart { display: block; width: 100%; height: auto; margin: .3rem 0 .4rem; overflow: visible; }
.ww-chart text { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 500; fill: var(--ink-77); }
.ww-chart .ww-t55 { fill: var(--ink-55); }
.ww-chart .ww-hl { stroke: var(--line); stroke-width: 1; }
.ww-key { display: grid; gap: .15rem; margin: .3rem 0 .5rem; padding: 0; list-style: none; font-size: .78rem; }
.ww-key li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.ww-key i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ww-coast); }
.ww-key b { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-hbar {
    display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; align-items: center;
    gap: .5rem; margin: .15rem 0; font-size: .78rem;
}
.ww-hbar > span:first-child { min-width: 0; }
.ww-hbar__t { position: relative; height: 8px; overflow: hidden; border-radius: 2px; background: var(--line-soft); }
.ww-hbar__t i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); opacity: .55; }
.ww-hbar__t i.ww-f-b4 { background: var(--ww-blue-4); opacity: 1; }
.ww-hbar__t i.ww-f-b6 { background: var(--ww-blue-6); opacity: 1; }
.ww-hbar__t i.ww-f-t4 { background: var(--ww-teal-4); opacity: 1; }
.ww-hbar b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-hbar.is-grp > span:first-child { font-weight: 600; color: var(--ink); }
.ww-hbar.is-sub > span:first-child { padding-left: .8rem; }
.ww-stk { display: flex; gap: 2px; height: 18px; margin: .35rem 0; overflow: hidden; border-radius: 3px; }
.ww-stk > i { display: block; height: 100%; min-width: 1px; }
.ww-ovl { position: relative; height: 34px; margin: .35rem 0; }
.ww-ovl > i { position: absolute; height: 14px; }
.ww-ovl > i.ww-ovl__a { top: 0; }
.ww-ovl > i.ww-ovl__b { top: 18px; }
.ww-hatched { background-image: var(--ww-hatch-bg) !important; }
.ww-gauge { position: relative; height: 12px; margin: 1.3rem 0 .4rem; border-radius: 2px; background: var(--line-soft); }
.ww-gauge > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.ww-gauge > b {
    position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1.5px solid var(--ink);
}
.ww-gauge > b span {
    position: absolute; bottom: calc(100% + 2px); left: 0; transform: translateX(-50%); white-space: nowrap;
    font-size: .64rem; font-weight: 600; color: var(--ink);
}
.ww-gauge > b.is-end span { transform: translateX(-100%); }
.ww-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: .3rem .8rem; margin: .4rem 0 .6rem; font-size: .8rem; }
.ww-dl dt { color: var(--ink-77); }
.ww-dl dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.ww-dl dd .ww-yw { display: block; }
.ww-dl dd.is-gap { font-size: .74rem; color: var(--ink-55); }
/* position:relative so a visually hidden (absolute) label inside a wide table
   is clipped by its scroller instead of widening the panel or the page. */
.ww-dtw { position: relative; overflow-x: auto; margin: .3rem 0 .6rem; }
.ww-dt { width: 100%; border-collapse: collapse; font-size: .74rem; font-variant-numeric: tabular-nums; }
.ww-dt th, .ww-dt td { padding: .3rem .4rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.ww-dt th { font-size: .68rem; font-weight: 600; color: var(--ink); }
.ww-dt td.n { text-align: right; white-space: nowrap; }
.ww-qid { font-size: .72rem; color: var(--ink-55); }
.ww-src { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-55); }
.ww-src p { margin: 0 0 .35rem; }
.ww-acts { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .6rem; }
.ww-feat { padding-top: 1rem; }
.ww-feat__k { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ww-feat__k svg { overflow: visible; }
.ww-feat h3 { margin: .3rem 0 .4rem; font-size: 1.3rem; font-weight: 300; letter-spacing: -.015em; color: var(--ink); }
.ww-feat h3:focus { outline: none; }
.ww-feat p { margin: 0 0 .45rem; }
.ww-tier {
    display: inline-block; padding: 1px 7px; border: 1px solid var(--ink); border-radius: 999px;
    font-size: .68rem; font-weight: 600; color: var(--ink);
}
.ww-tier--0 { border-style: dashed; }

/* ------------------------------------------------------------------ notes -- */
.ww-shik { margin: 1.6rem 0 1.8rem; }
.ww-shik svg { display: block; width: 100%; height: auto; overflow: visible; }
.ww-shik text { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--ink-77); }
.ww-shik__oc { fill: var(--ww-blue-5); }
.ww-shik__ice { fill: var(--ww-blue-1); stroke: var(--ww-coast); stroke-width: 1; }
.ww-shik__gw { fill: var(--ww-mk-ground); }
.ww-shik__gws { fill: var(--ww-mk-ground); fill-opacity: .45; }
.ww-shik__rest { fill: var(--ww-coast); }
.ww-shik__ld { fill: none; stroke: var(--ink-55); stroke-width: 1; }
.ww-shik__cn { fill: var(--line-soft); stroke: var(--line); }
.ww-shik figcaption { margin-top: .6rem; }
.ww-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.ww-card {
    min-width: 0; padding: 1.1rem 1.2rem; background: var(--paper);
    border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: 12px; font-size: .9rem;
}
.ww-card__h { margin: 0 0 .6rem; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.ww-card p { margin: 0 0 .55rem; }
.ww-card p:empty { display: none; }
.ww-card .hint { margin-top: .6rem; }
.ww-card a { color: var(--ink); }
.ww-method__h { margin: 2.2rem 0 .7rem; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
details.ww-m { padding: .55rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
details.ww-m summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.ww-m[open] summary { margin-bottom: .45rem; }
details.ww-m p { max-width: 72ch; margin: 0 0 .5rem; }
details.ww-m a { color: var(--ink); }
.ww-method__general { margin-top: .4rem; }

/* ------------------------------------------------------------------ table -- */
.ww-tctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 1.2rem 0 .6rem; }
.ww-tctl .ww-tq { max-width: 18rem; }
.ww-seg { display: inline-flex; flex-wrap: wrap; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ww-seg button {
    min-height: 32px; margin: 0; padding: .35rem .65rem; border: 0; border-radius: 8px; background: none;
    color: var(--ink-77); font: inherit; font-size: .76rem; cursor: pointer;
}
.ww-seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
@media (pointer: coarse) { .ww-seg button { min-height: 44px; } }
@media (max-width: 767px) { .ww-tctl { flex-direction: column; align-items: stretch; } .ww-tctl .ww-tq { max-width: none; } }
.ww-tcount { margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-55); }
.ww-tw { position: relative; overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.ww-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ww-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; font-variant-numeric: tabular-nums; }
.ww-tw[data-set="all"] .ww-table { min-width: 1800px; }
.ww-table caption { caption-side: top; padding: .8rem 1rem; text-align: left; font-size: .78rem; color: var(--ink-55); }
.ww-table th, .ww-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); text-align: right; vertical-align: top; }
.ww-table thead th { vertical-align: bottom; font-size: .74rem; font-weight: 600; color: var(--ink); background: var(--paper); }
.ww-table .ww-th-name, .ww-table th[scope="row"] {
    position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap; background: var(--paper);
    font-weight: 500; color: var(--ink);
}
.ww-table th[scope="row"] a { color: var(--ink); }
.ww-table td[data-col="src"], .ww-table th[data-col="src"] { text-align: left; min-width: 18rem; }
.ww-unit { display: block; font-size: .68rem; font-weight: 400; color: var(--ink-55); }
.ww-table td small { display: block; font-size: .68rem; color: var(--ink-55); }
.ww-table td.ww-gap { min-width: 8rem; text-align: left; font-size: .78rem; font-style: normal; color: var(--ink-55); }
.ww-maj { font-size: .6rem; color: var(--ink-55); }
/* The country table (about 7,000 elements) and the credits are laid out only
   when they near the viewport; `auto` remembers the real size once rendered,
   and a #w= row or find-in-page still reaches them (review P2). */
#ww-index, #ww-credits { content-visibility: auto; }
#ww-index { contain-intrinsic-size: auto 10600px; }
#ww-credits { contain-intrinsic-size: auto 5500px; }
.ww-table .is-mode { background: var(--line-soft); }
.ww-table thead th.is-mode { box-shadow: inset 0 -2px 0 var(--ink); }
.ww-tr.is-sel th[scope="row"] { box-shadow: inset 3px 0 0 var(--ink); }
.ww-tr.is-sel td { background: var(--line-soft); }
/* on that wash --ink-55 falls to 4.48:1 in paper: the small text in a
   highlighted column or row steps up to --ink-77 (A11Y2-3) */
.ww-table .is-mode small, .ww-table .is-mode .ww-unit, .ww-table td.ww-gap.is-mode,
.ww-tr.is-sel td small, .ww-tr.is-sel td.ww-gap { color: var(--ink-77); }
.ww-sort {
    display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: inherit; cursor: pointer;
}
.ww-sort::after { content: ''; }
th[aria-sort="ascending"] > .ww-sort::after { content: ' \2191'; }
th[aria-sort="descending"] > .ww-sort::after { content: ' \2193'; }
.ww-tw[data-set="drink"] [data-col]:not([data-col="bas"]):not([data-col="prem"]):not([data-col="surf"]) { display: none; }
.ww-tw[data-set="supply"] [data-col]:not([data-col="rpc"]):not([data-col="dep"]):not([data-col="pr"]):not([data-col="src"]) { display: none; }
.ww-tw[data-set="use"] [data-col]:not([data-col="ag"]):not([data-col="in"]):not([data-col="mu"]):not([data-col="wpc"]):not([data-col="st"]) { display: none; }
.ww-tw[data-set="health"] [data-col]:not([data-col="hy"]):not([data-col="wd"]) { display: none; }

/* ---------------------------------------------------------------- credits -- */
.ww-cr__lead { max-width: 72ch; }
.ww-cr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; margin: 1.6rem 0 0; font-size: .86rem; }
@media (min-width: 900px) { .ww-cr { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }
.ww-cr dt { padding-top: .75rem; font-weight: 600; color: #fff; }
.ww-cr dd { margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 899px) { .ww-cr dd { padding-top: .2rem; } }
.ww-cr a, #ww-credits .hint a { color: inherit; }
/* a bare URL (the TFDD's) is one unbreakable word wider than a phone */
.ww-cr dd { overflow-wrap: anywhere; }
.ww-ack { margin: .5rem 0; font-size: .78rem; color: var(--ink-55); }
.ww-cr__h { margin: 2rem 0 .7rem; font-size: 1.05rem; font-weight: 600; }
#ww-credits .ww-tw { background: transparent; border-color: var(--line); }
.ww-cr__files { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ww-cr__files th, .ww-cr__files td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ww-cr__files code { font-size: .76rem; }
.ww-wiki { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .78rem; }
.ww-wiki li { margin-bottom: .3rem; break-inside: avoid; }
@media (min-width: 900px) { .ww-wiki { columns: 2; column-gap: 2rem; } }

/* ------------------------------------------------------------------ fixes -- */
dl.spec { margin: 0; }

/* ------------------------------------------------------------ full screen -- */
.ww-stage.is-full {
    position: fixed; inset: 0; z-index: 70; max-width: none; margin: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: var(--paper); display: flex; flex-direction: column;
}
.ww-stage.is-full .ww-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ww-stage.is-full .ww-mapcol { flex: 1 1 auto; min-height: 0; }
.ww-stage.is-full .ww-map {
    flex: 1 1 auto; aspect-ratio: auto; min-height: 0; max-height: none; margin-inline: 0;
    border-radius: 12px; border: 1px solid var(--line); touch-action: none;
}
.ww-stage.is-full .ww-legend { max-height: 32vh; overflow-y: auto; }
.ww-stage.is-full .ww-panel { display: none; }
body.ww-lock { overflow: hidden; }

/* ----------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: reduce) {
    .ww-stage *, .ww-tip, .ww-coop { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ print -- */
@media print {
    .ww-stage, .ww-find, .ww-tctl, .ww-tcount { display: none !important; }
    .ww-tw { overflow: visible; border: 0; }
    .ww-table, .ww-tw[data-set="all"] .ww-table { min-width: 0; font-size: 8pt; }
}

/* ------------------------------------------------------------------ focus -- */
.ww-chip:focus-visible, .ww-lg__c:focus-visible, .ww-sort:focus-visible, .ww-ctl__b:focus-visible,
.ww-btn:focus-visible, .ww-seg button:focus-visible, .ww-lg__miss:focus-visible, .ww-parts a:focus-visible,
.ww-mode-sel:focus-visible, .ww-peek__x:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}