/* Snapshots of History — shared chrome for the eight timeline pages.
 *
 * Layout only. There is not one color literal in this file: every color is a
 * CSS custom property the page defines in its own :root, because the eight
 * timelines run from near-black porphyry to light parchment and the same
 * ruleset has to sit on both.
 *
 * Token contract — a page MUST define all of these:
 *
 *   --bg            page background
 *   --panel         floating chrome background (usually translucent)
 *   --panel-border  floating chrome hairline
 *   --text          primary text
 *   --text-dim      secondary text (links, blurbs, hint)
 *   --text-faint    tertiary text (separators, scale line, close button)
 *   --accent        accent color (hover, active pill fill, event date)
 *   --accent-on     text color ON the accent fill — must read against --accent
 *   --hover         hover wash behind a pill or the close button
 *   --radius        floating chrome corner radius
 *
 * Optional: --font-ui overrides the chrome font stack (canvas fonts come from
 * the timeline's THEME object instead — the canvas can't read CSS vars).
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed; inset: 0;
  display: block;
  touch-action: none;
  cursor: grab;
}
#stage.dragging { cursor: grabbing; }

/* ── Floating chrome ── */
.chrome {
  position: fixed; z-index: 20;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.breadcrumb-float { top: 14px; left: 14px; padding: 8px 13px; }
.breadcrumb { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; }
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--text-faint); margin: 0 6px; }
.breadcrumb .current { color: var(--text); }

/* ── Bookmarks ── */
.marks {
  top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px;
  max-width: calc(100vw - 28px);
  overflow-x: auto; scrollbar-width: none;
}
.marks::-webkit-scrollbar { display: none; }
/* Desktop: keep the centered strip clear of the breadcrumb (left) and readout
   (right); it scrolls horizontally when the cap bites. */
@media (min-width: 761px) {
  .marks { max-width: max(320px, calc(100vw - 800px)); }
}
.marks button {
  flex: 0 0 auto;
  font: inherit; font-size: 12px;
  color: var(--text-dim);
  background: transparent; border: 0;
  padding: 6px 11px; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.marks button:hover { color: var(--text); background: var(--hover); }
.marks button.active { color: var(--accent-on); background: var(--accent); }

/* ── Readout ── */
.readout {
  top: 14px; right: 14px; padding: 8px 13px;
  text-align: right; pointer-events: none;
}
.readout .span {
  font-size: 15px; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.readout .scale {
  font-size: 10px; color: var(--text-faint);
  letter-spacing: 0.09em; text-transform: uppercase; margin-top: 3px;
}

/* ── Detail panel ── */
.detail {
  left: 14px; bottom: 86px; width: 330px; max-width: calc(100vw - 28px);
  padding: 15px 17px 16px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.detail.open { opacity: 1; visibility: visible; transform: translateY(0); }
.detail-close {
  position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-faint);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.detail-close:hover { color: var(--text); background: var(--hover); }
.detail-cat {
  display: inline-block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; margin-bottom: 9px;
}
.detail-title { font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
.detail-when {
  font-size: 12px; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.detail-blurb { font-size: 13px; line-height: 1.55; color: var(--text-dim); }

/* ── Minimap ── */
.minimap {
  left: 14px; right: 14px; bottom: 14px; height: 54px;
  padding: 7px 10px 6px; overflow: hidden;
  touch-action: none; cursor: pointer;
}
#minimap-canvas { display: block; width: 100%; height: 100%; }

/* ── Hint ── */
.hint {
  left: 50%; bottom: 84px; transform: translateX(-50%);
  padding: 8px 15px; font-size: 12px; color: var(--text-dim);
  pointer-events: none; text-align: center;
  transition: opacity 0.45s;
}
.hint.gone { opacity: 0; }

@media (max-width: 760px) {
  .readout { display: none; }
  .marks { top: 56px; left: 14px; right: 14px; transform: none; max-width: none; }
  .detail { bottom: 80px; }
  .hint { bottom: 78px; width: calc(100vw - 28px); }
  .minimap { height: 46px; }
}

@media (max-width: 480px) {
  .breadcrumb { font-size: 11px; }
  .breadcrumb-float { padding: 7px 11px; }
  .marks button { font-size: 11px; padding: 6px 9px; }
  .detail { padding: 13px 15px 14px; }
  .detail-title { font-size: 16px; }
}