/* ============================================================
   FarooqStars 2.0 — fs-design.css
   THE one source of truth for colour, type and components.
   Law 3: never hardcode a colour on a page — variables only.
   ============================================================ */

/* ---------- tokens: DARK (default) ---------- */
:root{
  --bg:#070d1e; --bg2:#0c1530; --card:#0f1a33; --card2:#152039;
  --line:#2c4070; --ink:#f3eee5; --muted:#93a0bc;
  --gold:#d9b36c; --gold-ink:#231903;
  --pur:#a796ec;  --pur-ink:#120e28;
  --green:#5fc08a; --warn:#ebb552; --red:#f08b8b; --cool:#7fb0f0;
  --chipbg:#131e39; --shadow:0 14px 34px rgba(0,0,0,.5);
  --focus:#f4dda8;
  /* the fixed 12 sign colours (same in both themes) */
  --sign1:#ff5e5e; --sign2:#4fc76f; --sign3:#ffd35e; --sign4:#6fd3ff;
  --sign5:#ff9f45; --sign6:#9fd06c; --sign7:#ff8fc0; --sign8:#e34f6f;
  --sign9:#b18cff; --sign10:#8fa3b8; --sign11:#5ec9e8; --sign12:#7fe0c3;
  --radius:16px; --radius-s:10px;
  /* ---------- v78: مینو کے نشانوں کے رنگ ----------
     ہر لنک کا اپنا رنگ۔ روشن theme کے لیے وہی رنگ گہرے کر کے رکھے ہیں —
     ورنہ سفید کارڈ پر ہلکا رنگ نظر ہی نہیں آتا (ناپ کر دیکھا: کچھ نشان
     1.29:1 پر تھے، یعنی تقریباً غائب)۔ اب دونوں theme میں کم از کم 3.8:1۔ */
  --ic-gold:#d9b36c; --ic-red:#ef7a7a; --ic-green:#63c98d; --ic-amber:#f0d074;
  --ic-sky:#74c8ee; --ic-orange:#ef9f66; --ic-lime:#a8cd7c; --ic-pink:#f09ac4;
  --ic-crimson:#e5738f; --ic-violet:#c78ce9; --ic-slate:#95a8c6; --ic-cyan:#4ec7d2;
  --ic-teal:#79d8bd; --ic-blue:#7fb0f0; --ic-purple:#a796ec; --ic-warn:#ebb552;
  --ic-emerald:#54cba6;
}
/* ---------- tokens: LIGHT ---------- */
[data-theme="light"]{
  --bg:#f7f4ec; --bg2:#efe9db; --card:#ffffff; --card2:#faf7f0;
  --line:#cbbc99; --ink:#16233f; --muted:#4d5b76;
  --gold:#8a6410; --gold-ink:#fffdf5;
  --pur:#4a3fb0;  --pur-ink:#f7f5ff;
  --green:#0c7a55; --warn:#8c5a08; --red:#b83232; --cool:#1d5ac0;
  --chipbg:#f3ecdf; --shadow:0 10px 24px rgba(20,32,60,.14);
  --focus:#8a6410;
  /* وہی رنگ، مگر سفید پر پڑھے جانے کے قابل (v78) */
  --ic-gold:#8a6410; --ic-red:#b83232; --ic-green:#1e8028; --ic-amber:#736e00;
  --ic-sky:#046d9c; --ic-orange:#bd4a02; --ic-lime:#4f7a22; --ic-pink:#b81b58;
  --ic-crimson:#a81239; --ic-violet:#6740c9; --ic-slate:#4d6076; --ic-cyan:#0d7089;
  --ic-teal:#0b7268; --ic-blue:#1d5ac0; --ic-purple:#4a3fb0; --ic-warn:#a06828;
  --ic-emerald:#067e3e;
}
/* ---------- accent follows the section ---------- */
body[data-accent="western"]{ --accent:var(--gold); --accent-ink:var(--gold-ink); }
body[data-accent="vedic"]  { --accent:var(--pur);  --accent-ink:var(--pur-ink);  }
body:not([data-accent])    { --accent:var(--gold); --accent-ink:var(--gold-ink); }

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15.5px; line-height:1.75;
  background-image:radial-gradient(1200px 500px at 80% -100px,var(--bg2),transparent);
  min-height:100vh;
}
html[lang="ur"] body{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting',serif;line-height:2.2}
html[lang="ar"] body{font-family:'Noto Naskh Arabic','Traditional Arabic',serif;line-height:2}
html[lang="hi"] body{font-family:'Noto Sans Devanagari',sans-serif;line-height:1.9}
h1,h2,h3,h4{line-height:1.5;margin:0 0 .35em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-family:Montserrat,Inter,sans-serif}
a{color:var(--cool);text-decoration:none}
a:hover{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 60px}
.muted{color:var(--muted)} .mini{font-size:13px;color:var(--muted)}
.num,.ltr{direction:ltr;unicode-bidi:isolate;font-family:Montserrat,Inter,Arial,sans-serif}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ---------- components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.card2{background:var(--card2)}
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card2);color:var(--ink);
  border-radius:26px;padding:6px 18px;font-family:inherit;font-size:14px;line-height:1.8}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-block;background:var(--chipbg);border:1px solid var(--line);
  border-radius:30px;padding:2px 13px;font-size:12.5px}
.chip.accent{border-color:var(--accent);color:var(--accent)}
.chip.ok{border-color:var(--green);color:var(--green)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.bad{border-color:var(--red);color:var(--red)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.tbl th{color:var(--accent);font-size:13px;background:var(--card2);white-space:nowrap}
.tbl tr:hover td{background:color-mix(in srgb,var(--card2) 60%,transparent)}
.tbl-scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
/* v60: search/password/url/number/tel بھی وہی لباس پہنیں — ورنہ dark موڈ میں سفید ڈبے */
input[type=text],input[type=email],input[type=date],input[type=time],
input[type=search],input[type=password],input[type=url],input[type=number],input[type=tel],
select,textarea{
  background:var(--card2);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  padding:8px 14px;font-family:inherit;font-size:14px;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
/* ⚠ v97 — صفحوں میں `input{width:100%}` جیسا قاعدہ عام ہے، اور وہ **tick کو
   بھی** چوڑا کر دیتا ہے: خانہ سینکڑوں px کا، نشان اُس کے بیچ میں، اور ہر
   سطر کا نشان الگ جگہ — «سطریں سیدھی نہیں» (فاروق نے یہی پکڑا)۔
   اب تک ہر صفحے پر ہاتھ سے `style="width:auto;margin:0"` لکھا جاتا تھا —
   چھ جگہ لکھا، ساتویں جگہ (چٹھیوں کے سوئچ) لکھنا بھول گیا۔ **جو بات ہر بار
   ہاتھ سے لکھنی پڑے، وہ قاعدہ بن جانی چاہیے۔** */
input[type=checkbox],input[type=radio]{width:auto;min-width:0;flex:0 0 auto;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.callout{border:1px dashed var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--card));
  border-radius:var(--radius);padding:12px 16px;font-size:13.5px}
.note-ok{border:1px dashed var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card));
  border-radius:var(--radius);padding:10px 16px;font-size:13px}
.icon{display:inline-flex;width:1.35em;height:1.35em;vertical-align:-0.28em;color:inherit}
.icon svg{width:100%;height:100%}
.icon.gold{color:var(--gold)} .icon.pur{color:var(--pur)} .icon.accent{color:var(--accent)}

/* ---------- shell: header ---------- */
.fs-header{position:sticky;top:0;z-index:90;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.fs-hrow{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 14px}
.fs-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16.5px;color:var(--ink);flex:1;min-width:0}
.fs-brand .icon{width:1.6em;height:1.6em;color:var(--gold)}
.fs-brand small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;line-height:1.6}
.fs-tools{display:flex;align-items:center;gap:6px}
.fs-iconbtn{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.fs-iconbtn:hover{border-color:var(--accent)}
.fs-iconbtn .icon{width:1.25em;height:1.25em}
.fs-langsel{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;height:38px;padding:0 10px;font-family:inherit;font-size:13px}
/* v61: پٹی کی نچلی سطر — ایک طرف تنبیہ، دوسری طرف آج کی تاریخ (عیسوی + ہجری) */
.fs-disc{max-width:1180px;margin:0 auto;padding:2px 14px 6px;font-size:11px;color:var(--muted);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:space-between}
.fs-disc .fs-dateline{white-space:nowrap;color:var(--muted)}
.fs-disc .fs-dateline b{color:var(--gold);font-weight:600}
@media(max-width:560px){ .fs-disc{justify-content:center;text-align:center;gap:2px} }

/* ---------- shell: drawer ---------- */
.fs-overlay{position:fixed;inset:0;background:rgba(8,5,20,.55);z-index:95;opacity:0;pointer-events:none;transition:opacity .2s}
.fs-overlay.open{opacity:1;pointer-events:auto}
.fs-drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(320px,86vw);z-index:96;
  background:var(--card);border-inline-end:1px solid var(--line);box-shadow:var(--shadow);
  transform:translateX(calc(var(--drawer-dir,1) * -104%));transition:transform .22s ease;
  overflow-y:auto;padding:14px}
html[dir="rtl"] .fs-drawer{--drawer-dir:-1}
html[dir="ltr"] .fs-drawer{--drawer-dir:1}
.fs-drawer.open{transform:none}
.fs-dhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fs-dhead b{flex:1}
.fs-cat{margin:12px 0 4px;font-size:12px;color:var(--accent);letter-spacing:.4px}
.fs-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;color:var(--ink);font-size:14px}
.fs-link:hover{background:var(--card2);color:var(--ink)}
.fs-link.active{background:var(--card2);border:1px solid var(--accent)}
.fs-link .icon{color:var(--muted)}
.fs-link:hover .icon{color:var(--accent)}

/* ---------- shell: footer ---------- */
.fs-footer{margin-top:44px;border-top:1px solid var(--line);padding:18px 16px 30px;
  text-align:center;color:var(--muted);font-size:13px}
.fs-footer .fs-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:6px 0 10px}
.fs-footer a{color:var(--muted)} .fs-footer a:hover{color:var(--accent)}

/* ---------- degree + RTL law ---------- */
.deg{direction:ltr;unicode-bidi:isolate;font-family:Montserrat,Inter,Arial,sans-serif;white-space:nowrap}

/* ---------- sign colour helpers ---------- */
.s1{color:var(--sign1)}.s2{color:var(--sign2)}.s3{color:var(--sign3)}.s4{color:var(--sign4)}
.s5{color:var(--sign5)}.s6{color:var(--sign6)}.s7{color:var(--sign7)}.s8{color:var(--sign8)}
.s9{color:var(--sign9)}.s10{color:var(--sign10)}.s11{color:var(--sign11)}.s12{color:var(--sign12)}

/* ---------- responsive ---------- */
@media(max-width:900px){ .grid3,.grid4{grid-template-columns:1fr 1fr} }
@media(max-width:640px){
  body{overflow-x:hidden}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .fs-brand small{display:none}
  /* v60: نام پٹی سے باہر نہ نکلے — اوپر کے بٹن اب ایک زیادہ ہیں (💍) */
  .fs-brand > span:not(.icon){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .fs-hrow{gap:7px;padding:8px 10px}
  .fs-tools{gap:5px}
}
@media(max-width:430px){
  .fs-brand > span:not(.icon){display:none}   /* صرف نشان رہے، نام صفحے پر ویسے بھی ہے */
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- personal report (v2) ---------- */
.rp-cover{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;margin-bottom:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--card2)),var(--card2));
  border:1px solid var(--accent)}
.rp-title{font-size:17px;font-weight:600}
.rp-sec{border:1px dashed var(--line);border-inline-start:3px solid var(--accent);border-radius:12px;padding:8px 12px;margin:8px 0}
.rp-sechead{font-weight:600;font-size:15px}
.rp-house{border:1px solid var(--line);border-inline-start:4px solid var(--hc,var(--line));border-radius:12px;
  padding:8px 12px;margin:8px 0;background:color-mix(in srgb,var(--hc,transparent) 4%,var(--card))}
.rp-hhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-hn{width:24px;height:24px;border-radius:50%;background:var(--hc);color:#141021;font-family:Montserrat;
  font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.rp-cite{margin:5px 0;line-height:2.05;font-size:13.2px}
.rp-pl{margin:7px 0 7px 0;padding-inline-start:10px;border-inline-start:2px dotted var(--line)}
.rp-plhead{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rp-lord{margin-top:5px;padding:5px 9px;border-radius:9px;background:color-mix(in srgb,var(--pur) 8%,var(--card2))}
.rp-more summary{cursor:pointer;color:var(--cool);font-size:12px}
.rp-yrow{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0}
.rp-yhead{display:flex;align-items:center;gap:8px;font-size:14.5px;margin-bottom:4px}
.rp-seg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0;border-top:1px dashed var(--line);font-size:12.8px}
.rp-seg:first-of-type{border-top:none}
@media print{
  .fs-header,.fs-footer,.fs-drawer,.fs-overlay,.no-print,.fs-disc{display:none !important}
  body{background:#fff !important;color:#222}
  .card,.rp-house,.rp-yrow{box-shadow:none !important}
}

.rp-eyes{margin-top:5px;padding:4px 9px;border-radius:9px;background:color-mix(in srgb,var(--cool) 8%,var(--card2))}

/* شہر کی تلاش کے نتائج — جھنڈے کے ساتھ */
#fbResults{display:flex;flex-direction:column;gap:4px;margin-top:6px}
#fbResults .mini{padding:2px 0}
.fb-cityopt{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;font:inherit;font-size:12.5px;
  text-align:start;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.fb-cityopt:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--card2))}
body[data-accent="vedic"] .fb-cityopt:hover{border-color:var(--pur);background:color-mix(in srgb,var(--pur) 7%,var(--card2))}
.fb-cityopt img{border-radius:2px;flex:none}

/* 🤖 خلاصہ (AI briefing) */
.rp-brief{background:color-mix(in srgb,var(--gold) 5%,var(--card2))}
body[data-accent="vedic"] .rp-brief{background:color-mix(in srgb,var(--pur) 6%,var(--card2))}

/* 🕰️ ومشوتری دشا */
.rp-dnow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.rp-dmaha{border:1px solid var(--line);border-radius:11px;margin:7px 0;padding:7px 11px;background:var(--card2)}
.rp-dmaha.cur{border-color:var(--pur);background:color-mix(in srgb,var(--pur) 8%,var(--card2))}
.rp-dmaha summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style-position:outside}
.rp-antar{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.rp-antar .an{border:1px dashed var(--line);border-radius:8px;padding:4px 8px;font-size:11.5px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.rp-antar .an.cur{border-style:solid;border-color:var(--pur);background:color-mix(in srgb,var(--pur) 12%,var(--card2));color:var(--pur)}

/* 📊 سولہ تقسیمی نقشے (varga D1–D60) */
.rp-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.rp-vcard{border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--card2)}
.rp-vcard h4{margin:0 0 6px;display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.rp-vcard .vbox svg{display:block;margin:0 auto}
.rp-vstr th,.rp-vstr td{text-align:center}
.rp-vstr th:first-child,.rp-vstr td:first-child{text-align:start}
@media(max-width:760px){.rp-vgrid{grid-template-columns:1fr}.rp-antar{grid-template-columns:1fr 1fr}}

/* جھنڈے کا خانہ — flagcdn کی جگہ، صفر بیرونی درخواست (v85)
   v88 سے یہ صرف **پچھلا سہارا** ہے: جس ملک کی SVG فائل نہیں، اُس کا کوڈ
   اِسی خانے میں دکھتا ہے۔ باقی سب جگہ نیچے والا `img.fsflag` چلتا ہے۔ */
.fsflag{display:inline-block;min-width:1.9em;padding:0 .3em;margin-inline-end:.35em;
  border:1px solid var(--line);border-radius:3px;background:var(--card2,transparent);
  font:600 .72em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;color:var(--muted);vertical-align:.05em;text-align:center}

/* اصل جھنڈا — اپنی چھت سے (v88 · v89 میں پہرہ لگا)
   ⚠ `min-width` اور `padding` یہاں **صفر** ہونے چاہییں، ورنہ اوپر والا
   خانے والا اصول تصویر پر بھی لگ کر اُسے کھینچ دیتا ہے۔
   ⚠ `width/height` HTML میں بھی لکھے ہیں (٢٠×١٥) — تصویر آنے پر سطر ہلے نہیں۔

   ⚠⚠ **class دو بار کیوں لکھی ہے؟** (`img.fsflag.fsflag`)
   یہ چال جان بوجھ کر ہے، اور اِس کی ایک اصل وجہ ہے۔ v88 میں جھنڈا `<span>`
   سے `<img>` بنا۔ صفحوں میں پہلے سے ایسے اصول لکھے ہوئے تھے:

        .frline img { width:34px; height:34px; border-radius:50% }

   یعنی «اِس ڈبے کی **ہر** تصویر گول اور بڑی»۔ پہلے جھنڈا تصویر نہیں تھا سو
   بچ جاتا تھا؛ اب وہ اصول جھنڈے پر بھی لگ گیا اور فاروق کو ارکان کی فہرست
   میں **بڑے گول جھنڈے** دکھنے لگے (٢٦ جولائی، اُنہی نے پکڑا)۔
   `.frline img` کا وزن `img.fsflag` کے برابر ہے، اور صفحے کا CSS بعد میں
   آتا ہے — سو وہ جیت جاتا تھا۔ class دو بار لکھنے سے وزن بڑھ جاتا ہے اور
   کوئی صفحہ **غلطی سے** جھنڈے کی ناپ نہیں بدل سکتا۔

   ✅ اور جان بوجھ کر بدلنے کا راستہ کھلا ہے — `!important` نہیں لگایا:
        .locline { --fsflag-w:24px; --fsflag-h:18px }
   یعنی «حادثہ» رُک گیا، «ارادہ» نہیں۔ */
img.fsflag.fsflag{min-width:0;padding:0;
  width:var(--fsflag-w,20px);height:var(--fsflag-h,15px);object-fit:cover;
  border:1px solid var(--line);border-radius:2px;background:transparent;
  vertical-align:-.15em;flex:0 0 auto}

/* ============================================================
   v106 — 🔭 زاویوں کی مکمل وضاحت (aspects)
   فاروق (٢٧ جولائی ٢٠٢٦): «دو دو تین تین لفظ کا پاس بتایا ہوا ہے…
   کم از کم دو، تین، چار سطریں explanation چاہیے۔»
   اب ہر جوڑے کے نیچے چار بند آتے ہیں — سو اُنہیں سانس لینے کی جگہ چاہیے۔
   ⚠ `.rp-seg` ایک flex قطار ہے؛ اِس ڈبے کو پوری چوڑائی دینی پڑتی ہے ورنہ
   بند ایک دوسرے کے پہلو میں نچڑ جاتے ہیں۔ */
.aspx{flex-basis:100%;width:100%;margin:4px 0 2px}
.aspx p{margin:0 0 6px;line-height:2.0;font-size:12.6px;color:var(--ink)}
.aspx p:last-child{margin-bottom:0;color:var(--muted)}
.aspx p b{color:var(--ink)}
/* گوچر کے جدول میں یہ «کھولیں تو دکھے» کی صورت میں ہے */
.aspx-d{flex-basis:100%;width:100%;margin-top:2px}
.aspx-d>summary{cursor:pointer;color:var(--cool);font-size:11.5px;list-style:none}
.aspx-d>summary::-webkit-details-marker{display:none}
.aspx-d>summary::before{content:'▸ ';color:var(--cool)}
.aspx-d[open]>summary::before{content:'▾ '}