:root {
    --bg: #20252C;
    --panel: #101A3A;
    --accent: #EADFAF;
    --text: #FDF2C7;
    --muted: #D8CFA0;
    --glass: #1B2748;
    --header-h: 240px;
}

  /* tells the browser to include padding and borders inside width/height calculations (makes layout more predictable */
  * { box-sizing: border-box; }
  html, body { height: 100%; }

  
  body {
    margin: 0;  /* removes the default margins */
    overflow: hidden;  /* hides scrollbars on the main body */
    background: var(--bg);  /* sets the background to dark navy */
    color: var(--text);  /* sets the default text colour to yellow */
    font-family: 'IBM Plex Mono', monospace;  /* applies the default font */
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  /* defines the fixed bat at the top of the page */
  header {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
    padding: 22px 34px;
    background: var(--glass);
    box-shadow: 0 6px 14px rgba(0,0,0,.65);
    z-index: 300;
    height: var(--header-h);
    border-bottom: 1px solid rgba(234,223,175,0.5);
  }

  /* the left-hans side of the header block */
  .header-left { max-width: 70%; }
  
   /* header title i.e. "Queen Victoria's descendanets" */
   .header-title {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
    text-transform: uppercase;
  }

  /* header description i.e. short paragraph under header */
  .header-desc {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.45;
  }

  /* Controls directly below the paragraph text i.e person drop-down and search bar*/
  .header-controls {
    display:flex;
    gap:10px;
    margin-top:20px; /* space between text and dropdown/search */
    flex-wrap:wrap;
    max-width:100%;
  }

  /* positions the top-right navigation buttons */
  .header-buttons{
    position:absolute;
    top:16px;
    right:34px;
    display:flex;
    gap:10px;
  }

  /* styles the top-right navigation buttons */
  .header-btn{
    background:transparent;
    color:var(--text);
    border:1px solid var(--accent);
    padding:8px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.13em;
    transition:
      background 0.25s ease,
      box-shadow 0.25s ease,
      color 0.25s ease,
      transform 0.15s ease;
  }

  .header-btn:hover{
    background:var(--accent);
    color:var(--bg);
    box-shadow:0 0 10px rgba(234,223,175,0.7);
    transform:translateY(-1px);
  }

  /* Styles the Branch Dropdown menu */
  #branchwrap{
    min-width: 240px;
    background: rgba(12,24,60,.9);
    border:1px solid rgba(234,223,175,.35);
    border-radius:12px;
    padding:6px 10px;
    box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(234,223,175,.12) inset;
    display:flex; align-items:center;
  }

  /* styles the branch dropdown select list */
  #branchSelect {
    width:100%; border:0; outline:none; background:transparent;
    color: var(--accent); font-size:14px; line-height:22px;
  }

  /* Search */
  /* styles the search bar container */
  #searchwrap{
    position:relative;
    background: rgba(12,24,60,.9);
    border:1px solid rgba(234,223,175,.35);
    border-radius:12px;
    padding:8px 12px;
    box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(234,223,175,.12) inset;
    backdrop-filter: blur(4px);
    width: 400px;
    flex: 0 0 auto;
  }

  /* styles the text input of the search bar */
  #search{
    width:100%; border:0; outline:none; background:transparent;
    color:var(--text); font-size:16px; line-height:22px;
  }

  /* sets the default text in the search bar */
  #search::placeholder {
    color: var(--accent);   /* the yellow tone used sitewide */
    opacity: 1;             /* ensure browsers don’t fade it */
  }

  /* Suggestions dropdown */
  /* styles the drop-down search input */
  #suggest{
    position:absolute; top:100%; left:0; right:0; margin-top:6px;
    background:var(--glass);
    border:1px solid rgba(234,223,175,.35);
    border-radius:12px; overflow:hidden; display:none;
    z-index: 310;
    box-shadow:0 16px 40px rgba(0,0,0,.65);
  }

  /* makes the suggestions visible when JS adds the show class */
  #suggest.show{ display:block; }
  .sug{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; cursor:pointer;
    color:var(--text);
  }
  .sug:hover, .sug.active{ background:#22305F; }
  .s-name{ font-weight:700; }
  .s-title{ color:var(--muted); font-size:12px; }

  /* defined the scrollable area under the header */
  #scroll {
    position:absolute; left:0; right:0; bottom:0; top:var(--header-h);
    overflow: auto;
  }

  /* world is the canvas that houses all of the family tree content */
  #world  {
    position:relative;
    width:2400px;
    height:1600px;
    --gs:10px;
    transform-origin: top left; /* actual scale is set in JS via WORLD_SCALE */
  }

  /* applies the graph paper grid */
  #world.grid {
    background-image:
      linear-gradient(to right, rgba(234,223,175,.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(234,223,175,.08) 1px, transparent 1px);
    background-size: var(--gs) var(--gs);
    background-position: 0 0;
  }

  /* The SVG layer for drawing lines between people */
  #connector {
    position:absolute; inset:0; width:100%; height:100%;  /* Positioned on top of the world, full width & height */
    pointer-events:none; z-index:0; /*8 so lines don’t block mouse clicks on cards */
  }

  /* Common styles for all connector lines */
  .edge,.bus,.stem,.drop,.partner {
    stroke:var(--accent);
    stroke-width:2;
    fill:none;
    vector-effect:non-scaling-stroke;
  }

  .partner { stroke-width:2; opacity:.9; }  /* Slightly thinner and more transparent lines for partner connection */

  /* Parents of a child who are not married */
  .partner.unmarried {stroke-dasharray: 8 6;opacity: 0.9;}
  .dotted { stroke-dasharray: 6 6; } /* Defines a dashed line pattern (used for illegitimate child links, etc.). */

  /* the card representing each person */
.person {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 360px;
  height: 120px;
  background: var(--panel);
  border: 0.8px solid var(--accent);
  border-radius: 14px;
  overflow: visible;
  user-select: none;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(0,0,0,.55),
    0 0 0 1px rgba(234,223,175,.18) inset;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    filter .22s ease;
}

.person.living {
    background: var(--panel);
}

.person.living:hover {
    background: #162145;
}

/* Deceased people */

.person.deceased {
    background: #4A4A4A;
}

.person.deceased .name {
    color: var(--accent);
}

.person.deceased .title,
.person.deceased .title1 {
    color: #D5D5D5;
}

.person:hover {
    transform: translateY(-4px) scale(1.015);
    background: #3B6FA8;
}

.person.deceased:hover {
    background: #555555;
}


  .avatar { width:100%; height:100%; background:#111523; border-radius: 13px 0 0 13px; overflow:hidden; }
  .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
  .details {
    display:flex; flex-direction:column;
    justify-content:center;
    padding:12px 16px;
  }

.person.living .avatar img {
    filter: saturate(1.05);
}

.person.deceased .avatar img {
    filter:
        grayscale(100%)
        brightness(0.92)
        contrast(1.08);
}

.person:hover,
.person:focus,
.person:focus-within {
  z-index: 100;
}
  
  .name {
    font-weight:600;
    font-size:1.00rem;
    color:var(--accent);
  }

  .title1 {
    font-size:.8rem;
    color:var(--muted);
    margin-top:2px;
  }

  .title {
    font-size:.8rem;
    color:var(--muted);
    margin-top:4px;
  }

  /* defines a short "ring" animation around a card when focussed */
  @keyframes focusPulse {
    0%   { box-shadow:0 0 0 0 rgba(234,223,175,.55); }
    60%  { box-shadow:0 0 0 12px rgba(234,223,175,0); }
    100% { box-shadow:0 0 0 0 rgba(234,223,175,0); }
  }
  .focus-flash { animation: focusPulse 1.1s ease-out 1; }

  /* drawer is the left-hand side pop-out box */
  #drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: min(520px, 92vw);
    z-index: 400;
    transform: translateX(-105%);
    transition: transform .28s ease;
    pointer-events: none;
  }

  #drawer .drawer-content {
    height: 100%;
    background: #101628;
    border-right: 1px solid rgba(234,223,175,.35);
    box-shadow: 0 20px 60px rgba(0,0,0,.75);
    padding: 18px 20px;
    overflow: auto;
  }

  /* Hide the old heading entirely */
  #drawer .drawer-content h2 { display: none; }

  #drawer[open] {
    transform: translateX(0);
    pointer-events: auto;
  }

  .drawer-header {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: center;
  }

  .drawer-photo {
    width: 96px; height: 96px; border-radius: 10px;
    object-fit: cover;
    background:#111523;
    border:1px solid rgba(234,223,175,.45);
  }

  .drawer-name   {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.2;
  }

  .drawer-title1 { color: var(--muted); margin-top: 4px; }
  .drawer-title2 { color: var(--muted); margin-top: 2px; }

  .drawer-divider {
    border: 0;
    border-top: 1px solid rgba(234,223,175,.35);
    margin: 16px 0;
  }

  .drawer-facts-line {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text);
  }

  .fact-label {
    color: var(--muted);
    text-transform: lowercase;
    letter-spacing: .2px;
  }

  .fact-value {
    color: var(--text);
  }

  /* Biography block */
  .drawer-bio {
    margin-top: 16px;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--muted);
    white-space: pre-wrap; /* preserves line breaks from the biography field */
  }

  #backdrop {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 350;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  #backdrop[data-show="true"] {
    opacity: 1;
    pointer-events: auto;
  }






 /* EDITOR MODE */

.editor-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#editorToolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

#editorStatus {
  font-weight: 700;
}

.world-editing .person {
  cursor: grab;
  outline: 2px dashed rgba(229, 9, 20, 0.55);
  user-select: none;
  touch-action: none;
}

.world-editing .person:hover {
  outline-color: #e50914;
}

.world-editing .person.dragging {
  cursor: grabbing;
  z-index: 1000;
  opacity: 0.9;
  outline: 3px solid #e50914;
}

.world-editing .person.position-saved {
  animation: positionSaved 500ms ease;
}

@keyframes positionSaved {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 180, 90, 0.8);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(0, 180, 90, 0);
  }
}

dialog form {
  display: grid;
  gap: 10px;
  min-width: min(420px, 85vw);
}

dialog input,
dialog textarea {
  box-sizing: border-box;
  width: 100%;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}







.drawer-editor-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 223, 175, 0.35);
}

.make-space-left-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  cursor: pointer;
}

.make-space-left-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.make-space-left-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}




/* =====================================================
   PREVIOUS TITLES HOVER TOOLTIP
   ===================================================== */

.person {
  position: absolute;
}

/* Tooltip container */
.previous-titles-tooltip {
  position: absolute;

  left: 50%;
  top: calc(100% + 12px);

  transform: translateX(-50%) translateY(-4px);

  width: max-content;
  max-width: 340px;
  min-width: 220px;

  padding: 14px 16px;

  background: #101d35;
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.30);

  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  line-height: 1.5;

  text-align: left;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 1000;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}


/* Small arrow pointing back at the person card */
.previous-titles-tooltip::before {
  content: "";

  position: absolute;

  bottom: 100%;
  left: 50%;

  transform: translateX(-50%);

  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color:
    transparent
    transparent
    #101d35
    transparent;
}


/* Heading */
.previous-titles-heading {
  margin-bottom: 16px;

  font-size: 14px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  color: rgba(255, 255, 255, 0.65);
}


/* Actual database contents */
.previous-titles-text {
  color: #ffffff;
  white-space: pre-line;
}


/* Show only when there is previous_titles content */
.person:hover
.previous-titles-tooltip.has-content,
.person:focus
.previous-titles-tooltip.has-content,
.person:focus-within
.previous-titles-tooltip.has-content {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(-50%)
    translateY(0);
}