/* Bartrum people pages (bartrum-person, bartrum-line) and the scan viewer. Uses the site tokens. */
.bt-main { padding: 22px 0 8px; }
.bt-main .gw-card { margin-bottom: 16px; }
.bt-main h2 { font: 700 1.25rem/1.2 var(--serif); margin: 0 0 10px; }
.bt-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .bt-grid { grid-template-columns: 1fr 1fr; } }
.bt-grid .gw-card { margin: 0; }
.bt-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; }
.bt-dl dt { color: var(--ink-muted); font-size: .88rem; padding-top: 2px; }
.bt-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .bt-dl { grid-template-columns: 1fr; gap: 2px; } .bt-dl dd { margin-bottom: 8px; } }
.bt-muted { color: var(--ink-muted); }
.bt-gen { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; margin-right: 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--feather) 12%, transparent); color: var(--feather); font: 700 .78rem/1 var(--sans); vertical-align: 1px; }
.bt-chip { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin: 0 4px 4px 0; font-size: .92rem; background: var(--mist); }
.bt-chip.bt-x { border-style: dashed; }
.bt-notes { background: #fff6e0; border: 1px solid #f0d58a; border-left: 4px solid #b07a10; border-radius: 8px; padding: 4px 12px; margin: 0 0 12px; }
.bt-notes p { margin: 6px 0; font-size: .95rem; color: var(--ink); }
.bt-chain-card .gw-chain { margin-top: 6px; }
.bt-chain li { display: flex; align-items: center; gap: 6px; }
.bt-chain b { font: 650 1.05rem/1 var(--serif); padding: 9px 14px; border-radius: 999px; background: var(--paper, #e9eff8); border: 1px solid var(--feather); }

/* the scan, cropped round the person */
.bt-crop { margin: 0 0 14px; }
.bt-crop-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #eef0f4; position: relative; }
.bt-crop-img { height: 240px; background-repeat: no-repeat; position: relative; }
.bt-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 84px; transform: translate(-50%, -50%); border: 3px solid var(--ember); border-radius: 50%;
  box-shadow: 0 0 0 9999px rgb(13 20 36 / .18); pointer-events: none; }
.bt-crop-hint { position: absolute; right: 10px; bottom: 10px; background: rgb(255 255 255 / .94); border-radius: 8px; padding: 6px 10px; font: 700 .85rem/1 var(--sans); color: var(--ink); box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
.bt-crop figcaption { font-size: .92rem; margin-top: 8px; color: var(--ink-muted); }
.bt-crop code, .bt-viewer code { font: 500 .92rem/1.4 ui-monospace, Consolas, monospace; color: var(--ink); background: #fbf8ef; border: 1px solid #eadfbf; border-radius: 6px; padding: 1px 6px; }
.bt-cite { display: inline; padding: 0; border: 0; background: none; color: var(--feather); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bt-status { font-size: .92rem; color: var(--ink-muted); margin: 4px 0 6px; }
.bt-credit { font-size: .85rem; color: var(--ink-muted); margin: 8px 0 0; overflow-wrap: anywhere; }

/* line tree */
.bt-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bt-tools input { flex: 1 1 220px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font: inherit; }
.bt-tree, .bt-tree ul { list-style: none; margin: 0; padding: 0; }
.bt-tree ul { margin-left: 14px; padding-left: 14px; border-left: 1px dashed var(--line); }
.bt-tree li { margin: 4px 0; }
.bt-tree summary { cursor: pointer; padding: 3px 0; }
.bt-tree a { text-decoration: none; font-weight: 600; }
.bt-tree .bt-leaf { padding-left: 18px; }
.bt-sp { color: var(--ink-muted); font-size: .92rem; margin-left: 8px; }
.bt-sp a { font-weight: 400; }
.bt-count { font: 700 .72rem/1 var(--sans); color: var(--ink-muted); background: var(--mist); border-radius: 99px; padding: 2px 7px; margin-left: 6px; }
.bt-q { color: #b07a10; font-weight: 700; }
.bt-hit > a, .bt-hit > details > summary > a { background: #fff3c4; border-radius: 4px; outline: 2px solid #f0d58a; }

/* full-screen scan viewer */
.bt-viewer { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto; background: rgb(13 20 36 / .92); color: #fff; }
.bt-viewer[hidden] { display: none; }
.bt-v-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.bt-v-top h2 { font: 700 1.05rem/1.2 var(--serif); margin: 0; flex: 1; color: #fff; }
.bt-v-top button, .bt-v-tools button { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: #fff; font: 700 1rem/1 var(--sans); cursor: pointer; }
.bt-v-stage-wrap { position: relative; overflow: hidden; cursor: grab; touch-action: none; background: #d9dde4; }
.bt-v-stage-wrap.dragging { cursor: grabbing; }
.bt-v-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.bt-v-stage.anim { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.bt-v-stage img { display: block; user-select: none; -webkit-user-drag: none; max-width: none; }
.bt-v-stage svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.bt-v-tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.bt-v-tools button { background: rgb(13 20 36 / .75); }
.bt-v-panel { background: var(--surface); color: var(--ink); padding: 14px 16px 16px; max-height: 50vh; overflow-y: auto; }
.bt-v-panel p { margin: 0 0 10px; }
.bt-v-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.bt-fix { margin-top: 12px; display: grid; gap: 10px; }
.bt-fix label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.bt-fix textarea, .bt-fix select { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; color: var(--ink); background: var(--surface); }
.bt-fix textarea { min-height: 70px; resize: vertical; }
.bt-fix .bt-hint { font-weight: 400; color: var(--ink-muted); font-size: .85rem; }
.bt-msg { padding: 10px 12px; border-radius: 10px; margin: 8px 0 0; }
.bt-msg.ok { background: #e7f4ec; color: #1f5c39; } .bt-msg.err { background: #fde8eb; color: #8c1b25; }
@media (max-width: 640px) { .bt-v-panel { max-height: 58vh; } }

/* immediate family tree (person page) */
.bt-family { overflow: hidden; }
.bt-fam-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bt-fam-all { font-weight: 700; text-decoration: none; white-space: nowrap; }
.bt-ftree { display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; }
.bt-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.bt-v { width: 2px; height: 22px; background: #C4942A; opacity: .6; }
.bt-eq { color: #C4942A; font: 700 1.2rem/1 var(--serif); }
.bt-eq small { font: 600 .75rem/1 var(--sans); }
.bt-node { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 190px; min-height: 74px;
  padding: 10px 12px 9px; border-radius: 10px; text-decoration: none !important; text-align: center; color: #fff;
  border: 1.2px solid rgb(196 148 42 / .6); box-shadow: 0 3px 10px rgb(13 20 36 / .18); transition: transform .12s, box-shadow .12s; }
.bt-node::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 3px; border-radius: 1px; background: #C4942A; opacity: .75; }
a.bt-node:hover, a.bt-node:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(13 20 36 / .25); outline: none; }
a.bt-node:focus-visible { outline: 3px solid #d4b25a; outline-offset: 2px; }
.bt-n-gen { font: 700 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.bt-n-name { font: 650 1rem/1.2 var(--serif); }
.bt-n-sub { font: 400 .78rem/1.2 var(--sans); opacity: .85; min-height: .9em; }
.bt-par { background: #2C4A6E; }
.bt-sp { background: #4a3e2e; }
.bt-me { background: #8B0000; width: 220px; min-height: 86px; box-shadow: 0 0 0 3px rgb(196 148 42 / .45), 0 6px 16px rgb(13 20 36 / .25); }
.bt-me .bt-n-name { font-size: 1.12rem; }
.bt-kid { background: #5a3a1a; width: 170px; }
.bt-sib { background: #3c4a5e; width: 150px; min-height: 60px; }
.bt-kids { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; border-top: 2px solid rgb(196 148 42 / .5); padding-top: 14px; max-width: 100%; }
.bt-kgroup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bt-klabel { font: 600 .8rem/1 var(--sans); color: var(--ink-muted); }
.bt-end { margin: 14px 0 0; color: var(--ink-muted); font-size: .95rem; text-align: center; }
.bt-sibs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.bt-sibs > span { font-size: .85rem; color: var(--ink-muted); margin-right: 4px; }
@media (max-width: 560px) {
  .bt-node { width: calc(50% - 8px); min-width: 140px; }
  .bt-me { width: 100%; }
  .bt-row.bt-mid .bt-sp { width: 100%; }
  .bt-eq { width: 100%; text-align: center; }
  .bt-sib { width: calc(50% - 6px); }
}

/* the site colours links blue; family cards keep white text */
.gw a.bt-node, .gw a.bt-node:visited, .gw .bt-node span { color: #fff !important; }

/* awaiting review marks and the list of lines */
.bt-rv { display: inline-block; font: 700 .72rem/1 var(--sans); letter-spacing: .03em; color: #8a5a00; background: #fff3dc; border: 1px solid #f0d58a; border-radius: 99px; padding: 3px 8px; margin-left: 6px; vertical-align: 1px; }
.bt-rv-toggle { display: flex; align-items: center; gap: 6px; font-size: .92rem; }
.bt-lines { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 28px; }
.bt-lines li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bt-lines a { font-weight: 700; text-decoration: none; }

/* founder's tree on patriarch pages */
.bt-founder-more { margin: 14px 0 0; text-align: center; font-weight: 600; }