:root {
  --bg:#0b0b0c; --bg-2:#0f0f11; --bg-3:#101013; --card:#141417; --line:#222;
  --txt:#eee; --txt-2:#bbb; --muted:#aaa; --pill:#1f1f26; --link:#9ad;
  --tip-accent:#f2b84b; --tip-bg:rgba(242,184,75,.12); --tip-border:rgba(242,184,75,.35); --tip-text:#f6d99a;
}

* { box-sizing:border-box; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin:0; background:var(--bg); color:var(--txt);
}

header {
  position:sticky; top:0; background:var(--bg-2);
  padding:12px 16px; border-bottom:1px solid var(--line); z-index:10;
}

.wrap { max-width:1200px; margin:0 auto; padding:12px 16px 60px; }
h1,h2,h3 { margin:0; }

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}

.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; cursor:pointer; position:relative;
  /* Avoid rendering offscreen cards; provide intrinsic size for smooth scroll */
  content-visibility:auto; contain-intrinsic-size: 200px 200px;
}

.thumb {
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  content-visibility:auto; contain-intrinsic-size:160px 160px;
}

.meta {
  font-size:12px; padding:8px; color:var(--txt-2);
  display:flex; justify-content:space-between; gap:8px;
}

.pill {
  background:var(--pill); border-radius:999px; padding:2px 8px;
  font-size:12px; color:var(--muted);
}

a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }

.diag {
  background:#15151a; border-top:1px solid var(--line);
  font-size:12px; padding:8px 16px; color:var(--muted); white-space:pre-wrap;
}

.hidden { display:none; }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }

.btn {
  appearance:none; border:1px solid var(--line);
  background:var(--bg-3); color:var(--txt);
  border-radius:8px; padding:6px 10px; cursor:pointer;
}
.btn:hover { filter:brightness(1.1); }

.crumbs { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); }
.crumbs b { color:var(--txt); }

.controls {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; position:relative;
}

.input {
  padding:6px 8px; background:#1a1a1f;
  border:1px solid var(--line); color:#ddd; border-radius:6px;
}

.section-title {
  display:flex; align-items:center; gap:10px; margin:12px 0 12px;
}

/* ---- Alpha banner ---- */
.alpha {
  background:#121219; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:13px;
}
.alpha .wrap { display:flex; gap:10px; align-items:center; padding:10px 16px; }
.alpha b { color:#f2bfff; background:#341a4a; border:1px solid #4b2566; padding:2px 8px; border-radius:999px; font-weight:600; }
.alpha a { color:var(--link); }
.alpha .x {
  margin-left:auto; appearance:none; border:1px solid var(--line);
  background:var(--bg-3); color:var(--txt); border-radius:6px; padding:4px 8px; cursor:pointer;
}
.alpha .x:hover { filter:brightness(1.1); }

/* ---- Filter tip (absolute; centered to #filter) ---- */
.tip {
  position:absolute;
  left:var(--tip-left, 0px);
  transform:translateX(-50%);
  top:calc(100% + 8px);

  width:auto;                       /* shrink to content */
  max-width:min(90vw, var(--tip-max, 350px));

  font-size:11px; padding:4px 8px; line-height:1.3;
  color:var(--tip-text);
  border:1px solid var(--tip-border);
  background:var(--tip-bg);
  border-radius:8px;
  display:flex; align-items:center; gap:8px;
  pointer-events:auto; z-index:2;
}

.tip--above { top:auto; bottom:calc(100% + 8px); }

@media (max-width:520px){
  .tip--above { bottom:auto; top:calc(100% + 8px); }
}

/* reserve space while visible (if supported) */
@supports selector(:has(*)){
  .controls:has(.tip:not(.hidden)){ margin-bottom:20px; }
}

.tip .x {
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  font-size:14px; line-height:1; color:var(--tip-text); opacity:.85;
}
.tip .x:hover { opacity:1; }
.tip.hidden { display:none !important; }

/* ---- Ko-fi footer ---- */
.site-footer {
  border-top:1px solid var(--line);
  background:var(--bg-2);
  color:var(--txt-2);
  text-align:center;
  padding:24px 16px 40px;
}
.kofi-btn {
  display:inline-block; padding:10px 18px; border-radius:12px;
  background:var(--pill); color:var(--link); font-weight:500;
  text-decoration:none; border:1px solid var(--line); transition:all .2s;
}
.kofi-btn:hover { background:var(--line); color:var(--txt); text-decoration:none; }
.kofi-note { display:block; margin-top:8px; font-size:12px; color:var(--muted); }

/* ---- Filters UI (compact popover) ---- */
/* Disabled helpers */
.is-disabled { opacity: .5; pointer-events: none; }
#yearMenuBody.disabled { opacity: .6; pointer-events: none; }

/* Disable entire Filters button when filters not available */
#filtersToggle.is-disabled {
  opacity: .5;
  pointer-events: none;
}

/* (optional) native disabled inputs look consistent */
input[disabled],
select[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.filters { position: relative; display:flex; align-items:center; }
.filters__toggle { display:flex; align-items:center; gap:8px; }
.chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  background:#2a2a34; color:#cfd7ff; font-size:11px; border:1px solid var(--line);
}
.filters__panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:15;
  width:min(92vw, 460px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); padding:10px;
}
.filters__panel.hidden { display:none; }
.filters__row {
  display:grid; grid-template-columns: 80px 1fr; align-items:center; gap:10px;
  padding:8px 6px;
}
.filters__label { color:var(--muted); font-size:12px; text-align:right; }
.filters__dash { color:var(--muted); padding:0 4px; }
.filters__footer {
  display:flex; justify-content:flex-end; gap:8px; padding:8px 6px 2px;
}
.btn--ghost { background:transparent; }
.btn--sm { padding:4px 8px; font-size:12px; }

/* Year multi-select dropdown */
.multi { position:relative; display:inline-block; }
.multi__button { min-width:180px; text-align:left; }
.multi__menu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  width:260px; max-height:min(50vh, 420px); overflow:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.multi__menu.hidden { display:none; }
.multi__menu__body {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; padding:8px;
}
.multi__menu__body label {
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-radius:8px; background:var(--bg-3); border:1px solid var(--line);
  cursor:pointer; user-select:none;
}
.multi__menu__footer {
  display:flex; justify-content:flex-end; gap:8px; padding:8px;
  border-top:1px solid var(--line);
}

/* Inputs tweaks */
.input--num { width:92px; }

/* Quick links: plain anchors like breadcrumbs */
.quicklinks a { color: var(--link); text-decoration: none; font-size:14px; padding:0; }
.quicklinks a:hover { text-decoration: underline; }
.quicklinks span { color: var(--muted); }

.quicklinks .sep { color: var(--muted); }