@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;700&family=Prompt:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* WRITE TIME Clean Editorial Theme */
  --surface-base: #0b0e14;
  --surface-card: #11151f;
  --surface-hover: #161c28;
  --border-subtle: #1c2333;
  --border-focus: #2d384e;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  --accent-gold: #e5a93c;
  --accent-gold-subtle: rgba(229, 169, 60, 0.12);
  --accent-gold-border: rgba(229, 169, 60, 0.35);

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Prompt', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', "Cascadia Code", monospace;
}

body {
  font-family: var(--font-sans);
  background-color: var(--surface-base);
  color: var(--text-primary);
  user-select: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

.font-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* Clean Sharp Editorial Cards & Panels */
.editorial-card, .editorial-panel {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
}

.editorial-card:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}

.editorial-panel-elevated {
  background-color: #141a26;
  border: 1px solid #283347;
  border-radius: 6px;
}

.active-selected {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 1.5px var(--accent-gold);
}

.timeline-canvas-container {
  position: relative;
  background: radial-gradient(circle at 50% 10%, #141a26 0%, #0b0e14 100%);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--surface-base);
}
::-webkit-scrollbar-thumb {
  background: #232c3d;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334058;
}

/* Slider Controls */
.slider-thumb {
  cursor: grab;
}
.slider-thumb:active {
  cursor: grabbing;
}

/* Clean Modal Animation */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.animate-modal {
  animation: modalFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Focus styles */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 1px;
}


/* ==========================================================================
   LEAFLET DARK THEME & GEOPOLITICAL HOTSPOT STYLES
   ========================================================================== */
.leaflet-container {
  background: #090c10 !important;
  font-family: var(--font-sans) !important;
}

.leaflet-bar {
  border: 1px solid #1c2333 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.leaflet-bar a {
  background-color: #111520 !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid #1c2333 !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
}

.leaflet-bar a:hover {
  background-color: #1a2232 !important;
  color: #e5a93c !important;
}

.leaflet-control-attribution {
  background: rgba(9, 12, 16, 0.85) !important;
  color: #64748b !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-top-left-radius: 4px !important;
}

.leaflet-control-attribution a {
  color: #94a3b8 !important;
}

/* Pulsing Hotspot Marker Styles */
.geo-marker-pulse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-marker-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: markerPulse 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes markerPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

.pulse-red::after { 
  box-shadow: 0 0 12px #ef4444; 
  border: 1.5px solid #ef4444; 
}

.pulse-gold::after { 
  box-shadow: 0 0 12px #e5a93c; 
  border: 1.5px solid #e5a93c; 
}

.pulse-cyan::after { 
  box-shadow: 0 0 12px #06b6d4; 
  border: 1.5px solid #06b6d4; 
}

/* Dark Leaflet Tooltip */
.dark-leaflet-tooltip {
  background: #0d111a !important;
  border: 1px solid #283347 !important;
  border-radius: 6px !important;
  color: #f1f5f9 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  padding: 6px 10px !important;
}

.dark-leaflet-tooltip::before {
  border-top-color: #283347 !important;
}

.main-tab-btn.active {
  background-color: rgba(229, 169, 60, 0.2) !important;
  color: #e5a93c !important;
  border-color: rgba(229, 169, 60, 0.5) !important;
}

/* Keep content readable and shrinkable while preserving the desktop layout. */
*, *::before, *::after { box-sizing: border-box; }
.flex > *, .grid > * { min-width: 0; }
.editorial-card, .editorial-panel, #eventDetailDialog { overflow-wrap: anywhere; }
.timeline-canvas-container, #minimapContainer, .slider-thumb { user-select: none; }
#minimapViewport, #handleLeft, #handleRight { touch-action: none; }
.text-slate-500, .text-slate-600, [class~="text-[#64748b]"],
.leaflet-control-attribution { color: var(--text-muted) !important; }
input::placeholder { color: var(--text-muted) !important; opacity: 1; }
#categoryChipsContainer button { opacity: 1; }
#eventDetailDialog { max-height: calc(100dvh - 2rem); overflow-y: auto; max-width: min(42rem, 100%); }
#eventDetailDialog > *, #modalSourceLink { max-width: 100%; }
#eventDetailDialog .flex { flex-wrap: wrap; }

@media (max-width: 767px) {
  #appHeader, #primaryNavigation { position: relative; top: auto; }
  #appHeader > div > div:first-child { align-items: flex-start; max-width: 100%; }
  #appHeader > div > div:first-child > div > div { flex-wrap: wrap; }
  #appHeader h1 a { flex-wrap: wrap; }
  #primaryNavigation > div > div:first-child { flex-wrap: wrap; width: 100%; }
  #primaryNavigation .main-tab-btn { max-width: 100%; flex-wrap: wrap; }
  #timelineControls > div { max-width: 100%; justify-content: flex-start; }
  #timelineControls select, #worldMapDateSelect { max-width: 100%; }
  #timelineControls .preset-btn { flex: 1 1 0; }
  #newsFeedSection > div:first-child { flex-wrap: wrap; gap: 0.5rem; }
  #minimapContainer { min-height: 48px; }
  #timelineTooltip { max-width: calc(100% - 16px); }
  #minimapContainer + p, #currentVisibleWindowLabel { white-space: normal; }
  #eventDetailModal { padding: 1rem; }
  #eventDetailDialog { padding: 1rem; width: 100%; }
  #modalTitle { padding-right: 2.75rem; }
  #eventDetailDialog > .pr-8 { padding-right: 3rem; }
  #modalDirectSourceBtn { flex: 1 1 auto; justify-content: center; }
  #clearSearchBtn { top: 0; right: 0; }
  #searchInput { padding-right: 3rem; }
}

@media (pointer: coarse), (max-width: 767px) {
  button, a[href], input, select, [role="button"], [role="slider"] {
    /* Override flex-child minimum resets and fixed-width utility classes on touch. */
    min-width: 44px !important;
    min-height: 44px;
  }
  a[href] { display: inline-flex; align-items: center; }
  #handleLeft, #handleRight { width: 44px; background: transparent !important; }
  #handleLeft::after, #handleRight::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 8px; background: var(--accent-gold);
  }
  #handleLeft::after { left: 0; }
  #handleRight::after { right: 0; }
  .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}