/* =====================================================================
   Islamic Library — visual system
   green of the mihrab · parchment · brass · a star that keeps its angle
   ===================================================================== */

:root{
  --ink:#1b1915;
  --ink-2:#4a453c;
  --ink-3:#7d766a;
  --parchment:#f7f3ea;
  --paper:#fffdf8;
  --line:#e4dccc;
  --green:#0f5c4e;
  --green-d:#0a4239;
  --green-l:#e6f0ec;
  --brass:#b8873a;
  --brass-l:#f5ead4;
  --red:#9c3b2e;
  --red-l:#fbecea;
  --coral:#e2703a;
  --teal:#2f8f8a;
  --radius:10px;
  --shadow:0 1px 2px rgba(27,25,21,.05), 0 8px 24px -12px rgba(27,25,21,.18);
  --font-display:'Marcellus', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic:'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--parchment);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.25;margin:0 0 .5em;letter-spacing:.1px}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.18rem}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:3px}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 20px}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:.6em;display:block;
}

/* ---------- header ---------- */
.site-head{background:var(--green);color:#f3efe4;position:sticky;top:0;z-index:50}
.site-head a{color:#f3efe4}
.head-inner{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.22rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{max-height:56px;width:auto}
.brand .star{width:22px;height:22px;flex:none;opacity:.9}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:8px 13px;border-radius:6px;font-size:.93rem;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav a.active{background:rgba(255,255,255,.16)}
.nav-lang{display:flex;gap:2px;align-items:center;padding:0 4px;border-left:1px solid rgba(255,255,255,.2);
  border-right:1px solid rgba(255,255,255,.2);margin:0 2px}
.nav-lang a{padding:6px 9px;border-radius:5px;font-size:.82rem;text-decoration:none;color:rgba(255,255,255,.75)}
.nav-lang a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-lang a.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600}
@media(max-width:900px){.nav-lang{border:0;margin:6px 0;padding:6px 0;flex-wrap:wrap}}
.nav .btn-ghost{border:1px solid rgba(255,255,255,.35)}

.nav-drop{position:relative}
.nav-drop-toggle{
  background:none;border:0;color:inherit;font:inherit;font-size:.93rem;cursor:pointer;
  padding:8px 13px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;
}
.nav-drop-toggle .care{font-size:.7em;opacity:.8}
.nav-drop-toggle:hover,.nav-drop.active .nav-drop-toggle{background:rgba(255,255,255,.1)}
.nav-drop-panel{
  display:none;position:absolute;top:100%;left:0;min-width:170px;margin-top:6px;
  background:var(--green-d);border:1px solid rgba(255,255,255,.15);border-radius:10px;
  padding:6px;box-shadow:0 16px 32px -14px rgba(0,0,0,.5);z-index:60;
}
.nav-drop-panel.open{display:block}
.nav-drop-panel a{display:block;padding:9px 12px;border-radius:6px;font-size:.9rem;
  text-decoration:none;color:inherit;white-space:nowrap}
.nav-drop-panel a:hover{background:rgba(255,255,255,.1)}
.nav-drop-panel a.active{background:rgba(255,255,255,.16)}
.nav-account .nav-drop-toggle{padding:8px 10px;font-size:1.05rem}
.nav-account .nav-drop-panel{right:0;left:auto}

@media(max-width:860px){
  .nav-drop-panel{position:static;display:none;margin:2px 0 4px 14px;box-shadow:none;
    border-color:rgba(255,255,255,.1);width:auto}
  .nav-drop-panel.open{display:block}
  .nav-drop-toggle{width:100%;justify-content:space-between;padding:11px 14px}
  .nav-account .nav-drop-panel{right:auto}
}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.35);
  color:inherit;border-radius:6px;padding:7px 10px;font-size:1.1rem;cursor:pointer}
@media(max-width:860px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--green-d);
    flex-direction:column;align-items:stretch;padding:8px;gap:2px}
  .nav.open{display:flex}
  .nav a{padding:11px 14px}
}

/* ---------- footer ---------- */
.site-foot{background:var(--green-d);color:#cfdcd6;margin-top:64px;padding:40px 0 28px;font-size:.9rem}
.site-foot a{color:#f0e6cf}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:20px}}
.foot-grid h4{color:#fff;font-size:1rem;margin-bottom:.6em}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:7px}
.foot-bar{border-top:1px solid rgba(255,255,255,.13);margin-top:28px;padding-top:18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.83rem;color:#9db3ab}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--green);color:#fff;border:1px solid var(--green);
  padding:11px 20px;border-radius:7px;font:600 .94rem/1 var(--font-body);
  cursor:pointer;text-decoration:none;transition:background .15s,transform .05s;
}
.btn:hover{background:var(--green-d);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-outline{background:transparent;color:var(--green)}
.btn-outline:hover{background:var(--green-l);color:var(--green-d)}
.btn-brass{background:var(--brass);border-color:var(--brass)}
.btn-brass:hover{background:#9d7230}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:#7d2e23}
.btn-sm{padding:7px 13px;font-size:.85rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- cards / panels ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px}
.card + .card{margin-top:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:-4px 0 18px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}

/* ---------- forms ---------- */
label{display:block;font-size:.86rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=url],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);font:400 .96rem/1.4 var(--font-body);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px rgba(15,92,78,.12)}
textarea{min-height:110px;resize:vertical}
.field{margin-bottom:16px}
.hint{font-size:.8rem;color:var(--ink-3);margin-top:5px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.row{grid-template-columns:1fr}}
.check{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:0}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--green);flex:none}
.check label{margin:0;font-weight:600}
.check .hint{margin-top:2px}

/* ---------- alerts ---------- */
.alert{padding:12px 16px;border-radius:7px;margin-bottom:18px;font-size:.92rem;border-left:3px solid}
.alert-success{background:var(--green-l);border-color:var(--green);color:#0b463b}
.alert-error{background:var(--red-l);border-color:var(--red);color:#7d2e23}
.alert-info{background:var(--brass-l);border-color:var(--brass);color:#7a5a22}

/* ---------- auth pages ---------- */
.auth-wrap{max-width:440px;margin:56px auto;padding:0 20px}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:34px 30px;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--green),var(--brass),var(--green))}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head .star{width:34px;height:34px;margin:0 auto 12px}
.auth-alt{text-align:center;margin-top:18px;font-size:.9rem;color:var(--ink-3)}

/* OTP boxes */
.otp-input{letter-spacing:.6em;text-align:center;font-size:1.5rem;font-family:var(--font-display);padding:14px}

/* ---------- hero ---------- */
.hero{background:var(--green);color:#f4efe3;padding:76px 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-70px;width:380px;height:380px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 61 28 89 17 78 45 100 50 78 55 89 83 61 72 50 98 39 72 11 83 22 55 0 50 22 45 11 17 39 28Z' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.13;pointer-events:none}
.hero h1{font-size:clamp(2.1rem,5vw,3.2rem);color:#fff;max-width:16ch;margin-bottom:.35em}
.hero p{font-size:1.1rem;max-width:52ch;color:#d5e3dd}
.hero .eyebrow{color:#e2c07a}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-actions .btn{background:#f4efe3;color:var(--green-d);border-color:#f4efe3}
.hero-actions .btn:hover{background:#fff}
.hero-actions .btn-outline{background:transparent;color:#f4efe3;border-color:rgba(255,255,255,.45)}
.hero-arabic{font-family:var(--font-arabic);font-size:2rem;color:#e2c07a;direction:rtl;margin-bottom:18px}

/* ---------- section heads ---------- */
.section{padding:56px 0}
.section-head{margin-bottom:28px}
.section-head p{color:var(--ink-3);max-width:60ch;margin:0}

/* ---------- grids ---------- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- book card: the mihrab arch is the signature ---------- */
.book{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;
}
.book:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.book-arch{
  height:150px;background:var(--green);position:relative;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
.book-arch img{width:100%;height:100%;object-fit:cover}
.book-arch::before{
  content:"";position:absolute;left:50%;top:16px;transform:translateX(-50%);
  width:84px;height:118px;border:1.5px solid rgba(226,192,122,.55);
  border-radius:42px 42px 5px 5px;
}
.book-arch .ar{font-family:var(--font-arabic);color:#e2c07a;font-size:1.7rem;position:relative;direction:rtl}
.book-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.book-body h3{margin:0 0 4px;font-size:1.06rem;color:var(--ink)}
.book-meta{font-size:.82rem;color:var(--ink-3);margin-bottom:10px}
.book-body p{font-size:.88rem;color:var(--ink-2);margin:0 0 14px}
.book-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}

.tag{display:inline-block;background:var(--green-l);color:var(--green-d);border-radius:99px;
  padding:3px 10px;font-size:.74rem;font-weight:600;letter-spacing:.02em}
.tag-brass{background:var(--brass-l);color:#7a5a22}
.tag-red{background:var(--red-l);color:#7d2e23}

/* ---------- dashboard ---------- */
.dash-head{background:var(--paper);border-bottom:1px solid var(--line);padding:30px 0 26px}
.dash-head h1{margin-bottom:.15em}
.dash-head .sub{color:var(--ink-3);margin:0}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media(max-width:800px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--parchment);border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.stat .n{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--green)}
.stat .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-top:6px}

/* continue-reading strip */
.resume{display:flex;gap:16px;align-items:center;background:var(--green);color:#f2efe6;
  border-radius:var(--radius);padding:18px 22px;flex-wrap:wrap}
.resume h3{color:#fff;margin:0 0 3px}
.resume p{margin:0;color:#c6d8d1;font-size:.9rem}
.resume .btn{margin-left:auto;background:#e2c07a;border-color:#e2c07a;color:#3a2c0e}
.resume .btn:hover{background:#f0d59a}

/* ---------- reader ---------- */
.reader-bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:30}
.reader-bar-in{display:flex;align-items:center;gap:14px;padding:11px 0;flex-wrap:wrap}
.reader-bar .title{font-family:var(--font-display);font-size:1.05rem}
/* The tools drop onto their own line at every width, so they are centred
   rather than pushed to one edge — a block of buttons hanging off the right,
   or ragged against the left, reads as an accident either way. */
.reader-bar .tools{
  margin-left:auto;margin-right:auto;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%;
  justify-content:center;
}
@media(max-width:900px){
  /* Once the title itself starts to wrap, centre that line too so the whole
     bar reads as one centred group. */
  .reader-bar-in{justify-content:center;text-align:center}
  .reader-bar .tools{width:100%}
}
@media(max-width:640px){
  .reader-bar-in{gap:10px}
  .reader-bar .tools{margin-left:0;margin-right:0;width:100%;justify-content:center}
}
.reader-body{max-width:760px;margin:0 auto;padding:34px 20px 60px}

/* ---- surah context sidebar ---- */
.reader-layout{max-width:1080px;margin:0 auto}
.reader-layout.has-sidebar{display:grid;grid-template-columns:272px minmax(0,1fr);gap:24px;
  padding:0 20px}
.reader-layout.has-sidebar .reader-body{max-width:none;margin:0;padding:34px 0 60px}
.surah-sidebar{padding-top:24px}
.surah-sidebar-in{
  position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px;max-height:calc(100vh - 104px);overflow-y:auto;
}
.surah-sidebar-eyebrow{margin:0 0 4px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--brass);font-weight:700}
.surah-sidebar-in h3{margin:0 0 2px;font-family:var(--font-display);color:var(--green);font-size:1.15rem}
.surah-sidebar-in .ar{font-family:var(--font-arabic);color:var(--brass);font-size:1.35rem;margin:0 0 14px}
.surah-sidebar-in dl{margin:0}
.surah-sidebar-in dt{font-size:1rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:700;margin-top:16px}
.surah-sidebar-in dt:first-of-type{margin-top:0}
.surah-sidebar-in dd{margin:4px 0 0;font-size:.89rem;color:var(--ink-2);line-height:1.55}
.surah-sidebar-in dd p{margin:0 0 8px}
.surah-sidebar-in dd h1,.surah-sidebar-in dd h2,.surah-sidebar-in dd h3{
  font-family:var(--font-display);color:var(--green);line-height:1.3;margin:12px 0 6px;
}
.surah-sidebar-in dd h1:first-child,.surah-sidebar-in dd h2:first-child,.surah-sidebar-in dd h3:first-child{margin-top:0}
.surah-sidebar-in dd h1{font-size:1.15rem}
.surah-sidebar-in dd h2{font-size:1.05rem}
.surah-sidebar-in dd h3{font-size:.98rem}
.surah-sidebar-in dd p:last-child{margin-bottom:0}
.surah-sidebar-in dd ul,.surah-sidebar-in dd ol{margin:0 0 8px;padding-left:20px}
.surah-sidebar-in dd blockquote{margin:0 0 8px;padding-left:10px;border-left:3px solid var(--brass);color:var(--ink-3)}
.surah-sidebar-in dd a{color:var(--green)}

/* ---- admin rich-text editor ---- */
.quill-editor{background:#fff;border-radius:0 0 7px 7px}
.rich-field{position:relative}
.code-view-toggle{margin-top:6px;font-size:.78rem;padding:5px 10px}
.code-view-ta{
  width:100%;min-height:140px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.5;padding:10px 12px;border:1px solid var(--line);
  border-radius:7px;background:#fbfaf6;color:var(--ink);resize:vertical;
}
.field-order-list{list-style:none;margin:0;padding:0;max-width:640px}
.field-order-list li{
  padding:10px 12px;margin-bottom:6px;background:#fff;border:1px solid var(--line);
  border-radius:8px;font-size:.92rem;user-select:none;
}
.field-order-list li:active{cursor:grabbing}
.field-order-list li.dragging{opacity:.4;border-style:dashed}
.field-order-list .fo-row{display:flex;align-items:center;gap:10px;cursor:grab;flex-wrap:wrap}
.field-order-list .drag-handle{color:var(--ink-3);font-size:.8rem;letter-spacing:-2px}
.field-order-list .fo-icon{font-size:1.05rem}
.field-order-list .fo-label{flex:1}
.field-order-list .fo-check{
  flex-shrink:0;display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:400;
  color:var(--ink-2);margin:0;white-space:nowrap;cursor:pointer;
}
.field-order-list .fo-check input{width:auto;margin:0;padding:0;cursor:pointer}
.field-order-list .field-edit-toggle{flex-shrink:0;font-size:.8rem;padding:6px 12px;white-space:nowrap}
.field-order-list .fo-edit-panel{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);
}
.field-order-list .fo-edit-panel label{flex:1;min-width:160px;font-size:.8rem;margin-bottom:0}
.field-order-list .fo-edit-panel input,.field-order-list .fo-edit-panel select{margin-top:4px}

/* per-field content size, set from Admin -> Surah notes */
.surah-sidebar-in dd.fs-small,.surah-notes-page-dl dd.fs-small{font-size:.78rem}
.surah-sidebar-in dd.fs-normal,.surah-notes-page-dl dd.fs-normal{font-size:.89rem}
.surah-sidebar-in dd.fs-large,.surah-notes-page-dl dd.fs-large{font-size:1.05rem}
.surah-sidebar-in dd.fs-xlarge,.surah-notes-page-dl dd.fs-xlarge{font-size:1.22rem}

.quill-editor .ql-editor{min-height:90px;font:inherit;font-size:.94rem}
label:has(> .quill-editor) .ql-toolbar{border-radius:7px 7px 0 0;background:var(--parchment)}
.surah-notes-toggle-mobile{display:none}
@media(max-width:980px){
  .reader-layout.has-sidebar{display:block;padding:0 20px}
  .reader-layout.has-sidebar .reader-body{padding:24px 0 20px}
  .surah-notes-toggle-mobile{display:inline-flex}
  .surah-sidebar{
    display:none;position:fixed;inset:0;z-index:70;
    background:rgba(10,40,34,.55);align-items:flex-end;justify-content:center;
    padding:0;padding-top:0;
  }
  .surah-sidebar.open{display:flex}
  .surah-sidebar-in{
    position:relative;width:100%;max-width:none;max-height:78vh;overflow-y:auto;
    margin:0;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px -10px rgba(0,0,0,.4);
    animation:sheet-up .18s ease-out;padding-top:44px;
  }
  @keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
  .surah-sidebar-close{
    position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);background:#fff;font-size:16px;color:var(--ink-2);cursor:pointer;
  }
}
@media(min-width:981px){
  .surah-sidebar-close{display:none}
}
.verse{
  position:relative;padding:20px 20px 20px 52px;margin:0 -20px;border-radius:10px;
  overflow:hidden;scroll-margin-top:140px;
  transition:background .16s ease, box-shadow .16s ease;
}
.verse + .verse{border-top:1px solid var(--line)}
.verse:hover,.verse:focus-within{background:var(--paper)}
.verse:target{
  background:#fdf6e3;box-shadow:inset 3px 0 0 var(--brass);
  animation:verseflash 1.6s ease-out 1;
}
@keyframes verseflash{0%{background:#f6e6bd}100%{background:#fdf6e3}}
.verse.is-bookmarked{box-shadow:inset 3px 0 0 var(--green)}
.verse.bm-brass{box-shadow:inset 3px 0 0 var(--brass)}
.verse.bm-red{box-shadow:inset 3px 0 0 #9c3b2e}
.verse.bm-blue{box-shadow:inset 3px 0 0 #2f5d8c}

.verse-content{position:relative}
.verse-content .verse-no{
  position:absolute;left:-44px;top:22px;z-index:1;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;font-size:.76rem;color:var(--brass);font-weight:600;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 62 27 88 20 81 46 99 50 81 54 88 80 62 73 50 97 38 73 12 80 19 54 1 50 19 46 12 20 38 27Z' fill='none' stroke='%23b8873a' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Always-visible action bar at the top of every ayah — play, save, add
   note and share sit here permanently, no hover or click needed to
   reveal them. */
.verse-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:-20px -20px 14px -52px;padding:10px 20px 12px;
  border-top:3px solid var(--brass);border-bottom:1px solid var(--line);
}
.vtb-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vtb-btn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;border:1.5px solid var(--line);border-radius:99px;
  padding:7px 14px;cursor:pointer;
  font:600 .8rem/1 inherit;color:var(--ink-2);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.vtb-btn .ic{font-size:14px;line-height:1}
.vtb-btn:hover{border-color:var(--green);color:var(--green)}
.vtb-btn.on{background:var(--brass);border-color:var(--brass);color:#fff}
.verse.editing .note-toggle{background:var(--brass);border-color:var(--brass);color:#fff}

.verse .arabic{font-family:var(--font-arabic);font-size:1.85rem;line-height:2.15;direction:rtl;
  text-align:right;color:var(--ink);margin-bottom:14px}
.word-tap{
  cursor:pointer;border-bottom:2px dotted transparent;transition:border-color .12s ease,color .12s ease;
  padding:0 1px;border-radius:3px;
}
.word-tap:hover,.word-tap.active{border-color:var(--brass);color:var(--green-d)}

.word-popover{
  position:fixed;z-index:70;background:var(--green-d);color:#fff;padding:10px 14px;border-radius:10px;
  font-family:var(--font-body);font-size:.85rem;line-height:1.5;max-width:220px;text-align:center;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);display:none;direction:ltr;
}
.word-popover.open{display:block}
.word-popover .wp-meaning-row{font-weight:700;font-size:.92rem;margin-top:2px}
.word-popover .wp-meaning-row:first-child{margin-top:0}
.word-popover .wp-lang-label{font-weight:400;color:#d9c896;font-size:.78rem}
.word-popover .wp-root{color:#d9c896;font-size:.78rem;margin-top:3px}
.word-popover::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--green-d);
}
.verse .translation{font-size:1.02rem;color:var(--ink);line-height:1.75}
.verse .translit{font-size:.92rem;color:var(--ink-3);font-style:italic;margin:8px 0}
.verse .ref{font-size:.8rem;color:var(--ink-3);margin-top:10px}
.verse .narrator{font-size:.86rem;color:var(--green);font-weight:600;margin-bottom:8px}
.bm-btn{background:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;cursor:pointer;
  font-size:.78rem;color:var(--ink-3)}
.bm-btn:hover{border-color:var(--brass);color:var(--brass)}
.bm-btn.on{background:var(--brass-l);border-color:var(--brass);color:#7a5a22}
.fs-1 .verse .arabic{font-size:1.35rem}.fs-2 .verse .arabic{font-size:1.6rem}
.fs-4 .verse .arabic{font-size:2.2rem}.fs-5 .verse .arabic{font-size:2.6rem}
.fs-1 .verse .translation{font-size:.92rem}.fs-5 .verse .translation{font-size:1.15rem}

.section-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.section-list a{display:flex;gap:12px;align-items:center;padding:12px 15px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
.section-list a:hover{border-color:var(--green);background:var(--green-l)}
.section-list .num{font-family:var(--font-display);color:var(--brass);min-width:30px}
.section-list .ar{margin-left:auto;font-family:var(--font-arabic);font-size:1.25rem;color:var(--green)}

/* ---------- video gallery ---------- */
.video{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.video .thumb{position:relative;aspect-ratio:16/9;background:#000}
.video .thumb img{width:100%;height:100%;object-fit:cover}
.video .thumb::after{content:"";position:absolute;inset:0;background:rgba(15,92,78,.18)}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;
  align-items:center;justify-content:center;color:var(--green);font-size:1.1rem;padding-left:4px}
.video-body{padding:14px 16px}
.video-body h3{font-size:.98rem;margin:0 0 5px}
.video-body .who{font-size:.82rem;color:var(--ink-3)}
.scholar-chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:6px 15px 6px 6px;color:var(--ink);
  text-decoration:none;font-size:.9rem;font-weight:600}
.scholar-chip:hover{border-color:var(--green);text-decoration:none}
.scholar-chip img,.scholar-chip .ph{width:32px;height:32px;border-radius:50%;object-fit:cover;
  background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex:none}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(27,25,21,.72);display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modal-in{background:#000;border-radius:10px;overflow:hidden;width:min(900px,100%)}
.modal-in iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.modal-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
  font-size:2rem;cursor:pointer;line-height:1}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
table.data th{background:var(--parchment);text-align:left;padding:11px 14px;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:#fdfbf6}

.empty{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty .star{width:44px;height:44px;margin:0 auto 14px;opacity:.5}
.empty h3{color:var(--ink-2)}

.pager{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 13px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);font-size:.88rem;text-decoration:none}
.pager .cur{background:var(--green);color:#fff;border-color:var(--green)}

.divider-star{display:flex;align-items:center;gap:16px;color:var(--brass);margin:36px 0}
.divider-star::before,.divider-star::after{content:"";height:1px;background:var(--line);flex:1}
.divider-star svg{width:20px;height:20px;flex:none}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#f7f3ea;padding:12px 20px;border-radius:8px;font-size:.9rem;
  opacity:0;transition:.25s;z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* library filter bar */
.filter-grid{display:grid;grid-template-columns:2fr 1.2fr 1.2fr auto;gap:12px;align-items:end}
@media(max-width:760px){.filter-grid{grid-template-columns:1fr 1fr}
  .filter-grid > :first-child{grid-column:1 / -1}
  .filter-grid .btn{grid-column:1 / -1}}

/* ============================================================
   v2 — annotations, bookmark sheet, languages, other pages
   ============================================================ */

/* links get a soft highlight everywhere in the reader */
.reader-body a:not(.btn):not(.bm-btn):not(.bm-toggle):not(.note-toggle):hover{
  background:rgba(184,135,58,.16);border-radius:4px;box-shadow:0 0 0 3px rgba(184,135,58,.16);
}
.book-arch:hover,.scholar-chip:hover,.bm-card:hover{
  transform:translateY(-2px);box-shadow:0 10px 26px -18px rgba(10,66,57,.75);
}
.book-arch,.scholar-chip,.bm-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(184,135,58,.55);outline-offset:2px;border-radius:5px;
}

.bm-tag{
  display:inline-block;margin-top:10px;padding:3px 10px;border-radius:99px;
  background:rgba(184,135,58,.15);color:#7a5a1f;font-size:.78rem;font-weight:600;
}

/* --- annotations --- */
.note-box{margin-top:0}
.note-shown{
  display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  background:#fffaf0;border-left:3px solid var(--brass);
  border-radius:0 8px 8px 0;padding:10px 14px 10px 40px;
}
.note-pin{color:var(--brass);font-size:15px;flex-shrink:0;line-height:1.6}
.note-text{margin:0;flex:1;font-size:.94rem;color:#5b5347;white-space:pre-wrap}
.note-editor{background:#fffaf0;border-left:3px solid var(--brass);border-radius:0 8px 8px 0;
  padding:12px 14px 12px 40px;margin-top:12px}
.note-input{width:100%;border:1px solid #e4dcc9;border-radius:7px;padding:10px 12px;
  font:inherit;font-size:.94rem;background:#fff;resize:vertical}
.note-input:focus{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px rgba(184,135,58,.18)}
.note-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.note-actions .btn{padding:7px 16px;font-size:.86rem}
.note-status{font-size:.82rem;color:#0f7b3f}
.verse.has-note .note-toggle{box-shadow:0 0 0 3px rgba(184,135,58,.3)}

/* --- language switcher --- */
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:#fff}

/* ---- language combination picker ---- */
.lang-picker{position:relative}
.lang-picker-toggle .care{font-size:.75em;margin-left:2px}

/* ---- surah notes: progress bar + lightbox ---- */
.note-progress-list{display:flex;flex-direction:column;gap:14px;max-height:560px;overflow-y:auto;padding-right:4px}
.note-progress-row{border-bottom:1px solid var(--line);padding-bottom:12px}
.npr-title{font-size:.88rem;font-weight:600;margin-bottom:6px}
.npr-ar{font-family:var(--font-arabic);color:var(--brass);font-weight:400;margin-left:6px}
.note-progress{display:flex;gap:2px;flex-wrap:wrap}
.note-seg{
  width:14px;height:14px;border-radius:3px;cursor:pointer;flex-shrink:0;
  transition:transform .12s ease;
}
.note-seg:hover{transform:scale(1.25)}
.note-seg.note-seg-filled{background:#3aa373}
.note-seg.note-seg-unfilled{background:#d9564a}

.floating-read-btn{
  position:fixed;right:24px;bottom:24px;z-index:60;
  box-shadow:0 12px 28px -10px rgba(10,66,57,.55);
}
@media(max-width:640px){
  .floating-read-btn{right:16px;bottom:16px;left:16px;text-align:center}
}

.note-lightbox{
  position:fixed;inset:0;z-index:80;background:rgba(10,40,34,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.note-lightbox[hidden]{display:none}
.note-lightbox-in{
  position:relative;background:#fff;border-radius:14px;padding:26px;
  max-width:760px;width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.note-lightbox-close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;font-size:16px;color:var(--ink-2);cursor:pointer;
}
@media(max-width:640px){
  .note-lightbox-in{padding:18px;max-height:90vh}
}
.lang-picker-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(10,66,57,.45);padding:14px;width:240px;
}
.lang-picker-quick{display:flex;gap:8px;margin-bottom:10px}
.lang-picker-quick .bm-btn{flex:1;text-align:center;font-size:.78rem;padding:6px 8px}
.lang-picker-opt{
  display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:.86rem;
  font-weight:400;color:var(--ink);cursor:pointer;
}
.lang-picker-opt input{width:auto;padding:0;margin:0}
.lang-picker-opt .native{color:var(--ink-3);font-size:.85em}
.lang-picker-panel .btn{width:100%;margin-top:8px;padding:9px;font-size:.88rem}
@media(max-width:640px){
  .lang-picker-panel{
    position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;
    max-height:70vh;overflow-y:auto;
  }
}
.lang-switch a{padding:5px 12px;font-size:.82rem;color:var(--ink-2);text-decoration:none;border-right:1px solid var(--line)}
.lang-switch a:last-child{border-right:0}
.lang-switch a:hover{background:var(--parchment)}
.translation-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:700;margin-top:10px}
.translation-label:first-of-type{margin-top:0}
.reader-bar-note{
  background:var(--brass-l);color:#7a5a22;font-size:.85rem;font-style:italic;
  padding:9px 20px;border-top:1px solid var(--line);
}

.translation.rtl{direction:rtl;text-align:right;line-height:2.2;font-size:1.12em}
.lang-ur{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;line-height:2.6}
.lang-hi{font-family:'Noto Sans Devanagari',system-ui,sans-serif}
.lang-te{font-family:'Noto Sans Telugu',system-ui,sans-serif;line-height:1.9}
.reader-body.hide-arabic .arabic{display:none}

/* --- bookmark quick sheet --- */
.bm-sheet{position:fixed;inset:0;background:rgba(10,40,34,.45);display:flex;
  align-items:center;justify-content:center;padding:18px;z-index:60}
.bm-sheet-in{background:#fff;border-radius:14px;padding:22px;max-width:420px;width:100%;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.bm-sheet-in label{display:block;margin-bottom:10px;font-size:.85rem;color:var(--ink-2)}
.bm-sheet-in input{width:100%;margin-top:4px}
.bm-colours{display:flex;gap:10px;margin-top:6px}
.bm-colour{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.bm-colour.on{border-color:#111;transform:scale(1.12)}
.bmc-green{background:var(--green)}
.bmc-brass{background:var(--brass)}
.bmc-red{background:#9c3b2e}
.bmc-blue{background:#2f5d8c}

[hidden]{display:none !important}

/* --- bookmarks page --- */
.bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.bm-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  border-left-width:4px;border-left-style:solid}
.bm-card.c-green{border-left-color:var(--green)}
.bm-card.c-brass{border-left-color:var(--brass)}
.bm-card.c-red{border-left-color:#9c3b2e}
.bm-card.c-blue{border-left-color:#2f5d8c}
.bm-card .where{font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.bm-card .snippet{margin:10px 0;color:var(--ink-2);font-size:.94rem}
.bm-card .snippet .ar{font-family:var(--font-arabic);font-size:1.25rem;color:var(--green);
  display:block;margin-bottom:6px;direction:rtl;text-align:right}
.bm-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}

/* The hidden attribute must win over any display rule we set above.
   Author styles always beat the browser's own [hidden] rule, so .bm-sheet's
   display:flex was keeping the dialog on screen permanently. */
[hidden]{display:none !important}

/* ============================================================
   Kids Corner
   ============================================================ */
.kids-hero{background:linear-gradient(180deg,var(--paper),var(--parchment));padding:56px 20px 40px}
.kids-medallion{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-width:150px;min-height:150px;max-width:min(90vw,520px);
  padding:26px 32px;border-radius:28px;margin:0 auto 20px;position:relative;
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--paper) 45%, #f0e6d0 100%);
  border:3px solid var(--brass);box-shadow:0 18px 40px -18px rgba(15,92,78,.5), inset 0 0 0 6px var(--paper);
  cursor:pointer;
}
.kids-medallion .letter{font-family:var(--font-arabic);font-size:4.4rem;line-height:1.3;color:var(--green-d);
  direction:rtl;text-align:center;word-break:break-word}
.kids-medallion .dot{
  width:12px;height:12px;border-radius:50%;background:var(--brass);opacity:.35;flex-shrink:0;
  transition:opacity .25s ease, box-shadow .25s ease;
}
.kids-medallion.playing .dot{opacity:1;box-shadow:0 0 0 8px rgba(184,135,58,.25),0 0 18px 2px rgba(184,135,58,.6)}
.kids-medallion.playing{animation:kids-pulse 1.1s ease-in-out infinite}
@keyframes kids-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.kids-hero h1{font-family:var(--font-display);font-size:1.9rem;margin:0 0 8px;color:var(--green-d);text-align:center}
.kids-hero .sub{color:var(--ink-3);max-width:480px;margin:0 auto 22px;line-height:1.6;text-align:center}
.kids-btn-coral{background:var(--coral);color:#fff;border:none;box-shadow:0 10px 24px -10px rgba(226,112,58,.55)}
.kids-btn-coral:hover{filter:brightness(1.05)}

.kids-path-section{padding:34px 20px 10px}
.kids-eyebrow{text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:4px}
.kids-path-title{text-align:center;font-family:var(--font-display);font-size:1.4rem;color:var(--green-d);margin:0 0 30px}
.kids-path{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;max-width:920px;margin:0 auto;direction:rtl}
.kids-node{width:112px;text-align:center;text-decoration:none;color:inherit;display:block}
.kids-node .ring{
  width:74px;height:74px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.4rem;color:#fff;box-shadow:0 10px 22px -12px rgba(10,66,57,.5);
  transition:transform .15s ease;border:3px solid var(--paper);
}
.kids-node:hover .ring{transform:scale(1.07)}
.kids-node-upcoming .ring{background:#cfc9ba;color:#8b8474;box-shadow:none}
.kids-node-done .ring{background:var(--green);position:relative}
.kids-node-current .ring{background:var(--coral)}
.kids-node .label{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.3}
.kids-node .sub2{font-size:.68rem;color:var(--ink-3)}
.kids-node-upcoming .label{color:var(--ink-3)}

.kids-level-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px 24px;margin:24px auto;max-width:980px;box-shadow:var(--shadow)}
.kids-level-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kids-level-head h2{font-family:var(--font-display);font-size:1.3rem;color:var(--green-d);margin:0 0 4px}
.kids-level-head p{color:var(--ink-3);margin:0;font-size:.9rem;max-width:520px}
.kids-letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;direction:rtl}
.kids-letter-card{
  background:var(--parchment);border:1px solid var(--line);border-radius:16px;padding:14px 8px 12px;text-align:center;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;position:relative;font:inherit;
  height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
}
.kids-letter-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(10,66,57,.4)}
.kids-letter-card .ar{font-family:var(--font-arabic);font-size:2.2rem;color:var(--green-d);display:block;margin-bottom:2px}
.kids-letter-card .name{font-size:.72rem;color:var(--ink-3);font-weight:600;display:block}
.kids-letter-card .play{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:#fff;
  border:1px solid var(--brass);color:var(--brass);font-size:.55rem;display:flex;align-items:center;justify-content:center}
.kids-letter-card.playing{outline:3px solid var(--coral);outline-offset:2px}
.kids-letter-card.playing .play{background:var(--coral);border-color:var(--coral);color:#fff}

.kids-letter-card-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.kids-letter-card-wrap .kids-letter-card{width:100%}
.kids-done-check{
  width:34px;height:22px;border-radius:11px;flex-shrink:0;
  border:1.5px solid var(--line);background:#fff;color:transparent;font-size:.72rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.kids-done-check:hover{border-color:var(--green)}
.kids-card-done .kids-done-check{background:var(--green);border-color:var(--green);color:#fff}
.kids-card-done .kids-letter-card{background:var(--green-l);border-color:var(--green);transition:background .18s ease,border-color .18s ease}
.kids-card-done .kids-letter-card .ar{color:var(--green-d)}

.kids-progress-count{font-size:.82rem;color:var(--ink-3);margin:0 0 8px;text-align:right}
.kids-btn-coral:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed;box-shadow:none}
.kids-btn-coral:disabled:hover{transform:none}

.kids-video-section{max-width:980px;margin:10px auto 60px;padding:0 20px}
.kids-video-section h2{font-family:var(--font-display);font-size:1.2rem;color:var(--green-d)}
.kids-video-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:14px}
.kids-video-tile{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit}
.kids-video-tile .thumb{position:relative;height:110px;background:var(--green-d)}
.kids-video-tile .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.kids-video-tile .thumb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.kids-video-tile .lbl{padding:10px 12px 2px;font-size:.85rem;font-weight:600}
.kids-video-tile .sub2{padding:0 12px 12px;font-size:.75rem;color:var(--ink-3)}

@media(max-width:640px){
  .kids-medallion{min-width:120px;min-height:120px;padding:20px 24px}
  .kids-medallion .letter{font-size:3.4rem}
  .kids-node{width:88px}
  .kids-node .ring{width:60px;height:60px;font-size:1.1rem}
}

/* ============================================================
   Ayah audio player
   ============================================================ */
.ayah-play-btn{
  min-width:32px;height:32px;border-radius:16px;flex-shrink:0;
  padding:0 8px;border:1px solid var(--line);background:#fff;color:var(--green);font-size:.72rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.ayah-play-btn:hover{transform:scale(1.06)}
.ayah-play-btn.playing{background:var(--green);color:#fff;border-color:var(--green)}
.ayah-play-btn .rep-count{font-size:.68rem;font-weight:600}

.ayah-share{position:relative;flex-shrink:0}
.ayah-share-btn{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--green);font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease;
}
.ayah-share-btn:hover{transform:scale(1.08)}
.ayah-share-panel{
  display:none;position:absolute;top:40px;right:0;z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(10,66,57,.45);
  padding:10px;min-width:180px;
}
.ayah-share-panel.open{display:block}
.ayah-share-panel button{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;
  padding:8px 10px;border-radius:7px;font:inherit;font-size:.85rem;color:var(--ink-2);text-align:left;
}
.ayah-share-panel button:hover{background:var(--parchment)}
.ayah-share-panel .ic{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

.verse.audio-playing{
  background:var(--green-l);box-shadow:inset 3px 0 0 var(--green);
  transition:background .25s ease;
}

#play-surah-btn.playing{background:var(--green);color:#fff;border-color:var(--green)}

.repeat-control{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-2);font-weight:600;white-space:nowrap}

.ayah-playlist-panel{display:inline-block;position:relative}
.ayah-playlist-form{
  position:absolute;top:calc(100% + 8px);left:0;z-index:20;width:320px;max-width:88vw;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;
  box-shadow:0 18px 40px -14px rgba(15,40,35,.35);
}
.ayah-playlist-form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.ayah-playlist-form select,.ayah-playlist-form input[type=text]{
  width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;
}
.ayah-playlist-error{
  margin:10px 0 0;padding:9px 11px;background:#fce8e6;border:1px solid #b3261e;border-radius:8px;
  color:#7a1f18;font-size:.84rem;
}
.ayah-playlist-now-playing{
  margin-top:14px;padding:12px 14px;background:var(--parchment);border:1px solid var(--brass);border-radius:10px;
}
.ayah-playlist-now-playing .ref{font-size:.78rem;font-weight:700;color:var(--brass);text-transform:uppercase;letter-spacing:.03em}
.ayah-playlist-now-playing .ar{font-family:var(--font-arabic);font-size:1.5rem;color:var(--green-d);
  direction:rtl;text-align:right;margin-top:6px;line-height:1.8}
@media(max-width:640px){
  .ayah-playlist-form{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-width:none}
}
.repeat-control input{width:48px;padding:6px 4px;text-align:center;margin:0}

/* auto-generated ayah reference links within Surah Notes content */
.sn-ayah-link{color:var(--green);font-weight:600;text-decoration:underline;text-decoration-color:var(--brass)}
.sn-ayah-link:hover{color:var(--brass)}

/* ---------- Kids Corner: Reading Practice full-width rows ---------- */
.kids-reading-list{display:flex;flex-direction:column;gap:12px}
.kids-reading-row{
  display:flex;align-items:center;gap:14px;background:var(--parchment);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;transition:background .18s ease,border-color .18s ease;
}
.kids-reading-row.kids-card-done{background:var(--green-l);border-color:var(--green)}
.kids-reading-controls{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.kids-reading-play{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--brass);background:#fff;
  color:var(--brass);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.kids-reading-play:hover{background:var(--brass);color:#fff}
.kids-reading-play.playing{background:var(--coral);border-color:var(--coral);color:#fff}
.kids-reading-restart{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink-3);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,color .15s ease;
}
.kids-reading-restart:hover{border-color:var(--brass);color:var(--brass)}
.kids-reading-text{flex:1;min-width:0}
.kids-reading-text .ar{font-family:var(--font-arabic);font-size:3.4rem;color:var(--green-d);line-height:1.7;
  direction:rtl;text-align:right;word-break:break-word}
.kids-reading-text .name{font-size:.82rem;color:var(--ink-3);margin-top:4px}
.kids-goto-ayah{flex-shrink:0;white-space:nowrap}
.kids-reading-row .kids-done-check{flex-shrink:0;width:34px;height:22px;border-radius:11px;
  border:1.5px solid var(--line);background:#fff;color:transparent;font-size:.72rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease,border-color .18s ease,color .18s ease}
.kids-reading-row .kids-done-check:hover{border-color:var(--green)}
.kids-reading-row.kids-card-done .kids-done-check{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:640px){
  .kids-reading-row{flex-wrap:wrap}
  .kids-reading-text{order:1;flex-basis:100%}
  .kids-reading-play{order:0}
  .kids-goto-ayah{order:2}
  .kids-reading-row .kids-done-check{order:3}
}

/* ---------- search results ---------- */
.search-results{display:flex;flex-direction:column;gap:14px}
.search-hit{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.search-hit:hover{border-color:var(--brass);box-shadow:0 2px 14px rgba(0,0,0,.06);transform:translateY(-1px)}
.search-hit-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:.9rem}
.search-hit-top strong{color:var(--green)}
.search-hit-lang{margin-left:auto;color:var(--ink-3);font-size:.82rem}
/* The ayah is set exactly as it is on the reading page — same family, size,
   leading and colour as `.verse .arabic` — so a result looks like the page it
   opens. The size steps below mirror the reader's own font-size setting. */
.search-hit-arabic{
  font-family:var(--font-arabic);font-size:1.85rem;line-height:2.15;direction:rtl;
  text-align:right;color:var(--ink);margin:0 0 14px;
}
.search-hit-arabic mark{background:var(--brass-l);color:inherit;padding:.05em .15em;border-radius:2px}
.search-results.fs-1 .search-hit-arabic{font-size:1.35rem}
.search-results.fs-2 .search-hit-arabic{font-size:1.6rem}
.search-results.fs-4 .search-hit-arabic{font-size:2.2rem}
.search-results.fs-5 .search-hit-arabic{font-size:2.6rem}
.search-hit-text{margin:0 0 8px;font-size:1.02rem;color:var(--ink);line-height:1.75}
.search-results.fs-1 .search-hit-text{font-size:.92rem}
.search-results.fs-5 .search-hit-text{font-size:1.15rem}
.search-hit-text mark{background:var(--brass-l);color:inherit;padding:.05em .15em;border-radius:2px}
.search-hit-go{color:var(--brass);font-size:.85rem;font-weight:600}
.search-pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:26px;color:var(--ink-3)}
@media(max-width:560px){
  .search-hit-lang{margin-left:0;width:100%}
}

/* ---------- dashboard: recent bookmarks ----------
   Same treatment as the bookmarks page, so an ayah looks like an ayah
   wherever it appears rather than falling back to the body font. */
.dash-bm{padding:12px 0;border-bottom:1px solid var(--line)}
.dash-bm:last-child{border-bottom:0;padding-bottom:0}
.dash-bm-ref{font-size:.8rem;color:var(--ink-3);margin-bottom:6px}
.dash-bm a{display:block;color:var(--ink);text-decoration:none}
.dash-bm a .ar{
  font-family:var(--font-arabic);font-size:1.25rem;line-height:1.95;color:var(--green);
  display:block;margin-bottom:6px;direction:rtl;text-align:right;
}
.dash-bm a .tr{display:block;font-size:.93rem;line-height:1.6;color:var(--ink)}
.dash-bm a:hover .tr{color:var(--brass)}

/* ================= Islamic calendar ================= */

/* --- the strip on the home page ---
   Wide screen: the Hijri date on the left, the Gregorian date and the place
   button on the right. Phone: everything centred, with the place button above
   the Gregorian date. */
.hijri-strip{background:linear-gradient(180deg,var(--green-d,#0b4a3f) 0%,var(--green,#0f5c4e) 100%);
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.hijri-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hijri-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;min-width:0}
.hc-num{font-family:var(--font-display,'Marcellus',serif);font-size:2.5rem;line-height:1;
  color:#e2c07a;min-width:1.5em;text-align:center}
.hc-mid{display:flex;flex-direction:column;line-height:1.25}
.hc-month{font-size:1.05rem;font-weight:600}
.hc-year{font-size:.85rem;opacity:.75}
.hc-ar{font-family:var(--font-arabic);font-size:1.45rem;color:#e2c07a;
  padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}
.hijri-card:hover .hc-month{text-decoration:underline}

.hijri-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.hc-greg{font-size:.88rem;opacity:.82;white-space:nowrap;color:#fff}

.hijri-place{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:999px;padding:7px 14px;font:inherit;font-size:.85rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .15s ease}
.hijri-place:hover{background:rgba(255,255,255,.18)}
.hp-pin{color:#e2c07a}
.hp-change{opacity:.65;font-size:.78rem;border-left:1px solid rgba(255,255,255,.25);padding-left:8px}

@media(max-width:720px){
  .hijri-strip .wrap{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .hijri-card{justify-content:center;gap:12px;width:100%}
  .hc-ar{border-left:0;padding-left:0}
  .hijri-meta{width:100%;flex-direction:column;justify-content:center;gap:8px}
  /* the place button first, the date beneath it */
  .hijri-place{order:1}
  .hc-greg{order:2;white-space:normal}
}
@media(max-width:400px){
  .hc-num{font-size:2.1rem}
  .hc-ar{font-size:1.3rem}
}

/* --- the calendar page header ---
   One band: the Hijri date on the left, the Gregorian date and the place
   button together on the right. On a narrow screen the whole thing stacks
   and centres, because a left-aligned column with a button hanging off one
   edge reads as broken on a phone. */
.hijri-hero{background:linear-gradient(160deg,var(--green-d,#0b4a3f),var(--green,#0f5c4e));
  color:#fff;padding:22px 0}
.hijri-hero .eyebrow{color:#e2c07a;margin-bottom:6px;display:block}
.hijri-hero-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hh-left{min-width:0}
.hh-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}

.hijri-hero-date{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hh-day{font-family:var(--font-display,'Marcellus',serif);font-size:3.2rem;line-height:1;color:#e2c07a}
.hh-rest{display:flex;flex-direction:column;line-height:1.25}
.hh-month{font-size:1.45rem;font-weight:600}
.hh-year{font-size:.9rem;opacity:.78}
.hh-ar{font-family:var(--font-arabic);font-size:1.8rem;color:#e2c07a;
  padding-left:18px;border-left:1px solid rgba(255,255,255,.22)}

.hh-greg{font-size:.95rem;opacity:.85;white-space:nowrap}
.hh-place{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:999px;padding:8px 16px;font:inherit;font-size:.88rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hh-place:hover{background:rgba(255,255,255,.18)}
.hh-pin{color:#e2c07a}
.hh-change{opacity:.65;font-size:.8rem;border-left:1px solid rgba(255,255,255,.25);padding-left:9px}

@media(max-width:900px){
  .hh-greg{font-size:.88rem}
  .hh-day{font-size:2.8rem}
  .hh-ar{font-size:1.55rem}
}
@media(max-width:720px){
  /* everything down the middle on a phone */
  .hijri-hero{padding:20px 0 18px}
  .hijri-hero-bar{flex-direction:column;justify-content:center;text-align:center;gap:12px}
  .hh-left{width:100%;display:flex;flex-direction:column;align-items:center}
  .hijri-hero-date{justify-content:center;gap:12px}
  .hh-rest{align-items:flex-start;text-align:left}
  .hh-ar{border-left:0;padding-left:0;width:100%;text-align:center;font-size:1.7rem;margin-top:2px}
  .hh-right{width:100%;flex-direction:column;justify-content:center;gap:10px}
  .hh-greg{white-space:normal}
}

/* --- the month grid --- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.cal-title{text-align:center}
.cal-title h2{margin:0;font-size:1.4rem}
.cal-title-ar{font-family:var(--font-arabic);color:var(--green);font-size:1.2rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal-dow{text-align:center;font-size:.78rem;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px}
.cal-dow.is-fri{color:var(--green)}
.cal-cell{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:9px 8px 8px;min-height:74px;display:flex;flex-direction:column;gap:2px;position:relative}
.cal-cell.is-empty{background:transparent;border:0}
.cal-h{font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.1}
.cal-g{font-size:.72rem;color:var(--ink-3)}
.cal-cell.is-fri{background:var(--green-l,#eaf4f0)}
.cal-cell.is-today{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass-l);}
.cal-cell.is-today .cal-h{color:var(--brass)}
.cal-cell.has-obs{border-color:var(--green)}
.cal-obs{font-size:.66rem;line-height:1.25;color:var(--green-d,#0b4a3f);margin-top:auto;font-weight:600}
@media(max-width:720px){
  /* On a phone the grid, its heading and the month arrows all sit down the
     centre, and each square centres its own numbers — otherwise the month
     drifts to one side of the screen and looks like a mistake. */
  /* The arrows stay either side of the month name rather than stacking —
     stacking them centres well enough but pushes the grid off the screen. */
  .cal-head{gap:8px;text-align:center}
  .cal-head .btn{padding:6px 9px;font-size:.78rem;white-space:nowrap}
  .cal-title h2{font-size:1.15rem}
  .cal-title-ar{font-size:1.05rem}
  .cal-grid{gap:4px;max-width:420px;margin:0 auto}
  .cal-cell{min-height:58px;padding:6px 4px;border-radius:8px;align-items:center;text-align:center}
  .cal-h{font-size:1rem}
  .cal-g{font-size:.62rem}
  .cal-obs{display:none}
  .cal-dow{font-size:.68rem}
  .cal-sub{text-align:center}
  .cal-obs-row{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .cal-obs-when,.cal-obs-what{min-width:0;align-items:center}
}
@media(max-width:400px){
  .cal-cell{min-height:50px;padding:5px 2px}
  .cal-h{font-size:.92rem}
  .cal-g{font-size:.56rem}
}

.cal-note{margin:22px auto 0;max-width:66ch;text-align:center;color:var(--ink-3);font-size:.9rem;line-height:1.7}
.cal-sub{margin:34px 0 14px;font-size:1.15rem}
.cal-obs-list{display:flex;flex-direction:column;gap:10px}
.cal-obs-row{display:flex;align-items:center;gap:16px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:13px 16px;flex-wrap:wrap}
.cal-obs-when{min-width:190px;display:flex;flex-direction:column}
.cal-obs-when strong{color:var(--green)}
.cal-obs-when span{font-size:.8rem;color:var(--ink-3)}
.cal-obs-what{flex:1;display:flex;flex-direction:column;min-width:180px}
.cal-obs-what span{font-size:.83rem;color:var(--ink-3)}
.cal-obs-in{color:var(--brass);font-size:.85rem;font-weight:600;white-space:nowrap}

/* --- the place chooser --- */
.place-modal{position:fixed;inset:0;background:rgba(20,18,14,.55);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:18px}
.place-modal[hidden]{display:none}
.place-box{background:var(--paper);border-radius:14px;width:min(460px,100%);
  max-height:86vh;overflow:auto;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.place-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.place-box-head h3{margin:0;font-size:1.2rem}
.place-close{background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-3)}
.place-why{margin:0 0 16px;font-size:.9rem;color:var(--ink-3);line-height:1.6}
.place-here{width:100%}
.place-hint{margin:8px 0 0;font-size:.8rem;color:var(--ink-3);text-align:center}
.place-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-3);font-size:.82rem}
.place-or::before,.place-or::after{content:'';height:1px;background:var(--line);flex:1}
#place-search{width:100%}
.place-results{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-height:270px;overflow:auto}
.place-result{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;border-radius:8px;padding:10px 12px;text-align:left;
  font:inherit;cursor:pointer;color:var(--ink)}
.place-result:hover{background:var(--sand,#f4efe4)}
.place-result em{font-style:normal;font-size:.76rem;color:var(--ink-3)}
.place-empty{padding:14px 4px;color:var(--ink-3);font-size:.88rem;text-align:center}


/* ---------- verse buttons on a narrow screen ----------
   All five — play, save, note, memorize, share — on one row.
   Five pills with their words on them will not fit across a phone, so below
   620px the words are dropped and the icons stand alone. The words stay in
   the markup, hidden the way screen readers still read them, so nothing is
   lost for anyone using one. Each button keeps a 40px tap target.

   The share panel was the real trouble: anchored to a button that had wrapped
   to the left edge, it opened off the side of the screen and could not be seen
   at all. On a phone it is now pinned to the bottom of the window and centred,
   so it cannot land off-screen whichever button opened it. */
@media(max-width:620px){
  .verse-topbar{flex-wrap:nowrap;gap:6px;padding:9px 12px 10px;margin-left:-20px}
  .vtb-left{flex-wrap:nowrap;gap:6px;flex:1;min-width:0}

  .vtb-btn{
    padding:0;width:40px;height:40px;justify-content:center;gap:0;
    border-radius:50%;flex-shrink:0;
  }
  .vtb-btn .ic{font-size:16px}
  /* Kept for screen readers rather than removed outright. */
  .vtb-btn .lbl{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  .ayah-play-btn{width:40px;height:40px;flex-shrink:0}
  .ayah-share-btn{width:40px;height:40px;font-size:1rem;flex-shrink:0}

  .ayah-share-panel{
    position:fixed;top:auto;right:auto;bottom:14px;left:50%;
    transform:translateX(-50%);
    width:min(330px, calc(100vw - 28px));
    padding:8px;border-radius:14px;
    box-shadow:0 -6px 40px -10px rgba(10,66,57,.5);
  }
  .ayah-share-panel button{padding:11px 12px;font-size:.9rem}
}

/* Very small handsets: tighten enough that five still fit. */
@media(max-width:360px){
  .verse-topbar{gap:4px;padding:8px 10px 9px}
  .vtb-left{gap:4px}
  .vtb-btn,.ayah-play-btn,.ayah-share-btn{width:36px;height:36px}
  .vtb-btn .ic{font-size:15px}
}

/* ================= install the app ================= */
.ia-hero{background:linear-gradient(160deg,var(--green-d,#0b4a3f),var(--green,#0f5c4e));
  color:#fff;padding:38px 0 34px;text-align:center}
.ia-hero .eyebrow{color:#e2c07a}
.ia-icon{width:84px;height:84px;border-radius:20px;margin-bottom:16px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.ia-hero h1{margin:.2em 0 .3em;font-size:1.7rem}
.ia-sub{margin:0 auto;max-width:46ch;opacity:.85;line-height:1.7}

.ia-wrap{max-width:620px}
.ia-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;text-align:center;margin-bottom:24px}
.ia-card[hidden]{display:none}
.ia-card h2{margin:0 0 .35em;font-size:1.3rem}
.ia-card > p{margin:0 0 18px;color:var(--ink-2);line-height:1.7}
.btn-lg{padding:13px 30px;font-size:1rem}
.ia-note{margin:14px 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.6}

.ia-done{border-color:var(--green)}
.ia-tick{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 14px}

.ia-steps{list-style:none;margin:0;padding:0;text-align:left;display:flex;
  flex-direction:column;gap:16px}
.ia-steps li{display:flex;align-items:flex-start;gap:14px}
.ia-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--brass);color:#fff;font-weight:600;font-size:.9rem;
  display:flex;align-items:center;justify-content:center}
/* Plain flowing text. Laying the step out as a flex row split each sentence
   into separate pieces and stranded the full stop on its own line. */
.ia-what{line-height:1.7;color:var(--ink-2)}
.ia-what strong{color:var(--ink);white-space:nowrap}
.ia-glyph{color:var(--green);display:inline-flex;vertical-align:middle;margin:0 2px}

.ia-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;
  background:var(--sand,#f4efe4);border-radius:8px;padding:12px 14px;
  word-break:break-all;margin:0 0 16px;color:var(--green-d,#0b4a3f)}

.ia-why{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.ia-why h3{margin:0 0 14px;font-size:1.1rem}
.ia-why ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ia-why li{padding-left:22px;position:relative;line-height:1.65;color:var(--ink-2)}
.ia-why li::before{content:'◍';position:absolute;left:0;color:var(--brass)}

/* the small banner that can sit on the home page */
.ia-banner{display:flex;align-items:center;gap:14px;background:var(--brass-l);
  border:1px solid var(--brass);border-radius:12px;padding:12px 14px;margin:0 0 20px}
.ia-banner[hidden]{display:none}
.ia-banner img{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.ia-banner-text{flex:1;min-width:0;font-size:.9rem;line-height:1.5;color:#6b4c14}
.ia-banner-text strong{display:block;color:var(--ink)}
.ia-banner .btn{flex-shrink:0}
.ia-banner-close{background:none;border:0;font-size:1.4rem;line-height:1;
  color:#8a6a2a;cursor:pointer;padding:0 2px;flex-shrink:0}
@media(max-width:520px){
  .ia-banner{flex-wrap:wrap}
  .ia-banner-text{width:calc(100% - 60px)}
  .ia-banner .btn{width:100%;order:5}
}

/* ================= legal pages ================= */
.legal{max-width:70ch}
.legal-lead{font-size:1.05rem;line-height:1.85;color:var(--ink-2);
  padding-bottom:20px;border-bottom:1px solid var(--line);margin:0 0 8px}
.legal h2{font-size:1.2rem;margin:32px 0 .5em;color:var(--green-d,#0b4a3f)}
.legal p{line-height:1.85;color:var(--ink-2);margin:0 0 14px}
.legal ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.legal li{position:relative;padding-left:22px;line-height:1.8;color:var(--ink-2)}
.legal li::before{content:'◍';position:absolute;left:0;color:var(--brass);font-size:.9em;top:.15em}
.legal strong{color:var(--ink)}
.legal-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-3)}
@media(max-width:640px){ .legal h2{font-size:1.1rem;margin-top:26px} }

/* ================= profile pictures ================= */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:50%;object-fit:cover;background:var(--green);color:#fff;
  font-family:var(--font-display);font-weight:400;letter-spacing:.02em;
  border:2px solid rgba(255,255,255,.35)}
.avatar-sm{width:34px;height:34px;font-size:.82rem}
.avatar-md{width:56px;height:56px;font-size:1.15rem}
.avatar-lg{width:104px;height:104px;font-size:2rem;border-width:3px}

.av-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.av-preview{position:relative;flex-shrink:0}
.av-actions{flex:1;min-width:210px}
.av-choose{display:inline-block;cursor:pointer}
.av-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:520px){
  .av-row{flex-direction:column;align-items:center;text-align:center}
  .av-actions{width:100%}
  .av-buttons{justify-content:center}
}

/* ================= voice search ================= */
.q-wrap{position:relative;display:block}
.q-wrap input{width:100%;padding-right:46px}
.q-mic{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.q-mic:hover{color:var(--green);border-color:var(--green)}
.q-mic.listening{background:var(--brass);border-color:var(--brass);color:#fff;
  animation:mic-pulse 1.3s ease-in-out infinite}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,135,58,.55)}
  50%{box-shadow:0 0 0 7px rgba(184,135,58,0)}
}
.q-mic-note{margin:7px 0 0;font-size:.8rem;color:var(--ink-3);line-height:1.55}
.q-mic-note a{color:var(--brass)}
@media(prefers-reduced-motion:reduce){ .q-mic.listening{animation:none} }

/* the two ways of adding a photo */
.av-pick{display:flex;gap:8px;flex-wrap:wrap}
.av-camera{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.av-camera[hidden]{display:none}
.av-choose{cursor:pointer}
@media(max-width:520px){ .av-pick{flex-direction:column} .av-pick .btn{width:100%;justify-content:center} }