/* Prototype /wereld/ (2026-10-20). Own stylesheet on purpose: this page must not depend on css/style.css.
   2026-10-21 (owner): the page around the map follows the homepage, same page tokens and dark variant
   (values copied from css/style.css :root), Cormorant Garamond + Inter. Everything ON the map (badges,
   labels, help, buttons) keeps the parchment chips and a system font: wereld-scene.js measures the
   labels with LABEL_FONT, a late web font would break that layout. */
:root {
    --ink: #14283A;
    --parchment: #F6F0E6;
    --sand: #EFE5D3;
    --terracotta: #A4482A;
    --sea: #2D6A80;
    --olive: #4A5A36;
    --gold: #C9A45C;
    --muted: #4D5B68;
    --gutter: 16px;
    --font-body: 'Inter', system-ui, Arial, sans-serif;
    --font-head: 'Cormorant Garamond', Georgia, serif;
    --font-map: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    color-scheme: light dark;
    --bg: var(--parchment);
    --surface: var(--sand);
    --text: var(--ink);
    --text-muted: var(--muted);
    --border: color-mix(in srgb, var(--ink) 14%, transparent);
    --border-strong: color-mix(in srgb, var(--ink) 30%, transparent);
    --accent: var(--terracotta);
    --on-accent: var(--parchment);
    --focus: var(--terracotta);
    --scene-bg: linear-gradient(180deg, var(--parchment) 0%, var(--sand) 55%, color-mix(in srgb, var(--sea) 35%, var(--sand)) 100%);
    /* Chips on the map (region name) stay parchment with ink text in both themes */
    --map-chip-bg: var(--parchment);
    --map-chip-fg: var(--ink);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--ink);
        --surface: color-mix(in srgb, var(--ink) 89%, var(--parchment));
        --text: var(--parchment);
        --text-muted: color-mix(in srgb, var(--parchment) 74%, var(--ink));
        --border: color-mix(in srgb, var(--parchment) 14%, transparent);
        --border-strong: color-mix(in srgb, var(--parchment) 32%, transparent);
        --accent: color-mix(in srgb, var(--gold) 80%, var(--parchment));
        --on-accent: var(--ink);
        --focus: color-mix(in srgb, var(--gold) 80%, var(--parchment));
        --scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--ink) 93%, var(--parchment)) 0%, color-mix(in srgb, var(--sea) 45%, var(--ink)) 100%);
        /* Owner 2026-10-21: the region name read white on white in Windows dark mode (it inherited --text) */
        --map-chip-bg: var(--parchment);
        --map-chip-fg: var(--ink);
    }
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.55 var(--font-body);
}
h1, h2 { font-family: var(--font-head); font-weight: 600; text-wrap: balance; margin: 0; }
.wd-head h1, .wd-list h2 { font-weight: 500; color: var(--text); }
p { text-wrap: pretty; }
@media (max-width: 600px) { p { hyphens: auto; } }

.wd-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wd-head { padding: 24px var(--gutter) 16px; }
.wd-eyebrow { margin: 0 0 4px; color: var(--text-muted); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.wd-head h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; }
.wd-lead { margin: 8px 0 0; color: var(--text-muted); }
/* Back to the homepage, top and bottom (2026-10-22). Text link with a 44px tap area, no button look. */
.wd-home {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 4px -6px; padding: 0 6px;
    color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.wd-home:hover { color: var(--accent); }
.wd-home:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wd-home .wd-icon { width: 22px; height: 22px; }
.wd-foot { margin: 0; }
.wd-filter { margin: 10px 0 0; color: var(--text); font-weight: 600; }
.wd-filter[hidden], .wd-region[hidden], .wd-group-h[hidden], .wd-entries[hidden] { display: none; }
/* ?cat= : regions without domains of that type step back on the map */
.wd-badge.is-in.is-dim .wd-badge-in, .wd-badge.is-in.is-dim .wd-badge-types { opacity: .38; }

.wd-layout {
    display: grid;
    gap: 24px;
    padding: 0 var(--gutter) 40px;
}
@media (min-width: 1100px) {
    .wd-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}

/* Scene */
.wd-scene {
    position: relative;
    height: min(78vh, 760px);
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    /* Own stacking context: CSS2DRenderer gives every label a z-index up to the label count, which
       otherwise climbs over the domain card overlay (z-index 10) when a group has 10+ names (2026-10-21). */
    isolation: isolate;
    background: var(--scene-bg);
}
/* Portrait phones: tall enough for two label columns of up to 16 names. */
@media (max-width: 600px) { .wd-scene { height: clamp(560px, 74vh, 620px); min-height: 560px; } }
/* Hidden without JS only; the class flips in <head> before first paint, so the box never shifts in. */
.no-js .wd-scene { display: none; }
.wd-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.wd-scene canvas[hidden] { display: none; }
.wd-scene-help {
    position: absolute; left: 12px; bottom: 12px; right: 12px; margin: 0;
    max-width: fit-content;
    padding: 6px 10px; border-radius: 6px;
    background: var(--parchment);
    color: var(--ink); font-size: .8125rem;
}
.wd-motion {
    position: absolute; top: 12px; right: 12px;
    min-height: 44px; padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8px;
    background: var(--parchment); color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer;
}
.wd-motion[hidden] { display: none; }
.wd-motion:hover { border-color: var(--terracotta); }
.wd-motion:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.wd-scene.is-off .wd-motion { display: none; }
.wd-scene-msg {
    margin: 0; padding: 24px; height: 100%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--text);
}
.wd-scene-msg[hidden] { display: none; }
.wd-scene.is-off { height: auto; min-height: 0; }
.wd-scene.is-off .wd-scene-help { display: none; }
.wd-scene[data-view="region"] .wd-scene-help { display: none; }
.wd-noscript { margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--surface); color: var(--text); }

/* Map overlay: CSS2DRenderer layer with the region badges and the domain labels. The layer itself
   lets drags through to the canvas; only the buttons take the pointer. */
.wd-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-family: var(--font-map); }
/* Offsets from the pin go through CSS2DObject.center (wereld-scene.js), so the button box and its
   visible part always coincide: no hidden click area over a neighbour. */
.wd-badge, .wd-label {
    pointer-events: auto;
    padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
}
.wd-badge-in, .wd-label-in { pointer-events: none; }
.wd-badge-in {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 4px 6px 4px 12px; border-radius: 999px;
    background: var(--parchment); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--ink));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 22%, transparent);
    font-size: .875rem; font-weight: 600; white-space: nowrap;
    opacity: 0;
}
.wd-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd-leaders line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.25; }
.wd-badge.is-in .wd-badge-in { opacity: 1; }
/* Type counts under the pill (2026-10-20). The button stacks pill and types, so the measured box in
   placeBadges() covers both and neighbours keep clear of the extra line. */
.wd-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
/* Full type names (owner 2026-10-21): one type per line, so no separator dot can start a wrapped line. */
.wd-badge-types {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0;
    padding: 2px 8px; border-radius: 8px; pointer-events: none; opacity: 0;
    background: color-mix(in srgb, var(--parchment) 92%, transparent); color: var(--ink);
    font-size: .8125rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.wd-badge.is-in .wd-badge-types { opacity: 1; }
.wd-badge.is-hot .wd-badge-types { background: var(--ink); color: var(--parchment); }
.wd-badge-count {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
    border-radius: 999px; background: var(--ink); color: var(--gold); font-size: .8125rem; font-weight: 700;
}
.wd-badge.is-hot .wd-badge-in { background: var(--ink); color: var(--parchment); }
.wd-badge.is-hot .wd-badge-count { background: var(--gold); color: var(--ink); }
.wd-badge:focus-visible { outline: none; }
.wd-badge:focus-visible .wd-badge-in { outline: 3px solid var(--terracotta); outline-offset: 2px; }
@media (max-width: 600px) {
    .wd-badge-in { gap: 6px; min-height: 30px; padding: 3px 4px 3px 9px; font-size: .8125rem; }
    .wd-badge-count { min-width: 22px; height: 22px; font-size: .75rem; }
    .wd-badge { gap: 1px; }
    .wd-badge-types { padding: 0 5px; font-size: .6875rem; line-height: 1.25; }
}
/* Smallest phones: twelve badges have to share under 300 px of map. */
@media (max-width: 360px) {
    .wd-badge-in { gap: 4px; min-height: 26px; padding: 2px 3px 2px 7px; font-size: .75rem; }
    .wd-badge-count { min-width: 20px; height: 20px; padding: 0 4px; font-size: .6875rem; }
    /* No room for a second line here (wereld_check 320 px: overlap and badges off the map), so the type
       counts stay in the aria-label only; from 361 px they show. */
    .wd-badge-types { display: none; }
}

.wd-label-in {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 6px;
    background: color-mix(in srgb, var(--parchment) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 18%, transparent);
    font-weight: 600; white-space: nowrap; line-height: 1.2;
    opacity: 0;
    transform: scale(.82);
}
/* Name (600) then domain (400, muted); widths are measured the same way in wereld-scene.js labelWidth() */
/* Type heading above the label block (owner 2026-10-21); not a button, no leader line */
.wd-type-h {
    pointer-events: none; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    background: var(--ink); color: var(--parchment); border: 1px solid var(--gold);
    font-weight: 700; letter-spacing: .02em; line-height: 1.2; /* written as on the homepage type cards, no caps */
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 22%, transparent);
    opacity: 0;
}
.wd-type-h.is-in { opacity: 1; }
.wd-scene[data-motion="on"] .wd-type-h { transition: opacity .32s ease; }
.wd-label-text { display: inline-flex; align-items: baseline; gap: 6px; }
.wd-label.is-stack .wd-label-text { flex-direction: column; align-items: flex-start; gap: 0; }
.wd-label.is-stack.is-left .wd-label-text { align-items: flex-end; }
.wd-label-domain { font-weight: 400; color: var(--muted); }
.wd-label.is-hot .wd-label-domain, .wd-label:focus-visible .wd-label-domain { color: color-mix(in srgb, var(--parchment) 80%, var(--ink)); }
.wd-label.is-right .wd-label-in { transform-origin: left center; }
.wd-label.is-left .wd-label-in { transform-origin: right center; }
.wd-label.is-in .wd-label-in { opacity: 1; transform: none; }
.wd-label .wd-star { width: 1em; height: 1em; margin: 0; }
.wd-label.is-hot .wd-label-in, .wd-label:focus-visible .wd-label-in { background: var(--ink); color: var(--parchment); border-color: var(--gold); }
.wd-label:focus-visible { outline: none; }
.wd-label:focus-visible .wd-label-in { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.wd-label.is-target .wd-label-in { border-color: var(--terracotta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 45%, transparent); }

/* Region bar: back, name, group tabs. Above the label layer. */
.wd-region-bar {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding-right: 140px; /* room for the motion button */
}
.wd-region-bar[hidden] { display: none; }
.wd-back, .wd-tab {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8px;
    background: var(--parchment); color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer;
}
.wd-back:hover, .wd-tab:hover { border-color: var(--terracotta); }
.wd-tab[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.wd-back:focus-visible, .wd-tab:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.wd-region-name {
    margin: 0; padding: 6px 12px; border-radius: 8px;
    background: var(--map-chip-bg); color: var(--map-chip-fg); font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem;
}
.wd-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.wd-tabs:empty { display: none; }
@media (max-width: 600px) {
    /* One row of tabs that scrolls sideways; the motion button moves to the bottom in the region view. */
    .wd-region-bar { gap: 6px; padding-right: 0; left: 8px; right: 8px; top: 8px; }
    .wd-back, .wd-tab { min-height: 40px; padding: 6px 10px; font-size: .8125rem; white-space: nowrap; }
    .wd-region-name { font-size: .9375rem; }
    .wd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .wd-scene[data-view="region"] .wd-motion { top: auto; bottom: 8px; right: 8px; }
    .wd-label-in { padding: 4px 9px; }
}
/* Back button and region name on one row, else 16 names no longer fit above the motion button.
   After the 600 px block on purpose: same specificity, later wins. */
@media (max-width: 360px) {
    .wd-back { padding: 6px 8px 6px 4px; }
    .wd-region-name { padding: 6px 8px; font-size: .8125rem; }
}

/* List */
.wd-list h2 { font-size: 1.375rem; margin-bottom: 12px; }
@media (min-width: 1100px) {
    .wd-list { max-height: min(78vh, 760px); overflow-y: auto; padding-right: 4px; }
}
.wd-region { padding: 12px 0 16px; border-top: 1px solid var(--border); }
.wd-region-h { margin: 0; font-family: var(--font-head); font-size: 1.125rem; }
.wd-count { color: var(--text-muted); font-weight: 400; }
.wd-group-h { margin: 12px 0 6px; font-size: .875rem; color: var(--text-muted); }
.wd-show {
    margin: 6px 0 10px; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--accent); border-radius: 8px;
    background: transparent; color: var(--accent); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.wd-show:hover { background: var(--accent); color: var(--on-accent); }
.wd-show:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wd-show[hidden], .no-js .wd-show { display: none; }
.wd-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wd-open {
    display: grid; gap: 2px; width: 100%;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
}
.wd-open:hover { border-color: var(--accent); }
.wd-entry-name { font-weight: 600; overflow-wrap: anywhere; margin: 0; }
/* Domain under the readable name, smaller (owner 2026-10-21) */
.wd-entry-domain { margin: 0; font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }
.wd-entry-meta { color: var(--text-muted); font-size: .875rem; }
.wd-entry-static { padding: 14px 16px; border-radius: 8px; background: var(--surface); }
.wd-entry-static a { color: var(--accent); font-weight: 600; }
.js .wd-entry-static { display: none; }
.no-js .wd-open { display: none; }

.wd-stats { margin: 8px 0 12px; display: grid; gap: 4px; }
.wd-stats div { display: flex; justify-content: space-between; gap: 16px; }
.wd-stats dt { color: var(--text-muted); }
.wd-stats dd { margin: 0; font-weight: 600; text-align: right; }

/* Focus */
.wd-open:focus-visible, .wd-entry-static a:focus-visible, .wd-scene:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 3px;
}

/* Card overlay (the only dark surface) */
body.wd-locked { overflow: hidden; }
.wd-overlay {
    position: fixed; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: var(--gutter);
    background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.wd-overlay[hidden] { display: none; }
.wd-card {
    position: relative;
    width: min(100%, 440px);
    padding: 28px 24px 24px;
    border-radius: 12px;
    background: var(--ink); color: var(--parchment);
    border: 1px solid var(--border-strong); /* separates the card from an ink page in dark mode */
    box-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 50%, transparent);
}
.wd-card-area { margin: 0 0 4px; color: var(--gold); font-size: .875rem; }
.wd-card-title { font-size: clamp(1.375rem, 5vw, 1.75rem); overflow-wrap: anywhere; }
.wd-card-stats dt { color: var(--sand); }
.wd-card-stats { margin: 16px 0 20px; }
.wd-card-stats div { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--parchment) 16%, transparent); }
.wd-icon { width: 1.125em; height: 1.125em; flex: none; fill: currentColor; }
.wd-icon[hidden] { display: none; }
.wd-star { color: var(--gold); vertical-align: -0.15em; margin-right: 6px; }
.wd-close {
    display: flex; align-items: center; gap: 6px; margin: -8px -8px 8px auto;
    min-height: 44px; padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--parchment) 45%, transparent); border-radius: 8px;
    background: transparent; color: var(--parchment); font: inherit; cursor: pointer;
}
.wd-close:hover { border-color: var(--gold); }
.wd-cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 10px 18px; border-radius: 8px;
    background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none;
}
.wd-cta:hover { background: var(--sand); }
.wd-close:focus-visible, .wd-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wd-cta:focus-visible { outline-color: var(--parchment); }

@media (prefers-reduced-motion: no-preference) {
    .wd-open { transition: border-color .2s ease; }
}
/* Entry motion follows the page's motion state (OS setting or the toggle), not the media query alone. */
.wd-scene[data-motion="on"] .wd-badge-in, .wd-scene[data-motion="on"] .wd-badge-types { transition: opacity .35s ease, background-color .2s ease, color .2s ease; }
.wd-scene[data-motion="on"] .wd-label-in {
    transition: opacity .32s ease var(--d, 0ms), transform .42s cubic-bezier(.2, 1.3, .4, 1) var(--d, 0ms), background-color .15s ease, color .15s ease;
}