/* ── tree.css — the family-tree visualization + node cards + detail drawer ──
   Shared by all three feature pages. A vertical "lineage vine": the root at the
   top, thematic branches fanning below, each node a card connected by curved
   tricolour connectors. Fully responsive; collapses to a single column. */

/* Page header for a feature */
.feature-head {
  position: relative; text-align: center; padding: 2.6rem 0 1.4rem;
}
.feature-head .eyebrow { display:block; margin-bottom:.5rem; }
.feature-head h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.feature-head .lede { max-width: 62ch; margin: .8rem auto 0; color: var(--ink-soft); font-size: 1.02rem; }
.feature-head .meta-pills { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:1.1rem; }
.pill {
  font: 600 .76rem/1 var(--font-body); padding:.42rem .7rem; border-radius:999px;
  background: var(--card); border:1px solid var(--line-strong); color: var(--ink-soft);
  display:inline-flex; align-items:center; gap:.4rem;
}
.pill b { color: var(--ink); }

/* Toolbar above the tree */
.tree-toolbar {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  justify-content:center; margin: .4rem auto 1.6rem;
}
.tsearch { position:relative; }
.tsearch input {
  font: 500 .92rem/1 var(--font-body); color: var(--ink);
  padding:.6rem .9rem .6rem 2.1rem; border-radius:999px; width: min(78vw, 320px);
  background: var(--card); border:1px solid var(--line-strong); outline:none; transition:border-color .2s;
}
.tsearch input:focus { border-color: var(--kesari); box-shadow: 0 0 0 3px var(--kesari-soft); }
.tsearch::before { content:"⌕"; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:1.05rem; }
.mini-btn {
  font:600 .82rem/1 var(--font-body); padding:.55rem .8rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line-strong); color:var(--ink-soft); transition:all .18s var(--ease);
}
.mini-btn:hover { border-color:var(--harit); color:var(--harit-deep); }

/* ── Tree scaffold ────────────────────────────────────────────────────────*/
.tree { --vine: var(--line-strong); position:relative; padding-bottom:2rem; }

/* Root node — the trunk crown */
.tree-root { display:flex; justify-content:center; margin-bottom: 1.4rem; }
.node-root {
  text-align:center; padding:1.4rem 1.6rem; border-radius: var(--r-lg);
  background:
     linear-gradient(180deg, color-mix(in srgb, var(--kesari-soft) 70%, var(--card)), var(--card));
  border:1px solid var(--line-strong); box-shadow: var(--sh-2);
  max-width: 560px; position:relative; overflow:hidden;
}
.node-root::before { content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--kesari),var(--white),var(--harit)); }
.node-root .emoji { font-size:2rem; }
.node-root h2 { font-size: clamp(1.2rem,3vw,1.6rem); margin-top:.3rem; }
.node-root p { color:var(--ink-soft); margin-top:.35rem; font-size:.95rem; }

/* Branch columns */
.branches {
  display:grid; gap: 1.2rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.branch {
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem .9rem 1.2rem; box-shadow: var(--sh-1);
}
.branch-head {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .3rem .8rem;
  border-bottom:1px dashed var(--line-strong); margin-bottom:.7rem;
}
.branch-head .b-emoji {
  width:40px; height:40px; flex:none; display:grid; place-items:center; font-size:1.2rem;
  border-radius:12px; background:var(--parchment-2); border:1px solid var(--line-strong);
}
.branch-head h3 { font-size:1.06rem; line-height:1.15; }
.branch-head .b-period { font: 600 .72rem/1 var(--font-mono); color: var(--ink-faint); margin-top:.2rem; }

/* Vine list of leaf nodes */
.leaves { list-style:none; padding:0 0 0 .2rem; margin:0; position:relative; }
.leaf { position:relative; padding-left: 1.35rem; margin: .55rem 0; }
/* the vertical vine */
.leaf::before {
  content:""; position:absolute; left:6px; top:-.35rem; bottom:-.55rem; width:2px;
  background: linear-gradient(var(--kesari), var(--harit)); opacity:.5;
}
.leaf:last-child::before { bottom: 50%; }
/* the curved twig to the card */
.leaf::after {
  content:""; position:absolute; left:6px; top:1.15rem; width:12px; height:2px;
  background: var(--harit); opacity:.55; border-radius:2px;
}
.leaf > .node-card::before {
  content:""; position:absolute; left:-1.35rem; top:1.1rem; width:9px; height:9px; border-radius:50%;
  background:var(--card); border:2px solid var(--kesari); transform:translateX(2px);
}

/* nested children indent further */
.leaf .leaves { margin-top:.5rem; }

/* ── The node card ────────────────────────────────────────────────────────*/
.node-card {
  position:relative; text-align:left; width:100%;
  background: var(--card); border:1px solid var(--line-strong);
  border-left:4px solid var(--tag, var(--kesari));
  border-radius: var(--r-md); padding:.7rem .8rem .72rem .8rem;
  box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
  display:block;
}
.node-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.node-card:focus-visible { outline: 3px solid var(--kesari-soft); outline-offset:2px; }
.node-card .nc-top { display:flex; align-items:flex-start; gap:.55rem; }
.node-card .nc-emoji { font-size:1.15rem; line-height:1.2; flex:none; }
.node-card .nc-thumb {
  width:46px; height:46px; flex:none; border-radius:10px; object-fit:cover;
  background:var(--parchment-2); border:1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(42,33,24,.18);
}
.node-card .nc-name { font: 700 .98rem/1.2 var(--font-head); color:var(--ink); }
.node-card .nc-role { font: 500 .78rem/1.2 var(--font-body); color: var(--ink-faint); margin-top:.12rem; }
.node-card .nc-period { font: 600 .68rem/1 var(--font-mono); color: var(--tag, var(--kesari-deep)); margin-top:.28rem; letter-spacing:.02em; }
.node-card .nc-summary { font-size:.85rem; color:var(--ink-soft); margin-top:.4rem; }
.node-card .nc-foot { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.tagchip {
  font:700 .64rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.06em;
  padding:.28rem .45rem; border-radius:6px; color:#fff; background:var(--tag,var(--kesari));
  opacity:.92;
}
.src-count { font:600 .7rem/1 var(--font-body); color:var(--chakra); display:inline-flex; align-items:center; gap:.25rem; }
.src-count::before { content:"❝"; }
.expand-hint { margin-left:auto; font:600 .72rem/1 var(--font-body); color:var(--ink-faint); }
.has-kids > .node-card .expand-hint::after { content:"  ▾"; }
.leaf.collapsed .leaves { display:none; }
.leaf.collapsed > .node-card .expand-hint::after { content:"  ▸"; }

/* highlight on search */
.node-card.match { border-color: var(--harit); box-shadow: 0 0 0 3px var(--harit-soft); }
.node-card.dim { opacity:.32; }

/* ── Detail drawer (modal) ────────────────────────────────────────────────*/
.drawer-scrim {
  position:fixed; inset:0; z-index:100; background:rgba(20,14,6,.5);
  backdrop-filter: blur(3px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.drawer-scrim.open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; z-index:101; top:0; right:0; height:100dvh; width:min(94vw, 480px);
  background:var(--card); border-left:1px solid var(--line-strong); box-shadow: var(--sh-3);
  transform: translateX(102%); transition: transform .32s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer.open { transform:none; }
.drawer-top { padding:1.2rem 1.3rem .9rem; border-bottom:1px solid var(--line); position:relative; }
.drawer-top::before { content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--kesari),var(--white),var(--harit)); }
.drawer-close {
  position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%;
  background:var(--parchment-2); border:1px solid var(--line-strong); color:var(--ink-soft); font-size:1.1rem;
}
.drawer-close:hover { color:var(--kesari-deep); border-color:var(--kesari); }
.drawer .d-emoji { font-size:2.1rem; }
.drawer h2 { font-size:1.45rem; margin-top:.3rem; padding-right:2rem; }
.drawer .d-role { color:var(--ink-soft); font-weight:600; margin-top:.2rem; }
.drawer .d-period { font:600 .8rem/1 var(--font-mono); color:var(--tag,var(--kesari-deep)); margin-top:.5rem; display:inline-block; }
.drawer-body { padding:1.2rem 1.3rem 2rem; overflow-y:auto; }
.drawer-body .d-image { margin:0 0 1.1rem; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-strong); background:var(--parchment-2); box-shadow:var(--sh-1); }
.drawer-body .d-image img { width:100%; max-height:300px; object-fit:cover; display:block; }
.drawer-body .d-image figcaption { font:500 .72rem/1.35 var(--font-body); color:var(--ink-faint); padding:.45rem .65rem; background:var(--parchment-2); border-top:1px solid var(--line); }
.drawer-body .d-lede { font-size:1.02rem; color:var(--ink); font-weight:600; line-height:1.5; margin-bottom:.8rem; padding-left:.7rem; border-left:3px solid var(--tag,var(--kesari)); }
.drawer-body .d-detail { font-size:.98rem; color:var(--ink); line-height:1.72; }
.drawer-body h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); margin:1.5rem 0 .6rem; display:flex; align-items:center; gap:.5rem; }
.drawer-body h4::before { content:""; width:14px; height:2px; background:var(--tag,var(--kesari)); border-radius:2px; }

/* Key facts list */
.facts-list { list-style:none; padding:0; display:grid; gap:.4rem; }
.facts-list li {
  position:relative; font-size:.9rem; color:var(--ink); line-height:1.45;
  padding:.4rem .6rem .4rem 1.7rem; border-radius:9px;
  background:var(--parchment-2); border:1px solid var(--line);
}
.facts-list li::before {
  content:""; position:absolute; left:.6rem; top:.72rem; width:8px; height:8px; border-radius:2px;
  background:var(--tag,var(--kesari)); transform:rotate(45deg);
}

/* Copy-link button */
.d-copy {
  margin-top:1.8rem; width:100%; padding:.65rem 1rem; border-radius:12px;
  font:600 .86rem/1 var(--font-body); color:var(--ink-soft);
  background:var(--parchment-2); border:1px dashed var(--line-strong); transition:all .18s var(--ease);
}
.d-copy:hover { border-color:var(--kesari); color:var(--kesari-deep); }
.d-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.src-list { list-style:none; padding:0; display:grid; gap:.6rem; }
.src-list li {
  font-size:.86rem; color:var(--ink-soft); padding:.6rem .7rem; border-radius:10px;
  background:var(--parchment-2); border:1px solid var(--line); border-left:3px solid var(--chakra);
}
.src-list li a { color:var(--chakra); font-weight:600; text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.src-list li .src-n { font:700 .7rem/1 var(--font-mono); color:var(--chakra); margin-right:.4rem; }

/* Sources footnote block under a tree */
.sources-block {
  margin-top:2.4rem; padding:1.4rem 1.3rem; border-radius:var(--r-lg);
  background:var(--parchment-2); border:1px solid var(--line);
}
.sources-block h3 { font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
.sources-block ol { margin:.9rem 0 0; padding-left:1.3rem; display:grid; gap:.45rem; }
.sources-block li { font-size:.86rem; color:var(--ink-soft); }
.sources-block a { color:var(--chakra); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:560px){
  .drawer { width:100vw; }
}