/* ── WAJDQURAN FLUID ──────────────────────────────────────────────────────────
   The app's design layer: a living field of light behind frosted, layered
   surfaces, in Wajd Quran's own Rawdah green and gold rather than the Academy's
   palette. Sibling in spirit to frontend/fluid.css, not a copy of it.

   The idea it is built on: an app for reading the Quran should be alive where
   you are choosing, and still where you are reading. So the field drifts on the
   browsing surfaces and freezes the moment a reading page opens (html.wq-still,
   set by app.js for the mushaf and Tarteel). Motion is never on top of the
   Arabic, only behind the furniture around it.

   Every rule is prefixed html.wq-fluid, which outranks a bare .class whichever
   file loads last, and doubles as the kill switch: drop the class in app.js and
   the whole layer is gone with no other edit.

   Performance notes, learned the hard way on the Academy skin:
     - The field is gradients on a single composited layer, animated with
       transform only. No filter: blur() on anything large, which janks scrolling
       on low end phones.
     - backdrop-filter is used only on the two small bars, and only where the
       browser supports it; everything else gets a solid translucent fill.
     - Anyone who asks for less motion gets a still field, not a slower one.

   Author: WAJD AI */

html.wq-fluid {
  --fl-radius: 20px;
  --fl-glass: rgba(255, 255, 255, .86);
  --fl-glass-strong: rgba(255, 255, 255, .93);
  --fl-hairline: rgba(255, 255, 255, .75);
  --fl-shadow-1: 0 2px 6px rgba(18, 63, 44, .05);
  --fl-shadow-2: 0 10px 26px rgba(18, 63, 44, .10);
  --fl-shadow-3: 0 22px 48px rgba(18, 63, 44, .14);
  --fl-drift: 34s;
}

/* ══ 1. The field ══════════════════════════════════════════════════════════
   Three broad washes of colour on one fixed layer, drifting slowly past each
   other. Because they are radial gradients on a transformed element, the whole
   thing is one composited layer and costs the main thread nothing. */
/* The base colour has to sit on html, not body. body::before carries the field at
   a negative z-index, and a negative z-index child paints BEHIND its parent's own
   background: with the cream on body the whole field was being covered up by it. */
html.wq-fluid { background: var(--cream); }
html.wq-fluid body { background: transparent; position: relative; }

html.wq-fluid body::before {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: -2;
  pointer-events: none;
  /* The washes take their hue from the theme. They used to be four fixed rgba
     values, and those values were the Clean palette, so every theme got Clean's
     green and teal laid over it: the Blue theme showed a green field, and Green
     showed a green that was not its own. On a screen that is mostly white space,
     like Recite, that wash is the first thing you see. */
  background:
    radial-gradient(36vmax 32vmax at 20% 14%, color-mix(in srgb, var(--teal) 52%, transparent), transparent 60%),
    radial-gradient(40vmax 36vmax at 84% 22%, color-mix(in srgb, var(--gold2) 50%, transparent), transparent 62%),
    radial-gradient(30vmax 30vmax at 92% 60%, color-mix(in srgb, var(--coral) 26%, transparent), transparent 60%),
    radial-gradient(46vmax 40vmax at 46% 96%, color-mix(in srgb, var(--green) 46%, transparent), transparent 64%);
  will-change: transform;
  animation: wqDrift var(--fl-drift) ease-in-out infinite alternate;
}

/* A second, fainter pass moving the other way, so the light never repeats in an
   obvious loop. This is what makes it read as depth rather than a moving image. */
html.wq-fluid body::after {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: -2;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(34vmax 30vmax at 74% 70%, color-mix(in srgb, var(--gold2) 40%, transparent), transparent 58%),
    radial-gradient(30vmax 28vmax at 10% 58%, color-mix(in srgb, var(--teal) 36%, transparent), transparent 60%),
    radial-gradient(26vmax 24vmax at 40% 8%, rgba(255, 255, 255, .55), transparent 62%);
  will-change: transform;
  animation: wqDriftBack calc(var(--fl-drift) * 1.55) ease-in-out infinite alternate;
}

@keyframes wqDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.04) rotate(0deg); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.10) rotate(6deg); }
}
@keyframes wqDriftBack {
  from { transform: translate3d(2%, 3%, 0) scale(1.08) rotate(2deg); }
  to   { transform: translate3d(-2%, -3%, 0) scale(1.02) rotate(-5deg); }
}

/* A fine grain over the field, so the gradients never band on a cheap screen.
   Pure CSS, no image request. */
html.wq-fluid body > .wq-grain,
html.wq-fluid .wq-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(18,63,44,.025) 0 1px, transparent 1px 3px);
}

/* ══ 2. Stillness ══════════════════════════════════════════════════════════
   The reading pages set html.wq-still. Nothing behind the text moves, and the
   field settles to a calmer, dimmer wash so the script has the contrast. Anyone
   who has asked the system for less motion gets the same, always. */
html.wq-fluid.wq-still body::before,
html.wq-fluid.wq-still body::after { animation: none; }
html.wq-fluid.wq-still body::before { opacity: .62; }
html.wq-fluid.wq-still body::after { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  html.wq-fluid body::before,
  html.wq-fluid body::after { animation: none; }
}

/* ══ 3. Layered surfaces ═══════════════════════════════════════════════════
   Three elevations, used consistently: a resting card, a raised card, and a
   sheet. Each is a translucent fill with a light top hairline, which is what
   gives the sense of glass catching light from above. */
html.wq-fluid .card,
html.wq-fluid .scard,
html.wq-fluid .tcard,
html.wq-fluid .vcard,
html.wq-fluid .prow,
html.wq-fluid .wcard,
html.wq-fluid .dh-card,
html.wq-fluid .tt-row,
html.wq-fluid .mu-list button,
html.wq-fluid .mu-grid button {
  background: var(--fl-glass);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--fl-shadow-1), inset 0 1px 0 var(--fl-hairline);
  border-radius: 16px;
}

html.wq-fluid .dh-card,
html.wq-fluid .card {
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-2), inset 0 1px 0 var(--fl-hairline);
}

/* The leaf is the one surface that stays opaque: printed paper, not glass. It
   is what the eye rests on, so it is lifted clear of the field instead. */
html.wq-fluid .mu-leaf {
  box-shadow: var(--fl-shadow-3);
  border-radius: 10px;
}

/* ══ 4. The two bars ═══════════════════════════════════════════════════════
   The only places backdrop-filter earns its cost: they are small, fixed, and
   sit over moving colour, so real blur is what sells the depth. Browsers without
   it get a heavier translucent fill and look intentional rather than broken. */
html.wq-fluid .app-bar {
  background: linear-gradient(160deg, var(--green), var(--green2));
  box-shadow: 0 6px 20px rgba(18, 63, 44, .16);
}
/* On the coloured bars the lockup is light; the clean theme keeps its own dark
   lockup from app.css, because its bar is pale. */
html.wq-fluid:not(.theme-clean) .app-bar .ttl .t1 { color: #ffe08a; }
html.wq-fluid:not(.theme-clean) .app-bar .ttl .t2 { color: #f7f4ea; }
/* Clean: no coloured header at all, a dim glass strip over the field. */
html.wq-fluid.theme-clean .app-bar {
  background: rgba(251, 250, 246, .82);
  color: var(--green-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 4px 16px rgba(18, 63, 44, .08);
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  html.wq-fluid.theme-clean .app-bar {
    background: rgba(251, 250, 246, .62);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}
html.wq-fluid .tabbar {
  background: rgba(255, 255, 255, .86);
  border-top: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 -8px 26px rgba(18, 63, 44, .10);
}
html.wq-fluid .mu-bar,
html.wq-fluid .dh-bar,
html.wq-fluid .tt-bar {
  background: rgba(245, 236, 214, .84);
  border-top: 1px solid rgba(255, 255, 255, .7);
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  html.wq-fluid .tabbar,
  html.wq-fluid .mu-bar,
  html.wq-fluid .dh-bar,
  html.wq-fluid .tt-bar {
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
  }
  html.wq-fluid .tabbar { background: rgba(255, 255, 255, .66); }
  html.wq-fluid .mu-bar,
  html.wq-fluid .dh-bar,
  html.wq-fluid .tt-bar { background: rgba(245, 236, 214, .62); }
}

/* ══ 5. Actions ════════════════════════════════════════════════════════════
   One button system, lifted off the glass. The gold primary keeps its shape from
   app.css; fluid only deepens it and gives it a light edge. */
html.wq-fluid .wq-btn,
html.wq-fluid .tt-go,
html.wq-fluid .dh-tap,
html.wq-fluid .memo-hero {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.wq-fluid .wq-btn.ghost,
html.wq-fluid .wq-blob {
  background: var(--fl-glass-strong);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: var(--fl-shadow-1), inset 0 1px 0 var(--fl-hairline);
}
/* Press is the one motion everyone gets: it is feedback, not decoration. */
html.wq-fluid .wq-btn:active,
html.wq-fluid .tt-go:active,
html.wq-fluid .dh-tap:active { transform: translateY(1px) scale(.985); }

/* ══ 6. Sheets ═════════════════════════════════════════════════════════════ */
html.wq-fluid .wq-sheet {
  border-radius: 26px 26px 0 0;
  box-shadow: var(--fl-shadow-3);
  border-top: 1px solid rgba(255, 255, 255, .8);
}
html.wq-fluid .wq-sheet-ov { background: rgba(9, 38, 27, .42); }
@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)) {
  html.wq-fluid .wq-sheet-ov { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

/* ══ 7. Inputs and chips ═══════════════════════════════════════════════════ */
html.wq-fluid .field,
html.wq-fluid input,
html.wq-fluid select,
html.wq-fluid textarea {
  background: var(--fl-glass-strong);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--fl-shadow-1);
  border-radius: 14px;
}
html.wq-fluid .fchip,
html.wq-fluid .chips button {
  background: var(--fl-glass);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: var(--fl-shadow-1);
}
/* The ACTIVE chip must never be glass: it carries the theme accent, or it
   disappears into the field (the invisible All 114 chip on the blue theme). */
html.wq-fluid .fchip.on,
html.wq-fluid .chips button.on {
  background: var(--green-fill);
  color: #fff;
  border-color: transparent;
}
html.theme-clean.wq-fluid .fchip.on,
html.theme-clean.wq-fluid .chips button.on {
  background: var(--accent-grad);
  color: var(--accent-ink);
}
html.wq-fluid .qtoggle,
html.wq-fluid .dh-seg,
html.wq-fluid .mu-seg {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 3px rgba(18, 63, 44, .07);
}

/* ══ 8. Dark ═══════════════════════════════════════════════════════════════
   The same field, seen at night: the light sources stay in place but sink, and
   the glass becomes smoked rather than frosted. */
html.wq-fluid.dark { background: #121714; }
html.wq-fluid.dark body { background: transparent; }
html.wq-fluid.dark {
  --fl-glass: rgba(30, 38, 33, .82);
  --fl-glass-strong: rgba(34, 43, 37, .94);
  --fl-hairline: rgba(255, 255, 255, .07);
  --fl-shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
  --fl-shadow-2: 0 10px 26px rgba(0, 0, 0, .45);
  --fl-shadow-3: 0 22px 48px rgba(0, 0, 0, .55);
}
html.wq-fluid.dark body::before {
  background:
    radial-gradient(38vmax 34vmax at 22% 18%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 62%),
    radial-gradient(42vmax 38vmax at 82% 26%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 64%),
    radial-gradient(46vmax 40vmax at 50% 92%, color-mix(in srgb, var(--green) 28%, transparent), transparent 66%);
}

/* Without color-mix the gradients above resolve to nothing and the field would
   vanish, so those browsers keep exactly the washes that shipped before.
   app.css already guards its accent tokens the same way. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  html.wq-fluid body::before {
    background:
      radial-gradient(36vmax 32vmax at 20% 14%, rgba(47, 141, 134, .52), transparent 60%),
      radial-gradient(40vmax 36vmax at 84% 22%, rgba(221, 187, 106, .50), transparent 62%),
      radial-gradient(30vmax 30vmax at 92% 60%, rgba(194, 95, 73, .26), transparent 60%),
      radial-gradient(46vmax 40vmax at 46% 96%, rgba(30, 115, 80, .46), transparent 64%);
  }
  html.wq-fluid body::after {
    background:
      radial-gradient(34vmax 30vmax at 74% 70%, rgba(221, 187, 106, .40), transparent 58%),
      radial-gradient(30vmax 28vmax at 10% 58%, rgba(47, 141, 134, .36), transparent 60%),
      radial-gradient(26vmax 24vmax at 40% 8%, rgba(255, 255, 255, .55), transparent 62%);
  }
  html.wq-fluid.dark body::before {
    background:
      radial-gradient(38vmax 34vmax at 22% 18%, rgba(47, 141, 134, .26), transparent 62%),
      radial-gradient(42vmax 38vmax at 82% 26%, rgba(184, 146, 58, .20), transparent 64%),
      radial-gradient(46vmax 40vmax at 50% 92%, rgba(30, 115, 80, .28), transparent 66%);
  }
}
html.wq-fluid.dark body::after { opacity: .4; }
html.wq-fluid.dark .card,
html.wq-fluid.dark .scard,
html.wq-fluid.dark .tcard,
html.wq-fluid.dark .vcard,
html.wq-fluid.dark .prow,
html.wq-fluid.dark .wcard,
html.wq-fluid.dark .dh-card,
html.wq-fluid.dark .tt-row,
html.wq-fluid.dark .mu-list button,
html.wq-fluid.dark .mu-grid button,
html.wq-fluid.dark .field,
html.wq-fluid.dark input,
html.wq-fluid.dark select,
html.wq-fluid.dark textarea,
html.wq-fluid.dark .wq-btn.ghost,
html.wq-fluid.dark .wq-blob { border-color: rgba(255, 255, 255, .08); }
html.wq-fluid.dark .app-bar {
  background: rgba(20, 26, 22, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
html.wq-fluid.dark .tabbar { background: rgba(20, 26, 22, .84); border-top-color: rgba(255, 255, 255, .06); }
html.wq-fluid.dark .mu-bar,
html.wq-fluid.dark .dh-bar,
html.wq-fluid.dark .tt-bar { background: rgba(20, 26, 22, .8); border-top-color: rgba(255, 255, 255, .06); }
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  html.wq-fluid.dark .tabbar { background: rgba(20, 26, 22, .62); }
  html.wq-fluid.dark .mu-bar,
  html.wq-fluid.dark .dh-bar,
  html.wq-fluid.dark .tt-bar { background: rgba(20, 26, 22, .6); }
}
html.wq-fluid.dark .wq-sheet-ov { background: rgba(0, 0, 0, .55); }
html.wq-fluid.dark .qtoggle,
html.wq-fluid.dark .dh-seg,
html.wq-fluid.dark .mu-seg {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
html.wq-fluid.dark .wq-grain { opacity: .35; }

/* ══ 9. Print ══════════════════════════════════════════════════════════════ */
@media print {
  html.wq-fluid body::before,
  html.wq-fluid body::after,
  html.wq-fluid .wq-grain { display: none; }
}