/* ============================================================
   tree.css — Family tree + Connect, for tuthillfamilytree.com
   Extends the Darkroom system (look.css). Adds nothing global:
   every selector is namespaced .tr-* / .tp / [data-tree].
   Tokens are read from look.css with literal fallbacks so this
   file also works in the standalone demo.
   ============================================================ */

[data-tree]{
  --t-page:var(--ink-000,#07070A);
  --t-card:var(--ink-050,#0E0E13);
  --t-well:var(--ink-100,#16161D);
  --t-hair:var(--ink-200,#1E1E27);
  --t-line:var(--line,#2A2A35);
  --t-line2:var(--line2,#3A3A48);
  --t-mat:var(--mat,#FFFFFF);
  --t-fg:var(--fg,#F4F3F7);
  --t-mut:var(--mut,#A9A5B4);
  --t-mut2:var(--mut2,#8B8496);
  --t-mut3:var(--mut3,#565061);
  --t-amber:var(--amber,#FFB253);
  --t-amber-hi:var(--amber-hi,#FFD3A0);
  --t-amber-ink:var(--amber-ink,#120C05);
  --t-rose:var(--rose,#FF6E8A);
  --t-ok:var(--ok,#48D18A);
  --t-r-card:var(--r-card,14px);
  --t-r-panel:var(--r-panel,22px);
  --t-r-pill:var(--r-pill,999px);
  --t-r-print:var(--r-print,2px);
  --t-sh-print:var(--sh-print,0 24px 60px rgba(0,0,0,.6));
  --t-sh-card:var(--sh-card,0 18px 44px rgba(0,0,0,.55));
  --t-focus:var(--ring-focus,0 0 0 3px rgba(255,178,83,.30));
  --t-tap:var(--t-tap,120ms);
  --t-quick:var(--t-quick,180ms);
  --t-base:var(--t-base,260ms);
  --t-slow:var(--t-slow,420ms);
  --t-develop:var(--t-develop,900ms);
  --e-settle:var(--e-settle,cubic-bezier(.2,.8,.2,1));
  --e-develop:var(--e-develop,cubic-bezier(.16,1,.3,1));
  --e-pop:var(--e-pop,cubic-bezier(.34,1.56,.64,1));
  /* geometry — tree.js reads these back from the DOM */
  --node-w:132px;
  --node-h:176px;
  --serif:"Bodoni Moda",Didot,Georgia,serif;
  --ui:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  position:relative;
  display:block;
  color:var(--t-fg);
  font-family:var(--ui);
}

/* ---------- control bar -------------------------------------------- */
.tr-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px;
  background:var(--t-card);
  border:1px solid var(--t-hair);
  border-radius:var(--t-r-panel);
  margin-bottom:14px;
}
.tr-bar__spacer{flex:1 1 24px}
.tr-btn{
  font:500 14px/1 var(--ui); letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:var(--t-r-pill);
  background:transparent; color:var(--t-fg);
  border:1px solid var(--t-line2); cursor:pointer;
  transition:background var(--t-tap) var(--e-settle),
             border-color var(--t-tap) var(--e-settle),
             transform var(--t-tap) var(--e-settle),
             color var(--t-tap) var(--e-settle);
}
.tr-btn:hover{background:var(--t-well); border-color:var(--t-mut3)}
.tr-btn:active{transform:translateY(1px)}
.tr-btn:focus-visible{outline:none; box-shadow:var(--t-focus)}
.tr-btn--go{
  background:var(--t-amber); color:var(--t-amber-ink);
  border-color:transparent; font-weight:600;
  box-shadow:var(--sh-amber,0 8px 24px rgba(255,178,83,.22));
}
.tr-btn--go:hover{background:var(--t-amber-hi)}
.tr-btn--quiet{border-color:var(--t-hair); color:var(--t-mut)}
.tr-btn--icon{padding:10px 12px; font-family:var(--mono); font-size:14px}
.tr-btn--danger{border-color:rgba(255,110,138,.4); color:var(--t-rose)}
.tr-btn--danger:hover{background:rgba(255,110,138,.08); border-color:var(--t-rose)}

.tr-chips{display:flex; gap:6px; flex-wrap:wrap}
.tr-chip{
  font:500 12.5px/1 var(--ui);
  padding:8px 13px; border-radius:var(--t-r-pill);
  background:var(--t-well); color:var(--t-mut);
  border:1px solid transparent; cursor:pointer;
  transition:color var(--t-tap) var(--e-settle),
             background var(--t-tap) var(--e-settle),
             border-color var(--t-tap) var(--e-settle);
}
.tr-chip:hover{color:var(--t-fg); border-color:var(--t-line)}
.tr-chip[aria-pressed="true"]{
  background:rgba(255,178,83,.12); color:var(--t-amber-hi);
  border-color:rgba(255,178,83,.35);
}
.tr-chip:focus-visible{outline:none; box-shadow:var(--t-focus)}

.tr-meta{
  font:400 12px/1.5 var(--mono); letter-spacing:.06em;
  color:var(--t-mut3); text-transform:uppercase;
}
.tr-key{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tr-key span{
  display:inline-flex; align-items:center; gap:7px;
  font:400 11.5px/1 var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--t-mut2);
}
.tr-key i{display:block; width:24px; height:0; border-top:2px solid var(--t-amber)}
.tr-key .k-div{border-top-style:dashed}
.tr-key .k-par{border-top:1px solid var(--t-line2); width:24px}
.tr-key .k-wid{position:relative}
.tr-key .k-wid::after{
  content:""; position:absolute; left:9px; top:-3px;
  width:5px; height:5px; border-radius:50%; background:var(--t-amber);
}
.tr-key .k-prt{border-top-style:dotted; border-top-width:2.5px}

/* ---------- stage ---------------------------------------------------- */
.tr-stage{
  position:relative; overflow:hidden;
  height:clamp(520px,72vh,900px);
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(255,178,83,.055), transparent 70%),
    var(--t-page);
  border:1px solid var(--t-hair);
  border-radius:var(--t-r-panel);
  cursor:grab; touch-action:none;
  contain:paint;
}
.tr-stage.is-panning{cursor:grabbing}
.tr-stage::after{ /* vignette, keeps the eye centre-stage */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px 40px rgba(7,7,10,.85);
  border-radius:inherit;
}
.tr-canvas{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  will-change:transform;
}
.tr-canvas.is-gliding{transition:transform 620ms var(--e-develop)}

/* ---------- rules (connectors) --------------------------------------- */
.tr-rules{position:absolute; top:0; left:0; overflow:visible; pointer-events:none}
.tr-rules path,.tr-rules line{pointer-events:stroke}
.tr-rule{
  fill:none; stroke:var(--t-line2); stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke var(--t-quick) var(--e-settle),
             stroke-width var(--t-quick) var(--e-settle),
             opacity var(--t-quick) var(--e-settle);
}
.tr-rule--hit{stroke:transparent; stroke-width:14; cursor:pointer}
.tr-rule--married{stroke:var(--t-amber); stroke-width:2}
.tr-rule--widowed{stroke:var(--t-amber); stroke-width:2}
.tr-rule--divorced{stroke:var(--t-amber); stroke-width:2; stroke-dasharray:7 6; opacity:.78}
.tr-rule--partner{stroke:var(--t-amber); stroke-width:2.5; stroke-dasharray:1 7; opacity:.8}
.tr-rule--second{stroke-width:1.75; opacity:.62}
.tr-knot{fill:var(--t-amber); opacity:.95}
.tr-knot--open{fill:var(--t-page); stroke:var(--t-amber); stroke-width:1.5}

/* draw-in on load */
.tr-rules.is-drawing .tr-rule{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
}
.tr-rules.is-drawn .tr-rule{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 760ms var(--e-develop) var(--delay,0ms),
             stroke var(--t-quick) var(--e-settle),
             opacity var(--t-quick) var(--e-settle);
}
.tr-rules.is-drawn .tr-rule--divorced{stroke-dasharray:7 6}
.tr-rules.is-drawn .tr-rule--partner{stroke-dasharray:1 7}
.tr-rules.is-drawn .tr-rule--hit{stroke-dasharray:none}

/* lit / dimmed */
[data-tree].is-focusing .tr-rule{opacity:.14}
[data-tree].is-focusing .tr-rule.is-lit{opacity:1; stroke:var(--t-amber-hi); stroke-width:2.5}
[data-tree].is-focusing .tr-rule--hit{opacity:0}
[data-tree].is-focusing .tp{opacity:.26; filter:saturate(.5)}
[data-tree].is-focusing .tp.is-lit{opacity:1; filter:none}
.tp,.tr-rule{transition-property:opacity,transform,filter,box-shadow,stroke,stroke-width}

/* ---------- person card (the print) ----------------------------------- */
.tp{
  /* positioned with left/top, not a transform: Chromium/Edge drop pointerdown on transformed buttons inside the scaled
     canvas (hover still worked, clicks landed on the canvas). Measured 2026-09-20; left/top hit-tests correctly. */
  position:absolute; width:var(--node-w);
  left:var(--x); top:var(--y);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:0; background:none; border:0; text-align:center;
  cursor:pointer; color:inherit;
  transition:opacity var(--t-base) var(--e-settle), filter var(--t-base) var(--e-settle);
}
.tp:focus-visible{outline:none}
.tp:focus-visible .tp-mat{box-shadow:var(--t-focus),var(--t-sh-print)}

.tp-mat{
  position:relative; width:var(--node-w); height:112px;
  background:var(--t-mat); border-radius:var(--t-r-print);
  padding:7px 7px 7px; box-shadow:var(--t-sh-print);
  transition:transform var(--t-base) var(--e-settle),
             box-shadow var(--t-base) var(--e-settle);
}
.tp-mat::after{ /* print sheen */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.5),transparent 32%);
  opacity:.5; pointer-events:none;
}
.tp-img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:1px;
  background:var(--t-well); filter:contrast(1.04) saturate(.94);
}
.tp-mono{ /* shown when there is no scan for a photographed face yet */
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:1px;
  font:500 26px/1 var(--serif); letter-spacing:.02em;
  color:#2A2630;
  background:linear-gradient(160deg,#EDE7DD,#CFC6BA 60%,#B9AFA3);
}
.tp:hover .tp-mat{transform:translateY(-6px) rotate(-.4deg); box-shadow:var(--sh-print-lg,0 34px 80px rgba(0,0,0,.72))}
.tp.is-sel .tp-mat{box-shadow:0 0 0 2px var(--t-amber),var(--t-sh-print)}

/* never-photographed: a quiet mat, no print */
.tp--ghost .tp-mat{
  background:var(--t-well); box-shadow:none;
  border:1px dashed var(--t-line2); padding:0;
  display:flex; align-items:center; justify-content:center;
}
.tp--ghost .tp-mat::after{display:none}
.tp--ghost .tp-mat b{
  display:block; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--t-mut3);
}
.tp--ghost:hover .tp-mat{transform:translateY(-4px); border-color:var(--t-mut3); box-shadow:none}
.tp--ghost .tp-name{color:var(--t-mut)}

.tp-name{
  margin:0; font:500 14px/1.24 var(--serif);
  letter-spacing:.005em; color:var(--t-fg); text-wrap:balance;
}
.tp--ghost .tp-name{font-family:var(--ui); font-size:12.5px; font-weight:400; line-height:1.3}
.tp-nick{font-style:italic; color:var(--t-amber-hi)}
.tp-years{
  margin:0; font:400 10.5px/1 var(--mono); letter-spacing:.09em;
  color:var(--t-mut3); text-transform:uppercase;
}

/* develop-in, generation by generation */
@keyframes tpDevelop{
  from{opacity:0; transform:translate3d(0,14px,0) scale(.965); filter:blur(6px) brightness(1.5) saturate(.2)}
  60% {filter:blur(0) brightness(1.06) saturate(.9)}
  to  {opacity:1; transform:none; filter:none}
}
[data-tree].is-loading .tp{opacity:0}
[data-tree].is-developing .tp{
  animation:tpDevelop var(--t-develop) var(--e-develop) both;
  animation-delay:calc(var(--gen,0) * 130ms + 260ms);
}

/* ---------- panel (how & why connected) -------------------------------- */
.tr-panel{
  position:absolute; top:14px; right:14px; bottom:14px; width:376px;
  display:flex; flex-direction:column;
  background:color-mix(in srgb,var(--t-card) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid var(--t-line); border-radius:var(--t-r-panel);
  box-shadow:var(--t-sh-card);
  opacity:0; transform:translateX(16px) scale(.99); pointer-events:none;
  transition:opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
  z-index:5;
}
.tr-panel.is-open{opacity:1; transform:none; pointer-events:auto}
.tr-panel__head{
  display:flex; align-items:flex-start; gap:12px;
  padding:20px 20px 14px; border-bottom:1px solid var(--t-hair);
}
.tr-panel__head .tp-mat{width:64px; height:64px; flex:0 0 64px; padding:4px}
.tr-panel__head .tp-mono{font-size:18px}
.tr-eyebrow{
  margin:0 0 6px; font:400 10.5px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-amber);
}
.tr-panel__title{margin:0; font:500 24px/1.12 var(--serif); letter-spacing:.005em}
.tr-panel__sub{margin:6px 0 0; font:400 11.5px/1.4 var(--mono); letter-spacing:.06em; color:var(--t-mut3); text-transform:uppercase}
.tr-x{
  margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:transparent; border:1px solid var(--t-hair); color:var(--t-mut);
  font:400 15px/1 var(--ui); cursor:pointer;
  transition:color var(--t-tap) var(--e-settle), border-color var(--t-tap) var(--e-settle);
}
.tr-x:hover{color:var(--t-fg); border-color:var(--t-line2)}
.tr-panel__body{padding:6px 20px 20px; overflow:auto; flex:1}
.tr-panel__body::-webkit-scrollbar{width:8px}
.tr-panel__body::-webkit-scrollbar-thumb{background:var(--t-hair); border-radius:99px}
.tr-panel__foot{padding:14px 20px; border-top:1px solid var(--t-hair); display:flex; gap:8px}

.tr-note{
  margin:14px 0 4px; font:400 14px/1.6 var(--ui); color:var(--t-mut);
  text-wrap:pretty;
}
.tr-sec{
  margin:18px 0 10px; font:400 10.5px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-mut3);
}
.tr-conn{
  display:block; width:100%; text-align:left;
  padding:13px 14px; margin-bottom:8px;
  background:var(--t-well); border:1px solid transparent;
  border-radius:var(--t-r-card); cursor:pointer; color:inherit;
  transition:border-color var(--t-tap) var(--e-settle),
             background var(--t-tap) var(--e-settle),
             transform var(--t-tap) var(--e-settle);
  animation:connIn var(--t-slow) var(--e-develop) both;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes connIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.tr-conn:hover{border-color:var(--t-line2); transform:translateX(2px)}
.tr-conn:focus-visible{outline:none; box-shadow:var(--t-focus)}
.tr-conn.is-sel{border-color:rgba(255,178,83,.45); background:rgba(255,178,83,.07)}
.tr-conn p{margin:0; font:400 14.5px/1.5 var(--ui); color:var(--t-fg); text-wrap:pretty}
.tr-conn p b{font-weight:600}
.tr-conn .tr-why{
  margin-top:7px; padding-top:7px; border-top:1px solid var(--t-hair);
  font:400 12px/1.45 var(--ui); color:var(--t-mut2);
  display:flex; gap:7px; align-items:baseline;
}
.tr-conn .tr-why em{
  font:400 10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--t-mut3); font-style:normal; flex:0 0 auto;
}
.tr-conn .tr-why.is-empty{color:var(--t-mut3)}
.tr-conn .tr-why.is-empty em{color:var(--t-rose); opacity:.8}

.tr-kindline{display:flex; align-items:center; gap:9px; margin:2px 0 9px}
.tr-kindline i{display:block; width:34px; height:0; border-top:2px solid var(--t-amber)}
.tr-kindline span{font:400 10.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--t-amber)}

/* ---------- Connect flow ---------------------------------------------- */
.tr-connect{
  position:absolute; top:14px; right:14px; bottom:14px; width:392px;
  display:flex; flex-direction:column; z-index:6;
  background:color-mix(in srgb,var(--t-card) 94%,transparent);
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid var(--t-line2); border-radius:var(--t-r-panel);
  box-shadow:var(--t-sh-card);
  opacity:0; transform:translateX(16px) scale(.99); pointer-events:none;
  transition:opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
}
.tr-connect.is-open{opacity:1; transform:none; pointer-events:auto}
.tr-slot{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 12px; border-radius:var(--t-r-card);
  background:var(--t-well); border:1px dashed var(--t-line2);
  color:var(--t-mut); font:400 14px/1.2 var(--ui); cursor:pointer; text-align:left;
  transition:border-color var(--t-tap) var(--e-settle), color var(--t-tap) var(--e-settle);
}
.tr-slot:hover{border-color:var(--t-mut3); color:var(--t-fg)}
.tr-slot:focus-visible{outline:none; box-shadow:var(--t-focus)}
.tr-slot.is-filled{
  border-style:solid; border-color:var(--t-line); color:var(--t-fg);
  font-family:var(--serif); font-size:15px;
  animation:slotFill var(--t-slow) var(--e-pop) both;
}
@keyframes slotFill{from{transform:scale(.97); background:rgba(255,178,83,.14)}to{transform:none}}
.tr-slot.is-active{border-color:var(--t-amber); border-style:solid; box-shadow:var(--t-focus)}
.tr-slot__thumb{
  flex:0 0 38px; width:38px; height:38px; border-radius:3px;
  background:var(--t-mat); padding:3px; box-shadow:0 6px 14px rgba(0,0,0,.5);
}
.tr-slot__thumb.is-ghost{background:var(--t-well); border:1px dashed var(--t-line2); box-shadow:none}
.tr-slot__thumb img,.tr-slot__thumb .tp-mono{width:100%; height:100%; object-fit:cover; border-radius:1px; font-size:13px}
.tr-slot__label{display:block; flex:1; min-width:0}
.tr-slot__label small{display:block; font:400 10px/1.5 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--t-mut3)}
.tr-slot__clear{
  flex:0 0 auto; background:none; border:0; color:var(--t-mut3);
  font:400 16px/1 var(--ui); cursor:pointer; padding:4px;
}
.tr-slot__clear:hover{color:var(--t-rose)}

.tr-swap{
  display:block; margin:8px auto; background:none; border:0; cursor:pointer;
  font:400 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--t-mut3);
}
.tr-swap:hover{color:var(--t-amber)}

.tr-field{margin-top:16px}
.tr-label{
  display:block; margin-bottom:8px;
  font:400 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t-mut3);
}
.tr-input,.tr-area{
  width:100%; padding:11px 13px; background:var(--t-well);
  border:1px solid var(--t-line); border-radius:10px;
  color:var(--t-fg); font:400 14px/1.45 var(--ui);
  transition:border-color var(--t-tap) var(--e-settle), box-shadow var(--t-tap) var(--e-settle);
}
.tr-input::placeholder,.tr-area::placeholder{color:var(--t-mut3)}
.tr-input:focus,.tr-area:focus{outline:none; border-color:var(--t-amber); box-shadow:var(--t-focus)}
.tr-area{resize:vertical; min-height:74px}
.tr-row{display:flex; gap:10px}
.tr-row > *{flex:1; min-width:0}

.tr-kinds{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.tr-kinds button{
  padding:10px 6px; border-radius:10px; cursor:pointer;
  background:var(--t-well); border:1px solid transparent; color:var(--t-mut);
  font:500 12.5px/1.2 var(--ui);
  transition:all var(--t-tap) var(--e-settle);
}
.tr-kinds button:hover{color:var(--t-fg); border-color:var(--t-line)}
.tr-kinds button[aria-pressed="true"]{
  background:rgba(255,178,83,.13); color:var(--t-amber-hi); border-color:rgba(255,178,83,.4);
}
.tr-kinds button:focus-visible{outline:none; box-shadow:var(--t-focus)}

.tr-results{margin-top:10px; max-height:280px; overflow:auto}
.tr-result{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:10px; background:none; border:0; cursor:pointer;
  color:var(--t-fg); font:400 14px/1.2 var(--serif); text-align:left;
}
.tr-result:hover,.tr-result.is-cursor{background:var(--t-well)}
.tr-result small{margin-left:auto; font:400 10.5px/1 var(--mono); color:var(--t-mut3); letter-spacing:.06em}
.tr-result .tr-slot__thumb{flex:0 0 30px; width:30px; height:30px}
.tr-result .tp-mono{font-size:11px}

.tr-preview{
  margin-top:18px; padding:14px; border-radius:var(--t-r-card);
  background:rgba(255,178,83,.06); border:1px solid rgba(255,178,83,.22);
  font:400 14.5px/1.55 var(--ui); color:var(--t-fg); text-wrap:pretty;
}
.tr-preview.is-quiet{background:var(--t-well); border-color:var(--t-hair); color:var(--t-mut3)}

.tr-saved{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:32px;
  background:color-mix(in srgb,var(--t-card) 96%,transparent);
  border-radius:var(--t-r-panel); z-index:2;
  animation:savedIn var(--t-base) var(--e-develop) both;
}
@keyframes savedIn{from{opacity:0}to{opacity:1}}
.tr-saved__mark{
  width:54px; height:54px; border-radius:50%;
  border:1.5px solid var(--t-ok); color:var(--t-ok);
  display:grid; place-items:center; font-size:22px;
  animation:markPop var(--t-slow) var(--e-pop) both 90ms;
}
@keyframes markPop{from{transform:scale(.6); opacity:0}to{transform:none; opacity:1}}
.tr-saved p{margin:0; font:400 16px/1.5 var(--serif); color:var(--t-fg); max-width:26ch; text-wrap:pretty}
.tr-saved small{font:400 11px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--t-mut3)}

.tr-toast{
  position:absolute; left:50%; bottom:20px; transform:translate(-50%,12px);
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--t-r-pill);
  background:var(--t-card); border:1px solid var(--t-line2);
  box-shadow:var(--t-sh-card); color:var(--t-fg);
  font:400 13.5px/1 var(--ui); opacity:0; pointer-events:none; z-index:9;
  transition:opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
}
.tr-toast.is-up{opacity:1; transform:translate(-50%,0)}
.tr-toast b{color:var(--t-ok); font-weight:500}

/* a connector that was just saved pulses once */
@keyframes rulePulse{
  0%{stroke:var(--t-ok); stroke-width:4; opacity:1}
  100%{stroke-width:2}
}
.tr-rule.is-new{animation:rulePulse 1100ms var(--e-develop) both}

/* ---------- phone ------------------------------------------------------ */
@media (max-width:640px){
  [data-tree]{--node-w:118px}
  .tr-bar{
    position:sticky; top:0; z-index:7; margin-bottom:10px;
    padding:10px 12px; gap:8px; border-radius:16px;
  }
  .tr-bar .tr-key,.tr-bar .tr-meta{display:none}
  .tr-bar__spacer{display:none}
  .tr-chips{width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .tr-chips::-webkit-scrollbar{display:none}
  .tr-stage{height:calc(100svh - 216px); min-height:420px; border-radius:16px}
  .tr-panel,.tr-connect{
    top:auto; left:8px; right:8px; bottom:8px; width:auto;
    max-height:74svh; border-radius:20px;
    transform:translateY(20px) scale(.995);
  }
  .tr-panel.is-open,.tr-connect.is-open{transform:none}
  .tr-panel::before,.tr-connect::before{
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:99px; background:var(--t-line2);
  }
  .tr-panel__head,.tr-connect .tr-panel__head{padding-top:22px}
  .tr-kinds{grid-template-columns:repeat(2,1fr)}
  .tr-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  [data-tree] *{animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important}
  .tr-rules.is-drawing .tr-rule{stroke-dashoffset:0}
}