/* Subtle glass: translucent surfaces that let the night sky and the page behind them show through.
   Switched on by the "glass" class (body on the real site). Without backdrop-filter support, nothing changes. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    --glass-line: rgba(236, 230, 214, 0.11);
    --glass-top: rgba(236, 230, 214, 0.07);
  }

  /* header: the page slides under a frosted bar.
     The blur sits on a pseudo-element so the phone tab bar (a fixed child of the header) is not trapped by it. */
  .glass .top { background: transparent; border-bottom-color: var(--glass-line); }
  .glass .top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 17, 28, 0.58); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }

  /* the verse that opens the home page */
  .glass .hero .verse { padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); background: rgba(236, 230, 214, 0.04); border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: inset 0 1px 0 var(--glass-top); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

  /* floating surfaces */
  .glass .player { background: rgba(24, 35, 58, 0.62); border-color: var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-top); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
  .glass .results { background: rgba(24, 35, 58, 0.78); border-color: var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
  .glass .search input { background: rgba(18, 27, 43, 0.6); border-color: var(--glass-line); }
  .glass.ap .dock { background: rgba(24, 35, 58, 0.72); border-top-color: var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
  .glass .rd .rbar { background: rgba(24, 35, 58, 0.68); border-color: var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

  @media (max-width: 600px) {
    .glass .top nav { background: rgba(18, 27, 43, 0.72); border-top-color: var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); }
  }
}

/* Buttons and the next-Ijtema card: a visible hairline border and a frosted, translucent face (home page and wherever .btn is used).
   The border and highlight work everywhere; the blur is added only where the browser supports it. */
.glass .btn {
  border: 1px solid color-mix(in srgb, var(--lamp) 70%, #fff 30%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lamp) 88%, #fff 12%), var(--lamp));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px -8px color-mix(in srgb, var(--lamp) 55%, transparent);
}
.glass .btn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lamp-deep) 90%, #fff 10%), var(--lamp-deep)); }
.glass .btn.wazaif { background: var(--night-3); color: var(--moon); border-color: color-mix(in srgb, var(--lamp) 55%, var(--line)); box-shadow: none; }
.glass .btn.wazaif:hover { background: var(--night-2); border-color: var(--lamp); }
.glass .btn.ghost, .glass .btn.install {
  color: var(--moon);
  border: 1px solid color-mix(in srgb, var(--moon) 22%, transparent);
  background: color-mix(in srgb, var(--night-3) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -10px rgba(0, 0, 0, 0.35);
}
.glass .btn.ghost:hover, .glass .btn.install:hover { border-color: var(--lamp); background: color-mix(in srgb, var(--night-3) 75%, transparent); }
.glass .btn.install { border-color: color-mix(in srgb, var(--lamp) 55%, transparent); }
.glass .nextband .wrap {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px -18px rgba(0, 0, 0, 0.55);
}
[data-theme="light"].glass .nextband .wrap, [data-theme="light"] .glass .nextband .wrap { border-color: rgba(255, 255, 255, 0.34); }
[data-theme="light"] .glass .nextband .btn {
  color: #1c2431;
  background: color-mix(in srgb, var(--band-accent) 82%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .glass .nextband .btn:hover { background: var(--band-accent); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass .btn.ghost, .glass .btn.install { -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
  .glass .nextband .wrap { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  [data-theme="light"] .glass .nextband .btn { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* One subtle glass language across the site, in both themes: a faint translucent face, a hairline border that picks up the ink colour,
   and a 1px highlight on the top edge. Only the larger cards blur what is behind them (small pills and fields stay cheap to paint).
   Selected / current states keep their own solid fill, so they are excluded below. */
.glass {
  --g-face: color-mix(in srgb, var(--night-3) 62%, transparent);
  --g-face-in: color-mix(in srgb, var(--night-3) 78%, transparent);
  --g-bd: color-mix(in srgb, var(--moon) 15%, transparent);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --g-sh: 0 8px 22px -14px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .glass { --g-face: color-mix(in srgb, #fff 52%, transparent); --g-face-in: color-mix(in srgb, #fff 66%, transparent); --g-bd: color-mix(in srgb, var(--moon) 16%, transparent); }

/* cards */
.glass .ap .ygrid a, .glass .ap .clist a, .glass .ap .wzcard, .glass .rd .wzcard, .glass .pg .sched, .glass .sc .nextup, .glass .rd details.mp, .glass .rd .rbar {
  background: var(--g-face); border-color: var(--g-bd); box-shadow: var(--g-hi), var(--g-sh);
}
.glass .ap .ygrid a:hover, .glass .ap .clist a:hover { border-color: var(--lamp); background: var(--g-face-in); }

/* fields */
.glass .search input, .glass .ap .filter input, .glass .pg .cform input[type="text"], .glass .pg .cform input[type="email"], .glass .pg .cform textarea, .glass .rd .jump input, .glass .yearpick select, .glass .ap .ysel select {
  background-color: var(--g-face-in); border-color: var(--g-bd); box-shadow: var(--g-hi);
}
.glass .search input:focus, .glass .ap .filter input:focus, .glass .pg .cform input:focus, .glass .pg .cform textarea:focus, .glass .rd .jump input:focus {
  border-color: var(--lamp); box-shadow: var(--g-hi), 0 0 0 3px color-mix(in srgb, var(--lamp) 22%, transparent);
}

/* pills and small controls (not the selected ones) */
.glass .years button:not([aria-pressed="true"]), .glass .years a.yr, .glass .chips button:not([aria-pressed="true"]), .glass .ap .tabs button:not([aria-pressed="true"]):not([aria-selected="true"]),
.glass .ap .yrail a:not([aria-current]), .glass .sc .jump a, .glass .sc .note, .glass .rd .grid a:not([aria-current]), .glass .ap .abtn.ghost, .glass .pg .copy, .glass .pv .vdl, .glass .rd .ic,
.glass .tbtn, .glass .sbtn, .glass .lang {
  background: var(--g-face); border-color: var(--g-bd); box-shadow: var(--g-hi);
}
.glass .years button:not([aria-pressed="true"]):hover, .glass .years a.yr:hover, .glass .ap .abtn.ghost:hover, .glass .pg .copy:hover, .glass .rd .ic:hover, .glass .sc .jump a:hover { border-color: var(--lamp); }
.glass .years a.yr:hover { background: var(--lamp); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass .ap .ygrid a, .glass .ap .clist a, .glass .pg .sched, .glass .sc .nextup, .glass .rd details.mp, .glass .pv .vcount { -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
  .glass .pv .vcount { background: var(--g-face-in); border-color: var(--g-bd); }
}

/* the schedule page's next-Ijtema band matches the home page one */
[data-theme="light"] .glass .sc .nextup { border-color: rgba(255, 255, 255, 0.34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 34px -18px rgba(0, 0, 0, 0.55); }