/* ═══════════════════════════════════════════════════════════════════════
   mushaf-designs.css · v227k8 · 2026-05-23
   ─────────────────────────────────────────────────────────────────────
   Four runtime-switchable design ACCENTS for the mushaf surface.
   v227k8 · per user "the design + the site theme are clashing mismatch"
   the previous version (v227k4) tried to repaint the entire chrome
   (sidebar bg, topbar bg, etc.) — which clashed with the global dark
   site theme. Now each design only touches the PAGE-AREA accents (page
   halo glow, page background tint) so the chrome stays cohesive with
   whatever site theme is active.
   - 'signature' (default): subtle gold halo on the page
   - 'apple':              warm cream page tint
   - 'nebula':             cosmic gold + peach glow on the page
   - 'glass':              soft white halo · transparent feel
   ═════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   Common: design-picker thumbnails (lives in the sidebar's Design card)
   ────────────────────────────────────────────────────────────────────── */
.sb-design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
}
.sb-design-swatch {
  position: relative;
  border-radius: 8px;
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  transition: transform 160ms ease, border-color 160ms ease;
}
.sb-design-swatch:hover { transform: translateY(-2px); }
.sb-design-swatch.is-on {
  border-color: var(--mz-gilt);
  box-shadow: 0 0 0 2px rgba(180,139,43,.22);
}
.sb-design-swatch .sw-name {
  position: absolute; bottom: 4px; left: 6px;
  font: 700 9px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.sb-design-swatch .sw-check {
  position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--mz-gilt); color: #fff;
  display: none;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.sb-design-swatch.is-on .sw-check { display: flex; }
/* Thumbnail visuals — each swatch shows a page-halo preview */
.sb-design-swatch[data-design="signature"] {
  background:
    radial-gradient(ellipse at center, rgba(255,208,112,.30) 0%, transparent 50%),
    #15171a;
}
.sb-design-swatch[data-design="apple"] {
  background:
    radial-gradient(ellipse at center, #fffef9 0%, #f8f4ec 60%, #ece4d4 100%);
}
.sb-design-swatch[data-design="apple"] .sw-name { color: #3a342a; text-shadow: none; }
.sb-design-swatch[data-design="nebula"] {
  background:
    radial-gradient(ellipse at top right, #ffd070 0%, transparent 40%),
    radial-gradient(ellipse at bottom left, #e07a30 0%, transparent 40%),
    #0a1428;
}
.sb-design-swatch[data-design="glass"] {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.30) 0%, transparent 50%),
    linear-gradient(135deg, #1f4a9c, #0a1428);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE-AREA accents · cohesive with the global dark theme.
   Only touches .mushaf-page (the paper card itself) — never the chrome,
   topbar, or sidebar. That way switching designs feels like swapping a
   page treatment, not fighting the site theme.
   ══════════════════════════════════════════════════════════════════════ */

/* DESIGN 'apple' · warm cream tint on the page + minimal gold rim. */
html[data-mushaf-design="apple"] .mushaf-page {
  background: #fffef9 !important;
  border-color: #d0c0a0 !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(180,139,43,.12) !important;
}

/* DESIGN 'nebula' · gold + peach glow around the page · the signature
   nebula treatment lifted from the counter ring. */
html[data-mushaf-design="nebula"] .mushaf-page {
  box-shadow:
    0 0 60px -16px #e07a30,
    0 0 0 1px #ffd070,
    0 8px 32px rgba(0,0,0,.50) !important;
}
html[data-mushaf-design="nebula"] .mushaf-page-host {
  background:
    radial-gradient(ellipse at top, rgba(31,74,156,.18) 0%, transparent 50%) !important;
}

/* DESIGN 'glass' · soft white halo + lifted feel. */
html[data-mushaf-design="glass"] .mushaf-page {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 12px 48px rgba(0,0,0,.45),
    0 0 32px -8px rgba(255,255,255,.10) !important;
}

/* DESIGN 'signature' (default) · subtle gold halo. */
html[data-mushaf-design="signature"] .mushaf-page {
  box-shadow:
    0 8px 32px rgba(0,0,0,.50),
    0 0 24px -8px #ffd070 !important;
}