/* GEDCOM Viewer. Copyright (C) 2026 bunahu. Free software under the GNU General Public License, version 3 or later: see LICENSE. */
/* GEDCOM Viewer — the look.
 *
 * Every colour, size and width is a custom property in the first three blocks below; the rules
 * after them only use them. README.md lists the properties and what each one moves.
 */

/* The sibling project's three palettes, as it has them (sibling/frontend/src/index.css at v3.254.9). Light is the
   default; Theme steps light → sunset → dark by setting a class on <html>. */
:root {
  --color-bg: #ede5d2;
  --color-bg-card: #f6efe1;
  --color-bg-sidebar: #e3d8c3;
  --color-text: #2d2d2d;
  --color-text-muted: #6e6256;
  --color-nonbio: #2563eb;
  --color-info: #2563eb;
  --color-border: #d3c8b3;
  --color-accent: #c4a45a;
  --color-accent-hover: #8b7355;
  --color-success: #5cb85c;
  --color-warning: #d4a24e;
  --color-danger: #c0392b;
  --color-entity-repository: #6d4aa0;
  --color-entity-collection: #4558a3;
  --color-entity-source: #1f6d39;
  --color-entity-source-claim: #689f38;
  --color-entity-assertion: #d4ae22;
  --color-entity-workshop: #c2410c;
  --color-affiliation: #2a7d8c;
  --color-ancestor: #a67c00;
  --color-assertion-mark: #9c3a9e;
}

.dark {
  --color-bg: #1a1814;
  --color-bg-card: #221f1c;
  --color-bg-sidebar: #28251f;
  --color-text: #e8e6df;
  --color-text-muted: #8a857a;
  --color-nonbio: #7da9f0;
  --color-info: #7da9f0;
  --color-border: #36322a;
  --color-accent: #c4a45a;
  --color-accent-hover: #8b7355;
  --color-success: #5cb85c;
  --color-warning: #d4a24e;
  --color-danger: #c0392b;
  --color-entity-repository: #8c6bc4;
  --color-entity-collection: #6b7ec9;
  --color-entity-source: #4ea05a;
  --color-entity-source-claim: #91c84e;
  --color-entity-assertion: #ecc83c;
  --color-entity-workshop: #e07a3d;
  --color-affiliation: #3a9bad;
  --color-ancestor: #e3ba4d;
  --color-assertion-mark: #d488e0;
  color-scheme: dark;
}

.sunset {
  --color-bg: #3e3933;
  --color-bg-card: #4a4339;
  --color-bg-sidebar: #56503f;
  --color-text: #ede4d3;
  --color-text-muted: #b8aa92;
  --color-nonbio: #8fb8f5;
  --color-info: #8fb8f5;
  --color-border: #5a4f43;
  --color-accent: #c4a45a;
  --color-accent-hover: #8b7355;
  --color-success: #5cb85c;
  --color-warning: #d4a24e;
  --color-danger: #c0392b;
  --color-entity-repository: #8c6bc4;
  --color-entity-collection: #6b7ec9;
  --color-entity-source: #4ea05a;
  --color-entity-source-claim: #91c84e;
  --color-entity-assertion: #ecc83c;
  --color-entity-workshop: #e07a3d;
  --color-affiliation: #3a9bad;
  --color-ancestor: #e3ba4d;
  --color-assertion-mark: #d488e0;
  color-scheme: dark;
}

/* GEDCOM Viewer's own properties. Colours here are drawn from the palette above, so each theme carries
   them; change one here and it changes in all three. */
:root {
  /* type */
  --font-title: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-size-title: 20px;
  --title-color: var(--color-accent-hover);         /* GEDCOM, in the title */
  --font-size-file: 15px;                           /* the open file's name */
  --file-bg: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --file-border: var(--color-accent);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-grid: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-body: 14px;
  --font-size-small: 12.5px;
  --font-size-grid: 13px;
  --tag-weight: 650;

  /* the grid */
  --row-height: 22px;                 /* every row, one height; the page reads it at load */
  --tab-size: 4;                      /* how wide a tab inside a value shows */
  --row-tint: transparent;            /* a row's tint; each state below sets it (selected, found, changed…) */
  --row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --row-hit: color-mix(in srgb, var(--color-info) 12%, transparent);
  --row-hover: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --line-number-color: var(--color-text-muted);
  --level-color: var(--color-text-muted);
  --id-color: var(--color-accent-hover);
  --tag-color: var(--color-text);
  --value-color: var(--color-text);
  --pointer-color: var(--color-info);
  --raw-color: var(--color-danger);   /* a line that did not parse, shown as written */
  --match-bg: color-mix(in srgb, var(--color-warning) 55%, transparent);
  --special-bg: color-mix(in srgb, var(--color-warning) 30%, transparent);
  --mark-error: var(--color-danger);
  --mark-note: var(--color-warning);
  --mark-size: 7px;
  --fold-color: var(--color-text-muted);   /* the ▸ ▾ that shut and open a block */
  --section-bg: color-mix(in srgb, var(--color-text) 7%, transparent);   /* a section's row, between record types */
  --fold-size: 1.25em;
  --hidden-bg: var(--hover-bg);            /* the count of lines a shut block hides */

  /* editing: what is not yet saved */
  --mark-changed: var(--color-entity-collection);   /* a changed line: the bar at its left, its tint */
  --mark-added: var(--color-success);               /* an added line */
  --mark-removed: var(--color-danger);              /* the rule where lines were removed */
  --mark-bar: 3px;
  --row-changed: color-mix(in srgb, var(--mark-changed) 14%, transparent);
  --row-added: color-mix(in srgb, var(--mark-added) 14%, transparent);
  --row-removed: color-mix(in srgb, var(--mark-removed) 10%, transparent);   /* a removed line, with Edit on */
  --mark-moved: var(--color-affiliation);           /* a moved line (3.4a): the bar at its left, its tint; the rule where it was taken from */
  --row-moved: color-mix(in srgb, var(--mark-moved) 12%, transparent);
  --drop-line: var(--color-accent);                 /* the gold line where a dragged block would land */
  --drop-line-width: 2px;
  --drag-dim: 0.35;                                 /* how faint what would move is drawn while it is dragged */
  --edit-bg: var(--color-bg);                       /* the box a line is typed in */
  --more-color: var(--color-text-muted);            /* "… 81,797 more" at the end of a clipped row */

  /* the frame */
  --left-width: 290px;                /* the side panel; dragged wider or narrower, remembered */
  --right-width: 360px;               /* the right pane; the same */
  --split-width: 5px;
  --split-color: var(--color-border);
  --icon-button: 28px;                /* the square buttons that carry an icon: the side frames, the tags' order */
  --strip-height: 38px;               /* the strip above the lines: Top, Back, Collapse all */
  --aside-shade: color-mix(in srgb, var(--color-text) 28%, transparent);   /* the shade at the number column's edge while the lines are scrolled sideways */
  --frame-ease: 200ms;                /* how long a side frame takes to hide or show */
  --menu-width: 19em;                 /* the Settings menu */
  --copy-color: var(--color-text-muted);   /* the copy button at a box's top right */
  --copy-done: var(--color-success);       /* …once it has copied */
  --surname-weight: 700;              /* Bold surnames */
  --help-max-width: 40em;             /* what a check means, in the right frame */
  --prose-max-width: 38em;            /* the privacy page's column of text */
  --report-height: 14em;              /* the Report a problem box */
  --meta-max-height: 60vh;            /* the story of a _META, before it scrolls */
  --table-border: var(--color-border);   /* the tables in a story, and the persons of a _META */
  --list-row-height: 26px;            /* the rows of Records, Checks and Tags */
  --bar-padding: 8px 14px;
  --gap: 10px;
  --radius: 0.5rem;                   /* inputs, buttons and cards, as the sibling project's */
  --input-padding: 0.3rem 0.6rem;
  --focus-ring: 2px solid var(--color-accent);
  --pressed-bg: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --hover-bg: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --drop-bg: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --dialog-width: 46rem;
  --shadow: 0 12px 36px color-mix(in srgb, var(--color-text) 24%, transparent);
  --backdrop: color-mix(in srgb, var(--color-text) 22%, transparent);
}

/* ---------------------------------------------------------------------------------------------- */

html, body { height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-size-body)/1.4 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
input[type="checkbox"] { accent-color: var(--color-accent); }

.button {
  padding: var(--input-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover:not(:disabled) { background: var(--hover-bg); }
.button[aria-pressed="true"] { background: var(--pressed-bg); border-color: var(--color-accent); }
.button:disabled { opacity: 0.4; cursor: default; }
.button:focus-visible { outline: var(--focus-ring); outline-offset: -1px; }

/* the sibling project's .sibling-input: half-rem radius, a one-pixel border, the gold ring when in use */
.input {
  min-width: 0;
  padding: var(--input-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { outline: var(--focus-ring); outline-offset: -1px; }

/* a square button carrying an icon */
.icon-button {
  flex: none;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-button:hover { background: var(--hover-bg); color: var(--color-text); }
.icon-button[aria-pressed="true"] { background: var(--pressed-bg); border-color: var(--color-accent); color: var(--color-text); }
.icon-button:focus-visible { outline: var(--focus-ring); outline-offset: -1px; }

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

.bar {
  flex: none;
  padding: var(--bar-padding);
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}
.bar-top { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.app-name { white-space: nowrap; }
.app-title { font-family: var(--font-title); font-size: var(--font-size-title); letter-spacing: 0.01em; }
.app-title-gedcom { color: var(--title-color); font-weight: 700; letter-spacing: 0.06em; }
.version { font-size: var(--font-size-small); color: var(--color-text-muted); }
/* the open file's name: a chip; a click shows its facts under it */
.file-name {
  min-width: 0;
  max-width: 42vw;
  padding: 3px 12px;
  border: 1px solid var(--file-border);
  border-radius: 999px;
  background: var(--file-bg);
  font-size: var(--font-size-file);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.file-name::after { content: ' ▸'; color: var(--color-text-muted); font-weight: 400; }
.file-name[aria-expanded="true"]::after { content: ' ▾'; }
.file-name:hover { background: var(--pressed-bg); }
.file-name:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.file-name[hidden] { display: none; }
.dirty { margin-left: calc(-0.6 * var(--gap)); color: var(--mark-changed); }
.dirty[hidden] { display: none; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gap { width: var(--gap); }
.goto-box { display: inline-flex; align-items: center; gap: 4px; }
.goto { width: 9.5em; }
.goto-go, .goto-clear { padding: 0.3rem 0.55rem; }
.indent-width { width: 3.6em; }
/* Settings: a menu under its button, closed by a click elsewhere or Esc */
.menu {
  position: fixed;
  margin: 0;
  min-width: var(--menu-width);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  color: var(--color-text);
  box-shadow: var(--shadow);
  flex-direction: column;
  gap: 8px;
}
.menu:popover-open { display: flex; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-name { color: var(--color-text-muted); }
.menu-choices { display: inline-flex; align-items: center; gap: 4px; }
.facts {
  margin-top: 3px;
  min-height: 1.4em;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.facts .fact.is-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.facts .fact.is-link:hover { color: var(--pointer-color); }
.facts .open-another { margin-left: 2em; color: var(--pointer-color); text-decoration: none; }
.facts .sha {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pointer-color);
  cursor: pointer;
  font-size: inherit;
}
.facts .hash { font-family: var(--font-grid); user-select: all; }

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

.counts {
  flex: none;
  display: flex;
  gap: 4px;
  min-height: 2.1em;
  padding: 4px 10px;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.count-item {
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.count-item:hover { background: var(--hover-bg); }
.count-name { color: var(--color-text-muted); margin-right: 0.4em; }
.count-figure { font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- the three columns ------------------------------------------------------------------------- */

.work {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--left-width) var(--split-width) minmax(0, 1fr) var(--split-width) var(--right-width);
}
.work { transition: grid-template-columns var(--frame-ease) ease; }
.work.left-hidden { grid-template-columns: 0 var(--split-width) minmax(0, 1fr) var(--split-width) var(--right-width); }
.work.right-hidden { grid-template-columns: var(--left-width) var(--split-width) minmax(0, 1fr) var(--split-width) 0; }
.work.left-hidden.right-hidden { grid-template-columns: 0 var(--split-width) minmax(0, 1fr) var(--split-width) 0; }
/* a hidden frame narrows to nothing over the ease, and only then is out of reach */
.side, .detail { min-width: 0; overflow: hidden; }
.work.left-hidden .side, .work.right-hidden .detail { visibility: hidden; transition: visibility 0s var(--frame-ease); }
.split { background: var(--split-color); cursor: col-resize; }
.work.left-hidden #split-left, .work.right-hidden #split-right { cursor: default; }

.side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-sidebar);
}
.tabs { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 8px; }
.tab {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  cursor: pointer;
}
.tab:hover { background: var(--hover-bg); }
.tab[aria-selected="true"] { background: var(--pressed-bg); font-weight: 600; }
.tab-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.n-error { color: var(--mark-error); }
.n-note { color: var(--mark-note); margin-left: 0.6em; }

.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.panel[hidden] { display: none; }
.panel-head { flex: none; display: flex; gap: 6px; align-items: center; }
.panel-head-end { justify-content: flex-end; }
.panel-head .input { flex: 1; }
.panel-sum { flex: none; padding: 0 4px; color: var(--color-text-muted); font-size: var(--font-size-small); }
.search-nav { flex: none; display: flex; gap: 6px; align-items: center; }
.search-count { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.chip {
  padding: 2px 8px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--pressed-bg);
  cursor: pointer;
  white-space: nowrap;
}

/* a list of rows: Records, Checks, Tags */
.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  --row-height: var(--list-row-height);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.item {
  height: var(--list-row-height);
  line-height: var(--list-row-height);
  display: flex;
  gap: 8px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--font-size-small);
}
.item:hover { background: var(--row-hover); }
.item .muted { color: var(--color-text-muted); flex: none; }
.item .main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.item .end { flex: none; margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.item.is-head { font-weight: 600; }
.item.is-head.is-error .muted:first-child { color: var(--mark-error); }
.item.is-head.is-note .muted:first-child { color: var(--mark-note); }
.item.is-sub { padding-left: 22px; }
.item .mono { font-family: var(--font-grid); }
.item.is-changed { box-shadow: inset var(--mark-bar) 0 0 var(--mark-changed); }
.item.is-added { box-shadow: inset var(--mark-bar) 0 0 var(--mark-added); }
.item.is-removed { box-shadow: inset var(--mark-bar) 0 0 var(--mark-removed); }
.item.is-removed .main { text-decoration: line-through; color: var(--color-text-muted); }
.item.is-moved { box-shadow: inset var(--mark-bar) 0 0 var(--mark-moved); }
.item.is-head .fold { flex: none; width: 1.4em; margin-left: -4px; }

/* -- the grid ---------------------------------------------------------------------------------- */

.middle { position: relative; min-width: 0; min-height: 0; }
.grid {
  position: absolute;
  inset: 0;
  overflow: auto;                     /* down, and sideways to the end of the longest line (3.1) */
  overscroll-behavior: none;          /* a sideways swipe at the edge never takes the browser back a page */
  overflow-anchor: none;
  outline: none;
  background: var(--color-bg-card);
  font-family: var(--font-grid);
  font-size: var(--font-size-grid);
}
/* only the rows in view exist; they sit in a layer that stays at the top of the view while the
   page scrolls under it, so a fast drag of the scrollbar shows rows, never an empty screen. The
   layer and the spacer are as wide as the longest line (the page sets it), so the grid scrolls
   sideways; a row's line number, mark and fold stay at the left edge (.fx) */
.v-rows { position: sticky; top: 0; overflow: clip; }   /* clip, not hidden: hidden would make the layer a scroll container, and .fx would stick to it instead of the grid */
.v-inner { will-change: transform; }
.v-spacer { pointer-events: none; }
.grid.is-drag { user-select: none; cursor: grabbing; }
.grid.is-drag .row { cursor: grabbing; }

.row {
  position: relative;
  height: var(--row-height);
  line-height: var(--row-height);
  display: flex;
  white-space: pre;
  overflow: clip;
  cursor: default;
  background: var(--row-tint, transparent);
}
.row:hover { --row-tint: var(--row-hover); }
.row.is-hit { --row-tint: var(--row-hit); }
.row.is-changed { --row-tint: var(--row-changed); }
.row.is-added { --row-tint: var(--row-added); }
.row.is-moved { --row-tint: var(--row-moved); }
.row.is-changed .fx { box-shadow: inset var(--mark-bar) 0 0 var(--mark-changed); }
.row.is-added .fx { box-shadow: inset var(--mark-bar) 0 0 var(--mark-added); }
.row.is-moved .fx { box-shadow: inset var(--mark-bar) 0 0 var(--mark-moved); }
.row.is-section { --row-tint: var(--section-bg); color: var(--color-text-muted); cursor: pointer; }
.row.is-section .sec-count { color: var(--color-text); font-weight: 600; }
.row.is-removed { --row-tint: var(--row-removed); color: var(--mark-removed); }
.row.is-removed .ln, .row.is-removed .tx { text-decoration: line-through; }
.row.is-sel { --row-tint: var(--row-selected); }
.row.is-dragging { opacity: var(--drag-dim); }
/* where lines were removed: a rule along the top of the line now below them (or along the bottom
   of the last line, when they were at the end); the same, in the moved colour, where a move took
   lines from (Edit on) */
.row.is-removed-above::before,
.row.is-removed-below::after,
.row.is-moved-above::before,
.row.is-moved-below::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: var(--mark-removed);
}
.row.is-moved-above::before, .row.is-moved-below::after { background: var(--mark-moved); }
.row.is-removed-above::before, .row.is-moved-above::before { top: 0; }
.row.is-removed-below::after, .row.is-moved-below::after { bottom: 0; }
/* the part of a row that stays at the left edge while the grid scrolls sideways: the line number,
   the mark and the fold. It is opaque — the row's tint over the frame's own colour — so the text
   scrolls under it */
.fx {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  display: flex;
  background: linear-gradient(var(--row-tint, transparent), var(--row-tint, transparent)), var(--color-bg-card);
}
.row.is-dragging .fx { background: var(--color-bg-card); }
.ln {
  flex: none;
  width: var(--ln-width, 8ch);
  padding-right: 1ch;
  text-align: right;
  color: var(--line-number-color);
  user-select: none;
}
.mk { flex: none; width: 2ch; display: flex; align-items: center; justify-content: center; }
/* the change dot: a changed, added or moved row, in its colour, beside the finding's dot */
.cg { flex: none; width: 2ch; display: flex; align-items: center; justify-content: center; }
.cg::before { content: ''; width: var(--mark-size); height: var(--mark-size); border-radius: 50%; }
.cg.is-changed::before { background: var(--mark-changed); }
.cg.is-added::before { background: var(--mark-added); }
.cg.is-moved::before { background: var(--mark-moved); }
/* the gold line where a dragged block would land */
.drop-line {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--drop-line-width);
  margin-top: calc(-0.5 * var(--drop-line-width));
  background: var(--drop-line);
  z-index: 3;
  pointer-events: none;
}
.drop-line[hidden] { display: none; }
.mk::before { content: ''; width: var(--mark-size); height: var(--mark-size); border-radius: 50%; }
.mk.is-error::before { background: var(--mark-error); }
.mk.is-note::before { background: var(--mark-note); }
/* the indent, then the ▸ ▾ of a line with lines under it */
.fd { flex: none; }
.fold {
  display: inline-block;
  width: 2ch;
  text-align: center;
  color: var(--fold-color);
  font-size: var(--fold-size);
  line-height: 1;
  user-select: none;
}
.fold:not(:empty) { cursor: pointer; }
.fold:not(:empty):hover { color: var(--color-text); }
.tx { flex: none; tab-size: var(--tab-size); }
.more { flex: none; margin-left: 1ch; color: var(--more-color); user-select: none; }
.hc {
  flex: none;
  user-select: none;
  margin: 3px 0 3px 1ch;
  padding: 0 0.7ch;
  line-height: calc(var(--row-height) - 6px);
  border-radius: var(--radius);
  background: var(--hidden-bg);
  color: var(--color-text-muted);
  font-size: 0.85em;
}
.hc.is-changed { color: var(--mark-changed); box-shadow: inset 0 0 0 1px var(--mark-changed); }
/* a line being typed: its box fills the row */
.edit {
  flex: 1;
  min-width: 0;
  height: var(--row-height);
  padding: 0 0.5ch;
  border: 0;
  border-radius: 3px;
  background: var(--edit-bg);
  color: var(--color-text);
  font: inherit;
  tab-size: var(--tab-size);
}
.edit:focus { outline: var(--focus-ring); outline-offset: -2px; }
.grid.is-editing { overflow-y: hidden; }

/* the strip above the lines: Top, Back (while there is somewhere to go back to), Collapse all */
.middle .grid { top: var(--strip-height); }
.strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--strip-height);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-card);
  z-index: 4;
}
.strip .button { padding: 0.2rem 0.55rem; }
.strip-gap { flex: 1; }
.back[hidden], .strip .button[hidden] { display: none; }
/* scrolled sideways, the number column casts a shade on the lines going under it */
.grid.is-aside .fx::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7px;
  transform: translateX(100%);
  background: linear-gradient(to right, var(--aside-shade), transparent);
  pointer-events: none;
}

.lv { color: var(--level-color); }
.id { color: var(--id-color); }
.tg { color: var(--tag-color); font-weight: var(--tag-weight); }
.val { color: var(--value-color); }
.ptr { color: var(--pointer-color); cursor: pointer; }
.ptr:hover { text-decoration: underline; }
.raw { color: var(--raw-color); }
mark { background: var(--match-bg); color: inherit; border-radius: 2px; }
.ch {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--special-bg);
  font-size: 0.85em;
}

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg-card);
}
.empty[hidden] { display: none; }
.empty .button { font-size: 1.1em; padding: 0.5rem 1.4rem; }
.message { max-width: 34em; text-align: center; color: var(--color-danger); }
/* under the button: nothing is uploaded, and where that is said in full */
.empty-note { max-width: 34em; margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.5; }
.empty-note a { color: var(--color-accent-hover); }

/* what an act or a save has to say: at the foot of the grid, until clicked or replaced */
.notice {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.notice[hidden] { display: none; }
.notice.is-ok { border-color: var(--mark-added); }
.notice.is-error { border-color: var(--color-danger); color: var(--color-danger); }

/* -- the right pane ---------------------------------------------------------------------------- */

.detail {
  min-width: 0;
  overflow: auto;
  padding: 12px 14px;
  background: var(--color-bg-card);
  font-size: var(--font-size-small);
}
.detail-head { font-family: var(--font-grid); font-size: var(--font-size-grid); }
.detail-value {
  margin-top: 6px;
  font-family: var(--font-grid);
  font-size: var(--font-size-grid);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: var(--tab-size);
}
/* a box of text with a copy button at its top right (3.2): two overlapping squares, a check mark
   for a moment once it has copied */
.has-copy { position: relative; padding-right: 26px; }
.copy {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--copy-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy:hover { background: var(--hover-bg); color: var(--color-text); }
.copy:focus-visible { outline: var(--focus-ring); }
.copy.is-done { color: var(--copy-done); }
.surname { font-weight: var(--surname-weight); }
/* what a check means (3.6) */
.help { max-width: var(--help-max-width); }
.help-code { font-weight: 700; margin-right: 0.5em; }
.help.is-error .help-code { color: var(--mark-error); }
.help.is-note .help-code { color: var(--mark-note); }
.help-name { font-weight: 600; font-size: var(--font-size-body); }
.help-text { margin-top: 8px; line-height: 1.5; }
/* a _META drawn as it reads (3.3): the story in web formatting, the transcription as text, the
   persons as a table, the cemetery and the record id each one line */
.meta-story {
  max-height: var(--meta-max-height);
  overflow: auto;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: 1.5;
  white-space: normal;
}
.meta-story p, .meta-story div, .meta-story blockquote, .meta-story address, .meta-story ul, .meta-story ol, .meta-story dl { margin: 0 0 0.6em; }
.meta-story blockquote { padding-left: 1em; border-left: 3px solid var(--color-border); }
.meta-story pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-grid); }
.meta-story h1, .meta-story h2, .meta-story h3, .meta-story h4, .meta-story h5, .meta-story h6 { margin: 0.4em 0; font-size: 1.1em; }
.meta-story hr { border: 0; border-top: 1px solid var(--color-border); margin: 0.6em 0; }
.meta-story table { border-collapse: collapse; margin: 0 0 0.6em; }
.meta-story td, .meta-story th { border: 1px solid var(--table-border); padding: 2px 6px; vertical-align: top; }
.meta-story ul, .meta-story ol { padding-left: 1.4em; }
.meta-story dd { margin-left: 1.2em; }
.meta-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.persons { border-collapse: collapse; width: 100%; font-size: var(--font-size-small); }
.persons th, .persons td { border: 1px solid var(--table-border); padding: 2px 6px; text-align: left; vertical-align: top; }
.persons th { color: var(--color-text-muted); font-weight: 600; }
.detail-section { margin-top: 14px; }
.detail-title { color: var(--color-text-muted); margin-bottom: 4px; }
.detail-title.mono { font-family: var(--font-grid); }
.detail-card {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.detail-link { cursor: pointer; }
.detail-link:hover .id, .detail-link:hover .main { text-decoration: underline; }
.detail-list { display: flex; flex-direction: column; gap: 2px; }
.detail-row { display: flex; gap: 8px; cursor: pointer; }
.detail-row:hover { background: var(--row-hover); }
.detail-row .ln-small { flex: none; color: var(--line-number-color); font-variant-numeric: tabular-nums; }
.detail-row .main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finding { display: flex; gap: 8px; }
.finding .code { flex: none; font-weight: 600; }
.finding.is-error .code { color: var(--mark-error); }
.finding.is-note .code { color: var(--mark-note); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.detail-actions .button { padding: 0.15rem 0.55rem; }
.detail-was { box-shadow: inset var(--mark-bar) 0 0 var(--mark-changed); padding-left: 10px; }
.detail-moved { color: var(--mark-moved); font-weight: 600; }
.detail-removed-title { color: var(--mark-removed); font-weight: 600; }
.detail-removed { color: var(--mark-removed); text-decoration: line-through; }
.detail-added { color: var(--mark-added); font-weight: 600; }

/* -- dialogs: Save, Save a copy, deleting, a file changed on disk ------------------------------ */

.dialog {
  width: min(var(--dialog-width), calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  color: var(--color-text);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: var(--backdrop); }
.dialog-form { display: flex; flex-direction: column; max-height: calc(100vh - 66px); }
.dialog-title { margin: 0; padding: 14px 18px 8px; font-size: 1.05em; overflow-wrap: anywhere; }
.dialog-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 0 18px; overflow: auto; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 14px; }
.button.is-primary { background: var(--pressed-bg); border-color: var(--color-accent); font-weight: 600; }
.dialog-sum { color: var(--color-text-muted); }
.dialog-list {
  max-height: 42vh;
  overflow: auto;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--font-size-small);
}
.chg { display: flex; gap: 8px; margin-top: 6px; }
.chg:first-child { margin-top: 0; }
.chg-kind { font-weight: 600; }
.chg.is-changed .chg-kind { color: var(--mark-changed); }
.chg.is-added .chg-kind { color: var(--mark-added); }
.chg.is-removed .chg-kind { color: var(--mark-removed); }
.chg.is-moved .chg-kind { color: var(--mark-moved); }
.chg .muted, .dialog-check .muted { color: var(--color-text-muted); }
.chg-line {
  padding-left: 1.4em;
  font-family: var(--font-grid);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: var(--tab-size);
}
.chg-sign { display: inline-block; width: 1.4em; margin-left: -1.4em; font-weight: 700; }
.chg-line.is-was .chg-sign { color: var(--mark-removed); }
.chg-line.is-now .chg-sign { color: var(--mark-added); }
.dialog-check { display: flex; align-items: baseline; gap: 8px; }
.dialog-check .mono { font-family: var(--font-grid); overflow-wrap: anywhere; }
.dialog-stamps { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; font-size: var(--font-size-small); }
.dialog-stamps[hidden] { display: none; }
.dialog-note { display: flex; align-items: center; gap: 8px; }
/* P8 — Report a problem: the report in a box of its own, to read, change or cut; What happened under it */
.report {
  width: 100%;
  min-height: var(--report-height);
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-size-small)/1.45 var(--font-grid);
  resize: vertical;
  box-sizing: border-box;
}
.report.is-words { min-height: 5em; font-family: var(--font-body); }
.report:focus { outline: var(--focus-ring); outline-offset: -1px; }
.dialog-note .input { flex: 1; }

/* -- dropping a file on the page --------------------------------------------------------------- */

.drop {
  position: fixed;
  inset: 0;
  background: var(--drop-bg);
  border: 3px dashed var(--color-accent);
  pointer-events: none;
}
.drop[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------- */
/* privacy.html: a page of text in the same look, and no script */
.prose-page { display: block; overflow: auto; }
.prose { max-width: var(--prose-max-width); margin: 0 auto; padding: 2rem 1.25rem 4rem; line-height: 1.55; }
.prose h1 { font: 700 1.6em var(--font-title); color: var(--title-color); margin: 0 0 0.25em; }
.prose h2 { font-size: 1.1em; margin: 1.6em 0 0.4em; }
.prose p, .prose li { margin: 0 0 0.8em; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--color-accent-hover); }
.prose-date { color: var(--color-text-muted); font-size: var(--font-size-small); }
.prose-back { margin-top: 2.5em; }