/* hide-until-ready (FOUC fix): keep the text-bearing chrome invisible while the page boots (see the
   inline script in index.html), then fade it in once DOMContentLoaded reveals it fully assembled. The
   globe stays visible so its own loading state shows; only the deck/bar are held back. */
html.booting #bar, html.booting #controls { visibility: hidden; opacity: 0; }
#bar, #controls { transition: opacity .28s ease; }
@media (prefers-reduced-motion: reduce) { #bar, #controls { transition: none; } }

/* ============================================================
   AION — THEME PREVIEW: "worldlens" restyle
   Loaded ON TOP of style.css + layout.css, overriding only presentation. Nothing in app.js, the
   data, the scrubber logic or the layers is touched: this is a skin, and it was the /theme preview, promoted to the live site after Macel approved it.

   What the reference actually does, read off a render of worldlens.live rather than guessed:
     - near-black ground, faint starfield, almost no large colour fields
     - small UPPERCASE type with wide letterspacing carries the hierarchy, not weight or size
     - outlined pills, 1px borders, generous padding; fills are rare and always muted
     - accents appear as small dots and thin rules, never as a block of colour behind text
     - one cool accent (cyan) with a warm second (amber) used sparingly
   The LCARS palette does the opposite of all five, which is why it reads as loud.

   ONE DELIBERATE DEPARTURE: the reference runs its body text at roughly 3:1 against the background.
   That is below AA and it is exactly the readability the A-round measured and fixed. So the look is
   taken but the ink is kept bright enough to pass - tools/contrast-audit.js is the arbiter, not my
   eye.
   ============================================================ */

:root{
  --wl-bg:#05070b;          /* near black, a touch of blue */
  --wl-panel:#0a0e14;
  --wl-line:rgba(255,255,255,.13);
  --wl-line-2:rgba(255,255,255,.22);
  --wl-ink:#e6ecf5;         /* AA against --wl-panel, unlike the reference's grey */
  --wl-mut:#9fb0c8;
  --wl-cyan:#4fd1e0;
  --wl-amber:#e0a955;
  --wl-live:#5ee0a0;

  /* the base sheets key off these, so overriding them re-skins most of the UI at once */
  --lc-black:var(--wl-bg); --lc-void:var(--wl-panel);
  --lc-orange:var(--wl-line-2); --lc-orange2:var(--wl-line);
  --lc-gold:var(--wl-amber); --lc-cream:var(--wl-ink);
  --lc-lavender:var(--wl-panel); --lc-periwinkle:var(--wl-panel); --lc-salmon:var(--wl-panel);
  --lc-blue:var(--wl-cyan);
  --holo:var(--wl-cyan); --holo-dim:rgba(79,209,224,.22); --holo-faint:rgba(79,209,224,.07);
  --text:var(--wl-ink); --mut:var(--wl-mut);
  --panel:var(--wl-panel); --sheet:var(--wl-panel); --line:var(--wl-line);
  --fg:var(--wl-ink); --acc:var(--wl-cyan);
}

body{font-family:'Inter','Helvetica Neue',Segoe UI,Arial,sans-serif;background:var(--wl-bg);
  letter-spacing:.01em}

/* ---- the holographic grid and sweep are the loudest part of the old skin: gone ---- */
#holo .holo-grid,#holo .holo-sweep{display:none}
#holo .holo-arch{border-color:var(--wl-line);opacity:.25;border-radius:0!important;
  width:38px;height:38px}

/* ---- top bar: thin rule, small caps, no elbow ---- */
#bar{background:linear-gradient(180deg,rgba(5,7,11,.94),rgba(5,7,11,.72));
  border-bottom:1px solid var(--wl-line);border-radius:0;height:48px;
  backdrop-filter:blur(10px)}
.brand{color:var(--wl-ink);font-weight:600;font-size:13px;letter-spacing:.30em}
.sub{color:var(--wl-mut);font-size:10.5px;letter-spacing:.16em}
.count{color:var(--wl-mut);font-weight:500;font-size:10.5px;letter-spacing:.12em}

/* ---- left rail: a quiet surface, not a console ---- */
/* NO backdrop-filter on #controls. It reads as pure cosmetics, but a backdrop-filter makes the
   element a containing block for its position:fixed descendants - exactly like a transform does.
   #scrubwrap and #north both live inside this rail, so they started resolving left/right against a
   300px box instead of the viewport: the scrubber computed to 300-300-392 = negative, clamped to
   0px wide, and the compass to 300-408-46 = -154px. Both vanished, and a screenshot cannot tell
   "absent" from "0px wide". One line of blur, two invisible controls. */
#controls{background:rgba(8,11,17,.94);border-right:1px solid var(--wl-line);box-shadow:none}
#railToggle{border:1px solid var(--wl-line);border-left:none;background:var(--wl-panel);
  color:var(--wl-mut);box-shadow:none;border-radius:0 8px 8px 0}
#railToggle:hover{color:var(--wl-cyan);border-color:var(--wl-line-2)}

/* ---- every control becomes an outlined pill: one shape, one language ---- */
#deck #searchBtn,#deck .ghost,#deck .master{
  background:rgba(255,255,255,.03)!important;color:var(--wl-ink)!important;
  border:1px solid var(--wl-line)!important;border-radius:999px!important;
  font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:none!important;transition:border-color .15s,background .15s,color .15s}
#deck #searchBtn:hover,#deck .ghost:hover{transform:none;border-color:var(--wl-cyan)!important;
  background:rgba(79,209,224,.07)!important;color:#fff!important}
#deck .master{padding:2px;gap:2px}
#deck .master .pill{color:var(--wl-mut);background:transparent;border-radius:999px;
  font-weight:500;font-size:11px;letter-spacing:.14em}
#deck .master .pill.on{background:rgba(79,209,224,.14);color:#fff;box-shadow:none;
  border:1px solid rgba(79,209,224,.45)}
#deck .tally,#deck #langNow{color:var(--wl-mut);opacity:1;font-variant-numeric:tabular-nums}

/* ---- readout: numbers carry it, not colour ---- */
#readout{border-left:1px solid var(--wl-line)}
#yearOut{color:var(--wl-ink);font-weight:600;letter-spacing:.02em}
.epoch{color:var(--wl-cyan);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---- panels and sheets ---- */
#panel,#drawer,#search,#legend,#tip{background:rgba(10,14,20,.96);border-color:var(--wl-line);
  box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
#panel{border-left:1px solid var(--wl-line)}
#search,#legend{border:1px solid var(--wl-line);border-radius:12px}
#panel-body h1{color:var(--wl-ink);font-weight:600;letter-spacing:.01em;text-transform:none}
#panel-body h2{color:var(--wl-cyan);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
#close{color:var(--wl-mut)}
#close:hover{color:#fff}

/* ---- the scrubber keeps its shape; only the chrome around it calms down ---- */
#scrubwrap{background:linear-gradient(180deg,rgba(5,7,11,.55),rgba(5,7,11,.94));
  border-top:1px solid var(--wl-line)}

/* ---- round controls: hairline rings ---- */
.globebtn,.navbtn{background:rgba(10,14,20,.8);border:1px solid var(--wl-line);
  color:var(--wl-mut);backdrop-filter:blur(8px)}
.globebtn:hover,.navbtn:hover{border-color:var(--wl-cyan);color:#fff;box-shadow:none}
.globebtn .n{color:var(--wl-mut)}

/* ============================================================
   LAYERS AS A TOP BAR (Macel). theme.js moves the existing toggles up here; the drawer keeps
   working untouched on the live site. Chips are the same outlined pill as everything else, with a
   small dot carrying the layer's own colour - accent as a dot, never as a filled label.
   ============================================================ */
#layerbar{position:fixed;top:48px;left:var(--rail);right:var(--read);z-index:6;
  display:flex;align-items:center;gap:7px;padding:8px 14px;overflow-x:auto;
  scrollbar-width:none;background:linear-gradient(180deg,rgba(5,7,11,.86),rgba(5,7,11,0));
  transition:left .32s cubic-bezier(.22,.94,.24,1)}
#layerbar::-webkit-scrollbar{display:none}
#layerbar .lchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--wl-line);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--wl-mut);cursor:pointer;
  font:500 10.5px/1 'Inter',Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
#layerbar .lchip:hover{border-color:var(--wl-line-2);color:var(--wl-ink)}
#layerbar .lchip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
#layerbar .lchip.on{color:#fff;border-color:rgba(79,209,224,.5);background:rgba(79,209,224,.1)}
#layerbar .lchip.on .dot{opacity:1;box-shadow:0 0 8px currentColor}
#layerbar .lcount{color:var(--wl-mut);font:500 10.5px/1 'Inter',Arial,sans-serif;
  letter-spacing:.14em;margin-left:2px;font-variant-numeric:tabular-nums}
#globe,#holo{top:calc(48px + 42px)}

/* ---- tour entry, worldlens' "Take a tour" ---- */
#tourBtn{position:fixed;z-index:6;right:calc(var(--read) + 16px);top:calc(48px + 52px);
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
  border:1px solid var(--wl-line);border-radius:999px;background:rgba(10,14,20,.8);
  color:var(--wl-ink);cursor:pointer;backdrop-filter:blur(8px);
  font:500 10.5px/1 'Inter',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#tourBtn:hover{border-color:var(--wl-cyan);color:#fff}
#tourBtn .dot{width:6px;height:6px;border-radius:50%;background:var(--wl-cyan);
  box-shadow:0 0 8px var(--wl-cyan)}

/* ---- opening: a stepped card, not a three-bullet modal ---- */
#welcome .wbox{background:rgba(10,14,20,.97);border:1px solid var(--wl-line);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);backdrop-filter:blur(16px);max-width:460px;padding:26px 28px}
#welcome h2{color:var(--wl-ink);font-weight:600;font-size:19px;letter-spacing:.01em;
  text-transform:none}
#welcome ul{list-style:none;padding:0;margin:16px 0}
#welcome li{color:var(--wl-mut);font-size:13.5px;line-height:1.6}
#welcome .wi{color:var(--wl-cyan);opacity:.85}
#welcome .wok{background:transparent;border:1px solid rgba(79,209,224,.5);color:#fff;
  border-radius:999px;padding:9px 22px;font:500 11px/1 'Inter',Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase}
#welcome .wok:hover{background:rgba(79,209,224,.12)}
#welcome .wx{color:var(--wl-mut)}

@media (max-width:900px){
  #layerbar{left:0;right:0;top:48px}
  #globe,#holo{top:calc(48px + 40px)}
  #tourBtn{right:14px;top:calc(48px + 48px)}
}

/* ============================================================
   POSITIONS RE-ASSERTED. Found by measuring the preview, not by looking at it: #scrubwrap came out
   0px wide and #north landed at x=-155, both invisible in a way that reads as "nothing there"
   rather than as a bug. Re-stating left/right/width here makes the theme independent of whatever
   the base sheets resolve to.
   ============================================================ */
#scrubwrap{left:var(--rail);right:var(--read);width:auto;min-width:0}
#scrub{width:100%}
.globebtn{left:auto;right:calc(var(--read) + 16px)}

/* The active mode pill measured 1.09:1 - white on a near-white composite, because a stack of
   translucent fills resolved light. Solid colours here so the contrast is deterministic instead of
   dependent on what happens to sit underneath. */
#deck .master{background:#0d1219!important}
#deck .master .pill{background:transparent!important;color:var(--wl-mut)!important}
#deck .master .pill.on{background:#11323a!important;color:#eaf7fa!important;
  border:1px solid rgba(79,209,224,.45)!important}

@media (max-width:900px){
  #scrubwrap{left:0;right:0}
  .globebtn{right:14px}
}

/* ============================================================
   V2 — Macel's re-layout of the preview.
   "rechter balk weg, en de layers aan de rechter kant slide in slide out. links blijft de rest
    staan, en take a tour ook rechts, verder boven in lange balk met [jaar / epoch / klimaat /
    zeespiegel / sahara]. geluidseffecten voor nu verwijderen, eerst weer de basis goed."
   ============================================================ */

/* The reading panel is no longer a permanent empty column saying AWAITING TARGET. It slides in when
   a pin is selected and is gone otherwise, so the globe gets the whole width until there is
   something to read. layout.css deliberately keeps [hidden] displayed, so it has to be overridden
   here rather than merely re-hidden. */
:root{--read:0px;--panelw:min(420px,92vw)}
/* --panelw is what the drag handle writes; the min() default keeps the old width until you drag. */
#panel{width:var(--panelw);right:0;transform:translateX(0);
  transition:transform .34s cubic-bezier(.22,.94,.24,1);z-index:9}

/* Drag handle on the LEFT edge (Macel): drag left = wider, right = narrower. Sits inside the panel
   so it travels with it; no transition on width or the drag would lag behind the pointer. */
#panelgrip{position:absolute;left:0;top:0;bottom:0;width:10px;cursor:col-resize;z-index:12;
  touch-action:none;background:transparent}
#panelgrip::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:44px;border-radius:2px;background:var(--wl-line);opacity:.7;transition:opacity .15s}
#panelgrip:hover::before,#panelgrip.dragging::before{opacity:1;background:var(--wl-cyan)}
body.panel-resizing{cursor:col-resize;user-select:none}
body.panel-resizing #panel{transition:none}

/* Reading size for the book text (Macel, accessibility/dyslexia). One var scales the body copy;
   headings and badges keep their own scale so the hierarchy survives at every setting. */
:root{--panelfs:15px}
#panel-body{font-size:var(--panelfs);line-height:1.62}
#panel-body .sum,#panel-body p,#panel-body li{font-size:inherit}
#deck .textsize{padding:2px;gap:2px}
#deck .textsize .pill{color:var(--wl-mut);background:transparent;border-radius:999px;
  font-weight:600;letter-spacing:.02em;text-transform:none;min-width:34px}
#deck .textsize .pill:nth-child(1){font-size:11px}
#deck .textsize .pill:nth-child(2){font-size:13px}
#deck .textsize .pill:nth-child(3){font-size:16px}
#deck .textsize .pill.on{background:rgba(79,209,224,.14);color:#fff;
  border:1px solid rgba(79,209,224,.45)}
#panel.hidden{display:block!important;transform:translateX(101%);pointer-events:none;
  box-shadow:none}

/* ---- top bar carries the epoch readout, full width ---- */
#bar{height:auto;min-height:48px;flex-wrap:wrap;row-gap:2px;padding:6px 18px;left:var(--rail);right:0}
#bar #readout{order:9;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  border:none;border-top:1px solid var(--wl-line);margin:4px 0 0;padding:5px 0 0;min-width:0}
#bar #readout #yearOut{font-size:15px}
#bar #readout .sea,#bar #readout .epoch{font-size:11px}
#bar .count{margin-left:auto}

/* ---- layers move to a right-hand slide-in, replacing the top chip bar ---- */
#layerbar{position:fixed;top:0;bottom:0;right:0;left:auto;width:min(300px,88vw);z-index:10;
  flex-direction:column;align-items:stretch;gap:6px;padding:64px 16px 20px;overflow-y:auto;
  background:rgba(10,14,20,.97);border-left:1px solid var(--wl-line);
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
  transform:translateX(101%);transition:transform .34s cubic-bezier(.22,.94,.24,1)}
#layerbar.open{transform:translateX(0)}
#layerbar .lchip{width:100%;justify-content:flex-start;padding:10px 14px}
#layerbar .lcount{margin:2px 0 8px}
#layerbar .lbtitle{color:var(--wl-mut);font:500 10px/1 'Inter',Arial,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 4px}

/* the handle that opens it, and the tour button, both live on the right edge */
#layersBtn,#tourBtn{position:fixed;z-index:11;right:16px;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--wl-line);border-radius:999px;background:rgba(10,14,20,.86);
  color:var(--wl-ink);cursor:pointer;backdrop-filter:blur(8px);
  font:500 10.5px/1 'Inter',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#layersBtn{top:62px}
#tourBtn{top:106px;left:auto}
#layersBtn:hover,#tourBtn:hover{border-color:var(--wl-cyan);color:#fff}
#layersBtn .dot{width:6px;height:6px;border-radius:50%;background:var(--wl-cyan);
  box-shadow:0 0 8px var(--wl-cyan)}
body.layers-open #layersBtn,body.layers-open #tourBtn{opacity:0;pointer-events:none}

/* globe reclaims the full width now that nothing is parked on the right */
#globe,#holo{right:0;top:76px}
#scrubwrap{right:0}
.globebtn,#navpad{right:16px}
.globebtn{bottom:calc(var(--scrub-h) + 16px + 154px + 8px)}

/* ---- sound effects out of the preview: "eerst weer de basis goed" ---- */
#soundToggle,#audioBtn,[data-fx-toggle]{display:none!important}

@media (max-width:900px){
  #bar{left:0}
  #layersBtn{top:auto;bottom:calc(var(--scrub-h) + 78px);right:14px}
  #tourBtn{top:auto;bottom:calc(var(--scrub-h) + 34px);right:14px}
  #globe,#holo{top:76px}
  /* The compass sat 8px into the top bar on a phone - measured, and unnoticeable by eye because
     both are dark. The bar is taller here than it is on desktop since the readout wraps, so the
     compass has to clear it rather than assume the desktop height. */
  /* Compass and nav pad are ONE stack: move the compass and the pad has to follow, or they land on
     each other. Moving the compass to clear the bar without moving the pad put them 14px into each
     other on the very next measurement - the same mistake I made on the live site this afternoon,
     so the two numbers are derived from each other here instead of typed twice.
     compass 86 + 46 tall + 8 gap = 140 */
  .globebtn{top:86px;bottom:auto;right:14px}
  #navpad{top:140px;bottom:auto;right:14px}
}

/* The readout kept the column direction it had as a left-hand card, so it stacked into four rows
   inside the top bar. Macel asked for ONE long bar: force the row direction and let the items sit
   on a single line, scrolling sideways on a narrow screen rather than wrapping downwards. */
#bar #readout{flex-direction:row!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  align-items:baseline;gap:18px}
#bar #readout::-webkit-scrollbar{display:none}
#bar #readout > *{flex:0 0 auto}
#bar #readout #yearOut{font-size:16px;letter-spacing:.02em}
#bar{align-items:center}

/* A panel parked off-screen with translateX still counts towards the document width, so the two
   slide-ins between them added 424px of horizontal scroll - measured, and invisible until you try
   to swipe sideways on a phone and the whole page moves. overflow-x:clip rather than hidden: clip
   does not turn the element into a scroll container, so nothing inside loses its own scrolling. */
html,body{overflow-x:clip;max-width:100%}

/* The clip above was NOT the fix - I said it was and it was not. Measuring which element actually
   overflowed named the culprit: #panel is position:ABSOLUTE, and an absolutely positioned box
   parked off-screen with translateX extends the document (scrollWidth 1824 against a 1400 viewport,
   exactly the 424px reported). #layerbar and #search sit just as far outside and cost nothing,
   because they are fixed. So the panel becomes fixed too - which is also what it behaves like: it
   is pinned to the viewport edge, not to the page. */
#panel{position:fixed}

/* ============================================================
   V3 — Macel: layer rows in the LEFT-console style, with the description shown; dating confidence and
   the deep-time/info links each behind their own right-hand button; preferences remembered.
   ============================================================ */

/* Console-style rows for the right-hand slide-ins: a coloured dot, the name, and the description on
   a second muted line - the same shape the left drawer uses, which is what Macel asked for. */
.rightpanel .lrow2,#confpanel .lrow2{display:flex;align-items:flex-start;gap:11px;width:100%;
  text-align:left;padding:11px 12px;border:1px solid var(--wl-line);border-radius:10px;
  background:rgba(255,255,255,.02);color:var(--wl-ink);cursor:pointer;
  transition:border-color .15s,background .15s}
.rightpanel .lrow2:hover,#confpanel .lrow2:hover{border-color:var(--wl-line-2);
  background:rgba(255,255,255,.05)}
.rightpanel .lrow2 .dot{width:9px;height:9px;border-radius:50%;background:var(--lc,var(--wl-mut));
  margin-top:4px;opacity:.5;flex:0 0 auto;transition:opacity .15s,box-shadow .15s}
.rightpanel .lrow2.on{border-color:rgba(79,209,224,.4);background:rgba(79,209,224,.07)}
.rightpanel .lrow2.on .dot{opacity:1;box-shadow:0 0 8px var(--lc,var(--wl-cyan))}
.rightpanel .lrow2 .lt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rightpanel .lrow2 .ln{font:600 12px/1.2 'Inter',Arial,sans-serif;letter-spacing:.06em;
  text-transform:uppercase}
.rightpanel .lrow2 .ld{font:400 11px/1.35 'Inter',Arial,sans-serif;color:var(--wl-mut);
  font-style:normal;letter-spacing:.01em}

/* the layer bar is now a stacked list, not a horizontal chip strip */
#layerbar{gap:8px}

/* dating-confidence and info share the layers slide-in geometry */
#confpanel,#infopanel,#timepanel{position:fixed;top:0;bottom:0;right:0;left:auto;width:min(320px,90vw);z-index:10;
  display:flex;flex-direction:column;gap:8px;padding:64px 16px 20px;overflow-y:auto;
  background:rgba(10,14,20,.97);border-left:1px solid var(--wl-line);
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
  transform:translateX(101%);transition:transform .34s cubic-bezier(.22,.94,.24,1)}
#confpanel.open,#infopanel.open,#timepanel.open{transform:translateX(0)}
#confpanel .grade-mainstream{--lc:#4ade80}
#confpanel .grade-disputed{--lc:#e0a955}
#confpanel .grade-speculative{--lc:#c084fc}
#infopanel #legend,#infopanel #deepsec{position:static;transform:none;width:auto;display:block;
  background:transparent;border:none;box-shadow:none;padding:0;max-height:none}

/* the right-edge buttons: layers, tour, confidence, info - one stack, one shape */
.rightbtn{position:fixed;z-index:11;right:16px;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--wl-line);border-radius:999px;background:rgba(10,14,20,.86);
  color:var(--wl-ink);cursor:pointer;backdrop-filter:blur(8px);
  font:500 10.5px/1 'Inter',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.rightbtn:hover{border-color:var(--wl-cyan);color:#fff}
.rightbtn .dot{width:6px;height:6px;border-radius:50%;background:var(--wl-cyan);
  box-shadow:0 0 8px var(--wl-cyan)}
#layersBtn{top:62px}
#tourBtn{top:106px}
#confBtn{top:150px}
#infoBtn{top:194px}
body.layers-open .rightbtn{opacity:0;pointer-events:none}

@media (max-width:900px){
  #confpanel,#infopanel,#timepanel{width:min(320px,92vw)}
  /* On a phone the nav pad is on the right too, so the four right-edge buttons cannot sit on the
     right at their desktop heights - measured, the zoom buttons opened Confidence and Info instead
     of zooming. Move the whole button stack to the LEFT edge on mobile, clear of the nav pad. */
  #layersBtn,#tourBtn,.rightbtn{right:auto;left:14px}
  #layersBtn{top:62px}
  #tourBtn{top:106px}
  #confBtn{top:150px}
  #infoBtn{top:194px}
}

/* Chronas political-map caption: same info-strip as #bordercap, sitting just above it so the two
   never overlap when both border layers are on at once. Shares the border caption's look. */
#chronascap{position:absolute;left:14px;right:14px;bottom:calc(100% + 40px);z-index:6;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--wl-mut);line-height:1.5;
  background:rgba(10,14,20,.86);border:1px solid var(--wl-line);border-radius:9px;padding:6px 10px;
  backdrop-filter:blur(6px);pointer-events:none}
#chronascap[hidden]{display:none!important}
#chronascap b{color:var(--wl-ink);font-variant-numeric:tabular-nums}
#chronascap .mut{color:var(--wl-mut)}
#chronascap .warn{color:var(--wl-amber)}
#chronascap .battr{margin-left:auto;opacity:.75}
@media (max-width:720px),(pointer:coarse) and (max-width:1100px){
  #chronascap{left:10px;right:10px;font-size:11px;padding:5px 8px;bottom:calc(100% + 36px)}
}

/* ============================================================
   V4 — Macel's refinement: one-row top bar, grades into the right Dating-confidence tab, left
   console de-duplicated.
   ============================================================ */

/* 1-3. TOP BAR is now ONE row: brand + counter + epoch readout inline. Dropping the subtitle and the
   second row lifts everything up, so the right-hand tab buttons no longer sit over the canvas. */
#bar .sub{display:none}
#bar{min-height:0;height:44px;flex-wrap:nowrap;padding:0 18px;gap:16px;align-items:center}
#bar #readout{flex:1 1 auto;border:none;border-left:1px solid var(--wl-line);margin:0;padding:0 0 0 16px;
  min-width:0}
#bar .count{margin-left:0;order:1;flex:0 0 auto;white-space:nowrap}
#globe,#holo{top:72px}
#layerbar,#confpanel,#infopanel,#timepanel{padding-top:60px}
#layersBtn{top:58px}#tourBtn{top:102px}#confBtn{top:146px}#infoBtn{top:190px}

/* 4-5-6. The grade filters leave the left drawer and live only in the right Dating-confidence tab.
   The drawer's grade section is hidden (the checkboxes stay in the DOM, still driven by the tab), and
   the two left buttons that now duplicate right-hand tabs go away: LAYERS (the drawer, replaced by the
   right Layers tab) and LEGEND (replaced by the right Info tab). Left keeps search, timeline/show-all
   and language - what actually belongs there. */
#drawer .fg.grades,#drawer .dlab[data-i18n="drawer.grades"]{display:none}
#deck #drawerBtn,#deck #legendBtn{display:none}

/* The focus-window slider, relocated from the drawer into the Layers panel. It keeps the site's own
   #winsec styling for the slider itself; this just gives it room and a divider above it. */
#layerbar .lwin{display:block;margin-top:10px;padding-top:12px;border-top:1px solid var(--wl-line)}
#layerbar .lwin .dlab{color:var(--wl-mut);font:500 10px/1 'Inter',Arial,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between}
#layerbar .lwin .hint2{color:var(--wl-ink);letter-spacing:0;text-transform:none;font-weight:600}

/* ============================================================
   V5 PREVIEW — every control in ONE left slide-out, fixed order, one style.
   Order top-to-bottom: Search, Take a tour, Layers, Dating confidence, Timeline/Show all, EN, Info.
   ============================================================ */

/* the four buttons that used to float on the right are now flow items in the left deck */
.rightbtn{position:static!important;right:auto!important;top:auto!important}
#deck .deckbtn{width:100%;justify-content:flex-start;order:5;background:rgba(255,255,255,.03);
  border:1px solid var(--wl-line);border-radius:999px;color:var(--wl-ink);
  font:500 11px/1 'Inter',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  min-height:44px;padding:0 16px;display:flex;align-items:center;gap:9px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
#deck .deckbtn:hover{border-color:var(--wl-cyan);background:rgba(79,209,224,.07);color:#fff;transform:none}
#deck .deckbtn .dot{width:6px;height:6px;border-radius:50%;background:var(--wl-cyan);
  box-shadow:0 0 8px var(--wl-cyan);flex:0 0 auto}
body.layers-open #deck .deckbtn,body.layers-open #deck #searchBtn,body.layers-open #deck .master,body.layers-open #deck #langBtn{opacity:1;pointer-events:auto}

/* order comes from the explicit DOM move in theme-v5.js; no CSS order, so the two cannot disagree */
#deck .deckbtn,#deck #searchBtn,#deck .master,#deck #langBtn{order:0}

/* The three panels open as a second column immediately right of the left rail, and are FULLY hidden
   off the left edge when closed. Shifting by the panel's own width alone still leaves it covering the
   300px rail, so the hidden transform also subtracts the rail offset: translateX(-100% - rail). */
#layerbar,#confpanel,#infopanel,#timepanel{left:var(--rail);right:auto;width:min(320px,72vw);
  transform:translateX(calc(-100% - var(--rail)));border-left:none;border-right:1px solid var(--wl-line);
  box-shadow:18px 0 50px rgba(0,0,0,.5)}
#layerbar.open,#confpanel.open,#infopanel.open,#timepanel.open{transform:translateX(0)}

@media (max-width:900px){
  #layerbar,#confpanel,#infopanel,#timepanel{left:0;width:min(320px,86vw);
    transform:translateX(-101%)}
  #layerbar.open,#confpanel.open,#infopanel.open{transform:translateX(0)}
}

/* Force all four moved buttons into the deck flow. The base theme's id rules (#layersBtn,#tourBtn
   {position:fixed;right:16px}) survived the copy and outrank a class selector, so layersBtn and
   tourBtn were floating on the right while confBtn/infoBtn sat correctly in the column. This wins on
   id specificity and clears the leftover anchors. */
#deck #layersBtn,#deck #tourBtn,#deck #confBtn,#deck #infoBtn{
  position:static!important;right:auto!important;left:auto!important;top:auto!important;
  bottom:auto!important;width:100%;margin:0}

/* ---- guided tour card: bottom-centre, clear of the left rail and the time bar ---- */
#tourbox{position:fixed;left:calc(var(--rail) + 24px);right:auto;bottom:190px;
  width:min(500px,calc(100vw - var(--rail) - var(--panelw) - 60px));min-width:300px;z-index:14;background:rgba(10,14,20,.97);border:1px solid var(--wl-cyan);
  border-radius:14px;padding:16px 18px 13px;box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s,transform .22s}
#tourbox.on{opacity:1;transform:none;pointer-events:auto}
#tourbox #tourtext{color:var(--wl-ink);font-size:14.5px;line-height:1.6;margin:0 0 12px}
#tourbox .tourrow{display:flex;align-items:center;gap:10px}
#tourbox #tourdots{color:var(--wl-mut);font-size:12px;font-variant-numeric:tabular-nums;margin-right:auto}
#tourbox .ghost,#tourbox .wok{flex:0 0 auto;border-radius:999px;padding:7px 15px;font-size:12px;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase}
#tourbox .ghost{background:transparent;border:1px solid var(--wl-line);color:var(--wl-mut)}
#tourbox .ghost:hover{color:#fff;border-color:var(--wl-cyan)}
#tourbox .wok{background:rgba(79,209,224,.14);border:1px solid rgba(79,209,224,.5);color:#fff}
#tourbox .wok:hover{background:rgba(79,209,224,.26)}
/* tour spotlight: a body-level ring (#tourspot) that app.js positions over the control each step is
   talking about, so the words always point at a real, live element (Macel: the old tour "called up old
   UI"). Body-level so the left rail can't clip it; rAF-tracked so it follows async panel/drawer opens. */
#tourspot{position:fixed;display:none;pointer-events:none;z-index:55;border-radius:12px;
  border:2px solid rgba(79,209,224,.95);
  box-shadow:0 0 0 4px rgba(79,209,224,.22),0 0 26px rgba(79,209,224,.6),inset 0 0 14px rgba(79,209,224,.35);
  animation:tourSpot 1.5s ease-in-out infinite}
@keyframes tourSpot{50%{box-shadow:0 0 0 7px rgba(79,209,224,.10),0 0 36px rgba(79,209,224,.85),inset 0 0 18px rgba(79,209,224,.5)}}
@media (prefers-reduced-motion:reduce){#tourspot{animation:none}}
@media (max-width:720px),(pointer:coarse) and (max-width:1100px){
  #tourbox{left:14px;right:14px;bottom:150px;max-width:none}
}
#welcome .wbtns{display:flex;gap:10px;align-items:center}
#welcome .wghost{background:transparent;border:1px solid var(--wl-line);color:var(--wl-mut);
  border-radius:999px;padding:9px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
#welcome .wghost:hover{color:#fff;border-color:var(--wl-cyan)}
#tourbox #tourdots{white-space:nowrap;flex:0 0 auto}
#tourbox .tourrow{flex-wrap:nowrap}
#tourbox .wok,#tourbox .ghost{flex:0 0 auto!important;width:auto}

/* ---- location row: coordinates you can copy, and two ways to go there ---- */
#panel-body .geobox{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;vertical-align:middle}
#panel-body .geocopy,#panel-body a.geo{display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;min-height:34px;border-radius:999px;cursor:pointer;text-decoration:none;
  font-size:12.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  border:1px solid var(--wl-line);background:rgba(255,255,255,.03);color:var(--wl-ink);
  transition:border-color .16s,background .16s,color .16s,transform .16s}
#panel-body .geocopy{font-family:inherit}
#panel-body .geocopy .geonums{color:var(--wl-cyan);font-weight:600}
#panel-body .geocopy svg,#panel-body a.geo svg{opacity:.75}
#panel-body .geocopy:hover,#panel-body a.geo:hover{border-color:var(--wl-cyan);
  background:rgba(79,209,224,.10);color:#fff;transform:translateY(-1px)}
#panel-body .geocopy:hover svg,#panel-body a.geo:hover svg{opacity:1}
#panel-body .geocopy.copied{border-color:#4ade80;background:rgba(74,222,128,.14)}
#panel-body .geocopy.copied .geonums{color:#4ade80}
#panel-body .coordfall{margin:.6em 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ================= active state lights up (Macel: "die bling bling ... wil ik overal") =================
   The segmented pills already glowed when active; everything else looked identical whether its panel
   was open or its layer on. Now every deck control carries the same cyan-lit state, driven by
   aria-expanded / aria-pressed / .open — the attributes the buttons already maintained. */
#deck .ghost[aria-expanded="true"],
#deck .ghost[aria-pressed="true"],
#deck .ghost.on,
#deck #searchBtn[aria-expanded="true"],
#deck #searchBtn.on{
  background:rgba(79,209,224,.14)!important;
  border-color:rgba(79,209,224,.55)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(79,209,224,.14), 0 0 18px rgba(79,209,224,.13)!important}
/* the little dot becomes a lit bead when its control is active */
#deck .ghost[aria-expanded="true"] .dot,
#deck .ghost[aria-pressed="true"] .dot,
#deck .ghost.on .dot{opacity:1;box-shadow:0 0 9px var(--wl-cyan)}
/* inactive controls read as calm, so "lit" actually means something */
#deck .ghost .dot{opacity:.5;transition:opacity .16s,box-shadow .16s}
#deck .ghost,#deck #searchBtn{transition:border-color .16s,background .16s,color .16s,box-shadow .18s}
/* the active segmented pill gets the same halo as the rest, not just a tint */
#deck .master .pill.on,#deck .textsize .pill.on{
  box-shadow:0 0 0 1px rgba(79,209,224,.14), 0 0 18px rgba(79,209,224,.13)}
/* language button: shows which language is live, same lit treatment on hover/focus */

}

/* language pair: same segmented shape as Timeline|Show all, so the interaction reads the same */
#deck .langpair{padding:2px;gap:2px}
#deck .langpair .pill{min-width:40px;font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--wl-mut);background:transparent;border-radius:999px}
#deck .langpair .pill.on{background:rgba(79,209,224,.14);color:#fff;
  border:1px solid rgba(79,209,224,.45);
  box-shadow:0 0 0 1px rgba(79,209,224,.14), 0 0 18px rgba(79,209,224,.13)}
#deck .langpair .pill:not(.on){cursor:pointer}
#deck .langpair .pill:not(.on):hover{color:#fff}

/* ---- MOBIEL: dek-knoppen op inhoudsbreedte i.p.v. 100% ----
   Macel, 2026-08-01: "op de mobiel zijn de balken onderaan nog te groot. Tekst en dan leegte."
   Oorzaak, gemeten op 390x844: `#deck .deckbtn{width:100%}` hierboven is geschreven voor de
   VERTICALE linkerbalk op desktop, waar volle breedte juist is. Op een telefoon klapt #deck om
   naar een horizontale rij (flex-wrap:nowrap, overflow-x:auto), en dan werd elke knop 369px
   breed met een kort label links uitgelijnd — letterlijk tekst en dan leegte.
   Dezelfde regel blies ook de scrollbreedte op tot 2038px, waardoor zes knoppen (waaronder de
   EN/NL-schakelaar en Info) buiten beeld stonden en alleen met een zijwaartse veeg te vinden waren.
   Inhoudsbreedte lost allebei op. De 44px hoogte blijft: dat is het raakdoel voor een duim. */
@media(max-width:900px){
  /* Twee id's zijn nodig om de regel op regel 470 te verslaan (#deck #layersBtn,#deck #tourBtn,...
     zet width:100% en wint op id-specificiteit van elke class-selector). Er stond al een poging
     met `#deck .master,#deck .ghost{width:auto}` — die haalde het daarom niet voor deze vier. */
  #deck #layersBtn,#deck #tourBtn,#deck #confBtn,#deck #infoBtn,
  #deck .deckbtn{width:auto;flex:0 0 auto;padding:0 14px}

  /* EN/NL naar plek 2, direct na Search — ALLEEN op mobiel (besluit Diana, akkoord Macel "yes nice").
     Waarom hier en niet in de DOM-volgorde: die volgorde beschrijft de VERTICALE desktopbalk
     ("top-to-bottom: Search, Take a tour, Layers, Dating confidence, Timeline/Show all, EN, Info")
     en is een vastgelegd ontwerpbesluit. Dat laten we met rust. Op een telefoon wordt het dek een
     horizontale scrolrij en stond EN/NL buiten beeld — terwijl de sheen daar juist de aandacht op
     vestigt. Een functie aanprijzen die je niet kunt zien is kapotte vindbaarheid.
     De opzet elders zegt bewust "no CSS order, so the two cannot disagree"; dat blijft gelden voor
     desktop. Deze uitzondering staat expliciet binnen de mobiele media-query, zodat het verschil
     zichtbaar is en niet stilletjes overal geldt.
     NEGATIEVE waarden, en dat is nodig: de rest van het dek staat elders al op order:0. Zette ik
     EN/NL op 1, dan schoof hij juist naar ACHTEREN, voorbij alle nullen — gemeten: x ging van
     872 naar 958. Vóór de nullen komen kan alleen met een negatief getal. */
  #deck #searchBtn{order:-2}
  #deck #langBtn{order:-1}
}

/* claim-status chip: sits next to the dating badge, its own colour, clearly a second axis */
#panel-body .badge.claim{border:1px solid;font-weight:600}

/* ---- sheen (OLY-19) — LIVE sinds 2026-08-02, en sinds 2026-08-03 alleen bij aanraken ----
   Macel keek live en gaf twee correcties: de glans moet NIET continu lopen maar alleen bij hover
   of aanraking, en hij moet op ALLE dek-knoppen zitten, niet alleen op de EN/NL-schakelaar.
   De preview-versie liep met opzet in een lus, omdat een hover-only sweep destijds te makkelijk
   te missen was. Nu de knoppen zelf de aanleiding zijn, is die lus juist onrustig: hij trekt
   voortdurend de aandacht naar iets waar je niets mee doet.
   :hover dekt de muis; :active vangt de tik op een telefoon, waar hover niet betrouwbaar vuurt;
   :focus-visible geeft toetsenbordgebruikers hetzelfde signaal.
   De vlag blijft de knop: ?sheen=0 haalt body.sheen-preview weg en daarmee alles hieronder. */
body.sheen-preview #deck .deckbtn,
body.sheen-preview #deck #searchBtn,
body.sheen-preview #deck .master,
body.sheen-preview #deck #langBtn{position:relative;overflow:hidden}
body.sheen-preview #deck .deckbtn::after,
body.sheen-preview #deck #searchBtn::after,
body.sheen-preview #deck .master::after,
body.sheen-preview #deck #langBtn::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.72) 46%,rgba(79,209,224,.5) 54%,transparent 74%);
  transform:translateX(-120%)}
body.sheen-preview #deck .deckbtn:hover::after,
body.sheen-preview #deck .deckbtn:active::after,
body.sheen-preview #deck .deckbtn:focus-visible::after,
body.sheen-preview #deck #searchBtn:hover::after,
body.sheen-preview #deck #searchBtn:active::after,
body.sheen-preview #deck #searchBtn:focus-visible::after,
body.sheen-preview #deck .master:hover::after,
body.sheen-preview #deck .master:active::after,
body.sheen-preview #deck #langBtn:hover::after,
body.sheen-preview #deck #langBtn:active::after,
body.sheen-preview #deck #langBtn:focus-visible::after{animation:sheenSweep .85s cubic-bezier(.4,0,.2,1) 1}
@keyframes sheenSweep{
  from{transform:translateX(-120%)}        /* een enkele veeg, geen lus */
  to{transform:translateX(120%)}
}
@media (prefers-reduced-motion:reduce){
  body.sheen-preview #deck .deckbtn::after,
  body.sheen-preview #deck #searchBtn::after,
  body.sheen-preview #deck .master::after,
  body.sheen-preview #deck #langBtn::after{display:none;animation:none}
}

/* ---- pin-photo lightbox (OLY-24, Macel): click a panel photo to blow it up, wheel to zoom, drag to pan ---- */
.entryimg img{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(5,7,11,.92);backdrop-filter:blur(4px);
  -webkit-user-select:none;user-select:none;touch-action:none}
#lightbox.on{display:grid}
#lightbox img{max-width:94vw;max-height:92vh;object-fit:contain;
  border:1px solid var(--wl-line-2);box-shadow:0 10px 60px rgba(0,0,0,.6);
  transform-origin:0 0;will-change:transform;cursor:grab;transition:transform .04s linear}
#lightbox img.grabbing{cursor:grabbing;transition:none}
#lightbox .lb-close{position:fixed;top:14px;right:18px;width:40px;height:40px;
  border:1px solid var(--wl-line-2);background:rgba(10,14,20,.7);color:var(--wl-ink);
  font-size:22px;line-height:1;border-radius:0;cursor:pointer;z-index:1}
#lightbox .lb-close:hover{border-color:var(--wl-cyan);color:var(--wl-cyan)}
#lightbox .lb-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;
  color:var(--wl-mut);font-size:12px;letter-spacing:.04em;pointer-events:none}
@media (prefers-reduced-motion: reduce){ #lightbox img{transition:none} }


/* ---- TIME-paneel (2026-08-05, Atlas) ----
   LET OP voor wie hierna een paneel toevoegt: de panelen hierboven worden per ID opgesomd
   (#layerbar,#confpanel,#infopanel,...). Een nieuw paneel met class .rightpanel krijgt daardoor
   STIL geen positionering - het valt als static blok achter het dek en je ziet spooktekst.
   Precies de dubbele-lijst-val waar dit project vaker in liep. Zolang deze regels op ID staan,
   moet elk nieuw paneel in ELKE lijst hierboven worden bijgeschreven. */
#timepanel .dsec{padding:12px 0;border-top:1px solid var(--wl-line)}
#timepanel .dsec:first-of-type{border-top:none}
#timepanel .dlab{color:var(--wl-mut);font:500 10px/1 'Inter',Arial,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;
  align-items:baseline;gap:8px}
#timepanel .hint2{color:var(--wl-ink);letter-spacing:0;text-transform:none;font-weight:600;font-size:11.5px}
#timepanel input[type=range]{width:100%}
#timepanel .dnote{color:var(--wl-mut);font:400 11px/1.5 'Inter',Arial,sans-serif;margin:10px 0 0}
#timepanel .era{background:rgba(255,255,255,.02);border-color:var(--wl-line)}
#timepanel .era .ename{color:var(--wl-ink);font-family:'Inter',Arial,sans-serif}
#timepanel .era .espan,#timepanel .era .etag{color:var(--wl-mut);font-family:'Inter',Arial,sans-serif}
#timepanel .chip{border-color:var(--wl-line);color:var(--wl-mut);font-family:'Inter',Arial,sans-serif}

/* Groepskop in het Lagen-paneel [2026-08-18]. Hij is een KNOP (klik = hele groep aan/uit) maar mag
   niet als laag-rij lezen: kleiner, in kapitalen, met een eigen teller rechts. Geen dot ervoor -
   dat is het merkteken van een laag, en een kop is er geen. */
#layerbar .lgroup{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin:14px 0 4px;padding:4px 2px;background:none;border:0;border-bottom:1px solid var(--wl-line,#2a3344);
  color:var(--wl-dim,#8b97ab);font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;text-align:left}
#layerbar .lgroup:first-child{margin-top:2px}
#layerbar .lgroup:hover{color:var(--wl-cyan,#cfe0f5)}
#layerbar .lgroup .gc{font-variant-numeric:tabular-nums;opacity:.75;letter-spacing:0}