:root{
  --ink:#23262b;
  --ink-soft:#4a4d54;
  --parchment:#f1e9d8;
  --parchment-deep:#e3d6b8;
  --card-bg:#fbf7ee;
  --gold:#a9793f;
  --gold-soft:#d8bd8f;
  --teal:#2f5c52;
  --wine:#7c3a3a;
  --grey:#8a8a86;
  --line:#c7b795;
  --shadow: 0 6px 18px rgba(35,38,43,0.12);
  --radius: 10px;
}

/* ===== Portrait theme: dark, card-photo style ===== */
body.theme-portrait{
  --ink:#20232b;
  --ink-soft:#6b7180;
  --parchment:#f4f6fb;
  --parchment-deep:#e7eaf3;
  --card-bg:#ffffff;
  --gold:#3b6fd8;
  --gold-soft:#b7c4e6;
  --teal:#3b6fd8;
  --wine:#c23fc9;
  --grey:#8a8f99;
  --line:#dfe3ee;
  --shadow: 0 8px 24px rgba(30,40,80,0.12);
}
body.theme-portrait #canvasWrap{
  background:
    linear-gradient(var(--parchment), var(--parchment)),
    repeating-linear-gradient(0deg, rgba(110,168,254,0.05) 0px, transparent 1px, transparent 42px);
}
body.theme-portrait .rel-tag{ background:var(--parchment-deep); }
body.theme-portrait #treeSvg .node-avatar-bg{ stroke:var(--parchment); stroke-width:3; }
body.theme-portrait .node-card.selected .node-avatar-bg{
  stroke:var(--gold); stroke-width:3.5; filter:drop-shadow(0 0 8px rgba(110,168,254,0.55));
}
.spouse-heart-bg{ fill:var(--card-bg); stroke:var(--wine); stroke-width:1.2; }
.spouse-heart-txt{ fill:var(--wine); font-size:11px; }
.node-name.portrait{ font-size:13px; font-weight:700; }
.node-years.portrait{ font-size:10px; }
.node-avatar-txt.portrait{ font-size:15px; }
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(169,121,63,0.08), transparent 60%),
    var(--parchment);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow:hidden;
}
body.lang-ar{ font-family:'Tajawal',sans-serif; }
.display{ font-family:'Cormorant Garamond',serif; }
body.lang-ar .display{ font-family:'Amiri',serif; }

#app{ display:flex; height:100vh; width:100vw; }
body.lang-ar #app{ flex-direction:row-reverse; }

/* ===== Sidebar ===== */
#sidebar{
  width:340px; min-width:340px;
  background:var(--card-bg);
  border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column;
  box-shadow: 2px 0 12px rgba(35,38,43,0.06);
  z-index:5;
}
.brand{
  padding:22px 22px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px;
}
.brand .mark{
  font-family:'Amiri',serif; font-weight:700; font-size:26px; color:var(--gold);
  line-height:1;
}
.brand h1{ font-size:24px; margin:0; font-weight:700; letter-spacing:0.3px; }
.brand .sub{ font-size:11px; color:var(--ink-soft); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }

.lang-toggle{
  display:flex; margin:14px 22px 4px; border:1px solid var(--gold-soft); border-radius:999px; overflow:hidden;
}
.lang-toggle button{
  flex:1; border:none; background:transparent; padding:7px 0; font-size:12px; font-weight:600;
  cursor:pointer; color:var(--ink-soft); letter-spacing:0.5px;
}
.lang-toggle button.active{ background:var(--gold); color:#fff; }

.search-wrap{ padding:16px 22px 8px; }
.search-wrap input{
  width:100%; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--card-bg); font-size:13.5px; font-family:inherit; outline:none; color:var(--ink);
}
.search-wrap input:focus{ border-color:var(--gold); }

#addBtn{
  margin:6px 22px 12px; padding:11px 14px; border-radius:8px; border:none;
  background:var(--teal); color:#fff; font-weight:600; font-size:13.5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .15s;
}
#addBtn:hover{ filter:brightness(1.08); }
#addBtn:disabled{ opacity:0.6; cursor:default; }

#relFinderBtn{
  margin:0 22px 12px; padding:10px 14px; border-radius:8px; border:1px solid var(--gold-soft);
  background:var(--card-bg); color:var(--ink); font-weight:600; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 44px);
}
#relFinderBtn:hover{ border-color:var(--gold); color:var(--gold); }
#exportBtn{
  margin:0 22px 12px; padding:10px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--card-bg); color:var(--ink-soft); font-weight:600; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 44px);
}
#exportBtn:hover{ border-color:var(--gold); color:var(--gold); }
#lockBtn{
  margin:0 22px 12px; padding:10px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--card-bg); color:var(--ink-soft); font-weight:600; font-size:13px; cursor:pointer;
  align-items:center; justify-content:center; gap:8px; width:calc(100% - 44px);
}
#lockBtn:hover{ border-color:var(--wine); color:var(--wine); }

#pinOverlay{
  position:fixed; inset:0; background:rgba(35,38,43,0.45); display:none;
  align-items:center; justify-content:center; z-index:60;
}
#pinOverlay.show{ display:flex; }
#pinBox{
  background:var(--card-bg); padding:22px; border-radius:12px; max-width:340px; width:88vw;
  box-shadow:0 12px 40px rgba(0,0,0,0.25); text-align:start;
}
#pinBox .form-actions{ margin-top:10px; }
#pinInput{ letter-spacing:3px; font-size:18px; text-align:center; }

#relOverlay{
  position:fixed; inset:0; background:rgba(35,38,43,0.45); display:none;
  align-items:center; justify-content:center; z-index:55;
}
#relOverlay.show{ display:flex; }
#relBox{
  background:var(--card-bg); padding:22px; border-radius:12px; max-width:400px; width:88vw;
  box-shadow:0 12px 40px rgba(0,0,0,0.25); text-align:start;
}
.rel-box-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.rel-box-head h2{ margin:0; font-size:19px; }
.rel-box-head .panel-back{ font-size:16px; color:var(--ink-soft); }
#relBox .btn-primary{ width:100%; margin-top:4px; }
#relResult{
  margin-top:14px; padding:12px 14px; border-radius:8px; background:var(--parchment);
  font-size:13.5px; line-height:1.6; color:var(--ink); min-height:20px;
}
#relResult.rel-result-none{ color:var(--ink-soft); font-style:italic; }
#relResult:empty{ display:none; }

#peopleList{ flex:1; overflow-y:auto; padding:4px 12px 12px; }
.person-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer;
  margin-bottom:3px; transition:background .12s;
}
.person-row:hover{ background:var(--parchment); }
.person-row.selected{ background:var(--gold-soft); }
.avatar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; flex-shrink:0; border:2px solid var(--card-bg); box-shadow:0 0 0 1px var(--line);
}
.avatar.male{ background:var(--teal); }
.avatar.female{ background:var(--wine); }
.row-text{ min-width:0; }
.row-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-years{ font-size:11px; color:var(--ink-soft); }
.empty-msg, .no-results{ padding:20px 14px; text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.6; }

/* Detail / Form panel slides over list */
#detailPanel, #formPanel{
  display:none; flex-direction:column; flex:1; overflow-y:auto; padding:20px 22px 30px;
}
#detailPanel.active, #formPanel.active{ display:flex; }
#peopleListWrap.active{ display:none; }

.panel-back{
  background:none; border:none; color:var(--gold); font-size:13px; font-weight:600; cursor:pointer;
  padding:0; margin-bottom:14px; display:flex; align-items:center; gap:5px; align-self:flex-start;
}
.detail-avatar{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#fff; margin-bottom:12px; border:3px solid var(--card-bg); box-shadow:var(--shadow);
}
#detailPanel h2{ margin:0 0 2px; font-size:22px; }
.detail-sub{ color:var(--ink-soft); font-size:13px; margin-bottom:16px; }
.detail-notes{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; white-space:pre-wrap; }
.detail-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip-btn{
  padding:8px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card-bg);
  font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:6px;
}
.chip-btn:hover{ border-color:var(--gold); color:var(--gold); }
.chip-btn.danger:hover{ border-color:var(--wine); color:var(--wine); }
.rel-section{ margin-bottom:14px; }
.rel-title{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); margin-bottom:6px; font-weight:700;}
.rel-tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--parchment); padding:5px 10px 5px 5px;
  border-radius:999px; font-size:12.5px; margin:0 5px 5px 0; cursor:pointer; border:1px solid var(--line);
}
body.lang-ar .rel-tag{ padding:5px 5px 5px 10px; }
.rel-tag .mini-avatar{ width:18px; height:18px; border-radius:50%; font-size:9px; }
.rel-badge{
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:0.4px;
}
.rel-badge.married{ background:rgba(47,92,82,0.14); color:var(--teal); }
.rel-badge.divorced{ background:rgba(138,138,134,0.18); color:var(--grey); }
.rel-badge.step{ background:rgba(124,58,58,0.12); color:var(--wine); }

/* Form */
#formPanel h2{ margin:0 0 16px; font-size:20px; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border-radius:7px; border:1px solid var(--line); font-size:13.5px;
  font-family:inherit; background:var(--card-bg); outline:none; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:60px; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.field-row.tight .field:last-child{ flex:0 0 118px; }
.gender-toggle{ display:flex; gap:8px; }
.gender-toggle label{
  flex:1; text-align:center; padding:9px; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.gender-toggle input{ display:none; }
.gender-toggle label.male-lbl.checked{ border-color:var(--teal); background:rgba(47,92,82,0.08); color:var(--teal); }
.gender-toggle label.female-lbl.checked{ border-color:var(--wine); background:rgba(124,58,58,0.08); color:var(--wine); }
.form-actions{ display:flex; gap:10px; margin-top:18px; }
.btn-primary{
  flex:1; padding:11px; border-radius:8px; border:none; background:var(--gold); color:#fff;
  font-weight:700; font-size:13.5px; cursor:pointer;
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:disabled{ opacity:0.6; cursor:default; }
.btn-secondary{
  padding:11px 16px; border-radius:8px; border:1px solid var(--line); background:var(--card-bg); color:var(--ink-soft);
  font-weight:600; font-size:13.5px; cursor:pointer;
}
.hint{ font-size:11px; color:var(--ink-soft); margin-top:3px; }

/* Multi-spouse editor */
.spouse-editor{ border:1px solid var(--line); border-radius:9px; padding:10px; background:var(--card-bg); }
.spouse-item{
  display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid var(--parchment);
}
.spouse-item:last-of-type{ border-bottom:none; }
.spouse-item .sp-name{ flex:1; font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spouse-item select{ width:auto; padding:5px 8px; font-size:12px; border-radius:6px; }
.spouse-item .sp-remove{
  border:none; background:none; color:var(--wine); cursor:pointer; font-size:15px; padding:2px 5px; line-height:1;
}
.spouse-add-row{ display:flex; gap:6px; margin-top:8px; }
.spouse-add-row select{ flex:1; }
.spouse-add-row button{
  border:none; background:var(--teal); color:#fff; border-radius:6px; padding:0 12px; font-size:12.5px;
  font-weight:700; cursor:pointer; white-space:nowrap;
}
.spouse-add-row button:disabled{ opacity:0.5; cursor:default; }

/* ===== Canvas ===== */
#canvasWrap{ flex:1; position:relative; overflow:hidden; background:
  linear-gradient(var(--parchment), var(--parchment)),
  repeating-linear-gradient(0deg, rgba(169,121,63,0.035) 0px, transparent 1px, transparent 42px);
}
#topbar{
  position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; pointer-events:none; z-index:4;
}
#topbar .title-block{ pointer-events:auto; }
#topbar .title-block h2{ margin:0; font-size:18px; color:var(--ink); }
#topbar .title-block .count{ font-size:12px; color:var(--ink-soft); }
#controls{ display:flex; gap:8px; pointer-events:auto; }
.ctrl-btn{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow);
  font-size:16px; color:var(--ink);
}
.ctrl-btn:hover{ border-color:var(--gold); color:var(--gold); }
.ctrl-btn.wide{ width:auto; padding:0 14px; font-size:12.5px; font-weight:600; gap:6px; }

#treeSvg{ width:100%; height:100%; cursor:grab; }
#treeSvg.grabbing{ cursor:grabbing; }

.node-card rect{ fill:var(--card-bg); stroke:var(--line); stroke-width:1.4; }
.node-card.male rect{ stroke:var(--teal); }
.node-card.female rect{ stroke:var(--wine); }
.node-card.selected rect{ stroke:var(--gold); stroke-width:2.4; filter:drop-shadow(0 3px 8px rgba(169,121,63,0.35)); }
body.theme-portrait .node-card rect{ fill:transparent !important; stroke:none !important; filter:none !important; }
.node-card { cursor:pointer; }
.node-name{ font-family:'Inter',sans-serif; font-weight:700; font-size:13px; fill:var(--ink); }
body.lang-ar .node-name{ font-family:'Tajawal',sans-serif; }
.node-years{ font-family:'Inter',sans-serif; font-size:10.5px; fill:var(--ink-soft); }
.node-avatar-bg.male{ fill:var(--teal); }
.node-avatar-bg.female{ fill:var(--wine); }
.node-avatar-txt{ fill:#fff; font-size:12px; font-weight:700; font-family:'Inter',sans-serif; }
.link-path{ fill:none; stroke:var(--gold-soft); stroke-width:1.8; transition:opacity .15s, stroke .15s, stroke-width .15s; }
.link-path.highlight{ stroke:var(--gold); stroke-width:2.6; opacity:1; }
#treeSvg.has-highlight .link-path:not(.highlight){ opacity:0.28; }
#treeSvg .node-card.descendant-highlight .node-avatar-bg{ stroke:var(--gold); stroke-width:3; }
.node-card.descendant-highlight rect{ stroke:var(--gold); stroke-width:2; }
@keyframes silsila-jump-pulse{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.node-card.just-jumped .node-avatar-bg, .node-card.just-jumped rect{
  animation: silsila-jump-pulse 0.6s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
body.theme-portrait{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(110,168,254,0.10), transparent 60%),
    var(--parchment);
}
body.theme-portrait .link-path{ stroke-linecap:round; stroke-width:1.8; opacity:0.9; }
body.theme-portrait .link-path.highlight{ stroke:var(--gold); stroke-width:2.8; opacity:1; }
.link-path.step{ stroke:var(--wine); stroke-width:1.5; stroke-dasharray:5,4; opacity:0.75; }
.spouse-line{ stroke:var(--gold); stroke-width:2; stroke-dasharray:3,3; }
.spouse-line.divorced{ stroke:var(--grey); stroke-width:1.4; stroke-dasharray:2,4; opacity:0.7; }
.gen-label{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:14px; fill:var(--gold); opacity:0.85; }
body.lang-ar .gen-label{ font-family:'Amiri',serif; }
.collapse-toggle circle{ fill:var(--card-bg); stroke:var(--gold); stroke-width:1.4; }
.collapse-toggle text{ fill:var(--gold); font-size:11px; font-weight:700; font-family:'Inter',sans-serif; }
.collapse-toggle{ cursor:pointer; }

#emptyCanvas{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column;
  gap:14px; text-align:center; pointer-events:none;
}
#emptyCanvas.show{ display:flex; }
#emptyCanvas .display{ font-size:26px; color:var(--ink); }
#emptyCanvas p{ color:var(--ink-soft); font-size:13.5px; max-width:280px; margin:0; }

#toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:13px;
  box-shadow:var(--shadow); transition:opacity .2s, transform .2s; pointer-events:none; z-index:60;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.error{ background:var(--wine); }

/* Modal overlay for confirm delete */
#overlay{
  position:fixed; inset:0; background:rgba(35,38,43,0.45); display:none; align-items:center; justify-content:center; z-index:50;
}
#overlay.show{ display:flex; }
#confirmBox{
  background:var(--card-bg); padding:24px; border-radius:12px; max-width:340px; box-shadow:0 12px 40px rgba(0,0,0,0.25);
  text-align:center;
}
#confirmBox p{ font-size:14px; color:var(--ink); margin:0 0 18px; line-height:1.6; }
#confirmBox .form-actions{ margin-top:0; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:var(--gold-soft); border-radius:8px; }

/* Prevent the default double-tap-to-zoom delay/gesture on interactive controls */
button, .person-row, .rel-tag, .chip-btn, .ctrl-btn, .spouse-item, .node-card, .collapse-toggle{ touch-action: manipulation; }

/* Tree canvas handles its own pan/pinch-zoom via JS — stop the browser from
   also trying to scroll/zoom it, which would fight the custom gestures. */
#treeSvg{ touch-action: none; }

#sidebarBackdrop{
  display:none; position:fixed; inset:0; background:rgba(35,38,43,0.45); z-index:15;
}

@media (max-width: 760px){
  #sidebar{
    position:absolute; z-index:20; height:100%; width:88vw; max-width:380px; min-width:0;
    transform:translateX(-100%); transition:transform .25s;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.lang-ar #sidebar{ transform:translateX(100%); }
  #sidebar.open{ transform:translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.25); }
  #mobileMenuBtn{ display:flex !important; }
  #sidebarBackdrop.show{ display:block; }

  /* iOS Safari auto-zooms the page when a focused input's font is under 16px —
     bump form fields up to 16px on touch screens to prevent that jump. */
  .field input, .field select, .field textarea, .search-wrap input,
  .spouse-item select, .gender-toggle label{ font-size:16px; }

  /* Roomier tap targets */
  .ctrl-btn{ width:42px; height:42px; }
  .chip-btn{ padding:10px 14px; }
  .person-row{ padding:11px 10px; }
  .rel-tag{ padding:8px 12px 8px 6px; }
  body.lang-ar .rel-tag{ padding:8px 6px 8px 12px; }
  #addBtn{ padding:13px 14px; }
  #relFinderBtn{ padding:12px 14px; }
  #exportBtn{ padding:12px 14px; }
  #lockBtn{ padding:12px 14px; }

  #topbar{ padding:14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
  #controls{ flex-wrap:wrap; justify-content:flex-end; }

  .field-row{ flex-wrap:wrap; }
  .field-row .field{ min-width:130px; }
  .field-row.tight .field:last-child{ flex:1 1 100px; }

  #confirmBox{ width:88vw; }

  .lang-toggle button{ padding:10px 0; font-size:13px; }
  .collapse-toggle circle{ r:13; }
}

@media (max-width: 420px){
  .ctrl-btn.wide span{ display:none; }
  .ctrl-btn.wide{ width:42px; padding:0; }
  #topbar .title-block h2{ font-size:16px; }
  .brand h1{ font-size:20px; }
}

#mobileMenuBtn{ display:none; }