/* ═══════════════════════════════════════════════
   IBADAH HARIAN — warm/spiritual feature module
   Palette: parchment · sage green · antique gold · clay
   Type: Cormorant Garamond (display) · DM Sans (ui) · Amiri (ar)
   Scoped under #scr-ibadah / .ih-screen so it never leaks
   into the Charcoal & Sage app shell.
   ═══════════════════════════════════════════════ */

#scr-ibadah {
  /* warm tokens */
  --ih-paper:    #F1EADB;
  --ih-cream:    #FBF7EF;
  --ih-white:    #FFFFFF;
  --ih-ink:      #2C2A22;
  --ih-ink2:     #736E60;
  --ih-ink3:     #A39C8A;
  --ih-line:     #ECE4D3;
  --ih-line2:    #F2ECDE;
  --ih-green:    #3C6B54;
  --ih-greenD:   #2E5642;
  --ih-greenMid: #5E8A6F;
  --ih-greenBg:  #E7EFE7;
  --ih-greenBg2: #EFF4EC;
  --ih-gold:     #B08A45;
  --ih-goldD:    #8E6E33;
  --ih-goldBg:   #F4EBD4;
  --ih-clay:     #A9724E;
  --ih-clayBg:   #F1E4D8;
  --ih-serif:    'Cormorant Garamond', Georgia, serif;
  --ih-ui:       'DM Sans', system-ui, sans-serif;
  --ih-ar:       'Amiri', serif;
  background: var(--ih-paper);
}

/* ── HOME ENTRY CARD (lives on the Charcoal & Sage home screen) ── */
.ih-entry {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin: 4px 16px 18px;
  padding: 16px 16px 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FBF7EF 0%, #F4EBD4 100%);
  border: 1px solid #ECE4D3;
  box-shadow: 0 6px 18px rgba(60,50,30,0.06);
  cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.ih-entry:active { transform: scale(0.985); }
.ih-entry-motif {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.09' stroke-width='1'%3E%3Crect x='8' y='8' width='36' height='36'/%3E%3Crect x='8' y='8' width='36' height='36' transform='rotate(45 26 26)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 52px;
}
.ih-entry-glyph {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 14px;
  background: #3C6B54; color: #F4EBD4;
  display: flex; align-items: center; justify-content: center;
}
.ih-entry-glyph svg { width: 24px; height: 24px; }
.ih-entry-body { position: relative; flex: 1; min-width: 0; }
.ih-entry-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; font-weight: 700; color: #2C2A22; line-height: 1.05;
}
.ih-entry-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: #8E6E33; font-weight: 600; margin-top: 3px;
}
.ih-entry-chev { position: relative; flex-shrink: 0; color: #A39C8A; }

/* ── top bar ── */
.ih-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
  background: rgba(241,234,219,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ih-line);
}
.ih-back {
  width: 36px; height: 36px;
  border: 1px solid var(--ih-line);
  background: var(--ih-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: var(--ih-ink2);
  font-size: 17px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.ih-topbar-title {
  font-family: var(--ih-ui);
  font-size: 15px; font-weight: 600;
  color: var(--ih-ink);
}

/* ── scroll body ── */
.ih-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ── hero ── */
.ih-hero {
  position: relative;
  padding: 26px 24px 22px;
  border-bottom: 1px solid var(--ih-line);
  overflow: hidden;
  background: linear-gradient(180deg, var(--ih-cream) 0%, var(--ih-cream) 68%, var(--ih-paper) 100%);
}
.ih-hero.ih-tone-gold {
  background: linear-gradient(165deg, #FBF3DE 0%, #F4E8CB 100%);
  border-bottom: 1px solid var(--ih-goldBg);
}
.ih-hero-motif {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.08' stroke-width='1'%3E%3Crect x='9' y='9' width='40' height='40'/%3E%3Crect x='9' y='9' width='40' height='40' transform='rotate(45 29 29)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 58px 58px;
}
.ih-hero.ih-tone-gold .ih-hero-motif { opacity: 1.6; }
.ih-hero-inner { position: relative; }
.ih-hero-top {
  display: flex; align-items: center; justify-content: space-between;
}
.ih-eyebrow {
  font-family: var(--ih-ui);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ih-ink3);
}
.ih-year {
  display: flex; align-items: center; gap: 6px;
  color: var(--ih-gold);
}
.ih-year span {
  font-family: var(--ih-serif);
  font-size: 16px; font-weight: 600;
  color: var(--ih-goldD);
}
.ih-bigday {
  font-family: var(--ih-serif);
  font-weight: 700;
  font-size: 78px; line-height: 0.92;
  letter-spacing: 0.5px;
  color: var(--ih-green);
  margin-top: 10px;
}
.ih-hero.ih-tone-gold .ih-bigday { color: var(--ih-goldD); }
.ih-month {
  font-family: var(--ih-serif);
  font-size: 31px; font-weight: 600;
  line-height: 1; margin-top: 2px;
  color: var(--ih-ink);
}
.ih-month .ih-hy { font-size: 17px; color: var(--ih-ink2); }
.ih-greg {
  font-family: var(--ih-ui);
  font-size: 13px; color: var(--ih-ink2);
  margin-top: 8px;
}
.ih-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* ── year progress track ── */
.ih-track-wrap { margin-top: 18px; }
.ih-track-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.ih-track-label {
  font-family: var(--ih-ui); font-size: 12px; font-weight: 600;
  color: var(--ih-ink2); letter-spacing: 0.2px;
}
.ih-track-count { font-family: var(--ih-ui); font-size: 12px; color: var(--ih-ink3); }
.ih-track-count b { color: var(--ih-green); font-weight: 700; }
.ih-track { display: flex; gap: 2.5px; height: 7px; }
.ih-track-seg { border-radius: 4px; background: var(--ih-line); overflow: hidden; }
.ih-track-fill { height: 100%; border-radius: 4px; background: var(--ih-greenMid); }
.ih-track-fill.ih-cur { background: var(--ih-gold); }

/* ── chips ── */
.ih-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 20px;
  font-family: var(--ih-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2px;
}
.ih-chip-dot { width: 5px; height: 5px; border-radius: 50%; }
.ih-chip.gold  { background: var(--ih-goldBg);  color: var(--ih-goldD); }
.ih-chip.gold  .ih-chip-dot { background: var(--ih-gold); }
.ih-chip.green { background: var(--ih-greenBg); color: var(--ih-greenD); }
.ih-chip.green .ih-chip-dot { background: var(--ih-green); }
.ih-chip.clay  { background: var(--ih-clayBg);  color: var(--ih-clay); }
.ih-chip.clay  .ih-chip-dot { background: var(--ih-clay); }

/* ── notice strip ── */
.ih-notice {
  margin: 0;
  background: var(--ih-clayBg);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.ih-notice-x {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--ih-clay); font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0.65; -webkit-tap-highlight-color: transparent;
}
.ih-notice-x:active { opacity: 1; }
.ih-notice-bang {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.6px solid var(--ih-clay); color: var(--ih-clay);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: var(--ih-ui);
}
.ih-notice-text {
  font-family: var(--ih-ui); font-size: 13px;
  color: var(--ih-clay); line-height: 1.5; font-weight: 500;
}

/* ── focal card ── */
.ih-focal-wrap { padding: 20px 20px 6px; }
.ih-focal {
  position: relative;
  background: var(--ih-white);
  border-radius: 24px;
  border: 1px solid var(--ih-line);
  box-shadow: 0 12px 30px rgba(60,50,30,0.06);
  overflow: hidden;
}
.ih-focal-motif {
  position: absolute; top: 0; left: 0; right: 0; height: 96px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg fill='none' stroke='%233C6B54' stroke-opacity='0.05' stroke-width='1'%3E%3Crect x='8' y='8' width='36' height='36'/%3E%3Crect x='8' y='8' width='36' height='36' transform='rotate(45 26 26)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 52px;
}
.ih-focal-inner { position: relative; padding: 20px 22px 20px; text-align: center; }
.ih-focal-label {
  font-family: var(--ih-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ih-ink3);
}
.ih-focal-ar {
  font-family: var(--ih-ar);
  font-size: 31px; color: var(--ih-green);
  line-height: 1.7; direction: rtl; margin-top: 12px;
}
.ih-tone-gold-focal .ih-focal-ar { color: var(--ih-goldD); }
.ih-focal-translit {
  font-family: var(--ih-serif);
  font-size: 15.5px; font-style: italic;
  color: var(--ih-ink2); margin-top: 8px; line-height: 1.4;
}
.ih-focal-desc {
  font-family: var(--ih-ui); font-size: 13px;
  color: var(--ih-ink2); margin-top: 14px; line-height: 1.5;
}

/* star rule divider */
.ih-rule {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 4px;
}
.ih-rule-line { flex: 1; height: 1px; }
.ih-rule-line.l { background: linear-gradient(90deg, transparent, rgba(176,138,69,0.35)); }
.ih-rule-line.r { background: linear-gradient(90deg, rgba(176,138,69,0.35), transparent); }
.ih-rule-star { width: 11px; height: 11px; flex-shrink: 0; }

/* counter ring */
.ih-counter {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 8px;
}
.ih-cbtn {
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
.ih-cbtn:active { transform: scale(0.9); }
.ih-cbtn.minus { border: 1.5px solid var(--ih-line); background: var(--ih-cream); color: var(--ih-ink2); }
.ih-cbtn.plus  { border: none; background: var(--ih-green); color: #fff; }
.ih-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ih-ring > svg { transform: rotate(-90deg); }
.ih-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.ih-ring-num { font-family: var(--ih-serif); font-size: 34px; font-weight: 700; color: var(--ih-green); }
.ih-ring-den { font-family: var(--ih-ui); font-size: 11px; color: var(--ih-ink3); font-weight: 600; margin-top: 2px; }
.ih-counter-cap { font-family: var(--ih-ui); font-size: 12.5px; color: var(--ih-ink2); margin-top: 14px; }

/* mark-done pill (focal without counter) */
.ih-focal-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 30px;
  border: 1.5px solid var(--ih-green);
  background: transparent; color: var(--ih-green);
  font-family: var(--ih-ui); font-size: 13.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ih-focal-cta.done { background: var(--ih-green); color: #fff; border-color: var(--ih-green); }
.ih-focal-cta svg { width: 16px; height: 16px; }

/* ── amalan list ── */
.ih-sec { padding: 18px 20px 8px; }
.ih-sec-title {
  font-family: var(--ih-serif); font-size: 21px; font-weight: 600;
  color: var(--ih-ink);
}
.ih-amalan-card {
  background: var(--ih-white);
  border-radius: 20px;
  border: 1px solid var(--ih-line);
  padding: 0 18px; margin-top: 12px;
}
.ih-row {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--ih-line2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ih-row:last-child { border-bottom: none; }
.ih-row-glyph {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ih-goldBg); color: var(--ih-gold);
}
.ih-row.done .ih-row-glyph { background: var(--ih-greenBg); color: var(--ih-green); }
.ih-row-glyph svg { width: 20px; height: 20px; }
.ih-row-body { flex: 1; min-width: 0; }
.ih-row-title { font-family: var(--ih-ui); font-size: 14.5px; font-weight: 600; color: var(--ih-ink); line-height: 1.3; }
.ih-row-desc  { font-family: var(--ih-ui); font-size: 13px; color: var(--ih-ink2); margin-top: 3px; line-height: 1.45; }
.ih-row-ar    { font-family: var(--ih-ar); font-size: 19px; color: var(--ih-greenD); margin-top: 6px; direction: rtl; text-align: right; }
.ih-mark {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 7px;
  border: 1.5px solid var(--ih-line); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ih-row.done .ih-mark { background: var(--ih-green); border-color: var(--ih-green); }
.ih-mark svg { width: 13px; height: 13px; opacity: 0; }
.ih-row.done .ih-mark svg { opacity: 1; }

/* solat 5-waktu baseline tracker */
.ih-solat-card {
  background: var(--ih-white); border-radius: 20px; border: 1px solid var(--ih-line);
  padding: 16px 16px 14px; margin-top: 12px;
}
.ih-solat-row { display: flex; gap: 7px; }
.ih-sw {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 2px 10px; border-radius: 14px;
  border: 1px solid var(--ih-line); background: var(--ih-cream);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ih-sw.done { background: var(--ih-greenBg); border-color: var(--ih-green); }
.ih-sw-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ih-line); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.ih-sw.done .ih-sw-check { background: var(--ih-green); border-color: var(--ih-green); }
.ih-sw-check svg { width: 12px; height: 12px; }
.ih-sw-name { font-family: var(--ih-ui); font-size: 11.5px; font-weight: 600; color: var(--ih-ink); }
.ih-sw.done .ih-sw-name { color: var(--ih-greenD); }
.ih-solat-foot {
  text-align: center; font-family: var(--ih-ui); font-size: 12.5px;
  color: var(--ih-ink2); margin-top: 12px;
}
.ih-solat-foot b { color: var(--ih-green); font-weight: 700; }

/* daily progress capstone */
.ih-progress {
  margin: 14px 18px 0; background: var(--ih-white); border: 1px solid var(--ih-line);
  border-radius: 16px; padding: 14px 16px;
}
.ih-progress-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ih-ui); }
.ih-progress-lbl { font-size: 12.5px; font-weight: 600; color: var(--ih-ink2); }
.ih-progress-val { font-size: 12.5px; color: var(--ih-ink2); }
.ih-progress-val b { font-size: 16px; font-weight: 700; color: var(--ih-green); }
.ih-progress-bar { height: 6px; background: var(--ih-line); border-radius: 4px; overflow: hidden; margin-top: 9px; }
.ih-progress-fill { height: 100%; background: var(--ih-green); border-radius: 4px; transition: width 0.3s ease; }

/* focal: completed zikir state + CTA link */
.ih-focal-done { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 2px; }
.ih-ring-full { position: relative; }
.ih-ring-tick { width: 38px; height: 38px; }
.ih-focal-done-tx { font-family: var(--ih-ui); font-size: 13px; font-weight: 700; color: var(--ih-greenD); }
.ih-tone-gold-focal .ih-focal-done-tx { color: var(--ih-goldD); }
.ih-focal-reset {
  background: transparent; border: 1px solid var(--ih-line); border-radius: 12px;
  padding: 6px 16px; font-family: var(--ih-ui); font-size: 11.5px; font-weight: 600;
  color: var(--ih-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ih-cbtn-cycle {
  background: var(--ih-green); border: none; border-radius: 12px;
  padding: 9px 18px; font-family: var(--ih-ui); font-size: 12.5px; font-weight: 600;
  color: #FBF7EF; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ih-tone-gold-focal .ih-cbtn-cycle { background: var(--ih-gold); }
.ih-cbtn-cycle:active { opacity: .85; }
.ih-cycle-note { font-family: var(--ih-ui); font-size: 11.5px; font-weight: 600; color: var(--ih-green); text-align: center; margin-top: 10px; }
.ih-tone-gold-focal .ih-cycle-note { color: var(--ih-goldD); }
.ih-focal-link {
  display: block; width: 100%; margin-top: 14px; padding: 12px; border-radius: 14px;
  background: var(--ih-green); color: #FBF7EF; border: none; cursor: pointer;
  font-family: var(--ih-ui); font-size: 13px; font-weight: 600; -webkit-tap-highlight-color: transparent;
}
.ih-tone-gold-focal .ih-focal-link { background: var(--ih-gold); }

/* ── BASELINE: Amalan Asas grouped card ── */
.ih-jejak { background: var(--ih-white); border: 1px solid var(--ih-line); border-radius: 20px; padding: 16px 16px 8px; margin-top: 12px; }
.ih-jejak-head { display: flex; justify-content: space-between; align-items: baseline; }
.ih-jejak-title { font-family: var(--ih-serif); font-size: 21px; font-weight: 600; color: var(--ih-ink); }
.ih-jejak-val { font-family: var(--ih-ui); font-size: 12.5px; color: var(--ih-ink2); }
.ih-jejak-val b { font-size: 16px; font-weight: 700; color: var(--ih-green); }
.ih-jejak-val .ih-ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--ih-clay, #A9724E); }
.ih-jejak-cheer .ih-ic { width: 14px; height: 14px; vertical-align: -2px; }
.ih-jejak-bar { height: 6px; background: var(--ih-line); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.ih-jejak-fill { height: 100%; background: var(--ih-green); border-radius: 4px; transition: width 0.3s ease; }
.ih-jejak-bar.done .ih-jejak-fill { background: linear-gradient(90deg, var(--ih-gold), #D9B868); }
.ih-jejak-cheer { font-family: var(--ih-ui); font-size: 12px; font-weight: 700; color: var(--ih-goldD); text-align: center; margin-top: 10px; }
.ih-jejak-sub { font-family: var(--ih-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ih-ink3); margin: 16px 0 8px; }
.ih-jejak .ih-row { padding: 11px 0; }
.ih-zikir-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; cursor: pointer; border-bottom: 1px solid var(--ih-line2); -webkit-tap-highlight-color: transparent; }
.ih-zikir-row.done .ih-row-glyph { background: var(--ih-greenBg); color: var(--ih-green); }
.ih-zikir-count { font-family: var(--ih-ui); font-size: 12px; color: var(--ih-ink3); flex-shrink: 0; }
.ih-zikir-count b { font-family: var(--ih-serif); font-size: 19px; font-weight: 700; color: var(--ih-green); }
.ih-zikir-count span { margin-left: 2px; }
.ih-zikir-done { color: var(--ih-green); font-weight: 700; }
/* zikir inline counter — compact − N + (consistent with focal counter) */
.ih-zcount { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ih-zcount .ih-cbtn { width: 32px; height: 32px; font-size: 19px; }
.ih-zval { min-width: 42px; text-align: center; font-family: var(--ih-ui); font-size: 11px; color: var(--ih-ink3); }
.ih-zval b { font-family: var(--ih-serif); font-size: 18px; font-weight: 700; color: var(--ih-green); }
.ih-zval i { font-style: normal; margin-left: 1px; }
.ih-zval.done { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; border-radius: 50%; background: var(--ih-green); }
.ih-zval.done svg { width: 15px; height: 15px; }

/* Sunnah Harian (time-of-day) section header */
.ih-sunnah-hd { display: flex; align-items: center; gap: 7px; font-family: var(--ih-ui); font-size: 14px; font-weight: 700; color: var(--ih-ink); margin-bottom: 10px; }
.ih-sunnah-ic { display: inline-flex; color: var(--ih-gold); }
.ih-sunnah-ic svg { width: 18px; height: 18px; }
.ih-sunnah-blk.other .ih-sunnah-ic { color: var(--ih-ink3); }
.ih-sunnah-c { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ih-ink3); }
.ih-sunnah-blk.other { margin-top: 16px; }
.ih-sunnah-blk.other .ih-sunnah-hd { color: var(--ih-ink2); font-weight: 600; }
.ih-sunnah-blk.other .ih-sunnah-ic { opacity: 0.7; }
.ih-sunnah-more { display: block; width: 100%; margin-top: 12px; padding: 9px; border: 1px dashed var(--ih-line); border-radius: 10px; background: transparent; font-family: var(--ih-ui); font-size: 12px; font-weight: 600; color: var(--ih-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ih-sunnah-more:active { background: var(--ih-surface, #fff); }
.ih-sunnah-rest { margin-top: 4px; }

/* muakkad rawatib sub-section (inside Amalan Asas) */
.ih-sub-tag { font-family: var(--ih-ui); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ih-green); background: var(--ih-greenBg); padding: 1px 5px; border-radius: 5px; vertical-align: middle; }
.ih-rawatib-note { font-family: var(--ih-ui); font-size: 11px; font-style: italic; color: var(--ih-gold); margin: 2px 0 8px; }

/* Musafir banner — local-context strip on the Ibadah page when travelling */
.ih-msf { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px; padding: 13px 14px; border-radius: 14px; background: var(--ih-greenBg); border: 1px solid var(--ih-green); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ih-msf:active { opacity: 0.85; }
.ih-msf-flag { font-size: 24px; line-height: 1; flex-shrink: 0; }
.ih-msf-body { flex: 1; min-width: 0; }
.ih-msf-title { font-family: var(--ih-ui); font-size: 13.5px; font-weight: 700; color: var(--ih-green); }
.ih-msf-sub { font-family: var(--ih-ui); font-size: 12.5px; color: var(--ih-ink2); margin-top: 1px; }
.ih-msf-chev { width: 16px; height: 16px; color: var(--ih-green); flex-shrink: 0; }

/* guided-row affordances: outline chevron + pending tag */
.ih-row-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--ih-ink3); margin-right: 2px; }
.ih-row.done .ih-row-chev { opacity: 0.4; }
.ih-tag-soon { font-family: var(--ih-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ih-ink3); background: var(--ih-line2); padding: 1px 6px; border-radius: 6px; vertical-align: middle; }

/* Smart "Seterusnya" next-up card */
.ih-next { margin-top: 14px; padding: 14px 15px; border-radius: 14px; background: var(--ih-cream); border: 1px solid var(--ih-line); }
.ih-next-eyebrow { font-family: var(--ih-ui); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ih-gold); margin-bottom: 9px; }
.ih-next-hd { display: flex; align-items: center; gap: 11px; }
.ih-next-ic { display: inline-flex; flex-shrink: 0; color: var(--ih-gold); }
.ih-next-ic svg { width: 24px; height: 24px; }
.ih-next-tt { display: flex; flex-direction: column; gap: 2px; font-family: var(--ih-ui); font-size: 14.5px; font-weight: 700; color: var(--ih-ink); }
.ih-next-tt span { font-size: 11.5px; font-weight: 500; color: var(--ih-ink2); }
.ih-next-peek { list-style: none; margin: 11px 0 0; padding: 0 0 0 34px; }
.ih-next-peek li { position: relative; font-family: var(--ih-ui); font-size: 12.5px; color: var(--ih-ink2); padding: 2.5px 0; }
.ih-next-peek li::before { content: '·'; position: absolute; left: -11px; color: var(--ih-gold); font-weight: 800; }
.ih-next-peek li.done { color: var(--ih-ink3); text-decoration: line-through; text-decoration-color: var(--ih-line); }
.ih-next .ih-sunnah-more { margin-top: 13px; }
.ih-tag { font-family: var(--ih-ui); font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ih-goldD); background: var(--ih-goldBg); padding: 2px 7px; border-radius: 6px; vertical-align: 1px; }
.ih-row-hl .ih-row-glyph { background: var(--ih-goldBg); color: var(--ih-gold); }

/* Sunat Tambahan (bonus) tier */
.ih-tambahan { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--ih-line); }
.ih-tambahan-hd { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ih-ui); font-size: 13px; font-weight: 700; color: var(--ih-ink); }
.ih-tambahan-hd span { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ih-ink3); }

/* ── ISTIMEWA: special-day section label ── */
.ih-istimewa-lbl { font-family: var(--ih-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ih-goldD); margin: 22px 18px -2px; }

/* cluster (special day calendar context) */
.ih-cluster { display: flex; gap: 7px; margin-top: 12px; }
.ih-cluster-cell {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 13px;
  background: var(--ih-cream); border: 1px solid var(--ih-line);
}
.ih-cluster-cell.done { background: var(--ih-greenBg); border-color: var(--ih-greenBg); }
.ih-cluster-cell.now  { flex: 1.3; background: var(--ih-gold); border: none; }
.ih-cluster-d { font-family: var(--ih-serif); font-size: 19px; font-weight: 700; color: var(--ih-ink2); line-height: 1; }
.ih-cluster-cell.done .ih-cluster-d { color: var(--ih-greenD); }
.ih-cluster-cell.now  .ih-cluster-d { color: #fff; }
.ih-cluster-t { font-family: var(--ih-ui); font-size: 9.5px; font-weight: 700; color: var(--ih-ink2); margin-top: 4px; letter-spacing: 0.2px; }
.ih-cluster-cell.done .ih-cluster-t { color: var(--ih-greenD); }
.ih-cluster-cell.now .ih-cluster-t { color: rgba(255,255,255,0.95); }

/* ── upcoming ── */
.ih-up { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ih-up-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--ih-white); border: 1px solid var(--ih-line);
  border-radius: 18px; padding: 13px 15px;
}
.ih-up-date { width: 46px; flex-shrink: 0; text-align: center; }
.ih-up-day { font-family: var(--ih-serif); font-size: 27px; font-weight: 600; color: var(--ih-ink); line-height: 0.95; }
.ih-up-dow { font-family: var(--ih-ui); font-size: 10.5px; color: var(--ih-ink3); margin-top: 2px; letter-spacing: 0.3px; }
.ih-up-div { width: 1px; align-self: stretch; background: var(--ih-line2); }
.ih-up-body { flex: 1; min-width: 0; }
.ih-up-title { font-family: var(--ih-ui); font-size: 14px; font-weight: 600; color: var(--ih-ink); margin-top: 7px; line-height: 1.3; }
.ih-up-greg { font-family: var(--ih-ui); font-size: 12.5px; color: var(--ih-ink3); margin-top: 2px; }
.ih-up-chev { flex-shrink: 0; }

.ih-newyear {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px 4px;
}
.ih-newyear-star { width: 12px; height: 12px; flex-shrink: 0; }
.ih-newyear-title { font-family: var(--ih-serif); font-size: 17px; font-weight: 600; color: var(--ih-goldD); }
.ih-newyear-sub { font-family: var(--ih-ui); font-size: 11px; color: var(--ih-ink3); }
.ih-newyear-line { flex: 1; height: 1px; background: var(--ih-line); }

/* ── reflective footer ── */
.ih-footer { padding: 12px 24px 24px; text-align: center; }
.ih-footer-ar { font-family: var(--ih-ar); font-size: calc(26px * var(--ar-scale, 1)); color: var(--ih-ink); line-height: 2; direction: rtl; }
.ih-footer-ms { font-family: var(--ih-serif); font-style: italic; font-size: 14.5px; color: var(--ih-ink2); margin-top: 10px; line-height: 1.55; }
.ih-footer-src { font-family: var(--ih-ui); font-size: 11.5px; color: var(--ih-ink3); margin-top: 6px; }

/* ── Jejak 7 hari — mini heatmap teaser → opens Rekod ──────── */
.ih-r7 { display: block; width: 100%; text-align: left; margin-top: 14px; padding: 11px 13px 12px; background-color: var(--ih-cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.09' stroke-width='1'%3E%3Crect x='7' y='7' width='32' height='32'/%3E%3Crect x='7' y='7' width='32' height='32' transform='rotate(45 23 23)'/%3E%3C/g%3E%3C/svg%3E"); background-size: 46px 46px; border: 1px solid var(--ih-line); border-radius: 13px; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.ih-r7:active { transform: scale(.985); }
.ih-r7-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ih-r7-lbl { font-family: var(--ih-ui); font-size: 12px; font-weight: 600; color: var(--ih-ink); letter-spacing: .2px; }
.ih-r7-cta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ih-ui); font-size: 12px; font-weight: 600; color: var(--ih-gold); }
.ih-r7-cta svg { width: 11px; height: 11px; }
.ih-r7-row { display: flex; gap: 6px; }
.ih-r7-sq { flex: 1 1 0; height: 22px; border-radius: 6px; border: 1px solid transparent; }
.ih-r7-sq.empty { background: var(--ih-white); border-color: var(--ih-line); }
.ih-r7-sq.partial { background: #E7EBDF; border-color: #D6DBC9; }
.ih-r7-sq.full { background: linear-gradient(165deg, var(--ih-green) 0%, var(--ih-greenD) 100%); border-color: var(--ih-greenD); }
.ih-r7-sq.today { box-shadow: 0 0 0 2px var(--ih-gold); }