:root {
  /* One step darker than the 900s these used to be: green-900 and purple-900 are 3.4:1 on
     the page background, and 1100 (5.7:1) clears the 4.5:1 AA needs for the names. */
  --color-male: var(--swc-green-1100);
  --color-female: var(--swc-purple-1100);
  --timeline-height: 47vh;
  --site-heading-margin-start: 0px;
}

div.basic-info {
  max-height: 10vh;
}

/* The person page's "Basic Information" card (templates/person/details.tt): an icon panel
   beside a house-coloured body. Replaces @spectrum-css/card's horizontal card, which this
   was the only user of; gen2's swc-card is vertical only. The numbers are the old card's,
   measured on the running site: a 1px gray-100 border, 4px corners, a 70px icon in a 12px
   panel, and 16px of side padding in the body. */
.site-profile-card {
  background-color: var(--swc-background-layer-2-color);
  border: 1px solid var(--swc-gray-100);
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  min-width: 100px;
  position: relative;
}

.site-profile-card-preview {
  align-items: center;
  background-color: var(--swc-gray-100);
  border-radius: 3px 0 0 3px;
  box-sizing: content-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  width: 70px;
}

.site-profile-card-body {

  /* The title and body text colours; a house overrides both below. */
  --site-profile-card-text: var(--swc-gray-900);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}

.site-profile-card-title {
  color: var(--site-profile-card-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.site-profile-card-content {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
}

.site-profile-card-content ul {
  -moz-column-gap: 2em;
       column-gap: 2em;
  -moz-columns: 2;
       columns: 2;
  max-width: 50vw;
}

/* The four houses. Each is a Spectrum colour with the text step that clears AA on it. */
.site-profile-card-body.gryffindor {

  --swc-body-font-color: var(--swc-gray-200);
  --site-profile-card-text: var(--swc-gray-200);
  background-color: var(--swc-red-900);
}

.site-profile-card-body.hufflepuff {

  --swc-body-font-color: var(--swc-gray-900);
  background-color: var(--swc-yellow-300);
}

.site-profile-card-body.ravenclaw {

  --swc-body-font-color: var(--swc-gray-200);
  --site-profile-card-text: var(--swc-gray-200);
  background-color: var(--swc-blue-1000);
}

.site-profile-card-body.slytherin {

  --swc-body-font-color: var(--swc-gray-900);
  background-color: var(--swc-chartreuse-800);
}

iconify-icon.color-female {
  color: var(--color-female);
}

iconify-icon.color-male {
  color: var(--color-male);
}

iconify-icon {
  box-sizing: border-box;
  display: block;
  height: 100%;
  width: 5em;
}

ul.bio {

  --site-body-margin-end: 1px;
  padding-left: 2em;
}

.timeline-card {
  border-color: var(--swc-blue-400);
  border-radius: 4px;
  border-style: solid;
  box-sizing: border-box;
  height: calc(var(--timeline-height) + 2em);
  margin: 1px 0;
  max-width: 100%;
  min-width: 1vw;
  width: auto;
  z-index: 1;
}

svg.family-tree polygon {
  fill: none;
  fill-opacity: 0;
}

svg .color-male {
  color: var(--color-male);
  fill-opacity: 0;
  stroke: var(--color-male);
}

svg .color-female {
  color: var(--color-female);
  fill-opacity: 0;
  stroke: var(--color-female);
}

svg .family-node.junction {
  color: var(--swc-blue-400);
  fill-opacity: 0;
  stroke: var(--swc-blue-400);
}

/* The family tree (templates/family/details.tt). The tree itself - rows, indent, chevron -
   is the shared disclosure tree in navigation.css; this is what is particular to people.
   Rows are 32px here against the navigation's 24px: they carry a larger icon and two
   styles of text. */
.family-tree-container {
  margin: 2em 0;
}

.family-tree-container .site-tree-row {
  block-size: 32px;
}

/* Leaves align with branches here. In the navigation a leaf sits 6px further in; with
   people, whose names are the whole point, that read as a mistake. */
.family-tree-container .site-tree-leaf {
  flex-basis: 36px;
  inline-size: 36px;
}

.family-person {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 0.5em;
  min-inline-size: 0;
}

/* The unscoped `iconify-icon` rule above makes icons block-level and 5em wide, for the
   timeline cards; a person's gender icon is a one-em glyph in a line of text. */
.family-person iconify-icon {
  block-size: 1em;
  display: inline-block;
  flex: none;
  inline-size: 1em;
}

.family-person-link {
  color: var(--text-1);
  min-inline-size: 0;
  text-decoration: none;
}

a.family-person-link:hover {
  text-decoration: underline;
}

a.family-person-link:focus-visible {
  outline: 2px solid var(--swc-link-focus-indicator-color);
  outline-offset: 2px;
}

.family-person .person-name {
  font-weight: 500;
}

.family-person.is-male .person-name {
  color: var(--color-male);
}

.family-person.is-female .person-name {
  color: var(--color-female);
}

.family-person .person-dates {
  color: var(--swc-gray-700);
  font-size: 0.9em;
  font-style: italic;
  margin-inline-start: 0.5em;
}

/* The summary card at the head of a family page (an <swc-card>). Its default maximum width
   is 280px, which wraps the "genealogical gaps" explanation onto many lines. */
.family-summary {

  --swc-card-base-max-inline-size: 32rem;
  display: block;
  margin-block-end: 1rem;
}