/* ============ Calima timeline ============
   Loaded by overrides/timeline.html only.

   vis-timeline's standalone bundle INJECTS its own stylesheet at runtime,
   after this one, so an override of equal specificity loses. Every rule that
   restyles a .vis-* element is therefore scoped under .calima-tl to win on
   specificity, not on source order. */

.calima-tl {
  --tl-ink:      #2a2f34;
  --tl-slate:    #3b4147;
  --tl-mist:     #565d65;
  --tl-orange:   #dd6600;
  --tl-orange-d: #b45200;
  --tl-blood:    #8a2f24;   /* the Sunken */
  --tl-blood-d:  #66211a;
  --tl-line:     rgba(60,66,72,.14);
  margin: 1.4rem 0 2.4rem;
}

/* ---------------- toolbar: filter chips + zoom ---------------- */
.calima-tl__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}
.calima-tl__filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.calima-tl__label { font-size: .72rem; color: var(--tl-mist); margin-right: .2rem; }

.calima-tl button {
  font: inherit;
  font-size: .72rem;
  color: var(--tl-ink);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(60,66,72,.22);
  border-radius: 999px;
  padding: .3rem .75rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.calima-tl button:hover { border-color: var(--tl-orange); }
.calima-tl button:focus-visible { outline: 2px solid var(--tl-orange); outline-offset: 2px; }
.calima-tl-chip { display: inline-flex; align-items: center; gap: .45rem; }
.calima-tl-chip[aria-pressed="false"] { opacity: .45; background: transparent; }
.calima-tl-chip[aria-pressed="false"] .calima-tl-chip__mark { filter: grayscale(1); }
.calima-tl__zoom { display: flex; gap: .3rem; }
.calima-tl__zoom button[data-zoom="in"],
.calima-tl__zoom button[data-zoom="out"] { width: 2rem; padding-inline: 0; font-size: .9rem; line-height: 1; }

/* ---- the marker shapes, shared by chips, the list and the detail panel ----
   Same vocabulary as the old Timeglider page: square = book, diamond = game,
   circle = history, ring = the Sunken, bar = era. */
.calima-tl-chip__mark,
.calima-tl-entry::before {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  flex: none;
  box-sizing: border-box;
}
.calima-tl--book    .calima-tl-chip__mark, .calima-tl--book.calima-tl-entry::before    { background: var(--tl-slate); border-radius: 2px; }
.calima-tl--game    .calima-tl-chip__mark, .calima-tl--game.calima-tl-entry::before    { background: var(--tl-orange); transform: rotate(45deg) scale(.88); border-radius: 1px; }
.calima-tl--history .calima-tl-chip__mark, .calima-tl--history.calima-tl-entry::before { background: #fff; border: 2px solid var(--tl-mist); border-radius: 50%; }
.calima-tl--harvest .calima-tl-chip__mark, .calima-tl--harvest.calima-tl-entry::before { background: #fff; border: 3px solid var(--tl-blood); border-radius: 50%; }
.calima-tl--era     .calima-tl-chip__mark, .calima-tl--era.calima-tl-entry::before     { height: 1.1rem; width: .45rem; border-radius: 3px;
                                                                                          background: repeating-linear-gradient(180deg, rgba(59,65,71,.55) 0 3px, rgba(59,65,71,.2) 3px 6px); }

/* ---------------- the vis-timeline canvas ---------------- */
.calima-tl .vis-timeline {
  border: 1px solid var(--tl-line);
  border-radius: .5rem;
  background: rgba(255,255,255,.72);
  font-family: inherit;
  box-shadow: 0 .3rem 1.4rem rgba(42,47,52,.06);
}
.calima-tl .vis-panel.vis-center,
.calima-tl .vis-panel.vis-left,
.calima-tl .vis-panel.vis-right,
.calima-tl .vis-panel.vis-top,
.calima-tl .vis-panel.vis-bottom { border-color: var(--tl-line); }
.calima-tl .vis-labelset .vis-label {
  color: var(--tl-ink);
  font-size: .72rem;
  letter-spacing: .02em;
  border-bottom-color: var(--tl-line);
}
.calima-tl .vis-labelset .vis-label .vis-inner { padding: .5rem .8rem; }
.calima-tl .vis-foreground .vis-group { border-bottom-color: var(--tl-line); }
.calima-tl .vis-time-axis .vis-text { color: var(--tl-mist); font-size: .68rem; }
.calima-tl .vis-time-axis .vis-grid.vis-minor { border-color: rgba(60,66,72,.07); }
.calima-tl .vis-time-axis .vis-grid.vis-major { border-color: rgba(60,66,72,.14); }

/* items */
.calima-tl .vis-item {
  font-size: .72rem;
  border-width: 1px;
  border-radius: .35rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(42,47,52,.12);
}
.calima-tl .vis-item .vis-item-content { padding: .3rem .55rem; }
/* Labels start AT their year (align: "left" in timeline.js); a heavier left
   edge marks that point, standing in for the connector line hidden below. */
.calima-tl .vis-item.vis-box,
.calima-tl .vis-item.vis-range { border-left-width: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* With lanes, a box's connector line runs down to the axis THROUGH the lanes
   below it, so Descent's line crossed the History lane. The box itself is
   centred on its year; the line and the dot on the axis only added clutter. */
.calima-tl .vis-item.vis-line,
.calima-tl .vis-item.vis-dot { display: none; }

.calima-tl .vis-item.tl-book                   { background: var(--tl-slate); border-color: var(--tl-ink); color: #f6f6f4; }
.calima-tl .vis-item.tl-game                   { background: var(--tl-orange); border-color: var(--tl-orange-d); color: #fff; }
.calima-tl .vis-item.tl-history                { background: rgba(255,255,255,.95); border-color: rgba(60,66,72,.35); border-left-color: var(--tl-mist); color: var(--tl-ink); }
.calima-tl .vis-item.tl-harvest                { background: var(--tl-blood); border-color: var(--tl-blood-d); color: #fff; }

/* Age of Frontiers spans decades: give the range a little depth */
.calima-tl .vis-item.vis-range.tl-game {
  background: linear-gradient(90deg, var(--tl-orange), #e9873a);
}

.calima-tl .vis-item.vis-selected {
  box-shadow: 0 0 0 3px rgba(221,102,0,.35), 0 2px 8px rgba(42,47,52,.18);
  z-index: 2;
}
.calima-tl .vis-item.vis-selected.tl-history { border-color: var(--tl-orange); }
.calima-tl .vis-item.vis-selected.tl-game    { border-color: var(--tl-ink); }

/* eras: soft striped bands behind every lane */
.calima-tl .vis-item.vis-background.tl-era {
  background: repeating-linear-gradient(135deg,
              rgba(59,65,71,.07) 0 10px, rgba(59,65,71,.03) 10px 20px);
  border-left: 1px dashed rgba(60,66,72,.3);
  border-right: 1px dashed rgba(60,66,72,.3);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.calima-tl .vis-item.vis-background.tl-era .vis-item-content {
  color: var(--tl-mist);
  font-style: italic;
  font-size: .68rem;
  letter-spacing: .03em;
}

/* hover tooltip */
.calima-tl .vis-tooltip {
  font-family: inherit;
  font-size: .72rem;
  line-height: 1.45;
  color: #f6f6f4;
  background: rgba(42,47,52,.95);
  border: 0;
  border-radius: .35rem;
  padding: .5rem .7rem;
  max-width: 18rem;
  white-space: normal;
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.2);
}

/* ---------------- detail panel under the canvas ---------------- */
.calima-tl__detail {
  margin-top: .8rem;
  padding: .9rem 1.1rem;
  min-height: 4.2rem;
  border: 1px solid var(--tl-line);
  border-left: 3px solid var(--tl-line);
  border-radius: .5rem;
  background: rgba(255,255,255,.72);
  transition: border-color .2s;
}
.calima-tl__detail.is-open { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.2rem; }
.calima-tl__detail.calima-tl--book    { border-left-color: var(--tl-slate); }
.calima-tl__detail.calima-tl--game    { border-left-color: var(--tl-orange); }
.calima-tl__detail.calima-tl--harvest { border-left-color: var(--tl-blood); }
.calima-tl__detail.calima-tl--history { border-left-color: var(--tl-mist); }
.calima-tl__detail.calima-tl--era     { border-left-color: rgba(60,66,72,.45); }
.md-typeset .calima-tl__hint { margin: 0; color: var(--tl-mist); font-size: .76rem; }
.md-typeset .calima-tl__detail .calima-tl-entry__year { font-size: 1.5rem; }
.md-typeset .calima-tl__detail p { margin: 0 0 .35rem; }

/* ---------------- the chronological list ---------------- */
.md-typeset ol.calima-tl-list {
  --tl-mist: #565d65; --tl-slate: #3b4147; --tl-orange: #dd6600; --tl-blood: #8a2f24; --tl-ink: #2a2f34;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  position: relative;
}
/* the spine */
.md-typeset ol.calima-tl-list::before {
  content: "";
  position: absolute;
  left: 5.35rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--tl-slate), var(--tl-orange) 70%, rgba(60,66,72,.25));
  border-radius: 2px;
}
.md-typeset ol.calima-tl-list > li {
  margin: 0;
  padding: 0;
}
.md-typeset .calima-tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 1.9rem;
  padding: .55rem 0;
  scroll-margin-top: 6rem;
}
/* marker sits on the spine */
.md-typeset .calima-tl-entry::before {
  position: absolute;
  left: 5.36rem;
  top: 1.05rem;
  translate: -50% 0;
  z-index: 1;
}
.md-typeset .calima-tl-entry.calima-tl--era::before { top: .9rem; }
.md-typeset .calima-tl-entry__year {
  text-align: right;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--tl-ink);
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: .25rem;
}
.md-typeset .calima-tl--era .calima-tl-entry__year { font-size: .85rem; padding-top: .4rem; color: var(--tl-mist); }
.md-typeset .calima-tl-entry__body {
  padding: .55rem .9rem .65rem;
  border: 1px solid rgba(60,66,72,.12);
  border-radius: .5rem;
  background: rgba(255,255,255,.7);
  transition: border-color .18s, box-shadow .18s;
}
.md-typeset .calima-tl-entry:hover .calima-tl-entry__body {
  border-color: var(--tl-orange);
  box-shadow: 0 .3rem 1rem rgba(221,102,0,.1);
}
.md-typeset .calima-tl--era .calima-tl-entry__body {
  background: repeating-linear-gradient(135deg, rgba(59,65,71,.05) 0 10px, rgba(255,255,255,.55) 10px 20px);
  border-style: dashed;
}
.md-typeset .calima-tl-entry__title { margin: 0 0 .2rem; }
.md-typeset .calima-tl-entry__text { margin: 0; }
.md-typeset .calima-tl-entry__link { display: inline-block; margin-top: .35rem; font-size: .76rem; }
.md-typeset .calima-tl-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .5rem;
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .12em;
  border-radius: 999px;
  color: var(--tl-mist);
  background: rgba(60,66,72,.08);
}
.md-typeset .calima-tl--book .calima-tl-badge    { color: #f6f6f4; background: var(--tl-slate); }
.md-typeset .calima-tl--game .calima-tl-badge    { color: #fff; background: var(--tl-orange); }
.md-typeset .calima-tl--harvest .calima-tl-badge { color: #fff; background: var(--tl-blood); }

/* "··· 116 years ···" — the silence between events */
.md-typeset ol.calima-tl-list > li.calima-tl-gap {
  padding: .35rem 0 .35rem 6.4rem;
  font-size: .68rem;
  font-style: italic;
  letter-spacing: .05em;
  color: var(--tl-mist);
  opacity: .8;
}

/* the detail panel reuses a list entry's markup: drop the card-in-a-card */
.md-typeset .calima-tl__detail .calima-tl-entry__body {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* phones: narrower year column */
@media (max-width: 30em) {
  .md-typeset ol.calima-tl-list::before { left: 3.85rem; }
  .md-typeset .calima-tl-entry { grid-template-columns: 3rem 1fr; gap: 1.7rem; }
  .md-typeset .calima-tl-entry::before { left: 3.86rem; }
  .md-typeset .calima-tl-entry__year { font-size: .95rem; }
  .md-typeset .calima-tl--era .calima-tl-entry__year { font-size: .7rem; }
  .md-typeset ol.calima-tl-list > li.calima-tl-gap { padding-left: 4.9rem; }
  .calima-tl .vis-labelset .vis-label { font-size: .62rem; }
  .calima-tl .vis-labelset .vis-label .vis-inner { padding: .4rem .45rem; max-width: 4.6rem; white-space: normal; line-height: 1.25; }
  .calima-tl__detail.is-open { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .calima-tl button,
  .calima-tl__detail,
  .md-typeset .calima-tl-entry__body { transition: none; }
}