/* Achievements page + popup. Loaded only on achievements/* pages (see extra_css block).
   Uses the site's existing theme tokens (var(--...) from site.css / dark-mode.css) so it
   re-skins automatically in dark mode — nothing achievement-specific to redefine there. */

.ach-header-stats{ display:flex; flex-wrap:wrap; gap:1.25rem; margin:0.25rem 0 1rem; }
.ach-stat{ color:var(--ink); }
.ach-stat strong{ color:var(--accent-dark); }

/* "Show past event achievements" — a plain checkbox in a bar of labelled controls, so
   it needs its own label layout: the global `label{display:block}` would stack the box
   above its text, and `.filters`' flex-end alignment then wants the pair sitting on the
   control line rather than the label line. */
.ach-past-toggle{ align-self:flex-end; padding-bottom:0.55rem; }
.ach-check{ display:inline-flex; align-items:center; gap:0.4rem; margin-bottom:0;
  font-weight:700; white-space:nowrap; cursor:pointer; }
.ach-check input{ margin:0; }

.ach-chip-row{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; padding:0; margin:0.75rem 0 1rem; }
.ach-chip{
  display:inline-block; padding:0.3rem 0.75rem; border-radius:999px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink);
  font-size:0.85rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.ach-chip:hover{ border-color:var(--accent); }
.ach-chip--active{ background:var(--accent); border-color:var(--accent-dark); color:#fff; }

.ach-grid{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }

.ach-card{ border:2.5px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; }
/* An <a> now, not a <button>, so the card still opens a real page without JS —
   text-decoration:none keeps it looking the way it did as a button. */
.ach-card-trigger{
  display:flex; gap:0.75rem; align-items:flex-start; width:100%; padding:0.75rem;
  background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit;
  text-decoration:none;
}
.ach-card-trigger--inert{ cursor:default; }
.ach-card:has(.ach-card-trigger:not(.ach-card-trigger--inert)):hover{ border-color:var(--rose-deep); box-shadow:0 4px 12px rgba(111,79,51,.15); }

.ach-icon{ flex:0 0 auto; width:56px; height:56px; border-radius:12px; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.ach-icon img{ width:100%; height:100%; object-fit:cover; }
.ach-icon--locked{ filter:grayscale(1); opacity:0.6; }
.ach-icon--secret{ filter:grayscale(1) blur(3px); opacity:0.7; }

.ach-info{ min-width:0; flex:1 1 auto; }
.ach-name{ display:block; font-weight:800; color:var(--ink); }
.ach-flavor{ margin:0.15rem 0; color:var(--ink-soft); font-size:0.85rem; }
.ach-points{ margin:0.15rem 0; color:var(--ink-soft); font-size:0.78rem; }

.ach-badge-closed, .ach-badge-scheduled{
  display:inline-block; font-size:0.7rem; font-weight:800; padding:0.1rem 0.5rem; border-radius:999px;
  background:var(--ink-faint); color:#fff; margin:0.2rem 0;
}

.ach-unlocked-date{ margin:0.35rem 0 0; font-size:0.78rem; font-weight:700; color:var(--accent-dark); }

.ach-bar-track{ margin-top:0.4rem; height:8px; border-radius:999px; background:var(--bg); border:1px solid var(--line); overflow:hidden; }
.ach-bar-fill{ height:100%; background:var(--accent); border-radius:999px; }
.ach-progress-text{ margin:0.2rem 0 0; font-size:0.75rem; color:var(--ink-soft); }

/* Popup */
.ach-modal-box{ max-width:560px; }
.ach-modal-header{ display:flex; gap:1rem; align-items:flex-start; }
.ach-modal-icon{ flex:0 0 auto; width:64px; height:64px; border-radius:14px; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:2rem; }
.ach-modal-icon img{ width:100%; height:100%; object-fit:cover; }
.ach-modal-name{ margin:0 0 0.2rem; }
.ach-modal-desc{ margin:0.75rem 0; }
.ach-modal-unlocked{ font-weight:800; color:var(--accent-dark); }
.ach-modal-requirements h3, .ach-modal-rewards h3{ margin-bottom:0.4rem; }
.ach-req-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem; }
.ach-req-row{ display:flex; flex-direction:column; gap:0.25rem; }
.ach-req-label{ font-weight:700; font-size:0.9rem; }
.ach-req-numbers{ font-size:0.78rem; color:var(--ink-soft); }
.ach-req-row--met .ach-req-numbers{ color:var(--accent-dark); font-weight:700; }
.ach-modal-rewards{ margin-top:1rem; }
.ach-modal-title-grant{ margin-top:1rem; }

@media (max-width: 480px){
  .ach-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}