/* Map palette: orange first, white second, cyan third, a little lavender, pink and red as small accents.
   Loaded after map.css and site-vibe.css, so it only restates colours. Same look as the other pages.
   Each place keeps its own colour on the chart: Terminus orange, Archives lavender, Forge red, Gateway and Watchtower cyan. */
:root{--cyan:#65faff;--terminus-cyan:#65faff;--orange:#ff7a18;--terminus-orange:#ff7a18;--ink:#05050b;--terminus-ink:#05050b;--panel:rgba(5,7,14,.93);--terminus-panel:rgba(5,7,14,.9);--muted:#b9c6d0;--lav:#c6a0ff;--pink:#ff4fa8;--red:#ff3b42}
html,body{background:#05050b;color:#e3e9ef}
#matrix{background:#05050b}

/* navigation, as on the home page */
nav.top-nav{border-bottom-color:rgba(101,250,255,.25);background:linear-gradient(180deg,rgba(5,7,14,.97),rgba(5,7,14,.88));box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 -1px rgba(255,122,24,.3)}
nav.top-nav::before{border-right-color:rgba(101,250,255,.28);color:#fff;text-shadow:0 0 14px rgba(255,122,24,.5)}
nav.top-nav a,nav.top-nav>details.nav-command-group>summary{color:#d9e1ea}
nav.top-nav a:hover,nav.top-nav a:focus-visible,nav.top-nav a.active,
nav.top-nav>details.nav-command-group>summary:hover,nav.top-nav>details.nav-command-group>summary:focus-visible,nav.top-nav>details.nav-command-group>summary.active{color:#fff;text-shadow:0 0 12px rgba(255,122,24,.6)}
nav.top-nav a:focus-visible,nav.top-nav>details.nav-command-group>summary:focus-visible{outline-color:var(--orange)}
nav.top-nav .nav-command-menu{border-color:rgba(101,250,255,.4);background:rgba(5,7,14,.98);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 18px rgba(101,250,255,.14)}
nav.top-nav .nav-command-menu a{border-bottom-color:rgba(101,250,255,.16)}
.audio-control .archive-music-toggle{background:rgba(5,7,14,.92);color:#e3e9ef}

/* hero and chart panel */
.map-hero,.chart-panel{border-color:rgba(101,250,255,.45);background:linear-gradient(125deg,rgba(101,250,255,.05),transparent 48%,rgba(255,122,24,.065)),var(--panel);box-shadow:0 0 34px rgba(255,122,24,.12),inset 0 0 42px rgba(101,250,255,.02)}
.map-hero{border-bottom-color:rgba(255,122,24,.6)}
/* KINGDOM OF TERMINUS title: blue-black letters, outline cyan on the left, white in the middle, orange on the right */
.map-hero h1{position:relative;display:inline-block;color:#030a1c;-webkit-text-stroke:2px #65faff;text-shadow:-4px 0 14px rgba(101,250,255,.65),4px 0 14px rgba(255,122,24,.45)}
.map-hero h1 span{color:inherit;-webkit-text-stroke-color:#65faff;text-shadow:none}
.map-hero h1 span{display:block}
.map-hero h1::before,.map-hero h1::after{content:"KINGDOM OF\A TERMINUS";white-space:pre;position:absolute;inset:0;color:#030a1c}
/* two lines, so each line gets its own bands: KINGDOM = cyan then white, OF = orange, TER = cyan, MI = white, NUS = orange */
.map-hero h1::before{-webkit-text-stroke:2px #fff;clip-path:polygon(30% 0,63% 0,63% 50%,50% 50%,50% 100%,24% 100%,24% 50%,30% 50%);text-shadow:0 0 12px rgba(255,255,255,.45)}
.map-hero h1::after{-webkit-text-stroke:2px var(--orange);clip-path:polygon(63% 0,100% 0,100% 100%,50% 100%,50% 50%,63% 50%)}
.eyebrow{color:var(--orange)}
.hero-copy{color:#c3ced8}
.chart-index{border-top-color:rgba(101,250,255,.3);border-left-color:rgba(101,250,255,.3)}
.chart-index div{border-right-color:rgba(101,250,255,.3);border-bottom-color:rgba(101,250,255,.3)}
.chart-index dt{color:#8fa9b6}
.chart-index dd{color:#fff}
.chart-index div:nth-child(2) dd{color:var(--lav)}
.chart-index div:nth-child(3) dd{color:var(--orange)}
.chart-index div:nth-child(4) dd{color:var(--cyan)}
.chart-toolbar h2{color:#fff;text-shadow:0 0 10px rgba(255,122,24,.5)}
.chart-toolbar>p{color:#a9b9c4}

/* chart frame: orange, white, pink and cyan corners */
.paradigm-chart{border-color:rgba(101,250,255,.5);box-shadow:inset 0 0 70px rgba(101,250,255,.04),0 0 22px rgba(255,122,24,.16)}
.bracket-nw{border-top-color:#fff;border-left-color:#fff}
.bracket-ne{border-top-color:var(--orange);border-right-color:var(--orange)}
.bracket-sw{border-bottom-color:var(--pink);border-left-color:var(--pink)}
.bracket-se{border-bottom-color:var(--cyan);border-right-color:var(--cyan)}
.coordinate-nw{color:#fff;text-shadow:0 0 7px rgba(255,255,255,.4)}
.coordinate-ne{color:var(--orange)}
.coordinate-sw{color:var(--pink);text-shadow:0 0 7px rgba(255,79,168,.5)}
.coordinate-se{color:var(--cyan)}

/* the five places keep their own colours, with white names */
.map-location .map-label{color:#fff}
.map-location .map-description{color:#c3ced8}
.map-location.gateway{border-color:rgba(101,250,255,.7)}
.map-location.gateway .map-label{text-shadow:0 0 10px rgba(101,250,255,.9)}
.map-location.archives{border-color:rgba(198,160,255,.7);box-shadow:inset 0 0 16px rgba(198,160,255,.1),0 0 10px rgba(198,160,255,.22)}
.map-location.archives .map-label{text-shadow:0 0 10px rgba(198,160,255,.95)}
.map-location.forge{border-color:rgba(255,59,66,.72);box-shadow:inset 0 0 16px rgba(255,59,66,.1),0 0 10px rgba(255,59,66,.24)}
.map-location.forge .map-label{text-shadow:0 0 10px rgba(255,59,66,.95)}
.map-location.terminus{border-color:rgba(255,122,24,.78)}
.map-location.terminus .map-label{color:var(--orange);text-shadow:0 0 12px rgba(255,122,24,.9)}
.map-location.watchtower{border-color:rgba(101,250,255,.7)}
.map-location.watchtower .map-label{text-shadow:0 0 10px rgba(101,250,255,.9)}
.map-location.gateway:hover,.map-location.gateway:focus-visible,.map-location.gateway.is-active,
.map-location.watchtower:hover,.map-location.watchtower:focus-visible,.map-location.watchtower.is-active{border-color:#fff;box-shadow:inset 0 0 20px rgba(101,250,255,.2),0 0 18px rgba(101,250,255,.5)}
.map-location.archives:hover,.map-location.archives:focus-visible,.map-location.archives.is-active{border-color:#fff;box-shadow:inset 0 0 20px rgba(198,160,255,.25),0 0 18px rgba(198,160,255,.55)}
.map-location.forge:hover,.map-location.forge:focus-visible,.map-location.forge.is-active{border-color:#fff;box-shadow:inset 0 0 20px rgba(255,59,66,.25),0 0 18px rgba(255,59,66,.55)}
.map-location.terminus:hover,.map-location.terminus:focus-visible,.map-location.terminus.is-active{border-color:#fff;box-shadow:inset 0 0 24px rgba(255,122,24,.25),0 0 20px rgba(255,122,24,.55)}
.map-location:hover .map-label,.map-location:focus-visible .map-label,.map-location.is-active .map-label{color:#fff}
.outer-sectors{border-top-color:rgba(255,122,24,.7);color:var(--orange);background:rgba(5,7,14,.88)}
.outer-sectors small{color:rgba(255,255,255,.6)}

/* location dossier */
.location-dossier{border-color:rgba(101,250,255,.5);background:linear-gradient(125deg,rgba(101,250,255,.05),transparent 55%,rgba(255,122,24,.055)),rgba(5,7,14,.97);box-shadow:inset 0 0 35px rgba(101,250,255,.03),0 0 22px rgba(255,122,24,.1)}
.dossier-close{border-color:var(--orange);color:var(--orange);background:#05050b}
.dossier-close:hover,.dossier-close:focus-visible{color:#fff;border-color:#fff}
.dossier-kicker{color:var(--orange)}
.location-dossier h2{color:#fff;text-shadow:0 0 11px rgba(255,122,24,.55)}
.dossier-description{color:#c3ced8}
.dossier-summary>div,.dossier-columns section{border-color:rgba(101,250,255,.26);background:rgba(101,250,255,.025)}
.dossier-summary>div:first-child,.dossier-columns section:first-child{border-top:2px solid var(--orange)}
.dossier-summary>div:last-child,.dossier-columns section:last-child{border-top:2px solid var(--lav)}
.dossier-summary dt{color:var(--orange)}
.dossier-columns h3{color:#fff}
.dossier-columns ul{color:#c3ced8}
#locationStatus{color:var(--cyan)}
.location-interface-link{border-color:var(--orange);color:#ffb27a;background:rgba(255,122,24,.06)}
.location-interface-link:hover,.location-interface-link:focus-visible{color:#fff;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.25)}

/* Outer Sectors rail: runs to the bottom edge, is thin, and sits below the Watchtower so it never covers it (phone turned sideways too) */
.paradigm-chart .outer-sectors{
  bottom:0;
  left:0;
  width:100%;
  min-height:0;
  padding:6px 12px;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  column-gap:14px;
  border-bottom:0;
}
.paradigm-chart .outer-sectors span{font-size:11px;letter-spacing:.26em}
.paradigm-chart .outer-sectors small{margin-top:0;font-size:8px;letter-spacing:.15em}
.paradigm-chart .watchtower .map-label,.paradigm-chart .watchtower .map-description{transform:translateX(-50%)}