/* Self-hosted so the record still reads correctly when Google is slow or
   unreachable,which is why Times New Roman was showing up as a fallback.
   Arabic keeps every glyph because shaping needs them; the Latin faces are
   subset to digits and punctuation,which is all this site uses them for. */
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/arefruqaa-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/arefruqaa-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/arefruqaa-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/arefruqaa-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibmplexsansarabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibmplexsansarabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsansarabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsansarabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibmplexsansarabic-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibmplexsansarabic-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}/* يجمع بين العوائل — سجل نسب قرية الولي.
   Heritage register aesthetic: Gezira greens + manuscript cream,a single brass
   (seal) accent,and the nasab lineage line as the signature element. */
:root{
  --ink:#141c16; --deep:#0f2019; --deep-2:#173026; --leaf:#2a5a40; --leaf-soft:#3d7a56;
  --paper:#f8f4ec; --paper-2:#fbf8f1; --cream:#efe8d8; --sand:#e2d6bf; --clay:#7a4a2a;
  --brass:#a8823f; --brass-soft:#c9a86a; --brass-line:rgba(168,130,63,.32);
  --alive:#2d6a45; --dead:#6b6358; --muted:#5c655e; --subtle:#7a8178;
  --border:#ddd3bd; --line:#cfc3ab; --accent:#2a5a40; --accent-fg:#f8f4ec;
  --danger:#8a3a3a; --ok:#1e4d32; --ok-bg:#dceee1;
  --radius:12px; --radius-lg:18px; --radius-xl:26px;
  --shadow-card:0 0 0 1px rgba(18,37,28,.05),0 1px 2px -1px rgba(18,37,28,.06),0 10px 26px -14px rgba(18,37,28,.16);
  --shadow-card-hover:0 0 0 1px rgba(168,130,63,.22),0 2px 4px -2px rgba(18,37,28,.10),0 18px 36px -16px rgba(18,37,28,.22);
  --ring:0 0 0 3px rgba(168,130,63,.35);
  --font-sans:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --font-display:"Aref Ruqaa","Amiri",serif;
  /* Ruqʿah is calligraphy: lovely large, unreadable at 15px. Names are read,
     so they get the text face. Titles keep the calligraphy. */
  --font-name:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--cream);
  background-image:
    radial-gradient(1200px 480px at 80% -8%, rgba(42,90,64,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 4%, rgba(168,130,63,.09), transparent 55%)}
@media(min-width:768px){body{font-size:17px}}img,svg{max-width:100%}h1,h2,h3{line-height:1.25;text-wrap:balance}a{color:inherit;text-decoration:none}b,strong{font-weight:700}.nasab{font-family:var(--font-name);line-height:1.75;font-weight:400}.muted{color:var(--muted)}.subtle{color:var(--subtle)}.small{font-size:14px}.center{text-align:center}.mt{margin-top:16px}.mb{margin-bottom:16px}.link{color:var(--leaf);font-weight:600}.link:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}.grain{pointer-events:none;position:fixed;inset:0;z-index:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}.container{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:22px 14px 8px}
@media(min-width:768px){.container{padding:34px 16px 8px}}/* header */
.site-header{position:relative;z-index:2;color:var(--sand);
  background:linear-gradient(180deg,var(--deep-2),var(--deep));
  border-bottom:2px solid var(--leaf);box-shadow:0 2px 0 var(--brass-line),0 10px 30px -18px rgba(0,0,0,.6)}
@media(min-width:900px){}.brand{display:flex;align-items:center;gap:12px;color:var(--sand)}.seal{width:46px;height:46px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.seal-lg{width:52px;height:52px;flex:none}.brand-title{display:block;font-family:var(--font-display);font-size:23px;line-height:1.1;color:var(--paper)}
@media(min-width:480px){.brand-title{font-size:25px}}.brand-sub{display:block;margin-top:5px;font-size:12px;color:rgba(226,214,191,.82);letter-spacing:.01em}.main-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;font-size:15px;font-weight:600}.main-nav a{padding:8px 12px;border-radius:999px;color:rgba(247,243,234,.86);transition:background .15s,color .15s}.main-nav a:hover,.main-nav a:focus-visible{color:var(--paper);background:rgba(247,243,234,.10)}
@media(min-width:900px){}.search{display:flex;flex:1 1 220px;min-width:0}
@media(min-width:900px){.search{flex:none}}.search input{min-height:44px;width:100%;flex:1;min-width:0;border:0;border-radius:999px 0 0 999px;
  background:var(--paper);color:var(--ink);padding:0 16px;font-family:inherit;font-size:16px}.search input::placeholder{color:var(--subtle)}
@media(min-width:900px){.search input{width:212px;flex:none}}.search button{min-height:44px;border:0;border-radius:0 999px 999px 0;background:var(--leaf);
  color:var(--accent-fg);padding:0 18px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s}.search button:hover{background:var(--leaf-soft)}/* footer */
.site-footer{position:relative;z-index:1;color:var(--sand);text-align:center;padding:28px 16px;margin-top:40px;
  background:linear-gradient(180deg,var(--deep),var(--deep-2));border-top:2px solid var(--leaf);
  box-shadow:0 -2px 0 var(--brass-line)}.site-footer b{color:var(--paper)}.foot-sub{color:rgba(226,214,191,.8);margin:6px 0 0;font-size:14px}.foot-dedication{margin:16px auto 0;padding-top:14px;max-width:34rem;font-family:var(--font-display);
  font-size:16px;line-height:1.9;color:var(--brass-soft);border-top:1px solid rgba(201,168,106,.28)}.foot-fatiha{margin:2px 0 0;font-size:13px;letter-spacing:.04em;color:rgba(226,214,191,.75)}/* card + buttons */
.card{background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-card)}
@media(min-width:768px){.card{padding:30px}}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  border-radius:999px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:16px;
  transition:transform .12s,box-shadow .15s,background .15s}.btn:active{transform:translateY(1px)}.btn-leaf{background:var(--leaf);color:var(--accent-fg);box-shadow:0 6px 16px -8px rgba(42,90,64,.7)}.btn-leaf:hover{background:var(--leaf-soft)}.btn-deep{background:var(--deep);color:var(--paper);box-shadow:0 6px 16px -8px rgba(15,32,25,.7)}.btn-deep:hover{background:var(--deep-2)}.btn-outline{background:transparent;border-color:var(--leaf);color:var(--leaf)}.btn-outline:hover{background:rgba(42,90,64,.08)}.btn-danger{background:var(--danger);color:var(--paper)}.btn-danger:hover{filter:brightness(1.08)}/* 38px was below a comfortable thumb,and these are the buttons stewards use most:
   132 rows on the people list alone put 264 targets under the threshold. */
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}.btn-lg{min-height:52px}.btn-block,.btn-lg.btn-block{width:100%}/* grids */
.grid{display:grid;gap:12px}.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:repeat(4,1fr)}}/* section + page titles — a "ledger section" rule with a brass seal-mark */
.section-title{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:400;
  font-size:25px;color:var(--leaf);margin:30px 0 16px}
@media(min-width:768px){.section-title{font-size:30px;margin:44px 0 18px}}.section-title::before{content:"";width:11px;height:11px;transform:rotate(45deg);flex:none;
  background:var(--brass);box-shadow:0 0 0 4px rgba(168,130,63,.14)}.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass-line),transparent)}.page-title{font-family:var(--font-display);font-weight:400;font-size:27px;color:var(--leaf);margin:8px 0}
@media(min-width:768px){.page-title{font-size:34px}}/* hero — cinematic photographic cover */
.hero-cover{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-xl);
  background:#0f2019;display:flex;align-items:stretch;
  min-height:clamp(430px,66vh,600px);box-shadow:var(--shadow-card)}.hero-cover::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 40%;
  background-image:url('img/cover.jpg');
  background-image:-webkit-image-set(url('img/cover.webp') type('image/webp'),url('img/cover.jpg') type('image/jpeg'));
  background-image:image-set(url('img/cover.webp') type('image/webp'),url('img/cover.jpg') type('image/jpeg'));
  transform:scale(1.02)}
@media(max-width:640px){.hero-cover::before{
  background-image:url('img/cover-800.jpg');
  background-image:-webkit-image-set(url('img/cover-800.webp') type('image/webp'),url('img/cover-800.jpg') type('image/jpeg'));
  background-image:image-set(url('img/cover-800.webp') type('image/webp'),url('img/cover-800.jpg') type('image/jpeg'))}}.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg,rgba(9,17,12,.94) 0%,rgba(9,17,12,.7) 30%,rgba(9,17,12,.28) 62%,rgba(12,26,20,.42) 100%),
  radial-gradient(120% 90% at 85% 0%,transparent 40%,rgba(9,17,12,.35) 100%)}.hero-content{position:relative;z-index:2;color:var(--paper);display:flex;flex-direction:column;
  justify-content:flex-end;width:100%;padding:clamp(22px,5vw,52px)}.hero-seal{display:flex;align-items:center;gap:12px;margin-bottom:14px}.hero-cover .seal-lg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}.hero-place{font-size:13px;font-weight:700;color:var(--brass-soft);margin:0;letter-spacing:.04em;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}.hero-title{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--paper);margin:0;line-height:1.12;
  text-shadow:0 3px 18px rgba(0,0,0,.55)}
@media(min-width:480px){.hero-title{font-size:46px}}
@media(min-width:768px){.hero-title{font-size:58px}}.hero-lead{font-size:16.5px;margin:14px 0 0;max-width:38rem;color:rgba(244,238,226,.94);
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media(min-width:768px){.hero-lead{font-size:18.5px}}.hero-lead b{color:var(--brass-soft)}.hero-sub{color:rgba(226,214,191,.82);margin:10px 0 0;max-width:38rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.hero-actions .btn{flex:1 1 100%}
@media(min-width:480px){.hero-actions .btn{flex:0 1 auto}}.btn-ghost{background:rgba(248,244,236,.12);color:var(--paper);border-color:rgba(226,214,191,.42);backdrop-filter:blur(4px)}.btn-ghost:hover{background:rgba(248,244,236,.2)}/* stats read like a ledger tally — glassy over the photo */
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;margin-top:24px;max-width:560px}
@media(min-width:600px){.hero-stats{grid-template-columns:repeat(4,1fr)}}.hero-cover .stat{background:rgba(248,244,236,.1);border-color:rgba(226,214,191,.24);backdrop-filter:blur(7px)}.hero-cover .stat::before{background:var(--brass-soft)}.hero-cover .stat b{color:var(--paper)}.hero-cover .stat span{color:rgba(226,214,191,.86)}.stat{position:relative;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;overflow:hidden}.stat::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;
  border-radius:999px;background:var(--brass-soft)}.stat b{display:block;font-size:26px;color:var(--leaf);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.stat span{font-size:13.5px;color:var(--muted)}.family-card{transition:transform .15s,box-shadow .15s}.family-card h3{margin:0;font-size:18px;color:var(--deep)}.family-card p{margin:5px 0 0}.family-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}/* chip */
.chip{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 12px;box-shadow:var(--shadow-card);
  transition:transform .15s,box-shadow .15s}.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}.chip-body{min-width:0}.chip-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-nick{font-size:14px;font-weight:600;color:var(--muted)}.chip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.avatar{display:grid;place-items:center;border-radius:999px;color:var(--paper);font-weight:700;flex:none;
  font-family:var(--font-name);box-shadow:0 0 0 3px rgba(255,255,255,.5),0 2px 6px -2px rgba(18,37,28,.4)}.avatar-m{background:linear-gradient(155deg,var(--leaf),var(--deep))}.avatar-f{background:linear-gradient(155deg,var(--clay),#5f371f)}.avatar-sm{width:36px;height:36px;font-size:15px}.avatar-md{width:44px;height:44px;font-size:18px}.avatar-lg{width:60px;height:60px;font-size:24px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}.badge .dot{width:6px;height:6px;border-radius:999px}.badge-alive{background:var(--ok-bg);color:var(--alive)}.badge-alive .dot{background:var(--alive)}.badge-dead{background:var(--sand);color:var(--dead)}.badge-dead .dot{background:var(--dead)}/* nasab — the signature lineage band */
.person-nasab{position:relative;font-family:var(--font-name);color:var(--leaf);
  background:linear-gradient(180deg,rgba(168,130,63,.06),transparent);
  border-block:1px solid var(--brass-line);padding:14px 34px;margin:20px 0 0}.person-nasab::before{content:"";position:absolute;inset-inline-start:12px;top:50%;
  width:9px;height:9px;transform:translateY(-50%) rotate(45deg);background:var(--brass);
  box-shadow:0 0 0 3px rgba(168,130,63,.16)}.person-nasab{font-size:20px}
@media(min-width:768px){}/* around tree */
.around{padding:16px}
@media(min-width:768px){.around{padding:26px}}
@media(min-width:640px){}.bar{margin:5px 12%;height:2px;background:linear-gradient(90deg,transparent,var(--brass-line),transparent)}.tree-card{position:relative;display:block;width:150px;border-radius:var(--radius);padding:11px 10px 10px;
  text-align:center;background:var(--paper);color:var(--ink);border:1px solid var(--border);
  box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s}.tree-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}.tree-card-dead{background:var(--cream)}.tree-card-featured{width:178px;background:linear-gradient(160deg,var(--deep-2),var(--deep));color:var(--paper);
  border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 14px 30px -14px rgba(15,32,25,.7)}.tree-card-featured .tc-nick,.tree-card-featured .tc-fam,.tree-card-featured .tc-years{color:var(--sand)}.node-dot{position:absolute;inset-inline-start:9px;top:9px;width:8px;height:8px;border-radius:999px;
  box-shadow:0 0 0 2px rgba(255,255,255,.55)}.dot-alive{background:var(--alive)}.dot-dead{background:var(--dead)}.tc-name{display:block;margin-top:2px;font-size:15px;font-weight:700;line-height:1.3}.tc-nick{display:block;font-size:12px;color:var(--muted)}.tc-fam{display:block;font-size:11px;color:var(--subtle)}.tc-years{display:block;margin-top:3px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}.zoom{display:flex;gap:6px}.zoom button{width:40px;height:40px;border:1px solid var(--border);border-radius:999px;background:var(--cream);
  color:var(--ink);font-size:18px;cursor:pointer;transition:background .15s}.zoom button:hover{background:var(--sand)}/* mode switch / tabs */
.tree-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.tabs{display:inline-flex;gap:4px;background:var(--sand);padding:5px;border-radius:999px;
  border:1px solid var(--border)}.tab{min-height:40px;display:inline-flex;align-items:center;border-radius:999px;
  padding:0 16px;font-size:14px;font-weight:700;color:var(--ink);transition:background .15s,color .15s}.mode-switch a.on,.tab.on{background:var(--deep);color:var(--paper);box-shadow:0 0 0 1px var(--brass-line)}.tabs{flex-wrap:wrap;margin:20px 0}/* person page */
.person-grid{display:grid;gap:22px}
@media(min-width:768px){.person-grid{grid-template-columns:1.1fr .9fr}}.person-head{display:flex;align-items:flex-start;gap:16px}.person-name{font-family:var(--font-name);font-weight:700;font-size:30px;margin:0;color:var(--deep)}.pp-nick,.person-name .pp-nick{font-family:var(--font-sans);font-size:18px;font-weight:600;color:var(--muted)}.person-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.fam-link{font-size:14px;font-weight:700;color:var(--leaf)}.fam-link:hover{text-decoration:underline}.years{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}.person-dl{display:grid;grid-template-columns:6.5rem 1fr;gap:8px 14px;font-size:14.5px;margin:22px 0}.person-dl dt{color:var(--brass);font-weight:700}.person-dl dd{margin:0}.person-side{display:grid;gap:16px}.side-block h2{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--brass);margin:0 0 8px}.empty{background:var(--cream);border:1px dashed var(--line);border-radius:var(--radius);
  padding:10px 14px;font-size:14px;color:var(--muted)}.crumb{font-size:14px;color:var(--muted)}.crumb a:hover{color:var(--leaf)}.sep{margin:0 8px;color:var(--line)}.family-note{max-width:42rem;margin:8px 0 0}/* forms */
.form-card{max-width:42rem}.center-card{max-width:36rem;text-align:center}.center-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}.stack{display:grid;gap:16px;margin-top:24px;grid-template-columns:minmax(0,1fr)}.two{display:grid;gap:12px}@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}.fld{display:grid;gap:6px;font-size:14px;font-weight:600}.fld input,.fld select,.fld textarea{min-height:46px;width:100%;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--paper);padding:0 14px;font-weight:400;font-family:inherit;
  color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s}.fld textarea{min-height:104px;padding:12px 14px;line-height:1.6}.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--leaf);box-shadow:var(--ring)}.form-error{background:#f7e2e2;border:1px solid #e6bcbc;color:var(--danger);padding:11px 14px;
  border-radius:var(--radius);font-size:14px;font-weight:600}.hp-field{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}.stack hr{border:0;border-top:1px solid var(--border);margin:2px 0}.prose{max-width:52rem}.prose-h1{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--leaf);margin:0}.prose h2{margin:30px 0 0;font-size:20px;color:var(--deep)}.prose p,.prose li{max-width:52rem}.prose ol{margin-top:10px;padding-inline-start:24px}.prose li{margin:8px 0}.prose li::marker{color:var(--brass);font-weight:700}/* admin */
.tile{position:relative;background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-card);overflow:hidden}.tile b{display:block;font-size:32px;color:var(--leaf);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.tile span{color:var(--muted);font-size:14px}.tile-accent{background:linear-gradient(160deg,var(--deep-2),var(--deep));border-color:var(--brass)}.tile-accent b{color:var(--paper)}.tile-accent span{color:var(--sand)}.flash{background:var(--ok-bg);border:1px solid #b9dcc6;color:var(--ok);padding:11px 14px;
  border-radius:var(--radius);font-weight:600}.review-item{padding:18px 20px}.ri-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.ri-kind{background:var(--deep);color:var(--paper);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700}.ri-date{font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}.ri-from{margin:10px 0 0;font-size:14px}.ri-payload{margin-top:12px;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;font-size:14px}.ri-payload ul{margin:0;padding-inline-start:18px;display:grid;gap:4px}.ri-payload p{margin:0}.ri-payload li::marker{color:var(--brass)}.ri-actions{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ri-note{flex:1;min-width:12rem;min-height:44px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);padding:0 12px;font-size:14px;font-family:inherit}.ri-note:focus{outline:none;border-color:var(--leaf);box-shadow:var(--ring)}.ri-status{margin-top:12px}/* login */
.login-card{max-width:28rem;margin:44px auto}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}.login-brand strong{display:block;font-family:var(--font-display);font-size:24px;color:var(--leaf)}/* admin management */
.admin-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:6px;border:1px solid var(--border);
  background:var(--paper);border-radius:999px;box-shadow:var(--shadow-card)}.admin-tab{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  font-size:14px;font-weight:700;color:var(--ink);transition:background .15s,color .15s}.admin-tab:hover{background:var(--cream)}.admin-tab.on{background:var(--deep);color:var(--paper)}.admin-tab.admin-out{margin-inline-start:auto;color:var(--danger)}.admin-tab.admin-out:hover{background:rgba(138,58,58,.1)}
@media(max-width:559px){.admin-tab.admin-out{margin-inline-start:0}}.admin-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.admin-search{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.admin-search input{flex:1;min-width:12rem;min-height:44px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);padding:0 14px;font-family:inherit;font-size:16px}.admin-search input:focus{outline:none;border-color:var(--leaf);box-shadow:var(--ring)}.rows{display:grid;gap:8px}.row-item{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow-card)}.row-main{flex:1;min-width:0;display:block;color:inherit;border-radius:8px;padding:4px 6px;margin:-4px -6px;
  transition:background .12s}a.row-main:hover{background:var(--cream)}.row-name{font-weight:600}.row-name .chip-nick{font-size:13px}.row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.row-actions{display:flex;flex-wrap:wrap;gap:6px;flex:none}.row-actions form{margin:0;display:inline-flex}.undo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--ok-bg);
  border:1px solid #b9dcc6;border-radius:var(--radius);padding:12px 16px;margin:0 0 18px;
  font-weight:600;color:var(--ok)}.undo-bar form{margin:0}.editor-form{display:block}.field-group{padding:18px 0;border-top:1px solid var(--border)}.field-group:first-of-type{padding-top:0;border-top:0}.field-group .fld{margin-bottom:14px}.field-group .fld:last-child{margin-bottom:0}.field-group .two{margin-bottom:14px}.group-label{font-family:var(--font-display);font-size:19px;color:var(--leaf);margin:0 0 14px;
  display:flex;align-items:center;gap:10px}.group-label::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--brass);flex:none}.group-hint{font-size:13px;color:var(--muted);margin:-8px 0 12px}.editor-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-top:18px;border-top:1px solid var(--border)}.editor-actions .btn{flex:1 1 auto}
@media(min-width:560px){.editor-actions .btn{flex:0 1 auto}}
@media(max-width:559px){.editor-actions{position:sticky;bottom:0;z-index:5;margin:0 -22px -22px;padding:14px 22px;
    background:linear-gradient(180deg,rgba(248,244,236,.55),var(--paper) 45%);
    border-radius:0 0 var(--radius-xl) var(--radius-xl)}
}/* type-to-filter picker (parents/spouse) */
.combo{position:relative}.danger-zone{margin-top:16px;border:1px solid #e6bcbc;background:linear-gradient(180deg,#fbf1f1,var(--paper));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.dz-title{margin:0;font-size:18px;color:var(--danger)}.add-card{border-style:dashed}.side-block-title{margin:0 0 12px;font-size:16px;color:var(--deep)}.family-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.family-add .fam-name{flex:1 1 12rem;min-height:46px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);padding:0 14px;font-family:inherit;font-size:16px}.family-add .fam-note{flex:2 1 16rem;min-height:46px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);padding:0 14px;font-family:inherit;font-size:16px}.family-add input:focus{outline:none;border-color:var(--leaf);box-shadow:var(--ring)}.family-row{display:grid;gap:12px}.family-row-grid{display:grid;gap:12px}
@media(min-width:640px){.family-row-grid{grid-template-columns:1fr 1.4fr}}.family-row-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.admin-row{display:grid;gap:12px}.admin-row-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.admin-username{font-family:var(--font-display);font-size:20px;color:var(--deep)}.me-tag{display:inline-block;margin-inline-start:8px;background:var(--ok-bg);color:var(--ok);
  border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;vertical-align:middle}.passwd-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--border);padding-top:12px}.passwd-form input{flex:1 1 8rem;min-width:0;min-height:44px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper);padding:0 14px;font-family:inherit;font-size:16px}.passwd-form input:focus{outline:none;border-color:var(--leaf);box-shadow:var(--ring)}.admin-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:16px;
  border-top:1px dashed var(--brass-line)}.admin-tools-label{font-size:12px;font-weight:700;color:var(--brass);letter-spacing:.03em}/* tree: per-node steward controls */
.tnode{display:inline-flex;flex-direction:column;align-items:stretch;gap:6px}.tnode-tools{display:flex;flex-direction:column;gap:5px}.tnode-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  gap:4px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:700;white-space:nowrap;
  border:1px solid var(--brass-line);background:var(--paper);color:var(--leaf);transition:background .15s,border-color .15s}.tnode-btn:hover{background:var(--cream);border-color:var(--brass)}.tnode-add{color:var(--clay)}/* in-place editor sheet (add / edit on the tree) */
.sheet-lock{overflow:hidden}.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}.sheet[hidden]{display:none}
@media(min-width:640px){.sheet{align-items:center;padding:24px}}.sheet-backdrop{position:absolute;inset:0;background:rgba(12,26,20,.66);backdrop-filter:blur(2px)}.sheet-panel{position:relative;z-index:1;width:100%;max-width:44rem;max-height:92vh;overflow:auto;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px;
  animation:sheetUp .22s ease}
@media(min-width:640px){.sheet-panel{border-radius:var(--radius-xl);animation:sheetIn .18s ease}}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes sheetIn{from{transform:scale(.97);opacity:.4}to{transform:scale(1);opacity:1}}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sheet-title{font-family:var(--font-display);font-size:22px;color:var(--leaf);margin:0}.sheet-x{width:38px;height:38px;flex:none;border:1px solid var(--border);border-radius:999px;
  background:var(--cream);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}.sheet-x:hover{background:var(--sand)}.sheet-form{display:grid;gap:14px}.sheet-form .two{gap:12px}.sheet-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;position:sticky;bottom:-20px;
  background:linear-gradient(180deg,rgba(248,244,236,.4),var(--paper) 40%);padding:12px 0 2px;margin-top:4px}.sheet-actions .btn{flex:1 1 auto}
@media(min-width:560px){.sheet-actions .btn{flex:0 1 auto}}/* full-width photographic bands — real scenes from the village */
.photo-band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-xl);
  margin:34px 0;min-height:210px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--paper);background:#16241b center/cover no-repeat;box-shadow:var(--shadow-card)}.photo-band.band-tall{min-height:280px}
@media(min-width:768px){.photo-band{min-height:250px}.photo-band.band-tall{min-height:360px}}.band-pic{position:absolute;inset:0;z-index:0}.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.band-gate .band-img{object-position:center 60%}.band-children .band-img{object-position:center 42%}.band-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,20,15,.32),rgba(10,20,15,.6))}.band-inner{position:relative;z-index:2;padding:26px 24px;max-width:44rem}.band-title{font-family:var(--font-display);font-size:26px;color:var(--paper);margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
@media(min-width:768px){.band-title{font-size:34px}}.band-sub{margin:8px 0 0;font-size:15px;color:rgba(240,232,216,.93);text-shadow:0 1px 10px rgba(0,0,0,.5)}/* logout is a POST form styled to read exactly like the old link */
.inline-form{display:inline-flex;margin:0}.inline-form button{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer}.admin-out-form{margin-inline-start:auto}
@media(max-width:559px){.admin-out-form{margin-inline-start:0}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}/* ── Steward signal: unseen suggestions (workflow finding F1) ───────────── */
.auth-slot.has-pending{ border-color: #c8862a; }.pending-dot{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.35em; margin-inline-start: .4em; padding: 0 .35em;
  border-radius: 999px; background: #c8862a; color: #fff;
  font-size: .78em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}/* ── Attaching a suggested name to its parent at approval (finding F3) ──── */
.ri-attach{
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: .6rem 0; padding: .6rem .7rem;
  background: rgba(42, 90, 64, .06); border: 1px solid rgba(42, 90, 64, .18); border-radius: 10px;
}.ri-attach .fld{ flex: 1 1 14rem; margin: 0; font-size: .86rem; }.ri-attach select{ width: 100%; }.ri-attach-hint{ flex: 1 1 100%; margin: 0 0 .1rem; font-size: .8rem; color: #6b6257; }/* ── Collapsible descendant chart (line view) ───────────────────────────────
   Laid out in the browser so branches fold and the chart re-flows. The old
   fixed layout was 7{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px 0}.ftnode.ftf{border-color:var(--brass);background:linear-gradient(180deg,#fdf8ef,var(--paper))}/* Tap target for folding a branch. 28px circle{position:absolute;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid var(--brass);background:var(--deep);color:var(--paper);
  font:700 12px/1 var(--font-sans);display:flex;align-items:center;justify-content:center;padding:0;z-index:2}/* No-JS / failure fallback: a plain nested list of names. */
.ftfallback,.ftfallback ul{list-style:none;margin:0;padding-inline-start:14px}.ftfallback li{padding:3px 0;border-inline-start:1px solid var(--border);padding-inline-start:10px}.ftfallback a{color:var(--deep);font-weight:600;text-decoration:none}/* ── One tree canvas: pan,pinch,tap to re-centre ─────────────────────────── */
.canvas-card{padding:0;overflow:hidden}.trail{display:flex;align-items:center;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px 12px;border-bottom:1px solid var(--border);background:var(--cream);
  scrollbar-width:none}.trail::-webkit-scrollbar{display:none}.tstep{flex:none;padding:7px 11px;min-height:38px;display:inline-flex;align-items:center;
  border-radius:999px;font-family:var(--font-name);font-size:15px;font-weight:600;
  color:var(--deep);text-decoration:none;background:var(--paper);border:1px solid var(--border);white-space:nowrap}.tstep.on{background:var(--deep);color:var(--paper);border-color:var(--brass)}.tsep{flex:none;color:var(--subtle);font-size:13px;padding:0 1px}.canvas-wrap{position:relative;height:62vh;min-height:340px;max-height:620px;overflow:hidden;
  background:var(--paper);touch-action:none;cursor:grab;overscroll-behavior:contain}.canvas-wrap.dragging{cursor:grabbing}.canvas-stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.csvg{position:absolute;inset:0;pointer-events:none;overflow:visible}.cedge{fill:none;stroke:var(--brass-line,#a9b4ad);stroke-opacity:.8;stroke-width:1.5}.cedge.pair{stroke-dasharray:3 3;stroke-opacity:.6}.cnode{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:4px 6px;border-radius:12px;text-align:center;text-decoration:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden}.cnode.cdead{background:var(--cream)}.cnode.cf{border-color:var(--brass)}.cnode.c-focus{background:linear-gradient(160deg,var(--deep-2,#16362a),var(--deep));color:var(--paper);
  border-color:var(--brass);box-shadow:0 0 0 2px var(--brass),0 14px 26px -14px rgba(15,32,25,.75);z-index:3}.cnode.c-focus .csub{color:rgba(255,255,255,.75)}.cname{font-family:var(--font-name);font-size:16px;font-weight:700;line-height:1.15;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.csub{font-size:12px;color:var(--muted);line-height:1.1;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}.cdot{position:absolute;top:5px;inset-inline-end:6px;width:7px;height:7px;border-radius:50%;background:var(--dead)}.cnode.calive .cdot{background:var(--alive)}.canvas-tools{position:absolute;inset-block-end:12px;inset-inline-end:12px;display:flex;gap:8px;z-index:5}.ctool{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--paper);
  color:var(--deep);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--shadow-card)}.ctool:active{background:var(--cream)}.canvas-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(18,37,28,.86);color:var(--paper);font-size:12px;padding:7px 13px;border-radius:999px;
  white-space:nowrap;z-index:4;transition:opacity .6s;pointer-events:none;max-width:92%}.canvas-hint.fade{opacity:0}
@media(min-width:768px){.canvas-wrap{height:66vh}.cname{font-size:17px}}.canvas-admin{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;
  border-bottom:1px solid var(--border);background:var(--paper);margin:0}/* Keyboard users must be able to see where they are. */
.cnode:focus-visible,.tstep:focus-visible,.ctool:focus-visible{
  outline:3px solid var(--brass);outline-offset:2px;border-radius:12px}
@media (prefers-reduced-motion: reduce){.canvas-stage{transition:none!important}.canvas-hint{transition:none}
}/* Touch feedback: a tap must answer immediately,before the canvas re-centres. */
.cnode{transition:transform .12s ease,box-shadow .12s ease}.cnode:active{transform:scale(.96)}.tstep:active,.ctool:active{transform:scale(.94)}/* The card that just became the centre says so,briefly. */
@keyframes ftLanded{0%{box-shadow:0 0 0 2px var(--brass),0 0 0 10px rgba(200,134,42,.34)}
  100%{box-shadow:0 0 0 2px var(--brass),0 14px 26px -14px rgba(15,32,25,.75)}}.cnode.c-focus.landed{animation:ftLanded .6s ease-out}/* Generation reads from weight,not from labels: the further back,the quieter. */
.cnode.c-gp{opacity:.82}.cnode.c-gp .cname{font-size:15px}

@media (prefers-reduced-motion: reduce){.cnode,.tstep,.ctool{transition:none}.cnode.c-focus.landed{animation:none}
}/* ── Compact header on phones ──────────────────────────────────────────────
   The header was costing 250-296px on every page before a single line of
   content,and on the home page it announced the name and the location that
   the hero repeats immediately below. The hero is the identity; up here a
   slim utility bar is enough. */
@media (max-width: 899px){
  .header-inner{padding:8px 12px;gap:8px}
  .seal{width:36px;height:36px}
  .brand-title{font-size:20px}
  .brand-sub{display:none}                 /* said again in the hero and the footer */
  /* One scrollable row instead of wrapping onto two. The fade at the edge says
     there is more to reach; without it a half-cut word just looks broken. */
  .main-nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start;
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}
  .main-nav::-webkit-scrollbar{display:none}
  /* One row, but never below a comfortable thumb target. */
  .main-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;
    padding:0 11px;font-size:15px;white-space:nowrap}
  .header-right{gap:6px}
  .search input{min-height:44px}
  .search button{min-height:44px}
  .auth-slot{min-height:44px;display:inline-flex;align-items:center}
}/* Thumb targets: the brand,the house link and breadcrumb links were all under
   40px. The honeypot is excluded on purpose,it is visually hidden. */
.brand{min-height:44px}.fam-link{display:inline-flex;align-items:center;min-height:40px;padding:4px 10px}.crumb a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}.pick-filter{width:100%;min-height:44px;margin-bottom:6px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--paper);font:inherit;font-size:15px;color:var(--ink)}.pick-filter:focus{outline:2px solid var(--leaf);outline-offset:-1px}/* ── Destructive actions must not look like the safe one ───────────────────
   In the trash,"حذف نهائي" is irreversible and sat beside "استرجاع" with the
   same weight and the same size. The safe action keeps the solid fill; the
   irreversible one recedes to an outline and is pushed away from it,so
   destroying a record takes intent rather than an inaccurate thumb. */
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn-danger:hover,.btn-danger:focus-visible{background:var(--danger);color:var(--paper);filter:none}.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row-actions form:has(.btn-danger){margin-inline-start:auto;padding-inline-start:10px}.danger-zone .btn-danger{background:var(--danger);color:var(--paper)}/* An empty slot is the site asking for help,not a dead end. */
.empty-ask{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;
  border:1px dashed var(--brass-line,#c8b48a);border-radius:12px;background:rgba(200,134,42,.06);
  color:var(--deep);font-size:14.5px;text-decoration:none;text-align:center}.empty-ask:hover,.empty-ask:focus-visible{background:rgba(200,134,42,.13);border-style:solid}.ri-call{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;margin-inline-start:8px;
  border-radius:999px;border:1px solid var(--leaf);color:var(--leaf);font-size:13.5px;text-decoration:none}.ri-call:hover,.ri-call:focus-visible{background:var(--leaf);color:var(--paper)}.list-filter-wrap{margin-top:14px}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}/* Form controls do not inherit type by default,so the header's "بحث" button and
   some inputs were rendering Arabic in Arial while everything around them used
   the site's face. */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}/* ── Find a person in the tree ─────────────────────────────────────────────
   The whole record is already in the browser,so this answers instantly and
   works with no connection at all. */
.finder{position:relative;padding:10px 12px 0}.finder-input{width:100%;min-height:46px;padding:0 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--paper);color:var(--ink);font-size:15.5px}.finder-input:focus{outline:2px solid var(--leaf);outline-offset:-1px}.finder-list{position:absolute;z-index:12;inset-inline:12px;top:58px;margin:0;padding:4px;
  list-style:none;background:var(--paper);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 18px 34px -18px rgba(15,32,25,.55);max-height:290px;overflow-y:auto}.finder-list li{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 12px;
  border-radius:9px;cursor:pointer}.finder-list li.on,.finder-list li:hover{background:var(--cream)}.finder-list .fn{font-family:var(--font-name);font-size:16px;font-weight:700;color:var(--ink)}.finder-list .fs{font-size:12.5px;color:var(--muted)}.finder-list .fd{margin-inline-start:auto;width:8px;height:8px;border-radius:50%;background:var(--dead)}.finder-list .fd.alive{background:var(--alive)}.finder-none{color:var(--muted);font-size:14px;justify-content:center}/* ── "how are we related?" ─────────────────────────────────────────────── */
.kin{position:relative;padding:0 12px 10px}.kin-toggle{width:100%;min-height:46px;padding:0 14px;border-radius:12px;cursor:pointer;
  border:1px dashed var(--brass-line,#c8b48a);background:rgba(200,134,42,.07);
  color:var(--deep);font-weight:600;font-size:14.5px;text-align:center}.kin-toggle:hover,.kin-toggle:focus-visible{background:rgba(200,134,42,.15);border-style:solid}.kin-panel{position:relative;margin-top:8px}.kin-list{top:52px}.kin-result{margin-top:10px}.kin-line{margin:0;font-size:16px;color:var(--ink);line-height:1.5}.kin-line b{font-family:var(--font-name);font-size:18px;color:var(--deep)}.kin-anc{margin:6px 0 0;font-size:13.5px;color:var(--muted)}.kin-anc a{color:var(--leaf);font-weight:600;text-decoration:none;border-bottom:1px solid var(--brass-line)}.kin-paths{margin-top:10px;display:flex;flex-direction:column;gap:7px}.kin-path{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px 9px;
  background:var(--cream);border:1px solid var(--border);border-radius:10px}.kp{font-family:var(--font-name);font-size:14px;font-weight:600;color:var(--deep);
  text-decoration:none;padding:3px 8px;border-radius:999px;background:var(--paper);
  border:1px solid var(--border);white-space:nowrap}.kp:hover,.kp:focus-visible{background:var(--leaf);color:var(--paper)}.kp-anc{background:var(--deep);color:var(--paper);border-color:var(--brass)}.kp-sep{color:var(--subtle);font-size:11px}/* ── Header ────────────────────────────────────────────────────────────────
   Was three centred rows of equal weight,166px tall,with the search field as
   the loudest thing on the page and the seal as the quietest. Now the seal and
   name hold one corner,the tools stay quiet in the other,and the menu says
   where you are. */
.site-header{position:relative;z-index:2;color:var(--sand);
  background:linear-gradient(180deg,var(--deep-2),var(--deep));
  border-bottom:1px solid rgba(200,134,42,.35);box-shadow:0 10px 30px -22px rgba(0,0,0,.8)}.header-bar{max-width:1120px;margin:0 auto;padding:9px 14px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:11px;color:var(--sand);min-height:44px;
  text-decoration:none;margin-inline-end:auto}.brand .seal{width:38px;height:38px;flex:none;transition:transform .25s ease}.brand:hover .seal{transform:rotate(-6deg) scale(1.04)}.brand-title{display:block;font-size:20px;line-height:1.05;color:var(--paper);letter-spacing:.2px}.brand-sub{display:block;margin-top:2px;font-size:12px;letter-spacing:.12em;
  color:rgba(226,214,191,.62);font-weight:600}.header-tools{display:flex;align-items:center;gap:6px;flex:none}.htool{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:42px;min-height:42px;padding:0 10px;border-radius:11px;cursor:pointer;
  background:rgba(247,243,234,.07);border:1px solid rgba(247,243,234,.14);
  color:rgba(247,243,234,.9);font:inherit;font-size:13.5px;text-decoration:none;
  transition:background .16s,border-color .16s}.htool:hover,.htool:focus-visible{background:rgba(247,243,234,.16);border-color:rgba(200,134,42,.6)}.htool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}.htool-text{font-weight:600}.htool-quiet{background:transparent;border-color:rgba(247,243,234,.2);color:rgba(247,243,234,.72)}.htool.has-pending{border-color:var(--brass);background:rgba(200,134,42,.18)}/* The search opens from the icon. With no JS it is simply always shown. */
.header-search{flex:1 0 100%;order:3;display:flex;align-items:center;gap:8px;position:relative;padding:0}.header-search.collapsible{display:none}.header-search.collapsible.open{display:flex}.header-search .hs-icon{position:absolute;inset-inline-start:12px;width:17px;height:17px;
  fill:none;stroke:rgba(18,37,28,.45);stroke-width:2;stroke-linecap:round;pointer-events:none}.header-search input{flex:1;min-width:0;min-height:44px;border:0;border-radius:11px;
  padding:0 14px 0 40px;background:var(--paper);color:var(--ink);font-size:15px}.header-search input:focus{outline:2px solid var(--brass);outline-offset:1px}.hs-go{min-height:44px;padding:0 16px;border-radius:11px;border:1px solid rgba(247,243,234,.2);
  background:rgba(247,243,234,.1);color:var(--paper);font-weight:600;font-size:14px;cursor:pointer}.hs-go:hover,.hs-go:focus-visible{background:var(--brass);border-color:var(--brass);color:#1a1206}/* The menu now says which page you are on. */
.main-nav{max-width:1120px;margin:0 auto;padding:0 10px 8px;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}.main-nav::-webkit-scrollbar{display:none}.main-nav a{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 12px;border-radius:9px;white-space:nowrap;
  color:rgba(247,243,234,.74);font-size:14.5px;font-weight:600;text-decoration:none;
  transition:color .16s,background .16s}.main-nav a:hover,.main-nav a:focus-visible{color:var(--paper);background:rgba(247,243,234,.09)}.main-nav a.on{color:var(--paper);background:rgba(247,243,234,.13)}.main-nav a.on::after{content:"";position:absolute;inset-inline:12px;bottom:2px;height:2px;
  border-radius:2px;background:var(--brass)}.nav-review{color:var(--brass-soft,#e0c48f)!important}

@media (min-width:900px){.header-bar{padding:12px 16px;gap:16px}.brand .seal{width:44px;height:44px}.brand-title{font-size:23px}/* On a wide screen it belongs beside the name,not on a line of its own. */
  .header-search.collapsible{display:flex;flex:0 1 300px;order:2;margin-inline-start:auto}.brand{margin-inline-end:0}.header-tools{order:3}
}/* ── Footer ────────────────────────────────────────────────────────────────
   The dedication is why this record exists,and it was sitting as the third of
   four centred paragraphs. It now has the page to itself,set apart by a rule
   and the seal,in the calligraphic face that earns its keep at this size. */
.site-footer{margin-top:44px;padding:0;background:linear-gradient(180deg,var(--deep),var(--deep-2));
  border-top:1px solid rgba(200,134,42,.35);color:rgba(226,214,191,.8)}.foot-inner{max-width:760px;margin:0 auto;padding:26px 18px 34px;text-align:center}.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:18px}.foot-nav a{min-height:42px;display:inline-flex;align-items:center;padding:0 13px;border-radius:9px;
  color:rgba(247,243,234,.78);font-size:14.5px;font-weight:600;text-decoration:none}.foot-nav a:hover,.foot-nav a:focus-visible{background:rgba(247,243,234,.1);color:var(--paper)}.foot-nav a[aria-current]{color:var(--brass-soft,#e0c48f)}.foot-place{margin:0;font-size:14px;line-height:1.7;color:rgba(226,214,191,.86)}.foot-place b{color:var(--paper)}.foot-sub{margin:8px 0 0;font-size:13px;line-height:1.75;color:rgba(226,214,191,.6);
  max-width:46ch;margin-inline:auto}.dedication{margin-top:26px;padding-top:24px;border-top:1px solid rgba(200,134,42,.28);
  display:flex;flex-direction:column;align-items:center;gap:8px}.seal-ded{width:40px;height:40px;opacity:.85}.foot-dedication{margin:0;font-family:var(--font-display);font-size:19px;line-height:1.85;
  color:var(--brass-soft,#e0c48f)}.foot-dedication b{display:inline-block;margin-top:2px;font-size:23px;color:var(--paper)}.foot-fatiha{margin:2px 0 0;font-size:13.5px;color:rgba(226,214,191,.66)}/* ── Card hierarchy ────────────────────────────────────────────────────────
   Fourteen different things wore the same card: the whole tree and one row of a
   list had the same radius,the same shadow and the same padding,so nothing
   read as more important than anything else. Repeated rows now sit flat,and
   only real surfaces lift off the page. */
.review-item,.admin-row,.family-row{box-shadow:none;border-radius:var(--radius-lg);padding:16px}
@media(min-width:768px){.review-item,.admin-row,.family-row{padding:20px}}.review-item{border-inline-start:3px solid var(--border)}.review-item:has(.ri-actions){border-inline-start-color:var(--brass)}.canvas-card,.form-card,.login-card{box-shadow:var(--shadow-card)}.center-card{box-shadow:var(--shadow-card)}