/* ==========================================================================
   The family tree canvas: tiles, lines and toolbar.
   ========================================================================== */

.tree-page { position: absolute; inset: 0; }
.canvas-wrap { position: absolute; inset: 0; }

.canvas {
  position: absolute; inset: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid-dot) 1.3px, transparent 1.4px);
  background-size: 33.6px 33.6px; /* the size and position of the dots follow the view: see apply() in TreeCanvas.js */
  user-select: none; -webkit-user-select: none;
}
.canvas.is-panning { cursor: grabbing; }

.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.world.is-gliding { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); } /* the same time and curve as a tile's own glide */
.world.is-easing { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.connectors { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* ---------- Lines ---------- */
.edge { fill: none; stroke: var(--line); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.12s, opacity 0.12s; }
.edge--dashed { stroke-dasharray: 13 11; }
.edge--dotted { stroke-dasharray: 0.1 12; stroke-width: 5.4; }
.edge.is-hot { stroke: var(--accent); stroke-width: 4.8; }
.canvas.has-hover .edge:not(.is-hot), .canvas.has-hover .couple:not(.is-hot) { opacity: 0.3; }
.couple-line { fill: none; stroke: var(--line-strong); stroke-width: 3.6; stroke-linecap: round; }
.couple--implied .couple-line { stroke: var(--line); }
.couple-dot { fill: var(--line-strong); stroke: var(--bg); stroke-width: 3; }
.couple-dot--partner { fill: var(--bg); stroke: var(--line-strong); stroke-width: 3; }
.couple--former .couple-dot { fill: var(--bg); stroke: var(--line-strong); }
/* The number of a marriage (1st, 2nd, 3rd...) sits inside its dot: a full dot is a marriage that continues, an empty one has ended. */
.couple-number { font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: var(--bg); pointer-events: none; user-select: none; -webkit-user-select: none; }
.couple--former .couple-number, .couple-dot--partner + .couple-number { fill: var(--line-strong); }
.couple.is-hot .couple-number { fill: var(--bg); }
.couple.is-hot .couple-dot--partner + .couple-number { fill: var(--accent); }
.couple.is-hot .couple-line, .couple.is-hot .couple-dot { stroke: var(--accent); }
.couple.is-hot .couple-dot:not(.couple-dot--partner) { fill: var(--accent); }

/* ---------- Tiles ---------- */
.tile--leaving { opacity: 0; pointer-events: none; } /* a tile that has just left: fades out, then is taken out of the page */
.tile-layer { display: contents; } /* holds the tiles on their own, so that tiles coming and going never move their neighbours in the page */
.tile { position: absolute; left: 0; top: 0; transition: opacity 0.16s ease-out, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
/* when the layout changes (parents shown or hidden) the tiles glide to their new places and the lines fade in behind them */
@keyframes lines-in { from { opacity: 0; } to { opacity: 1; } }
.world > .connectors:not(.bridge-lines):not(.ghost-lines) { animation: lines-in 0.44s ease-out 0.2s both; }
@media (prefers-reduced-motion: reduce) { .world.is-gliding { transition: none; } .tile { transition: opacity 0.16s ease-out; } .world > .connectors:not(.bridge-lines):not(.ghost-lines) { animation: none; } }
/* While ghost tiles are out, the rest of the tree steps back so that they are easy to read. */
.tile--dim { opacity: 0.11; }
.canvas-wrap.has-ghosts .world > .connectors:not(.ghost-lines) .edge:not(.is-hot), .canvas-wrap.has-ghosts .world > .connectors:not(.ghost-lines) .couple:not(.is-hot) { opacity: 0.1; }
.tile-card {
  position: relative; display: flex; align-items: center; gap: 0.75rem; height: 100%; padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  --tile-outline: var(--border-strong); /* the "has an account" badge borrows this colour */
  background: var(--surface); border: 1px solid var(--tile-outline); border-radius: 1.125rem; box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s, background 0.15s;
}
.tile-card:hover { text-decoration: none; }
.tile:hover .tile-card, .tile:focus-within .tile-card { --tile-outline: var(--accent); box-shadow: var(--shadow-md); }
.tile--me .tile-card { --tile-outline: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm); }
.tile.is-pulsing .tile-card { animation: pulse 0.9s ease-in-out 3; --tile-outline: var(--accent); }
/* A search found this person: the tile flashes light purple, twice, very quickly (after the view has glided to it). */
.tile.is-found .tile-card { --found-fill: #ddd6fe; --found-ring: rgba(139, 92, 246, 0.5); animation: found 0.25s ease-in-out 0.3s 2; }
@media (prefers-color-scheme: dark) { .tile.is-found .tile-card { --found-fill: #3b2d6b; --found-ring: rgba(167, 139, 250, 0.55); } }
@keyframes found {
  0%, 100% { background-color: var(--surface); box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
  50% { background-color: var(--found-fill); box-shadow: 0 0 0 9px var(--found-ring), var(--shadow-md); }
}
@media (prefers-reduced-motion: reduce) { .tile.is-found .tile-card { animation-duration: 0.01s; background-color: var(--found-fill); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); } 50% { box-shadow: 0 0 0 10px var(--accent-soft), var(--shadow-md); } }

/* The picture fills the tile's height, inside a small even frame; its corners are the tile's corners less that frame. */
.tile .avatar { height: 100%; width: auto; aspect-ratio: 1 / 1; border-radius: 0.8125rem; font-size: 1.5rem; }
.tile-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.tile-name { font-weight: 650; font-size: 0.9688rem; line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile-meta { display: flex; align-items: center; gap: 0.25rem; font-size: 0.7812rem; color: var(--text-2); line-height: 1.4; white-space: nowrap; overflow: hidden; }
/* Date of birth and place of birth share one line, each with a small icon; the place gives way (with an ellipsis) when the line is full. */
.tile-line { gap: 2px 0.625rem; flex-wrap: wrap; white-space: normal; } /* the place drops to a second line when it does not fit beside the date */
.tile-date, .tile-place { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.tile-date { flex: none; }
.tile-place { max-width: 100%; }
.tile-date > span, .tile-place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-date .icon, .tile-place .icon { flex: none; color: var(--text-3); }
.tile-meta--empty { color: var(--text-3); font-style: italic; }
/* "Has an account": a quiet white badge whose ring and check take the colour of the outline of the tile it sits on. */
.tile-status { position: absolute; top: -0.4375rem; right: -0.4375rem; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--tile-outline); border: 1.5px solid var(--tile-outline); transition: color 0.15s, border-color 0.15s; }
.tile-status--invited { background: var(--warning-soft); color: var(--warning); border: 1.5px solid var(--warning-border); } /* the same amber as the "Invitation sent" tag on the profile page */
.tile-you { position: absolute; top: -0.5625rem; right: 0.875rem; /* top-right, where the account badge is on other tiles (it is left off your own); clear of the show-parents pill at the top-left */ padding: 0 0.5rem; line-height: 1.125rem; border-radius: 6.1875rem; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent-text, var(--accent)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; } /* white with a purple outline, like the family (ghost) button */

/* The + buttons that appear around a tile when you hover it */
.tile-add {
  position: absolute; z-index: 2; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.tile:hover .tile-add, .tile:focus-within .tile-add { opacity: 1; transform: scale(1); pointer-events: auto; }
.tile-add:hover { background: var(--accent-hover); transform: scale(1.15) !important; }
.tile-add--top { top: -0.9375rem; left: calc(50% - 0.875rem); }
.tile-add--bottom { bottom: -0.9375rem; left: calc(50% - 0.875rem); }
.tile-add--left { left: -0.9375rem; top: calc(50% - 0.875rem); }
.tile-add--right { right: -0.9375rem; top: calc(50% - 0.875rem); }
@media (hover: none) { .tile-add { display: none; } }
/* The fifth button, in the bottom-right corner: shows this tile's family as a small tree of its own. White with a purple outline, so that it reads as a different kind of button from the four + buttons. */
.tile-family {
  position: absolute; z-index: 2; right: -0.9375rem; bottom: -0.9375rem; width: 1.875rem; height: 1.875rem; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent-text, var(--accent));
  box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.12s, transform 0.12s, background-color 0.12s, color 0.12s;
}
.tile:hover .tile-family, .tile:focus-within .tile-family, .tile-family.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
.tile-family:hover { background: var(--accent-soft); transform: scale(1.12) !important; }
.tile-family.is-on { background: var(--accent); color: var(--on-accent); }
.tile-family:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Other families": the small pill on a tile whose parents belong to another tree (or another part of the tree). Pressing it draws them above (or to the left of) the tile. */
.tile-other {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 1.5rem; padding: 0 0.5rem 0 0.4375rem; border-radius: 999px;
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent-text, var(--accent)); font: 700 0.7188rem/1 inherit; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; transform: scale(0.85); pointer-events: none; /* like the other tile buttons it appears only while the tile is pointed at (and stays once it has been opened) */
  transition: opacity 0.12s, transform 0.12s, background-color 0.12s, color 0.12s;
}
.tile:hover .tile-other, .tile:focus-within .tile-other, .tile-other.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
@media (hover: none) { .tile-other { opacity: 1; transform: none; pointer-events: auto; } }
.tile-other--left { left: -0.75rem; top: -0.625rem; }
.tile-other--top { left: 0.75rem; top: -0.8125rem; }
.tile-other:hover { background: var(--accent-soft); }
.tile-other.is-on { background: var(--accent-soft); box-shadow: none; }
.tile-other:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile--dim .tile-other { display: none; }
/* While a family shows, the tiles that stepped back have no buttons. */
.tile--dim .tile-add, .tile--dim .tile-family { display: none; }

/* Zoomed far out: show only the names, bigger. */
.canvas--far .tile-meta, .canvas--far .tile-add, .canvas--far .tile-family, .canvas--far .tile-status, .canvas--far .tile-you { display: none; }
.canvas--far .tile-name { font-size: 1.25rem; line-height: 1.15; -webkit-line-clamp: 3; }
.canvas--far .edge, .canvas--far .couple-line { stroke-width: 7.2; }
.canvas--far .couple-dot { r: 11; }
.canvas--mid .tile-place { display: none; }

/* ---------- Overlays ---------- */
.tree-toolbar { position: absolute; z-index: 8; top: 0.75rem; left: 0.75rem; right: 0.75rem; display: flex; align-items: center; gap: 0.5rem; pointer-events: none; }
.tree-toolbar > * { pointer-events: auto; }
.tree-toolbar .btn { height: 2.25rem; min-height: 2.25rem; box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 28%, var(--surface)); } /* the same soft shadow as the Find a person field, so the buttons sit on the canvas the same way; the thin outline is the search field's, in purple to match the buttons */
.tree-search { position: relative; display: flex; align-items: center; gap: 0.5rem; flex: 0 1 21.25rem; min-width: 0; height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.625rem; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-3); }
.tree-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tree-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.tree-search-results { position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; margin: 0; padding: 0.25rem; list-style: none; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--surface); box-shadow: var(--shadow-lg); max-height: 22.5rem; overflow-y: auto; }

.canvas-controls { position: absolute; z-index: 8; right: 0.875rem; bottom: 1.125rem; display: flex; flex-direction: column; gap: 2px; padding: 0.25rem; border: 1px solid var(--border-strong); border-radius: 0.75rem; background: var(--surface); box-shadow: var(--shadow-md); }
.canvas-hint { position: absolute; z-index: 4; bottom: 0.5rem; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--text-3); pointer-events: none; white-space: nowrap; }
@media (max-width: 67.5rem) { .canvas-hint { display: none; } }
@media (max-width: 48rem) { .canvas-controls { right: 0.625rem; bottom: 0.75rem; } }

.tree-hint { position: absolute; z-index: 9; left: 50%; bottom: 5.25rem; transform: translateX(-50%); width: min(30rem, calc(100% - 1.75rem)); padding: 0.875rem 2.75rem 0.75rem 1rem; border: 1px solid var(--border-strong); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-lg); }
.tree-hint p { margin: 0.25rem 0 0; color: var(--text-2); font-size: 0.875rem; }
.tree-hint .icon-btn { position: absolute; top: 0.5rem; right: 0.5rem; }
.hint-plus { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); vertical-align: -3px; }

@media (max-width: 48rem) { .tree-toolbar { left: 0.5rem; right: 0.5rem; top: 0.5rem; gap: 0.375rem; } .tree-toolbar .btn-label-sm { position: absolute; } }

/* The "Top to bottom / Left to right" switch sits in the toolbar and matches the small buttons. */
.tree-toolbar .segmented { height: 2.25rem; align-items: stretch; flex-wrap: nowrap; padding: 2px; gap: 2px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); background: var(--surface); }
.tree-toolbar .segmented-item { min-height: 0; height: 100%; padding: 0 0.625rem; font-size: 0.8438rem; }
.tree-toolbar .segmented-item.is-active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
@media (max-width: 48rem) { .tree-toolbar .segmented-item { padding: 0 0.5rem; } }
.legend { width: 16.875rem; padding: 0.625rem 0.75rem 0.375rem; cursor: default; }
.legend h4 { margin-bottom: 0.5rem; }
.legend p { color: var(--text-2); font-size: 0.8125rem; margin-top: 0.375rem; }
.legend-svg .edge { stroke-width: 3; }
.legend-colours-title { margin-top: 0.75rem; }
.legend-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.legend-swatches .avatar { width: 1.625rem; height: 1.625rem; font-size: 0.625rem; border-radius: 0.5rem; }
.legend-swatches > span:last-child { flex-basis: 100%; color: var(--text-2); font-size: 0.8125rem; }
.legend-text text { fill: var(--text); font-size: 0.8125rem; }

/* ---------- Ghost tiles: the family of the tile being pointed at, as a small family tree around it (web/js/tree/GhostCluster.js) ---------- */
.canvas-wrap.has-ghosts .canvas-hint { display: none; }
/* The family view is for looking: no + buttons (or other-families pills) while it is open; close it to add somebody. */
.canvas-wrap.has-ghosts .tile-add, .canvas-wrap.has-ghosts .tile-other { display: none; }
.ghost-cluster { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: opacity 0.14s ease-out, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ghost-cluster.is-leaving { opacity: 0; }
.ghost-cluster.is-leaving .tile--ghost { pointer-events: none; }
/* The same lines as the real tree, dashed and in the accent colour. */
.ghost-lines .edge { stroke: var(--accent); stroke-dasharray: 13 11; opacity: 0.8; }
.ghost-lines .edge.is-hot { stroke: var(--accent); }
.ghost-lines .couple-line { stroke: var(--accent); stroke-dasharray: 13 11; }
.ghost-lines .couple-dot { fill: var(--accent); stroke: var(--bg); }
.ghost-lines .couple-dot--partner, .ghost-lines .couple--former .couple-dot { fill: var(--bg); stroke: var(--accent); }
.ghost-lines .couple-number { fill: var(--bg); }
.ghost-lines .couple--former .couple-number, .ghost-lines .couple-dot--partner + .couple-number { fill: var(--accent); }
/* The ghost tiles: the tile of the tree, opaque and tinted, with a dashed outline; they slide in from where the real tile is. */
.tile--ghost { pointer-events: auto; opacity: 0; transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease-out; }
.tile--ghost.is-in { opacity: 1; }
.tile--ghost .tile-card { --tile-outline: var(--accent); border-style: dashed; background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface)); width: 100%; font: inherit; text-align: left; box-sizing: border-box; }
.tile--ghost:hover .tile-card, .tile--ghost:focus-within .tile-card { border-style: solid; background: var(--surface); }
.tile--ghost .tile-card:focus-visible { outline: none; }
.ghost-more-count { flex: none; display: grid; place-items: center; height: 100%; aspect-ratio: 1 / 1; border-radius: 0.8125rem; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 1.5rem; }
.ghost-more-list { position: absolute; z-index: 30; width: 18rem; max-height: 20rem; overflow: auto; margin: 0.5rem 0 0; padding: 0.375rem; list-style: none; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0.875rem; box-shadow: var(--shadow-md); }
.ghost-more-list button { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.3125rem 0.5rem; border: 0; border-radius: 0.625rem; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ghost-more-list button:hover, .ghost-more-list button:focus-visible { background: var(--accent-soft); }
.ghost-more-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-more-list small { color: var(--text-2); font-size: 0.75rem; }
/* The bar that says whose family is showing, with the X that puts it away. It stays where it is while the map moves. */
.family-bar { position: absolute; z-index: 9; top: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.625rem; max-width: calc(100% - 2rem); height: 2.25rem; padding: 0 0.375rem 0 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface)); border-radius: 6.1875rem; background: var(--surface); box-shadow: var(--shadow-md); font-size: 0.9062rem; color: var(--text-2); animation: family-bar-in 0.18s ease-out; }
.family-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-bar strong { color: var(--text); font-weight: 650; }
.family-bar-close { flex: none; width: 1.625rem; height: 1.625rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text, var(--accent)); cursor: pointer; transition: background-color 0.12s; }
.family-bar-close:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.family-bar-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes family-bar-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .family-bar { animation: none; } }
@media (prefers-reduced-motion: reduce) { .tile--ghost, .ghost-cluster, .world.is-easing { transition-duration: 0.01s; } }

/* The card of the day (bottom-left of the tree, where the small map used to be). */
.day-card { position: absolute; z-index: 8; left: 0.875rem; bottom: 1.125rem; width: 18.5rem; padding: 0.75rem 0.875rem 0.625rem; border: 1px solid var(--border-strong); border-radius: 0.875rem; background: var(--surface); box-shadow: var(--shadow-md); font-size: 0.8125rem; line-height: 1.45; color: var(--text); }
.day-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; }
.day-card-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.01em; color: var(--accent-text); }
.day-card-head .icon-btn { width: 1.5rem; height: 1.5rem; }
.day-card-main { cursor: pointer; border-radius: 0.5rem; outline-offset: 2px; }
.day-card-main:focus-visible { outline: 2px solid var(--accent); }
.day-card-who { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.day-card-who b { display: block; font-weight: 650; }
.day-card-who small, .day-card-sub { display: block; color: var(--text-2); font-size: 0.75rem; }
.day-card-row { display: flex; align-items: center; gap: 0.625rem; }
.day-card-lines { min-width: 0; }
.day-card-pin { display: grid; place-items: center; flex: none; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.day-card-title { margin: 0; font-weight: 500; }
.day-card-title b, .day-card-text b { font-weight: 650; }
.day-card-text { margin: 0.125rem 0 0; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.day-card-sub { margin: 0.125rem 0 0; }
.day-card-photo { display: block; width: 100%; max-height: 9rem; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.375rem; background: var(--surface-2, var(--bg)); }
.day-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; }
.day-card-foot a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.day-card-foot a:hover { text-decoration: underline; }
.day-card-another { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem; border: 0; border-radius: 0.375rem; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.day-card-another:hover { background: var(--accent-soft); color: var(--accent-text); }
.day-card-tab { position: absolute; z-index: 8; left: 0.875rem; bottom: 1.125rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); color: var(--accent-text); cursor: pointer; }
.day-card-tab:hover { background: var(--accent-soft); }
@media (max-width: 48rem) { .day-card, .day-card-tab { display: none; } }

/* ---------- More than one family tree ---------- */
/* A tree seen by somebody who is not part of it: the tiles can be looked at, not opened. */
.tile--static .tile-card { cursor: default; }
.tile--static:hover .tile-card, .tile--static:focus-within .tile-card { --tile-outline: var(--border-strong); box-shadow: var(--shadow-sm); }
/* A bridge to another tree: a tile with a dashed outline, joined to a corner of a tile by a dotted line. */
/* a parent from another tree, drawn as a parent in this tree's layout (a bridge): dashed outline, and it opens its own tree */
/* a parent shown on request simply fades in once the tree has finished making room (once it has finished making room) */
@keyframes parent-in { from { opacity: 0; } }
.tile--arriving { animation: parent-in 0.45s ease-out 0.55s backwards; } /* only when it has just arrived: not each time panning brings it back on screen */
@media (prefers-reduced-motion: reduce) { .tile--arriving { animation: none; } }
.tile--linked .tile-card { width: 100%; box-sizing: border-box; font: inherit; text-align: left; border-style: dashed; cursor: pointer; }
/* every tile names its family tree(s): one chip each, two to a row, up to four. The tree on view is coloured; the others are grey and
   turn colourful (with an outline) when pointed at, because they are doors to those trees. */
.tile-trees { display: grid; gap: 4px; justify-items: start; margin-top: 5px; min-width: 0; }
.tile-trees-row { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.tile-tree-chip { display: inline-flex; align-items: center; min-width: 0; padding: 1px 10px; border-radius: 999px; background: var(--accent-soft, rgba(99, 102, 241, 0.12)); color: var(--accent-text); font-size: 11px; font-weight: 600; line-height: 1.5; transition: background-color 0.12s, color 0.12s, box-shadow 0.12s; }
.tile-tree-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-tree-chip--grey { background: color-mix(in srgb, var(--text-2) 7%, transparent); color: color-mix(in srgb, var(--text-2) 78%, var(--surface)); }
.tile-tree-chip--grey:hover, .tile-tree-chip--grey:focus-visible, .tile-tree-chip--more[aria-expanded='true'] { background: var(--accent-soft, rgba(99, 102, 241, 0.12)); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); outline: none; }
.tile-tree-chip--door, .tile-tree-chip--more { cursor: pointer; }
.tile--rows2 .tile-name { -webkit-line-clamp: 1; }
.tile--raised { z-index: 30; }
/* the list behind a "+N": the other trees of this person, each a door */
.tile-more-list { position: absolute; z-index: 6; left: 0.5rem; top: calc(100% + 4px); min-width: 9rem; display: grid; gap: 2px; padding: 0.375rem; border-radius: 0.75rem; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.tile-more-title { padding: 0.125rem 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.tile-more-list button { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; color: var(--accent-text); font: 600 0.8125rem/1.2 inherit; text-align: left; cursor: pointer; }
.tile-more-list button:hover, .tile-more-list button:focus-visible { background: var(--accent-soft); outline: none; }
.tile--bridge .tile-card { width: 100%; box-sizing: border-box; font: inherit; text-align: left; border-style: dashed; }
.bridge-line { fill: none; stroke: var(--line); stroke-width: 3.2; stroke-dasharray: 1 7; stroke-linecap: round; }
/* Going from one tree to another: the old one fades out, the new one fades in. */
.canvas-wrap { animation: tree-in 0.38s ease-out; }
.tree-page.is-leaving .canvas-wrap { opacity: 0; transition: opacity 0.26s ease-in; }
@keyframes tree-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .canvas-wrap { animation-duration: 0.01s; } .tree-page.is-leaving .canvas-wrap { transition-duration: 0.01s; } }
/* The name of a tree that is not the family's own, in the toolbar. */
.tree-name-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.625rem; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 0.8438rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.tree-name-chip small { font-weight: 500; color: var(--text-2); }

/* The small switch in the Add pop-up: this person starts a new family tree. */
.tree-toggle { display: inline-flex; align-items: center; gap: 0.375rem; margin-right: auto; height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--border-strong); border-radius: 0.625rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.8438rem; font-weight: 550; cursor: pointer; }
.tree-name-choices { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: -0.25rem; }
.tree-name-choice { height: 1.875rem; padding: 0 0.625rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.8125rem; font-weight: 550; cursor: pointer; }
.tree-name-choice:hover, .tree-name-choice.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.tree-toggle:hover { background: var(--accent-soft); color: var(--accent-text); }
.tree-toggle.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip-x { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; margin: 0 -0.25rem 0 0.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; vertical-align: middle; }
.chip-x:hover { background: var(--accent); color: var(--on-accent); }
.row--tight { margin-top: 0.375rem; }
/* While a family is shown (the ghost tiles), the bridges to other trees step back with everything else, and cannot be pressed. */
.bridge-lines { transition: opacity 0.16s ease-out; }
.canvas-wrap.has-ghosts .tile--bridge { opacity: 0.11; pointer-events: none; }
.canvas-wrap.has-ghosts .bridge-lines { opacity: 0.1; }