/* OBSCURA OS: OBSCURA Roots.

   One working window, laid out as desktop genealogy software is and as PDF
   Studio's is: the bar with the way home, the menus, the tree's name and
   its save state; the row of views; the chosen view's options; then the
   people down the left, the view in the middle and the chosen person on
   the right, with a status line across the foot. Only the middle scrolls.

   The page is an application while <body> carries rt-app, which
   pro-load.js takes off when it shows the lock screen instead. Every
   colour, size, corner and duration is a theme.css token, so the window
   and its charts follow the colourway and dark mode the rest of the site
   does; the printed sheets (a chart's preview, the book) stay paper-white.
   On a phone the two side panels become sheets over the view, and every
   control is at least 44 pixels square. */

.rt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rt-offscreen { position: absolute; left: -10000px; top: 0; width: 700px; }

/* ------------------------------------------------------------ the frame */

body.rt-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
body.rt-app .os-footer, body.rt-app .os-topbar, body.rt-app .os-toolnav { display: none !important; }
body.rt-app #ppBadge { left: auto; right: var(--space-1); bottom: 3px; min-height: 22px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }

.rt {
  --rt-index: 236px;
  --rt-side: 300px;
  --rt-hit: 32px;
  --rt-paper: color-mix(in srgb, var(--paper-inset) 70%, var(--rule) 30%);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font: var(--text-xs)/1.4 var(--font-sans);
}
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt button, .rt input, .rt select, .rt textarea { font: inherit; color: inherit; }
.rt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rt-grow { flex: 1 1 auto; }
.rt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.rt .rt-link { border: 0; background: none; padding: 0; color: var(--accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rt-hint { margin: 0; color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.45; }
.rt-hint:empty { display: none; }
.rt-hint[data-kind="warn"] { color: var(--warn); }
.rt-none { color: var(--ink-faint); }
.rt-mono { font-family: var(--font-mono); font-size: var(--text-2xs); }
.rt-nowrap { white-space: nowrap; }
.rt-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt > .rt-main { grid-row: 4; }
.rt > .rt-status { grid-row: 5; }
.rt.is-drop .rt-main { outline: 2px dashed var(--accent); outline-offset: -6px; }

/* ------------------------------------------------------------ the bar */

.rt-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.rt-id { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.rt-home { display: inline-flex; align-items: center; justify-content: center; width: var(--rt-hit); height: var(--rt-hit); border-radius: var(--radius-md); color: var(--ink-soft); }
.rt-home:hover { background: var(--paper-inset); color: var(--ink); }
.rt-brand { margin: 0 var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.rt-menubar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rt-menu { position: relative; }
.rt-menu > summary { list-style: none; display: flex; align-items: center; min-height: var(--rt-hit); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: default; user-select: none; }
.rt-menu > summary::-webkit-details-marker { display: none; }
.rt-menu > summary:hover, .rt-menu[open] > summary { background: var(--paper-inset); }
.rt-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rt-drop { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; display: flex; flex-direction: column; min-width: 268px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-2, 0 12px 32px rgb(0 0 0 / 0.18)); }
.rt-menu[open] > .rt-drop { animation: os-menu-in var(--dur-3) var(--ease-standard); }
.rt-drop button, .rt-drop a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); min-height: var(--rt-hit); padding: 6px var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rt-drop button:hover, .rt-drop button:focus-visible, .rt-drop a:hover, .rt-drop a:focus-visible { background: var(--paper-inset); outline: none; }
.rt-drop button:disabled { opacity: 0.45; cursor: default; background: none; }
.rt-drop kbd { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.rt-drop hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: var(--space-1) 0; }
.rt-docname { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.25; }
.rt-treename { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rt-saved { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.rt-saved[data-save-state="failed"] { color: var(--danger); }
.rt .rt-ib { display: inline-flex; align-items: center; justify-content: center; width: var(--rt-hit); height: var(--rt-hit); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; flex: none; }
.rt .rt-ib:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.rt-ib:disabled { opacity: 0.35; cursor: default; }
.rt-ib:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rt .rt-ib[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rt-save { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--rt-hit); padding: 0 var(--space-3); }
.rt-save svg { width: 16px; height: 16px; }
.rt .rt-sheet-btn, .rt .rt-panel-close { display: none; }
.rt[data-open="false"] .rt-tools, .rt[data-open="false"] .rt-opts, .rt[data-open="false"] .rt-docname, .rt[data-open="false"] #rtUndo, .rt[data-open="false"] #rtRedo, .rt[data-open="false"] #rtAdd, .rt[data-open="false"] .rt-openin, .rt[data-open="false"] .rt-sheet-btn, .rt[data-open="false"] #rtCounts { display: none; }

/* ------------------------------------------------------------ views */

.rt-tools { display: flex; gap: 2px; padding: var(--space-1) var(--space-2); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.rt-tools::-webkit-scrollbar { display: none; }
.rt-tools button { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: 36px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.rt-tools button:hover { background: var(--paper-inset); color: var(--ink); }
.rt-tools button:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.rt-tools button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); font-weight: 600; }
.rt-tools svg { width: 20px; height: 20px; }
.rt-tools-gap { flex: none; width: 1px; margin: var(--space-1) var(--space-2); background: var(--rule); }
@media (max-width: 1600px) {
  .rt-tools button { gap: var(--space-1); padding: 0 6px; }
  .rt-tools-gap { margin: var(--space-1) 6px; }
}

.rt-opts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule); background: var(--paper-inset); color: var(--ink-soft); }
.rt-opts:empty { display: none; }
.rt-opts-name { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-opts-life { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-opt { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.rt .rt-btn-sm { min-height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.rt-zoom { display: inline-flex; align-items: center; gap: 2px; }
.rt-zoom .rt-ib { width: 28px; height: 28px; }
.rt .rt-zoom-val { min-width: 52px; min-height: 28px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); cursor: pointer; font-variant-numeric: tabular-nums; }
.rt-zoom-val:hover { background: var(--paper); }
.rt-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.rt-seg button { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.rt-seg button:hover { color: var(--ink); background: var(--paper-inset); }
.rt-seg button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* ------------------------------------------------------------ fields */

.rt input[type="text"], .rt input:not([type]), .rt input[type="search"], .rt input[type="number"], .rt select, .rt textarea {
  min-height: 30px; padding: 4px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
.rt textarea { width: 100%; min-height: 64px; resize: vertical; line-height: 1.45; }
.rt input:focus-visible, .rt select:focus-visible, .rt textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
.rt-field { display: grid; gap: var(--space-1); min-width: 0; color: var(--ink-soft); }
.rt-field > :is(input, select, textarea) { width: 100%; min-width: 0; }
.rt-field > span:first-child { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.rt-field.rt-narrow { max-width: 320px; }
.rt-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; color: var(--ink); cursor: pointer; }
.rt-check input { accent-color: var(--accent-strong); }
.rt-radios { display: grid; gap: 2px; margin: 0 0 var(--space-2); padding: 0; border: 0; }
.rt-radios legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.rt .btn { min-height: 34px; }
.rt .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--paper-raised); }
.rt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.rt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.rt-form-grid { display: grid; gap: var(--space-3); }
.rt-form-grid .btn { justify-self: start; }

/* ------------------------------------------------------------ the working area */

.rt-main { position: relative; min-height: 0; display: flex; flex-direction: column; }
.rt-boot { margin: auto; color: var(--ink-faint); }
.rt-work { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--rt-index) minmax(0, 1fr) var(--rt-side); grid-template-rows: minmax(0, 1fr); }
.rt-work[hidden], .rt-start[hidden], .rt-boot[hidden] { display: none; }
.rt-main.is-wide .rt-work { grid-template-columns: var(--rt-index) minmax(0, 1fr) 0; }
.rt-main.is-wide .rt-side { visibility: hidden; overflow: hidden; border: 0; }

.rt-index { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.rt-index-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-bottom: 1px solid var(--rule); }
.rt-index-head input { flex: 1 1 auto; min-width: 0; }
.rt-index-count { flex: none; color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-index-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: var(--space-1) 0 var(--space-4); overflow-y: auto; list-style: none; scrollbar-width: thin; }
.rt-index-list li[data-id] { display: flex; align-items: baseline; gap: var(--space-2); min-height: 28px; padding: 4px var(--space-3) 4px var(--space-4); cursor: pointer; }
.rt-index-list li[data-id]:hover { background: var(--paper-inset); }
.rt-index-list li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rt-index-list li[data-id]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rt-ix-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-ix-life { flex: none; color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-index-list li[aria-selected="true"] .rt-ix-life { color: inherit; }
.rt-ix-sur { position: sticky; top: 0; z-index: 1; padding: 6px var(--space-3) 2px; background: var(--paper-raised); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.rt-ix-more { padding: var(--space-2) var(--space-3); color: var(--ink-faint); font-size: var(--text-2xs); }

.rt-stage { position: relative; min-width: 0; min-height: 0; display: flex; background: var(--paper); }
.rt-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; border-left: 1px solid var(--rule); background: var(--paper-raised); }

/* ------------------------------------------------------------ the chosen person */

.rt-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.rt-panel-head h2 { flex: 1 1 auto; margin: 0; font: 600 var(--text-md)/1.25 var(--font-display); }
.rt-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.rt-sec:last-child { border-bottom: 0; }
.rt-pad { padding: var(--space-3); }
.rt-who { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.rt-who-pic { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; background: var(--paper-inset); }
.rt-who-face { position: relative; display: block; overflow: hidden; }
.rt-who-face img { position: absolute; left: 0; top: 0; max-width: none; height: auto; transform-origin: 0 0; }
.rt-who-none { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--rule); }
.rt-who-none svg { width: 30px; height: 30px; }
.rt-who-life { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rt-who-rel { margin: 2px 0 0; color: var(--ink-soft); }
.rt-tagline { display: inline-block; margin: 2px 0 0; color: var(--ink-faint); font-size: var(--text-2xs); }
.rt-kv { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.rt-kv > span { color: var(--ink-faint); font-size: var(--text-2xs); }
.rt .rt-plink { padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; text-align: left; cursor: pointer; }
.rt-plink:hover { text-decoration: underline; text-underline-offset: 2px; }
.rt-plink:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--radius-sm); }
.rt-life { margin-left: var(--space-1); color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-side-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-side-actions .btn { min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); }

/* ------------------------------------------------------------ the start screen */

.rt-start { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rt-start-in { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }
.rt-start h2 { margin: 0 0 var(--space-2); font: 700 var(--text-2xl)/1.15 var(--font-display); }
.rt-lede { max-width: 62ch; margin: 0 0 var(--space-5); color: var(--ink-soft); font-size: var(--text-md); line-height: 1.6; }
.rt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.rt-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-raised); }
.rt-card h3 { margin: 0; font-size: var(--text-sm); font-weight: 650; }
.rt-card p { margin: 0 0 auto; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.rt-card > .btn { align-self: flex-start; margin-top: var(--space-3); }
.rt-sub { margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); font-size: var(--text-sm); font-weight: 650; }
.rt-trees { margin: 0; padding: 0; list-style: none; }
.rt-trees li { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--rule); }
.rt-tree-open { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; min-height: 52px; padding: var(--space-2) var(--space-1); border: 0; background: none; text-align: left; cursor: pointer; }
.rt-tree-open:hover b { color: var(--accent-strong); }
.rt-tree-open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rt-tree-open span { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-empty-line { color: var(--ink-faint); padding: var(--space-2) 0; }

/* ------------------------------------------------------------ empty states */

.rt-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--space-5); overflow: auto; }
.rt-empty-in { max-width: 460px; text-align: left; }
.rt-empty-in h2 { margin: 0 0 var(--space-2); font: 600 var(--text-xl)/1.2 var(--font-display); }
.rt-empty-in p { margin: 0 0 var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }

/* ------------------------------------------------------------ charts */

.rt-pan { flex: 1 1 auto; min-width: 0; overflow: auto; cursor: grab; outline: none; background: var(--paper-inset); }
.rt-chart-note { position: absolute; left: var(--space-3); bottom: var(--space-3); margin: 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-xs); }
.rt-pan.is-panning { cursor: grabbing; }
.rt-pan:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.rt-pan-in { display: inline-block; min-width: 100%; min-height: 100%; padding: var(--space-6); }
.rt-pan-in svg { display: block; margin: auto; }
.rt .rt-chart { width: auto; height: auto; overflow: visible; stroke: none; font-family: var(--font-sans); }
.rt-chart text { stroke: none; }
.rt-chart .rt-ln { fill: none; stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.rt-chart .rt-ln-dash { stroke-dasharray: 3 3; }
.rt-chart .rt-box { cursor: pointer; outline: none; }
.rt-chart .rt-box-bg { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); transition: stroke var(--dur-2) var(--ease-standard), fill var(--dur-2) var(--ease-standard); }
.rt-chart .rt-box-tick { fill: var(--ink-faint); }
.rt-chart .rt-sex-M .rt-box-tick { fill: color-mix(in srgb, var(--accent) 75%, var(--ink-faint)); }
.rt-chart .rt-sex-F .rt-box-tick { fill: color-mix(in srgb, var(--danger) 70%, var(--ink-faint)); }
.rt-chart .rt-box:hover .rt-box-bg { stroke: var(--accent); }
.rt-chart [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rt-chart .rt-box.is-focus .rt-box-bg { fill: var(--accent-soft); stroke: var(--accent-strong); }
.rt-chart .rt-box-empty .rt-box-bg { fill: transparent; stroke-dasharray: 3 3; }
.rt-chart .rt-box-empty .rt-t-fact { fill: var(--accent-strong); }
.rt-chart .rt-t-name { fill: var(--ink); font-weight: 600; }
.rt-chart .rt-t-fact { fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rt-chart .rt-t-note { fill: var(--ink-faint); font-style: italic; }
.rt-chart .rt-wedge, .rt-chart .rt-hub { cursor: pointer; outline: none; }
.rt-chart .rt-wedge-bg { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.rt-chart .rt-side-1 .rt-wedge-bg { fill: color-mix(in srgb, var(--paper-raised) 88%, var(--accent) 12%); }
.rt-chart .rt-side-2 .rt-wedge-bg { fill: color-mix(in srgb, var(--paper-raised) 88%, var(--warn) 12%); }
.rt-chart .rt-wedge-empty .rt-wedge-bg { fill: transparent; stroke-dasharray: 3 3; }
.rt-chart .rt-wedge:hover .rt-wedge-bg, .rt-chart .rt-hub:hover .rt-wedge-bg { stroke: var(--accent); }
.rt-chart .rt-wedge:focus-visible .rt-wedge-bg, .rt-chart .rt-hub:focus-visible .rt-wedge-bg { stroke: var(--focus); }
.rt-chart .is-focus .rt-wedge-bg { fill: var(--accent-soft); stroke: var(--accent-strong); }

/* ------------------------------------------------------------ documents */

.rt-doc { flex: 1 1 auto; min-width: 0; overflow: auto; padding: var(--space-5) var(--space-5) var(--space-8); }
.rt-doc-wide .rt-sheet { max-width: 1080px; }
.rt-sheet { max-width: 920px; margin: 0 auto var(--space-4); padding: var(--space-5) var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); }
.rt-sheet h2 { margin: 0 0 var(--space-1); font: 600 var(--text-xl)/1.2 var(--font-display); overflow-wrap: anywhere; }
.rt-sheet h3 { margin: var(--space-5) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--rule); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.rt-sheet h4 { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 650; }
.rt-sheet > p { line-height: 1.55; }
.rt-eyebrow { margin: 0 0 var(--space-1); color: var(--ink-faint); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; }
.rt-pp-life { margin: 0 0 var(--space-1); color: var(--ink-soft); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rt-pp-rel { margin: 0 0 var(--space-2); color: var(--ink-soft); }
.rt-memo { margin: 0 0 var(--space-2); white-space: pre-wrap; line-height: 1.55; }
.rt-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.rt-scrollx { max-width: 100%; overflow-x: auto; }

.rt-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rt-table th, .rt-table td { padding: 6px var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.rt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper-raised); color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }
.rt-table thead th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rt-table thead th button:hover { color: var(--ink); }
.rt-table .rt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-table tbody tr:hover { background: color-mix(in srgb, var(--paper-inset) 60%, transparent); }
.rt-table-tight th, .rt-table-tight td { padding: 3px var(--space-2); }
.rt-people td { white-space: nowrap; }
.rt-people td:nth-child(2) { white-space: normal; min-width: 180px; }
.rt-facts { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rt-facts th { width: 132px; padding: 5px var(--space-2) 5px 0; color: var(--ink-faint); font-weight: 500; text-align: left; vertical-align: top; }
.rt-facts td { padding: 5px 0; vertical-align: top; }
.rt-src { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--good-soft); color: var(--good); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: center; }
.rt-nosrc { color: var(--warn); font-size: var(--text-2xs); white-space: nowrap; }
.rt-nosrc-line { margin: 0 0 var(--space-2); color: var(--warn); }
.rt-cite { display: block; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); }
.rt-cite + .rt-cite { margin-top: 2px; }
.rt-cite-p { color: var(--ink-faint); }
.rt-pp-facts .c-date { white-space: nowrap; }
.rt-pp-facts .c-src .rt-cite { max-width: 250px; }
/* the evidence first, in a column of its own width, so the titles line up */
.rt-q { display: inline-block; width: 3em; color: var(--good); letter-spacing: -1px; }
.rt-q0, .rt-q1 { color: var(--warn); }
.rt-lvl { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; }
.rt-lvl-error { background: var(--danger-soft); color: var(--danger); }
.rt-lvl-warn { background: var(--warn-soft); color: var(--warn); }
.rt-lvl-ok { background: var(--good-soft); color: var(--good); }
.rt-good-line { color: var(--good); }
.rt-warn-line { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); }
.rt-plain { margin: 0; padding-left: var(--space-4); }
.rt-todo, .rt-log { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.rt-todo li, .rt-log li { padding: 3px 0; }
.rt-done { color: var(--ink-faint); text-decoration: line-through; }
.rt-gallery { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rt-thumb { width: 150px; margin: 0; }
.rt-thumb button { display: block; width: 150px; height: 112px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); overflow: hidden; cursor: zoom-in; }
.rt-thumb button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-thumb figcaption { margin-top: var(--space-1); font-size: var(--text-2xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.rt-media-grid .rt-thumb { width: 170px; }
.rt-media-grid .rt-thumb button { width: 170px; height: 128px; }
.rt-media-grid figcaption b { font-weight: 600; color: var(--ink); }
.rt .rt-year { width: 64px; font-variant-numeric: tabular-nums; }
.rt-plugins { display: grid; gap: var(--space-3); }
.rt-pl-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rt-pl-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.rt-pl-list li:last-child { border-bottom: 0; }
.rt-pl-main { flex: 1 1 auto; min-width: 0; }
.rt-pl-main .rt-hint { margin-top: 2px; }
.rt-pl-act { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.rt-pl-out { max-height: 64vh; padding: var(--space-3); border-radius: var(--radius-md); }
.rt-pl-svg { max-width: 100%; overflow: auto; }
.rt .rt-pl-svg svg { display: block; width: auto; height: auto; max-width: none; fill: black; stroke: none; }
.rt-history { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-md); max-height: min(52vh, 420px); overflow-y: auto; }
.rt-history li { border-bottom: 1px solid var(--rule); }
.rt-history li:last-child { border-bottom: 0; }
.rt-history li > span { display: block; padding: 6px var(--space-3); color: var(--ink-faint); font-size: var(--text-2xs); }
.rt-history li.is-now > span { color: var(--accent-strong); font-weight: 600; }
.rt .rt-history button { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; min-height: 34px; padding: 6px var(--space-3); border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.rt-history button span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rt-history button .rt-hint { flex: none; }
.rt-history button:hover { background: var(--paper-inset); }
.rt-history button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rt-history li.is-undone button span:first-child { color: var(--ink-faint); text-decoration: line-through; }
.rt-doc-ico { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); }
.rt-doc-ico svg { width: 36px; height: 36px; }
.rt-pp-kids { margin-top: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--rule); }

/* the family group sheet */
.rt-fg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-3); }
.rt-fg-col h3 { margin-top: 0; }
.rt-fg-name { margin: 0 0 var(--space-2); font: 600 var(--text-md)/1.3 var(--font-display); }
.rt-fg-marr { margin-top: var(--space-3); border-top: 1px solid var(--rule); }
.rt-fg-kids td:first-child { width: 28px; }

/* the timeline */
.rt-tl { position: relative; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.rt-tl li { position: relative; display: grid; grid-template-columns: 64px 20px minmax(0, 1fr); align-items: start; padding: 0 0 var(--space-3); }
.rt-tl li::before { content: ""; position: absolute; left: 73px; top: 6px; bottom: -6px; width: 1px; background: var(--rule-strong); }
.rt-tl li:last-child::before { display: none; }
.rt-tl-y { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--space-2); }
.rt-tl-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 4px 0 0 5px; border-radius: 50%; background: var(--accent-strong); }
.rt-tl-fam .rt-tl-dot { background: var(--paper-raised); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.rt-tl-fam b { font-weight: 500; color: var(--ink-soft); }

/* the relationship */
.rt-line { margin: var(--space-2) 0 var(--space-4); }
.rt-line-top { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-soft); text-align: center; }
.rt-line-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.rt-line-one { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
.rt-line-cols ol { margin: 0; padding: 0; list-style: none; }
.rt-line-cols li { position: relative; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.rt-line-cols li::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-3) - 1px); height: var(--space-3); width: 1px; background: var(--rule-strong); }

/* places */
.rt-place { margin-left: calc(var(--depth, 0) * 18px); border-bottom: 1px solid var(--rule); }
.rt-place > summary { display: flex; align-items: baseline; gap: var(--space-2); min-height: 32px; padding: 6px 0; cursor: pointer; list-style-position: outside; }
.rt-place > summary .rt-hint { margin-left: auto; font-variant-numeric: tabular-nums; }
.rt-place-who { margin: 0 0 var(--space-2) var(--space-4); line-height: 1.6; }
.rt-place > summary .rt-mono { margin-left: auto; }
.rt-place > summary .rt-mono + .rt-hint { margin-left: var(--space-3); }
.rt-place > summary .rt-ib { width: 28px; height: 28px; margin: -4px 0; }
.rt-place > summary .rt-ib svg { width: 15px; height: 15px; }
.rt-count { display: inline-block; min-width: 18px; margin-left: var(--space-1); padding: 0 5px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: center; }
.rt-opts input[type="search"] { width: 220px; max-width: 100%; }
.rt-pvar { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rt-pvar legend { padding: 0 var(--space-1); color: var(--ink-faint); font-size: var(--text-2xs); }
.rt-pvar .rt-radios { margin: 0; }
.rt-pvar .rt-row { margin-top: var(--space-1); }

/* the map: the world drawn here, the places on it, and the list beside it */
.rt-map-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.rt-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper-inset); cursor: grab; touch-action: none; outline: none; }
.rt-map:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.rt-map.is-panning { cursor: grabbing; }
.rt-map.is-picking { cursor: crosshair; box-shadow: inset 0 0 0 2px var(--accent); }
.rt-map-load { margin: var(--space-5); color: var(--ink-faint); }
.rt .rt-map-svg { display: block; width: 100%; height: 100%; overflow: hidden; stroke: none; }
.rt-map-land { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-linejoin: round; }
.rt-map-dot { cursor: pointer; outline: none; }
.rt-map-dot circle { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--accent-strong); }
.rt-map-dot:hover circle, .rt-map-dot:focus-visible circle { fill: var(--accent); }
.rt-map-dot:focus-visible circle { stroke: var(--focus); }
.rt-map-dot.is-sel circle { fill: var(--accent-strong); stroke: var(--ink); }
.rt-map-side { min-height: 0; overflow-y: auto; padding: var(--space-3); border-left: 1px solid var(--rule); background: var(--paper-raised); scrollbar-width: thin; }
.rt-map-side .rt-dsub { margin: var(--space-3) 0 var(--space-1); }
.rt-map-side .rt-dsub:first-child { margin-top: 0; }
.rt-map-pick { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-soft); }
.rt-map-pick[hidden] { display: none; }
.rt-map-pick p { margin: 0; }
.rt-map-pick .btn { justify-self: start; }
.rt-map-card { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.rt-map-card h3 { margin: 0 0 var(--space-1); font: 600 var(--text-md)/1.3 var(--font-display); overflow-wrap: anywhere; }
.rt-map-card .rt-place-who { margin: var(--space-2) 0; }
.rt-map-list { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.rt .rt-map-place { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; min-height: 32px; padding: 5px var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.rt-map-place span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rt-map-place .rt-hint { flex: none; font-variant-numeric: tabular-nums; }
.rt-map-place:hover { background: var(--paper-inset); }
.rt-map-place:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* the print preview and the book */
.rt-print { flex: 1 1 auto; min-width: 0; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-8); background: var(--rt-paper); }
.rt-print-note { max-width: 860px; margin: 0 auto var(--space-3); }
.rt-paper { width: max-content; max-width: none; margin: 0 auto; padding: var(--space-5); background: white; color: black; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.rt-paper-title { display: grid; gap: 2px; margin-bottom: var(--space-4); color: black; }
.rt-paper-title b { font: 700 var(--text-lg)/1.2 var(--font-sans); }
.rt-paper-title span { font-size: var(--text-2xs); color: rgb(0 0 0 / 0.6); }
.rt-paper .rt-chart .rt-box-bg, .rt-paper .rt-chart .rt-wedge-bg { fill: white; stroke: rgb(0 0 0 / 0.55); }
.rt-paper .rt-chart .rt-t-name { fill: black; font-family: var(--font-sans); }
.rt-paper .rt-chart .rt-t-fact { fill: rgb(0 0 0 / 0.7); }
.rt-paper .rt-chart .rt-t-note { fill: rgb(0 0 0 / 0.55); }
.rt-paper .rt-chart .rt-ln { stroke: rgb(0 0 0 / 0.5); }
.rt-paper .rt-chart .rt-side-1 .rt-wedge-bg { fill: rgb(244 240 230); }
.rt-paper .rt-chart .rt-side-2 .rt-wedge-bg { fill: rgb(234 240 247); }
.rt-paper .rt-style-heritage .rt-box-bg, .rt-paper .rt-style-heritage .rt-wedge-bg { fill: rgb(252 247 235); stroke: rgb(115 92 64); }
.rt-paper .rt-style-heritage .rt-t-name { fill: rgb(56 38 20); }
.rt-paper .rt-style-heritage .rt-box-tick { fill: rgb(115 92 64); }
.rt-paper .rt-style-mono .rt-box-tick { fill: black; }
.rt-paper .rt-style-mono .rt-wedge-bg { fill: white; stroke: black; }
.rt-book { max-width: 760px; margin: 0 auto; padding: 56px 64px 72px; background: white; color: black; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); font-family: var(--font-display); }
.rt-book h1, .rt-book h2 { font-family: var(--font-display); }
.rt-book-break { margin: var(--space-6) -64px; border: 0; border-top: 6px solid var(--rt-paper); }
.rt-book a { color: inherit; }

/* sharing */
.rt-share { max-width: 980px; margin: 0 auto; }
.rt-share .rt-sheet h2 { font-size: var(--text-lg); }
.rt-preview summary { cursor: pointer; padding: var(--space-1) 0; color: var(--accent-strong); }
.rt-scm { margin-top: var(--space-4); }
.rt-dm-shared { gap: var(--space-2); }
.rt-dm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--space-3); max-height: 220px; overflow-y: auto; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rt-dm-list .rt-check[hidden] { display: none; }

/* DNA clusters: six colours from the theme, one to a cluster, the same
   in the matrix, the swatch and nowhere else */
.rt-cl-0 { --cl: var(--accent); }
.rt-cl-1 { --cl: var(--warn); }
.rt-cl-2 { --cl: var(--good); }
.rt-cl-3 { --cl: var(--danger); }
.rt-cl-4 { --cl: color-mix(in srgb, var(--accent) 50%, var(--good)); }
.rt-cl-5 { --cl: var(--ink-soft); }
.rt .rt-cl-matrix { width: auto; height: auto; stroke: none; fill: var(--ink-soft); font-family: var(--font-sans); }
.rt-cl-matrix text { fill: var(--ink-soft); }
.rt-cl-matrix [class^="rt-cl-"]:not(.rt-cl-box):not(.rt-cl-self):not(.rt-cl-x) { fill: var(--cl); }
.rt-cl-matrix .rt-cl-x { fill: var(--rule-strong); }
.rt-cl-matrix .rt-cl-self { fill: var(--paper-inset); }
.rt-cl-matrix .rt-cl-box { fill: none; stroke: var(--ink-faint); stroke-width: var(--icon-stroke); }
.rt-cl-h { display: flex; align-items: center; gap: var(--space-2); }
.rt-cluster .rt-cl-h { margin-top: 0; }
.rt-cl-sw { width: 10px; height: 10px; border-radius: var(--radius-sm); background: var(--cl); }
.rt-cl-line { margin: 0 0 var(--space-2); }
.rt-scm > summary { cursor: pointer; font-weight: 600; }

/* ------------------------------------------------------------ dialogs */

.rt-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgb(0 0 0 / 0.55); font: var(--text-xs)/1.45 var(--font-sans); }
.rt-dialog.is-wide { width: min(780px, calc(100vw - 32px)); }
.rt-dialog.is-huge { width: min(1100px, calc(100vw - 32px)); }
.rt-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.rt-dialog[open] { animation: os-menu-in var(--dur-3) var(--ease-standard); }
.rt-form { display: grid; gap: var(--space-3); padding: var(--space-5); }
.rt-form h2 { margin: 0; font: 600 var(--text-xl)/1.2 var(--font-display); overflow-wrap: anywhere; }
.rt-dbody { display: grid; gap: var(--space-3); min-width: 0; }
.rt-dbody p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.rt-dsub { margin: var(--space-2) 0 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.rt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.rt-keys { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.rt-keys dt { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink); white-space: nowrap; }
.rt-keys dd { margin: 0; color: var(--ink-soft); }
/* a source as it will be cited: the three forms under their names */
.rt-cite-prev { padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.rt-cite-prev .rt-dsub { margin: 0 0 var(--space-2); }
.rt-cite-prev dl { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.rt-cite-prev dt { color: var(--ink-faint); font-size: var(--text-2xs); padding-top: 1px; }
.rt-cite-prev dd, .rt-cite-prev p { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.rt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.rt-tabs button { min-height: 34px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-soft); cursor: pointer; }
.rt-tabs button[aria-selected="true"] { border-bottom-color: var(--accent-strong); color: var(--ink); font-weight: 600; }
.rt-name { margin: 0; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rt-name legend { padding: 0 var(--space-1); font-size: var(--text-2xs); font-weight: 600; color: var(--ink-faint); }
.rt-name .rt-row { margin-top: var(--space-2); gap: var(--space-4); }
.rt-evlist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rt-evlist li { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--paper-inset); }
.rt-picklist { max-height: min(46vh, 360px); margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.rt-picklist li[data-id] { display: flex; align-items: baseline; gap: var(--space-2); min-height: 34px; padding: 6px var(--space-3); border-bottom: 1px solid var(--rule); cursor: pointer; }
.rt-picklist li[data-id]:hover, .rt-picklist li[data-id]:focus { background: var(--paper-inset); outline: none; }
.rt-picklist li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.rt-picklist li span { margin-left: auto; color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-merge td, .rt-merge th { vertical-align: middle; }
.rt-merge .rt-check { align-items: flex-start; }
.rt-viewer { max-height: 62vh; overflow: auto; border-radius: var(--radius-md); background: var(--paper-inset); text-align: center; }
.rt-viewer-in { position: relative; display: inline-block; cursor: crosshair; touch-action: none; user-select: none; }
.rt-viewer-in img { display: block; max-width: 100%; max-height: 60vh; }
.rt-face { position: absolute; border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); pointer-events: none; }
.rt-face span { position: absolute; left: -1px; top: 100%; margin-top: 2px; padding: 1px 5px; border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.72); color: white; font-size: var(--text-2xs); white-space: nowrap; }
.rt-face-new { border-style: dashed; border-color: var(--accent); }

/* ------------------------------------------------------------ status */

.rt-status { display: flex; align-items: center; gap: var(--space-3); min-height: 30px; padding: 0 150px 0 var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; }
.rt-status > #rtSay { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rt-status [data-kind="warn"] { color: var(--warn); }
#rtCounts { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1180px) {
  .rt { --rt-index: 204px; --rt-side: 268px; }
}
@media (max-width: 1000px) {
  .rt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone: the menus scroll under the name, the list and the chosen
   person are sheets over the view, brought up by the bar's two buttons,
   and everything a finger presses is 44 pixels. */
@media (max-width: 760px) {
  .rt-top { padding: var(--space-1); }
  .rt-menubar { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .rt-menubar::-webkit-scrollbar { display: none; }
  .rt-drop { position: fixed; top: auto; left: var(--space-2); right: var(--space-2); min-width: 0; max-height: 60vh; overflow-y: auto; }
  .rt-docname, .rt-openin, #rtUndo, #rtRedo { display: none; }
  .rt-save span { display: none; }
  .rt .rt-sheet-btn, .rt .rt-panel-close { display: inline-flex; }
  .rt-work, .rt-main.is-wide .rt-work { grid-template-columns: minmax(0, 1fr); }
  .rt-index, .rt-side { position: absolute; z-index: 30; visibility: hidden; box-shadow: 0 12px 36px rgb(0 0 0 / 0.3); }
  .rt-index { top: 0; bottom: 0; left: 0; width: min(300px, 86vw); }
  .rt-side, .rt-main.is-wide .rt-side { left: 0; right: 0; bottom: 0; max-height: 72%; border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .rt-main.show-index .rt-index, .rt-main.show-side .rt-side { visibility: visible; }
  .rt-stage { grid-column: 1; }
  .rt-cards, .rt-grid2, .rt-grid3, .rt-cols2, .rt-fg-cols, .rt-line-cols, .rt-side-actions { grid-template-columns: minmax(0, 1fr); }
  .rt-start-in { padding: var(--space-4) var(--space-3) var(--space-7); }
  .rt-doc, .rt-print { padding: var(--space-3) var(--space-2) var(--space-7); }
  .rt-sheet { padding: var(--space-4) var(--space-3); }
  .rt-book { padding: var(--space-5) var(--space-4); }
  .rt-book-break { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  .rt-opts { gap: var(--space-2); }
  .rt-opts-life { display: none; }
  .rt-status { padding-right: var(--space-2); }
  .rt-status #rtCounts { display: none; }
  .rt-tl li { grid-template-columns: 52px 20px minmax(0, 1fr); }
  .rt-tl li::before { left: 61px; }
  .rt-facts th { width: 96px; }
  .rt-cite-prev dl { grid-template-columns: minmax(0, 1fr); }
  .rt-pl-list li { flex-wrap: wrap; }
  /* a search in the log on a phone: its date, who it was for, what was
     searched, where, and what was found, one under another */
  .rt-log-table thead { display: none; }
  .rt-log-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .rt-log-table td { padding: 1px 0; border: 0; }
  .rt-log-table td:first-child { color: var(--ink-faint); font-size: var(--text-2xs); }
  .rt-pl-act { flex-wrap: wrap; }
  .rt-map-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) auto; overflow-y: auto; }
  .rt-map { min-height: 260px; }
  .rt-map-side { border-left: 0; border-top: 1px solid var(--rule); overflow: visible; }
  .rt-opts input[type="search"] { flex: 1 1 140px; width: auto; }
  /* A fact on a phone: what it was and its pen on one line, then the date
     and the place, then its sources. */
  .rt-pp-facts thead { display: none; }
  .rt-pp-facts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .rt-pp-facts td { padding: 1px 0; border: 0; }
  .rt-pp-facts .c-fact { grid-column: 1; grid-row: 1; }
  .rt-pp-facts .c-edit { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .rt-pp-facts .c-date, .rt-pp-facts .c-place { grid-column: 1; }
  .rt-pp-facts .c-age { display: none; }
  .rt-pp-facts .c-src { grid-column: 1; color: var(--ink-faint); }
  /* The badge sits in the status bar, as Write's does, not above it over
     the start screen's cards. */
  body.rt-app #ppBadge { left: auto; right: var(--space-2); bottom: 2px; min-height: 44px; }
  .rt-status { min-height: 48px; padding-right: 64px; }
}
@media (pointer: coarse) {
  .rt { --rt-hit: 44px; }
  .rt-menu > summary { justify-content: center; }
  .rt-menu > summary, .rt-tools button, .rt-seg button, .rt .btn, .rt .rt-btn-sm, .rt-save, .rt-zoom .rt-ib, .rt-zoom-val, .rt-link, .rt-check, .rt-drop button, .rt-drop a, .rt-tabs button, .rt-plink, .rt-index-list li[data-id], .rt-picklist li[data-id], .rt-place > summary { min-height: 44px; min-width: 44px; }
  .rt-plink, .rt-link { display: inline-flex; align-items: center; }
  .rt input[type="text"], .rt input:not([type]), .rt input[type="search"], .rt input[type="number"], .rt select { min-height: 44px; }
  .rt-check input { width: 22px; height: 22px; }
  .rt-status { min-height: 48px; }
  .rt .rt-map-place, .rt-place > summary, .rt .rt-zoom-val { min-height: 44px; }
  .rt-place > summary .rt-ib { width: 44px; height: 44px; margin: -8px 0; }
}

/* ------------------------------------------------------------ tags, filters, roles, census

   A tag brings only a hue (--rt-th); it is drawn at a saturation and a
   lightness that read on the paper of each mode, as Write's labels are.
   Chromosome segments use the same, one hue to a match. */
.rt { --rt-ts: 52%; --rt-tl: 40%; }
:root[data-theme="dark"] .rt { --rt-ts: 58%; --rt-tl: 68%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rt { --rt-ts: 58%; --rt-tl: 68%; }
}
.rt-tagchip { display: inline-flex; align-items: center; gap: 5px; margin: 0 var(--space-1) 2px 0; padding: 0 6px 0 5px; border: 1px solid hsl(var(--rt-th, 214) var(--rt-ts) var(--rt-tl) / 0.45); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--text-2xs); line-height: 18px; white-space: nowrap; vertical-align: 1px; }
.rt-tagchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--rt-th, 214) var(--rt-ts) var(--rt-tl)); flex: none; }
.rt-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-1); margin: var(--space-1) 0 var(--space-3); }
.rt-taglist { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); padding: 0; border: 0; }
.rt-taglist .rt-tagchip { margin: 0; }
.rt-tagnew { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: end; }
.rt-tagman input { width: 100%; }
.rt-tagman tr.is-gone td:not(:last-child) { opacity: 0.45; text-decoration: line-through; }
.rt-chart .rt-box-tag { fill: hsl(var(--rt-th, 214) var(--rt-ts) var(--rt-tl)); stroke: var(--paper-raised); stroke-width: var(--icon-stroke); }

.rt-rules { display: grid; gap: var(--space-2); margin: var(--space-2) 0; padding: 0; list-style: none; }
.rt-rule { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--paper-inset); }
.rt-rule-arg { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.rt-rule-arg input:not(.rt-year) { flex: 1 1 160px; min-width: 0; }
.rt-fmatch { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

.rt-roles select { max-width: 46%; }
.rt-roles .rt-grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.rt-pp-at { margin-top: var(--space-1); }
.rt-paths { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; counter-reset: rt-path; }
.rt-paths > li { counter-increment: rt-path; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); }
.rt-paths summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); min-height: 36px; padding: var(--space-2) var(--space-3); cursor: pointer; }
.rt-paths summary::before { content: counter(rt-path); min-width: 2ch; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-paths details[open] > summary { border-bottom: 1px solid var(--rule); }
.rt-paths .rt-line { margin: var(--space-3); }

/* the census household: a row for each person as the page lists them */
.rt-cen-rows { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); padding: 0; list-style: none; counter-reset: rt-cen; }
.rt-cen-row { counter-increment: rt-cen; position: relative; display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1fr) 64px 104px minmax(100px, 1fr) minmax(110px, 1.1fr) var(--rt-hit); gap: var(--space-2); align-items: end; padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 3ch); border-radius: var(--radius-sm); background: var(--paper-inset); }
.rt-cen-row::before { content: counter(rt-cen); position: absolute; left: var(--space-2); top: calc(var(--space-2) + 1.5em); color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.rt-cen-row .rt-field { margin: 0; min-width: 0; }
.rt-cen-row .rt-field input, .rt-cen-row .rt-field select { width: 100%; min-width: 0; }
.rt-cen-age input { font-variant-numeric: tabular-nums; }
.rt-cen-found { color: var(--good); font-style: normal; font-weight: 600; }
.rt-cen-row:first-child .rt-cen-who { grid-column: 1; }

/* chromosomes, triangulation and the odds */
.rt-chr-head { align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.rt-chr-head h2 { margin: 0; }
.rt-sheet .rt-w-name { margin: 0; padding: 0; border: 0; font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.rt-chr-wrap { margin: var(--space-3) 0; overflow-x: auto; }
.rt .rt-chr { display: block; width: 100%; min-width: 600px; height: auto; stroke: none; font-family: var(--font-mono); }
.rt-chr .rt-chr-l { fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rt-chr .rt-chr-bar { fill: var(--paper-inset); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.rt-chr .rt-chr-seg { fill: hsl(var(--rt-th, 214) var(--rt-ts) var(--rt-tl)); }
.rt-chr-key { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; }
.rt-chr-key li { display: inline-flex; align-items: center; gap: var(--space-1); }
.rt-chr-sw { width: 10px; height: 10px; border-radius: var(--radius-sm); background: hsl(var(--rt-th, 214) var(--rt-ts) var(--rt-tl)); }
.rt-tri-sum { gap: var(--space-2); flex-wrap: wrap; }
.rt-tri td:nth-child(5) { min-width: 180px; }
.rt-w-list li { min-height: 40px; }
.rt-w-list .rt-grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-w-cm { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.rt-odds th, .rt-odds td { vertical-align: top; }
.rt-odds tr.is-best td { background: var(--accent-soft); }
.rt-odds td.rt-num { white-space: nowrap; }
.rt-cite .rt-hint + .rt-hint { margin-top: var(--space-1); }

@media (max-width: 1100px) {
  .rt-cen-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-right: calc(var(--rt-hit) + var(--space-3)); }
  .rt-cen-row .rt-cen-who { grid-column: 1 / span 2; }
  .rt .rt-cen-del { position: absolute; top: var(--space-1); right: var(--space-1); }
}
@media (max-width: 760px) {
  .rt-rule { grid-template-columns: minmax(0, 1fr) auto; }
  .rt-rule-arg { grid-column: 1 / -1; grid-row: 2; }
  .rt-tagnew { grid-template-columns: minmax(0, 1fr) auto; }
  .rt-tagnew .rt-field:first-child { grid-column: 1 / -1; }
  .rt-cen-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-roles li { flex-wrap: wrap; }
  .rt-roles select { max-width: none; flex: 1 1 140px; }
}
@media (pointer: coarse) {
  .rt-paths summary { min-height: 44px; }
  .rt-tagchip { line-height: 22px; }
}