/* ===================================================================
   TIMELINE STYLES
   Archive / cosmic timeline interface
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #020203;

  --line: #ffffff;
  --line-glow: #d9e7ff;

  --ink: #f2f2f2;
  --ink-dim: #8c8c96;

  --panel: #08090c;
  --panel-edge: #252831;

  --unknown: #9da3ad;
}


/* ================================================================
   PAGE
================================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  background: var(--bg);
  color: var(--ink);

  overflow: hidden;

  font-family: 'IBM Plex Sans', sans-serif;
  user-select: none;
}


#stage {
  position: fixed;
  inset: 0;

  cursor: grab;
}

#stage.dragging {
  cursor: grabbing;
}


svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ================================================================
   TIMELINE
================================================================ */

.core-line {
  stroke: var(--line);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.8));
}


.core-line-glow {
  stroke: var(--line-glow);
  opacity: .55;
  filter: blur(7px);
}



/* ================================================================
   ENDPOINTS
================================================================ */

.origin-burst circle {
  fill: none;
  stroke: var(--line-glow);
  filter: drop-shadow(0 0 8px var(--line-glow));
}


.origin-core {
  fill: white;
  filter:
    drop-shadow(0 0 12px white)
    drop-shadow(0 0 24px var(--line-glow));
}


.pulse {
  fill:none;
  stroke:white;
  animation:pulseRing 2.6s ease-out infinite;
}


.pulse.delay {
  animation-delay:1.3s;
}


@keyframes pulseRing {

  0% {
    opacity:.7;
    r:12;
  }

  100% {
    opacity:0;
    r:40;
  }
}


.arrow-head {
  fill:white;
  filter:
    drop-shadow(0 0 8px white)
    drop-shadow(0 0 16px var(--line-glow));
}




/* ================================================================
   EVENTS
================================================================ */

.pole {

  stroke:
    rgba(255,255,255,.7);

  stroke-width:2;

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.7));
}



.dot {

  cursor:pointer;

  filter:
    drop-shadow(0 0 8px currentColor);

  transition:
    filter .2s ease;
}



.dot-hit {
  fill:transparent;
  cursor:pointer;
}



.dot-ring {

  fill:none;

  stroke-width:2;

  opacity:0;

  filter:
    drop-shadow(0 0 12px currentColor);

  transition:
    opacity .2s ease;
}



.marker-group.selected .dot-ring {

  opacity:1;

}



.marker-group.selected .dot {

  filter:
    drop-shadow(0 0 12px white)
    drop-shadow(0 0 24px currentColor);

}



/* Event titles */

.marker-title {

  font-family:
    'IBM Plex Sans',
    sans-serif;

  font-size:16px;

  font-weight:600;

  letter-spacing:.04em;

  fill:white;

  text-anchor:middle;

  opacity:0;

  pointer-events:none;

  transition:
    opacity .2s ease;

}


.marker-group:hover .marker-title,
.marker-group.selected .marker-title {

  opacity:1;

}



/* ================================================================
   CONNECTIONS
================================================================ */

.arc {

  fill:none;

  stroke-width:2;

  stroke-dasharray:5 6;

  opacity:.85;

  filter:
    drop-shadow(0 0 6px currentColor);

}


.arc-glyph {

  cursor:pointer;

}


.arc-glyph rect {

  fill:white;

  filter:
    drop-shadow(0 0 8px white);

  transform-box:fill-box;

  transform-origin:center;

  transition:
    transform .2s ease;

}


.arc-glyph:hover rect,
.arc-glyph.selected rect {

  transform:
    rotate(45deg)
    scale(1.5);

}




/* ================================================================
   HIDE OLD BRAND
================================================================ */

#brand {

  display:none;

}


#hint {

  position:fixed;

  top:22px;

  right:26px;

  font-family:
    'IBM Plex Mono',
    monospace;

  font-size:11px;

  line-height:1.6;

  text-align:right;

  color:var(--ink-dim);

  opacity:.8;

  pointer-events:none;

}




/* ================================================================
   TRAY
================================================================ */

#tray-toggle {

  position:fixed;

  left:50%;

  bottom:0;

  transform:translateX(-50%);


  width:56px;
  height:28px;


  display:flex;

  align-items:center;
  justify-content:center;


  background:
    rgba(8,9,12,.95);


  border:

    1px solid
    var(--panel-edge);


  border-bottom:none;

  border-radius:
    10px 10px 0 0;


  cursor:pointer;

  z-index:20;

}



#tray-toggle svg {

  width:15px;

  height:15px;

  transition:
    transform .25s ease;

}



#tray-toggle.open svg {

  transform:rotate(180deg);

}




#tray {

  position:fixed;

  left:0;
  right:0;
  bottom:0;


  height:0;


  display:flex;


  background:
    rgba(8,9,12,.98);


  border-top:

    1px solid
    var(--panel-edge);


  overflow:hidden;


  transition:
    height .3s cubic-bezier(.65,0,.35,1);


  z-index:15;

}



#tray.open {

  height:min(320px,45vh);

}



.tray-col {

  height:100%;

  overflow-y:auto;

  padding:22px 26px;

}



#tray-key {
  width: 44%;
  border-right: 1px solid var(--panel-edge);
  overflow-y: hidden;
  overflow-x: hidden;
}



#tray-desc {

  flex:1;

}




.tray-heading {

  margin:0 0 14px;

  font-family:
    'IBM Plex Mono',
    monospace;


  font-size:11px;

  letter-spacing:.18em;

  color:var(--ink-dim);

}



/* ================================================================
   KEY
================================================================ */


.key-grid {

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px 16px;

}


.key-item {

  display:flex;

  align-items:center;

  gap:10px;

  padding:7px;

  border-radius:6px;

  cursor:pointer;

}



.key-item:hover {

  background:
    rgba(255,255,255,.04);

}



.key-swatch {

  width:11px;

  height:11px;

  border-radius:50%;

  background:
    var(--swatch-color,#888);


  opacity:.4;

}



.key-item.active .key-swatch {

  opacity:1;

  box-shadow:
    0 0 12px var(--swatch-color);

}



.key-label {

  font-size:13px;

  color:var(--ink-dim);

}



.key-item.active .key-label {

  color:white;

}




.key-divider {

  height:1px;

  background:
    var(--panel-edge);

  margin:14px 0;

}




/* ================================================================
   DESCRIPTION
================================================================ */


#desc-empty {

  color:var(--ink-dim);

  max-width:40ch;

  line-height:1.7;

  font-size:13px;

}



#desc-body {

  display:none;

}


#desc-body.show {

  display:block;

}


#desc-tag {

  display:inline-block;

  padding:4px 9px;

  margin-bottom:12px;


  font-family:
    'IBM Plex Mono',
    monospace;


  font-size:10px;


  color:
    var(--tag-color);


  border:

    1px solid
    var(--panel-edge);


  border-radius:4px;

}



#desc-title {

  margin:0 0 12px;

  font-size:20px;

  font-weight:600;

}



#desc-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #c7cdd8;
  white-space: pre-line;
}