/*
 * The Discovery Wiki.
 *
 * Deliberately NOT the site palette. On instruction the wiki is an instrument,
 * not an article: the colours are osirisai.live's own, read off that site on
 * 2026-10-17. The site header and menu sit above it untouched; everything
 * below belongs to the map. The type is still ours and still self hosted.
 *
 * Every selector here is prefixed w- or .wiki so nothing leaks into the rest
 * of the theme. The page itself does not scroll: body.adn-wiki is clipped and
 * the app fills what the header leaves, measured into --wikitop by wiki.js.
 */

body.adn-wiki{overflow:hidden}
body.adn-wiki .site-foot{display:none}

/* The masthead sits tighter here than elsewhere, which hands the map the
   height back. The app takes whatever is left: its height is measured into
   --wikitop by wiki.js, never assumed, so the header can change freely.
   (The date bar was hidden here on 2026-10-17 and put back on 2026-10-18 on
   instruction: Pope wants the site's full top header on the map page.) */
body.adn-wiki .masthead .wrap{padding-top:15px;padding-bottom:12px}
body.adn-wiki .brand{font-size:clamp(30px,4.3vw,52px)}

.wikiapp{
  /* The map field is the site's own royal blue (--navy #1d3f74 in adn.css), on
     instruction 2026-10-17. The bars and the rail sit on the darkest navy so
     the map is the brightest thing on the page, and the globe stays a dark
     sphere on it, which is what keeps the pins readable. */
  --w-void:#15243c; --w-bg:#1d3f74; --w-panel:#16325e;
  --w-royal:#1d3f74; --w-royal-deep:#16325e; --w-royal-ink:#15243c;
  --w-bar:#3567b4;  /* the wiki bar: light blue, on instruction 2026-10-18.
       This is the LIGHTEST blue that keeps the whole bar legible in white:
       white reads 5.60:1 on it, the subtitle #f2f5f9 5.12:1, both over the
       4.5:1 the rest of the site holds to. The next step lighter (#4a80cc)
       drops white to 4.00:1, which fails, and a pale airy blue would mean
       dark type instead, which is a different design and Pope's call. */
  --w-bar-line:rgba(255,255,255,.45);
  --w-grey:#5f6263; --w-grey-line:rgba(255,255,255,.28);
  --w-label:#aeb6c4;  /* small HUD labels: grey, not green, on instruction 2026-10-18 */
  --w-gold:#d4af37; --w-gold-light:#f0d060; --w-gold-dim:#8b7325; --w-gold-rgb:212,175,55;
  --w-cyan:#00e5ff; --w-cyan-rgb:0,229,255; --w-green:#00e676;
  --w-text:#edebe4; --w-text-2:#b8b4a9; --w-muted:#8a877e; --w-heading:#f7f3e6;
  --w-line:rgba(var(--w-gold-rgb),.2); --w-line-2:rgba(var(--w-gold-rgb),.1);
  --w-now:#00e676; --w-near:#00e5ff; --w-mid:#d4af37; --w-far:#a7a399;
  --w-hud:'Courier Prime',ui-monospace,'Courier New',monospace;
  --w-ui:'Archivo Narrow','Arial Narrow',sans-serif;
  --w-head:'Tinos','Times New Roman',serif;

  display:grid;grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  height:calc(100dvh - var(--wikitop,0px));width:100%;
  background:var(--w-bg);color:var(--w-text);font-family:var(--w-ui);font-size:15px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
.wikiapp *{box-sizing:border-box}
.wikiapp a{color:var(--w-cyan);text-decoration:none}
.wikiapp a:hover{color:var(--w-gold-light)}
.wikibar,.wfilters,.wmain{min-width:0}

/* ---- the wiki's own bar, under the site menu ---- */
/* The wiki's own header, on instruction 2026-10-17: larger type on a grey
   band (the site's --silver-deep), which separates it from both the paper
   masthead above and the royal blue map below. Everything on the grey is
   white or near white: gold would only make 2.8 to 1 against it. */
.wikibar{display:flex;align-items:center;gap:18px;padding:16px 22px;
  border-bottom:1px solid rgba(0,0,0,.3);background:var(--w-bar)}
.wtitle{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 auto;overflow:hidden}
.wtitle h1{font-family:var(--w-hud);font-weight:700;font-size:25px;letter-spacing:.2em;
  text-transform:uppercase;color:#ffffff;margin:0;white-space:nowrap;line-height:1.25;
  text-shadow:0 1px 0 rgba(0,0,0,.18)}
.wtitle p{margin:0;font-family:var(--w-ui);font-size:14.5px;letter-spacing:.06em;color:#f2f5f9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlive{display:inline-flex;align-items:center;gap:7px;font-family:var(--w-hud);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#f2f3f3;white-space:nowrap}
.wlive i{width:7px;height:7px;border-radius:50%;background:var(--w-green);
  box-shadow:0 0 8px var(--w-green);animation:wblip 2.4s infinite}
@keyframes wblip{0%,70%,100%{opacity:1}85%{opacity:.25}}
.wclock{font-family:var(--w-hud);font-size:14.5px;letter-spacing:.1em;color:#ffffff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wghost{font-family:var(--w-ui);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--w-bar-line);color:#ffffff;border-radius:3px;
  padding:7px 13px;cursor:pointer;white-space:nowrap}
.wghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#ffffff}

/* ---- filters ---- */
.wfilters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 22px;
  border-bottom:1px solid var(--w-line-2);background:var(--w-royal-ink)}
.wflabel{font-family:var(--w-hud);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w-green);margin-right:2px}
.wchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--w-ui);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--w-line);
  background:transparent;color:var(--w-text-2);border-radius:3px;cursor:pointer;line-height:1.4}
.wchip:hover{border-color:rgba(var(--w-gold-rgb),.5);color:var(--w-text)}
.wchip:focus-visible{outline:1px solid var(--w-cyan);outline-offset:2px}
.wchip .dot{width:7px;height:7px;border-radius:50%;background:var(--w-gold-dim);flex:none}
.wchip .n{font-family:var(--w-hud);font-size:11.5px;color:var(--w-green)}
.wchip[aria-pressed="true"]{color:var(--w-void);background:var(--w-gold);border-color:var(--w-gold)}
.wchip[aria-pressed="true"] .n{color:rgba(0,0,0,.7)}
.wchip.dimmed{opacity:.45}
.wsep{width:1px;height:18px;background:var(--w-line);margin:0 6px}

/* ---- globe left, timeline right ---- */
.wmain{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:0}
.wstage{position:relative;overflow:hidden}
.wstage svg{display:block;touch-action:none;cursor:grab}
.wstage svg.dragging{cursor:grabbing}

.whud{position:absolute;pointer-events:none;font-family:var(--w-hud)}
.whud-tl{left:24px;top:22px}
.whud-bl{left:24px;bottom:22px}
.whud h4{margin:0 0 6px;font-family:var(--w-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--w-label);font-weight:700}
.wreadout{display:flex;gap:20px}
.wreadout div{line-height:1.1}
.wreadout span{display:block;font-family:var(--w-ui);font-weight:700;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--w-label)}
.wreadout b{font-size:21px;font-weight:400;color:var(--w-text);font-variant-numeric:tabular-nums;
  line-height:1.15}
.wreadout b.g{color:var(--w-green)}
.wdist{display:grid;gap:4px}
.wdist .row{display:grid;grid-template-columns:40px 88px 24px;align-items:center;gap:8px;
  font-family:var(--w-ui);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.wdist .nm{color:var(--w-label)}
.wdist .track{height:5px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.wdist .fill{height:100%;border-radius:2px}
.wdist .ct{color:var(--w-green);font-variant-numeric:tabular-nums;text-align:right}
.wlatest{max-width:330px;margin-top:14px}
.wlatest p{margin:3px 0 0;font-family:var(--w-head);font-size:15px;line-height:1.25;color:var(--w-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.wtools{position:absolute;right:22px;top:22px;display:flex;flex-direction:column;gap:6px}
.wtool{font-family:var(--w-hud);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(8,10,20,.9);border:1px solid var(--w-line);color:var(--w-text-2);border-radius:3px;
  padding:6px 10px;cursor:pointer;min-width:38px}
.wtool:hover{color:var(--w-green);border-color:rgba(0,230,118,.45)}
.wzoomrow{display:flex;gap:6px}

/* ---- the rail ---- */
.wrail{border-left:1px solid var(--w-line);background:var(--w-void);position:relative;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  scrollbar-color:rgba(var(--w-gold-rgb),.3) transparent}
.wrail::-webkit-scrollbar{width:7px}
.wrail::-webkit-scrollbar-thumb{background:rgba(var(--w-gold-rgb),.3);border-radius:4px}
.wrailhead{position:sticky;top:0;z-index:4;background:var(--w-void);padding:13px 16px 10px;
  border-bottom:1px solid var(--w-line-2)}
.wrailhead h3{margin:0;font-family:var(--w-ui);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--w-gold);font-weight:700}
.wrailhead p{margin:4px 0 0;font-family:var(--w-ui);font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w-label)}
.wrailhead p b{color:var(--w-green);font-weight:400}
.wrail svg{display:block}

/* ---- the balloon, beside the timeline ---- */
.wballoon{position:fixed;z-index:60;width:286px;background:var(--w-panel);
  border:1px solid rgba(var(--w-gold-rgb),.5);border-radius:10px;padding:14px 16px 15px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 40px rgba(0,0,0,.8),0 0 28px rgba(var(--w-gold-rgb),.14);
  opacity:0;visibility:hidden;transform:translateX(5px);transition:opacity .12s,transform .12s;
  pointer-events:none}
.wballoon.on{opacity:1;visibility:visible;transform:translateX(0)}
.wballoon.pinned{pointer-events:auto;border-color:rgba(var(--w-cyan-rgb),.65)}
.wballoon .wtail{position:absolute;right:-9px;width:0;height:0;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-left:9px solid rgba(var(--w-gold-rgb),.5)}
.wballoon .wtail:after{content:"";position:absolute;left:-10px;top:-8px;width:0;height:0;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:8px solid var(--w-panel)}
.wballoon.pinned .wtail{border-left-color:rgba(var(--w-cyan-rgb),.65)}
.wbl-top{display:flex;align-items:center;gap:8px;font-family:var(--w-hud);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--w-text-2);margin-bottom:7px}
.wbl-top .pr{color:var(--w-void);padding:1px 6px;border-radius:2px;font-size:10px;letter-spacing:.14em}
.wbl-top .bt{color:var(--w-gold)}
.wbl-top .dt{color:var(--w-green)}
.wballoon h3{font-family:var(--w-head);font-weight:400;font-size:17.5px;line-height:1.24;margin:0 0 8px;
  color:var(--w-heading);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wbl-meta{font-family:var(--w-ui);font-size:12.5px;letter-spacing:.04em;color:var(--w-text-2);
  line-height:1.4;border-top:1px solid var(--w-line-2);padding-top:8px;margin-bottom:9px}
.wbl-meta .inst{color:var(--w-text);display:block}
.wbl-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--w-ui);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w-cyan)}
.wbl-hint{font-family:var(--w-hud);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w-muted);float:right;margin-top:3px}

/* ---- index overlay ---- */
.wsheet{position:fixed;inset:0;z-index:80;background:#101d33;display:none;overflow:auto;
  padding:26px 20px 60px;color:var(--w-text);font-family:var(--w-ui)}
.wsheet.on{display:block}
.wsheet h2{font-family:var(--w-hud);font-size:14px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--w-gold);margin:0 0 6px}
.wsheet p.n{font-size:13.5px;color:var(--w-text-2);max-width:76ch;margin:0 0 20px}
.wsheet ol{list-style:none;margin:0;padding:0;columns:3;column-gap:30px}
.wsheet li{break-inside:avoid;margin:0 0 13px}
.wsheet li .d{display:block;font-family:var(--w-hud);font-size:10.5px;letter-spacing:.1em;
  color:var(--w-green)}
.wsheet li a{font-family:var(--w-head);font-size:15.5px;line-height:1.3;color:var(--w-text)}
.wsheet li a:hover{color:var(--w-gold-light)}
/* A landmark entry has no story of ours behind it, so the index says where it
   was checked instead. */
.wsheet li .src{display:block;margin-top:3px;font-family:var(--w-hud);font-size:10.5px;
  letter-spacing:.08em;color:var(--w-muted)}
.wsheet .wclose{position:fixed;right:20px;top:20px}
.wsheet .wlegal{margin-top:26px;font-family:var(--w-hud);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w-muted)}
.wsheet .wlegal a,.wsheet .wlegal .link-btn{color:var(--w-text-2)}
.wsheet .wlegal .link-btn{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  letter-spacing:inherit;text-transform:inherit}
.wsheet .wlegal a:hover,.wsheet .wlegal .link-btn:hover{color:var(--w-gold-light)}

@media (max-width:1180px){ .wmain{grid-template-columns:minmax(0,1fr) 290px} }
@media (max-width:1100px){ .wsheet ol{columns:2} }
@media (max-width:900px){
  .wtitle p{display:none}
  .whud-bl .wlatest{display:none}
  .wsheet ol{columns:1}
}
@media (max-width:760px){
  /* The two panes share what is left under the site header, rather than the
     rail taking a slice of the whole viewport and squeezing the globe. */
  .wmain{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,1.05fr) minmax(190px,1fr)}
  .wrail{border-left:0;border-top:1px solid var(--w-line)}
  .whud-bl{display:none}
  .wballoon{width:min(286px,calc(100vw - 24px))}
}
@media (max-width:620px){
  .wikibar{gap:8px;padding:9px 14px;flex-wrap:wrap}
  .wtitle{order:3;flex:1 1 100%}
  .wtitle h1{font-size:13px;letter-spacing:.14em}
  .wfilters{padding:7px 14px;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .wfilters::-webkit-scrollbar{display:none}
  .wchip,.wflabel{flex:none}
  .whud-tl .wreadout b{font-size:23px}
  /* The span reads "1969 to 2026" now, and with the landmark count beside it
     the row runs under the Pause button on a phone. Both drop there: the
     timeline's own axis shows the span, and the chips carry the counts. */
  .wreadout{gap:16px}
  .wreadout div:nth-child(3),.wreadout div:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){
  .wikiapp *,.wikiapp *:before,.wikiapp *:after,.wballoon{animation:none!important;transition:none!important}
}


/* ---- the globe on the royal blue field ---- */
/* Brighter and more visible, on instruction 2026-10-18: the land is now well
   lighter than the royal field and the ocean a little deeper than it, so the
   globe reads as a lit sphere rather than a dim patch. */
.wstage .ocean{fill:#16305e;stroke:rgba(0,229,255,.6)}
.wstage .land{fill:#3f66ab;stroke:rgba(255,255,255,.3)}
.wstage .grat{stroke:rgba(255,255,255,.16)}
.wstage .halo{stroke:rgba(0,229,255,.3)}

/* The Index overlay is dark, so its buttons keep the gold hairline. */
.wsheet .wghost{border-color:var(--w-line);color:var(--w-text-2)}
.wsheet .wghost:hover{background:transparent;color:var(--w-gold-light);
  border-color:rgba(var(--w-gold-rgb),.5)}