:root {
  --motion-productive-short: 70ms;
  --motion-productive-medium: 100ms;
  --motion-productive-long: 150ms;
  --motion-expressive-short: 250ms;
  --motion-expressive-long: 400ms;
  --motion-timing-enter: cubic-bezier(0, 0, 0.35, 1);
  --motion-timing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-timing-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-timing-emphasize: cubic-bezier(0, 0, 0.2, 1.4);
  --expand-animation-timing: var(--motion-timing-enter);

  --spacing-xs: 4px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  --border-width: 1px;
  --border-style: solid;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-big: 16px;

  --disabled-component-opacity: 0.38;

  --font-family: Figtree, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;
  --title-font-family: Poppins, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;
  --h1-font-family: var(--title-font-family);
  --font-smoothing-webkit: antialiased;
  --font-smoothing-moz: grayscale;
  --font-weight-very-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --font-line-height-10: 18px;
  --font-line-height-20: 24px;
  --font-line-height-30: 24px;
  --font-line-height-40: 24px;
  --font-line-height-50: 32px;
  --font-line-height-60: 42px;
  --font-size-10: 14px;
  --font-size-20: 14px;
  --font-size-30: 16px;
  --font-size-40: 18px;
  --font-size-50: 24px;
  --font-size-60: 30px;
  --font-size-h1: var(--font-size-60);
  --font-size-h2: var(--font-size-50);
  --font-size-h3: var(--font-size-50);
  --font-size-h4: var(--font-size-40);
  --font-size-h5: var(--font-size-30);
  --font-size-general-label: var(--font-size-20);
  --font-size-paragraph: var(--font-size-30);
  --font-size-subtext: var(--font-size-10);
  --font-line-height-h1: var(--font-line-height-60);
  --font-line-height-h2: var(--font-line-height-50);
  --font-line-height-h3: var(--font-line-height-50);
  --font-line-height-h4: var(--font-line-height-40);
  --font-line-height-h5: var(--font-line-height-30);
  --font-line-height-general-label: var(--font-line-height-20);
  --font-line-height-paragraph: var(--font-line-height-30);
  --font-line-height-subtext: var(--font-line-height-10);
  --font-h1: var(--font-weight-bold) var(--font-size-h1)/var(--font-line-height-h1) var(--title-font-family);
  --font-h2: var(--font-weight-bold) var(--font-size-h2)/var(--font-line-height-h2) var(--title-font-family);
  --font-h3: var(--font-weight-light) var(--font-size-h3)/var(--font-line-height-h3) var(--title-font-family);
  --font-h4: var(--font-weight-bold) var(--font-size-h4)/var(--font-line-height-h4) var(--title-font-family);
  --font-h5: var(--font-weight-bold) var(--font-size-h5)/var(--font-line-height-h5) var(--font-family);
  --font-general-label: var(--font-weight-normal) var(--font-size-general-label)/var(--font-line-height-general-label) var(--font-family);
  --font-paragraph: var(--font-weight-normal) var(--font-size-paragraph)/var(--font-line-height-paragraph) var(--font-family);
  --font-subtext: var(--font-weight-normal) var(--font-size-subtext)/var(--font-line-height-subtext) var(--font-family);
  --font-h1-bold: 700 32px/40px var(--title-font-family);
  --font-h1-medium: 600 32px/40px var(--title-font-family);
  --font-h1-normal: 500 32px/40px var(--title-font-family);
  --font-h1-light: 300 32px/40px var(--title-font-family);
  --font-h2-bold: 700 24px/30px var(--title-font-family);
  --font-h2-medium: 600 24px/30px var(--title-font-family);
  --font-h2-normal: 500 24px/30px var(--title-font-family);
  --font-h2-light: 300 24px/30px var(--title-font-family);
  --font-h3-bold: 700 18px/24px var(--title-font-family);
  --font-h3-medium: 600 18px/24px var(--title-font-family);
  --font-h3-normal: 500 18px/24px var(--title-font-family);
  --font-h3-light: 300 18px/24px var(--title-font-family);
  --font-text1-bold: 700 16px/22px var(--font-family);
  --font-text1-medium: 600 16px/22px var(--font-family);
  --font-text1-normal: 400 16px/22px var(--font-family);
  --font-text2-bold: 700 14px/20px var(--font-family);
  --font-text2-medium: 600 14px/20px var(--font-family);
  --font-text2-normal: 400 14px/20px var(--font-family);
  --font-text3-bold: 700 12px/16px var(--font-family);
  --font-text3-medium: 600 12px/16px var(--font-family);
  --font-text3-normal: 400 12px/16px var(--font-family);
  --letter-spacing-h1-bold: -0.5px;
  --letter-spacing-h1-normal: -0.5px;
  --letter-spacing-h1-light: -0.5px;
  --letter-spacing-h2-bold: -0.1px;
  --letter-spacing-h2-normal: -0.1px;
  --letter-spacing-h2-light: -0.1px;
  --letter-spacing-h3-bold: -0.1px;
  --letter-spacing-h3-normal: -0.1px;
  --letter-spacing-h3-light: -0.1px;

  /* Light Mode integration (mapped to Ancestree's semantic tokens) */
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #cce5ff;
  --primary-selected-hover-color: #aed4fc;
  --primary-highlighted-color: #f0f7ff;
  --primary-surface-color: #eceff8;
  --primary-text-color: #323338;
  --secondary-text-color: #676879;
  --text-color-on-inverted: #ffffff;
  --text-color-on-primary: #ffffff;
  --disabled-text-color: rgba(50, 51, 56, var(--disabled-component-opacity));
  --inverted-color-background: #323338;
  --fixed-dark-color: #323338;
  --fixed-light-color: #ffffff;
  --primary-background-color: #ffffff;
  --primary-background-hover-color: rgba(103, 104, 121, 0.1);
  --secondary-background-color: #ffffff;
  --allgrey-background-color: #f6f7fb;
  --backdrop-color: rgba(41, 47, 76, 0.7);
  --ui-border-color: #c3c6d4;
  --ui-background-color: #e7e9ef;
  --ui-background-hover-color: #d8d9e0;
  --layout-border-color: #d0d4e4;
  --placeholder-color: #676879;
  --icon-color: #676879;
  --disabled-background-color: #ecedf5;
  --link-color: #1f76c2;
  --brand-color: #0073ea;
  --brand-hover-color: #0060b9;
  --brand-selected-color: #cce5ff;
  --brand-selected-hover-color: #aed4fc;
  --positive-color: #00854d;
  --positive-color-hover: #007038;
  --positive-color-selected: #bbdbc9;
  --positive-color-selected-hover: #b5cec0;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #f4c3cb;
  --negative-color-selected-hover: #ecb7bf;
  --warning-color: #ffcb00;
  --warning-color-hover: #eaaa15;
  --warning-color-selected: #fceba1;
  --warning-color-selected-hover: #f2d973;

  /* Mapping existing Ancestree tokens to Monday.com Light Mode */
  --bg-canvas: var(--primary-background-color);
  --bg-sidebar: var(--allgrey-background-color);
  --bg-panel: var(--allgrey-background-color);
  --bg-node: var(--primary-surface-color);
  --border-subtle: var(--ui-border-color);
  --connection-line: var(--layout-border-color);
  --accent-blue: var(--primary-color);
  --text-main: var(--primary-text-color);
  --text-muted: var(--secondary-text-color);
  --error-soft: var(--negative-color);

  --bg: var(--allgrey-background-color);
  --panel: var(--allgrey-background-color);
  --ink: var(--primary-text-color);
  --muted: var(--secondary-text-color);

  --accent: var(--primary-color);
  --accent-hover: var(--primary-hover-color);
  --accent-light: var(--primary-highlighted-color);
  --accent-2: var(--color-purple);

  --danger: var(--negative-color);
  --danger-light: var(--negative-color-selected);
  --success: var(--positive-color);

  --line: var(--ui-border-color);

  --topbar-bg: var(--primary-surface-color);
  --topbar-text: var(--primary-text-color);
  --topbar-muted: var(--secondary-text-color);
  --topbar-sep: var(--layout-border-color);
  --topbar-hover: var(--primary-background-hover-color);
  --topbar-active: var(--primary-selected-hover-color);

  --sidebar-bg: var(--allgrey-background-color);
  --sidebar-text: var(--primary-text-color);
  --sidebar-muted: var(--secondary-text-color);
  --sidebar-hover: var(--primary-background-hover-color);
  --sidebar-active: var(--primary-selected-color);
  --sidebar-sep: var(--ui-border-color);

  --node-bg: var(--primary-surface-color);
  --node-stroke: var(--ui-border-color);
  --node-main: var(--primary-color);
  --node-main-bg: var(--primary-selected-color);
  --node-deceased: var(--disabled-background-color);
  --node-text: var(--primary-text-color);
  --node-muted: var(--secondary-text-color);
  --node-hover: var(--primary-selected-hover-color);
  --edge-color: #000000;

  /* Union edge highlight palette (8 distinct colors, visible on white canvas) */
  --union-c0: var(--color-royal);          /* blue       #216edf */
  --union-c1: var(--color-grass_green);    /* green      #037f4c */
  --union-c2: var(--color-bazooka);        /* pink-red   #f65f7c */
  --union-c3: var(--color-purple);         /* purple     #9d50dd */
  --union-c4: var(--color-working_orange); /* orange     #fdab3d */
  --union-c5: var(--color-teal);           /* teal       #175a63 */
  --union-c6: var(--color-berry);          /* berry      #7e3b8a */
  --union-c7: var(--color-indigo);         /* indigo     #5559df */

  --radius: var(--border-radius-small);
  --radius-lg: var(--border-radius-medium);

  /* Layout GAP numbers */
  --h-gap: 48;
  --v-gap: 80;

  /* Extra Monday.com Colors */
  --color-highlight_blue: #cce5ff;
  --color-basic_blue: #0073ea;
  --color-dark_blue: #0060b9;
  --color-bazooka: #f65f7c;
  --color-snow_white: #ffffff;
  --color-riverstone_gray: #f6f7fb;
  --color-ui_grey: #dcdfec;
  --color-wolf_gray: #c3c6d4;
  --color-asphalt: #676879;
  --color-mud_black: #323338;
  --color-black: #000000;
  --color-success: #00854d;
  --color-success-hover: #007038;
  --color-success-highlight: #bbdbc9;
  --color-error: #d83a52;
  --color-error-hover: #b63546;
  --color-error-highlight: #f4c3cb;
  --color-link_color: #1f76c2;
  --color-surface: #292f4c;
  --grey-background-color: #f6f7fb;
  --text-color-on-brand: #ffffff;
  --box-shadow-xs: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --box-shadow-small: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-medium: 0px 6px 20px rgba(0, 0, 0, 0.2);
  --box-shadow-large: 0px 15px 50px rgba(0, 0, 0, 0.3);
  --color-grass_green: #037f4c;
  --color-grass_green-hover: #116846;
  --color-grass_green-selected: #81bfa5;
  --color-done-green: #00c875;
  --color-done-green-hover: #0f9b63;
  --color-done-green-selected: #80e3ba;
  --color-done-green-selected-with-opacity: rgba(128, 227, 186, 0.6);
  --color-bright-green: #9cd326;
  --color-bright-green-hover: #7ca32b;
  --color-bright-green-selected: #cde992;
  --color-saladish: #cab641;
  --color-saladish-hover: #9d8f3e;
  --color-saladish-selected: #e4daa0;
  --color-egg_yolk: #ffcb00;
  --color-egg_yolk-hover: #eaaa15;
  --color-egg_yolk-selected: #ffe580;
  --color-egg_yolk-rgb: 255, 213, 51;
  --color-working_orange: #fdab3d;
  --color-working_orange-hover: #c0873c;
  --color-working_orange-selected: #fed59e;
  --color-dark-orange: #ff6d3b;
  --color-dark-orange-hover: #c25531;
  --color-dark-orange-selected: #ffb196;
  --color-peach: #ffadad;
  --color-peach-hover: #c2888a;
  --color-peach-selected: #ffd6d6;
  --color-sunset: #ff7575;
  --color-sunset-hover: #c26163;
  --color-sunset-selected: #ffbaba;
  --color-sunset-selected-with-opacity: rgba(255, 186, 186, 0.6);
  --color-stuck-red: #df2f4a;
  --color-stuck-red-hover: #ad3f51;
  --color-stuck-red-selected: #f0a1ad;
  --color-dark-red: #bb3354;
  --color-dark-red-hover: #92334c;
  --color-dark-red-selected: #dd99a9;
  --color-sofia_pink: #e50073;
  --color-sofia_pink-hover: #c20062;
  --color-sofia_pink-selected: #ff8ac4;
  --color-lipstick: #ff5ac4;
  --color-lipstick-hover: #c24e9a;
  --color-lipstick-selected: #fface1;
  --color-bubble: #faa1f1;
  --color-bubble-hover: #be80ba;
  --color-bubble-selected: #fcd0f8;
  --color-purple: #9d50dd;
  --color-purple-hover: #7d45b0;
  --color-purple-selected: #d0aeed;
  --color-dark_purple: #784bd1;
  --color-dark_purple-hover: #6344a3;
  --color-dark_purple-selected: #bba5e8;
  --color-berry: #7e3b8a;
  --color-berry-hover: #673971;
  --color-berry-selected: #be9dc4;
  --color-dark_indigo: #401694;
  --color-dark_indigo-hover: #3c1f78;
  --color-dark_indigo-selected: #a08bc9;
  --color-indigo: #5559df;
  --color-indigo-hover: #4b4ead;
  --color-indigo-selected: #aaacef;
  --color-navy: #225091;
  --color-navy-hover: #274776;
  --color-navy-selected: #90a7c8;
  --color-bright-blue: #579bfc;
  --color-bright-blue-hover: #4c7cc1;
  --color-bright-blue-selected: #abcdfd;
  --color-dark-blue: #007eb5;
  --color-dark-blue-hover: #0f6d97;
  --color-dark-blue-selected: #80c2df;
  --color-aquamarine: #4eccc6;
  --color-aquamarine-hover: #469e9b;
  --color-aquamarine-selected: #a6e5e2;
  --color-chili-blue: #66ccff;
  --color-chili-blue-hover: #569ec3;
  --color-chili-blue-selected: #b2e5ff;
  --color-river: #74afcc;
  --color-river-hover: #588095;
  --color-river-selected: #b3d0de;
  --color-winter: #9aadbd;
  --color-winter-hover: #7b8895;
  --color-winter-selected: #ccd6de;
  --color-explosive: #c4c4c4;
  --color-explosive-hover: #98999a;
  --color-explosive-selected: #e1e1e1;
  --color-american_gray: #757575;
  --color-american_gray-hover: #69696a;
  --color-american_gray-selected: #bfbfbf;
  --color-blackish: #333333;
  --color-blackish-hover: #222222;
  --color-blackish-selected: #999999;
  --color-brown: #7f5347;
  --color-brown-hover: #684943;
  --color-brown-selected: #bfa9a3;
  --color-orchid: #e484bd;
  --color-orchid-hover: #ae5d8d;
  --color-orchid-selected: #ecbad7;
  --color-tan: #bca58a;
  --color-tan-hover: #8a7862;
  --color-tan-selected: #d6cabc;
  --color-sky: #a1e3f6;
  --color-sky-hover: #81b6c5;
  --color-sky-selected: #d0f1fa;
  --color-coffee: #cd9282;
  --color-coffee-hover: #976758;
  --color-coffee-selected: #dec0b7;
  --color-royal: #216edf;
  --color-royal-hover: #225eb7;
  --color-royal-selected: #95bbf2;
  --color-teal: #175a63;
  --color-teal-hover: #12484f;
  --color-teal-selected: #8bacb1;
  --color-lavender: #bda8f9;
  --color-lavender-hover: #9786c7;
  --color-lavender-selected: #ded4fc;
  --color-steel: #a9bee8;
  --color-steel-hover: #8798ba;
  --color-steel-selected: #d4dff4;
  --color-lilac: #9d99b9;
  --color-lilac-hover: #7e7a94;
  --color-lilac-selected: #ceccdc;
  --color-pecan: #563e3e;
  --color-pecan-hover: #453232;
  --color-pecan-selected: #ab9f9f;
  --color-dark_marble: #f1f1f1;
  --color-marble: #f7f7f7;
  --color-gainsboro: #e1e1e1;
  --color-extra_light_gray: #edeef0;
  --color-glitter: #d9f0ff;
  --color-ultra_light_gray: #ebebeb;
  --color-very_light_gray: #a1a1a1;
  --color-jaco_gray: #9699a6;
  --color-storm_gray: #6b6d77;
  --color-trolley-grey: #757575;
}



.dark-app-theme {
  --edge-color: #000000;
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #133774;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0d2753;
  --primary-surface-color: #181b34;
  --primary-text-color: #d5d8df;
  --secondary-text-color: #9699a6;
  --text-color-on-inverted: #323338;
  --text-color-on-primary: #ffffff;
  --disabled-text-color: rgba(213, 216, 223, var(--disabled-component-opacity));
  --inverted-color-background: #ffffff;
  --fixed-dark-color: #323338;
  --fixed-light-color: #ffffff;
  --primary-background-color: #181b34;
  --primary-background-hover-color: rgba(103, 104, 121, 0.3);
  --secondary-background-color: #30324e;
  --allgrey-background-color: #30324e;
  --backdrop-color: rgba(41, 47, 76, 0.7);
  --ui-border-color: #797e93;
  --ui-background-color: #434660;
  --ui-background-hover-color: #35384d;
  --layout-border-color: #4b4e69;
  --placeholder-color: #c3c6d4;
  --icon-color: #c3c6d4;
  --disabled-background-color: #3c3f59;
  --link-color: #69a7ef;
  --brand-color: #0073ea;
  --brand-hover-color: #0060b9;
  --brand-selected-color: #133774;
  --brand-selected-hover-color: #0d2e65;
  --positive-color: #00854d;
  --positive-color-hover: #007038;
  --positive-color-selected: #025231;
  --positive-color-selected-hover: #194733;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --warning-color: #ffcb00;
  --warning-color-hover: #eaaa15;
  --warning-color-selected: #503e02;
  --warning-color-selected-hover: #402f00;
}

.black-app-theme {
  --edge-color: #000000;
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #133774;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0b2858;
  --primary-surface-color: #111111;
  --primary-text-color: #eeeeee;
  --secondary-text-color: #aaaaaa;
  --text-color-on-inverted: #111111;
  --text-color-on-primary: #ffffff;
  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --inverted-color-background: #eeeeee;
  --fixed-dark-color: #111111;
  --fixed-light-color: #ffffff;
  --primary-background-color: #111111;
  --primary-background-hover-color: rgba(103, 104, 121, 0.3);
  --secondary-background-color: #2c2c2c;
  --allgrey-background-color: #2c2c2c;
  --backdrop-color: rgba(33, 33, 33, 0.7);
  --ui-border-color: #8d8d8d;
  --ui-background-color: #4d4d4d;
  --ui-background-hover-color: #3b3b3b;
  --layout-border-color: #636363;
  --placeholder-color: #aaaaaa;
  --icon-color: #aaaaaa;
  --disabled-background-color: #3a3a3a;
  --link-color: #69a7ef;
  --brand-color: #0073ea;
  --brand-hover-color: #0060b9;
  --brand-selected-color: #133774;
  --brand-selected-hover-color: #0d2e65;
  --positive-color: #00854d;
  --positive-color-hover: #007038;
  --positive-color-selected: #025231;
  --positive-color-selected-hover: #194733;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --warning-color: #ffcb00;
  --warning-color-hover: #eaaa15;
  --warning-color-selected: #503e02;
  --warning-color-selected-hover: #402f00;
}

.hacker_theme-app-theme {
  --primary-color: #fe78c6;
  --primary-hover-color: #fe5ab9;
  --primary-selected-color: #9f4077;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0b2858;
  --primary-surface-color: #111111;
  --primary-text-color: #d5d8df;
  --secondary-text-color: #9699a6;
  --text-color-on-inverted: #323338;
  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --inverted-color-background: #ffffff;
  --fixed-dark-color: #323338;
  --fixed-light-color: #ffffff;
  --primary-background-color: #282a36;
  --primary-background-hover-color: #4b4e69;
  --secondary-background-color: #30324e;
  --allgrey-background-color: #282a36;
  --ui-border-color: #797e93;
  --ui-background-color: #4b4e69;
  --ui-background-hover-color: #3b3b3b;
  --layout-border-color: #414458;
  --placeholder-color: #c3c6d4;
  --icon-color: #c3c6d4;
  --disabled-background-color: #3a3a3a;
  --link-color: #bd93f9;
  --brand-color: #fe78c6;
  --brand-hover-color: #fe5ab9;
  --brand-selected-color: #9f4077;
  --brand-selected-hover-color: #0d2e65;
  --positive-color: #50fa7b;
  --positive-color-hover: #007038;
  --positive-color-selected: #26503e;
  --positive-color-selected-hover: #194733;
  --negative-color: #ff5555;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --warning-color: #ffcb00;
  --warning-color-hover: #eaaa15;
  --warning-color-selected: #503e02;
  --warning-color-selected-hover: #402f00;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  -webkit-font-smoothing: var(--font-smoothing-webkit);
  -moz-osx-font-smoothing: var(--font-smoothing-moz);
  color: var(--ink);
  background: var(--canvas-bg);
}

/* Top Bar */
.topbar {
  margin: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-sep);
  flex-shrink: 0;
  height: 48px;
}

.brand {
  height: 32px;
  width: auto;
  margin-right: 8px;
  flex-shrink: 0;
  display: block;
}

.topbar-group {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* All topbar buttons are ghost-on-dark by default */
.topbar button {
  border: none;
  background: transparent;
  color: var(--topbar-text);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
  opacity: 0.85;
}

.topbar button:hover:not(:disabled) {
  background: var(--topbar-hover);
  opacity: 1;
}

.topbar button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Primary action button — filled accent */
.topbar .btn-primary {
  background: var(--accent);
  color: var(--text-color-on-primary);
  font-weight: 600;
  opacity: 1;
  padding: 5px 12px;
}

.topbar .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  opacity: 1;
}

.topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--topbar-sep);
  margin: 0 6px;
  flex-shrink: 0;
}

.topbar-spacer {
  flex: 1;
}

.topbar-status {
  font-size: 11px;
  color: var(--topbar-muted);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive: topbar keeps a fixed 48px height, so the layout calc stays valid */
.topbar { min-width: 0; overflow: visible; }
.topbar-group, .view-toggle { flex-shrink: 0; }
@media (max-width: 1280px) {
  .topbar { padding: 0 10px; }
  .topbar-sep { margin: 0 3px; }
  .topbar-status { max-width: 160px; }
  /* labels stay visible: the Vibe leftIcon does not render in this build, so icon-only buttons would be blank */
}
@media (max-width: 1024px) {
  .topbar { padding: 0 8px; gap: 2px; }
  .brand { height: 26px; margin-right: 4px; }
  .topbar-status { display: none; }
}
@media (max-width: 800px) {
  .brand { display: none; }
  .topbar-sep { display: none; }
}

/* Buttons */
button,
.btn {
  border: 1px solid var(--line);
   background: var(--primary-background-color);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

button:hover:not(:disabled) {
  background: var(--ui-background-color);
  border-color: var(--ui-border-color);
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-color-on-primary);
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Ghost danger — border + text only, no fill */
.btn-danger {
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-light);
  border-color: var(--danger);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* Main Layout */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 64px); /* 48px topbar + 8px top margin + 8px bottom margin */
  overflow: hidden;
}

.layout.no-tree {
  grid-template-columns: 240px 1fr;
}

.layout.sidebar-collapsed {
  grid-template-columns: 40px 1fr 320px;
}

.layout.sidebar-collapsed.no-tree {
  grid-template-columns: 40px 1fr;
}

.layout.inspector-closed {
  grid-template-columns: 240px 1fr;
}

.layout.sidebar-collapsed.inspector-closed {
  grid-template-columns: 40px 1fr;
}

/* Sidebar */
.sidebar {
  margin: 8px 0 8px 8px;
  margin-inline: 8px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px 10px;
  background: var(--sidebar-bg);
  border-right: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.sidebar-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* Collapsed sidebar — thin strip */
.sidebar.sidebar-thin {
  padding: 14px 0 0 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* Sidebar toggle button */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.sidebar-toggle-btn:hover:not(:disabled) {
  background: var(--sidebar-hover);
  color: var(--text-main);
}

/* Collapse button sits at top-right of expanded sidebar */
.sidebar-toggle-collapse {
  align-self: flex-end;
  margin-bottom: 6px;
}

.sidebar-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--sidebar-sep);
}

.sidebar-section:first-child {
  padding-top: 0;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 700;
  padding: 0 6px 0 10px;
  border-left: 2px solid var(--accent);
}

.tree-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tree-item {
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: var(--sidebar-text);
  background: transparent;
  transition: background 0.12s;
}

.tree-item:hover {
  background: var(--sidebar-hover);
}

.tree-item.active {
  background: var(--sidebar-active);
  font-weight: 500;
}

/* Inputs & selects inside sidebar */
.sidebar input:not([type="checkbox"]):not([type="radio"]),
.sidebar select {
  background: var(--primary-background-color);
  border-color: var(--ui-border-color);
  color: var(--sidebar-text);
}

.sidebar input:focus,
.sidebar select:focus {
  border-color: var(--accent);
  outline: none;
}

.sidebar select option {
  background: var(--bg-panel);
  color: var(--text-main);
}

/* Labels inside sidebar */
.sidebar .field label {
  color: var(--sidebar-muted);
}

/* Buttons inside sidebar */
.sidebar button:not(.sidebar-toggle-btn) {
  background: transparent;
  border-color: var(--sidebar-sep);
  color: var(--sidebar-text);
}

.sidebar button:not(.sidebar-toggle-btn):hover:not(:disabled) {
  background: var(--sidebar-hover);
}

/* Canvas */
.canvas-wrap {
  direction: ltr; /* tree geometry stays LTR in RTL UI (project rule) */
  position: relative;
  background: transparent;
  padding: 8px;
  cursor: grab;
  min-height: 0;
  overflow: hidden;
}
.canvas-wrap.is-panning {
  cursor: grabbing;
}
/* Edges crossfade: whole edge layer fades in over TRANS_GHOST_MS */
@keyframes treeLayerEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tree-layer-entering {
  animation: treeLayerEnter 250ms linear forwards;
}

/* Per-node entrance stagger: fade + scale in, delay set inline by BFS distance */
@keyframes nodeEnter {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.node-group {
  /* transform-box: fill-box makes transform-origin relative to the node's own bbox,
     so scale(0.88) shrinks toward the node center, not the SVG origin */
  transform-box: fill-box;
  transform-origin: center;
}

.canvas-fit-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-node);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.canvas-fit-btn:hover {
  color: var(--text-main);
}

.tree-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
  border-radius: 12px;
  background: var(--bg-canvas);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tree-svg:active {
  cursor: grabbing;
}

.empty-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  gap: 12px;
}

.empty-canvas-illustration {
  opacity: 0.7;
  margin-bottom: 4px;
}

.empty-canvas-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}

.empty-canvas-sub {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 4px;
}

/* Welcome Screen */
.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--bg-canvas);
  margin: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 32px;
  max-width: 360px;
  width: 100%;
}

.welcome-illustration {
  width: 260px;
  height: auto;
  border-radius: 16px;
  margin-bottom: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.welcome-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.5px;
  margin: 0;
}

.welcome-tagline {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 6px;
}

.welcome-trees {
  width: 100%;
}

.welcome-trees-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 8px 2px;
}

.welcome-tree-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.welcome-tree-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.welcome-tree-item:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: var(--bg-panel);
}

.welcome-cta {
  margin-top: 6px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  border: none;
  color: white;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  width: 100%;
}

.welcome-cta:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 2px 12px var(--brand-glow, rgba(0, 115, 234, 0.3));
}

/* Inspector */
.inspector {
  margin: 8px 8px 8px 0;
  margin-inline: 0 8px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
  background: var(--panel);
  border-left: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.inspector-section {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.inspector-person-flags {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.inspector-section h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 12px;
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-height: 40px;
}

.inspector-header span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.inspector-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.inspector-close-btn:hover {
  background: var(--bg);
  color: var(--ink);
}

.inspector-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 48px 16px;
  text-align: center;
}

/* Form Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.field-label-row label {
  margin-bottom: 0;
}

.alias-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.alias-row input {
  flex: 1;
}

.alias-remove-btn {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alias-remove-btn:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

.aliases-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

input,
select,
textarea {
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--primary-background-color);
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--primary-background-color) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 5000s ease-in-out 0s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

textarea {
  min-height: 60px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-main);
}

.checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* SVG Nodes — uniform rounded rect for all genders */
.node-shape {
  fill: var(--node-bg);
  stroke: var(--node-stroke);
  stroke-width: 1.5;
  cursor: pointer;
  transition: stroke 0.15s, stroke-width 0.15s;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.07));
}

/* Subtle border tint from gender color (via CSS custom property on the element) */
.node-shape.gender-male    { stroke: color-mix(in srgb, var(--gender-male) 22%, var(--node-stroke)); }
.node-shape.gender-female  { stroke: color-mix(in srgb, var(--gender-female) 22%, var(--node-stroke)); }
.node-shape.gender-unknown { stroke: color-mix(in srgb, var(--gender-unknown) 18%, var(--node-stroke)); }

/* Gender background tint (not applied to main-person which has its own fill) */
.node-shape.gender-male:not(.main-person)    { fill: var(--node-male-fill); }
.node-shape.gender-female:not(.main-person)  { fill: var(--node-female-fill); }

/* non-binary / anything else */
.node-shape:not(.gender-male):not(.gender-female):not(.gender-unknown) {
  stroke: color-mix(in srgb, var(--gender-other) 22%, var(--node-stroke));
}

.node-group:hover .node-shape.gender-male    { stroke: color-mix(in srgb, var(--gender-male) 45%, var(--node-stroke)); stroke-width: 2; }
.node-group:hover .node-shape.gender-female  { stroke: color-mix(in srgb, var(--gender-female) 45%, var(--node-stroke)); stroke-width: 2; }
.node-group:hover .node-shape.gender-unknown { stroke: color-mix(in srgb, var(--gender-unknown) 38%, var(--node-stroke)); stroke-width: 2; }
.node-group:hover .node-shape:not(.gender-male):not(.gender-female):not(.gender-unknown) {
  stroke: color-mix(in srgb, var(--gender-other) 45%, var(--node-stroke)); stroke-width: 2;
}

.node-shape.selected {
  stroke: var(--accent-blue) !important;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-blue) 40%, transparent));
}

.node-shape.main-person {
  fill: var(--node-main-bg);
  stroke: var(--accent-blue) !important;
  stroke-width: 2 !important;
}

.node-shape.deceased {
  opacity: 0.7;
}

.node-main-ring {
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  opacity: 0.45;
  pointer-events: none;
}

.node-main-badge {
  fill: var(--accent-blue);
}

.node-main-badge-text {
  font-size: 8px;
  fill: var(--text-color-on-primary);
  font-weight: 900;
  pointer-events: none;
}

/* Node group hover scale */
.node-group {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.node-group:hover {
  transform: scale(1.035);
}

/* Gender badge — sits on the bottom border edge, half inside / half outside */
.gender-badge {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.node-group:hover .gender-badge {
  transform: scale(1.18);
}

.gender-badge-icon {
  font-size: 10px;
  font-weight: 700;
  fill: var(--text-color-on-primary);
  pointer-events: none;
}

.node-name {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  fill: var(--node-text);
  pointer-events: none;
}

.node-detail {
  font-family: var(--font-family);
  font-size: 10px;
  fill: var(--node-muted);
  pointer-events: none;
}

.node-badge {
  fill: var(--accent);
}

.node-badge-text {
  font-size: 8px;
  fill: var(--text-color-on-primary);
  font-weight: 700;
  pointer-events: none;
}

.edge-line {
  stroke: var(--edge-color);
  stroke-width: 2;
  fill: none;
  transition: opacity 0.12s, stroke-width 0.12s, stroke 0.12s;
}

.edge-line.dashed {
  stroke-dasharray: 4 4;
}

.edge-line.spouse {
  stroke: var(--edge-color);
}

.edge-line.faded {
  opacity: 0.1;
}

.edge-line.highlighted {
  stroke-width: 2.2;
  opacity: 1;
}


/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--panel);
  border-radius: 12px;
  padding: 0;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.modal h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.modal-body {
  padding: 20px 24px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  margin-top: 0;
}

/* Union Picker Modal */
.modal-desc {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}

.union-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.union-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.1s, border-color 0.1s;
}

.union-picker-item:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.union-picker-names {
  font-weight: 500;
}

.union-picker-count {
  font-size: 12px;
  color: var(--muted);
}

/* Person Picker Modal */
.person-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 10px;
}

.person-picker-search:focus {
  outline: none;
  border-color: var(--accent);
}

.person-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.person-picker-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  transition: background 0.1s, border-color 0.1s;
}

.person-picker-item:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.person-picker-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 20px 0;
}

/* Secondary action buttons */
.btn-secondary {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--muted);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--ink);
}

/* View Toggle */
.view-toggle {
  display: flex;
  border: 1px solid var(--topbar-sep);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-toggle button {
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-size: 12px;
  opacity: 0.7;
}

.view-toggle button.active {
  background: var(--topbar-active);
  color: var(--text-color-on-primary);
  opacity: 1;
}

.view-toggle button:hover:not(:disabled):not(.active) {
  background: var(--topbar-hover);
  opacity: 1;
}

/* Tree layout engine switch (L10) — in the sidebar's View Filter section */
.layout-engine { margin-top: 12px; }
.layout-engine-toggle { display: inline-flex; }
/* `.sidebar button` flattens every button to transparent; the chosen layout
   must still read as selected. */
.sidebar .layout-engine-toggle button[aria-pressed="true"] {
  background: var(--topbar-active);
  color: var(--text-color-on-primary);
}
.layout-engine.is-readonly .layout-engine-toggle { opacity: 0.5; pointer-events: none; }
.layout-engine-help,
.layout-engine-notice {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sidebar-muted);
}
.layout-engine-notice { color: var(--sidebar-text); }

/* Table View */
.table-outer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  margin: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: var(--panel);
  overflow: hidden;
}

.table-wrap {
  overflow: auto;
  flex: 1;
}

/* Vibe table container */
.ancestree-table {
  min-height: 0;
}

/* Header cell wrapper — the grid item in the Vibe TableHeader.
   Contains a VibeTableHeaderCell + resize handle. */
.tbl-vibe-th-wrap {
  position: relative;
  overflow: visible;
  min-width: 0;
}

/* Resize handle — sits at the right boundary between columns */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}

.col-resize-handle:hover,
.col-resize-handle:active {
  background: var(--accent);
  opacity: 0.5;
}

/* Clickable row wrapper — provides onClick and cursor */
.tbl-vibe-row-wrap {
  cursor: pointer;
}

/* Reduce the default Vibe cell padding for a denser layout */
.tbl-vibe-cell {
  padding: 2px 6px !important;
  overflow: visible !important;
}

.tbl-idx-cell {
  text-align: center;
  color: var(--secondary-text-color);
  font-size: 11px;
  user-select: none;
}

/* Ensure inputs / dropdowns fill the cell width */
.tbl-vibe-cell>* {
  width: 100%;
  min-width: 0;
}

/* Read-only computed text inside cells */
.tbl-computed-text {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Horizontal (single-row) date cell */
.tbl-date-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.tbl-date-input {
  flex: 1;
  min-width: 0;
}

/* Wrapper so a rejected-date message (B21) can use the whole column width
   instead of being squeezed into the input's flex track. */
.tbl-date-wrap {
  width: 100%;
}

.tbl-date-wrap .field-error {
  margin: 2px 0 0;
}

/* Table toolbar */
.tbl-toolbar {
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.tbl-col-badge {
  font-size: 10px;
  background: var(--accent);
  color: var(--text-color-on-primary);
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Column picker dropdown */
.tbl-col-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 180px;
}

.tbl-col-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.tbl-col-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  max-height: 340px;
  overflow-y: auto;
}

/* Version list */
.version-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
}

.version-item {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-item:hover {
  background: var(--bg);
}

/* Union Panel (within Inspector) */
.union-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.union-panel:hover {
  border-color: var(--border-subtle);
  background: var(--bg);
}

.union-panel-partners {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.union-panel-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.union-panel-children {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Preset editor */
.preset-fields {
  display: grid;
  gap: 4px;
}

.preset-fields label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--text-main);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Filter controls */
.filter-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.filter-row input[type="number"] {
  width: 50px;
}

/* Browser warning */
.browser-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  color: var(--danger);
  gap: 12px;
  padding: 24px;
}

.browser-warning h1 {
  font-size: 24px;
}

.browser-warning p {
  font-size: 14px;
  color: var(--muted);
  max-width: 400px;
}

/* Divorced union visual */
.edge-line.divorced {
  stroke-dasharray: 6 3;
  stroke: var(--danger);
}

/* Relation badge in inspector */
.relation-badge {
  display: inline-block;
  background: var(--accent-light);
  border: none;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

/* Input with inline clear button */
.input-wrap {
  position: relative;
}

.input-wrap>input,
.input-wrap>select,
.input-wrap input {
  width: 100%;
  padding-right: 28px;
}

.input-wrap>.clear-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 4px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s, background 0.12s, color 0.12s;
}

.input-wrap:hover>.clear-btn,
.input-wrap:focus-within>.clear-btn {
  opacity: 1;
}

.input-wrap>.clear-btn:hover {
  background: var(--danger-light);
  color: var(--danger);
}

/* Autocomplete suggestion dropdown */
.suggest-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--primary-background-color);
  border: 1px solid var(--ui-border-color);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow-small);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.suggest-option {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--primary-text-color);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest-option:hover {
  background: var(--primary-highlighted-color);
}

.clear-btn {
  flex-shrink: 0;
  padding: 0 7px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.clear-btn:hover {
  background: var(--danger-light);
  color: var(--danger);
  border-color: var(--danger);
}

/* Field label row — label + action button on same line (textarea, aliases) */
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.field-label-row label {
  margin-bottom: 0;
}

.field-label-row .clear-btn {
  padding: 1px 6px;
  font-size: 12px;
}

.alias-add-btn {
  padding: 1px 7px;
  font-size: 11px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
}

.alias-add-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.aliases-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.ids-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 28px 8px 8px;
  margin-bottom: 6px;
  background: var(--bg-subtle, rgba(0,0,0,0.02));
}

.ids-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
}

.ids-card-remove:hover {
  color: var(--text);
  background: var(--border);
}

.ids-card-type {
  margin-bottom: 6px;
}

.ids-card-fields {
  display: flex;
  gap: 6px;
}

.ids-card-fields > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Date field controls (mode toggle + clear) in header */
.date-field-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.date-field-controls .clear-btn {
  padding: 1px 6px;
  font-size: 12px;
}

/* B17 — list of children in the "whose children are these?" prompt */
.parentage-list {
  margin: 8px 0 12px;
  padding-left: 20px;
}

.parentage-list li {
  margin: 2px 0;
}

/* Explanatory note under a field — an automatic change or a disabled control (Q19) */
.field-note {
  color: var(--secondary-text-color);
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 8px;
}

/* Rejected-input message, e.g. a death date earlier than the birth date (B21) */
.field-error {
  color: var(--negative-color);
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 8px;
}

/* Date field with mode toggle */
.date-field-wrap {}

.date-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.date-field-header>label {
  margin-bottom: 0;
}

.date-mode-toggle {
  display: flex;
  gap: 6px;
}

.date-mode-opt {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.date-mode-opt.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

.date-mode-opt input[type="radio"] {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Computed (read-only) fields */
.field-computed {}

.computed-value {
  display: block;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.relation-value {
  text-transform: capitalize;
  color: var(--accent);
  background: var(--accent-light);
  border-color: var(--accent);
}

/* Focus ring for accessibility */
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-light);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Smooth transitions — scoped, not all 0.15s ease on button (too broad) */
.tree-item,
.version-item,
.union-panel {
  transition: background 0.12s, border-color 0.12s;
}

/* Dark/black theme shadow adjustments */
.dark-app-theme .sidebar,
.dark-app-theme .inspector,
.dark-app-theme .topbar,
.dark-app-theme .welcome-screen,
.dark-app-theme .table-outer,
.dark-app-theme .tree-svg,
.black-app-theme .sidebar,
.black-app-theme .inspector,
.black-app-theme .topbar,
.black-app-theme .welcome-screen,
.black-app-theme .table-outer,
.black-app-theme .tree-svg {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Scrollbar styling */
.sidebar::-webkit-scrollbar,
.inspector::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-sep);
  border-radius: 3px;
}

.inspector::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* Loading state */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px;
}

/* Print */
@media print {
  body {
    background: #fff;
  }

  .topbar,
  .sidebar,
  .inspector {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  body[data-export-branding]::after {
    content: attr(data-export-branding);
    position: fixed;
    bottom: 4mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9pt;
    color: #969696;
  }

  /* In print, always show union colors so crossing edges stay distinguishable */
  .edge-line.union-c0 {
    stroke: var(--union-c0);
  }

  .edge-line.union-c1 {
    stroke: var(--union-c1);
  }

  .edge-line.union-c2 {
    stroke: var(--union-c2);
  }

  .edge-line.union-c3 {
    stroke: var(--union-c3);
  }

  .edge-line.union-c4 {
    stroke: var(--union-c4);
  }

  .edge-line.union-c5 {
    stroke: var(--union-c5);
  }

  .edge-line.union-c6 {
    stroke: var(--union-c6);
  }

  .edge-line.union-c7 {
    stroke: var(--union-c7);
  }
}
/* Print Preview options (L4) */
.print-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-node);
}

.print-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.print-options input[type="checkbox"] {
  cursor: pointer;
}

/* CSV import (L5) */
.csv-intro {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.csv-intro code {
  background: var(--bg-node);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
}

.csv-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.csv-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink);
}

.csv-picker label > span em {
  color: var(--muted);
  font-style: normal;
}

.csv-filename {
  font-size: 12px;
  color: var(--muted);
}

.csv-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg-node);
  margin-bottom: 12px;
}

.csv-summary h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.csv-summary ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.csv-warnings {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.csv-warnings h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--danger);
}

.csv-warnings ul {
  font-size: 12px;
  color: var(--muted);
}

.csv-error {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0;
}

.csv-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Edit lease banner (B22) */
.lease-banner {
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--warning-color-selected);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.lease-banner-pending {
  background: var(--bg-node);
  color: var(--muted);
}

.lease-banner-stale {
  background: var(--negative-color-selected);
  color: var(--danger);
  border-bottom: 1px solid var(--danger);
}

/* Tree list controls (search / sort / archive) */
.tree-list-toolbar { display: flex; gap: 6px; margin-bottom: 6px; }
.tree-list-toolbar .tree-search { flex: 1; min-width: 0; }
.tree-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-archive-btn { visibility: hidden; flex: none; font-size: 11px; padding: 2px 6px; border-radius: var(--radius); border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; opacity: 0.8; }
.tree-row:hover .tree-archive-btn, .tree-archive-btn:focus { visibility: visible; }
.tree-list-empty { font-size: 12px; color: var(--sidebar-muted); padding: 4px 6px; }
.tree-archived-toggle { margin-top: 6px; background: none; border: none; color: var(--sidebar-muted); font-size: 12px; cursor: pointer; padding: 4px 6px; text-align: left; }
.tree-list-controls-welcome { width: 360px; max-width: 100%; margin: 0 auto 16px; }
.tree-list-controls-welcome .tree-item { color: inherit; border: 1px solid rgba(128,128,128,.3); margin-bottom: 4px; }
.tree-list-controls-welcome .tree-item:hover { background: rgba(128,128,128,.12); }
.tree-list-controls-welcome .tree-list-empty, .tree-list-controls-welcome .tree-archived-toggle { color: inherit; opacity: .7; }
.tree-list-controls-welcome .tree-list { max-height: 260px; overflow-y: auto; }
/* Export image dropdown (TopBar) */
.export-image-wrap { position: relative; display: inline-block; }
.export-image-menu { position: absolute; top: 100%; left: 0; z-index: 50; display: flex; flex-direction: column; min-width: 220px; background: var(--topbar-bg, var(--primary-background-color)); color: var(--topbar-text, inherit); border: 1px solid var(--topbar-sep, var(--layout-border-color)); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 4px 0; }
.export-image-menu button { background: none; border: 0; text-align: left; padding: 8px 12px; font: inherit; cursor: pointer; }
.export-image-menu button { color: var(--topbar-text, inherit); white-space: nowrap; }
.export-image-menu button:hover:not(:disabled) { background: var(--topbar-hover, var(--primary-surface-color)); }
.export-image-menu button:disabled { opacity: .45; cursor: default; background: none; }

.research-row { margin-bottom: 12px; }
.research-btn { width: 100%; }

.union-delete-btn { margin-top: 8px; }
.union-delete-btn:disabled { opacity: .5; cursor: not-allowed; }
.union-merge-keep, .union-merge-drop { margin: 4px 0; }
.union-merge-conflicts { margin-top: 12px; }
.union-merge-conflict { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }

.detach-picker { display: flex; flex-direction: column; gap: 6px; }
.detach-scope { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* "Unknown - to research" (ticket 3): distinct placeholder colour, same geometry */
.node-unknown { fill: var(--warning-color); font-style: italic; }
.unknown-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.unknown-chip { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; color: inherit; }
.unknown-chip.on { color: var(--warning-color); border-color: var(--warning-color); background: var(--warning-color-selected); }
.unknown-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* "To research" report (ticket 3) */
.research-report { width: 100%; border-collapse: collapse; font-size: 13px; }
.research-report th, .research-report td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--layout-border-color); }

/* RTL UI: tree canvas and SVG stay left-to-right */
[dir="rtl"] .canvas-wrap, [dir="rtl"] .tree-svg { direction: ltr; }

/* Case panel and case list (pack.caseWork) */
.case-panel .field { margin-bottom: 6px; }
.case-panel input[type=text], .case-panel input[type=date], .case-panel select { width: 100%; box-sizing: border-box; }
.case-add-btn, .case-remove-btn { font-size: 12px; cursor: pointer; }
.case-overdue-note { color: #d83a52; font-size: 12px; margin: 4px 0; }
.case-filters { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.case-badge { margin-inline-start: auto; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(128,128,128,.25); white-space: nowrap; }
.case-badge.case-closed { opacity: .6; }
.case-badge.case-overdue { background: #d83a52; color: #fff; }

.local-only-banner { background: #fff4d6; color: #5c4400; padding: 6px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #e6cf8a; }
.local-only-banner button { margin-left: auto; }