:root {
  --paper: #FAFAF8;
  --ink: #1D1D1F;
  --ink-soft: #6E6E73;
  --pine: #2C5F4F;
  --pine-soft: #E4ECE8;
  --amber: #C4622D;
  --amber-soft: #F5E4D9;
  --red: #B3261E;
  --red-soft: #FBEAE9;
  --line: #E8E6DE;
  --line-strong: #D8D5CB;
  --white: #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 1px 2px rgba(29,29,31,0.04), 0 8px 24px rgba(29,29,31,0.06);
  --shadow-float: 0 4px 12px rgba(29,29,31,0.08), 0 16px 40px rgba(29,29,31,0.12);

  --topbar-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; }

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== TOPBAR ===== */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  z-index: 30;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; }
.topbar__mark { color: var(--pine); width: 26px; height: 26px; }
.topbar__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.topbar__actions { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ===== BUTTONS ===== */
.btn { font-size: 14px; font-weight: 600; border-radius: 100px; border: none; cursor: pointer; transition: transform 0.1s, opacity 0.15s, background 0.15s, border-color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.btn--primary { background: var(--ink); color: var(--white); padding: 10px 18px; }
.btn--primary:hover:not(:disabled) { opacity: 0.88; }
.btn--primary:active:not(:disabled) { transform: scale(0.97); }
.btn--primary:disabled { background: var(--line-strong); color: var(--ink-soft); cursor: default; }
.btn--secondary { background: var(--white); color: var(--ink); border: 1.5px solid var(--line-strong); padding: 10px 18px; }
.btn--secondary:hover { border-color: var(--pine); background: var(--pine-soft); }
.btn--ghost { background: none; color: var(--ink-soft); padding: 9px 14px; }

/* ===== TOPBAR OVERFLOW MENU ===== */
.topbar__overflow { position: relative; }
.topbar__overflow-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: none; color: var(--ink-soft); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.topbar__overflow-trigger:hover, .topbar__overflow-trigger[aria-expanded="true"] {
  background: var(--paper); color: var(--ink);
}
.topbar__overflow-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 168px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); padding: 6px; z-index: 50;
  display: flex; flex-direction: column;
}
/* The class above sets display:flex, which otherwise wins over the
   browser's built-in "[hidden] { display: none }" rule by source order --
   without this, the menu rendered open by default on every page load,
   sitting on top of the empty-state headline until the trigger was
   clicked once (closing what looked like it was already "stuck"). */
.topbar__overflow-menu[hidden] { display: none; }
.topbar__overflow-item {
  display: flex; align-items: center; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 9px 10px; border: none; background: none; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.topbar__overflow-item:hover { background: var(--paper); }
.topbar__overflow-item--danger { color: var(--amber); }
.topbar__overflow-item--danger:hover { background: var(--amber-soft); }
.topbar__overflow-divider { height: 1px; background: var(--line); margin: 4px 2px; }


.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--reset { color: var(--amber); }
.btn--reset:hover { background: var(--amber-soft); color: var(--amber); }
.btn--large { padding: 13px 24px; font-size: 15px; }
.btn--sm { padding: 8px 16px; font-size: 13.5px; }
.btn--text { background: none; color: var(--ink-soft); padding: 8px 10px; }
.btn--text:hover { color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* ===== CANVAS ===== */
.canvas-area {
  position: relative;
  flex: 1;
  min-height: calc(100vh - 64px);
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 32px,
    var(--paper);
}

.chart-wrap {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: none;
  /* Without this, a two-finger pinch over the chart is ambiguous to the
     browser and often resolves to page-level zoom (zooming the whole app,
     header included) instead of panning the chart -- the "pinch fights
     page zoom" problem. pan-x/pan-y tells the browser this element owns
     panning gestures, so pinch lands here instead of hijacking the page.
     Pinch-to-scale-the-chart itself is intentionally not implemented;
     the zoom controls below cover the same need more simply. */
  touch-action: pan-x pan-y;
  /* flex-start on both axes never clips overflowing content, unlike
     center, which (without the unevenly-supported "safe" keyword) crops
     equally from both edges once content exceeds the container. Visual
     centering for small charts is handled separately (see #pedigreeSvg
     margin), so this container only ever needs to guarantee every part
     of a large chart stays reachable by scroll. */
  align-items: flex-start;
  justify-content: flex-start;
  padding: 60px 40px 100px;
}
/* width:100% lets a small chart grow to fill available space on a wide
   screen (desirable — a 3-person tree shouldn't look tiny in a corner of
   a desktop window), capped at 1100px so it doesn't grow absurdly large.
   min-width is set directly via inline style in JS (renderPedigreeSVG),
   matching the chart's own natural pixel width, since CSS attr() for
   numeric properties isn't reliably supported across browsers yet. That
   inline min-width is what stops a wide, multi-generation tree from ever
   being squeezed narrower than its own natural size — without it,
   width:100% on a narrow mobile viewport would force a wide chart down to
   viewport width, and height:auto would derive an equally-shrunken height
   from the viewBox aspect ratio, scaling every label and tap target down
   to a fraction of its intended size. */
#pedigreeSvg { display: block; width: 100%; max-width: 1100px; height: auto; margin-inline: auto; -webkit-tap-highlight-color: transparent; }

/* Edge-fade: a soft gradient cue at the left/right of the canvas area,
   shown only while the chart actually overflows in that direction
   (toggled via JS on scroll/resize/render). Without this, a tree cut off
   mid-person at the viewport edge gives no signal that scrolling reveals
   more -- the chart can look "finished" when it isn't. pointer-events:none
   so it never blocks taps on the chart underneath. */
.scroll-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 4;
}
.scroll-fade--left { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.scroll-fade--right { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
.scroll-fade.is-visible { opacity: 1; }

/* Zoom controls: simple scale stand-in for pinch-zoom on the chart
   itself. Fixed to the canvas area, away from the topbar's own controls. */
.zoom-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 4px;
  z-index: 4;
}
.zoom-btn {
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  font-size: 17px; color: var(--ink); cursor: pointer;
  transition: background 0.15s;
}
.zoom-btn:hover { background: var(--line); }
.zoom-btn--fit { font-size: 12px; font-weight: 600; padding: 0 10px; min-width: auto; }

/* ===== EMPTY STATE ===== */
.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.empty-state.is-hidden { display: none; }
.empty-state__inner { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty-state__icon { width: 56px; height: 56px; color: var(--pine); margin-bottom: 4px; }
.empty-state h1 { font-size: 27px; line-height: 1.25; }
.empty-state p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.empty-state__actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ===== HINT TOAST ===== */
.hint-toast {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 100px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 20;
  white-space: nowrap;
}
.hint-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== LEGEND ===== */
.legend {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: var(--shadow-soft);
  z-index: 10;
}
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.legend__shape { width: 11px; height: 11px; border: 2px solid var(--ink); flex-shrink: 0; }
.legend__shape.male { border-radius: 2px; }
.legend__shape.affected { background: var(--amber); border-color: var(--amber); }

/* ===== SVG PEDIGREE ELEMENTS ===== */
.ped-background { fill: transparent; }
.ped-shape { fill: var(--white); stroke: var(--ink); stroke-width: 2; cursor: pointer; transition: stroke 0.15s, fill 0.15s; }
.ped-shape.affected { fill: var(--amber); stroke: var(--ink); }
.ped-shape:hover { stroke: var(--pine); }
.ped-shape.is-selected { stroke: var(--pine); stroke-width: 3; }
.ped-hit-area { fill: transparent; cursor: pointer; }
.ped-line { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.ped-label {
  font-family: var(--font-body); font-size: 12.5px; fill: var(--ink);
  text-anchor: middle; font-weight: 500; cursor: text;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.ped-label:hover { fill: var(--pine); }

/* plain plus button: shown only for the selected person, only when they
   have no partner yet. Quiet outline at rest, fills in with the system's
   pine accent on hover — no color-coding or metaphor needed since there's
   exactly one possible meaning in this context. */
.ped-plus-btn { cursor: pointer; }
.ped-plus-hitzone { fill: transparent; }
.ped-plus-circle {
  fill: var(--white); stroke: var(--line-strong); stroke-width: 1.4;
  transition: fill 0.15s, stroke 0.15s;
}
.ped-plus-icon { stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; transition: stroke 0.15s; }
.ped-plus-btn:hover .ped-plus-circle { fill: var(--pine); stroke: var(--pine); }
.ped-plus-btn:hover .ped-plus-icon { stroke: var(--white); }

/* remove button: tiny x, quiet until hovered */
.ped-remove-btn { cursor: pointer; opacity: 0.55; transition: opacity 0.15s; }
.ped-remove-hitzone { fill: transparent; }
.ped-remove-btn:hover { opacity: 1; }
.ped-remove-circle { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.2; }
.ped-remove-icon { stroke: var(--ink-soft); stroke-width: 1.3; fill: none; }
.ped-remove-btn:hover .ped-remove-circle { fill: var(--red-soft); stroke: var(--red); }
.ped-remove-btn:hover .ped-remove-icon { stroke: var(--red); }

/* line-hover add-children control. On devices with real hover (mouse,
   trackpad), invisible at rest and fades in on hover — keeps the chart
   calm until the line is investigated. On touch devices :hover never
   fires from a tap, so hiding it entirely would make "add children"
   undiscoverable and unreachable; touch devices instead get a
   permanently faint version that's always there to tap, brightening
   only on the tap itself via :active. The hit-zone is larger than the
   visible circle so the control responds near the midpoint, not just
   the exact pixel of the line. */
.ped-line-add { cursor: pointer; }
.ped-line-add-hitzone { fill: transparent; }
.ped-line-add-circle {
  fill: var(--white); stroke: var(--line-strong); stroke-width: 1.4;
  opacity: 0; transition: opacity 0.15s, fill 0.15s, stroke 0.15s;
}
.ped-line-add-icon {
  stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0; transition: opacity 0.15s, stroke 0.15s; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .ped-line-add:hover .ped-line-add-circle,
  .ped-line-add:focus-visible .ped-line-add-circle { opacity: 1; }
  .ped-line-add:hover .ped-line-add-icon,
  .ped-line-add:focus-visible .ped-line-add-icon { opacity: 1; }
  .ped-line-add:hover .ped-line-add-circle { fill: var(--pine); stroke: var(--pine); }
  .ped-line-add:hover .ped-line-add-icon { stroke: var(--white); }
}
@media (hover: none), (pointer: coarse) {
  .ped-line-add-circle { opacity: 1; fill: var(--paper); }
  .ped-line-add-icon { opacity: 1; }
  .ped-line-add:active .ped-line-add-circle { fill: var(--pine); stroke: var(--pine); }
  .ped-line-add:active .ped-line-add-icon { stroke: var(--white); }
}

/* ===== ADD CHILDREN POPUP ===== */
.children-popup {
  position: fixed;
  z-index: 40;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  border: 1px solid var(--line);
  padding: 16px;
  width: 220px;
  display: none;
}
.children-popup.is-open { display: block; }
.children-popup__arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--white);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
  top: -7px;
  left: 24px;
}
.children-popup__title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }

.count-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.count-row label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.count-row input[type="number"] {
  width: 64px;
  font-family: var(--font-body);
  font-size: 14.5px;
  text-align: center;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.count-row input[type="number"]:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-soft); }

.count-readout {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 500;
}

.popup-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ===== INLINE RENAME INPUT ===== */
.inline-name-input {
  position: fixed;
  z-index: 45;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: 4px 8px;
  border: 1.5px solid var(--pine);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  width: 130px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.inline-name-input:focus { outline: none; box-shadow: 0 0 0 3px var(--pine-soft); }

/* ===== RESULTS SLIDE-IN PANEL ===== */
.results-panel { position: fixed; inset: 0; z-index: 50; display: none; }
.results-panel.is-open { display: block; }
.results-panel__backdrop {
  position: absolute; inset: 0; background: rgba(29,29,31,0.25);
  opacity: 0; transition: opacity 0.25s;
}
.results-panel.is-open .results-panel__backdrop { opacity: 1; }

.results-panel__card {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--white);
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.results-panel.is-open .results-panel__card { transform: translateX(0); }

.results-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.results-panel__head h2 { font-size: 20px; }
.results-panel__close { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 6px; border-radius: 100px; }
.results-panel__close:hover { background: var(--paper); color: var(--ink); }

.results-panel__assumption {
  flex-shrink: 0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.results-panel__assumption-note {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.switch {
  width: 38px; height: 22px; border-radius: 100px; background: var(--line-strong);
  border: none; position: relative; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background 0.15s;
}
.switch[aria-pressed="true"] { background: var(--pine); }
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: var(--white); border-radius: 50%; transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch[aria-pressed="true"] .switch__knob { transform: translateX(16px); }

.results-panel__body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 12px; }

.results__intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

.summary-banner { border-radius: var(--radius-md); padding: 16px 18px; background: var(--pine-soft); border: 1px solid var(--pine); font-size: 13.5px; line-height: 1.55; }
.summary-banner strong { color: var(--pine); }
.summary-banner.warn { background: var(--amber-soft); border-color: var(--amber); }
.summary-banner.warn strong { color: var(--amber); }

.pattern-card { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.pattern-card.is-consistent { border-color: var(--pine); }
.pattern-card__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; cursor: pointer; user-select: none; }
.pattern-card.is-consistent .pattern-card__head { background: var(--pine-soft); }
.pattern-card.is-ruled-out .pattern-card__head { background: var(--paper); }
.pattern-card__title-group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pattern-card__name { font-size: 13.5px; font-weight: 600; }
.pattern-card__badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 100px; }
.pattern-card.is-consistent .pattern-card__badge { background: var(--pine); color: var(--white); }
.pattern-card.is-ruled-out .pattern-card__badge { background: var(--line-strong); color: var(--ink-soft); }
.pattern-card__chevron { color: var(--ink-soft); transition: transform 0.2s; flex-shrink: 0; }
.pattern-card.is-open .pattern-card__chevron { transform: rotate(180deg); }
.pattern-card__body { padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; }
.pattern-card.is-open .pattern-card__body { padding: 4px 14px 14px; max-height: 1000px; }

.violation-item { font-size: 12.5px; line-height: 1.55; color: var(--ink); padding: 9px 11px; background: var(--amber-soft); border-radius: var(--radius-sm); margin-bottom: 7px; border-left: 3px solid var(--amber); }
.consistent-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }

.genotype-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.genotype-table th { text-align: left; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; padding: 6px 7px; border-bottom: 1px solid var(--line); }
.genotype-table td { padding: 7px; border-bottom: 1px solid var(--line); }
.genotype-table td.mono { font-family: var(--font-mono); font-size: 12px; }
.certainty-tag { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.02em; }
.certainty-tag.certain { background: var(--pine-soft); color: var(--pine); }
.certainty-tag.likely { background: #FFF3D6; color: #8A6116; }
.certainty-tag.possible { background: var(--line); color: var(--ink-soft); }

/* ===== DISCLAIMER (collapsed footer strip) ===== */
.disclaimer {
  flex-shrink: 0;
  padding: 9px 24px;
  border-top: 1px solid var(--line);
  background: var(--white);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.disclaimer strong { color: var(--ink); }

/* ===== ABOUT MODAL ===== */
.modal { position: fixed; inset: 0; z-index: 60; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(29,29,31,0.4); backdrop-filter: blur(4px); }
.modal__card { position: relative; max-width: 520px; margin: 8vh auto 0; background: var(--white); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); max-height: 80vh; overflow-y: auto; }
.modal__card h3 { font-size: 20px; margin-bottom: 14px; }
.modal__card p { font-size: 14px; line-height: 1.6; color: var(--ink); margin-bottom: 12px; }
.modal__card ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.modal__card li { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.modal__card .btn { margin-top: 6px; }

/* ===== REMOVE CONFIRM MODAL ===== */
/* Compact variant: shorter max-width and tighter padding than the
   informational "How this works" modal, since this is a quick yes/no
   decision rather than something to read at length. Centered higher on
   the screen (lower margin-top) so it doesn't feel like a separate full
   page on mobile. */
.modal__card--compact { max-width: 380px; margin-top: 16vh; padding: 24px 26px; }
.modal__card--compact h3 { color: var(--red); }
.modal__card--compact .btn { margin-top: 0; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn--danger { background: var(--red); color: var(--white); }
.btn--danger:hover { background: #962019; }

/* The list of who else goes is rendered as real markup (not just plain
   text) so names are scannable rather than buried in a sentence -- this
   is the detail that makes the warning specific enough to actually be
   useful, instead of a generic "are you sure?" that people learn to
   click through without reading. */
.remove-confirm__names { margin: 10px 0 0; padding-left: 20px; }
.remove-confirm__names li { font-size: 13.5px; color: var(--ink); line-height: 1.5; }

/* ===== UNDO TOAST ===== */
/* A second, lighter safety net after the confirm dialog above -- for the
   rare case of confirming a removal and immediately regretting it. Slides
   up from the bottom, same shadow/radius language as the zoom controls
   so it reads as part of the same design system rather than a generic
   browser-style notification. */
.undo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px); width: max-content;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius-md); padding: 12px 16px 12px 18px;
  box-shadow: var(--shadow-float);
  font-size: 13.5px; z-index: 70;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.undo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.undo-toast__action {
  background: none; border: none; color: var(--white); font-weight: 600;
  font-size: 13.5px; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  text-decoration: underline; flex-shrink: 0; white-space: nowrap;
}
.undo-toast__action:hover { background: rgba(255,255,255,0.12); }
#undoToastMessage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 4px; }
  .topbar__name { display: none; } /* logo mark alone is enough at this width; frees room for action buttons */
  .topbar__actions { gap: 2px; }
  /* "How this works" and "Start over" move into the overflow menu on
     mobile, so the always-visible row is just Learn / Download / "⋯" /
     Analyze -- four compact items comfortably fit one line without
     needing horizontal scroll (the previous fix), which hid Analyze by
     default once "Download image" lengthened the row past the
     viewport. Learn stays visible rather than also going into the menu
     since it's the link into the /learn/ articles that the site's SEO
     depends on -- burying it would cost real traffic for the sake of
     topbar tidiness. */
  .topbar__actions .btn--ghost { padding: 8px 10px; font-size: 12.5px; }
  .topbar__actions .btn--primary { padding: 8px 14px; font-size: 13px; flex-shrink: 0; margin-left: 2px; }
  .topbar__overflow-trigger { width: 32px; height: 32px; }

  .empty-state__inner { padding: 0 20px; }
  .empty-state h1 { font-size: 23px; }
  .empty-state__actions { width: 100%; flex-direction: column; }
  .empty-state__actions .btn { width: 100%; }

  .results-panel__card { width: 100vw; }

  .legend { left: 12px; bottom: 12px; padding: 6px 12px; gap: 10px; }
  .legend__item { font-size: 11px; }

  /* Less horizontal padding so narrow viewports keep more usable chart
     width; the chart-wrap already scrolls (overflow: auto) once a tree
     grows past the viewport, same as a map or a wide table would. */
  .chart-wrap { padding: 50px 14px 90px; }

  /* The fixed-480px mobile override that used to live here is gone —
     min-width is now set inline by JS to the chart's own natural pixel
     width (renderPedigreeSVG in pedigree-render.js), which correctly
     scales with how many generations/people are actually in the tree,
     instead of one fixed number that was too small for big trees and
     unnecessarily large for tiny ones. */

  .hint-toast { font-size: 12px; padding: 8px 14px; max-width: 88vw; white-space: normal; text-align: center; }

  .popup-actions .btn { min-height: 38px; }
  .count-row input[type="number"] { min-height: 38px; }
}

/* Respect notches / home-indicator areas on phones that report safe-area
   insets, so the topbar and bottom-anchored legend/disclaimer never sit
   under the notch or get clipped by the home-indicator gesture area. */
@supports (padding: max(0px)) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .legend { left: max(18px, env(safe-area-inset-left)); }
  .disclaimer { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== SEO CONTENT SECTIONS ===== */
.tool-explainer,
.tool-faq,
.tool-related {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.tool-explainer h2,
.tool-faq h2,
.tool-related h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 14px;
}
.tool-explainer h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 18px 0 8px;
}
.tool-explainer p,
.tool-faq p,
.tool-related p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 12px;
}
.tool-explainer p:last-child,
.tool-faq p:last-child { margin-bottom: 0; }

/* ===== FAQ ACCORDION ===== */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: none; }

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-item summary:hover { color: var(--pine); }
.faq-item summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }

.faq-item__chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform 0.2s ease, color 0.15s;
}
.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--pine);
}
.faq-item[open] summary { color: var(--pine); }

.faq-item p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
  padding-right: 34px; /* align with summary text, not chevron */
}

.tool-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tool-related li { font-size: 14.5px; color: var(--ink-soft); }
.tool-related a { color: var(--pine); font-weight: 600; text-decoration: none; }
.tool-related a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .tool-explainer, .tool-faq, .tool-related { padding: 20px; }
}

/* ===== BELOW-CANVAS SEO CONTENT ===== */
.pedigree-seo {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
@media (max-width: 640px) {
  .pedigree-seo { padding: 32px 16px 60px; }
}