/* Styles for the William III family tree (site/index.html). */

/* =========================================================================
   DESIGN TOKENS
   Every colour on the page is defined once here as a CSS variable.
   The two dark-mode blocks below only change the values, so the rest of the
   stylesheet never has to know which theme is active.
   Layout: a header with a colour legend, then a scrollable "chart" area
   holding one large SVG drawing of the tree.
   ========================================================================= */
:root {
  --bg: #eef0f2;          /* page background */
  --paper: #fbfbfc;       /* background of the chart area */
  --fg: #1d232b;          /* main text */
  --muted: #5d6672;       /* secondary text (years, labels) */
  --rule: #cfd4da;        /* borders */
  --line: #9aa2ad;        /* marriage and descent lines */
  --ink: #1d232b;         /* highlighted lines */

  /* One stroke colour and one light fill ("tint") per house */
  --habsburg: #b3261e;     --habsburg-tint: #f7e0dd;
  --bourbon: #2a55a3;      --bourbon-tint: #dde6f6;
  --stuart: #7a3e9d;       --stuart-tint: #eee0f5;
  --orange: #d46a12;       --orange-tint: #fbe5d0;
  --hohenzollern: #2f3b45; --hohenzollern-tint: #d9dee3;
  --palatinate: #2a7a56;   --palatinate-tint: #d6ede2;
  --other: #8a9099;        --other-tint: #ffffff;

  --font-display: "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
}

/* Dark theme: used when the computer is set to dark mode... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --paper: #1b1f24; --fg: #e9e7e2; --muted: #a2a9b2;
    --rule: #333a42; --line: #5c6570; --ink: #f2efe8;
    --habsburg: #e8695f;     --habsburg-tint: #3b2120;
    --bourbon: #739ae3;      --bourbon-tint: #1f2b42;
    --stuart: #b98bd9;       --stuart-tint: #2f2339;
    --orange: #f0954a;       --orange-tint: #3d2a18;
    --hohenzollern: #aebbc7; --hohenzollern-tint: #2a3239;
    --palatinate: #62c295;   --palatinate-tint: #1b3429;
    --other: #7d848d;        --other-tint: #1f2328;
    color-scheme: dark;
  }
}
/* ...or when a page theme switch explicitly asks for dark. */
:root[data-theme="dark"] {
  --bg: #14171b; --paper: #1b1f24; --fg: #e9e7e2; --muted: #a2a9b2;
  --rule: #333a42; --line: #5c6570; --ink: #f2efe8;
  --habsburg: #e8695f;     --habsburg-tint: #3b2120;
  --bourbon: #739ae3;      --bourbon-tint: #1f2b42;
  --stuart: #b98bd9;       --stuart-tint: #2f2339;
  --orange: #f0954a;       --orange-tint: #3d2a18;
  --hohenzollern: #aebbc7; --hohenzollern-tint: #2a3239;
  --palatinate: #62c295;   --palatinate-tint: #1b3429;
  --other: #7d848d;        --other-tint: #1f2328;
  color-scheme: dark;
}

/* =========================================================================
   PAGE LAYOUT
   ========================================================================= */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  padding-inline: 16px;          /* side gutter */
  display: flex;                  /* header on top, chart fills the rest */
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
}

header {
  padding-block: 18px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}

.status {
  margin: 4px 0 0;
  color: var(--muted);
  min-height: 1.4em;               /* keeps the layout steady as the text changes */
}
.status strong { color: var(--fg); font-weight: 700; }

/* Title and status take the free space on the left; the key area sits on the right */
header > div:first-child { flex: 1 1 320px; min-width: 0; }

/* Right-hand side of the header: the relationship box stacked above the legend */
.key-area {
  flex: 0 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The relationship box shown when two people are selected */
.relation {
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.relation-label {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.relation-title {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  text-wrap: balance;
}
.relation-details {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.4;
}

/* The legend: one coloured swatch per house */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid var(--house);
  background: var(--tint);
}

/* The chart area scrolls in both directions because the tree is wide */
.chart {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-block-end: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.chart svg { display: block; }

/* =========================================================================
   HOUSE COLOURS
   Each person's box gets a class such as "house-stuart". That class sets two
   local variables, --house and --tint, which the box styles below use.
   ========================================================================= */
.house-habsburg     { --house: var(--habsburg);     --tint: var(--habsburg-tint); }
.house-bourbon      { --house: var(--bourbon);      --tint: var(--bourbon-tint); }
.house-stuart       { --house: var(--stuart);       --tint: var(--stuart-tint); }
.house-orange       { --house: var(--orange);       --tint: var(--orange-tint); }
.house-hohenzollern { --house: var(--hohenzollern); --tint: var(--hohenzollern-tint); }
.house-palatinate   { --house: var(--palatinate);   --tint: var(--palatinate-tint); }
.house-other        { --house: var(--other);        --tint: var(--other-tint); }

/* =========================================================================
   TREE DRAWING (SVG)
   ========================================================================= */
.row-label {
  font-family: var(--font-display);
  font-size: 15px;
  fill: var(--muted);
}

.person { cursor: pointer; transition: opacity 0.2s; }
.person rect {
  fill: var(--tint);
  stroke: var(--house);
  stroke-width: 1.5;
}
.person .name  { font: 500 12.5px var(--font-body); fill: var(--fg); }
.person .years { font: 400 12px var(--font-body); fill: var(--muted); font-variant-numeric: tabular-nums; }
.person:hover rect { stroke-width: 2.5; }
.person:focus { outline: none; }
.person:focus-visible rect { stroke: var(--ink); stroke-width: 3; }

.marriage { stroke: var(--line); stroke-width: 3; }   /* thicker than descent lines so marriages stand out */
.descent  { stroke: var(--line); stroke-width: 1.25; fill: none; }
.marriage, .descent { transition: opacity 0.2s, stroke 0.2s; }

/* --- Highlighting -------------------------------------------------------
   When someone is selected, the <svg> gets the class "has-selection".
   Everyone fades except the selected person and their relations,
   and only the lines that connect them stay dark. */
.has-selection .person { opacity: 0.2; }
.has-selection .person.related,
.has-selection .person.selected { opacity: 1; }
.person.related rect  { stroke-width: 2.5; }
.person.selected rect { stroke-width: 4; }
.person.selected .name { font-weight: 700; }
/* When comparing two people, their outlines are 50% thicker still */
.comparing .person.selected rect { stroke-width: 6; }

.has-selection .marriage,
.has-selection .descent { opacity: 0.15; }
.has-selection .lit { opacity: 1; stroke: var(--ink); stroke-width: 2.5; }
.has-selection .marriage.lit { stroke-width: 3.75; }   /* highlighted marriages stay 50% thicker than other highlighted lines */

@media (prefers-reduced-motion: reduce) {
  .person, .marriage, .descent { transition: none; }
}