/* Self-hosted fonts (v29 Midnight Emerald): Playfair Display for headings,
   Inter for UI text, Amiri (Arabic subset) for Qur'an/hadith Arabic.
   Variable files - one file per family, weight ranges declared. */
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-display.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Amiri";src:url("fonts/amiri-400-arabic.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
:root{
  /* Midnight Emerald - Day expression: emerald-tinted ivory, deep emerald
     ink, antique gold. The Night expression (below) is the primary look. */
  --bg:#f4f1e3; --surface:#fdfcf5; --surface2:#eae7d0; --border:#dccfa1;
  --text:#152a20; --muted:#5c6f60; --faint:#8d9a87;
  --green:#0b3d2e; --green2:#14614b; --gold:#9a7b24; --gold-bright:#c9a227;
  --danger:#b03a2e; --shadow:0 12px 30px rgba(24,42,28,.10), 0 2px 6px rgba(24,42,28,.05);
  --radius:18px;
  --serif:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-theme="dark"]{
  /* Midnight Emerald - Night (primary): near-black emerald, glassy
     surfaces, luminous gold. */
  --bg:#04150f; --surface:rgba(255,255,255,.055); --surface2:rgba(255,255,255,.09); --border:rgba(212,175,55,.28);
  --text:#eef3ec; --muted:#a9bcae; --faint:#71816f;
  --green:#0d5c40; --green2:#53b981; --gold:#d4af37; --gold-bright:#f0d98c;
  --danger:#e0786a; --shadow:0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
*{box-sizing:border-box}
/* Type scale (v2.1 font pass): root 14px - UI text/headings run ~13-20% smaller
   than the original 16px-root scale; Arabic classes are compensated upward so
   they only shrink ~7% and stay the largest text on their cards. */
html{-webkit-text-size-adjust:100%;font-size:14px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  line-height:1.55; padding-bottom:86px; letter-spacing:.002em;
}
h1{font-size:1.5rem;margin:0;font-family:var(--serif);font-weight:600;letter-spacing:.01em}
h2{font-size:1.22rem;margin:.2rem 0 .6rem;font-family:var(--serif);font-weight:600}
h3{font-size:1rem;margin:1rem 0 .5rem}
h3:first-child{margin-top:0}
p{margin:.45rem 0}
a{color:var(--green2)}
.muted{color:var(--muted)}
.hint{color:var(--faint);font-size:.85rem}
.cite{color:var(--faint);font-size:.85rem;font-style:italic}
.center{text-align:center}
.grow{flex:1;min-width:120px}
.row{display:flex;gap:.5rem;align-items:center}
.row.center{justify-content:center}
.row-between{display:flex;gap:.6rem;align-items:center;justify-content:space-between;margin:.6rem 0}
.wrap-gap{flex-wrap:wrap}

.view{display:none;max-width:680px;margin:0 auto;padding:1rem 1rem 2rem}
.view.active{display:block}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin:.4rem 0 1rem}
.section-title{margin:1.2rem 0 .4rem}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.15rem 1.2rem; margin:.8rem 0; box-shadow:var(--shadow);
}
.label{font-size:.74rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.gold-label{color:var(--gold)}
.arabic{font-size:1.64rem;line-height:2.15;text-align:right;font-family:"Amiri","Traditional Arabic","Scheherazade New",serif}
.arabic.center{text-align:center}
button{font:inherit;cursor:pointer}
.btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:999px; padding:.6rem 1.15rem; font-weight:600; min-height:40px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.gold{background:linear-gradient(160deg,#f0d98c,#d4af37);border-color:rgba(212,175,55,.65);color:#231d05;box-shadow:0 6px 16px rgba(184,145,42,.35)}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.btn.small{padding:.35rem .8rem;font-size:.9rem}
.btn.big{width:100%;padding:.85rem;font-size:1.05rem;margin-top:.8rem}
.btn:disabled{opacity:.45;cursor:default}
input,select,textarea{
  font:inherit;font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;
}
textarea{width:100%;min-height:110px;resize:vertical}
.field{display:flex;flex-direction:column;gap:.35rem;margin:.7rem 0;font-weight:600}
.check{display:flex;gap:.6rem;align-items:flex-start;margin:.7rem 0;cursor:pointer}
.check input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--green)}

/* hero */
.hero{background:linear-gradient(160deg,rgba(212,175,55,.15),rgba(212,175,55,.03) 55%),radial-gradient(120% 95% at 50% 0%,#0d4a33,#083023 58%,#06231b);color:#eef3ec;border:1px solid rgba(212,175,55,.45);box-shadow:0 20px 40px rgba(4,21,15,.35);position:relative;overflow:hidden}
.hero-loc{opacity:.85;font-size:.95rem}
.hero-next{font-size:1.7rem;font-weight:700;margin:.3rem 0 0;font-family:var(--serif)}
.hero-count{opacity:.9;margin-bottom:.8rem}
.hero .btn{border:none}

/* prayer strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.tile{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:.6rem .4rem;text-align:center;
}
.tile .t-name{font-weight:700;font-size:.95rem}
.tile .t-time{color:var(--muted);font-size:.9rem}
.tile.next{outline:2px solid var(--gold)}
.tile.prayed{background:var(--green);color:#fff;border-color:var(--green)}
.tile.prayed .t-time{color:#dcefe4}
button.tile{width:100%}

/* pills + subtabs */
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0}
.pills.center{justify-content:center}
.pill{
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:.42rem .95rem;font-weight:600;min-height:40px;display:inline-flex;align-items:center;
}
.pill.sel{background:var(--green);border-color:var(--green);color:#fff}
.subtabs{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem 0 .5rem;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{
  white-space:nowrap;border:1px solid var(--border);background:var(--surface);
  border-radius:999px;padding:.45rem 1rem;font-weight:600;color:var(--text);min-height:40px;
}
.subtabs button.active{background:var(--green);border-color:var(--green);color:#fff}

/* list rows */
.navrow{
  display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.95rem 1.05rem;margin:.55rem 0;box-shadow:var(--shadow);color:var(--text);
}
.navrow .nr-ico{font-size:1.25rem}
.navrow .nr-main{flex:1}
.navrow .nr-title{font-weight:700}
.navrow .nr-sub{color:var(--muted);font-size:.9rem}
.navrow .nr-arrow{color:var(--faint);font-size:1.2rem}
.surah-row{align-items:center}
.num-badge{
  width:2.3rem;height:2.3rem;flex:none;border-radius:50%;
  background:linear-gradient(150deg,#f7ecc4,#ecd894);color:#6b5510;font-weight:800;
  border:1px solid #d9c169;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
[data-theme="dark"] .num-badge{background:#4a3f16;color:#ecd27a}
.surah-ar{font-size:1.32rem;font-family:"Amiri","Traditional Arabic","Scheherazade New",serif}

/* ayahs / hadith cards */
.ayah-card .ayah-num{
  display:inline-flex;width:1.6rem;height:1.6rem;border-radius:50%;
  background:#f3e5bb;color:#6b5510;font-weight:800;font-size:.8rem;
  align-items:center;justify-content:center;margin-inline-start:.5rem;vertical-align:middle;
}
.bookmark{float:right;background:none;border:none;font-size:1.15rem;color:var(--faint)}
.bookmark.on{color:var(--gold)}

/* onboarding */
#view-onboarding{max-width:560px}
.ob-wrap{padding-top:1.4rem}
.ob-head{display:flex;align-items:center;gap:.55rem}
.ob-logo{
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--gold);color:#231d05;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:900;
}
.ob-brand{font-size:1.22rem;font-weight:800}
.ob-dots{display:flex;gap:.4rem;margin:1.1rem 0 .2rem}
.ob-dots span{width:.55rem;height:.55rem;border-radius:50%;background:var(--border)}
.ob-dots span.done{background:var(--gold)}
.ob-dots span.now{background:var(--green);transform:scale(1.25)}
.ob-note{color:var(--faint);font-size:.82rem;border-top:1px solid var(--border);padding-top:.7rem;margin-top:1rem}
.ob-actions{display:flex;justify-content:space-between;margin-top:.4rem}
.opt-btn{
  display:block;width:100%;text-align:left;margin:.45rem 0;padding:.8rem 1rem;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:600;
}
.opt-btn.sel{background:var(--green);border-color:var(--green);color:#fff}
.time-row{display:flex;gap:1rem;flex-wrap:wrap}
.time-row label{flex:1;min-width:140px}

/* chat */
.chat{display:flex;flex-direction:column;gap:.6rem;min-height:40vh}
.msg{max-width:88%;padding:.7rem .95rem;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.err{align-self:flex-start;background:#fbeae8;border:1px solid #e5b6b0;color:#7c2318}
[data-theme="dark"] .msg.err{background:#3a2320;color:#f0b8ae}
.ask-empty{text-align:center;padding:2.2rem 1rem;color:var(--muted)}
.ask-empty .big-ico{
  width:4.2rem;height:4.2rem;margin:0 auto .8rem;border-radius:50%;
  background:var(--green);color:#fff;font-size:1.65rem;display:flex;align-items:center;justify-content:center;
}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:1rem}
.chat-form{
  position:sticky;bottom:78px;display:flex;gap:.5rem;background:var(--bg);padding:.5rem 0;
}
.chat-form input{flex:1;border-radius:999px;padding:.7rem 1rem}
.chat-form .send{border-radius:50%;width:2.9rem;height:2.9rem;padding:0;flex:none}

/* plans */
.progress{height:.55rem;background:var(--surface2);border-radius:99px;overflow:hidden;margin:.5rem 0}
.progress > div{height:100%;background:var(--gold);border-radius:99px}
.step-row{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-bottom:1px dashed var(--border)}
.step-row:last-child{border-bottom:none}
.step-row .done-t{color:var(--faint);text-decoration:line-through}
.today-step{background:#f7ecc4;border:1px dashed var(--gold);border-radius:12px;padding:.8rem .9rem;margin:.6rem 0}
[data-theme="dark"] .today-step{background:rgba(212,175,55,.13)}

/* stats */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem .5rem;text-align:center;box-shadow:var(--shadow)}
.stat .stat-n{font-size:1.75rem;font-weight:800;color:var(--green2)}
.stat .stat-l{color:var(--muted);font-size:.9rem}

/* focus overlay */
#focus-overlay{
  position:fixed;inset:0;z-index:60;background:linear-gradient(160deg,#0a3a2a,#06231b 60%,#04150f);
  color:#eaf5ee;display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.fo-inner{text-align:center;max-width:420px;width:100%}
.fo-moon{font-size:2.8rem}
.fo-inner h2{font-size:2.05rem;margin:.2rem 0}
.fo-dua{opacity:.85;font-style:italic}
.fo-timer{font-size:3.2rem;font-weight:800;letter-spacing:.04em;margin:1rem 0}
#focus-overlay .btn.ghost{color:#eaf5ee;border-color:#5b8271;margin-top:.6rem}

/* dhikr + qibla */
#dhikr-circle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  width:230px;height:230px;border-radius:50%;margin:1.2rem auto;
  background:radial-gradient(circle at 35% 30%, var(--green2), var(--green));
  color:#fff;border:6px solid var(--gold);box-shadow:var(--shadow);
}
#dhikr-circle:active{transform:scale(.985)}
#dhikr-count{font-size:3rem;font-weight:800;line-height:1}
#dhikr-label{font-size:1.05rem}
#dhikr-target{color:#cfe6d8}
#qibla-compass{
  position:relative;width:220px;height:220px;margin:.6rem auto;border-radius:50%;
  border:2px solid var(--border);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
}
#qibla-arrow{font-size:2.8rem;color:var(--green2);transition:transform .3s ease}
.qibla-kaaba{position:absolute;font-size:1.4rem;top:8px;left:50%;transform:translateX(-50%)}

/* adhkar */
.ak-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.ak-count{font-weight:800;color:var(--green2);white-space:nowrap}
.ak-card.done{opacity:.65;border-color:var(--green2)}
.ak-card{cursor:pointer}

/* tab bar */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;background:var(--surface);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
#tabbar button{
  flex:1;background:none;border:none;padding:.5rem 0 .45rem;color:var(--muted);
  font-size:.78rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.1rem;
}
#tabbar button span{font-size:1.25rem}
#tabbar button.active{color:var(--gold)}
#tabbar.hide{display:none}

/* back-to-top floating button: above the tab bar (~78px tall, see
   .chat-form bottom:78px and body padding-bottom:86px), below the
   focus overlay (z-index 60) and the tab bar (50) */
.back-top{
  position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:40;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(227,188,63,.55);
  background:linear-gradient(150deg,#06231b,#0b3d2e 60%,#0d5c40);
  color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
}
.back-top.show{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .25s ease,transform .25s ease;
}
.back-top:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){ .back-top{transition:none} }

@media (min-width:760px){
  .strip{grid-template-columns:repeat(6,1fr)}
  .view{padding-top:1.6rem}
}

/* references under Ask AI answers */
.refs{margin-top:.65rem;border-top:1px dashed var(--border);padding-top:.5rem}
.refs summary{cursor:pointer;color:var(--gold);font-weight:700;font-size:.88rem;letter-spacing:.04em}
.ref-item{margin-top:.6rem;padding:.6rem .7rem;background:var(--surface2);border-radius:12px}
.ref-head{font-weight:800;font-size:.86rem;color:var(--green2);letter-spacing:.03em}
.ref-item p{margin:.25rem 0;font-size:.94rem}

/* focus overlay: the hidden attribute must always win */
#focus-overlay[hidden]{display:none !important}

/* reader prev/next chapter navigation (Qur'an, Tawhid, Bukhari, Nawawi, Learn) */
.reader-nav{display:flex;gap:.6rem;margin:.8rem 0}
.reader-nav-btn{
  flex:1 1 0;min-width:0;min-height:54px;display:flex;align-items:center;gap:.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:.5rem .75rem;color:var(--text);box-shadow:var(--shadow);text-align:left;
  transition:transform .12s ease;
}
button.reader-nav-btn:active{transform:scale(.98)}
.reader-nav-btn.next{flex-direction:row-reverse;text-align:right}
.reader-nav-btn .rn-arrow{font-size:1.6rem;line-height:1;color:var(--gold);flex:none;font-weight:700}
.reader-nav-btn .rn-text{display:flex;flex-direction:column;min-width:0}
.reader-nav-btn .rn-dir{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.reader-nav-btn .rn-name{font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-nav-btn.spacer{visibility:hidden;background:transparent;border-color:transparent;box-shadow:none}

/* library sections + findability (v2.2): three top-level sections (Qur'an,
   Hadith, Discover), compact rows, jump bars - less scrolling */
.lib-sections{display:flex;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 .8rem}
.lib-sections .lib-sec-card{flex:1 1 30%;min-width:150px}
#lib-discover-tools .pills{margin-top:.6rem}
.daily-disc{width:100%;margin:.6rem 0 0;text-align:left}
.lib-sec-card{
  flex:1;display:flex;align-items:center;gap:.7rem;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.8rem .9rem;box-shadow:var(--shadow);color:var(--text);min-height:56px;
}
.lib-sec-card.active{background:linear-gradient(150deg,#06231b,#0b3d2e 60%,#0d5c40);color:#eef3ec;border-color:rgba(212,175,55,.55)}
.lib-sec-card .lsc-ico{font-size:1.35rem}
.lib-sec-card .lsc-main{display:flex;flex-direction:column;min-width:0}
.lib-sec-card .lsc-title{font-weight:800;font-family:var(--serif);font-size:1.08rem}
.lib-sec-card .lsc-sub{font-size:.78rem;color:var(--muted)}
.lib-sec-card.active .lsc-sub{color:#bcd6c2}
.lib-search-wrap{margin:.2rem 0 .7rem}
#lib-find{width:100%}
#lib-find-results:empty{display:none}
.lib-find-group{
  font-size:.74rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;
  color:var(--gold);margin:.9rem 0 .1rem;
}
.navrow.compact{padding:.5rem .8rem;margin:.32rem 0;border-radius:14px;gap:.7rem}
.navrow.compact .num-badge{width:2rem;height:2rem;font-size:.85rem}
.navrow.compact .surah-ar{font-size:1.15rem}
.navrow.compact .nr-title{font-size:.98rem}
.navrow .nr-meaning{font-weight:400;color:var(--muted)}
@keyframes rowflash{0%{box-shadow:0 0 0 3px var(--gold-bright)}100%{box-shadow:var(--shadow)}}
.navrow.flash{animation:rowflash 1.6s ease}
.jump-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0 .2rem}
.jump-label{font-size:.74rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--gold);margin:.7rem 0 .3rem}
.juz-bar{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .45rem;scrollbar-width:none}
.juz-bar::-webkit-scrollbar{display:none}
.jchip{
  flex:none;border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:.35rem .8rem;font-weight:700;color:var(--text);min-height:36px;cursor:pointer;
}
.jchip.sel{background:var(--green);border-color:var(--green);color:#fff}
.juz-chip{min-width:2.15rem;padding:.35rem .5rem;text-align:center}
.nw-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin:.6rem 0}
.nw-cell{
  border:1px solid var(--border);background:var(--surface);border-radius:10px;
  padding:.45rem 0;font-weight:700;color:var(--text);min-height:40px;cursor:pointer;
}
.nw-cell:active{background:var(--green);color:#fff}

/* mosques + Umrah & Hajj (v2.5): compact mosque cards, a loading
   spinner in the gold accent, and the gold-trimmed "My Trip" document
   card (the permit-card idea adapted from the Nusuk study) */
.mq-card{padding:.9rem 1.1rem;margin:.55rem 0}
.mq-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.mq-actions .btn{text-decoration:none;display:inline-flex;align-items:center}
.spinner{
  width:34px;height:34px;margin:.4rem auto .8rem;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--gold);
  animation:mqspin .9s linear infinite;
}
@keyframes mqspin{to{transform:rotate(360deg)}}
.trip-card{border:1.5px solid var(--gold);background:linear-gradient(165deg,#f7ecc4,var(--surface) 58%)}
[data-theme="dark"] .trip-card{background:linear-gradient(165deg,rgba(212,175,55,.18),var(--surface) 58%)}
.count-num{font-size:1.9rem;font-weight:800;color:var(--green2);font-family:var(--serif);line-height:1.15}

/* design system v3 - systematic, transparent, low-scroll.
   One spacing scale (4/8/12/16), one card, one row, one section header.
   .card is THE card (surface, border, radius, shadow); .card.tight is
   its compact variant for list-like content. .navrow / .navrow.compact
   are THE rows. .sec-head is THE section header. Buttons: .btn.primary
   (deep green, the action), .btn.gold (the hero action), .btn.ghost /
   .btn.danger (secondary outline). The type scale is unchanged (root
   14px from the v2.1 font pass) - v3 changes layout, not sizes. */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px}
.card.tight{padding:.85rem .95rem;margin:.6rem 0}
.sec-head{
  font-size:.78rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;
  color:var(--gold);margin:1.1rem 0 .45rem;display:flex;align-items:center;gap:.6rem;
}
.sec-head::after{content:"";flex:1;border-top:1px solid var(--border)}

/* home dashboard: a 2-column tile grid - every feature one tap from
   Home, each tile carrying a one-line LIVE status, not a slogan */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.4rem 0 .2rem}
.ftile{
  display:flex;gap:.6rem;align-items:center;text-align:left;width:100%;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:.62rem .7rem;box-shadow:var(--shadow);color:var(--text);min-height:62px;
  transition:transform .12s ease;
}
.ftile:active{transform:scale(.98)}
.ftile .ft-ico{font-size:1.3rem;flex:none;width:2rem;text-align:center}
.ftile .ft-main{display:flex;flex-direction:column;min-width:0}
.ftile .ft-title{font-weight:700;font-size:.98rem;line-height:1.25}
.ftile .ft-sub{
  color:var(--muted);font-size:.8rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* the three daily cards become three compact sections of one card */
.daily-sec{padding:.5rem 0}
.daily-sec:first-child{padding-top:0}
.daily-sec:last-child{padding-bottom:0}
.daily-sec + .daily-sec{border-top:1px dashed var(--border)}
.daily-sec p{margin:.3rem 0}
.daily-sec p:last-child{margin-bottom:0}

/* struggles categories: a 2-column chip grid instead of a wrapping
   pill cloud - fixed places, no hunting */
.chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.5rem 0}
.chip-cell{
  border:1px solid var(--border);background:var(--surface);border-radius:12px;
  padding:.6rem .7rem;font-weight:600;color:var(--text);min-height:44px;
  text-align:left;cursor:pointer;
}
.chip-cell.sel{background:var(--green);border-color:var(--green);color:#fff}

/* persistent plain-language note (Ask AI): what Duha is and isn't,
   visible without opening anything */
.note-bar{
  background:var(--surface2);border:1px solid var(--border);border-radius:14px;
  padding:.6rem .8rem;font-size:.88rem;color:var(--muted);margin:.2rem 0 .8rem;
}

/* settings personalization: label-left / control-right compact rows
   with the toggle/select inline, instead of tall stacked fields */
#settings-personal .field{flex-direction:row;align-items:center;justify-content:space-between;gap:.8rem;margin:.55rem 0}
#settings-personal .field select{max-width:58%;flex:none}
#settings-personal .time-row .field{flex-direction:column;align-items:stretch}

/* Umrah travel search (v27-travel patch): append to www/styles.css.
   New .travel-* selectors only; no existing selector is overridden. */
.travel-search-card,
.travel-estimate-card,
.travel-guide-card{scroll-margin-top:.75rem}
.travel-form-grid,
.travel-estimate-grid,
.travel-city-grid,
.travel-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.travel-form-grid .field,
.travel-estimate-grid .field{margin:.25rem 0}
.travel-form-grid input,
.travel-form-grid select,
.travel-estimate-grid input{width:100%}
.travel-results-grid{grid-template-columns:1fr;margin-top:.8rem}
.travel-result-card{
  border:1px solid var(--border);background:var(--surface2);border-radius:14px;
  padding:.85rem .95rem;
}
.travel-result-card h4{margin:.3rem 0 .25rem;font-size:1rem}
.travel-result-card p{margin:.25rem 0 .65rem}
.travel-result-card .btn{text-decoration:none;display:inline-flex;align-items:center}
.travel-error{border-color:var(--danger);background:#fbeae8;color:#7c2318}
[data-theme="dark"] .travel-error{background:#3a2320;color:#f0b8ae}
/* Scroll fix (v35): the estimator card must NEVER be position:sticky.
   It is ~900px tall on a phone (taller than the viewport) and its parent
   #travel-search-root is ~3,200px tall, so sticky pinned it over the whole
   screen for ~1,000px of scroll - the Umrah view looked jammed. It is a
   normal in-flow card now, like every other card in the app. */
.travel-total-list{border-top:1px solid var(--border);margin-top:.7rem;padding-top:.55rem}
.travel-total-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.28rem 0;border-bottom:1px dashed var(--border);
}
.travel-total-row span{color:var(--muted)}
.travel-total-row strong{white-space:nowrap}
.travel-total-grand{border-bottom:none;padding-top:.55rem;font-size:1.08rem}
.travel-total-grand span{color:var(--text);font-weight:800}
.travel-total-grand strong{color:var(--green2)}
.travel-city-grid{margin:.75rem 0}
.travel-city-panel{
  border:1px solid var(--border);background:var(--surface2);border-radius:14px;
  padding:.85rem .95rem;
}
.travel-city-panel h4{margin:.1rem 0 .35rem}
.travel-city-panel .btn{text-decoration:none;display:inline-flex;align-items:center}
.travel-stay-dates{font-weight:700}
.travel-warning{
  border-left:4px solid var(--gold);background:#f7ecc4;border-radius:10px;
  padding:.75rem .9rem;margin-top:.8rem;
}
[data-theme="dark"] .travel-warning{background:rgba(212,175,55,.13)}
.travel-warning p{margin:.35rem 0}
@media (max-width:560px){
  .travel-form-grid,
  .travel-estimate-grid,
  .travel-city-grid{grid-template-columns:1fr}
}

/* ================= v29 Midnight Emerald refinement =================
   Pattern, glass, icon system, Home declutter components. Token-driven:
   the Day expression lives in :root, Night in [data-theme="dark"]. */

/* star pattern: hero + focus overlay only, never behind body text */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4 L34 22 L52 28 L34 34 L28 52 L22 34 L4 28 L22 22 Z' fill='none' stroke='%23d4af37' stroke-opacity='0.55'/%3E%3C/svg%3E");
  background-size:56px 56px;
}
.hero > *{position:relative}
.hero-loc{display:flex;align-items:center;gap:.35rem}
.hero-loc .ic{width:15px;height:15px;color:var(--gold-bright)}
#focus-overlay{position:fixed}
#focus-overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4 L34 22 L52 28 L34 34 L28 52 L22 34 L4 28 L22 22 Z' fill='none' stroke='%23d4af37' stroke-opacity='0.55'/%3E%3C/svg%3E");
  background-size:56px 56px;
}
.fo-inner{position:relative}

/* night body: the emerald radial wash from the winning mockup */
[data-theme="dark"] body{
  background:radial-gradient(120% 60% at 50% 0%,#0a3a2a 0%,#06231b 46%,#04150f 100%);
  background-attachment:fixed;background-color:#04150f;
}

/* night: primary action = luminous gold gradient; ghost = gold hairline */
[data-theme="dark"] .btn.primary{
  background:linear-gradient(160deg,#f0d98c,#d4af37);border-color:rgba(212,175,55,.65);color:#231d05;
}
[data-theme="dark"] .btn.ghost{border-color:rgba(212,175,55,.42)}
[data-theme="dark"] .pill.sel,[data-theme="dark"] .subtabs button.active,
[data-theme="dark"] .jchip.sel,[data-theme="dark"] .chip-cell.sel,
[data-theme="dark"] .opt-btn.sel{border-color:rgba(212,175,55,.5)}
[data-theme="dark"] .tile.next{outline-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.35)}
[data-theme="dark"] #dhikr-circle{background:radial-gradient(circle at 35% 30%,#14614b,#083023)}
[data-theme="dark"] #tabbar{
  background:rgba(6,35,27,.94);border-top:1px solid rgba(212,175,55,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
[data-theme="dark"] .num-badge{background:rgba(212,175,55,.18);color:#f0d98c;border-color:rgba(212,175,55,.45)}
[data-theme="dark"] .ayah-card .ayah-num{background:rgba(212,175,55,.18);color:#f0d98c}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:rgba(255,255,255,.06)}

/* ---- SVG icon system (chrome only; drawn icons, currentColor) ---- */
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.nr-ico{display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.nr-ico .ic{width:22px;height:22px}
.lsc-ico{display:flex;align-items:center;color:var(--gold)}
.lsc-ico .ic{width:25px;height:25px}
.lib-sec-card.active .lsc-ico{color:#f0d98c}
#tabbar button .ic{width:21px;height:21px}
.ob-logo .ic{width:19px;height:19px}
.ob-brand{font-family:var(--serif);letter-spacing:.02em}
.page-head h1 .ic{width:22px;height:22px;color:var(--gold);margin-right:.15rem}
.qibla-kaaba .ic{width:20px;height:20px;color:var(--gold)}
#ask-clear .ic{width:17px;height:17px}
h1 .ic{vertical-align:-3px}

/* feature tiles (More index keeps .ftile unused on Home now, but the
   class is restyled as a glass chip row wherever it appears) */
.ftile .ft-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:2.15rem;height:2.15rem;border-radius:10px;font-size:1rem;
  background:rgba(212,175,55,.16);color:var(--gold);
}
.ftile .ft-ico .ic{width:20px;height:20px}

/* ---- Home declutter (v29): quick row, contextual banner, slim daily ---- */
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:.4rem 0 .2rem}
.qa{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:.85rem .25rem .75rem;box-shadow:var(--shadow);color:var(--text);
  transition:transform .12s ease;
}
.qa:active{transform:scale(.97)}
.qa-ico{
  display:flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:11px;
  background:rgba(212,175,55,.16);color:var(--gold);
}
.qa-ico .ic{width:21px;height:21px}
.qa-label{font-weight:700;font-size:.88rem;line-height:1.2;text-align:center}
.home-banner{border-left:3px solid var(--gold)}
.home-banner .nr-ico{color:var(--gold)}
.daily-head{
  display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:none;
  padding:.15rem 0;color:var(--text);cursor:pointer;text-align:left;font:inherit;
}
.daily-head .cite{margin-left:auto}
.daily-chev{color:var(--gold);font-size:1.25rem;font-weight:700;line-height:1;transition:transform .18s ease;flex:none}
.daily-head[aria-expanded="true"] .daily-chev{transform:rotate(90deg)}
.daily-body{padding-top:.15rem}
.home-everything{margin-top:.7rem}
.fo-moon .ic{width:46px;height:46px;color:#f0d98c}

/* ---- v31: Umrah summary strip + collapsible checklist/rites wrappers ---- */
.progress.thin{height:.32rem;margin:.45rem 0 .3rem}
.xhead{
  display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:none;
  padding:.1rem 0;color:var(--text);cursor:pointer;text-align:left;font:inherit;
}
.xhead-main{flex:1}
.xhead-status{color:var(--muted);font-size:.85rem}
.xhead .daily-chev{margin-left:auto}
.xhead[aria-expanded="true"] .daily-chev{transform:rotate(90deg)}
.xsub{
  display:flex;align-items:center;width:100%;background:none;border:none;
  border-top:1px solid var(--border);padding:.6rem 0;color:var(--text);
  cursor:pointer;font:inherit;font-weight:700;text-align:left;
}
.xsub-status{margin-left:.5rem;color:var(--muted);font-weight:400;font-size:.85rem}
.xsub .daily-chev{margin-left:auto}
.xsub[aria-expanded="true"] .daily-chev{transform:rotate(90deg)}
.xbody{padding-bottom:.35rem}