html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--md-sys-color-background);
}

@media print {

    html,
    body {
        height: auto;
    }
}

:root {
    color: var(--md-sys-color-on-surface);
    /* Web Awesome color token overrides.
     default.css (loaded in index.html) defines --wa-* tokens inside @layer wa-theme,
     so these unlayered declarations win without !important. The --md-sys-color-*
     values on the right are set dynamically by applyColors() in theme.js. */
    --wa-color-surface-raised: var(--md-sys-color-surface-container-high);
    --wa-color-surface-default: var(--md-sys-color-surface);
    --wa-color-surface-border: var(--md-sys-color-outline-variant);
    --wa-color-neutral-fill-normal: var(--md-sys-color-surface-container);
    --wa-color-brand-fill-loud: var(--md-sys-color-primary);
    --wa-color-text-normal: var(--md-sys-color-on-surface);
    --wa-color-focus: var(--md-sys-color-primary);
    --wa-form-control-border-color: var(--md-sys-color-outline);
    /* End Web Awesome overrides */
    --md-fab-secondary-container-color: var(--mdc-theme-secondary);
    --color-boy: #64b5f6;
    --color-girl: #ef9a9a;
    --color-unknown: #b0bec5;
    --color-other: #ce93d8;
    --mdc-theme-primary: var(--md-sys-color-primary);
    --mdc-theme-on-primary: var(--md-sys-color-on-primary);
    --mdc-theme-secondary: var(--md-sys-color-secondary);
    --mdc-theme-on-secondary: rgba(255, 255, 255, 0.95);
    --mdc-theme-background: var(--md-sys-color-background);
    --mdc-theme-surface: var(--md-sys-color-surface);
    --mdc-theme-on-surface: var(--md-sys-color-on-surface);
    --mdc-theme-text-primary-on-light: var(--md-sys-color-on-surface);
    --mdc-theme-text-secondary-on-light: var(--grampsjs-body-font-color);
    --mdc-theme-text-hint-on-light: var(--grampsjs-body-font-color);
    --mdc-theme-text-disabled-on-light: var(--grampsjs-body-font-color);
    --mdc-theme-text-icon-on-light: var(--grampsjs-body-font-color);
    --mdc-theme-text-primary-on-background: var(--grampsjs-body-font-color);
    --mdc-theme-text-secondary-on-background: var(--grampsjs-body-font-color-45);
    --grampsjs-face-rect-border-color: rgba(255, 255, 255, 0.6);
    --grampsjs-face-rect-border-shadow-color: rgba(0, 0, 0, 0.4);
    --grampsjs-face-rect-label-background-color: rgba(1, 1, 1, 0.25);
    --grampsjs-face-rect-label-color: #fff;
    --grampsjs-lightbox-background-color: #000;
    --grampsjs-lightbox-font-color: #fff;
    --grampsjs-lightbox-nav-color: #aaa;
    --grampsjs-lightbox-nav-hover-color: #fff;
    --grampsjs-alert-background-color: color-mix(in srgb,
            var(--md-sys-color-primary) 15%,
            transparent);
    --grampsjs-alert-border-color: color-mix(in srgb,
            var(--md-sys-color-primary) 70%,
            transparent);
    --grampsjs-alert-error-background-color: color-mix(in srgb,
            var(--md-sys-color-error) 20%,
            transparent);
    --grampsjs-alert-error-border-color: color-mix(in srgb,
            var(--md-sys-color-error) 70%,
            transparent);
    --grampsjs-alert-error-font-color: var(--md-sys-color-error);
    --grampsjs-map-marker-color: #ea4335;
    --grampsjs-map-filter-badge-color: #ba1b1b;
    --grampsjs-logout-font-color: #c62828;
    --grampsjs-alert-warn-background-color: rgba(251, 192, 45, 0.2);
    --grampsjs-alert-warn-border-color: rgba(251, 192, 45, 0.7);
    --grampsjs-alert-warn-font-color: #f9a825;
    --grampsjs-alert-success-font-color: #41ad49;
    --grampsjs-task-open: #007bff;
    --grampsjs-task-progress: #ff9800;
    --grampsjs-task-done: rgba(65, 173, 73, 0.4);
    --grampsjs-editable-title-hover-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 20%,
            transparent);
    --grampsjs-delete-all-filter-chip-color: color-mix(in srgb,
            var(--md-sys-color-primary) 32%,
            transparent);
    --grampsjs-connection-chart-border-color: color-mix(in srgb,
            var(--md-sys-color-primary) 40%,
            transparent);
    --grampsjs-connection-chart-person-box: #e6e6e6;
    --grampsjs-editable-list-hover-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 10%,
            transparent);
    --grampsjs-editable-list-active-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 20%,
            transparent);
    --grampsjs-editable-list-selected-active-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 30%,
            transparent);
    --grampsjs-editable-list-selected-hover-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 40%,
            transparent);
    --grampsjs-editable-list-selected-background-color: color-mix(in srgb,
            var(--mdc-theme-secondary) 50%,
            transparent);
    --grampsjs-color-link-font: var(--mdc-theme-secondary);
    --grampsjs-color-link-hover: color-mix(in srgb,
            var(--mdc-theme-secondary) 80%,
            black);
    --grampsjs-color-page-loading-progress: var(--mdc-theme-secondary);
}

:root[data-theme='light'] {
    --grampsjs-top-app-bar-background-color: var(--mdc-theme-primary);
    --grampsjs-top-app-bar-font-color: var(--mdc-theme-on-primary);
    --grampsjs-body-font-color: rgba(0, 0, 0, 0.8);
    --grampsjs-body-font-color-0: rgba(0, 0, 0, 0);
    --grampsjs-body-font-color-2: rgba(0, 0, 0, 0.02);
    --grampsjs-body-font-color-5: rgba(0, 0, 0, 0.05);
    --grampsjs-body-font-color-6: rgba(0, 0, 0, 0.06);
    --grampsjs-body-font-color-10: rgba(0, 0, 0, 0.1);
    --grampsjs-body-font-color-15: rgba(0, 0, 0, 0.15);
    --grampsjs-body-font-color-20: rgba(0, 0, 0, 0.2);
    --grampsjs-body-font-color-25: rgba(0, 0, 0, 0.25);
    --grampsjs-body-font-color-30: rgba(0, 0, 0, 0.3);
    --grampsjs-body-font-color-35: rgba(0, 0, 0, 0.35);
    --grampsjs-body-font-color-38: rgba(0, 0, 0, 0.38);
    --grampsjs-body-font-color-40: rgba(0, 0, 0, 0.4);
    --grampsjs-body-font-color-45: rgba(0, 0, 0, 0.45);
    --grampsjs-body-font-color-48: rgba(0, 0, 0, 0.48);
    --grampsjs-body-font-color-50: rgba(0, 0, 0, 0.5);
    --grampsjs-body-font-color-60: rgba(0, 0, 0, 0.6);
    --grampsjs-body-font-color-70: rgba(0, 0, 0, 0.7);
    --grampsjs-body-font-color-75: rgba(0, 0, 0, 0.75);
    --grampsjs-body-font-color-78: rgba(0, 0, 0, 0.78);
    --grampsjs-body-font-color-87: rgba(0, 0, 0, 0.87);
    --grampsjs-body-font-color-90: rgba(0, 0, 0, 0.9);
    --grampsjs-body-font-color-100: rgba(0, 0, 0, 1);
    --grampsjs-color-shade-40: rgb(40, 40, 40);
    --grampsjs-color-shade-120: rgb(120, 120, 120);
    --grampsjs-color-shade-200: rgb(200, 200, 200);
    --grampsjs-color-shade-220: rgb(220, 220, 220);
    --grampsjs-color-shade-230: rgb(230, 230, 230);
    --grampsjs-color-shade-240: rgb(240, 240, 240);
    --grampsjs-color-shade-255: rgb(255, 255, 255);
    --grampsjs-color-monospace: rgba(125, 0, 0, 0.8);
    --grampsjs-color-drawer-text: #444;
    --grampsjs-color-icon-default: #9e9e9e;
    --grampsjs-color-icon-selected: #393939;
    --grampsjs-color-skeleton-background: #eee;
    --grampsjs-color-skeleton-base: #ececec;
    --grampsjs-color-skeleton-shine: #f5f5f5;
    --grampsjs-color-revision-deleted-background-red: #ffebe9;
    --grampsjs-color-revision-added-background-green: #dafbe1;
    --grampsjs-color-revision-moved-background-blue: #ddf4ff;
    --grampsjs-color-revision-moved-font: #888;
    --grampsjs-color-revision-error-background: #f00;
    --grampsjs-color-revision-error-font: #fff;
    --grampsjs-color-icon-background: rgba(0, 0, 0, 0.25);
    --grampsjs-color-icon: #fff;
    --grampsjs-color-ytree-expand-background: #eee;
    --grampsjs-color-ytree-expand-font: #555;
    --grampsjs-color-ytree-default-person-icon-background: #bbb;
    --grampsjs-note-color: #333;
    /* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
}

:root[data-theme='dark'] {
    --grampsjs-top-app-bar-background-color: var(--md-sys-color-surface-container);
    --grampsjs-top-app-bar-font-color: var(--md-sys-color-on-surface);
    --grampsjs-body-font-color: rgba(255, 255, 255, 0.8);
    --grampsjs-body-font-color-0: rgba(255, 255, 255, 0);
    --grampsjs-body-font-color-2: rgba(255, 255, 255, 0.05);
    --grampsjs-body-font-color-5: rgba(255, 255, 255, 0.08);
    --grampsjs-body-font-color-6: rgba(255, 255, 255, 0.1);
    --grampsjs-body-font-color-10: rgba(255, 255, 255, 0.12);
    --grampsjs-body-font-color-15: rgba(255, 255, 255, 0.18);
    --grampsjs-body-font-color-20: rgba(255, 255, 255, 0.22);
    --grampsjs-body-font-color-25: rgba(255, 255, 255, 0.27);
    --grampsjs-body-font-color-30: rgba(255, 255, 255, 0.32);
    --grampsjs-body-font-color-35: rgba(255, 255, 255, 0.37);
    --grampsjs-body-font-color-38: rgba(255, 255, 255, 0.4);
    --grampsjs-body-font-color-40: rgba(255, 255, 255, 0.42);
    --grampsjs-body-font-color-45: rgba(255, 255, 255, 0.47);
    --grampsjs-body-font-color-48: rgba(255, 255, 255, 0.5);
    --grampsjs-body-font-color-50: rgba(255, 255, 255, 0.52);
    --grampsjs-body-font-color-60: rgba(255, 255, 255, 0.6);
    --grampsjs-body-font-color-70: rgba(255, 255, 255, 0.7);
    --grampsjs-body-font-color-75: rgba(255, 255, 255, 0.75);
    --grampsjs-body-font-color-78: rgba(255, 255, 255, 0.78);
    --grampsjs-body-font-color-87: rgba(255, 255, 255, 0.87);
    --grampsjs-body-font-color-90: rgba(255, 255, 255, 0.9);
    --grampsjs-body-font-color-100: rgba(255, 255, 255, 1);
    --grampsjs-color-shade-40: rgb(215, 215, 215);
    --grampsjs-color-shade-120: rgb(135, 135, 135);
    --grampsjs-color-shade-200: rgb(55, 55, 55);
    --grampsjs-color-shade-220: rgb(35, 35, 35);
    --grampsjs-color-shade-230: rgb(25, 25, 25);
    --grampsjs-color-shade-240: rgb(15, 15, 15);
    --grampsjs-color-shade-255: rgb(0, 0, 0);
    --grampsjs-color-monospace: rgba(255, 100, 100, 0.85);
    --grampsjs-color-drawer-text: #bbb;
    --grampsjs-color-icon-default: #616161;
    --grampsjs-color-icon-selected: #c6c6c6;
    --grampsjs-color-skeleton-background: #222;
    --grampsjs-color-skeleton-base: #232323;
    --grampsjs-color-skeleton-shine: #1a1a1a;
    --grampsjs-color-revision-deleted-background-red: rgba(248, 81, 73, 0.3);
    --grampsjs-color-revision-added-background-green: rgba(46, 160, 67, 0.15);
    --grampsjs-color-revision-moved-background-blue: rgba(56, 139, 253, 0.1);
    --grampsjs-color-revision-moved-font: #777;
    --grampsjs-color-revision-error-background: #f00;
    --grampsjs-color-revision-error-font: #fff;
    --grampsjs-color-icon-background: rgba(255, 255, 255, 0.15);
    --grampsjs-color-icon: rgba(255, 255, 255, 0.6);
    --grampsjs-color-ytree-expand-background: var(--md-sys-color-surface-container);
    --grampsjs-color-ytree-expand-font: var(--md-sys-color-on-surface);
    --grampsjs-color-ytree-default-person-icon-background: var(--md-sys-color-surface-container);
    --grampsjs-note-color: #ccc;
    --grampsjs-map-marker-color: #bb1f11;
    /* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
    --mdc-select-fill-color: var(--md-sys-color-surface-container-highest);
    --mdc-select-ink-color: var(--md-sys-color-on-surface);
    --mdc-select-label-ink-color: rgba(255, 255, 255, 0.5);
    --mdc-select-dropdown-icon-color: var(--grampsjs-body-font-color);
    --mdc-select-idle-line-color: var(--grampsjs-body-font-color);
    --mdc-select-hover-line-color: var(--md-sys-color-on-surface);
    --mdc-select-outlined-idle-border-color: var(--grampsjs-body-font-color);
    --mdc-select-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
    --mdc-select-disabled-fill-color: rgba(229, 226, 225, 0.04);
    --mdc-select-disabled-ink-color: var(--grampsjs-body-font-color-40);
    --mdc-select-disabled-dropdown-icon-color: var(--grampsjs-body-font-color-40);
    --mdc-select-outlined-disabled-border-color: var(--grampsjs-body-font-color-30);
    --mdc-text-field-idle-line-color: var(--grampsjs-body-font-color);
    --mdc-text-field-hover-line-color: var(--md-sys-color-on-surface);
    --mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color);
    --mdc-text-field-outlined-idle-border-color: var(--grampsjs-body-font-color);
    --mdc-text-field-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
    --mdc-text-field-outlined-disabled-border-color: var(--grampsjs-body-font-color);
    --mdc-text-field-fill-color: var(--md-sys-color-surface-container-highest);
    --mdc-text-field-ink-color: var(--md-sys-color-on-surface);
    --mdc-text-field-label-ink-color: var(--grampsjs-body-font-color);
    --mdc-text-field-disabled-fill-color: rgba(229, 226, 225, 0.04);
    --mdc-text-field-disabled-ink-color: var(--grampsjs-body-font-color-40);
    --mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color-40);
    --mdc-linear-progress-buffer-color: var(--md-sys-color-surface-container-highest);
    --mdc-button-outline-color: var(--md-sys-color-outline);
    --mdc-button-disabled-outline-color: rgba(229, 226, 225, 0.12);
    --mdc-button-disabled-fill-color: rgba(229, 226, 225, 0.12);
    --mdc-button-disabled-ink-color: rgba(229, 226, 225, 0.38);
    --mdc-theme-text-icon-on-background: var(--grampsjs-body-font-color-60);
    --mdc-checkbox-unchecked-color: var(--md-sys-color-on-surface-variant);
    --mdc-checkbox-disabled-color: rgba(229, 226, 225, 0.38);
}
/* === Kinship tree (family-chart) view === */
/* Palette: warm archive — wine #681521, ochre #d49434, cream #f7f4ee
   (design study via inspo: warm genealogy-editor consensus) */
.kintree {
  display: block;
  position: relative;
  --kintree-bg: #f7f4ee;
  --kintree-fg: #33261f;
  --kintree-accent: #681521;
  --kintree-gold: #d49434;
  --kintree-male: #6481ab;
  --kintree-female: #cd9aa0;
  --kintree-neutral: #b3a697;
  --kintree-panel: #fffdf8;
  --kintree-stroke: #d8cfc2;
}

.kintree.dark {
  --kintree-bg: #23211d;
  --kintree-fg: #f0ebe2;
  --kintree-accent: #e8b3bd;
  --kintree-gold: #d4a963;
  --kintree-male: #7d9dc4;
  --kintree-female: #c98f98;
  --kintree-neutral: #8a7d6f;
  --kintree-panel: #2b2925;
  --kintree-stroke: #4a443c;
}

/* family-chart theme variables */
.kintree .f3 {
  --background-color: var(--kintree-bg);
  --text-color: var(--kintree-fg);
  --male-color: var(--kintree-male);
  --female-color: var(--kintree-female);
  --genderless-color: var(--kintree-neutral);
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
  font-family: var(--grampsjs-body-font-family, inherit);
}

.kintree.dark .f3 {
  filter: none;
}

.kintree .f3 .card-main-outline {
  stroke: var(--kintree-gold);
}

.kintree .f3 svg.main_svg {
  cursor: grab;
}

.kintree .f3 svg.main_svg:active {
  cursor: grabbing;
}

.kintree .kintree-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  position: relative;
  z-index: 5;
}

.kintree .kintree-toolbar input {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 260px;
  padding: 7px 12px;
  border: 1px solid var(--kintree-accent);
  border-radius: 8px;
  font-size: 14px;
  background: var(--kintree-panel);
  color: var(--kintree-fg);
}

.kintree .kintree-search-list {
  position: absolute;
  z-index: 20;
  background: var(--kintree-panel);
  border: 1px solid var(--kintree-stroke);
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
  min-width: 260px;
  box-shadow: 0 4px 14px rgba(40, 25, 15, 0.12);
}

.kintree .kintree-search-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--kintree-fg);
}

.kintree .kintree-search-list button:hover,
.kintree .kintree-search-list button:focus {
  background: rgba(212, 148, 52, 0.18);
}

.kintree .kintree-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--kintree-bg);
  color: var(--kintree-fg);
  border: 1px solid var(--kintree-stroke);
  height: calc(100vh - 240px);
  min-height: 420px;
}

.kintree .kintree-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-height: 100%;
  overflow: auto;
  background: var(--kintree-panel);
  border: 1px solid var(--kintree-stroke);
  border-radius: 10px;
  padding: 14px;
  box-sizing: border-box;
  z-index: 10;
}

.kintree .kintree-panel h4 {
  margin: 0 0 4px 0;
  color: var(--kintree-fg);
}

.kintree .kintree-panel .years {
  color: var(--kintree-neutral);
  margin-bottom: 8px;
}

.kintree .kintree-panel .rel {
  font-size: 0.9em;
  margin: 3px 0;
  color: var(--kintree-fg);
}

.kintree .kintree-panel .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.kintree .kintree-panel .actions md-filled-button {
  --md-filled-button-container-color: var(--kintree-accent);
}

.kintree .kintree-panel .close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--kintree-fg);
}

@media (max-width: 720px) {
  .kintree .kintree-panel {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 45%;
    border-radius: 10px 10px 0 0;
  }
}

@media (max-width: 599px) {
  .kintree .kintree-canvas {
    height: calc(100vh - 190px);
    min-height: 320px;
  }
  .kintree .kintree-toolbar {
    gap: 6px;
  }
}

/* family-chart card override: our own card markup via cardInnerHtmlCreator */
.kintree .f3 .card {
  background: transparent;
}

.kintree .kintree-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1.5px solid var(--kintree-stroke);
  background: var(--kintree-panel);
  color: var(--kintree-fg);
  cursor: pointer;
  font-family: var(--grampsjs-body-font-family, inherit);
  overflow: hidden;
}

.kintree .kintree-card-male {
  border-color: var(--kintree-male);
}

.kintree .kintree-card-female {
  border-color: var(--kintree-female);
}

.kintree .kintree-card-main {
  border-color: var(--kintree-gold);
  border-width: 2.5px;
  box-shadow: 0 3px 10px rgba(40, 25, 15, 0.18);
}

.kintree .kintree-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: var(--kintree-neutral);
}

.kintree .kintree-card-male .kintree-avatar {
  background: var(--kintree-male);
}

.kintree .kintree-card-female .kintree-avatar {
  background: var(--kintree-female);
}

.kintree .kintree-card-text {
  min-width: 0;
}

.kintree .kintree-card-text .n1 {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kintree .kintree-card-text .n2 {
  font-size: 11px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}