/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Raleway:wght@300;400;500;600&display=swap');

/* Design tokens */
:root{
  --bg: #f7fafc;
  --bg-2:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#1d4ed8;
  --accent-2:#2563eb;
  --border:#e5e7eb;
  --radius:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 6px 16px rgba(0,0,0,.12);
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --transition: all .2s ease;
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Raleway', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), #eef2ff 380px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:'Montserrat', sans-serif; margin:0 0 var(--space-4) 0; color:var(--text)}
h1{font-weight:700; font-size:clamp(1.8rem, 3vw, 2.6rem)}
h2{font-weight:600; font-size:clamp(1.1rem, 2.2vw, 1.35rem)}
h3{font-weight:600; font-size:1.05rem}

header{
  background: linear-gradient(183deg, #1d38d826, #1d38d8);
  color:#fff;
  padding: clamp(1.25rem, 3vw, 2rem) 1rem;
  text-align:center;
  position:relative;
  box-shadow:var(--shadow-md);
}
header h1{
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}
header .loading-notice{
  max-width:900px;
  margin:0 auto;
  background:rgba(255, 255, 255, .12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  padding:.65rem .9rem;
  font-size:.95rem;
}

.acknowledgement{
  max-width:720px;
  margin: var(--space-4) auto 0 auto;
  padding: .9rem 1rem;
  border-radius:10px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
}
.acknowledgement strong{color:#e0e7ff}

/* Containers */
main,
.timeline-container,
.category-filters-container,
.source-filters-container,
.data-persistence-container,
.results-summary{
  max-width:1200px;
  margin: 0 auto;
}

.timeline-container,
.category-filters-container,
.source-filters-container,
.data-persistence-container{
  margin: var(--space-6) auto;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
}

/* Results summary */
.results-summary{
  margin: var(--space-6) auto;
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow:var(--shadow-sm);
}
.results-summary strong{font-size:1.1rem}

/* Filters */
.category-filters, .source-filters{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-bottom: var(--space-4);
}
.category-filter-btn, .source-filter-btn, .filter-action-btn, .export-btn, #reset-timeline, #modal-link{
  border:1px solid var(--border);
  background:#f9fafb;
  color:var(--text);
  padding:.5rem .9rem;
  border-radius: 999px;
  font: inherit;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
.category-filter-btn:hover, .source-filter-btn:hover, .filter-action-btn:hover, .export-btn:hover, #reset-timeline:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
}
.category-filter-btn.active, .source-filter-btn.active{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}
.filter-actions{display:flex; gap:.6rem; justify-content:center}

/* Timeline */
.timeline-controls{display:flex; flex-direction:column; gap:.8rem}
.timeline-labels{display:flex; justify-content:space-between; color:var(--muted); font-weight:600}
.timeline-slider{position:relative; height:36px}
.timeline-slider input[type=range]{
  position:absolute; width:100%; height:8px; background:transparent; appearance:none; pointer-events:none;
}
.timeline-slider input[type=range]::-webkit-slider-track{
  height:8px; border-radius:6px; background:#e5e7eb;
}
.timeline-slider input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  height:18px; width:18px; border-radius:50%;
  background: var(--accent);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.15);
  cursor:pointer; pointer-events:all;
}

/* Grid & cards */
main{padding: var(--space-6) var(--space-4)}
#paper-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-4);
}
.paper-card{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: var(--space-4);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.paper-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}
.paper-card h3{
  font-size:1rem; font-weight:700; margin:.25rem 0 .35rem 0; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; overflow:hidden;
}
.paper-card .meta{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:.85rem; margin-bottom:.35rem;
}
.paper-card .tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem}
.tag{
  font-size:.72rem; font-weight:600; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--border); background:#f8fafc; color:#334155;
}
.tag.source[data-source="arXiv"]{background:#f1f5f9}
.tag.source[data-source="SemanticScholar"]{background:#eef2ff}
.tag.source[data-source="Crossref"]{background:#ecfeff}
.paper-doi{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.72rem; color:#475569; word-break:break-all; margin-top:.4rem}

/* Modal */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000}
.modal-content{
  background:#fff; border-radius:16px; width:min(820px, calc(100% - 2rem));
  margin: 8vh auto; padding: clamp(1rem, 3vw, 2rem); position:relative; box-shadow:var(--shadow-md);
}
.close-button{
  position:absolute; top:.6rem; right:.8rem; font-size:1.6rem; background:none; border:none; color:#475569; cursor:pointer
}
.modal-content h2{font-size:1.4rem; color:var(--accent); margin-top:.2rem}
.modal-content p{font-size:1rem; color:#374151}
#modal-doi{background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:.6rem; text-align:center}
#modal-doi a{color:var(--accent); font-weight:600; text-decoration:none}
#modal-link{display:inline-block; margin-top:.8rem; background:var(--accent); color:#fff; text-decoration:none}
#modal-link:hover{background:var(--accent-2)}

/* Persistence */
.save-status{margin-left:.6rem; font-style:italic; color:#475569; background:#f1f5f9; padding:.25rem .6rem; border-radius:999px}

/* Footer */
footer{margin-top: var(--space-6); background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; text-align:center; padding: 2rem 1rem}
footer a{color:#bfdbfe; text-decoration:none; border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:#bfdbfe}

/* Skeleton loader */
.skel{
  border-radius:var(--radius); border:1px solid var(--border); background:#fff; padding: var(--space-4); position:relative; overflow:hidden
}
.skel .bar{height:12px; background:#e5e7eb; border-radius:6px; margin:.5rem 0}
.skel .bar.title{height:18px; width:75%}
.skel .bar.meta{width:55%}
.skel .bar.line{width:90%}
.skel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{to{transform: translateX(100%)}}

/* A11y focus */
:focus-visible{outline: 3px solid #93c5fd; outline-offset:3px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}