/* Schenini family pages.
   Direction: a dark, grainy studio stage (charcoal, faint grid, mono micro-labels, one pill nav)
   carrying an archive: tilted parish-register scans drift around the edges, one generation sits centre stage.
   Colour: charcoal and bone, Lake Como teal as the accent; each map region tints the whole stage. */
:root {
  --bg: #1C1D1D;
  --bg-2: #232525;
  --panel: #262828;
  --fg: #F2F2EF;
  --muted: #8F9694;
  --line: #343737;
  --pill: #2C2E2E;
  --accent: #6CC1BB;
  --accent-ink: #0F2524;
  --warm: #F0A65E;
  --danger: #F08A7E;
  --region: #6CC1BB;
  --glow: rgb(108 193 187 / .10);
  --grain-opacity: .09;
  --font-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-sym: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ECEBE6; --bg-2: #E3E2DC; --panel: #F6F5F1; --fg: #1B1C1C; --muted: #6A706E;
    --line: #D3D2CB; --pill: #E0DFD8; --accent: #1F6E6A; --accent-ink: #F6F5F1; --warm: #B5621D; --danger: #A63A2E;
    --glow: rgb(31 110 106 / .08); --grain-opacity: .06; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ECEBE6; --bg-2: #E3E2DC; --panel: #F6F5F1; --fg: #1B1C1C; --muted: #6A706E;
  --line: #D3D2CB; --pill: #E0DFD8; --accent: #1F6E6A; --accent-ink: #F6F5F1; --warm: #B5621D; --danger: #A63A2E;
  --glow: rgb(31 110 106 / .08); --grain-opacity: .06; color-scheme: light;
}
/* regions picked on the map retint the stage */
:root[data-region="como"] { --region: #6CC1BB; --glow: rgb(108 193 187 / .16); }
:root[data-region="pba"]  { --region: #D9B45A; --glow: rgb(217 180 90 / .15); }
:root[data-region="cat"]  { --region: #E07F55; --glow: rgb(224 127 85 / .15); }
:root[data-region="uy"]  { --region: #7FA7E0; --glow: rgb(127 167 224 / .15); }
:root[data-region="other"] { --region: #B5A4E0; --glow: rgb(181 164 224 / .14); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: var(--bg); }
/* the backdrop (glow, grid lines, grain) lives on one fixed layer, painted once, never repainted on scroll */
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform;
  background:
    url("/tree/grain.png") 0 0 / 128px 128px,
    radial-gradient(70% 55% at 50% 0%, var(--glow), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 120px,
    var(--bg);
  opacity: 1;
}
body {
  min-height: 100vh;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono, time, .data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sym { font-family: var(--font-sym); }
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { margin: 0; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* status strip: mono pills like an instrument readout */
.status-strip {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  font: 500 10.5px var(--font-mono); letter-spacing: .02em; color: var(--muted);
}
.status-strip span { background: var(--pill); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.status-strip b { color: var(--fg); font-weight: 600; }

/* top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; padding-block: 10px; }
.topbar .row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.logo { display: inline-flex; gap: 2px; text-decoration: none; color: var(--fg); }
.logo span { width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--fg); font: 600 15px var(--font-ui); }
.logo span:first-child { border-radius: 50%; }
.logo span:last-child { border-radius: 4px; }
.pillnav {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.pillnav::-webkit-scrollbar { display: none; }
.pillnav a { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 14.5px; letter-spacing: -0.02em; padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
.pillnav a:hover { background: var(--pill); }
.pillnav .add { background: var(--accent); color: var(--accent-ink); }
.pillnav .add:hover { background: var(--accent); filter: brightness(1.08); }
.tools { display: flex; gap: 6px; align-items: center; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.seg button { font: 600 11px var(--font-mono); letter-spacing: .04em; color: var(--muted); background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; min-width: 30px; }
.seg button[aria-pressed="true"] { background: var(--pill); color: var(--fg); }
@media (max-width: 860px) {
  .topbar .row { flex-wrap: wrap; }
  .pillnav { order: 3; width: 100%; }
}

/* buttons and chips */
.btn {
  display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--font-ui); letter-spacing: -0.01em;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 7px; padding: 8px 14px;
  text-decoration: none; cursor: pointer;
}
.btn.ghost { color: var(--fg); background: var(--pill); border-color: var(--line); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: default; }
.tag { display: inline-block; font: 500 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--pill); border-radius: 4px; padding: 3px 7px; }
.badge { display: inline-block; font: 500 10.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; line-height: 1.6; white-space: nowrap; }
.badge.parish { background: var(--fg); color: var(--bg); }
.badge.civil { background: var(--accent); color: var(--accent-ink); }
.badge.letter { background: var(--pill); color: var(--fg); }
.badge.tree { border: 1px solid var(--muted); color: var(--muted); }
.badge.family { border: 1px dashed var(--muted); color: var(--muted); }

h2.section { margin: 0 0 6px; font: 500 clamp(26px, 4vw, 36px)/1.1 var(--font-ui); letter-spacing: -0.03em; text-wrap: balance; }
.section-note { margin: 0 0 24px; color: var(--muted); max-width: 62ch; }
.serif { font-family: var(--font-serif); font-style: italic; }

/* contribution toast, bottom left */
.toast {
  position: fixed; z-index: 45; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  width: min(330px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; font-size: 13.5px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .22);
}
.toast .t-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); flex: none; }
.toast .t-x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast .t-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toast .mail { font: 500 12.5px var(--font-mono); color: var(--fg); user-select: all; }
.toast.mini { width: auto; grid-template-columns: auto auto; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; }
.toast.mini .t-body, .toast.mini .mail, .toast.mini [data-copy], .toast.mini .t-x { display: none; }
.toast.mini .t-actions { gap: 0; }

.email-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.email { font: 500 15px var(--font-mono); color: var(--fg); background: var(--pill); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; user-select: all; }

footer.site { color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); padding-block: 18px calc(env(safe-area-inset-bottom, 0px) + 96px); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-family: var(--font-mono); }
footer.site a { color: var(--muted); }
.other { font: 500 11.5px var(--font-mono); color: var(--muted); text-decoration: none; }
.other:hover { color: var(--fg); text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .seg button, .pillnav a { transition: background-color .15s, color .15s, filter .15s; }
}