.roots-intro{display:flex;justify-content:space-between;gap:30px;align-items:center}.roots-intro .margin-word{font:38px Georgia,serif;color:var(--accent)}.roots-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:20px 0;border-top:1px solid var(--line)}.roots-tools label{display:flex;flex-direction:column;gap:5px;font:12px Arial,sans-serif}.roots-tools input,.roots-tools select,.roots-tools button,.root-shortcuts button,.person button,.search-results button{font:14px/1.4 Arial,sans-serif;padding:10px 12px;border:1px solid var(--line);background:var(--paper);color:var(--blue);border-radius:2px;min-height:42px;cursor:pointer}.roots-tools input{width:260px;color:var(--ink);cursor:text}.root-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.root-shortcuts button{border:none;padding-left:0;padding-right:20px;text-decoration:underline;text-underline-offset:5px}.roots-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px;margin:20px 0 32px}.graph-viewport{height:570px;overflow:auto;border:1px solid var(--line);background:radial-gradient(circle,#d7d8cc 0.7px,transparent 1px) 0 0/18px 18px;position:relative}.graph{position:relative;transform-origin:top left}.graph svg{position:absolute;inset:0;pointer-events:none}.graph path{fill:none;stroke:#b9b7a8;stroke-width:1.5}.graph path.trace{stroke:var(--blue);stroke-width:3}.graph path.heritage{stroke-dasharray:6 5}.root-node{position:absolute;width:210px;height:84px;padding:10px 12px;background:var(--paper);border:1px solid #aaa997;border-radius:3px;color:var(--ink);font:15px/1.3 Georgia,serif;text-align:left;cursor:pointer;overflow:hidden;box-shadow:2px 3px 0 #e9e5da}.root-node span{display:block;font:10px/1.4 Arial,sans-serif;color:var(--muted);margin-top:5px}.root-node[aria-pressed=true]{border:2px solid var(--blue);background:#edf0f5}.root-node.on-path{border-color:var(--blue)}.person{min-width:0;border-top:2px solid var(--accent);padding:20px 0;font-size:16px;overflow-wrap:anywhere}.person h2{font-size:27px}.person .portrait{width:110px;height:145px;object-fit:cover;border-radius:50%;float:right;margin:0 0 18px 18px;border:5px solid #e9e1d1}.person p{margin:12px 0}.person ul{padding-left:18px}.person button{padding:5px 0;border:none;text-align:left;background:none;min-height:36px}.person .expand{border:1px solid var(--line);padding:10px;width:100%;text-align:center}.person .credits{font:11px/1.6 Arial,sans-serif;clear:both}.search-results{display:flex;gap:8px;flex-wrap:wrap;max-height:230px;overflow:auto}.search-results:empty{display:none}.graph-status{font:12px/1.6 Arial,sans-serif;color:var(--muted)}.roots-notes{max-width:800px;margin-bottom:55px}.roots-notes p{font-size:15px}.person a{overflow-wrap:anywhere}input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}@media(max-width:800px){.roots-workspace{grid-template-columns:1fr}.graph-viewport{height:430px}.person{max-width:650px}.roots-intro .margin-word{display:none}.roots-tools input{width:220px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.root-node{width:270px;height:auto;min-height:106px;overflow:visible;padding:14px 16px;font:18px/1.45 Arial,Helvetica,sans-serif;white-space:normal;overflow-wrap:anywhere;border-width:2px}
.root-node span.node-name{font:inherit;color:var(--ink);margin:0;display:block}
.root-node span.node-status{font:13px/1.5 Arial,Helvetica,sans-serif;color:#53584f;margin-top:8px;clear:both}
.node-portrait{float:left;width:44px;height:56px;object-fit:cover;border-radius:50%;margin:0 12px 6px 0;border:1px solid #b7a582}
.person .portrait{float:none;display:block;margin:0 0 20px;width:120px;height:155px}
.person h2{clear:both;line-height:1.3;letter-spacing:0;overflow-wrap:break-word}
.person .small,.person .credits,.graph-status,.roots-tools label{font-size:14px;line-height:1.65}
.roots-tools input,.roots-tools select,.roots-tools button,.root-shortcuts button,.person button,.search-results button{font-size:16px;line-height:1.5}
.root-shortcuts{gap:12px;align-items:stretch}
.root-shortcuts button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);padding:10px 14px;text-decoration:none;min-width:130px}
.root-shortcuts button img{width:38px;height:48px;object-fit:cover;border-radius:50%;border:1px solid #b7a582}
.root-shortcuts button:hover{background:#efeee6}
.roots-notes p{font-size:16px}
.persian-name{font:24px/1.8 Tahoma,Arial,sans-serif;color:var(--accent);text-align:left}
.contribution{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.contribution a{font:14px Arial,sans-serif}
.connection-path{border-top:1px solid var(--line);padding:28px 0 35px}.connection-path h2{font-size:30px}.connection-path ol{columns:3;column-gap:40px;padding-left:24px;max-height:460px;overflow:auto}.connection-path li{break-inside:avoid;padding:5px 0;font-size:14px}.connection-path button{border:0;background:none;color:var(--blue);font:15px/1.6 Arial,sans-serif;text-align:left;cursor:pointer;padding:5px}.connection-path button[aria-current]{font-weight:bold;text-decoration:underline}@media(max-width:800px){.connection-path ol{columns:2}}@media(max-width:560px){.connection-path ol{columns:1}}
/* Keep the wide genealogy inside its own scrollable viewport. */
@media screen and (max-width: 600px) {
  .roots-intro { display: block; }
  .roots-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .roots-tools label { grid-column: 1 / -1; min-width: 0; }
  .roots-tools input, .roots-tools select { width: 100%; min-width: 0; max-width: 100%; }
  .roots-tools button, .person button, .connection-path button { min-height: 44px; }
  .root-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .root-shortcuts button { min-width: 0; padding: 10px; overflow-wrap: anywhere; font-size: 14px; }
  .root-shortcuts button img { flex-shrink: 0; width: 30px; height: 40px; }
  .roots-workspace { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .graph-viewport { min-width: 0; max-width: 100%; height: 360px; height: min(55svh, 430px); }
  .person { font-size: 18px; }
  .connection-path ol { columns: 1; max-height: none; overflow: visible; }
  .search-results { max-height: 300px; }
}