/*! ANNULARITY — Version 0.3.28a — Copyright (c) 2026 ANNULARITY. All rights reserved. */
:root {
      /* brand palette (from the header artwork) */
      --brand-navy: #172a5e;
      --brand-gold: #e6aa1e;
      --brand-gold-soft: #f2d38a;
      --brand-cream: #fefcf7;
      --brand-line: #adb3c1;
      --brand-h: 132px;
      --brand-pad-b: 7px;   /* breathing room under the tagline */
      --background: #fefcf7;
      --text: #172a5e;
      --grid: #e2e8f0;
      --male: #5b9bd5;
      --female: #f48fb1;
      --unknown: #90a4ae;
    }

    * {
      box-sizing: border-box;
    }
	
	html, body {
	  height: 100vh;
	  height: 100dvh;
	  margin: 0;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	}

    body {
      background: var(--brand-cream);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    header {
      position: relative;
      padding: 0 20px var(--brand-pad-b) 14px;
      min-height: calc(var(--brand-h) + var(--brand-pad-b));
      background: var(--brand-cream);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 12px;
    }
    /* the rule runs the full width at the height the logo's baseline sits on in the artwork (116 / 164 of its height) */
    header::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: calc(var(--brand-h) * 0.4588);   /* the rule in the logo artwork (78 / 170 of its height): one line, the logo's own */
      height: 1px;
      background: var(--brand-line);
      pointer-events: none;
    }
    .brand { margin: 0; line-height: 0; flex: none; }
    .brand img { height: var(--brand-h); width: auto; max-width: 100%; display: block; }



    .color-menu { position: relative; }
    .color-menu-btn {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 20px; padding: 0 4px; border-radius: 10px;
      background: #fff; border: 1px solid var(--brand-line);
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
    }
    .color-menu-swatch { display: block; flex: 1; height: 8px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.12); }
    .color-menu-btn:not(:disabled):hover { border-color: var(--brand-gold); }
    .color-menu-btn[aria-expanded="true"] { background: var(--brand-navy); border-color: var(--brand-navy); }
    .color-menu-btn b { font-weight: 800; }
    .color-menu-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .color-menu-pop {
      position: absolute; top: -6px; left: calc(100% + 12px); z-index: 2000;
      min-width: 210px; max-width: calc(100vw - 24px);
      background: white; border: 1px solid #cbd5e1; border-radius: 12px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); padding: 6px;
    }
    .color-menu-pop[hidden] { display: none; }
    .color-menu-pop::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }   /* hover bridge to the button */
    .color-menu-group {
      padding: 6px 8px 2px; font-size: 10px; font-weight: 800;
      letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8;
    }
    .color-menu-pop button {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 6px 8px; border: none; background: transparent; border-radius: 8px;
      font-size: 12px; font-weight: 600; color: #334155; text-align: left; cursor: pointer;
    }
    .color-menu-pop button:not(:disabled):hover { background: #f1f5f9; }
    .color-menu-pop button.active { background: #fbf1d3; color: var(--brand-navy); font-weight: 800; }
    .color-menu-pop button.active::after { content: "\2713"; margin-left: auto; color: var(--brand-gold); }
    .color-menu-pop button:disabled { opacity: 0.4; cursor: not-allowed; }
    .color-menu-pop i { flex: none; width: 34px; height: 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); }


    #tooltip {
      position: fixed;
      z-index: 10000; /* above header, sidebar and legend so every tooltip is visible */
      display: none;
      padding: 8px 12px;
      border-radius: 6px;
      color: white;
      background: rgba(33, 43, 54, 0.95);
      font-size: 12px;
	  text-align: center;
      line-height: 1.45;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    main {
      --sidebar-w: 320px;
      display: flex;
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    #chartArea {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: var(--background);
      touch-action: none;
    }

    /* Sidebar Styling (Positioned Right) */
    #sidebar {
      width: var(--sidebar-w);
      background: #ffffff;
      border-left: 1px solid #cbd5e1;
      display: flex;
      flex-direction: column;
      box-shadow: -2px 0 8px rgba(0,0,0,0.05);
      z-index: 9;
      /* overlays the chart (which never resizes), sliding in from the right */
      position: absolute; top: 0; right: 0; bottom: 0;
      transition: transform 0.25s ease-in-out, box-shadow 0.25s;
      transform: translateX(0);
    }

    #sidebar.hidden {
      transform: translateX(100%);
      box-shadow: none;
    }


    #sidebarResizer {
      position: absolute; left: -9px; top: 0; bottom: 0; width: 18px;
      cursor: col-resize; z-index: 3; touch-action: none;
    }
    #sidebarResizer::after {
      content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
      background: transparent; transition: background 0.15s ease;
    }
    #sidebarResizer::before {
      content: ""; position: absolute; left: 2px; top: 50%; width: 14px; height: 46px;
      transform: translateY(-50%); box-sizing: border-box; padding: 13px 4px;
      border: 1px solid #cbd5e1; border-radius: 8px;
      background: repeating-linear-gradient(#94a3b8 0 1.5px, transparent 1.5px 5px) content-box, #ffffff padding-box;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #sidebar.hidden #sidebarResizer { display: none; }
    #sidebarResizer:hover::after, main.sidebar-resizing #sidebarResizer::after { background: rgba(91, 155, 213, 0.6); }
    #sidebarResizer:hover::before, main.sidebar-resizing #sidebarResizer::before { border-color: var(--brand-gold); box-shadow: 0 1px 6px rgba(230, 170, 30, 0.45); }
    main.sidebar-resizing { user-select: none; }
    main.sidebar-resizing #sidebar { transition: none; }
    @media (max-width: 768px) { #sidebarResizer { display: none; } }

    .sidebar-header {
      padding: 12px 16px;
      border-bottom: 1px solid #e2e8f0;
      background: var(--brand-cream);
      color: var(--brand-navy);
      font-weight: bold;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sidebar-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      font-size: 12px;
    }

    .sidebar-table { width: 100%; border-collapse: collapse; table-layout: auto; }
    .sidebar-table td { padding: 5px 0; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .sidebar-event .ev-date { text-align: right; white-space: nowrap; width: 1%; padding-right: 8px; font-weight: 700; }
    .sidebar-event .ev-src { text-align: center; width: 1%; min-width: 10px; padding: 0 6px; }
    .sidebar-event .ev-main { text-align: left; min-width: 0; overflow-wrap: anywhere; }
    .ev-abbr, .ev-conj { font-weight: 500; font-size: 0.85em; color: #8a97a8; }
    .ev-loc { margin-top: 1px; }
    .ev-loc.sidebar-loc { white-space: normal; }
    .loc-inferred { font-style: normal; font-size: 0.85em; color: #8a97a8; }
    .sidebar-event.is-relative { padding: 3px 0; font-size: 10px; color: #7b8794; }
    .sidebar-event.is-relative .sidebar-event-type { color: #7b8794 !important; font-style: italic; }
    .sidebar-event.is-relative .sidebar-year { font-weight: 600; }
    .sidebar-event-type { color: #475569; }
    .sidebar-event[data-years]:hover { background: #fff7ed; }

    .sidebar-event { cursor: default; }
    .sidebar-event * { cursor: inherit; }
    .sidebar-event .sidebar-event-link { cursor: pointer; }
    .sidebar-event .sidebar-src-link, .sidebar-event .src-chip { cursor: pointer; }
    .src-chip {
      display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; margin: 0;
      border: 1px solid #d5dde8; border-radius: 9px; background: #f1f5f9; color: #5b7fa6;
      font: 700 9px/1.4 inherit; font-family: inherit; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .src-chip:hover, .src-chip.is-open { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
    .sidebar-sources { min-width: 0; font-size: 10px; color: #64748b; overflow-wrap: anywhere; }
    .sidebar-src-row td { border-bottom: 1px solid #f1f5f9; padding: 0 0 6px; }
    .sidebar-src { margin: 2px 0 0 10px; padding: 4px 6px; border-left: 2px solid #cbd5e1; background: #f8fafc; border-radius: 0 4px 4px 0; min-width: 0; }
    .sidebar-src-title { font-weight: 700; color: #334155; }
    .sidebar-src-page { color: #475569; }
    .sidebar-src-link { color: #2563eb; }
    .sidebar-src-text { margin-top: 3px; color: #475569; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 110px; overflow: auto; }
    .is-inferred { font-style: italic; color: #8a97a8; font-weight: 600; }
    .sidebar-year {
      text-decoration: underline dotted #94a3b8;
      text-underline-offset: 2px;
    }

    .sidebar-event-link {
      color: #5b9bd5;
      text-decoration: underline;
      cursor: pointer;
    }

    .sidebar-event-link:hover {
      color: #1d4ed8;
    }

    /* Find A Grave SEARCH badge: a small grave with a magnifying glass over it, both
       top-aligned in one flex box, the glass shifted back over the grave. */
    .fag-search {
      display: inline-flex;
      align-items: flex-start;
      justify-content: flex-start;
      height: 14px;
      margin-left: 3px;
      line-height: 1;
      text-decoration: none;
      vertical-align: top;
    }
    .fag-search .fag-grave {
      font-size: 9px;
      opacity: 0.55;
    }
    .fag-search .fag-glass {
      font-size: 12px;
      opacity: 0.85;
      margin-left: -8px;
    }
    .fag-search:hover .fag-grave,
    .fag-search:hover .fag-glass {
      opacity: 1;
    }

    /* Links inside the WikiTree biography and the 🌳 / 🪦 header links */
    .sidebar-content details a {
      color: #336699;
      text-decoration: underline;
    }
    .sidebar-content details a:hover {
      color: #1d4ed8;
    }

    #emptyState {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #90a4ae;
      font-size: 15px;
      text-align: center;
      pointer-events: none;
    }

    #chart {
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab;
    }
    #chart:active { cursor: grabbing; }
	
	
    .person-group { cursor: pointer; }

    /* The (+)/(-) badges live outside any .person-group specifically so hovering or
       clicking one never triggers that person's own hover-highlight or navigation.
       They get their own, separate hover feedback instead. */

    /* :hover (mouse over a person directly) and .linked-hover (a related person --
       e.g. a spouse -- lighting up together) get identical treatment, so they're
       written as one shared rule set instead of two near-duplicates. */
    /* hover / linked / pinned: every kind of line grows by a factor of its own width (--w is set on each line when it is drawn), so a thick line never shrinks */
    .person-group:hover path.interactive-line:not(.spouse-line-path):not(.connector-arc-line),
    .person-group.linked-hover path.interactive-line:not(.spouse-line-path):not(.connector-arc-line),
    .person-group.is-pinned path.interactive-line:not(.spouse-line-path):not(.connector-arc-line) { stroke-width: calc(var(--w, 3px) * 1.7) !important; }
    .person-group:hover path.interactive-line.connector-arc-line,
    .person-group.linked-hover path.interactive-line.connector-arc-line,
    .person-group.is-pinned path.interactive-line.connector-arc-line,
    .person-group:hover path.interactive-line.spouse-line-path,
    .person-group.linked-hover path.interactive-line.spouse-line-path,
    .person-group.is-pinned path.interactive-line.spouse-line-path { stroke-width: calc(var(--w, 1.5px) * 2) !important; }
    .person-group:hover circle.interactive-line,
    .person-group.linked-hover circle.interactive-line,
    .person-group.is-pinned circle.interactive-line { r: calc(var(--w, 3px) * 1.7) !important; }
    .person-group:hover text,
    .person-group.linked-hover text,
    .person-group.is-pinned text {
      fill: #4a8ac4 !important;
      font-weight: bold !important;
      font-size: 100% !important;
    }
    .spouse-connector { pointer-events: none; }

    .legend-scroll-wrapper {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      pointer-events: auto;
    }

    .legend-body::-webkit-scrollbar {
      width: 5px;
    }
    .legend-body::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    .legend-scroll-wrapper { display: flex; flex-direction: column; overflow: hidden; }
    .legend-head {
      flex: none; height: 22px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between;
      font-size: 10px; font-weight: 700; color: #475569; cursor: pointer; user-select: none;
    }
    .legend-head.open { border-bottom: 1px solid #e2e8f0; }
    .legend-body { flex: 1; min-height: 0; overflow-x: hidden; }

    .legend-item-group {
      cursor: pointer;
      user-select: none;
    }

    .legend-item-group:hover text {
      fill: #1e293b;
      font-weight: 700;
    }
	
	#loadStatus {
	  position: fixed;
	  top: 64px;
	  left: 50%;
	  transform: translateX(-50%) translateY(-6px);
	  z-index: 500;
	  background: rgba(44, 62, 80, 0.92);
	  color: #fff;
	  font-size: 11px;
	  font-weight: 600;
	  padding: 6px 14px;
	  border-radius: 20px;
	  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.4s ease, transform 0.4s ease;
	  white-space: nowrap;
	}
	#loadStatus.show {
	  opacity: 1;
	  transform: translateX(-50%) translateY(0);
	}

    .external-badge {
      display: inline-block;
      padding: 1px 5px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      border-radius: 4px;
      text-decoration: none;
      margin-left: 4px;
      vertical-align: middle;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      transition: opacity 0.15s ease;
    }
    .external-badge:hover {
      opacity: 0.85;
    }
    .badge-fs { background: #0076a4; color: #ffffff; }
    .badge-wt { background: #336699; color: #ffffff; }
    .badge-wd { background: #333333; color: #ffffff; }
    .badge-gn { background: #2b7de9; color: #ffffff; }
    .badge-mh { background: #00bfff; color: #ffffff; }
    .badge-ex { background: #64748b; color: #ffffff; }

    @media (max-width: 768px) {
      header { padding: 0 12px var(--brand-pad-b); }
      #chartArea { height: 100%; }   /* 0.3.11a: fills the page below the header (it was the window less 120 px, leaving a blank strip at the bottom) */
    }

    /* short fades on every highlight rule so moving the mouse doesn't flash the chart */
    #viewport .person-group { transition: opacity 0.16s ease; }
    #viewport .interactive-line { transition: stroke-width 0.16s ease, opacity 0.16s ease, r 0.16s ease; }
    #viewport .person-group text { transition: opacity 0.16s ease, fill 0.16s ease; }
    #viewport .legend-item-group { transition: opacity 0.16s ease; }
    .legend-item-group rect, .legend-item-group text { transition: stroke 0.16s ease, fill 0.16s ease; }
    .sidebar-event { transition: background-color 0.16s ease; }

    /* inferred values: amber, distinct from hard-coded data and from relatives' events */
    .is-inferred { font-style: italic; color: #b45309 !important; font-weight: 600; }
    .sidebar-event .ev-abbr, .sidebar-event .ev-conj { color: #8a97a8; }
    .sidebar-event .is-inferred .ev-abbr { color: #c2761b; }
    .ev-loc.is-loc-inferred em { text-decoration: underline dotted #d97706; text-underline-offset: 3px; }
    .loc-inferred { color: #b45309; }

    /* sidebar: toggle for the relatives' events */
    .sidebar-options { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 6px 16px; background: #fff; border-bottom: 1px solid #eef2f6; }
    .sidebar-option {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 500; color: #64748b;
      cursor: pointer; user-select: none;
    }
    .sidebar-option input { accent-color: var(--brand-navy); margin: 0; width: 12px; height: 12px; cursor: pointer; }

    @media (max-width: 768px) {
      :root { --brand-h: 100px; }
    }


    /* a rule across the top of the sidebar, so its vertical edge doesn't start from nothing below the header */
    #sidebar { border-top: 1px solid var(--brand-line); }

    /* ---- editing UI ---- */
    .sidebar-edit-btn { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-navy); cursor: pointer; }
    .sidebar-edit-btn:hover { border-color: var(--brand-gold); }
    .sidebar-edit-btn.engaged { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
    #sidebar:not(.editing) .edit-bar { display: none; }
    .edit-bar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: #fbf6e6; border-bottom: 1px solid #efe3bd; font-size: 11px; color: #64748b; }
    .edit-bar button { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-navy); cursor: pointer; }
    .edit-bar button:disabled { opacity: 0.4; cursor: default; }
    .edit-layer { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .edit-layer select { font-size: 11px; max-width: 130px; border: 1px solid var(--brand-line); border-radius: 5px; padding: 2px 4px; background: #fff; color: var(--brand-navy); }
    .edit-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; padding: 6px 8px; background: #fbf6e6; border-radius: 6px; font-size: 12px; }
    .edit-person button, .edit-add { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-navy); cursor: pointer; }
    .edit-add { margin-top: 10px; width: 100%; padding: 6px; border-style: dashed; }
    .edit-person button:hover, .edit-add:hover, .edit-bar button:not(:disabled):hover { border-color: var(--brand-gold); background: #fbf1d3; }
    .ev-edit { margin-left: 6px; white-space: nowrap; opacity: 0.35; transition: opacity 0.15s ease; }
    .sidebar-event:hover .ev-edit, .ev-edit:focus-within { opacity: 1; }
    .ev-edit button { font-size: 11px; padding: 0 5px; margin-left: 2px; border: 1px solid transparent; border-radius: 4px; background: none; color: #64748b; cursor: pointer; }
    .ev-edit button:hover { border-color: var(--brand-gold); color: var(--brand-navy); background: #fbf1d3; }

    /* ---- dialogs ---- */
    .dlg-backdrop { position: fixed; inset: 0; z-index: 5000; background: rgba(23, 42, 94, 0.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
    .dlg { width: min(420px, 100%); max-height: 90vh; overflow-y: auto; background: var(--brand-cream); border: 1px solid var(--brand-line); border-radius: 12px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); color: var(--brand-navy); font-size: 13px; }
    .account-dlg { width: min(520px, 100%); }
    .dlg-title { margin: 0 0 6px; font-size: 16px; }
    .dlg-sub { margin: 16px 0 6px; font-size: 13px; }
    .dlg-intro { margin: 0 0 12px; color: #475569; line-height: 1.4; }
    .dlg-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
    .dlg-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
    .dlg-field input, .dlg-field select { font-size: 13px; padding: 7px 9px; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; color: var(--brand-navy); }
    .dlg-field input:focus, .dlg-field select:focus { outline: 2px solid var(--brand-gold); outline-offset: 0; }
    .dlg-help { font-size: 11px; color: #64748b; }
    .dlg-error { min-height: 16px; color: #b91c1c; font-size: 12px; margin-bottom: 6px; }
    .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
    .dlg-btn { font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-navy); cursor: pointer; }
    .dlg-btn:hover { border-color: var(--brand-gold); }
    .dlg-primary { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
    .dlg-primary:hover { background: #24407f; border-color: #24407f; }
    .dlg-danger { background: #b91c1c; border-color: #b91c1c; }
    .acct-row, .layer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    .layer-row { padding: 6px 8px; background: #fff; border: 1px solid #eef2f6; border-radius: 7px; }
    .layer-row .layer-name { font-weight: 700; }
    .layer-meta { color: #64748b; font-size: 11px; margin-left: auto; }
    .layer-on { font-size: 11px; color: #64748b; }
    .acct-status { margin: 4px 0 6px; font-size: 12px; color: #64748b; }
    .acct-status.is-error { color: #b91c1c; }

    /* ---- hamburger menu (open file + account) ---- */
    .menu-wrap { position: relative; display: inline-flex; }
    .menu-btn { font-size: 15px !important; position: relative; }
    .menu-btn[aria-expanded="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
    .menu-btn::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
    .menu-btn[data-state="synced"]::after { background: #16a34a; }
    .menu-btn[data-state="syncing"]::after { background: var(--brand-gold); }
    .menu-btn[data-state="error"]::after { background: #dc2626; }
    .menu-btn[data-state="idle"]::after { background: #94a3b8; }
    .main-menu-pop {
      position: absolute; top: calc(100% + 8px); left: 0; z-index: 3000; min-width: 250px; padding: 6px;
      background: #fff; border: 1px solid var(--brand-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .main-menu-pop[hidden] { display: none; }
    .main-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: none; color: var(--brand-navy); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
    .main-menu-pop button:hover { background: #fbf1d3; }
    .main-menu-pop button:disabled { opacity: 0.45; cursor: default; background: none; }
    .main-menu-pop small { display: block; font-weight: 400; color: #64748b; font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .main-menu-pop small:empty { display: none; }
    .mm-ico { width: 18px; text-align: center; font-size: 14px; flex: none; }
    .mm-sep { height: 1px; background: #eef2f6; margin: 5px 4px; }
    .mm-head { padding: 4px 10px 2px; font-size: 11px; color: #64748b; }
    .acct-sub { display: block; font-size: 11px; color: #64748b; font-weight: 400; margin-top: 2px; }
    .acct-more { margin: -2px 0 8px; font-size: 11px; color: #64748b; }
    .dlg-link { background: none; border: none; padding: 0; font-size: 11px; color: var(--brand-navy); text-decoration: underline; cursor: pointer; }
    .dlg-link-danger { color: #b91c1c; }
    .dlg-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; margin: 2px 0 6px; cursor: pointer; }
    .dlg-warn { min-height: 0; margin: -4px 0 8px; font-size: 11px; color: #b45309; }
    .dlg-warn:empty { display: none; }

    /* ---- type-ahead lists, person picker, edit menu, relationships ---- */
    .combo-host { position: relative; }
    .combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 190px; overflow-y: auto; background: #fff; border: 1px solid var(--brand-line); border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); margin-top: 2px; }
    .combo-list[hidden] { display: none; }
    .combo-item { padding: 6px 10px; font-size: 13px; cursor: pointer; }
    .combo-item:hover, .combo-item.is-active { background: #fbf1d3; }
    .combo-item.is-current { font-weight: 700; }
    .combo-empty { padding: 6px 10px; font-size: 12px; color: #64748b; }
    .picker { position: relative; display: flex; flex-direction: column; gap: 6px; }
    .picker input, .picker select { font-size: 13px; padding: 7px 9px; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; color: var(--brand-navy); }
    .picker-new { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .picker-new select { grid-column: 1 / -1; }
    .picker .dlg-link { align-self: flex-start; }
    .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; background: #fbf1d3; border: 1px solid #efe3bd; border-radius: 14px; font-size: 13px; }
    .chip-x { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: #64748b; padding: 0 4px; }
    .dlg-field[hidden] { display: none; }
    .edit-menu { position: fixed; z-index: 6000; min-width: 210px; padding: 5px; background: #fff; border: 1px solid var(--brand-line); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
    .edit-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; border-radius: 6px; background: none; font-size: 12px; font-weight: 600; color: var(--brand-navy); cursor: pointer; }
    .edit-menu button:hover { background: #fbf1d3; }
    .edit-menu button.is-danger { color: #b91c1c; }
    .edit-person { display: block !important; }
    .edit-person-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .edit-person-btns { display: flex; gap: 4px; }
    .edit-rels { margin-top: 6px; padding-top: 6px; border-top: 1px solid #efe3bd; font-size: 11px; }
    .rel-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
    .rel-label { width: 46px; color: #64748b; flex: none; }
    .rel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rel-x { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 11px; opacity: 0.5; }
    .rel-row:hover .rel-x { opacity: 1; color: #b91c1c; }
    .edit-person-top { flex-wrap: wrap; }
    .edit-person-btns button { white-space: nowrap; }

    /* =====================================================================================================================
       0.2.4a — the three suites, hover menus, theming
       genSuite (top-left, vertical) · displaySuite (bottom-left, horizontal, above the legend) · multiSuite (bottom-right, vertical)
       Every control is 28px square; each suite collapses to a slim 11px strip until the pointer comes near.
       ===================================================================================================================== */
    :root {
      --btn: 28px; --btn-gap: 6px;
      --panel: #ffffff; --panel-2: #f8fafc; --panel-line: #cbd5e1; --ink: #334155; --ink-soft: #64748b; --ink-strong: #0f172a;
      --hover: #e2e8f0; --accent-soft: #fbf1d3; --chart-bg: #fefcf7; --shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    #chartArea { background: var(--chart-bg); }
    .suite { position: absolute; z-index: 5; display: flex; gap: var(--btn-gap); pointer-events: none; transition: right 0.25s ease-in-out, bottom 0.2s ease; }
    .suite > * { pointer-events: auto; }
    .suite .dock-hint { display: none; }
    .gen-suite { top: 12px; left: 12px; flex-direction: column; align-items: center; width: var(--btn); }
    .display-suite { left: 12px; bottom: calc(var(--legend-top, 20px) + 8px); flex-direction: row; align-items: center; }
    .multi-suite { right: 20px; bottom: 20px; flex-direction: column; width: calc(var(--btn) * 3 + var(--btn-gap) * 2); }
    .ms-row { display: flex; gap: var(--btn-gap); }
    .ms-row-end { justify-content: flex-end; }
    @media (min-width: 769px) { main:has(#sidebar:not(.hidden)) .multi-suite { right: calc(var(--sidebar-w) + 20px); } }
    main.sidebar-resizing .suite { transition: none; }

    .suite-btn {
      flex: none; width: var(--btn); height: var(--btn); padding: 0; box-sizing: border-box;
      display: flex; align-items: center; justify-content: center; user-select: none;
      background: var(--panel); border: 1px solid var(--panel-line); border-radius: 8px; color: var(--ink);
      font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: var(--shadow); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }
    .suite-btn svg { display: block; }
    #navBack, #navForward { font-size: 10px; }
    .home-btn { font-size: 15px; }
    .suite-btn:not(:disabled):hover { background: var(--hover); border-color: #94a3b8; color: var(--ink-strong); }
    .suite-btn:not(:disabled):active { transform: scale(0.94); }
    .suite-btn.engaged { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
    .suite-btn.engaged:not(:disabled):hover { background: #24407f; }
    .suite-btn:disabled, .search-wrap input:disabled, input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed !important; }
    .suite-btn:disabled, input[type="range"]:disabled { pointer-events: none; }
    #themeToggle .ico-sun { display: none; }
    html[data-theme="dark"] #themeToggle .ico-sun { display: block; }
    html[data-theme="dark"] #themeToggle .ico-moon { display: none; }

    /* generation sliders: a slim guide (narrower than the thumbs) whose two ends ARE the minimum and maximum thumb positions */
    .gen-slider-wrap { position: relative; width: var(--btn); height: 76px; margin: 8px 0; flex: none; }
    .gen-slider-wrap input[type="range"] {
      position: absolute; left: 50%; top: 50%; margin: 0; z-index: 1; width: 76px; height: 6px; cursor: pointer; box-sizing: border-box;
      background: var(--hover); border: 1px solid var(--panel-line); border-radius: 3px; box-shadow: var(--shadow);
      -webkit-appearance: none; appearance: none; transform: translate(-50%, -50%) rotate(-90deg);   /* min at bottom, max at top */
    }
    .gen-slider-wrap input[data-dir="down"] { transform: translate(-50%, -50%) rotate(90deg); }       /* min at top */
    .gen-slider-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; background: transparent; border: none; }
    .gen-slider-wrap input[type="range"]::-moz-range-thumb { width: 0; height: 0; background: transparent; border: none; }
    .gen-slider-wrap input[type="range"]::-moz-range-track { background: transparent; height: 6px; }
    .gen-bubble { position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -50%); width: 26px; height: 14px; cursor: grab; touch-action: none; transition: top 0.08s ease-out; }
    .gen-bubble svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }

    /* hamburger + Lens menus open beside / above their buttons (hover or click) */
    .menu-wrap { position: relative; display: inline-flex; }
    .menu-btn { font-size: 15px; position: relative; }
    .main-menu-pop { position: absolute; top: -4px; left: calc(100% + 12px); z-index: 3000; min-width: 250px; }
    .main-menu-pop::before { content: ""; position: absolute; top: 0; bottom: 0; left: -16px; width: 16px; }   /* hover bridge to the button */
    .main-menu-pop button[aria-checked="true"] .mm-ico { background: var(--brand-gold); border-radius: 4px; }
    .color-menu-btn { width: 48px; height: var(--btn); border-radius: 8px; padding: 0 7px; }
    .color-menu-swatch { height: 10px; }
    .color-menu-pop { top: auto; bottom: calc(100% + 10px); left: 0; }
    .color-menu-pop::before { top: auto; bottom: -14px; left: 0; right: 0; width: auto; height: 14px; }

    /* search: right-anchored with the textbox, opens upward and to the left, covering the other buttons until it loses focus */
    .search-wrap { position: relative; width: 100%; font-size: 13px; }
    .search-wrap input[type="text"] { width: 100%; height: var(--btn); box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid var(--panel-line); font-size: 12px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
    .search-results { position: absolute; top: auto; bottom: calc(100% + 6px); left: auto; right: 0; width: max-content; min-width: 100%; max-width: min(320px, 80vw); max-height: min(260px, 55vh); z-index: 30;
      background: var(--panel); border: 1px solid var(--panel-line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); overflow-y: auto; text-align: left; display: none; }
    .search-results div { padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--ink); }
    .search-results div:hover, .search-results div.active { background: var(--hover); }

    /* docking: slim strips on desktop until the pointer is near (JS: 02-dom-and-sidebar.js) */
    @media (min-width: 769px) {
      .suite .dock-hint { display: flex; position: absolute; inset: 0; opacity: 0; pointer-events: none; align-items: center; justify-content: space-evenly; color: #64748b; transition: opacity 0.18s ease; }
      .suite .dock-hint svg { width: 6px; height: 6px; fill: currentColor; flex: none; }
      .gen-suite .dock-hint, .multi-suite .dock-hint { flex-direction: column; padding: 6px 0; }
      .display-suite .dock-hint { flex-direction: row; padding: 0 6px; }
    }
    .docked { transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, right 0.25s ease-in-out, bottom 0.2s ease; }
    .suite.docked { width: var(--dw); height: var(--dh); }
    .docked > * { transition: opacity 0.15s ease 0.05s, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
    .docked:not(.near):not(.pinned) { overflow: hidden; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); pointer-events: auto; }
    .gen-suite.docked:not(.near):not(.pinned), .multi-suite.docked:not(.near):not(.pinned) { width: 11px; height: calc(var(--dh) * 0.6); }
    .display-suite.docked:not(.near):not(.pinned) { height: 11px; width: calc(var(--dw) * 0.6); }
    .docked:not(.near):not(.pinned) > *:not(.dock-hint) { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .docked:not(.near):not(.pinned) > .dock-hint { opacity: 1; }
    main.sidebar-resizing .docked { transition: none; }
    .docked.pinned, .docked.near { z-index: 12; }

    @media (max-width: 768px) {
      #sidebar { width: min(230px, 65vw); }
      .gen-suite { top: 8px; left: 6px; }
      .gen-slider-wrap { height: 64px; } .gen-slider-wrap input[type="range"] { width: 64px; }
      .display-suite { left: 6px; bottom: calc(var(--legend-top, 34px) + 6px); }
      .multi-suite { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    }

    /* ---- hover feedback: the (+)/(−) badges in the brand colours ---- */

    /* ---- chart furniture ---- */
    .time-arrows path { stroke-linejoin: round; }
    .present-label { font-style: italic; font-weight: 800; }

    /* ---- dark mode ---- */
    html[data-theme="dark"] {
      --panel: #111a33; --panel-2: #0c1430; --panel-line: #28344f; --ink: #d8deec; --ink-soft: #94a0bb; --ink-strong: #ffffff;
      --hover: #1c2742; --accent-soft: #3b3320; --chart-bg: #0a1128; --shadow: 0 2px 5px rgba(0,0,0,0.5);
      --brand-line: #2e3a58; --brand-cream: #0a1128; --background: #0a1128; --text: #e7ecfb; --grid: #1c2742; --brand-navy: #8fa8ee;
      color-scheme: dark;
    }
    html[data-theme="dark"] body, html[data-theme="dark"] header { background: #0a1128; color: #e7ecfb; }
    html[data-theme="dark"] .suite-btn.engaged, html[data-theme="dark"] .menu-btn[aria-expanded="true"], html[data-theme="dark"] .sidebar-edit-btn.engaged, html[data-theme="dark"] .dlg-primary { background: #e6aa1e; border-color: #e6aa1e; color: #0a1128; }
    html[data-theme="dark"] .color-menu-btn[aria-expanded="true"] { background: #e6aa1e; border-color: #e6aa1e; }
    html[data-theme="dark"] .color-menu-btn, html[data-theme="dark"] .color-menu-pop, html[data-theme="dark"] .main-menu-pop, html[data-theme="dark"] .edit-menu, html[data-theme="dark"] .combo-list { background: var(--panel); border-color: var(--panel-line); color: var(--ink); }
    html[data-theme="dark"] .color-menu-pop button, html[data-theme="dark"] .main-menu-pop button, html[data-theme="dark"] .edit-menu button { color: var(--ink); }
    html[data-theme="dark"] .color-menu-pop button:not(:disabled):hover, html[data-theme="dark"] .main-menu-pop button:hover, html[data-theme="dark"] .edit-menu button:hover, html[data-theme="dark"] .combo-item:hover, html[data-theme="dark"] .combo-item.is-active { background: var(--hover); }
    html[data-theme="dark"] .color-menu-pop button.active { background: #3b3320; color: #f5d98c; }
    html[data-theme="dark"] .mm-sep { background: var(--panel-line); }
    html[data-theme="dark"] #sidebar, html[data-theme="dark"] .sidebar-options { background: var(--panel); border-color: var(--panel-line); color: var(--ink); }
    html[data-theme="dark"] .sidebar-header, html[data-theme="dark"] .sidebar-content { background: var(--panel-2); color: var(--ink); border-color: var(--panel-line); }
    html[data-theme="dark"] .sidebar-table td, html[data-theme="dark"] .sidebar-src-row td { border-bottom-color: var(--panel-line); }
    html[data-theme="dark"] .sidebar-event-type, html[data-theme="dark"] .sidebar-src-page, html[data-theme="dark"] .sidebar-src-text, html[data-theme="dark"] .sidebar-src-title { color: var(--ink); }
    html[data-theme="dark"] .sidebar-src { background: var(--panel); border-left-color: var(--panel-line); }
    html[data-theme="dark"] .sidebar-event[data-years]:hover { background: #1c2338; }
    html[data-theme="dark"] .sidebar-event-link, html[data-theme="dark"] .sidebar-src-link { color: #8ab4ff; }
    html[data-theme="dark"] .src-chip { background: var(--hover); border-color: var(--panel-line); color: #9db8e8; }
    html[data-theme="dark"] .sidebar-content [style*="#f8fafc"] { background: var(--panel) !important; border-color: var(--panel-line) !important; }
    html[data-theme="dark"] .sidebar-content [style*="#e2e8f0"] { background: var(--hover) !important; color: var(--ink) !important; }
    html[data-theme="dark"] .sidebar-content [style*="#64748b"], html[data-theme="dark"] .sidebar-content [style*="#475569"], html[data-theme="dark"] .sidebar-content [style*="#334155"] { color: var(--ink-soft) !important; }
    html[data-theme="dark"] .sidebar-edit-btn, html[data-theme="dark"] .edit-bar button, html[data-theme="dark"] .edit-person button, html[data-theme="dark"] .edit-add, html[data-theme="dark"] .dlg-btn, html[data-theme="dark"] .edit-layer select { background: var(--panel); color: var(--ink); border-color: var(--panel-line); }
    html[data-theme="dark"] .edit-bar, html[data-theme="dark"] .edit-person { background: #1c2338; border-color: #343f5c; color: var(--ink-soft); }
    html[data-theme="dark"] .dlg, html[data-theme="dark"] .account-dlg { background: var(--panel); border-color: var(--panel-line); color: var(--ink); }
    html[data-theme="dark"] .dlg-field input, html[data-theme="dark"] .dlg-field select, html[data-theme="dark"] .picker input, html[data-theme="dark"] .picker select, html[data-theme="dark"] .search-wrap input[type="text"] { background: var(--panel-2); color: var(--ink); border-color: var(--panel-line); }
    html[data-theme="dark"] .dlg-intro, html[data-theme="dark"] .dlg-check { color: var(--ink-soft); }
    html[data-theme="dark"] .layer-row { background: var(--panel-2); border-color: var(--panel-line); }
    html[data-theme="dark"] .legend-scroll-wrapper { background: rgba(17, 26, 51, 0.94); border-color: var(--panel-line); }
    html[data-theme="dark"] .legend-head { color: var(--ink); } html[data-theme="dark"] .legend-head.open { border-bottom-color: var(--panel-line); }
    html[data-theme="dark"] #emptyState { color: #6f82b0; }
    html[data-theme="dark"] .gen-slider-wrap input[type="range"] { background: var(--hover); }
    html[data-theme="dark"] #sidebarResizer::before { background: repeating-linear-gradient(#93a3c7 0 1.5px, transparent 1.5px 5px) content-box, var(--panel) padding-box; border-color: var(--panel-line); }
    html[data-theme="dark"] .person-group:hover text, html[data-theme="dark"] .person-group.linked-hover text, html[data-theme="dark"] .person-group.is-pinned text { fill: #9cc4ff !important; }
    html[data-theme="dark"] .legend-item-group:hover text { fill: #fff; }

/* ---------- 0.2.4a: sets of parents, household accordion ---------- */
.parent-sets { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.parent-set { font-size: 11px; color: #64748b; padding: 2px 6px; border-radius: 5px; border: 1px solid transparent; display: flex; align-items: center; gap: 5px; }
.parent-sets.is-multi .parent-set { border-color: var(--panel-line, #e2e8f0); cursor: default; }
.parent-sets.is-multi .parent-set:hover { background: #fbf1d3; border-color: var(--brand-gold, #d4a017); }
.parent-set.is-preferred { background: #e8eefb; color: #334155; }
.parent-sets.is-multi .parent-set.is-preferred:hover { background: #dbe5fa; }
.parent-set .ps-tag { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.pref-pick { display: inline-block; margin: 0; accent-color: var(--brand-navy, #1a2a5e); cursor: pointer; }   /* 0.3.22a: shown in and out of edit mode */
/* 0.3.22a: strokes keep their thickness on screen while zooming; each redraw sets them for the zoom (zoomStrokes, js/15d) */
#viewport *, .anim-ghost * { vector-effect: non-scaling-stroke; }
#viewport .war-bands *, .anim-ghost .war-bands * { vector-effect: none; }
/* 0.3.21a: Sosa and d'Aboville numbers in the People list */
.pp-row .pp-num { font: 600 10px ui-monospace, Menlo, monospace; color: var(--brand-navy, #172a5e); background: #eef2fb; border-radius: 4px; padding: 0 4px; margin-right: 5px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .pp-row .pp-num { background: #1b2a55; color: #dbe4ff; }
.pp-sort { max-width: 150px; }
/* 0.3.21a: low-vision options (js/07c-low-vision.js) */
#tooltip .tip-lens { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(148, 163, 184, 0.35); font-size: 11px; white-space: pre-line; }
.lv-code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; paint-order: stroke; stroke: var(--lv-halo, rgba(255,255,255,0.85)); stroke-width: 0.6px; }
html[data-theme="dark"] .lv-code { --lv-halo: rgba(10,17,40,0.85); }
.ev-with { color: #64748b; font-size: 0.92em; }
.hh-toggle { font: inherit; font-size: 10px; font-weight: 700; line-height: 1; padding: 1px 5px; border: 1px solid #94a3b8; border-radius: 9px; background: #f1f5f9; color: #334155; cursor: pointer; }
.hh-toggle:hover { border-color: var(--brand-gold, #d4a017); background: #fbf1d3; }
.hh-list { margin: 3px 0 2px 2px; padding-left: 8px; border-left: 2px solid #cbd5e1; font-size: 11px; line-height: 1.5; }
.hh-list[hidden] { display: none; }
.hh-life { color: #94a3b8; font-size: 10px; }
html[data-theme="dark"] .parent-set { color: #9fb0d4; }
html[data-theme="dark"] .parent-sets.is-multi .parent-set { border-color: #1c2742; }
html[data-theme="dark"] .parent-sets.is-multi .parent-set:hover { background: #3a3320; border-color: #d4a017; }
html[data-theme="dark"] .parent-set.is-preferred { background: #1b2a55; color: #dbe4ff; }
html[data-theme="dark"] .hh-toggle { background: #16224a; color: #dbe4ff; border-color: #4a5a85; }
html[data-theme="dark"] .hh-list { border-left-color: #3a4a78; }

/* ---------- 0.2.6a: merge changes ---------- */
.merge-dlg { width: min(720px, 100%); }
.mg-card { border: 1px solid var(--brand-line); border-left-width: 4px; border-radius: 8px; padding: 9px 11px; margin: 0 0 10px; background: #fff; }
.mg-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.mg-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 7px; }
.mg-layer { margin-left: auto; font-size: 11px; color: #94a3b8; }
.mg-cols { display: flex; gap: 10px; flex-wrap: wrap; }
.mg-col { flex: 1 1 240px; min-width: 0; padding: 6px 8px; border-radius: 6px; background: #f8fafc; }
.mg-col.mine { background: #fdf3f7; }
.mg-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 2px; }
.mg-line { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.mg-src { margin-top: 5px; font-size: 12px; color: #475569; } .mg-src span { color: #64748b; font-weight: 600; } .mg-src i { font-style: normal; background: #eef2f6; border-radius: 4px; padding: 0 5px; }
.mg-choice { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.mg-choice label { cursor: pointer; }
html[data-theme="dark"] .mg-card { background: var(--panel); border-color: var(--panel-line); } html[data-theme="dark"] .mg-col { background: rgba(255,255,255,0.05); } html[data-theme="dark"] .mg-col.mine { background: rgba(194,24,91,0.18); }
html[data-theme="dark"] .mg-src, html[data-theme="dark"] .mg-line { color: var(--ink-soft); } html[data-theme="dark"] .mg-src i { background: rgba(255,255,255,0.08); }
.mg-card.is-info { border-left-color: #94a3b8; background: #f8fafc; } .mg-sum summary { cursor: pointer; font-size: 13px; padding: 2px 0; } .mg-note { color: #64748b; margin-top: 4px; }
html[data-theme="dark"] .mg-card.is-info { background: rgba(255,255,255,0.04); }
/* ---------- 0.2.6a: event details, inferred places, people rows ---------- */
.ev-extra { font-size: 12px; color: #475569; line-height: 1.3; margin-top: 1px; cursor: help; }
html[data-theme="dark"] .ev-extra { color: var(--ink-soft); }
.dlg-check-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 3px; cursor: pointer; }
.xtra-row, .ppl-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: flex-start; }
.xtra-row input { flex: 1 1 0; min-width: 0; } .xtra-row input:first-child { flex: 0 0 34%; }
.xtra-x, .xtra-add { border: 1px solid var(--brand-line); background: none; border-radius: 6px; cursor: pointer; color: #64748b; padding: 2px 8px; }
.xtra-add { margin-top: 2px; } .xtra-x:hover, .xtra-add:hover { border-color: var(--brand-gold); }
.ppl-row > select { flex: 0 0 120px; } .ppl-row > .picker { flex: 1 1 0; min-width: 0; }
.picker.both .picker-new-inline { display: flex; gap: 6px; margin-top: 6px; } .picker.both .picker-new-inline input, .picker.both .picker-new-inline select { flex: 1 1 0; min-width: 0; }
.picker.both .picker-or { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.edit-hidden { margin-top: 6px; font-size: 12px; } .edit-hidden summary { cursor: pointer; color: #64748b; }
.dlg .xtra-add { display: inline-block; width: auto; } .ppl-row { flex-wrap: wrap; } .ppl-row > input[name="role"] { flex: 1 1 calc(100% - 40px); } .ppl-row > .picker { flex: 1 1 100%; order: 3; }
.ppl-row { padding-bottom: 6px; border-bottom: 1px dashed var(--brand-line); }

/* =====================================================================================================================
   0.2.7a — menu in the top-right corner, layers sub-menu, pin + lock buttons, sidebar filter drawer, slimmer paperclip
   ===================================================================================================================== */
.menu-corner { position: absolute; top: 12px; right: 20px; z-index: 30; transition: right 0.25s ease-in-out; }   /* top right of the map area; slides left when the sidebar opens */
@media (min-width: 769px) { main:has(#sidebar:not(.hidden)) .menu-corner { right: calc(var(--sidebar-w) + 20px); } }
main.sidebar-resizing .menu-corner { transition: none; }
@media (max-width: 768px) { .menu-corner { top: 8px; right: 10px; } }
.main-menu-pop { top: calc(100% + 8px); left: auto; right: 0; max-height: calc(100vh - 90px); overflow-y: auto; width: max-content; max-width: min(320px, calc(100vw - 24px)); }
.main-menu-pop::before { top: -10px; bottom: auto; left: 0; right: 0; width: auto; height: 10px; }   /* hover bridge to the button */
.main-menu-pop .mm-caret { margin-left: auto; padding-left: 6px; color: #94a3b8; transition: transform 0.15s ease; flex: none; }
.main-menu-pop [aria-expanded="true"] .mm-caret { transform: rotate(90deg); }
.mm-sub { margin: 0 0 4px 12px; padding-left: 6px; border-left: 2px solid #eef2f6; }
.mm-sub[hidden] { display: none; }
.main-menu-pop small.wrap { white-space: normal; max-width: 230px; overflow: visible; line-height: 1.35; }
html[data-theme="dark"] .mm-sub { border-left-color: var(--panel-line); }

/* the pin and lock buttons share the engaged look of the other toggles */
#pinToggle.engaged svg path:first-child { fill-opacity: 0.9; }
#lockFocusBtn .lk-shackle { transition: transform 0.15s ease; transform-origin: 16px 11px; }
#lockFocusBtn:not(.engaged) .lk-shackle { transform: rotate(-28deg) translate(1px, -1px); }
#lockFocusBtn.engaged .lk-body { fill: currentColor; fill-opacity: 0.35; }

/* slim collapsed strips: the closed display suite and the closed legend are the same height */
.display-suite.docked:not(.near):not(.pinned) { height: 14px; }
.legend-head.is-collapsed { height: 14px; padding: 0 6px; font-size: 8px; letter-spacing: 0.02em; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); box-sizing: border-box; color: var(--ink-soft); }

/* sidebar: the three filters live in a quiet drawer */
.sidebar-filters { background: #fff; border-bottom: 1px solid #eef2f6; }
.sidebar-filters > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 3px 16px; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; color: #94a3b8; cursor: pointer; user-select: none; }
.sidebar-filters > summary::-webkit-details-marker { display: none; }
.sidebar-filters > summary::before { content: "▸"; font-size: 9px; transition: transform 0.15s ease; }
.sidebar-filters[open] > summary::before { transform: rotate(90deg); }
.sidebar-filters > summary:hover { color: #475569; }
.sidebar-filters .sf-note { color: #b45309; font-weight: 700; }
.sidebar-filters .sidebar-options { border-bottom: none; padding: 2px 16px 8px; }
.sidebar-option.is-soon { opacity: 0.5; cursor: not-allowed; }
.sidebar-option.is-soon input { cursor: not-allowed; }
.sf-switch { flex-basis: 100%; justify-content: space-between; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--panel-line, #cbd5e1); border-radius: 999px; overflow: hidden; }
.seg button { border: none; background: transparent; font-size: 10px; font-weight: 600; padding: 1px 9px; color: #64748b; cursor: pointer; }
.seg button.on { background: var(--brand-navy); color: #fff; }
.seg button:disabled { cursor: not-allowed; }
html[data-theme="dark"] .sidebar-filters { background: var(--panel); border-color: var(--panel-line); }
html[data-theme="dark"] .seg button.on { background: #e6aa1e; color: #0a1128; }

/* paperclip: slimmer, upright, and sitting on the pencil's baseline */
.ev-edit .clip-ico { width: 6px; height: 12px; vertical-align: -2px; }
.ev-edit button[data-act="src"] { padding: 0 3px; }

/* lock focus: the person whose timeline is showing keeps a gold marker in the sidebar header */
#sidebar.focus-locked .sidebar-head strong::after { content: " 🔒"; font-size: 11px; }
.picker-facts { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.picker-facts .pf-row { display: flex; gap: 6px; align-items: center; }
.picker-facts .pf-lab { width: 34px; font-size: 11px; color: #64748b; flex: none; }
.picker-facts input { flex: 1; min-width: 0; }
.picker.both .picker-new-inline { flex-wrap: wrap; }

/* lock focus: the legend box that matches a place hovered in the timeline */
.legend-item-group.ext-hover rect { stroke: #172a5e; stroke-width: 1.5px; }
.legend-item-group.ext-hover text { font-weight: 800; fill: #1e293b; }
html[data-theme="dark"] .legend-item-group.ext-hover rect { stroke: #e6aa1e; }
html[data-theme="dark"] .legend-item-group.ext-hover text { fill: #f1f5f9; }

/* =====================================================================================================================
   0.2.8a
   ===================================================================================================================== */
/* a ▾ on every type-ahead box, so the list of choices is visible */
.combo-wrap { position: relative; display: block; }
.combo-wrap > input { width: 100%; box-sizing: border-box; padding-right: 26px; }
.combo-caret { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 24px; border: none; background: none; color: #64748b; font-size: 12px; cursor: pointer; border-radius: 0 6px 6px 0; }
.combo-caret:hover { background: #fbf1d3; color: var(--brand-navy); }
html[data-theme="dark"] .combo-caret:hover { background: var(--hover); color: var(--ink); }
.xtra-row > .combo-wrap { flex: 1 1 0; min-width: 0; } .xtra-row > .combo-wrap:first-child { flex: 0 0 38%; }
.ppl-row > .combo-wrap { flex: 1 1 calc(100% - 40px); }
.combo-wrap .combo-list { left: 0; right: 0; }

/* paperclip: wide enough to read */
.ev-edit .clip-ico { width: 9px; height: 13px; vertical-align: -3px; }

/* 0.2.8a */
.color-menu-pop { max-height: min(70vh, 560px); overflow-y: auto; }
.sidebar-option.is-off { opacity: .45; }
.sidebar-option.is-off input { cursor: not-allowed; }
.err-list { margin: 8px 0; padding: 8px 10px; border: 1px solid #d7263d; border-radius: 8px; background: rgba(215,38,61,.07); font-size: 12px; }
.err-list b { color: #d7263d; }
.err-list ul { margin: 4px 0 0 16px; padding: 0; }
.err-edit{margin-left:6px;font-size:11px;cursor:pointer;border:1px solid #d7263d;background:#fff;color:#d7263d;border-radius:5px;padding:0 5px}

.sidebar-header { align-items: flex-start; gap: 8px; }
.sidebar-head { flex: 1 1 auto; min-width: 0; font-weight: normal; }
.sidebar-head > div { margin-bottom: 0 !important; }
.sidebar-close { background: none; border: none; cursor: pointer; font-size: 16px; color: inherit; flex: none; }
.sidebar-filters > summary .sidebar-edit-btn { margin-left: auto; font-size: 11px; padding: 2px 9px; letter-spacing: 0; }
.sidebar-filters > summary .sf-ico { flex: none; }
.war-labels text { paint-order: stroke; stroke: var(--chart-bg, #fffdf8); stroke-width: 2.5px; stroke-linejoin: round; }
.hit-line { pointer-events: stroke; }

.sidebar-edit-btn { border: none !important; background: none !important; color: #94a3b8 !important; font-size: 13px !important; padding: 0 4px !important; margin-left: 4px; cursor: pointer; vertical-align: 1px; }
.sidebar-edit-btn:hover { color: var(--brand-navy) !important; }
.sidebar-edit-btn.engaged { color: #fff !important; background: var(--brand-navy) !important; border-radius: 4px; }
.ps-text { display: inline-grid; grid-template-columns: auto auto; column-gap: .3em; align-items: baseline; }
.ps-lead { text-align: right; }

tr.reorderable { cursor: grab; }
tr.reorderable.dragging { opacity: .4; }
tr.reorderable.drop-before > td { box-shadow: inset 0 2px 0 var(--brand-gold, #e6aa1e); }
tr.reorderable.drop-after > td { box-shadow: inset 0 -2px 0 var(--brand-gold, #e6aa1e); }

/* 0.2.108a */
.sidebar-tools { position: relative; display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sidebar-tools .sidebar-filters { border: none; background: none; }
.sidebar-tools .sidebar-filters > summary { padding: 2px 4px; gap: 3px; }
.sidebar-tools .sidebar-filters > summary::before { display: none; }
.sidebar-tools .sidebar-filters .sidebar-options { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 230px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 18px rgba(15,23,42,.18); padding: 8px 12px; }
html[data-theme="dark"] .sidebar-tools .sidebar-filters .sidebar-options { background: var(--panel); border-color: var(--panel-line); }
.drag-grip { cursor: grab; color: #94a3b8; margin-right: 4px; font-size: 13px; user-select: none; }
#sidebar:not(.editing) .drag-grip { display: none; }

/* 0.2.108a */
.dlg-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.dlg-seg button { border: none; background: #fff; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: #475569; }
.dlg-seg button + button { border-left: 1px solid #cbd5e1; }
.dlg-seg button.on { background: #1e3a8a; color: #fff; }
.sidebar-tools { align-self: stretch; justify-content: space-between; }   /* ✕ at the top right, the funnel at the bottom right of the same header */
.people-panel { flex: 1 1 45%; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid #e2e8f0; background: inherit; font-size: 12px; }
#sidebar.with-people .sidebar-content { flex: 1 1 55%; min-height: 0; }
.people-panel[hidden] { display: none; }
.pp-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid #eef2f6; }
.pp-head button { background: none; border: none; cursor: pointer; color: inherit; }
.pp-list { overflow: auto; padding: 4px 0; }
.pp-row { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 3px 10px; cursor: pointer; }
.pp-row:hover { background: #fbf1d3; }
.pp-yrs { color: #94a3b8; margin-left: auto; }
.pp-tag { flex-basis: 100%; font-size: 10px; color: #64748b; }
.pp-empty { padding: 8px 10px; color: #94a3b8; }
html[data-theme="dark"] .people-panel { background: var(--panel); border-color: var(--panel-line); color: var(--ink); }

/* 0.2.108a */
.dlg-seg { align-self: flex-start; }
.color-menu-swatch, .color-menu-pop i { border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 50% !important; -webkit-mask: none !important; mask: none !important; flex: none !important; }
.color-menu-swatch { width: 18px !important; height: 18px !important; }
.color-menu-pop i { width: 30px !important; height: 30px !important; border-radius: 8px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; position: relative; }   /* each circle preview sits in a rounded square, like the suite's buttons */
.color-menu-pop i::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(0,0,0,0.12); box-sizing: border-box; }
html[data-theme="dark"] .color-menu-pop i { background: var(--panel-2) !important; border-color: var(--panel-line) !important; }
header { height: calc(var(--brand-h) * 0.64); min-height: 0 !important; overflow: hidden; padding-bottom: 0; }   /* the artwork has blank space below the tagline: trim it so the chart starts just under the logo */

/* comparison */
#panes { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#panes > main { flex: 1 1 100%; min-width: 0; }
#panes { --cmp-f: 0.5; }
#panes.comparing > main { flex: 0 0 calc((100% - 7px) * var(--cmp-f)); }
#panes.comparing.sides > main { flex-basis: calc((100% - 460px - 7px) * var(--cmp-f)); }   /* both sidebars (230px each) are taken off the top; the two trees share the rest */
#compareFrame { flex: 1 1 0; min-width: 0; border: none; background: var(--brand-cream, #fefcf7); }
#compareFrame[hidden], #cmpBanner[hidden] { display: none; }
/* inside the comparison's right pane: no logo header */
html.embed header, html.embed #loadStatus { display: none; }
.picker .picker-new[hidden], .picker.both .picker-new-inline[hidden], .picker-facts[hidden] { display: none !important; }   /* the "hidden" attribute must win over the flex layout (an already-chosen person showed empty new-person fields) */

/* comparison: the left pane is the static one, the right is editable; each side shows only its own side's controls, and both sidebars sit at the right edge, skinny */
#panes.comparing #editModeBtn, #panes.comparing .menu-corner, #panes.comparing #multiSuite > :not(.search-wrap), #panes.comparing #sidebarResizer { display: none !important; }
html.embed #genSuite, html.embed.lens-locked #displaySuite, html.embed #sidebarResizer, html.embed [data-act="compare"] { display: none !important; }
#panes.comparing main, html.embed main { --sidebar-w: 230px !important; }
#panes.comparing #sidebar { position: fixed; top: var(--panes-top, 0); bottom: 0; right: 230px; z-index: 20; }
#panes.comparing #sidebar.hidden { visibility: hidden; }
/* the left pane's search box stays put even though its suite normally folds away; the sidebar no longer sits over this pane, so the suite does not shift for it */
#panes.comparing .multi-suite { right: 20px !important; }


#cmpSplit { flex: none; width: 7px; cursor: col-resize; touch-action: none; background: var(--brand-gold, #e6aa1e); position: relative; z-index: 25; }
#cmpSplit[hidden] { display: none; }
#cmpSplit::before { content: ""; position: absolute; left: -1px; top: 50%; width: 9px; height: 44px; transform: translateY(-50%); border-radius: 5px; background: #fff repeating-linear-gradient(#94a3b8 0 1.5px, transparent 1.5px 5px) content-box; box-sizing: border-box; padding: 13px 2px; border: 1px solid var(--brand-gold, #e6aa1e); }
#cmpSplit:hover, #panes.dragging #cmpSplit { background: #c88f0d; }
#panes.dragging { user-select: none; cursor: col-resize; }
#panes.dragging #compareFrame { pointer-events: none; }
/* right pane: the page believes it is narrow, but it is a desktop layout (the mobile rules must not apply), and its tree gives way to BOTH sidebars */
html.embed #chartArea { height: auto !important; }
html.embed #sidebar { width: var(--sidebar-w); }
html.embed .gen-suite { top: 12px; left: 12px; }
html.embed .display-suite { left: 12px; bottom: calc(var(--legend-top, 20px) + 8px); }
html.embed .multi-suite { right: 20px; bottom: 20px; }
html.embed .menu-corner { top: 12px; right: 20px; }
html.embed .suite .dock-hint { display: flex; position: absolute; inset: 0; opacity: 0; pointer-events: none; align-items: center; justify-content: space-evenly; color: #64748b; transition: opacity 0.18s ease; }
html.embed .suite .dock-hint svg { width: 6px; height: 6px; fill: currentColor; flex: none; }
html.embed .gen-suite .dock-hint, html.embed .multi-suite .dock-hint { flex-direction: column; padding: 6px 0; }
html.embed .display-suite .dock-hint { flex-direction: row; padding: 0 6px; }
html.embed main:has(#sidebar:not(.hidden)) #chartArea { margin-right: calc(var(--sidebar-w) * 2); }   /* its own sidebar, plus the left pane's beside it */
html.embed main:has(#sidebar:not(.hidden)) .multi-suite, html.embed main:has(#sidebar:not(.hidden)) .menu-corner { right: 20px; }   /* they live inside the chart area, which already stops short of both sidebars */
/* left pane: only the search box survives; its suite must not grow tall again when the pointer nears it (that made the box jump upward) */
/* comparing: the bottom-right strip is only the sidebar button (right pane) and the search box, always shown; zoom, history, home and lock are not useful for one side alone */
#panes.comparing #multiSuite, html.embed #multiSuite { overflow: visible !important; background: none !important; border: none !important; box-shadow: none !important; width: calc(var(--btn) * 3 + var(--btn-gap) * 2) !important; height: auto !important; pointer-events: none; }
#panes.comparing #multiSuite > *, html.embed #multiSuite > * { opacity: 1 !important; }
#panes.comparing #multiSuite > .search-wrap, html.embed #multiSuite > .search-wrap, html.embed #multiSuite > .ms-row-end { pointer-events: auto; }
html.embed #multiSuite > :not(.search-wrap):not(.ms-row-end), html.embed #lockFocusBtn { display: none !important; }

/* comparison: the logo banner carries a giant "COMPARE" and the Lens Lock; nothing else */
header { position: relative; }
#cmpBanner { position: absolute; inset: 0; display: flex; flex-direction: row; gap: 22px; align-items: center; justify-content: center; pointer-events: none; }
#cmpBanner .cmp-title { font: 800 calc(var(--brand-h) * 0.3)/1 var(--brand-font, "Sora", system-ui, sans-serif); letter-spacing: 0.28em; padding-left: 0.28em; color: var(--brand-navy, #172a5e); }
#cmpBanner .cmp-lock { pointer-events: auto; margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--brand-navy, #172a5e); cursor: pointer; }
html[data-theme="dark"] #cmpBanner .cmp-title, html[data-theme="dark"] #cmpBanner .cmp-lock { color: #e7ecfb; }
#cmpClose { position: absolute; top: 10px; right: 16px; pointer-events: auto; border: 1px solid var(--brand-line, #adb3c1); background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; color: var(--brand-navy, #172a5e); }
#cmpClose:hover { border-color: var(--brand-gold, #e6aa1e); }

.pp-scope { display: inline-flex; margin-left: 10px; border: 1px solid var(--panel-line, #cbd5e1); border-radius: 6px; overflow: hidden; vertical-align: middle; }
.pp-scope button { border: none; background: transparent; padding: 1px 8px; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; color: var(--ink-soft, #64748b); }
.pp-scope button.on { background: var(--brand-navy, #172a5e); color: #fff; }
.view-menu .color-menu-pop { min-width: 160px; }

/* 0.2.108a: display strip order  [view] [lens] | [spouse] [siblings] [names] ; lens is a rounded square; view shows its own icon */
.color-menu-btn { width: var(--btn) !important; height: var(--btn) !important; padding: 0 !important; border-radius: 8px !important; box-sizing: border-box; }
.suite-sep { flex: none; align-self: stretch; width: 1px; margin: 3px 2px; background: var(--panel-line, #cbd5e1); }
.vi { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; flex: none; }
.vi svg { width: 18px; height: 18px; fill: currentColor; }
.view-menu .color-menu-pop button { display: flex; align-items: center; gap: 10px; }
.menu-moved-btns[hidden] { display: none; }
.main-menu-pop button.on .mm-ico { background: var(--brand-gold); border-radius: 4px; }
/* people list: a collapsed footer in the sidebar that expands upward */
#sidebar .pp-foot { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; border: none; border-top: 1px solid #cbd5e1; background: var(--panel-2, #f8fafc); color: var(--ink, #334155); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; }
#sidebar .pp-foot:hover:not(:disabled) { background: #fbf1d3; }
#sidebar .pp-foot:disabled { opacity: 0.45; cursor: default; }
#sidebar .pp-foot .pp-count { color: var(--ink-soft, #64748b); font-weight: 500; }
#sidebar .pp-foot .pp-caret { margin-left: auto; transition: transform 0.15s ease; }
#sidebar .pp-foot.engaged .pp-caret { transform: rotate(90deg); }
#sidebar .pp-foot.engaged { background: #fbf1d3; }
html[data-theme="dark"] #sidebar .pp-foot { background: var(--panel-2); border-color: var(--panel-line); color: var(--ink); }
.gen-slider-wrap[hidden] { display: none; }

/* 0.2.108a */
#sidebar .pp-foot.engaged { display: none; }   /* the drawer tab gives way to the list while it is open, and returns when the list is closed */


/* 0.2.110a: menu icons are black-and-white line drawings */
.mm-ico.mm-svg { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.mm-ico.mm-svg svg { display: block; }
.main-menu-pop .mm-sub { margin-left: 18px; }

.ev-rel { color: #64748b; font-weight: 400; font-size: 0.92em; }

.sidebar-src-title.has-tip { cursor: help; }
.sidebar-src-title.has-tip::after { content: " \24D8"; color: #94a3b8; font-weight: 400; font-size: 0.9em; }
.sidebar-src-note { font-style: italic; }
#spouseToggle.suppressed { opacity: .45; }

/* text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#chart:focus-visible { outline: 2px solid #2563eb; outline-offset: -3px; }

/* 0.3.09a: on narrow screens the sidebar overlays the chart; the menu button and the bottom-right controls step aside for it, as on wide screens */
@media (max-width: 768px) { main:has(#sidebar:not(.hidden)) .menu-corner, main:has(#sidebar:not(.hidden)) .multi-suite { right: calc(min(230px, 65vw) + 10px); } }
.multi-suite { transition: right 0.25s ease-in-out; }
/* hovering a line: the legend boxes for that person's colours stand out and the rest step back (the lines themselves are not dimmed by this) */
.legend-item-group.hover-match rect { stroke: #172a5e; stroke-width: 1.5px; }
.legend-item-group.hover-match text { font-weight: 800; }
.legend-item-group.hover-dim { opacity: 0.3; }
html[data-theme="dark"] .legend-item-group.hover-match rect { stroke: #e6aa1e; }
/* 0.3.09a: in the Capsule view a hovered name grows only a little (the shared rule sets 100%, the page's size, far larger than these labels) */
#viewport.capsule-view .person-group:hover text, #viewport.capsule-view .person-group.linked-hover text, #viewport.capsule-view .person-group.is-pinned text { font-size: calc(var(--fs, 6px) * 1.12) !important; }
/* 0.3.09a: the View popup has four choices: no scroll limit, so no scroll bar */
#viewPop { max-height: none; overflow: visible; }
/* in the Capsule view a hovered line grows by half (the radial chart's 1.7x / 2x would make the focus line touch its spouse lines) */
#viewport.capsule-view .person-group:hover path.interactive-line, #viewport.capsule-view .person-group.linked-hover path.interactive-line, #viewport.capsule-view .person-group.is-pinned path.interactive-line { stroke-width: calc(var(--w, 3px) * 1.5) !important; }
/* 0.3.11a: the View and Lens menus are a column of floating buttons rather than a panel */
.color-menu-pop { background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 4px !important; display: flex; flex-direction: column; gap: 5px; }
.color-menu-pop:not([hidden]) { display: flex; }
.color-menu-pop button { background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16); padding: 6px 10px; white-space: nowrap; }
.color-menu-pop button:not(:disabled):hover { background: #f8fafc; border-color: var(--brand-gold); }
.color-menu-pop .color-menu-group { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
html[data-theme="dark"] .color-menu-pop button { background: var(--panel); border-color: var(--panel-line); }
html[data-theme="dark"] .color-menu-pop .color-menu-group { background: rgba(18, 30, 64, 0.9); }
/* the Lens menu: its own scroll inside the room above its button, with a slim floating scroll bar */
#modeSwitch { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(23, 42, 94, 0.35) transparent; padding-right: 8px !important; }
#modeSwitch::-webkit-scrollbar { width: 6px; } #modeSwitch::-webkit-scrollbar-track { background: transparent; } #modeSwitch::-webkit-scrollbar-thumb { background: rgba(23, 42, 94, 0.35); border-radius: 3px; }
html[data-theme="dark"] #modeSwitch { scrollbar-color: rgba(230, 170, 30, 0.5) transparent; }
/* the View menu: Rings and Capsules; resting on one shows its two one-tree choices sticking out to the right */
#viewPop { max-height: none; overflow: visible; min-width: 0; }
#viewPop .vm-row { position: relative; display: flex; align-items: center; gap: 6px; }
#viewPop .vm-row > button { min-width: 140px; }
#viewPop .vm-sub { display: none; position: absolute; left: calc(100% + 6px); top: 0; gap: 5px; }
#viewPop .vm-sub::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }   /* hover bridge */
#viewPop .vm-row:hover .vm-sub, #viewPop .vm-row.open .vm-sub { display: flex; }
#viewPop .vm-row.has-active > button { border-color: var(--brand-gold); }
/* the main menu's Display submenu opens below "Display" without widening the menu, and the menu scrolls within the page */
.main-menu-pop { width: min(300px, calc(100vw - 24px)); }
.main-menu-pop button > span:not(.mm-ico):not(.mm-caret) { white-space: normal; }
/* the chart takes keyboard focus, but a mouse click must not draw a focus frame around it (Edge does); the keyboard path shows its own */
#chart:focus { outline: none; }
#chart.kbd-focus { outline: 2px solid var(--brand-gold); outline-offset: -3px; }
/* the focus-name toggle: hidden above the Names toggle until the pointer rests there (or a tap on Names) */
.names-wrap { position: relative; display: inline-flex; }
.names-pop { position: absolute; left: 0; bottom: calc(100% + 6px); display: none; flex-direction: column; gap: 6px; z-index: 5; }
.names-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }   /* hover bridge down to Names */
.names-wrap:hover .names-pop, .names-wrap.show-extra .names-pop { display: flex; }
.names-pop .suite-btn { display: inline-flex; align-items: center; justify-content: center; }
#chart.no-year-labels .year-label { display: none; }

/* ---------- 0.3.12a: people list header = the closed bar's twin ---------- */
#sidebar .pp-head { cursor: pointer; padding: 7px 14px; font-size: 12px; background: #fbf1d3; border-bottom: 1px solid #e2e8f0; gap: 8px; user-select: none; }
#sidebar .pp-head:hover { background: #f6e4b2; }
#sidebar .pp-head .pp-caret { margin-left: auto; transform: rotate(90deg); transition: transform 0.15s ease; }
#sidebar .pp-head #ppTitle { white-space: nowrap; }
#sidebar .pp-head .pp-scope { margin-left: 4px; }
.pp-scope button:disabled { opacity: 0.4; cursor: default; }
.pp-row.is-sel .pp-name { font-weight: 700; }
html[data-theme="dark"] #sidebar .pp-head { background: #2b2614; border-color: var(--panel-line); }
html[data-theme="dark"] #sidebar .pp-head:hover { background: #3b3320; }


/* ---------- 0.3.12a: View and Lens menus look like the Names pop-up: a column of square icon buttons, each name as plain text beside it ---------- */
.color-menu-pop button, html[data-theme="dark"] .color-menu-pop button { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; gap: 8px !important; display: flex; align-items: center; font-weight: 600; color: var(--brand-navy, #172a5e); text-shadow: 0 0 3px var(--brand-cream, #fefcf7), 0 0 3px var(--brand-cream, #fefcf7), 0 0 6px var(--brand-cream, #fefcf7); }
html[data-theme="dark"] .color-menu-pop button { color: var(--ink); }
.color-menu-pop button.active { font-weight: 800; }
.color-menu-pop button.active::after { content: none !important; }
.color-menu-pop button:not(:disabled):hover { background: transparent !important; }
/* the icon is the button */
.color-menu-pop button > i, .color-menu-pop button > .vi { width: var(--btn, 28px) !important; height: var(--btn, 28px) !important; box-sizing: border-box; border-radius: 8px !important; border: 1px solid var(--panel-line, #cbd5e1) !important; background: var(--panel, #fff) !important; box-shadow: var(--shadow, 0 2px 5px rgba(0,0,0,.15)); flex: none; color: var(--ink, #334155); text-shadow: none; transition: border-color .15s ease, background .15s ease; }
.color-menu-pop button:not(:disabled):hover > i, .color-menu-pop button:not(:disabled):hover > .vi { border-color: var(--brand-gold, #e6aa1e) !important; }
.color-menu-pop button.active > i, .color-menu-pop button.active > .vi { border: 2px solid var(--brand-gold, #e6aa1e) !important; }
.view-pop button.active > .vi { background: var(--brand-gold, #e6aa1e) !important; color: #172a5e; }
#viewPop .vm-row > button { min-width: 0; }
#viewPop .vm-row.has-active > button { border: none !important; }
#viewPop .vm-row.has-active > button > .vi { border-color: var(--brand-gold, #e6aa1e) !important; }
.color-menu-pop .color-menu-group, html[data-theme="dark"] .color-menu-pop .color-menu-group { background: transparent !important; box-shadow: none !important; padding: 0 2px !important; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft, #64748b); text-shadow: 0 0 3px var(--brand-cream, #fefcf7), 0 0 3px var(--brand-cream, #fefcf7); }

/* 0.3.12a: siblings arriving and leaving (opacity only) */
@keyframes sibIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sibSettle { from { opacity: 0.6; } to { opacity: 1; } }
#viewport .sib-in { animation: sibIn 0.3s ease-out; }
#viewport .sib-out { transition: opacity 0.16s ease-in; opacity: 0 !important; }
#viewport.sib-settle { animation: sibSettle 0.24s ease-out; }
@media (prefers-reduced-motion: reduce) { #viewport .sib-in, #viewport.sib-settle { animation: none; } #viewport .sib-out { transition: none; } }

/* 0.3.12a: comments (event NOTEs) in the sources panel; a source's notes and transcription in one block */
.sidebar-src-note { font-style: normal; }
.sidebar-ev-comments { border-left-color: var(--brand-gold, #e6aa1e) !important; }
.src-chip .chip-note { margin-left: 2px; }
.src-chip.has-notes { border-color: var(--brand-gold, #e6aa1e); }

/* ---------- 0.3.12a: phones. Portrait only; the timeline (or the people list) is a sheet across the bottom and the chart fits in the space above ---------- */
#edgeToggleBtn .ico-phone { display: none; }
#rotateNote { display: none; }
@media (max-width: 768px) {
  main { flex-direction: column; }
  #chartArea { flex: 1 1 auto; height: auto !important; min-height: 0; }
  #sidebar, main #sidebar { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100% !important; height: 45%; flex: none;
    border-left: none; border-top: 1px solid var(--brand-line, #adb3c1); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); transform: none; transition: height 0.25s ease-in-out; }
  #sidebar.hidden { height: 0; transform: none; overflow: hidden; border-top: none; box-shadow: none; }
  /* the people list takes the sheet's place (the timeline steps aside), and its header folds it back */
  #sidebar.with-people > .sidebar-header, #sidebar.with-people > .sidebar-content, #sidebar.with-people > .edit-bar { display: none; }
  #sidebar.with-people .people-panel { flex: 1 1 auto; border-top: none; }
  /* the bottom-right suite and the menu stay at the chart's own edge (the sheet no longer covers its right side) */
  main:has(#sidebar:not(.hidden)) .menu-corner, main:has(#sidebar:not(.hidden)) .multi-suite { right: 10px; }
  main:has(#sidebar:not(.hidden)) .multi-suite { bottom: 10px; }
  #sidebar:not(.hidden) { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #edgeToggleBtn .ico-desk { display: none; }
  #edgeToggleBtn .ico-phone { display: block; }
  /* no side-by-side comparison on a phone */
  [data-act="compare"] { display: none !important; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotateNote { display: flex; position: fixed; inset: 0; z-index: 100000; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--brand-cream, #fefcf7); color: var(--brand-navy, #172a5e); font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center; }
  html[data-theme="dark"] #rotateNote { background: #0a1128; color: #e7ecfb; }
}

/* ---------- 0.3.13a: comments (file notes vs ANNULARITY), About, photos, the shadow box ---------- */
.src-chip.is-empty { opacity: 0; transition: opacity .15s ease; }
.sidebar-event:hover .src-chip.is-empty, .src-chip.is-empty:focus-visible, .src-chip.is-empty.is-open { opacity: .55; }
@media (hover: none) { .src-chip.is-empty { opacity: .3; } }
.annot-block { margin: 4px 0 2px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.annot-title { font-weight: 700; color: var(--ink-soft, #64748b); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.annot-item { border-left: 3px solid #cbd5e1; padding: 2px 6px 3px; background: rgba(255,255,255,.6); border-radius: 0 4px 4px 0; }
.annot-item.is-app { border-left-color: var(--brand-gold, #e6aa1e); }
.annot-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.annot-badge { font-size: 9px; font-weight: 700; letter-spacing: .03em; padding: 0 5px; border-radius: 6px; line-height: 15px; }
.annot-badge.file { background: #e2e8f0; color: #475569; }
.annot-badge.app { background: #fbf1d3; color: #8a5a00; }
.annot-edited { font-size: 9px; color: #b45309; font-style: italic; }
.annot-tools { margin-left: auto; display: inline-flex; gap: 2px; opacity: .55; }
.annot-item:hover .annot-tools, .annot-tools:focus-within { opacity: 1; }
.annot-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink, #334155); margin-top: 1px; }
.annot-empty { color: #94a3b8; font-style: italic; }
.annot-btn { font: inherit; font-size: 10px; line-height: 1.4; padding: 0 6px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--brand-navy, #172a5e); cursor: pointer; }
.annot-btn:hover { border-color: var(--brand-gold, #e6aa1e); background: #fffaf0; }
.annot-btn.add { align-self: flex-start; color: #64748b; }
.annot-btn.primary { background: var(--brand-navy, #172a5e); color: #fff; }
.annot-btn.on { color: #8a5a00; font-weight: 700; }
.annot-editor { display: flex; flex-direction: column; gap: 4px; }
.annot-editor textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 5px; resize: vertical; background: #fff; color: #1e293b; }
.annot-editor-row { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.annot-help { margin-right: auto; font-size: 9px; color: #94a3b8; }
.annot-about { margin: 0 0 10px; font-size: 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 8px; }
.annot-about > summary { font-weight: 700; cursor: pointer; color: #334155; display: flex; align-items: center; gap: 6px; }
.annot-count { font-size: 9px; background: #e2e8f0; color: #475569; border-radius: 8px; padding: 0 5px; font-weight: 700; }
.annot-bio { margin: 6px 0; }
.annot-bio .annot-meta .annot-btn { margin-left: auto; }
.annot-bio-text { margin-top: 4px; line-height: 1.45; color: #334155; }
.annot-bio-text p { margin: 0 0 6px; } .annot-h { font-weight: 700; margin: 6px 0 2px; color: #172a5e; }
.photo-strip { margin: 0 0 10px; display: flex; flex-direction: column; gap: 5px; }
.photo-main { display: block; width: 100%; height: 170px; padding: 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #f1f5f9; cursor: zoom-in; overflow: hidden; }
.photo-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-row { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.photo-thumb { flex: none; width: 58px; height: 58px; padding: 0; border: 1px solid #e2e8f0; border-radius: 6px; background: #f1f5f9; cursor: zoom-in; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-ph { font-size: 22px; opacity: .35; display: flex; align-items: center; justify-content: center; height: 100%; }
.photo-add { flex: none; height: 58px; min-width: 58px; padding: 0 8px; border: 1px dashed #cbd5e1; border-radius: 6px; background: none; color: #64748b; font: inherit; font-size: 11px; cursor: pointer; }
.photo-row.is-empty .photo-add { height: 26px; }
.photo-add:hover { border-color: var(--brand-gold, #e6aa1e); color: var(--brand-navy, #172a5e); }
.photo-note { font-size: 11px; color: #475569; background: #fffaf0; border: 1px solid #f2d38a; border-radius: 6px; padding: 4px 7px; }
.photo-note button { font: inherit; font-size: 11px; border: none; background: none; color: var(--brand-navy, #172a5e); text-decoration: underline; cursor: pointer; padding: 0 2px; }
.photo-asked { color: #15803d; }
.photo-box { position: fixed; inset: 0; z-index: 20000; background: rgba(5, 9, 22, .9); display: flex; align-items: stretch; justify-content: center; gap: 16px; padding: 40px 24px 24px; box-sizing: border-box; }
.pb-figure { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.pb-img { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.pb-img img { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); border-radius: 4px; }
.pb-missing { max-width: 420px; text-align: center; font-size: 14px; } .pb-missing code { color: #f2d38a; word-break: break-all; }
.pb-side { flex: 0 0 300px; background: var(--panel, #fff); color: var(--ink, #334155); border-radius: 10px; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.pb-title, .pb-date, .pb-tag-in { font: inherit; border: 1px solid #e2e8f0; border-radius: 5px; padding: 4px 6px; background: transparent; color: inherit; }
.pb-title { font-size: 15px; font-weight: 700; }
.pb-q { font-size: 10px; color: #64748b; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pb-tag { background: #e8eefb; color: #172a5e; border-radius: 10px; padding: 1px 4px 1px 8px; font-size: 11px; }
.pb-tag button { border: none; background: none; cursor: pointer; color: inherit; font-size: 12px; padding: 0 2px; }
.pb-tag-in { width: 80px; font-size: 11px; }
.pb-remove { align-self: flex-start; margin-top: auto; color: #b91c1c; }
.pb-close, .pb-prev, .pb-next { position: absolute; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; line-height: 40px; padding: 0; }
.pb-close { top: 10px; right: 14px; } .pb-prev { left: 14px; top: 50%; } .pb-next { right: 330px; top: 50%; }
.pb-close:hover, .pb-prev:hover, .pb-next:hover { background: rgba(230,170,30,.55); }
@media (max-width: 768px) { .photo-box { flex-direction: column; padding: 48px 10px 10px; } .pb-side { flex: 0 1 45%; } .pb-next { right: 14px; top: 30%; } .pb-prev { top: 30%; } }
html[data-theme="dark"] .annot-item { background: rgba(255,255,255,.03); border-left-color: var(--panel-line); }
html[data-theme="dark"] .annot-item.is-app { border-left-color: #e6aa1e; }
html[data-theme="dark"] .annot-badge.file { background: #1c2742; color: #c5d0ee; } html[data-theme="dark"] .annot-badge.app { background: #3b3320; color: #f5d98c; }
html[data-theme="dark"] .annot-about, html[data-theme="dark"] .photo-main, html[data-theme="dark"] .photo-thumb { background: var(--panel-2); border-color: var(--panel-line); }
html[data-theme="dark"] .annot-about > summary, html[data-theme="dark"] .annot-bio-text, html[data-theme="dark"] .annot-text { color: var(--ink); }
html[data-theme="dark"] .annot-editor textarea { background: var(--panel-2); color: var(--ink); border-color: var(--panel-line); }
html[data-theme="dark"] .photo-note { background: #2b2614; border-color: #5a4a1c; color: var(--ink); }
html[data-theme="dark"] .annot-btn { color: #c5d0ee; } html[data-theme="dark"] .annot-h { color: #f2f5ff; }
.pb-side .annot-btn { align-self: flex-start; }
.photo-box { padding-top: 60px; }
.pb-close { top: 12px; right: 18px; }

/* ---------- 0.3.14a ---------- */
/* resizers: smaller grips; the people list's top border drags too */
#sidebarResizer::before { width: 10px !important; height: 32px !important; padding: 9px 3px !important; left: 4px !important; }
#sidebar.with-people .people-panel { flex: 0 0 var(--pp-share, 45%); position: relative; }
#sidebar.with-people .sidebar-content { flex: 1 1 auto; }
.pp-resizer { position: absolute; left: 0; right: 0; top: -6px; height: 12px; cursor: row-resize; z-index: 3; touch-action: none; }
.pp-resizer::before { content: ""; position: absolute; left: 50%; top: 2px; width: 32px; height: 8px; transform: translateX(-50%); box-sizing: border-box; padding: 2px 9px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: repeating-linear-gradient(90deg, #94a3b8 0 1.5px, transparent 1.5px 5px) content-box, #fff padding-box; box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.pp-resizer:hover::before, #sidebar.pp-resizing .pp-resizer::before { border-color: var(--brand-gold, #e6aa1e); }
#sidebar.pp-resizing { user-select: none; }
html[data-theme="dark"] .pp-resizer::before { background: repeating-linear-gradient(90deg, #93a3c7 0 1.5px, transparent 1.5px 5px) content-box, var(--panel) padding-box; border-color: var(--panel-line); }
@media (max-width: 768px) { .pp-resizer { display: none; } #sidebar.with-people .people-panel { flex: 1 1 auto; } }
/* "+ Photo" only while editing (the strip disappears when there is nothing to show) */
#sidebar:not(.editing) .photo-add { display: none; }
#sidebar:not(.editing) .photo-row.is-empty { display: none; }
#sidebar:not(.editing) .photo-strip:not(:has(.photo-main)):not(:has(.photo-note)) { display: none; }
/* left corner: the View and Lens pop-ups line up with their buttons; the Lens button moves right, clear of the generation sliders; the divider follows */
.color-menu-pop { padding-left: 0 !important; padding-right: 0 !important; }
.display-suite > .color-menu:not(.view-menu) { margin-left: 14px; }
.display-suite > .suite-sep { margin: 3px 4px !important; }
/* the chosen view and lens are dark, like the toggles beside them */
.color-menu-pop button.active > i, .color-menu-pop button.active > .vi, .view-pop button.active > .vi, #viewPop .vm-row.has-active > button > .vi { background: var(--brand-navy, #172a5e) !important; border-color: var(--brand-navy, #172a5e) !important; color: #fff !important; }
html[data-theme="dark"] .color-menu-pop button.active > i, html[data-theme="dark"] .color-menu-pop button.active > .vi, html[data-theme="dark"] #viewPop .vm-row.has-active > button > .vi { background: #e6aa1e !important; border-color: #e6aa1e !important; color: #0a1128 !important; }
.picker-names { display: flex; gap: 6px; } .picker-names .picker-search { flex: 1 1 50%; min-width: 0; }

/* ---------- 0.3.15a ---------- */
.annot-details table { border-collapse: collapse; width: 100%; margin-top: 2px; }
.annot-details th { text-align: left; font-weight: 600; color: #64748b; padding: 1px 8px 1px 0; vertical-align: top; white-space: nowrap; }
.annot-details td { padding: 1px 0; overflow-wrap: anywhere; }
.privacy-badge { font-size: 9px; font-weight: 700; color: #475569; background: #e2e8f0; border-radius: 6px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.ev-detail { color: #64748b; }
#sidebar .pp-head { background: var(--brand-cream, #fefcf7) !important; }   /* the same as the sidebar's own header */
#sidebar .pp-head:hover { background: #f6f1e3 !important; }
html[data-theme="dark"] #sidebar .pp-head { background: var(--panel-2) !important; }
.pp-sort { font: inherit; font-size: 10px; border: 1px solid var(--panel-line, #cbd5e1); border-radius: 6px; background: transparent; color: var(--ink-soft, #64748b); padding: 0 2px; margin-left: 4px; max-width: 92px; }
.pp-row.is-vis .pp-name { font-style: italic; }
/* first load: the home person's line, then the generations fade in (js/17c-animations.js) */
#viewport.intro-wait .person-group:not(.intro-root), #viewport.intro-wait .connector-arc-line { opacity: 0 !important; }
@keyframes introIn { from { opacity: 0; } to { opacity: 1; } }
#viewport.intro .person-group { animation: introIn .42s ease-out both; animation-delay: var(--d, 0ms); }

/* ---------- 0.3.16a: generation sliders: longer up, shorter down, with a notch per generation ---------- */
.gen-slider-wrap:has(#genSlider) { height: 104px; } .gen-slider-wrap:has(#genSlider) input[type="range"] { width: 104px; }
.gen-slider-wrap:has(#descSlider) { height: 58px; } .gen-slider-wrap:has(#descSlider) input[type="range"] { width: 58px; }
@media (max-width: 768px) { .gen-slider-wrap:has(#genSlider) { height: 88px; } .gen-slider-wrap:has(#genSlider) input[type="range"] { width: 88px; } .gen-slider-wrap:has(#descSlider) { height: 50px; } .gen-slider-wrap:has(#descSlider) input[type="range"] { width: 50px; } }
/* the Lens button sits one gap from View (it had an extra 14px); its menu is as wide as its widest choice, so the scroll bar runs beside the choices */
.display-suite > .color-menu:not(.view-menu) { margin-left: 0; }
#modeSwitch { min-width: 0; width: max-content; }
/* 0.3.16a: the people list's scope as a pop-up */
.pp-scope-wrap { position: relative; display: inline-flex; margin-left: 6px; }
.pp-scope-btn { border: 1px solid var(--panel-line, #cbd5e1) !important; border-radius: 6px; background: #fff !important; padding: 1px 8px !important; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; color: var(--brand-navy, #172a5e); white-space: nowrap; }
#ppScope { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; margin: 0; display: flex; flex-direction: column; gap: 4px; border: none; overflow: visible; }
#ppScope[hidden] { display: none; }
#ppScope button { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16); padding: 4px 12px; font-size: 11px; text-align: left; white-space: nowrap; }
#ppScope button.on { background: #fbf1d3; color: var(--brand-navy); font-weight: 800; }
#ppScope button:disabled { opacity: 0.45; cursor: not-allowed; }
html[data-theme="dark"] .pp-scope-btn, html[data-theme="dark"] #ppScope button { background: var(--panel) !important; border-color: var(--panel-line) !important; color: var(--ink); }
html[data-theme="dark"] #ppScope button.on { background: #3b3320 !important; color: #f5d98c; }
/* 0.3.16a: the timeline's filter menu is wide enough for "Present day" */
.sidebar-tools .sidebar-filters .sidebar-options { min-width: 280px; }
.sidebar-filters .sf-switch .seg button { white-space: nowrap; }
/* 0.3.16a: About opens like every other drawer: a caret that turns */
.annot-about > summary::before { content: "\25B8"; display: inline-block; font-size: 10px; color: #64748b; transition: transform 0.15s ease; }
.annot-about[open] > summary::before { transform: rotate(90deg); }
.annot-about > summary::-webkit-details-marker { display: none; }
/* ---------- 0.3.16a: dialog checkup ---------- */
.dlg { overflow-x: hidden; box-sizing: border-box; }
.dlg *, .dlg *::before, .dlg *::after { box-sizing: border-box; }
.dlg input, .dlg select, .dlg textarea { max-width: 100%; min-width: 0; }
.dlg-pair { display: flex; gap: 8px; } .dlg-pair > .dlg-field { flex: 1 1 0; min-width: 0; } .dlg-pair > .dlg-field[hidden] { display: none; }
.dlg-pair > .dlg-field input { width: 100%; }
.picker-names { position: relative; flex-wrap: nowrap; }
.picker-names .combo-list { top: calc(100% + 2px); }
.picker-sex { margin-top: 2px; } .picker-sex button { padding: 4px 12px; font-size: 12px; }
.picker-sex[hidden] { display: none !important; }
.picker.both .picker-new-inline .picker-sex { flex: none; }
.dlg .picker-facts input, .dlg .picker-names input { width: auto; flex: 1 1 0; min-width: 0; }
.dlg .picker-facts, .dlg .pf-row, .dlg .picker-names, .dlg .picker, .dlg .picker-new { min-width: 0; max-width: 100%; }

/* ---------- 0.3.17a ---------- */
/* the plan try-out switch in the header */
.tier-try { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); display: inline-flex; border: 1px solid var(--brand-line, #cbd5e1); border-radius: 8px; overflow: hidden; z-index: 3; }
header { position: relative; }
.tier-try button { border: none; background: #fff; padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; color: #475569; }
.tier-try button + button { border-left: 1px solid var(--brand-line, #cbd5e1); }
.tier-try button.on { background: var(--brand-navy, #172a5e); color: #fff; }
html[data-theme="dark"] .tier-try button { background: var(--panel); color: var(--ink); } html[data-theme="dark"] .tier-try button.on { background: #f0b52a; color: #0a1128; }
@media (max-width: 768px) { .tier-try { right: 8px; top: auto; bottom: 2px; transform: none; } .tier-try button { padding: 2px 7px; font-size: 10px; } }
/* the free plan's stop on a generation slider */
.gen-cap { position: absolute; left: 50%; width: 18px; height: 3px; margin-top: -1.5px; transform: translateX(-50%); background: #d9480f; border-radius: 2px; z-index: 2; pointer-events: auto; box-shadow: 0 0 0 1px #fff; }
.gen-cap[hidden] { display: none; }
/* animations (Display → Animations); all off with the toggle */
html.no-anim #sidebar, html.no-anim .suite { transition: none !important; }
.person-group.anim-op { animation: annOp 0.34s ease-out; }
@keyframes annOp { from { opacity: var(--from, 1); } }
#panes.comparing.cmp-opening #compareFrame { animation: annSlide 0.32s ease-out; }
@keyframes annSlide { from { transform: translateX(40%); opacity: 0; } }
html.no-anim #panes.comparing.cmp-opening #compareFrame { animation: none; }
/* ---------- 0.3.18a: touchscreens ---------- */
html { touch-action: manipulation; }   /* no double-tap zoom; pinch still works, and the chart keeps its own */
#chart { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tap-open .ev-edit, .rel-row.tap-open .rel-x, .annot-item.tap-open .annot-tools { opacity: 1; }
.suite .dock-hint { display: flex; position: absolute; inset: 0; opacity: 0; pointer-events: none; align-items: center; justify-content: space-evenly; color: #64748b; }
.suite .dock-hint svg { width: 6px; height: 6px; fill: currentColor; flex: none; }
.gen-suite .dock-hint, .multi-suite .dock-hint { flex-direction: column; padding: 6px 0; }
.display-suite .dock-hint { flex-direction: row; padding: 0 6px; }
@media (pointer: coarse) {   /* a tucked strip wide enough for a finger */
  .gen-suite.docked:not(.near):not(.pinned), .multi-suite.docked:not(.near):not(.pinned) { width: 22px; }
  .display-suite.docked:not(.near):not(.pinned) { height: 22px; }
}
/* ---------- 0.3.19a: keyboard shortcuts ---------- */
.keys-btn { border-radius: 50% !important; }
@media not (any-pointer: fine) { .keys-btn { display: none !important; } }   /* touch-only: no keyboard to speak of */
.keys-sheet { position: fixed; right: 20px; bottom: 150px; z-index: 3000; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22); padding: 10px 14px 12px; font-size: 12px; color: var(--brand-navy, #172a5e); }
.keys-sheet .ks-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.keys-sheet .ks-x { border: none; background: none; cursor: pointer; font-size: 14px; color: #64748b; }
.keys-sheet table { border-collapse: collapse; width: 100%; } .keys-sheet td { padding: 3px 4px; vertical-align: top; } .keys-sheet td:first-child { white-space: nowrap; }
.keys-sheet kbd { font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
html[data-theme="dark"] .keys-sheet { background: var(--panel); border-color: var(--panel-line); color: var(--ink); } html[data-theme="dark"] .keys-sheet kbd { background: var(--panel-2); border-color: var(--panel-line); }
/* 0.3.19a: photos on events and timelines; people in a photo */
.ev-photo { border: none; background: none; padding: 0; font: inherit; color: var(--brand-navy, #172a5e); text-decoration: underline dotted; cursor: pointer; }
.ev-photos { margin-top: 1px; }
.pb-people { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.pb-people .pb-sub { flex-basis: 100%; font-size: 11px; color: #64748b; font-weight: 700; }
.pb-person .pb-go { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; }
.pb-picker { flex-basis: 100%; }
.pb-event { width: 100%; margin: 4px 0; font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; }

/* 0.3.28a: the generation slider beyond the tree's last generation; a short fade-in for the menus (the docks already slide) */
.gen-grey { position: absolute; left: 50%; width: 14px; transform: translateX(-50%); background: rgba(148, 163, 184, 0.55); border-radius: 3px; z-index: 1; pointer-events: none; }
@keyframes pop-in { from { opacity: 0; translate: 0 -5px; } to { opacity: 1; translate: 0 0; } }
.color-menu-pop:not([hidden]), .main-menu-pop:not([hidden]) { animation: pop-in 0.14s ease-out; }
@media (prefers-reduced-motion: reduce) { .color-menu-pop:not([hidden]), .main-menu-pop:not([hidden]) { animation: none; } }
/* newspaper leads panel (skeleton, not yet hooked into the timeline) */
.leads-panel { font-size: 13px; max-width: 420px; } .leads-form label, .leads-capture label { display: block; margin: 4px 0; } .leads-form input, .leads-capture input, .leads-capture textarea { width: 100%; box-sizing: border-box; }
.leads-archive { border: 1px solid #e2e8f0; border-radius: 6px; margin: 6px 0; padding: 4px 8px; } .leads-archive a { display: block; margin: 3px 0; }
.leads-badge { margin-left: 8px; font-size: 11px; padding: 1px 6px; border-radius: 8px; } .leads-badge.free { background: #dcfce7; color: #166534; } .leads-badge.paid { background: #fef3c7; color: #92400e; }
.leads-tip, .leads-empty { color: #64748b; margin: 3px 0; } .leads-holdings { margin: 4px 0 4px 16px; padding: 0; }

/* 0.3.28a: display-mode icons draw every part: shaded ones solid, the rest empty outlines */
.vi svg .vi-off { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.5; } .vi svg .vi-on { fill: currentColor; }

/* 0.3.28a: the display menu is one vertical list; the items under Rings and Capsules are indented a little */
#viewPop .vm-row { flex-direction: column; align-items: stretch; gap: 3px; margin-bottom: 4px; }
#viewPop .vm-sub { display: flex; flex-direction: column; position: static; margin-left: 16px; gap: 3px; }
#viewPop .vm-sub::before { display: none; }