:root{
  --paper:#EDE9E0; --surface:#F7F4ED; --surface2:#E4DFD4;
  --ink:#201E26; --muted:#615E6C; --faint:#8C889A;
  --line:#CFC8BA; --line-soft:#DED8CB;
  --violet:#4E3A72; --violet-soft:#EDE6F5;
  --ochre:#8F6A1C; --ochre-soft:#F2E7CE;
  --sienna:#8A4636; --sienna-soft:#F4E2DC;
  --teal:#2F6259; --teal-soft:#DCE8E4; --bark:#8A7350;
  --rose:#A8325F; --rose-soft:#FADDE7;
  /* the forebear two people meet at, and nothing else */
  --green:#2E6B34; --green-soft:#DDEDDC; --green-ink:#1D4722;
  --gold:#9A6B05; --gold-soft:#F7DD8A; --gold-ink:#5A3D02;
  --alarm:#B4231B; --alarm-soft:#FBDAD6; --alarm-ink:#6E140F;
  --gone:#211F2B; --gone-soft:#D3CFC4; --gone-ink:#211F2B;
  --shadow:0 1px 2px rgba(32,30,38,.06),0 8px 24px -12px rgba(32,30,38,.18);
  /* Arabic wears El Messiri; Latin keeps the serif it had, because a browser
     picks the face letter by letter and Spectral carries no Arabic. */
  --f-ar:"Spectral","El Messiri",serif;
  /* The star on القرابة, drawn once here and painted by currentColor, so it
     follows the theme without a second copy for the dark one. */
  --star-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.8l3.1 6.3 7 1-5 4.9 1.2 6.9L12 17.7 5.7 21l1.2-7-5-4.9 7-1z'/></svg>");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#151419; --surface:#1E1C24; --surface2:#282631;
  --ink:#E9E5DC; --muted:#A39FAF; --faint:#7C7889;
  --line:#343140; --line-soft:#2A2833;
  --violet:#B49CE4; --violet-soft:#2A2338;
  --ochre:#D7AC52; --ochre-soft:#332A18;
  --sienna:#D0836D; --sienna-soft:#33211C;
  --teal:#6FB3A5; --teal-soft:#20322E; --bark:#6E5C41;
  --rose:#F2A3C0; --rose-soft:#3A2029;
  --green:#86C98C; --green-soft:#1C2E1E; --green-ink:#AEDDB2;
  --gold:#F0CB63; --gold-soft:#4A3A10; --gold-ink:#F7E3A8;
  --alarm:#F2837A; --alarm-soft:#46201C; --alarm-ink:#FBC9C3;
  --gone:#D8D4E2; --gone-soft:#33313E; --gone-ink:#DCD8E6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#151419; --surface:#1E1C24; --surface2:#282631;
  --ink:#E9E5DC; --muted:#A39FAF; --faint:#7C7889;
  --line:#343140; --line-soft:#2A2833;
  --violet:#B49CE4; --violet-soft:#2A2338;
  --ochre:#D7AC52; --ochre-soft:#332A18;
  --sienna:#D0836D; --sienna-soft:#33211C;
  --teal:#6FB3A5; --teal-soft:#20322E; --bark:#6E5C41;
  --rose:#F2A3C0; --rose-soft:#3A2029;
  --green:#86C98C; --green-soft:#1C2E1E; --green-ink:#AEDDB2;
  --gold:#F0CB63; --gold-soft:#4A3A10; --gold-ink:#F7E3A8;
  --alarm:#F2837A; --alarm-soft:#46201C; --alarm-ink:#FBC9C3;
  --gone:#D8D4E2; --gone-soft:#33313E; --gone-ink:#DCD8E6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Spectral",system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ar{font-family:var(--f-ar)}
/* The text face follows the language: Arabic reads in Tajawal, and the other
   four keep the face they have. */
#app[lang="ar"]{font-family:"Tajawal","IBM Plex Sans Arabic",system-ui,sans-serif}
.wrap{max-width:1240px;margin:0 auto;padding-inline:18px;padding-block:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--violet)}

header.top{background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
header.top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% -20%,var(--violet-soft),transparent 60%);opacity:.75}
.top-in{position:relative;z-index:1;display:flex;gap:18px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;padding-block:15px 13px}
/* The family's mark. It is drawn as a mask rather than an image, so the ink
   takes the page's own colour and reads on paper and on a dark screen alike. */
.brand{display:flex;align-items:flex-start;gap:16px}
.brandtext{min-width:0}
.mark{flex:0 0 auto;width:clamp(38px,5vw,48px);height:clamp(38px,5vw,48px);
  background:var(--ink);border:0;padding:0;cursor:pointer;
  /* The showcase mark is drawn here, not shipped as a picture, so a buying
     family can replace it with one line. */
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat;
  margin-top:2px;transition:background .15s}
.mark:hover{background:var(--violet)}
.mark:focus-visible{outline:2px solid var(--violet);outline-offset:6px}
@media(max-width:560px){.brand{gap:12px}}

.brand h1{font-family:var(--f-ar);font-weight:700;margin:0;
  font-size:clamp(24px,4vw,31px);line-height:1.15;text-wrap:balance}
/* the title is the way home: back to the tree, whole, at the root */
.brand h1 button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  cursor:pointer;text-align:inherit;display:inline;border-radius:6px}
.brand h1 button:hover{color:var(--violet)}
.brand h1 button:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
/* the opening line is worth having, but not at the cost of pushing the tree
   off the screen: it stands down on anything short of a roomy window. */
.brand .sub{margin:.35rem 0 0;color:var(--muted);max-width:60ch;font-size:13.5px}
@media(max-height:900px),(max-width:820px){.brand .sub{display:none}}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);
  font-weight:600;margin:0 0 .25rem}
/* The five languages read as one line of words with a dash between, rather
   than five separate boxes taking up the whole width. */
.langbar{display:flex;align-items:center;gap:0 0;row-gap:2px;min-width:0;flex-wrap:wrap}
.langbar .pill{border:0;background:none;border-radius:6px;padding:4px 8px;
  color:var(--muted);cursor:pointer;font-size:13.5px;
  transition:color .15s}
.langbar .pill:hover{color:var(--violet)}
.langbar .pill[aria-pressed="true"]{background:none;color:var(--ink);font-weight:700;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.langbar .pill[aria-pressed="true"]:hover{color:var(--ink)}
.langbar .pill:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.langbar .sep{color:var(--faint);opacity:.55;font-size:12px;user-select:none;pointer-events:none}
.langbar .themeset{margin-inline-start:12px}
/* On a phone the dashes are dropped: a wrapped line must not begin with one,
   and a little space separates the names just as well. The light/dark switch
   takes a line of its own so the names stay together. */
@media(max-width:620px){
  .langbar{width:100%;justify-content:flex-start;margin-top:6px;gap:2px 4px}
  .langbar .sep{display:none}
  .langbar .themeset{order:2;margin:6px 0 0;align-self:flex-start}
  .langbar .themeset button span{display:inline}
}
/* Light or dark, said plainly. Someone who never touches it keeps following
   whatever their phone or computer is set to. */
.themeset{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.themeset button{display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:0;padding:6px 12px;font-size:12.5px;color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s}
.themeset button:hover{color:var(--ink)}
.themeset button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.themeset button[aria-pressed="true"]:hover{color:var(--paper)}
.themeset button:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
@media(max-width:420px){.themeset button span{display:none}
  .themeset button{padding:6px 11px}}
.pill{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;
  padding:6px 14px;cursor:pointer;font-size:13px;transition:background .15s,color .15s,border-color .15s}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill:hover{border-color:var(--violet);color:var(--violet)}
.pill[aria-pressed="true"]:hover{color:var(--paper)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-block:14px}
.stat{background:var(--surface);padding:9px 13px}
.stat .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:1px}
.stat .v{font-family:"Spectral",serif;font-size:19px;font-weight:600;line-height:1.2;
  font-variant-numeric:tabular-nums}
/* the fifth cell is the way into the family's WhatsApp group */
.stat.wa{background:var(--teal-soft);color:var(--teal);text-decoration:none;
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 13px}
.stat.wa .k{color:var(--teal);opacity:.85;letter-spacing:.04em;text-transform:none;font-size:10.5px}
.stat.wa .go{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.stat.wa:hover{background:var(--teal);color:var(--paper)}
.stat.wa:hover .k{color:var(--paper);opacity:.9}
/* WhatsApp's own mark, from their brand pack: their green at rest, their white
   version once the cell darkens. Neither is a colour of our choosing. */
.wamark{flex:0 0 auto}
.wamark path{fill:#25D366}
.stat.wa:hover .wamark path{fill:#fff}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat.wa{grid-column:1 / -1}}

/* finding your own name is what most people come for, so it sits at the top */
/* ===================== the way in =====================
   A man arrives and the first thing he wants is his own name. The box that
   finds it should be the first thing he sees — warm, lit, and plainly asking
   to be used, without shouting over the tree itself. */
.hunt{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:2px solid var(--gold);border-radius:12px;padding:0 18px;margin-bottom:12px;
  box-shadow:0 2px 10px -4px rgba(154,107,5,.45);
  animation:huntwake 2.6s ease-out 2}
.hunt:focus-within{border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(90,70,160,.16)}
.hunt .mag{color:var(--gold-ink);display:flex;flex:0 0 auto}
.hunt input.q{flex:1;min-width:0;border:0;background:none;outline:none;padding:16px 0;
  font-size:18px;font-family:inherit;color:var(--ink)}
.hunt input.q::placeholder{color:var(--muted);opacity:1}

/* It breathes twice as the page opens, then settles and is simply a box again.
   Anyone who has asked their machine for less movement never sees it. */
@keyframes huntwake{
  0%,100%{box-shadow:0 2px 10px -4px rgba(154,107,5,.35)}
  45%{box-shadow:0 0 0 7px rgba(154,107,5,.14),0 2px 10px -4px rgba(154,107,5,.5)}
}
@media (prefers-reduced-motion:reduce){ .hunt{animation:none} }
.hunt input.q::-webkit-search-cancel-button{cursor:pointer}
.hunt .count{font-size:12px;color:var(--faint);white-space:nowrap}
.hunt .count.on{color:var(--violet);font-weight:600}

/* The answers hang off the search box itself, so the eye never has to travel.
   Many people here share a first name, so each row carries whose child they
   are, the English spelling, and which generation they stand in. */
.hunt{position:relative}
.drop{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px -10px rgba(32,30,38,.28);padding:5px;
  max-height:min(62vh,430px);overflow-y:auto}
.drop[hidden]{display:none}
.drop .row{display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  background:none;border:0;border-radius:8px;padding:9px 12px;cursor:pointer}
.drop .row:hover,.drop .row.on{background:var(--violet-soft)}
.drop .row .dot{width:8px;height:8px;border-radius:99px;background:var(--violet);flex:0 0 auto}
.drop .row .dot.f{background:var(--rose)}
.drop .row .dot.new{background:var(--faint)}
.drop .row .nm{font-family:var(--f-ar);font-size:17px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .row .of{flex:1;font-size:12.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.drop .row .nm + .gen{margin-inline-start:auto}
.drop .row .tr{font-size:12px;color:var(--faint);white-space:nowrap}
.drop .row .gen{font-size:11px;color:var(--faint);white-space:nowrap;
  background:var(--surface2);border-radius:99px;padding:2px 9px;flex:0 0 auto}
.drop .more{display:block;width:100%;text-align:center;background:none;border:0;
  border-top:1px solid var(--line-soft);margin-top:4px;padding:9px;
  font-size:12.5px;color:var(--violet);cursor:pointer;border-radius:0 0 8px 8px}
.drop .more:hover{background:var(--violet-soft)}
.drop .nothing{padding:16px 12px;text-align:center;color:var(--faint);font-size:13.5px}
@media(max-width:520px){.drop .row .tr{display:none}}

/* how the tree is built: a plain line above it, not a box */
.treehint{font-size:12.5px;color:var(--muted);line-height:1.75;margin:0 2px 10px}
.treehint b{color:var(--ink);font-weight:600}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;margin-bottom:14px}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:11px 14px;cursor:pointer;
  color:var(--muted);white-space:nowrap;font-size:14.5px;font-weight:500}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--violet)}
.tab:hover{color:var(--ink)}

.note{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--ochre);
  border-radius:0 8px 8px 0;padding:13px 16px;margin-bottom:18px;font-size:13.5px;color:var(--muted)}
[dir="rtl"] .note{border-radius:8px 0 0 8px}
.note b{color:var(--ink);font-weight:600}
h2.sec{font-family:"Spectral",serif;font-size:19px;font-weight:600;margin:0 0 4px}
.sec-note{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:78ch}
/* The word of caution that stands at the head of the chain: this line of
   descent has not been verified, and nobody should read it as settled. */
.notice{background:var(--gold-soft);border:1px solid var(--gold);
  border-inline-start:4px solid var(--gold);border-radius:0 10px 10px 0;
  padding:15px 20px 16px;margin:0 0 22px;max-width:80ch}
[dir="rtl"] .notice{border-radius:10px 0 0 10px}
.notice h3{font-family:"Spectral",serif;font-size:15px;font-weight:600;
  margin:0 0 7px;color:var(--gold-ink);letter-spacing:.01em}
.notice p{margin:0 0 8px;font-size:13.5px;line-height:1.72;color:var(--gold-ink)}
.notice p:nth-of-type(2){font-weight:600}
.notice p:last-of-type{margin-bottom:0}
.notice .tellbtn{margin-top:13px;border-color:var(--gold);color:var(--gold-ink);
  background:var(--surface);font-weight:600}
.notice .tellbtn:hover{background:var(--gold);color:var(--paper);border-color:var(--gold)}
#chainform:not(:empty){margin-top:14px;border-top:1px solid var(--gold);padding-top:14px}
#chainform .form{background:none;border:0;padding:0;margin:0}
#chainform .sentok{margin:0;font-size:13.5px;font-weight:600;color:var(--gold-ink)}
.empty{padding:26px 10px;color:var(--faint);font-size:13.5px;text-align:center}
/* the tally of marriages still waiting to be joined */
.todobar{display:flex;align-items:center;gap:12px;margin:-8px 0 18px;flex-wrap:wrap}
.todochip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;
  border:1px solid var(--alarm);background:var(--alarm-soft);color:var(--alarm-ink);
  border-radius:99px;padding:5px 14px;font-weight:600}
.todochip:hover{border-color:var(--alarm-ink)}
.todochip.on{background:var(--alarm);color:var(--paper);border-color:var(--alarm)}
.todochip .dot{width:8px;height:8px;border-radius:99px;background:var(--alarm)}
.todochip.on .dot{background:var(--paper)}
/* the empty boxes wear the colour the index already gives them, so the chip
   and the dot in the list are plainly the same thing */
.todochip.blank{border-color:var(--line)}
.todochip.blank:hover{border-color:var(--bark)}
.todochip.blank .dot{background:var(--bark)}
.todochip.blank.on{background:var(--bark);color:var(--paper);border-color:var(--bark)}
/* on a person's card, which spouse is still waiting */
.todonote{margin:10px 0 0;font-size:13px;color:var(--alarm-ink);background:var(--alarm-soft);
  border:1px solid var(--alarm);border-radius:8px;padding:8px 12px}
.todonote b{font-size:16px}
.footmark{width:26px;height:26px;background:var(--faint);vertical-align:-7px;
  display:inline-block;margin-inline-end:9px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat}

/* ---------- tree ---------- */
.treegrid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:880px){.treegrid{grid-template-columns:1fr}}
.side{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(78vh,720px)}
.sidescroll{overflow-y:auto;padding:6px 8px 12px}
.genhead{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:12px 8px 5px;position:sticky;top:0;background:var(--surface)}
.idx{width:100%;text-align:start;background:none;border:0;border-radius:7px;padding:6px 9px;
  cursor:pointer;display:flex;align-items:center;gap:8px}
.idx:hover{background:var(--surface2)}
.idx.on{background:var(--violet-soft)}
.idx .nm{font-family:var(--f-ar);font-size:18px;line-height:1.3}
.idx .tr{color:var(--faint);font-size:11.5px;margin-inline-start:auto;white-space:nowrap}
.idx .tr.ar{font-size:15px;font-family:var(--f-ar)}
.idx .dot{width:7px;height:7px;border-radius:99px;background:var(--violet);flex:0 0 7px}
.idx .dot.f{background:var(--rose)}
.idx .dot.new{background:transparent;border:1.5px dashed var(--faint)}
.idx .dot.wed{background:var(--gold)}
.idx .dot.todo{background:var(--alarm)}

/* The card and the tree share the one column, the card on top. `order` rather
   than document order, because the kinship page borrows the card and hands it
   back with appendChild — which would otherwise drop it below the tree. */
.treecol{display:flex;flex-direction:column;gap:16px;min-width:0}
.treecol > .person{order:-1;margin-top:0}

.canvas{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  height:min(78vh,720px);overflow:hidden;touch-action:none;cursor:grab}
.canvas.drag{cursor:grabbing}
.canvas svg{display:block;width:100%;height:100%}
.tctl{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:flex;gap:5px;z-index:2}
.tctl .btn{background:var(--surface);box-shadow:var(--shadow)}
.tctl .gap{width:6px}
#t-tight,#t-wide{font-size:15px;letter-spacing:-1px}
#t-tight[disabled],#t-wide[disabled]{opacity:.35;cursor:default}
.branch{fill:none;stroke:var(--bark);stroke-linecap:round}
.ground{stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 5}
/* the tie between a husband and wife who are both in the tree */
.marriage{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-dasharray:5 5;
  stroke-linecap:round}
.nodeg{cursor:pointer}
.nodeg .pill-bg{fill:var(--surface2);stroke:var(--line);stroke-width:1.2}
.nodeg:hover .pill-bg{stroke:var(--violet)}
.nodeg.sel .pill-bg{fill:var(--violet-soft);stroke:var(--violet);stroke-width:2.4}
.nodeg.dim{opacity:.22}
/* the line of the person you are looking at stays at full strength while the
   rest of the tree steps back */
.nodeg.online .pill-bg{stroke-width:2}
.branch.dim,.marriage.dim{opacity:.16}
.branch,.marriage,.nodeg{transition:opacity .18s}
.nodeg.hit .pill-bg{fill:var(--ochre-soft);stroke:var(--ochre);stroke-width:2}
.nodeg text{font-family:var(--f-ar);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.nodeg .rootpill{fill:var(--ink);stroke:var(--ink)}
.nodeg.root:not(.sel) text{fill:var(--paper)}
.nodeg.sel .rootpill{fill:var(--violet-soft);stroke:var(--violet)}
/* daughters are pink; sons keep the paper-coloured pill */
.nodeg .fem{fill:var(--rose-soft);stroke:var(--rose)}
/* A marriage inside the family that has been said but not yet joined to the
   other record. Red is a task, not a decoration: it should end up nowhere. */
.nodeg .todo{fill:var(--alarm-soft);stroke:var(--alarm);stroke-width:2.6}
.nodeg.todo text{fill:var(--alarm-ink);font-weight:700}
.nodeg.todo:hover .todo{stroke:var(--ink)}
/* both halves of a marriage inside the family: both boxes turn gold, and
   they are meant to stand out at a glance from every other box */
.nodeg .gold{fill:var(--gold-soft);stroke:var(--gold);stroke-width:2.6}
.nodeg.wed text{fill:var(--gold-ink);font-weight:700}
.nodeg.wed:hover .gold{stroke:var(--ink)}
.nodeg.root .gold{fill:var(--gold);stroke:var(--gold-ink)}
.nodeg.root.wed text{fill:var(--paper)}
.nodeg .blank{fill:var(--paper);stroke:var(--faint);stroke-width:1.4;stroke-dasharray:4 3}
.nodeg.blank text{fill:var(--faint);font-style:italic}

/* ---------- person panel ---------- */
.person{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px;position:relative}
.person .x{position:absolute;inset-block-start:10px;inset-inline-end:10px;border:0;background:none;
  color:var(--faint);cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:6px}
.person .x:hover{background:var(--surface2);color:var(--ink)}
.phead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pphoto{width:104px;height:104px;border-radius:10px;object-fit:cover;border:1px solid var(--line);
  background:var(--surface2);flex:0 0 auto;cursor:zoom-in}
.pphoto.ph{display:grid;place-items:center;color:var(--faint);font-size:11px;text-align:center;
  cursor:default;padding:6px}
/* the empty frame is the way in to adding a photo, so it has to look pressable */
.pphoto.ph.add{border:1px dashed var(--line);cursor:pointer;font:inherit;font-size:11px;
  line-height:1.35;color:var(--muted);transition:border-color .15s,color .15s,background .15s}
.pphoto.ph.add:hover,.pphoto.ph.add:focus-visible{border-color:var(--violet);color:var(--violet);
  background:var(--violet-soft);outline:none}
.pname{min-width:0;flex:1}
.pname .big{font-family:var(--f-ar);font-size:32px;line-height:1.2;margin:0 26px 0 0}
[dir="rtl"] .pname .big{margin:0 0 0 26px}
.pname .tr{color:var(--muted);font-family:"Spectral",serif;font-style:italic;margin:2px 0 0}
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:2px 8px;
  border-radius:99px;letter-spacing:.04em;margin-inline-end:5px}
.b-m{background:var(--surface2);color:var(--muted)}
.b-f{background:var(--rose-soft);color:var(--rose)}
.b-new{background:var(--ochre-soft);color:var(--ochre)}
/* someone who is no longer with us */
.b-gone{background:var(--gone-soft);color:var(--gone-ink);gap:5px}
.b-gone .dot{width:7px;height:7px;border-radius:50%;background:var(--gone);display:inline-block}
.gonedot{fill:var(--gone)}
.gonebox{margin-top:2px}

.lineage{margin-top:14px;background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;
  padding:12px 14px}
.lineage .lab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:6px}
.lineage .path{font-family:var(--f-ar);font-size:19px;line-height:1.75}
.lineage .path b{font-weight:700}
.lineage .path .sep{color:var(--faint);font-size:15px;padding:0 3px}
/* a name with a card behind it is set in a box of its own; a name with no box
   is one of the fathers above the tree, read from the old charts */
.lineage .path a{cursor:pointer;text-decoration:none}
.lineage .path a.box{display:inline-block;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);padding:0 8px 2px;margin:0 1px;
  line-height:1.45;font-size:.94em}
.lineage .path a.box:hover{color:var(--violet);border-color:var(--violet);
  background:var(--surface2)}
.lineage .path a.box.me{font-weight:700;border-color:var(--ink);
  background:var(--surface2);font-size:1em}
/* the fathers above the tree: read from the old charts, not boxes anybody can open */
.lineage .path .anc{color:var(--muted)}
/* The man the family is named after — the turn in the name. A box filled
   solid, light letters on it, so it is the landmark of the line. It is NOT
   gold: gold on this site says one thing only, that a husband and wife are
   both of the family, and nothing else may borrow it. */
.lineage .path a.turn{display:inline-block;font-size:1.18em;font-weight:800;
  color:var(--paper);background:var(--violet);
  border:1px solid var(--violet);border-bottom:1px solid var(--violet);
  border-radius:8px;padding:1px 10px 3px;margin:0 2px;line-height:1.35}
.lineage .path a.turn:hover{background:var(--ink);border-color:var(--ink)}
/* the older turn, nine fathers above him: معتوق, from whom المعتوقي came.
   Filled too, in the brown of an older name, so the two turns are never read
   as one and neither is read as a marriage. */
.lineage .path .turn2{display:inline-block;font-size:1.1em;font-weight:800;
  color:var(--paper);background:var(--bark);
  border:1px solid var(--bark);border-radius:8px;
  padding:1px 10px 3px;margin:0 2px;line-height:1.35}
.lineage .turnnote{margin:10px 0 0;font-size:12.5px;line-height:1.6;
  color:var(--violet);font-weight:600}
.lineage .turnnote.two{margin-top:4px;color:var(--bark)}
.lineage .turnnote::before{content:"◆";margin-inline-end:6px;font-size:10px;
  vertical-align:middle}
.lineage .vouch{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);line-height:1.6}
/* teal says "confirmed" here and in the review queue, and nowhere else */
.lineage .vouch::before{content:"✓";color:var(--teal);font-weight:700;
  margin-inline-end:6px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px;margin-top:14px}
.kv dt{color:var(--faint);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding-top:3px}
.kv dd{margin:0}
.kv dd .ar{font-size:18px}
/* "wife of …" under the name, the partner's name clickable */
.marriedto{margin:6px 0 0;font-size:13px;color:var(--muted);display:flex;
  align-items:baseline;gap:6px;flex-wrap:wrap}
.marriedto button{font-family:var(--f-ar);font-size:18px;color:var(--gold-ink);
  text-decoration-color:var(--gold)}
.marriedto button:hover{color:var(--ink)}
/* one box per spouse: the names run together without a border */
.wifelist{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.wife{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--surface2);border-radius:99px;padding:4px 12px}
.wife.wed{border-color:var(--gold);background:var(--gold-soft)}
.wife .num{font-size:10.5px;font-weight:700;color:var(--faint);
  font-variant-numeric:tabular-nums;line-height:1}
.wife .fam{font-size:10.5px;color:var(--teal);background:var(--teal-soft);border-radius:99px;
  padding:1px 7px;font-weight:600}
.wife .ar{font-family:var(--f-ar);font-size:16px}
.bio{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.7;max-width:70ch}
.kidlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* a father with several wives: one small heading per mother, so it is plain
   which child belongs to which */
.bymother{display:flex;flex-direction:column;gap:11px;margin-top:2px}
.mgroup{border-inline-start:2px solid var(--line);padding-inline-start:11px}
.mlab{margin:0;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.mlab b{font-family:var(--f-ar);font-size:15px;color:var(--ink);font-weight:400}
.mlab .todotag{color:var(--alarm-ink);background:var(--alarm-soft);border-radius:99px;
  padding:1px 8px;font-weight:600}
.mgroup .kidlist{margin-top:4px}
/* assigning the mothers, all the children on one screen */
.mhead{margin:0 0 10px;font-size:13px;color:var(--muted)}
.mrows{display:flex;flex-direction:column;gap:7px;max-width:520px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.mrow .nm{font-family:var(--f-ar);font-size:17px}
.mrow select{min-width:190px}
/* where someone lives, and the way to reach them without showing anything */
.reach{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.rlab{margin:0 0 8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.reach .kv{margin:0}
.reach .priv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.reach .only{font-size:10px;color:var(--ochre);background:var(--ochre-soft);
  border-radius:99px;padding:1px 7px;font-weight:600;letter-spacing:.02em}
.reachbtn{margin-top:10px}
.rnote{margin:8px 0 0;font-size:12px;color:var(--faint);max-width:62ch;line-height:1.6}
.reachedit{margin-bottom:12px;padding:12px 14px;border:1px solid var(--line-soft);
  border-radius:10px;background:var(--paper)}
.reachedit .rlab{margin-bottom:10px}
.reachform textarea{width:100%;min-height:96px}
.sentok{margin:14px 0 0;padding:12px 16px;border-radius:10px;font-size:14px;
  background:var(--teal-soft);color:var(--teal);border:1px solid var(--teal)}
/* a wife's children hang from her husband's box, so her card says so */
.kidnote{margin:7px 0 0;font-size:12px;color:var(--faint);display:flex;
  align-items:baseline;gap:5px;flex-wrap:wrap}
.kidnote button{font-size:15px;color:var(--gold-ink);text-decoration-color:var(--gold)}
.kidlist button{border:1px solid var(--line);background:var(--surface2);border-radius:99px;
  padding:4px 11px;cursor:pointer;font-family:var(--f-ar);font-size:16px}
.kidlist button:hover{border-color:var(--violet);color:var(--violet)}
.kidlist button.blank{border-style:dashed;color:var(--faint);font-family:inherit;font-size:12.5px}
/* the card carries the tree's colours: pink for a daughter, gold for someone
   married inside the family */
.kidlist button.fem{background:var(--rose-soft);border-color:var(--rose)}
.kidlist button.fem:hover{border-color:var(--rose);color:var(--rose)}
.kidlist button.wed{background:var(--gold-soft);border-color:var(--gold);
  border-width:2px;font-weight:700;color:var(--gold-ink)}
.kidlist button.todo{background:var(--alarm-soft);border-color:var(--alarm);
  border-width:2px;font-weight:700;color:var(--alarm-ink)}
.kidlist button.wed:hover{border-color:var(--ink);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:7px;padding:7px 12px;
  cursor:pointer;font-size:13px;font-weight:500}
.btn:hover{border-color:var(--violet);color:var(--violet)}
.btn.pri{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn.pri:hover{opacity:.88;color:#fff}
.btn.bad{border-color:var(--sienna);color:var(--sienna)}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- the person form ---------- */
.form{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:16px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.f label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:4px}
.f label .req{color:var(--sienna)}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);background:var(--paper);
  border-radius:7px;padding:8px 11px;font-size:14px}
.f input.arin{font-family:var(--f-ar);font-size:19px}
.f textarea{resize:vertical;min-height:76px;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--violet);outline-offset:1px}
.counter{font-size:11px;color:var(--faint);text-align:end;margin-top:3px}
.counter.over{color:var(--sienna);font-weight:600}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);
  text-transform:none;letter-spacing:0}
.check input{width:auto}
.wives{display:flex;flex-direction:column;gap:8px}
.wiferow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.wiferow .rm{border:0;background:none;color:var(--faint);cursor:pointer;padding:4px 8px;border-radius:6px}
/* searching the tree for a husband or wife who is family themselves */
.wlink{grid-column:1/-1;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.wlink .linked{font-size:13px;color:var(--teal)}
.wlink .linked b{font-family:var(--f-ar);font-size:16px;color:var(--ink)}
.wlink .hint{margin:0}
.wlink input{width:100%}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.picks .pick{display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 11px}
.picks .pick:hover{border-color:var(--violet);background:var(--violet-soft)}
.picks .pick .ar{font-family:var(--f-ar);font-size:16px}
.picks .pick .sub{font-size:11.5px;color:var(--faint)}
.picknone{margin:0;font-size:13px;color:var(--faint)}
.wiferow .rm:hover{background:var(--surface2);color:var(--sienna)}
.hint{font-size:12px;color:var(--faint);margin-top:4px}
.fmsg{margin-top:10px;font-size:13px}
.fmsg.err{color:var(--sienna)}
.fmsg.ok{color:var(--teal)}
.photoedit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.photoedit img{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}

/* ---------- chain ---------- */
.chain{border-inline-start:2px solid var(--line);margin-inline-start:26px}
.gen{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:9px 0}
.gen .num{width:52px;margin-inline-start:-27px;text-align:center;font-variant-numeric:tabular-nums;
  font-family:"Spectral",serif;font-size:12px;color:var(--faint);background:var(--paper);
  padding:2px 0;border-radius:99px;border:1px solid var(--line)}
.gen .who .a{font-family:var(--f-ar);font-size:22px;line-height:1.3}
.gen .who .b{color:var(--muted);font-size:12.5px;font-family:"Spectral",serif;font-style:italic}
.gen.prophet .num{border-color:var(--ochre);color:var(--ochre)}
.gen.prophet .who .a{color:var(--ochre)}
.gen.imam .num{border-color:var(--violet);color:var(--violet)}
.gen.eponym .num{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- documents ---------- */
.vctl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.dctl{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.dctl .sp{flex:1}
.viewer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2);
  position:relative;height:min(74vh,700px);touch-action:none;cursor:grab}
.viewer.drag{cursor:grabbing}
.viewer img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;opacity:0;
  transition:opacity .18s}
/* A PDF fills the frame and brings its own scrolling and zoom, so the panel
   stops behaving like a thing you drag. */
.viewer.pdf{cursor:default;touch-action:auto;background:var(--paper)}
.viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--paper)}
.uploadbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.uploadbar input[type=text]{flex:1;min-width:200px;border:1px solid var(--line);background:var(--paper);
  border-radius:7px;padding:8px 11px;font-size:14px}
.filebtn{border:1px solid var(--line);background:var(--surface2);border-radius:7px;padding:7px 12px;
  cursor:pointer;font-size:13px;font-weight:500}
.filebtn:hover{border-color:var(--violet);color:var(--violet)}
.fname{font-size:12.5px;color:var(--faint);max-width:200px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Where the owner has an upload bar, everyone else has an invitation to send
   something in. Dashed, so it reads as an offer rather than a control. */
.sendbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px dashed var(--line);border-radius:10px;padding:13px 16px;margin-bottom:14px}
.sendbar p{margin:0;flex:1;min-width:220px;font-size:13.5px;color:var(--muted);line-height:1.6}
.umsg{font-size:12.5px;color:var(--muted)}
.umsg.err{color:var(--sienna)}
.umsg.ok{color:var(--teal)}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;display:block;
  background:var(--surface2)}
.gcard .cap{padding:8px 10px;font-size:13px;color:var(--muted);flex:1}
.gcard .rm{border:0;background:none;color:var(--faint);cursor:pointer;font-size:12px;
  padding:6px 10px;text-align:start}
.gcard .rm:hover{color:var(--sienna)}
/* who is standing in the picture, and the panel that records it */
.gcard .inpic{margin:0;padding:0 10px 8px;font-size:13px;line-height:1.7}
.gcard .inpic .lab{color:var(--faint);font-size:11px;letter-spacing:.06em;
  margin-inline-end:6px;display:inline-block}
.gcard .inpic button{font-family:var(--f-ar);font-size:15.5px}
.gcard .gacts{display:flex;gap:4px;align-items:center;padding:0 10px 8px;flex-wrap:wrap}
.gcard .gacts .linkish{font-size:12px}
.gcard .gacts .rm{padding:0;margin-inline-start:auto}
.gform:empty{display:none}
/* the card being described takes the whole row, picture beside the writing */
.gcard.editing{grid-column:1/-1;display:grid;
  grid-template-columns:minmax(200px,280px) 1fr;grid-template-rows:auto auto auto 1fr}
.gcard.editing img{grid-row:1/-1;height:100%;aspect-ratio:auto;min-height:220px}
.gcard.editing .cap,.gcard.editing .inpic,.gcard.editing .gacts{grid-column:2}
.gcard.editing .gform{grid-column:2;grid-row:4}
.gcard.editing .gform .form{border-top:0;padding-top:0}
@media(max-width:700px){.gcard.editing{grid-template-columns:1fr}
  .gcard.editing img{grid-row:auto;min-height:0;aspect-ratio:4/3}
  .gcard.editing .cap,.gcard.editing .inpic,.gcard.editing .gacts,
  .gcard.editing .gform{grid-column:1}}
.gform .form{padding:10px;border-top:1px solid var(--line-soft);border-radius:0}
.gform textarea{width:100%;min-height:70px;margin-bottom:8px}
.gform .tagbox{margin:2px 0 8px;font-size:12.5px;line-height:1.5;align-items:flex-start}
.gform .tagwrap{border:1px solid var(--line-soft);border-radius:8px;padding:9px;
  background:var(--paper);margin-bottom:6px}
.gform .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.gform input[type="text"]{width:100%}
.gform .picks{max-height:190px;overflow:auto;margin-top:6px}
/* one chip per person named, numbered in the order they were added */
.tagchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--surface2);border-radius:99px;padding:3px 5px 3px 9px;font-size:13px}
[dir="rtl"] .tagchip{padding:3px 9px 3px 5px}
.tagchip .num{font-size:9.5px;font-weight:700;color:var(--faint)}
.tagchip .ar{font-family:var(--f-ar);font-size:15px}
.tagchip .x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:15px;
  line-height:1;padding:0 3px;border-radius:99px}
.tagchip .x:hover{color:var(--sienna);background:var(--surface)}

/* [hidden] must beat every display: rule below, or a closed dialog keeps
   covering the page and eating clicks meant for the tree. */
[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,18,24,.92);display:grid;
  place-items:center;padding:24px}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:8px}
.lightbox p{color:#E9E5DC;font-size:14px;margin:12px 0 0;text-align:center;max-width:70ch}
.lbx{position:absolute;top:16px;inset-inline-end:20px;border:0;background:none;color:#E9E5DC;
  font-size:30px;line-height:1;cursor:pointer;padding:6px 12px;border-radius:8px}
.lbx:hover{background:rgba(255,255,255,.12)}

footer{border-top:1px solid var(--line);margin-top:44px;padding-block:22px 34px;
  color:var(--faint);font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* save confirmation — sits above everything, fades itself out */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  background:#2B2620;color:#F4F0E6;padding:10px 18px;border-radius:999px;font-size:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- signing in, the activity log, the editors ---------- */
.signform{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.signform input{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:8px 11px;font-size:14px;min-width:240px}
.signform input:focus{outline:2px solid var(--violet);outline-offset:1px}
.whoami{display:inline-flex;align-items:center;gap:8px;margin-inline-end:10px}
.whoami .role{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px}

.log{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden}
.logrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:11px 15px;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.logrow:last-child{border-bottom:0}
.lwho{font-weight:600;min-width:90px}
.lact{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;
  padding:2px 9px;background:var(--surface2);color:var(--muted)}
.lact.add{background:var(--teal-soft);color:var(--teal)}
.lact.edit{background:var(--violet-soft);color:var(--violet)}
.lact.delete,.lact.remove{background:var(--sienna-soft);color:var(--sienna)}
.lact.upload{background:var(--ochre-soft);color:var(--ochre)}
.lname{font-family:var(--f-ar);font-size:17px}
.lsum{color:var(--muted);font-size:12.5px}
.lwhen{margin-inline-start:auto;color:var(--faint);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.eds{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden}
.edrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 15px;
  border-bottom:1px solid var(--line-soft)}
.edrow:last-child{border-bottom:0}
.edrow.off{opacity:.55}
.ednm{font-weight:600}
/* Three kinds of people, told apart at a glance: an owner in violet, an editor
   in a solid green that carries its own weight, a reader quiet and grey. The
   two that matter are the two that stand out. */
.edst{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--paper);background:var(--teal);border-radius:999px;padding:2px 10px}
.edrow.off .edst{color:var(--muted);background:var(--surface2)}
.edseen{color:var(--faint);font-size:12.5px}
.edrow .btn{margin-inline-start:auto}

.codebox{border:1px solid var(--ochre);background:var(--ochre-soft);border-radius:12px;
  padding:16px 18px;margin-bottom:16px}
.codebox .clab{font-size:13px;color:var(--muted);margin-bottom:8px}
.codebox .ccode{font-family:"Spectral",ui-monospace,monospace;font-size:21px;letter-spacing:.06em;
  font-weight:600;margin-bottom:12px;word-break:break-all;direction:ltr;text-align:start}
.codebox .cnote{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.edmain{display:flex;flex-direction:column;gap:1px;min-width:170px}
.edmail{color:var(--faint);font-size:12px;direction:ltr}
.edst.nocode{color:var(--ochre);background:var(--ochre-soft)}
.edacts{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.edrow .btn{margin-inline-start:0}
.codebox .cmail{color:var(--muted);font-size:12.5px;direction:ltr}
.srow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.srow input{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:8px 11px;font-size:14px;min-width:190px}
.srow input:focus{outline:2px solid var(--violet);outline-offset:1px}
#signcode{min-width:140px;letter-spacing:.26em;font-variant-numeric:tabular-nums;
  font-size:17px;text-align:center;direction:ltr}
.sentto{color:var(--muted);font-size:13px;width:100%}
.linkish{background:none;border:0;color:var(--violet);cursor:pointer;font-size:13px;
  padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--ink)}
.keyrow{margin-top:2px}

/* ---- what the family sends in, and the queue that holds it ---------------- */
.acts.suggest{margin-top:14px;gap:8px;flex-wrap:wrap}
.acts.suggest .btn{font-size:12.5px;padding:6px 12px}
.tabnum{display:inline-block;min-width:18px;margin-inline-start:7px;padding:1px 6px;
  border-radius:99px;background:var(--alarm);color:var(--paper);
  font-size:11px;font-weight:700;line-height:1.5;vertical-align:1px}
#review-tabs{margin-bottom:16px}
.prop{border:1px solid var(--line);background:var(--surface);border-radius:12px;
  padding:16px 18px;margin-bottom:14px}
.prop header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.prop .kind{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;background:var(--violet-soft);color:var(--violet)}
.prop .kind.note{background:var(--line-soft);color:var(--muted)}
.prop .from,.prop .when{font-size:12.5px;color:var(--muted)}
.prop .from a{color:var(--muted)}
.prop .verdict{margin-inline-start:auto;font-size:12px;font-weight:600;
  border-radius:99px;padding:3px 10px;border:1px solid var(--line);color:var(--muted)}
.prop .verdict.approved{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
table.diff{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:13.5px}
table.diff thead th{text-align:start;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:700;padding:0 10px 6px}
table.diff tbody th{text-align:start;font-weight:600;color:var(--muted);
  padding:7px 10px;border-top:1px solid var(--line-soft);white-space:nowrap}
table.diff td{padding:7px 10px;border-top:1px solid var(--line-soft)}
table.diff td.was{color:var(--faint);text-decoration:line-through}
table.diff td.now{color:var(--ink);font-weight:600}
.prop .pnote{margin:0 0 12px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.prop .pnote.why{color:var(--muted);font-size:13px}
.prop .pphoto img{max-width:260px;border-radius:10px;border:1px solid var(--line)}
.prop .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.prop .why{flex:1;min-width:180px;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px}
@media(max-width:620px){
  .prop .verdict{margin-inline-start:0}
  .prop .pphoto img{max-width:100%}
}
.spblock{margin-bottom:12px}
.spblock>label{display:block;margin-bottom:6px}
.sprow{margin-bottom:6px}
.sprow input{width:100%}
.sprow input[readonly]{background:var(--line-soft);color:var(--muted)}
.spblock .btn{font-size:12.5px;padding:6px 12px;margin-top:2px}

/* ---- a daughter's children, who carry another family's name --------------- */
.kidlist.outside{display:flex;flex-wrap:wrap;gap:6px}
.kidlist.outside .chip{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;
  background:var(--surface);font-size:13.5px}
.kidlist.outside .chip.she{border-color:var(--rose);background:var(--rose-soft)}
.kidlist.outside .chip .yr{color:var(--faint);font-size:11.5px}
.issuerows{display:flex;flex-direction:column;gap:8px}
.issuerow{display:flex;gap:8px;align-items:center}
.issuerow .i-name{flex:1;min-width:110px}
.issuerow .i-sex{width:auto;min-width:88px}
.issuerow .i-year{width:84px}
@media(max-width:620px){
  .issuerow{flex-wrap:wrap}
  .issuerow .i-name{flex:1 1 100%}
}

/* A line of credit under a document, naming whoever drew it, with the name
   clickable through to their own card on the tree. */
.doccredit{color:var(--muted);font-size:13.5px;line-height:1.75;margin:0 0 12px;
  max-width:78ch;border-inline-start:3px solid var(--line);padding-inline-start:12px}
.doccredit .linkish{font-size:inherit;font-weight:600}

/* A box you type into that narrows a long list as you go. The country and the
   city both use it: two hundred and fifty countries and forty-five thousand
   cities are more than anyone can find by scrolling. */
.cbox{position:relative}
.cbox .cboxq{width:100%}
.cboxlist{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 4px);
  max-height:260px;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.18);padding:4px}
.cboxrow{display:block;width:100%;text-align:start;background:none;border:0;
  padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink);
  font:inherit;font-size:14px;line-height:1.5}
.cboxrow:hover,.cboxrow.on{background:var(--surface2)}
.cboxnone{margin:0;padding:8px 10px;color:var(--muted);font-size:13px}

/* ------------------------------------------------------------- the map */
/* Where the family lives, as one circle per place on a plain world map. */
.mapwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);margin-bottom:14px}
#worldmap{display:block;width:100%;height:auto}
.msea{fill:var(--surface)}
.mland{fill:var(--surface2);stroke:var(--line-soft)}
.mland.here{fill:var(--violet-soft);stroke:var(--violet)}
.mpin{cursor:pointer}
.mhalo{fill:var(--violet);opacity:.14;pointer-events:none}
.mdot{fill:var(--violet);stroke:var(--surface);stroke-width:1.6}
.mpin:hover .mdot,.mpin.on .mdot{fill:var(--violet);stroke-width:2.2}
.mpin.on .mhalo{fill:var(--violet);opacity:.26}
.mnum{fill:#fff;font-weight:700;text-anchor:middle;pointer-events:none}
.maplegend{display:block;margin:0 0 6px}
.mwho{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;
  background:var(--surface)}
.mwhoh{margin:0 0 10px;font-weight:600;color:var(--ink)}
.mwhon{background:var(--violet-soft);color:var(--violet);border-radius:999px;
  padding:1px 9px;font-size:13px;margin-inline-start:6px}
.mcity{margin:0 0 10px}
.mcityh{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:600}
.mline{stroke:var(--violet);opacity:.5}
.mhome{fill:var(--violet);opacity:.7}

/* The tally under the map: how many of us are living, how many have said where
   they are, and how many have not — the gap is the invitation. */
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-bottom:12px}
.mstats .mstat{background:var(--surface);padding:12px 14px;display:block}
.mstats .mlab{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:4px}
.mstats .mstat b{font-size:24px;font-weight:700;color:var(--ink)}
.mstats .mstat.wait b{color:var(--bark)}
.mnudge{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.8;max-width:78ch}
.mapwrap{position:relative}
#worldmap{cursor:grab;touch-action:none}
#worldmap.drag{cursor:grabbing}
.mzoom{position:absolute;inset-block-end:10px;inset-inline-end:10px;display:flex;gap:6px}
.mzoom .btn{padding:6px 12px;font-size:15px;background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
.mapfind{max-width:360px;margin:0 0 10px}
.mfound{margin:0 0 12px;font-size:14px;padding:9px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);max-width:78ch}
.mfound.yes{border-color:var(--violet);background:var(--violet-soft);color:var(--ink)}
.mfound.no{color:var(--muted)}

/* Names on the map: the country or city under each circle, and every other
   country written faintly once the map is drawn in. The halo behind the text
   is a stroke of the page colour, so a name stays readable over a coastline. */
.mtag{fill:var(--ink);font-weight:600;text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--surface);stroke-linejoin:round}
.mfaint{fill:var(--muted);opacity:.75;text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--surface);stroke-width:2;stroke-linejoin:round}

/* ===================== the door =====================
   The whole site is the family's own. Anyone who has not been let in sees
   this screen and nothing else: no names, no counts, no photographs. */
#app.locked .stats,
#app.locked .hunt,
#app.locked .tabs,
#app.locked .todobar,
#app.locked footer{display:none !important}
#app.locked section:not(#v-gate){display:none !important}
#app.locked .brand{display:none}
#app.locked .top-in{justify-content:flex-end;padding-block:11px}
.gmark{width:58px;height:58px;margin:0 auto 16px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center/contain no-repeat}
#v-gate{padding:38px 0 48px}
.gate{max-width:880px;margin:0 auto}
.geyebrow{text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre);font-weight:600;margin:0 0 .4rem}
.gtitle{font-family:var(--f-ar);font-weight:700;text-align:center;margin:0;
  font-size:clamp(24px,3.5vw,33px);line-height:1.2}
.glead{text-align:center;color:var(--muted);margin:.7rem auto 0;max-width:54ch;font-size:15px}
.gcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
@media(max-width:720px){.gcols{grid-template-columns:1fr}}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:4px}
.gcard.yes::before{background:var(--violet)}
.gcard.no::before{background:#25D366}
.gcard h3{margin:0 0 .35rem;font-size:17px;font-weight:700}
.gcard>p{margin:0 0 14px;color:var(--muted);font-size:13.6px}
.gfields{display:flex;flex-direction:column;gap:9px}
.gcard input{width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;font-size:14.5px}
.gcard input:focus{outline:2px solid var(--violet);outline-offset:-1px;border-color:var(--violet)}
.gcard .btn.pri{width:100%;justify-content:center;margin-top:3px;display:flex}
.gcard .gnote{margin:11px 0 0;font-size:12.4px;color:var(--faint)}
.gcode{letter-spacing:.42em;text-align:center;font-size:20px;font-weight:600}
.wabtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#25D366;color:#0A2E17;border:0;border-radius:9px;padding:12px 14px;
  font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none}
.wabtn:hover{background:#1FBB59}
.waicon{width:17px;height:17px;background:currentColor;flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 720'%3E%3Cpath d='M360 0C161.18 0 0 161.18 0 360c0 65.41 17.45 126.75 47.94 179.61L0 720l187.02-44.21c51.34 28.18 110.28 44.21 172.98 44.21 198.82 0 360-161.18 360-360S558.82 0 360 0Zm0 655.52c-60.17 0-116.13-17.98-162.82-48.87l-110.49 28.14 30.99-105.61c-33.53-47.93-53.2-106.26-53.2-169.19 0-163.21 132.31-295.52 295.52-295.52s295.52 132.31 295.52 295.52-132.31 295.52-295.52 295.52Z'/%3E%3Cpath d='m444.35 407.52 87.1 41.06c4 1.88 6.56 5.94 6.2 10.34-.94 11.46-5.54 34.43-26.13 55.02-58.12 58.12-162.49-7.64-166.74-10.18-25.67-13.79-50.06-32.24-73.19-55.36-23.12-23.12-41.58-47.52-55.37-73.19-2.55-4.24-68.31-108.61-10.18-166.74 20.59-20.59 43.56-25.19 55.02-26.13 4.41-.36 8.46 2.2 10.34 6.2l41.07 87.1c1.94 4.12 1.09 9.02-2.13 12.24l-30.61 30.61c-6.62 6.62-8.56 16.93-4 25.11 11.17 20.03 26.19 39.32 43.59 57.07 17.75 17.4 37.04 32.43 57.07 43.59 8.18 4.56 18.48 2.62 25.11-4l30.61-30.61c3.22-3.22 8.12-4.08 12.24-2.13Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 720'%3E%3Cpath d='M360 0C161.18 0 0 161.18 0 360c0 65.41 17.45 126.75 47.94 179.61L0 720l187.02-44.21c51.34 28.18 110.28 44.21 172.98 44.21 198.82 0 360-161.18 360-360S558.82 0 360 0Zm0 655.52c-60.17 0-116.13-17.98-162.82-48.87l-110.49 28.14 30.99-105.61c-33.53-47.93-53.2-106.26-53.2-169.19 0-163.21 132.31-295.52 295.52-295.52s295.52 132.31 295.52 295.52-132.31 295.52-295.52 295.52Z'/%3E%3Cpath d='m444.35 407.52 87.1 41.06c4 1.88 6.56 5.94 6.2 10.34-.94 11.46-5.54 34.43-26.13 55.02-58.12 58.12-162.49-7.64-166.74-10.18-25.67-13.79-50.06-32.24-73.19-55.36-23.12-23.12-41.58-47.52-55.37-73.19-2.55-4.24-68.31-108.61-10.18-166.74 20.59-20.59 43.56-25.19 55.02-26.13 4.41-.36 8.46 2.2 10.34 6.2l41.07 87.1c1.94 4.12 1.09 9.02-2.13 12.24l-30.61 30.61c-6.62 6.62-8.56 16.93-4 25.11 11.17 20.03 26.19 39.32 43.59 57.07 17.75 17.4 37.04 32.43 57.07 43.59 8.18 4.56 18.48 2.62 25.11-4l30.61-30.61c3.22-3.22 8.12-4.08 12.24-2.13Z'/%3E%3C/svg%3E") center/contain no-repeat}
.gor{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--faint);font-size:12.5px}
.gor::before,.gor::after{content:"";flex:1;height:1px;background:var(--line)}
.gask{width:100%;background:transparent;border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.gask:hover{border-color:var(--ink)}
.gsent{background:var(--violet-soft);border:1px solid var(--violet);border-radius:9px;
  padding:10px 13px;font-size:13.4px;color:var(--ink);margin:0}
.gbad{background:var(--alarm-soft);border:1px solid var(--alarm);border-radius:9px;
  padding:10px 13px;font-size:13.4px;color:var(--alarm-ink);margin:0 0 13px !important}
.gdone{background:var(--teal-soft);border:1px solid var(--teal);border-radius:9px;
  padding:12px 14px;font-size:13.4px;color:var(--ink);margin:0 0 13px !important}
.gquote{background:var(--paper);border:1px dashed var(--line);border-radius:9px;
  padding:11px 13px;font-size:13.4px;color:var(--muted);margin:0 0 13px}
.glink{background:none;border:0;color:var(--violet);cursor:pointer;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;padding:8px 0 0}
.gfoot{text-align:center;color:var(--faint);font-size:12.5px;margin:30px 0 0}

/* the queue of people waiting at the door, for the two who decide */
.askbox{border:1px solid var(--ochre);background:var(--ochre-soft);border-radius:12px;
  padding:16px 18px;margin:0 0 18px}
.askbox h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.asknum{background:var(--ochre);color:var(--surface);border-radius:999px;padding:1px 9px;font-size:12px}
.asks{list-style:none;margin:0;padding:0}
.askrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 0;
  border-bottom:1px solid rgba(143,106,28,.25)}
.askrow:last-child{border-bottom:0}
.askmain{display:flex;flex-direction:column;gap:1px;min-width:240px}
.asknm{font-weight:600}
.askmail{color:var(--muted);font-size:12px;direction:ltr}
.asknote,.askwhen{color:var(--muted);font-size:12.5px}
.edgroup{display:flex;align-items:center;gap:8px;margin:20px 0 8px;font-size:14px;
  color:var(--muted);font-weight:600}
.edgroup:first-child{margin-top:0}
.edgnum{background:var(--surface2);color:var(--muted);border-radius:999px;
  padding:1px 9px;font-size:12px;font-weight:600}
.asktold{font-size:11.5px;color:var(--teal)}
.asktold.bad{color:var(--alarm)}
.edgroup .btn.nudge{margin-inline-start:auto;font-size:12px;padding:3px 11px;font-weight:400}

.edago{color:var(--faint);font-size:11.5px;white-space:nowrap}

/* ---------- who else of the family lives there ---------- */
.placego{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;
  color:var(--violet);border-bottom:1px dashed var(--line);line-height:1.5}
.placego:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
/* the province between the town and the country — read, not pressed */
.placemid{color:var(--muted)}
.nearby{margin-top:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface2);padding:14px 16px 12px}
.nearhead{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.nearhead b{font-size:15px}
.nearsub{color:var(--muted);font-size:12.5px;margin:2px 0 10px}
.nearlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  max-height:340px;overflow:auto}
.nearrow{display:flex;align-items:baseline;gap:10px;width:100%;text-align:start;
  background:none;border:0;cursor:pointer;font:inherit;padding:6px 8px;border-radius:8px}
.nearrow:hover{background:var(--surface)}
/* Each line is a door to that man's own card, so it is dressed as one. */
.nearrow .nm{font-weight:600;color:var(--violet)}
.nearrow:hover .nm{text-decoration:underline;text-underline-offset:3px}
.nearrow .ofwhom{font-weight:400;color:var(--muted)}
.nearrow::after{content:"›";margin-inline-start:6px;color:var(--faint);
  font-size:15px;line-height:1;opacity:0}
[dir="rtl"] .nearrow::after{content:"‹"}
.nearrow:hover::after,.nearrow:focus-visible::after{opacity:1}
.nearwhere{margin-inline-start:auto;color:var(--faint);font-size:12px;white-space:nowrap}
/* his own city, so the men nearest to him stand out of the country list */
.nearwhere.mine{color:var(--gold-ink);font-weight:700}
.nearsame{color:var(--gold-ink)}

/* how many Saturday reminders a man has had, beside his name */
.ednudge{font-size:11px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:1px 7px;margin-inline-start:6px;white-space:nowrap}

/* a decision, written small beside the man it concerns */
.askdec{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.askdec .btn{padding:1px 8px;font-size:11px;margin-inline-start:6px}
.donehead{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:600}
.acount{color:var(--muted);font-size:13px;margin:0 0 12px}
.acount b{color:var(--ink)}
.uploadbar select{border:1px solid var(--line);background:var(--surface);border-radius:7px;
  padding:9px 11px;font-size:14px}
.edst.reader{color:var(--muted);background:var(--surface2);font-weight:600}
.edst.owner{color:var(--violet);background:var(--violet-soft);font-weight:700}

/* ===================== the door, dressed =====================
   A plate with a gold rule, a lozenge at each corner, the family mark and the
   title in gold leaf. Nothing it says or does changes; this is the dress. */
#v-gate{
  --gold:#8F6A1C;
  --gold-line:rgba(143,106,28,.34);
  --gold-ink:#8A6410;
  padding:40px 0 54px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #v-gate{
  --gold:#D7AC52; --gold-line:rgba(215,172,82,.34); --gold-ink:#D7AC52}}
:root[data-theme="dark"] #v-gate{
  --gold:#D7AC52; --gold-line:rgba(215,172,82,.34); --gold-ink:#D7AC52}

#v-gate .gate{position:relative;border:1px solid var(--gold);border-radius:3px;
  padding:42px 34px 36px;background:var(--surface);
  box-shadow:0 0 0 1px var(--gold-line) inset, 0 24px 60px -36px rgba(32,30,38,.45)}
/* the inner rule, with a lozenge set at each corner */
#v-gate .gate::before{content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px solid var(--gold-line);border-radius:2px;
  background:
    radial-gradient(circle, var(--gold) 0 2px, transparent 2.6px) left 6px top 6px/12px 12px no-repeat,
    radial-gradient(circle, var(--gold) 0 2px, transparent 2.6px) right 6px top 6px/12px 12px no-repeat,
    radial-gradient(circle, var(--gold) 0 2px, transparent 2.6px) left 6px bottom 6px/12px 12px no-repeat,
    radial-gradient(circle, var(--gold) 0 2px, transparent 2.6px) right 6px bottom 6px/12px 12px no-repeat}
/* the mark again, very faint, as a watermark inside the plate */
#v-gate .gate::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--ink);opacity:.045;border-radius:3px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center 56%/min(52vmin,440px) no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M32 56V34'/><path d='M32 40 18 28M32 40l14-12'/><path d='M18 28 11 18M18 28l6-11M46 28l7-10M46 28l-6-11'/><path d='M24 56h16' stroke-width='5'/></g><g fill='black'><circle cx='32' cy='30' r='3.4'/><circle cx='11' cy='18' r='3.4'/><circle cx='24' cy='17' r='3.4'/><circle cx='40' cy='17' r='3.4'/><circle cx='53' cy='18' r='3.4'/></g></svg>") center 56%/min(52vmin,440px) no-repeat}
#v-gate .gate > *{position:relative;z-index:1}

/* the mark in gold leaf: a gradient read through the mask, so it shades the
   way gilding does instead of sitting flat */
#v-gate .gmark{width:84px;height:84px;margin-bottom:22px;
  background:linear-gradient(160deg,#B8860B 0%,#D4AF37 18%,#F7E7A1 38%,#C9A227 56%,
             #8C6A14 72%,#E6C65C 88%,#B8860B 100%)}
#v-gate .geyebrow{letter-spacing:.34em;font-size:9.5px;color:var(--gold)}
#v-gate .geyebrow::before,#v-gate .geyebrow::after{content:"◆";font-size:6px;
  vertical-align:middle;margin:0 10px;opacity:.85}
/* ...and the name in the same leaf, a shade deeper so it holds on pale paper */
#v-gate .gtitle{font-size:clamp(27px,4.2vw,40px);color:var(--ink);
  background:linear-gradient(160deg,#8A6410 0%,#B8860B 16%,#E3C766 34%,#A8831C 52%,
             #6E4F0C 70%,#C9A227 86%,#8A6410 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-bottom:.08em}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #v-gate .gtitle{
  background:linear-gradient(160deg,#B8860B 0%,#D4AF37 18%,#F7E7A1 38%,#C9A227 56%,
             #8C6A14 72%,#E6C65C 88%,#B8860B 100%);
  -webkit-background-clip:text;background-clip:text}}
:root[data-theme="dark"] #v-gate .gtitle{
  background:linear-gradient(160deg,#B8860B 0%,#D4AF37 18%,#F7E7A1 38%,#C9A227 56%,
             #8C6A14 72%,#E6C65C 88%,#B8860B 100%);
  -webkit-background-clip:text;background-clip:text}
#v-gate .gtitle::after{content:"◆";display:block;color:var(--gold);font-size:9px;
  letter-spacing:.6em;margin:14px 0 0;-webkit-text-fill-color:var(--gold)}
#v-gate .glead{font-size:14.5px;max-width:50ch}

/* the two cards, flat inside the plate */
#v-gate .gcols{margin-top:32px;gap:18px}
#v-gate .gcard{background:transparent;border-color:var(--gold-line);
  box-shadow:none;border-radius:3px}
#v-gate .gcard::before{display:none}
#v-gate .gcard input{border-radius:3px;background:var(--paper)}
#v-gate .gcard .btn.pri,#v-gate .wabtn,#v-gate .gask{border-radius:3px}
#v-gate .gfoot{margin-top:30px;letter-spacing:.06em}
@media(max-width:620px){
  #v-gate{padding:22px 0 36px}
  #v-gate .gate{padding:30px 16px 26px}
  #v-gate .gmark{width:64px;height:64px}
}

/* ===================== what is between two people =====================
   Two slots laid side by side, the way a man lays two photographs on a table,
   and under them the answer: the words, how close, and both lines climbing to
   the father they share. */
.kinbar{margin-top:14px}
.kinbtn{border-color:var(--violet);color:var(--violet);font-weight:600}
.kinbtn:hover{background:var(--violet-soft)}

.kinpick{display:grid;grid-template-columns:1fr 46px 1fr;gap:10px;align-items:stretch}
.kslot{border:2px dashed var(--line);border-radius:14px;background:var(--surface);
  padding:14px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
.kslot.full{border-style:solid;border-color:var(--violet)}
.kslab{font-size:11px;letter-spacing:.07em;color:var(--faint);font-weight:700;
  text-transform:uppercase;margin:0 0 8px}
.kslotq .cbox{margin:0}
.kslotq .cboxq{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:9px;padding:11px 12px;font:inherit;font-size:15px;
  background:var(--paper);color:var(--ink)}
.kpicked{display:flex;align-items:center;gap:11px}
.kav{width:42px;height:42px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.kav.ph{background:var(--surface2);display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:17px;font-weight:700}
.kpicked .knm{font-size:18px;font-weight:700;line-height:1.3}
.kpicked .kof{font-size:12.5px;color:var(--muted)}
.kx{margin-inline-start:auto;background:none;border:0;color:var(--faint);font-size:20px;
  cursor:pointer;line-height:1;padding:0 2px}
.kx:hover{color:var(--alarm)}
.kvs{display:flex;align-items:center;justify-content:center}
.kvs span{width:40px;height:40px;border-radius:99px;background:var(--surface2);
  color:var(--muted);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:19px;font-weight:800}
.kgo{display:flex;justify-content:center;margin-top:14px}
.askbtn{background:var(--violet);color:var(--paper);border:0;border-radius:11px;
  padding:12px 30px;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer}
.askbtn.off{background:var(--surface2);color:var(--faint);cursor:default}

.kans{margin-top:18px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:18px 20px 16px}
.kstep1{margin:0 0 4px;font-size:12px;letter-spacing:.06em;color:var(--faint);
  font-weight:700;text-transform:uppercase}
.kstep1.two{margin-top:14px}
.ksay{margin:0;font-size:22px;font-weight:800;line-height:1.55;font-family:var(--f-ar)}
.ksay.two{font-size:19px;color:var(--teal);text-align:center;margin:0 0 10px}
/* when one of the two is the other's own mother, that is the headline */
.ksay.big{font-size:25px;color:var(--teal)}
.kroadline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.kstep1.two{margin-top:16px}
.kclose{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:13px}
.kclose .kpips{display:inline-flex;gap:4px}
.kclose .kpips i{width:10px;height:10px;border-radius:99px;background:var(--line);display:block}
.kclose .kpips i.on{background:currentColor}
/* How close two people are is counted by the pips beside it. Giving the words
   a colour as well put a second meaning on teal and on brown, so they are all
   one quiet grey and the pips do the telling. */
.kclose.kinVeryNear,.kclose.kinNear,.kclose.kinMid,.kclose.kinFar{color:var(--muted)}
.kclose .kst{color:var(--faint);font-size:12.5px}
.kwed{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:10px;
  background:var(--rose-soft);color:var(--rose);font-size:15px;font-weight:700}
/* two roads, each drawn whole, the second one through a mother of the family */
.kroads{margin:12px 0 0;font-size:14px;color:var(--teal);font-weight:700}
.kroad{text-align:center;font-size:12px;letter-spacing:.05em;font-weight:700;
  color:var(--faint);text-transform:uppercase;margin:0 0 12px}
.kroad2{margin-top:6px;border-top:1px solid var(--line);padding-top:4px}
.kroad2 .kroad{color:var(--teal)}
.kroad2 .kclose{justify-content:center;margin-top:12px}
/* the tree's own colours: a woman is pink wherever her name is written */
.kstep.fem{border-color:var(--rose);background:var(--rose-soft);color:var(--rose)}
.kstep.fem:hover{border-color:var(--rose);color:var(--paper);background:var(--rose)}
.kanc.fem{background:var(--rose);border-color:var(--rose);color:var(--paper)}
.kanc.fem:hover{background:var(--rose);filter:brightness(.85)}
.kpicked.fem .kav.ph{background:var(--rose-soft);color:var(--rose)}
.kpicked.fem .knm{color:var(--rose)}
/* the step a road takes through a mother, marked in words rather than colour */
.kstep.mum{font-weight:700}
.kmumtag{font-size:10px;margin-inline-start:5px;opacity:.75;font-weight:600}
.kbridge{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.kanctop{display:flex;justify-content:center}
/* Gold on this site means one thing only — a husband and wife who are both
   of the family — so the forebear two people meet at wears a green of its
   own, and is never mistaken for a marriage. */
.kanc{background:var(--green);border:1px solid var(--green);color:var(--paper);
  border-radius:10px;padding:4px 14px 6px;font:inherit;font-weight:800;font-size:16px;
  font-family:var(--f-ar);cursor:pointer}
.kanc:hover{background:var(--green-ink);border-color:var(--green-ink)}
.kanclab{text-align:center;font-size:11.5px;color:var(--faint);margin:6px 0 10px}
/* the two children of that father, one on each line: the pair the branches
   parted from, named so nobody has to work it out from the chains */
.ksplit{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;
  flex-wrap:wrap}
.ksplit .kand{color:var(--faint);font-size:13px}
.ksplitlab{text-align:center;font-size:12px;color:var(--teal);font-weight:700;
  margin:6px 0 12px}
.klegs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kleg{display:flex;flex-direction:column;align-items:center;gap:5px}
.kwhos{font-size:11.5px;color:var(--faint);margin-bottom:2px}
.kstep{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:3px 12px 5px;font:inherit;font-size:14.5px;font-family:var(--f-ar);
  cursor:pointer;color:var(--ink)}
.kstep:hover{border-color:var(--violet);color:var(--violet)}
.kstep.me{border-color:var(--ink);font-weight:700;background:var(--surface2)}
.ktick{color:var(--faint);font-size:11px;line-height:1}
@media(max-width:620px){
  .kinpick{grid-template-columns:1fr;gap:6px}
  .kvs span{width:34px;height:34px;font-size:17px}
  .klegs{grid-template-columns:1fr;gap:18px}
}

/* القرابة wears a star for good. It answers the question the family asks more
   than any other, and nothing about it should read as temporary — so no word
   that expires, and no date in the script to lift it. Teal and not gold: gold
   means a husband and wife who are both of the family, and nothing else. */
.tab.star{color:var(--teal);font-weight:700}
.tab.star .st{width:13px;height:13px;display:inline-block;margin-inline-end:6px;
  vertical-align:-1px;background:currentColor;
  -webkit-mask:var(--star-ico) center/contain no-repeat;
  mask:var(--star-ico) center/contain no-repeat}
/* Chosen, it behaves like any other chosen tab — the violet underline keeps its
   one meaning — but the star stays teal so the mark never disappears. */
.tab.star[aria-selected="true"]{color:var(--ink)}
.tab.star[aria-selected="true"] .st{background:var(--teal)}