/* ─────────────────────────────────────────────────────────────────
   v0.4 UI/UX enhancements. Six additions, each opt-in via a class
   on the ancestor element:
     1. Per-category accent colours via --cat-accent
     2. Density toggle (.density-compact / -comfortable / -detailed)
     3. Sticky filter bar + active-filter chips
     4. Skeleton shimmer for fetching states
     5. Timeline card meta row (source count, language pill)
     6. Improved popover (positioning + arrow + max-height)
   None of the above replaces existing rules — they layer on, so a
   page that doesn't add the new classes keeps its current look.
   ───────────────────────────────────────────────────────────────── */

/* 1. Per-category accent colours --------------------------------- */
[data-category="religions"]      { --cat-accent: #c9a36b; --cat-glow: rgba(201, 163, 107, 0.18); }
[data-category="civilizations"]  { --cat-accent: #d2691e; --cat-glow: rgba(210, 105, 30, 0.18); }
[data-category="languages"]      { --cat-accent: #6da5d8; --cat-glow: rgba(109, 165, 216, 0.18); }
[data-category="earth"]          { --cat-accent: #5fb878; --cat-glow: rgba(95, 184, 120, 0.18); }
[data-category="psychology"]     { --cat-accent: #c878c8; --cat-glow: rgba(200, 120, 200, 0.18); }
[data-category="species"]        { --cat-accent: #b87333; --cat-glow: rgba(184, 115, 51, 0.18); }
[data-category="techniques"]     { --cat-accent: #ffb74d; --cat-glow: rgba(255, 183, 77, 0.18); }
[data-category="datasets"]       { --cat-accent: #9aa0a6; --cat-glow: rgba(154, 160, 166, 0.18); }

.timeline-entry[data-category] .timeline-dot {
  background: var(--cat-accent, var(--accent));
  box-shadow: 0 0 0 4px var(--cat-glow, var(--accent-glow));
}
.timeline-entry[data-category] .timeline-card {
  border-left: 3px solid var(--cat-accent, var(--accent));
}
.category-card[data-category] {
  border-color: var(--cat-accent, var(--border));
}
.category-card[data-category]:hover {
  box-shadow: 0 8px 24px var(--cat-glow, var(--accent-glow));
  transform: translateY(-2px);
}
.category-card[data-category] .category-card-icon {
  color: var(--cat-accent, var(--accent));
}

/* 2. Density toggle ---------------------------------------------- */
.timeline-container.density-compact .timeline-entry { margin-bottom: 12px; }
.timeline-container.density-compact .timeline-card { padding: 10px 14px; }
.timeline-container.density-compact .timeline-card-body { padding: 4px 0; }
.timeline-container.density-compact .timeline-event { font-size: 14px; line-height: 1.35; }
.timeline-container.density-compact .timeline-popover { display: none; }

.timeline-container.density-detailed .timeline-entry { margin-bottom: 32px; }
.timeline-container.density-detailed .timeline-card { padding: 22px 26px; }
.timeline-container.density-detailed .timeline-event { font-size: 19px; line-height: 1.45; }

.density-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.density-toggle button {
  background: transparent;
  border: none;
  color: var(--text2);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: background 120ms, color 120ms;
}
.density-toggle button:hover { color: var(--text); }
.density-toggle button.active {
  background: var(--surface3);
  color: var(--text);
}

/* 3. Sticky filter bar + active-filter chips --------------------- */
.timeline-controls.sticky {
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
  background: linear-gradient(to bottom, var(--bg) 70%, transparent 100%);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text2);
}
.filter-chip strong { color: var(--text); font-weight: 500; }
.filter-chip a {
  color: var(--text3);
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
}
.filter-chip a:hover { color: var(--danger); }
.filter-chips .filter-chip-clear {
  margin-left: auto;
  background: transparent;
  border-color: var(--border-hover);
}

/* Toolbar row that sits below the filter chips — currently hosts the
   density toggle, with room for future controls (export, share). */
.timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .timeline-toolbar { justify-content: flex-start; }
  .density-toggle button { padding: 6px 8px; }
}

/* 4. Skeleton shimmer -------------------------------------------- */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line.lg { height: 24px; }
.skeleton-line.sm { height: 10px; width: 60%; }

/* 5. Timeline card meta row (source count, lang pill) ------------ */
.timeline-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text2);
}
.timeline-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface3);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.timeline-meta-pill svg { width: 11px; height: 11px; }
.timeline-meta-pill.lang-ar { color: var(--info); }
.timeline-meta-pill.lang-both { color: var(--success); }
.timeline-meta-pill.sources { color: var(--accent-light); }
.timeline-meta-pill.theme { color: var(--text2); font-style: italic; }

/* 6. Improved popover (max-height + arrow) ----------------------- */
.timeline-card .timeline-popover {
  max-height: 60vh;
  overflow-y: auto;
}
.timeline-card .timeline-popover::-webkit-scrollbar { width: 6px; }
.timeline-card .timeline-popover::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 3px;
}
.timeline-card .timeline-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
}

/* Recent-additions strip on home (renders when handler passes
   the recent[] slice; otherwise the section just doesn't render). */
.home-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0 32px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.home-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.home-recent-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.home-recent-header a {
  font-size: 12px;
  color: var(--text2);
}
.home-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  transition: background 120ms;
  color: var(--text);
}
.home-recent-item:hover {
  background: var(--surface3);
  color: var(--text);
}
.home-recent-item .home-recent-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  min-width: 90px;
  flex-shrink: 0;
}
.home-recent-item .home-recent-cat {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cat-glow, var(--surface3));
  color: var(--cat-accent, var(--text2));
  flex-shrink: 0;
}
.home-recent-item .home-recent-text {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page-level layout polish ---------------------------------------- */
.timeline-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.home {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

/* Search-shortcut hint on the topbar (renders if a span with this
   class is present). */
.topbar-shortcut-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar-shortcut-hint kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--text2);
}
@media (max-width: 768px) {
  .topbar-shortcut-hint { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   v0.4.1 polish layer (additive — same opt-in pattern as above).
   7. Keyboard-shortcut help overlay (rendered lazily by app.js).
   8. Focus-visible ring (a11y; only kicks in on keyboard nav).
   9. Reduced-motion guard (kills cosmetic animations).
  10. Print stylesheet for /entry/{id} detail pages.
   ───────────────────────────────────────────────────────────────── */

/* 7. Keyboard help overlay --------------------------------------- */
.kb-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: kb-fade 160ms ease-out;
}
.kb-help-overlay.open { display: flex; }

.kb-help-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.kb-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.kb-help-head h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.kb-help-close {
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 0 6px;
  border-radius: var(--radius-xs);
}
.kb-help-close:hover { background: var(--surface3); color: var(--text); }

.kb-help-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.kb-help-grid dt {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.kb-help-grid dd { margin: 0; color: var(--text2); align-self: center; }
.kb-help-grid kbd {
  font-family: var(--mono, monospace);
  font-size: 11px;
  padding: 2px 7px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--text2);
}
@keyframes kb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ─────────────────────────────────────────────────────────────────
   Vellisch — the Kuncover scholar mascot. Server-rendered <img> with a
   soft gold glow anchored behind the figure. Idle breathing + glow are
   CSS-only and freeze under prefers-reduced-motion (guard below).
   ───────────────────────────────────────────────────────────────── */
.vellisch {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  user-select: none;
}
/* The figure itself is a button so focus + Enter/Space are native. Kept
   visually identical to the bare image (reset chrome, glow anchors to the
   positioned .vellisch parent since the button stays position:static). */
.vellisch-btn {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* Thought bubble — thinking, not speaking. Floats above the scholar with
   two trailing "thought" dots. Springy fade-in; fade only under
   prefers-reduced-motion (guard further down). */
.vellisch-bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 3;
  width: max-content;
  max-width: 220px;
  text-align: center;
  background: rgba(12, 10, 8, 0.97);
  border: 1px solid var(--accent);
  border-radius: 16px 16px 16px 4px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px var(--accent-glow);
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.vellisch-bubble::before,
.vellisch-bubble::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(12, 10, 8, 0.97);
  border: 1px solid var(--accent);
}
.vellisch-bubble::before { width: 10px; height: 10px; left: 22px; bottom: -6px; }
.vellisch-bubble::after  { width: 6px;  height: 6px;  left: 14px; bottom: -14px; }
.vellisch-thinking .vellisch-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.vellisch-img {
  display: block;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
  animation: vellisch-breathe 6s ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 100%;
}
/* Glow sits behind the figure, anchored over the head / web-halo. */
.vellisch-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 34%;
  width: 80%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(212, 168, 103, 0.28) 0%,
    rgba(176, 141, 87, 0.16) 38%,
    transparent 70%);
  filter: blur(14px);
  animation: vellisch-glow 6s ease-in-out infinite;
}
.landing-mascot { width: 216px; margin: 0 auto 20px; }
.landing-mascot .vellisch-img { width: 216px; }
.empty-mascot { width: 132px; margin: 0 auto 4px; }
.empty-mascot .vellisch-img { width: 132px; }

.search-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}

@keyframes vellisch-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.015); }
}
@keyframes vellisch-glow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
  /* blink-equivalent thought spark: a quick bright pop once per cycle
     (the raster eyes can't blink, so the halo sparks instead). */
  79%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
  82%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.14); }
  85%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .vellisch-img { animation: none; transform: none; }
  .vellisch-glow { animation: none; opacity: 0.6; }
  /* Bubble fades only — no float / spring under reduced motion. */
  .vellisch-bubble { transform: translateX(-50%); transition: opacity 0.3s ease; }
  .vellisch-thinking .vellisch-bubble { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .landing-mascot, .landing-mascot .vellisch-img { width: 168px; }
  .empty-mascot, .empty-mascot .vellisch-img { width: 108px; }
}

/* 8. Focus-visible ring (only on keyboard nav, not on mouse click) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cat-accent, var(--accent, #6da5d8));
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* 9. Reduced-motion guard ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none; opacity: 0.8; }
}

/* 10. Print stylesheet — clean reading view for the detail page -- */
@media print {
  /* Hide app chrome */
  .topbar, .home-actions, .timeline-controls, .pagination,
  .kb-help-overlay, .topbar-shortcut-hint, .density-toggle,
  .filter-chips, .timeline-line {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .content, .timeline-page, .home {
    max-width: none;
    padding: 0;
  }
  /* Print-friendly typography */
  h1, h2, h3 { color: black; page-break-after: avoid; }
  a { color: black; text-decoration: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }
  /* Keep entry blocks intact across pages */
  .timeline-entry, .timeline-card, .entry-detail {
    page-break-inside: avoid;
    border: none !important;
    background: white !important;
    box-shadow: none !important;
  }
  .timeline-card { padding: 8px 0 !important; }
  .timeline-meta-pill {
    background: white !important;
    border: 1px solid #999 !important;
    color: #333 !important;
  }
}

/* Search overhaul (P1) -------------------------------------------------- */
/* Facet chips + live-search highlight. Layers on the SSR search page; the
   no-JS page renders without these classes so it stays untouched. */

.search-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.search-facets:empty { display: none; }

.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.facet-chip:hover {
  border-color: var(--border-hover);
  color: var(--text);
}
.facet-chip.active {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}
.facet-chip .facet-count {
  font-size: 0.72rem;
  color: var(--text3);
  background: var(--surface3);
  padding: 0 0.35rem;
  border-radius: 999px;
}
.facet-chip.active .facet-count { color: var(--accent-light); }

/* Match highlight \u2014 readable on the dark surface, AR-safe. */
.search-result mark,
mark {
  background: var(--accent-glow);
  color: var(--accent-light);
  padding: 0 0.15rem;
  border-radius: var(--radius-xs);
}
.rtl mark { direction: rtl; unicode-bidi: embed; }

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.suggestion-chip {
  padding: 0.35rem 0.8rem;
  border: 1px dashed var(--border-hover);
  border-radius: 999px;
  background: transparent;
  color: var(--text2);
  font-size: 0.85rem;
  cursor: pointer;
}
.suggestion-chip:hover {
  color: var(--accent-light);
  border-color: var(--accent);
}