/* ============================================================
   Hesselberth familiearchief
   Warm parchment, archival serif, quiet ornament.
   ============================================================ */

:root {
  /* Cream paper throughout — warm rather than white, so a long page is easy
     on the eye. Cards sit a shade lighter than the page so they still lift off
     it. Terracotta, brass and green are unchanged. */
  --paper: #f1e9d4;
  --card: #faf5e8;
  --ink: #262019;
  --muted: #6f6452;
  --line: #e3d8bf;
  --line-strong: #d1c2a4;
  --accent: #7a3b2e;
  --accent-soft: #f1e0d5;
  --gold: #836230;
  --living: #4f6e5a;
  --living-soft: #e4ecd8;
  --shadow: 0 1px 2px rgba(38, 33, 27, 0.04), 0 12px 32px -18px rgba(38, 33, 27, 0.18);
  --shadow-lg: 0 2px 4px rgba(38, 33, 27, 0.05), 0 24px 60px -26px rgba(38, 33, 27, 0.26);
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /*
    One column for the whole archive — the homepage, the search results, a
    person, the birthday shelf, every screen of the beheer, and the two
    password cards. The site used to run to four different widths and read
    like three different products; this is the width the reading pages want,
    and everything else now lines up with them. The gutter is part of the
    token, so the edges behave the same on a phone wherever you are.
  */
  --col-max: 960px;
  --gutter: clamp(20px, 4vw, 28px);
  --col: min(var(--col-max), 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/*
  Always keep the scrollbar's width reserved, whether the page is long enough
  to need one or not. Without this a short page (a search that found nothing)
  is fifteen pixels wider than a long one, and the header visibly jumps as you
  move between them. Browsers with overlay scrollbars reserve nothing here, so
  they are unaffected.
*/
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--accent); text-decoration: none; }
p a, .home-hint a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- header & footer ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  /* full-bleed bar, column-width contents: the wordmark sits over the page's
     left edge rather than the window's */
  padding: 12px max(var(--gutter), calc((100% - var(--col-max)) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--serif);
  font-size: 26px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); white-space: nowrap;
}
.site-foot {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 44px 20px 30px;
}

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

.searchbox {
  position: relative;
  display: flex; align-items: center;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.searchbox:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: var(--shadow);
}
.sb-icon { width: 19px; height: 19px; color: var(--muted); margin-left: 18px; flex: none; }
.searchbox input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; padding: 0 20px 0 12px;
  height: 100%; border-radius: inherit;
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input:focus { outline: none; }

.searchbox.is-hero { width: var(--frame-w, var(--hero-w, min(580px, 100%))); height: 52px; box-shadow: var(--shadow); font-size: 16.5px; }
.searchbox.is-hero:focus-within { box-shadow: var(--shadow-lg); }
.searchbox.is-compact { width: min(360px, 100%); height: 42px; font-size: 14.5px; }

/* suggestions */
.sugg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sugg-in 0.16s ease;
}
@keyframes sugg-in { from { opacity: 0; transform: translateY(-4px); } }
.sugg-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  color: var(--ink);
  font-size: 14.5px;
  border-top: 1px solid var(--line);
}
.sugg-item:first-child { border-top: 0; }
.sugg-item .s-name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.sugg-item .s-name mark { background: none; color: var(--accent); }
.sugg-item .s-life { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; padding-left: 12px; }
.sugg-item.is-active, .sugg-item:hover { background: var(--accent-soft); }
.sugg-more {
  display: block; padding: 9px 16px; text-align: center;
  font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.sugg-more:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- avatars ---------- */

.ava {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  color: #f6f1e7;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ava[data-h="0"] { background: #8c5b45; }
.ava[data-h="1"] { background: #77624f; }
.ava[data-h="2"] { background: #5b6e5a; }
.ava[data-h="3"] { background: #566577; }
.ava[data-h="4"] { background: #7a5b6e; }
.ava[data-h="5"] { background: #4f6e6b; }
.ava[data-h="6"] { background: #8a6d4a; }
.ava[data-h="7"] { background: #6b5b4f; }
.ava-lg { width: 54px; height: 54px; font-size: 20px; }
.ava-xl { width: 92px; height: 92px; font-size: 34px; }

/* ---------- homepage ---------- */

.home {
  display: flex; flex-direction: column;
  --home-gap: clamp(38px, 6vh, 64px);
  /* the wordmark, the search field, the birthday shelf and the photograph
     share the archive's one column, gutter and all */
  --hero-w: min(var(--col-max), 100% - var(--gutter) * 2);
  /* on a short window the photograph gives width back so it still opens in
     view; the wordmark, the search field and the letter follow it, so the
     column reads as one width at every window size */
  --frame-w: min(var(--hero-w), max(520px, calc((100svh - 560px) * 1.38)));
}
.home-hero {
  position: relative; z-index: 2; /* keep the suggestions above the photo */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  /* no gutter of its own: the column already carries one, and a second would
     put the search field half a gutter out of line with the photograph */
  padding: clamp(12px, 2.2vh, 26px) 0 4px;
  animation: rise 0.5s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.eyebrow {
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
/* the traced signature, sized by width; the height follows its own ratio.
   Deliberately narrower than the column the search field and photograph share,
   so the name sits above them rather than competing with them. */
.wordmark-xl {
  display: block;
  width: calc(var(--frame-w) * 0.70);
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  color: var(--ink);
  line-height: 0;
}
.wordmark-xl svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the accessible name, for readers and for search engines */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ornament {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 8px;
  color: var(--gold);
}
.ornament span { width: 64px; height: 1px; background: var(--line-strong); }
.ornament em { font-style: normal; font-size: 11px; }
.home-stats { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; }
/* more specific than the `.home-hero > *` rule below, which would otherwise
   win on equal specificity and let this line run wider than the search field */
.home-hero .home-hint { color: var(--muted); font-size: 13px; margin-top: 13px; max-width: var(--frame-w); text-wrap: balance; }
.home-hero > * { max-width: var(--hero-w); }

.framed-photo {
  margin: 0 auto;
  /* the photograph matches the wordmark and the search field wherever the
     window is tall enough; on a short one it gives width back so it still
     opens in view, but never shrinks past 520px and looks lost */
  width: var(--frame-w);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(12px, 2.5vw, 18px);
  box-shadow: var(--shadow-lg);
  animation: rise 0.6s 0.1s ease both;
}
.framed-photo img {
  display: block; width: 100%; height: auto;
  border-radius: 2px;
  filter: sepia(0.08);
}
.framed-photo figcaption {
  font-family: var(--serif); font-style: italic;
  text-align: center; color: var(--muted);
  font-size: 15px; letter-spacing: 0.06em;
  padding-top: 12px;
}

/* ---------- homepage: the birthday shelf ----------
   A slim shelf in the same column as the wordmark, the search field and the
   photograph, sitting under the photograph so it joins that stack rather than
   interrupting it. Its inside is replaced wholesale when the visitor's own
   midnight turns the day over. */

.bday {
  width: var(--frame-w);
  margin: clamp(26px, 4vh, 44px) auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 16px;
  animation: rise 0.6s 0.05s ease both;
}
.bday-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; margin: 0 0 12px;
  font-family: var(--sans); font-weight: 500;
}
.bday-head em {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--muted); letter-spacing: 0.01em;
}
.bday-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.bday-cards .pcard { text-align: left; }
.bday-none {
  font-family: var(--serif); font-style: italic;
  color: var(--muted); font-size: 17px;
  margin: 0 0 12px; text-align: center;
}
.bday-none span { font-style: normal; font-family: var(--sans); font-size: 12.5px; display: block; margin-top: 3px; }
.bday-locked {
  margin: 12px 0 0; text-align: center;
  font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted);
}

/* The swap, when the day turns over under an open tab. The blanket
   prefers-reduced-motion rule at the top of this file switches it off. */
@keyframes bday-swap { from { opacity: 0; transform: translateY(6px); } }
.bday-in.is-fresh { animation: bday-swap 0.34s ease both; }

/* ---------- homepage: welcome letter ---------- */

.welcome {
  /* the same column as the wordmark, the search field and the photograph */
  width: var(--frame-w);
  margin: var(--home-gap) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome .ornament { margin: 20px 0 26px; }

.welcome-lead {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.5;
  color: var(--ink);
  margin: 14px 0 0;
  text-wrap: balance;
}
.welcome-lead span { display: block; }
.welcome-lead span + span { margin-top: 2px; }
.welcome-lead span:nth-child(2),
.welcome-lead span:nth-child(3) { color: var(--muted); font-style: italic; font-size: 0.86em; }

/* the keeper's note, set like a foreword */
.letter {
  position: relative;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  padding: clamp(22px, 3.4vw, 32px) clamp(20px, 3.4vw, 34px);
  box-shadow: var(--shadow);
}
.letter p {
  margin: 0 0 0.95em;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink);
}
.letter p:last-of-type { margin-bottom: 0; }

.letter-sign {
  margin-top: 1.4em !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: var(--ink);
}
.letter-sign span {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
}

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

.page {
  width: var(--col);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px) var(--gutter) 20px;
  animation: rise 0.4s ease both;
}
.page-title { font-size: clamp(26px, 5vw, 34px); margin-bottom: 26px; }
.page-title em { font-style: italic; color: var(--accent); }
.empty { color: var(--muted); font-size: 15px; }

/* ---------- results ---------- */

.results {
  width: min(640px, 100%);
  display: flex; flex-direction: column; gap: 10px;
}
.result {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.result:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.result .pc-name { font-family: var(--serif); font-size: 19px; font-weight: 600; display: block; }
.result .pc-life { color: var(--muted); font-size: 12.5px; display: block; }
.result-arrow { margin-left: auto; color: var(--muted); transition: transform 0.18s ease, color 0.18s ease; }
.result:hover .result-arrow { transform: translateX(3px); color: var(--accent); }

/* ---------- person hero ---------- */

.p-hero {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 26px);
  margin-bottom: 30px;
}
.p-hero h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.08; }
.aka { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 4px 0 0; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-size: 12px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 999px;
  padding: 4px 12px;
}
.chip-living { color: var(--living); border-color: color-mix(in srgb, var(--living) 40%, transparent); background: var(--living-soft); }

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

.pcard {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px 10px 12px;
  color: var(--ink);
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.pc-txt { min-width: 0; }
.pc-rel {
  display: block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.pc-name {
  display: block;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.pc-life { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.pc-note {
  display: block; margin-top: 3px;
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--gold);
}

/* ---------- the constellation ---------- */

.constellation {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 28px clamp(10px, 3vw, 24px) 34px;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--card) 55%, transparent), transparent 70%);
}
.const-block, .union { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.constellation > *, .const-block > *, .union > * { max-width: 100%; }
.const-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  max-width: min(860px, 100%);
}
.const-cards .pcard { text-align: left; }
.const-join, .union-join {
  width: 1.5px; height: 26px;
  background: var(--line-strong);
}
.const-empty { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 6px 0; }

.self-card {
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 12px 22px 12px 14px;
  position: relative;
}
.self-card .pc-rel { color: var(--accent); }

.union { margin-top: 4px; }
.union + .union { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
.marr-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--muted);
  margin: 10px 0;
}
.marr-ring { color: var(--gold); font-style: normal; font-size: 17px; }

/* ---------- panels ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 26px);
  margin-top: 26px;
}
.panel h2 {
  font-size: 22px;
  margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.count {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 9px;
}
.sib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.panel-grid .panel { margin-top: 26px; }

.details { margin: 0; }
.details > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.details > div:first-child { border-top: 0; }
.details dt {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.details dd { margin: 0; font-size: 15px; }

/*
  The information panel: prose, not a data row. Full width of the column, set
  in the archive's serif at reading size and held to about 68 characters a
  line, which is where a long paragraph stays comfortable to read.
*/
.panel-info { margin-top: 26px; }
.info-prose { max-width: 68ch; }
.info-prose p {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0 0 0.85em;
}
.info-prose p:last-child { margin-bottom: 0; }

/* a section with nothing in it yet: it keeps its place and says so quietly,
   so the page shows what the archive can hold rather than hiding it */
.panel-empty {
  font-family: var(--serif); font-style: italic;
  color: var(--muted); font-size: 16px; margin: 0;
}

.notes { margin: 0; padding-left: 18px; }
.notes li { margin: 6px 0; font-family: var(--serif); font-size: 16.5px; }

.source {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 30px 0 6px;
  text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .panel-grid { grid-template-columns: 1fr; gap: 0; }
  .site-head { flex-wrap: wrap; }
  .searchbox.is-compact { width: 100%; order: 3; }
  .p-hero { flex-direction: column; text-align: center; align-items: center; }
  .chips { justify-content: center; }
  .sib-grid { grid-template-columns: 1fr 1fr; }
  .sugg-item .s-life { display: none; }
}
@media (max-width: 480px) {
  .sib-grid { grid-template-columns: 1fr; }
  .const-cards { width: 100%; }
  .const-cards .pcard, .self-card { width: 100%; }
  .searchbox.is-hero { height: 48px; font-size: 16px; }
}


/* ---------- the two corner controls ----------
   The family key and the language switch. One pill, one weight, one icon
   style, so they read as a pair rather than two unrelated things. They sit
   hard right on every page: inside the header where there is one, pinned to
   the top-right corner on the pages that have none. */

.corner-actions {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; margin-left: auto;
}

.lang-corner {
  position: absolute;
  top: clamp(14px, 2.2vw, 24px);
  right: clamp(14px, 2.2vw, 26px);
  z-index: 30;
  display: flex; align-items: center; gap: 6px;
}

.corner-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.corner-btn .cs-ic {
  width: 13px; height: 13px; flex: 0 0 auto;
  opacity: 0.8;
  transition: opacity 0.16s ease;
}

.corner-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--card);
}
.corner-btn:hover .cs-ic { opacity: 1; }

.corner-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--ink);
}

/* unlocked: the one state worth announcing, in the archive's own accent */
.corner-btn.is-open {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--accent-soft);
}
.corner-btn.is-open .cs-ic { opacity: 1; }
.corner-btn.is-open:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 700px) {
  /* on a narrow screen the icons alone carry it, but the target stays
     big enough for a thumb */
  .corner-btn { height: 36px; padding: 0 12px; font-size: 11.5px; gap: 5px; }
  .corner-btn .cs-ic { width: 13px; height: 13px; }
  .corner-btn span { display: none; }
}

/* anything driven by a finger rather than a pointer gets the same room */
@media (pointer: coarse) {
  .corner-btn { height: 38px; }
}

/* ---------- the panel on a shielded person's page ---------- */

.locked-panel {
  width: min(560px, 100%); margin: 6px auto 30px; text-align: center;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 30px clamp(20px, 4vw, 34px) 28px;
  box-shadow: var(--shadow);
}
.locked-ic { font-size: 22px; line-height: 1; display: block; margin-bottom: 12px; filter: grayscale(0.4); }
.locked-panel h2 {
  font-family: var(--serif); font-weight: 500; font-size: 26px;
  margin: 0 0 8px; letter-spacing: -0.005em;
}
.locked-panel p {
  color: var(--muted); font-size: 14px; line-height: 1.65;
  margin: 0 auto 20px; max-width: 46ch;
}
.locked-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 6px;
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--card); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none;
  transition: background-color 0.15s ease;
}
.locked-btn:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000); color: var(--card);
}

/* ---------- the key page ---------- */

.keypage {
  min-height: 100svh; display: grid; place-items: center;
  width: var(--col); margin-inline: auto; padding: 24px var(--gutter);
}
.key-card {
  width: min(400px, 100%); text-align: center;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 34px clamp(24px, 5vw, 38px) 30px;
  box-shadow: var(--shadow-lg);
}
.key-big { font-size: 28px; line-height: 1; display: block; margin-bottom: 14px; }
.key-card h1 {
  font-family: var(--serif); font-weight: 500; font-size: 38px;
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.key-sub { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0 0 22px; }
.key-card form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.key-card label {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.key-card input[type="password"] {
  font: inherit; font-size: 17px; letter-spacing: 0.16em; text-align: center;
  padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.key-card input[type="password"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.key-btn {
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  margin-top: 8px; padding: 12px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--card);
  transition: background-color 0.15s ease;
}
.key-btn:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.key-error {
  background: var(--accent-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  margin: 0 0 18px; text-align: left;
}
.key-note { margin: 20px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.key-back { text-align: center; margin: 18px 0 0; font-size: 12.5px; }
.key-back a { color: var(--muted); text-decoration: none; }
.key-back a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .corner-actions { gap: 6px; }
}

/*
  The corner buttons float over the page, so on a narrow screen the homepage
  has to start below them — otherwise the eyebrow runs straight underneath.
*/
@media (max-width: 600px) {
  .home-hero { padding-top: 58px; }
}

/* a small link on its own line is still something to tap */
.key-back a, .adm-back {
  display: inline-block;
  padding: 6px 4px;
}

/* ============================================================
   Beheer — the admin surface.

   The archive's paper and Garamond carry over so it feels like the
   same place, but everything here is denser and quieter: work gets
   the emphasis, ornament stays out of the way.
   ============================================================ */

.admin {
  background:
    radial-gradient(1200px 420px at 50% -160px,
      color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
    var(--paper);
  min-height: 100svh;
}

.adm-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 8px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1;
}
.adm-mark.is-lg { width: 52px; height: 52px; border-radius: 13px; font-size: 30px; margin: 0 auto; }

.adm-ornament {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--gold); margin: 12px 0 14px;
}
.adm-ornament span { width: 46px; height: 1px; background: var(--line-strong); }
.adm-ornament em { font-style: normal; font-size: 10px; }

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

.adm-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  /* same full-bleed bar, same column-width contents as the public header */
  padding: 12px max(var(--gutter), calc((100% - var(--col-max)) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.adm-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.adm-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.adm-brand-txt strong {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
}
.adm-brand-txt em {
  font-style: normal; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.adm-nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.adm-nav a {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.adm-nav a:hover { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
.adm-nav a.is-out:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.adm-main {
  width: var(--col); margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) var(--gutter) 110px;
}

/* ---------- headings, flashes ---------- */

.adm-title { margin-bottom: 24px; }
.adm-title h1,
.adm-person h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4vw, 44px); line-height: 1.08;
  letter-spacing: -0.012em; margin: 0 0 5px;
}
.adm-sub { color: var(--muted); font-size: 13.5px; margin: 0; }
.adm-sub a { color: var(--accent); text-decoration: none; }
.adm-sub a:hover { text-decoration: underline; }

.adm-person { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }

.adm-back { margin: 0 0 16px; font-size: 13px; }
.adm-back a { color: var(--muted); text-decoration: none; }
.adm-back a:hover { color: var(--accent); }

.adm-flash, .adm-error {
  border-radius: 6px; padding: 12px 16px; font-size: 13.5px;
  margin: 0 0 22px; border: 1px solid var(--line); border-left-width: 3px;
}
.adm-flash {
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border-color: var(--line);
  border-left-color: var(--gold); color: var(--ink);
}
.adm-error {
  background: var(--accent-soft); border-color: var(--line);
  border-left-color: var(--accent); color: var(--ink);
}
.adm-warn {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; line-height: 1.65;
}
.adm-warn code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}

/* ---------- buttons ---------- */

.adm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  padding: 9px 18px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
}
.adm-btn:hover { border-color: var(--accent); color: var(--accent); }
.adm-btn:active { transform: translateY(1px); }
.adm-btn.is-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--card); font-weight: 600;
}
.adm-btn.is-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 86%, #000);
  color: var(--card);
}
.adm-btn.is-quiet { border-color: transparent; color: var(--muted); background: transparent; }
.adm-btn.is-quiet:hover { color: var(--accent); background: transparent; }
.adm-btn.is-small { font-size: 12px; padding: 6px 13px; }
.adm-btn.is-block { width: 100%; padding: 12px; font-size: 14px; }
.adm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- sign in ---------- */

/* The sign-in page has no header and no table, so it drops the working column
   and simply centres in the viewport. */
.admin.is-bare { display: grid; place-items: center; min-height: 100svh; }
.admin.is-bare .adm-main {
  width: var(--col); margin-inline: auto;
  padding: 24px var(--gutter); display: grid; place-items: center;
}
.adm-login { width: min(390px, 100%); margin-inline: auto; }
.adm-login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px clamp(24px, 5vw, 38px) 30px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.adm-login-card h1 {
  font-family: var(--serif); font-weight: 500; font-size: 40px;
  margin: 16px 0 0; letter-spacing: -0.01em;
}
.adm-login-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; line-height: 1.6; }
.adm-login form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.adm-login label {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.adm-login input[type="password"] {
  font: inherit; font-size: 17px; letter-spacing: 0.16em;
  padding: 12px 14px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.adm-login input[type="password"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.adm-login .adm-btn { margin-top: 8px; }
.adm-login-foot {
  margin: 20px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.adm-login-back { text-align: center; margin: 18px 0 0; font-size: 12.5px; }
.adm-login-back a { color: var(--muted); text-decoration: none; }
.adm-login-back a:hover { color: var(--accent); }
.adm-login .adm-error { text-align: left; margin-bottom: 18px; }

/* ---------- stat tiles ---------- */

.adm-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.adm-tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 18px;
}
.adm-tile b {
  display: block; font-family: var(--serif); font-size: 30px; font-weight: 600;
  line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums;
}
.adm-tile span {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- filter ---------- */

.adm-filter {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
/* the icon is anchored to the field, never to the form: once the form wraps
   onto a second line, centring on the form would drop the icon between rows */
.adm-filter-field {
  position: relative; display: flex;
  flex: 1 1 280px; min-width: 0;
}
.adm-filter-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.adm-filter-icon svg { width: 100%; height: 100%; display: block; }
.adm-filter input {
  flex: 1 1 auto; min-width: 0; width: 100%; font: inherit; font-size: 14px;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
.adm-filter input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.adm-count {
  font-size: 12.5px; color: var(--ink); margin-left: auto;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.adm-count span { color: var(--muted); font-weight: 400; }

/* ---------- the table ---------- */

.adm-tablewrap {
  overflow-x: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow);
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th {
  text-align: left; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  padding: 13px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--card); z-index: 2;
}
.adm-table td {
  padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr { transition: background-color 0.12s ease; }
.adm-table tbody tr:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.adm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-c-act { text-align: right; }
.adm-empty { text-align: center; color: var(--muted); padding: 40px 16px !important; font-style: italic; }
.adm-none { color: var(--line-strong); }
.adm-place { color: var(--muted); }

.adm-c-name a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.adm-c-txt { display: flex; flex-direction: column; min-width: 0; }
.adm-c-txt strong {
  font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.2;
}
.adm-c-txt em {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.adm-c-name a:hover strong { color: var(--accent); }

.adm-av {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--paper); background: hsl(28 26% 44%);
}
.adm-av.is-lg { width: 54px; height: 54px; font-size: 18px; }
.adm-av[data-h="0"] { background: hsl(18 30% 44%); }
.adm-av[data-h="1"] { background: hsl(146 18% 38%); }
.adm-av[data-h="2"] { background: hsl(38 32% 42%); }
.adm-av[data-h="3"] { background: hsl(210 20% 44%); }
.adm-av[data-h="4"] { background: hsl(348 24% 46%); }
.adm-av[data-h="5"] { background: hsl(88 18% 38%); }
.adm-av[data-h="6"] { background: hsl(268 16% 46%); }
.adm-av[data-h="7"] { background: hsl(8 26% 42%); }

.adm-gen {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 7px; border-radius: 6px;
  background: var(--paper); border: 1px solid var(--line-strong);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.adm-life { color: var(--ink); }
.adm-dash { color: var(--line-strong); padding: 0 4px; }
.adm-sex { font-size: 11.5px; color: var(--muted); }
.adm-sex.is-m { color: hsl(210 22% 45%); }
.adm-sex.is-f { color: hsl(348 26% 48%); }
/* ---------- the edit form ---------- */

.adm-form { display: flex; flex-direction: column; gap: 16px; }

.adm-block {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px clamp(16px, 2.4vw, 26px) 24px;
  box-shadow: var(--shadow);
}
.adm-block > h2 {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.adm-blocknote { color: var(--muted); font-size: 12.5px; margin: -8px 0 16px; }

.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px 20px; }

.adm-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.adm-field.is-wide { grid-column: 1 / -1; margin-top: 16px; }
.adm-field label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.adm-field input, .adm-field select, .adm-field textarea {
  font: inherit; font-size: 14.5px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--paper); color: var(--ink); width: 100%;
  transition: border-color 0.14s ease;
}
.adm-field textarea { resize: vertical; line-height: 1.6; font-size: 13.5px; }
/* the one textarea holding prose: the same serif the page will set it in */
.adm-field.is-prose textarea {
  font-family: var(--serif); font-size: 17px; line-height: 1.7;
  min-height: 15em;
}
.adm-field input:hover, .adm-field textarea:hover { border-color: var(--muted); }
.adm-field input:focus-visible, .adm-field select:focus-visible, .adm-field textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
.adm-field.has-error input, .adm-field.has-error textarea {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
.adm-hint { font-size: 11.5px; color: var(--muted); }
.adm-err { font-size: 11.5px; color: var(--accent); font-weight: 500; }

.adm-check { justify-content: flex-end; }
.adm-check label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ink);
  letter-spacing: 0; text-transform: none; font-weight: 400;
  padding: 9px 0; cursor: pointer;
}
.adm-check input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.adm-check span { display: flex; flex-direction: column; }
.adm-check em { font-style: normal; font-size: 11.5px; color: var(--muted); }

.adm-union {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 18px 18px; margin: 0 0 14px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.adm-union:last-child { margin-bottom: 0; }
.adm-union legend {
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  padding: 0 9px; margin-left: -4px;
}

.adm-union.is-new {
  border-style: dashed;
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.adm-union .adm-grid { margin-bottom: 4px; }
.adm-note { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; line-height: 1.6; }

/* a field that names another person, autocompleting from the whole archive */
.adm-field.is-pick input { font-variant-numeric: tabular-nums; }
.adm-field.is-pick input::placeholder { color: var(--line-strong); font-style: italic; }

/* the "create them if the name is new" tick that sits under each picker */
.adm-field label.adm-mint {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; color: var(--line-strong); line-height: 1.3;
  /* it is an aside, not another field heading */
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.adm-field label.adm-mint input { width: auto; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.adm-field label.adm-mint:hover { color: var(--muted); }
.adm-field label.adm-mint:has(input:checked) { color: var(--accent); font-weight: 500; }

/* ---------- the children of one marriage ---------- */

.adm-kids { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.adm-kids h3 {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.adm-kids h3 span {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 11px; letter-spacing: 0;
}
.adm-kidlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.adm-kidlist li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card);
}
.adm-kidlist a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; margin-right: auto; min-width: 0;
}
.adm-kidlist a span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adm-kidlist strong { font-family: var(--serif); font-size: 15px; font-weight: 500; }
.adm-kidlist em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.adm-kidlist a:hover strong { color: var(--accent); }
.adm-av.is-xs { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }

/* every "untick to keep, tick to undo" control looks the same */
.adm-drop {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12px; color: var(--muted);
}
.adm-drop input { width: auto; accent-color: var(--accent); margin: 0; }
.adm-drop:hover { color: var(--accent); }
.adm-drop:has(input:checked) { color: var(--accent); font-weight: 500; }
.adm-union > .adm-drop { margin-top: 4px; }

/* ---------- removing a person ---------- */

.adm-danger {
  margin-top: 34px; padding: 20px clamp(16px, 2.4vw, 26px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.adm-danger h2 {
  font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0; color: var(--ink);
}
.adm-danger p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
.adm-btn.is-danger {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.adm-btn.is-danger:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.adm-title.has-action {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* the save bar stays with you at the foot of the page */
.adm-savebar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding: 14px clamp(16px, 2.4vw, 26px);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.adm-savenote { font-size: 12.5px; color: var(--muted); margin-right: auto; }

/* ---------- history ---------- */

.adm-history { margin-top: 30px; font-size: 13px; }
.adm-history summary {
  cursor: pointer; color: var(--muted); padding: 8px 0;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.adm-history summary::-webkit-details-marker { display: none; }
.adm-history summary::after { content: "▾"; font-size: 10px; }
.adm-history[open] summary::after { content: "▴"; }
.adm-history summary span {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600;
}
.adm-history summary:hover { color: var(--accent); }
.adm-history ol {
  list-style: none; margin: 10px 0 0; padding: 0 0 0 14px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.adm-history li {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px;
}
.adm-when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.adm-what { font-weight: 600; color: var(--ink); }
.adm-was { color: var(--muted); text-decoration: line-through; }
.adm-arrow { color: var(--line-strong); }
.adm-now { color: var(--accent); font-weight: 500; }

@media (pointer: coarse) {
  .adm-nav a, .adm-btn { min-height: 38px; }
  .adm-nav a, .adm-btn.is-small { display: inline-flex; align-items: center; }
}

/* On the narrowest screens drop the generation column too, and the Bewerken
   button with it — the whole name is already the link to that person, so the
   button is a second copy of it, and the width it costs is better spent on
   the name. The list then fits instead of having to be dragged sideways. */
@media (max-width: 560px) {
  .adm-table th:nth-child(6), .adm-table td:nth-child(6) { display: none; }
  .adm-c-txt em { max-width: 20ch; }
}
@media (max-width: 480px) {
  .adm-table th:nth-child(2), .adm-table td:nth-child(2) { display: none; }
  .adm-table th, .adm-table td { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 760px) {
  .adm-table th:nth-child(4), .adm-table td:nth-child(4),
  .adm-table th:nth-child(5), .adm-table td:nth-child(5) { display: none; }
  .adm-person { gap: 14px; }
  .adm-savebar { flex-direction: column; align-items: stretch; }
  .adm-savenote { margin: 0 0 4px; }
}

/* a shielded page is only a name and a notice; give it room to breathe */
.person.is-shielded .p-hero { border-bottom: 0; padding-bottom: 8px; }
.person.is-shielded .locked-panel { margin-top: 4px; margin-bottom: 60px; }