:root{
  --bg:#05080f; --panel:#0f172a; --line:#243449; --fg:#e2e8f0; --mut:#94a3b8; --acc:#c8a24a;
  --mainstream:#4ade80;   /* established */
  --disputed:#fbbf24;     /* contested */
  --speculative:#a78bfa;  /* hypothesis — labelled, never dressed as fact */
  --sheet:rgba(9,14,26,.94);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}                      /* hard rule: never a horizontal scrollbar */
#globe{position:absolute;inset:0}            /* globe fills the screen on every viewport */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cesium chrome we don't want */
.cesium-widget-credits{display:none!important}

#bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:baseline;gap:10px;
  padding:12px 18px;background:linear-gradient(180deg,rgba(5,8,15,.85),rgba(5,8,15,0));pointer-events:none}
.brand{font-weight:700;letter-spacing:.22em;color:var(--acc)}
.sub{color:var(--mut)}
.count{margin-left:auto;color:var(--mut);font-variant-numeric:tabular-nums}

/* ---------------- floating globe buttons (compass) ---------------- */
/* fixed, not absolute: it sits inside #controls in the DOM but must float over the globe */
.globebtn{position:fixed;right:16px;top:64px;z-index:6;width:46px;height:46px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:rgba(9,14,26,.72);border:1px solid var(--line);color:var(--mut);cursor:pointer;
  backdrop-filter:blur(6px);transition:color .18s,border-color .18s,transform .18s}
.globebtn:hover{color:var(--fg);border-color:var(--acc)}
.globebtn:active{transform:scale(.94)}
.globebtn .n{font-size:9px;letter-spacing:.12em;margin-top:-3px;color:var(--acc)}
/* no transition: the needle tracks the live camera heading every frame, so easing would lag it
   and would spin the long way round when the angle wraps past 360 */
.globebtn svg{will-change:transform}

/* ---------------- control surface ---------------- */
#controls{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 14px calc(10px + var(--safe-b));
  background:linear-gradient(0deg,rgba(5,8,15,.94),rgba(5,8,15,.6) 62%,transparent)}

/* attribution line: must stay visible (ODbL / CC BY-NC-SA), so no display:none anywhere on it */
#attrib{font-size:10.5px;line-height:1.35;color:var(--mut);padding:4px 2px 0;text-align:right;
  opacity:.85;overflow-wrap:anywhere}
#attrib a{color:inherit}
#deck{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 2px 6px}

.master{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:rgba(15,23,42,.72);flex:0 0 auto}
.master .pill{appearance:none;border:0;background:transparent;color:var(--mut);cursor:pointer;
  padding:7px 15px;font:inherit;font-size:13px;transition:background .2s,color .2s;min-height:36px}
.master .pill:hover{color:var(--fg)}
.master .pill.on{background:var(--acc);color:#0b1220;font-weight:600}

.ghost{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,23,42,.72);color:var(--fg);cursor:pointer;font:inherit;
  font-size:13px;transition:border-color .18s,color .18s}
.ghost:hover{border-color:var(--acc)}
.ghost[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
.tally{color:var(--acc);font-variant-numeric:tabular-nums;font-size:12px}
#langBtn{min-width:44px;justify-content:center;letter-spacing:.08em;font-size:12px;font-weight:600}
#langNow{color:var(--acc)}

#readout{margin-left:auto;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums}
#yearOut{font-size:17px;font-weight:600;color:var(--fg);letter-spacing:.01em}
#epochNow{color:var(--acc);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ---------------- the scrubber ---------------- */
#scrubwrap{position:relative;height:104px;touch-action:none;cursor:grab;user-select:none;
  -webkit-user-select:none}
#scrubwrap:active{cursor:grabbing}
#scrub{display:block;width:100%;height:100%}
/* in "Toon alles" the time cursor drives nothing — say so, don't fake it */
body.showall #scrubwrap{opacity:.34;pointer-events:none;filter:saturate(.4)}
body.showall #readout #ice,body.showall #readout #sea,body.showall #yearOut,body.showall #epochNow{opacity:.4}

/* ---------------- search ---------------- */
#search{position:fixed;left:14px;z-index:12;width:min(340px,calc(100vw - 28px));
  background:var(--sheet);border:1px solid var(--line);border-radius:13px;padding:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px);animation:rise .2s cubic-bezier(.22,1,.36,1)}
#q{width:100%;padding:10px 12px;min-height:44px;border-radius:9px;border:1px solid var(--line);
  background:rgba(5,8,15,.6);color:var(--fg);font:inherit;outline:none}
#q:focus{border-color:var(--acc)}
#qres{list-style:none;margin:6px 0 0;padding:0;max-height:44vh;overflow-y:auto}
#qres li{display:flex;align-items:center;gap:8px;padding:10px;min-height:44px;border-radius:9px;
  cursor:pointer;outline:none}
#qres li:hover,#qres li:focus{background:rgba(200,162,74,.12)}
#qres li em{margin-left:auto;color:var(--mut);font-style:normal;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em}
#qres li.none{color:var(--mut);cursor:default}
#qres li.none:hover{background:none}

/* ---------------- legend ---------------- */
#legend{position:fixed;right:14px;z-index:12;width:min(330px,calc(100vw - 28px));
  max-height:min(66vh,540px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--sheet);border:1px solid var(--line);border-radius:13px;padding:4px 14px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px);animation:rise .2s cubic-bezier(.22,1,.36,1)}
.lghead{display:flex;justify-content:space-between;align-items:center;padding:8px 0 2px;font-weight:600}
.lghead button{background:none;border:none;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.lghead button:hover{color:var(--fg)}
.lgsec{padding:8px 0;border-top:1px solid var(--line)}
.lgsec h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);font-weight:600}
.lgsec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lgsec li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.35}
.lgsec .sw{width:15px;height:15px;border-radius:4px;flex:0 0 auto;border:1px solid rgba(255,255,255,.14)}
.lgsec .sw.hatch{background:repeating-linear-gradient(45deg,#e2603f 0 2px,rgba(5,8,15,.6) 2px 4px)}
.lgnote{color:var(--mut);font-size:11.5px;line-height:1.45;margin:6px 0 0;display:block}

/* ---------------- deep time ---------------- */
.deepitem{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 10px;
  margin:.25em 0;border-radius:9px;border:1px solid var(--line);background:rgba(15,23,42,.6);
  color:var(--fg);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.deepitem:hover{border-color:var(--acc);background:rgba(200,162,74,.1)}
.deepitem .dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deepitem .dy{color:var(--mut);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- see-also cross-references ---------------- */
#panel-body a.xref{color:var(--acc);text-decoration:none;border-bottom:1px dotted var(--acc);cursor:pointer}
#panel-body a.xref:hover{border-bottom-style:solid}
#panel-body .xref.dead{color:var(--mut);border-bottom:1px dotted var(--mut);cursor:help}

/* band tooltip (climate periods): grade + summary + source, reachable by mouse and thumb */
#tip[hidden],#bordercap[hidden]{display:none!important}
#tip{position:fixed;z-index:11;max-width:min(340px,calc(100vw - 16px));padding:10px 12px;
  background:var(--sheet);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.4;
  animation:fade .14s ease}
#tip .band{color:var(--acc);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em}
#tip .yrs{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:5px}
#tip .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
#tip .sum{color:var(--fg);opacity:.86}
#tip a{color:var(--acc);align-self:flex-start;padding:5px 10px;margin-top:2px;border-radius:8px;
  border:1px solid var(--line);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
#tip a:hover{border-color:var(--acc);background:rgba(200,162,74,.1)}
#tip .badge{margin:0;align-self:flex-start}   /* flex column stretched it full width */

.sea{color:var(--fg);font-size:12px;font-variant-numeric:tabular-nums;display:inline-flex;gap:12px;flex-wrap:wrap}
/* readout item: short label, source one tap away behind (i) — keeps the strip readable */
.ro{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.idot{width:17px;height:17px;min-width:17px;border-radius:50%;border:1px solid var(--line);
  background:rgba(15,23,42,.8);color:var(--mut);font:600 10px/1 Georgia,serif;font-style:italic;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:color .16s,border-color .16s}
.idot:hover{color:var(--acc);border-color:var(--acc)}
/* Touch sizing, honestly bounded. A 44px-wide invisible hit overlay stuck out past the dot and
   pushed the page 2px wide at 320px, so the extra reach is VERTICAL only (where there is room)
   and the dot itself grows to 26px — comfortable, and it cannot cause horizontal scroll. */
.idot{position:relative}
@media (max-width:720px),(pointer:coarse) and (max-width:1100px){
  .idot{width:26px;height:26px;min-width:26px;font-size:13px}
  .idot::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
.sea a,.epoch a{color:var(--acc);font-size:11px;text-decoration:none;border-bottom:1px dotted var(--acc)}
.shelf{color:#38bdf8;font-size:11px}
.epoch{color:var(--mut);font-size:11px}
.warn{color:#fbbf24;cursor:help}

/* no-JS fallback: a blank black screen with no explanation is the worst possible failure */
.noscript{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:32px;background:var(--bg);color:var(--fg)}
.noscript h1{color:var(--acc);letter-spacing:.22em;margin:0 0 6px;font-size:22px}
.noscript p{margin:0;max-width:46ch;color:var(--mut);line-height:1.6}

/* ---------------- layers drawer ---------------- */
#scrim{position:fixed;inset:0;z-index:8;background:rgba(3,6,12,.5);backdrop-filter:blur(2px);
  animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
#drawer{position:fixed;z-index:9;background:var(--sheet);border:1px solid var(--line);
  backdrop-filter:blur(10px);overflow-y:auto;overscroll-behavior:contain;
  left:14px;bottom:calc(112px + var(--safe-b));width:min(360px,calc(100vw - 28px));
  max-height:min(70vh,560px);border-radius:16px;padding:6px 16px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);animation:rise .26s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grab{display:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;
  font-weight:600;letter-spacing:.04em}
.dhead button{background:none;border:none;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;
  padding:0 4px}
.dhead button:hover{color:var(--fg)}
.dsec{padding:10px 0;border-top:1px solid var(--line)}
.dsec:first-of-type{border-top:none}
.dsub{color:var(--acc);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.85;
  margin:10px 0 4px;padding-top:8px;border-top:1px solid var(--line)}
.dsub:first-of-type{border-top:none;padding-top:0;margin-top:2px}
.dlab{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hint2{text-transform:none;letter-spacing:0;color:var(--fg);font-size:12px;cursor:help}

.lrow{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px;cursor:pointer;
  min-height:48px;transition:background .16s}      /* 48px = comfortable touch target */
.lrow:hover{background:rgba(200,162,74,.07)}
/* basiskaart-keuze [OLY-109 voorstel]: een segment-rij van radio's, zelfde rij-hoogte als de
   checkboxes erboven; disabled = nog geen tegels, gedempt i.p.v. verborgen zodat de keuze
   zichtbaar bestaat. */
.lrow.basemap{flex-wrap:wrap;cursor:default}
.lrow.basemap .seg{display:flex;gap:4px;flex-wrap:wrap;width:100%}
.lrow.basemap .seg label{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;
  border:1px solid rgba(200,162,74,.25);font-size:.9em;cursor:pointer}
.lrow.basemap .seg label:has(input:checked){background:rgba(200,162,74,.18);border-color:var(--acc)}
.lrow.basemap .seg label:has(input:disabled){opacity:.4;cursor:not-allowed}
.lrow.basemap .seg input{width:14px;height:14px}
.lrow input{width:18px;height:18px;accent-color:var(--acc);flex:0 0 auto;margin:0}
.lrow .ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  flex:0 0 auto;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent);transition:opacity .18s}
.lrow .lt{display:flex;flex-direction:column;line-height:1.3}
.lrow .lt em{color:var(--mut);font-size:11px;font-style:normal}
.lrow input:not(:checked)~.ic{opacity:.32}
.lrow input:not(:checked)~.lt{color:var(--mut)}

.grades{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.grades .g{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,23,42,.7);color:var(--fg);cursor:pointer;min-height:38px}
.g.mainstream{border-color:var(--mainstream)}
.g.disputed{border-color:var(--disputed)}
.g.speculative{border-color:var(--speculative)}
.g.mainstream::before,.g.disputed::before,.g.speculative::before{
  content:"";width:9px;height:9px;border-radius:50%}
.g.mainstream::before{background:var(--mainstream)}
.g.disputed::before{background:var(--disputed)}
.g.speculative::before{background:var(--speculative)}
.grades input{accent-color:var(--acc);width:16px;height:16px;margin:0}
#win{width:100%;accent-color:var(--acc);height:34px}
.attr{color:var(--mut);font-size:11px;margin:8px 0 0}

/* ---------------- site panel ---------------- */
#panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:10;overflow-y:auto;
  background:rgba(15,23,42,.97);border-left:1px solid var(--line);padding:22px 24px 40px;
  backdrop-filter:blur(4px);animation:slide .26s cubic-bezier(.22,1,.36,1)}
@keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
#panel.hidden{display:none}
#close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--mut);
  font-size:30px;line-height:1;cursor:pointer;padding:4px 10px}
#close:hover{color:var(--fg)}
#panel-body h1{margin:.2em 0 .4em;font-size:20px}
#panel-body h2{margin:1.2em 0 .3em;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
#panel-body a{color:var(--acc)}
#panel-body code{background:#1e293b;padding:1px 6px;border-radius:5px}
#panel-body ul{padding-left:18px}
#panel-body li{margin:.25em 0}
#panel-body em{color:var(--mut)}
#panel-body img{max-width:100%;height:auto}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:6px}
.badge.mainstream{background:rgba(74,222,128,.15);color:var(--mainstream)}
.badge.disputed{background:rgba(251,191,36,.15);color:var(--disputed)}
.badge.speculative{background:rgba(167,139,250,.15);color:var(--speculative)}
.badge.tier{margin-left:6px}
#panel-body .sum{color:var(--mut)}
#panel-body ul.dates{list-style:none;padding:0}
#panel-body ul.dates li{padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin:.4em 0;
  background:rgba(15,23,42,.6);font-size:13px}
#panel-body ul.dates li.lit{border-color:var(--acc);background:rgba(200,162,74,.10)}
#panel-body ul.dates a{margin-left:6px;font-size:11px}
#panel-body .hint{color:var(--mut);font-size:12px;font-style:italic}
/* coords -> Google Earth (outgoing link; the page still fetches nothing external) */
#panel-body a.geo{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;margin:-2px 0;
  border:1px solid var(--line);border-radius:8px;color:var(--acc);text-decoration:none;
  font-variant-numeric:tabular-nums;min-height:32px;transition:border-color .16s,background .16s}
#panel-body a.geo:hover{border-color:var(--acc);background:rgba(200,162,74,.1)}
#panel-body .coordfall{margin:.4em 0}
@media (max-width:720px){ #panel-body a.geo{min-height:40px;padding:6px 11px} }

/* ---------------- mobile: touch-first ----------------
   Also keyed on pointer:coarse (bounded to <=1100px) so a PHONE IN LANDSCAPE — 844-932px wide, past
   the 720px breakpoint — still gets touch sizing instead of falling back to the desktop layout. */
@media (max-width:720px), (pointer:coarse) and (max-width:1100px){
  #bar{padding:9px 13px;gap:8px;flex-wrap:wrap}
  .sub{display:none}                            /* the globe is the subtitle on a phone */
  .count{margin-left:auto;font-size:12px}
  /* the compass joins the deck row instead of floating over it — at 360px wide it used to land
     on top of the Lagen button, hiding the counter and swallowing taps */
  .globebtn{position:static;width:44px;height:44px;margin-left:auto;flex:0 0 auto}
  #controls{padding:0 10px calc(8px + var(--safe-b))}
  #deck{gap:8px;padding:7px 0 5px}
  #readout{margin-left:0;width:100%;order:3;gap:10px;min-width:0}
  /* the ice/sea readouts are nowrap by default; on a 320px screen that long phase name
     ("Holocene interglacial - present warm period") pushed the page 8px wide. Let it wrap. */
  #readout .sea{white-space:normal;overflow-wrap:anywhere;min-width:0}
  /* .ro sets nowrap so a label never splits mid-phrase; on a narrow phone that reintroduced
     horizontal scroll, so let it wrap here. The (i) still rides along with its label. */
  #readout .ro{white-space:normal;overflow-wrap:anywhere;min-width:0}
  #yearOut{font-size:16px}
  #scrubwrap{height:116px}                      /* taller = easier to hit with a thumb */
  .master .pill{padding:8px 16px;min-height:44px}   /* 44 = the platform minimum, not 42 */
  .ghost{min-height:44px;padding:8px 12px}
  /* four buttons + compass will not fit one phone row: drop the words, keep the icons */
  #searchBtn .lbl,#legendBtn .lbl{display:none}
  #searchBtn,#legendBtn{min-width:44px;justify-content:center}   /* icon-only must still be 44 wide */
  #search,#legend{left:10px;right:10px;width:auto}
  /* drawer becomes a bottom sheet you pull up */
  #drawer{left:0;right:0;bottom:0;width:100%;max-height:82vh;border-radius:18px 18px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    padding:4px 16px calc(22px + var(--safe-b));animation:sheet .3s cubic-bezier(.22,1,.36,1)}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .grab{display:block;width:42px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 2px}
  .lrow{min-height:54px;padding:10px}
  #panel{width:100%;border-left:none;padding:20px 18px 40px}
  @keyframes slide{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (max-height:520px) and (orientation:landscape){
  #scrubwrap{height:70px}
  #bar{padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------- historical borders caption ----------------
   Stays on screen for as long as the layer is on: what you see, and how much to trust it. */
#bordercap{position:absolute;left:14px;right:14px;bottom:calc(100% + 4px);z-index:6;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--mut);line-height:1.5;
  background:rgba(9,14,26,.82);border:1px solid var(--line);border-radius:9px;padding:6px 10px;
  backdrop-filter:blur(6px);pointer-events:none}
#bordercap b{color:var(--fg);font-variant-numeric:tabular-nums}
#bordercap .mut{color:var(--mut)}
#bordercap .warn{color:#fbbf24}
#bordercap .bkey{display:inline-flex;align-items:center;gap:5px}
/* swatches mirror the RENDERED encoding — fill opacity — not a line weight WebGL would ignore */
#bordercap .bl{width:15px;height:11px;border-radius:3px;display:inline-block;margin-left:6px;
  background:#c084fc;border:1px solid #c084fc}
#bordercap .bl.p1{opacity:.55}
#bordercap .bl.p2{opacity:.75}
#bordercap .bl.p3{opacity:1}
#bordercap .battr{margin-left:auto;opacity:.75}
@media (max-width:720px),(pointer:coarse) and (max-width:1100px){
  #bordercap{left:10px;right:10px;font-size:11px;padding:5px 8px}
  #bordercap .battr{margin-left:0;width:100%}
}

/* ---------------- first-visit welcome ---------------- */
#welcome{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,6,12,.72);backdrop-filter:blur(3px);animation:fade .25s ease}
#welcome[hidden]{display:none!important}
.wbox{position:relative;width:min(420px,100%);background:var(--sheet);border:1px solid var(--line);
  border-radius:16px;padding:22px 22px 18px;box-shadow:0 22px 60px rgba(0,0,0,.6);
  animation:rise .3s cubic-bezier(.22,1,.36,1)}
.wbox h2{margin:0 0 14px;font-size:17px;color:var(--acc);letter-spacing:.02em}
.wbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.wbox li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--fg)}
.wbox .wi{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;color:var(--acc);background:rgba(200,162,74,.12);border:1px solid rgba(200,162,74,.3)}
.wx{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--mut);font-size:26px;
  line-height:1;cursor:pointer;padding:2px 8px}
.wx:hover{color:var(--fg)}
.wok{margin-top:18px;width:100%;min-height:44px;border-radius:10px;border:1px solid var(--acc);
  background:var(--acc);color:#0b1220;font:inherit;font-weight:600;cursor:pointer}
.wok:hover{filter:brightness(1.08)}
@media (max-width:720px),(pointer:coarse) and (max-width:1100px){
  .wbox{padding:20px 18px 16px}
}


/* ---------------- TIME panel (2026-08-05, Atlas) ----------------
   #timesec wordt door theme.js naar een eigen rechter paneel verplaatst. Deze regels gelden
   dus zowel daar als in de lade wanneer het thema uit staat. */
.dnote{margin:10px 2px 0;color:var(--mut);font-size:11.5px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{padding:6px 11px;border-radius:999px;cursor:pointer;font:inherit;font-size:11.5px;
  background:transparent;border:1px solid var(--line);color:var(--mut);transition:all .15s}
.chip:hover{color:var(--fg);border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.chip.on{color:#1a1200;background:var(--acc);border-color:var(--acc);font-weight:600}
.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* TIJDVAKKEN. Elk vak is een knop met zijn eigen duur eronder; de linkerrand draagt de kleur van
   de fase, zodat de lijst dezelfde taal spreekt als de gekleurde band onder de schuif. */
.eras{display:flex;flex-direction:column;gap:6px}
.era{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:10px 74px 10px 14px;border-radius:11px;cursor:pointer;text-align:left;width:100%;
  /* 74px rechts = de strook waar .etag hangt. De hele KNOP springt in, niet de tekst:
     padding op .ename verbreedt juist de box en lost de botsing niet op (gemeten). */
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-left:3px solid var(--mut);
  color:var(--fg);font:inherit;transition:background .16s,border-color .16s,transform .12s}
.era:hover{background:rgba(200,162,74,.08);transform:translateX(2px)}
.era:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.era .ename{font-size:12.5px;line-height:1.35;font-weight:600}
.era .espan{color:var(--mut);font-size:11px;letter-spacing:.02em}
.era .espan em{font-style:normal;opacity:.75}
.era .etag{position:absolute;right:10px;top:9px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--mut);opacity:.8}
.era.p-glacial{border-left-color:#4f93d1}
.era.p-glacial_max{border-left-color:#8ec9ff}
.era.p-interglacial{border-left-color:#e2603f}
.era.ep{border-left-color:color-mix(in srgb,var(--acc) 70%,transparent)}
/* waar de cursor NU staat - anders is het een lijst knoppen zonder verband met het scherm */
.era.here{background:color-mix(in srgb,var(--acc) 13%,transparent);
  border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.era.here .ename{color:var(--acc)}
.eras.compact .era{padding:8px 12px}
.eras.compact .ename{font-size:12px}
@media (prefers-reduced-motion:reduce){.era:hover{transform:none}}

/* Herkomst van een jaartal: '~' = archeologische schatting, '⚑' = stichtingstraditie.
   Bewust klein en grijs - het is een voetnoot bij het getal, geen waarschuwing die het paneel
   overneemt. De volledige reden staat in de title-tekst (dating_note uit de data). */
.datinghint { opacity: .55; cursor: help; font-size: .9em; }