/* BIBLE FAMILY TREE (tree/tree.js) */
.tree-banner { background: linear-gradient(135deg, #3E4A2E 0%, #6A7A3E 55%, #A6773A 100%); color: #FBF6EA; box-shadow: 0 10px 28px rgba(50, 60, 30, 0.28); }
.tree-banner::before { background: radial-gradient(circle, rgba(240, 220, 150, 0.35) 0%, rgba(240, 220, 150, 0) 70%); }
.tree-banner .wit-banner-eyebrow { color: #F0DDA0; opacity: 1; }
@media (hover: hover) { .tree-banner:hover { box-shadow: 0 14px 32px rgba(50, 60, 30, 0.36); } }

#tree .wit-title { margin-bottom: 8px; }
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.tr-kids-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.tr-kids-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tr-switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--rule); transition: background 0.2s; }
.tr-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.tr-kids-toggle input:checked + .tr-switch { background: #E0892F; }
.tr-kids-toggle input:checked + .tr-switch::after { transform: translateX(16px); }
.tr-kids-toggle input:focus-visible + .tr-switch { outline: 2px solid #E0892F; outline-offset: 2px; }
.tr-find { flex: 1; min-width: 140px; }
.tr-find input { width: 100%; padding: 8px 12px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 14px; }
.tr-zoom { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; }
.tr-zoom button { width: 38px; height: 34px; border: none; background: var(--bg-raised); color: var(--ink); font-size: 20px; cursor: pointer; }
.tr-zoom button + button { border-left: 1px solid var(--rule); }
.tr-eras { display: flex; gap: 6px; margin: 0 -16px 10px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.tr-eras::-webkit-scrollbar { display: none; }
.tr-eras button { flex: none; padding: 5px 11px; border: 1.5px solid var(--era); border-radius: 999px; background: color-mix(in srgb, var(--era) 10%, var(--bg-raised)); color: var(--era); font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer; }
body.site-dark .tr-eras button { color: color-mix(in srgb, var(--era) 55%, #fff); }

.tr-view { position: relative; height: min(72vh, 760px); min-height: 420px; overflow: auto; border: 1px solid var(--rule); border-radius: 22px; background: radial-gradient(circle, rgba(46, 43, 39, 0.08) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--bg-raised); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; cursor: grab; }
body.site-dark .tr-view { background: radial-gradient(circle, rgba(239, 233, 220, 0.06) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--bg-raised); }
.tr-view.is-drag { cursor: grabbing; user-select: none; }
.tr-view.is-kids { background: radial-gradient(circle, rgba(224, 137, 47, 0.14) 1.4px, transparent 2px) 0 0 / 26px 26px, #FFF8EC; }
body.site-dark .tr-view.is-kids { background: radial-gradient(circle, rgba(224, 137, 47, 0.14) 1.4px, transparent 2px) 0 0 / 26px 26px, #2E2820; }
.tr-size { position: relative; }
.tr-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tr-band { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--era) 45%, transparent); background: color-mix(in srgb, var(--era) 4%, transparent); pointer-events: none; }
.tr-band span { position: sticky; left: 8px; display: inline-block; margin: 4px 0 0 8px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--era); opacity: 0.8; }
.tr-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.tr-lines path { fill: none; stroke-width: 2; opacity: 0.55; }
.tr-lines path.is-spine { stroke-width: 3.5; opacity: 0.9; }
.tr-lines path.is-wife { stroke-width: 2.6; opacity: 0.95; } /* (one wife's children, in her color, down from her) */
.tr-lines .tr-wed { stroke: #C99A4B; stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.9; }
.tr-lines .tr-wed.is-far { opacity: 0.5; }
.tr-node { position: absolute; width: 96px; height: 128px; padding: 0; display: flex; flex-direction: column; align-items: stretch; border: 1.5px solid color-mix(in srgb, var(--era) 45%, var(--rule)); border-top: 4px solid var(--era); border-radius: 12px; overflow: hidden; background: var(--bg-raised); color: var(--ink); cursor: pointer; box-shadow: 0 6px 14px -10px rgba(34, 30, 25, 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .tr-node:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(34, 30, 25, 0.6); } }
.tr-node.is-spine { border-width: 2px; border-top-width: 4px; }
.tr-node.is-found { animation: tr-found 1.6s ease; }
@keyframes tr-found { 0%, 100% { box-shadow: 0 6px 14px -10px rgba(34, 30, 25, 0.55); } 30%, 60% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--era) 55%, transparent); } }
.tr-pic { flex: 1; position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--era) 12%, var(--bg)); }
.tr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.18); }
.tr-pic svg { width: 100%; height: 100%; display: block; }
.tr-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--era); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--era) 18%, transparent), transparent 70%); }
.tr-name { display: block; padding: 4px 4px 5px; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-node.is-jesus { border-color: #E0B84A; border-top-color: #E0B84A; box-shadow: 0 0 0 3px rgba(224, 184, 74, 0.35), 0 10px 24px -10px rgba(160, 120, 30, 0.6); }
.tr-node.is-jesus .tr-pic { background: #FFF8E6; }
body.site-dark .tr-node.is-jesus .tr-pic { background: #3A3222; }
.is-kids .tr-node { border-radius: 18px; border-width: 2.5px; border-top-width: 5px; }
.is-kids .tr-pic { background: color-mix(in srgb, var(--era) 16%, #FFF8EC); }

/* Cartoons: smile and wave */
.ct .ct-smile { opacity: 0; transition: opacity 0.15s; }
.is-waving .ct .ct-smile { opacity: 1; }
.is-waving .ct .ct-flat { opacity: 0; }
.is-waving .ct .ct-arm { animation: ct-wave 1.4s ease-in-out; }
.is-waving .ct .ct-body { animation: ct-hop 0.7s ease 2; }
.is-waving .ct-emblem .ct-light { animation: ct-glow 1.4s ease; transform-origin: 80px 96px; }
@keyframes ct-wave { 0% { transform: rotate(0); } 15% { transform: rotate(-125deg); } 30% { transform: rotate(-95deg); } 45% { transform: rotate(-128deg); } 60% { transform: rotate(-95deg); } 75% { transform: rotate(-122deg); } 100% { transform: rotate(0); } }
@keyframes ct-hop { 50% { transform: translateY(-6px); } }
@keyframes ct-glow { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.12); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .is-waving .ct .ct-arm, .is-waving .ct .ct-body, .is-waving .ct-emblem .ct-light { animation: none; } }

.tr-credit { margin: 10px 4px 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.tr-credit a { color: var(--gold); }

.tr-summary { margin: 8px 0 10px; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink); }
.tr-readkey { align-self: flex-start; margin-bottom: 12px; padding: 7px 12px; border: 1.5px solid var(--era); border-radius: 999px; background: none; color: var(--era); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.tr-fam { margin: 0 0 8px; }
.tr-fam small { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tr-chip { margin: 0 4px 4px 0; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--era) 50%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--era) 10%, var(--bg-raised)); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tr-verses { margin-top: 6px; border-top: 1px solid var(--rule); padding-top: 8px; font-family: var(--sans); }
.tr-verses > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink); }
.tr-verses summary span, .tr-book summary span { margin-left: 4px; font-weight: 600; font-size: 12px; color: var(--muted); }
.tr-book { margin: 6px 0 0 6px; }
.tr-book > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tr-vlist { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.tr-v { padding: 3px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 12px; cursor: pointer; }
@media (hover: hover) { .tr-v:hover, .tr-chip:hover { border-color: var(--era); } }
.tr-imgcredit { margin: 10px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.4; color: var(--muted); }
.tr-imgcredit a { color: var(--muted); }

/* The Bible reader over the card */
.tr-reader-scrim { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.5); }
.tr-reader-scrim[hidden] { display: none; }
.tr-reader { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); height: min(720px, 100%); border-radius: 18px; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--rule); }
.tr-reader-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 14px; }
.tr-reader-head b { flex: 1; color: var(--ink); }
.tr-reader-head a { font-size: 12.5px; color: var(--gold); }
.tr-x { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.tr-reader iframe { flex: 1; width: 100%; border: 0; background: #fff; }
body.site-dark .tr-readkey, body.site-dark .tr-fc-key { color: color-mix(in srgb, var(--era) 55%, #fff); }

/* ================================================================
   One family at a time: the person you're on as a big trading card (like the timeline's),
   parents above, children below, joined by the Foundations map's flowing dotted lines
   ================================================================ */
.tr-modes { display: inline-flex; padding: 3px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); }
.tr-modes button { padding: 5px 12px; border: none; border-radius: 999px; background: none; color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-modes button[aria-pressed="true"] { background: var(--coral); color: var(--on-gold); }
.tr-eras button.is-here { background: var(--era); color: #fff; }
body.site-dark .tr-eras button.is-here { color: #fff; }
.tr-hint-line { margin: 10px 4px 0; font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: center; }
.tr-node.is-cur { box-shadow: 0 0 0 4px color-mix(in srgb, var(--era) 45%, transparent); }

/* "From Adam": the line that led here, a strip of little portraits (swipe sideways) */
.tr-path { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-width: 0; }
.tr-path-label { flex: none; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.tr-steps { display: flex; align-items: center; margin: 0; padding: 4px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; min-width: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); }
.tr-steps::-webkit-scrollbar { display: none; }
.tr-steps li { display: flex; align-items: center; flex-shrink: 0; }
.tr-steps li + li::before { content: ''; width: 12px; height: 2px; margin: 0 2px; border-radius: 2px; background: var(--rule); }
.tr-step { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 3px 10px 3px 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-step-pic { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.tr-step-pic img, .tr-step-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-step-pic .tr-mono { font-size: 11px; }
.tr-step-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-step.is-here { background: var(--era); border-color: var(--era); color: #fff; cursor: default; }
@media (hover: hover) { .tr-step:not(.is-here):hover { border-color: var(--era); } }

/* The stage: a dotted board like the Foundations map */
.tr-stage {
  --dot: rgba(46, 43, 39, 0.10);
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 16px 12px 18px; border: 1px solid var(--rule); border-radius: 22px;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(180deg, var(--bg-raised), var(--bg));
}
body.site-dark .tr-stage { --dot: rgba(239, 233, 220, 0.07); }
.tr-stage::before { content: ''; position: absolute; left: 50%; top: 42%; z-index: -1; width: min(90%, 620px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--era) 0%, transparent 62%); opacity: 0.16; pointer-events: none; }
.tr-stage.is-kids { --dot: rgba(224, 137, 47, 0.16); }
.tr-links { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; overflow: visible; }
.tr-links path { fill: none; stroke: var(--era); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 9; animation: tr-flow 1.3s linear infinite; }
@keyframes tr-flow { to { stroke-dashoffset: -20; } }

/* Small cards: parents and children */
.tr-parents { display: flex; justify-content: center; gap: 10px; width: 100%; margin-bottom: 34px; }
.tr-parents .tr-mini { width: min(48%, 210px); }
.tr-mini {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 7px; border-radius: 16px; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--rule); border-left: 4px solid var(--era); color: var(--ink); font: inherit; cursor: pointer;
  box-shadow: 0 14px 28px -18px rgba(34, 30, 25, 0.45); -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) { .tr-mini:hover { border-color: var(--era); box-shadow: 0 18px 32px -18px rgba(34, 30, 25, 0.55), 0 0 0 4px color-mix(in srgb, var(--era) 16%, transparent); } }
.tr-mini:active { transform: scale(0.97); }
.tr-mini-pic { position: relative; flex: none; width: 46px; height: 54px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.tr-mini-pic img, .tr-mini-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.12); }
.tr-mini-pic .tr-mono { font-size: 20px; }
.tr-mini-txt { display: flex; flex-direction: column; min-width: 0; }
.tr-mini-txt b { font-family: var(--sans); font-size: 14.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-mini-txt small { margin-top: 2px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--era); }
body.site-dark .tr-mini-txt small { color: color-mix(in srgb, var(--era) 55%, #fff); }
.tr-mini.is-jesus { border-color: #E0B84A; box-shadow: 0 0 0 3px rgba(224, 184, 74, 0.3); }
.tr-mini.is-jesus .tr-mini-pic { background: #FFF8E6; }
.is-kids .tr-mini { border-radius: 20px; border-width: 2px; border-left-width: 5px; }
.is-kids .tr-mini-pic { background: color-mix(in srgb, var(--era) 16%, #FFF8EC); }

.tr-under { margin: 30px 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--bg-raised); border: 1px solid color-mix(in srgb, var(--era) 40%, var(--rule)); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.tr-under span { color: var(--era); }
.tr-group { align-self: flex-start; margin: 10px 2px 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* (the ones they married: under the card, cards of their own, and a word that they lead to that side of the family) */
.tr-wed { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 30px; }
.tr-wed-h { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 12px 4px 9px; border-radius: 999px; background: var(--bg-raised); border: 1px solid color-mix(in srgb, #A65A7C 45%, var(--rule)); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.tr-wed-h svg { width: 17px; height: 17px; color: #A65A7C; }
.tr-wed-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.tr-wed-row .tr-mini { position: relative; flex: 1 1 150px; max-width: 230px; box-sizing: border-box; padding-right: 26px; border-left-color: #A65A7C; }
.tr-wed-row .tr-mini::after { content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-52%); font: 700 22px/1 var(--sans); color: var(--gold); }
.tr-wed-tip { margin: 8px 0 0; font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: center; }
.tr-group.is-to { border: 0; background: none; padding: 4px 0; cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.tr-group.is-to span { margin-left: 2px; font-size: 15px; line-height: 1; color: var(--gold); }
@media (hover: hover) { .tr-group.is-to:hover { color: var(--ink); } }
/* (the children, in rows under the card, each row centered: one or two children sit in the middle, not off to the left) */
.tr-kids-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.tr-kids-grid .tr-mini { flex: 1 1 150px; max-width: 220px; box-sizing: border-box; }
@media (max-width: 380px) { .tr-kids-grid .tr-mini { flex-basis: calc(50% - 4px); max-width: none; } .tr-mini { padding-right: 8px; gap: 8px; } .tr-mini-pic { width: 40px; height: 48px; } .tr-mini-txt b { font-size: 13.5px; } }

/* The big card, a trading card like the timeline's: a colored frame, the picture, a name plate */
.tr-hero { position: relative; display: flex; justify-content: center; width: 100%; touch-action: pan-y; }
.tr-fc { position: relative; width: min(330px, calc(100% - 76px)); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; perspective: 1400px; }
.tr-fc:focus-visible .tr-fc-inner { outline: 2px solid var(--era); outline-offset: 4px; border-radius: 20px; }
.tr-fc-inner { position: relative; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.tr-fc.is-flipped .tr-fc-inner { transform: rotateY(180deg); }
.tr-fc-face {
  position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; padding: 8px; border-radius: 20px;
  background: linear-gradient(150deg, var(--era) 0%, color-mix(in srgb, var(--era) 55%, #E0B96B) 55%, var(--era) 100%);
  box-shadow: 0 22px 44px -22px rgba(34, 30, 25, 0.6), 0 0 0 6px color-mix(in srgb, var(--era) 12%, transparent);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.tr-fc-back { transform: rotateY(180deg); pointer-events: none; }
.tr-fc.is-flipped .tr-fc-back { pointer-events: auto; }
.tr-fc.is-flipped .tr-fc-front { pointer-events: none; }
.tr-fc-photo { position: relative; aspect-ratio: 1 / 1; max-height: 40vh; width: 100%; border-radius: 13px; overflow: hidden; background: color-mix(in srgb, var(--era) 14%, var(--bg-raised)); }
.tr-fc-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.12); }
.tr-fc-photo > svg { display: block; width: 100%; height: 100%; }
.tr-fc-photo .tr-mono { font-size: 72px; }
.tr-fc-era { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: rgba(20, 17, 13, 0.7); color: #FFFDF7; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tr-fc-flipicon { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 17, 13, 0.55); color: #FFFDF7; }
.tr-fc-flipicon svg { width: 15px; height: 15px; }
/* One pass of foil shine when a new card arrives */
.tr-fc-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%); transform: translateX(-120%); animation: tr-shine 1.1s ease-out 0.3s 1 forwards; }
@keyframes tr-shine { to { transform: translateX(120%); } }
.tr-fc-front { overflow: hidden; }
.tr-fc-plate, .tr-fc-panel { margin-top: 8px; padding: 11px 13px 10px; border-radius: 13px; background: var(--bg-raised); }
.tr-fc-panel { margin-top: 0; padding: 14px 14px 10px; display: flex; flex-direction: column; }
.tr-fc-name { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--ink); }
/* (the name, and its Amen at the right, as on a timeline card: the Family Tree's and Who's Who's cards) */
.tr-fc-plate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tr-fc-plate-head > div { min-width: 0; }
.tr-fc-plate-head .vote-btn { flex: none; margin-top: 4px; }
.tr-fc-also { margin-top: 1px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.tr-fc-meta { margin-top: 3px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); }
.tr-fc-line { color: var(--coral); }
.tr-fc-wed { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.tr-fc-wed small { margin-right: 2px; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tr-wedchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border: 1px solid color-mix(in srgb, var(--era) 50%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--era) 10%, var(--bg-raised)); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tr-wedchip-pic { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.tr-wedchip-pic img, .tr-wedchip-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-wedchip-pic .tr-mono { font-size: 10px; }
@media (hover: hover) { .tr-wedchip:hover { border-color: var(--era); } }
.tr-fc-tap { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tr-fc-tap svg { width: 13px; height: 13px; }
.tr-fc-backhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.tr-fc-key { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--era); }
.tr-fc-sub { margin: 8px 0 0; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tr-fc .tr-summary { font-size: 16px; }
.tr-fc.is-jesus .tr-fc-face { background: linear-gradient(150deg, #E0B84A 0%, #F4DD95 50%, #C39A4B 100%); }
.tr-fc.is-jesus .tr-fc-photo { background: #FFF8E6; }
body.site-dark .tr-fc.is-jesus .tr-fc-photo { background: #3A3222; }
.tr-fc.is-kids .tr-fc-face { border-radius: 26px; }
.tr-fc.is-kids .tr-fc-photo { border-radius: 19px; background: color-mix(in srgb, var(--era) 16%, #FFF8EC); }
/* No more brothers or sisters that way: a little shake */
.tr-fc.tr-nudge-l { animation: tr-nudge-l 0.35s ease; } .tr-fc.tr-nudge-r { animation: tr-nudge-r 0.35s ease; }
@keyframes tr-nudge-l { 40% { transform: translateX(10px); } } @keyframes tr-nudge-r { 40% { transform: translateX(-10px); } }

/* Brothers and sisters: arrows on either side of the card */
.tr-side { position: absolute; top: 38%; width: 34px; height: 54px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--rule); background: var(--bg-raised); color: var(--era); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(34, 30, 25, 0.4); -webkit-tap-highlight-color: transparent; }
.tr-side svg { width: 20px; height: 20px; }
.tr-side.is-prev { left: 0; border-radius: 14px 8px 8px 14px; }
.tr-side.is-next { right: 0; border-radius: 8px 14px 14px 8px; }
.tr-side:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
@media (hover: hover) { .tr-side:not(:disabled):hover { border-color: var(--era); } }
body.site-dark .tr-side { color: color-mix(in srgb, var(--era) 55%, #fff); }

.tr-nav { display: flex; justify-content: center; gap: 8px; margin: 12px 0 0; }

/* Moving between people: the card you tapped grows into the big card (view transitions) */
::view-transition-group(tr-hero), ::view-transition-group(tr-prev) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(tr-hero), ::view-transition-new(tr-hero), ::view-transition-old(tr-prev), ::view-transition-new(tr-prev) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
html[data-tr-dir="next"]::view-transition-old(tr-hero) { animation: 0.35s ease both tr-out-l; }
html[data-tr-dir="next"]::view-transition-new(tr-hero) { animation: 0.35s ease both tr-in-r; }
html[data-tr-dir="prev"]::view-transition-old(tr-hero) { animation: 0.35s ease both tr-out-r; }
html[data-tr-dir="prev"]::view-transition-new(tr-hero) { animation: 0.35s ease both tr-in-l; }
html[data-tr-dir="next"]::view-transition-group(tr-hero), html[data-tr-dir="prev"]::view-transition-group(tr-hero) { animation: none; }
@keyframes tr-out-l { to { transform: translateX(-40%); opacity: 0; } }
@keyframes tr-out-r { to { transform: translateX(40%); opacity: 0; } }
@keyframes tr-in-r { from { transform: translateX(40%); opacity: 0; } }
@keyframes tr-in-l { from { transform: translateX(-40%); opacity: 0; } }
/* Without view transitions: a gentle slide in the direction you went */
.tr-stage.tr-in-down > * { animation: tr-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.tr-stage.tr-in-up > * { animation: tr-drop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.tr-stage.tr-in-next .tr-hero { animation: tr-in-r 0.35s ease; }
.tr-stage.tr-in-prev .tr-hero { animation: tr-in-l 0.35s ease; }
.tr-stage.tr-in-jump > * { animation: tr-fade 0.35s ease; }
.tr-stage > svg.tr-links { animation: none !important; }
@keyframes tr-rise { from { transform: translateY(30px); opacity: 0; } }
@keyframes tr-drop { from { transform: translateY(-30px); opacity: 0; } }
@keyframes tr-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tr-links path, .tr-fc-front::after { animation: none; }
  .tr-fc-inner { transition: none; }
}
.tr-hero { max-width: 430px; margin: 0 auto; }
/* Phones: the controls fit in two rows so the family shows sooner */
@media (max-width: 480px) {
  .tr-bar { gap: 8px; }
  .tr-modes button { padding: 5px 10px; font-size: 12.5px; }
  .tr-kids-toggle { padding: 5px 10px 5px 6px; font-size: 13px; }
  .tr-long { display: none; }
  .tr-find { flex-basis: 100%; }
}

/* ================================================================
   The tree's own window, like the Foundations flashcards: over the whole site (full screen on
   a phone), with an X to close. The controls, era chips, and "From Adam" stay along the top;
   only the family scrolls beneath them.
   ================================================================ */
.tr-launch { margin-top: 4px; }
.tr-launch-faces { display: flex; }
.tr-launch-faces > span { position: relative; width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 253, 247, 0.9); background: color-mix(in srgb, var(--era) 20%, #FBF6EA); }
.tr-launch-faces > span:first-child { margin-left: 0; }
.tr-launch-faces img, .tr-launch-faces svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-launch-faces .tr-mono { font-size: 15px; }

.tr-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.45); opacity: 0; transition: opacity 0.25s ease; }
.tr-sheet.open { opacity: 1; }
.tr-sheet[hidden] { display: none; }
.tr-box { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); height: min(940px, 100%); border-radius: 22px; overflow: hidden; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 40px 80px -30px rgba(20, 16, 12, 0.55); transform: translateY(24px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.tr-sheet.open .tr-box { transform: none; }
.tr-box.is-whole { width: min(1400px, 100%); }
@media (max-width: 560px) { .tr-sheet { padding: 0; } .tr-box { width: 100%; height: 100%; border-radius: 0; border: none; } }
/* (a phone on its side: the whole screen too, not a computer's framed window over Home. From the owner, of One family
   opened from a person's "Their family" with the phone on its side: "When pressing their family in landscape mode it open
   in the wrong type") */
@media (orientation: landscape) and (max-height: 500px) { .tr-sheet { padding: 0 !important; } .tr-box, .tr-box.is-whole { width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; border: none !important; } }
@media (prefers-reduced-motion: reduce) { .tr-sheet, .tr-box { transition: none; } }

/* The top: controls, era chips, "From Adam" */
.tr-head { flex: none; position: relative; z-index: 2; padding: 12px 16px 8px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--bg-raised); border-bottom: 1px solid var(--rule); box-shadow: 0 8px 18px -16px rgba(34, 30, 25, 0.5); }
.tr-head .tr-bar { margin-bottom: 8px; }
.tr-head .tr-eras { margin: 0 -16px 8px; }
.tr-head .tr-path { margin: 0; }
.tr-pathbox:empty { display: none; }
.tr-close { position: static; margin-left: auto; flex: none; box-shadow: none; }
.tr-find input { padding: 7px 12px; }

/* Beneath: the family (or the whole tree) */
.tr-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.tr-box.is-whole .tr-scroll { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.tr-box.is-whole .tr-view { flex: 1; height: auto; min-height: 0; border: none; border-radius: 0; }
.tr-box.is-whole .tr-hint-line { flex: none; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-raised); border-top: 1px solid var(--rule); }
.tr-scroll .tr-credit { margin-top: 18px; }
.tr-head .tr-modes { order: 1; } .tr-head .tr-kids-toggle { order: 2; } .tr-head .tr-find { order: 3; } .tr-head .tr-zoom { order: 4; } .tr-head .tr-close { order: 5; margin-left: 0; }
.tr-head .tr-find input { font-size: 16px; } /* 16px keeps iPhones from zooming in when you tap it */
@media (max-width: 480px) {
  .tr-head .tr-close { order: 3; margin-left: auto; }
  .tr-head .tr-find { order: 4; flex: 1 1 0; }
  .tr-head .tr-zoom { order: 5; }
}
/* Phones: One family / Whole tree, Kids, and Close share the top row */
@media (max-width: 480px) {
  .tr-head .tr-bar { gap: 6px; }
  .tr-head .tr-modes button { padding: 5px 7px; }
  .tr-head .tr-kids-toggle { gap: 6px; padding: 4px 9px 4px 5px; }
  .tr-head .x-close { height: 32px !important; padding: 0 11px !important; font-size: 12.5px !important; }
}
@media (max-width: 370px) { .tr-head .tr-close { order: 5; margin-left: 0; } .tr-head .tr-modes button { padding: 5px 7px; font-size: 12px; } .tr-head .tr-switch { width: 30px; } .tr-head .tr-kids-toggle input:checked + .tr-switch::after { transform: translateX(10px); } }

/* A father with children by more than one wife: which family this is, and arrows to the next */
.tr-moms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: -4px 0 10px; font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: center; }
.tr-moms b { color: var(--ink); }
.tr-moms-dots { display: inline-flex; gap: 5px; }
.tr-moms-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, #A65A7C 28%, var(--rule)); }
.tr-moms-dots i.is-on { background: #A65A7C; box-shadow: 0 0 0 3px color-mix(in srgb, #A65A7C 22%, transparent); }
.tr-parents { position: relative; touch-action: pan-y; }
.tr-parents.has-moms { padding: 0 34px; }
.tr-parents.has-moms .tr-mini { width: min(50%, 210px); }
.tr-pside { position: absolute; top: 50%; width: 28px; height: 44px; margin-top: -22px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule); background: var(--bg-raised); color: #A65A7C; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(34, 30, 25, 0.4); -webkit-tap-highlight-color: transparent; }
.tr-pside.is-prev { left: 0; border-radius: 12px 7px 7px 12px; }
.tr-pside.is-next { right: 0; border-radius: 7px 12px 12px 7px; }
.tr-pside:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
@media (hover: hover) { .tr-pside:not(:disabled):hover { border-color: #A65A7C; } }
.tr-parents.tr-nudge-l { animation: tr-nudge-l 0.35s ease; } .tr-parents.tr-nudge-r { animation: tr-nudge-r 0.35s ease; }
body.site-dark .tr-pside, body.site-dark .tr-moms-dots i.is-on { color: #D98FAF; }
.tr-group { display: flex; align-items: center; gap: 6px; }
.tr-group-dot { width: 8px; height: 8px; border-radius: 50%; background: #A65A7C; }

/* the short label for "One family", used on phones in kids mode */
.tr-mshort { display: none; }
/* Kids mode: the "Play" button for the Who Am I? game (tree/guess.js), right after the Kids switch */
.tr-game { order: 2; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border: none; border-radius: 999px; background: linear-gradient(135deg, #E0892F, #D6457F); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(214, 69, 127, 0.8); -webkit-tap-highlight-color: transparent; }
.tr-game.is-new { animation: tr-game-in 0.5s cubic-bezier(.3, 1.5, .5, 1); }
.tr-game svg { width: 22px; height: 22px; }
.tr-game:active { transform: scale(0.95); }
@keyframes tr-game-in { from { transform: scale(0.4); opacity: 0; } }
/* phones: "One family / Whole tree" shorten to "Family / Whole" so the game button (with its
   controller icon) fits beside Kids, and Close moves down beside Find a person */
@media (max-width: 480px) {
  .tr-head .tr-bar:has(.tr-game) { gap: 6px; }
  .tr-head .tr-bar:has(.tr-game) .tr-mlong { display: none; }
  .tr-head .tr-bar:has(.tr-game) .tr-mshort { display: inline; }
  .tr-head .tr-bar:has(.tr-game) .tr-close { order: 5; margin-left: 0; }
  .tr-game { height: 32px; padding: 0 10px 0 7px; gap: 4px; font-size: 12.5px; }
  .tr-game svg { width: 19px; height: 19px; }
}
@media (max-width: 380px) {
  .tr-head .tr-bar:has(.tr-game) { gap: 5px; }
  .tr-head .tr-bar:has(.tr-game) .tr-kids-toggle { gap: 5px; padding: 4px 8px 4px 4px; }
  .tr-game { padding: 0 8px 0 6px; }
}
@media (max-width: 370px) { .tr-game { width: 34px; padding: 0; justify-content: center; } .tr-game span { display: none; } }

/* Finding someone: names appear under the box as you type */
.tr-find { position: relative; }
.tr-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; min-width: min(300px, 88vw); max-height: min(360px, 52vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 18px 40px -16px rgba(20, 16, 12, 0.45); }
.tr-sugg[hidden] { display: none; }
.tr-sugg-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: none; border-radius: 12px; background: none; color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-sugg-i.is-on, .tr-sugg-i:active { background: color-mix(in srgb, var(--era) 12%, transparent); }
@media (hover: hover) { .tr-sugg-i:hover { background: color-mix(in srgb, var(--era) 12%, transparent); } }
.tr-sugg-pic { position: relative; flex: none; width: 36px; height: 42px; overflow: hidden; border-radius: 9px; border-top: 3px solid var(--era); background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.tr-sugg-pic img, .tr-sugg-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-sugg-pic .tr-mono { font-size: 16px; }
.tr-sugg-i b { display: block; font-size: 15px; line-height: 1.2; }
.tr-sugg-i b small { font-weight: 500; color: var(--muted); }
.tr-sugg-i > span > small { display: block; font-size: 12.5px; color: var(--muted); }
.tr-sugg-none { padding: 10px 12px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.tr-find input::-webkit-search-cancel-button { cursor: pointer; }

/* Whole tree on a phone: smaller cards, packed closer (the sizes match metrics() in tree.js) */
.tr-view.is-compact .tr-node { width: 66px; height: 86px; border-radius: 10px; border-top-width: 3px; box-shadow: 0 4px 10px -8px rgba(34, 30, 25, 0.55); }
.tr-view.is-compact .tr-node.is-spine { border-top-width: 3px; }
.is-kids .tr-view.is-compact .tr-node, .tr-view.is-compact.is-kids .tr-node { border-radius: 12px; border-width: 2px; border-top-width: 4px; }
.tr-view.is-compact .tr-name { padding: 2px 2px 3px; font-size: 10px; }
.tr-view.is-compact .tr-mono { font-size: 24px; }
.tr-view.is-compact .tr-band span { margin: 2px 0 0 6px; font-size: 9px; letter-spacing: 0.1em; }
.tr-view.is-compact .tr-lines path { stroke-width: 1.6; }
.tr-view.is-compact .tr-lines path.is-spine { stroke-width: 2.6; }
.tr-view.is-compact .tr-lines .tr-wed { stroke-width: 2.2; stroke-dasharray: 1.5 4; }

/* The reader: step through every place someone appears without closing it */
.tr-reader-nav { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--bg-raised); font-family: var(--sans); }
.tr-reader-nav[hidden] { display: none; }
.tr-reader-nav button { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-reader-nav button svg { width: 18px; height: 18px; }
.tr-reader-nav button:active { transform: scale(0.96); }
.tr-reader-nav button:disabled { opacity: 0.35; cursor: default; transform: none; }
.tr-reader-pos { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.tr-reader-pos small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.tr-reader-pos b { font-size: 14px; color: var(--ink); }
@media (max-width: 400px) { .tr-reader-nav button { padding: 0 12px; } .tr-reader-nav button span { display: none; } }
.tr-v.is-here { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg)); font-weight: 700; }
/* every place someone appears, a passage at a time, in the window over the apps (tree.js) */
.tr-nv-pos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 640px; margin: 0 auto 6px; padding: 0 8px; font-family: var(--sans); }
.tr-nv-pos small { flex-basis: 100%; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tr-nv-pos b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.tr-nv-pos span { font-size: 13px; font-weight: 700; color: var(--muted); }
.tr-nv-steps { display: flex; justify-content: space-between; gap: 10px; max-width: 640px; margin: 18px auto 4px; padding: 0 8px; }
.tr-nv-step { height: 38px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
.tr-nv-step:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .tr-nv-step:not(:disabled):hover { border-color: var(--coral); } }
/* (a person with no portrait: their initials fill the picture's box, and only it, wherever the picture is drawn: the box
   holds them. Without it, they filled the nearest positioned thing, a whole window, and covered every button in it) */
:has(> .tr-mono) { position: relative; overflow: hidden; }
/* the shelves: each era's people with no family in the tree, "Also in this time" */
.tr-shelf-l { position: absolute; z-index: 1; font: 800 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--era); white-space: nowrap; }
.tr-node.is-shelf { outline: 1.5px dashed color-mix(in srgb, var(--era, #8f877b) 45%, transparent); outline-offset: 3px; }
.tr-also { margin: 22px 0 6px; }
.tr-also-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.tr-also-row .tr-mini { flex: none; width: 168px; scroll-snap-align: start; }
.tr-kin-l { font-weight: 600; opacity: 0.7; font-size: 0.9em; }
.tr-also-row .tr-mini-txt b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; } /* (a long name, "Joseph of Arimathea", on two lines) */

/* (Memorize and Amen, side by side on the card's back: index.html's pill) */
.tr-fc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }

/* ---- scrolling down the tree: the title, the modes, and the search fold away (every app's way: nav/tuck.js, nav/ui.css),
   the ages staying */
.tr-head .xp-turn { margin: 2px 0 8px; }
.tr-head.tk-on .xp-turn { display: none; }
/* ---- the whole tree in the explorer (nav/explore.js, treeExplore): its pictures, lines, and bands on the dark */
.xp .tr-xp-under { position: absolute; inset: 0; }
.xp .tr-band { border-top-color: color-mix(in srgb, var(--era) 55%, transparent); background: color-mix(in srgb, var(--era) 10%, transparent); }
.xp .tr-band span, .xp .tr-shelf-l { display: none; }
.xp .tr-lines path { opacity: 0.75; }
.xp-it .tr-xp-ph { aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--era); }
.xp-it .tr-xp-ph img { object-fit: cover; }
.xp-it .tr-xp-ph .tr-mono { font: 700 26px var(--serif); color: #f3ede2; }
.xp-it b { text-align: center; }
.tr-xp-big { display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #2b2520; }
.tr-xp-big img, .tr-xp-big svg { width: 100%; height: 100%; object-fit: cover; }

/* (.tr-xpback: Across the screen, or Full screen, first in the tree's top bar: nav/explore.js pagePill, tree/tree.js trBack) */