/* Clarity Daily — full-viewport embossed plaques + NurOS icons
   Self-contained like Campus. Educational only — not a fatwa.
*/
:root {
  --bg: #0a100c;
  --card: #14201a;
  --card-top: #1c2e26;
  --gold: #d4b45a;
  --gold-bright: #f0d78c;
  --gold-soft: rgba(212, 180, 90, 0.38);
  --text: #e8f0ea;
  --muted: #9aab9f;
  --green: #0d4f3c;
  --green-deep: #0f1c18;
  --header: linear-gradient(90deg, #0a2a40, #0d4f3c);
  --radius: 1.2rem;
  --emboss: inset 0 1px 0 rgba(240, 215, 140, 0.12),
             inset 0 -1px 0 rgba(0, 0, 0, 0.35),
             0 4px 18px rgba(0, 0, 0, 0.35);
  --plaque-pad: 1.15rem 1.25rem;
}

html[data-theme="light"] {
  --bg: #f2efe6;
  --card: #fffcf6;
  --card-top: #fffdf9;
  --gold: #9a7b2f;
  --gold-bright: #c9a84c;
  --gold-soft: rgba(154, 123, 47, 0.32);
  --text: #1a241c;
  --muted: #5c6b60;
  --green: #1a5c45;
  --green-deep: #e8f0ea;
  --header: linear-gradient(90deg, #1a3a4a, #1a5c45);
  --emboss: inset 0 1px 0 rgba(255, 255, 255, 0.85),
             inset 0 -1px 0 rgba(0, 0, 0, 0.06),
             0 3px 14px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background 0.25s, color 0.25s;
}

.daily-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.25rem;
  background: var(--header);
  width: 100%;
}
.daily-header .brand {
  color: #f3e6c0;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.header-actions a {
  color: #f3e6c0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
#theme-toggle {
  background: transparent;
  border: 1px solid rgba(243, 230, 192, 0.4);
  color: #f3e6c0;
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

nav.top {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.25rem;
  width: 100%;
}
nav.top a {
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.88rem;
}
nav.top a.here {
  background: rgba(212, 180, 90, 0.16);
  font-weight: 700;
}

/* Banner — full viewport, full scene */
.daily-banner {
  margin: 0;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  border: none;
  border-bottom: 1.5px solid var(--gold-soft);
  background: #0a100c;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  position: relative;
}
.daily-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
}

main {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.85rem 1.15rem 3rem;
}

/* Dual tiles — embossed + icons */
.dual-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0 1.1rem;
}
@media (max-width: 620px) {
  .dual-tiles { grid-template-columns: 1fr; }
}
a.dual-tile,
.dual-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none !important;
  color: var(--text) !important;
  border-radius: 16px;
  padding: 0.95rem 1.05rem;
  background: linear-gradient(165deg, var(--card-top) 0%, var(--card) 55%, var(--green-deep) 100%);
  border: 1.5px solid rgba(212, 180, 90, 0.45);
  box-shadow: var(--emboss);
  transition: border-color 0.15s, transform 0.12s;
}
a.dual-tile:hover,
.dual-tile:hover {
  border-color: var(--gold-bright);
  transform: translateY(-2px);
}
.dual-tile .nuros {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
}
.dual-tile .tile-text { flex: 1; min-width: 0; }
.dual-tile strong {
  display: block;
  color: var(--gold) !important;
  font-size: 1.05rem;
  margin-bottom: 0.12rem;
}
.dual-tile small {
  display: block;
  opacity: 0.88;
  font-size: 0.82rem;
  color: var(--muted) !important;
}

/* Embossed plaque cards */
.cdl-card {
  border-radius: var(--radius);
  border: 1.5px solid rgba(212, 180, 90, 0.42);
  background: linear-gradient(165deg, var(--card-top) 0%, var(--card) 50%, var(--green-deep) 100%);
  padding: var(--plaque-pad);
  margin: 0.7rem 0;
  color: var(--text);
  box-shadow: var(--emboss);
  position: relative;
}
.cdl-oath {
  border-color: rgba(212, 180, 90, 0.55);
  background: linear-gradient(165deg, #1e322a 0%, #15241e 55%, #0e1a14 100%);
}
html[data-theme="light"] .cdl-oath {
  background: linear-gradient(165deg, #fffef9, #f7f1e4);
}

.cdl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}
.cdl-head-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.cdl-head .nuros {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  border-radius: 50%;
}
.cdl-head h2 {
  margin: 0;
  color: var(--gold);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cdl-period, .cdl-lane, .cdl-note, .cdl-adhkar-ref, .cdl-sub {
  color: var(--muted);
  font-size: 0.86rem;
}
.cdl-sub { margin: 0.3rem 0 0.5rem; }
.cdl-sub strong { color: var(--gold-bright); }
.cdl-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.45rem 0;
  align-items: center;
}
.cdl-deed {
  font-size: 1.06rem;
  margin: 0.4rem 0;
  line-height: 1.45;
}
.tas-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.streak-badge {
  background: rgba(80, 180, 120, 0.18);
  border: 1px solid rgba(80, 180, 120, 0.45);
  color: #7dcea0;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
}
html[data-theme="light"] .streak-badge {
  color: #1a5c45;
  background: rgba(26, 92, 69, 0.12);
}

.cdl-adhkar-item {
  border-top: 1px solid var(--gold-soft);
  padding: 0.8rem 0 0.5rem;
  margin-top: 0.5rem;
}
.cdl-adhkar-item:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0.25rem;
}
.cdl-adhkar-ar {
  direction: rtl;
  text-align: right;
  font-size: 1.38rem;
  line-height: 1.9;
  color: var(--gold-bright);
  margin: 0.35rem 0;
  font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;
}
.cdl-adhkar-en { margin: 0.22rem 0; opacity: 0.95; }
.cdl-count { font-size: 0.88rem; color: var(--muted); margin: 0.28rem 0; }

.cdl-expandable { padding: 0.65rem 1.15rem; }
.cdl-expand-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 1.02rem;
  font-weight: 700;
  padding: 0.4rem 0;
  cursor: pointer;
  text-align: left;
}
.cdl-expand-btn .nuros {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  margin-right: 0.35rem;
}
.cdl-expand-btn .btn-label {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.cdl-expand-btn .chev { color: var(--gold); font-size: 1.05rem; flex-shrink: 0; }
.cdl-expand-body { padding: 0.4rem 0 0.55rem; }
.cdl-step {
  border-top: 1px solid var(--gold-soft);
  padding: 0.65rem 0;
}
.cdl-step:first-child { border-top: none; }
.cdl-step strong { color: var(--gold); display: block; margin-bottom: 0.18rem; }
.cdl-step p { margin: 0.18rem 0; }
.cdl-tip { font-size: 0.86rem; color: var(--muted); font-style: italic; }
.cdl-step a { color: var(--gold); text-decoration: none; }
.cdl-step a:hover { text-decoration: underline; }

.prov-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-top: 1px solid var(--gold-soft);
}
.prov-item:first-child { border-top: none; }
.prov-item.today {
  background: rgba(212, 180, 90, 0.1);
  margin: 0 -0.45rem;
  padding: 0.55rem 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(212, 180, 90, 0.25);
}
.prov-lane {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212, 180, 90, 0.14);
  border-radius: 7px;
  padding: 0.18rem 0.45rem;
  min-width: 4.4rem;
  text-align: center;
}
.prov-text { font-size: 0.9rem; margin: 0; }

.cdl-light-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 560px) {
  .cdl-light-row { grid-template-columns: 1fr 1fr 1fr; }
}
.cdl-light-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  background: var(--bg);
  border: 1.5px solid var(--gold-soft);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(240, 215, 140, 0.06);
  transition: border-color 0.15s, background 0.15s;
}
.cdl-light-btn strong { color: var(--gold); font-size: 0.92rem; }
.cdl-light-btn small { color: var(--muted); font-size: 0.78rem; }
.cdl-light-btn.done {
  border-color: rgba(80, 180, 120, 0.55);
  background: rgba(13, 79, 60, 0.3);
}
.cdl-light-btn.done strong::after { content: " ✓"; color: #7dcea0; }
html[data-theme="light"] .cdl-light-btn.done {
  background: rgba(26, 92, 69, 0.12);
}

.cdl-protect {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--text);
}
.cdl-protect li { margin: 0.25rem 0; }

.cdl-hist-row {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0.3rem 0;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 0.3rem;
}

button {
  background: var(--green);
  color: #f3e6c0;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
button:hover { filter: brightness(1.1); }
button.primary { margin: 0.35rem 0 0.2rem; }
html[data-theme="light"] button { color: #fffdf8; }

.cdl-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  margin: 1.5rem 0 0.5rem;
  line-height: 1.45;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  main { padding-left: 1.75rem; padding-right: 1.75rem; }
  .daily-banner img { max-height: 38vh; }
}
@media (min-width: 1200px) {
  main { max-width: 64rem; }
}






/* ========== Banner: full scene + gravity ========== */
.daily-banner {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border: none;
  border-bottom: 1.5px solid var(--gold-soft);
  background: #070c09;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}
.daily-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
}

/* Glassy horizontal plaque — higher & wider to clear title */
.banner-verse-plaque {
  position: absolute;
  left: 50%;
  top: 2.5%;
  transform: translateX(-50%);
  width: min(98%, 52rem);
  padding: 0.45rem 1.25rem 0.55rem;
  border-radius: 0.6rem;
  background: rgba(6, 14, 10, 0.28);
  border: 1px solid rgba(212, 180, 90, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  text-align: center;
}
.banner-verse-plaque .bismillah {
  margin: 0 0 0.12rem;
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;
  font-size: clamp(0.72rem, 1.55vw, 0.88rem);
  font-weight: 600;
  color: #e8d9a8;
  opacity: 0.92;
  line-height: 1.55;
}
.banner-verse-plaque .verse-ar {
  margin: 0 0 0.2rem;
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;
  font-size: clamp(0.78rem, 1.85vw, 1.05rem);
  font-weight: 600;
  line-height: 1.7;
  color: #f5e6b8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  white-space: normal;
  max-width: 100%;
  display: block;
}
@media (min-width: 900px) {
  .banner-verse-plaque .verse-ar {
    white-space: nowrap;
    font-size: 1.05rem;
    line-height: 1.65;
  }
}
.banner-verse-plaque .verse-en {
  margin: 0 0 0.1rem;
  font-family: "EB Garamond", "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(0.78rem, 1.7vw, 0.95rem);
  font-weight: 600;
  font-style: italic;
  color: #e8f0ea;
  line-height: 1.35;
  letter-spacing: 0.02em;
  opacity: 0.96;
}
.banner-verse-plaque .verse-ref {
  margin: 0;
  font-size: 0.64rem;
  color: rgba(212, 180, 90, 0.78);
  letter-spacing: 0.02em;
}

/* Gravity — larger type, snug to banner bottom edge */
.banner-gravity {
  position: absolute;
  left: 42%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(90%, 42rem);
  max-width: 42rem;
  padding: 0.55rem 1.15rem 0.7rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid rgba(212, 180, 90, 0.42);
  border-bottom: none;
  background: rgba(5, 10, 8, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -2px 14px rgba(0,0,0,0.35);
  text-align: center;
}
.banner-gravity .gravity-line {
  margin: 0;
  font-family: "EB Garamond", "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(0.88rem, 2.1vw, 1.12rem);
  font-weight: 700;
  font-style: italic;
  color: #f3e6c0;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Mobile banner refinement ---- */
@media (max-width: 640px) {
  .banner-verse-plaque {
    top: 2%;
    width: 96%;
    padding: 0.32rem 0.55rem 0.36rem;
    border-radius: 0.5rem;
  }
  .banner-verse-plaque .bismillah {
    font-size: 0.68rem;
  }
  .banner-verse-plaque .verse-ar {
    font-size: 0.78rem;
    line-height: 1.65;
    white-space: normal;
  }
  .banner-verse-plaque .verse-en {
    font-size: 0.7rem;
  }
  .banner-verse-plaque .bismillah {
    font-size: 0.65rem;
  }
  .banner-verse-plaque .verse-en {
    font-size: 0.68rem;
    line-height: 1.25;
  }
  .banner-verse-plaque .verse-ref {
    font-size: 0.58rem;
  }
  .banner-gravity {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: none;
    bottom: 0;
    padding: 0.48rem 0.6rem 0.65rem;
    border-radius: 0.45rem 0.45rem 0 0;
  }
  .banner-gravity .gravity-line {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Desktop: plaque sits clearly above title band */
@media (min-width: 900px) {
  .banner-verse-plaque {
    top: 2%;
    width: min(96%, 56rem);
    padding: 0.55rem 1.5rem 0.65rem;
  }
  .banner-verse-plaque .verse-ar {
    font-size: 1.08rem;
    white-space: nowrap;
  }
  .banner-gravity {
    left: 40%;
    bottom: 0;
    width: min(88%, 44rem);
    padding: 0.58rem 1.25rem 0.75rem;
  }
  .banner-gravity .gravity-line {
    font-size: 1.12rem;
    white-space: nowrap;
  }
}


/* =========================================================
   Mobile responsiveness — optimized
   ========================================================= */

/* Safe areas (notches / home indicator) */
@supports (padding: max(0px)) {
  .daily-header {
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
  }
  nav.top {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  main {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }
}

/* ---- Phones (≤640px) ---- */
@media (max-width: 640px) {
  :root {
    --plaque-pad: 0.85rem 0.9rem;
    --radius: 1rem;
  }

  .daily-header {
    padding: 0.55rem 0.85rem;
  }
  .daily-header .brand {
    font-size: 0.98rem;
  }
  .header-actions a {
    font-size: 0.82rem;
  }
  #theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    /* larger touch target */
  }

  nav.top {
    padding: 0.4rem 0.75rem 0.5rem;
    gap: 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.top::-webkit-scrollbar { display: none; }
  nav.top a {
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
    /* min touch height ~36px */
    min-height: 2.1rem;
    display: inline-flex;
    align-items: center;
  }

  main {
    padding: 0.55rem 0.75rem 2.75rem;
  }

  /* Dual tiles stack cleanly */
  .dual-tiles {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0.35rem 0 0.75rem;
  }
  a.dual-tile,
  .dual-tile {
    padding: 0.8rem 0.9rem;
    gap: 0.65rem;
    border-radius: 14px;
  }
  .dual-tile .nuros {
    width: 2.35rem;
    height: 2.35rem;
  }
  .dual-tile strong {
    font-size: 0.98rem;
  }
  .dual-tile small {
    font-size: 0.78rem;
  }

  /* Cards */
  .cdl-card {
    margin: 0.55rem 0;
    border-radius: 1rem;
  }
  .cdl-head h2 {
    font-size: 1.02rem;
  }
  .cdl-head .nuros {
    width: 1.65rem;
    height: 1.65rem;
  }
  .cdl-deed {
    font-size: 1rem;
  }
  .cdl-sub {
    font-size: 0.84rem;
  }
  .cdl-note {
    font-size: 0.8rem;
  }

  /* Arabic readable on narrow screens without overflow */
  .cdl-adhkar-ar {
    font-size: 1.2rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
  }

  /* Expand buttons — full-width touch */
  .cdl-expandable {
    padding: 0.55rem 0.85rem;
  }
  .cdl-expand-btn {
    min-height: 2.6rem;
    font-size: 0.95rem;
    padding: 0.45rem 0;
  }
  .cdl-expand-btn .nuros {
    width: 1.55rem;
    height: 1.55rem;
  }

  /* Buttons — 44px-class touch targets */
  button {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  button.primary {
    width: 100%;
    margin-top: 0.4rem;
  }
  .tas-wrap button {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
  }

  /* Pillars — single column, readable */
  .pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 0.45rem;
  }
  .pillar-card {
    padding: 0.7rem 0.8rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
  }
  .pillar-card .nuros {
    width: 2rem;
    height: 2rem;
  }
  .pillar-card strong {
    font-size: 0.95rem;
  }
  .pillar-card small {
    flex: 1 1 100%;
    font-size: 0.78rem;
    padding-left: 2.65rem; /* align under text after icon */
    margin-top: -0.15rem;
  }

  /* Farḍ chips — horizontal scroll if needed */
  .fard-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
  }
  .fard-row::-webkit-scrollbar { display: none; }
  .fard-chip {
    flex: 0 0 auto;
    min-width: 3.8rem;
    padding: 0.5rem 0.45rem;
  }
  .fard-chip strong {
    font-size: 1.2rem;
  }
  .fard-chip span {
    font-size: 0.72rem;
  }

  /* Send light — stack */
  .cdl-light-row {
    grid-template-columns: 1fr !important;
  }
  .cdl-light-btn {
    padding: 0.75rem 0.85rem;
    min-height: 3rem;
  }

  /* Provisions */
  .prov-lane {
    min-width: 3.8rem;
    font-size: 0.7rem;
  }
  .prov-text {
    font-size: 0.86rem;
  }

  .cdl-footer {
    font-size: 0.74rem;
    padding: 0 0.25rem;
  }

  /* Banner — zoom out full scene on mobile */
  .daily-banner {
    min-height: 0;
  }
  .daily-banner img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }
  .banner-verse-plaque {
    background: rgba(6, 14, 10, 0.32);
  }
  .banner-gravity {
    background: rgba(5, 10, 8, 0.45);
  }
}

/* ---- Very small phones (≤380px) ---- */
@media (max-width: 380px) {
  .daily-header .brand {
    font-size: 0.92rem;
  }
  .banner-verse-plaque .verse-ar {
    font-size: 0.86rem;
  }
  .banner-gravity .gravity-line {
    font-size: 0.74rem;
  }
  .cdl-adhkar-ar {
    font-size: 1.1rem;
  }
  .pillar-card small {
    padding-left: 0;
  }
}

/* ---- Tablet portrait (641–899px) ---- */
@media (min-width: 641px) and (max-width: 899px) {
  main {
    padding: 0.75rem 1.25rem 2.75rem;
    max-width: 42rem;
  }
  .dual-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cdl-light-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  a.dual-tile,
  .dual-tile,
  button,
  .cdl-light-btn {
    transition: none;
  }
  a.dual-tile:hover,
  .dual-tile:hover {
    transform: none;
  }
}

/* Prevent horizontal page scroll from long Arabic */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.cdl-adhkar-ar,
.verse-ar,
.banner-verse-plaque {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Phase modules: now, fard check, continuity */
.cdl-now {
  border-color: rgba(212, 180, 90, 0.55);
}
.cdl-now .now-text {
  font-size: 1.05rem;
  margin: 0.35rem 0;
}
.fard-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.fard-check-btn {
  flex: 1 1 4.5rem;
  min-width: 4.2rem;
  padding: 0.55rem 0.5rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1.5px solid var(--gold-soft);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(240, 215, 140, 0.06);
}
.fard-check-btn strong {
  color: var(--gold);
  font-size: 0.9rem;
}
.fard-check-btn.done {
  border-color: rgba(80, 180, 120, 0.55);
  background: rgba(13, 79, 60, 0.3);
}
.fard-check-btn.done strong::after {
  content: " ✓";
  color: #7dcea0;
}
.cdl-adhkar-item.adh-done {
  opacity: 0.72;
}
.cdl-continuity {
  text-align: center;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--gold);
  margin: 1.25rem auto 0.5rem;
  max-width: 36rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .fard-check-btn {
    min-height: 2.6rem;
  }
}

/* Y0 Banner lock · Yawm enriched · 20261029E */
.yawm-hub a{background:rgba(255,255,255,.04)}
.yawm-hub a:hover{border-color:#c9a84c}

/* === Yawm modules · glass + quill · 20261029Q === */
.yawm-hub{
  display:grid;
  gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(10.2rem,1fr));
  margin:.35rem 0 1.15rem;
}
.yawm-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
  padding:1rem .95rem .9rem;
  border-radius:1.05rem;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(201,168,76,.38);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(12,40,32,.35) 48%, rgba(8,24,20,.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
  transition: border-color .2s, transform .15s;
}
.yawm-tile::before{
  content:"";
  position:absolute;
  top:-20%;
  right:-15%;
  width:4.5rem;
  height:4.5rem;
  background:url("icons/nuros-scroll.svg") center/contain no-repeat;
  opacity:.07;
  pointer-events:none;
}
.yawm-tile:hover{
  border-color:#e0c56a;
  transform:translateY(-2px);
}
.yawm-tile .yt-icon{
  width:2.35rem;
  height:2.35rem;
  padding:.35rem;
  border-radius:12px;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.yawm-tile strong{
  display:block;
  font-size:.95rem;
  color:#e8d5a3;
  font-weight:800;
  letter-spacing:.01em;
}
.yawm-tile small{
  display:block;
  font-size:.72rem;
  line-height:1.35;
  opacity:.88;
}
/* Mini ʿAṣr gate on modules */
.yawm-mini-banner{
  position:relative;
  margin:0 0 1rem;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(201,168,76,.4);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.yawm-mini-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(22vh,160px);
  object-fit:cover;
  filter:saturate(1.05) brightness(.92);
}
.yawm-mini-plaque{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92%,28rem);
  padding:.45rem .65rem;
  border-radius:.75rem;
  text-align:center;
  background:rgba(6,18,14,.7);
  border:1px solid rgba(201,168,76,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.yawm-mini-plaque .mp-title{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1rem,3.5vw,1.25rem);
  color:#e8d5a3;
  font-weight:700;
}
.yawm-mini-plaque .mp-sub{
  margin:.15rem 0 0;
  font-size:.68rem;
  opacity:.9;
  font-style:italic;
}
.yawm-quill-rule{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:.35rem 0 1rem;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#c9a84c;
}
.yawm-quill-rule::before,
.yawm-quill-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.55), transparent);
}
.glass-plaque{
  margin:1rem 0;
  padding:1.1rem 1.15rem;
  border-radius:1.1rem;
  border:1px solid rgba(201,168,76,.36);
  background:
    linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(14,36,28,.4) 55%, rgba(8,22,18,.65) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 32px rgba(0,0,0,.3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.glass-plaque h1{
  margin:0 0 .5rem;
  font-family:"Cormorant Garamond",serif;
  font-size:1.35rem;
  color:#e8d5a3;
}
.glass-plaque .ar{
  font-family:"Noto Naskh Arabic",Amiri,serif;
  font-size:1.15rem;
  line-height:1.95;
  direction:rtl;
  text-align:right;
  color:#f5f0e6;
}
html[data-theme="light"] .yawm-tile,
html[data-theme="light"] .glass-plaque{
  background:linear-gradient(145deg,#fffef8,#f3efe0);
  color:#1a2e24;
}
html[data-theme="light"] .yawm-tile strong,
html[data-theme="light"] .glass-plaque h1{color:#6b5a1e}


/* === Yawm 2×3 symmetric hub · mini-banner bottom · 20261029G === */
.yawm-hub{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:.65rem !important;
  width:100% !important;
  max-width:100% !important;
  margin:.5rem 0 1.25rem !important;
  box-sizing:border-box;
}
.yawm-tile{
  min-height:6.5rem;
  justify-content:flex-start;
  width:100%;
  box-sizing:border-box;
}
@media (max-width:520px){
  .yawm-hub{grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:.45rem !important}
  .yawm-tile{padding:.7rem .55rem; min-height:5.8rem}
  .yawm-tile strong{font-size:.82rem}
  .yawm-tile small{font-size:.65rem}
  .yawm-tile .yt-icon{width:1.85rem;height:1.85rem;padding:.25rem}
}
/* Mini banner: text along bottom edge */
.yawm-mini-banner{
  position:relative;
  margin:0 0 1rem;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(201,168,76,.4);
}
.yawm-mini-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(28vh,180px);
  object-fit:cover;
  object-position:center 40%;
}
.yawm-mini-plaque{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:none !important;
  padding:.55rem .85rem .65rem !important;
  border-radius:0 !important;
  border:none !important;
  border-top:1px solid rgba(201,168,76,.35) !important;
  background:linear-gradient(0deg, rgba(4,14,12,.92) 0%, rgba(4,14,12,.75) 70%, rgba(4,14,12,.35) 100%) !important;
  text-align:left !important;
  box-sizing:border-box;
}
.yawm-mini-plaque .mp-title{
  margin:0 !important;
  font-size:clamp(.95rem,2.8vw,1.15rem) !important;
  color:#e8d5a3 !important;
}
.yawm-mini-plaque .mp-sub{
  margin:.2rem 0 0 !important;
  font-size:.72rem !important;
  opacity:.92 !important;
  font-style:italic;
}
.ext-links{
  margin-top:1rem;
  padding-top:.75rem;
  border-top:1px solid rgba(201,168,76,.25);
  font-size:.8rem;
  line-height:1.55;
}
.ext-links a{color:#e0c56a}
.ext-links .note{display:block;margin-top:.35rem;font-size:.72rem;opacity:.85}

/* === Mini banner transparent center · module harmony · 20261029H === */
.yawm-mini-banner{
  position:relative;
  margin:0 0 1.1rem;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(201,168,76,.38);
  box-shadow:0 12px 36px rgba(0,0,0,.32);
}
.yawm-mini-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(32vh,200px);
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(1.08) brightness(.88);
}
.yawm-mini-plaque{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(90%,26rem) !important;
  max-width:90% !important;
  padding:.7rem 1rem !important;
  border-radius:.9rem !important;
  text-align:center !important;
  background:rgba(8,22,18,.28) !important;
  border:1px solid rgba(201,168,76,.42) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 20px rgba(0,0,0,.2) !important;
}
.yawm-mini-plaque .mp-title{
  margin:0 !important;
  font-family:"Cormorant Garamond",serif !important;
  font-size:clamp(1.05rem,3.2vw,1.35rem) !important;
  font-weight:700 !important;
  color:#f3e6c0 !important;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.yawm-mini-plaque .mp-sub{
  margin:.3rem 0 0 !important;
  font-size:clamp(.72rem,2.2vw,.86rem) !important;
  color:#f0ebe0 !important;
  opacity:.95 !important;
  font-style:italic;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.mod-shell{
  max-width:48rem;
  margin:0 auto;
  padding:0 .85rem 2.75rem;
  box-sizing:border-box;
}
.mod-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(201,168,76,.22);
}
.mod-top .brand{font-weight:800;color:#c9a84c;text-decoration:none;font-size:1rem}
.mod-pills{
  display:flex;flex-wrap:wrap;gap:.4rem;margin:.65rem 0 1rem;
}
.mod-pills a{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.32rem .7rem;border-radius:999px;font-size:.74rem;font-weight:600;
  border:1px solid rgba(201,168,76,.32);text-decoration:none;color:inherit;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mod-pills a.here{
  background:rgba(30,125,94,.42);
  border-color:transparent;
  color:#fff;
}
.mod-pills a img{width:1.05rem;height:1.05rem}
.glass-plaque{
  margin:0.85rem 0 1rem;
  padding:1.15rem 1.2rem;
  border-radius:1.15rem;
  border:1px solid rgba(201,168,76,.36);
  background:
    linear-gradient(155deg, rgba(255,255,255,.1) 0%, rgba(14,40,32,.42) 50%, rgba(8,24,20,.62) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 36px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.glass-plaque h1{
  margin:0 0 .55rem;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.25rem,4vw,1.5rem);
  color:#e8d5a3;
}
.enrich-block{
  margin:1rem 0;
  padding:1rem 1.1rem;
  border-radius:1rem;
  border:1px dashed rgba(201,168,76,.35);
  background:rgba(12,36,28,.35);
  font-size:.9rem;
  line-height:1.55;
}
.enrich-block h2{
  margin:0 0 .45rem;
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#c9a84c;
  font-weight:800;
}
.enrich-block ul{margin:.35rem 0 .5rem 1.1rem;padding:0}
.enrich-block li{margin:.25rem 0}
.ext-links{
  margin-top:1.1rem;
  padding:0.9rem 1rem;
  border-radius:.9rem;
  border:1px solid rgba(201,168,76,.28);
  background:rgba(0,0,0,.2);
  font-size:.8rem;
  line-height:1.55;
}
.ext-links a{color:#e0c56a;font-weight:600}
.ext-links .note{display:block;margin-top:.4rem;font-size:.72rem;opacity:.88}

/* === Cache-era mobile + top plaque · 20261029R1 === */
.yawm-mini-plaque{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  bottom:auto !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(94%,28rem) !important;
  max-width:94% !important;
  margin-top:.55rem !important;
  padding:.55rem .85rem !important;
  border-radius:.85rem !important;
  text-align:center !important;
  background:rgba(6,16,14,.32) !important;
  border:1px solid rgba(201,168,76,.45) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.25) !important;
  z-index:2;
}
.yawm-mini-banner img{
  max-height:min(28vh,190px) !important;
  object-position:center 45% !important;
}
/* Mobile hub */
@media (max-width:640px){
  .daily-header{padding:.55rem .65rem}
  .yawm-hub{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.4rem !important;
  }
  .yawm-tile{
    min-height:5.4rem;
    padding:.55rem .4rem .5rem;
  }
  .yawm-tile strong{font-size:.74rem}
  .yawm-tile small{font-size:.6rem;line-height:1.25}
  .yawm-tile .yt-icon{width:1.65rem;height:1.65rem}
  .mod-shell{padding:0 .55rem 2.25rem}
  .mod-pills a{font-size:.68rem;padding:.28rem .5rem}
  .glass-plaque{padding:.95rem .85rem;border-radius:1rem}
  .enrich-block{padding:.85rem .8rem;font-size:.86rem}
  .banner-verse-plaque{width:min(96%,36rem);padding:.45rem .55rem}
  .banner-verse-plaque .verse-ar{font-size:clamp(.82rem,3.4vw,1.05rem)}
  .banner-gravity{width:min(96%,34rem);padding:.35rem .5rem}
  .banner-gravity .gravity-line{font-size:clamp(.7rem,3vw,.85rem)}
  .dual-tiles{grid-template-columns:1fr;gap:.5rem}
}
@media (max-width:380px){
  .yawm-hub{gap:.32rem !important}
  .yawm-tile strong{font-size:.7rem}
}
.reward-card{
  margin:1rem 0;
  padding:1rem 1.05rem;
  border-radius:1rem;
  border:1px solid rgba(201,168,76,.4);
  background:linear-gradient(145deg,rgba(30,125,94,.18),rgba(8,24,20,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.reward-card h2{
  margin:0 0 .5rem;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c9a84c;
}
.reward-card .ar{
  font-family:"Noto Naskh Arabic",serif;
  direction:rtl;
  text-align:right;
  font-size:1.08rem;
  line-height:1.9;
  margin:.35rem 0;
}
.reward-card .meta{
  font-size:.75rem;
  color:#e0c56a;
  margin-top:.35rem;
}
.reward-card .grade{
  display:inline-block;
  margin-top:.25rem;
  padding:.12rem .45rem;
  border-radius:999px;
  font-size:.68rem;
  background:rgba(201,168,76,.2);
  border:1px solid rgba(201,168,76,.35);
}

/* Y4 enrichment */
.cdl-pillar-grid{display:grid;grid-template-columns:1fr;gap:0.55rem;margin:0.5rem 0}
@media(min-width:700px){.cdl-pillar-grid{grid-template-columns:repeat(3,1fr)}}
.cdl-pillar{padding:0.65rem 0.75rem;border-radius:12px;border:1px solid rgba(212,180,90,0.25);background:rgba(15,76,58,0.12)}
.cdl-pillar strong{display:block;color:#e8d5a3;font-size:0.95rem}
.cdl-pillar small{opacity:0.85;font-size:0.78rem;line-height:1.35}
.cdl-rakah-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.4rem;margin:0.5rem 0}
@media(max-width:560px){.cdl-rakah-grid{grid-template-columns:repeat(3,1fr)}}
.cdl-rakah{text-align:center;padding:0.5rem 0.25rem;border-radius:12px;border:1px solid rgba(212,180,90,0.22);background:rgba(0,0,0,0.2)}
.cdl-rakah-n{display:block;font-size:1.35rem;font-weight:800;color:#e8d48a}
#yawm-registry-bridge a{color:#c9a84c;font-weight:700}

.cdl-pillar-trio{display:grid;gap:0.5rem;margin:0.5rem 0}
@media(min-width:700px){.cdl-pillar-trio{grid-template-columns:1fr 1fr 1fr}}
.cdl-pillar-trio .cdl-pillar a{color:#c9a84c;font-weight:700;font-size:0.78rem}
#cdl-pillar-deepen .cdl-note a{text-decoration:none}