/* rothschild.hemishthanki.com — the family tree.

   Same design system as x / subs / cinema / quotopedia: Google Sans UI,
   monochrome black-and-white tokens, a sticky sidebar rail that becomes an
   off-canvas drawer at <=820px. Two departures, both deliberate:

   1. PEOPLE'S NAMES ARE SET IN A SERIF (--font-name, Spectral). The shell stays
      the house sans; the content does not. quotopedia does the same thing with
      quote bodies, for the same reason — the subject is not a UI.
   2. THE FIVE HOUSES CARRY COLOUR, nothing else does. This is the rule the
      Arcade settled on when it went monochrome: one grey shell, and the marks
      keep their colour. Five branches have to be told apart at a glance on a
      chart with several hundred nodes, and shape alone will not do it. Every
      house colour is also always accompanied by its name in text, so the chart
      does not depend on colour vision.
*/

/* ------------------------------------------------------------ tokens ------- */
:root {
  --bg: #f7f9fa;
  --panel: #ffffff;
  --panel2: #eef3f4;
  --panel3: #e4ebed;
  --ink: #0f1419;
  --ink2: #536471;
  --ink3: #8494a1;            /* rules, dividers and decorative icons ONLY. It
                                 clears the 3:1 floor for a UI boundary and NOT
                                 the 4.5:1 one for text, so it never carries any */
  --line: #e1e8ed;
  --line-strong: #cfd9de;
  --accent: #0f1419;            /* monochrome: black button in light mode… */
  --on-accent: #ffffff;
  --accent-hover: #272c30;
  --accent-ink: #0f1419;
  --accent-tint: rgba(15,20,25,.08);
  --accent-tint-strong: rgba(15,20,25,.14);
  --danger: #d9364c;
  --ok: #1f7b4c;

  /* The one warm note on the page: a landmark figure's ring. Chosen to clear
     3:1 against both --panel and the dark panel, since it is a UI boundary. */
  /* The one warm note on the page: a landmark figure's ring, and the text of
     the landmark chip. Both values below are the darkest-but-still-warm point
     that clears 4.5:1 against the chip's own 13% tint, which is the ground the
     text actually sits on — measuring against plain white flatters it by half a
     point and was how the first pass shipped 3.6:1. */
  --gold: #846421;
  --gold-soft: rgba(132,100,33,.13);

  --font-display: 'Google Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Google Sans Text', 'Google Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-name: 'Spectral', Georgia, 'Times New Roman', serif;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-btn: 10px;
  --side-w: 262px;
  --topbar-h: 60px;

  --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --e2: 0 6px 20px rgba(16,24,40,.10);
  --e3: 0 18px 44px rgba(16,24,40,.18);
  --dur: .16s;

  /* Node geometry. tree.js reads these off the computed style, so the density
     switch below is the whole of the density feature — no JS constants. */
  --node-w: 178px;
  --node-h: 64px;
  --node-gap: 22px;      /* between siblings */
  --couple-gap: 14px;    /* between the two halves of a couple */
  --row-h: 132px;        /* generation pitch, node top to node top */
  --link: #8a9399;       /* connector lines. These ARE the chart — the whole
                            structure of who descends from whom is carried by
                            them and nothing else — so they are held to the 3:1
                            floor for meaningful non-text, not to the much
                            fainter value a decorative hairline could use. */
}
:root[data-density="compact"] { --node-w: 148px; --node-h: 54px; --node-gap: 16px; --row-h: 108px; }
:root[data-density="roomy"]   { --node-w: 208px; --node-h: 76px; --node-gap: 30px; --row-h: 158px; }
/* Written by the density button in the chart toolbar and restored pre-paint by
   boot.js. tree.js reads these four values off the computed style, so these two
   blocks are the entire feature — there is no JS constant to keep in step. */

/* Houses. Muted and low-chroma, and every one of them is used as TEXT on a
   chip tinted with itself (.chip-house sets `color` to the house variable), so
   each value has to clear 4.5:1 against an 11% mix of itself with the panel —
   not against the panel. Four of them missed that on the first pass and were
   darkened here; the dark-theme set was already clear of it by a wide margin. */
:root {
  --h-founders: #616c78;
  --h-frankfurt: #8d621c;
  --h-vienna: #a8475f;
  --h-naples: #48744a;
  --h-london: #3c6da6;
  --h-paris: #7457a3;
  --h-daughters: #2d747a;
  --h-other: #626b74;
}

:root[data-mode="dark"] {
  --bg: #000000;
  --panel: #16181c;
  --panel2: #1f2226;
  --panel3: #282c31;
  --ink: #e7e9ea;
  --ink2: #8b98a5;
  --ink3: #6b7683;
  --line: #2f3336;
  --line-strong: #3d4145;
  --accent: #eff3f4;            /* …and white button in dark mode */
  --on-accent: #0f1419;
  --accent-hover: #d7dbdc;
  --accent-ink: #eff3f4;
  --accent-tint: rgba(255,255,255,.10);
  --accent-tint-strong: rgba(255,255,255,.16);
  --danger: #f2607a;
  --ok: #4fd28a;
  --gold: #d3ab5c;
  --gold-soft: rgba(211,171,92,.16);
  --link: #5f6770;
  --e1: 0 1px 2px rgba(0,0,0,.5);
  --e2: 0 10px 30px rgba(0,0,0,.6);
  --e3: 0 22px 52px rgba(0,0,0,.72);
  --h-founders: #98a4b3;
  --h-frankfurt: #d3a44e;
  --h-vienna: #e0798f;
  --h-naples: #79b47c;
  --h-london: #74a5dd;
  --h-paris: #ab8dd8;
  --h-daughters: #63bcc4;
  --h-other: #9aa5af;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #000000; --panel: #16181c; --panel2: #1f2226; --panel3: #282c31;
    --ink: #e7e9ea; --ink2: #8b98a5; --ink3: #6b7683; --line: #2f3336; --line-strong: #3d4145;
    --accent: #eff3f4; --on-accent: #0f1419; --accent-hover: #d7dbdc; --accent-ink: #eff3f4;
    --accent-tint: rgba(255,255,255,.10); --accent-tint-strong: rgba(255,255,255,.16);
    --danger: #f2607a; --ok: #4fd28a; --gold: #d3ab5c; --gold-soft: rgba(211,171,92,.16);
    --link: #5f6770;
    --e1: 0 1px 2px rgba(0,0,0,.5); --e2: 0 10px 30px rgba(0,0,0,.6); --e3: 0 22px 52px rgba(0,0,0,.72);
    --h-founders: #98a4b3; --h-frankfurt: #d3a44e; --h-vienna: #e0798f;
    --h-naples: #79b47c; --h-london: #74a5dd; --h-paris: #ab8dd8;
    --h-daughters: #63bcc4; --h-other: #9aa5af;
  }
}

/* The <meta> color-scheme follows the OS, not our toggle — bind it to data-mode. */
:root { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { color-scheme: dark; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; }
h1 { letter-spacing: -.6px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; }

/* Material Symbols: hidden until the icon font is confirmed loaded, so a blocked
   Google Fonts request never flashes raw ligature words across the chart. */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; visibility: hidden;
}
body.fonts-ready .material-symbols-rounded { visibility: visible; }

/* ----------------------------------------------------------- buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
  white-space: nowrap; text-decoration: none; color: var(--ink); background: none;
}
.btn .material-symbols-rounded { font-size: 19px; }
.btn-filled { background: var(--accent); color: var(--on-accent); }
.btn-filled:hover:not(:disabled) { background: var(--accent-hover); }
.btn-outline { background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--panel2); border-color: var(--line-strong); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: none; background: transparent; color: var(--ink2); cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.btn-icon:hover { background: var(--panel2); color: var(--ink); }
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon:disabled:hover { background: transparent; color: var(--ink2); }

/* ------------------------------------------------------------ fields ------- */
.field-box {
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-btn);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field-icon { color: var(--ink2); font-size: 20px; flex: none; }
.field-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--ink);
  font-family: var(--font-body); font-size: 14.5px; padding: 10px 0;
}
.field-box input::placeholder { color: var(--ink2); opacity: .85; }
.field-box input::-webkit-search-decoration,
.field-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.field-trailing { width: 32px; height: 32px; }
.field-trailing .material-symbols-rounded { font-size: 18px; }

/* ------------------------------------------------------------ topbar ------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px;
  min-height: var(--topbar-h); padding: 10px 20px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: #0f1419; color: #ffffff; flex: none;
}
:root[data-mode="dark"] .brand-mark { background: #eff3f4; color: #0f1419; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .brand-mark { background: #eff3f4; color: #0f1419; }
}
.brand-name { font-family: var(--font-name); font-weight: 600; font-size: 19px; letter-spacing: -.2px; white-space: nowrap; }
.brand-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink2); white-space: nowrap;
  padding-left: 12px; border-left: 1px solid var(--line);
}
.topbar-search { position: relative; flex: 1 1 380px; max-width: 460px; margin-left: 10px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-toggle, .drawer-close, .nav-scrim { display: none; }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: min(66vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--e2); padding: 6px;
}
.sr-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px;
  border: none; background: none; border-radius: var(--radius-btn); cursor: pointer;
  text-align: left; color: var(--ink); font-family: inherit; font-size: 14px;
}
.sr-item:hover, .sr-item.is-active { background: var(--panel2); }
.sr-item .av-sm { width: 34px; height: 34px; flex: none; }
.sr-text { min-width: 0; flex: 1; }
.sr-name { font-family: var(--font-name); font-weight: 600; font-size: 14.5px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty { padding: 14px 12px; color: var(--ink2); font-size: 13.5px; }

/* ------------------------------------------------------------- shell ------- */
.shell { display: flex; align-items: flex-start; gap: 22px; padding: 20px 20px 0; }
.shell > .main { flex: 1 1 auto; min-width: 0; }
#main:focus { outline: none; }

/* ----------------------------------------------------------- sidebar ------- */
.sidebar {
  position: sticky; top: calc(var(--topbar-h) + 20px); flex: none; width: var(--side-w);
  display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100dvh - var(--topbar-h) - 34px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

.side-profile {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--e1);
}
.side-profile .av {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
}
.side-profile .sp-text { display: flex; flex-direction: column; min-width: 0; }
.sp-name { font-family: var(--font-name); font-style: italic; font-weight: 500; font-size: 12.5px;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mode { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-eyebrow {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink2); padding: 8px 8px 6px; margin: 0;
}
.side-group { display: block; }
.side-nav, .nav-foot { display: flex; flex-direction: column; gap: 2px; }
.nav-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

.side-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px; width: 100%;
  border-radius: var(--radius-sm); border: none; background: none; text-align: left; cursor: pointer;
  color: var(--ink2); font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  transition: background var(--dur), color var(--dur); text-decoration: none;
}
.side-item .material-symbols-rounded { font-size: 20px; flex: none; }
.side-item .side-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: var(--panel2); color: var(--ink); }
.side-item.is-on { background: var(--accent-tint); color: var(--accent-ink); }
.si-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  padding: 0 8px; border-radius: 999px; background: var(--panel2); color: var(--ink2); flex: none;
}
.side-item.is-on .si-badge { background: var(--accent-tint-strong); color: var(--accent-ink); }
.si-out { font-size: 15px !important; color: var(--ink3); }

.side-check { cursor: pointer; }
.side-check input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; flex: none; margin: 0;
  border: 1.6px solid var(--line-strong); border-radius: 5px; background: var(--panel); cursor: pointer;
  position: relative; transition: background var(--dur), border-color var(--dur);
}
.side-check input:checked { background: var(--accent); border-color: var(--accent); }
.side-check input:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.side-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-check:has(input:checked) { color: var(--ink); }

/* The house rows carry the only colour in the shell. */
.house-item .hs-dot {
  width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--hc, var(--h-other));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc, var(--h-other)) 45%, transparent);
}

/* ------------------------------------------------------- stage headers ----- */
.stage-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.stage-head-text { min-width: 0; flex: 1 1 320px; }
.stage-title { font-family: var(--font-name); font-weight: 700; font-size: 25px; letter-spacing: -.3px; }
.stage-sub { display: block; color: var(--ink2); font-size: 13.5px; margin-top: 4px; max-width: 74ch; }
.stage-head-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.tool-sort {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 8px 0 12px; height: 40px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-btn); color: var(--ink2);
}
.tool-sort .material-symbols-rounded { font-size: 19px; }
.tool-sort select {
  border: none; outline: none; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; padding-right: 4px;
}
.tool-sort select option { color: initial; }

/* =============================================================== STAGE ===== */
.stage {
  position: relative; height: calc(100dvh - var(--topbar-h) - 122px); min-height: 460px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  overflow: hidden; box-shadow: var(--e1);
}
/* A faint graph paper, so a pan reads as movement even over empty space. */
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}
.canvas-wrap {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  outline-offset: -3px;
}
.canvas-wrap.is-panning { cursor: grabbing; }
.canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.links { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.nodes { position: absolute; top: 0; left: 0; }

.link-path { fill: none; stroke: var(--link); stroke-width: 1.5; }
.link-path.is-marriage { stroke-width: 2; }
.link-path.is-hot { stroke: var(--ink); stroke-width: 2.6; }
.canvas[data-detail="bar"] .link-path.is-hot,
.canvas[data-detail="name"] .link-path.is-hot { stroke-width: calc(2.4px / var(--z, 1)); }

/* ------------------------------------------------------------- a node ----- */
.node {
  position: absolute; width: var(--node-w); height: var(--node-h);
  display: flex; align-items: center; gap: 9px; padding: 0 10px 0 7px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 13px;
  box-shadow: var(--e1); cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  transition: box-shadow var(--dur), border-color var(--dur), transform var(--dur), opacity var(--dur);
  /* `layout style` and NOT `paint`: paint containment clips every descendant to
     the padding edge, which quietly cut the landmark star — deliberately hung
     outside the top-right corner — down to a quarter circle. */
  contain: layout style;
}
.node:hover, .node.is-hot { border-color: var(--ink3); box-shadow: var(--e2); z-index: 3; }
.node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 4; }
.node.is-sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint-strong), var(--e2); z-index: 4; }
/* Every ancestor of the selected person, back to the root of the chart. */
.node.is-line { border-color: var(--ink2); box-shadow: 0 0 0 1px var(--ink2); z-index: 3; }

.node .av {
  width: 42px; height: 42px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--panel2); display: grid; place-items: center;
  font-family: var(--font-name); font-weight: 600; font-size: 14px; color: var(--ink2);
  border: 1px solid var(--line);
}
.node .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.node-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.node-name {
  font-family: var(--font-name); font-weight: 600; font-size: 13.5px; line-height: 1.22;
  color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.node-years {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: -.1px; color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.node-flag { position: absolute; top: -1px; bottom: -1px; left: -1px; width: 4px;
  border-radius: 13px 0 0 13px; background: var(--hc, var(--h-other)); }

/* Prominence. A landmark figure gets the gold ring and the star; a prominent one
   gets a heavier ink border. Both also change the name's weight, so the ranking
   survives greyscale printing and colour-blind viewing. */
.node.p-landmark { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--e1); background:
  linear-gradient(180deg, var(--gold-soft), transparent 62%), var(--panel); }
.node.p-landmark .av { border-color: var(--gold); }
.node.p-landmark .node-name { font-weight: 700; }
.node.p-prominent { border-color: var(--ink3); }
.node.p-prominent .node-name { font-weight: 700; }
.node.p-minor .node-name { font-weight: 500; color: var(--ink2); }
.node-star { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--gold); color: #fff; display: grid; place-items: center; font-size: 11px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* The gold is light in the dark theme, so white text on it is 2.15:1. Both
   badges flip together — .pc-star is the same badge on a person card and was
   left behind by the first version of this rule. */
:root[data-mode="dark"] .node-star,
:root[data-mode="dark"] .pc-star { color: #17130a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .node-star,
  :root:not([data-mode="light"]) .pc-star { color: #17130a; }
}

/* Married-in: a dashed edge, so blood and marriage are distinguishable without
   reading a single label. */
.node.is-married { border-style: dashed; background: var(--panel2); }
.node.is-married .av { border-radius: 999px; }

/* A ghost is the second appearance of somebody already drawn elsewhere — the
   family married its cousins constantly and a tree cannot draw one person twice
   without lying about how many people there were. */
.node.is-ghost { background: transparent; border-style: dotted; box-shadow: none; opacity: .78; }
.node.is-ghost .av { opacity: .6; }
/* A ghost is already 78% opacity; the minor tier already drops the name to
   --ink2. Together they landed at 3.73:1, so the ghost keeps the full ink and
   says what it is with italics and a dotted border instead. */
.node.is-ghost .node-name { font-style: italic; font-weight: 500; color: var(--ink); }
.node-jump { position: absolute; right: 5px; bottom: 3px; font-size: 13px !important; color: var(--ink3); }

/* Expand / collapse handle, hung under the node it belongs to. */
.knob {
  position: absolute; width: 22px; height: 22px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1;
  box-shadow: var(--e1); transition: background var(--dur), color var(--dur), border-color var(--dur);
  z-index: 5;
}
/* WCAG 2.2 asks for a 24x24 target. The knob stays 22px so it does not crowd
   the chips; the pseudo-element makes the touchable area bigger than the mark. */
.knob::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; }
.knob:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.knob.is-open { color: var(--ink2); }

/* Zoom-dependent detail. The chart is eleven thousand pixels wide; at "fit" a
   name is four pixels tall. Rather than render illegible text, drop to the
   information that survives the scale. */
.canvas[data-detail="name"] .node { padding-left: 10px; }
.canvas[data-detail="name"] .node .av,
.canvas[data-detail="name"] .node-years,
.canvas[data-detail="name"] .node-star,
.canvas[data-detail="name"] .node-jump { display: none; }
.canvas[data-detail="name"] .node-name { -webkit-line-clamp: 2; font-size: 15px; }
.canvas[data-detail="name"] .knob { display: none; }

.canvas[data-detail="bar"] .node { padding: 0; border-radius: 7px; overflow: hidden;
  background: color-mix(in srgb, var(--hc, var(--h-other)) 34%, var(--panel)); }
.canvas[data-detail="bar"] .node > * { display: none; }
.canvas[data-detail="bar"] .node .node-flag { display: block; width: 100%; border-radius: 7px;
  opacity: .55; }
/* Rings have to be zoom-compensated for the same reason the connectors are: a
   2px ring inside a 0.14 scale is a quarter of a pixel. And a traced line of
   descent matters MOST at this zoom, where it is the only way to follow one
   family through nine generations of chart. */
.canvas[data-detail="bar"] .node.p-landmark { box-shadow: 0 0 0 calc(2px / var(--z, 1)) var(--gold); }
.canvas[data-detail="bar"] .node.is-line,
.canvas[data-detail="name"] .node.is-line { box-shadow: 0 0 0 calc(1.6px / var(--z, 1)) var(--ink2); }
.canvas[data-detail="bar"] .node.is-sel,
.canvas[data-detail="name"] .node.is-sel { box-shadow: 0 0 0 calc(3px / var(--z, 1)) var(--accent); }
.canvas[data-detail="bar"] .knob { display: none; }

/* Connectors are the only thing left carrying the structure once the chips stop
   being readable, and a 1.5px stroke inside a 0.14 scale is a fifth of a pixel —
   it is simply not drawn. The fix is to divide the authored width by the live
   zoom, which applyTransform publishes as --z.

   NOT `vector-effect: non-scaling-stroke`: that compensates for transforms in
   the SVG's own coordinate system, and the scale here is a CSS transform on an
   ancestor HTML element, which it does not see. */
.canvas[data-detail="bar"] .link-path,
.canvas[data-detail="name"] .link-path { stroke-width: calc(1.4px / var(--z, 1)); }
/* Zoomed out, the connectors are the whole picture — but --link is tuned to sit
   quietly BEHIND readable chips, and at this size quiet reads as absent. Lift it
   to the same ink the secondary UI uses. (--line-strong is darker than --link in
   the dark theme, so reaching for it here made the lines vanish entirely.) */
.canvas[data-detail="bar"] .link-path,
.canvas[data-detail="name"] .link-path { stroke: var(--ink3); }

/* ------------------------------------------------------ stage furniture ---- */
.stage-tools {
  position: absolute; left: 14px; bottom: 14px; z-index: 12; display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--e2);
}
.stage-tools .tool { width: 34px; height: 34px; }
.stage-tools .tool .material-symbols-rounded { font-size: 19px; }
.tool-zoom { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); min-width: 44px;
  text-align: center; user-select: none; }
.tool-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

.stage-legend {
  position: absolute; right: 14px; bottom: 14px; z-index: 12; width: 232px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--e2);
}
.legend-toggle { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
.legend-toggle .material-symbols-rounded { font-size: 18px; transition: transform var(--dur); }
.legend-toggle[aria-expanded="false"] .material-symbols-rounded { transform: rotate(180deg); }
.legend-title { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--ink2); margin: 0 0 8px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legend-list li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink2); }
/* A 1px --line-strong border on --panel is 1.44:1: the swatch for "married in"
   and the one for "shown elsewhere" were, in practice, two empty rectangles.
   The fill carries the distinction now and the border reinforces it. */
.lg-swatch { width: 22px; height: 14px; border-radius: 4px; flex: none; background: var(--panel2);
  border: 1.5px solid var(--ink3); }
.lg-landmark { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background:
  linear-gradient(180deg, var(--gold-soft), transparent), var(--panel); }
.lg-prominent { border-color: var(--ink2); border-width: 2px; }
.lg-married { border-style: dashed; background: var(--panel3); }
.lg-ghost { border-style: dotted; background: transparent; }
.legend-note { margin: 9px 0 0; font-size: 11.5px; color: var(--ink2); line-height: 1.4; }

.stage-empty {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center;
  gap: 4px; text-align: center; padding: 30px; background: color-mix(in srgb, var(--panel) 86%, transparent);
}
.stage-empty-flow { position: static; padding: 70px 20px; background: none; }
.stage-empty .material-symbols-rounded { font-size: 38px; color: var(--ink3); margin-bottom: 6px; }
.empty-title { font-family: var(--font-name); font-weight: 600; font-size: 17px; margin: 0; }
.empty-note { color: var(--ink2); font-size: 13.5px; margin: 2px 0 0; }

/* ---------------------------------------------------------- hover card ----- */
.hovercard {
  position: fixed; z-index: 80; width: 300px; padding: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--e3); pointer-events: none; opacity: 0;
  transition: opacity .12s ease;
}
.hovercard.is-in { opacity: 1; pointer-events: auto; }
.hc-top { display: flex; gap: 12px; padding: 13px 14px 11px; }
.hc-av {
  width: 62px; height: 78px; flex: none; border-radius: 9px; overflow: hidden; background: var(--panel2);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-name); font-weight: 600; font-size: 20px; color: var(--ink2);
}
.hc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-head { min-width: 0; flex: 1; }
.hc-name { font-family: var(--font-name); font-weight: 700; font-size: 16px; line-height: 1.2; margin: 0;
  overflow-wrap: anywhere; }
.hc-life { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); margin-top: 4px; }
.hc-role { font-size: 12.5px; color: var(--ink2); margin: 6px 0 0; line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 11px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .1px;
  background: var(--panel2); color: var(--ink2); border: 1px solid var(--line);
}
.chip .material-symbols-rounded { font-size: 13px !important; }
.chip-house { color: var(--hc, var(--h-other)); border-color: color-mix(in srgb, var(--hc, var(--h-other)) 40%, var(--line));
  background: color-mix(in srgb, var(--hc, var(--h-other)) 11%, var(--panel)); }
.chip-landmark { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  background: var(--gold-soft); }
.chip-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }

.hc-social {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; margin: 0;
  border-top: 1px solid var(--line); background: var(--panel2);
}
.soc {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink2); text-decoration: none;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.soc:hover { color: var(--ink); border-color: var(--line-strong); background: var(--panel3); }
.soc svg { width: 16px; height: 16px; fill: currentColor; }
.hc-social-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink2); align-self: center;
  margin-left: 2px; }
.hc-foot {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink2);
}
.hc-foot .material-symbols-rounded { font-size: 14px !important; }

/* ======================================================== PEOPLE GRID ====== */
.people-grid {
  display: grid; gap: 14px; padding-bottom: 26px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* A card with one primary action and several secondary links. It cannot be a
   <button> — a button may not contain links, and the social anchors are links.
   So it is an <article> with a stretched invisible button over the photo and
   name, and the anchors sit above that button in the stacking order. */
.pcard {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0;
  overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--e1); color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.pc-open {
  position: absolute; inset: 0; z-index: 1; width: 100%; border: none; background: none;
  padding: 0; cursor: pointer; border-radius: var(--radius); font: inherit; color: inherit;
}
.pc-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pcard .pc-social { position: relative; z-index: 2; }
.pcard:hover { border-color: var(--line-strong); box-shadow: var(--e2); transform: translateY(-2px); }
.pcard.p-landmark { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pc-photo {
  position: relative; aspect-ratio: 4 / 5; background: var(--panel2); display: grid; place-items: center;
  font-family: var(--font-name); font-weight: 600; font-size: 34px; color: var(--ink2);
  border-bottom: 1px solid var(--line);
}
.pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-house { position: absolute; top: 9px; left: 9px; }
.pc-star { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--gold); color: #fff; display: grid; place-items: center; font-size: 13px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pc-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc-name { font-family: var(--font-name); font-weight: 700; font-size: 15px; line-height: 1.24; overflow-wrap: anywhere; }
.pc-years { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); }
.pc-role { font-size: 12.5px; color: var(--ink2); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-social { display: flex; gap: 5px; margin-top: auto; padding-top: 9px; }
.pc-social .soc { width: 27px; height: 27px; border-radius: 7px; }
.pc-social .soc svg { width: 13px; height: 13px; }
.more-btn { display: block; margin: 4px auto 32px; }

/* ========================================================== HOUSE CARDS ==== */
.house-grid { display: grid; gap: 16px; padding-bottom: 32px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.hcard {
  display: flex; flex-direction: column; padding: 18px 19px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e1);
  border-top: 3px solid var(--hc, var(--h-other));
}
.hcard-top { display: flex; align-items: flex-start; gap: 12px; }
.hcard-ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hc, var(--h-other)) 13%, var(--panel));
  color: var(--hc, var(--h-other)); font-size: 24px;
}
.hcard-name { font-family: var(--font-name); font-weight: 700; font-size: 19px; }
.hcard-founder { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); margin-top: 3px; }
.hcard-blurb { color: var(--ink2); font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; }
.hcard-stats { display: flex; gap: 16px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
.hstat { display: flex; flex-direction: column; }
.hstat b { font-family: var(--font-mono); font-weight: 500; font-size: 17px; color: var(--ink); }
.hstat span { font-size: 11px; color: var(--ink2); text-transform: uppercase; letter-spacing: .6px; }
/* An overlapping avatar stack. `gap: -6px` is not a thing; the overlap has to
   come from a negative margin on every tile after the first. */
.hcard-faces { display: flex; margin: 14px 0 0; min-height: 30px; }
.hcard-faces > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); cursor: pointer; padding: 0;
  transition: transform var(--dur), z-index var(--dur); }
.hcard-faces > *:first-child { margin-left: 0; }
.hcard-faces > *:hover { transform: translateY(-3px) scale(1.08); z-index: 2; position: relative; }
.hcard-actions { display: flex; gap: 8px; margin-top: 14px; }

.av-sm { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--panel2);
  border: 1px solid var(--line); display: grid; place-items: center; flex: none;
  font-family: var(--font-name); font-weight: 600; font-size: 11px; color: var(--ink2); }
.av-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================== SHEET ====== */
.sheet-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(0,0,0,.4); }
body.sheet-open { overflow: hidden; }
.sheet {
  position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: var(--e3); overflow: hidden;
}
.sheet-head { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.sheet-nav { margin-left: auto; display: flex; gap: 2px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 0 34px; }

.sh-hero { display: flex; gap: 16px; padding: 18px 20px 16px; }
.sh-av {
  width: 116px; height: 145px; flex: none; border-radius: 12px; overflow: hidden; background: var(--panel2);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-name); font-weight: 600; font-size: 38px; color: var(--ink2);
}
.sh-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-head { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sh-name { font-family: var(--font-name); font-weight: 700; font-size: 22px; line-height: 1.16; overflow-wrap: anywhere; }
.sh-alt { font-family: var(--font-name); font-style: italic; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.sh-life { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); margin-top: 7px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.sh-role { padding: 0 20px 14px; color: var(--ink2); font-size: 14px; line-height: 1.55; }
.sh-sec { padding: 14px 20px; border-top: 1px solid var(--line); }
.sh-sec-title {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink2); margin: 0 0 10px;
}
.sh-rel { display: flex; flex-direction: column; gap: 4px; }
.rel {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-btn);
  border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); width: 100%;
}
.rel:hover { background: var(--panel2); }
.rel-text { min-width: 0; flex: 1; }
.rel-name { font-family: var(--font-name); font-weight: 600; font-size: 14px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink2); }
.rel-kind { font-family: var(--font-mono); font-size: 10px; color: var(--ink2); text-transform: uppercase;
  letter-spacing: .5px; flex: none; }
/* The trailing arrow on an outbound row is an icon, not a label: it must keep
   the Material Symbols face or the ligature renders as the word "north_east". */
.rel-go { font-size: 15px !important; color: var(--ink3); flex: none; }
a.rel { text-decoration: none; }
a.rel:hover .rel-go { color: var(--ink); }
.sh-actions { display: flex; gap: 8px; padding: 14px 20px 0; }
.sh-actions .btn { flex: 1; }
.sh-fact { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink2); padding: 3px 0; }
.sh-fact b { font-weight: 500; color: var(--ink); font-family: var(--font-display); min-width: 92px; flex: none; }
.sh-credit { font-size: 11.5px; color: var(--ink2); line-height: 1.5; }
.sh-credit a { color: var(--ink2); }

/* =============================================================== PROSE ===== */
.prose { max-width: 74ch; padding-bottom: 40px; }
.prose h2 { font-family: var(--font-name); font-size: 19px; font-weight: 700; margin: 26px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink2); font-size: 14.5px; line-height: 1.66; margin: 0 0 12px; }
.prose ul { color: var(--ink2); font-size: 14.5px; line-height: 1.66; padding-left: 20px; margin: 0 0 12px; }
.prose li { margin-bottom: 5px; }
.prose a { color: var(--ink); text-underline-offset: 2px; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--panel2); padding: 1px 6px;
  border-radius: 6px; }
.credit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.credit-table th, .credit-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.credit-table th { font-family: var(--font-display); font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink2); }
.credit-table td { color: var(--ink2); }
.credit-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); }

/* =============================================================== TOAST ===== */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 95;
  padding: 11px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; box-shadow: var(--e2);
  max-width: min(92vw, 460px); text-align: center;
}

/* ============================================================== MOBILE ===== */
@media (max-width: 820px) {
  .shell { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px 0; }
  .topbar { padding: 9px 12px; gap: 8px; flex-wrap: wrap; }
  .brand-tag { display: none; }
  .topbar-search { order: 3; flex: 1 1 100%; max-width: none; margin: 2px 0 0; }
  .nav-toggle { display: inline-grid; }
  .drawer-close { display: inline-grid; align-self: flex-end; margin-bottom: 2px; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(86vw, 300px); max-height: none;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--panel); border-right: 1px solid var(--line); box-shadow: var(--e2);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, 0, 0, 1), visibility .24s linear;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .24s, visibility .24s linear;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

  .stage { height: calc(100dvh - 210px); min-height: 380px; border-radius: var(--radius-sm); }
  .stage-legend { display: none; }
  .stage-tools { left: 10px; right: 10px; bottom: 10px; justify-content: center; }
  .stage-head { margin-bottom: 10px; }
  .stage-title { font-size: 21px; }

  .sheet { top: auto; left: 0; width: 100vw; max-height: 88dvh; border-left: none;
    border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
  .sheet-body { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .sh-av { width: 92px; height: 115px; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .pc-photo { font-size: 26px; }
  .btn { min-height: 42px; }
  .hovercard { display: none; }   /* there is no hover on a touch screen; tapping opens the sheet */
}

@media (min-width: 821px) and (max-width: 1080px) { :root { --side-w: 216px; } }
@media (min-width: 1700px) { .people-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .canvas { will-change: auto; }
}

/* Printing an eleven-thousand-pixel pan-and-zoom canvas is not a thing that can
   be made to work by relaxing overflow: the chart lives inside one fixed-height
   viewport and its position comes from a CSS transform. So the chart is not
   printed at all, and the page says where the printable view is instead of
   emitting one clipped 460px window and calling it a family tree. */
@media print {
  .topbar, .sidebar, .stage, .hovercard, .sheet, .sheet-scrim, .nav-scrim,
  .stage-head-actions, .more-btn { display: none !important; }
  #view-tree .stage-head::after {
    content: "This chart is interactive and cannot be printed. Use Everyone for a printable list of all 726 people.";
    display: block; margin-top: 12px; font-size: 13px; color: #333;
  }
  .pcard, .hcard { break-inside: avoid; box-shadow: none; }
  body { background: #fff; color: #000; }
}