/* جناح موسوعة مفردات القرآن — على رموز بصائر (tokens.css)، والرأسُ نفسُه في جناح الكلمة */
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:"Readex Pro",system-ui,sans-serif;
  font-weight:300;font-size:var(--fs-0);line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:52rem;margin:0 auto;padding-inline:16px}
a{color:var(--gold-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hd{background:var(--navy)}
.hd-in{display:flex;align-items:center;gap:.7rem;padding-block:.5rem;min-width:0;flex-wrap:wrap;row-gap:.3rem}
.hd-in>*{min-width:0}
.brand{font-family:Amiri,serif;font-size:1.35rem;font-weight:700;color:var(--on-navy);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumb{color:var(--gold);font-family:Amiri,serif;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb::before{content:"› ";color:rgba(243,234,211,.5)}
.hd-lnk{margin-inline-start:auto;color:var(--on-navy);text-decoration:none;font-size:var(--fs--1);
  border:1px solid rgba(243,234,211,.45);border-radius:999px;padding:.35rem 1rem;min-height:44px;white-space:nowrap;
  display:inline-flex;align-items:center}
.hd-lnk:hover{border-color:var(--gold)}

.hero{padding-block:2rem 1rem}
h1{font-family:Amiri,serif;font-size:var(--fs-3);color:var(--ink-strong);line-height:1.4}
.lead{margin-top:.6rem;max-width:44rem}
.kpi{margin-top:.8rem;color:var(--muted);font-size:var(--fs--1)}

.sf{margin-top:1.1rem}
.sf input{width:100%;font:inherit;font-weight:400;padding:.7rem 1rem;min-height:48px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--ink)}
.sf input:focus{outline:2px solid var(--gold);outline-offset:1px}
.hits{margin-top:.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.hits a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1rem;min-height:44px;align-items:center;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.hits a:last-of-type{border-bottom:0}
.hits a:hover,.hits a:focus{background:var(--paper)}
.hits .hl{font-family:Amiri,serif;font-size:1.2rem;color:var(--ink-strong)}
.hits .hm,.hits .more,.hits .non{color:var(--muted);font-size:var(--fs--1)}
.hits .more,.hits .non{padding:.5rem 1rem}

.dnav{display:flex;flex-wrap:wrap;gap:.4rem;margin-block:1rem 1.6rem}
.dnav a{font-size:var(--fs--1);text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .8rem;min-height:36px;display:inline-flex;align-items:center}
.dnav a:hover{border-color:var(--gold)}

.q{margin-bottom:1.8rem}
.q h2{font-family:Amiri,serif;font-size:var(--fs-2);color:var(--ink-strong);margin-bottom:.6rem;
  border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:.1rem}
.door{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:.6rem;scroll-margin-top:1rem}
.door[open]{box-shadow:var(--shadow)}
.door summary{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;cursor:pointer;list-style:none;min-height:56px}
.door summary::-webkit-details-marker{display:none}
.dn{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;font-weight:500}
.dt{flex:1;min-width:0;display:flex;flex-direction:column}
.dt b{font-weight:500;color:var(--ink-strong)}
.dt small{color:var(--muted);font-size:var(--fs--1);line-height:1.6}
.dc{flex:none;color:var(--muted);font-size:var(--fs--1)}
.db{padding:0 1rem 1rem}
.gap{background:var(--paper);border-inline-start:3px solid var(--copper);padding:.5rem .8rem;border-radius:6px}
.note{color:var(--muted);font-size:var(--fs--1)}
.go{margin-block:.3rem .6rem}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1rem;border-radius:999px;background:var(--navy);
  color:var(--on-navy);text-decoration:none;font-size:var(--fs--1)}
.btn:hover{background:var(--navy-2)}
.bk{list-style:none;padding:0;display:flex;flex-direction:column;gap:.25rem;margin-top:.4rem}
.bk li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.bk li:last-child{border-bottom:0}
.bt{flex:1 1 16rem;min-width:0}
.tag{flex:none;font-size:.8rem;border-radius:999px;padding:.05rem .6rem;border:1px solid var(--line);color:var(--muted)}
.s-web .tag{border-color:var(--ok);color:var(--ok)}
.s-next .tag,.s-perm .tag{border-color:var(--copper);color:var(--copper)}
.s-next .bt,.s-perm .bt{color:var(--muted)}
.why{flex-basis:100%;color:var(--muted);font-size:.85rem;line-height:1.7}

.about{margin-block:2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.about h2{font-family:Amiri,serif;font-size:var(--fs-1);color:var(--ink-strong);margin-bottom:.4rem}
.about ul{padding-inline-start:1.1rem}
.about li{margin-bottom:.3rem}
.about b{font-weight:500}

.ft{background:var(--navy);color:var(--on-navy);padding-block:1.2rem;margin-top:2rem;font-size:var(--fs--1)}
.ft a{color:var(--gold)}
.ft .beta{color:rgba(243,234,211,.7)}

@media (max-width:420px){
  .hd-in{gap:.45rem}
  .door summary{gap:.55rem;padding:.6rem .7rem}
  .db{padding:0 .7rem .8rem}
  .dc{display:none}
}
@media (prefers-color-scheme:dark){
  .dn{background:var(--navy-2)}
  .btn{background:var(--gold);color:#122A4C}
}