/* Coded Dreams homepage (and 404): its own liquid-glass skin, so it doesn't share the Islam Habits
   neumorphic look. Everything is tinted by the logo gradient (#009632 -> #004B96, from cd-logo-v2.svg):
   a slow green/blue aurora behind frosted, translucent panels with a bright top edge. */

body.cd {
  --cd-green: #009632;
  --cd-blue: #004b96;
  --cd-grad: linear-gradient(135deg, var(--cd-green), var(--cd-blue));
  /* Tinted-glass buttons, knob and chips (deeper in dark mode) */
  --grad-a: rgba(0, 150, 50, 0.78);
  --grad-b: rgba(0, 75, 150, 0.78);
  --grad-sheen: rgba(255, 255, 255, 0.38);
  --grad-glow: rgba(0, 75, 150, 0.3);

  --page-bg: #eef5f6;
  --text: #0b1a2a;
  --muted: #44566a;
  --heading: #0b1a2a;
  --link: #004b96;
  --focus: #0068c8;
  --surface: #ffffff;
  --cast: rgba(0, 40, 80, 0.14);

  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-spec: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-cast: rgba(0, 45, 90, 0.14);
  --aurora-a: rgba(0, 150, 50, 0.26);
  --aurora-b: rgba(0, 75, 150, 0.26);
  --aurora-c: rgba(0, 160, 170, 0.18);

  isolation: isolate; /* so the aurora (z-index -1) paints above the body background */
  background: var(--page-bg);
  color: var(--text);
}
:root[data-theme="dark"] body.cd {
  --page-bg: #06121f;
  --cd-grad: linear-gradient(135deg, #006422, #003268);
  --grad-a: rgba(0, 100, 34, 0.85);
  --grad-b: rgba(0, 50, 104, 0.85);
  --grad-sheen: rgba(255, 255, 255, 0.2);
  --grad-glow: rgba(0, 30, 70, 0.45);
  --text: #e8f0f6;
  --muted: #a3b5c6;
  --heading: #f2f7fb;
  --link: #6fd99a;
  --focus: #6fd99a;
  --surface: #0d1d2e;
  --cast: rgba(0, 0, 0, 0.45);

  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-spec: rgba(255, 255, 255, 0.22);
  --glass-edge: rgba(255, 255, 255, 0.28);
  --glass-cast: rgba(0, 0, 0, 0.45);
  --aurora-a: rgba(0, 150, 50, 0.42);
  --aurora-b: rgba(0, 75, 150, 0.55);
  --aurora-c: rgba(0, 140, 160, 0.25);
}
/* Root, scrollbar and browser chrome match the glass page instead of the app gray (base.css) */
:root:has(body.cd) { --sb-thumb: #b4c4cf; --sb-thumb-hover: #8fa3b2; --theme-color: #eef5f6; background: #eef5f6; }
:root[data-theme="dark"]:has(body.cd) { --sb-thumb: #24384c; --sb-thumb-hover: #34506a; --theme-color: #06121f; background: #06121f; }

/* Aurora: three soft logo-coloured lights drifting behind the glass */
body.cd::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 18%, var(--aurora-a), transparent 70%),
    radial-gradient(40% 36% at 84% 28%, var(--aurora-b), transparent 70%),
    radial-gradient(44% 34% at 46% 88%, var(--aurora-c), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
  to   { transform: translate3d(3%, 3%, 0) rotate(8deg); }
}

/* ---------- Glass surfaces ---------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-radius: var(--radius);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 12px 32px var(--glass-cast);
}
/* Hairline edge: only along the right and bottom, in the logo green and blue (no line above a box).
   At 135deg the top-right and bottom-left corners both sit at 50%, so the top and left stay clear. */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 150, 50, 0.45) 75%, rgba(0, 75, 150, 0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--surface) 88%, transparent); }
}

/* Buttons: glass pills; the primary one is filled with the logo gradient under a glass sheen.
   Its 19px bold label counts as large text, so white on the green end (3.9:1) passes AA. */
.cd .btn { color: var(--text); transition: transform 120ms ease, box-shadow 120ms ease; }
/* Tinted glass: the logo gradient, partly see-through, under a white sheen and a bright rim */
.cd .btn.primary, .cd .nav a[aria-current="page"] {
  color: #ffffff;
  background:
    linear-gradient(180deg, var(--grad-sheen), rgba(255, 255, 255, 0.04) 55%),
    linear-gradient(135deg, var(--grad-a), var(--grad-b));
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 -2px 6px rgba(0, 40, 90, 0.25),
    0 8px 22px var(--grad-glow);
}
.cd .btn.primary { font-size: 1.1875rem; }
/* Press, like the app's buttons: sink slightly and pull the shadow in */
.cd :is(a, button).glass:active, .cd .btn.primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 12px var(--glass-cast);
}

/* ---------- Header (bar geometry is shared, in base.css) ---------- */
.cd .nav a { color: var(--text); }
.cd .nav a:not([aria-current]):hover { background: var(--glass-fill); }
/* Theme switch: frosted track and a clear glass knob, so its whites match the page's glass */
.cd .theme-switch {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 0 3px rgba(0, 45, 90, 0.14);
}
/* Knob = the same tinted gradient glass as the current nav pill, in both themes */
.cd .theme-switch .knob {
  background:
    linear-gradient(180deg, var(--grad-sheen), rgba(255, 255, 255, 0.04) 55%),
    linear-gradient(135deg, var(--grad-a), var(--grad-b));
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 -2px 6px rgba(0, 40, 90, 0.25),
    0 4px 12px var(--grad-glow);
}
/* Glyphs: white on the knob, muted text colour off it. :root[data-theme] outranks base.css. */
:root[data-theme] .cd .theme-switch .sun { --gl: #ffffff; --gm: #ffffff; --gd: #dfe9f2; --go: transparent; }
:root[data-theme] .cd .theme-switch .moon { --gl: #44566a; --gm: #44566a; --gd: #44566a; --go: transparent; }
:root[data-theme="dark"] .cd .theme-switch .sun { --gl: #a3b5c6; --gm: #a3b5c6; --gd: #a3b5c6; --go: transparent; }
:root[data-theme="dark"] .cd .theme-switch .moon { --gl: #ffffff; --gm: #ffffff; --gd: #dfe9f2; --go: transparent; }

/* ---------- Hero ---------- */
.cd-hero { padding-block: var(--s5) var(--s6); text-align: center; }
.cd-hero .wrap { display: grid; gap: var(--s5); justify-items: center; }
.cd-hero .logo-wrap { width: min(78%, 360px); }
.cd-hero .logo { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 30, 60, 0.3)); }
.cd-hero h1 { max-width: 18ch; margin-inline: auto; }
.cd-hero .lead { color: var(--muted); margin-inline: auto; }
.cd-hero .actions { justify-content: center; }
.cd-hero .eyebrow { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--text); margin-bottom: var(--s3); }
.cd-hero .yt-card { width: min(100%, 880px); }
.grad-text {
  background: var(--cd-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .grad-text { background-image: linear-gradient(135deg, #2fd66a, #4a9cf0); }

/* ---------- Cards ---------- */
.cd .card { padding: var(--s3); }
.cd .card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.01em; }
.cd .card p { color: var(--muted); margin: 0; }
.cd .card a { color: var(--link); }
.cd .icon-chip {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2);
  border-radius: 14px; color: #ffffff;
  background: linear-gradient(180deg, var(--grad-sheen), rgba(255, 255, 255, 0) 55%), var(--cd-grad);
  box-shadow: 0 6px 16px var(--grad-glow);
}

/* ---------- Video cards on glass ---------- */
.cd .yt-card { padding: 12px; border-radius: 28px; }
.cd .yt-screen { background: rgba(0, 0, 0, 0.35); }

/* ---------- The Islam Habits project card ---------- */
.project {
  display: grid; gap: var(--s4); align-items: center; padding: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  border-radius: 32px;
}
.project-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.project-head h3 { font-family: var(--font-display); font-size: 1.75rem; margin: 0; }
.app-icon {
  position: relative; width: 72px; height: 72px; flex: none; overflow: hidden;
  border-radius: 18px; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.18);
}
.app-icon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-icon img.fg { inset: 14%; width: 72%; height: 72%; }
.project p { color: var(--muted); max-width: 70ch; }
.project .eyebrow { color: var(--text); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.tag { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.project .yt-card { border-radius: 24px; }

/* ---------- Footer ---------- */
.cd .site-footer { border-top: 1px solid var(--glass-edge); }
.cd .social-btn { border-radius: 50%; }

@media (prefers-contrast: more) {
  .glass { outline: 2px solid var(--text); }
}

/* Video status pill as a lit glass capsule (the colour, --pill, comes from islam-habits.css) */
.cd .yt-status .pill {
  width: 26px; height: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    color-mix(in srgb, var(--pill) 85%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 8px var(--pill);
}

/* Design previews: a floating link back to the live version */
.preview-pill {
  position: fixed; left: 50%; bottom: 16px; z-index: 20; transform: translateX(-50%);
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap;
}