/* Islam Habits skin: the app's own palette (ui/theme/Theme.kt) and neumorphic surfaces
   (ui/elements/Neumorphic.kt). Scoped to .ih so the homepage can reuse it for its app card. */

.ih {
  --bg: #f1f1f1;          /* background */
  --bg-hi: #ffffff;       /* backgroundLight: highlight, top-left */
  --bg-lo: #b9b9b9;       /* backgroundDark: shade, bottom-right */
  --text: #1e1e1e;        /* onBackground */
  --muted: #646464;       /* onBackgroundVariant */
  --green: #00f000;
  --green-hi: #d9ff9e;    /* greenLimeLight, to match the logo */
  --green-lo: #00aa00;
  --on-green: #1e1e1e;
  --link: #007a00;        /* greenDark's hue, darkened for AA on --bg */
  --focus: #00aa00;
  --live: #00c800;
  --cast: rgba(0, 0, 0, 0.18);
  --gray: #e2e2e2;        /* knob of the theme switch */
  --gray-hi: #f0f0f0;
  --gray-lo: #aaaaaa;
  color: var(--text);
}
:root[data-theme="dark"] .ih {
  --bg: #2c2c2c;
  --bg-hi: #343434;
  --bg-lo: #232323;
  --text: #e1e1e1;
  --muted: #aaaaaa;
  --green: #00c800;
  --green-hi: #8cf100;    /* greenLimeLight */
  --green-lo: #005000;
  --link: #00c800;
  --focus: #00c800;
  --gray: #aaaaaa;
  --gray-hi: #e2e2e2;
  --gray-lo: #505050;
}

/* Neumorphic surfaces, as in ui/elements/Neumorphic.kt. Both take a depth d (--d):
   .neu     = baseIn3d + cast shadow: inner highlight (-d,-d), inner shade (+d,+d)
   .neu-out = baseOut3d + cast shadow: inner highlight (+d,+d), inner shade (-d,-d) - raised
   Cast shadow: 18% black, blur 2d, offset (d/2, d).
   Resting depth 4px; pressing a surface halves it (NEUMORPHIC_PRESSED_DEPTH_RATIO = 2/4) for the
   inner relief and the cast shadow together, with no other change - like out3dButton/glass3dButton. */
.neu, .neu-out {
  --d-rest: 4px;
  --d: var(--d-rest);
  background: var(--bg);
  border-radius: var(--radius);
}
.neu {
  box-shadow:
    inset calc(var(--d) * -1) calc(var(--d) * -1) var(--d) var(--bg-hi),
    inset var(--d) var(--d) var(--d) var(--bg-lo),
    calc(var(--d) / 2) var(--d) calc(var(--d) * 2) var(--cast);
}
.neu-out {
  box-shadow:
    inset var(--d) var(--d) var(--d) var(--bg-hi),
    inset calc(var(--d) * -1) calc(var(--d) * -1) var(--d) var(--bg-lo),
    calc(var(--d) / 2) var(--d) calc(var(--d) * 2) var(--cast);
}
.neu-sm { --d-rest: 3px; }

/* Press: every clickable surface (and an FAQ card while its question is pressed) */
:is(a, button, summary).neu:active,
:is(a, button, summary).neu-out:active,
details.neu:has(> summary:active) {
  --d: calc(var(--d-rest) / 2);
}

/* Green pill, like the app's selected/primary pills */
.neu-green {
  --bg: var(--green);
  --bg-hi: var(--green-hi);
  --bg-lo: var(--green-lo);
  color: var(--on-green);
}

/* ---------- Islam Habits page ---------- */

/* Side glow: faint Islam Habits greens at the page edges. Delete this block to revert. */
body.ih { isolation: isolate; }
body.ih::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 55% at 0% 30%, rgba(140, 241, 0, 0.13), transparent 70%),
    radial-gradient(30% 55% at 100% 70%, rgba(0, 200, 0, 0.11), transparent 70%);
}
:root[data-theme="dark"] body.ih::before {
  background:
    radial-gradient(30% 55% at 0% 30%, rgba(114, 200, 0, 0.16), transparent 70%),
    radial-gradient(30% 55% at 100% 70%, rgba(0, 200, 0, 0.13), transparent 70%);
}
/* End side glow */

body.ih {
  --page-bg: var(--bg);
  --surface: var(--bg);
  --heading: var(--text);
  --nav-current-bg: transparent;
  background: var(--bg);
}

/* Header bar = card3d (Neumorphic.kt baseCard3d): flat fill, light drop shadow up-left, dark down-right */
body.ih .site-header .wrap {
  --d: 4px;
  background: var(--bg);
  box-shadow: calc(var(--d) * -1) calc(var(--d) * -1) var(--d) var(--bg-hi), var(--d) var(--d) var(--d) var(--bg-lo);
}

/* Header nav items = glass3dButton: cast shadow + baseIn3d, depth halving on press.
   The current page is the green pill, like the app's selected/primary pills. */
body.ih .nav a {
  --d-rest: 3px;
  --d: var(--d-rest);
  background: var(--bg);
  color: var(--text);
  box-shadow:
    inset calc(var(--d) * -1) calc(var(--d) * -1) var(--d) var(--bg-hi),
    inset var(--d) var(--d) var(--d) var(--bg-lo),
    calc(var(--d) / 2) var(--d) calc(var(--d) * 2) var(--cast);
}
body.ih .nav a[aria-current="page"] {
  --bg: var(--green);
  --bg-hi: var(--green-hi);
  --bg-lo: var(--green-lo);
  color: var(--on-green);
}
body.ih .nav a:active { --d: calc(var(--d-rest) / 2); }

.ih-hero { text-align: center; padding-block: var(--s5) var(--s6); }
.ih-hero .splash-logo {
  width: clamp(160px, 30vw, 240px); height: auto; margin: 0 auto var(--s3);
}
.ih-hero .app-name { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; margin-bottom: var(--s1); }
.ih-hero h1 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.375rem, 3vw, 1.875rem); letter-spacing: -0.01em; margin-inline: auto; max-width: 30ch; }
.ih-hero .lead { margin-inline: auto; color: var(--muted); }
.ih-hero .actions { justify-content: center; }
.ih-hero .eyebrow { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--text); margin-bottom: var(--s3); }
.by-cd { display: inline-block; margin-top: var(--s3); font-size: 0.875rem; color: var(--muted); }

.ih .btn { color: var(--text); }
.ih .btn.neu-green { color: var(--on-green); }
.btn.neu, .btn.neu-out { border-radius: var(--radius-pill); }

.card.neu { padding: var(--s3); }
.card.neu h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; }
.card.neu p { color: var(--muted); margin: 0; }
.icon-chip {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2);
  border-radius: 14px; color: var(--on-green);
}

/* Video card = the app's YouTubeVideoOut3dCard: an out3d (raised) frame, 16:9 screen with MidCard corners (8% of its short side), and the status pill band below. */
.yt-card { padding: 12px; display: grid; gap: 10px; container-type: inline-size; }
.yt-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-hi);
  border-radius: 4.5cqw; /* 8% of the 16:9 screen's height */
}
.yt-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Control-free players are overscanned a touch so no hairline of letterbox shows at their edges */
.yt-screen iframe[data-autoplay="view"] { transform: scale(1.02); }

/* Autoplaying videos (video.js): a clear shield over the player keeps YouTube's controls and hover
   overlay off screen, and taps on it toggle the sound shown by the speaker badge. */
.yt-shield {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.yt-shield:focus-visible { outline-offset: -3px; }
.yt-sound {
  position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #ffffff;
}
.yt-sound svg { width: 20px; height: 20px; }
.yt-shield .on, .yt-shield[aria-pressed="true"] .off { display: none; }
.yt-shield[aria-pressed="true"] .on { display: block; }

/* Join: steps beside the how-to-join video, stacked on phones */
.join-grid { display: grid; gap: var(--s4); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Status pill: yellow breathing to yellowLight while loading, green when ready, red when failed */
.yt-status { display: flex; justify-content: center; align-items: center; height: 14px; }
.yt-status .pill {
  --pd: 1px;
  width: 22px; height: 8px; border-radius: 999px;
  background: var(--pill); 
  box-shadow:
    inset var(--pd) var(--pd) var(--pd) var(--pill-hi),
    inset calc(var(--pd) * -1) calc(var(--pd) * -1) var(--pd) var(--pill-lo),
    0.5px 1px 2px var(--cast);
  transition: background-color 300ms ease;
}
.yt-status[data-status="loading"] { --pill: #ffe600; --pill-hi: #fff4b5; --pill-lo: #c4aa00; }
.yt-status[data-status="ready"]   { --pill: #00f000; --pill-hi: #a6ffa6; --pill-lo: #00aa00; }
.yt-status[data-status="failed"]  { --pill: #f00000; --pill-hi: #ff6161; --pill-lo: #7b0000; }
:root[data-theme="dark"] .yt-status[data-status="loading"] { --pill: #dcbe00; --pill-hi: #ffe600; --pill-lo: #504500; }
:root[data-theme="dark"] .yt-status[data-status="ready"]   { --pill: #00c800; --pill-hi: #00f000; --pill-lo: #005000; }
:root[data-theme="dark"] .yt-status[data-status="failed"]  { --pill: #b00000; --pill-hi: #e70000; --pill-lo: #380000; }
.yt-status[data-status="loading"] .pill { animation: yt-breathe 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
@keyframes yt-breathe { to { background-color: var(--pill-hi); } }


.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); align-items: start; padding: var(--s2) var(--s3); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-display); background: var(--green); color: var(--on-green);
  box-shadow: inset -2px -2px 3px var(--green-hi), inset 2px 2px 3px var(--green-lo);
}
.steps a { overflow-wrap: anywhere; }

.faq { display: grid; gap: var(--s2); }
.faq details { padding: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s2) var(--s3); font-weight: 700; border-radius: var(--radius);
  display: flex; justify-content: space-between; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--link); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 var(--s3) var(--s3); margin: 0; color: var(--muted); }

body.ih .site-footer { border-top: 1px solid color-mix(in srgb, var(--bg-lo) 60%, transparent); }