/* ══════════════════════════════════════════════════════════════════
   gallery-base.css — shared foundation for all forge gallery templates
   v0.2.0 — brand-aligned default (Roxabi hub palette)

   Default tokens below match the Roxabi brand book (bg #0d1117,
   accent #f0b429 amber, text #f0ede6 warm off-white, Inter).
   Project galleries (Lyra #e85d04, etc.) should OVERRIDE
   --accent / --accent-dim / --font in the consuming page's <style>.

   Brand SSoT: ~/.roxabi/forge/roxabi-site/brand/BRAND-BOOK.md §6
   Drift check: scripts/check-brand-drift.sh (lefthook pre-commit)
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --bg:#0d1117; --surface:#13191f; --surface2:#161b22; --card:#1e2133;
  --border:rgba(255,255,255,0.07); --border2:#30363d;
  --text:#f0ede6; --text-dim:#9ca3af; --text-xdim:#6b7280;
  /* CUSTOMISE: swap accent for your project brand (Lyra=#e85d04, etc.) */
  --accent:#f0b429;
  --accent-dim:rgba(240,180,41,0.12);
  --green:#34d399; --green-dim:rgba(52,211,153,0.12);
  --blue:#60a5fa;  --blue-dim:rgba(96,165,250,0.12);
  --purple:#a78bfa;--purple-dim:rgba(167,139,250,0.12);
  --orange:#fb923c;--orange-dim:rgba(251,146,60,0.12);
  --cyan:#22d3ee;  --cyan-dim:rgba(34,211,238,0.12);
  --amber:#f0b429; --amber-dim:rgba(240,180,41,0.12);
  --red:#f87171;   --red-dim:rgba(248,113,113,0.12);
  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
[data-theme="light"] {
  --bg:#f5f2ec; --surface:#ede9e0; --surface2:#e5e0d5; --card:#faf8f4;
  --border:rgba(0,0,0,0.08); --border2:rgba(0,0,0,0.15);
  --text:#1a1d2b; --text-dim:#5a6070; --text-xdim:#9aa0ae;
  --green:#047857; --green-dim:rgba(4,120,87,0.1);
  --blue:#1d4ed8;  --blue-dim:rgba(29,78,216,0.1);
  --purple:#7c3aed;--purple-dim:rgba(124,58,237,0.1);
  --orange:#ea580c;--orange-dim:rgba(234,88,12,0.1);
  --cyan:#0891b2;  --cyan-dim:rgba(8,145,178,0.1);
  --amber:#b8760a; --amber-dim:rgba(184,118,10,0.1);
  --red:#dc2626;   --red-dim:rgba(220,38,38,0.1);
}

/* ── Base resets ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;transition:background .2s,color .2s}

/* ── Header ── */
.header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:14px}
.header-left h1{font-size:1.3rem;font-weight:700;letter-spacing:-0.01em}
.header-left h1 span{color:var(--accent)}
.header-left .sub{font-size:.72rem;color:var(--text-dim);margin-top:3px;line-height:1.4}
.theme-btn{background:var(--surface);border:1px solid var(--border2);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:5px 10px;flex-shrink:0}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Toolbar ── */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.toolbar:last-of-type{margin-bottom:12px}
.ctrl{display:flex;align-items:center;gap:4px}
.ctrl-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-xdim);font-family:var(--mono)}

/* ── Segmented controls ── */
.segs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.seg{background:none;border:none;border-right:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font);font-size:.65rem;font-weight:500;padding:4px 8px;transition:background .1s,color .1s;white-space:nowrap}
.seg:last-child{border-right:none}
.seg:hover{background:var(--surface2);color:var(--text)}
.seg.on{background:var(--accent-dim);color:var(--accent);font-weight:600}

/* ── Checkbox toggle buttons (OFF = inactive = show all) ── */
.check-group{display:flex;gap:3px;flex-wrap:wrap}
.check-btn{background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text-dim);cursor:pointer;font-size:.6rem;padding:3px 6px;font-family:var(--mono);transition:all .1s}
.check-btn.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.check-btn:hover{border-color:var(--accent)}

/* ── Size +/− ── */
.size-btn{background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text-dim);cursor:pointer;font-size:.85rem;font-weight:700;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.size-btn:hover{border-color:var(--accent);color:var(--accent)}
.size-label{font-size:.6rem;color:var(--text-xdim);font-family:var(--mono);min-width:24px;text-align:center}

/* ── Inputs ── */
.filter-input{background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:.65rem;padding:4px 8px;outline:none}
.filter-input:focus{border-color:var(--accent)}
.search-input{width:140px}

/* ── Stats ── */
.stats{font-family:var(--mono);font-size:.6rem;color:var(--text-xdim);margin-left:auto}

/* ── Group headers ── */
.group-hdr{display:flex;align-items:center;gap:8px;margin:16px 0 8px;padding:4px 0;border-top:1px solid var(--border)}
.group-tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:4px;font-family:var(--mono);background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent)}
.group-cnt{font-family:var(--mono);font-size:.58rem;color:var(--text-xdim)}

/* ── Empty state ── */
.empty{text-align:center;padding:64px 24px;color:var(--text-xdim);font-size:.84rem}

/* ── Pixel-art rendering utility ──
   Apply to <img> in sprite galleries (32×32, 64×64, etc.) to disable
   browser smoothing and preserve crisp pixel edges at any scale.
   Declaration order matters: last supported value wins. `pixelated` goes
   last so modern browsers (Chromium/Firefox/Safari all support it natively
   as of 2021+) use nearest-neighbour scaling rather than `crisp-edges`
   (which is W3C-defined as edge-preserving, potentially with smoothing). */
.pixelated{image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}

/* ── Downloads dropdown ──
   Wire via initDownloads({dropdownId, toggleId, menuId, entries}). */
.dl-wrap{position:relative;display:inline-block}
.dl-toggle{background:var(--surface);border:1px solid var(--border2);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:.72rem;padding:5px 10px;font-family:var(--mono);display:flex;align-items:center;gap:4px}
.dl-toggle:hover{border-color:var(--accent);color:var(--accent)}
.dl-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:6px 0;min-width:240px;z-index:50;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.dl-menu.open{display:block}
.dl-item{display:block;width:100%;background:none;border:none;color:var(--text-dim);cursor:pointer;font-family:var(--mono);font-size:.6rem;padding:7px 14px;text-align:left;transition:all .1s}
.dl-item:hover{background:var(--accent-dim);color:var(--accent)}
.dl-item[data-loading="true"]{opacity:.5;cursor:wait;pointer-events:none}
.dl-item[data-loading="true"]::after{content:" ⏳"}
.dl-hint{display:block;font-size:.48rem;color:var(--text-xdim);margin-top:1px}
.dl-item:hover .dl-hint{color:var(--accent)}

/* ── Toast stack ──
   Populated by showToast(message, variant, duration). */
.toast-stack{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--border2);border-radius:6px;padding:10px 14px;font-family:var(--mono);font-size:.65rem;color:var(--text);max-width:340px;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:auto;animation:toast-in .2s ease-out}
.toast-info{border-color:var(--blue);color:var(--blue)}
.toast-error{border-color:var(--red);color:var(--red)}
.toast-leaving{opacity:0;transform:translateX(8px);transition:all .2s ease-in}
@keyframes toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* ── Responsive ── */
@media(max-width:860px){.ctrl-label{display:none}}
@media(max-width:600px){.toolbar{gap:4px}.seg{font-size:.58rem;padding:3px 5px}.search-input{width:100px}.dl-menu{min-width:200px}}