html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #276749;
}

.btn-primary {
    color: #fff;
    background-color: #276749;
    border-color: #1f5138;
}

.content {
    padding-top: 1.1rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.2rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Det oppstod en feil.";
    }

:root { --ink:#18231f; --muted:#64706a; --paper:#f4f6f3; --green:#276749; --green-soft:#e3eee8; --line:#dfe5e1; }
body { background:var(--paper); color:var(--ink); }
.content { max-width:1400px; margin:0 auto; padding:2.4rem 3rem; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:2rem; }
.page-heading h1 { font-size:2.15rem; margin:.15rem 0; font-weight:700; letter-spacing:-.035em; }
.page-heading p { color:var(--muted); margin:0; }
.eyebrow { color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.14em; }

.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.metric-card,.panel { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px rgba(24,35,31,.045); }
.metric-card { padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.35rem; }
.metric-card span { color:var(--muted); }
.metric-card strong { font-size:1.65rem; letter-spacing:-.03em; }
.metric-primary { background:var(--green); color:white; border-color:var(--green); }
.metric-primary span { color:#d8e9df; }

.content-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; align-items:start; }
.panel { padding:1.5rem; margin-bottom:1rem; }
.panel h2 { font-size:1.15rem; margin:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:1rem; }

.muted { color:var(--muted); font-size:.9rem; }
.notes { white-space:pre-wrap; color:var(--ink); font-size:.92rem; line-height:1.5; margin-top:.4rem; }

.search-row { display:flex; gap:.6rem; margin-bottom:1rem; }
.search-row input { flex:1; padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px; }
.search-results { list-style:none; padding:0; margin:0; }
.search-results li { padding:.6rem 0; border-bottom:1px solid #edf0ee; display:flex; justify-content:space-between; }
.search-results li:last-child { border-bottom:0; }

input[type="search"] { padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px; margin-bottom:1rem; }
.w-100 { width:100%; }

.person-table { width:100%; border-collapse:collapse; }
.person-table th { text-align:left; color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding:.5rem .3rem; border-bottom:1px solid var(--line); }
.person-table td { padding:.6rem .3rem; border-bottom:1px solid #edf0ee; }
.clickable-row { cursor:pointer; }
.clickable-row:hover { background:var(--green-soft); }

.event-list { list-style:none; padding:0; margin:0; }
.event-list li { padding:.7rem 0; border-bottom:1px solid #edf0ee; display:flex; flex-direction:column; gap:.15rem; }
.event-list li:last-child { border-bottom:0; }
.event-list strong { font-size:.95rem; }
.event-list span { color:var(--muted); font-size:.88rem; }
.event-list .btn-link { display:inline-block; margin-top:.3rem; font-size:.82rem; }
.citation-sublist { list-style:none; margin:.35rem 0 0; padding:0 0 0 .8rem; border-left:2px solid var(--green-soft); }
.citation-sublist li { padding:.1rem 0; font-size:.85rem; color:var(--ink); }

.family-block { padding:.8rem 0; border-bottom:1px solid #edf0ee; }
.family-block:last-child { border-bottom:0; }
.family-block ul { list-style:none; padding:0; margin:.3rem 0 0; }
.family-block li { padding:.2rem 0; }

.edit-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; flex-wrap:wrap; }
.edit-row input, .edit-row select { flex:1 1 160px; padding:.5rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:.9rem; }
.edit-row select { flex:0 0 150px; }
.edit-row .check-label { display:flex; align-items:center; gap:.3rem; font-size:.85rem; color:var(--muted); white-space:nowrap; flex:0 0 auto; }
.btn-remove { flex:0 0 auto; width:2rem; height:2rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:#9f3a38; cursor:pointer; }
.btn-remove:hover { background:#fbeaea; }
textarea { padding:.55rem .8rem; border:1px solid var(--line); border-radius:10px; font-family:inherit; }
.edit-actions { display:flex; gap:.7rem; margin-top:1rem; align-items:center; }

.picker-results { list-style:none; padding:0; margin:.5rem 0; max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
.picker-results li { display:flex; justify-content:space-between; align-items:center; padding:.5rem .7rem; border-bottom:1px solid #edf0ee; }
.picker-results li:last-child { border-bottom:0; }
.picker-divider { color:var(--muted); font-size:.82rem; margin:.9rem 0 .5rem; text-transform:uppercase; letter-spacing:.04em; }
.btn-link { background:none; border:none; padding:0; color:var(--green); cursor:pointer; text-align:left; font-size:.95rem; }
.btn-link:hover { text-decoration:underline; }

.calc-pickers { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.calc-picker h2 { margin-bottom:.6rem; }
.calc-chosen { display:flex; justify-content:space-between; align-items:center; background:var(--green-soft); border-radius:10px; padding:.7rem .9rem; margin:0; }
.calc-result { margin-top:1.5rem; padding:1.1rem 1.3rem; background:var(--green-soft); border-radius:12px; font-size:1.05rem; }
.calc-result p { margin:0; }
.calc-result-empty { background:#f4f4f3; color:var(--muted); }
@media (max-width:700px) { .calc-pickers { grid-template-columns:1fr; } }

.pedigree-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:.6rem; }
.pedigree-controls select { padding:.3rem .5rem; border:1px solid var(--line); border-radius:6px; margin-left:.4rem; }
.pedigree-scroll { overflow:hidden; height:75vh; border:1px solid var(--line); border-radius:12px; background:#fbfcfb; padding:.5rem; touch-action:none; }
.pedigree-scroll svg { display:block; }
.pedigree-link { fill:none; stroke:#c7d0cb; stroke-width:1.5; }
.pedigree-link-wrapper { text-decoration:none; cursor:pointer; }
.pedigree-box rect { fill:#fff; stroke:var(--green); stroke-width:1.2; }
.pedigree-link-wrapper:hover .pedigree-box rect { fill:var(--green-soft); }
.pedigree-box text { font-size:12px; fill:var(--ink); }
.pedigree-box .pedigree-name { font-weight:600; }
.pedigree-box .pedigree-years { font-size:11px; fill:var(--muted); }
.pedigree-box-empty rect { fill:#f4f4f3; stroke:#c7d0cb; stroke-dasharray:4 3; }

.fan-wedge path { fill:#fff; stroke:var(--green); stroke-width:1; }
.fan-wedge:hover path { fill:var(--green-soft); }
.fan-wedge text { font-size:11px; fill:var(--ink); }
.fan-wedge-empty path { fill:#f4f4f3; stroke:#c7d0cb; stroke-dasharray:4 3; }
.fan-wedge-empty text { font-size:11px; fill:var(--muted); }
.pedigree-box-empty text { fill:var(--muted); font-size:12px; }
.pedigree-box-spouse rect { stroke:#8a97a3; stroke-dasharray:3 2; }

.map-container { height:70vh; min-height:420px; border-radius:12px; overflow:hidden; }

.timeline { list-style:none; margin:0; padding:0; }
.timeline-item { display:grid; grid-template-columns:130px 24px 1fr; align-items:start; padding:.9rem 0; }
.timeline-year { font-weight:700; color:var(--green); font-size:.92rem; padding-top:.1rem; }
.timeline-age { display:block; font-weight:400; color:var(--muted); font-size:.78rem; }
.timeline-dot { position:relative; width:24px; align-self:stretch; }
.timeline-dot::before { content:''; position:absolute; left:50%; top:.3rem; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--green); z-index:1; }
.timeline-dot::after { content:''; position:absolute; left:50%; top:0; bottom:-.9rem; width:2px; margin-left:-1px; background:var(--line); }
.timeline-item:last-child .timeline-dot::after { display:none; }
.timeline-content strong a { color:var(--ink); text-decoration:none; }
.timeline-content strong a:hover { text-decoration:underline; }
.timeline-content p { margin:.2rem 0 0; }
.timeline-undated .timeline-item { grid-template-columns:24px 1fr; }
.section-subheading { margin:1.5rem 0 .5rem; font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

.research-stat { text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
.research-stat:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(24,35,31,.09); }
.research-stat strong { color:var(--green); }

.research-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.5rem; }
.research-row {
    display:flex; flex-direction:column; gap:.1rem; text-decoration:none; color:var(--ink);
    background:#fbfcfb; border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem;
}
.research-row:hover { background:var(--green-soft); border-color:var(--green); }
.research-row .row-name { font-weight:600; font-size:.9rem; }
.research-row .row-years { color:var(--muted); font-size:.78rem; }
.research-row .row-note { color:var(--muted); font-size:.78rem; margin-top:.1rem; }

.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.9rem; }
.media-tile { display:flex; flex-direction:column; gap:.3rem; }
.media-tile img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.media-doc-link, .media-missing { display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; border:1px dashed var(--line); border-radius:8px; padding:.5rem; text-align:center; font-size:.82rem; }
.media-caption { font-size:.8rem; color:var(--muted); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.danger-text { color:#9f3a38; }
.danger-box { background:#fbeaea; border:1px solid #e3b3ae; border-radius:10px; padding:1rem 1.2rem; margin-top:1rem; }
.danger-box p:first-child { margin-top:0; }
.check-label { display:flex; align-items:center; gap:.5rem; font-size:.9rem; margin:.8rem 0; cursor:pointer; }

@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.content{padding:1.5rem}}
@media(max-width:600px){.metric-grid{grid-template-columns:1fr}.content{padding:1rem}.page-heading{flex-direction:column}.timeline-item{grid-template-columns:90px 20px 1fr}.timeline-undated .timeline-item{grid-template-columns:20px 1fr}}
