/* ============================================================
   شجره‌نامهٔ خاندان پیامبر اسلام ﷺ — شیوه‌نامه
   ============================================================ */

/* رنگ‌های نشان و تنظیمات حرکت در tokens.css‌اند — یک منبع، مشترک با پنل
   مدیریت. آنچه اینجا می‌ماند سطحِ همین صفحه است: کاغذ، کارت، خط، اندازه‌ها.
   این‌ها عمداً با پنل مدیریت فرق دارند؛ آنجا مقیاسی فشرده‌تر لازم است. */
:root{
  /* کاغذ و مرکب — ویژهٔ نمایشگر */
  --paper:#F3EAD3;
  --paper-2:#EADFC0;
  --card:#FCF8EE;
  --ink:#2A2118;
  --line:#D6C49A;

  --green-2:#155943;
  --gold-soft:#E4CE9C;

  /* ته‌رنگِ کارت‌ها. نام‌دار شدند چون راهنما هم همین‌ها را نشان می‌دهد؛
     پیش‌تر در دو جا عدد خام بودند و می‌توانستند از هم دور بیفتند. */
  --tint-female:#FBF4E8;
  --tint-female-line:#CDA8A8;
  --tint-spouse:#FAF3E6;
  --tint-sect:#F8F0EE;

  /* اندازه‌ها */
  --rail:2px;
  --radius:12px;
  --panel-w:340px;
  --shadow-1:0 1px 3px rgba(42,33,24,.16);
  --shadow-2:0 6px 22px rgba(42,33,24,.22);
  --shadow-3:0 18px 50px rgba(42,33,24,.30);
}

/* حرکت کاسته: توکنِ --dur در tokens.css صفر می‌شود؛ این قاعدهٔ فراگیر
   عمداً همین‌جا می‌ماند و مشترک نیست، چون پنل مدیریت چرخندهٔ خود را کند
   می‌کند نه متوقف. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}

/* بافت ملایم کاغذ */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(176,135,59,.10), transparent 60%);
}

/* ── نوار بالا ───────────────────────────────────────────── */
#topbar{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:flex-start; gap:16px;
  padding:12px 18px 26px;
  background:linear-gradient(180deg, rgba(243,234,211,.98) 0%, rgba(243,234,211,.90) 62%, rgba(243,234,211,0) 100%);
  pointer-events:none;
}
#topbar > *{ pointer-events:auto; }

.brand h1{
  font-family:'Aref Ruqaa', 'Vazirmatn', serif;
  font-size:1.3rem; line-height:1.5; margin:0; color:var(--green);
}
.brand p{ margin:1px 0 0; font-size:.78rem; color:var(--ink-soft); }

/* ── جست‌وجو ─────────────────────────────────────────────── */
#searchWrap{ position:relative; margin-inline-start:auto; width:min(300px, 40vw); }
#search{
  width:100%; padding:8px 34px 8px 12px;
  font-family:inherit; font-size:.85rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-1); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#search:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,135,59,.20); }
#searchWrap .icon{
  position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); font-size:.9rem; pointer-events:none;
  display:flex; align-items:center;
}
#searchWrap .ic{ width:15px; height:15px; stroke-width:2.2; }
#suggest{
  position:absolute; inset-inline:0; top:calc(100% + 6px);
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-2); max-height:min(52vh,380px); overflow-y:auto;
  padding:4px; margin:0; list-style:none; z-index:30;
}
#suggest[hidden]{ display:none; }
#suggest li{
  padding:7px 10px; border-radius:7px; font-size:.83rem; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
#suggest li .sub{ font-size:.72rem; color:var(--ink-soft); margin-inline-start:auto; }
#suggest li[aria-selected="true"], #suggest li:hover{ background:var(--paper-2); }
#suggest .empty{ color:var(--ink-soft); cursor:default; }

/* ── ابزارها ─────────────────────────────────────────────── */
#tools{
  position:fixed; inset-block-start:64px; inset-inline-start:18px; z-index:20;
  display:flex; flex-direction:column; gap:6px;
}
#tools .grp{
  display:flex; flex-direction:column; gap:1px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-1); overflow:hidden;
}
#tools button{
  width:36px; height:34px; border:0; background:transparent; color:var(--green);
  font-family:inherit; font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}

/* نمادهای درون‌خطی (بنگرید به sprite در index.html).
   رنگ از currentColor می‌آید، پس دکمهٔ فشرده که رنگ متنش وارونه می‌شود
   نماد را هم با خود می‌برد و نیازی به قاعدهٔ جداگانه نیست. */
.ic{
  width:18px; height:18px; display:block; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  /* نمادها ۲۴×۲۴ کشیده شده‌اند ولی ۱۸ پیکسل نمایش داده می‌شوند؛ بدون این،
     خط‌ها هنگام بزرگ‌نماییِ مرورگر ضخامت ناهمگون پیدا می‌کنند. */
  vector-effect:non-scaling-stroke;
}
#panel .ic{ width:16px; height:16px; }
#tools button + button{ border-top:1px solid var(--paper-2); }
#tools button:hover{ background:var(--paper-2); }
#tools button:active{ background:var(--gold-soft); }
#tools button[aria-pressed="true"]{ background:var(--green); color:var(--paper); }
/* حالت میانیِ کلید سه‌حالتهٔ همسران: روشن، ولی نه کامل. رنگ ملایم‌تر تا
   «کلیدی» و «همه» از هم و از «هیچ» با یک نگاه جدا شوند. */
#tools button[aria-pressed="mixed"]{ background:var(--gold-soft); color:var(--green); }
#tools button:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }

/* ── راهنمای رنگ‌ها ───────────────────────────────────────── */
#legend{
  position:fixed; inset-block-end:14px; inset-inline-start:18px; z-index:20;
  background:rgba(252,248,238,.94); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-1); padding:9px 12px; font-size:.73rem; color:var(--ink-soft);
  max-width:230px;
}
#legend h2{ font-size:.75rem; margin:0 0 6px; color:var(--ink); font-weight:600; }
#legend ul{ margin:0; padding:0; list-style:none; display:grid; gap:4px; }
#legend li{ display:flex; align-items:center; gap:7px; }
#legend .sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(0,0,0,.12); }
/* نمونه‌رنگ‌های راهنما از همان توکن‌هایی می‌خوانند که کارت‌ها.
   پیش‌تر رنگ‌ها درون style= در HTML تکرار شده بودند، یعنی راهنما می‌توانست
   بی‌سروصدا چیزی را نشان دهد که دیگر در نمودار نیست. ضخامتِ ۲ پیکسل فقط
   برای خوانا بودن در ۱۱ پیکسل است. */
#legend .sw.imam   { background:var(--green); }
#legend .sw.female { background:var(--tint-female); border-color:var(--tint-female-line); }
#legend .sw.spouse { background:var(--tint-spouse); border-style:dashed; }
#legend .sw.karbala{ background:var(--card); border-color:var(--crimson); border-width:2px; }
#legend .sw.sect   { background:var(--tint-sect); border-color:var(--plum); border-width:2px; }
#legend .dash{ width:14px; height:0; border-top:1.6px dashed var(--ink-soft); flex:0 0 auto; }
#legend .hint{ margin-top:7px; padding-top:7px; border-top:1px solid var(--paper-2); line-height:1.6; }
#legend.collapsed ul, #legend.collapsed .hint{ display:none; }
#legend h2{ cursor:pointer; user-select:none; }

/* ── بوم ─────────────────────────────────────────────────── */
#canvas{
  display:block; width:100vw; height:100vh; position:relative; z-index:1;
  cursor:grab; touch-action:none;
}
#canvas.grabbing{ cursor:grabbing; }

.link{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.link.descent{ stroke-opacity:.5; }
.link.rail{ stroke-opacity:.65; }
.link.cross{ stroke-opacity:.42; stroke-dasharray:5 5; }
.link.dim{ stroke-opacity:.09; }
.link.lit{ stroke-opacity:.95; }

.node{ cursor:default; }
.node.has-kids{ cursor:pointer; }
.node:focus{ outline:none; }

/* لایهٔ حاشیه: foreignObject از کارت بزرگ‌تر است تا نشان‌های گوشه
   بریده نشوند؛ خودِ حاشیه رویدادی نمی‌گیرد. */
.wrap{
  width:100%; height:100%; padding:12px; position:relative;
  pointer-events:none;
}
.wrap > .card{ pointer-events:auto; }

.card{
  height:100%; width:100%; direction:rtl; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:1px;
  border-radius:var(--radius); border:1.5px solid var(--line);
  background:var(--card); color:var(--ink);
  padding:5px 9px; font-size:12.5px; line-height:1.4;
  box-shadow:var(--shadow-1);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), opacity .2s;
}
.node.has-kids .card{ cursor:pointer; }
.node:hover .card{ transform:translateY(-1px) scale(1.035); box-shadow:var(--shadow-2); }
.node:focus-visible .card{ outline:2.5px solid var(--gold); outline-offset:2px; }

.card .nm{ font-weight:500; }
.card .pic{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--gold-soft); margin-bottom:2px; background:var(--paper-2);
}
.card.prophet .pic, .card.imam .pic, .card.fatima .pic{ border-color:var(--gold); }
.card .sub{ font-size:10px; color:var(--ink-soft); font-weight:400; }
.card .hon{ font-weight:400; opacity:.85; }

/* گونه‌های کارت */
.card.prophet{
  background:linear-gradient(160deg, var(--green) 0%, var(--green-2) 100%);
  color:#F6EFDD; border-color:var(--gold); border-width:2px;
  font-family:'Aref Ruqaa','Vazirmatn',serif; font-size:15px; font-weight:700;
  box-shadow:0 3px 14px rgba(10,50,38,.34);
}
.card.prophet .sub{ color:rgba(246,239,221,.72); }
.card.fatima{
  background:linear-gradient(160deg, #14503C 0%, #1C6B4E 100%);
  color:#F6EFDD; border-color:var(--gold); border-width:2px; font-weight:700; font-size:13.5px;
}
.card.fatima .sub{ color:rgba(246,239,221,.72); }
.card.imam{
  background:linear-gradient(160deg, #16564A 0%, #1E7059 100%);
  color:#F6EFDD; border-color:var(--gold-soft); border-width:2px; font-weight:700; font-size:13px;
}
.card.imam .sub{ color:rgba(246,239,221,.75); }
.card.female{ background:var(--tint-female); border-color:var(--tint-female-line); }
.card.spouse{ background:var(--tint-spouse); border-style:dashed; }
.card.sect{ border-color:var(--plum); border-width:2px; background:var(--tint-sect); }
.card.karbala{ border-color:var(--crimson); }
.card.infant{ opacity:.82; font-size:11.5px; }
.card.disputed{ border-style:dotted; }

.card.dim{ opacity:.22; }
.card.lit{ box-shadow:0 0 0 3px var(--gold), var(--shadow-2); }
.card.selected{ box-shadow:0 0 0 3px var(--green), var(--shadow-2); }
.card.match{ box-shadow:0 0 0 3px rgba(176,135,59,.85), var(--shadow-1); }

/* نشان‌ها */
.badge{
  position:absolute; top:-9px; inset-inline-start:-9px;
  min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--green); color:var(--paper);
  font-size:11px; font-weight:700; line-height:20px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.imam-no{
  position:absolute; top:-9px; inset-inline-end:-9px;
  width:21px; height:21px; border-radius:50%;
  background:var(--gold); color:#2A2118;
  font-size:11px; font-weight:700; line-height:21px; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.30);
}

/* نوار نسل‌ها */
.gen-band rect{ fill:rgba(176,135,59,.045); }
.gen-band text{
  fill:var(--ink-soft); font-size:11px; font-family:'Vazirmatn',sans-serif;
  opacity:.55; direction:rtl;
}

/* ── پانل جزئیات ─────────────────────────────────────────── */
#panel{
  position:fixed; inset-block:0; inset-inline-end:0; width:var(--panel-w); max-width:88vw; z-index:25;
  background:var(--card); border-inline-start:1px solid var(--line);
  box-shadow:var(--shadow-3);
  display:flex; flex-direction:column;
  /* بسته: بیرون از لبهٔ چپ (سمت «پایانی» در چیدمان راست‌به‌چپ) */
  transform:translateX(-100%);
  transition:transform var(--dur) var(--ease);
  visibility:hidden;
}
#panel.open{ transform:translateX(0); visibility:visible; }
#panel header{
  padding:16px 18px 12px; border-bottom:1px solid var(--paper-2);
  background:linear-gradient(160deg, var(--green), var(--green-2)); color:#F6EFDD;
}
#panel header .kicker{ font-size:.7rem; opacity:.75; letter-spacing:.02em; }
#panel header h2{ margin:2px 0 0; font-size:1.12rem; font-family:'Aref Ruqaa','Vazirmatn',serif; line-height:1.6; }
#panel header .meta{ margin-top:5px; font-size:.74rem; opacity:.8; }
#panelClose{
  position:absolute; top:12px; inset-inline-start:12px;
  width:28px; height:28px; border-radius:8px; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#F6EFDD; font-size:1rem; line-height:1;
}
#panelClose:hover{ background:rgba(255,255,255,.26); }
#panelBody{ padding:14px 18px 22px; overflow-y:auto; font-size:.83rem; line-height:1.85; }
#panelBody section{ margin-bottom:14px; }
#panelBody h3{
  /* gold-ink not gold: this is .73rem, and --gold is 3.11:1 which fails
     AA for small text. Same hue, dark enough to pass. */
  font-size:.73rem; font-weight:600; color:var(--gold-ink); margin:0 0 5px;
  text-transform:none; letter-spacing:.01em;
}
#panelBody .note{ color:var(--ink-soft); }
#panelBody dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; }
#panelBody dt{ color:var(--ink-soft); font-size:.76rem; }
#panelBody dd{ margin:0; }
#panelBody .rel{
  display:inline-block; margin:0 0 4px 4px; padding:3px 9px;
  border:1px solid var(--line); border-radius:8px; background:var(--paper);
  cursor:pointer; font-size:.78rem;
}
#panelBody .rel:hover{ background:var(--gold-soft); border-color:var(--gold); }
#panelBody .rel.f{ background:var(--tint-female); }
#panelBody .tags{ display:flex; flex-wrap:wrap; gap:4px; }
#panelBody .tag{ font-size:.7rem; padding:2px 8px; border-radius:7px; background:var(--paper-2); color:var(--ink-soft); }
#panelBody .tag.karbala{ background:#F3DEDE; color:var(--crimson); }
#panelBody .tag.disputed{ background:#EDE4F1; color:var(--plum); }
#panelBody .lineage{ font-size:.78rem; color:var(--ink-soft); line-height:2; }
#panelBody .lineage b{ color:var(--ink); font-weight:600; }
#panelBody .edit-link{
  display:inline-block; padding:6px 12px; border-radius:8px; text-decoration:none;
  background:var(--gold-soft); color:var(--green); border:1px solid var(--gold);
  font-size:.8rem;
}
#panelBody .edit-link:hover{ background:var(--gold); color:#fff; }
#panelActions{ display:flex; gap:6px; padding:10px 18px; border-top:1px solid var(--paper-2); }
#panelActions button{
  flex:1; padding:7px; font-family:inherit; font-size:.78rem; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--green);
}
#panelActions button:hover{ background:var(--gold-soft); border-color:var(--gold); }

/* ── لایهٔ اندازه‌گیری متن (خارج از دید) ───────────────────── */
#measure{
  position:absolute; visibility:hidden; pointer-events:none;
  top:-9999px; inset-inline-start:-9999px; width:auto; height:auto;
}
#measure .card{ position:absolute; height:auto !important; white-space:normal; }

/* ── وضعیت بارگذاری ──────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--paper); color:var(--ink-soft); font-size:.85rem;
  transition:opacity .3s; 
}
#boot.done{ opacity:0; pointer-events:none; }

/* ── واکنش‌گرایی ─────────────────────────────────────────── */
@media (max-width:720px){
  .brand h1{ font-size:1rem; }
  .brand p{ display:none; }
  #searchWrap{ width:44vw; }
  #legend{ display:none; }
  #tools{ inset-block-start:auto; inset-block-end:14px; }
  :root{ --panel-w:100vw; }
}

@media print{
  #topbar,#tools,#legend,#panel,#boot{ display:none !important; }
  html,body{ overflow:visible; background:#fff; }
}