/* Maltby Family — site stylesheet.
   Implements the warm, archival "hearth, not shrine" design language defined in
   docs/plans/13-design-language.md. Tokens below map 1:1 to that doc's tables. */

:root {
    /* Color — warm archival neutrals + earth accents (doc 13 § Color palette) */
    --paper:      #FAF6EF;  /* page background (warm off-white) */
    --linen:      #F2EADB;  /* secondary surface — bands, wells, tiles */
    --card:       #FFFFFF;  /* card/pane surface */
    --hearth:     #3A1C0C;  /* deepest brown — hero base, identity band */
    --ink:        #211A14;  /* primary text */
    --ink-muted:  #574536;  /* secondary text, captions, meta */
    --primary:    #7A3B2E;  /* brick-red-brown — headings, primary actions */
    --accent:     #8A5418;  /* banked-ember amber — sparing emphasis */
    --success:    #2E6B40;  /* pine — confirmations */
    --caution:    #9A5B12;  /* amber-brown — guardrails (never red) */
    --link:       #265A70;  /* slate-blue — links, focus rings */
    --white:      #FFFFFF;  /* text/icons on dark */
    --hairline:   #E7DDCB;  /* warm hairline border */
    --shadow-card: 0 1px 3px rgba(58, 28, 12, .08);
    --scrim-grad: linear-gradient(rgba(58, 28, 12, .35), rgba(58, 28, 12, .72));
    --focus-ring: 0 0 0 3px #265A70;

    /* Type — system stack, no web-font download (doc 13 § Typography) */
    --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-numeric: "SF Mono", "Cascadia Mono", "Roboto Mono", ui-monospace, monospace;

    --fs-hero: 3.5rem;
    --fs-h1:   2.5rem;
    --fs-h2:   1.875rem;
    --fs-h3:   1.375rem;
    --fs-stat: 3rem;
    --fs-lead: 1.375rem;
    --fs-body: 1.125rem;   /* body floor — never smaller for prose */
    --fs-small: 1rem;

    /* Spacing — base-8 (doc 13 § Spacing & layout grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    background-image: url('/images/texture-paper.png');
    background-blend-mode: multiply;
    background-size: 600px auto;
    background-repeat: repeat;
}

/* The family's words are serif; UI chrome stays sans. */
h1, h2, h3 { font-family: var(--font-serif); color: var(--primary); line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--link); }                 /* underlined in body context by default */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.lead { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--ink); max-width: 66ch; }
.hint { color: var(--ink-muted); font-size: var(--fs-small); }
.muted { color: var(--ink-muted); }

/* ---- Page chrome ---- */

.page { min-height: 100vh; display: flex; flex-direction: column; }

.site-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border-bottom: 1px solid var(--hairline);
}
.site-header .brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--primary);
    text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.site-nav a { color: var(--link); }
.site-nav .who { color: var(--ink-muted); }

.content { padding: var(--space-5) var(--space-4); max-width: 1100px; width: 100%; margin: 0 auto; }

/* ---- Cards, notices, buttons, fields ---- */

.login-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    max-width: 520px;
}

.notice { padding: var(--space-2) var(--space-3); border-radius: 6px; margin: 0 0 var(--space-3); }
.notice-info { background: var(--linen); border-left: 3px solid var(--link); }
.notice-error { background: #F6E2DD; border-left: 3px solid var(--primary); }

/* M8.2 backup status banners (admin-only) */
.notice-backup-red    { background: #F6E2DD; border-left: 4px solid #B02020; font-weight: 600; }
.notice-backup-yellow { background: #FDF3DC; border-left: 4px solid var(--caution); }
.notice-backup-green  { background: #DFF0E5; border-left: 4px solid var(--success); }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-4);
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    transition: background .15s ease;
}
.btn-primary:hover { background: #682F24; }
.btn-primary[disabled] { opacity: 0.6; cursor: default; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    background: var(--card);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
}

.link-button {
    background: none;
    border: none;
    color: var(--link);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.logout-form { display: inline; margin: 0; }

.field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.field-checkbox { flex-direction: row; align-items: center; }
.field label { font-weight: 600; font-family: var(--font-ui); }
.field input, .field select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font: inherit;
    background: var(--card);
}
.link-fieldset {
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}

.welcome-bookmark-input { width: 100%; padding: var(--space-2); font: inherit; }
.welcome-qr-row { display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-3) 0; }
.welcome-warning { color: var(--caution); font-size: var(--fs-small); }

/* ---- Home: "Our family in numbers" stat strip (doc 13 § Stat tile) ---- */

.numbers-strip {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    margin: var(--space-5) 0;
}
.numbers-strip h2 { margin-top: 0; }

.numbers-tiles {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.numbers-tiles li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    min-width: 120px;
}
.numbers-tiles .num {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-stat);
    font-weight: 700;
    line-height: 1.05;
    color: var(--primary);
}
.numbers-tiles .label {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-1);
}
.numbers-maltby { font-family: var(--font-serif); font-size: var(--fs-lead); margin: var(--space-3) 0 var(--space-1); }
.numbers-maltby strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.numbers-maltby-note { color: var(--ink-muted); font-size: var(--fs-small); }
.numbers-lines, .numbers-names { margin: var(--space-2) 0; font-family: var(--font-serif); }
.numbers-lines { font-weight: 600; }
.numbers-asof { color: var(--ink-muted); font-size: var(--fs-small); margin: var(--space-3) 0 0; }

/* ---- Contribution feed (home + person) ---- */

.recent-activity { margin-top: var(--space-6); }
.contribution-feed { list-style: none; padding: 0; margin: 0; }
.feed-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hairline);
}
.feed-item:last-child { border-bottom: none; }
.feed-actor { font-weight: 600; color: var(--ink); }
.feed-action { color: var(--ink-muted); }
.feed-subject { font-family: var(--font-serif); }
.feed-when { color: var(--ink-muted); font-size: var(--fs-small); margin-left: auto; }

/* ---- M8.2 Admin ops panel ---- */

.admin-ops { max-width: 800px; }

.ops-detail { margin-top: var(--space-5); }

.ops-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
}
.ops-dl dt { font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.ops-dl dd { margin: 0; }

/* ---- Trust badges (doc 13 "Trust badges") ----
   Warm pills, full radius. The label text is always present as the accessible
   name, so the badge never relies on colour alone. */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
}
.badge-newcomer    { background: var(--linen); color: var(--ink-muted); }
.badge-contributor { background: #E7D8BE; color: var(--ink); }
.badge-trusted     { background: #EAD2A8; color: var(--ink); }
.badge-curator     { background: var(--primary); color: var(--white); }

/* ---- Person profile (doc 14 zones) ---- */

.person-profile { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }

.identity-band {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--hearth);
    color: var(--white);
    border-radius: 8px;
    padding: var(--space-5);
}
.identity-band h1 { color: var(--white); font-size: var(--fs-h1); margin: 0; }
.identity-band .lifespan {
    font-size: var(--fs-lead);
    margin: var(--space-1) 0 0;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}
.monogram {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--linen);
    color: var(--ink-muted);
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    border-radius: 8px;
}

/* Primary portrait in the identity band (replaces the monogram when set + visible) */
.portrait-thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--linen);
}
.portrait-badge {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}
.btn-set-portrait {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    color: var(--link);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
}
.btn-set-portrait:hover { border-color: var(--primary); }

.facts-heading { margin: 0 0 var(--space-3); }
.core-facts {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    margin: 0;
}
.fact {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: none; }
.fact dt {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fact dd { margin: 0; }
.fact .value { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); }
.support { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink-muted); margin-left: var(--space-2); }

.alternatives { margin-top: var(--space-2); }
.alternatives summary { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--link); cursor: pointer; }
.alternatives[open] summary { margin-bottom: var(--space-2); }
.alt-heading {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--space-2) 0 var(--space-1);
}
.alternatives ul { list-style: none; padding: var(--space-3); margin: 0; background: var(--linen); border-radius: 6px; }
.alternatives li { font-family: var(--font-serif); padding: var(--space-1) 0; }

/* Living/recently-deceased redaction — warm hospitality, never a locked door (doc 14 Decision 2) */
.redaction {
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-6);
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--ink);
}
.redaction p { max-width: 60ch; margin: 0 0 var(--space-3); }
.redaction p:last-child { margin-bottom: 0; }
.redaction a { font-weight: 600; }

.family-group { margin-top: var(--space-4); }
.family-group h3 { margin: 0 0 var(--space-2); }
.person-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.person-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font-family: var(--font-serif);
    color: var(--primary);
    text-decoration: none;
}
.person-chips a:hover { border-color: var(--primary); }

.activity { margin-top: var(--space-2); }

/* ---- Tree: landing (search + start-here) and chart ---- */

.pedigree { display: flex; flex-direction: column; gap: var(--space-4); }
.cta-row { margin: 0; }

.tree-search {
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    max-width: 640px;
}
.tree-search-field { flex: 1 1 320px; }
.tree-search label {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}
.tree-search input {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-3);
    font-size: var(--fs-body);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: var(--card);
}

.results-count { color: var(--ink-muted); font-size: var(--fs-small); }

.person-picker { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.person-picker li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.person-picker li:last-child { border-bottom: none; }
.person-picker li > a:first-child { font-family: var(--font-serif); font-size: var(--fs-body); }
.profile-link { font-size: var(--fs-small); color: var(--link); margin-left: auto; }

.pedigree-chart {
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-card);
    padding: var(--space-3);
}

/* Chart-type switcher nav (M12: pedigree / fan / descendants). */
.chart-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-small);
}
.chart-switcher a { color: var(--link); }
.chart-switcher strong { color: var(--ink); font-weight: 600; }

/* ── Memorial page (M5, docs/plans/13–14 honoring tone) ──────────────────────
   Serif throughout. Quiet, generous space. No gamification chrome.
   The memorial page is intentionally calmer than the person page —
   no badge pills, no reinforce buttons, no contribution history. */

.memorial-page {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--ink);
}

/* Identity band — quieter than the person page; linen instead of hearth */
.memorial-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-6);
}

.memorial-portrait-wrap { flex: 0 0 auto; }

.memorial-portrait {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--hairline);
    box-shadow: 0 2px 8px rgba(58, 28, 12, .12);
}

.memorial-monogram {
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hairline);
    color: var(--ink-muted);
    font-family: var(--font-serif);
    font-size: 3rem;
    border-radius: 50%;
}

.memorial-identity { display: flex; flex-direction: column; gap: var(--space-2); }

.memorial-name {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    color: var(--primary);
    margin: 0;
}

.memorial-lifespan {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    color: var(--ink-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.memorial-draft-notice {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--caution);
    margin: 0;
}

/* Headline pull-quote — the person's own words, displayed with reverence */
.memorial-headline-quote {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    border-left: 4px solid var(--accent);
    background: var(--linen);
    border-radius: 0 8px 8px 0;
}

.memorial-headline-quote p {
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    color: var(--ink);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* Biography — the full narrative, rendered from sanitized HTML */
.memorial-biography { display: flex; flex-direction: column; gap: var(--space-3); }

.memorial-bio-body {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink);
}

/* Section heading (shared by tributes + admin) */
.memorial-section-heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--hairline);
}

/* Tribute wall */
.tribute-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tribute-item {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-5);
}

.tribute-hidden {
    opacity: 0.55;
    border-style: dashed;
}

.tribute-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
}

.tribute-author {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--ink);
}

.tribute-when { color: var(--ink-muted); font-size: var(--fs-small); }

.tribute-hidden-label {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--caution);
    font-style: italic;
}

.tribute-hide-btn {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin-left: auto;
}

.tribute-body {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--ink);
    line-height: 1.65;
    margin: 0;
}

/* Tribute compose panel */
.tribute-compose {
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-5);
    margin-top: var(--space-5);
}

.tribute-compose-heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--primary);
    margin: 0 0 var(--space-4);
}

.tribute-textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    line-height: 1.6;
    resize: vertical;
    background: var(--card);
    color: var(--ink);
}

/* Memorial admin row (curator/admin affordances) */
.memorial-admin {
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-5);
}

.memorial-admin-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Quiet "View memorial" link on the person page */
.memorial-person-link {
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin: 0;
}

/* ── M7 Life-events timeline (docs/plans/13–14 warm archival tone) ────────────
   Vertical spine line with dot markers. Derived vitals (birth/death) get a
   quieter dot; materialized events get a slightly bolder accent dot.
   The whole section uses the serif stack so dates and place names feel archival.
   Remove button is a quiet link-style affordance — no red, no alarm. */

.timeline-section { }

.timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--hairline);
    margin-left: var(--space-3);
}

.timeline-entry {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) 0;
}

.timeline-entry-marker {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--card);
    box-shadow: 0 0 0 2px var(--accent);
    margin-left: -6px;         /* sit on the spine line */
    margin-top: 6px;
}

/* Derived vitals (birth/death) get a quieter dot */
.timeline-entry--vital .timeline-entry-marker {
    background: var(--ink-muted);
    box-shadow: 0 0 0 2px var(--ink-muted);
}

.timeline-entry-body {
    flex: 1;
    min-width: 0;
}

.timeline-entry-kind {
    margin: 0 0 var(--space-1);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--ink);
}

.timeline-kind-label {
    font-weight: 600;
    color: var(--primary);
}

.timeline-date {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.timeline-place {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    font-style: italic;
}

.timeline-description {
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    color: var(--ink);
    margin: var(--space-1) 0 0;
    max-width: 60ch;
}

.timeline-remove {
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin-top: var(--space-1);
}

/* Add-event panel — same compact disclosure as story/story panels */
.event-add-panel {
    margin-top: var(--space-3);
}
.event-add-panel > summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--link);
    user-select: none;
}
.event-add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    background: var(--linen);
    border-radius: 8px;
    padding: var(--space-4);
}
.event-add-form .field-row { display: flex; flex-direction: column; gap: var(--space-1); }
.event-add-form label { font-family: var(--font-ui); font-size: var(--fs-small);
                         font-weight: 600; display: flex; flex-direction: column; gap: var(--space-1); }
.event-add-form input,
.event-add-form select,
.event-add-form textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font: inherit;
    background: var(--card);
}
.event-add-form button[type=submit] {
    align-self: flex-start;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-small);
    min-height: 40px;
}
.event-add-form button[type=submit][disabled] { opacity: 0.6; cursor: default; }

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .fact { grid-template-columns: 1fr; gap: var(--space-1); }
    .identity-band { flex-direction: column; align-items: flex-start; }
}

/* ---- Chart export toolbar (M17) ---- */

.chart-export-bar {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
    align-items: center;
}

/* ---- Print / chart export (M17) ---- */
/* When the user prints or saves to PDF via the browser dialog, hide all nav
   chrome so only the chart section is visible on the page. */
@media print {
    .site-header,
    .site-nav,
    .chart-export-bar,  /* M17: the Download PNG + Print toolbar on chart pages */
    .chart-switcher,
    .cta-row,
    .lead               /* optional: keep the person name heading, hide the subtitle */
    { display: none !important; }

    .page, .content { padding: 0; margin: 0; max-width: none; }

    /* Expand the chart container to the full printable area. */
    .pedigree-chart { width: 100% !important; overflow: visible !important; }

    svg { max-width: 100% !important; page-break-inside: avoid; }
}

/* ---- Reduced-motion guarantee (doc 13 § Motion): nothing moves under the reader ---- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Typeahead search ───────────────────────────────────────────────────────── */

.home-founders {
    font-family: var(--font-serif);
    color: rgba(255,255,255,.85);
    font-size: var(--fs-small);
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}
.home-search { margin-top: var(--space-4); max-width: 560px; }

.typeahead-wrap { position: relative; width: 100%; }
.search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    overflow: hidden;
}
.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--space-3) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    background: transparent;
    color: var(--ink);
}
.search-btn {
    background: none;
    border: none;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--fs-body);
}

.typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(58,28,12,.12);
}
.typeahead-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
}
.typeahead-chip:last-of-type { border-bottom: none; }
.typeahead-chip--active, .typeahead-chip:hover { background: var(--linen); }

.typeahead-portrait {
    width: 32px; height: 32px;
    border-radius: 50%; object-fit: cover;
    flex: 0 0 32px;
}
.typeahead-monogram {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--linen);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    flex: 0 0 32px;
}
.typeahead-chip-text { display: flex; flex-direction: column; min-width: 0; }
.typeahead-name {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.typeahead-lifespan {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}
.typeahead-seeall {
    padding: var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--link);
    cursor: pointer;
    list-style: none;
}
.typeahead-seeall:hover, .typeahead-seeall.typeahead-chip--active { background: var(--linen); }

/* ── Search results page ────────────────────────────────────────────────────── */

.search-page { max-width: 760px; }
.search-header { margin-bottom: var(--space-5); }
.search-header h1 { margin-bottom: var(--space-1); }

.search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.search-result-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
}
.search-result-portrait {
    width: 32px; height: 32px;
    border-radius: 50%; object-fit: cover;
    flex: 0 0 32px; background: var(--linen);
}
.search-result-monogram {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--linen);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    flex: 0 0 32px;
}
.search-result-body { flex: 1; min-width: 0; }
.search-result-name {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--primary);
    text-decoration: underline;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}
.search-result-lifespan {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    margin-left: var(--space-3);
}
.search-living-hint {
    margin-top: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}
.search-loadmore { margin-top: var(--space-5); }
.search-empty {
    padding: var(--space-7) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.search-empty p { font-family: var(--font-serif); margin: 0; }

/* ── Site footer ────────────────────────────────────────────────────────────── */

.site-footer {
    border-top: 1px solid var(--hairline);
    padding: var(--space-4) var(--space-4);
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    background: var(--linen);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--primary); }
.site-footer-sep { margin: 0 var(--space-2); }

/* ── About page ─────────────────────────────────────────────────────────────── */

.about-page { max-width: 800px; }

.about-hero {
    background: url('/images/hero-farmstead.png') center center / cover no-repeat;
    position: relative;
    border-radius: 8px;
    padding: var(--space-8) var(--space-6) var(--space-7);
    margin-bottom: var(--space-5);
    overflow: hidden;
}
.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-grad);
    pointer-events: none;
}
.about-hero > * { position: relative; z-index: 1; }
.about-hero h1   { color: var(--white); font-size: var(--fs-hero); }
.about-hero .lead { color: rgba(255, 255, 255, .92); }

.about-founders-section {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    margin: var(--space-5) 0;
}
.about-founders-img {
    width: 260px;
    flex: 0 0 260px;
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}
.about-founders-text h2 { margin-top: 0; }

.about-oak-divider {
    display: block;
    width: 160px;
    margin: var(--space-6) auto;
    opacity: 0.55;
}

.about-section {
    margin: var(--space-6) 0;
}
.about-section h2 { margin-top: 0; }
.about-section p { font-family: var(--font-serif); max-width: 65ch; }

@media (max-width: 640px) {
    .about-founders-section { flex-direction: column; }
    .about-founders-img { width: 100%; flex: none; }
}

/* ── Artwork: home hero band ───────────────────────────────────────────────── */

.home-hero {
    background: url('/images/hero-desk.png') center top / cover no-repeat;
    position: relative;
    border-radius: 8px;
    padding: var(--space-8) var(--space-6) var(--space-7);
    margin-bottom: var(--space-5);
    overflow: hidden;
}
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-grad);
    pointer-events: none;
}
.home-hero > * { position: relative; z-index: 1; }
.home-hero h1   { color: var(--white); font-size: var(--fs-hero); }
.home-hero .lead { color: rgba(255, 255, 255, .92); }
.home-hero a    { color: var(--white); }
.home-hero .hint { color: rgba(255, 255, 255, .75); }

/* ── Artwork: portrait placeholder (replaces text monogram when no photo) ── */

.portrait-placeholder {
    object-fit: cover;
    background: var(--linen);
}

/* ── Artwork: empty state illustrations ────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    text-align: center;
}
.empty-state img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    opacity: 0.8;
}
.empty-state p {
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    margin: 0;
    color: var(--ink-muted);
}

/* ── Artwork: memorial header garden background ─────────────────────────────── */

.memorial-header {
    background-image: url('/images/memorial-garden.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.memorial-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(242, 234, 219, .90);
    border-radius: 8px;
}
.memorial-header > * { position: relative; z-index: 1; }

/* ── Classic Editor — FtmField (.fed-) ──────────────────────────────────────
   Prefix: .fed- (family-editor). Re-skins FTM's layout with the warm Maltby
   palette. Large font, generous spacing, strong focus ring — legibility first.
   All transitions respect prefers-reduced-motion (global reducer at line ~892). */

.fed-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    position: relative;
}

.fed-label {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

.fed-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.fed-input {
    flex: 1;
    font-family: var(--font-ui);
    font-size: var(--fs-body);  /* ≥18px (--fs-body = 1.125rem = 18px at 16px root) */
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: calc(var(--space-2) + 2px) var(--space-3);
    min-height: 44px;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fed-input:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: var(--focus-ring);
}

.fed-input::placeholder {
    color: var(--ink-muted);
    opacity: 0.7;
}

/* Left-border save-pulse (pine green, ~1s). Removed under prefers-reduced-motion;
   the status text/icon updates regardless (non-motion form of the saved signal). */
.fed-field--saved .fed-input {
    border-left: 3px solid var(--success);
    animation: fed-saved-pulse 1.1s ease forwards;
}

@keyframes fed-saved-pulse {
    0%   { border-left-color: var(--success); }
    60%  { border-left-color: var(--success); }
    100% { border-left-color: var(--hairline); }
}

.fed-field--caution .fed-input {
    border-left: 3px solid var(--caution);
}

.fed-field--pending .fed-input {
    border-left: 3px solid var(--accent);
}

.fed-saving-indicator {
    position: absolute;
    right: var(--space-2);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    pointer-events: none;
    user-select: none;
}

/* Date preview — quiet one-liner below the input */
.fed-date-preview {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    padding-left: var(--space-1);
}

/* Consensus badge — quiet, non-loud */
.fed-consensus-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-1) 0;
}

.fed-consensus-label {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.fed-consensus-count {
    margin-left: var(--space-1);
    opacity: 0.75;
}

.fed-agree-btn {
    font-size: var(--fs-small);
    color: var(--link);
    padding: 0;
    text-decoration: underline;
    min-height: 0;  /* override link-button min-height if any */
}

/* Status messages */
.fed-status {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    padding: var(--space-1) 0;
}

.fed-status--saved {
    color: var(--success);
}

.fed-status--caution {
    color: var(--caution);
}

.fed-status--pending {
    color: var(--accent);
}

/* Screen-reader-only helper (reused pattern) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Under prefers-reduced-motion: pulse animation collapses (global reducer handles
   the transition-duration collapse). The status text "Saved" still renders. */
@media (prefers-reduced-motion: reduce) {
    .fed-field--saved .fed-input {
        animation: none;
        border-left: 3px solid var(--success);
    }
}

/* ── Classic Editor — Facts page (.fed-facts-) ──────────────────────────────
   Wave 5b. Same large-font, high-contrast, warm Maltby palette as FamilyPage.
   ──────────────────────────────────────────────────────────────────────────── */

.fed-facts-page {
    padding: 1.5rem 2rem;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.125rem; /* ≥18 px base */
}

.fed-facts-header {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.fed-facts-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1a1a);
}

.fed-back-link {
    font-size: 0.95rem;
    color: var(--accent, #5c4033);
    text-decoration: underline;
}

.fed-back-link:hover {
    color: var(--accent-dark, #3b2820);
}

/* ── Side-tab strip ────────────────────────────────────────────────────────── */

.fed-facts-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.fed-facts-tabs {
    display: flex;
    flex-direction: column;
    min-width: 9rem;
    border-right: 2px solid var(--border, #d9cfc8);
    padding-right: 0;
    margin-right: 1.5rem;
    gap: 0.25rem;
}

.fed-facts-tab {
    background: none;
    border: none;
    padding: 0.6rem 1rem 0.6rem 0.75rem;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    border-radius: 4px 0 0 4px;
    color: var(--text-secondary, #555);
    border: 1px solid transparent;
    transition: background 0.15s;
}

.fed-facts-tab--active {
    background: var(--surface-active, #f4ede8);
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
    border-color: var(--border, #d9cfc8);
    border-right: 2px solid var(--surface-active, #f4ede8);
    margin-right: -2px; /* bleed over the right border to create the "selected tab" look */
}

.fed-facts-tab--disabled {
    color: var(--text-muted, #aaa);
    cursor: not-allowed;
}

.fed-facts-tab--disabled:hover {
    background: none;
}

.fed-tab-soon {
    display: inline-block;
    font-size: 0.7rem;
    background: var(--surface-muted, #e8e0d8);
    color: var(--text-muted, #888);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ── Facts tab panel ───────────────────────────────────────────────────────── */

.fed-facts-panel {
    flex: 1;
    min-width: 0;
}

.fed-facts-hint {
    font-size: 0.95rem;
    color: var(--text-secondary, #555);
    margin-bottom: 1rem;
}

/* ── Entry row ─────────────────────────────────────────────────────────────── */

.fed-fact-entry {
    border: 1px solid var(--border, #d9cfc8);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--surface-subtle, #faf7f4);
}

.fed-fact-entry-legend {
    font-weight: 600;
    font-size: 1rem;
    padding: 0 0.4rem;
    color: var(--text-primary, #1a1a1a);
}

.fed-fact-entry-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.fed-fact-type {
    min-width: 9rem;
}

.fed-label--inline {
    white-space: nowrap;
}

.fed-input--compact {
    width: 10rem;
}

.fed-inline-success {
    color: var(--success, #2d7a3a);
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
}

/* ── Existing-facts grid ───────────────────────────────────────────────────── */

.fed-facts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.fed-facts-table th,
.fed-facts-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle, #e8e0d8);
}

.fed-facts-table th {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    background: var(--surface-subtle, #faf7f4);
}

.fed-fact-row:hover {
    background: var(--surface-hover, #f0e8e0);
}

.fed-fact-col-pref,
.fed-fact-pref-cell {
    width: 4rem;
    text-align: center;
}

.fed-pref-dot {
    color: var(--success, #2d7a3a);
    font-size: 1.1rem;
    font-weight: 700;
}

.fed-facts-empty {
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ── Classic Editor — Index page (.fed-index-) ──────────────────────────────
   Wave 5b. FTM "Index of Individuals" dialog face.
   ──────────────────────────────────────────────────────────────────────────── */

.fed-index-page {
    padding: 1.5rem 2rem;
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.125rem;
}

.fed-index-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--text-primary, #1a1a1a);
}

/* ── Search row ──────────────────────────────────────────────────────────────*/

.fed-index-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.fed-index-input {
    width: 18rem;
}

/* ── Results ─────────────────────────────────────────────────────────────────*/

.fed-index-count {
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    margin-bottom: 0.5rem;
}

.fed-index-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.fed-index-table th,
.fed-index-table td {
    padding: 0.45rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle, #e8e0d8);
}

.fed-index-table th {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    background: var(--surface-subtle, #faf7f4);
}

.fed-idx-row {
    cursor: pointer;
}

.fed-idx-row:hover {
    background: var(--surface-hover, #f0e8e0);
}

.fed-idx-row--selected {
    background: var(--surface-active, #e8dcd4);
    outline: 2px solid var(--accent, #5c4033);
    outline-offset: -2px;
}

.fed-idx-col-born,
.fed-idx-col-died,
.fed-idx-born-cell,
.fed-idx-died-cell {
    width: 6rem;
    color: var(--text-secondary, #555);
}

.fed-index-empty {
    color: var(--text-muted, #888);
    font-style: italic;
}

/* ── Pager ───────────────────────────────────────────────────────────────────*/

.fed-index-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.fed-index-page-label {
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
}

/* ── Action bar ──────────────────────────────────────────────────────────────*/

.fed-index-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.fed-btn--primary {
    background: var(--accent, #5c4033);
    color: #fff;
    border-color: var(--accent, #5c4033);
}

.fed-btn--primary:hover:not(:disabled) {
    background: var(--accent-dark, #3b2820);
    border-color: var(--accent-dark, #3b2820);
}

.fed-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fed-btn--ghost {
    background: transparent;
    color: var(--text-secondary, #555);
    border-color: var(--border, #d9cfc8);
}

.fed-btn--ghost:hover:not(:disabled) {
    background: var(--surface-hover, #f0e8e0);
}

/* ── Index results wrap (scrollable on small viewports) ────────────────────── */

.fed-index-results-wrap {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border, #d9cfc8);
    border-radius: 4px;
    padding: 0.25rem 0;
}

@media (max-width: 600px) {
    .fed-facts-layout {
        flex-direction: column;
    }
    .fed-facts-tabs {
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid var(--border, #d9cfc8);
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .fed-facts-tab--active {
        border-right: 1px solid transparent;
        border-bottom: 2px solid var(--surface-active, #f4ede8);
        margin-right: 0;
        margin-bottom: -2px;
    }
}