/* ==========================================================================
   ವಂಶವೃಕ್ಷ — warm parchment by day, ink by night.
   Latin UI in Noto Sans; names and headings in Noto Serif; all Kannada in
   Noto Serif Kannada, which carries the same weight as the serif Latin.
   ========================================================================== */

:root {
  --paper: #f7f3ea;
  --paper-2: #efe8da;
  --surface: #fffdf8;
  --surface-2: #f4eee2;
  --surface-3: #ebe3d3;
  --line: #e0d6c2;
  --line-strong: #cfc2a8;
  --text: #241f19;
  --text-2: #5b5145;
  --muted: #857a68;
  --accent: #b45524;
  --accent-soft: #f3e2d4;
  --accent-text: #fffaf5;
  --gold: #a8801f;
  --danger: #ab2a2a;
  --ok: #1d6f46;
  --warn: #8a5d00;
  --male: #3c6a9e;
  --female: #ab4370;
  --other: #74589e;
  --edge: #bdb09a;

  --shadow-1: 0 1px 2px rgba(60, 44, 24, .07);
  --shadow-2: 0 1px 2px rgba(60, 44, 24, .06), 0 4px 12px rgba(60, 44, 24, .07);
  --shadow-3: 0 2px 6px rgba(60, 44, 24, .08), 0 16px 34px rgba(60, 44, 24, .12);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;

  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif", "Noto Serif Kannada", Georgia, serif;
  --font-kn: "Noto Serif Kannada", "Noto Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, .35, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root:not([data-theme="light"]) { --dark-vars: 1; }

/* one dark palette, applied by preference or by the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120f; --paper-2: #1b1713; --surface: #221d19; --surface-2: #2a241f; --surface-3: #332b24;
    --line: #3a322a; --line-strong: #4a4037; --text: #f2ebdf; --text-2: #cdc2b2; --muted: #a2947f;
    --accent: #df8b4d; --accent-soft: #3a291c; --accent-text: #1a140e; --gold: #d8ae4c;
    --danger: #e2685f; --ok: #5cbb86; --warn: #d9a548;
    --male: #6d9fd6; --female: #d9789f; --other: #a58ada; --edge: #8a7c6c;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .3);
    --shadow-3: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 40px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15120f; --paper-2: #1b1713; --surface: #221d19; --surface-2: #2a241f; --surface-3: #332b24;
  --line: #3a322a; --line-strong: #4a4037; --text: #f2ebdf; --text-2: #cdc2b2; --muted: #a2947f;
  --accent: #df8b4d; --accent-soft: #3a291c; --accent-text: #1a140e; --gold: #d8ae4c;
  --danger: #e2685f; --ok: #5cbb86; --warn: #d9a548;
  --male: #6d9fd6; --female: #d9789f; --other: #a58ada; --edge: #8a7c6c;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .3);
  --shadow-3: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 40px rgba(0, 0, 0, .45);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* The author `display` rules below (buttons, .fields) outrank the UA sheet's [hidden] rule, so restate it. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(kn), .kn, [lang="kn"] { font-family: var(--font-kn); }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .muted { color: var(--muted); }
.center { text-align: center; padding: 56px 16px; color: var(--text-2); }
.spacer { flex: 1; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---------- controls ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button {
  --btn-bg: var(--surface);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-1);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
button:hover { background: var(--surface-2); border-color: var(--line-strong); }
button:active { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
button:disabled:hover { background: var(--btn-bg); border-color: var(--line); }

button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  color: var(--accent-text); border-color: transparent; font-weight: 600;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22);
}
button.primary:hover { filter: brightness(1.06); border-color: transparent; }
button.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); }
button.danger { color: var(--danger); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
button.danger:not(.ghost) { background: var(--danger); color: #fff; border-color: transparent; }
button.icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; border-color: transparent; color: var(--muted); font-size: 15px; }
button.icon:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); }
button.small { padding: 4px 10px; font-size: 13px; border-radius: var(--r-sm); }
svg.ico { flex: none; display: block; }
button.icon-btn { width: 36px; padding: 0; }
.seg.zoom button { padding: 7px 9px; }

input[type="text"], input[type="search"], input[type="password"], select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
select { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.seg button { border: 0; border-radius: 0; padding: 6px 11px; box-shadow: none; background: transparent; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--surface-2); color: var(--text); }
.seg button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.seg button.on:hover { filter: brightness(1.05); }

/* View · Edit, only for people who hold the passphrase */
.mode-switch { flex: none; }
.mode-switch button { gap: 6px; padding: 6px 12px; font-weight: 500; }
.mode-switch button[data-action="mode-view"].on { background: var(--surface-3); color: var(--text); }
.mode-switch button[data-action="mode-edit"].on { background: var(--accent); color: var(--accent-text); }

.badge { font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; border: 1px solid transparent; }
.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); font-weight: 600; }

/* ---------- page frame ---------- */
.page { min-height: 100%; display: flex; flex-direction: column; }
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 12;
}
.bar h1 { font-size: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bar h1 .kn { font-weight: 500; color: var(--text-2); font-size: 17px; }
.bar .back { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); font-size: 17px; text-decoration: none; }
.bar .back:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.brand { display: flex; align-items: center; gap: 11px; cursor: default; user-select: none; -webkit-user-select: none; }
.brand .logo { width: 34px; height: 34px; flex: none; }
.brand h1 { display: block; font-size: 21px; }
.brand .sub { display: block; font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }

.toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: relative; z-index: 11; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---------- home ---------- */
.home main { padding: 32px 18px 56px; max-width: 1120px; width: 100%; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.tree-card {
  background: linear-gradient(170deg, var(--surface), color-mix(in srgb, var(--surface) 82%, var(--paper-2)));
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tree-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.tree-card .tree-link { display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px 18px; color: inherit; flex: 1; }
.tree-card .tree-link:hover { text-decoration: none; }
.tree-card .band { align-self: stretch; height: 66px; margin: 0 -20px;
  background-image: radial-gradient(color-mix(in srgb, white 30%, transparent) 1.2px, transparent 1.3px), var(--band);
  background-size: 14px 14px, auto; }
.tree-card { --band: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--gold) 70%, var(--accent))); }
.tree-card.tone-1 { --band: linear-gradient(120deg, var(--male), color-mix(in srgb, var(--male) 55%, var(--other))); }
.tree-card.tone-2 { --band: linear-gradient(120deg, var(--female), color-mix(in srgb, var(--female) 55%, var(--accent))); }
.tree-card.tone-3 { --band: linear-gradient(120deg, color-mix(in srgb, var(--gold) 85%, var(--ok)), var(--gold)); }
.tree-card .avatar.big { width: 70px; height: 70px; font-size: 23px; margin-top: -35px; border-width: 3px;
  box-shadow: 0 0 0 4px var(--surface), var(--shadow-2); }
.tree-card h2 { font-size: 19px; }
.tree-card .txt { min-width: 0; margin-top: 10px; }
.tree-card .kn { color: var(--text-2); font-family: var(--font-kn); font-size: 15px; }
.tree-card .meta { font-size: 13px; color: var(--muted); margin-top: 5px; }
.tree-card .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.tree-card .facts span { display: inline-flex; align-items: center; gap: 5px; }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 4px 34px; }
.hero h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.15; }
.hero p { margin: 10px 0 0; color: var(--text-2); max-width: 540px; font-size: 15.5px; }
.hero .hero-count { display: flex; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.hero .hero-count span { display: inline-flex; align-items: center; gap: 6px; }
.hero-art { width: 240px; flex: none; }
.tree-card .actions { display: flex; gap: 8px; border: 0; }

/* ---------- tree canvas ---------- */
.tree { height: 100vh; height: 100dvh; }
.tree .main { flex: 1; display: flex; min-height: 0; position: relative; }
.stage {
  flex: 1; overflow: hidden; position: relative; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%),
    radial-gradient(circle at 86% 92%, color-mix(in srgb, var(--male) 8%, transparent), transparent 46%),
    radial-gradient(color-mix(in srgb, var(--edge) 34%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
}
.stage:active { cursor: grabbing; }
.canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.edge { fill: none; stroke: var(--edge); stroke-width: 2; stroke-linecap: round; }
.edge.marriage { stroke-width: 2.5; stroke: var(--line-strong); }
.edge.marriage.ref { stroke-dasharray: 5 5; stroke: var(--accent); opacity: .8; }
.edge.cross { stroke: var(--accent); stroke-dasharray: 4 7; stroke-width: 1.75; opacity: .7; }
.dot { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.cards { position: absolute; left: 0; top: 0; }
.empty { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; white-space: nowrap; color: var(--muted); }
.empty p { margin: 0; font-family: var(--font-serif); font-size: 17px; }

.card {
  position: absolute; display: flex; gap: 11px; align-items: center;
  padding: 11px 13px 11px 15px;
  background: linear-gradient(168deg, var(--surface), color-mix(in srgb, var(--surface) 86%, var(--paper-2)));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  cursor: pointer; overflow: hidden;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--other); }
.card.g-male::before { background: var(--male); }
.card.g-female::before { background: var(--female); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
/* the route between two people */
.cards.has-path .card { opacity: .32; }
.cards.has-path .card.on-path { opacity: 1; box-shadow: var(--shadow-3), 0 0 0 2px var(--accent); }
.edges.has-path .edge { opacity: .18; }
.edges.has-path .edge.hot { opacity: 1; stroke: var(--accent); stroke-width: 3; }
.card:focus-visible { outline: none; box-shadow: var(--shadow-3), 0 0 0 3px var(--accent); z-index: 5; }
.card.selected { border-color: var(--accent); box-shadow: var(--shadow-3), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.card.head { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.card.head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%); }
.card.ref { border-style: dashed; background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: var(--shadow-1); }
.card.ref:hover { transform: none; box-shadow: var(--shadow-2); }
.card .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.card .name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.28; }
.card .name.kn { font-family: var(--font-kn); font-weight: 500; font-size: 14px; color: var(--text-2); }
.card .meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; letter-spacing: .01em; }

.avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 15px;
  background: var(--surface-3) 50% 28% / cover no-repeat; color: var(--muted);
  border: 2px solid var(--line-strong);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .07);
  position: relative; z-index: 1;
}
.avatar.g-male { border-color: color-mix(in srgb, var(--male) 62%, transparent); color: var(--male); background-color: color-mix(in srgb, var(--male) 12%, var(--surface)); }
.avatar.g-female { border-color: color-mix(in srgb, var(--female) 62%, transparent); color: var(--female); background-color: color-mix(in srgb, var(--female) 12%, var(--surface)); }
.avatar.g-other { border-color: color-mix(in srgb, var(--other) 62%, transparent); color: var(--other); background-color: color-mix(in srgb, var(--other) 12%, var(--surface)); }
.avatar.big { width: 62px; height: 62px; font-size: 21px; }
.avatar.viewable { cursor: zoom-in; border: 0; padding: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.07); }
.avatar.viewable:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.photo-view { display: grid; place-items: center; }
.photo-view img { max-width: 100%; max-height: min(68vh, 620px); border-radius: var(--r-md); box-shadow: var(--shadow-2); }

.toggle {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  font-size: 13px; font-weight: 700; font-family: var(--font); line-height: 1;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text-2);
  display: grid; place-items: center; z-index: 4; box-shadow: var(--shadow-2);
}
.toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); transform: translate(-50%, -50%) scale(1.08); }
.toggle:active { transform: translate(-50%, -50%) scale(.96); }
.toggle.collapsed { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.toggle.collapsed:hover { color: var(--accent-text); filter: brightness(1.07); }

/* the head of the family carries a small crest */
.card .crest { position: absolute; top: 7px; right: 9px; z-index: 2; color: var(--gold); opacity: .9; }
.card.head .txt { padding-right: 12px; }

/* someone just added glows once, so the eye finds them */
.card.fresh { animation: fresh 1.7s var(--ease); z-index: 3; }
@keyframes fresh {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-3); transform: scale(1.04); }
  45% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow-3); transform: none; }
  100% { box-shadow: var(--shadow-2); }
}

/* Edit mode: placeholders where a new relative of the selected person would be drawn */
.page.tree.editing .stage { box-shadow: inset 0 3px 0 0 var(--accent); }
.ghost-node {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--line-strong)); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent); color: var(--accent);
  font-size: 14px; font-weight: 600; box-shadow: none; z-index: 3; animation: ghost-in .24s var(--ease) both;
}
button.ghost-node:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); border-style: solid; color: var(--accent); }
button.ghost-node:active { transform: scale(.98); }
.ghost-node.spouse { flex-direction: column; gap: 6px; }
.ghost-node .plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1.5px dashed currentColor; }
.ghost-node.parents { border-radius: 999px; font-size: 13px; }
.ghost-node.child { flex-direction: column; gap: 9px; }
.ghost-node.child .label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ghost-node.child .pair { display: flex; gap: 8px; }
.ghost-node.child button { gap: 5px; padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--accent); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ghost-node.child button:hover { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.edge.ghost { stroke: var(--accent); stroke-dasharray: 5 6; opacity: .6; }
@keyframes ghost-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* programmatic camera moves (fit, go to a person) glide; dragging and pinching stay direct */
.canvas.glide { transition: transform .38s var(--ease); }

/* ---------- find a person / compare two ---------- */
.finder { position: relative; width: 300px; max-width: 54vw; }
.finder .field-row { position: relative; }
.finder input { padding-left: 32px; }
.finder .field-row .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; }
.finder .picks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.finder .picks:empty { display: none; }
.finder .pick { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px;
  background: var(--accent-soft); font-size: 12.5px; font-weight: 500; max-width: 140px; }
.finder .pick .name { border: 0; background: none; box-shadow: none; padding: 0; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder .pick .name:hover { text-decoration: underline; background: none; }
.finder .and { font-size: 12px; color: var(--muted); }
/* The two-person answer, at the top of the panel so it shows on a phone's sheet too. */
.panel .answer { margin-top: 14px; padding: 10px 14px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.panel .answer h3 { justify-content: space-between; margin-bottom: 6px; }
.panel .answer p { margin: 0; font-size: 14px; line-height: 1.55; }
.panel .answer .answer-pair + .answer-pair { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.panel .answer p + p { margin-top: 3px; }
.panel .answer .rel { font-family: var(--font-serif); color: var(--accent); }
.panel .answer .kn { font-family: var(--font-kn); color: var(--text-2); font-size: 13.5px; }
.panel .answer .via { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 5px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); z-index: 20; max-height: 60vh; overflow: auto; }
.suggest li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.suggest li:hover { background: var(--accent-soft); }
.suggest .avatar { width: 30px; height: 30px; font-size: 12px; border-width: 1.5px; }

/* ---------- details panel ---------- */
.panel { width: 348px; flex: none; background: var(--surface); border-left: 1px solid var(--line); overflow: auto; padding: 20px 20px 28px; box-shadow: -8px 0 24px rgba(60, 44, 24, .05); }
.panel-head { display: flex; gap: 14px; align-items: flex-start; }
.panel-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.panel h2 { font-size: 21px; line-height: 1.2; }
.panel .kn { color: var(--text-2); font-family: var(--font-kn); font-size: 15.5px; }
.panel-head .life { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rel-chip { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; }
.rel-chip.you { background: var(--accent); color: var(--accent-text); }
.rel-of { font-size: 11.5px; color: var(--muted); margin-left: 2px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.panel section { margin-top: 18px; }
.panel h3 { display: flex; align-items: center; gap: 7px; font-size: 11px; font-family: var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.panel h3 .count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 10.5px; letter-spacing: 0; text-align: center; line-height: 17px; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.panel .notes p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--text-2);
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.add-row .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-btn { gap: 5px; padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--accent);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); box-shadow: none; }
.chip-btn:hover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.family ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.family li { display: flex; align-items: center; gap: 4px; }
.family li .link { flex: 1; min-width: 0; }
.family .remove { opacity: .55; }
.family li:hover .remove { opacity: 1; }
.link { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: transparent; border-radius: var(--r-sm); box-shadow: none; font-weight: 400; }
.link:hover { background: var(--accent-soft); border-color: transparent; }
.link .avatar { width: 30px; height: 30px; font-size: 11px; border-width: 1.5px; }
.link .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.link .who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link .who small { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.link.unknown { color: var(--muted); cursor: default; }
.link.unknown:hover { background: transparent; }
.panel-more { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); }
.panel-more summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-2); }
.panel-more summary::-webkit-details-marker { display: none; }
.panel-more summary .ico:last-child { margin-left: auto; transition: transform .18s var(--ease); }
.panel-more[open] summary .ico:last-child { transform: rotate(180deg); }
.panel-more summary:hover { color: var(--text); }
.panel-more .items { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 8px; }
.panel-more .items hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu-item { justify-content: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; box-shadow: none; color: var(--text-2); font-weight: 500; }
.menu-item .ico { color: var(--muted); }
.menu-item:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.menu-item.danger, .menu-item.danger .ico { color: var(--danger); }
.menu-item.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.panel-more .order { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; font-size: 14px; color: var(--text-2); font-weight: 500; }
.panel-more .order .ico { color: var(--muted); }
.panel-more .order .seg { margin-left: auto; }
.panel-more .hint { padding: 0 10px 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* a person added before their place in the family is known */
.loose-band { position: absolute; left: 0; border-top: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-3) 40%, transparent); pointer-events: none; z-index: 0; }
.loose-label { position: absolute; top: -40px; left: 2px; display: flex; flex-direction: column;
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.loose-label small { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.card.loose { border-style: dashed; }

/* which viewpoint relationships are shown from */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
button.icon.tiny { width: 20px; height: 20px; font-size: 11px; }
/* panel actions read as buttons, not text links */
.actions button { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.actions button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.actions button.danger { color: var(--danger); }

/* ---------- overflow menu ---------- */
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; display: grid; place-items: center; min-width: 38px; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-1); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { background: var(--surface-2); }
.more[open] summary { border-color: var(--accent); color: var(--accent); }
.more .menu { position: absolute; right: 0; top: calc(100% + 7px); display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 186px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); z-index: 30; }
.more .menu button { justify-content: flex-start; text-align: left; border: 0; background: transparent; box-shadow: none; color: var(--text-2); gap: 10px; }
.more .menu button .ico { color: var(--muted); }
.more .menu button:hover { background: var(--accent-soft); color: var(--text); }
.more .menu button:hover .ico { color: var(--accent); }
.more .menu .hint { padding: 0 10px 4px; max-width: 240px; }
.more .menu .menu-label { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.more .menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
.toolbar .more .menu { min-width: 250px; }

.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.version-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 6px 8px; border-radius: var(--r-sm); }
.version-list li:hover { background: var(--surface-2); }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list .letter { position: sticky; top: 0; padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); background: var(--surface); text-transform: uppercase; }
.people-list .link { padding: 7px 8px; }
.people-list .link small { color: var(--muted); }

.relation-answer { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.relation-answer p { margin: 0; font-size: 15px; line-height: 1.7; }
.relation-answer p + p { margin-top: 6px; }
.relation-answer .rel { font-family: var(--font-serif); color: var(--accent); }

/* ---------- dialogs & forms ---------- */
dialog { border: 0; padding: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
  width: min(580px, calc(100vw - 28px)); max-height: calc(100vh - 36px); }
dialog::backdrop { background: rgba(28, 20, 12, .5); backdrop-filter: blur(2px); }
.modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.modal header h2 { font-size: 19px; }
.modal .body { padding: 18px 22px; overflow: auto; max-height: calc(100vh - 210px); }
.modal footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.fields { display: flex; flex-direction: column; gap: 13px; }
.fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.parent-set { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.parent-set legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.fields > .seg { align-self: flex-start; }
.child-rows { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.child-row { display: flex; gap: 8px; align-items: center; }
.child-row input { flex: 1; min-width: 0; }
.child-row .seg { flex: none; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field > span { color: var(--text-2); font-weight: 500; }
.error { color: var(--danger); margin: 0; white-space: pre-wrap; font-size: 13.5px;
  background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  padding: 9px 12px; border-radius: var(--r-md); }
.form-head { display: flex; gap: 16px; align-items: flex-start; }
.form-head .names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.photo-pick { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.photo-pick .hint { font-size: 10.5px; line-height: 1.3; }
.photo-focus { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.photo-focus input[type="range"] { width: 100%; accent-color: var(--accent); }
.photo-pick small { word-break: break-word; }
.avatar.drop { cursor: pointer; padding: 0; border-style: dashed; }
.avatar.drop:hover, .avatar.drop.over { border-color: var(--accent); color: var(--accent); background-color: var(--accent-soft); }
.share-row { display: flex; flex-direction: column; gap: 6px; }
.share-row strong { font-size: 13px; }
.share-row input { font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-row .warn { color: var(--warn); }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  background: color-mix(in srgb, var(--text) 94%, transparent); color: var(--paper);
  padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-3); z-index: 100;
  max-width: calc(100vw - 32px); pointer-events: none; font-size: 14px; font-weight: 500; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); color: #fff; }
#toast.ok { background: var(--ok); color: #fff; }

/* keep tap targets a fixed size on screen however far the canvas is zoomed out */
.toggle { transform-origin: center; }
.toggle { transform: translate(-50%, -50%) scale(var(--inv-k, 1)); }
.toggle:hover { transform: translate(-50%, -50%) scale(calc(var(--inv-k, 1) * 1.08)); }
.toggle:active { transform: translate(-50%, -50%) scale(calc(var(--inv-k, 1) * .96)); }

/* ---------- professional details: buttons, save state, menus, hints ---------- */
button.ghost.outline { border-color: var(--line); background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
button.ghost.outline:hover { border-color: var(--line-strong); background: var(--surface-2); }
a.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--text); background: var(--surface); }
a.button.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent)); color: var(--accent-text); border-color: transparent; box-shadow: var(--shadow-2); }
a.button:hover { text-decoration: none; filter: brightness(1.04); }

.save-btn { min-width: 104px; gap: 6px; }
.save-btn.is-saved { color: var(--ok); opacity: 1; }
.save-btn.is-saved:disabled { opacity: 1; }
.save-btn.is-saving:disabled { opacity: .85; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.seg button:disabled { opacity: .35; }
.zoom-level { min-width: 54px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.chip .ico { color: var(--accent); }

.display-menu summary { gap: 6px; display: flex; align-items: center; padding: 0 10px; }
.display-menu .lang-short { font-size: 13px; font-weight: 600; }
.display-menu .menu { min-width: 280px; gap: 6px; padding: 10px; }
.display-menu .seg, .bar-menu .menu .seg { display: flex; width: 100%; }
.display-menu .seg button, .bar-menu .menu .seg button { flex: 1; justify-content: center; }

/* a one-line tip at the foot of the canvas */
.coach { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; max-width: min(560px, calc(100% - 140px));
  display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  font-size: 13.5px; color: var(--text-2); backdrop-filter: blur(8px); animation: ghost-in .3s var(--ease) both; }
.coach > .ico { color: var(--accent); flex: none; }

#toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding-right: 8px; }
.toast-action { padding: 5px 12px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--paper) 22%, transparent);
  color: inherit; font-weight: 700; box-shadow: none; }
.toast-action:hover { background: color-mix(in srgb, var(--paper) 34%, transparent); color: inherit; }

/* forms */
.field .seg { align-self: flex-start; }
.gender-seg button { min-width: 78px; justify-content: center; }
.years { display: flex; flex-direction: column; gap: 6px; }
[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent) !important; }
.more-details { border-top: 1px solid var(--line); padding-top: 4px; }
.more-details > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2); }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary .ico { transform: rotate(-90deg); transition: transform .18s var(--ease); color: var(--muted); }
.more-details[open] > summary .ico { transform: none; }
.more-details > summary small { font-weight: 400; }
.more-details > .fields { padding: 6px 0 2px; }

/* search-as-you-type picker */
.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-list { list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pick-row { width: 100%; justify-content: flex-start; gap: 10px; padding: 7px 9px; border: 0; box-shadow: none; background: transparent; text-align: left; font-weight: 400; }
.pick-row:hover { background: var(--surface-2); }
.pick-row.on { background: var(--accent-soft); }
.pick-row .avatar { width: 32px; height: 32px; font-size: 12px; border-width: 1.5px; }
.pick-row .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.pick-row .who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row .who small { font-size: 12px; }
.pick-row > .ico { color: var(--accent); }
.picker-list .none { padding: 14px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* share */
.share-row { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.share-head { display: flex; gap: 12px; align-items: flex-start; }
.share-head small { display: block; margin-top: 2px; line-height: 1.4; }
.share-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.share-row.warn .share-icon { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.share-row.warn small { color: var(--warn); }
.share-row input { font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-row .row { display: flex; gap: 8px; flex-wrap: wrap; }
button.confirmed { color: var(--ok) !important; }

/* keyboard shortcuts */
.shortcuts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; align-items: center; }
.shortcuts dt { display: flex; gap: 4px; }
.shortcuts dd { margin: 0; color: var(--text-2); font-size: 14px; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px; font: 600 12px var(--font);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; color: var(--text); }

/* full-page states: not found, could not load */
.state-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 64px 20px; text-align: center; }
.state-page h2 { font-size: 24px; }
.state-page p { margin: 0; color: var(--text-2); max-width: 420px; }
.state-page .row { display: flex; gap: 10px; margin-top: 12px; }
.state-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }

/* loading skeletons */
.sk-line, .sk-card, .sk-tree { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.sk-line { height: 18px; width: 160px; border-radius: 6px; }
.sk-line.wide { width: 280px; height: 22px; }
.sk-line.hero-sk { width: min(520px, 80%); height: 34px; margin: 18px 0 34px; }
.sk-card { position: absolute; width: 170px; height: 72px; border-radius: var(--r-lg); }
.sk-tree { height: 230px; border-radius: var(--r-lg); }
.page.loading .stage { position: relative; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* the admin's bar on the home page */
.admin.open { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; padding: 12px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 13.5px; }
.admin-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tree-card .actions { padding: 0 20px 16px; }

.only-narrow { display: none; }

/* floating zoom, within thumb reach */
.zoom-cluster { position: absolute; right: 12px; bottom: 12px; z-index: 6; flex-direction: column; gap: 6px;
  padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); }
.zoom-cluster button { width: 40px; height: 40px; font-size: 17px; color: var(--text-2); }

/* the editor's bottom bar on a phone */
.action-bar { display: none; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(60, 44, 24, .08); }
.action-bar button { flex: 1; justify-content: center; min-height: 44px; white-space: nowrap; }
.action-bar button.primary { flex: 1.8; }
.action-bar .badge { flex: none; }

/* a visitor's four actions: on the toolbar, and in the same spot as the editor's bar on a phone */
.viewer-actions { display: flex; align-items: center; gap: 4px; }
.viewer-actions [data-action="relate"], .viewer-actions [data-action="go-me"] { color: var(--accent); }
@media (max-width: 1180px) { .viewer-actions button:not([data-action="relate"]) span { display: none; } } /* one toolbar row */
.viewer-bar { justify-content: space-around; gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(60, 44, 24, .08); }
.viewer-bar button { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 54px;
  padding: 6px 2px; border: 0; background: none; box-shadow: none; font-size: 11px; font-weight: 500; color: var(--text-2); }
.viewer-bar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-bar [data-action="relate"], .viewer-bar [data-action="go-me"] { color: var(--accent); }

.bar-menu .menu .seg { margin: 2px 0 6px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .only-narrow { display: flex; }
  .wide-only { display: none; }

  .bar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px) * 0); gap: 6px; flex-wrap: nowrap; }
  .bar h1 { font-size: 16px; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar h1 .kn { display: none; }
  .bar .back { flex: none; }
  .bar .spacer { display: none; }
  .finder { display: none; }
  .bar.searching .back, .bar.searching h1, .bar.searching .bar-menu { display: none; }
  .bar.searching .finder { display: block; flex: 1; width: auto; max-width: none; }

  .toolbar { display: none; }
  .tree .main { position: relative; }
  .panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 52%;
    border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -10px 30px rgba(60, 44, 24, .16); padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 7; }
  .panel::before { content: ""; position: sticky; top: 0; display: block; width: 40px; height: 4px; margin: -6px auto 10px;
    border-radius: 2px; background: var(--line-strong); }
  .zoom-cluster { bottom: 12px; }

  .fields .two { grid-template-columns: 1fr; }
  .fields .years .two { grid-template-columns: 1fr 1fr; }
  .home main { padding: 20px 14px 40px; }
  .grid { grid-template-columns: 1fr; }
  .tree-card .tree-link { padding: 14px; }

  /* dialogs sit at the bottom, where a thumb is */
  dialog { width: 100%; max-width: 100%; margin: auto auto 0; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .modal .body { max-height: calc(92vh - 170px); }
  .modal footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .modal footer button { flex: 1; min-height: 46px; }
  .more .menu { max-width: min(280px, calc(100vw - 24px)); }

  button { min-height: 38px; }
  .suggest li { padding: 10px 8px; }
  .mode-switch .label { display: none; }
  .mode-switch button { padding: 0; width: 38px; }
  .hero { padding: 6px 2px 20px; }
  .hero-art { display: none; }
  .ghost-node.child button { padding: 5px 10px; font-size: 12.5px; }

  /* smaller portraits so the names get the space */
  .card { padding: 8px 10px 8px 12px; gap: 8px; border-radius: 13px; }
  .card .avatar { width: 34px; height: 34px; font-size: 12px; border-width: 1.5px; }
  .card .name { font-size: 13.5px; line-height: 1.25; }
  .card .name.kn { font-size: 12.5px; }
  .card .meta { font-size: 10.5px; margin-top: 1px; }
  .toggle { min-width: 26px; height: 26px; font-size: 12px; }

  .bar-menu summary { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
}

/* a phone in landscape has almost no height: give the canvas what there is */
@media (max-width: 900px) and (orientation: landscape) {
  .panel { max-height: 70%; width: 320px; left: auto; right: 0; top: 0; bottom: 0; border-radius: 0; max-height: none; }
  .zoom-cluster { right: 332px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .card:hover, .tree-card:hover { transform: none; }
}