/* Hadith card reader, local Phase 1 build.
   Same identity as the Quran card reader: deep emerald and gold.
   Self contained, no external assets. */
:root{
  --emerald:#0d5c3f; --emerald-dark:#083f2b; --gold:#c9a227; --gold-soft:#f3e5b3;
  --bg:#f7f4ec; --card:#ffffff; --ink:#1d1d1b; --muted:#7a7462;
  --ar-size:28px; --tr-size:17px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.muted{color:var(--muted); font-size:.9em}
button{font-family:inherit; cursor:pointer}
select,input{font-family:inherit; font-size:15px; padding:5px 8px; border:1px solid var(--gold);
  border-radius:8px; background:#fff}
.gold-btn{
  background:var(--gold); color:#221c02; border:none; border-radius:999px;
  padding:6px 18px; font-size:15.5px; font-weight:bold;
}
.chip-btn{
  background:#fff; border:1.5px solid var(--emerald); color:var(--emerald);
  border-radius:999px; padding:3px 14px; font-size:14.5px;
}

/* ---------- app bar ---------- */
#appbar{
  position:sticky; top:0; z-index:40; text-align:center;
  background:linear-gradient(180deg,var(--emerald),var(--emerald-dark));
  color:#fff; padding:10px 14px 8px; border-bottom:3px solid var(--gold);
}
#appbar-title{font-size:23px; font-weight:bold}
#appbar-sub{font-size:14px; color:var(--gold-soft)}

/* ---------- layout ---------- */
#view-reader{max-width:820px; margin:0 auto; padding:10px 10px 50px}
#controls{
  position:sticky; top:64px; z-index:30; background:var(--bg);
  padding:6px 2px 10px; border-bottom:1px dashed var(--gold);
}
.control-row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:6px; max-width:100%}
.ctl{display:flex; align-items:center; gap:6px; font-size:15px; min-width:0}
.ctl.grow{flex:1 1 160px; min-width:0}
.ctl select{flex:1; min-width:0; max-width:100%}
#search-form{display:flex; gap:6px; min-width:0}
#search-input{flex:1; min-width:80px}
#book-info{margin-top:7px}
#resume-row{margin-top:7px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#loading{text-align:center; padding:38px 10px; font-size:18px; color:var(--emerald)}
#load-error{
  background:#fdf0ec; border:1px solid #d8a08c; border-radius:12px;
  padding:12px 16px; margin-top:14px; font-size:16px;
}

/* ---------- the card ---------- */
#hadith-card{
  background:var(--card); border:1px solid #e7dfc8; border-radius:14px;
  padding:16px 18px 14px; margin-top:14px; min-height:52vh;
  box-shadow:0 1px 3px rgba(60,50,10,.06);
}
#hadith-card.flash{outline:3px solid var(--gold)}
.card-head{display:flex; align-items:center; gap:10px}
.badge{
  background:var(--emerald); color:#fff; border-radius:999px; padding:1px 14px;
  font-size:15px; font-family:sans-serif; border:1.5px solid var(--gold);
}
.section-line{
  margin-top:8px; color:var(--emerald); font-size:15.5px; font-weight:bold;
  border-bottom:1px dashed #e0d5ae; padding-bottom:7px;
}
.section-line .sec-en{font-family:sans-serif; font-size:13.5px; color:var(--muted); direction:ltr}
.lang-block{margin-top:12px}
.lang-label{color:var(--emerald); font-weight:bold; font-size:14.5px; margin-bottom:2px}
.lang-label[dir="ltr"]{text-align:left; font-family:Georgia,serif}
.arabic{
  font-family:"Amiri","Scheherazade New","Traditional Arabic",serif;
  font-size:var(--ar-size); line-height:2.1; direction:rtl; text-align:right; color:#14231c;
  white-space:pre-wrap; word-break:break-word;
}
.translation{
  font-size:var(--tr-size); line-height:2.1; color:#2c2c28;
  white-space:pre-wrap; word-break:break-word;
}
.translation[dir="ltr"]{font-family:Georgia,serif; line-height:1.65; text-align:left}
.missing-note{
  background:#fffbe9; border:1px dashed var(--gold); border-radius:10px;
  padding:8px 12px; font-size:15.5px; color:#6b5a12; margin:4px 0 0;
}

/* ---------- nav ---------- */
#card-nav{display:flex; gap:10px; margin-top:14px}
.nav-btn{
  flex:1; background:#fff; border:1.5px solid var(--emerald); color:var(--emerald);
  border-radius:999px; padding:9px 10px; font-size:17px; font-weight:bold;
}
.nav-btn.gold{background:var(--gold); border-color:var(--gold); color:#221c02}
.nav-btn:disabled{opacity:.45; cursor:default}
#progress-track{
  height:6px; background:#e7dfc8; border-radius:999px; margin-top:14px; overflow:hidden;
}
#progress-bar{height:100%; background:var(--emerald); width:0%}
#phase-note{margin-top:16px; text-align:center; font-size:14.5px; color:var(--muted)}