/* Hukuru: one column, phone first, Dhivehi first. Argo tokens, light and dark. */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-variable.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Marcellus";src:url(fonts/marcellus-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Thaana: MV Waheed for the Thaana letters only, so digits stay lining and tabular from Newsreader */
@font-face{font-family:"Amiri Quran";src:url(fonts/amiri-quran.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hukuru Thaana";src:url(fonts/thaana-waheed.woff2) format("woff2");size-adjust:118%;unicode-range:U+0780-07BF,U+060C,U+061B,U+061F,U+FDF2;font-display:swap}
:root{
  --oxblood:#8c363f; --sailcloth:#f0ede6;
  --ground:#f0ede6; --raised:#f7f5f0; --sunk:#e6e0d4; --wash:#ebddd8;
  --ink:#3b1a1e; --soft:#6b4447; --accent:#8c363f; --rule:#d8ccbf; --rule-strong:#a0807c;
  --fill:#8c363f; --on-fill:#f0ede6; --focus:#5e2329; --mark:#8c363f;
  --show-ox:block; --show-cr:none; --crop-filter:none;
  --display:"Marcellus","Hukuru Thaana","Trajan Pro","Times New Roman",serif;
  --text:"Newsreader","Hukuru Thaana",Georgia,"Times New Roman",serif;
  --thaana:"Hukuru Thaana","Newsreader","MV Boli",sans-serif;
  --read:19px; --read-lh:1.75;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#2a1416; --raised:#341b1e; --sunk:#211012; --wash:#43242a;
  --ink:#f0ede6; --soft:#cdb9b4; --accent:#e09a9f; --rule:#4a2c30; --rule-strong:#8a6266;
  --fill:#f0ede6; --on-fill:#5e2329; --focus:#f0ede6; --mark:#f0ede6;
  --show-ox:none; --show-cr:block; --crop-filter:invert(1) hue-rotate(180deg) brightness(.92) sepia(.15); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#2a1416; --raised:#341b1e; --sunk:#211012; --wash:#43242a;
  --ink:#f0ede6; --soft:#cdb9b4; --accent:#e09a9f; --rule:#4a2c30; --rule-strong:#8a6266;
  --fill:#f0ede6; --on-fill:#5e2329; --focus:#f0ede6; --mark:#f0ede6;
  --show-ox:none; --show-cr:block; --crop-filter:invert(1) hue-rotate(180deg) brightness(.92) sepia(.15); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:17px;line-height:26px;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;min-height:100dvh}
button,select,input,textarea{font:inherit;color:inherit;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{max-width:680px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-height:100dvh;display:flex;flex-direction:column}

/* Dhivehi UI: Thaana reads best a little larger, no letter-spacing */
:root[lang="dv"] body{font-size:18px;line-height:30px}
:root[lang="dv"] .main{font-family:var(--thaana)}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 0 10px;gap:12px}
.brand{line-height:0}
.logo{height:52px;width:auto}
.logo.ox{display:var(--show-ox)} .logo.cr{display:var(--show-cr)}
.bar-end{display:flex;gap:8px}
.icon-btn{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:1px solid var(--rule);background:var(--raised);border-radius:999px;cursor:pointer;color:var(--ink);text-decoration:none;flex:none}
.icon-btn:hover{border-color:var(--rule-strong)}
.btxt{font-size:15px}
@media (max-width:400px){.btxt{display:none}.icon-btn{padding:0;width:44px}}

.main{flex:1;display:flex;flex-direction:column;gap:14px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;color:var(--accent);text-wrap:balance}
:root[lang="dv"] h1,:root[lang="dv"] h2,:root[lang="dv"] h3{font-family:var(--thaana)}
h2{font-size:24px;line-height:30px}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
:root[lang="dv"] .eyebrow{font-family:var(--thaana);letter-spacing:0;font-size:15px}
.muted{color:var(--soft)}
.card{background:var(--raised);border:1px solid var(--rule);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px}
.card.hero{border-color:var(--rule-strong);box-shadow:0 1px 0 rgba(59,26,30,.08),0 6px 18px rgba(59,26,30,.06)}
.card .title{font-size:26px;line-height:34px}
.card .alt{font-size:17px;line-height:24px;color:var(--soft)}
.date{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--soft);font-size:15px;line-height:22px}
.date b{font-weight:500;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--raised);color:var(--ink);cursor:pointer;text-decoration:none;font-size:16px}
.btn.primary{background:var(--fill);color:var(--on-fill);border-color:var(--fill)}
.btn.small{min-height:36px;padding:4px 14px;font-size:15px}
.btn:hover{border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden}
.seg button{min-height:40px;padding:4px 16px;border:0;background:transparent;cursor:pointer;color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--fill);color:var(--on-fill)}
.seg .dv{font-family:var(--thaana)}

/* lists */
.list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.list li a{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--raised);text-decoration:none;color:var(--ink)}
.list li a:hover{border-color:var(--rule-strong)}
.list .t{font-size:19px;line-height:26px}
.list .d{font-size:14px;line-height:20px;color:var(--soft)}
.tag{display:inline-block;font-size:12px;line-height:18px;padding:0 8px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--soft)}
input.search{width:100%;min-height:44px;padding:8px 14px;border:1px solid var(--rule-strong);border-radius:12px;background:var(--raised);color:var(--ink)}
:root[lang="dv"] input.search{font-family:var(--thaana)}

/* reader */
.reader{display:flex;flex-direction:column;gap:14px}
.reader .tools{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 0;background:var(--ground)}
.reader .tools .size{display:inline-flex;gap:6px}
.text{font-size:var(--read);line-height:var(--read-lh);display:flex;flex-direction:column;gap:1em}
.text[dir="rtl"]{font-family:var(--thaana);text-align:right}
.text[dir="ltr"]{font-family:var(--text);text-align:left}
.text p{margin:0;text-wrap:pretty}
.text p sup{font-size:.7em;color:var(--accent)}
.text .ar{display:block;margin:.6em auto;max-width:100%;height:auto;filter:var(--crop-filter)}
.ayah{margin:1.1em 0;padding:.2em 0}
.ayah p{font-family:"Amiri Quran",serif;font-size:1.45em;line-height:2.15;text-align:center;color:var(--ink);margin:0;word-spacing:.05em}
.ayah .aend{white-space:nowrap}
.ayah sup{font-family:"Newsreader",serif;font-size:.5em}
.ayah figcaption{text-align:center;font-size:.8em;color:var(--soft);font-variant-numeric:lining-nums tabular-nums;margin-top:.15em}
.ayah figcaption [lang=ar]{font-family:"Amiri Quran",serif;font-size:1.1em}
.text .sermon2{margin-top:1em;padding-top:1em;border-top:1px solid var(--rule);text-align:center}
.foot-notes{border-top:1px solid var(--rule);padding-top:12px;font-size:14px;line-height:21px;color:var(--soft)}
.foot-notes ol{margin:6px 0 0;padding-inline-start:22px;display:flex;flex-direction:column;gap:4px}
.notice{padding:14px 16px;border:1px dashed var(--rule-strong);border-radius:12px;color:var(--soft)}

/* settings */
.set{display:flex;flex-direction:column;gap:14px}
.set .field{display:flex;flex-direction:column;gap:8px}
.set label{color:var(--soft);font-size:15px}
.set select{min-height:44px;padding:6px 12px;border:1px solid var(--rule-strong);border-radius:12px;background:var(--raised)}

.foot{margin-top:24px;padding-top:12px;border-top:1px solid var(--rule);color:var(--soft);font-size:13px;line-height:20px}
.foot p{margin:0 0 4px}
.foot .fleet a{font-family:var(--display);letter-spacing:.14em;text-decoration:none}
.spin{color:var(--soft);padding:24px;text-align:center}
@media (prefers-reduced-motion:no-preference){.card.hero{animation:rise .4s ease-out}}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}

/* 0.2.0: the Ministry's PDF inside the app, the reminder switch, toasts */
.pdf{display:flex;flex-direction:column;gap:10px;align-items:center}
.pdfpage{display:block;max-width:100%;height:auto;background:#fff;border:1px solid var(--rule);border-radius:6px;filter:var(--crop-filter)}
.switch{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:17px;cursor:pointer}
.switch input{width:22px;height:22px;accent-color:var(--accent)}
.small{font-size:14px;line-height:20px}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));inset-inline:16px;background:var(--raised);z-index:9}
:root.in-app .foot .fleet{display:none}