/* VysyaFamily - the classic Tree and the mobile card view (14, 112, 148, 149).

   Two layouts, one breakpoint. Above 760px the pedigree is a stack of CSS grid
   rows, one per generation, with an SVG overlay drawing the connectors. At or
   below 760px the pedigree is not shown at all and the card view takes over -
   a phone gets relationship cards, never a squeezed tree.

   Everything is built from the app.css tokens; no new raw colours. */

/* ------------------------------------------------------------------ header */
.tree-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tree-out{justify-content:flex-end}

/* ---------------------------------------------------------------- controls
   A compact control row: the selects size to their content instead of
   inheriting the full-width input rule from app.css. */
.tree-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px}
.tree-bar label{margin:0 0 4px}
.tfield{display:flex;flex-direction:column;min-width:0}
.tfield select{width:auto;min-width:170px;max-width:320px}
.tfield.narrow select{min-width:74px;width:74px}
.tfield.grow{flex:1 1 240px;min-width:200px}
.tree-note{line-height:1.5;margin-bottom:4px}
.tree-status{font-size:12px;color:var(--muted);margin:12px 2px 4px}
.tree-foot{margin-top:20px;line-height:1.6}

/* --------------------------------------------------------------- the canvas
   The SVG connector layer is absolutely positioned INSIDE .tree-canvas, which
   is the positioning context. It must never contribute to the flow height:
   position:absolute + inset:0 keeps it exactly the size of the rows it draws
   over, so it can never open a dead zone above the tree. */
.tree-scroll{overflow-x:auto;overflow-y:visible;padding-bottom:6px}
.tree-canvas{position:relative;min-width:100%;width:max-content;
  margin:0 auto;padding:6px 4px 4px}
.tree-links{position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0}
.tree-links path{fill:none;stroke:var(--line);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.tree-links path.l-parent{stroke:color-mix(in srgb,var(--gold) 46%,var(--line))}
.tree-links path.l-spouse{stroke:color-mix(in srgb,var(--rose) 52%,var(--line));
  stroke-width:2.2}
.tree-links path.l-sibling{stroke:var(--line);stroke-dasharray:2 5}
.tree-links path.s-soft{opacity:.5;stroke-dasharray:4 5}
.tree-links path.s-disputed{stroke:var(--danger);stroke-dasharray:6 4}

.tree-rows{position:relative;z-index:1;display:grid;gap:16px}

/* ---------------------------------------------------- one generation = one row */
.trow{break-inside:avoid;page-break-inside:avoid}
.trow-label{display:flex;align-items:baseline;gap:10px;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  margin:0 0 12px;font-weight:600}
.trow-label::after{content:"";flex:1;height:1px;background:var(--line)}
.trow-count{font-size:10.5px;letter-spacing:.06em;color:var(--dim);
  text-transform:none}
.trow-cells{display:grid;grid-auto-flow:column;grid-auto-columns:166px;
  justify-content:center;gap:22px;align-items:start}

.tcell{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0;padding:2px}

/* The garland hangs well outside the portrait disc: the sprite viewBox is
   200x224 around a disc of r=64 at (100,100), so the pendant reaches about half
   a portrait diameter BELOW the disc and a quarter above it. .tnode reserves
   exactly that room, in proportion to --tp, and only when a garland is drawn -
   a living person would otherwise get a floating caption. */
.tcell .tnode{position:relative;padding:4px 0 9px}
.tcell .tnode.garlanded{padding:calc(var(--tp,88px)*.30) 0 calc(var(--tp,88px)*.53)}
.tcell.focus .pnode::after{content:"";position:absolute;inset:-13px;
  border-radius:50%;border:1px dashed rgba(240,180,41,.55);pointer-events:none}
.tcell .pnode{cursor:pointer}
.tcell .pnode:focus-visible{outline:2px solid var(--gold);outline-offset:6px;
  border-radius:50%}
.tcap{display:flex;flex-direction:column;align-items:center;gap:3px;
  max-width:162px;margin-top:2px}
.tname{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow-wrap:anywhere}
.tname:hover{color:var(--gold)}
.tyears{font-size:11px;color:var(--muted);line-height:1.35}
.tflag{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}

/* -------------------------------------------------------- 149: branch chips */
.tchips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  margin-top:7px;width:100%}
.tchip{background:var(--gold-soft);border:1px solid rgba(240,180,41,.42);
  color:var(--gold);border-radius:20px;padding:2px 10px;cursor:pointer;
  font:600 10.5px var(--font);white-space:nowrap}
.tchip:hover{filter:brightness(1.12)}
.tchip.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.tchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------ empty family */
.tree-empty{text-align:center;border:1px dashed var(--line);border-radius:var(--r);
  padding:44px 26px;max-width:640px;margin:22px auto}
.tree-empty-mark{font-size:34px;color:var(--gold);margin-bottom:10px}
.tree-empty h2{margin-bottom:10px}
.tree-empty p{margin:0 auto 18px;max-width:520px}

/* ------------------------------------------------------- 112: the card view */
.tree-cards{display:none;gap:12px}
.tcard{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px}
.tcard h3{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tcard-n{font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.tcard-empty{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
.tcard-focus{display:flex;gap:14px;align-items:center}
.tcard-face{flex:0 0 auto;padding:6px 2px}
.tcard-face.garlanded{padding:calc(var(--tp,88px)*.30) calc(var(--tp,88px)*.30)
  calc(var(--tp,88px)*.53)}
.tcard-meta{min-width:0;display:flex;flex-direction:column;gap:5px}
.tcard-meta h2{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.tcard-links{margin-top:4px}
.tcard-row{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--line)}
.tcard-row:first-of-type{border-top:0}
.tcard-rowface{flex:0 0 auto;padding:4px 2px}
.tcard-rowface.garlanded{padding:calc(var(--tp,46px)*.30) calc(var(--tp,46px)*.30)
  calc(var(--tp,46px)*.53)}
.tcard-btn{flex:1 1 auto;min-width:0;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  background:transparent;border:0;padding:6px 2px;cursor:pointer;text-align:left;
  color:var(--ink);font:14px var(--font)}
.tcard-name{grid-column:1;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.tcard-years{grid-column:1;font-size:11.5px;color:var(--muted)}
.tcard-go{grid-column:2;grid-row:1 / span 2;font-size:20px;color:var(--dim)}
.tcard-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;
  border-radius:var(--r-sm)}
.tcard-profile{flex:0 0 auto;font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.tcard-profile:hover{color:var(--gold);text-decoration:none}

/* The compact garland only ever paints in print; the screen keeps the full one. */
.pnode svg.garland use.g-compact{display:none}

@media (max-width:760px){
  .tree-scroll{display:none}
  .tree-cards{display:grid}
  .tree-bar{padding:10px 12px;gap:10px}
  .tfield.narrow{display:none}          /* depth is a pedigree control only */
  .tfield select{min-width:0;width:100%;max-width:none}
  .tfield{flex:1 1 100%}
  .tree-head{align-items:flex-start}
  .tree-out{justify-content:flex-start}
}

/* ------------------------------------------------------------------- print
   A clean black-on-white pedigree: no chrome, no controls, ink-weight lines,
   the compact garland instead of the full one, and no generation split across
   a page break. */
@media print{
  @page{margin:14mm}
  body{background:#fff!important;color:#000!important}
  /* Only chrome OUTSIDE .tree-canvas may be hidden. The connector overlay is
     measured from the laid-out cells, so anything that changed a cell's height
     for print would leave every line pointing at where a node used to be. The
     chips therefore stay - printed as plain ink instead of removed. */
  .topbar,.foot,.fnav,.tree-bar,.tree-out,.tree-status,.tree-cards,
  .tree-foot,#vf-toasts{display:none!important}
  .wrap{padding:0;max-width:none}
  .tree-scroll{display:block;overflow:visible}
  .tree-canvas{width:auto;padding:0}
  .tchip{background:none!important;border-color:#999!important;color:#333!important}
  .trow{break-inside:avoid;page-break-inside:avoid}
  .trow-label{color:#000}
  .trow-label::after{background:#999}
  .trow-count{color:#444}
  .tname,.tcell.focus .tname{color:#000}
  .tyears,.tflag{color:#333}
  .memorial-badge{color:#000;border-color:#999;background:transparent}
  .tree-links path{stroke:#000!important;stroke-width:1.1;opacity:1}
  .tree-links path.l-sibling{stroke-dasharray:2 4}
  .pnode .halo{display:none}
  .pnode .verif{border-color:#000!important;box-shadow:none}
  .pnode .portrait{background:#fff;color:#000;box-shadow:none;
    border:1px solid #000;filter:none!important}
  .pnode.deceased .portrait{filter:none!important}
  .pnode svg.garland{animation:none!important}
  .pnode svg.garland use.g-full{display:none}
  .pnode svg.garland use.g-compact{display:inline}
  .tcell.focus .pnode::after{border-color:#000}
}