@import url(/font/fonts.css);
:root {
  --ink:#2b2320; --muted:#7f6f64; --accent:#b85a3e; --accent-soft:#f7e3d8;
  --bg:#fbf6ef; --card:#fff; --line:#efe4da; --ok:#2f6e4a; --ok-soft:#e3f0e8; --no:#a23b3b; --no-soft:#f7e1e1;
  --boy:#3e6f93; --girl:#b04a6e; --naskh:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#f1e8e1; --muted:#b3a399; --accent:#e58a6b; --accent-soft:#3d2a23; --bg:#1b1614; --card:#26201d;
    --line:#3a312c; --ok:#7cc79b; --ok-soft:#1f3328; --no:#e88; --no-soft:#3a2323; --boy:#8fb9d8; --girl:#e39ab4; color-scheme: dark; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 "IBM Plex Sans Arabic",system-ui,sans-serif; }
a { color:var(--accent); }
main { max-width:44rem; margin:0 auto; padding:8px 16px 40px; }
.top { max-width:44rem; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:14px 16px 4px; }
.logo { font-family:var(--naskh); font-weight:700; color:var(--accent); font-size:1.6rem; text-decoration:none; }
.icon { width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; text-decoration:none; color:var(--ink); }
h1,h2 { line-height:1.4; }
.title { font-family:var(--naskh); font-size:clamp(1.7rem,6vw,2.2rem); margin:.4em 0 .1em; }
.lead { color:var(--muted); margin-top:.2em; }
.sec { font-size:.9rem; color:var(--muted); font-weight:500; margin:1.8em 0 .6em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; }
.card h2 { font-size:.9rem; color:var(--muted); font-weight:500; margin:0 0 .5em; }
.pill { display:inline-block; padding:2px 11px; border-radius:999px; font-size:.8rem; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
.pill.ok { background:var(--ok-soft); color:var(--ok); }
.pill.no { background:var(--no-soft); color:var(--no); }
.pill.girl { background:color-mix(in srgb,var(--girl) 14%,transparent); color:var(--girl); }
.pill.boy { background:color-mix(in srgb,var(--boy) 14%,transparent); color:var(--boy); }
.pill.both { background:color-mix(in srgb,var(--muted) 16%,transparent); color:var(--muted); }

/* home */
.hero h1 { font-family:var(--naskh); font-size:clamp(1.7rem,6.5vw,2.4rem); line-height:1.55; margin:.5em 0 .2em; }
.search input { width:100%; font:inherit; font-size:1.1rem; padding:13px 16px; border-radius:14px; border:1.5px solid var(--accent); background:var(--card); color:var(--ink); }
.search input:focus { outline:3px solid var(--accent-soft); }
.seg { display:flex; gap:8px; margin-top:10px; }
.seg button { flex:1; font:inherit; font-size:.92rem; padding:8px 0; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.seg button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.letters { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px; }
.letters a { aspect-ratio:1; display:grid; place-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; font-family:var(--naskh); font-size:1.15rem; text-decoration:none; color:var(--ink); }
.letters a.on, .letters a:hover { border-color:var(--accent); color:var(--accent); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips a { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.92rem; text-decoration:none; color:var(--ink); }
.chips a:hover { border-color:var(--accent); }
.why ul { padding-inline-start:1.1em; margin:.3em 0 .8em; }
.list { padding:2px 16px; }
.row { display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.row:last-child { border-bottom:0; }
.row b { font-family:var(--naskh); font-size:1.2rem; min-width:5.5rem; }
.row small { color:var(--muted); flex:1; font-size:.88rem; }
.row:hover b { color:var(--accent); }

/* name page */
.nm { text-align:center; padding:6px 0 2px; }
.nm h1 { font-family:var(--naskh); font-size:clamp(3.4rem,17vw,5rem); line-height:1.25; color:var(--accent); margin:0; }
.nm .en { letter-spacing:.2em; color:var(--muted); font-size:.95rem; direction:ltr; text-transform:uppercase; }
.nm .pills { margin-top:10px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.meaning { font-family:var(--naskh); font-size:1.3rem; line-height:1.9; margin:.1em 0 .4em; }
.quote { margin:10px 0 0; background:var(--bg); border-inline-start:3px solid var(--accent); border-radius:8px; padding:10px 14px; font-family:var(--naskh); font-size:1.08rem; }
.src { font-size:.8rem; color:var(--muted); margin-top:6px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.src a { text-decoration:none; }
.nosrc, .aside { color:var(--muted); font-size:.88rem; }
.verdict { display:flex; gap:12px; align-items:flex-start; }
.verdict .dot { width:30px; height:30px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; flex:none; font-weight:700; }
.check.no .dot { background:var(--no); }
.verdict p { margin:0; color:var(--muted); font-size:.92rem; }
.verdict strong { color:var(--ink); display:block; font-size:1rem; }
.spell { display:flex; gap:8px; flex-wrap:wrap; direction:ltr; justify-content:flex-end; }
.spell span { border:1px solid var(--line); border-radius:9px; padding:4px 12px; }
.spell .rec { border-color:var(--ok); background:var(--ok-soft); color:var(--ok); font-weight:600; }
.spell small { font-weight:400; font-size:.75rem; }
.ayah { font-family:var(--naskh); font-size:1.2rem; line-height:2; margin:.2em 0; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:10px; margin:12px 0; }
.facts div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.facts b { display:block; font-size:.78rem; color:var(--muted); font-weight:500; }
.actions { display:flex; gap:8px; margin-top:18px; }
.btn { flex:1; text-align:center; padding:12px 0; border-radius:14px; font:inherit; font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; border:0; }
.btn.p { background:var(--accent); color:#fff; }
.btn.s { background:var(--card); border:1px solid var(--line); color:var(--ink); }

/* lists & prose */
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:12px; }
.rank { margin:0; padding-inline-start:1.6em; font-family:var(--naskh); font-size:1.15rem; }
.rank a { color:var(--ink); text-decoration:none; }
.rank a:hover { color:var(--accent); }
.prose h2 { color:var(--ink); font-size:1.1rem; font-weight:600; margin-top:1.2em; }
.prose h2:first-child { margin-top:0; }

footer { max-width:44rem; margin:0 auto; padding:20px 16px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer nav { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:8px; }
footer a { color:var(--muted); }

/* header tools + shortlist */
.tools { display:flex; gap:8px; align-items:center; }
.mylist { font-size:.9rem; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 12px; white-space:nowrap; }
.btn.on { background:var(--ok); }
.more { margin:14px 0 0; font-size:.92rem; }
.promo { display:block; text-decoration:none; color:var(--ink); border-color:var(--accent); margin-top:18px; }
.promo b { display:block; font-family:var(--naskh); font-size:1.2rem; color:var(--accent); }
.promo span { color:var(--muted); font-size:.92rem; }
.how ol { padding-inline-start:1.3em; margin:.3em 0; }
.shortlist { padding:2px 12px; }
.vrow { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.vrow:last-child { border-bottom:0; }
.vrow > a { flex:1; min-width:0; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; }
.vrow b { font-family:var(--naskh); font-size:1.2rem; }
.vrow small { color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vrow.match { background:var(--ok-soft); border-radius:10px; padding-inline:8px; }
.votes { display:flex; gap:4px; }
.votes button { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg); font-size:1rem; cursor:pointer; opacity:.55; color:var(--ink); }
.votes button.on { opacity:1; border-color:var(--accent); background:var(--accent-soft); }
.rm { border:0; background:none; color:var(--muted); font-size:1.3rem; cursor:pointer; padding:0 4px; }
.theirs { width:30px; text-align:center; font-size:1rem; }
.theirs .nv { color:var(--muted); }
.who { display:flex; gap:10px; margin:6px 0 12px; }
.who div { flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; text-align:center; font-size:.85rem; color:var(--muted); }
.who .me { border-color:var(--accent); }
.who b { display:block; color:var(--ink); font-size:1rem; }
.banner { background:var(--ok-soft); color:var(--ok); border-radius:12px; padding:10px 14px; margin-bottom:12px; }
.banner a { color:var(--ok); font-weight:600; }
.who-in { display:block; margin-top:14px; font-size:.88rem; color:var(--muted); }
.who-in input { display:block; width:100%; margin-top:4px; font:inherit; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.linkish { background:none; border:0; color:var(--accent); text-decoration:underline; font:inherit; cursor:pointer; padding:0; }
@media (max-width:380px) { .mylist { padding:6px 9px; font-size:.82rem; } .votes button { width:34px; height:34px; } }
.vhead { display:flex; align-items:center; gap:8px; padding:8px 0 4px; font-size:.72rem; color:var(--muted); border-bottom:1px solid var(--line); }
.vhead span:first-child { flex:1; }
.vhead span:nth-child(2) { width:30px; text-align:center; white-space:nowrap; overflow:visible; }
.vhead .mine { width:122px; text-align:center; color:var(--accent); }

/* describe-to-search */
.examples { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:.82rem; color:var(--muted); align-items:center; }
.examples button { font:inherit; font-size:.82rem; border:1px dashed var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:4px 10px; cursor:pointer; }
.examples button:hover { border-color:var(--accent); color:var(--accent); }
.understood { margin-top:12px; font-size:.85rem; color:var(--muted); }
.understood span { display:inline-block; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:1px 10px; margin:2px 3px; }

/* Google Analytics consent (asked only in Europe — see consent.js) */
.consent { position:fixed; inset-inline:0; bottom:0; z-index:60; background:#2b2320; color:#fbf6ef; padding:14px 16px;
  padding-bottom:max(14px, env(safe-area-inset-bottom)); display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; box-shadow:0 -4px 24px rgba(0,0,0,.25); font-size:14px; }
.consent p { margin:0; line-height:1.6; max-width:60ch; }
.consent a { color:#f3b49c; }
.consent-actions { display:flex; gap:8px; flex-shrink:0; }
/* refusing is exactly as prominent as accepting */
.consent button { font:inherit; cursor:pointer; border:1px solid transparent; border-radius:10px; padding:9px 20px; background:#f3b49c; color:#2b2320; min-height:42px; }
.consent button.ghost { background:transparent; color:#fbf6ef; border-color:rgba(255,255,255,.45); }
@media (max-width:560px) { .consent { flex-direction:column; align-items:stretch; } .consent button { flex:1; } }

/* family list */
.voters { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
.voters span { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:.85rem; }
.voters span.me { border-color:var(--accent); color:var(--accent); }
.voters small { color:var(--muted); }
.tallies { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px; }
.tally { font-size:.78rem; color:var(--ink); }
.tally em { font-style:normal; color:var(--muted); }
.ask { border-color:var(--accent); }
.btn:disabled { opacity:.6; }
.sisters { font-size:.8rem; }