/* Standalone, embeddable timeline (namespaced) */
.timeline-embed{
  /* ===== THEME (overrideable by config) ===== */
  --bg:#12060a;
  --bg2:#0b0507;

  --text:#fff6e5;
  --muted:#ffdca6;
  --subtle: rgba(255,246,229,.78);

  --gold:#FFD84A;
  --gold2:#f2c94c;
  --red:#b3122a;
  --red2:#7b0b1d;

  /* Background “oval glow” colors (overrideable by timeline-config.js theme) */
  --bgOvalA: rgba(179,18,42,0.32);     /* left/page glow */
  --bgOvalB: rgba(255,216,74,0.18);    /* right/page glow */
  --vpOvalA: rgba(179,18,42,0.18);     /* left/viewport glow */
  --vpOvalB: rgba(255,216,74,0.10);    /* right/viewport glow */ 

  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.032);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 980px;

  --focus: 0 0 0 4px rgba(255,216,74,.40);
  --markerText: rgba(255,216,74,.95);

  /* Alternating interval boxes (legacy; not currently rendered by core) */
  --intervalA: rgba(255,216,74,.18);
  --intervalB: rgba(179,18,42,.18);
  --intervalStroke: rgba(255,255,255,.14);

  /* ===== GEOMETRY ===== */
  --canvasH: 620px;

  /* Central tick band (now the main timeline) */
  --ticksH: 52px;           /* slightly tighter than 55 */
  --ticksTop: 260px;        /* adjust overall vertical position */
  --timelineMidY: calc(var(--ticksTop) + (var(--ticksH) / 2)); /* JS anchors connectors/cards to this */

  /* Two interval-bar lanes (above + below the tick spine) */
  --barsGap: 0px;           /* IMPORTANT: bars TOUCH ticks */
  --barsLaneH: 40px;        /* keep in sync with .bars height */

  --barsTop: calc(var(--ticksTop) - var(--barsGap) - var(--barsLaneH));
  /* IMPORTANT: bottom bars start immediately after tick band */
  --barsBottomTop: calc(var(--ticksTop) + var(--ticksH) + var(--barsGap));

  --barTopInBars: 11px;
  --barH: 18px;

  --avatar: 110px;
  --gapToPortraitEdge: 120px;

  /* Minimal clamp only (do NOT use this to solve context overlap) */
  --safeTop: 12px;

  --stackGap: 10px;
  --metaH: 44px;

  /* Day-span boxes (legacy; not currently rendered by core) */
  --dayBoxTop: calc(var(--barsBottomTop) + 34px);
  --dayBoxH: 16px;
  --dayStroke: rgba(255,255,255,.14);
}

.timeline-embed{
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
a{ color:inherit; }
.tiny{ font-size:.92rem; color: rgba(255,246,229,.72); }

body{
  margin:0;
  background:
    radial-gradient(900px 700px at 0% 50%, var(--bgOvalA), transparent 60%),
    radial-gradient(900px 700px at 100% 50%, var(--bgOvalB), transparent 60%),
    linear-gradient(90deg, var(--bg2) 0%, var(--bg) 50%, var(--bg2) 100%);
  background-attachment: fixed;
  color:var(--text);
  line-height:1.5;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1rem 1.25rem;
}

.card{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.1rem;
}

/* Head + controls */
.timeline-head{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap: 1rem;
  flex-wrap:wrap;
  margin-bottom:.35rem;
}

.timeline-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  width:100%;
  flex-wrap:nowrap;
}

.controlsLeft{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.controlsRight{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.controlPill{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .55rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.controlPill label{
  font-weight: 1000;
  font-size: .9rem;
  color: rgba(255,246,229,.85);
  white-space:nowrap;
}

.controlPill select{
  color: var(--text);
  background: rgba(14,6,8,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight:900;
  outline: none;
}
.controlPill select:focus{ box-shadow: var(--focus); }

/* viewport */

.timelineViewport{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,12);
  background:
    radial-gradient(900px 260px at 20% 0%, var(--vpOvalA), transparent 55%),
    radial-gradient(900px 260px at 80% 20%, var(--vpOvalB), transparent 55%),
    rgba(14,6,8,35);

  /* Column layout: context band on top, scroll area below */
  display:flex;
  flex-direction:column;

  overflow:hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;

  /* IMPORTANT: allow JS to grow this without CSS fighting it */
  min-height: 640px;
  height: auto;
}

.timelineViewport::-webkit-scrollbar{ display:none; }

/* Fixed top band for context tags (no overlap with cards) */
.contextBand{
  position:relative;
  height: 54px;
  flex: 0 0 54px;

  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.contextBand::-webkit-scrollbar{ display:none; }

.contextInner{
  position:relative;
  height:100%;
  min-width: 900px;
}

/* Scroll area for the main canvas */
.canvasScroll{
  position:relative;
  flex: 1 1 auto;

  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.canvasScroll::-webkit-scrollbar{ display:none; }

.timelineCanvas{
  position:relative;
  height: var(--canvasH);
  min-width: 900px;
}


/* Layering: keep guide lines behind cards */
.timelineLine{ z-index: 1; }
.ticks{ z-index: 1; }
.bars{ z-index: 2; }
.connector{ z-index: 3; }
.eventCard{ z-index: 5; }


/* Interval boxes row (legacy; not currently rendered by core) */
.intervalRow{
  position:absolute;
  left:0; right:0;
  top: var(--intervalTop);
  height: 34px;
  pointer-events:none;
}
.intervalBox{
  position:absolute;
  top:0;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--intervalStroke);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:.86rem;
  color: rgba(255,246,229,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  overflow:hidden;
  white-space:nowrap;
}

/* ticks (now the central timeline spine) */
.ticks{
  position:absolute;
  left:0; right:0;
  top: var(--ticksTop);
  height: var(--ticksH);
  pointer-events:none;
}

/* Centered, symmetrical tick marks: extend above AND below the labels */
.tick{
  position:absolute;
  left:0;
  width:1px;
  background: rgba(255,255,255,.18);
  top: 50%;
  transform: translateY(-50%);
}

.tick.small{
  height: 18px;          /* short tick, centered */
  opacity:.55;
}

.tick.big{
  height: 44px;          /* tall tick, centered */
  opacity:.9;
}

/* Put labels in the middle of the tick band, between top/bottom tick segments */
.tickLabel{
  position:absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,246,229,.78);
  font-weight:1000;
  font-size:.86rem;
  white-space:nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);

  /* Tiny background to keep ticks from visually slicing through text */
  padding: .06rem .30rem;
  border-radius: 8px;
  background: rgba(14,6,8,.55);
  border: 1px solid rgba(255,255,255,.10);
}

/* main line + bars */
.timelineLine{
  position:absolute;
  left:0;
  right:0;

  height:2px;

  /* Stronger gold tone so it visually connects ticks + bars */
  background: linear-gradient(
    90deg,
    rgba(255,216,74,.35),
    rgba(255,216,74,.85),
    rgba(255,216,74,.35)
  );

  box-shadow: 0 0 8px rgba(255,216,74,.35);

  pointer-events:none;

  /* Exact center of tick band */
  top: var(--timelineMidY);
}

.bars{
  position:absolute;
  left:0; right:0;
  height: var(--barsLaneH);
}

/* two bars lanes (above + below ticks) */
.barsTop{ top: var(--barsTop); }
.barsBottom{ top: var(--barsBottomTop); }

.bar{
  position:absolute;
  top: var(--barTopInBars);
  height: var(--barH);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.bar:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.bar:focus{ outline:none; box-shadow: var(--focus); }

/* span/day boxes (legacy; not currently rendered by core) */
.spanBox{
  position:absolute;
  top: var(--dayBoxTop);
  height: var(--dayBoxH);
  border-radius: 6px;
  border: 1px solid var(--dayStroke);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  pointer-events:none;
}

/* context tags (pill tag lives in band; dotted line lives in canvas) */
.contextTag{
  position:absolute;
  transform: translateX(-50%);
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px dashed rgba(255,216,74,.55);
  background: rgba(179,18,42,.10);
  color: rgba(255,216,74,.95);
  font-weight:1000;
  font-size:.86rem;
  white-space:nowrap;
}
.contextLine{
  position:absolute;
  width:0;
  border-left: 2px dotted rgba(255,216,74,.45);
  pointer-events:none;
  z-index: 1; /* behind connectors (3) and cards (5) */
}

/* event cards */
.eventCard{
  position:absolute;
  transform: translateX(-50%);
  width: 200px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  z-index: 5;
}
.eventCard:focus{ outline:none; box-shadow: var(--focus); border-radius: 14px; }

.stack{ display:flex; flex-direction:column; align-items:center; gap: var(--stackGap); }

.avatarWrap{
  width: var(--avatar);
  height: var(--avatar);
  margin: 0 auto;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
  display:grid;
  place-items:center;
  position:relative;
}
.avatarWrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatarWrap .ph{ font-weight:1000; color: rgba(255,246,229,.82); padding:.5rem; font-size:.9rem; }

.meta{
  min-height: var(--metaH);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  line-height:1.15;
}
.empName{ font-weight:1000; letter-spacing:.2px; }
.empYears{ color: rgba(255,246,229,.78); font-weight:900; font-size:.92rem; margin-top:.18rem; }

.eventText{
  margin-top:.1rem;
  color: var(--markerText);
  font-weight:1000;
  line-height:1.12;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.eventText span{ display:block; }

.eventCard .avatarWrap{
  border-color: rgba(255,216,74,.55);
  box-shadow: 0 0 0 4px rgba(255,216,74,.14), 0 16px 34px rgba(0,0,0,.40);
}

/* connectors */

.connector{
  position:absolute;

  /* We set connector.style.left = "####px" in JS (canvas coords).
     This makes that LEFT value act like the CENTER of the connector. */
  transform: translateX(-50%);

  width:0;
  border-left: 2px solid rgba(255,255,255,.18);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  pointer-events:none;
  z-index: 3;
}

.connector::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.22);
  top: 100%;
  margin-top: -4px;
}
.connector.dotTop::after{ top: 0; margin-top: -4px; }

/* lane classes */
.laneAbove{}
.laneBelow{}

/* mini map */
.scrubber{
  margin-top:.75rem;
  padding:.55rem 0;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:nowrap;
  width:100%;
}

.miniTrack{
  position:relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  flex: 1 1 320px;
  overflow:hidden;
}
.miniWindow{
  position:absolute;
  top:0; bottom:0;
  border-radius: 999px;
  background: rgba(255,216,74,.28);
  border: 1px solid rgba(255,216,74,.55);
  cursor:grab;
}
.miniWindow:active{ cursor:grabbing; }