/* ── Home page design: clean (flat) variant ────────────────────────────────
   The default design is the gradient one (glass/aurora surfaces in
   styles.css). This sheet carries the CLEAN variant: flat surfaces, no
   gradients, emerald & slate palette. Every rule is scoped under
   `body[data-home-design='clean']` so the gradient default is untouched —
   selecting "Gradient" (or having no stored choice, e.g. fresh installs)
   renders exactly today's look.

   Source of truth for the declarations: the redesign/homepage-carousel
   branch's styles.css. If a rule here drifts from that branch, this file is
   wrong — re-diff against it.

   Specificity note: clean-light selectors (`body[data-home-design='clean'] X`,
   (0,2,1)) tie the dark base selectors (`body.theme-dark X`, (0,2,1)), and
   this sheet loads AFTER styles.css — so without an explicit clean-dark rule,
   the clean-light value would win in dark mode too. Every clean-light rule
   whose property is also set by a dark base rule therefore has a clean-dark
   companion below restoring the redesign's dark behaviour.
   The palette vars below are additionally gated with `:not(.theme-dark)`:
   the bare `body[data-home-design='clean']` selector is (0,1,1) and would
   otherwise beat the base dark block `[data-theme='dark']` (0,1,0), leaking
   near-black light text into dark mode. */

body[data-home-design='clean']:not(.theme-dark) {
  /* Premium emerald & slate light palette: crisp off-white canvas, white
     cards with hairline slate outlines and micro-elevation. No blue, no
     cream, no aurora, no glass. (#047857 passes WCAG AA 4.5:1 as text;
     #059669 is the brighter emerald for indicator pills / large accents.) */
  --bg-page: #f7f8fa;
  --text-main: #0f172a;
  --text-secondary: #475569;

  /* #64748b sat at 4.48:1 on the #f7f8fa canvas (AA needs 4.5:1 for the
     small labels/placeholders this token styles). #627183 is the smallest
     darkening that clears AA on both the page and white cards (4.7 / 4.99)
     while staying slate and lighter than --text-secondary. */
  --text-muted: #627183;
  --border: #e2e8f0;
  --shadow: rgba(16, 24, 40, 0.06);
  --accent: #047857;
  --accent-emerald: #059669;
  --accent-soft: #059669;
  --autocomplete-selected-bg: rgba(5, 150, 105, 0.12);
  --accent-ink: #fff;
  --accent-bg: rgba(5, 150, 105, 0.1);
  --accent-glow: rgba(5, 150, 105, 0.3);
  --accent-bright: #059669;
  --accent-warm: #64748b;
  --accent-gold: #64748b;
  --shadow-soft: 0 4px 16px -2px rgba(16, 24, 40, 0.05), 0 2px 6px -1px rgba(16, 24, 40, 0.03);
  --shadow-lift: 0 6px 20px -2px rgba(16, 24, 40, 0.1), 0 3px 8px -1px rgba(16, 24, 40, 0.06);
  --radius-xl: 18px;
  --radius-lg: 18px;
  --bg-chip: rgba(60, 64, 67, 0.08);
}

body.theme-dark[data-home-design='clean'],
body[data-theme='dark'][data-home-design='clean'] {
  /* The light block above is :not(.theme-dark)-gated, but the redesign
     defines its clean tokens once in :root so dark inherits them — mirror
     that here: every mode-independent token is repeated so clean dark uses
     the emerald/slate system, not the legacy green palette. Deliberately
     absent: --bg-page, --text-main and --border, which stay on the dark
     theme (light values there would ink the page dark-on-dark). */
  --text-secondary: #b8bdb8;
  --text-muted: #8f958f;
  --shadow: rgba(16, 24, 40, 0.06);
  --accent: #047857;
  --accent-emerald: #059669;
  --accent-soft: #059669;
  --autocomplete-selected-bg: rgba(5, 150, 105, 0.12);
  --accent-ink: #fff;
  --accent-bg: rgba(5, 150, 105, 0.1);
  --accent-glow: rgba(5, 150, 105, 0.3);
  --accent-bright: #059669;
  --accent-warm: #64748b;
  --accent-gold: #64748b;
  --shadow-soft: 0 4px 16px -2px rgba(16, 24, 40, 0.05), 0 2px 6px -1px rgba(16, 24, 40, 0.03);
  --shadow-lift: 0 6px 20px -2px rgba(16, 24, 40, 0.1), 0 3px 8px -1px rgba(16, 24, 40, 0.06);
  --radius-xl: 18px;
  --radius-lg: 18px;
  --bg-chip: rgba(60, 64, 67, 0.08);
}

/* Chrome M3 light: one flat canvas, no aurora. (The light theme used to
   stack five radial gradients here for the frosted-glass look.) */
body[data-home-design='clean'] .background {
  background: var(--bg-page);
}

/* Dark mode is a FLAT background: one solid dark slate, deliberately no
   gradient/aurora. */
body.theme-dark[data-home-design='clean'] .background,
body[data-theme='dark'][data-home-design='clean'] .background {
  background: #0f172a;
}

/* Chrome M3 light: header blends into the flat canvas. */
body[data-home-design='clean'] .home-header {
  background: var(--bg-page);
}

body.theme-dark[data-home-design='clean'] .home-header,
body[data-theme='dark'][data-home-design='clean'] .home-header {
  /* Flat slate, no gradient: the header sits over a flat page, so a fading
     gradient would read as a band rather than a frosted bar. */
  background: #0f172a;
}

body[data-home-design='clean'] .home-icon-btn {
  border: 1px solid #eef2f6;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  color: #64748b;
}

body.theme-dark[data-home-design='clean'] .home-icon-btn,
body[data-theme='dark'][data-home-design='clean'] .home-icon-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);

  /* Flat slate, no gradient. */
  background: #1e293b;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Bright icon tint for the dark surface (the light rule's slate would read
     as dim grey here). */
  color: var(--text-secondary);
}

/* Chrome M3 card: white surface + hairline outline + minimal elevation
   (was a frosted-glass gradient with blur and fuzzy shadows). */
body[data-home-design='clean'] .dashboard-widget {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Glass sheen removed with the glass: no light streak on flat M3 cards. */
body[data-home-design='clean'] .dashboard-widget::before {
  content: none;
}

body[data-home-design='clean'] .dashboard-widget:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

body.theme-dark[data-home-design='clean'] .dashboard-widget,
body[data-theme='dark'][data-home-design='clean'] .dashboard-widget {
  /* Flat slate — no gradient. Border + shadow restored: the (0,2,1) light
     rule ties-and-beats the dark base (later sheet), so without these the
     card would wear the light hairline and elevation in dark mode. */
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 12px 34px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.theme-dark[data-home-design='clean'] .dashboard-widget::before,
body[data-theme='dark'][data-home-design='clean'] .dashboard-widget::before {
  /* No sheen in the dark theme: the streak was a white gradient, which on a
     flat slate card just fogs the surface. */
  background: none;
}

/* Strip cells carry the same flat M3 frame as the dashboard cards. */
body[data-home-design='clean'] .ic-cell {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.theme-dark[data-home-design='clean'] .ic-cell,
body[data-theme='dark'][data-home-design='clean'] .ic-cell {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 34px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

body[data-home-design='clean'] #section-islamic-ai.islamic-strip-ai-cell {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

body.theme-dark[data-home-design='clean'] #section-islamic-ai.islamic-strip-ai-cell,
body[data-theme='dark'][data-home-design='clean'] #section-islamic-ai.islamic-strip-ai-cell {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 12px 34px -10px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Inner query pill rendered as a nested input surface */
body[data-home-design='clean'] .dashboard-widget .deen-ai-launcher {
  background: #f1f5f9;
  border: 1px solid var(--border);
  box-shadow: none;
}

body.theme-dark[data-home-design='clean'] .dashboard-widget .deen-ai-launcher,
body[data-theme='dark'][data-home-design='clean'] .dashboard-widget .deen-ai-launcher {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Flat grey chip on the white M3 card (was frosted glass). */
body[data-home-design='clean'] .last-tab-card {
  background: #f1f5f9;
  border: 1px solid var(--border);
  box-shadow: none;
}

body.theme-dark[data-home-design='clean'] .last-tab-card,
body[data-theme='dark'][data-home-design='clean'] .last-tab-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-home-design='clean'] .favorite-icon {
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

body.theme-dark[data-home-design='clean'] .favorite-icon,
body[data-theme='dark'][data-home-design='clean'] .favorite-icon {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none !important;
}

body[data-home-design='clean'] .favorite-name {
  font-size: 12px;
  color: #1e293b;
}

body.theme-dark[data-home-design='clean'] .favorite-name,
body[data-theme='dark'][data-home-design='clean'] .favorite-name {
  font-size: 11px;
  color: var(--text-secondary);
}

/* White pill over the #f7f8fa canvas so it pops cleanly (emerald/slate
   system), with a soft floating shadow instead of a grey fill. */
body[data-home-design='clean'] .search-container {
  background: #fff;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.theme-dark[data-home-design='clean'] .search-container,
body[data-theme='dark'][data-home-design='clean'] .search-container {
  /* Flat slate, matching the widget cards — no gradient. Border + shadow
     restored for the same tie-and-beat reason as the widget frame above. */
  background: #1e293b;
  border: 1px solid rgba(79, 166, 136, 0.28);
  box-shadow:
    0 14px 34px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(79, 166, 136, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-home-design='clean'] .search-container:focus-within {
  /* Focus: soft emerald glow ring (0.25 alpha so the ring itself reads on
     white — keyboard focus must be perceivable, not just the border). */
  background: #fff;
  border-color: var(--accent);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(5, 150, 105, 0.25);
}

body.theme-dark[data-home-design='clean'] .search-container:focus-within,
body[data-theme='dark'][data-home-design='clean'] .search-container:focus-within {
  background: rgba(20, 25, 30, 0.62);
  border-color: rgba(79, 166, 136, 0.5);
  box-shadow:
    0 0 0 4px var(--accent-bg),
    0 16px 38px -10px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-home-design='clean'] .search-input::placeholder {
  color: #94a3b8;
}

body[data-home-design='clean'] .qr-scan-btn.is-scanning {
  color: var(--accent-emerald, #047857);
}

/* Flat surfaces must not pay for backdrop blur: the base glass rules leave
   blur(8-32px) filters on the header, cards, pills and cells, which cost a
   GPU offscreen pass and bleed on the opaque flat surfaces above. A single
   (theme-independent) reset covers both color themes — `none` is correct in
   dark mode too, so no clean-dark companion is needed. */
body[data-home-design='clean'] .home-header,
body[data-home-design='clean'] .home-icon-btn,
body[data-home-design='clean'] .dashboard-widget,
body[data-home-design='clean'] .dashboard-widget .deen-ai-launcher,
body[data-home-design='clean'] .ic-cell,
body[data-home-design='clean'] #section-islamic-ai.islamic-strip-ai-cell,
body[data-home-design='clean'] .last-tab-card,
body[data-home-design='clean'] .search-container,
body[data-home-design='clean'] .islamic-widget-tall {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Floating menus: real M3 elevation above the page surface. */
body[data-home-design='clean'] .autocomplete-dropdown,
body[data-home-design='clean'] .search-engine-dropdown {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.14);
}

body[data-home-design='clean'] .deen-ai-hero {
  background: var(--accent-bg);
}

body[data-home-design='clean'] .deen-ai-hero-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20Z' fill='none' stroke='%231a73e8' stroke-width='0.6'/%3E%3Cpath d='M20 8 L32 20 L20 32 L8 20Z' fill='none' stroke='%231a73e8' stroke-width='0.4'/%3E%3Ccircle cx='20' cy='20' r='5' fill='none' stroke='%231a73e8' stroke-width='0.4'/%3E%3C/svg%3E");
}

body[data-home-design='clean'] .deen-ai-launcher-send,
body[data-home-design='clean'] .deen-ai-sparkle {
  box-shadow: 0 1px 2px rgba(11, 87, 208, 0.3);
}

body[data-home-design='clean'] .carousel-scroll-btn {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.theme-dark[data-home-design='clean'] .carousel-scroll-btn,
body[data-theme='dark'][data-home-design='clean'] .carousel-scroll-btn {
  box-shadow: none;
}

body[data-home-design='clean'] .islamic-widget-card {
  border-radius: 18px;
}

body[data-home-design='clean'] .islamic-widget-card:hover,
body[data-home-design='clean'] .islamic-widget-standalone:hover,
body[data-home-design='clean'] .islamic-widget-tall:hover,
body[data-home-design='clean'] .dailystar-rss-card:hover .dailystar-rss-card-content,
body[data-home-design='clean'] .youtube-video-card:hover .youtube-video-content,
body[data-home-design='clean'] .mahfil-horizontal-video-card:hover .mahfil-horizontal-video-content,
body[data-home-design='clean'] .wafilife-book-card:hover .wafilife-book-card-inner,
body[data-home-design='clean'] .mahfil-video-item:hover {
  box-shadow: var(--shadow-lift);
}

body[data-home-design='clean'] .ic-prayer-bar {
  height: 3px;
  border-radius: 9999px;
  background: var(--accent-emerald);
}

body[data-home-design='clean'] .modal-content {
  border-radius: 18px 18px 0 0;
}

body[data-home-design='clean'] .customize-group {
  background: #f1f5f9;
}

body.theme-dark[data-home-design='clean'] .customize-group,
body[data-theme='dark'][data-home-design='clean'] .customize-group {
  background: var(--bg-card);
}

body[data-home-design='clean'] .islamic-widget-tall {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body[data-home-design='clean'] .islamic-widget-featured .islamic-widget-icon {
  background: #f1f5f9;
  box-shadow: none;
}

/* Category tints kept at a whisper (6%) so each widget stays recognisable
   while reading as a white M3 surface. */
body[data-home-design='clean'] .islamic-widget-quran {
  background: rgba(176, 140, 60, 0.06);
}

body[data-home-design='clean'] .islamic-widget-hadith {
  background: rgba(63, 122, 240, 0.06);
}

/* Prayer widget — flat white with a whisper of the current-prayer tint */
body[data-home-design='clean'] .islamic-widget-prayer {
  background: rgba(46, 139, 127, 0.06);
  border-color: var(--border);
}

body[data-home-design='clean'] .islamic-widget-prayer[data-prayer='Maghrib'] {
  background: rgba(184, 92, 74, 0.06);
}

body[data-home-design='clean'] .islamic-widget-prayer[data-prayer='Isha'],
body[data-home-design='clean'] .islamic-widget-prayer[data-prayer='Dawn'] {
  background: rgba(107, 74, 138, 0.06);
}

body[data-home-design='clean'] .islamic-widget-prayer .prayer-gold-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

body[data-home-design='clean'] .widget-prayer-waqt-fill {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.5);
}

body[data-home-design='clean'] .islamic-widget-dua {
  background: rgba(123, 93, 246, 0.06);
  border: 1px solid var(--border);
}

body[data-home-design='clean'] .islamic-widget-dua::after {
  content: none;
}

body[data-home-design='clean'] .content-feed-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.theme-dark[data-home-design='clean'] .content-feed-card,
body[data-theme='dark'][data-home-design='clean'] .content-feed-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body[data-home-design='clean'] .content-feed-card-hero {
  /* Hero sits inside the card's 18px top corners; minus the 1px border so
     the clipped image meets the outline without a white sliver. */
  border-radius: 17px 17px 0 0;
}

body[data-home-design='clean'] .content-feed-card-badge {
  /* Light frosted-look disc, but deliberately NOT a backdrop blur: the blurred
     variant forced a per-card offscreen-buffer repaint on every scroll frame,
     which was a primary cause of feed scroll jank (one badge per card). The
     near-opaque white keeps the look with no blur cost. */
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body[data-home-design='clean'] .content-feed-card-source {
  font-weight: 400;
  color: #64748b;
}

body.theme-dark[data-home-design='clean'] .content-feed-card-source,
body[data-theme='dark'][data-home-design='clean'] .content-feed-card-source {
  /* Bright byline for the dark card (the light rule's slate is unreadable
     on slate). */
  color: var(--text-secondary);
}

/* ── Dark theme: flat slate surfaces, no gradients ──────────────────────────
   Every remaining gradient that paints a widget/preview surface in the dark
   theme is flattened to a slate tone here, so the "no gradient" rule holds even
   where a widget's base rule (defined for the light theme) still declares one.

   Deliberately NOT flattened: imagery and accents. Book cover art, video
   thumbnails and the ad-slot preview are content, and the small green
   .deen-ai-sparkle badge is a brand accent mark, not a surface. */
body.theme-dark[data-home-design='clean'] .wafilife-book-cover-wrap,
body.theme-dark[data-home-design='clean'] .wafilife-book-cover-fallback,
body.theme-dark[data-home-design='clean'] .mahfil-video-thumbnail-placeholder,
body.theme-dark[data-home-design='clean'] .house-card-media,
body.theme-dark[data-home-design='clean'] .content-feed-card-hero {
  background: #1e293b;
}

/* The content-feed card hero carries its per-category gradient as an INLINE
   style (content-feed.js), so the rule above needs !important to win. Without
   it the feed still paints coloured gradient blocks in the dark theme. */
body.theme-dark[data-home-design='clean'] .content-feed-card-hero {
  background: #1e293b !important;
}