:root{--trail:#2f7d52}
.only-tight{display:none}
.stepper{display:inline-flex;align-items:center;height:28px;border:1px solid var(--edge);background:var(--field)}
.stepper button{width:26px;height:26px;padding:0;border:0;background:none;color:var(--muted2);font-size:14px;line-height:1;cursor:pointer}
.stepper button:hover{color:var(--accent)}
.stepper button:disabled,.stepper button:disabled:hover{color:var(--pale);cursor:default}
.stepper b{min-width:24px;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:400}

.treewrap{display:flex;height:calc(100vh - 121px);min-height:460px}
.stage{flex:1;position:relative;overflow:hidden;cursor:grab;background:var(--canvas);touch-action:none}
.stage.drag{cursor:grabbing}
.stage svg#tree{display:block;width:100%;height:100%;user-select:none}
#viewport{transition:transform .55s cubic-bezier(.22,.61,.36,1)}

.stagehint{
  position:absolute;left:14px;bottom:20px;display:none;padding:3px 7px;
  font-family:var(--mono);font-size:10px;color:var(--faint2);
  background:var(--paper);border:1px solid var(--line2);
}

.trail{

  position:absolute;left:14px;top:12px;z-index:3;width:max-content;max-width:calc(100% - 28px);
  display:flex;align-items:center;gap:5px;padding:4px 6px;
  overflow-x:auto;scrollbar-width:none;touch-action:pan-x;
  background:var(--paper);border:1px solid var(--line2);
}
.trail::-webkit-scrollbar{display:none}
.trail .tnote{font-size:11.5px;color:var(--faint);white-space:nowrap}
.trail .tchip,.trail .tmore,.trail .tset{
  flex:0 0 auto;padding:2px 7px;border:1px solid var(--line);background:var(--field);
  font-family:var(--narrow);font-size:12.5px;color:var(--text);cursor:pointer;white-space:nowrap;
}
.trail .tchip:hover,.trail .tmore:hover,.trail .tset:hover{border-color:var(--accent);color:var(--accent)}
.trail .tchip.you{border-color:var(--edge);font-weight:700}

.trail .tchip.cur{border-color:var(--trail);background:var(--depth);color:var(--trail);cursor:default}
.trail .tmore,.trail .tset{color:var(--muted2)}
.trail .tsep{flex:0 0 auto;font-size:11px;color:var(--pale)}
.zoomfab{position:absolute;right:14px;bottom:20px;display:none;flex-direction:column;border:1px solid var(--edge);background:var(--field)}
.zoomfab button{width:32px;height:32px;border:0;background:none;color:var(--muted2);font-size:16px;cursor:pointer}
.zoomfab button+button{border-top:1px solid var(--line2)}

.card{cursor:pointer;transform-box:view-box;transform-origin:0 0;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .35s ease}
.card .box{fill:#fdfaf4;stroke:#c9bda9;stroke-width:1}
.card .frame{display:none;fill:none;stroke:var(--accent);stroke-width:1.6}
.card .stripe{stroke:none;fill:var(--nosex)}
.card.male .stripe{fill:var(--male)}
.card.female .stripe{fill:var(--female)}

.card .ph{pointer-events:none}
.card.dead .ph{opacity:.82;filter:grayscale(.25)}
.card text{font-family:var(--narrow)}
.card .nm{font-size:14px;fill:var(--ink)}
.card .sn{font-size:13.5px;fill:var(--ink)}
.card .yr{font-size:11px;fill:var(--faint)}
.card .bd{font-size:10px;fill:var(--accent)}
.card.dead .box{fill:#f6f1e6;stroke:#cdbfa6}
.card.dead .nm,.card.dead .sn{fill:var(--muted)}
.card.dead .yr{fill:var(--faint2)}

.card .mk{display:none}
.card .mk.on{display:block;cursor:pointer}
.card .mk .hit{fill:transparent}
.card .mk .chev{fill:none;stroke:var(--faint2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card .mk.on:hover .chev{stroke:var(--accent)}
.card.dead .mk .chev{stroke:var(--pale)}

.stage.far .card .mk .chev{stroke-width:2.6;stroke:var(--faint)}

.card.onpath .box{stroke:var(--trail);stroke-width:2}
.card.onpath .frame{display:block;stroke:var(--trail);stroke-width:1.4;opacity:.45}
.card.onpath.focus .frame{stroke:var(--trail);opacity:1;stroke-width:1.8}
.card.focus .frame{display:block}
.card.focus .box{stroke:var(--accent)}
.card.focus .nm{font-size:15px;font-weight:700}
.card.focus .sn{font-size:14px;font-weight:700}
.card.noname .box{stroke-dasharray:4 3}
.card.noname .nm{font-size:13.5px;font-style:italic;fill:var(--faint2)}
.card.noname .yr{fill:var(--pale)}
.card.noname .stripe{fill:var(--nosex)}

.card.guest .box{fill:#f8f5ef;stroke:#a89a80;stroke-dasharray:6 3}
.card.guest .nm,.card.guest .sn{fill:var(--muted)}
.card.guest .bd{fill:var(--faint2)}
.card.deck .box{fill:#eee5d7;stroke:#b8ab92}
.card.deck .nm{font-size:13px;fill:var(--muted)}
.card.deck .sn{font-size:12.5px;fill:var(--muted)}
.card.deck .yr{font-size:10.5px;fill:var(--faint2)}
.stage.far .card .sn,.stage.far .card .yr,.stage.far .card .bd{display:none}

.edge{fill:none;stroke:var(--tree);stroke-width:1.4}
.edge.divorce{stroke-dasharray:6 5}
.edge.unknownEnd{stroke-dasharray:1.5 4}
.edge.deckline{stroke:#b6a98f;stroke-width:1.2;stroke-dasharray:5 4}
.link-birth{fill:none;stroke:var(--tree);stroke-width:1.4}
.link-adopted{fill:none;stroke:var(--tree);stroke-width:1.4;stroke-dasharray:7 5}
.link-step{fill:none;stroke:var(--tree);stroke-width:1.4;stroke-dasharray:1.5 4;stroke-linecap:round}
.link-recognized{fill:none;stroke:var(--tree);stroke-width:1.4;stroke-dasharray:10 3 2 3}
.link-half{fill:none;stroke:var(--tree);stroke-width:1.4;stroke-dasharray:4 4;opacity:.7}
.deathmark{stroke:var(--tree);stroke-width:1.4}
#edges{transition:opacity .3s ease}

#trail .trailline{
  fill:none;stroke:var(--trail);stroke-width:3;opacity:.9;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}

#trail .trailline.jump{stroke-dasharray:7 5;opacity:.6}
.stage.far #trail .trailline{stroke-width:3.6}

.side{
  width:359px;flex:none;display:flex;flex-direction:column;overflow:auto;
  background:var(--panel);border-left:1px solid var(--line);
}
.side .grip{display:none}
.side-in{padding:22px 24px 28px}
.sidehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.side .nm{font-family:var(--serif);font-size:24px;line-height:1.15}

.side .nm a{
  color:inherit;text-decoration:underline;text-decoration-color:var(--edge);
  text-decoration-thickness:1px;text-underline-offset:5px;
}
.side .nm a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.side .yr{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:6px}
.side .counters{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--faint2)}
.sec-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--line2)}

.side .sec{display:flex;align-items:baseline;gap:8px}

.side .sec::before{margin-right:0}
.sec .addhere{
  flex:none;margin-left:auto;padding:3px 9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);cursor:pointer;
  border:1px dashed var(--edge);background:var(--field);
}
.sec .addhere:hover{border-style:solid;border-color:var(--accent)}
.rowlist{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.rowlist .between{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px}

.rowlist .rowsel{flex:1 1 100%;display:flex;gap:8px;justify-content:flex-end}
.unisel{max-width:100%}
.rowlist .sub{font-family:var(--mono);font-size:11.5px;color:var(--faint2);flex:none}
.urow{display:flex;gap:11px;align-items:flex-start}
.urow.off{opacity:.7}
.urow svg{flex:none;margin-top:7px}
.urow .sub{font-family:var(--mono);font-size:11px;color:var(--faint2);margin-top:3px}
.side .note{font-size:13.5px;line-height:1.55;color:var(--text)}
.side .pagelink{margin-top:16px;font-size:12.5px}

.side .helplink{margin:22px 0 4px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}
.side .helplink a{color:var(--muted)}
.side .helplink a:hover{color:var(--accent)}
.side .muted{color:var(--faint)}
.side .noname{font-style:italic;color:var(--faint)}
.side .badge{font-size:11px;color:var(--accent)}
.side .glyph{stroke:var(--tree);stroke-width:1.4;fill:none}
.side .glyph.divorce{stroke-dasharray:5 4}
.side .glyph.unknownEnd{stroke-dasharray:1.5 4}

.edit{display:flex;flex-direction:column;gap:14px}
.edit .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.edit label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11.5px;color:var(--faint)}
.edit input,.edit textarea{
  width:100%;height:34px;padding:0 10px;font-size:13.5px;color:var(--ink);
  border:1px solid var(--edge);background:var(--field);
}
.edit input:disabled{background:#f2ebdd;color:#b0a693}
.edit textarea{height:76px;padding:9px 10px;line-height:1.5;resize:vertical}
.edit .block{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line2)}
.seg{display:flex;height:34px;font-size:12.5px;border:1px solid var(--edge);background:var(--field)}
.seg button{flex:1;padding:0;border:0;background:none;color:var(--muted2);font-size:12.5px;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--paper)}
.precs{display:flex;gap:6px;font-size:12px}
.precs button{padding:4px 9px;border:1px solid var(--edge);background:var(--field);color:var(--muted2);cursor:pointer}
.precs button.on{border-color:var(--accent);background:var(--accent);color:var(--paper)}
.dates{display:flex;gap:8px;align-items:center}
.dates input.y{width:64px}
.dates input.md{width:52px;font-family:var(--mono)}
.hint{font-size:11.5px;line-height:1.5;color:var(--pale)}
.addbtns{display:flex;flex-direction:column;gap:8px}
.sec-block .addbtns{margin-top:10px}
.addbtns button{
  height:36px;padding:0 12px;text-align:left;font-size:13.5px;color:var(--ink);cursor:pointer;
  border:1px dashed var(--tree);background:var(--field);
}
.addbtns button:hover{border-color:var(--accent);color:var(--accent)}
.edit .acts{display:flex;gap:10px}
.edit .acts .pri{flex:1}
.msg{min-height:16px;font-size:12.5px;color:var(--accent)}
.sheet-tabs{display:none;gap:6px;margin-top:14px;border-bottom:1px solid var(--line2);font-size:12.5px}
.sheet-tabs button{padding:0 10px 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted2);cursor:pointer}
.sheet-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}

.sidephoto{flex:none;display:block;width:64px;height:64px;overflow:hidden;border:1px solid var(--line);background:var(--field)}
.sidephoto img{width:100%;height:100%;object-fit:cover;display:block}
img.sidephoto.big{width:120px;height:120px;object-fit:cover;margin-bottom:10px}

.kindsel{
  flex:none;height:24px;padding:0 4px;font-size:11.5px;color:var(--muted2);
  border:1px solid var(--line2);background:var(--field);
}
.kindsel:hover{border-color:var(--edge)}
.urow .uedit{flex:none;margin-left:auto;align-self:center}
.uform{margin:0}
.uformhead{font-size:13.5px;margin-bottom:4px}
.uform input{width:100%}
.uform .dates input.y{width:64px}

.relterm{font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--ink)}
.relpick{display:flex;flex-direction:column;gap:5px;margin-top:16px;font-size:11.5px;color:var(--faint)}
.relpick select{height:32px;padding:0 8px;font-size:13px;border:1px solid var(--edge);background:var(--field);color:var(--ink)}
.sec-block[data-sec="rel"] .sub{font-size:12.5px;color:var(--faint2);margin-top:6px}

.printbusy{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;
  font-size:12.5px;color:var(--muted2);
}
.printbusy:empty{display:none}
.printbusy:not(:empty){padding:5px 12px;background:var(--panel);border:1px solid var(--line)}
.printarea{display:none}

#stagebg{opacity:.19;pointer-events:none}

@media (min-width:761px){
  .side-in::before{
    content:"";display:block;height:15px;margin:-10px 0 12px;
    background:var(--orn-band) repeat-x center;opacity:.62;
  }
}

.card .box{transition:stroke .09s ease-out}
.card:hover .box{stroke:var(--accent)}
.zoomfab button,.sheet-x,.seg button,.precs button,.kindsel,.addbtns button,.sec .addhere,
.sheet-tabs button,.stepper button{transition:border-color .09s ease-out,background-color .09s ease-out,color .09s ease-out}
.zoomfab button:hover{color:var(--accent)}
.zoomfab button:active,.stepper button:active{transform:translateY(1px)}
.seg button:hover:not(.on){color:var(--accent)}
.precs button:hover:not(.on){border-color:var(--accent);color:var(--accent)}
.sheet-tabs button:hover:not(.on){color:var(--ink)}

@media print{
  .top,.bottom,.side,.banner,.zoomfab,.stagehint,.printbusy,.treewrap{display:none !important}
  .page{padding:0;margin:0}
  .printarea{display:block}
  .printsheet h1{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 10px}
  .printsheet svg{width:100%;height:auto;display:block}
  .printline{page-break-before:always;padding-top:10mm}
  .printline h2{font-family:var(--serif);font-size:20px;font-weight:400;margin:0 0 12px}
  .printline ol{margin:0;padding-left:26px;font-size:13px;line-height:1.9}
  .printline i{font-style:normal;color:#666}
  @page{margin:12mm}
}

@media (min-width:761px) and (max-height:560px){
  .treewrap{min-height:0}
}

@media (max-width:760px){
  body.treepage{height:100dvh;overflow:hidden;overscroll-behavior:none}
  .treepage .page{flex:1 1 auto;min-height:0}
  .treepage .bottom{display:none}

  .only-tight{display:inline-flex}
  .stepper{height:40px}
  .stepper button{width:36px;height:36px;font-size:16px}

  .treewrap{position:relative;overflow:hidden;flex:1 1 auto;flex-direction:column;height:auto;min-height:0}
  .stage{flex:1 1 auto;height:auto;min-height:150px}
  .stagehint{display:block}
  .zoomfab{display:flex}
  .zoomfab button{width:40px;height:40px;font-size:18px}

  .side{
    position:absolute;left:0;right:0;bottom:0;z-index:8;
    width:100%;flex:none;max-height:74vh;overflow:hidden;
    border-left:0;border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(60,45,25,.16);
    transform:translateY(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
    touch-action:pan-y;
  }
  .side.open{transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){ .side{transition:none} }
  .sheet-x{
    position:absolute;right:8px;top:4px;z-index:2;
    width:40px;height:40px;align-items:center;justify-content:center;
    border:0;background:none;color:var(--faint);font-size:26px;line-height:1;cursor:pointer;
  }
  .sheet-x:hover{color:var(--ink)}
  .side .grip{display:block;flex:none;height:26px;position:relative;cursor:grab;touch-action:none}
  .side .grip::before{
    content:"";position:absolute;left:50%;top:11px;width:44px;height:4px;margin-left:-22px;
    border-radius:2px;background:#d5c8b0;
  }
  .side-in{padding:8px 18px 26px;overflow:auto}
  .side .nm{font-size:22px}
  .side .btn.sm{height:40px}
  .edit input,.edit textarea{font-size:15px}
  .edit input{height:40px}
  .seg{height:40px}
  .precs button{padding:9px 12px}
  .addbtns button{height:44px}
  .sec .addhere{padding:12px 14px;font-size:11px}
  .kindsel{height:32px}
  .sheet-tabs{display:flex;overflow-x:auto}
  .sheet-tabs button{padding:0 12px 12px;min-height:40px;white-space:nowrap}
  .side[data-tab] .sec-block{display:none;margin-top:14px;padding-top:14px;border-top:0}
  .side[data-tab="parents"] .sec-block[data-sec="parents"],
  .side[data-tab="unions"] .sec-block[data-sec="unions"],
  .side[data-tab="kids"] .sec-block[data-sec="kids"],
  .side[data-tab="rel"] .sec-block[data-sec="rel"],
  .side[data-tab="note"] .sec-block[data-sec="note"],
  .side[data-tab] .sec-block[data-sec="edit"]{display:block}
}

#t-seams .umrow{padding:2px 2px 8px}
#t-seams .umcheck{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13.5px}
#t-seams .umcheck input{margin:0;flex:none}
.usermenu #t-seams .chip{width:auto;height:28px;margin:0;padding:0 10px;font-size:12.5px}