/*
 * Bonsai Family Tree
 *
 * Hand-written, no build step. Tokens are the palette locked on the design
 * canvas and in spec section 5.0; change them there first.
 */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Polish and other Central European letters: ż, ł, ś, ć, ę, ą. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surface */
  --canvas: #EFEEE9;
  --card: #FFFFFF;
  --inset: #F4F3EF;
  --photo-well: #E7E5DE;
  --silhouette: #CFCCC2;

  /* Text */
  --ink: #1C1C1A;
  --ink-secondary: #3B3A36;
  --muted: #78776F;
  --label: #8C8B84;
  /* Was #A3A29A on the design canvas, which reads at 2.6:1 on a card - below
     the 3:1 floor for small text, and this family's readers are not all young.
     Darkened just enough to clear it while staying the quietest grey here. */
  --faint: #929189;

  /* Lines */
  --line: #E0DFD9;
  --connector: #D5D3CA;

  /* Role - colour codes role in the tree, never sex */
  --parents: #B07A2E;
  --self: #2F6B4F;
  --self-hover: #1E4B36;
  --self-on-tint: #235340;
  --children: #2E7D8A;
  --spouse: #7A4A7E;
  --deceased: #8C8B84;

  --parents-tint: #F2E6D2;
  --self-tint: #DDE6E0;
  --children-tint: #DDE9EB;
  --spouse-tint: #E9DEEA;

  /* Text on a filled role colour: white here, near-black in the dark theme,
     where the role colours are light. Amber is too light to carry white text
     at this size, so it gets its own dark ink in both themes. */
  --on-role: #FFFFFF;
  --on-parents: #201504;

  /* Hover grounds */
  --hover-quiet: #EAE9E3;
  --hover-row: #FBFAF7;

  /* Trouble: errors, deletion, and "needs attention" */
  --danger: #9E3A2A;
  --danger-hover: #7E2C1F;
  --danger-line: #B3412F;
  --danger-ink: #8E3526;
  --danger-tint: #FBEFEC;
  --danger-border: #E8C4BC;
  --warn-ink: #7A531B;
  --warn-ink-strong: #8A5F20;

  /* Behind a photograph, so a portrait is never on a bright field. */
  --photo-backdrop: #1C1C1A;

  /* Geometry */
  --radius-card: 12px;
  --radius-focus: 14px;
  --radius-well: 10px;
  --radius-chip: 7px;
  --shadow-card: 0 1px 2px rgba(28, 28, 26, .06), 0 6px 16px rgba(28, 28, 26, .05);
  --shadow-focus: 0 2px 4px rgba(28, 28, 26, .07), 0 14px 32px rgba(28, 28, 26, .08);
  --gutter: 28px;
  --tap: 44px;

  /* Form controls, scrollbars and the browser's own widgets follow the theme. */
  color-scheme: light dark;
}

/*
 * Dark theme. UX-4.
 *
 * Follows the phone or computer's own setting; there is no switch on the site,
 * because every device that has a dark mode already has one, and a switch is
 * another thing to get out of step.
 *
 * Only the palette changes. The role colours lighten, because the light-theme
 * greens and browns are unreadable on a dark ground, and text on a filled
 * role colour turns dark for the same reason. Nothing else about the design
 * moves: same spacing, same shapes, same type.
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surface: warm, like the paper ground in the light theme, not blue-black. */
    --canvas: #141413;
    --card: #1E1E1C;
    --inset: #272725;
    --photo-well: #2C2C29;
    --silhouette: #4C4B46;

    --ink: #EDECE6;
    --ink-secondary: #D2D1CA;
    --muted: #A4A39A;
    --label: #908F87;
    --faint: #807F78;

    --line: #34332F;
    --connector: #43423C;

    --parents: #D8A657;
    --self: #6FC08E;
    --self-hover: #8ED3A8;
    --self-on-tint: #A9DCC0;
    --children: #5FC2D1;
    --spouse: #C49AD0;
    --deceased: #9A998F;

    --parents-tint: #382C1A;
    --self-tint: #1D3629;
    --children-tint: #16323A;
    --spouse-tint: #2F2438;

    /* The role colours are light now, so what sits on them must be dark. */
    --on-role: #12130F;
    --on-parents: #1C1405;

    --hover-quiet: #2E2E2B;
    --hover-row: #252523;

    --danger: #B9483A;
    --danger-hover: #9A3A2E;
    --danger-line: #E0806F;
    --danger-ink: #F0A093;
    --danger-tint: #33201C;
    --danger-border: #5C2E26;
    --warn-ink: #E0B978;
    --warn-ink-strong: #E6C083;

    --photo-backdrop: #0E0E0D;

    /* A shadow cannot be seen on a dark ground; these keep cards from
       dissolving into the canvas without pretending to be light. */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .35);
    --shadow-focus: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .45);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

a { color: var(--self); text-decoration: none; }
a:hover { color: var(--self-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--self); outline-offset: 2px; border-radius: 4px; }

h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
}

/* --- header ------------------------------------------------------------- */

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: 64px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
/* The 2004 site's bonsai, 56px, shown smaller so it stays sharp on high-density
   screens. Its white ground matches the header. */
.brand__logo { width: 44px; height: 44px; border-radius: 10px; }

.search {
  flex: 0 1 400px;
  display: flex; align-items: center; gap: 10px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-well);
  padding: 0 15px;
  height: 40px;
}
.search:focus-within { border-color: var(--self); background: var(--card); }
.search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14px; color: var(--ink);
}
.search input::placeholder { color: var(--faint); }
.search svg { color: var(--label); flex-shrink: 0; }
.site-header__end { flex: 0 0 auto; min-width: 34px; display: flex; justify-content: flex-end; }
.account-link { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 999px; }
.account-link:hover { text-decoration: none; background: var(--inset); }

/* --- page --------------------------------------------------------------- */

.page {
  padding: 26px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notice {
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* --- cards -------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--role, var(--line));
}
.role-parents  { --role: var(--parents);  --role-tint: var(--parents-tint); }
.role-self     { --role: var(--self);     --role-tint: var(--self-tint); }
.role-children { --role: var(--children); --role-tint: var(--children-tint); }
.role-spouse   { --role: var(--spouse);   --role-tint: var(--spouse-tint); }

.card__heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px 5px;
}
.card__heading .label { color: var(--role); }
.card__count { font-size: 12px; color: var(--faint); }

/* A small portrait or, far more often, a monogram - 187 of 198 people have no
   photograph, so the monogram is the normal case and is designed as one. */
.avatar {
  flex-shrink: 0;
  width: var(--avatar, 34px); height: var(--avatar, 34px);
  border-radius: 999px;
  background: var(--role-tint, var(--inset));
  color: var(--role, var(--muted));
  font-size: calc(var(--avatar, 34px) * .34);
  font-weight: 600;
  display: grid; place-items: center;
  overflow: hidden;
}
.avatar--square { border-radius: var(--radius-well); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- the tree ----------------------------------------------------------- */

.tree {
  --focus-width: 660px;
  --parent-width: 258px;
  --pair-gap: 20px;
  width: 100%;
  max-width: var(--focus-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parents {
  display: grid;
  grid-template-columns: repeat(2, var(--parent-width));
  gap: var(--pair-gap);
}

.parent-slot { display: flex; flex-direction: column; gap: 8px; }
/* When one slot holds more cards than the other, the shorter one's line runs
   down to meet the connector instead of stopping short of it. */
.parent-slot::after {
  content: ""; flex-grow: 1;
  width: 2px; margin: -8px auto 0;
  background: var(--connector);
}

.parent-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  color: var(--ink);
}
a.parent-card:hover { text-decoration: none; background: var(--hover-row); }
a.parent-card:hover .parent-card__name { color: var(--self); }
.parent-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.parent-card .label { color: var(--parents); }
.parent-card__name { font-size: 15.5px; font-weight: 600; }
.parent-card__years { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.parent-card__star { color: var(--parents); font-size: 11px; margin-left: 4px; }

.parent-card--empty {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--connector);
}
.parent-card--empty::before { display: none; }
.parent-card--empty .parent-card__name { color: var(--faint); font-weight: 500; }

/* A second parent in the same slot: the same card, quieter, so the shape of
   the tree stays predictable while the person stays a person. */
.parent-card--extra { padding: 9px 12px; gap: 10px; }
.parent-card--extra::before { height: 2px; }
.parent-card--extra .parent-card__name { font-size: 14px; }
.parent-card--extra .parent-card__years { font-size: 11.5px; }

/* Connectors: two stubs joined into one drop, and one drop split into two. */
.connector { display: flex; flex-direction: column; align-items: center; }
.connector__join {
  width: calc(var(--parent-width) + var(--pair-gap));
  height: 20px;
  border: 2px solid var(--connector);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.connector__drop { width: 2px; height: 18px; background: var(--connector); }
.connector__split {
  width: calc(50% + var(--pair-gap) / 2);
  height: 20px;
  border: 2px solid var(--connector);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.connector--descendants { width: 100%; }

/* The focused person */
.focus {
  width: 100%;
  border-radius: var(--radius-focus);
  box-shadow: var(--shadow-focus);
}
.focus::before { height: 4px; }
.focus.is-deceased { --role: var(--deceased); --role-tint: var(--photo-well); }
.focus.is-placeholder { --role: var(--parents); --role-tint: var(--parents-tint); }

.focus__body { padding: 20px 24px; display: flex; gap: 22px; }

.portrait { width: 126px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.portrait__frame {
  width: 126px; height: 148px;
  border-radius: var(--radius-well);
  background: var(--role-tint);
  display: grid; place-items: center;
  overflow: hidden;
}
.portrait__frame a { display: block; width: 100%; height: 100%; }
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__initials { font-size: 38px; font-weight: 600; color: var(--role); letter-spacing: -.01em; }
.portrait__dots { display: flex; gap: 5px; justify-content: center; }
.portrait__dots a {
  width: 20px; height: 12px;
  display: grid; place-items: center;
}
.portrait__dots a::after {
  content: ""; width: 20px; height: 3px; border-radius: 2px;
  background: var(--connector);
}
.portrait__dots a[aria-current="true"]::after { background: var(--self); }

.focus__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.focus__name { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.focus.is-placeholder .focus__name { color: var(--parents); }
.focus__aka { font-size: 14px; color: var(--muted); margin-top: 3px; }
.focus__caption { font-size: 13.5px; color: var(--muted); text-wrap: pretty; max-width: 46ch; }

.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact {
  background: var(--inset);
  border-radius: 8px;
  padding: 8px 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.fact__value { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fact--unknown { background: transparent; border: 1px dashed var(--connector); }
/* Someone who has died, or almost certainly has: quieter than a living age. */
.fact--remembered .fact__value { color: var(--muted); }
.fact--unknown .fact__value { color: var(--faint); font-weight: 400; }

/* Children and spouses */
.descendants {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pair-gap);
  align-items: start;
}

.relative-list { list-style: none; margin: 0; padding: 0 8px 8px; }
.relative {
  min-height: var(--tap);
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--ink);
}
a.relative:hover { text-decoration: none; background: var(--inset); }
a.relative:hover .relative__name { color: var(--self); }
.relative__text { display: flex; flex-direction: column; min-width: 0; }
.relative__name { font-size: 14.5px; font-weight: 500; }
.relative__detail { font-size: 12px; color: var(--muted); }
.relative__end {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.has-branch {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--children);
  background: var(--children-tint);
  border-radius: 999px;
  padding: 1px 7px;
}

/* --- search ------------------------------------------------------------- */

.results { width: 100%; max-width: 660px; display: flex; flex-direction: column; gap: 14px; }
.results__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.results__title span { color: var(--muted); font-weight: 500; }
.results .relative-list { padding-top: 8px; }
.empty-state { padding: 22px 24px; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* --- forms -------------------------------------------------------------- */

.notice--status { border-color: var(--self-tint); color: var(--self-on-tint); }

.form-page { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.form-intro h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.form-intro p { margin-top: 4px; color: var(--muted); text-wrap: pretty; }

.form-card { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.form-card::before { margin: 0 -22px 2px; }
.form-card > .label { color: var(--role); margin-bottom: -6px; }
.form-card .relative { margin: 0 -8px; }
.form-note { color: var(--muted); font-size: 14px; text-wrap: pretty; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field__label-row label { font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); }
.field__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__label-row a { font-size: 13px; }
.field input {
  height: var(--tap);
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--self); box-shadow: 0 0 0 3px var(--self-tint); }
.field input[readonly] { background: var(--inset); color: var(--muted); }
.field input[aria-invalid="true"] { border-color: var(--danger-line); }
.field__error { font-size: 13.5px; color: var(--danger-ink); }

.checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-secondary); min-height: 32px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--self); }

.button {
  height: var(--tap);
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--self);
  color: var(--on-role);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.button:hover { background: var(--self-hover); }
.button--quiet { background: transparent; color: var(--ink-secondary); border: 1px solid var(--line); }
.button--quiet:hover { background: var(--card); }

.form-footnote { font-size: 13.5px; color: var(--muted); text-align: center; text-wrap: pretty; }

/* --- actions ------------------------------------------------------------ */

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions form { margin: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px;
  border: 0; border-radius: 999px;
  background: var(--inset); color: var(--ink-secondary);
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.pill:hover { background: var(--hover-quiet); color: var(--ink); text-decoration: none; }
.pill--primary { background: var(--self); color: var(--on-role); }
.pill--primary:hover { background: var(--self-hover); color: var(--on-role); }
.pill--on { background: var(--self-tint); color: var(--self-on-tint); }

.card__add { font-size: 12.5px; font-weight: 600; color: var(--role); }
/* An empty Children or Spouse box: dashed, like an empty parent slot. */
.relatives-empty {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 16px; min-height: 64px;
  background: transparent; box-shadow: none;
  border: 1.5px dashed var(--connector);
  color: var(--ink);
}
.relatives-empty::before { display: none; }
.relatives-empty .label { color: var(--role); }
.relatives-empty__text { font-size: 15px; font-weight: 500; color: var(--faint); }
a.relatives-empty--add .relatives-empty__text { color: var(--role); font-weight: 600; }
a.relatives-empty--add:hover { background: var(--card); border-color: var(--role); text-decoration: none; }
.add-link { font-size: 13.5px; font-weight: 600; color: var(--self); }
a.parent-card--add:hover { background: var(--card); border-color: var(--parents); text-decoration: none; }
a.parent-card--add .parent-card__name { color: var(--parents); }

.notice--error { border-color: var(--danger-border); background: var(--danger-tint); color: var(--danger-ink); }

/* --- editing ------------------------------------------------------------ */

.edit-page { width: 100%; max-width: 660px; display: flex; flex-direction: column; gap: 16px; }

/* Section links on a long editor. They stay at the top of the screen while
   scrolling, so moving between Photos and Children never means scrolling back. */
.edit-nav {
  position: sticky; top: 0; z-index: 2;
  margin-bottom: -4px; padding-top: 6px;
  background: var(--canvas);
}
.edit-page > [id] { scroll-margin-top: 62px; }
.breadcrumb { font-size: 13.5px; margin-bottom: 6px !important; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); }
fieldset.field > legend.label { font-size: 10px; color: var(--role); }
.field__hint { font-size: 12.5px; color: var(--faint); }
.field select, .field input[type="date"] {
  height: var(--tap); padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); font: inherit; font-size: 16px; color: var(--ink);
}
.field select:focus, .field input[type="date"]:focus { outline: none; border-color: var(--self); box-shadow: 0 0 0 3px var(--self-tint); }

.partial-date__inputs { display: grid; grid-template-columns: 64px minmax(0, 1fr) 80px; gap: 6px; }
.partial-date__inputs input, .partial-date__inputs select { width: 100%; }

.choice-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.choice { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--self); flex-shrink: 0; }
.choice--person { min-height: var(--tap); padding: 4px 8px; margin: 0 -8px; border-radius: 8px; gap: 11px; }
.choice--person:hover { background: var(--inset); }
.follow-up { padding-top: 14px; border-top: 1px solid var(--line); }

/* Adding a relative: the new-person fields only matter when "Someone new" is
   chosen. Picking an existing person hides them - no JavaScript, just :has(). */
.new-person { display: flex; flex-direction: column; gap: 16px; }
form:has(input[name="existing_person_id"]:checked:not([value=""])) .new-person { display: none; }

.inline-search { display: flex; gap: 8px; }
.inline-search input {
  flex: 1; min-width: 0; height: var(--tap); padding: 0 13px;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 16px;
}
.inline-search input:focus { outline: none; border-color: var(--self); box-shadow: 0 0 0 3px var(--self-tint); }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.form-actions .button { display: inline-flex; align-items: center; }
.form-actions a.button:hover { text-decoration: none; }
.button--small { height: 36px; padding: 0 14px; font-size: 13.5px; }
.button--danger { background: var(--danger); color: #FFFFFF; }
.button--danger:hover { background: var(--danger-hover); }

.link-group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.link-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.link-row { display: flex; align-items: center; gap: 11px; min-height: var(--tap); }
.link-row--stacked { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.link-row__head { display: flex; align-items: center; gap: 11px; }
.link-row__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.link-row__actions form { margin: 0; }
.link-row .relative__name { color: var(--ink); }
.link-row .relative__name:hover { color: var(--self); }
.text-button { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--self); cursor: pointer; }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-button--danger { color: var(--danger-ink); }

.parent-kind { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding-left: 45px; }
.parent-kind__error { grid-column: 1 / -1; }

.marriage-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding-left: 45px; }
.marriage-dates__error { grid-column: 1 / -1; }

.danger-zone { --role: var(--danger); }

/* --- how are we related? ------------------------------------------------ */

.relation { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 24px; }

.relation__ends { display: flex; align-items: center; gap: 12px; }
.relation__end {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-well);
  padding: 9px 14px; min-height: 54px; color: var(--ink);
}
.relation__end:hover { border-color: var(--self); text-decoration: none; }
.relation__end svg { margin-left: auto; flex-shrink: 0; color: var(--faint); }
.relation__end-text { display: flex; flex-direction: column; min-width: 0; }
.relation__end-text .label { color: var(--faint); font-size: 9.5px; }
.relation__end-name { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation__end-name--empty { color: var(--faint); font-weight: 400; }
.relation__you { font-size: 11px; font-weight: 600; color: var(--self-on-tint); background: var(--self-tint); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.relation__swap {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.relation__swap:hover { color: var(--self); border-color: var(--self); }
.relation__swap--idle { visibility: hidden; }

.relation__answer { display: flex; flex-direction: column; gap: 9px; }
.relation__headline { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.relation__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.relation__kind { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; }
.relation__kind.is-blood { background: var(--self-tint); color: var(--self-on-tint); }
.relation__kind.is-marriage { background: var(--spouse-tint); color: var(--spouse); }
.relation__kind.is-chosen { background: var(--children-tint); color: var(--children); }
.relation__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.relation__also { font-size: 14px; color: var(--ink-secondary); }

.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chain-card { display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: var(--ink); border: 1.5px solid transparent; }
.chain-card::before { display: none; }
a.chain-card:hover { text-decoration: none; border-color: var(--self-tint); }
a.chain-card:hover .chain-card__name { color: var(--self); }
.chain-card--last { border-color: var(--self); box-shadow: var(--shadow-focus); }
a.chain-card--last:hover { border-color: var(--self); }
.chain-card__name { font-size: 17px; font-weight: 600; }
.chain-card__tag { margin-left: auto; flex-shrink: 0; }
.chain-card__tag { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.chain-card__tag.is-you { text-transform: none; letter-spacing: 0; color: var(--self-on-tint); background: var(--self-tint); border-radius: 999px; padding: 4px 10px; }
.chain__step { display: flex; align-items: center; gap: 14px; height: 44px; padding-left: 38px; font-size: 13.5px; color: var(--muted); }
.chain__step b { color: var(--ink-secondary); font-weight: 600; }
.chain__line { width: 2px; height: 100%; background: var(--connector); flex-shrink: 0; }

.relation__none { display: flex; gap: 20px; align-items: center; padding: 22px 24px; }
.relation__none::before { display: none; }
.relation__none-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 999px; background: var(--inset); display: grid; place-items: center; color: var(--faint); }
.relation__none-title { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.relation__none p { color: var(--muted); text-wrap: pretty; }

/* --- coming up ---------------------------------------------------------- */

.header-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--tap); padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-secondary);
}
.header-link:hover, .header-link.is-current { background: var(--inset); color: var(--ink); text-decoration: none; }
.site-header__end { gap: 4px; align-items: center; }

.coming-up { width: 100%; max-width: 660px; display: flex; flex-direction: column; gap: 14px; }
.coming-up__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.coming-up__sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.coming-up__past-heading { margin-top: 10px; }

.segmented { display: inline-flex; background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.segmented button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(28, 28, 26, .08); }

/* Scrolls sideways on a narrow phone, never up and down. The underline's -1px
   overlap with the border otherwise counts as vertical overflow, and Windows
   draws a scrollbar for that one pixel. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; margin-bottom: -1px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--self); }
.tabs__count { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.date-list { list-style: none; margin: 0; padding: 4px 0; }
.date-list::before { display: none; }
.date-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--inset); }
.date-row:first-child { border-top: 0; }
.date-row.is-today { background: color-mix(in srgb, var(--role-tint) 45%, var(--card)); }

.date-row__date {
  width: 44px; flex-shrink: 0; text-align: center;
  display: flex; flex-direction: column; line-height: 1.05;
}
.date-row__day { font-size: 20px; font-weight: 700; color: var(--role); font-variant-numeric: tabular-nums; }
.date-row__month { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.date-row__people { display: flex; flex-shrink: 0; }
.date-row__people .avatar + .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--card); }

.date-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.date-row__names { font-size: 14.5px; font-weight: 500; }
.date-row__names a { color: var(--ink); }
.date-row__names a:hover { color: var(--self); }
.date-row__amp { color: var(--faint); font-weight: 400; }
.date-row__headline { font-size: 13px; color: var(--muted); }

.date-row__when { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.date-row__kind { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--role); }
.date-row__relative { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* Remembering someone who has died: quieter, never cheerful. */
.date-row.is-remembered .date-row__day,
.date-row.is-remembered .date-row__kind { color: var(--deceased); }

/* Already past this year: muted, as on the legacy site. */
.date-list--past .date-row { opacity: .72; }

/* --- life timeline ------------------------------------------------------ */

.timeline-page { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.timeline-head__person { display: flex; align-items: center; gap: 14px; }
.timeline-head__person.is-deceased { --role: var(--deceased); --role-tint: var(--photo-well); }
.timeline-head__name { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.timeline-head__span { font-size: 14px; color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__entry {
  display: grid;
  grid-template-columns: 52px 22px minmax(0, 1fr);
  align-items: start;
  position: relative;
}
/* The vertical line runs through the dot column. */
.timeline__entry::before {
  content: ""; position: absolute; left: 62px; top: 0; bottom: 0; width: 2px; background: var(--connector);
}
.timeline__entry:first-child::before { top: 14px; }
.timeline__entry:last-child::before { bottom: calc(100% - 14px); }

.timeline__year { font-size: 15px; font-weight: 700; color: var(--ink); padding-top: 4px; font-variant-numeric: tabular-nums; }
.timeline__dot {
  position: relative; z-index: 1;
  width: 12px; height: 12px; margin: 8px 0 0 5px;
  border-radius: 999px; background: var(--card); border: 2px solid var(--connector);
}
.timeline__body { padding: 2px 0 18px 6px; min-width: 0; }
.timeline__title { font-size: 15px; color: var(--ink-secondary); text-wrap: pretty; }
.timeline__title a { font-weight: 600; }
.timeline__meta { font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.timeline__note { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 3px; text-wrap: pretty; }
.timeline__type {
  display: inline-block; margin-right: 6px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--children); background: var(--children-tint); border-radius: 999px; padding: 2px 7px;
}

/* Derived from the tree: lighter. Recorded by someone: stands out. */
.timeline__entry.is-recorded .timeline__dot { background: var(--children); border-color: var(--children); }
.timeline__entry.is-recorded .timeline__title { color: var(--ink); font-weight: 500; }
.timeline__entry--born .timeline__dot,
.timeline__entry--married .timeline__dot,
.timeline__entry--child-born .timeline__dot { border-color: var(--self); }
.timeline__entry--married .timeline__dot { border-color: var(--spouse); }
.timeline__entry--born .timeline__title,
.timeline__entry--died .timeline__title { color: var(--ink); font-weight: 600; }
.timeline__entry--died .timeline__dot { background: var(--deceased); border-color: var(--deceased); }
/* A relative's death: quieter than the other marks, but still visible on the line. */
.timeline__entry--family-death .timeline__dot,
.timeline__entry--marriage-ended .timeline__dot { border-color: var(--deceased); }

.timeline-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -6px; }

/* --- life events (editor) ----------------------------------------------- */

.event-row { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.event-row form { display: flex; flex-direction: column; gap: 14px; }
.event-row__actions { display: flex; align-items: center; gap: 16px; }
.event-row__actions form { margin: 0; }
.event-new { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.event-new > .label { margin-bottom: -4px; }

.timeline-undated__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }

/* --- photos ------------------------------------------------------------- */

.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.photo-item { display: flex; flex-direction: column; gap: 8px; }
.photo-item__image {
  position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%;
  border-radius: var(--radius-well); overflow: hidden; background: var(--photo-well);
}
.photo-item__image img { width: 100%; height: 100%; object-fit: cover; }
.photo-item.is-portrait .photo-item__image { outline: 2px solid var(--self); outline-offset: 2px; }
.photo-item__badge {
  position: absolute; left: 6px; top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--self); color: var(--on-role); border-radius: 999px; padding: 2px 8px;
}
.photo-item__details { display: flex; flex-direction: column; gap: 6px; }
.photo-item__details input {
  height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--card); min-width: 0;
}
.photo-item__details button { align-self: flex-start; padding: 2px 0; }
.photo-item__actions { display: flex; gap: 14px; }
.photo-item__actions form { margin: 0; }
.photo-upload { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.photo-upload input[type="file"] { font: inherit; font-size: 14px; }

.viewer { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.viewer__top { display: flex; justify-content: space-between; align-items: baseline; }
.viewer__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viewer__figure { margin: 0; background: var(--photo-backdrop); }
.viewer__figure::before { display: none; }
.viewer__image { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.viewer__caption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--card); font-size: 14.5px; }
.viewer__date { color: var(--muted); white-space: nowrap; }
.viewer__nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.viewer__strip { display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 4px; }
.viewer__strip a { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; opacity: .6; }
.viewer__strip a[aria-current="true"] { opacity: 1; outline: 2px solid var(--self); outline-offset: 1px; }
.viewer__strip img { width: 100%; height: 100%; object-fit: cover; }
.viewer__manage { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 13.5px; }
.viewer__manage form { margin: 0; }
.viewer__portrait { color: var(--muted); }

/* --- admin -------------------------------------------------------------- */

.admin-page { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.admin-head { display: flex; flex-direction: column; gap: 10px; }
.admin-hint { padding: 0 16px 10px; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.admin-hint--page { padding: 0 2px; }

.header-link { position: relative; }
.header-link__badge, .tabs__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--parents); color: var(--on-parents);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.header-link__badge { margin-left: -1px; }

.badge {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 8px;
  background: var(--inset); color: var(--muted);
}
.badge--admin { background: var(--self); color: var(--on-role); }
.badge--member { background: var(--self-tint); color: var(--self-on-tint); }
.badge--visitor { background: var(--inset); color: var(--muted); }
.badge--warn { background: var(--parents-tint); color: var(--warn-ink); }

.account-list { list-style: none; margin: 0; padding: 0 0 6px; }
.account-list > li + li { border-top: 1px solid var(--inset); }
.account-row {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 10px 16px; color: var(--ink);
}
a.account-row:hover { text-decoration: none; background: var(--hover-row); }
a.account-row:hover .relative__name { color: var(--self); }
.account-row__who, .account-row__tree { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.account-row__who .relative__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row__tree { align-items: flex-start; }
.account-row__person { font-size: 13.5px; color: var(--ink-secondary); }
li.account-row { grid-template-columns: auto minmax(0, 1fr) auto; }
li.account-row form { margin: 0; }
.account-row--attention { grid-template-columns: auto minmax(0, 1fr) auto; }
.account-row--attention .relative__detail { white-space: normal; }
.account-row__fix { font-size: 13px; font-weight: 600; color: var(--self); white-space: nowrap; }
.account-status { font-size: 12px; color: var(--muted); }
.account-status--waiting { color: var(--warn-ink-strong); }

.admin-callout { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--parents-tint); }
.admin-callout::before { display: none; }
.admin-callout > div { flex: 1; min-width: 0; }
.admin-callout__title { font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.admin-callout form { margin: 0; flex-shrink: 0; }

.join-requests { list-style: none; margin: 0; padding: 0 16px 6px; }
.join-request { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 14px; }
.join-request + .join-request { border-top: 1px solid var(--inset); }
.join-request__who { display: flex; flex-direction: column; }
.join-request__note {
  margin: 0; padding: 8px 12px; border-left: 3px solid var(--parents-tint); background: var(--inset);
  border-radius: 0 8px 8px 0; font-size: 14px; color: var(--ink-secondary); white-space: pre-line; text-wrap: pretty;
}
.join-request__actions { display: flex; align-items: center; gap: 16px; }
.join-request__actions form { margin: 0; }

.choice--top { align-items: flex-start; }
.choice--top input { margin-top: 2px; }
.choice--person.is-taken { cursor: default; opacity: .6; }
.choice--person.is-taken:hover { background: none; }
.choice--person .badge { margin-left: 6px; vertical-align: 1px; }
.link-form { display: flex; flex-direction: column; gap: 14px; }

.field textarea {
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  font: inherit; font-size: 16px; color: var(--ink); resize: vertical; min-height: 96px;
}
.field textarea:focus { outline: none; border-color: var(--self); box-shadow: 0 0 0 3px var(--self-tint); }
.field textarea[aria-invalid="true"] { border-color: var(--danger-line); }

.activity-day { display: flex; flex-direction: column; gap: 8px; }
.activity { list-style: none; margin: 0; padding: 4px 0; }
.activity::before { display: none; }
.activity__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 16px; font-size: 14px; }
.activity__row + .activity__row { border-top: 1px solid var(--inset); }
.activity__time { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 1px; }
.activity__text { color: var(--ink-secondary); text-wrap: pretty; }
.activity__text b { color: var(--ink); font-weight: 600; }
.activity__gone { color: var(--muted); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pager .pill[rel="next"] { justify-self: end; }
.pager__where { font-size: 13px; color: var(--muted); }

/* --- phone -------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --gutter: 16px; }

  .site-header__inner { height: 56px; gap: 12px; }
  .brand__name { display: none; }
  .brand__logo { width: 38px; height: 38px; }
  .search { flex: 1 1 auto; height: var(--tap); }
  .site-header__end { min-width: 0; }

  .page { padding-top: 14px; }

  .tree { --pair-gap: 10px; }

  .parents { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-card { padding: 9px 12px; min-height: 64px; }
  .parent-card .avatar { display: none; }
  .parent-card__name { font-size: 14.5px; }
  .connector__join { width: calc(50% + var(--pair-gap) / 2); height: 14px; border-radius: 0 0 8px 8px; }
  .connector__drop { height: 12px; }
  .connector--parents { width: 100%; }

  .focus__body { padding: 14px 15px; gap: 14px; flex-wrap: wrap; }
  .portrait { width: 104px; }
  .portrait__frame { width: 104px; height: 124px; }
  .portrait__initials { font-size: 32px; }
  .focus__name { font-size: 23px; }
  .focus__aka { font-size: 12.5px; }
  .facts { flex-direction: column; gap: 6px; }
  .fact { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 7px 10px; }

  /* Stacked, so the split becomes a single straight drop. */
  .connector__split { display: none; }
  .descendants { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .actions { gap: 6px; }
  .pill { height: var(--tap); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .marriage-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 0; }
  .marriage-dates .button { grid-column: 1 / -1; }
  .link-row { flex-wrap: wrap; }

  .relation { gap: 18px; }
  .relation__ends { gap: 6px; }
  .relation__end { padding: 8px 10px; gap: 8px; }
  .relation__end .avatar { display: none; }
  .relation__you { display: none; }

  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .viewer__nav { grid-template-columns: 1fr 1fr; }
  .viewer__strip { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
  .viewer__nav .pill[rel="prev"] { justify-self: start; }
  .viewer__nav .pill[rel="next"] { justify-self: end; }

  .account-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 10px 12px; }
  .account-row__tree { grid-column: 2 / -1; grid-row: 2; }
  a.account-row .avatar { grid-row: 1 / 3; align-self: start; }
  .admin-callout { flex-direction: column; align-items: stretch; }
  .activity__row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 9px 12px; }

  .timeline__entry { grid-template-columns: 44px 20px minmax(0, 1fr); }
  .timeline__entry::before { left: 54px; }
  .timeline-head__name { font-size: 23px; }

  .header-link { padding: 0; width: var(--tap); justify-content: center; }
  .header-link__badge { position: absolute; top: 3px; right: 1px; margin: 0; }
  .search { min-width: 0; padding: 0 11px; }
  .site-header__end { gap: 0; }
  .account-link { width: 40px; }
  .header-link__text { display: none; }
  .coming-up__head { align-items: flex-start; }
  .date-row { gap: 10px; padding: 10px 12px; }
  .date-row__people .avatar:nth-child(n+2) { display: none; }
  .date-row__when { display: none; }
  .date-row__headline::after { content: attr(data-when); }
  .relation__swap { width: var(--tap); height: var(--tap); }
  .relation__headline { font-size: 25px; }
  .chain-card { padding: 11px 12px; gap: 11px; }
  .chain__step { padding-left: 34px; }
}