/* ========================================
   KANZ — Views & Navigation
   Hub, Facet Detail, Tasbih, Vault
   ======================================== */

/* ---- Views ---- */
.view {
  display: none;
}

.view--active {
  display: block;
}

/* ---- Bottom Navigation ---- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(28, 25, 23, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__inner {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  font-family: var(--font-body);
}

.bottom-nav__item:hover {
  color: var(--text-light);
}

.bottom-nav__item--active {
  color: var(--gold-bright, var(--gold));
}

.bottom-nav__icon {
  font-size: 1.2rem;
}

.bottom-nav__label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

/* Padding at bottom for fixed nav */
.main-content {
  padding-bottom: calc(var(--space-2xl) + 70px) !important;
}

/* ---- Home Sections ---- */
.home-section {
  margin-bottom: var(--space-xl);
}

.home-section__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-lighter);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

/* ---- Quick Access Row (Morning/Evening/After Salah) ---- */
.quick-access-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

.quick-access-row--two {
  grid-template-columns: 1fr 1fr;
}

.quick-access-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius);
  border: 2px solid;
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: var(--font-body);
  background: none;
}

.quick-access-btn:hover {
  transform: translateY(-1px);
}

.quick-access-btn--sunstone {
  border-color: var(--sunstone-border);
  background: var(--sunstone-bg);
}
.quick-access-btn--sunstone:hover {
  box-shadow: 0 0 20px rgba(107, 58, 10, 0.4);
}

.quick-access-btn--iolite {
  border-color: var(--iolite-border);
  background: var(--iolite-bg);
}
.quick-access-btn--iolite:hover {
  box-shadow: 0 0 20px rgba(42, 26, 74, 0.4);
}

.quick-access-btn--malachite {
  border-color: var(--malachite-border);
  background: var(--malachite-bg);
}
.quick-access-btn--malachite:hover {
  box-shadow: 0 0 20px rgba(10, 74, 42, 0.4);
}

.quick-access-btn__icon {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.85);
}

.quick-access-btn__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.85);
}

.quick-access-btn__count {
  font-size: var(--text-xxs);
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Facet Card Count ---- */
.facet-card__count {
  font-size: var(--text-xxs);
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-xs);
}

/* ---- Back Button ---- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-lighter);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  font-family: var(--font-body);
}

.back-btn:hover {
  color: var(--text-light);
}

/* ---- Facet Header (detail view) ---- */
.facet-header {
  padding: var(--space-lg);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
  border: 2px solid;
}

.facet-header--ruby    { background: var(--ruby-bg);     border-color: var(--ruby-border); }
.facet-header--amber   { background: var(--amber-bg);    border-color: var(--amber-border); }
.facet-header--sapphire { background: var(--sapphire-bg); border-color: var(--sapphire-border); }
.facet-header--emerald { background: var(--emerald-bg);  border-color: var(--emerald-border); }
.facet-header--amethyst { background: var(--amethyst-bg); border-color: var(--amethyst-border); }
.facet-header--gold    { background: var(--gold-bg);     border-color: var(--gold-border, var(--gold)); }
.facet-header--olive   { background: var(--olive-bg);    border-color: var(--olive-border); }
.facet-header--pearl      { background: var(--pearl-bg);      border-color: var(--pearl-border); }
.facet-header--topaz      { background: var(--topaz-bg);      border-color: var(--topaz-border); }
.facet-header--tanzanite  { background: var(--tanzanite-bg);  border-color: var(--tanzanite-border); }
.facet-header--tourmaline { background: var(--tourmaline-bg); border-color: var(--tourmaline-border); }
.facet-header--citrine    { background: var(--citrine-bg);    border-color: var(--citrine-border); }
.facet-header--garnet     { background: var(--garnet-bg);     border-color: var(--garnet-border); }
.facet-header--turquoise  { background: var(--turquoise-bg);  border-color: var(--turquoise-border); }
.facet-header--tiger-eye  { background: var(--tiger-eye-bg);  border-color: var(--tiger-eye-border); }
.facet-header--carnelian  { background: var(--carnelian-bg);  border-color: var(--carnelian-border); }
.facet-header--lapis      { background: var(--lapis-bg);      border-color: var(--lapis-border); }
.facet-header--jade       { background: var(--jade-bg);       border-color: var(--jade-border); }

.facet-header__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.facet-header__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.facet-header__count {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  display: block;
  margin-top: var(--space-sm);
}

/* ---- Vault Controls ---- */
.vault-controls {
  margin-bottom: var(--space-lg);
}

.vault-search {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-section);
  font-size: 16px; /* Prevents iOS auto-zoom on focus */
  color: var(--text);
  font-family: var(--font-body);
  margin-bottom: var(--space-sm);
  transition: border-color var(--transition-fast);
}

.vault-search:focus {
  outline: none;
  border-color: var(--gold);
}

.vault-search::placeholder {
  color: var(--text-lighter);
}


.vault-scope-note {
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.vault-facet-chips {
  margin-bottom: var(--space-sm);
}

.vault-count {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  margin-bottom: var(--space-md);
}

.vault-empty {
  text-align: center;
  color: var(--text-lighter);
  font-style: italic;
  padding: var(--space-xl) 0;
}

/* When results narrow to a handful, the vault presents rather than lists */
.vault-gem-list--curated {
  gap: 6px;
  background: transparent;
  border-radius: 0;
}

.vault-gem-list--curated .gem-list-item {
  border-radius: var(--radius);
  padding: var(--space-lg);
}

/* ================================================================
   COMPACT GEM LIST ITEMS
   ================================================================ */
.gem-list-compact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.gem-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-section);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  /* Staggered fade-in — gems catching light one by one */
  animation: gemReveal 300ms ease-out both;
}

@keyframes gemReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gem-list-item:hover {
  background: var(--bg-aside);
}

.gem-list-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.gem-list-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.gem-list-item:only-child {
  border-radius: var(--radius);
}

/* Source tint on left border */
.gem-list-item--quran {
  border-left: 3px solid var(--gold);
}

.gem-list-item--hadith {
  border-left: 3px solid var(--emerald);
}

.gem-list-item__left {
  flex: 1;
  min-width: 0;
}

.gem-list-item__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  line-height: 1.8;
  direction: rtl;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gem-list-item--quran .gem-list-item__arabic {
  color: var(--gold);
}

.gem-list-item--hadith .gem-list-item__arabic {
  color: var(--emerald);
}

/* Situation line — the display case tag, two lines max */
.gem-list-item__situation {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  line-height: 1.4;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gem-list-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.gem-list-item__source {
  font-size: 0.55rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
}

.gem-list-item--quran .gem-list-item__source {
  color: var(--gold);
  border-color: var(--gold);
}

.gem-list-item--hadith .gem-list-item__source {
  color: var(--emerald);
  border-color: var(--emerald);
}

.gem-list-item__ref {
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  white-space: nowrap;
}

.gem-list-item__count {
  font-size: var(--text-xxs);
  color: var(--amber);
  font-weight: var(--weight-medium);
}


/* ================================================================
   CENTERSTAGE — Full-screen single gem view
   ================================================================ */
/* ================================================================
   CENTERSTAGE — Ring Box Experience
   The moment you lift a gem from the velvet case
   ================================================================ */
.centerstage {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 5, 4, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  padding-top: 60px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 300ms ease;
}

.centerstage--visible {
  opacity: 1;
}

body.centerstage-open {
  overflow: hidden;
}

.centerstage__inner {
  max-width: 560px;
  width: 100%;
  position: relative;
}

/* Close button */
.centerstage__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
}

.centerstage__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.centerstage__randomize {
  position: absolute;
  top: -44px;
  left: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
}

.centerstage__randomize:hover {
  background: rgba(74, 10, 58, 0.3);
  border-color: var(--spinel-border);
  color: var(--chip-spinel);
}

/* Ring box LED glow — light source BEHIND the card */
.centerstage__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 70%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: glowIn 600ms ease-out 100ms forwards;
  pointer-events: none;
  z-index: 0;
}

.centerstage__glow--quran {
  background: radial-gradient(ellipse, rgba(128, 91, 17, 0.4) 0%, transparent 70%);
}

.centerstage__glow--hadith {
  background: radial-gradient(ellipse, rgba(11, 69, 63, 0.4) 0%, transparent 70%);
}

.centerstage__glow--spinel {
  background: radial-gradient(ellipse, rgba(74, 10, 58, 0.4) 0%, transparent 70%);
}

@keyframes glowIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Prev/Next navigation */
.centerstage__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 2;
}

.centerstage__nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.centerstage__nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.centerstage__nav-btn--disabled {
  opacity: 0.2;
  cursor: default;
}

.centerstage__nav-count {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}

/* Card — lifted toward you */
.centerstage__card {
  position: relative;
  z-index: 1;
  animation: centerstageIn 350ms cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes centerstageIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1.01);
  }
}



/* ================================================================
   JEWEL CHIP FILTERS — Concierge narrowing the tray
   ================================================================ */

.jewel-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) 0;
}

.jewel-chip {
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1.5px solid;
  background: transparent;
}

/* Chip colors by facet jewel */
.jewel-chip--ruby {
  color: var(--chip-ruby);
  border-color: var(--ruby-border, var(--ruby));
}
.jewel-chip--ruby.jewel-chip--active,
.jewel-chip--ruby:hover {
  background: var(--ruby);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--emerald {
  color: var(--chip-emerald);
  border-color: var(--emerald-border, var(--emerald));
}
.jewel-chip--emerald.jewel-chip--active,
.jewel-chip--emerald:hover {
  background: var(--emerald);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--sapphire {
  color: var(--chip-sapphire);
  border-color: var(--sapphire-border, var(--sapphire));
}
.jewel-chip--sapphire.jewel-chip--active,
.jewel-chip--sapphire:hover {
  background: var(--sapphire);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--olive {
  color: var(--chip-olive);
  border-color: var(--olive-border, var(--olive));
}
.jewel-chip--olive.jewel-chip--active,
.jewel-chip--olive:hover {
  background: var(--olive);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--gold {
  color: var(--chip-gold);
  border-color: var(--gold-border, var(--gold));
}
.jewel-chip--gold.jewel-chip--active,
.jewel-chip--gold:hover {
  background: var(--gold);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--amethyst {
  color: var(--chip-amethyst);
  border-color: var(--amethyst-border, var(--amethyst));
}
.jewel-chip--amethyst.jewel-chip--active,
.jewel-chip--amethyst:hover {
  background: var(--amethyst);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--pearl {
  color: var(--chip-pearl);
  border-color: var(--pearl-border, var(--pearl));
}
.jewel-chip--pearl.jewel-chip--active,
.jewel-chip--pearl:hover {
  background: var(--pearl);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--topaz {
  color: var(--chip-topaz);
  border-color: var(--topaz-border, var(--topaz));
}
.jewel-chip--topaz.jewel-chip--active,
.jewel-chip--topaz:hover {
  background: var(--topaz);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--tanzanite {
  color: var(--chip-tanzanite);
  border-color: var(--tanzanite-border, var(--tanzanite));
}
.jewel-chip--tanzanite.jewel-chip--active,
.jewel-chip--tanzanite:hover {
  background: var(--tanzanite);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--tourmaline {
  color: var(--chip-tourmaline);
  border-color: var(--tourmaline-border, var(--tourmaline));
}
.jewel-chip--tourmaline.jewel-chip--active,
.jewel-chip--tourmaline:hover {
  background: var(--tourmaline);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--citrine {
  color: var(--chip-citrine);
  border-color: var(--citrine-border, var(--citrine));
}
.jewel-chip--citrine.jewel-chip--active,
.jewel-chip--citrine:hover {
  background: var(--citrine);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--garnet {
  color: var(--chip-garnet);
  border-color: var(--garnet-border, var(--garnet));
}
.jewel-chip--garnet.jewel-chip--active,
.jewel-chip--garnet:hover {
  background: var(--garnet);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--carnelian {
  color: var(--chip-carnelian);
  border-color: var(--carnelian-border, var(--carnelian));
}
.jewel-chip--carnelian.jewel-chip--active,
.jewel-chip--carnelian:hover {
  background: var(--carnelian);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--lapis {
  color: var(--chip-lapis);
  border-color: var(--lapis-border, var(--lapis));
}
.jewel-chip--lapis.jewel-chip--active,
.jewel-chip--lapis:hover {
  background: var(--lapis);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--jade {
  color: var(--chip-jade);
  border-color: var(--jade-border, var(--jade));
}
.jewel-chip--jade.jewel-chip--active,
.jewel-chip--jade:hover {
  background: var(--jade);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--turquoise {
  color: var(--chip-turquoise);
  border-color: var(--turquoise-border, var(--turquoise));
}
.jewel-chip--turquoise.jewel-chip--active,
.jewel-chip--turquoise:hover {
  background: var(--turquoise);
  color: rgba(255, 255, 255, 0.9);
}

.jewel-chip--tiger-eye {
  color: var(--chip-tiger-eye);
  border-color: var(--tiger-eye-border, var(--tiger-eye));
}
.jewel-chip--tiger-eye.jewel-chip--active,
.jewel-chip--tiger-eye:hover {
  background: var(--tiger-eye);
  color: rgba(255, 255, 255, 0.9);
}


/* ================================================================
   HOME SECTION LABEL ROW (for Daily Gem + Randomize)
   ================================================================ */
.home-section__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

.home-section__label--inline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-lighter);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.randomize-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-lighter);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.randomize-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.randomize-btn:active {
  transform: rotate(180deg);
}


/* ================================================================
   "I JUST NEED TO REMEMBER HIM" BUTTON
   ================================================================ */
/* ================================================================
   PREFERENCES DRAWER — Concierge adjusting the lamp
   ================================================================ */
.prefs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}

.prefs-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.prefs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 85vw);
  background: var(--bg-section);
  z-index: 251;
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
  border-left: 1px solid var(--border);
}

.prefs-overlay.open .prefs-drawer {
  transform: translateX(0);
}

.prefs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.prefs-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.prefs-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-lighter);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.prefs-close:hover {
  border-color: var(--text-light);
  color: var(--text);
}

.prefs-section {
  margin-bottom: var(--space-lg);
}

.prefs-section__title {
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-lighter);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}

.prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
}

.prefs-label {
  font-size: var(--text-sm);
  color: var(--text-light);
}

.prefs-slider {
  width: 120px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
}

.prefs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

.prefs-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
}

.prefs-toggle.active {
  background: var(--emerald);
}

.prefs-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition-fast);
}

.prefs-toggle.active::after {
  transform: translateX(18px);
}

/* About section at bottom of prefs */
.prefs-about {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  text-align: center;
}

.prefs-about__hadith {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.prefs-about__source {
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  margin-bottom: var(--space-md);
}

.prefs-about__tagline {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--gold);
  letter-spacing: 0.04em;
}

.prefs-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}


/* ================================================================
   PROPHET SUB-INDEX
   ================================================================ */
.prophet-group {
  margin-bottom: var(--space-lg);
}

.prophet-group__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-xs);
}

.prophet-group__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.prophet-group__honorific {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  font-style: italic;
}

.prophet-group__count {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  margin-left: auto;
}

/* ================================================================
   PAIRS VIEW — Two gems side by side
   ================================================================ */
.pair-card {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  animation: gemReveal 300ms ease-out both;
}

.pair-card__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  color: var(--text-lighter);
  text-align: center;
  padding: var(--space-sm) var(--space-md) 0;
  letter-spacing: 0.03em;
}

.pair-card__halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pair-card__half {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: center;
  transition: background var(--transition-fast);
}

.pair-card__half:hover {
  background: var(--bg-aside);
}

.pair-card__half:first-child {
  border-right: 1px solid var(--border);
}

.pair-card__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  direction: rtl;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: var(--space-xs);
}

.pair-card__situation {
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  font-style: italic;
  line-height: 1.4;
}

.pair-card__divider {
  display: none;
}

.prophet-group__divider {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.prophet-group__divider span {
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-lighter);
}


/* ================================================================
   HOME SCREEN — Velvet Treatment
   ================================================================ */

/* Daily Gem — recessed velvet area */
.home-section .gem-card {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Facets grid — compartment dividers */
.facets-grid {
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  gap: 1px !important;
}

.facets-grid .facet-card {
  border-radius: 0;
  border: none;
}

/* Restore rounded corners on edge cards */
/* Parent handles rounding — no per-card nth-child hacks needed */


/* ================================================================
   FLOATING DHIKR — "I Just Need to Remember Him"
   ================================================================ */
/* "or just remember Him" — inline next to Today's Gem */
.daily-gem-labels {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.remember-dot {
  color: var(--text-lighter);
  margin: 0 6px;
  font-size: var(--text-xs);
}

.remember-inline {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-lighter);
  cursor: pointer;
  transition: color var(--transition-fast);
  padding: 0;
  letter-spacing: 0.01em;
}

.remember-inline:hover {
  color: var(--text-light);
}


/* ================================================================
   ASMA UL-HUSNA — 99 Names Entry + Cards
   ================================================================ */
.asma-entry {
  display: block;
  width: 100%;
  padding: var(--space-lg);
  background: var(--gold-bg);
  border: 2px solid var(--gold-border, var(--gold));
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-base);
}

.asma-entry:hover {
  box-shadow: 0 0 30px rgba(128, 91, 17, 0.2);
}

.asma-entry__arabic {
  display: block;
  font-family: var(--font-arabic);
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
  direction: rtl;
  line-height: 1.8;
  margin-bottom: var(--space-xs);
}

.asma-entry__text {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* Asma header */
.asma-header {
  text-align: center;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-md);
}

.asma-header__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-3xl);
  color: var(--gold);
  direction: rtl;
  line-height: 2;
}

.asma-header__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin-top: var(--space-xs);
}

.asma-header__subtitle {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  font-style: italic;
}

.asma-search {
  margin-bottom: var(--space-lg);
}

/* Asma grid — dynamic columns, max 4 on desktop */
.asma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.asma-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-body);
  animation: gemReveal 300ms ease-out both;
}

.asma-card:hover {
  background: var(--bg-aside);
}

.asma-card__number {
  font-size: var(--text-xxs);
  color: var(--text-lighter);
  margin-bottom: var(--space-xs);
}

.asma-card__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-2xl);
  color: var(--gold);
  direction: rtl;
  line-height: 1.5;
}

.asma-card__translit {
  font-size: var(--text-xs);
  color: var(--text-light);
  margin-top: var(--space-xs);
}

.asma-card__meaning {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  font-style: italic;
  margin-top: 1px;
  text-align: center;
}

/* Asma detail */
.asma-detail__number {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-xs);
}

.asma-detail__related {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.asma-detail__related-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}


/* ================================================================
   "INVOKES" LINE — Names of Allah on gem cards
   ================================================================ */
.gem-card__invokes {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

.gem-card__name-link {
  color: var(--chip-gold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.gem-card__name-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Light mode invokes — see night-mode.css */


/* ================================================================
   SEASONAL ACCENTS — the treasury dresses for the season
   ================================================================ */
/* Friday — warm gold whisper */
body.season--friday .site-header {
  border-bottom-color: rgba(128, 91, 17, 0.2);
}

body.season--friday .site-title {
  color: #d4b060;
}

/* Ramadan — amber warmth */
body.season--ramadan .site-header {
  border-bottom-color: rgba(98, 32, 17, 0.2);
}

body.season--ramadan .home-section__label-row {
  border-bottom-color: rgba(98, 32, 17, 0.15);
}

/* Dhul Hijjah — gold radiance */
body.season--dhulhijjah .site-header {
  border-bottom-color: rgba(128, 91, 17, 0.3);
}


/* Light mode overrides consolidated in night-mode.css */

/* ================================================================
   SEQUENCE MODE — Full-screen one-at-a-time du'a experience
   ================================================================ */
.sequence-mode {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(6, 5, 4, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  padding-top: 40px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 300ms ease;
}

.sequence-mode--visible {
  opacity: 1;
}

body.sequence-mode-open {
  overflow: hidden;
}

.sequence-mode__inner {
  max-width: 560px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sequence-mode__close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
}

.sequence-mode__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Bead dots at the top */
.sequence-beads {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  max-width: 100%;
}

.sequence-bead {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Upcoming beads — blank, no color spoilers */
.sequence-bead--quran,
.sequence-bead--hadith {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Completed beads — full color */
.sequence-bead--done.sequence-bead--quran {
  background: var(--gold, #805B11);
  border-color: var(--gold, #805B11);
}

.sequence-bead--done.sequence-bead--hadith {
  background: var(--emerald, #0B453F);
  border-color: var(--emerald, #0B453F);
}

/* Current bead — glows in its source color */
.sequence-bead--current.sequence-bead--quran {
  width: 12px;
  height: 12px;
  background: var(--gold, #805B11);
  border-color: var(--gold, #805B11);
  box-shadow: 0 0 10px rgba(128, 91, 17, 0.6);
}

.sequence-bead--current.sequence-bead--hadith {
  width: 12px;
  height: 12px;
  background: var(--emerald, #0B453F);
  border-color: var(--emerald, #0B453F);
  box-shadow: 0 0 10px rgba(11, 69, 63, 0.6);
}

/* Card wrapper */
.sequence-mode__card-wrap {
  width: 100%;
  animation: centerstageIn 350ms cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

/* Next button */
.sequence-next-btn {
  display: block;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) var(--space-xl);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sequence-next-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Completion screen */
.sequence-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  gap: var(--space-md);
}

.sequence-complete__icon {
  font-size: 3rem;
  color: var(--gold, #d4b060);
  animation: glowIn 600ms ease-out forwards;
}

.sequence-complete__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
}

.sequence-complete__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.sequence-complete__close-btn {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-2xl);
  border-radius: 50px;
  background: var(--emerald, #0B453F);
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sequence-complete__close-btn:hover {
  opacity: 0.85;
}

/* Facet header footer row — count + begin button */
.facet-header__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}

/* "Begin" button integrated into facet header */
.sequence-header-btn {
  padding: 4px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sequence-header-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.sequence-sub-btn {
  display: block;
  margin: var(--space-sm) 0 var(--space-md);
}

/* ================================================================
   PREFERENCES TIME INPUT
   ================================================================ */
.prefs-time {
  background: var(--bg-aside);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 16px; /* Prevents iOS zoom */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.prefs-time:focus {
  outline: none;
  border-color: var(--gold);
}