/* ==========================================================================
   archive.css — The Archive search page
   Page-specific styles only. Inherits from style.css.
   ========================================================================== */

/* ---- Search input ---- */
.archive-search-wrap{
  position:relative;
  max-width:680px;
  margin:24px auto 8px;
  padding:0 16px;
}
.archive-search{
  width:100%;
  padding:18px 56px 18px 22px;
  font-family:inherit;
  font-size:1.1rem;
  color:#f8f8f8;
  background:rgba(8,12,20,0.55);
  border:1px solid rgba(122,202,252,0.32);
  border-radius:14px;
  outline:none;
  letter-spacing:0.01em;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance:none;
  appearance:none;
}
.archive-search::placeholder{ color:rgba(255,255,255,0.42); }
.archive-search:focus{
  border-color:rgba(122,202,252,0.7);
  box-shadow:0 0 0 3px rgba(122,202,252,0.15), 0 0 24px rgba(122,202,252,0.18);
  background:rgba(10,16,26,0.72);
}
.archive-search-icon{
  position:absolute;
  right:34px; top:50%;
  transform:translateY(-50%);
  width:22px; height:22px;
  color:rgba(122,202,252,0.55);
  pointer-events:none;
}
.archive-clear{
  position:absolute;
  right:30px; top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center; justify-content:center;
}
.archive-clear:hover{ background:rgba(255,107,53,0.18); color:#fff; }
.archive-search-wrap.has-value .archive-clear{ display:flex; }
.archive-search-wrap.has-value .archive-search-icon{ display:none; }

/* ---- Stats strip ---- */
.archive-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:680px;
  margin:18px auto 8px;
  padding:0 16px;
}
.archive-stat{
  text-align:center;
  padding:14px 8px;
  background:rgba(8,12,20,0.45);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
}
.archive-stat-num{
  display:block;
  font-size:1.4rem;
  font-weight:600;
  color:#f8f8f8;
  letter-spacing:0.02em;
}
.archive-stat-label{
  display:block;
  font-size:0.62rem;
  font-weight:400;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-top:4px;
}

/* ---- Filter pills ---- */
.archive-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:900px;
  margin:24px auto 12px;
  padding:0 16px;
}
.archive-pill{
  padding:7px 14px;
  font-family:inherit;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
}
.archive-pill:hover{ color:#fff; border-color:rgba(122,202,252,0.45); background:rgba(122,202,252,0.08); }
.archive-pill.active{
  color:#0b0d12;
  background:#7acafc;
  border-color:#7acafc;
}
.archive-pill[data-type="page"].active        { background:#7acafc; border-color:#7acafc; }
.archive-pill[data-type="transmission"].active{ background:#ff6b35; border-color:#ff6b35; color:#1a0f08; }
.archive-pill[data-type="achievement"].active { background:#fcd57a; border-color:#fcd57a; }
.archive-pill[data-type="quote"].active       { background:#ad7afc; border-color:#ad7afc; color:#1a0d2c; }
.archive-pill[data-type="easter"].active      { background:#fc7ad5; border-color:#fc7ad5; color:#2a0d22; }
.archive-pill[data-type="lore"].active        { background:#7afc8a; border-color:#7afc8a; }

/* ---- Sort dropdown ---- */
.archive-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  max-width:1200px;
  margin:8px auto 16px;
  padding:0 24px;
}
.archive-result-count{
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.archive-sort{
  font-family:inherit;
  font-size:0.78rem;
  color:rgba(255,255,255,0.85);
  background:rgba(8,12,20,0.6);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  padding:7px 12px;
  cursor:pointer;
}

/* ---- Results grid ---- */
.archive-results{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 48px;
}
@media (min-width:1100px){
  .archive-results{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- Result card ---- */
.archive-card{
  position:relative;
  display:block;
  padding:18px 18px 16px;
  background:rgba(8,12,20,0.5);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  opacity:0;
  transform:translateY(8px);
  animation:archiveFadeUp .35s ease forwards;
}
@keyframes archiveFadeUp{
  to{ opacity:1; transform:none; }
}
.archive-card:hover{
  transform:translateY(-2px);
  border-color:rgba(122,202,252,0.45);
  background:rgba(10,16,26,0.66);
  box-shadow:0 6px 22px rgba(0,0,0,0.4), 0 0 0 1px rgba(122,202,252,0.12);
}
.archive-card:focus-visible{
  outline:none;
  border-color:#7acafc;
  box-shadow:0 0 0 3px rgba(122,202,252,0.28);
}

.archive-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.archive-badge{
  display:inline-block;
  padding:3px 9px;
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  border-radius:999px;
  color:#0b0d12;
}
.archive-badge[data-type="page"]        { background:#7acafc; }
.archive-badge[data-type="transmission"]{ background:#ff6b35; color:#1a0f08; }
.archive-badge[data-type="achievement"] { background:#fcd57a; }
.archive-badge[data-type="quote"]       { background:#ad7afc; color:#1a0d2c; }
.archive-badge[data-type="easter"]      { background:#fc7ad5; color:#2a0d22; }
.archive-badge[data-type="lore"]        { background:#7afc8a; }

.archive-card-meta{
  font-size:0.65rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.42);
}

.archive-card-title{
  margin:2px 0 6px;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.35;
  color:#f5f5f5;
  letter-spacing:0.005em;
}
.archive-card-snippet{
  margin:0;
  font-size:0.85rem;
  line-height:1.55;
  color:rgba(255,255,255,0.72);
}
.archive-card mark{
  background:rgba(252,213,122,0.28);
  color:#fff;
  padding:1px 3px;
  border-radius:3px;
  font-weight:500;
}

/* ---- Empty / suggestions ---- */
.archive-empty{
  max-width:680px;
  margin:32px auto 8px;
  padding:24px 16px;
  text-align:center;
  color:rgba(255,255,255,0.65);
}
.archive-empty-title{
  font-size:1rem;
  letter-spacing:0.05em;
  margin:0 0 12px;
  color:#fff;
}
.archive-empty-hint{
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  margin:18px 0 8px;
}
.archive-empty-tries{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:6px;
}
.archive-try{
  padding:6px 12px;
  font-size:0.78rem;
  color:rgba(255,255,255,0.85);
  background:rgba(122,202,252,0.08);
  border:1px solid rgba(122,202,252,0.22);
  border-radius:999px;
  cursor:pointer;
  font-family:inherit;
}
.archive-try:hover{ background:rgba(122,202,252,0.18); border-color:rgba(122,202,252,0.5); }

.archive-noresults{
  max-width:600px;
  margin:32px auto;
  padding:24px;
  text-align:center;
  color:rgba(255,255,255,0.6);
}

/* ---- Load more ---- */
.archive-loadmore-wrap{
  display:flex;
  justify-content:center;
  margin:24px auto 64px;
}
.archive-loadmore{
  padding:12px 32px;
  font-family:inherit;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#7acafc;
  background:rgba(122,202,252,0.06);
  border:1px solid rgba(122,202,252,0.32);
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
}
.archive-loadmore:hover{
  color:#0b0d12;
  background:#7acafc;
  border-color:#7acafc;
}

/* ---- Mobile ---- */
@media (max-width:560px){
  .archive-search{ font-size:1rem; padding:16px 50px 16px 18px; }
  .archive-stats{ grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px; }
  .archive-stat{ padding:10px 4px; }
  .archive-stat-num{ font-size:1.05rem; }
  .archive-stat-label{ font-size:0.55rem; letter-spacing:0.1em; }
  .archive-toolbar{ padding:0 16px; }
  .archive-results{ padding:0 16px 32px; }
  .archive-pill{ padding:6px 10px; font-size:0.65rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .archive-card{ animation:none; opacity:1; transform:none; }
  .archive-card:hover{ transform:none; }
}