:root {
    --navy: #10264a; --navy2: #1d3f73; --navy3: #27508f;
    --gold: #c9a24a; --gold-hi: #e7c878; --gold-deep: #d9a521;
    --cream: #fffaf0; --parch: #f1e6cc; --parch2: #f8f0dd;
    --ink: #2b2013; --brown: #7a5c34;
    --male: #2a5d9f; --female: #a8325e; --unk: #9b907b;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

/* ---------- Theme colours. Navy and gold is the default (the values below). ---------- */
:root {
    --bar1: #1a396b; --bar2: #0d2040; --emb1: #27508f; --emb2: #0b1c3a; --btn1: #2d5a9e; --btn2: #0f2347;
    --title: #10264a; --link: #1d3f73; --zoom-bg: rgba(16,38,74,.88); --mm-view: rgba(29,63,115,.18);
    --hover: #f6e7bd; --current: #f7e3a1; --line: #eadfc4; --line2: #d6c392;
    --strip1: #efe2c2; --strip2: #e6d6ae; --foot1: #f3e8cf; --foot2: #e9dbb8;
    --map: #e9dcbc; --map-hi: rgba(255,251,238,.8); --map-edge: rgba(92,60,20,.28);
    --tree-line: #8b6b3d; --scroll-thumb: #9b7b45; --scroll-track: #e5d7b6;
    --mm-bg: #f1e6cc; --mm-card: #9b8864; --mm-cur: #d9a521;
    /* Background pictures: folder "backgrounds" beside this page. Change the names here if needed. */
    --bg-img: url("../backgrounds/navy.jpg"); --veil: rgba(255,250,240,.30);
}
[data-theme="burgundy"] {
    --navy: #4a0f22; --navy2: #7a1f3a; --navy3: #98304f;
    --bar1: #7a1f3a; --bar2: #43091c; --emb1: #98304f; --emb2: #38091a; --btn1: #a8385a; --btn2: #4a0f22;
    --title: #5a1226; --link: #7a1f3a; --zoom-bg: rgba(74,15,34,.9); --mm-view: rgba(122,31,58,.2);
    --bg-img: url("../backgrounds/burgundy.jpg"); --veil: rgba(255,250,240,.30);
}
[data-theme="forest"] {
    --navy: #0f3323; --navy2: #1f5a3f; --navy3: #2c7653;
    --bar1: #1f5a3f; --bar2: #0c2b1e; --emb1: #2c7653; --emb2: #0a2417; --btn1: #2f7d58; --btn2: #0f3323;
    --title: #0f3323; --link: #1f5a3f; --zoom-bg: rgba(15,51,35,.9); --mm-view: rgba(31,90,63,.2);
    --bg-img: url("../backgrounds/forest.jpg"); --veil: rgba(255,250,240,.30);
}
[data-theme="midnight"] {
    --navy: #0a0e19; --navy2: #2a3556; --navy3: #3a4a78;
    --bar1: #1b2236; --bar2: #090c16; --emb1: #2f3b60; --emb2: #070a12; --btn1: #3a4a78; --btn2: #0a0e19;
    --title: #e7c878; --link: #8fb4ff; --zoom-bg: rgba(10,14,25,.92); --mm-view: rgba(231,200,120,.22);
    --cream: #1c2233; --parch: #232a3f; --parch2: #212839; --ink: #ece6d4; --brown: #b9ad8c;
    --male: #5b9bf0; --female: #e0689a; --unk: #6d7390;
    --hover: #2c3550; --current: #4d4220; --line: #2f3850; --line2: #3b4663;
    --strip1: #262d44; --strip2: #20273b; --foot1: #232a3f; --foot2: #1d2335;
    --map: #0e1320; --map-hi: rgba(70,88,140,.32); --map-edge: rgba(0,0,0,.6);
    --tree-line: #8590b5; --scroll-thumb: #4a557a; --scroll-track: #121829;
    --mm-bg: #0e1320; --mm-card: #6d7aa5; --mm-cur: #e7c878;
    --bg-img: url("../backgrounds/dark.jpg"); --veil: rgba(9,12,22,.40);
}
html, body { height: 100%; }
body {
    margin: 0; display: flex; flex-direction: column;
    background: var(--bar2); color: var(--ink);
}
::selection { background: var(--gold-hi); color: var(--navy); }

/* ---------- Header banner ---------- */
.topbar {
    flex: 0 0 auto; position: relative; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 20px;
    padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    background: linear-gradient(180deg, var(--bar1) 0%, var(--bar2) 100%);
    border-bottom: 3px solid var(--gold);
    box-shadow: 0 3px 14px rgba(0,0,0,.4);
    color: var(--cream);
}
.brand { display: flex; align-items: center; gap: 14px; }
.emblem {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, var(--emb1), var(--emb2));
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(201,162,74,.22), inset 0 0 8px rgba(0,0,0,.55);
}
.emblem svg { width: 28px; height: 28px; fill: none; stroke: var(--gold-hi); stroke-width: 2; stroke-linecap: round; }
.emblem svg circle { fill: var(--gold-hi); stroke: none; }
.kicker { display: block; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); line-height: 1; margin-bottom: 3px; }
.topbar h1 { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; margin: 0; line-height: 1.05; color: var(--cream); text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--parch); }
.legend .swatch { display: inline-block; width: 30px; height: 4px; background: var(--gold-deep); border-radius: 2px; box-shadow: 0 0 6px rgba(217,165,33,.8); }
.topbar .hintline { color: rgba(241,230,204,.65); font-style: italic; }
.topbar a { color: var(--gold-hi); }
.topbar .form-check-label { color: var(--cream); }
/* View all: label sits underneath the slider */
.topbar .form-switch { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-left: 0; min-height: 0; }
.topbar .form-switch .form-check-input { float: none; margin: 0; }
.topbar .form-switch .form-check-label { font-size: .74rem; line-height: 1; cursor: pointer; }
.topbar .form-check-input { background-color: rgba(255,255,255,.12); border-color: rgba(201,162,74,.8); }
.topbar .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.topbar .form-switch .form-check-input:not(:checked),
.topbar .form-switch .form-check-input:not(:checked):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23e7c878'/></svg>");
}
.topbar .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(231,200,120,.35); border-color: var(--gold-hi); }

/* ---------- Search ---------- */
.search { position: relative; }
.search input {
    width: 270px; max-width: 100%; padding-left: 34px; border-radius: 999px;
    border: 1px solid rgba(201,162,74,.8);
    background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a98a55' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>") no-repeat 11px 50% / 16px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
.search input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 .2rem rgba(231,200,120,.35); }
#results {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    width: 400px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto;
    background: var(--cream); color: var(--ink); border-radius: 8px;
    box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(20,12,0,.45);
}
#results.open { display: block; }
#results .res { padding: 8px 12px; cursor: pointer; border-left: 6px solid var(--unk); border-bottom: 1px solid var(--line); }
#results .res.M { border-left-color: var(--male); }
#results .res.F { border-left-color: var(--female); }
#results .res:hover, #results .res.active { background: var(--hover); }
#results .rname { font-family: var(--serif); font-weight: 700; font-size: .95rem; }
#results .rsub { font-size: .75rem; color: var(--brown); }
#results .rnote { padding: 8px 12px; font-size: .8rem; color: var(--brown); }

/* ---------- The map area: aged parchment ---------- */
#viewport {
    flex: 1 1 auto; overflow: auto; position: relative; cursor: grab;
    user-select: none; -webkit-user-select: none;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    background-color: var(--map);
    background-image:
        radial-gradient(ellipse at 50% 30%, var(--map-hi) 0%, transparent 62%),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, var(--map-edge) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        linear-gradient(var(--veil), var(--veil)),
        var(--bg-img);
    background-size: auto, auto, auto, auto, cover;
    background-position: 0 0, 0 0, 0 0, 0 0, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
}
#viewport.dragging { cursor: grabbing; }
#sizer { position: relative; min-width: 100%; }
#canvas { position: absolute; left: 0; top: var(--hdr); transform-origin: 0 0; }

/* Sticky generation ribbon */
#genbar {
    position: sticky; top: 0; z-index: 4; height: var(--hdr); min-width: 100%;
    background: linear-gradient(180deg, var(--bar1) 0%, var(--bar2) 100%);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 3px 8px rgba(40,25,5,.35);
}
#genbar .gen {
    position: absolute; top: 0; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: max(.4rem, calc(.74rem * var(--zoom, 1))); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi);
    white-space: nowrap; overflow: hidden;
}
#lines { position: absolute; left: 0; top: 0; pointer-events: none; }
#lines path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
#lines .grey path  { stroke: var(--tree-line); stroke-width: 2; opacity: .8; }
#lines .green path { stroke: var(--gold-deep); stroke-width: 4; }
#lines .red path { stroke: var(--line-red); stroke-width: 4; }

/* ---------- Cards (heights are set by the script: do not change row/strip/foot heights) ---------- */
.couple {
    position: absolute; background: var(--cream); border-radius: 7px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(122,92,52,.6), 0 4px 10px rgba(60,40,10,.3);
    transition: box-shadow .15s;
    animation: cardIn .22s ease-out both;
}
.couple:hover { box-shadow: 0 0 0 1px var(--gold), 0 8px 18px rgba(60,40,10,.4); }
@keyframes cardIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .couple { animation: none; transition: none; } }

.prow {
    position: relative; display: flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 12px 0 14px; cursor: pointer;
    border-left: 8px solid var(--unk); background-color: var(--cream);
}
.prow.alt { background-color: var(--parch2); }
.prow.M { border-left-color: var(--male);   background-image: linear-gradient(90deg, rgba(42,93,159,.10), rgba(42,93,159,0) 75%); }
.prow.F { border-left-color: var(--female); background-image: linear-gradient(90deg, rgba(168,50,94,.10), rgba(168,50,94,0) 75%); }
.prow:not(.unknown):hover { background-color: var(--hover); }
.prow.current, .prow.current:hover { background-color: var(--current); box-shadow: inset 0 0 0 2px var(--gold); }
.prow.unknown { cursor: default; color: #8f846e; }
.prow:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; }

.pinfo { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pline { display: flex; align-items: baseline; gap: 8px; }
.pdates { flex: 0 0 auto; font-family: var(--serif); font-style: italic; font-size: .78rem; color: var(--brown); white-space: nowrap; }
.pname { flex: 1 1 auto; min-width: 0; font-family: var(--serif); font-weight: 700; font-size: .96rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psub { font-size: .75rem; color: var(--brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname.hasage { display: flex; align-items: baseline; }
.pname .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pname sup.page { position: static; top: auto; vertical-align: baseline; flex: 0 0 auto; align-self: flex-start; margin: 1px 0 0 2px; font-size: .62rem; line-height: 1; font-weight: 600; font-style: normal; color: var(--brown); }
.prow.unknown .pname { font-weight: 400; font-style: italic; }
.prow.addrow { cursor: pointer; color: var(--link); font-weight: 600; font-size: .78rem; letter-spacing: .12em; }
.prow.addrow:hover { background-color: var(--hover); }

.edit-btn {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    border: 1px solid var(--gold); background: var(--cream); color: var(--link);
    font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.edit-btn:hover { background: var(--navy2); color: var(--gold-hi); }

.mar-strip {
    height: 22px; display: flex; align-items: center; justify-content: flex-start;
    padding: 0 12px 0 14px; font-family: var(--serif); font-style: italic; font-size: .74rem; color: var(--brown);
    background: linear-gradient(180deg, var(--strip1), var(--strip2));
    border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
}
.mar-strip::before { content: "\25C6"; flex: 0 0 auto; margin-right: 7px; font-size: 8px; color: var(--gold); font-style: normal; }
.mar-strip.nm::before { content: "\25C7"; }
.mar-strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mar-strip.nm { justify-content: flex-start; }
.mar-strip.nm span { flex: 1 1 auto; }
.mar-strip .mk-sp { flex: 0 0 auto; background: none; border: 0; padding: 0; margin-left: 10px; font: 600 .72rem/1 system-ui, sans-serif; font-style: normal; color: var(--link); cursor: pointer; }
.mar-strip .mk-sp:hover { text-decoration: underline; }

.couple-foot {
    display: flex; align-items: center; justify-content: space-between; height: 30px;
    background: linear-gradient(180deg, var(--foot1), var(--foot2)); border-top: 1px solid var(--line2);
    font-family: var(--serif); font-size: .8rem; letter-spacing: .04em;
}
.couple-foot button { background: none; border: 0; padding: 0 12px 0 14px; height: 100%; color: var(--ink); cursor: pointer; }
.couple-foot .kids-btn { flex: 1 1 auto; text-align: left; display: flex; align-items: center; justify-content: space-between; }
.couple-foot .kids-btn:hover, .couple-foot .add-sp:hover { background: rgba(201,162,74,.28); }
.couple-foot .add-sp { flex: 0 0 auto; color: var(--link); font-weight: 700; }
.kid-menu {
    position: absolute; z-index: 3; width: 250px; max-height: 280px; overflow: auto;
    background: var(--cream); border-radius: 6px;
    box-shadow: 0 0 0 1px var(--gold), 0 8px 20px rgba(40,25,5,.45);
}
.kid-item { padding: 10px 12px 10px 14px; border-left: 8px solid var(--unk); border-bottom: 1px solid var(--line); cursor: pointer; line-height: 1.25; font-family: var(--serif); }
.kid-item.M { border-left-color: var(--male); }
.kid-item.F { border-left-color: var(--female); }
.kid-item:hover { background: var(--hover); }
.kid-item .pline { min-width: 0; }
.kid-none { padding: 9px 14px; font-size: .85rem; color: var(--brown); }
.kid-add { padding: 10px 14px; color: var(--link); font-weight: 700; font-size: .85rem; cursor: pointer; }
.kid-add:hover { background: var(--hover); }

/* ---------- Round show-more / hide buttons ---------- */
.more-btn {
    position: absolute; width: 36px; height: 36px; padding: 0; border-radius: 50%;
    border: 2px solid var(--gold); color: var(--gold-hi);
    background: radial-gradient(circle at 35% 30%, var(--btn1), var(--btn2));
    box-shadow: 0 3px 8px rgba(30,20,5,.5);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.more-btn:hover { color: #fff; box-shadow: 0 0 0 3px rgba(231,200,120,.5), 0 3px 8px rgba(30,20,5,.5); }
.col-btn {
    position: absolute; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 2px solid var(--gold); color: var(--gold-hi);
    background: radial-gradient(circle at 35% 30%, var(--btn1), var(--btn2));
    box-shadow: 0 3px 8px rgba(30,20,5,.5);
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.col-btn:hover { color: #fff; box-shadow: 0 0 0 3px rgba(231,200,120,.5), 0 3px 8px rgba(30,20,5,.5); }
.more-btn svg, .col-btn svg { display: block; pointer-events: none; }
.more-btn:focus-visible, .col-btn:focus-visible, .zoom-ctl button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- Zoom controls and overview map ---------- */
.zoom-ctl { position: fixed; right: 36px; bottom: 36px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 5; }
.zoom-ctl button {
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    border: 1px solid var(--gold); background: var(--zoom-bg);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 3px 8px rgba(30,20,5,.45);
    font-size: 24px; line-height: 1; color: var(--gold-hi); cursor: pointer;
}
.zoom-ctl button:hover { background: var(--navy3); color: #fff; }
.zoom-ctl button svg { display: block; width: 22px; height: 22px; margin: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zoom-ctl button.off { color: #8f98ad; }
#eyeBtn { display: none; }
#eyeBtn .slash { display: none; }
#eyeBtn.off .slash { display: inline; }
#zoomPct { width: 42px; text-align: center; font-family: var(--serif); font-size: .74rem; line-height: 1; color: var(--ink); font-weight: 700; margin: -2px 0; text-shadow: 0 0 3px var(--cream), 0 0 3px var(--cream); }
#minimap {
    display: none; background: var(--navy); border: 2px solid var(--gold); border-radius: 6px;
    box-shadow: 0 4px 12px rgba(30,20,5,.5); padding: 4px; touch-action: none;
}
#mmBox { position: relative; cursor: pointer; }
#mmBox canvas { display: block; border-radius: 2px; }
#mmView { position: absolute; border: 2px solid var(--navy2); background: var(--mm-view); pointer-events: none; box-sizing: border-box; }

/* ---------- Details panel: like an encyclopaedia side-panel ---------- */
#detail {
    position: fixed; left: 20px; bottom: 36px; z-index: 5;
    width: min(380px, calc(100vw - 92px)); max-height: 50vh; overflow: auto;
    background: var(--cream); border-radius: 8px; font-size: .86rem; line-height: 1.4;
    box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(30,20,5,.5);
}
#detail .dhead {
    position: sticky; top: 0; padding: 9px 14px; cursor: move; user-select: none; touch-action: none;
    font-family: var(--serif); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold-hi); background: linear-gradient(180deg, var(--bar1), var(--bar2));
    border-bottom: 2px solid var(--gold);
}
#detail .dtoggle { cursor: pointer; }
#detail .dbody { padding: 12px 14px 14px; }
#detail .dname { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--title); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--gold); }
#detail .dsuffix { font-style: italic; color: var(--brown); margin-bottom: 4px; }
#detail .drow { display: flex; gap: 8px; margin-top: 6px; }
#detail .dlab { flex: 0 0 74px; color: var(--brown); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
#detail a { color: var(--link); font-weight: 600; }
#detail .text-muted { color: var(--brown) !important; }

/* ---------- Edit dialog ---------- */
dialog#personDlg, dialog#relDlg {
    border: 0; border-radius: 10px; padding: 0; overflow: hidden; width: min(560px, 94vw);
    background: var(--cream); color: var(--ink);
    box-shadow: 0 0 0 2px var(--gold), 0 18px 50px rgba(0,0,0,.55);
}
dialog#personDlg::backdrop, dialog#relDlg::backdrop { background: rgba(10,20,40,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#personDlg h2, #relDlg h2 {
    font-family: var(--serif); font-size: 1.15rem; margin: 0; padding: 14px 18px; color: var(--gold-hi);
    background: linear-gradient(180deg, var(--bar1), var(--bar2)); border-bottom: 3px solid var(--gold);
}
#personDlg .fbody { padding: 16px 18px; max-height: 70vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#personDlg .full { grid-column: 1 / -1; }
#personDlg label, #relDlg label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brown); display: block; margin-bottom: 2px; }
#personDlg .fsec { grid-column: 1 / -1; font-family: var(--serif); font-weight: 700; font-size: .95rem; color: var(--title); margin-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--gold); }
#personDlg .ffoot, #relDlg .ffoot { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line2); background: var(--parch); }
#personDlg .ffoot .sp, #relDlg .ffoot .sp { flex: 1 1 auto; }
#personDlg .ferr { color: #a02020; font-size: .85rem; padding: 0 18px 10px; }
#personDlg .form-control:focus, #personDlg .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201,162,74,.3); }
#personDlg .btn-primary, #relDlg .btn-primary {
    --bs-btn-bg: var(--navy2); --bs-btn-border-color: #c9a24a; --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--navy3); --bs-btn-hover-border-color: #e7c878; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: #e7c878; --bs-btn-active-color: #fff;
}
.hint { font-size: .72rem; color: var(--brown); }
.lk-res { max-height: 190px; overflow: auto; margin-top: 4px; }
.lk-item { padding: 6px 10px; border: 1px solid var(--line2); border-top: 0; cursor: pointer; font-size: .88rem; background: var(--cream); color: var(--ink); }
.lk-item:first-child { border-top: 1px solid var(--line2); }
.lk-item:hover { background: var(--hover); }
.lk-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--current); border: 1px solid var(--gold); border-radius: 4px; font-size: .9rem; }

/* ---------- Appearance picker ---------- */
.themes { display: flex; align-items: center; gap: 9px; margin-left: 6px; padding-left: 16px; border-left: 1px solid rgba(201,162,74,.45); }
.themename { font-size: .74rem; font-style: italic; color: var(--parch); min-width: 7.5em; }
.tsw {
    --c: #10264a; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,.4);
    background: linear-gradient(135deg, var(--c) 52%, #c9a24a 52%);
    transition: transform .12s;
}
.tsw:hover { transform: scale(1.15); }
.tsw[aria-checked="true"] { border-color: var(--cream); box-shadow: 0 0 0 2px var(--bar2), 0 0 0 4px var(--gold-hi); }
.tsw:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.tsw[data-theme-pick="original"] { --c: #0b6f8a; background: linear-gradient(135deg, #0b6f8a 52%, #dfe0df 52%); }
.tsw[data-theme-pick="burgundy"] { --c: #7a1f3a; }
.tsw[data-theme-pick="forest"]   { --c: #1f5a3f; }
.tsw[data-theme-pick="midnight"] { --c: #0a0e19; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 767.98px) {
    .topbar h1 { font-size: 1.35rem; }
}
@media (max-width: 640px) {
    .topbar { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
    .emblem { width: 38px; height: 38px; }
    .emblem svg { width: 23px; height: 23px; }
    .themes { margin-left: 2px; padding-left: 10px; gap: 7px; }
    .tsw { width: 20px; height: 20px; }
    .kicker { font-size: .6rem; letter-spacing: .24em; }
    .topbar h1 { font-size: 1.2rem; }
    .tools { width: 100%; gap: 8px 14px; }
    .search { flex: 1 1 100%; order: 10; }
    .search input { width: 100%; }
    #results { left: 0; right: 0; width: auto; max-width: none; }
    .zoom-ctl { right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); gap: 6px; }
    .zoom-ctl button { width: 38px; height: 38px; }
    #zoomPct { width: 38px; }
    #detail { left: max(10px, env(safe-area-inset-left)); right: 64px; width: auto; bottom: max(14px, env(safe-area-inset-bottom)); max-height: 36vh; }
}
@media (max-width: 540px) {
    #personDlg .fbody { grid-template-columns: 1fr; }
}

/* ---------- Midnight: header text in light colours (--cream and --parch are dark card colours in this theme) ---------- */
[data-theme="midnight"] .topbar h1 { color: #f6efdc; }
[data-theme="midnight"] .legend { color: #ece6d4; }
[data-theme="midnight"] .topbar .form-check-label { color: #ece6d4; }
[data-theme="midnight"] .themename { color: #d9d2bd; }
[data-theme="midnight"] .topbar .hintline { color: rgba(236,230,212,.8); }

/* ---------- Original appearance: the first design, light grey with teal ---------- */
[data-theme="original"] {
    --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --navy: #0b6f8a; --navy2: #0b6f8a; --navy3: #0a5d74;
    --bar1: #ffffff; --bar2: #ffffff; --emb1: #0b6f8a; --emb2: #0b6f8a; --btn1: #ffffff; --btn2: #ffffff;
    --gold: #b5b8b5; --gold-hi: #0b6f8a; --gold-deep: #1f9d55;
    --cream: #ffffff; --parch: #f5f6f6; --parch2: #f5f6f6; --ink: #212529; --brown: #555555;
    --male: #2fb1d3; --female: #d8246f; --unk: #9aa0a6;
    --title: #212529; --link: #0b6f8a; --zoom-bg: rgba(255,255,255,.55); --mm-view: rgba(11,111,138,.15);
    --hover: #e4f1f6; --current: #e3f4e9; --line: #eeeeee; --line2: #d3d6d3;
    --strip1: #eceeed; --strip2: #eceeed; --foot1: #ffffff; --foot2: #ffffff;
    --map: #dfe0df; --map-hi: transparent; --map-edge: transparent;
    --tree-line: #8a8d8a; --mm-bg: #e6e7e6; --mm-card: #8a8d8a; --mm-cur: #1f9d55;
    --bg-img: url("../backgrounds/original.jpg"); --veil: rgba(255,250,240,.30);
/*	--bg-img: none; --veil: transparent; */
}
[data-theme="original"] body { background: #dfe0df; }
[data-theme="original"] ::selection { background: #b3d7ff; color: #000; }
[data-theme="original"] .topbar { background: #fff; border-bottom: 1px solid #c4c6c4; box-shadow: none; color: #212529; }
[data-theme="original"] .emblem, [data-theme="original"] .kicker { display: none; }
[data-theme="original"] .topbar h1 { font-family: inherit; font-size: 1.3rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: #212529; text-shadow: none; }
[data-theme="original"] .legend { color: #444; }
[data-theme="original"] .legend .swatch { width: 28px; height: 3px; box-shadow: none; }
[data-theme="original"] .topbar .hintline { color: #6c757d; font-style: normal; }
[data-theme="original"] .topbar a { color: #0d6efd; }
[data-theme="original"] .topbar .form-check-label { color: #212529; }
[data-theme="original"] .topbar .form-check-input { background-color: #fff; border-color: rgba(0,0,0,.25); }
[data-theme="original"] .topbar .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
[data-theme="original"] .topbar .form-check-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
[data-theme="original"] .topbar .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0,0,0,0.25)'/></svg>"); }
[data-theme="original"] .topbar .form-switch .form-check-input:not(:checked):focus { --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2386b7fe'/></svg>"); }
[data-theme="original"] .themes { border-left-color: #c4c6c4; }
[data-theme="original"] .themename { color: #666; }
[data-theme="original"] .tsw { border-color: rgba(0,0,0,.25); }
[data-theme="original"] .tsw[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0b6f8a; }
[data-theme="original"] .search input { border-radius: .25rem; border: 1px solid #dee2e6; background-image: none; padding-left: .5rem; box-shadow: none; }
[data-theme="original"] .search input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
[data-theme="original"] #results { border: 1px solid #c4c6c4; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
[data-theme="original"] #results .rname { font-family: inherit; font-size: .9rem; font-weight: 600; }
[data-theme="original"] #viewport { scrollbar-color: auto; }
[data-theme="original"] #genbar { background: #fff; border-bottom: 1px solid #c4c6c4; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-theme="original"] #genbar .gen { font-family: inherit; font-size: max(.4rem, calc(.8rem * var(--zoom, 1))); font-weight: 600; letter-spacing: 0; text-transform: none; color: #444; }
[data-theme="original"] #lines path { stroke-linecap: butt; }
[data-theme="original"] #lines .grey path { opacity: 1; }
[data-theme="original"] #lines .green path, [data-theme="original"] #lines .red path { stroke-width: 3.5; }
[data-theme="original"] .couple { border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); animation: none; transition: none; }
[data-theme="original"] .couple:hover { box-shadow: 0 1px 4px rgba(0,0,0,.25); }
[data-theme="original"] .prow.M, [data-theme="original"] .prow.F { background-image: none; }
[data-theme="original"] .prow.current, [data-theme="original"] .prow.current:hover { box-shadow: none; }
[data-theme="original"] .pname { font-family: inherit; font-size: .92rem; font-weight: 600; }
[data-theme="original"] .pdates { font-family: inherit; font-style: normal; font-size: .75rem; }
[data-theme="original"] .prow.addrow { font-weight: 500; font-size: .85rem; letter-spacing: .02em; }
[data-theme="original"] .edit-btn { border-color: #b5b8b5; }
[data-theme="original"] .edit-btn:hover { background: #d4ebf3; color: #0b6f8a; }
[data-theme="original"] .mar-strip { font-family: inherit; font-style: normal; font-size: .72rem; color: #444; border-color: #d3d6d3; padding-left: 22px; }
[data-theme="original"] .mar-strip::before { display: none; }
[data-theme="original"] .mar-strip .mk-sp { font-weight: 500; }
[data-theme="original"] .couple-foot { font-family: inherit; letter-spacing: 0; border-top: 1px solid #c4c6c4; }
[data-theme="original"] .couple-foot .kids-btn:hover, [data-theme="original"] .couple-foot .add-sp:hover { background: #e4f1f6; }
[data-theme="original"] .couple-foot .add-sp { font-weight: 500; }
[data-theme="original"] .kid-menu { border-radius: 4px; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
[data-theme="original"] .kid-item { font-family: inherit; }
[data-theme="original"] .kid-add { font-weight: 500; }
[data-theme="original"] .more-btn { border: 1px solid #b5b8b5; background: #fff; color: #0b6f8a; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: none; }
[data-theme="original"] .more-btn:hover { background: #e4f1f6; color: #0b6f8a; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
[data-theme="original"] .col-btn { border: 1px solid #b5b8b5; background: #fff; color: #666; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: none; }
[data-theme="original"] .col-btn:hover { background: #fde8e8; color: #a02020; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
[data-theme="original"] .zoom-ctl button { border-color: rgba(181,184,181,.7); background: rgba(255,255,255,.55); color: #0b6f8a; box-shadow: 0 1px 4px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
[data-theme="original"] .zoom-ctl button:hover { background: rgba(228,241,246,.85); color: #0b6f8a; }
[data-theme="original"] .zoom-ctl button.off { color: #777; }
[data-theme="original"] #zoomPct { font-family: inherit; font-size: .72rem; color: #333; font-weight: 600; }
[data-theme="original"] #minimap { background: #fff; border: 1px solid #b5b8b5; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="original"] #detail { border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
[data-theme="original"] #detail .dhead { font-family: inherit; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #212529; background: #f5f6f6; border-bottom: 1px solid #e0e2e0; }
[data-theme="original"] #detail .dname { font-family: inherit; font-size: 1rem; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
[data-theme="original"] #detail .dlab { font-size: .85rem; letter-spacing: 0; text-transform: none; color: #777; padding-top: 0; }
[data-theme="original"] dialog#personDlg, [data-theme="original"] dialog#relDlg { border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
[data-theme="original"] dialog#personDlg::backdrop, [data-theme="original"] dialog#relDlg::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="original"] #personDlg h2, [data-theme="original"] #relDlg h2 { font-family: inherit; font-size: 1.15rem; color: #212529; background: #fff; border-bottom: 1px solid #e0e2e0; }
[data-theme="original"] #personDlg label, [data-theme="original"] #relDlg label { font-size: .75rem; letter-spacing: 0; text-transform: none; color: #555; }
[data-theme="original"] #personDlg .fsec { font-family: inherit; font-size: .85rem; color: inherit; border-bottom: 0; padding-bottom: 0; }
[data-theme="original"] #personDlg .ffoot, [data-theme="original"] #relDlg .ffoot { background: #fff; border-top: 1px solid #e0e2e0; }
[data-theme="original"] #personDlg .form-control:focus, [data-theme="original"] #personDlg .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
[data-theme="original"] #personDlg .btn-primary, [data-theme="original"] #relDlg .btn-primary {
    --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be; --bs-btn-active-color: #fff;
}
[data-theme="original"] .lk-chip { border: 0; }

/* ---------- Relationship calculator (button in the top bar + dialog; dialog shares the edit dialog's look) ---------- */
.relbtn {
    font-family: var(--serif); font-size: .85rem; line-height: 1.2; padding: 5px 14px; border-radius: 999px;
    border: 1px solid rgba(201,162,74,.8); background: rgba(255,255,255,.08); color: var(--cream); cursor: pointer;
}
.relbtn:hover { background: rgba(231,200,120,.22); border-color: var(--gold-hi); }
.relbtn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(231,200,120,.35); border-color: var(--gold-hi); }
dialog#relDlg { width: min(680px, 94vw); }
#relDlg .rbody { padding: 16px 18px; max-height: 72vh; overflow: auto; }
#relDlg .rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
#relDlg .rswap { margin-top: 8px; }
#relDlg .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201,162,74,.3); }
#relDlg .rl-chosen { margin-top: 6px; min-height: 2.6rem; }
#relDlg .rl-none { font-size: .85rem; color: var(--brown); font-style: italic; padding: 8px 2px; }
#relDlg .lk-item.active { background: var(--hover); }
#relDlg .rl-mute { color: var(--brown); font-size: .8em; font-weight: 400; }
#relDlg .rl-out { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gold); min-height: 3rem; }
#relDlg .rl-answer { font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; }
#relDlg .rl-answer.small { font-size: 1.1rem; }
#relDlg .rl-answer b { color: var(--title); }
#relDlg .rl-recip { color: var(--brown); font-size: .95rem; margin-top: 3px; }
#relDlg .rl-sect { font-family: var(--serif); font-weight: 700; font-size: .95rem; color: var(--title); margin: 14px 0 3px; }
#relDlg .rl-chain { margin: 2px 0; line-height: 1.6; font-size: .92rem; }
#relDlg .rl-chain .rl-lab { display: block; color: var(--brown); font-size: .74rem; }
#relDlg .rl-arrow { color: var(--gold-deep); margin: 0 4px; }
#relDlg .rl-go { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
#relDlg .rl-note { font-size: .78rem; color: var(--brown); margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line2); }
#relDlg ul.rl-also { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
#relDlg .rfoot { flex-wrap: wrap; }
@media (max-width: 575.98px) { #relDlg .rgrid { grid-template-columns: 1fr; } #relDlg .rl-answer { font-size: 1.2rem; } }
[data-theme="original"] .relbtn { font-family: inherit; border-color: #0d6efd; background: #fff; color: #0d6efd; border-radius: .25rem; }
[data-theme="original"] .relbtn:hover { background: #e7f1ff; }
[data-theme="original"] #relDlg .rl-answer, [data-theme="original"] #relDlg .rl-sect { font-family: inherit; }
[data-theme="original"] #relDlg .rl-answer b, [data-theme="original"] #relDlg .rl-sect { color: #212529; }
[data-theme="original"] #relDlg .form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
[data-theme="original"] #relDlg .rl-out { border-top-color: #e0e2e0; }

#lineBar {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 15; max-width: calc(100vw - 24px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 8px 14px; border-radius: 999px;
    background: var(--zoom-bg); color: var(--cream); font-size: .85rem; box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(0,0,0,.4);
}
#lineBar.d-none { display: none; }
#lineX {
    position: absolute; top: -10px; right: -4px; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 2px solid var(--gold); background: var(--line-red); color: #fff; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
#lineX:hover { filter: brightness(1.15); border-color: var(--gold-hi); }
#lineX:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
[data-theme="original"] #lineBar { background: #fff; color: #212529; box-shadow: 0 0 0 1px #b5b8b5, 0 2px 8px rgba(0,0,0,.3); }
:root { --line-red: #c62828; }
[data-theme="midnight"] { --line-red: #ff6b5e; }
.line-mode .legend .swatch { background: var(--line-red); box-shadow: 0 0 6px rgba(198,40,40,.8); }
[data-theme="original"] .line-mode .legend .swatch { box-shadow: none; }

/* ---------- Midnight: --cream is a dark card colour here, so the Relationship button and the line pill need light text ---------- */
[data-theme="midnight"] .relbtn { color: #f6efdc; background: rgba(231,200,120,.12); }
[data-theme="midnight"] .relbtn:hover { color: #fff; }
[data-theme="midnight"] #lineBar { color: #f6efdc; }